:root {
  --dark: #000;
  --color-principal: #ED1B24;
  --color-secundario: #00A7D0;
  --color-principalrgba: #1E3A5F;
  --color-sidebar: #000000;
  --color-sidebar-texto: #C2C7D0;
  --color-sidebar-activo: #ED1B24;
  --color-acento: #F39C12;
  --color-fondo: #F4F6F9;
  --color1: #575a5c;
}

/* Fuente Lexend — global */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;300;400;500;600;700;900&display=swap');
body, .wrapper, .content-wrapper, .main-sidebar, .main-footer,
.navbar, .nav-link, .btn, .form-control, .card, .card-title, .card-body,
.modal, .modal-title, .modal-body, .modal-footer,
table, th, td, .table, .dataTables_wrapper,
select, input, textarea, label, legend, h1, h2, h3, h4, h5, h6, p, span, a, li,
.dropdown-menu, .dropdown-item, .badge, .alert, .toast,
.content-header, .breadcrumb, .page-link,
.swal2-popup, .swal2-title, .swal2-content, .swal2-confirm, .swal2-cancel {
  font-family: 'Lexend', sans-serif !important;
}

/* ===== LOGO SUPERIOR MÓVIL/TABLET ===== */
.logo-top-bar {
  display: none;
  align-items: center;
  justify-content: center;
  height: 57px;
  background-color: #ffffff;
  /* <-- CAMBIA AQUÍ EL COLOR */
}

.logo-top-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.logo-top-bar img {
  max-height: 95%;
  width: auto;
}

/* Logo grande en sidebar expandido */
.logo-xl {
  max-height: 45px !important;
  margin-left: 0.5rem !important;
}

/* Logo mini en sidebar colapsado */
.logo-xs {
  max-height: 40px;
}

/* Sidebar sin brand-link: subir contenido */
.sidebar {
  height: 100% !important;
  margin-top: 0 !important;
  padding-top: 0.5rem !important;
}

/* Logo en navbar sin espacios */
.main-header .navbar-nav .nav-link[data-widget="pushmenu"] {
  padding: 0 !important;
  margin: 0 !important;
  height: 50px !important;
}
.main-header .navbar-nav .nav-link[data-widget="pushmenu"] img {
  height: 50px !important;
  display: block;
}

/* Título + descripción en navbar (misma línea) */
.navbar-titulo-item {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Solo móvil/tablet (incluyendo iPad horizontal) */
@media (max-width: 1199.98px) {
  .logo-top-bar {
    display: flex !important;
    height: 70px;
  }

  .main-sidebar>.brand-link.logo-switch {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .sidebar {
    padding-top: 0.5rem !important;
    margin-top: 0 !important;
  }

  .layout-fixed .main-sidebar {
    padding-top: 0 !important;
  }

  .layout-navbar-fixed .wrapper .sidebar {
    margin-top: 0 !important;
  }
}

/* ===== NAVBAR MÓVIL: logo arriba, título abajo ===== */
/* Ocultar botón salir del sidebar en desktop */
.sidebar-salir-item {
  display: none !important;
}

@media (max-width: 767.98px) {
  /* Navbar: flex-wrap para apilar logo y título */
  .main-header.navbar {
    flex-wrap: wrap !important;
    min-height: auto !important;
  }

  /* Logo: fila completa, centrado */
  .navbar-mobile-stack {
    width: 100%;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
    padding: 0;
    margin: 0;
  }

  .navbar-logo-item {
    width: 100%;
    display: flex !important;
    justify-content: center;
    padding: 5px 0 0 0;
  }

  .navbar-logo-item .nav-link {
    justify-content: center !important;
  }

  /* Título: fila completa, centrado */
  .navbar-titulo-item {
    width: 100%;
    justify-content: center;
    margin-left: 0 !important;
  }

  .navbar-titulo-item #navbar-titulo {
    padding: 0 !important;
    font-size: 22px !important;
  }

  .navbar-titulo-item #navbar-descripcion {
    display: none !important;
  }

  /* Ocultar barra derecha (user, salir) en móvil */
  .navbar-right-desktop {
    display: none !important;
  }

  /* Mostrar botón salir en sidebar en móvil */
  .sidebar-salir-item {
    display: block !important;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 10px;
    padding-top: 10px;
  }

  /* Ajustar margin-top del content para navbar más alto */
  .layout-navbar-fixed .wrapper .content-wrapper {
    margin-top: 95px !important;
  }
}

/* ===== SIDEBAR ESTILOS — SIGARN ===== */
.sidebar a {
  color: var(--color-sidebar-texto) !important;
}

[class*="sidebar-dark-"] {
  background-color: var(--color-sidebar) !important;
}

.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*="navbar"]) {
  background-color: var(--color-sidebar) !important;
}

