/* ============================================================
   MGR APP — Design System
   CSS puro, sin dependencia visual de Bootstrap
   Bootstrap JS (data-bs-*) se mantiene para comportamiento
   ============================================================ */

/* ------------------------------------------------------------
   1. VARIABLES GLOBALES
   ------------------------------------------------------------ */
:root {
  /* Colores de marca */
  --clr-blue:        #2599d7;
  --clr-blue-hover:  #1e83b8;
  --clr-blue-light:  #a6d2ec;
  --clr-blue-xlight: #e8f5fd;
  --clr-purple:      #573793;
  --clr-purple-hover:#432b73;
  --clr-teal:        #5bcac2;
  --clr-teal-hover:  #43b0a8;

  /* Gradiente de marca */
  --gradient-brand: linear-gradient(135deg, #5bcac2 0%, #2599d7 50%, #573793 100%);
  --gradient-brand-h: linear-gradient(135deg, #43b0a8 0%, #1e83b8 50%, #432b73 100%);

  /* Sidebar */
  --sidebar-width:      240px;
  --sidebar-bg:         #0f172a;
  --sidebar-border:     rgba(255,255,255,0.06);
  --sidebar-text:       rgba(255,255,255,0.6);
  --sidebar-text-hover: rgba(255,255,255,0.9);
  --sidebar-text-active:#ffffff;
  --sidebar-item-hover: rgba(255,255,255,0.06);
  --sidebar-item-active:rgba(37,153,215,0.18);
  --sidebar-accent:     #2599d7;
  --topbar-height:      56px;
  --quickbar-height:    44px;
  --bottomnav-height:   58px;

  /* Colores semánticos */
  --clr-success:     #22c55e;
  --clr-warning:     #f59e0b;
  --clr-danger:      #ef4444;
  --clr-info:        #2599d7;

  /* Neutros */
  --clr-white:       #ffffff;
  --clr-bg:          #f0f4f8;
  --clr-surface:     #ffffff;
  --clr-border:      #e2e8f0;
  --clr-border-soft: #f1f5f9;
  --clr-text:        #1e293b;
  --clr-text-soft:   #64748b;
  --clr-text-xsoft:  #94a3b8;

  /* Tipografía */
  --font-base:       "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs:    0.75rem;
  --font-size-sm:    0.8125rem;
  --font-size-base:  0.875rem;
  --font-size-md:    1rem;
  --font-size-lg:    1.125rem;
  --font-size-xl:    1.25rem;
  --font-size-2xl:   1.5rem;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Radios */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.05);
  --shadow-xl:  0 20px 40px rgba(0,0,0,0.10);

  /* Transiciones */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;

  /* Navbar */
  --navbar-height:     60px;
  --navbar-bg:         #ffffff;
  --navbar-border:     var(--clr-border);
}

/* ------------------------------------------------------------
   2. RESET Y BASE
   ------------------------------------------------------------ */

/* Neutralizar estilos visuales de Bootstrap en el navbar
   (usamos navbar + navbar-expand-lg solo para el comportamiento
   del collapse JS, no para el aspecto visual) */
.mgr-navbar.navbar {
  padding: 0 !important;
  background: var(--navbar-bg) !important;
}
.mgr-navbar .navbar-collapse {
  flex-grow: 1 !important;
  display: flex !important;
  align-items: center;
  gap: var(--space-2);
}
.mgr-navbar .navbar-toggler {
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.mgr-navbar .navbar-toggler:focus {
  box-shadow: none !important;
}
*, *::before, *::after {
  box-sizing: border-box;
}

/* Corrección intl-tel-input: Bootstrap sobreescribe el padding-left que inyecta la librería */
.iti--allow-dropdown input.form-control,
.iti--allow-dropdown input[type=tel].form-control {
  padding-left: 52px !important;
}
.iti--separate-dial-code input.form-control,
.iti--separate-dial-code input[type=tel].form-control {
  padding-left: 90px !important;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  color: var(--clr-text);
  background-color: var(--clr-bg);
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------
   3. NAVBAR
   ------------------------------------------------------------ */
.mgr-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  width: 100%;
  height: var(--navbar-height);
  background: var(--navbar-bg);
  border-bottom: 1px solid var(--navbar-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
}

.mgr-navbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-brand);
}

.mgr-navbar-inner {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--space-2);
}

/* Logo / Brand */
.mgr-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  margin-right: var(--space-4);
}

.mgr-brand img {
  height: 36px;
  width: auto;
}

/* Nombre del cliente */
.mgr-client-name {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: var(--font-size-lg);
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* Menú de navegación */
.mgr-nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-1);
  flex: 1;
}

/* Nav centrado: ocupa todo el espacio disponible y centra sus items */
.mgr-nav.mgr-nav-center {
  justify-content: center;
}

/* Botones de icono solo (WhatsApp y Perfil) */
.mgr-nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  padding: 0;
  transition: background var(--transition-fast);
  text-decoration: none;
  color: var(--clr-text-soft);
}

.mgr-nav-icon-btn:hover {
  background: var(--clr-blue-xlight);
}

/* Grupo derecho: WhatsApp + perfil */
.mgr-nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  padding-right: var(--space-3);
  flex-shrink: 0;
}

.mgr-nav-item {
  position: relative;
}

.mgr-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--clr-text-soft);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
  border: none;
  background: none;
  line-height: 1.4;
}

.mgr-nav-link i {
  color: var(--clr-purple);
  font-size: 0.875rem;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.mgr-nav-link:hover,
.mgr-nav-link:focus {
  color: var(--clr-blue);
  background: var(--clr-blue-xlight);
  outline: none;
}

.mgr-nav-link:hover i,
.mgr-nav-link:focus i {
  color: var(--clr-blue);
}

/* Flecha dropdown */
.mgr-nav-link.dropdown-toggle::after {
  display: inline-block;
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: var(--space-1);
  opacity: 0.5;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.mgr-nav-link.dropdown-toggle.show::after {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown menú */
.mgr-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  list-style: none;
  margin: 0;
  z-index: 1050;
  /* Bootstrap JS controla display, no necesitamos nada más */
}

.mgr-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--clr-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
  cursor: pointer;
}

.mgr-dropdown-item i {
  color: var(--clr-purple);
  font-size: 0.8125rem;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.mgr-dropdown-item:hover,
.mgr-dropdown-item:focus {
  color: var(--clr-blue);
  background: var(--clr-blue-xlight);
  outline: none;
}

.mgr-dropdown-item:hover i,
.mgr-dropdown-item:focus i {
  color: var(--clr-blue);
}

.mgr-dropdown-divider {
  height: 1px;
  background: var(--clr-border);
  margin: var(--space-2) 0;
  border: none;
}

/* Botón hamburguesa */
.mgr-toggler {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--clr-blue);
  color: white;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.mgr-toggler:hover {
  background: var(--clr-blue-hover);
}

.mgr-toggler-icon {
  display: block;
  width: 18px;
  height: 2px;
  background: white;
  position: relative;
  transition: background var(--transition-fast);
}

.mgr-toggler-icon::before,
.mgr-toggler-icon::after {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: white;
  position: absolute;
  left: 0;
  transition: transform var(--transition-base);
}

.mgr-toggler-icon::before { top: -5px; }
.mgr-toggler-icon::after  { top: 5px; }

/* Responsive navbar */
@media (max-width: 991px) {
  .mgr-toggler {
    display: flex;
  }

  .mgr-nav-collapse {
    display: none;
    position: absolute;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    box-shadow: var(--shadow-md);
    padding: var(--space-3) var(--space-4);
    z-index: 1029;
  }

  .mgr-nav-collapse.show {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .mgr-nav-icon-btn {
    width: 100%;
    justify-content: flex-start;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    height: auto;
    gap: var(--space-2);
  }

  .mgr-nav-right {
    margin-left: 0;
    padding-right: 0;
    width: 100%;
    flex-direction: column;
    gap: var(--space-1);
  }

  .mgr-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .mgr-nav-item {
    width: 100%;
  }

  .mgr-nav-link {
    width: 100%;
    padding: var(--space-3) var(--space-3);
  }

  .mgr-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--clr-border);
    border-radius: 0;
    padding: var(--space-1) 0 var(--space-1) var(--space-4);
    margin-top: 2px;
    background: transparent;
  }

  .mgr-client-name {
    display: none;
  }
}

/* ------------------------------------------------------------
   4. LAYOUT DE PÁGINA
   ------------------------------------------------------------ */

/* Espaciado global: todos los container-fluid/container después del navbar */
body > .container-fluid,
body > .container,
body > div > .container-fluid,
body > div > .container {
  padding-top: var(--space-4);
}

/* Scrollbar sutil */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--clr-bg); }
::-webkit-scrollbar-thumb { background: var(--clr-blue-light); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--clr-blue); }

.mgr-page {
  padding: var(--space-6) var(--space-6);
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .mgr-page {
    padding: var(--space-4) var(--space-3);
  }
}

.mgr-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.mgr-page-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--clr-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.mgr-page-title i {
  color: var(--clr-blue);
}

/* ------------------------------------------------------------
   5. CARDS
   ------------------------------------------------------------ */
.mgr-card {
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.mgr-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--clr-border-soft);
  gap: var(--space-3);
}

.mgr-card-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--clr-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mgr-card-title i {
  color: var(--clr-blue);
  font-size: 0.9rem;
}

.mgr-card-body {
  padding: var(--space-5);
}

