/* =====================================================================
   ENLINEASALUD - TEMA VISUAL (capa sobre AdminLTE 3 / Bootstrap 4)
   ---------------------------------------------------------------------
   - Solo estilos: no cambia HTML, IDs, clases ni comportamiento.
   - Debe cargarse al FINAL del <head> (después de adminlte, plugins,
     cita-web.css y flatpickr) para que prevalezca.
   - Tema claro por defecto; oscuro con html[data-tema="oscuro"]
     (lo controla vistas/js/medsys-tema.js).
   ===================================================================== */


/* =====================================================================
   1. VARIABLES (tokens)
   ===================================================================== */

:root{
  --ms-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ms-bg:            #f7f8fa;
  --ms-fg:            #1a1d23;
  --ms-card:          #ffffff;
  --ms-muted:         #f1f3f6;
  --ms-muted-fg:      #667085;
  --ms-border:        #e3e6eb;
  --ms-input:         #d9dde4;

  --ms-primary:       #1d6fb8;
  --ms-primary-hover: #175d9c;
  --ms-primary-fg:    #ffffff;
  --ms-primary-ring:  rgba(29,111,184,.18);
  --ms-accent:        #e8f1fb;
  --ms-accent-fg:     #174a78;
  --ms-module-bg:     #cce0f4;
  --ms-module-border: #9cc0e6;

  --ms-sidebar:           #f3f5f8;
  --ms-sidebar-fg:        #3a404b;
  --ms-sidebar-accent:    #dfeaf8;
  --ms-sidebar-accent-fg: #1a4f86;
  --ms-sidebar-border:    #e3e6eb;

  --ms-danger:        #d23f3a;
  --ms-danger-soft:   #fdeceb;
  --ms-warning:       #b7791f;
  --ms-warning-bg:    #f0a92e;
  --ms-warning-soft:  #fdf4e3;
  --ms-success:       #2f9a64;
  --ms-success-soft:  #e7f6ee;
  --ms-info:          #0e8fb0;
  --ms-info-soft:     #e3f5fa;
  --ms-secondary:     #667085;

  --ms-striped:       rgba(26,29,35,.025);
  --ms-hover:         rgba(29,111,184,.05);
  --ms-overlay:       rgba(17,19,24,.45);
  --ms-shadow:        0 1px 2px rgba(16,24,40,.05);
  --ms-shadow-lg:     0 20px 50px -12px rgba(16,24,40,.28);
  --ms-header-bg:     rgba(247,248,250,.82);
  --ms-table-header:  #56677d;
  --ms-table-header-fg: #ffffff;

  --ms-radius:        .5rem;
  --ms-radius-lg:     .75rem;
}

html[data-tema="oscuro"]{
  color-scheme: dark;

  --ms-bg:            #111318;
  --ms-fg:            #e7e9ee;
  --ms-card:          #181b21;
  --ms-muted:         #20242b;
  --ms-muted-fg:      #9aa3b2;
  --ms-border:        #2a2f37;
  --ms-input:         #353b45;

  --ms-primary:       #5aa5e8;
  --ms-primary-hover: #74b4ee;
  --ms-primary-fg:    #0d1117;
  --ms-primary-ring:  rgba(90,165,232,.25);
  --ms-accent:        #172638;
  --ms-accent-fg:     #cfe2f8;
  --ms-module-bg:     #203750;
  --ms-module-border: #3a5a80;

  --ms-sidebar:           #0d0f13;
  --ms-sidebar-fg:        #d5d9e0;
  --ms-sidebar-accent:    #172638;
  --ms-sidebar-accent-fg: #cfe2f8;
  --ms-sidebar-border:    #22262d;

  --ms-danger:        #e8665f;
  --ms-danger-soft:   #3a1c1b;
  --ms-warning:       #e3b153;
  --ms-warning-bg:    #d99a2b;
  --ms-warning-soft:  #3a2f18;
  --ms-success:       #5cc08d;
  --ms-success-soft:  #183326;
  --ms-info:          #4cc0dc;
  --ms-info-soft:     #14303a;
  --ms-secondary:     #9aa3b2;

  --ms-striped:       rgba(255,255,255,.025);
  --ms-hover:         rgba(90,165,232,.07);
  --ms-overlay:       rgba(0,0,0,.6);
  --ms-shadow:        0 1px 2px rgba(0,0,0,.35);
  --ms-shadow-lg:     0 20px 50px -12px rgba(0,0,0,.7);
  --ms-header-bg:     rgba(17,19,24,.82);
  --ms-table-header:  #313a48;
  --ms-table-header-fg: #f4f6f9;
}


/* =====================================================================
   2. BASE
   ===================================================================== */

body{
  font-family: var(--ms-font);
  font-size: .875rem;
  color: var(--ms-fg);
  background-color: var(--ms-bg);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family: var(--ms-font); color: inherit; }

