/* ================================================================
   MATERIAL DESIGN SYSTEM — OLIMPO
   Paleta: Pizarra & Verde Salvia
   ================================================================ */

/* ----------------------------------------------------------------
   1. VARIABLES GLOBALES
   ---------------------------------------------------------------- */
:root {
  /* Paleta principal */
  --md-primary:           #4CAF82;
  --md-primary-hover:     #5DBF93;
  --md-primary-dark:      #2E7D5E;
  --md-primary-tonal:     rgba(76, 175, 130, 0.12);
  --md-accent:            #80CBC4;

  /* Superficies */
  --md-surface:           #1E2328;
  --md-surface-card:      #272D33;
  --md-surface-raised:    #2F363D;
  --md-surface-overlay:   rgba(30, 35, 40, 0.85);

  /* Texto */
  --md-on-surface:         #E8F5E9;
  --md-on-surface-muted:   #90A4AE;
  --md-on-surface-variant: #90A4AE;  /* alias de muted */
  --md-on-primary:         #0D1F16;

  /* Estados */
  --md-error:             #EF5350;
  --md-error-tonal:       rgba(239, 83, 80, 0.12);
  --md-success:           #4CAF82;
  --md-warning:           #FFA726;
  --md-info:              #29B6F6;

  /* Bordes */
  --md-border:            #3A424A;
  --md-border-focus:      #4CAF82;

  /* Radios */
  --md-radius-xs:         4px;
  --md-radius-sm:         8px;
  --md-radius:            12px;
  --md-radius-lg:         16px;
  --md-radius-xl:         20px;
  --md-radius-pill:       28px;

  /* Sombras (elevaciones) */
  --md-elevation-0:       none;
  --md-elevation-1:       0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.45);
  --md-elevation-2:       0 3px 6px rgba(0,0,0,.32), 0 3px 6px rgba(0,0,0,.38);
  --md-elevation-3:       0 10px 24px rgba(0,0,0,.35), 0 6px 8px rgba(0,0,0,.30);
  --md-elevation-4:       0 14px 32px rgba(0,0,0,.38), 0 10px 12px rgba(0,0,0,.30);

  /* Animaciones */
  --md-ease:              cubic-bezier(0.4, 0, 0.2, 1);
  --md-ease-decel:        cubic-bezier(0.0, 0.0, 0.2, 1);
  --md-ease-accel:        cubic-bezier(0.4, 0.0, 1, 1);
  --md-duration-short:    150ms;
  --md-duration:          250ms;
  --md-duration-long:     400ms;

  /* Tipografía */
  --md-font:              'fuenteRandom', 'Segoe UI', system-ui, sans-serif;
}


/* ================================================================
   2. LOGIN — FASE 0
   ================================================================ */

/* Reset de VALEX theme para la página de login */
body:has(.md-login-page) {
  background-color: var(--md-surface) !important;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Loader de pantalla completa */
#global-loader {
  position: fixed;
  inset: 0;
  background-color: var(--md-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity var(--md-duration-long) var(--md-ease);
}

.md-loader-ring {
  width: 44px;
  height: 44px;
  border: 3px solid var(--md-border);
  border-top-color: var(--md-primary);
  border-radius: 50%;
  animation: mdSpin 0.75s linear infinite;
}

@keyframes mdSpin {
  to { transform: rotate(360deg); }
}

/* ---- Página de login ---- */
.md-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--md-surface);
  background-image:
    linear-gradient(rgba(30,35,40,.72), rgba(30,35,40,.80)),
    url('/imagenes/barbershop.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: var(--md-font);
  padding: 24px 16px;
  position: relative;
  overflow: hidden;
}

/* Tono verde sutil sobre la imagen para unificar con la paleta */
.md-login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 70%, rgba(76,175,130,.10) 0%, transparent 60%);
  pointer-events: none;
}

.md-login-page::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 75% 20%, rgba(128,203,196,.07) 0%, transparent 55%);
  pointer-events: none;
}

/* ---- Card central ---- */
.md-login-card {
  background: var(--md-surface-card);
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-pill);
  box-shadow: var(--md-elevation-3);
  padding: 44px 40px;
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
  animation: mdLoginEntrada var(--md-duration-long) var(--md-ease-decel) both;
}

@keyframes mdLoginEntrada {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---- Logo ---- */
.md-login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.md-login-logo-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--md-primary-tonal);
  border: 2px solid rgba(76,175,130,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
}

.md-login-logo-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- Cabecera de texto ---- */
.md-login-header {
  text-align: center;
  margin-bottom: 32px;
}

.md-login-header h1 {
  color: var(--md-on-surface);
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.md-login-header p {
  color: var(--md-on-surface-muted);
  font-size: 0.875rem;
  margin: 0;
  font-weight: 400;
}

/* ---- Input Material con label flotante ---- */
.md-field {
  position: relative;
  margin-bottom: 6px;
}

.md-field + .md-field {
  margin-top: 8px;
}

.md-input {
  display: block;
  width: 100%;
  background: var(--md-surface-raised);
  border: 1.5px solid var(--md-border);
  border-radius: var(--md-radius-sm);
  color: var(--md-on-surface);
  font-family: var(--md-font);
  font-size: 0.9375rem;
  padding: 24px 16px 8px 16px;
  outline: none;
  transition:
    border-color var(--md-duration) var(--md-ease),
    box-shadow var(--md-duration) var(--md-ease),
    background var(--md-duration) var(--md-ease);
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

/* Input con ícono a la derecha */
.md-input.has-icon {
  padding-right: 96px;
}

.md-input,
.md-input:focus,
.md-input:active {
  color: var(--md-on-surface) !important;
}

.md-input::placeholder {
  color: transparent;
}

/* Label flotante */
.md-field > label {
  position: absolute !important;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--md-on-surface-muted);
  font-family: var(--md-font);
  font-size: 0.9375rem !important;
  font-weight: 400;
  pointer-events: none;
  transition:
    top var(--md-duration) var(--md-ease),
    font-size var(--md-duration) var(--md-ease),
    color var(--md-duration) var(--md-ease),
    transform var(--md-duration) var(--md-ease);
  margin: 0 !important;
  line-height: 1;
  white-space: nowrap;
}

/* Label sube cuando el input tiene contenido o está en foco */
.md-input:focus ~ label,
.md-input:not(:placeholder-shown) ~ label {
  top: 10px;
  transform: translateY(0);
  font-size: 0.69rem !important;
  color: var(--md-primary);
  font-weight: 500;
}

/* Foco del input */
.md-input:focus {
  border-color: var(--md-border-focus);
  background: var(--md-surface-raised);
  box-shadow: 0 0 0 3px rgba(76,175,130,.15);
}

/* ---- Ícono mostrar/ocultar contraseña ---- */
.md-ver-pass {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--md-on-surface-muted);
  cursor: pointer;
  font-size: 0.75rem;
  font-family: var(--md-font);
  transition: color var(--md-duration) var(--md-ease);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}

.md-ver-pass:hover {
  color: var(--md-primary);
}