.mgr-card-footer {
  padding: var(--space-3) var(--space-5);
  background: var(--clr-bg);
  border-top: 1px solid var(--clr-border-soft);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Card con gradiente de marca */
.mgr-card-brand {
  background: var(--gradient-brand);
  border: none;
  color: white;
}

.mgr-card-brand .mgr-card-title,
.mgr-card-brand .mgr-card-title i,
.mgr-card-brand p,
.mgr-card-brand span,
.mgr-card-brand a {
  color: white !important;
}

/* Cards de estadísticas */
.mgr-stat-card {
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

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

.mgr-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.mgr-stat-icon-blue   { background: var(--clr-blue-xlight); color: var(--clr-blue); }
.mgr-stat-icon-purple { background: #f0eaf8; color: var(--clr-purple); }
.mgr-stat-icon-teal   { background: #eafaf9; color: var(--clr-teal); }
.mgr-stat-icon-green  { background: #f0fdf4; color: var(--clr-success); }

.mgr-stat-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.2;
}

.mgr-stat-label {
  font-size: var(--font-size-xs);
  color: var(--clr-text-soft);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* ------------------------------------------------------------
   6. BOTONES
   ------------------------------------------------------------ */
.mgr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast), transform var(--transition-fast);
  -webkit-user-select: none;
  user-select: none;
}

.mgr-btn:active {
  transform: translateY(1px);
}

.mgr-btn:focus-visible {
  outline: 2px solid var(--clr-blue);
  outline-offset: 2px;
}

/* Variantes */
.mgr-btn-primary {
  background: var(--clr-blue);
  border-color: var(--clr-blue);
  color: white;
}
.mgr-btn-primary:hover {
  background: var(--clr-blue-hover);
  border-color: var(--clr-blue-hover);
  color: white;
}

.mgr-btn-secondary {
  background: var(--clr-purple);
  border-color: var(--clr-purple);
  color: white;
}
.mgr-btn-secondary:hover {
  background: var(--clr-purple-hover);
  border-color: var(--clr-purple-hover);
  color: white;
}

.mgr-btn-outline {
  background: transparent;
  border-color: var(--clr-blue);
  color: var(--clr-blue);
}
.mgr-btn-outline:hover {
  background: var(--clr-blue-xlight);
  color: var(--clr-blue);
}

.mgr-btn-ghost {
  background: transparent;
  border-color: var(--clr-border);
  color: var(--clr-text-soft);
}
.mgr-btn-ghost:hover {
  background: var(--clr-bg);
  color: var(--clr-text);
  border-color: var(--clr-text-xsoft);
}

.mgr-btn-danger {
  background: var(--clr-danger);
  border-color: var(--clr-danger);
  color: white;
}
.mgr-btn-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: white;
}

.mgr-btn-success {
  background: var(--clr-success);
  border-color: var(--clr-success);
  color: white;
}
.mgr-btn-success:hover {
  background: #16a34a;
  border-color: #16a34a;
  color: white;
}

.mgr-btn-gradient {
  background: var(--gradient-brand);
  border: none;
  color: white;
}
.mgr-btn-gradient:hover {
  background: var(--gradient-brand-h);
  color: white;
  box-shadow: var(--shadow-md);
}

/* Tamaños */
.mgr-btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
}

.mgr-btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-md);
}

/* Icono solo */
.mgr-btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------
   7. BADGES
   ------------------------------------------------------------ */
.mgr-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.mgr-badge-blue    { background: var(--clr-blue-xlight); color: var(--clr-blue); }
.mgr-badge-purple  { background: #f0eaf8; color: var(--clr-purple); }
.mgr-badge-teal    { background: #eafaf9; color: var(--clr-teal-hover); }
.mgr-badge-green   { background: #f0fdf4; color: #15803d; }
.mgr-badge-warning { background: #fffbeb; color: #92400e; }
.mgr-badge-danger  { background: #fef2f2; color: #b91c1c; }
.mgr-badge-gray    { background: var(--clr-bg); color: var(--clr-text-soft); }
.mgr-badge-solid-blue   { background: var(--clr-blue); color: white; }
.mgr-badge-solid-purple { background: var(--clr-purple); color: white; }

/* ------------------------------------------------------------
   8. TABLAS
   ------------------------------------------------------------ */
.mgr-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
}

.mgr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  background: var(--clr-surface);
}

.mgr-table thead tr {
  background: var(--clr-bg);
  border-bottom: 1px solid var(--clr-border);
}

.mgr-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-text-soft);
  white-space: nowrap;
}

.mgr-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--clr-border-soft);
  color: var(--clr-text);
  vertical-align: middle;
}

.mgr-table tbody tr:last-child td {
  border-bottom: none;
}

.mgr-table tbody tr:hover td {
  background: var(--clr-blue-xlight);
}

/* Colores de estado en filas */
.mgr-table tr.mgr-row-libre    td { background: rgba(34, 197, 94, 0.08); }
.mgr-table tr.mgr-row-esperando td { background: rgba(245, 158, 11, 0.08); }
.mgr-table tr.mgr-row-bloq     td { background: rgba(239, 68, 68, 0.08); }

/* ------------------------------------------------------------
   9. FORMULARIOS
   ------------------------------------------------------------ */
.mgr-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.mgr-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--clr-text);
}

.mgr-input,
.mgr-select,
.mgr-textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--font-size-sm);
  color: var(--clr-text);
  background: var(--clr-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  line-height: 1.5;
}

.mgr-input:focus,
.mgr-select:focus,
.mgr-textarea:focus {
  border-color: var(--clr-blue);
  box-shadow: 0 0 0 3px rgba(37, 153, 215, 0.12);
}

.mgr-input::placeholder,
.mgr-textarea::placeholder {
  color: var(--clr-text-xsoft);
}

.mgr-input-group {
  display: flex;
  align-items: stretch;
}

.mgr-input-group .mgr-input {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  flex: 1;
}

.mgr-input-group .mgr-btn {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-left: none;
}

/* ------------------------------------------------------------
   10. ALERTAS Y MENSAJES
   ------------------------------------------------------------ */
.mgr-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  border-left: 3px solid;
}

.mgr-alert i {
  flex-shrink: 0;
  margin-top: 1px;
}

.mgr-alert-info    { background: var(--clr-blue-xlight); border-color: var(--clr-blue); color: var(--clr-blue-hover); }
.mgr-alert-success { background: #f0fdf4; border-color: var(--clr-success); color: #15803d; }
.mgr-alert-warning { background: #fffbeb; border-color: var(--clr-warning); color: #92400e; }
.mgr-alert-danger  { background: #fef2f2; border-color: var(--clr-danger); color: #b91c1c; }

/* Toast / flag container */
#aui-flag-container {
  position: fixed;
  top: calc(var(--navbar-height) + 12px);
  right: var(--space-5);
  z-index: 4000;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 400px;
}

.aui-flag {
  left: 0;
  opacity: 0;
  position: relative;
  top: -10px;
  transition: opacity 0.2s, top 0.3s;
}

.aui-flag[aria-hidden="false"] {
  opacity: 1;
  top: 0;
}

.aui-message {
  background: var(--clr-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-5) var(--space-3) calc(var(--space-5) + 28px);
  position: relative;
  font-size: var(--font-size-sm);
  color: var(--clr-text);
  border-left: 4px solid var(--clr-blue);
  overflow: hidden;
}

.aui-message::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 36px;
  background: var(--clr-blue);
}

.aui-message::after {
  font-family: 'FontAwesome';
  font-size: 1rem;
  color: white;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  content: "\f05a";
}

.aui-message.success, .aui-message-success { border-color: var(--clr-success); }
.aui-message.success::before { background: var(--clr-success); }
.aui-message.success::after  { content: "\f05d"; }

.aui-message.warning, .aui-message-warning { border-color: var(--clr-warning); }
.aui-message.warning::before { background: var(--clr-warning); }
.aui-message.warning::after  { content: "\f071"; }

.aui-message.error, .aui-message-error { border-color: var(--clr-danger); }
.aui-message.error::before { background: var(--clr-danger); }
.aui-message.error::after  { content: "\f06a"; }

/* ------------------------------------------------------------
   11. MODALES (sobreescritura visual de Bootstrap)
   ------------------------------------------------------------ */
.modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.modal-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--clr-border-soft);
  background: var(--clr-surface);
}

.modal-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--clr-text);
}

.modal-body {
  padding: var(--space-5);
}

.modal-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--clr-border-soft);
  background: var(--clr-bg);
  gap: var(--space-2);
}

/* Botones dentro de modales Bootstrap (btn-primary, btn-secondary) */
.modal .btn-primary {
  background: var(--clr-blue);
  border-color: var(--clr-blue);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--font-size-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  transition: background var(--transition-fast);
}

.modal .btn-primary:hover {
  background: var(--clr-blue-hover);
  border-color: var(--clr-blue-hover);
}

.modal .btn-secondary {
  background: var(--clr-surface);
  border-color: var(--clr-border);
  color: var(--clr-text-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--font-size-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
}

/* ------------------------------------------------------------
   12. ACCORDION (sobreescritura visual Bootstrap)
   ------------------------------------------------------------ */
.accordion-item {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md) !important;
  margin-bottom: var(--space-2);
  overflow: hidden;
}

.accordion-button {
  background: var(--clr-purple);
  color: white;
  font-family: var(--font-base);
  font-size: var(--font-size-sm);
  font-weight: 500;
  padding: var(--space-3) var(--space-4);
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  background: var(--clr-purple);
  color: white;
  box-shadow: none !important;
}