a{ color: var(--ms-primary); }
a:hover{ color: var(--ms-primary-hover); }

hr{ border-top-color: var(--ms-border); }

::selection{ background: var(--ms-primary-ring); }

:focus-visible{ outline: 2px solid var(--ms-primary); outline-offset: 2px; }

.content-wrapper{ background-color: var(--ms-bg); color: var(--ms-fg); }


/* =====================================================================
   3. SIDEBAR (menú lateral)
   ===================================================================== */

body .main-sidebar,
body .main-sidebar[class*="sidebar-light-"]{
  background-color: var(--ms-sidebar);
  border-right: 1px solid var(--ms-sidebar-border);
  box-shadow: none !important;
}

/* Logo */
body .main-sidebar .brand-link{
  background-color: var(--ms-sidebar);
  border-bottom: 1px solid var(--ms-sidebar-border) !important;
}
html[data-tema="oscuro"] .main-sidebar .brand-link img{
  background: #ffffff;
  border-radius: 6px;
}

/* Usuario */
body .main-sidebar .user-panel{
  border-bottom: 1px solid var(--ms-sidebar-border) !important;
  align-items: center;
}
body .main-sidebar .user-panel img{
  box-shadow: none !important;
  border: 2px solid var(--ms-card);
  outline: 1px solid var(--ms-sidebar-border);
}
body .main-sidebar .user-panel .info a,
body .main-sidebar .user-panel .info h6{
  color: var(--ms-sidebar-fg) !important;
  font-weight: 600;
  font-size: .8125rem;
  margin: 0;
  white-space: normal;
  line-height: 1.3;
}

/* Buscador del menú */
body .main-sidebar .form-control-sidebar,
body .main-sidebar .btn-sidebar{
  background-color: var(--ms-card) !important;
  border: 1px solid var(--ms-sidebar-border) !important;
  color: var(--ms-fg) !important;
  font-size: .8125rem;
}
body .main-sidebar .form-control-sidebar{ border-right: 0 !important; border-radius: var(--ms-radius) 0 0 var(--ms-radius); }
body .main-sidebar .btn-sidebar{ border-left: 0 !important; border-radius: 0 var(--ms-radius) var(--ms-radius) 0; color: var(--ms-muted-fg) !important; }
body .main-sidebar .form-control-sidebar:focus{ box-shadow: none; }
.sidebar-search-results .list-group-item{ background: var(--ms-card); border-color: var(--ms-border); color: var(--ms-fg); }

/* Enlaces */
body .main-sidebar .nav-sidebar .nav-link{
  border-radius: var(--ms-radius);
  color: var(--ms-sidebar-fg);
  font-weight: 500;
  font-size: .84rem;
  padding-top: .45rem;
  padding-bottom: .45rem;
  margin-bottom: 1px;
  transition: background-color .15s, color .15s;
}
body .main-sidebar .nav-sidebar .nav-link .nav-icon{
  font-size: .95rem;
  opacity: .7;
}
body .main-sidebar .nav-sidebar .nav-link:hover{
  background-color: rgba(29,111,184,.07) !important;
  color: var(--ms-fg) !important;
}
html[data-tema="oscuro"] body .main-sidebar .nav-sidebar .nav-link:hover{
  background-color: rgba(90,165,232,.09) !important;
}