.md-ver-pass i {
  font-size: 1.2rem;
  line-height: 1;
}

.md-ver-pass strong {
  font-weight: 500;
  font-size: 0.75rem;
}

/* ---- Mensajes de validación ---- */
.md-field .vacio,
.md-field .formato,
.md-field .mensaje {
  display: none;
  font-size: 0.72rem;
  color: var(--md-error);
  margin-top: 4px;
  padding-left: 4px;
  font-family: var(--md-font);
}

/* Anular el display:none del .oculto solo aquí para que fix.css no interfiera */
.md-field .vacio:not(.oculto),
.md-field .formato:not(.oculto),
.md-field .mensaje:not(.oculto) {
  display: block;
}

/* Estados de validación compatibles con validacion.js */
.md-input.errores {
  border-color: var(--md-error) !important;
  box-shadow: 0 0 0 3px var(--md-error-tonal) !important;
  background-image: none !important;
}

.md-input.borrarErrores {
  border-color: var(--md-success) !important;
  box-shadow: 0 0 0 3px rgba(76,175,130,.12) !important;
  background-image: none !important;
}

.md-input.errores ~ label,
.md-input.errores:focus ~ label {
  color: var(--md-error) !important;
}

/* ---- Botón filled (acción primaria) ---- */
.md-btn-filled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-family: var(--md-font);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: none;
  border-radius: var(--md-radius);
  padding: 14px 24px;
  cursor: pointer;
  transition:
    background var(--md-duration) var(--md-ease),
    box-shadow var(--md-duration) var(--md-ease),
    transform var(--md-duration-short) var(--md-ease);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.md-btn-filled:hover {
  background: var(--md-primary-hover);
  box-shadow: 0 4px 18px rgba(76,175,130,.40);
  transform: translateY(-1px);
}

.md-btn-filled:active {
  transform: translateY(0);
  box-shadow: none;
  background: var(--md-primary-dark);
}

.md-btn-filled.w-100 {
  width: 100%;
}

/* Ripple efecto */
.md-btn-filled::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--md-duration-short) var(--md-ease);
  border-radius: inherit;
}

.md-btn-filled:active::after {
  background: rgba(255,255,255,.12);
}

/* ---- Botón text (enlace) ---- */
.md-btn-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--md-primary);
  font-family: var(--md-font);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--md-radius-sm);
  transition:
    background var(--md-duration) var(--md-ease),
    color var(--md-duration) var(--md-ease);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.md-btn-text:hover {
  background: var(--md-primary-tonal);
  color: var(--md-primary);
}

/* ---- Separador ---- */
.md-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--md-on-surface-muted);
  font-size: 0.75rem;
}

.md-divider::before,
.md-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--md-border);
}

/* ---- Área de links del login ---- */
.md-login-links {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* ---- Versión / Footer del login ---- */
.md-login-footer {
  text-align: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--md-border);
  color: var(--md-on-surface-muted);
  font-size: 0.72rem;
}

/* ================================================================
   3. RESPONSIVE — LOGIN
   ================================================================ */

@media (max-width: 480px) {
  .md-login-card {
    padding: 36px 24px;
    border-radius: var(--md-radius-xl);
    max-width: 100%;
  }

  .md-login-header h1 {
    font-size: 1.5rem;
  }
}

@media (max-width: 360px) {
  .md-login-card {
    padding: 28px 18px;
  }
}

/* Pantallas muy altas — centra mejor la card */
@media (min-height: 800px) {
  .md-login-page {
    align-items: center;
  }
}


/* ================================================================
   4. SHELL PRINCIPAL — App Bar + Drawer + Main + Bottom Nav
   ================================================================ */

/* Reset global del body en sistema */
body:has(.md-shell) {
  background: var(--md-surface) !important;
  margin: 0;
  padding: 0;
  font-family: var(--md-font);
  color: var(--md-on-surface);
  overflow-x: hidden;
}

/* ---- Shell wrapper ---- */
.md-shell {
  display: flex;
  min-height: 100vh;
  padding-top: 60px;
  background: var(--md-surface);
}

/* ================================================================
   TOP APP BAR
   ================================================================ */
.md-app-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 60px;
  background: var(--md-surface-card);
  border-bottom: 1px solid var(--md-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 4px;
  z-index: 200;
  box-shadow: var(--md-elevation-1);
}

.md-app-bar-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.md-app-bar-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--md-on-surface);
  letter-spacing: -0.2px;
}

.md-app-bar-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Botón ícono genérico */
.md-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--md-on-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.3rem;
  transition: background var(--md-duration) var(--md-ease);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.md-icon-btn:hover {
  background: rgba(255,255,255,.07);
}

.md-icon-btn:active {
  background: rgba(255,255,255,.12);
}

/* ---- Avatar del usuario (app bar) ---- */
.md-avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--md-border);
  background: var(--md-surface-raised);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--md-duration) var(--md-ease);
  -webkit-tap-highlight-color: transparent;
}

.md-avatar-btn:hover {
  border-color: var(--md-primary);
}

.md-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Dropdown de perfil ---- */
.md-profile-wrap {
  position: relative;
}

.md-profile-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: var(--md-surface-card);
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-lg);
  box-shadow: var(--md-elevation-3);
  z-index: 500;
  overflow: hidden;
  animation: mdFadeSlideDown 0.18s var(--md-ease) both;
}

.md-profile-dropdown.md-open {
  display: block;
}

@keyframes mdFadeSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.md-profile-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}

.md-profile-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--md-border);
  flex-shrink: 0;
}

.md-profile-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.md-profile-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-profile-level {
  font-size: 0.75rem;
  color: var(--md-on-surface-muted);
}

.md-profile-divider {
  height: 1px;
  background: var(--md-border);
  margin: 2px 0;
}

.md-profile-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 0.875rem;
  color: var(--md-on-surface);
  text-decoration: none;
  transition: background var(--md-duration) var(--md-ease);
  cursor: pointer;
}

.md-profile-item i {
  font-size: 1.1rem;
  color: var(--md-on-surface-muted);
  width: 20px;
  text-align: center;
}

.md-profile-item:hover {
  background: rgba(255,255,255,.06);
  color: var(--md-on-surface);
  text-decoration: none;
}

.md-profile-item--danger {
  color: var(--md-error);
}

.md-profile-item--danger i {
  color: var(--md-error);
}

.md-profile-item--danger:hover {
  background: var(--md-error-tonal);
}


/* ================================================================
   NAVIGATION DRAWER
   ================================================================ */
.md-drawer {
  position: fixed;
  top: 60px;
  left: 0;
  width: 268px;
  height: calc(100vh - 60px);
  background: var(--md-surface-card);
  border-right: 1px solid var(--md-border);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 210;
  display: flex;
  flex-direction: column;
  transition: transform var(--md-duration) var(--md-ease);
  scrollbar-width: thin;
  scrollbar-color: var(--md-border) transparent;
}