.accordion-button::after {
  filter: brightness(0) invert(1);
}

.accordion-body {
  padding: var(--space-4);
  background: var(--clr-surface);
}

/* ------------------------------------------------------------
   13. LIST GROUP (sobreescritura visual Bootstrap)
   ------------------------------------------------------------ */
.list-group {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--clr-border);
}

.list-group-item {
  padding: var(--space-3) var(--space-4);
  border-color: var(--clr-border-soft);
  font-size: var(--font-size-sm);
  color: var(--clr-text);
}

.list-group-item.active {
  background-color: var(--clr-blue) !important;
  border-color: var(--clr-blue) !important;
  color: white !important;
}

/* ------------------------------------------------------------
   14. CALENDARIO (colores de estado)
   ------------------------------------------------------------ */
/* ============================================================
   CALENDAR TABLE
   ============================================================ */
.calendar {
  font-family: var(--font-base);
  font-size: 0.8125rem;
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
}

/* Nav row: « Abril 2026 » */
.calendar-row:first-child td {
  padding: 0.25rem 0;
  font-weight: 700;
  color: var(--clr-text);
  font-size: 0.875rem;
  text-align: center;
}

.calendar-row:first-child td:first-child,
.calendar-row:first-child td:last-child {
  color: var(--clr-blue);
  font-size: 1rem;
  cursor: pointer;
}

/* Day headers: L M X J V S D */
.calendar-day-head {
  padding: 0.3rem 0;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-text-soft);
}

/* Day cells */
.calendar-day,
.calendar-day-np {
  padding: 2px;
  text-align: center;
  border-radius: var(--radius-sm);
}

/* Day number div wrapper */
.day-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: filter var(--transition-fast);
}

.day-number:hover {
  filter: brightness(0.9);
}

.day-number a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  border-radius: inherit;
  font-weight: 600;
}

/* Estado actual — anillo solo en el div interior */
.day-number.calendario-dia-actual {
  outline: 2px solid var(--clr-teal, #5bcac2);
  outline-offset: 2px;
}

/* Colores por ocupación — mantenemos los originales pero suavizados */
.calendario-dia-nada   { background: var(--clr-bg); border: 1px solid var(--clr-border); }
.calendario-dia-libre  { background: #0f0; }
.calendario-dia-flojo  { background: #ff2; }
.calendario-dia-medio  { background: #f60; }
.calendario-dia-fuerte { background: #f22; }
.calendario-dia-lleno  { background: #000; }

.calendario-dia-nada   a { color: var(--clr-text-soft) !important; }
.calendario-dia-libre  a { color: #1a6600 !important; }
.calendario-dia-flojo  a { color: #5a4a00 !important; }
.calendario-dia-medio  a { color: #fff !important; }
.calendario-dia-fuerte a { color: #fff !important; }
.calendario-dia-lleno  a { color: #fff !important; }

/* Estado de reservas — colores originales
   !important necesario para ganar a .list-group-item de Bootstrap */
.bg-reserva-libre          { background-color: rgb(161, 255, 107) !important; }
.bg-reserva-completada     { background-color: #fff !important; }
.bg-reserva-bloq-sala      { background-color: rgb(255, 125, 125) !important; }
.bg-reserva-bloq-user      { background-color: rgb(109, 204, 255) !important; }
.bg-reserva-esperando_pago { background-color: rgb(249, 255, 125) !important; }
.bg-reserva-reservada      { background-color: #fff !important; }

/* ------------------------------------------------------------
   15. OVERRIDES GLOBALES DE BOOTSTRAP (clases que siguen en HTML)
   ------------------------------------------------------------ */

/* Botones Bootstrap que aún se usan en páginas sin migrar */
.btn-primary {
  background-color: var(--clr-blue) !important;
  border-color: var(--clr-blue) !important;
  color: white !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-base) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
  transition: background var(--transition-fast) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--clr-blue-hover) !important;
  border-color: var(--clr-blue-hover) !important;
}

.btn-outline-primary {
  background-color: transparent !important;
  border-color: var(--clr-blue) !important;
  color: var(--clr-blue) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-base) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--clr-blue-xlight) !important;
}

.btn-secondary {
  background-color: var(--clr-purple) !important;
  border-color: var(--clr-purple) !important;
  color: white !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-base) !important;
  font-size: var(--font-size-sm) !important;
}

.btn-outline-secondary {
  background-color: var(--clr-surface) !important;
  border-color: var(--clr-border) !important;
  color: var(--clr-text-soft) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-base) !important;
  font-size: var(--font-size-sm) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--clr-bg) !important;
  border-color: var(--clr-text-soft) !important;
  color: var(--clr-text) !important;
}

/* btn-lg genérico: reducir tamaño */
.btn-lg {
  font-size: var(--font-size-sm) !important;
  padding: 0.45rem 1rem !important;
  border-radius: var(--radius-sm) !important;
}

/* Patrón: <a href="..."><button class="btn btn-lg ... w-100"> → nav list compacta */
a > .btn.btn-lg.w-100 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  padding: 0.65rem 1rem !important;
  border-radius: 0 !important;
  border-top: none !important;
  border-right: none !important;
  border-left: 3px solid transparent !important;
  border-bottom: 1px solid var(--clr-border) !important;
  background: var(--clr-surface) !important;
  color: var(--clr-text) !important;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast) !important;
}

a > .btn.btn-lg.w-100::after {
  content: '\f054';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 0.65rem;
  color: var(--clr-text-soft);
  flex-shrink: 0;
}

a:hover > .btn.btn-lg.w-100,
a:focus > .btn.btn-lg.w-100 {
  border-left-color: var(--clr-blue) !important;
  color: var(--clr-blue) !important;
  background: var(--clr-blue-xlight) !important;
}

a:first-of-type > .btn.btn-lg.w-100 {
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  border-top: 1px solid var(--clr-border) !important;
}

a:last-of-type > .btn.btn-lg.w-100 {
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  border-bottom: none !important;
}

/* Sombra al grupo completo vía primer elemento */
a:first-of-type > .btn.btn-lg.w-100 {
  box-shadow: var(--shadow-sm) !important;
}

.btn-danger {
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-base) !important;
  font-size: var(--font-size-sm) !important;
}

.btn-success {
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-base) !important;
  font-size: var(--font-size-sm) !important;
}

/* Cards Bootstrap — sin !important en background para no pisar
   los inline styles de estado de reservas (Reserva.php) */
.card {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

.card-gradient,
.card.card-gradient {
  background: var(--gradient-brand) !important;
  border: none !important;
  color: white !important;
}

.card-gradient .card-title,
.card-gradient .card-text,
.card-gradient h1, .card-gradient h2, .card-gradient h3,
.card-gradient h4, .card-gradient h5, .card-gradient h6,
.card-gradient p, .card-gradient span,
.card-gradient a, .card-gradient i {
  color: white !important;
}

/* Badges Bootstrap */
.badge.bg-primary { background-color: var(--clr-blue) !important; }
.badge.bg-secondary { background-color: var(--clr-purple) !important; }

/* Background helpers */
.bg-primary { background-color: var(--clr-blue) !important; }
.border-primary { border-color: var(--clr-purple) !important; }
.text-primary { color: var(--clr-blue) !important; }

/* Formularios Bootstrap */
.form-control, .form-select {
  border-color: var(--clr-border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-base) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--clr-text) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--clr-blue) !important;
  box-shadow: 0 0 0 3px rgba(37, 153, 215, 0.12) !important;
}

/* Eliminar sombra pesada de Bootstrap en inputs */
.form-control.shadow,
.form-select.shadow,
.input-group.shadow {
  box-shadow: none !important;
}

/* form-label moderno — pequeño, uppercase, discreto */
.form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--clr-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.375rem !important;
}

/* Paginación Bootstrap */
.page-link {
  color: var(--clr-blue) !important;
  border-color: var(--clr-border) !important;
  font-family: var(--font-base) !important;
  font-size: var(--font-size-sm) !important;
}

.page-item.active .page-link {
  background-color: var(--clr-blue) !important;
  border-color: var(--clr-blue) !important;
  color: white !important;
}

/* Dropdown Bootstrap (estilo visual cuando Bootstrap lo abre) */
.dropdown-menu {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: var(--space-2) !important;
  font-family: var(--font-base) !important;
}

.dropdown-item {
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--clr-text) !important;
  padding: var(--space-2) var(--space-3) !important;
  transition: background var(--transition-fast) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
  background: var(--clr-blue-xlight) !important;
  color: var(--clr-blue) !important;
}

.dropdown-item:active {
  background: var(--clr-blue) !important;
  color: white !important;
}

.dropdown-divider {
  border-color: var(--clr-border) !important;
  margin: var(--space-2) 0 !important;
}

/* Input group Bootstrap */
.input-group-text {
  background: var(--clr-bg) !important;
  border-color: var(--clr-border) !important;
  color: var(--clr-text-soft) !important;
  font-family: var(--font-base) !important;
  font-size: var(--font-size-sm) !important;
}

/* Tabs Bootstrap */
.nav-tabs {
  border-bottom-color: var(--clr-border) !important;
  gap: var(--space-1);
}

.nav-tabs .nav-link {
  color: var(--clr-text-soft) !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
  border-color: transparent !important;
  padding: var(--space-2) var(--space-4) !important;
}

.nav-tabs .nav-link:hover {
  color: var(--clr-blue) !important;
  background: var(--clr-blue-xlight) !important;
  border-color: transparent !important;
}