.layout-navbar-fixed .wrapper .content-wrapper {
  margin-top: 53px;
}

.content-wrapper > .content {
  padding-top: 6px;
}

/* Footer compacto y rojo */
.main-footer {
  padding: 4px 15px !important;
  font-size: 13px;
  color: var(--color-principal) !important;
}
.main-footer a {
  color: var(--color-principal) !important;
}

/* Hover: color principal */
[class*="sidebar-dark-"] .nav-sidebar>.nav-item:hover>.nav-link,
[class*="sidebar-dark-"] .nav-sidebar>.nav-item>.nav-link:focus,
[class*="sidebar-dark-"] .nav-sidebar>.nav-item>.nav-link:hover {
  background-color: var(--color-principal);
  color: #fff !important;
}

[class*="sidebar-dark-"] .nav-treeview>.nav-item>.nav-link:hover,
[class*="sidebar-dark-"] .nav-treeview>.nav-item>.nav-link:focus {
  background-color: var(--color-principal);
  color: #fff !important;
}

/* Item activo: rojo Navarro */
.nav-sidebar .nav-link.active {
  background-color: var(--color-sidebar-activo) !important;
  color: #ffffff !important;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
  background-color: var(--color-sidebar-activo) !important;
  color: #ffffff !important;
}

.dark-mode .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active {
  background-color: var(--color-sidebar-activo);
}

[class*="sidebar-dark-"] .nav-treeview>.nav-item>.nav-link.active,
[class*="sidebar-dark-"] .nav-treeview>.nav-item>.nav-link.active:hover,
[class*="sidebar-dark-"] .nav-treeview>.nav-item>.nav-link.active:focus {
  background-color: var(--color-sidebar-activo);
}