.md-drawer::-webkit-scrollbar { width: 4px; }
.md-drawer::-webkit-scrollbar-track { background: transparent; }
.md-drawer::-webkit-scrollbar-thumb { background: var(--md-border); border-radius: 4px; }

/* Cabecera del drawer */
.md-drawer-header {
  padding: 20px 16px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.md-drawer-avatar-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(76,175,130,.3);
  flex-shrink: 0;
  background: var(--md-surface-raised);
}

.md-drawer-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.md-drawer-user-info {
  overflow: hidden;
  flex: 1;
}

.md-drawer-user-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-drawer-user-level {
  font-size: 0.72rem;
  color: var(--md-primary);
  font-weight: 500;
}

.md-drawer-sucursal {
  font-size: 0.7rem;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-drawer-divider {
  height: 1px;
  background: var(--md-border);
  margin: 0 12px 8px;
  flex-shrink: 0;
}

.md-drawer-menu-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 4px 8px 80px;
}

/* ---- Estilos del menú dinámico (clases propias md-nav-*) ---- */

#menuSubMenu,
#menuSubMenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Separador de categoría */
#menuSubMenu li.md-nav-category {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--md-on-surface-muted);
  padding: 14px 14px 4px;
  opacity: 0.6;
}

/* Ítem principal */
#menuSubMenu li.md-nav-item {
  margin-bottom: 2px;
}

#menuSubMenu li.md-nav-item > a.md-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--md-radius-sm);
  color: var(--md-on-surface);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--md-duration) var(--md-ease),
              color var(--md-duration) var(--md-ease);
  user-select: none;
}

#menuSubMenu li.md-nav-item > a.md-nav-link:hover {
  background: rgba(255,255,255,.06);
  color: var(--md-on-surface);
  text-decoration: none;
}

#menuSubMenu li.md-nav-item.md-open > a.md-nav-link {
  background: var(--md-primary-tonal);
  color: var(--md-primary);
}

/* SVG / ícono */
#menuSubMenu li.md-nav-item > a.md-nav-link svg,
#menuSubMenu li.md-nav-item > a.md-nav-link .md-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor;
  opacity: 0.8;
}

/* Label */
#menuSubMenu li.md-nav-item > a.md-nav-link .md-nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Flecha de acordeón */
#menuSubMenu li.md-nav-item > a.md-nav-link .md-nav-angle {
  font-size: 0.75rem;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform var(--md-duration) var(--md-ease);
}

#menuSubMenu li.md-nav-item.md-open > a.md-nav-link .md-nav-angle {
  transform: rotate(90deg);
}

/* Submenú: oculto por defecto, visible cuando md-open */
#menuSubMenu li.md-nav-item > ul.md-nav-submenu {
  display: none;
  padding: 2px 0 6px 16px;
}

#menuSubMenu li.md-nav-item.md-open > ul.md-nav-submenu {
  display: block;
}

/* Subítem */
#menuSubMenu li.md-nav-subitem > a.md-nav-sublink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--md-radius-sm);
  color: var(--md-on-surface);
  font-size: 0.8125rem;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--md-duration) var(--md-ease),
              color var(--md-duration) var(--md-ease);
}

#menuSubMenu li.md-nav-subitem > a.md-nav-sublink::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--md-border);
  flex-shrink: 0;
  transition: background var(--md-duration) var(--md-ease);
}

#menuSubMenu li.md-nav-subitem > a.md-nav-sublink:hover,
#menuSubMenu li.md-nav-subitem > a.md-nav-sublink:focus {
  background: rgba(255,255,255,.08);
  color: var(--md-on-surface);
  text-decoration: none;
}

#menuSubMenu li.md-nav-subitem > a.md-nav-sublink.active {
  background: var(--md-primary-tonal);
  color: var(--md-on-surface);
}

#menuSubMenu li.md-nav-subitem > a.md-nav-sublink:hover::before,
#menuSubMenu li.md-nav-subitem > a.md-nav-sublink.active::before {
  background: var(--md-primary);
}

/* Dashboard sin flecha de acordeón */
#menuSubMenu li.md-nav-inicio-servicio > a.md-nav-link,
#menuSubMenu li.md-nav-inicio-producto > a.md-nav-link {
  color: var(--md-primary);
}

/* placeholder para no romper la referencia siguiente */
#menuSubMenu .md-nav-placeholder {
  display: none;
}

/* Overlay del drawer en móvil/tablet */
.md-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 209;
  backdrop-filter: blur(2px);
  animation: mdFadeIn 0.2s var(--md-ease);
}

.md-drawer-overlay.md-open {
  display: block;
}

@keyframes mdFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ================================================================
   MAIN CONTENT
   ================================================================ */
.md-main {
  flex: 1;
  margin-left: 268px;
  min-height: calc(100vh - 60px);
  overflow-x: hidden;
  transition: margin-left var(--md-duration) var(--md-ease);
}

.md-content-body {
  padding: 20px;
  min-height: 100%;
}

/* Anular padding-inline-start de fix.css en este contexto */
.md-content-body.container-fluid {
  padding-inline-start: 20px;
}


/* ================================================================
   OFFCANVAS DE FORMULARIOS
   ================================================================ */
.md-offcanvas {
  background: var(--md-surface-card) !important;
  border-left: 1px solid var(--md-border) !important;
  width: 420px !important;
}

.md-offcanvas-header {
  background: var(--md-surface-card);
  border-bottom: 1px solid var(--md-border);
  padding: 16px 20px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.md-offcanvas-title {
  color: var(--md-on-surface) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

.md-offcanvas-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--md-on-surface-muted);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--md-duration) var(--md-ease), color var(--md-duration) var(--md-ease);
}

.md-offcanvas-close:hover {
  background: rgba(255,255,255,.07);
  color: var(--md-on-surface);
}

.md-offcanvas-body {
  background: var(--md-surface-card);
  color: var(--md-on-surface);
  padding: 20px !important;
  overflow-y: auto;
}


/* ================================================================
   BOTTOM NAVIGATION (solo móvil)
   ================================================================ */
.md-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: var(--md-surface-card);
  border-top: 1px solid var(--md-border);
  z-index: 200;
  align-items: stretch;
  box-shadow: 0 -2px 8px rgba(0,0,0,.25);
}

.md-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: transparent;
  color: var(--md-on-surface-muted);
  font-size: 0.65rem;
  font-family: var(--md-font);
  cursor: pointer;
  padding: 6px 4px;
  transition: color var(--md-duration) var(--md-ease), background var(--md-duration) var(--md-ease);
  -webkit-tap-highlight-color: transparent;
  border-radius: 0;
  position: relative;
}

.md-bottom-nav-item i {
  font-size: 1.4rem;
  line-height: 1;
}

.md-bottom-nav-item.md-active,
.md-bottom-nav-item:hover {
  color: var(--md-primary);
}

.md-bottom-nav-item.md-active::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 32px;
  background: var(--md-primary-tonal);
  border-radius: 16px;
  z-index: -1;
}


/* ================================================================
   5. RESPONSIVE — SHELL
   ================================================================ */