.nav-tabs .nav-link.active {
  color: var(--clr-blue) !important;
  background: var(--clr-surface) !important;
  border-color: var(--clr-border) var(--clr-border) var(--clr-surface) !important;
  font-weight: 600 !important;
}

/* ------------------------------------------------------------
   16. UTILIDADES
   ------------------------------------------------------------ */
.mgr-divider {
  height: 1px;
  background: var(--clr-border);
  border: none;
  margin: var(--space-4) 0;
}

.mgr-text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mgr-surface {
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
}

/* Loader */
.erb-loader-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.erb-loader-gif {
  width: 56px;
  height: 56px;
}

/* ------------------------------------------------------------
   17. BOTONES DE ACCIÓN DE SLOTS (calendario / listado salas)
   ------------------------------------------------------------ */

/* ============================================================
   PAGINATION
   ============================================================ */
.mgr-pagination {
  gap: 0.25rem;
}

.mgr-pagination .page-link {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--clr-text-soft) !important;
  background: var(--clr-surface) !important;
  font-family: var(--font-base) !important;
  font-size: 0.8125rem !important;
  font-weight: 500;
  padding: 0.4rem 0.7rem !important;
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  min-width: 36px;
  text-align: center;
}

.mgr-pagination .page-link:hover {
  background: var(--clr-blue-xlight) !important;
  border-color: var(--clr-blue) !important;
  color: var(--clr-blue) !important;
}

.mgr-pagination .page-item.active .page-link {
  background: var(--clr-blue) !important;
  border-color: var(--clr-blue) !important;
  color: #fff !important;
  font-weight: 700;
}

.mgr-pagination .page-item.disabled .page-link {
  background: var(--clr-bg) !important;
  border-color: var(--clr-border) !important;
  color: var(--clr-border) !important;
  cursor: not-allowed;
}

/* ============================================================
   SLOT ROW (calendario — columna derecha)
   ============================================================ */
.slot {
  border: none !important;
  border-left: 3px solid transparent !important;
  border-radius: var(--radius-md) !important;
  padding: 0.45rem 0.5rem 0.45rem 0.625rem !important;
  margin-bottom: 0.3rem !important;
  min-height: 42px;
  transition: filter var(--transition-fast);
  font-family: var(--font-base);
}

.slot:hover { filter: brightness(0.96); }

/* Borde izquierdo según estado */
.bg-reserva-libre          { border-left-color: #22c55e !important; }
.bg-reserva-bloq-sala      { border-left-color: #ef4444 !important; }
.bg-reserva-esperando_pago { border-left-color: #f59e0b !important; }
.bg-reserva-reservada,
.bg-reserva-completada     { border-left-color: var(--clr-blue) !important; }
.bg-reserva-bloq-user      { border-left-color: #60a5fa !important; }

/* Columna hora */
.slot > span.col-2:first-of-type {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: var(--clr-text) !important;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

/* Label editar hora */
.cambiarHoraHoy {
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--clr-text);
}

.cambiarHoraHoy i { font-size: 0.7rem; opacity: 0.5; margin-left: 2px; }

/* Columna sala */
.slot > span.col-8 {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--clr-text) !important;
}

.slot > span.col-8 .text-muted {
  font-size: 0.7rem !important;
  opacity: 0.7;
}

/* Acción buttons */
.btn-floating {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.btn-floating:hover { transform: scale(1.1); }

.btn-floating.bg-dark,
a.btn-floating.bg-dark,
button.btn-floating.bg-dark {
  background-color: rgba(37, 153, 215, 0.75) !important;
  opacity: 1 !important;
}

.btn-floating.bg-dark:hover,
a.btn-floating.bg-dark:hover,
button.btn-floating.bg-dark:hover {
  background-color: rgba(37, 153, 215, 1) !important;
}

i.btn-lista-salas,
i.btn-horario-especial {
  font-size: 0.75rem !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* Separación entre slot y la reserva expandida */
.reserva-desplegable + .reserva {
  margin-bottom: 0.5rem;
}

/* Wrapper de reserva en calendario */
#cajaSlots .reserva {
  padding: 0 0.25rem;
}

/* ------------------------------------------------------------
   18. CABECERAS DE PÁGINA (card-statistic-3 / card-gradient)
       Usadas como header en ~20 páginas
   ------------------------------------------------------------ */

.card.card-gradient,
.card-gradient {
  background: var(--gradient-brand) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 8px 32px rgba(37,153,215,0.25) !important;
  position: relative;
  overflow: hidden;
}

/* Efecto de brillo sutil sobre el gradiente */
.card.card-gradient::before,
.card-gradient::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.card-statistic-3 {
  position: relative;
  z-index: 1;
}

/* Pre-título (etiqueta pequeña encima del título) */
.card-pre-title {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75) !important;
  margin-bottom: 4px;
}

/* Icono decorativo de la card-header */
.card .card-statistic-3 .card-icon {
  opacity: 0.12;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

/* Títulos dentro de card-gradient */
.card-gradient h1,
.card-gradient h2,
.card-gradient h3,
.card-gradient h4,
.card-gradient h5,
.card-gradient h6,
.card-gradient .card-title,
.card-gradient p,
.card-gradient span,
.card-gradient a,
.card-gradient i,
.card-gradient label,
.card-gradient .card-pre-title {
  color: #fff !important;
}

/* ------------------------------------------------------------
   19. BARRA DE ACCIONES (botones de acción en fichas)
   ------------------------------------------------------------ */

/* Contenedor de botones de acción en ficha-reserva y similares */
.mgr-action-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

/* Botones de acción: icono + tooltip en lugar de icono solo */
.mgr-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  text-decoration: none;
  flex-shrink: 0;
}

.mgr-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  opacity: 0.9;
}

.mgr-action-btn:active {
  transform: translateY(0);
}

/* ------------------------------------------------------------
   20. MEJORAS GLOBALES DE FORMULARIOS Y FILTROS
   ------------------------------------------------------------ */

/* Barra de búsqueda/filtros en listados */
.mgr-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.mgr-filter-bar .form-control,
.mgr-filter-bar .form-select {
  border-color: var(--clr-border) !important;
  background: var(--clr-bg) !important;
}

.mgr-filter-bar .form-control:focus,
.mgr-filter-bar .form-select:focus {
  background: var(--clr-surface) !important;
}

/* Input group más limpio */
.input-group .form-control,
.input-group .form-select {
  border-right: none !important;
}

.input-group .input-group-text {
  border-left: none !important;
  background: var(--clr-surface) !important;
}

/* Labels de formulario */
label:not(.btn):not(.checkbox-wrap):not(.form-check-label) {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--clr-text-soft);
  margin-bottom: 3px;
}

/* Chips de estado (badges dentro de tablas y listados) */
.badge {
  font-family: var(--font-base) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  border-radius: var(--radius-full) !important;
  padding: 3px 10px !important;
}

/* Alerts modernos */
.alert {
  border-radius: var(--radius-md) !important;
  border-left-width: 4px !important;
  font-size: var(--font-size-sm) !important;
  font-family: var(--font-base) !important;
}

.alert-success {
  background: #f0fdf4 !important;
  border-color: var(--clr-success) !important;
  color: #15803d !important;
}

.alert-warning {
  background: #fffbeb !important;
  border-color: var(--clr-warning) !important;
  color: #92400e !important;
}

.alert-danger {
  background: #fef2f2 !important;
  border-color: var(--clr-danger) !important;
  color: #b91c1c !important;
}

.alert-info {
  background: var(--clr-blue-xlight) !important;
  border-color: var(--clr-blue) !important;
  color: var(--clr-blue-hover) !important;
}

/* Paginación más limpia */
.pagination {
  gap: 3px;
}

.page-link {
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  min-width: 36px;
  text-align: center;
  transition: background var(--transition-fast) !important;
}

/* Separadores de sección */
.border-bottom.border-2.border-primary {
  border-color: var(--clr-border) !important;
  border-width: 1px !important;
}

/* Títulos de sección dentro de páginas */
h5.card-title, h4.card-title {
  font-weight: 700 !important;
  color: var(--clr-text) !important;
  font-family: var(--font-base) !important;
}

/* Sombra en inputs (clase usada en varios forms) */
.form-control.shadow,
.form-select.shadow {
  box-shadow: var(--shadow-sm) !important;
}

/* bg-secondary headers de sección (ej: nombre de local en listado-salas) */
.bg-secondary {
  background-color: var(--clr-purple) !important;
}

/* Scroll horizontal suave en tablas */
.table-responsive {
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  overflow: hidden;
}

.table {
  font-family: var(--font-base) !important;
  font-size: var(--font-size-sm) !important;
  margin-bottom: 0 !important;
}

.table thead th {
  background: var(--clr-bg) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-text-soft) !important;
  border-bottom: 1px solid var(--clr-border) !important;
  white-space: nowrap;
  padding: var(--space-3) var(--space-4) !important;
}

.table tbody td {
  padding: var(--space-3) var(--space-4) !important;
  border-bottom: 1px solid var(--clr-border-soft) !important;
  vertical-align: middle !important;
  color: var(--clr-text) !important;
}

.table tbody tr:last-child td {
  border-bottom: none !important;
}

.table-hover tbody tr:hover td {
  background: var(--clr-blue-xlight) !important;
}

/* Spinner de Bootstrap */
.spinner-border {
  color: var(--clr-blue) !important;
}

/* ============================================================
   SIDEBAR LAYOUT
   ============================================================ */