/* Ítem activo (se marca con medsys-tema.js según la ruta actual) */
body .main-sidebar .nav-sidebar .nav-link.active,
body .main-sidebar[class*="sidebar-light-"] .nav-sidebar > .nav-item > .nav-link.active,
body .main-sidebar[class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link.active{
  background-color: var(--ms-sidebar-accent) !important;
  color: var(--ms-sidebar-accent-fg) !important;
  font-weight: 600;
  box-shadow: none !important;
}
body .main-sidebar .nav-sidebar .nav-link.active .nav-icon{
  color: var(--ms-primary);
  opacity: 1;
}

/* Menús principales con submenú = módulo/contenedor (estilo MAYÚSCULAS en azul médico, fondo más oscuro y borde, para diferenciarlos de los enlaces simples) */
body .main-sidebar .nav-sidebar > .nav-item > .nav-link:not(:only-child){
  background-color: var(--ms-module-bg) !important;
  border: 1px solid var(--ms-module-border);
  color: var(--ms-primary) !important;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: .6rem;
  opacity: .95;
}
body .main-sidebar .nav-sidebar > .nav-item > .nav-link:not(:only-child):hover{
  color: var(--ms-primary) !important;
  background-color: var(--ms-module-bg) !important;
  opacity: 1;
}
body .main-sidebar .nav-sidebar > .nav-item > .nav-link:not(:only-child) .nav-icon{
  opacity: 1;
}
body .main-sidebar .nav-sidebar > .nav-item > .nav-link:not(:only-child) .right{
  font-size: .75rem;
  top: .8rem;
  color: var(--ms-primary);
}
/* En el menú expandido el grupo no lleva ícono (como en el diseño de referencia) */
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar > .nav-item > .nav-link:not(:only-child) .nav-icon,
.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar > .nav-item > .nav-link:not(:only-child) .nav-icon{
  font-size: .8rem;
}

/* Submenús */
body .main-sidebar .nav-treeview{ padding-left: 0; }
body .main-sidebar[class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link{ color: var(--ms-sidebar-fg); }


/* =====================================================================
   4. BARRA SUPERIOR (header)
   ===================================================================== */

body .main-header.navbar{
  position: sticky;
  top: 0;
  z-index: 1034;
  background-color: var(--ms-header-bg) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--ms-border) !important;
  color: var(--ms-fg);
}
body .main-header .navbar-nav .nav-link{
  color: var(--ms-muted-fg);
  border-radius: var(--ms-radius);
  font-size: .875rem;
  transition: background-color .15s, color .15s;
}
body .main-header .navbar-nav .nav-link:hover,
body .main-header .navbar-nav .nav-link:focus{
  color: var(--ms-fg);
  background-color: var(--ms-accent);
}

/* Sede actual (pastilla) */
body .main-header .ms-sede{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 2rem;
  padding: 0 .85rem;
  margin-right: .5rem;
  border-radius: 999px;
  background: var(--ms-accent);
  color: var(--ms-accent-fg);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Usuario en la barra */
body .main-header .ms-user-toggle{
  display: flex !important;
  align-items: center;
  gap: .5rem;
}
body .main-header .ms-user-toggle img{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--ms-border);
}
body .main-header .ms-user-toggle .ms-user-name{
  color: var(--ms-fg);
  font-weight: 600;
  font-size: .8125rem;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms-dropdown-head{
  padding: .6rem 1rem .5rem;
  font-size: .75rem;
  color: var(--ms-muted-fg);
  line-height: 1.35;
}
.ms-dropdown-head b{ display: block; color: var(--ms-fg); font-size: .8125rem; }


/* =====================================================================
   5. ENCABEZADO DE PÁGINA / BREADCRUMB / FOOTER
   ===================================================================== */

.content-header{ padding: 1.5rem 1rem .75rem; }
.content-header h1{
  font-size: 1.5rem !important;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ms-fg);
}
.content-header small{ color: var(--ms-muted-fg); }

.breadcrumb{ background: transparent; font-size: .8125rem; }
.breadcrumb-item a{ color: var(--ms-muted-fg); }
.breadcrumb-item a:hover{ color: var(--ms-primary); }
.breadcrumb-item.active{ color: var(--ms-fg); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before{ color: var(--ms-border); }

body .main-footer{
  background-color: var(--ms-bg);
  border-top: 1px solid var(--ms-border);
  color: var(--ms-muted-fg);
  font-size: .8125rem;
}
body .main-footer a{ color: var(--ms-muted-fg); }


/* =====================================================================
   6. CARDS
   ===================================================================== */

body .card{
  background-color: var(--ms-card);
  color: var(--ms-fg);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow);
}
body .card > .card-header{
  background-color: transparent;
  border-bottom: 1px solid var(--ms-border);
  padding: .9rem 1.25rem;
  border-radius: var(--ms-radius-lg) var(--ms-radius-lg) 0 0;
}
body .card > .card-footer{
  background-color: transparent;
  border-top: 1px solid var(--ms-border);
}
body .card > .card-footer:empty{ display: none; }
body .card-title{ font-weight: 600; font-size: .95rem; }

/* card-outline (card-primary, card-success...) -> línea superior del color */
body .card.card-outline{ border-top-width: 3px; }
body .card-primary.card-outline{ border-top-color: var(--ms-primary); }
body .card-success.card-outline{ border-top-color: var(--ms-success); }
body .card-danger.card-outline{ border-top-color: var(--ms-danger); }
body .card-warning.card-outline{ border-top-color: var(--ms-warning-bg); }
body .card-info.card-outline{ border-top-color: var(--ms-info); }

body .card-primary:not(.card-outline) > .card-header{ background-color: var(--ms-primary); color: var(--ms-primary-fg); }

.card-tools .btn-tool{ color: var(--ms-muted-fg); }
.card-tools .btn-tool:hover{ color: var(--ms-fg); }

/* Card dentro de un modal: sin marco doble */
.modal-body > .card-body{ padding: 0; }


/* =====================================================================
   7. BOTONES
   ===================================================================== */

.btn{
  font-family: var(--ms-font);
  font-weight: 600;
  font-size: .8125rem;
  border-radius: var(--ms-radius);
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:focus,.btn.focus{ box-shadow: 0 0 0 3px var(--ms-primary-ring) !important; }

body .btn-primary{
  background-color: var(--ms-primary);
  border-color: var(--ms-primary);
  color: var(--ms-primary-fg);
}
body .btn-primary:hover,
body .btn-primary:focus,
body .btn-primary:not(:disabled):not(.disabled):active,
body .btn-primary:not(:disabled):not(.disabled).active{
  background-color: var(--ms-primary-hover);
  border-color: var(--ms-primary-hover);
  color: var(--ms-primary-fg);
}

body .btn-default,
body .btn-light{
  background-color: var(--ms-card);
  border-color: var(--ms-input);
  color: var(--ms-fg);
}
body .btn-default:hover,
body .btn-light:hover{
  background-color: var(--ms-muted);
  border-color: var(--ms-input);
  color: var(--ms-fg);
}

body .btn-secondary{ background-color: var(--ms-secondary); border-color: var(--ms-secondary); color: #fff; }
body .btn-success{ background-color: var(--ms-success); border-color: var(--ms-success); color: #fff; }
body .btn-danger{ background-color: var(--ms-danger); border-color: var(--ms-danger); color: #fff; }
body .btn-info{ background-color: var(--ms-info); border-color: var(--ms-info); color: #fff; }
body .btn-warning{ background-color: var(--ms-warning-bg); border-color: var(--ms-warning-bg); color: #1f1606; }
body .btn-secondary:hover,body .btn-success:hover,body .btn-danger:hover,body .btn-info:hover,body .btn-warning:hover{ filter: brightness(.93); }

body .btn-outline-primary{ color: var(--ms-primary); border-color: var(--ms-primary); }
body .btn-outline-primary:hover{ background-color: var(--ms-primary); color: var(--ms-primary-fg); }

.btn-lg{ font-size: 1rem; }
.btn-sm{ font-size: .75rem; }
.btn-xs{ border-radius: 6px; font-size: .72rem; }

/* Botones de acción dentro de tablas: versión suave (fondo claro + ícono de color) */
.table .btn-group .btn,
.table td > .btn{
  box-shadow: none;
}
.table .btn-warning{ background-color: var(--ms-warning-soft); border-color: transparent; color: var(--ms-warning); }
.table .btn-danger{ background-color: var(--ms-danger-soft); border-color: transparent; color: var(--ms-danger); }
.table .btn-success{ background-color: var(--ms-success-soft); border-color: transparent; color: var(--ms-success); }
.table .btn-info{ background-color: var(--ms-info-soft); border-color: transparent; color: var(--ms-info); }
.table .btn-primary{ background-color: var(--ms-accent); border-color: transparent; color: var(--ms-primary); }
.table .btn-warning:hover{ background-color: var(--ms-warning-bg); color: #1f1606; filter: none; }
.table .btn-danger:hover{ background-color: var(--ms-danger); color: #fff; filter: none; }
.table .btn-success:hover{ background-color: var(--ms-success); color: #fff; filter: none; }
.table .btn-info:hover{ background-color: var(--ms-info); color: #fff; filter: none; }
.table .btn-primary:hover{ background-color: var(--ms-primary); color: var(--ms-primary-fg); }
.table .btn-group{ gap: .3rem; }
.table .btn-group > .btn{ border-radius: 6px !important; margin-left: 0 !important; }


/* =====================================================================
   8. FORMULARIOS
   ===================================================================== */

label:not(.form-check-label):not(.custom-file-label),
.col-form-label{ font-weight: 600; font-size: .8125rem; color: var(--ms-fg); }

.form-control,
.custom-select{
  font-family: var(--ms-font);
  font-size: .875rem;
  background-color: var(--ms-card);
  color: var(--ms-fg);
  border: 1px solid var(--ms-input);
  border-radius: var(--ms-radius);
  transition: border-color .15s, box-shadow .15s;
}
.form-control-lg{ font-size: 1rem; }
.form-control-sm{ font-size: .75rem; }
.form-control::placeholder{ color: var(--ms-muted-fg); opacity: .8; }
.form-control:focus,
.custom-select:focus{
  background-color: var(--ms-card);
  color: var(--ms-fg);
  border-color: var(--ms-primary);
  box-shadow: 0 0 0 3px var(--ms-primary-ring);
}
.form-control:disabled,
.form-control[readonly]{
  background-color: var(--ms-muted);
  color: var(--ms-muted-fg);
}

.input-group-text{
  background-color: var(--ms-muted);
  border-color: var(--ms-input);
  color: var(--ms-muted-fg);
  font-size: .8125rem;
  border-radius: var(--ms-radius);
}
.input-group:focus-within .input-group-text{ color: var(--ms-primary); border-color: var(--ms-primary); }

.help-block{ color: var(--ms-muted-fg); font-size: .75rem; }

.custom-control-input:checked ~ .custom-control-label::before{
  background-color: var(--ms-primary);
  border-color: var(--ms-primary);
}
[class*="icheck-primary"] > input:first-child:checked + label::before,
[class*="icheck-primary"] > input:first-child:checked + input[type="hidden"] + label::before{
  background-color: var(--ms-primary) !important;
  border-color: var(--ms-primary) !important;
}


/* =====================================================================
   9. TABLAS Y DATATABLES
   ===================================================================== */

.table{ color: var(--ms-fg); font-size: .84rem; }
.table thead th{
  background-color: var(--ms-table-header);
  color: var(--ms-table-header-fg);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-color: rgba(255,255,255,.18) !important;
  vertical-align: middle;
}
.table td, .table th{ border-color: var(--ms-border) !important; vertical-align: middle; }
.table-bordered{ border-color: var(--ms-border); }
.table-striped tbody tr:nth-of-type(odd){ background-color: var(--ms-striped); }
.table-hover tbody tr:hover,
.table tbody tr:hover{ background-color: var(--ms-hover); }
.table tbody tr.selected, .table tbody tr.selected > *{ background-color: var(--ms-accent) !important; color: var(--ms-fg) !important; box-shadow: none !important; }

/* Controles de DataTables */
.dataTables_wrapper{ color: var(--ms-muted-fg); font-size: .8125rem; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
  background-color: var(--ms-card);
  color: var(--ms-fg);
  border: 1px solid var(--ms-input);
  border-radius: var(--ms-radius);
}
.dataTables_wrapper .dataTables_filter input:focus{ border-color: var(--ms-primary); box-shadow: 0 0 0 3px var(--ms-primary-ring); outline: 0; }
.dataTables_wrapper .dataTables_info{ font-variant-numeric: tabular-nums; }
div.dataTables_processing{
  background: var(--ms-card);
  color: var(--ms-fg);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-lg);
}
table.dataTable thead .sorting::before, table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before, table.dataTable thead .sorting_desc::after{ opacity: .25; }
table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_desc::after{ opacity: .8; color: var(--ms-primary); }

/* Botón (+) de filas responsive */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before{
  background-color: var(--ms-primary) !important;
  border: 0 !important;
  box-shadow: none !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before{ background-color: var(--ms-danger) !important; }
table.dataTable > tbody > tr.child ul.dtr-details > li{ border-bottom-color: var(--ms-border); }

/* Botones de exportación */
.dt-buttons .btn{ background-color: var(--ms-card); border-color: var(--ms-input); color: var(--ms-fg); }
.dt-buttons .btn:hover{ background-color: var(--ms-muted); }


/* =====================================================================
   10. PAGINACIÓN
   ===================================================================== */

.page-link{
  background-color: var(--ms-card);
  border-color: var(--ms-border);
  color: var(--ms-fg);
  font-size: .8125rem;
  margin: 0 2px;
  border-radius: 6px !important;
}
.page-link:hover{ background-color: var(--ms-muted); color: var(--ms-fg); border-color: var(--ms-border); }
.page-link:focus{ box-shadow: 0 0 0 3px var(--ms-primary-ring); }
.page-item.active .page-link{
  background-color: var(--ms-primary);
  border-color: var(--ms-primary);
  color: var(--ms-primary-fg);
  font-weight: 600;
}
.page-item.disabled .page-link{ background-color: var(--ms-card); border-color: var(--ms-border); color: var(--ms-muted-fg); opacity: .6; }


/* =====================================================================
   11. MODALES
   ===================================================================== */

.modal-backdrop.show{ opacity: 1; background-color: var(--ms-overlay); }
.modal-backdrop{ background-color: var(--ms-overlay); }

.modal-content{
  background-color: var(--ms-card);
  color: var(--ms-fg);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-lg);
}

/* Cabecera: reemplaza el azul #007bff en línea por una cabecera limpia */
.modal-header,
.modal-header[style*="007bff"],
.modal-header[style*="background"]{
  background: var(--ms-card) !important;
  color: var(--ms-fg) !important;
  border-bottom: 1px solid var(--ms-border);
  padding: 1rem 1.25rem;
  border-radius: var(--ms-radius-lg) var(--ms-radius-lg) 0 0;
  align-items: center;
}
.modal-header .modal-title{
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.modal-header .modal-title::before{
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--ms-primary);
  flex: none;
}
/* Modales de eliminar (tienen botón rojo en el pie): acento rojo */
.modal-content:has(.modal-footer .btn-danger) .modal-header .modal-title::before{ background: var(--ms-danger); }

.modal-header .close{
  color: var(--ms-muted-fg) !important;
  text-shadow: none;
  opacity: 1;
  border-radius: 6px;
  padding: .35rem .6rem !important;
  margin: -.25rem -.4rem -.25rem auto !important;
  font-weight: 400;
}
.modal-header .close:hover{ background: var(--ms-muted); color: var(--ms-fg) !important; }

.modal-body{ padding: 1.25rem; }
.modal-footer{
  background-color: var(--ms-muted);
  border-top: 1px solid var(--ms-border);
  border-radius: 0 0 var(--ms-radius-lg) var(--ms-radius-lg);
  padding: .8rem 1.25rem;
}
html:not([data-tema="oscuro"]) .modal-footer{ background-color: #fafbfc; }


/* =====================================================================
   12. SELECT2
   ===================================================================== */

.select2-container--bootstrap4 .select2-selection{
  background-color: var(--ms-card);
  border: 1px solid var(--ms-input);
  border-radius: var(--ms-radius);
  font-size: .875rem;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{ color: var(--ms-fg); }
.select2-container--bootstrap4 .select2-selection__placeholder{ color: var(--ms-muted-fg) !important; }
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection{
  border-color: var(--ms-primary);
  box-shadow: 0 0 0 3px var(--ms-primary-ring);
}
.select2-container--bootstrap4.select2-container--disabled .select2-selection,
.select2-container--bootstrap4 .select2-selection[aria-disabled="true"]{ background-color: var(--ms-muted); }
.select2-container--bootstrap4 .select2-dropdown{
  background-color: var(--ms-card);
  border-color: var(--ms-primary);
  color: var(--ms-fg);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-lg);
  overflow: hidden;
}
.select2-container--bootstrap4 .select2-results__option{ font-size: .84rem; }
.select2-container--bootstrap4 .select2-results__option[aria-selected="true"]{ background-color: var(--ms-accent); color: var(--ms-accent-fg); }
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"]{
  background-color: var(--ms-primary);
  color: var(--ms-primary-fg);
}
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field{
  background-color: var(--ms-card);
  color: var(--ms-fg);
  border: 1px solid var(--ms-input);
  border-radius: 6px;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{
  background-color: var(--ms-accent);
  border: 1px solid transparent;
  color: var(--ms-accent-fg);
  border-radius: 6px;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove{ color: var(--ms-accent-fg); }


/* =====================================================================
   13. SWEETALERT2
   ===================================================================== */

.swal2-container.swal2-backdrop-show{ background: var(--ms-overlay) !important; }
.swal2-popup{
  font-family: var(--ms-font) !important;
  background: var(--ms-card) !important;
  color: var(--ms-fg) !important;
  border: 1px solid var(--ms-border);
  border-radius: 14px !important;
  box-shadow: var(--ms-shadow-lg);
}
.swal2-title{ color: var(--ms-fg) !important; font-size: 1.2rem !important; font-weight: 600 !important; }
.swal2-html-container, .swal2-content{ color: var(--ms-muted-fg) !important; font-size: .9rem !important; }
.swal2-styled{ border-radius: var(--ms-radius) !important; font-weight: 600 !important; font-size: .875rem !important; }
.swal2-styled.swal2-confirm{ background-color: var(--ms-primary) !important; color: var(--ms-primary-fg) !important; }
.swal2-styled.swal2-cancel{ background-color: var(--ms-muted) !important; color: var(--ms-fg) !important; border: 1px solid var(--ms-input) !important; }
.swal2-styled.swal2-deny{ background-color: var(--ms-danger) !important; }
.swal2-styled:focus{ box-shadow: 0 0 0 3px var(--ms-primary-ring) !important; }
.swal2-input, .swal2-textarea, .swal2-select{ background: var(--ms-card) !important; color: var(--ms-fg) !important; border-color: var(--ms-input) !important; }


/* =====================================================================
   14. OTROS COMPONENTES BOOTSTRAP / ADMINLTE
   ===================================================================== */

/* Dropdowns */
.dropdown-menu{
  background-color: var(--ms-card);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-lg);
  padding: .35rem;
  font-size: .84rem;
}
.dropdown-item{ color: var(--ms-fg); border-radius: 6px; padding: .45rem .75rem; }
.dropdown-item:hover, .dropdown-item:focus{ background-color: var(--ms-muted); color: var(--ms-fg); }
.dropdown-item.active, .dropdown-item:active{ background-color: var(--ms-primary); color: var(--ms-primary-fg); }
.dropdown-divider{ border-top-color: var(--ms-border); margin: .3rem 0; }

/* Pestañas */
.nav-tabs{ border-bottom-color: var(--ms-border); }
.nav-tabs .nav-link{ color: var(--ms-muted-fg); font-weight: 500; border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link:hover{ color: var(--ms-fg); border-color: transparent; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link{
  background: transparent;
  color: var(--ms-primary);
  border-bottom-color: var(--ms-primary);
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{ background-color: var(--ms-primary); color: var(--ms-primary-fg); }
.tab-content{ color: var(--ms-fg); }

/* Badges (versión suave) */
.badge{ font-weight: 600; border-radius: 999px; padding: .3em .65em; }
.badge-primary{ background-color: var(--ms-accent); color: var(--ms-accent-fg); }
.badge-success{ background-color: var(--ms-success-soft); color: var(--ms-success); }
.badge-danger{ background-color: var(--ms-danger-soft); color: var(--ms-danger); }
.badge-warning{ background-color: var(--ms-warning-soft); color: var(--ms-warning); }
.badge-info{ background-color: var(--ms-info-soft); color: var(--ms-info); }
.badge-secondary{ background-color: var(--ms-muted); color: var(--ms-muted-fg); }

/* Alertas y callouts */
.alert{ border-radius: var(--ms-radius); border-width: 1px; }
.alert-info{ background-color: var(--ms-info-soft); border-color: transparent; color: var(--ms-info); }
.alert-success{ background-color: var(--ms-success-soft); border-color: transparent; color: var(--ms-success); }
.alert-danger{ background-color: var(--ms-danger-soft); border-color: transparent; color: var(--ms-danger); }
.alert-warning{ background-color: var(--ms-warning-soft); border-color: transparent; color: var(--ms-warning); }
.callout{ background-color: var(--ms-card); border-radius: var(--ms-radius); box-shadow: var(--ms-shadow); }

/* List group */
.list-group-item{ background-color: var(--ms-card); border-color: var(--ms-border); color: var(--ms-fg); }
.list-group-item.active{ background-color: var(--ms-primary); border-color: var(--ms-primary); }

/* Small-box / info-box de AdminLTE */
.small-box, .info-box{ border-radius: var(--ms-radius-lg); box-shadow: var(--ms-shadow); border: 1px solid var(--ms-border); }
.info-box{ background-color: var(--ms-card); color: var(--ms-fg); }

/* Colores de marca en utilidades */
.text-primary{ color: var(--ms-primary) !important; }
.bg-primary{ background-color: var(--ms-primary) !important; color: var(--ms-primary-fg) !important; }
.border-primary{ border-color: var(--ms-primary) !important; }
.text-success{ color: var(--ms-success) !important; }
.text-danger{ color: var(--ms-danger) !important; }
.text-muted{ color: var(--ms-muted-fg) !important; }
.progress{ background-color: var(--ms-muted); border-radius: 999px; }
.progress-bar{ background-color: var(--ms-primary); }

/* Tooltips y popovers */
.popover{ background-color: var(--ms-card); border-color: var(--ms-border); }
.popover-body{ color: var(--ms-fg); }
.img-thumbnail{ background-color: var(--ms-card); border-color: var(--ms-border); }


/* =====================================================================
   15. CALENDARIOS Y SELECTORES DE FECHA
   ===================================================================== */

/* FullCalendar 5 */
:root{
  --fc-border-color: var(--ms-border);
  --fc-button-bg-color: var(--ms-primary);
  --fc-button-border-color: var(--ms-primary);
  --fc-button-hover-bg-color: var(--ms-primary-hover);
  --fc-button-hover-border-color: var(--ms-primary-hover);
  --fc-button-active-bg-color: var(--ms-primary-hover);
  --fc-button-active-border-color: var(--ms-primary-hover);
  --fc-today-bg-color: var(--ms-accent);
  --fc-page-bg-color: var(--ms-card);
  --fc-neutral-bg-color: var(--ms-muted);
  --fc-event-bg-color: var(--ms-primary);
  --fc-event-border-color: var(--ms-primary);
}
.fc .fc-button{ border-radius: var(--ms-radius); font-weight: 600; font-size: .8125rem; text-transform: capitalize; }
.fc .fc-toolbar-title{ font-size: 1.15rem; font-weight: 700; color: var(--ms-fg); }
.fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number{ color: var(--ms-fg); }

/* Flatpickr (reemplaza el tema material_green) */
.flatpickr-calendar{ background: var(--ms-card); border: 1px solid var(--ms-border); box-shadow: var(--ms-shadow-lg); border-radius: var(--ms-radius); }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays,
span.flatpickr-weekday{ background: var(--ms-primary) !important; color: var(--ms-primary-fg) !important; fill: var(--ms-primary-fg) !important; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month{ color: var(--ms-primary-fg); fill: var(--ms-primary-fg); }
.flatpickr-day{ color: var(--ms-fg); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.selected:focus{ background: var(--ms-primary) !important; border-color: var(--ms-primary) !important; color: var(--ms-primary-fg) !important; }
.flatpickr-day.today{ border-color: var(--ms-primary); }
.flatpickr-day:hover{ background: var(--ms-muted); border-color: var(--ms-muted); }

/* Tempus Dominus y Date Range Picker */
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active{ background-color: var(--ms-primary) !important; color: var(--ms-primary-fg) !important; }
.bootstrap-datetimepicker-widget table td.today::before{ border-bottom-color: var(--ms-primary); }
.daterangepicker td.active, .daterangepicker td.active:hover{ background-color: var(--ms-primary); }
.daterangepicker .ranges li.active{ background-color: var(--ms-primary); }
.daterangepicker{ background-color: var(--ms-card); border-color: var(--ms-border); color: var(--ms-fg); }
.daterangepicker .calendar-table{ background-color: var(--ms-card); border-color: var(--ms-card); }


/* =====================================================================
   16. MODO OSCURO: ajustes de utilidades Bootstrap usadas en los módulos
   ===================================================================== */

html[data-tema="oscuro"] .bg-white{ background-color: var(--ms-card) !important; }
html[data-tema="oscuro"] .bg-light{ background-color: var(--ms-muted) !important; }
html[data-tema="oscuro"] .text-dark,
html[data-tema="oscuro"] .text-body{ color: var(--ms-fg) !important; }
html[data-tema="oscuro"] .border,
html[data-tema="oscuro"] .border-secondary,
html[data-tema="oscuro"] .border-top,
html[data-tema="oscuro"] .border-bottom{ border-color: var(--ms-border) !important; }
html[data-tema="oscuro"] .close{ color: var(--ms-fg); text-shadow: none; }
html[data-tema="oscuro"] .table-dark{ background-color: var(--ms-muted); }
html[data-tema="oscuro"] .form-control option,
html[data-tema="oscuro"] select option{ background-color: var(--ms-card); color: var(--ms-fg); }
html[data-tema="oscuro"] .fc-theme-standard td,
html[data-tema="oscuro"] .fc-theme-standard th{ border-color: var(--ms-border); }
html[data-tema="oscuro"] .daterangepicker td.off{ background-color: var(--ms-card); }
html[data-tema="oscuro"] .daterangepicker td.available:hover{ background-color: var(--ms-muted); }
html[data-tema="oscuro"] .bootstrap-datetimepicker-widget.dropdown-menu{ color: var(--ms-fg); }
html[data-tema="oscuro"] .bootstrap-datetimepicker-widget table td.day:hover,
html[data-tema="oscuro"] .bootstrap-datetimepicker-widget table td span:hover{ background: var(--ms-muted); }
html[data-tema="oscuro"] img[src*="logo"]{ background-color: #ffffff; border-radius: 6px; }


/* =====================================================================
   17. LOGIN Y PÁGINAS PÚBLICAS (body.login-page)
   ===================================================================== */

body.login-page{
  background-color: var(--ms-bg);
  font-family: var(--ms-font);
}

/* Fondo: se conserva la imagen del cliente con un velo azul suave */
body.login-page #back::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(29,111,184,.55), transparent 60%),
    linear-gradient(160deg, rgba(13,40,72,.55), rgba(13,40,72,.25));
}

body.login-page .login-box{ width: 100%; max-width: 420px; margin: 5vh auto; padding: 0 16px; }

body.login-page .card{
  background-color: var(--ms-card);
  border: 1px solid var(--ms-border);
  border-radius: 16px;
  box-shadow: var(--ms-shadow-lg);
  overflow: hidden;
}
body.login-page .card.card-outline{ border-top-width: 1px; }
body.login-page .card > .card-header{ border-bottom: 1px solid var(--ms-border); padding: 1.5rem 1.5rem 1rem; }
body.login-page .card > .card-header img{ max-width: 240px; width: 100%; height: auto; margin: 0 auto; display: block; }
body.login-page .card-body{ padding: 1.5rem; }

body.login-page .login-box-msg{
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ms-fg);
  letter-spacing: -.01em;
  padding: 0 0 1rem;
}
body.login-page .form-control{ height: 2.75rem; }
body.login-page .form-control-lg{ font-size: 1rem; height: 3rem; border-radius: var(--ms-radius); text-align: left; }
body.login-page .input-group-text{ min-width: 2.75rem; justify-content: center; }
body.login-page .btn-primary{ background-color: var(--ms-primary); border: 0; height: 2.75rem; }
body.login-page .btn-primary:hover{ background-color: var(--ms-primary-hover); }
body.login-page .btn-lg{ font-size: 1rem; border-radius: var(--ms-radius); padding: .75rem; height: auto; }
body.login-page .btn-success{ background-color: var(--ms-success); border: 0; }

/* Botón flotante de acceso administrativo */
body .btn-flotante{
  background-color: var(--ms-primary);
  box-shadow: var(--ms-shadow-lg);
}
body .btn-flotante:hover{ background-color: var(--ms-primary-hover); color: #fff; }


/* =====================================================================
   18. BOTÓN DE TEMA (claro / oscuro)
   ===================================================================== */

.ms-tema-icono-claro{ display: none; }
html[data-tema="oscuro"] .ms-tema-icono-claro{ display: inline-block; }
html[data-tema="oscuro"] .ms-tema-icono-oscuro{ display: none; }


/* =====================================================================
   19. RESPONSIVE
   ===================================================================== */

@media (max-width: 767.98px){
  .content-header{ padding: 1rem .5rem .5rem; }
  .content-header h1{ font-size: 1.25rem !important; }
  body .main-header .ms-user-toggle .ms-user-name{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}