/* Desktop: hamburguesa colapsa el drawer (sin overlay) */
@media (min-width: 1200px) {
  .md-drawer.md-collapsed {
    transform: translateX(-100%);
  }
  .md-main.md-drawer-collapsed {
    margin-left: 0;
  }
  .md-drawer-overlay {
    display: none !important;
  }
}

/* Tablet: drawer oculto por defecto, hamburguesa lo muestra */
@media (max-width: 1199px) {
  .md-drawer {
    transform: translateX(-100%);
    box-shadow: var(--md-elevation-3);
  }

  .md-drawer.md-open {
    transform: translateX(0);
  }

  .md-main {
    margin-left: 0;
  }
}

/* Móvil: espacio inferior en main solo para colaboradores (bottom nav) */
@media (max-width: 767px) {

  .md-content-body {
    padding: 12px;
  }

  .md-content-body.container-fluid {
    padding-inline-start: 12px;
  }

  .md-app-bar-title {
    font-size: 1rem;
  }

  .md-offcanvas {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .md-offcanvas {
    width: 100% !important;
  }
}


/* ================================================================
   6. ADAPTACIONES VALEX → MATERIAL
      Sobreescribir estilos del tema anterior que puedan filtrarse
   ================================================================ */

/* Ocultar componentes del VALEX que ya no se usan */
.main-header,
.app-sidebar,
.app-sidebar__overlay,
.main-sidebar-header,
.main-footer,
.slide-left,
.slide-right {
  display: none !important;
}

/* Cards del contenido — solo forma, sin forzar colores en card-body
   para no romper gráficas que renderizan con fondo propio */
.md-shell .card {
  background: var(--md-surface-card) !important;
  border: 1px solid var(--md-border) !important;
  border-radius: var(--md-radius) !important;
  box-shadow: var(--md-elevation-1) !important;
}

.md-shell .card-header {
  background: var(--md-surface-raised) !important;
  border-bottom: 1px solid var(--md-border) !important;
  color: var(--md-on-surface) !important;
  border-radius: var(--md-radius) var(--md-radius) 0 0 !important;
}

/* No forzar color en card-body: deja que las gráficas usen su propio color */
.md-shell .card-body {
  color: var(--md-on-surface);
}

/* Tablas */
.md-shell .table {
  color: var(--md-on-surface) !important;
}

.md-shell .table th {
  background: var(--md-surface-raised) !important;
  color: var(--md-on-surface-muted) !important;
  border-color: var(--md-border) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.md-shell .table td {
  border-color: var(--md-border) !important;
  color: var(--md-on-surface) !important;
}

.md-shell .table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255,255,255,.02) !important;
}

.md-shell .table-hover tbody tr:hover {
  background: rgba(76,175,130,.06) !important;
}

/* DataTables */
.md-shell .dataTables_wrapper .dataTables_filter input,
.md-shell .dataTables_wrapper .dataTables_length select {
  background: var(--md-surface-raised) !important;
  border: 1px solid var(--md-border) !important;
  color: var(--md-on-surface) !important;
  border-radius: var(--md-radius-sm) !important;
  padding: 4px 10px !important;
}

.md-shell .dataTables_wrapper .dataTables_info,
.md-shell .dataTables_wrapper .dataTables_paginate {
  color: var(--md-on-surface-muted) !important;
  font-size: 0.8rem !important;
}

.md-shell .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--md-on-surface-muted) !important;
  border-radius: var(--md-radius-sm) !important;
}

.md-shell .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--md-primary-tonal) !important;
  color: var(--md-primary) !important;
  border: none !important;
}

/* Formularios dentro del sistema */
.md-shell .form-control,
.md-shell .form-select {
  background: var(--md-surface-raised) !important;
  border: 1px solid var(--md-border) !important;
  color: var(--md-on-surface) !important;
  border-radius: var(--md-radius-sm) !important;
}

.md-shell .form-control:focus,
.md-shell .form-select:focus {
  border-color: var(--md-primary) !important;
  box-shadow: 0 0 0 3px rgba(76,175,130,.15) !important;
  color: var(--md-on-surface) !important;
  background: var(--md-surface-raised) !important;
}

.md-shell label {
  color: var(--md-on-surface-muted) !important;
}

/* Select2 dentro del sistema */
.md-shell .select2-container--default .select2-selection--single {
  background: var(--md-surface-raised) !important;
  border: 1px solid var(--md-border) !important;
  border-radius: var(--md-radius-sm) !important;
  height: 38px !important;
}

.md-shell .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--md-on-surface) !important;
  line-height: 36px !important;
}

.md-shell .select2-dropdown {
  background: var(--md-surface-card) !important;
  border: 1px solid var(--md-border) !important;
  border-radius: var(--md-radius-sm) !important;
}

.md-shell .select2-container--default .select2-results__option {
  color: var(--md-on-surface) !important;
}

.md-shell .select2-container--default .select2-results__option--selected,
.md-shell .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: rgba(76, 175, 130, 0.20) !important;
  color: var(--md-primary) !important;
}

.md-shell .select2-container--default .select2-results__option--highlighted,
.md-shell .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: rgba(76, 175, 130, 0.28) !important;
  color: var(--md-on-surface) !important;
}

.md-shell .select2-container--default .select2-results__option--highlighted.select2-results__option--selected,
.md-shell .select2-container--default .select2-results__option--highlighted[aria-selected=true] {
  background-color: rgba(76, 175, 130, 0.38) !important;
  color: var(--md-on-surface) !important;
}

.md-shell .select2-search__field {
  background: var(--md-surface-raised) !important;
  color: var(--md-on-surface) !important;
  border: 1px solid var(--md-border) !important;
}

/* Botones del sistema (general.js los genera) */
.md-shell .btn-primary-gradient,
.md-shell .btn-primary {
  background: var(--md-primary) !important;
  border-color: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
}

.md-shell .btn-danger-gradient,
.md-shell .btn-danger {
  background: var(--md-error) !important;
  border-color: var(--md-error) !important;
  color: #fff !important;
}

.md-shell .btn-success-gradient,
.md-shell .btn-success {
  background: var(--md-success) !important;
  border-color: var(--md-success) !important;
  color: var(--md-on-primary) !important;
}

.md-shell .btn-secondary-gradient,
.md-shell .btn-secondary {
  background: var(--md-surface-raised) !important;
  border-color: var(--md-border) !important;
  color: var(--md-on-surface) !important;
}

.md-shell .btn-info-gradient,
.md-shell .btn-info {
  background: var(--md-info) !important;
  border-color: var(--md-info) !important;
  color: #0D1F16 !important;
}

.md-shell .btn-warning-gradient,
.md-shell .btn-warning {
  background: var(--md-warning) !important;
  border-color: var(--md-warning) !important;
  color: #0D1F16 !important;
}

/* Badges / chips en tablas */
.md-shell .badge {
  border-radius: var(--md-radius-pill) !important;
  font-size: 0.7rem !important;
  padding: 4px 10px !important;
  font-weight: 500 !important;
}