/* Body con sidebar: offset del contenido en desktop */
body {
  padding-left: var(--sidebar-width);
  padding-top: var(--quickbar-height);
  transition: padding-left var(--transition-slow);
}

@media (max-width: 991px) {
  body {
    padding-left: 0;
    padding-top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.mgr-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  height: 100dvh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  overflow: hidden;
  transition: transform var(--transition-slow);
  border-right: 1px solid var(--sidebar-border);
}

/* Brand */
.mgr-sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 1rem 1rem;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  gap: 0.5rem;
}

.mgr-sidebar-brand img {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.mgr-sidebar-client {
  font-family: var(--font-base);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Nav principal */
.mgr-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.mgr-sidebar-nav::-webkit-scrollbar { width: 3px; }
.mgr-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 99px; }

.mgr-sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0 0.5rem;
}

.mgr-sidebar-menu li {
  margin-bottom: 2px;
}

/* Links directos */
.mgr-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-family: var(--font-base);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sidebar-text);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
  line-height: 1.4;
}

.mgr-sidebar-link i:first-child {
  width: 16px;
  text-align: center;
  font-size: 0.875rem;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.mgr-sidebar-link:hover {
  background: var(--sidebar-item-hover);
  color: var(--sidebar-text-hover);
}

.mgr-sidebar-link:hover i:first-child {
  opacity: 1;
}

.mgr-sidebar-link.active {
  background: var(--sidebar-item-active);
  color: var(--sidebar-text-active);
}

.mgr-sidebar-link.active i:first-child {
  opacity: 1;
  color: var(--sidebar-accent);
}

/* Flecha de collapsible */
.mgr-sidebar-arrow {
  margin-left: auto;
  font-size: 0.625rem !important;
  opacity: 0.4 !important;
  transition: transform var(--transition-base), opacity var(--transition-fast) !important;
  width: auto !important;
}

.mgr-sidebar-link[aria-expanded="true"] .mgr-sidebar-arrow {
  transform: rotate(90deg);
  opacity: 0.7 !important;
}

/* Submenú */
.mgr-sidebar-submenu {
  list-style: none;
  padding: 2px 0 4px 2.25rem;
  margin: 0;
}

.mgr-sidebar-sublink {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-family: var(--font-base);
  font-size: 0.775rem;
  font-weight: 400;
  color: var(--sidebar-text);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.mgr-sidebar-sublink:hover {
  color: var(--sidebar-text-hover);
  background: var(--sidebar-item-hover);
}

/* Separador de sección */
.mgr-sidebar-divider {
  height: 1px;
  background: var(--sidebar-border);
  margin: 0.5rem 0.75rem;
}

/* Footer del sidebar */
.mgr-sidebar-footer {
  border-top: 1px solid var(--sidebar-border);
  padding: 0.5rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* User card en la parte inferior del sidebar */
.mgr-sidebar-user {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem;
  padding-bottom: max(0.5rem, calc(0.5rem + env(safe-area-inset-bottom, 0px)));
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  background: rgba(255,255,255,0.03);
}

.mgr-sidebar-user-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--sidebar-text);
  transition: background var(--transition-fast), color var(--transition-fast);
  min-width: 0;
}

.mgr-sidebar-user-btn:hover {
  background: var(--sidebar-item-hover);
  color: var(--sidebar-text-hover);
}

.mgr-sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.mgr-sidebar-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.mgr-sidebar-user-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.mgr-sidebar-user-role {
  font-size: 0.68rem;
  color: var(--sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.mgr-sidebar-logout {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--sidebar-text);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
  font-size: 0.875rem;
}

.mgr-sidebar-logout:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* ============================================================
   QUICKBAR ACCESOS RÁPIDOS (solo desktop)
   ============================================================ */
.mgr-quickbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--quickbar-height);
  background: #fff;
  border-bottom: 1px solid var(--clr-border);
  z-index: 1030;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.mgr-quickbar-heading {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--clr-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  flex-shrink: 0;
  padding-right: 6px;
  border-right: 1.5px solid var(--clr-border);
  margin-right: 2px;
  line-height: 1;
}

.mgr-quickbar-link {
  position: relative;
  height: 28px;
  border-radius: 20px;
  padding: 0 10px;
  gap: 5px;
  display: flex;
  align-items: center;
  color: var(--clr-text-soft);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1.5px solid transparent;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.mgr-quickbar-link:hover {
  background: var(--clr-blue-xlight);
  color: var(--clr-blue);
  border-color: var(--clr-blue-light);
}

.mgr-quickbar-link.active {
  background: var(--clr-blue-xlight);
  color: var(--clr-blue);
  border-color: var(--clr-blue-light);
}

.mgr-quickbar-label {
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Avatar usuario */
.mgr-quickbar-avatar {
  background: var(--gradient-brand);
  border-color: transparent !important;
  overflow: hidden;
  padding: 0;
  width: 28px;
  justify-content: center;
}

.mgr-quickbar-avatar:hover {
  background: var(--clr-blue) !important;
}

.mgr-quickbar-avatar-initial {
  font-family: var(--font-base);
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  position: absolute;
  transition: opacity 180ms ease, transform 180ms ease;
}

.mgr-quickbar-avatar-gear {
  font-size: 0.9rem;
  color: #fff;
  position: absolute;
  opacity: 0;
  transform: rotate(-30deg) scale(0.7);
  transition: opacity 180ms ease, transform 180ms ease;
}

.mgr-quickbar-avatar:hover .mgr-quickbar-avatar-initial {
  opacity: 0;
  transform: rotate(30deg) scale(0.7);
}

.mgr-quickbar-avatar:hover .mgr-quickbar-avatar-gear {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* ============================================================
   BOTTOM NAV (solo mobile)
   ============================================================ */
.mgr-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--bottomnav-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff;
  border-top: 1px solid var(--clr-border);
  z-index: 1039;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
  align-items: stretch;
}

.mgr-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--clr-text-xsoft);
  font-family: var(--font-base);
  font-size: 0.62rem;
  font-weight: 500;
  padding: 6px 4px;
  transition: color 150ms ease, background 150ms ease;
  position: relative;
}

.mgr-bottom-nav-item i {
  font-size: 1.1rem;
  transition: transform 150ms ease;
}

.mgr-bottom-nav-item:hover,
.mgr-bottom-nav-item.active {
  color: var(--clr-blue);
}

.mgr-bottom-nav-item.active i {
  transform: scale(1.15);
}

.mgr-bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--clr-blue);
  border-radius: 0 0 3px 3px;
}

@media (max-width: 991px) {
  .mgr-quickbar { display: none; }
  .mgr-bottom-nav { display: flex; }
}

/* ============================================================
   TOP BAR (solo mobile)
   ============================================================ */
.mgr-top-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  background: var(--sidebar-bg);
  z-index: 1039;
  align-items: center;
  padding: 0 1rem;
  gap: 0.75rem;
  border-bottom: 1px solid var(--sidebar-border);
}

.mgr-top-bar img {
  height: 28px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.mgr-top-bar-client {
  font-family: var(--font-base);
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  flex: 1;
}

.mgr-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.mgr-hamburger span {
  display: block;
  height: 2px;
  background: rgba(255,255,255,0.8);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Overlay mobile */
.mgr-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1039;
  backdrop-filter: blur(2px);
}

.mgr-sidebar-overlay.active {
  display: block;
}

/* ============================================================
   RESPONSIVE SIDEBAR
   ============================================================ */
@media (max-width: 991px) {
  .mgr-top-bar {
    display: flex;
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
  }

  .mgr-sidebar {
    transform: translateX(calc(-1 * var(--sidebar-width)));
    box-shadow: none;
    top: env(safe-area-inset-top, 0px);
    height: calc(100dvh - env(safe-area-inset-top, 0px));
    height: calc(100vh - env(safe-area-inset-top, 0px));
    height: calc(100dvh - env(safe-area-inset-top, 0px));
  }

  .mgr-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.3);
  }
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.mgr-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.25rem 0 0.75rem;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 1rem;
}

.mgr-page-header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.mgr-page-title {
  font-family: var(--font-base);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--clr-text);
  margin: 0;
  line-height: 1.3;
}

.mgr-page-subtitle {
  font-family: var(--font-base);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--clr-text-soft);
}

.mgr-page-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Stat chips */
.mgr-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-family: var(--font-base);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.mgr-stat-chip--blue {
  background: var(--clr-blue-xlight);
  color: var(--clr-blue);
  border: 1px solid rgba(37,153,215,0.2);
}

.mgr-stat-chip--green {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid rgba(34,197,94,0.2);
}

.mgr-stat-chip--yellow {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid rgba(245,158,11,0.2);
}

.mgr-stat-chip--purple {
  background: rgba(87,55,147,0.08);
  color: var(--clr-purple);
  border: 1px solid rgba(87,55,147,0.2);
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.mgr-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 0.625rem 0.75rem;
  margin-bottom: 1rem;
}

.mgr-filter-bar .input-group-text {
  background: transparent !important;
  border-color: var(--clr-border) !important;
  color: var(--clr-text-soft);
  font-size: 0.8125rem;
}

.mgr-filter-bar .form-control,
.mgr-filter-bar .form-select {
  border-color: var(--clr-border) !important;
  font-size: 0.8125rem !important;
  background: var(--clr-bg) !important;
}

.mgr-filter-bar .form-control:focus,
.mgr-filter-bar .form-select:focus {
  border-color: var(--clr-blue) !important;
  box-shadow: 0 0 0 3px rgba(37,153,215,0.1) !important;
}