[class*="sidebar-dark-"] .nav-sidebar>.nav-item.menu-open>.nav-link {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Fondos escalonados: subitem1 > subitem2 */
.nav-treeview {
  background-color: rgba(255,255,255,0.18) !important;
}
.nav-treeview .nav-treeview {
  background-color: rgba(255,255,255,0.30) !important;
}

/* Flecha indicadora de submenú */
.nav-sidebar .has-treeview > .nav-link .flecha-submenu {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  margin-left: 5px;
  transition: transform ease-in-out 0.3s;
  display: inline-block;
}
.nav-sidebar .has-treeview:hover > .nav-link .flecha-submenu {
  color: #fff;
}
.nav-sidebar .has-treeview.menu-open > .nav-link .flecha-submenu {
  color: #fff;
  transform: rotate(-90deg);
}

.nav-sidebar .menu-open>.nav-link svg.right,
.nav-sidebar .menu-open>.nav-link i.right,
.nav-sidebar .menu-is-opening>.nav-link svg.right,
.nav-sidebar .menu-is-opening>.nav-link i.right {
  transform: rotate(-180deg);
}

/* ===== FIELDSET SECCIONES ===== */
.fieldset-seccion {
  border: 2px solid #ccc;
  border-radius: 0;
  padding: 15px;
  margin-bottom: 20px;
  background: #fff;
}

.fieldset-seccion legend {
  width: auto;
  padding: 0 10px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  border: none;
}

.fieldset-verde {
  border-color: #ccc;
}

.fieldset-verde legend {
  color: #333;
}

.fieldset-naranja {
  border-color: #ccc;
}

.fieldset-naranja legend {
  color: #333;
}

/* ===== OCULTAR SPINNERS DE INPUTS NUMÉRICOS ===== */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* ===== OTROS ESTILOS ===== */

.content-header {
  padding: 5px;
}

input:invalid {
  border: 2px solid red;
}

table.dataTable th.dt-type-numeric,
table.dataTable td.dt-type-numeric {
  text-align: right;
}

table.dataTable th.dt-type-date,
table.dataTable td.dt-type-text,
table.dataTable td.dt-type-date,
table.dataTable td.dt-type-text {
  text-align: left !important;
}

.bootstrap-select .dropdown-menu li.selected a {
  background-color: #007bff !important;
  color: white !important;
}

.bootstrap-select .dropdown-toggle.bs-placeholder {
  border: 1px solid #dc3545 !important;
  color: #dc3545 !important;
}

table input[readonly] {
  background-color: #f0f0f0;
  pointer-events: none;
  border: 1px solid #ccc;
}

.btn-spacing {
  margin-right: 10px;
}

/* Estilo global para encabezados y pie de tablas */
table.table thead th,
table.table tfoot th {
  background-color: var(--color-secundario) !important;
  color: white !important;
  text-align: center !important;
  font-weight: 700;
}

/* Espaciado entre botones de DataTables */
.dt-buttons {
  display: flex;
  gap: 5px;
  /* Cambia a 3px si prefieres menos espacio */
  flex-wrap: wrap;
}

.dt-buttons .btn {
  margin-left: 5px;
}

/* Responsive: En móvil, centrar botones */
@media (max-width: 767px) {
  .dt-buttons {
    text-align: center !important;
    margin-top: 10px;
  }
}

/* Espaciado entre botones de DataTables */
.dt-buttons .btn {
  margin-left: 5px !important;
}

/* Primer botón sin margen izquierdo */
.dt-buttons .btn:first-child {
  margin-left: 0 !important;
}

/* ============================================
   BOTONES DE DATATABLES - EXCEL Y PDF
   ============================================ */

/* Botón Excel - Verde */
.dt-buttons .buttons-excel,
.dt-buttons .buttons-excelHtml5 {
  color: #28a745 !important;
  background-color: #f8f9fa !important;
  border: 1px solid #ced4da !important;
}

.dt-buttons .buttons-excel:hover,
.dt-buttons .buttons-excelHtml5:hover {
  color: #ffffff !important;
  background-color: #28a745 !important;
  border-color: #28a745 !important;
}

/* Botón PDF - Rojo (estándar y personalizado) */
.dt-buttons .buttons-pdf,
.dt-buttons .buttons-pdfHtml5,
.dt-buttons .btn-pdf-custom {
  color: #dc3545 !important;
  background-color: #f8f9fa !important;
  border: 1px solid #ced4da !important;
}

.dt-buttons .buttons-pdf:hover,
.dt-buttons .buttons-pdfHtml5:hover,
.dt-buttons .btn-pdf-custom:hover {
  color: #ffffff !important;
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}

/* Íconos con margen */
.dt-buttons .btn i {
  margin-right: 3px;
}

/* Botones compactos en reportes */
.dt-buttons .btn {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Espaciado entre botones */
.dt-buttons {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

table.dataTable.fixedHeader-floating,
table.dataTable.fixedHeader-locked {
  background-color: white;
  margin-top: 0 !important;
  margin-bottom: 0 !important
}

table.dataTable.fixedHeader-locked {
  position: absolute !important
}

@media print {
  table.fixedHeader-floating {
    display: none
  }
}

/* ================================================================
   CENTRADO GLOBAL DE MODALES DE BOOTSTRAP
   Aplica a TODOS los modales de la aplicación
   ================================================================ */

/* Centrar verticalmente todos los modales */
.modal-dialog {
  display: flex !important;
  align-items: center !important;
  min-height: calc(100% - 1rem) !important;
  margin: 0.5rem auto !important;
}

/* Para pantallas medianas y grandes (≥576px) */
@media (min-width: 576px) {
  .modal-dialog {
    min-height: calc(100% - 3.5rem) !important;
    margin: 1.75rem auto !important;
  }
}

/* Asegurar posición relativa para el centrado */
.modal-dialog {
  position: relative !important;
}

/* Mejorar la apariencia general de los modales */
.modal-content {
  border-radius: 0.5rem !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Estilo mejorado para el header de los modales */
.modal-header {
  border-top-left-radius: 0.5rem !important;
  border-top-right-radius: 0.5rem !important;
}

/* Botón de cerrar (X) en headers con color de fondo */
.modal-header.bg-primary .close,
.modal-header.bg-success .close,
.modal-header.bg-danger .close,
.modal-header.bg-warning .close,
.modal-header.bg-info .close,
.modal-header.bg-dark .close {
  color: white !important;
  opacity: 0.8 !important;
}

.modal-header.bg-primary .close:hover,
.modal-header.bg-success .close:hover,
.modal-header.bg-danger .close:hover,
.modal-header.bg-warning .close:hover,
.modal-header.bg-info .close:hover,
.modal-header.bg-dark .close:hover {
  opacity: 1 !important;
}

/* Mejorar legibilidad de títulos en headers con color */
.modal-header.bg-primary .modal-title,
.modal-header.bg-success .modal-title,
.modal-header.bg-danger .modal-title,
.modal-header.bg-warning .modal-title,
.modal-header.bg-info .modal-title,
.modal-header.bg-dark .modal-title {
  color: white !important;
}

/* Animación suave al abrir el modal */
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out !important;
}

/* Mejorar el backdrop (fondo oscuro) */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Opcional: Efecto de sombra más pronunciado para modales grandes */
.modal-dialog.modal-lg .modal-content,
.modal-dialog.modal-xl .modal-content {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

/* Asegurar que el contenido del modal sea scrollable si es muy alto */
.modal-body {
  max-height: calc(100vh - 210px) !important;
  overflow-y: auto !important;
}

/* Mejorar el scrollbar del modal-body */
.modal-body::-webkit-scrollbar {
  width: 8px !important;
}

.modal-body::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 4px !important;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #888 !important;
  border-radius: 4px !important;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #555 !important;
}