/* Modales del sistema (general1/2/3) */
.modal-content {
  background: var(--md-surface-card) !important;
  border: 1px solid var(--md-border) !important;
  border-radius: var(--md-radius-lg) !important;
  color: var(--md-on-surface) !important;
}

.modal-header {
  background: var(--md-surface-raised) !important;
  border-bottom: 1px solid var(--md-border) !important;
  border-radius: var(--md-radius-lg) var(--md-radius-lg) 0 0 !important;
}

.modal-title {
  color: var(--md-on-surface) !important;
}

.modal-footer {
  border-top: 1px solid var(--md-border) !important;
  background: var(--md-surface-card) !important;
}

.btn-close {
  filter: invert(1) !important;
}
[data-theme="light"] .btn-close {
  filter: none !important;
}

/* Inputs dentro de offcanvas */
.md-offcanvas-body .form-control,
.md-offcanvas-body .form-select {
  background: var(--md-surface-raised) !important;
  border: 1px solid var(--md-border) !important;
  color: var(--md-on-surface) !important;
}

.md-offcanvas-body .form-control:focus,
.md-offcanvas-body .form-select:focus {
  border-color: var(--md-primary) !important;
  box-shadow: 0 0 0 3px rgba(76,175,130,.15) !important;
  color: var(--md-on-surface) !important;
}

.md-offcanvas-body label {
  color: var(--md-on-surface-muted) !important;
}


/* ================================================================
   SKELETON LOADER (Fase 3)
   ================================================================ */
@keyframes md-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.md-skeleton {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--md-surface-raised) 25%,
    rgba(255,255,255,.07) 50%,
    var(--md-surface-raised) 75%
  );
  background-size: 800px 100%;
  animation: md-shimmer 1.4s infinite linear;
  border-radius: 4px;
}


/* ================================================================
   TABLA RESPONSIVE → CARDS EN MÓVIL (Fase 3)
   .md-table aplicada a las <table> generadas por crearModulo()
   ================================================================ */
.md-table thead th {
  background: var(--md-surface-raised);
  color: var(--md-on-surface-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-color: var(--md-border) !important;
  white-space: nowrap;
}

.md-table tbody tr {
  transition: background var(--md-duration) var(--md-ease);
}

.md-table tbody tr:hover {
  background: rgba(255,255,255,.04) !important;
}

.md-table td {
  color: var(--md-on-surface);
  font-size: 0.82rem;
  border-color: var(--md-border) !important;
  vertical-align: middle;
}

/* En móvil cada fila se convierte en una card */
@media (max-width: 767px) {
  .md-table thead {
    display: none;
  }

  .md-table tbody tr {
    display: block;
    background: var(--md-surface-card) !important;
    border-radius: var(--md-radius) !important;
    box-shadow: var(--md-elevation-1);
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 1px solid var(--md-border) !important;
  }

  .md-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none !important;
    padding: 6px 0;
    font-size: 0.82rem;
    gap: 8px;
  }

  .md-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--md-on-surface-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
    min-width: 90px;
  }

  /* Última celda (acciones) centrada */
  .md-table tbody td:last-child {
    justify-content: flex-end;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--md-border) !important;
  }

  .md-table tbody td:last-child::before {
    display: none;
  }
}


/* ================================================================
   BOTONES MATERIAL — Variantes usadas en módulos (Fase 3)
   ================================================================ */
.md-btn-filled {
  background: var(--md-primary);
  color: var(--md-on-primary);
  border: none;
  border-radius: var(--md-radius-sm);
  font-weight: 600;
  letter-spacing: .03em;
  transition: background var(--md-duration) var(--md-ease),
              box-shadow var(--md-duration) var(--md-ease);
  position: relative;
  overflow: hidden;
}

.md-btn-filled:hover {
  background: var(--md-primary-hover);
  box-shadow: 0 4px 12px rgba(76,175,130,.35);
  color: var(--md-on-primary);
}

.md-btn-tonal {
  background: var(--md-primary-tonal);
  color: var(--md-primary);
  border: none;
  border-radius: var(--md-radius-sm);
  font-weight: 600;
  transition: background var(--md-duration) var(--md-ease);
}

.md-btn-tonal:hover {
  background: rgba(76,175,130,.22);
  color: var(--md-primary);
}

.md-btn-outlined {
  background: transparent;
  color: var(--md-primary);
  border: 1px solid var(--md-primary);
  border-radius: var(--md-radius-sm);
  font-weight: 600;
  transition: background var(--md-duration) var(--md-ease);
}

.md-btn-outlined:hover {
  background: var(--md-primary-tonal);
  color: var(--md-primary);
}

/* btn-sm sobreescribe el padding grande de md-btn-filled (14px 24px → compacto) */
.btn-sm.md-btn-filled {
  padding: 0.25rem 0.65rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: var(--md-radius-sm);
}

.md-btn-danger {
  background: var(--md-error-tonal);
  color: var(--md-error);
  border: none;
  border-radius: var(--md-radius-sm);
  font-weight: 600;
  transition: background var(--md-duration) var(--md-ease);
}

.md-btn-danger:hover {
  background: rgba(239,83,80,.22);
  color: var(--md-error);
}


/* ================================================================
   7. CHIPS / BADGES DE ESTADO
   ================================================================ */
.md-chip {
  display: inline-block;
  border-radius: var(--md-radius-pill);
  padding: 2px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.6;
  font-family: var(--md-font);
}