.mgr-filter-bar-item {
  min-width: 160px;
}

.mgr-filter-bar-item--grow {
  flex: 1;
  min-width: 200px;
}

/* ============================================================
   BOOKING HEADER (ficha-reserva)
   ============================================================ */
.mgr-booking-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--gradient-brand);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  color: #fff;
  position: relative;
}

.mgr-booking-header-icon {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.mgr-booking-header-info {
  flex: 1;
  min-width: 0;
}

.mgr-booking-header-meta {
  font-size: 0.75rem;
  opacity: 0.75;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mgr-booking-header-num {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.15rem;
}

.mgr-booking-header-pin {
  font-size: 0.8125rem;
  opacity: 0.85;
}

.mgr-booking-header-pin span {
  font-weight: 700;
  background: rgba(255,255,255,0.2);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.mgr-booking-header-back {
  flex-shrink: 0;
}

.mgr-booking-header-back .btn {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.3) !important;
  color: #fff !important;
}

.mgr-booking-header-back .btn:hover {
  background: rgba(255,255,255,0.25) !important;
}

/* ============================================================
   ACTION BAR (ficha-reserva)
   ============================================================ */
.mgr-action-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mgr-action-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-family: var(--font-base);
  font-size: 0.7rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  min-width: 64px;
}

.mgr-action-btn i {
  font-size: 1.2rem;
  color: var(--clr-blue);
  transition: color var(--transition-fast);
}

.mgr-action-btn:hover {
  background: var(--clr-blue-xlight);
  border-color: var(--clr-blue);
  color: var(--clr-blue);
  box-shadow: var(--shadow-sm);
}

.mgr-action-btn:hover i {
  color: var(--clr-blue);
}

/* ============================================================
   BOOKING CARD (toHTML component)
   ============================================================ */
.mgr-bcard {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-left: 4px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 0.75rem;
  overflow: hidden;
  font-family: var(--font-base);
  transition: box-shadow var(--transition-fast);
}

.mgr-bcard:hover {
  box-shadow: var(--shadow-md);
}

/* State modifiers */
.mgr-bcard--completada  { border-left-color: #22c55e; }
.mgr-bcard--pendiente   { border-left-color: #f59e0b; }
.mgr-bcard--cancelada   { border-left-color: #ef4444; }
.mgr-bcard--aplazada    { border-left-color: #94a3b8; }
.mgr-bcard--calendario  { border-left-color: var(--clr-blue); }

.mgr-bcard--completada  .mgr-bcard-header { background: #dcfce7; border-bottom-color: #bbf7d0; }
.mgr-bcard--pendiente   .mgr-bcard-header { background: #fef9c3; border-bottom-color: #fef08a; }
.mgr-bcard--cancelada   .mgr-bcard-header { background: #fee2e2; border-bottom-color: #fecaca; }
.mgr-bcard--aplazada    .mgr-bcard-header { background: #f1f5f9; border-bottom-color: #e2e8f0; }
.mgr-bcard--calendario  .mgr-bcard-header { background: var(--clr-blue-xlight); border-bottom-color: rgba(37,153,215,0.2); }

.mgr-bcard--completada  .mgr-bcard-estado { background: #16a34a; color: #fff; border-color: #15803d; }
.mgr-bcard--pendiente   .mgr-bcard-estado { background: #d97706; color: #fff; border-color: #b45309; }
.mgr-bcard--cancelada   .mgr-bcard-estado { background: #dc2626; color: #fff; border-color: #b91c1c; }
.mgr-bcard--aplazada    .mgr-bcard-estado { background: #64748b; color: #fff; border-color: #475569; }
.mgr-bcard--calendario  .mgr-bcard-estado { background: var(--clr-blue); color: #fff; border-color: var(--clr-blue); }

/* Header */
.mgr-bcard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem 0.4rem;
  border-bottom: 1px solid var(--clr-border-soft);
  background: var(--clr-bg);
}

.mgr-bcard-header-left {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-width: 0;
}

.mgr-bcard-header-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.mgr-bcard-room {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mgr-bcard-nivel {
  font-size: 0.7rem;
  color: var(--clr-text-soft);
  background: var(--clr-border-soft);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.mgr-bcard-players {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--clr-text-soft);
}

.mgr-bcard-estado {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Body */
.mgr-bcard-body {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mgr-bcard-datetime {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--clr-text);
}

.mgr-bcard-num {
  font-weight: 700;
  color: var(--clr-blue);
  font-size: 0.875rem;
}

.mgr-bcard-day {
  background: var(--clr-border-soft);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--clr-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mgr-bcard-gms {
  font-size: 0.75rem;
  color: var(--clr-text-soft);
}

.mgr-bcard-gms i {
  color: var(--clr-purple);
  margin-right: 0.2rem;
}

/* Prices */
.mgr-bcard-prices {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.mgr-bcard-price {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  border: 1px solid transparent;
}

.mgr-bcard-price--paid  { background: #f0fdf4; color: #15803d; border-color: rgba(34,197,94,0.2); }
.mgr-bcard-price--rest  { background: #fef3c7; color: #92400e; border-color: rgba(245,158,11,0.2); }
.mgr-bcard-price--total { background: var(--clr-bg); color: var(--clr-text-soft); border-color: var(--clr-border); }

.mgr-bcard-bono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid rgba(34,197,94,0.2);
  text-decoration: none;
  font-size: 0.7rem;
}

/* Contact */
.mgr-bcard-contact {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.775rem;
  color: var(--clr-text-soft);
}

.mgr-bcard-contact i {
  width: 14px;
  color: var(--clr-text-muted, #94a3b8);
  margin-right: 0.25rem;
}

/* Notas */
.mgr-bcard-nota {
  font-size: 0.75rem;
  color: var(--clr-text-soft);
  background: #fef9ec;
  border-left: 3px solid #f59e0b;
  padding: 0.25rem 0.5rem;
  border-radius: 0 4px 4px 0;
}

.mgr-bcard-nota--interna {
  background: var(--clr-blue-xlight);
  border-left-color: var(--clr-blue);
}

.mgr-bcard-nota i {
  margin-right: 0.25rem;
  opacity: 0.7;
}

/* Preguntas */
.mgr-bcard-preguntas {
  border-top: 1px solid var(--clr-border-soft);
  padding-top: 0.35rem;
}

.mgr-bcard-pregunta {
  font-size: 0.75rem;
  color: var(--clr-text-soft);
  margin-bottom: 0.1rem;
}

.mgr-bcard-pregunta i {
  color: var(--clr-purple);
  margin-right: 0.2rem;
}

.mgr-bcard-pregunta span {
  font-weight: 600;
  color: var(--clr-text);
  margin-left: 0.25rem;
}

/* Footer */
.mgr-bcard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-top: 1px solid var(--clr-border-soft);
  background: var(--clr-bg);
}

.mgr-bcard-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--clr-text-muted, #94a3b8);
}

.mgr-bcard-foto {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--clr-blue);
  font-size: 0.7rem;
}

/* Actions */
.mgr-bcard-actions {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.mgr-bcard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-text-soft);
  text-decoration: none;
  font-size: 0.8125rem;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  cursor: pointer;
}

.mgr-bcard-btn:hover {
  background: var(--clr-blue-xlight);
  color: var(--clr-blue);
  border-color: var(--clr-blue);
}

.mgr-bcard-btn.btnWhatsApp:hover {
  background: #f0fdf4;
  color: #16a34a;
  border-color: rgba(22,163,74,0.3);
}

/* ============================================================
   CALENDAR FILTERS
   ============================================================ */
.mgr-cal-filters {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 0.625rem 0.75rem;
  margin-bottom: 1rem;
}

.mgr-cal-filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mgr-cal-filter-label {
  font-family: var(--font-base);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-text-soft);
  min-width: 36px;
  flex-shrink: 0;
}

/* ---- Multiselect de salas ---- */
.mgr-multiselect {
  position: relative;
}

.mgr-multiselect-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  font-family: var(--font-base);
  font-size: 0.875rem;
  color: var(--clr-text);
  cursor: pointer;
  white-space: nowrap;
  height: 38px;
  transition: border-color var(--transition-fast);
}

.mgr-multiselect-btn:hover {
  border-color: var(--clr-blue);
}

.mgr-multiselect-arrow {
  font-size: 0.65rem;
  color: var(--clr-text-soft);
  transition: transform 0.15s;
}

.mgr-multiselect-panel--open .mgr-multiselect-arrow {
  transform: rotate(180deg);
}

.mgr-multiselect-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 580px;
  max-width: 92vw;
  max-height: 320px;
  overflow-y: auto;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 1050;
  padding: 0.6rem 0.75rem;
}

.mgr-multiselect-panel--open {
  display: block;
}

.mgr-multiselect-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.mgr-multiselect-pills .erb-btn-sala-item {
  display: contents;
}

.mgr-cal-pill--all {
  font-weight: 700;
}

.mgr-cal-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

@media (max-width: 767.98px) {
  .mgr-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .mgr-filter-bar-item {
    width: 100%;
    min-width: 0;
  }

  .mgr-filter-bar-item.ms-auto {
    margin-left: 0 !important;
    align-self: flex-end;
  }

  .mgr-filter-bar-item .form-select {
    width: 100%;
  }

  .mgr-multiselect {
    width: 100%;
  }

  .mgr-multiselect-btn {
    width: 100%;
    justify-content: space-between;
  }

  .mgr-multiselect-panel {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    box-sizing: border-box;
  }
}

.mgr-cal-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-family: var(--font-base);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--clr-text-soft);
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  user-select: none;
}

.mgr-cal-pill:hover {
  background: var(--clr-blue-xlight);
  color: var(--clr-blue);
  border-color: rgba(37,153,215,0.3);
}

.btn-check:checked + .mgr-cal-pill {
  background: var(--clr-blue-xlight);
  color: var(--clr-blue);
  border-color: var(--clr-blue);
  font-weight: 700;
}

/* Calendar day toolbar */
.mgr-cal-day-toolbar {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
/* ============================================================
   STATS KPI CARDS
   ============================================================ */
.mgr-stats-kpi {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.mgr-stats-kpi-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 140px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-left: 4px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}

.mgr-stats-kpi-item--blue { border-left-color: var(--clr-blue); }
.mgr-stats-kpi-item--green { border-left-color: #22c55e; }
.mgr-stats-kpi-item--yellow { border-left-color: #f59e0b; }

.mgr-stats-kpi-label {
  font-family: var(--font-base);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-text-soft);
}

.mgr-stats-kpi-value {
  font-family: var(--font-base);
  font-size: 2rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.1;
}

.mgr-stats-kpi-sub {
  font-family: var(--font-base);
  font-size: 0.8rem;
  color: var(--clr-text-soft);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.mgr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--clr-surface);
  border: 1px dashed var(--clr-border);
  border-radius: var(--radius-lg);
}

.mgr-empty-state-icon {
  font-size: 2.5rem;
  color: var(--clr-border);
  margin-bottom: 1rem;
}

.mgr-empty-state-title {
  font-family: var(--font-base);
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text-soft);
  margin-bottom: 0.35rem;
}

.mgr-empty-state-text {
  font-family: var(--font-base);
  font-size: 0.8125rem;
  color: var(--clr-text-muted, #94a3b8);
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
   PAGE BACK BUTTON — flecha volver en fichas
   ============================================================ */
.mgr-page-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-soft);
  text-decoration: none;
  font-size: 0.875rem;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.mgr-page-back:hover {
  background: var(--clr-blue-xlight);
  color: var(--clr-blue);
  border-color: var(--clr-blue);
}

/* ============================================================
   SALA NAV — submenú horizontal scrollable de ficha-sala-*.php
   ============================================================ */
.mgr-sala-nav {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0.5rem 0 0.75rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: wrap;
}

.mgr-sala-nav::-webkit-scrollbar {
  display: none;
}

.mgr-sala-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  font-family: var(--font-base);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--clr-text-soft);
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.mgr-sala-nav-link:hover {
  background: var(--clr-blue-xlight);
  color: var(--clr-blue);
  border-color: rgba(37,153,215,0.4);
}

.mgr-sala-nav-link--active {
  background: var(--clr-blue-xlight);
  color: var(--clr-blue);
  border-color: var(--clr-blue);
  font-weight: 700;
}

/* ============================================================
   BOOTSTRAP TABS — override para todos los nav-tabs
   ============================================================ */
.nav-tabs {
  border-bottom: 1px solid var(--clr-border) !important;
  gap: 0.15rem;
}

.nav-tabs .nav-link {
  font-family: var(--font-base) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--clr-text-soft) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  padding: 0.5rem 0.9rem !important;
  transition: color var(--transition-fast), background var(--transition-fast) !important;
}

.nav-tabs .nav-link:hover {
  color: var(--clr-blue) !important;
  background: var(--clr-blue-xlight) !important;
  border-color: transparent !important;
}

.nav-tabs .nav-link.active {
  color: var(--clr-blue) !important;
  background: var(--clr-surface) !important;
  border-color: var(--clr-border) var(--clr-border) var(--clr-surface) !important;
  font-weight: 700 !important;
}

/* ============================================================
   SECTION LABEL — separador de grupo (ej: local en listado-salas)
   ============================================================ */
.mgr-section-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--clr-blue-xlight);
  border-left: 3px solid var(--clr-blue);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--clr-blue);
  margin-bottom: 0.5rem;
}

.mgr-section-label i {
  font-size: 0.875rem;
}

/* ============================================================
   LOCAL CARD — tarjeta de local en listado-locales
   ============================================================ */
.mgr-local-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.mgr-local-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(37,153,215,0.3);
}

.mgr-local-card-name {
  font-family: var(--font-base);
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text);
}

.mgr-local-card-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  color: var(--clr-text-soft);
  text-decoration: none;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  font-size: 0.875rem;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.mgr-local-card-edit:hover {
  background: var(--clr-blue-xlight);
  color: var(--clr-blue);
  border-color: var(--clr-blue);
}

/* ============================================================
   BOOTSTRAP TABLE — override global para todas las tablas
   ============================================================ */
.fixed-table-container {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
}

.fixed-table-container table,
#tableBS {
  font-family: var(--font-base) !important;
  font-size: 0.875rem !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

.fixed-table-header thead tr th,
#tableBS thead tr th {
  background: var(--clr-bg) !important;
  color: var(--clr-text-soft) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 0.65rem 0.85rem !important;
  border-bottom: 1px solid var(--clr-border) !important;
  border-top: none !important;
  white-space: nowrap !important;
}

.fixed-table-body tbody tr td,
#tableBS tbody tr td {
  padding: 0.65rem 0.85rem !important;
  border-bottom: 1px solid var(--clr-border-soft) !important;
  color: var(--clr-text) !important;
  vertical-align: middle !important;
}

.fixed-table-body tbody tr:last-child td,
#tableBS tbody tr:last-child td {
  border-bottom: none !important;
}

.fixed-table-body tbody tr:hover td,
#tableBS tbody tr:hover td {
  background: var(--clr-blue-xlight) !important;
}