.md-chip--success { background: rgba(76,175,130,.18);  color: #4CAF82; }
.md-chip--warning { background: rgba(255,167,38,.18);  color: #FFA726; }
.md-chip--error,
.md-chip--danger  { background: rgba(239,83,80,.18);   color: #EF5350; }
.md-chip--info    { background: rgba(41,182,246,.18);  color: #29B6F6; }
.md-chip--neutral { background: rgba(144,164,174,.18); color: #90A4AE; }
.md-chip--primary { background: rgba(76,175,130,.18);  color: #4CAF82; }

/* Variante con borde (outlined chip) */
.md-chip--outlined {
  background: transparent;
  border: 1px solid currentColor;
  opacity: 0.85;
}


/* ================================================================
   8. CARD MATERIAL STANDALONE
   ================================================================ */

/* Estado inactivo — se aplica con JS al cambiar estado */
.md-card--inactive {
  opacity: 0.5;
  border-left: 3px solid var(--md-error) !important;
  filter: grayscale(40%);
}

.md-card--inactive .md-title-md {
  text-decoration: line-through;
  color: var(--md-on-surface-muted) !important;
}

.md-card {
  background: var(--md-surface-card);
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius);
  box-shadow: var(--md-elevation-1);
  transition: box-shadow var(--md-duration) var(--md-ease),
              transform var(--md-duration) var(--md-ease);
}

.md-card:hover {
  box-shadow: var(--md-elevation-2);
  transform: translateY(-1px);
}

.md-card--elevated {
  box-shadow: var(--md-elevation-2);
}

.md-card--elevated:hover {
  box-shadow: var(--md-elevation-3);
}

.md-card__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--md-border);
  font-weight: 600;
  color: var(--md-on-surface);
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.md-card__body {
  padding: 20px;
  color: var(--md-on-surface);
}

.md-card__footer {
  padding: 12px 20px;
  border-top: 1px solid var(--md-border);
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ================================================================
   9. ESCALA TIPOGRÁFICA MATERIAL
   ================================================================ */
.md-display-lg   { font-size: 2.5rem;    font-weight: 700; letter-spacing: -0.5px; line-height: 1.1;  color: var(--md-on-surface); }
.md-display-md   { font-size: 2rem;      font-weight: 700; letter-spacing: -0.3px; line-height: 1.15; color: var(--md-on-surface); }
.md-headline-lg  { font-size: 1.5rem;    font-weight: 600; letter-spacing: -0.2px; line-height: 1.25; color: var(--md-on-surface); }
.md-headline-md  { font-size: 1.25rem;   font-weight: 600; line-height: 1.3;       color: var(--md-on-surface); }
.md-headline-sm  { font-size: 1.1rem;    font-weight: 600; line-height: 1.35;      color: var(--md-on-surface); }
.md-title-lg     { font-size: 1rem;      font-weight: 600; line-height: 1.4;       color: var(--md-on-surface); }
.md-title-md     { font-size: 0.9375rem; font-weight: 600; line-height: 1.4;       color: var(--md-on-surface); }
.md-body-lg      { font-size: 0.9375rem; font-weight: 400; line-height: 1.5;       color: var(--md-on-surface); }
.md-body-md      { font-size: 0.875rem;  font-weight: 400; line-height: 1.5;       color: var(--md-on-surface); }
.md-body-sm      { font-size: 0.8125rem; font-weight: 400; line-height: 1.5;       color: var(--md-on-surface); }
.md-label-lg     { font-size: 0.875rem;  font-weight: 500; line-height: 1.4;       color: var(--md-on-surface-muted); }
.md-label-md     { font-size: 0.8125rem; font-weight: 500; line-height: 1.4;       color: var(--md-on-surface-muted); }
.md-label-sm     { font-size: 0.75rem;   font-weight: 500; line-height: 1.4;       color: var(--md-on-surface-muted); }


/* ================================================================
   10. SELECT2 — ESTILOS GLOBALES
   Cubre tanto el contenedor (selection) como el dropdown,
   sin prefijo .md-shell para garantizar que aplique siempre.
   ================================================================ */

/* Contenedor visible (antes de abrir) */
.select2-container--default .select2-selection--single {
  background: var(--md-surface-raised) !important;
  border: 1px solid var(--md-border) !important;
  border-radius: var(--md-radius-sm) !important;
  height: 38px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--md-on-surface) !important;
  line-height: 36px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--md-on-surface-muted) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--md-primary) !important;
  box-shadow: 0 0 0 3px rgba(76,175,130,.15) !important;
  outline: none !important;
}

/* Dropdown — z-index superior al offcanvas (1045) y su backdrop (1044) */
.select2-dropdown {
  background: var(--md-surface-card) !important;
  border: 1px solid var(--md-border) !important;
  border-radius: var(--md-radius-sm) !important;
  box-shadow: var(--md-elevation-2) !important;
  z-index: 1100 !important;
}

.select2-container--open {
  z-index: 1100 !important;
}

.select2-container--default .select2-results__option {
  color: var(--md-on-surface) !important;
  font-size: 0.875rem;
}

.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: rgba(76, 175, 130, 0.28) !important;
  color: var(--md-on-surface) !important;
}

/* Opción seleccionada — clase .--selected (Select2 4.1+) y atributo aria-selected */
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: rgba(76, 175, 130, 0.20) !important;
  color: var(--md-primary) !important;
}

/* Hover sobre la opción ya seleccionada */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selected,
.select2-container--default .select2-results__option--highlighted[aria-selected=true] {
  background-color: rgba(76, 175, 130, 0.38) !important;
  color: var(--md-on-surface) !important;
}

.select2-search--dropdown .select2-search__field {
  background: var(--md-surface-raised) !important;
  color: var(--md-on-surface) !important;
  border: 1px solid var(--md-border) !important;
  border-radius: var(--md-radius-sm) !important;
}

.select2-container--default .select2-results > .select2-results__options {
  scrollbar-width: thin;
  scrollbar-color: var(--md-border) transparent;
}

/* Select2 multiple — dark theme */
.select2-container--default .select2-selection--multiple {
  background: var(--md-surface-raised) !important;
  border: 1px solid var(--md-border) !important;
  border-radius: var(--md-radius-sm) !important;
  min-height: 38px !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--md-primary) !important;
  box-shadow: 0 0 0 3px rgba(76,175,130,.15) !important;
  outline: none !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--md-primary-tonal) !important;
  border: 1px solid var(--md-primary) !important;
  color: var(--md-primary) !important;
  border-radius: var(--md-radius-sm) !important;
  font-size: 0.8rem !important;
  padding: 3px 10px 3px 24px !important;  /* 24px izq = espacio para el × absoluto */
  margin: 3px 4px 3px 0 !important;
  line-height: 1.4 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  padding-left: 2px !important;
  padding-right: 4px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--md-primary) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  top: 0 !important;
  bottom: 0 !important;
  padding: 0 5px !important;
  border-right: 1px solid var(--md-primary) !important;
  border-top-left-radius: var(--md-radius-sm) !important;
  border-bottom-left-radius: var(--md-radius-sm) !important;
  display: flex !important;
  align-items: center !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background: rgba(76,175,130,.15) !important;
  color: var(--md-error) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: var(--md-on-surface-muted) !important;
}
.select2-container--default .select2-search--inline .select2-search__field {
  background: transparent !important;
  color: var(--md-on-surface) !important;
  border: none !important;
  outline: none !important;
}


/* ================================================================
   11. BOOTSTRAP DATEPICKER — estilo oscuro global
   Selectores sin prefijo de contenedor para garantizar que apliquen
   independientemente de dónde el datepicker sea montado (body u offcanvas).
   ================================================================ */

/* Contenedor dropdown — anula el bg blanco de .dropdown-menu de Bootstrap 5 */
.datepicker.datepicker-dropdown,
.datepicker-dropdown {
  background-color: var(--md-surface-card) !important;
  border: 1px solid var(--md-border) !important;
  border-radius: var(--md-radius-sm) !important;
  box-shadow: var(--md-elevation-3) !important;
  z-index: 9999 !important;
  padding: 8px !important;
  --bs-dropdown-bg: var(--md-surface-card);
}

/* Flechitas del dropdown */
.datepicker-dropdown::before { border-bottom-color: var(--md-border) !important; }
.datepicker-dropdown::after  { border-bottom-color: var(--md-surface-card) !important; }

/* Todos los elementos intermedios forzados a fondo oscuro */
.datepicker.datepicker-dropdown .datepicker-days,
.datepicker.datepicker-dropdown .datepicker-months,
.datepicker.datepicker-dropdown .datepicker-years,
.datepicker.datepicker-dropdown .datepicker-decades,
.datepicker.datepicker-dropdown table,
.datepicker.datepicker-dropdown .table-condensed,
.datepicker.datepicker-dropdown thead,
.datepicker.datepicker-dropdown tbody,
.datepicker.datepicker-dropdown tfoot,
.datepicker.datepicker-dropdown tr {
  background-color: var(--md-surface-card) !important;
  background-image: none !important;
}

/* ---- th: prev / switch / next / dow ---- */
.datepicker.datepicker-dropdown table tr th {
  background-color: transparent !important;
  color: var(--md-on-surface) !important;
  border-radius: var(--md-radius-sm) !important;
}

.datepicker.datepicker-dropdown table tr th.datepicker-switch {
  color: var(--md-primary) !important;
  font-weight: 700;
}

.datepicker.datepicker-dropdown table tr th.prev,
.datepicker.datepicker-dropdown table tr th.next {
  color: var(--md-primary) !important;
}

.datepicker.datepicker-dropdown table tr th.prev:hover,
.datepicker.datepicker-dropdown table tr th.next:hover,
.datepicker.datepicker-dropdown table tr th.datepicker-switch:hover {
  background-color: var(--md-primary-tonal) !important;
  color: var(--md-primary) !important;
}

.datepicker.datepicker-dropdown table tr th.dow {
  color: var(--md-on-surface-muted) !important;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background-color: transparent !important;
}

/* ---- td: días base ---- */
.datepicker.datepicker-dropdown table tr td {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--md-on-surface) !important;
  border-radius: var(--md-radius-sm) !important;
  text-shadow: none !important;
}

/* Días fuera del mes actual */
.datepicker.datepicker-dropdown table tr td.old,
.datepicker.datepicker-dropdown table tr td.new {
  color: var(--md-on-surface-muted) !important;
  opacity: 0.5;
}

/* ── jQuery UI Autocomplete ─────────────────────────────── */
.ui-autocomplete {
  background-color: var(--md-surface-raised) !important;
  border: 1px solid var(--md-border) !important;
  border-radius: var(--md-radius-sm) !important;
  box-shadow: var(--md-elevation-3) !important;
  padding: 4px 0 !important;
  font-family: var(--md-font) !important;
  font-size: 0.875rem !important;
  color: var(--md-on-surface) !important;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 9999 !important;
}

.ui-autocomplete .ui-menu-item-wrapper {
  padding: 8px 14px !important;
  border-radius: 0 !important;
  color: var(--md-on-surface) !important;
  cursor: pointer;
  transition: background var(--md-duration-short) var(--md-ease);
  border: none !important;
  background: transparent !important;
}

.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper:hover {
  background-color: var(--md-primary-tonal) !important;
  color: var(--md-primary) !important;
  border: none !important;
}

.ui-autocomplete .ui-menu-item + .ui-menu-item {
  border-top: 1px solid var(--md-border);
}

/* Hover día */
.datepicker.datepicker-dropdown table tr td.day:hover,
.datepicker.datepicker-dropdown table tr td.day.focused {
  background-color: var(--md-primary-tonal) !important;
  color: var(--md-primary) !important;
}

/* Hoy */
.datepicker.datepicker-dropdown table tr td.today,
.datepicker.datepicker-dropdown table tr td.today:hover,
.datepicker.datepicker-dropdown table tr td.today.disabled,
.datepicker.datepicker-dropdown table tr td.today.disabled:hover {
  background-color: rgba(76,175,130,.22) !important;
  background-image: none !important;
  color: var(--md-primary) !important;
  font-weight: 700;
  text-shadow: none !important;
  filter: none !important;
}

/* Día seleccionado */
.datepicker.datepicker-dropdown table tr td.active,
.datepicker.datepicker-dropdown table tr td.active:hover,
.datepicker.datepicker-dropdown table tr td.active.disabled,
.datepicker.datepicker-dropdown table tr td.active.disabled:hover {
  background-color: var(--md-primary) !important;
  background-image: none !important;
  color: var(--md-on-primary) !important;
  font-weight: 700;
  text-shadow: none !important;
  filter: none !important;
  border-color: transparent !important;
}

/* Deshabilitado */
.datepicker.datepicker-dropdown table tr td.disabled,
.datepicker.datepicker-dropdown table tr td.disabled:hover {
  background-color: transparent !important;
  color: var(--md-on-surface-muted) !important;
  opacity: 0.4;
}

/* ---- spans: vista mes/año/década ---- */
.datepicker.datepicker-dropdown table tr td span {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--md-on-surface) !important;
  border-radius: var(--md-radius-sm) !important;
  text-shadow: none !important;
}

.datepicker.datepicker-dropdown table tr td span:hover,
.datepicker.datepicker-dropdown table tr td span.focused {
  background-color: var(--md-primary-tonal) !important;
  color: var(--md-primary) !important;
}

.datepicker.datepicker-dropdown table tr td span.active,
.datepicker.datepicker-dropdown table tr td span.active:hover {
  background-color: var(--md-primary) !important;
  background-image: none !important;
  color: var(--md-on-primary) !important;
  text-shadow: none !important;
  filter: none !important;
}

.datepicker.datepicker-dropdown table tr td span.disabled,
.datepicker.datepicker-dropdown table tr td span.disabled:hover {
  background-color: transparent !important;
  color: var(--md-on-surface-muted) !important;
  opacity: 0.4;
}

/* ================================================================
   INPUT FILE — estilo oscuro tema Material
   ================================================================ */
.md-offcanvas-body input[type=file].form-control,
.md-shell input[type=file].form-control {
  background: var(--md-surface-raised) !important;
  border: 1px solid var(--md-border) !important;
  color: var(--md-on-surface) !important;
  padding: 0 !important;
}

.md-offcanvas-body input[type=file].form-control::file-selector-button,
.md-shell input[type=file].form-control::file-selector-button {
  background: var(--md-surface-raised) !important;
  color: var(--md-on-surface-muted) !important;
  border: none !important;
  border-right: 1px solid var(--md-border) !important;
  padding: 6px 14px !important;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--md-duration) var(--md-ease),
              color var(--md-duration) var(--md-ease);
  height: 100%;
}

.md-offcanvas-body input[type=file].form-control::file-selector-button:hover,
.md-shell input[type=file].form-control::file-selector-button:hover {
  background: var(--md-primary-tonal) !important;
  color: var(--md-primary) !important;
}


/* ================================================================
   12. MÓDULO ACCESO — Listas de menú/submenú con switches
   ================================================================ */
.md-acceso-item {
  border-bottom: 1px solid var(--md-border);
  transition: background var(--md-duration) var(--md-ease);
  border-radius: var(--md-radius-sm);
}

.md-acceso-item:last-of-type {
  border-bottom: none;
}

.md-acceso-item:hover {
  background: rgba(255,255,255,.04);
}

.md-acceso-item .itemMenu {
  transition: color var(--md-duration) var(--md-ease);
}