/* Toolbar del bootstrap-table */
.fixed-table-toolbar {
  padding: 0.5rem 0 !important;
}

.fixed-table-toolbar .search input {
  font-size: 0.875rem !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.35rem 0.75rem !important;
}

.fixed-table-toolbar .search input:focus {
  border-color: var(--clr-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(37,153,215,0.12) !important;
}

/* ============================================================
   FICHAJES — entrada / salida actions
   ============================================================ */
.mgr-fichaje-actions {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.mgr-fichaje-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 200px;
}

.mgr-fichaje-nota {
  width: 100%;
  min-height: 64px;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-base);
  font-size: 0.8125rem;
  color: var(--clr-text);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.mgr-fichaje-nota:focus {
  outline: none;
  border-color: var(--clr-blue);
  box-shadow: 0 0 0 3px rgba(37,153,215,0.12);
}

.mgr-fichaje-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  font-family: var(--font-base);
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
}

.mgr-fichaje-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.mgr-fichaje-btn--entrada {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
}

.mgr-fichaje-btn--entrada:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
}

.mgr-fichaje-btn--salida {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
}

.mgr-fichaje-btn--salida:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

/* ============================================================
   CAL PANEL — contenedor del día en calendario
   ============================================================ */
.mgr-cal-panel {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.mgr-cal-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--clr-bg);
  border-bottom: 1px solid var(--clr-border);
}

.mgr-cal-panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-base);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--clr-text);
}

.mgr-cal-panel-title i {
  color: var(--clr-blue);
  font-size: 1rem;
}

.mgr-cal-panel-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--clr-text-soft);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.mgr-cal-panel-refresh:hover {
  background: var(--clr-blue-xlight);
  color: var(--clr-blue);
  transform: rotate(30deg);
}

.mgr-cal-panel-body {
  padding: 0.75rem;
}

/* ============================================================
   LEGACY SECTION LABELS — remapeo CSS de los divs de sección
   antiguos (bg-primary/bg-secondary/border-secondary) hacia el
   aspecto de mgr-section-label sin tocar el PHP.
   ============================================================ */

/* Familia azul: rounded bg-primary text-white */
div.rounded.bg-primary.text-white,
div.rounded-3.bg-primary.text-white,
div.bg-primary.rounded.text-white,
div.rounded.bg-primary.text-white.text-center,
div.rounded.bg-primary.text-white.p-2,
div.rounded.bg-primary.text-white.py-1,
div.rounded.bg-primary.text-white.p-1 {
  background: var(--clr-blue-xlight) !important;
  color: var(--clr-blue) !important;
  border-left: 3px solid var(--clr-blue) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-base) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  padding: 0.5rem 0.75rem !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

/* Familia gris: rounded border border-secondary text-secondary */
div.rounded.border.border-secondary.text-secondary,
div.rounded.border.border-secondary.p-2.text-secondary,
div.rounded.border.border-secondary.p-2.mt-2,
div.mb-1.d-flex.rounded.border.border-secondary,
div.rounded.border.border-secondary.text-secondary.p-2 {
  background: var(--clr-bg) !important;
  color: var(--clr-text-soft) !important;
  border: 1px solid var(--clr-border) !important;
  border-left: 3px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-base) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 0.5rem 0.75rem !important;
}

/* Familia gris oscura: bg-secondary text-white */
div.rounded.bg-secondary.text-white,
div.rounded-3.bg-secondary.text-white,
div.bg-secondary.rounded.text-white,
div.form-label.bg-secondary.rounded.text-white,
div.my-1.p-2.rounded.bg-secondary.text-white {
  background: var(--clr-bg) !important;
  color: var(--clr-text) !important;
  border-left: 3px solid var(--clr-text-soft) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-base) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  padding: 0.5rem 0.75rem !important;
}

/* ============================================================
   MODALES — override global Bootstrap modals (88 páginas)
   ============================================================ */
.modal-content {
  border: none !important;
  border-radius: var(--radius-xl, 1rem) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
  overflow: hidden !important;
  font-family: var(--font-base) !important;
}

.modal-header {
  background: var(--clr-bg) !important;
  border-bottom: 1px solid var(--clr-border) !important;
  padding: 1rem 1.25rem !important;
}

.modal-title {
  font-family: var(--font-base) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--clr-text) !important;
}

.modal-body {
  padding: 1.25rem !important;
  font-family: var(--font-base) !important;
  font-size: 0.875rem !important;
  color: var(--clr-text) !important;
}

.modal-footer {
  border-top: 1px solid var(--clr-border) !important;
  padding: 0.75rem 1.25rem !important;
  gap: 0.5rem !important;
}

.modal-backdrop.show {
  opacity: 0.4 !important;
}

/* ============================================================
   ALERTAS — override Bootstrap alerts con look moderno
   ============================================================ */
.alert {
  font-family: var(--font-base) !important;
  font-size: 0.875rem !important;
  border-radius: var(--radius-md) !important;
  border-width: 0 !important;
  border-left-width: 4px !important;
  border-left-style: solid !important;
  padding: 0.85rem 1rem !important;
}

.alert-success {
  background: #f0fdf4 !important;
  border-left-color: var(--clr-success) !important;
  color: #166534 !important;
}

.alert-danger {
  background: #fef2f2 !important;
  border-left-color: var(--clr-danger) !important;
  color: #991b1b !important;
}

.alert-warning {
  background: #fffbeb !important;
  border-left-color: var(--clr-warning) !important;
  color: #92400e !important;
}

.alert-info,
.alert-primary {
  background: var(--clr-blue-xlight) !important;
  border-left-color: var(--clr-blue) !important;
  color: #1e4d7a !important;
}

.alert .btn-close {
  filter: none !important;
  opacity: 0.5 !important;
}

.alert .btn-close:hover {
  opacity: 1 !important;
}

/* ============================================================
   FORM CONTROLS — override global para inputs y selects
   ============================================================ */
.form-control,
.form-select {
  font-family: var(--font-base) !important;
  font-size: 0.875rem !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--clr-text) !important;
  background-color: var(--clr-surface) !important;
  padding: 0.45rem 0.75rem !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
  box-shadow: none !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--clr-blue) !important;
  box-shadow: 0 0 0 3px rgba(37,153,215,0.12) !important;
  outline: none !important;
}

.form-control.shadow,
.form-select.shadow {
  box-shadow: none !important;
}

.form-control::placeholder {
  color: var(--clr-text-muted, #94a3b8) !important;
  font-size: 0.8125rem !important;
}

.form-label {
  font-family: var(--font-base) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--clr-text-soft) !important;
  margin-bottom: 0.3rem !important;
}

/* textarea */
textarea.form-control {
  resize: vertical !important;
}

/* input groups */
.input-group .form-control:not(:last-child) {
  border-right: none !important;
}

.input-group-text {
  font-family: var(--font-base) !important;
  font-size: 0.875rem !important;
  background: var(--clr-bg) !important;
  border: 1px solid var(--clr-border) !important;
  color: var(--clr-text-soft) !important;
}

/* ============================================================
   BADGES — modernizar badges de Bootstrap
   ============================================================ */
.badge {
  font-family: var(--font-base) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  border-radius: var(--radius-pill) !important;
}

/* ============================================================
   CARDS — override global para cards Bootstrap
   ============================================================ */
.card {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

.card-header {
  background: var(--clr-bg) !important;
  border-bottom: 1px solid var(--clr-border) !important;
  font-family: var(--font-base) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
}

.card-body {
  font-family: var(--font-base) !important;
  font-size: 0.875rem !important;
}

/* ============================================================
   SPINNER — modernizar spinner de Bootstrap
   ============================================================ */
.spinner-border {
  color: var(--clr-blue) !important;
}

/* ============================================================
   CÓDIGO — modernizar elementos <code> en toda la app
   ============================================================ */
code {
  font-size: 0.8125rem !important;
  color: var(--clr-purple) !important;
  background: rgba(87,55,147,0.08) !important;
  padding: 0.15em 0.45em !important;
  border-radius: var(--radius-xs, 3px) !important;
}

/* ============================================================
   SCROLLBAR — scrollbar más discreta en Chrome/Edge
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--clr-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--clr-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--clr-text-soft);
}

/* ============================================================
   CAJA DIARIA — resumen final
   ============================================================ */
.mgr-caja-resumen {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
}
.mgr-caja-resumen i { font-size: 1.25rem; flex-shrink: 0; }
.mgr-caja-resumen--ok {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.mgr-caja-resumen--pending {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* ============================================================
   DASHBOARD — stats-dashboard.php
   ============================================================ */

/* Stats KPI — variante roja (pendiente de cobro) */
.mgr-stats-kpi-item--red {
  background: #fee2e2;
  border-color: #fecaca;
}
.mgr-stats-kpi-item--red .mgr-stats-kpi-label { color: #b91c1c; }
.mgr-stats-kpi-item--red .mgr-stats-kpi-value { color: #dc2626; }
.mgr-stats-kpi-item--red .mgr-stats-kpi-sub   { color: #ef4444; }

/* Barra de fecha de prueba */
.mgr-dash-test-date {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--clr-text-soft);
  margin-bottom: 1rem;
}

/* Selector de período */
.mgr-dash-period-bar {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.mgr-dash-period-btn {
  padding: 0.375rem 1.1rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  background: var(--clr-surface);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--clr-text-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1.5;
}
.mgr-dash-period-btn:hover {
  background: var(--clr-blue-xlight);
  border-color: var(--clr-blue-light);
  color: var(--clr-blue);
}
.mgr-dash-period-btn.active {
  background: var(--clr-blue);
  border-color: var(--clr-blue);
  color: #fff;
}

/* Sección del dashboard */
.mgr-dash-section {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.mgr-dash-section-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--clr-text-xsoft);
  margin-bottom: 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--clr-border-soft);
}
.mgr-dash-section-title i {
  opacity: 0.7;
}

/* Scroll horizontal de gráficas por local */
.mgr-dash-local-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--clr-border) transparent;
}
.mgr-dash-local-scroll::-webkit-scrollbar { height: 5px; }
.mgr-dash-local-scroll::-webkit-scrollbar-thumb { background: var(--clr-border); border-radius: 3px; }

.mgr-dash-local-card {
  flex: 0 0 calc(50% - 0.5rem);
}
@media (max-width: 575px) {
  .mgr-dash-local-card {
    flex: 0 0 calc(90% - 0.5rem);
  }
}

/* Título de local dentro de la sección de reservas */
.mgr-dash-local-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--clr-text-soft);
  background: var(--clr-bg);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.625rem;
  margin-bottom: 0.625rem;
}

/* Grid de estado */
.mgr-dash-estado-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
@media (max-width: 575px) {
  .mgr-dash-estado-grid { grid-template-columns: repeat(2, 1fr); }
}

.mgr-dash-estado-item {
  padding: 1rem 0.75rem;
  border-radius: var(--radius-md);
  text-align: center;
}
.mgr-dash-estado-num {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
.mgr-dash-estado-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  margin-top: 0.375rem;
}

.mgr-dash-estado-item--green  { background: #dcfce7; }
.mgr-dash-estado-item--green  .mgr-dash-estado-num   { color: #16a34a; }
.mgr-dash-estado-item--green  .mgr-dash-estado-label { color: #15803d; }

.mgr-dash-estado-item--yellow { background: #fef9c3; }
.mgr-dash-estado-item--yellow .mgr-dash-estado-num   { color: #d97706; }
.mgr-dash-estado-item--yellow .mgr-dash-estado-label { color: #b45309; }

.mgr-dash-estado-item--gray   { background: #f1f5f9; }
.mgr-dash-estado-item--gray   .mgr-dash-estado-num   { color: #64748b; }
.mgr-dash-estado-item--gray   .mgr-dash-estado-label { color: #475569; }

.mgr-dash-estado-item--red    { background: #fee2e2; }
.mgr-dash-estado-item--red    .mgr-dash-estado-num   { color: #dc2626; }
.mgr-dash-estado-item--red    .mgr-dash-estado-label { color: #b91c1c; }

/* ============================================================
   LOADING MODAL — modernizar #modalLoading en toda la app
   ============================================================ */
#modalLoading .modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: auto;
  max-width: none;
}
#modalLoading .modal-content {
  width: 88px !important;
  height: 88px;
  background: #ffffff;
  border: none;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#modalLoading .modal-content .fa-spinner,
#modalLoading .modal-content .fa.fa-spinner {
  font-size: 2rem;
  color: var(--clr-blue);
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Tabla de sesiones */
.mgr-dash-sesion-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.mgr-dash-sesion-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--clr-border);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-text-xsoft);
  white-space: nowrap;
}
.mgr-dash-sesion-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--clr-border-soft);
  vertical-align: middle;
}
.mgr-dash-sesion-table tbody tr:last-child td { border-bottom: none; }

/* Badges de estado dentro de la tabla de sesiones */
.mgr-dash-estado-badge {
  display: inline-block;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}
.mgr-dash-estado-badge--green  { background: #dcfce7; color: #15803d; }
.mgr-dash-estado-badge--yellow { background: #fef9c3; color: #b45309; }
.mgr-dash-estado-badge--gray   { background: #f1f5f9; color: #475569; }
.mgr-dash-estado-badge--red    { background: #fee2e2; color: #b91c1c; }