.md-acceso-item .itemMenu:hover {
  color: var(--md-primary) !important;
}

/* Switch alineado a la derecha con ancho fijo */
.md-acceso-item .form-check.form-switch {
  flex-shrink: 0;
  width: 2em;
  padding-left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.md-acceso-item .form-check.form-switch .form-check-input {
  margin-left: 0;
  float: none;
}

/* Ítem de menú seleccionado actualmente */
.md-acceso--activo {
  background: var(--md-primary-tonal) !important;
  border-radius: var(--md-radius-sm) !important;
}

.md-acceso--activo .itemMenu {
  color: var(--md-primary) !important;
  font-weight: 600;
}


/* ================================================================
   12. SWITCH MATERIAL (.md-switch)
   Sobrescribe el switch de Bootstrap con colores del tema.
   ================================================================ */
.md-switch {
  cursor: pointer;
  width: 2.5em !important;
  transition: background-color var(--md-duration) var(--md-ease),
              border-color var(--md-duration) var(--md-ease);
}

.md-switch:checked {
  background-color: var(--md-primary) !important;
  border-color: var(--md-primary) !important;
}

.md-switch:focus {
  border-color: var(--md-primary) !important;
  box-shadow: 0 0 0 3px rgba(76,175,130,.2) !important;
}

.md-switch:not(:checked) {
  background-color: var(--md-border) !important;
  border-color: var(--md-border) !important;
}


/* ================================================================
   13. SWEETALERT2 — Material Dark Theme
   ================================================================ */

/* Popup base */
.swal2-popup.md-swal-popup {
  background: var(--md-surface-card) !important;
  border: 1px solid var(--md-border) !important;
  border-radius: var(--md-radius-lg) !important;
  box-shadow: var(--md-elevation-4) !important;
  padding: 2rem 1.75rem !important;
  font-family: var(--md-font) !important;
  color: var(--md-on-surface) !important;
}

/* Títulos y texto */
.swal2-popup.md-swal-popup .swal2-title {
  color: var(--md-on-surface) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  padding-bottom: 0.25rem !important;
}

.swal2-popup.md-swal-popup .swal2-html-container,
.swal2-popup.md-swal-popup .swal2-content {
  color: var(--md-on-surface-muted) !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
}

/* Icono success → verde */
.swal2-popup.md-swal-popup .swal2-icon.swal2-success {
  border-color: var(--md-success) !important;
  color: var(--md-success) !important;
}
.swal2-popup.md-swal-popup .swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(76,175,130,.3) !important;
}
.swal2-popup.md-swal-popup .swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--md-success) !important;
}

/* Icono error → rojo */
.swal2-popup.md-swal-popup .swal2-icon.swal2-error {
  border-color: var(--md-error) !important;
  color: var(--md-error) !important;
}
.swal2-popup.md-swal-popup .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: var(--md-error) !important;
}

/* Icono warning → naranja */
.swal2-popup.md-swal-popup .swal2-icon.swal2-warning {
  border-color: var(--md-warning) !important;
  color: var(--md-warning) !important;
}

/* Icono info → azul */
.swal2-popup.md-swal-popup .swal2-icon.swal2-info {
  border-color: var(--md-info) !important;
  color: var(--md-info) !important;
}

/* Icono question → primary verde */
.swal2-popup.md-swal-popup .swal2-icon.swal2-question {
  border-color: var(--md-primary) !important;
  color: var(--md-primary) !important;
}

/* Botón confirmar — filled */
.swal2-confirm.md-swal-confirm {
  background-color: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
  border: none !important;
  border-radius: var(--md-radius-sm) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 8px 22px !important;
  transition: background var(--md-duration-short) var(--md-ease) !important;
  box-shadow: none !important;
}
.swal2-confirm.md-swal-confirm:hover,
.swal2-confirm.md-swal-confirm:focus {
  background-color: var(--md-primary-hover) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Botón cancelar — outlined */
.swal2-cancel.md-swal-cancel {
  background-color: transparent !important;
  color: var(--md-on-surface-muted) !important;
  border: 1px solid var(--md-border) !important;
  border-radius: var(--md-radius-sm) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 8px 22px !important;
  transition: background var(--md-duration-short) var(--md-ease),
              border-color var(--md-duration-short) var(--md-ease) !important;
  box-shadow: none !important;
}
.swal2-cancel.md-swal-cancel:hover,
.swal2-cancel.md-swal-cancel:focus {
  background-color: var(--md-surface-raised) !important;
  border-color: var(--md-on-surface-muted) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Espacio entre botones */
.swal2-popup.md-swal-popup .swal2-actions {
  gap: 8px !important;
}

/* Backdrop con blur sutil */
.swal2-backdrop-show {
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(3px) !important;
}


/* ================================================================
   MODO COLABORADOR (id_nivel=5)
   Desktop ≥1200px : drawer normal, sin bottom nav
   Tablet + móvil <1200px : solo bottom nav, sin drawer ni hamburger
   ================================================================ */
@media (max-width: 1199px) {
  .md-modo-colaborador .md-bottom-nav {
    display: flex !important;
  }
  .md-modo-colaborador #mdMenuToggle {
    display: none !important;
  }
  .md-modo-colaborador .md-main {
    padding-bottom: 72px !important;
  }
  .md-modo-colaborador #mdProfileWrap {
    display: none !important;
  }
}


/* ================================================================
   TEMA CLARO — data-theme="light"
   ================================================================ */
[data-theme="light"] {
  /* Superficies */
  --md-surface:           #F0F2F5;
  --md-surface-card:      #FFFFFF;
  --md-surface-raised:    #E8EAED;
  --md-surface-overlay:   rgba(240, 242, 245, 0.92);

  /* Texto */
  --md-on-surface:         #1A1A2E;
  --md-on-surface-muted:   #5F6368;
  --md-on-surface-variant: #5F6368;
  --md-on-primary:         #FFFFFF;

  /* Bordes */
  --md-border:            #D1D5DB;
  --md-border-focus:      #4CAF82;

  /* Tonal primario */
  --md-primary-tonal:     rgba(76, 175, 130, 0.10);

  /* Sombras más pronunciadas sobre fondo claro */
  --md-elevation-1: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.16);
  --md-elevation-2: 0 3px 6px rgba(0,0,0,.10), 0 3px 6px rgba(0,0,0,.14);
  --md-elevation-3: 0 8px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.10);
  --md-elevation-4: 0 12px 28px rgba(0,0,0,.14), 0 8px 12px rgba(0,0,0,.10);
}

/* Ajustes específicos para modo claro */
[data-theme="light"] .md-login-page {
  background-image:
    linear-gradient(rgba(240,242,245,.78), rgba(240,242,245,.85)),
    url('/imagenes/barbershop.jpg');
}

[data-theme="light"] #global-loader {
  background-color: var(--md-surface);
}

[data-theme="light"] .md-app-bar {
  border-bottom: 1px solid var(--md-border);
}

[data-theme="light"] .md-drawer {
  border-right: 1px solid var(--md-border);
}