.cal-cell.fecha-buscada{outline:2px solid var(--gold)!important;outline-offset:-2px;background:rgba(139,43,226,0.12)!important;}body,input,select,textarea,button{font-family:'Montserrat',sans-serif!important;}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:16px}

/* ══ MOBILE RESPONSIVE ══ */
  @media (max-width: 768px) {

    /* Hide sidebar, show main full width */
    .main { margin-left: 0 !important; }

    /* Topbar: hamburger + title */
    .topbar { padding: 12px 16px; gap: 10px; }
    .page-title { font-size: 18px; }

    /* Tables: make rows stack or scroll */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Two-panel views (timing, dj-info, gast, adic): stack vertically */
    .two-panel { flex-direction: column !important; }
    .two-panel .panel-left {
      width: 100% !important;
      max-height: 220px;
      overflow-y: auto;
      border-right: none !important;
      border-bottom: 1px solid var(--border);
    }
    .two-panel .panel-right { width: 100% !important; }

    /* When an event is selected in mobile, hide event list and show form full screen */
    .two-panel.event-selected .panel-left { display: none; }
    .two-panel.event-selected .panel-right { width: 100% !important; }
    .back-to-list-btn { display: flex !important; }

    /* Filter bar: wrap */
    .filter-bar { flex-wrap: wrap; gap: 8px; }
    .filter-bar .search-input { min-width: 0; flex: 1; }

    /* Cards grid: single column */
    .stats-row { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .dashboard-grid { grid-template-columns: 1fr !important; }

    /* Modal: full screen on mobile */
    .modal { max-width: 100% !important; max-height: 95vh; margin: 0 10px; border-radius: 12px 12px 0 0; position: fixed; bottom: 0; left: 0; right: 0; margin: 0; }
    .modal-overlay { align-items: flex-end; }

    /* Form grid: single column */
    .form-grid { grid-template-columns: 1fr !important; }
    .form-group.full { grid-column: 1 !important; }
  }

  /* Back to list button (mobile only) */
  .back-to-list-btn {
    display: none;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 13px;
    cursor: pointer;
    padding: 0 0 12px 0;
    font-family: 'Montserrat', sans-serif;
  }

  /* Hamburger button */
  .hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    padding: 4px;
  }
  @media (max-width: 768px) {
    .hamburger-btn { display: flex; align-items: center; }
  }

  /* ══ AHORRO DE BATERÍA: desactivar efectos pesados en mobile ══ */
  @media (max-width: 768px) {
    /* Partículas y efectos del auth: off en móvil */
    #auth-particles            { display: none !important; }
    .auth-screen::before,
    .auth-screen::after        { display: none !important; }
    /* Scan-line + grid background animation: desactivar */
    .scan-line::after          { animation: none !important; opacity: 0 !important; }
    body::before               { animation: none !important; }
    /* Border pulse en focus: off (queda solo el border-color) */
    .auth-box .float-group.is-focused .form-input {
      animation: none !important;
      box-shadow: 0 0 0 3px rgba(139,43,226,.2) !important;
    }
    /* Auth topnav: más compacta */
    .auth-topnav               { padding: 12px 18px !important; }
    .auth-topnav-links         { gap: 12px; }
    .auth-topnav-link          { font-size: 12px !important; }
    /* Stats-grid: 2 columnas en tablet */
    .stats-grid                { grid-template-columns: 1fr 1fr !important; }
    #stats-grid-financiero     { grid-template-columns: 1fr 1fr !important; }
  }

  /* ══ PHONE ≤480px — refinamiento final ══ */
  @media (max-width: 480px) {
    /* Stats: 1 columna en pantallas muy chicas */
    .stats-grid, #stats-grid-financiero { grid-template-columns: 1fr !important; }
    /* Auth topnav: ocultar "Inicio" y "Planes", dejar "Crear cuenta" y "Renovar" */
    .auth-topnav-links a:not(.auth-topnav-renew):not(.auth-topnav-admin):not(.auth-topnav-crear) { display: none !important; }
    .auth-topnav               { padding: 10px 14px !important; }
    /* Auth box: máximo espacio disponible */
    .auth-screen               { padding: 10px 0 !important; }
    /* Sidebar: ancho 85% max para no tapar todo */
    .sidebar                   { width: min(260px, 85vw) !important; }
    /* Topbar: botón primario solo ícono */
    .topbar-actions .btn span,
    #btn-new-label             { display: none !important; }
    .topbar-actions .btn       { padding: 10px !important; min-width: 44px; justify-content: center; }
  }

#demo-banner {
      position:fixed;top:0;left:0;right:0;z-index:9999;height:36px;
      background:linear-gradient(90deg,#4a0d8f 0%,#7b2abf 100%);
      color:#fff;font-size:12px;padding:0 20px;
      display:none;align-items:center;justify-content:center;gap:10px;
      font-family:'Montserrat',sans-serif;overflow:hidden;
    }
    #demo-banner.visible { display:flex; }
    .demo-b-sep { opacity:.4; }
    .demo-b-exit {
      color:rgba(255,255,255,.8);text-decoration:none;
      border:1px solid rgba(255,255,255,.3);border-radius:4px;
      padding:2px 10px;font-size:11px;margin-left:10px;transition:all .15s;
    }
    .demo-b-exit:hover { color:#fff;border-color:rgba(255,255,255,.7); }
    body.demo-mode .sidebar  { top:36px!important; }
    body.demo-mode .topbar   { top:36px!important; }
    body.demo-mode .auth-screen  { padding-top:36px; }
    .auth-topnav {
      position:absolute; top:0; left:0; right:0; z-index:10;
      display:flex; align-items:center; justify-content:space-between;
      padding: 16px 48px;
      background: rgba(12,12,14,0.85);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
    }
    body.demo-mode .auth-topnav { top:36px; }
    .auth-topnav-logo img { height:22px; display:block; }
    .auth-topnav-links { display:flex; align-items:center; gap:28px; }
    .auth-topnav-link {
      color:var(--text-muted); font-size:13px; font-family:'Montserrat',sans-serif;
      text-decoration:none; letter-spacing:.02em;
      transition:color .15s;
    }
    .auth-topnav-link:hover { color:var(--text); }
    .auth-topnav-admin { color:rgba(180,140,255,.7); }
    .auth-topnav-admin:hover { color:#c084fc !important; }
    .auth-topnav-crear { color:#fff !important; background:var(--gold,#f59e0b); padding:5px 14px; border-radius:7px; font-size:12px; font-weight:500; }
    .auth-topnav-crear:hover { background:#d97706 !important; color:#fff !important; }
    .auth-topnav-renew { color:#a855f7 !important; border:1px solid rgba(139,43,226,.45); padding:5px 12px; border-radius:7px; font-size:12px; }
    .auth-topnav-renew:hover { background:rgba(139,43,226,.18) !important; border-color:#8B2BE2 !important; color:#c084fc !important; }
    .auth-screen { padding-top:57px !important; }
    body.demo-mode .salon-screen { padding-top:36px; }
    #demo-toast {
      position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
      background:#1c1c1f;color:#f0ede8;border:1px solid rgba(255,255,255,.12);
      border-radius:8px;padding:10px 18px;font-size:12px;z-index:10000;
      box-shadow:0 8px 24px rgba(0,0,0,.5);font-family:'Montserrat',sans-serif;
      display:flex;align-items:center;gap:8px;white-space:nowrap;
      animation:__dIn .25s ease;
    }
    @keyframes __dIn { from{opacity:0;transform:translate(-50%,8px)} to{opacity:1;transform:translate(-50%,0)} }

/* ── AUTH SCREEN ── */
  .auth-screen {
    background: #0a0a0c !important;
    overflow: hidden;
  }
  .auth-screen::before {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 1;
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px);
    opacity: .6;
  }
  .auth-screen::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 1;
    background:
      radial-gradient(ellipse at 50% 30%, rgba(139,43,226,.2) 0%, transparent 55%),
      linear-gradient(to right, rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 44px 44px,
      linear-gradient(to bottom, rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 44px 44px;
  }
  .auth-topnav  { z-index: 20 !important; }
  .auth-box {
    position: relative; z-index: 10;
    background: rgba(255,255,255,.025) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border: 1px solid rgba(139,43,226,.45) !important;
    border-radius: 20px !important;
    box-shadow:
      0 0 70px -15px rgba(139,43,226,.4),
      0 0 0 1px rgba(139,43,226,.08) inset,
      0 30px 80px rgba(0,0,0,.6) !important;
  }
  .auth-sub {
    font-family: 'Space Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: .2em !important;
    color: rgba(168,85,247,.75) !important;
  }
  .auth-box .form-label {
    font-family: 'Space Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: .12em !important;
    color: rgba(203,213,225,.6) !important;
  }
  .auth-box .form-input {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.1) !important;
    color: #f0ede8 !important;
    border-radius: 9px !important;
    transition: border-color .18s, box-shadow .18s !important;
  }
  .auth-box .form-input:focus {
    border-color: rgba(139,43,226,.7) !important;
    box-shadow: 0 0 0 3px rgba(139,43,226,.18), 0 0 16px rgba(139,43,226,.2) !important;
    outline: none !important;
  }
  .auth-box .btn-gold {
    background: #8B2BE2 !important;
    border-radius: 9px !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 12px !important;
    letter-spacing: .08em !important;
    box-shadow: 0 0 30px rgba(139,43,226,.4) !important;
    transition: background .18s, box-shadow .18s !important;
  }
  .auth-box .btn-gold:hover:not(:disabled) {
    background: #9d3cfa !important;
    box-shadow: 0 0 50px rgba(139,43,226,.6) !important;
  }

  /* ── SIDEBAR CYBER ── */
  .sidebar {
    background: #0c0c0f !important;
    border-right: 1px solid rgba(139,43,226,.18) !important;
  }
  .sidebar-logo { border-bottom-color: rgba(139,43,226,.18) !important; }
  #sidebar-salon-name { font-family: 'Space Mono', monospace !important; font-size: 10px !important; }

  /* ── AUTH SCREEN: siempre oscuro, ignorar modo claro ── */
  .light .auth-screen,
  .light .salon-screen {
    --bg: #0d0d10;
    --surface: #131318;
    --surface2: #1a1a20;
    --surface3: #22222a;
    --border: rgba(255,255,255,0.07);
    --border2: rgba(255,255,255,0.12);
    --text: #f0ede8;
    --text-muted: rgba(240,237,232,0.45);
    --text-mid: rgba(240,237,232,0.7);
    background: #0d0d10 !important;
  }
  .light .auth-box,
  .light .salon-box {
    background: #131318 !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #f0ede8 !important;
  }
  .light .auth-screen input,
  .light .salon-screen input {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #f0ede8 !important;
  }
  .light .auth-screen .float-label,
  .light .salon-screen .float-label { color: rgba(240,237,232,0.45) !important; }
  .light .auth-screen .auth-tab { color: rgba(240,237,232,0.45) !important; }
  .light .auth-screen .auth-tab.active { color: var(--gold-light) !important; }
  .light .auth-screen .auth-logo,
  .light .auth-screen .auth-sub,
  .light .auth-screen label,
  .light .salon-screen h2,
  .light .salon-screen p { color: inherit !important; }
  .light .auth-screen .btn-ghost {
    color: rgba(240,237,232,0.7) !important;
    border-color: rgba(255,255,255,0.15) !important;
  }

  /* ── LIGHT MODE OVERRIDES ── */
  .light .sidebar {
    background: var(--surface) !important;
    border-right: 1px solid var(--border) !important;
  }
  .light .sidebar-logo { border-bottom-color: var(--border) !important; }
  .light .sidebar-footer { border-top-color: var(--border) !important; }

  .light .topbar {
    background: rgba(245,243,239,0.92) !important;
    border-bottom-color: var(--border) !important;
  }

  .light .card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
  }
  .light .card:hover { border-color: rgba(123,34,210,.25) !important; box-shadow: 0 4px 24px -8px rgba(123,34,210,.12) !important; }

  .light .stat-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
  }
  .light .stat-card:hover { border-color: rgba(123,34,210,.35) !important; box-shadow: 0 0 30px -8px rgba(123,34,210,.15) !important; }
  .light .stat-val { color: var(--text) !important; }
  .light .stat-label { color: var(--text-muted) !important; }
  .light .stat-sub { color: var(--text-muted) !important; }

  .light .user-menu {
    background: var(--surface) !important;
    border-color: var(--border2) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
  }
  .light .user-menu-item:hover { background: var(--surface3) !important; }
  .light .user-avatar {
    background: rgba(123,34,210,.12) !important;
    border-color: rgba(123,34,210,.3) !important;
    color: var(--gold) !important;
  }

  .light thead th {
    background: var(--surface2) !important;
    color: var(--text-muted) !important;
  }

  /* ── NAV SECTIONS LIGHT MODE ── */
  .light .nav-section-header {
    background: rgba(123,34,210,.05) !important;
    border-color: rgba(123,34,210,.15) !important;
  }
  .light .nav-section-header:hover {
    background: rgba(123,34,210,.1) !important;
    border-color: rgba(123,34,210,.3) !important;
  }
  .light .nav-section-header.open {
    background: transparent !important;
    border-color: transparent !important;
  }
  .light .nav-section-header.open:hover {
    background: rgba(123,34,210,.05) !important;
    border-color: rgba(123,34,210,.12) !important;
  }
  .light .nav-section-header-label {
    color: rgba(26,24,20,.55) !important;
  }
  .light .nav-section-header.open .nav-section-header-label {
    color: rgba(123,34,210,.7) !important;
  }
  .light .sec-chevron {
    color: rgba(26,24,20,.35) !important;
  }

  /* Nav items */
  .light .nav-item:hover {
    color: var(--gold) !important;
    text-shadow: none !important;
    background: rgba(123,34,210,.08) !important;
  }
  .light .nav-item:hover svg { filter: none !important; stroke: var(--gold) !important; }
  .light .nav-item.active {
    background: rgba(123,34,210,.1) !important;
    color: var(--gold) !important;
    box-shadow: inset 3px 0 0 var(--gold) !important;
  }
  .light .nav-item.active .icon { opacity: 1 !important; }

  /* ══ NAV SECTION: Floating-label toggle ══ */
  .nav-section-group { margin-bottom: 4px; }

  /* ── ESTADO CERRADO (collapsed): card grande, texto centrado ── */
  .nav-section-header {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 42px 0 0; /* derecha reservada para chevron */
    cursor: pointer;
    border-radius: 10px;
    background: rgba(139,43,226,.04);
    border: 1px solid rgba(139,43,226,.14);
    margin-bottom: 2px;
    user-select: none;
    overflow: hidden;
    transition:
      min-height .28s cubic-bezier(.4,0,.2,1),
      background    .2s,
      border-color  .2s,
      border-radius .28s,
      padding       .28s cubic-bezier(.4,0,.2,1);
  }
  .nav-section-header:hover {
    background: rgba(139,43,226,.1);
    border-color: rgba(139,43,226,.32);
  }

  /* Etiqueta: centrada absolutamente cuando cerrado */
  .nav-section-header-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(203,213,225,.65);
    font-family: 'Space Mono', monospace;
    pointer-events: none;
    white-space: nowrap;
    transition:
      left       .28s cubic-bezier(.4,0,.2,1),
      top        .28s cubic-bezier(.4,0,.2,1),
      transform  .28s cubic-bezier(.4,0,.2,1),
      font-size  .28s cubic-bezier(.4,0,.2,1),
      letter-spacing .28s cubic-bezier(.4,0,.2,1),
      color      .2s;
  }

  /* Chevron: posicionado a la derecha, sutil cuando cerrado */
  .sec-chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    color: rgba(148,163,184,.3);
    opacity: .55;
    flex-shrink: 0;
    transition: transform .25s ease, color .2s, opacity .2s;
  }

  /* ── ESTADO ABIERTO: label de categoría con items indentados ── */
  .nav-section-header.open {
    min-height: 22px;
    padding: 2px 30px 2px 6px;
    background: transparent;
    border-color: transparent;
    border-radius: 4px;
    margin-top: 18px;
    margin-bottom: 2px;
  }
  .nav-section-header.open:hover {
    background: rgba(255,255,255,.03);
    border-color: transparent;
  }
  /* Primer grupo sin margin-top extra */
  .nav-section-group:first-child .nav-section-header.open {
    margin-top: 2px;
  }

  /* Etiqueta: slate visible, claramente diferente a los nav-items */
  .nav-section-header.open .nav-section-header-label {
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    letter-spacing: .18em;
    color: rgba(148,163,184,.72);
    font-weight: 600;
  }

  /* Chevron: sutil, apuntando arriba */
  .nav-section-header.open .sec-chevron {
    transform: translateY(-50%) rotate(180deg);
    color: rgba(148,163,184,.4);
    opacity: 1;
  }

  /* Items indentados bajo el header abierto */
  .nav-section-items .nav-item {
    padding-left: 20px;
  }

  /* ── ITEMS COLAPSABLES ── */
  .nav-section-items {
    overflow: hidden;
    max-height: 600px;
    opacity: 1;
    transition: max-height .3s ease, opacity .22s ease;
  }
  .nav-section-items.collapsed {
    max-height: 0;
    opacity: 0;
  }

  /* ── MOBILE: SIEMPRE card grande sin importar el estado ── */
  @media (max-width: 768px) {
    .nav-section-header,
    .nav-section-header.open {
      min-height: 56px !important;
      padding: 0 12px !important;
      border-radius: 10px !important;
      margin-bottom: 4px !important;
    }
    /* Cerrado: fondo sutil */
    .nav-section-header:not(.open) {
      background: rgba(255,255,255,.025) !important;
      border-color: rgba(139,43,226,.1) !important;
    }
    /* Abierto en mobile: card grande, borde violeta sutil */
    .nav-section-header.open {
      background: rgba(139,43,226,.07) !important;
      border-color: rgba(139,43,226,.25) !important;
      margin-top: 4px !important;
    }
    /* Etiqueta siempre centrada en mobile */
    .nav-section-header .nav-section-header-label,
    .nav-section-header.open .nav-section-header-label {
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      font-size: 11px !important;
      letter-spacing: .18em !important;
    }
    .nav-section-header:not(.open) .nav-section-header-label {
      color: rgba(203,213,225,.65) !important;
    }
    .nav-section-header.open .nav-section-header-label {
      color: rgba(168,85,247,.85) !important;
    }
    /* Chevron: oculto en mobile (no se necesita indicador en card grande) */
    .nav-section-header .sec-chevron,
    .nav-section-header.open .sec-chevron {
      display: none !important;
    }
  }

  /* ── TOPBAR CYBER ── */
  .topbar {
    background: rgba(12,12,15,0.88) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom-color: rgba(139,43,226,.18) !important;
  }
  .page-title {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-size: 19px !important;
    letter-spacing: -.01em !important;
  }
  .mobile-menu-btn { color: #a855f7 !important; }

  /* ── STAT CARDS CYBER ── */
  .stat-card {
    background: rgba(255,255,255,.025) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 14px !important;
    transition: border-color .2s, box-shadow .2s !important;
    position: relative !important;
  }
  .stat-card:hover {
    border-color: rgba(139,43,226,.4) !important;
    box-shadow: 0 0 30px -8px rgba(139,43,226,.25) !important;
  }
  .stat-card::before { opacity: .5 !important; height: 1px !important; }
  .stat-val {
    font-family: 'Space Mono', monospace !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #fff !important;
  }
  .stat-label {
    font-family: 'Space Mono', monospace !important;
    font-size: 9px !important;
    color: rgba(148,163,184,.6) !important;
    letter-spacing: .12em !important;
  }
  .stat-sub { color: rgba(148,163,184,.45) !important; font-size: 10px !important; }

  /* ── CARDS CYBER ── */
  .card {
    background: rgba(255,255,255,.02) !important;
    border-color: rgba(255,255,255,.07) !important;
    transition: border-color .2s !important;
  }
  .card:hover { border-color: rgba(139,43,226,.22) !important; }
  .card-title {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: -.01em !important;
  }
  thead th {
    background: rgba(255,255,255,.02) !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 9px !important;
    letter-spacing: .16em !important;
  }
  /* User chip cyber */
  .user-chip:hover { background: rgba(139,43,226,.1) !important; }
  .user-avatar {
    background: rgba(139,43,226,.2) !important;
    border-color: rgba(139,43,226,.5) !important;
    color: #a855f7 !important;
    font-family: 'Space Mono', monospace !important;
  }
  .user-name { font-family: 'Space Mono', monospace !important; font-size: 11px !important; }
  .user-role { font-family: 'Space Mono', monospace !important; }
  .user-menu {
    background: #111114 !important;
    border-color: rgba(139,43,226,.25) !important;
  }
  .user-menu-item:hover { background: rgba(139,43,226,.1) !important; }
  .sidebar-footer { border-top-color: rgba(139,43,226,.18) !important; }

  /* Salon screen cyber */
  .salon-screen { background: #0a0a0c !important; }
  .salon-box {
    background: rgba(255,255,255,.025) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(139,43,226,.4) !important;
    border-radius: 18px !important;
    box-shadow: 0 0 60px -15px rgba(139,43,226,.35) !important;
  }
  .salon-title {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
  }

  /* ── AUTH PARTICLES ── */
  #auth-particles {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 2; overflow: hidden;
  }
  .auth-pt {
    position: absolute; width: 2px; opacity: 0; border-radius: 2px;
    background: linear-gradient(180deg, transparent 0%, #8B2BE2 45%, #00D4FF 100%);
    animation: auth-fall linear infinite;
  }
  @keyframes auth-fall {
    0%   { transform: translateY(-120px); opacity: 0; }
    8%   { opacity: .4; }
    88%  { opacity: .4; }
    100% { transform: translateY(110vh); opacity: 0; }
  }

  /* ── FLOATING LABELS ── */
  /* Override existing form-group inside auth-box */
  .auth-box .float-group {
    position: relative;
    margin-top: 20px;        /* space above for floated label */
    margin-bottom: 0;
  }
  .auth-box .float-group .form-input {
    padding-top: 14px !important;
    padding-bottom: 10px !important;
    padding-left: 14px !important;
    font-size: 13px !important;
    width: 100%;
  }
  /* Pass-wrap inside float-group */
  .auth-box .float-group .pass-wrap {
    width: 100%;
  }
  /* Floating label itself */
  .float-label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: rgba(148,163,184,.5);
    pointer-events: none;
    z-index: 4;
    padding: 0 3px;
    line-height: 1;
    transition:
      top .22s cubic-bezier(.4,0,.2,1),
      font-size .22s cubic-bezier(.4,0,.2,1),
      color .22s,
      letter-spacing .22s,
      background .22s;
    white-space: nowrap;
  }
  /* For pass-wrap groups: label lives after pass-wrap, center by full height */
  .auth-box .float-group .pass-wrap ~ .float-label {
    top: 50%;
  }
  /* Floated (focused or has value) */
  .auth-box .float-group.is-focused .float-label,
  .auth-box .float-group.has-val .float-label {
    top: -9px;
    font-size: 9px;
    color: #a855f7;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: linear-gradient(to bottom, transparent 40%, rgba(18,18,22,.85) 40%);
  }

  /* ── SCAN LINE ANIMATION ── */
  .scan-line {
    position: absolute; inset: 0;
    border-radius: 9px;
    pointer-events: none; z-index: 3; overflow: hidden;
  }
  .scan-line::after {
    content: '';
    position: absolute; top: 0; bottom: 0; left: -80%;
    width: 60%;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(139,43,226,.25) 40%,
      rgba(0,212,255,.15) 60%,
      transparent 100%);
    opacity: 0;
    border-radius: 9px;
  }
  .auth-box .float-group.is-focused .scan-line::after {
    animation: scan-sweep .55s ease forwards;
  }
  @keyframes scan-sweep {
    from { left: -80%; opacity: .9; }
    to   { left: 130%; opacity: 0; }
  }

  /* Neon border pulse on focus */
  .auth-box .float-group.is-focused .form-input {
    border-color: rgba(139,43,226,.75) !important;
    box-shadow:
      0 0 0 3px rgba(139,43,226,.18),
      0 0 20px rgba(139,43,226,.25) !important;
    animation: border-pulse 2s ease infinite !important;
  }
  @keyframes border-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(139,43,226,.18), 0 0 20px rgba(139,43,226,.25); }
    50%       { box-shadow: 0 0 0 3px rgba(139,43,226,.28), 0 0 30px rgba(139,43,226,.4); }
  }

/* ── 1. Background diagonal grid animation ── */
  body::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.012) 0px,
      rgba(255,255,255,.012) 1px,
      transparent 1px,
      transparent 28px
    );
    background-size: 40px 40px;
    animation: grid-drift 120s linear infinite;
  }
  @keyframes grid-drift {
    0%   { background-position: 0 0; }
    100% { background-position: 40px 40px; }
  }
  body.modo-grabacion::before { display: none !important; }

  /* ── 2. Topbar: gradient divider violet ── */
  .topbar { position: relative; overflow: visible !important; }
  .topbar::after {
    content: '';
    position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(139,43,226,.55) 35%, rgba(168,85,247,.35) 65%, transparent 100%);
    pointer-events: none;
  }

  /* ── 3. Nav items: glow on hover ── */
  .nav-item:hover {
    color: #c084fc !important;
    text-shadow: 0 0 10px rgba(139,43,226,.45) !important;
    background: rgba(139,43,226,.07) !important;
  }
  .nav-item:hover svg { stroke: #a855f7 !important; filter: drop-shadow(0 0 5px rgba(139,43,226,.7)); }
  .nav-item { min-height: 40px; transition: all .18s ease !important; }
  .nav-item.active { box-shadow: inset 3px 0 0 #8B2BE2; }

  /* ── 4. Stat cards: enhanced accent + Space Mono numbers ── */
  .stat-card {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
    cursor: default;
  }
  .stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(139,43,226,.4) !important;
    box-shadow: 0 8px 30px -8px rgba(139,43,226,.3) !important;
  }
  .stat-card::before {
    height: 3px !important;
    opacity: .55 !important;
    transition: opacity .25s, box-shadow .25s !important;
  }
  .stat-card:hover::before {
    opacity: 1 !important;
    box-shadow: 0 2px 18px rgba(139,43,226,.55) !important;
  }
  .stat-val {
    font-family: 'Space Mono', monospace !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
  }
  .stat-label {
    font-size: 9px !important;
    letter-spacing: .14em !important;
    font-family: 'Space Mono', monospace !important;
  }

  /* ── 5. Cards hover glow ── */
  .card {
    transition: border-color .2s, box-shadow .2s !important;
  }
  .card:hover {
    border-color: rgba(139,43,226,.25) !important;
    box-shadow: 0 4px 24px -8px rgba(139,43,226,.2) !important;
  }

  /* ── 6. Sidebar overlay: backdrop-filter ── */
  .sidebar-overlay.visible {
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    background: rgba(0,0,0,.55) !important;
  }

  /* ── 7. Mobile sidebar: transform-based (smoother) ── */
  @media (max-width: 768px) {
    .sidebar {
      left: 0 !important;
      transform: translateX(-100%);
      transition: transform .3s cubic-bezier(.16,1,.3,1) !important;
      box-shadow: none;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    .sidebar.open {
      transform: translateX(0) !important;
      box-shadow: 6px 0 40px rgba(0,0,0,.6) !important;
    }
    /* Topbar mobile */
    .topbar { padding: 10px 14px !important; min-height: 58px !important; }
    .page-title { font-size: 17px !important; }
    /* Content padding */
    .content { padding: 14px !important; }
    /* Mobile menu button: bigger touch target */
    .mobile-menu-btn {
      width: 44px !important; height: 44px !important;
      border-radius: 10px !important;
    }
    /* Stat card icons emoji: reduce size */
    .stat-icon { font-size: 16px !important; opacity: .12 !important; }
  }

  /* ── 8. Modal: bottom sheet on mobile ── */
  @media (max-width: 768px) {
    .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
    .modal {
      border-radius: 20px 20px 0 0 !important;
      max-width: 100% !important;
      margin: 0 !important;
      width: 100% !important;
      max-height: 92vh !important;
      animation: slide-up .28s cubic-bezier(.16,1,.3,1) !important;
    }
    @keyframes slide-up {
      from { transform: translateY(24px); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }
  }

  /* ── 9. Table: better touch scroll ── */
  .table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: 0 0 10px 10px;
  }

  /* ── 10. Small phone ≤480px: content compress ── */
  @media (max-width: 480px) {
    .content { padding: 10px !important; }
    .topbar { padding: 8px 10px !important; min-height: 54px !important; }
    .stats-grid { gap: 8px !important; }
    .stat-card { padding: 14px 16px !important; }
    .stat-val { font-size: 28px !important; }
    /* Filter bar: wrap cleanly */
    .filter-bar { gap: 6px !important; }
    .search-input, .filter-select { font-size: 13px !important; }
  }

  /* ── 11. User chip: min-height touch target ── */
  .user-chip { min-height: 44px !important; }
  .user-menu-item { min-height: 44px !important; }

  /* ── 12. Sidebar nav section items: bigger touch targets on mobile ── */
  @media (max-width: 768px) {
    .nav-section-header,
    .nav-section-header.open { cursor: pointer; }
    .nav-item { min-height: 46px !important; padding: 10px 12px !important; }
  }

  /* ── 13. Nav Customizer ── */
  .nav-x-hidden { display: none !important; }
  #modal-nav-custom { display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.75); backdrop-filter:blur(5px); align-items:center; justify-content:center; }
  #modal-nav-custom-panel { background:#13131f; border:1px solid rgba(139,43,226,.35); border-radius:14px; width:min(360px,92vw); max-height:82vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px rgba(139,43,226,.1); }
  .nxc-header { padding:15px 18px 13px; border-bottom:1px solid rgba(255,255,255,.07); display:flex; align-items:center; justify-content:space-between; }
  .nxc-title { font-weight:700; font-size:14px; letter-spacing:.02em; color:#e2e2f0; }
  .nxc-close { background:none; border:none; cursor:pointer; color:#666; font-size:17px; padding:2px 6px; border-radius:5px; line-height:1; transition:color .15s; }
  .nxc-close:hover { color:#e2e2f0; }
  .nxc-body { overflow-y:auto; flex:1; }
  .nxc-section + .nxc-section { border-top:1px solid rgba(255,255,255,.06); }
  .nxc-section-row { display:flex; align-items:center; gap:11px; padding:11px 18px; cursor:pointer; }
  .nxc-section-row:hover { background:rgba(139,43,226,.07); }
  .nxc-section-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#a393c8; flex:1; }
  .nxc-item-row { display:flex; align-items:center; gap:11px; padding:8px 18px 8px 30px; cursor:pointer; }
  .nxc-item-row:hover { background:rgba(255,255,255,.03); }
  .nxc-item-label { font-size:13px; color:#c4c4d8; flex:1; }
  .nxc-items-wrap.nxc-sec-off { opacity:.38; pointer-events:none; }
  .nxc-toggle { position:relative; width:32px; height:17px; flex-shrink:0; display:inline-block; }
  .nxc-toggle input { opacity:0; width:0; height:0; position:absolute; }
  .nxc-toggle-track { position:absolute; inset:0; background:#333; border-radius:9px; transition:background .18s; cursor:pointer; }
  .nxc-toggle input:checked + .nxc-toggle-track { background:#7c3aed; }
  .nxc-toggle-track::after { content:''; position:absolute; left:2px; top:1.5px; width:14px; height:14px; background:#fff; border-radius:50%; transition:transform .18s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
  .nxc-toggle input:checked + .nxc-toggle-track::after { transform:translateX(15px); }
  .nxc-footer { padding:11px 18px; border-top:1px solid rgba(255,255,255,.07); }
  .nxc-reset { background:none; border:1px solid rgba(255,255,255,.12); color:#888; border-radius:7px; padding:7px 14px; font-size:12px; cursor:pointer; width:100%; transition:border-color .15s,color .15s; }
  .nxc-reset:hover { border-color:#7c3aed; color:#a78bfa; }

  /* ── 14. Maitre editor: responsive mobile layout ── */
  @media (max-width: 768px) {
    #maitre-editor {
      flex-direction: column !important;
      height: auto !important;
      min-height: 0 !important;
    }
    /* Canvas: altura fija generosa en mobile */
    #maitre-canvas-wrap {
      height: 60vw !important;
      min-height: 260px !important;
      max-height: 55vh !important;
      border-bottom: 1px solid var(--border);
    }
    /* Toolbar: se convierte en panel inferior scrolleable */
    #maitre-toolbar {
      width: 100% !important;
      border-left: none !important;
      max-height: 45vh;
      overflow-y: auto;
      flex-shrink: 0;
    }
    /* View panel en mobile: lista de mesas compacta */
    #maitre-view-panel { flex: none !important; }
    /* En modo visualización, el view-panel ocupa todo el toolbar */
    #maitre-toolbar:has(#maitre-view-panel:not([style*="display: none"])) { max-height: 40vh; }
  }
  @media (max-width: 480px) {
    #maitre-canvas-wrap {
      height: 55vw !important;
      min-height: 220px !important;
    }
  }

  /* ── 14. Maitre event picker: full-width until event selected ── */
  #view-maitre {
    height: 100%;
    overflow: hidden;
  }
  #tp-maitre {
    height: 100%;
    overflow: hidden;
  }
  #tp-maitre:not(.event-selected) .panel-left {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-right: none !important;
    overflow-y: auto;
  }
  #tp-maitre:not(.event-selected) .panel-right {
    display: none !important;
  }
  #tp-maitre.event-selected .panel-left {
    display: none !important;
  }
  #tp-maitre.event-selected .panel-right {
    display: block !important;
    width: 100% !important;
    height: 100%;
    overflow-y: auto;
  }

  /* ── Stock de Bebidas / Vajilla / Nómina: mismo patrón que Mapa de Mesas ── */
  #view-maitre-stock, #view-maitre-vajilla, #view-maitre-nomina {
    height: 100%;
    overflow: hidden;
  }
  #tp-maitre-stock, #tp-maitre-vajilla, #tp-maitre-nomina {
    height: 100%;
    overflow: hidden;
  }
  #tp-maitre-stock.event-selected .panel-right,
  #tp-maitre-vajilla.event-selected .panel-right,
  #tp-maitre-nomina.event-selected .panel-right {
    overflow-y: auto !important;
    height: 100% !important;
  }

  /* ── Stock de Bebidas ── */
  .beb-toggle{position:relative;width:36px;height:20px;flex-shrink:0}
  .beb-toggle input{opacity:0;width:0;height:0;position:absolute}
  .beb-toggle-slider{position:absolute;inset:0;background:var(--surface3);border-radius:20px;transition:.2s;cursor:pointer;border:1px solid var(--border2)}
  .beb-toggle-slider::before{content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.2s}
  .beb-toggle input:checked + .beb-toggle-slider{background:#8B2BE2;border-color:#8B2BE2}
  .beb-toggle input:checked + .beb-toggle-slider::before{transform:translateX(16px)}
  .beb-qty-input{width:65px;padding:5px 7px;background:var(--surface);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-size:13px;font-weight:600;font-family:'Space Mono',monospace;text-align:center;outline:none}
  .beb-qty-input:focus{border-color:#8B2BE2}
  .stock-tabla-wrap{overflow-x:auto}
  .stock-tabla{width:100%;border-collapse:collapse;min-width:580px}
  .stock-tabla th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);padding:8px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
  .stock-tabla td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.04);vertical-align:middle}
  .stock-tabla tr:hover td{background:rgba(255,255,255,0.02)}
  .stock-tabla tr.beb-inactiva td{opacity:.4}
  .beb-bar-wrap{min-width:120px;display:flex;align-items:center;gap:8px}
  .beb-bar-bg{flex:1;height:8px;background:var(--surface3);border-radius:4px;overflow:hidden}
  .beb-bar-fill{height:100%;border-radius:4px;transition:width .4s}
  #tp-maitre-stock:not(.event-selected) .panel-left{width:100% !important;max-width:100% !important;max-height:100% !important;border-right:none !important;overflow-y:auto}
  #tp-maitre-stock:not(.event-selected) .panel-right{display:none !important}
  #tp-maitre-stock.event-selected .panel-left{display:none !important}
  #tp-maitre-stock.event-selected .panel-right{display:block !important;width:100% !important;overflow-y:auto}

  /* ── Stock de Vajilla ── */
  .vaj-qty-input{width:65px;padding:5px 7px;background:var(--surface);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-size:13px;font-weight:600;font-family:'Space Mono',monospace;text-align:center;outline:none}
  .vaj-qty-input:focus{border-color:#8B2BE2}
  .vaj-tabla-wrap{overflow-x:auto}
  .vaj-tabla{width:100%;border-collapse:collapse;min-width:420px}
  .vaj-tabla th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);padding:8px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
  .vaj-tabla td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.04);vertical-align:middle}
  .vaj-tabla tr:hover td{background:rgba(255,255,255,0.02)}
  .vaj-tabla tr.vaj-inactiva td{opacity:.4}
  .vaj-cat-header td{background:rgba(139,43,226,0.08);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#c084fc;padding:6px 12px;font-weight:700;border-bottom:1px solid rgba(139,43,226,0.2)}
  #tp-maitre-vajilla:not(.event-selected) .panel-left{width:100% !important;max-width:100% !important;max-height:100% !important;border-right:none !important;overflow-y:auto}
  #tp-maitre-vajilla:not(.event-selected) .panel-right{display:none !important}
  #tp-maitre-vajilla.event-selected .panel-left{display:none !important}
  #tp-maitre-vajilla.event-selected .panel-right{display:block !important;width:100% !important;overflow-y:auto}

  /* ── Nómina de Personal ── */
  .nomina-tabla{width:100%;border-collapse:collapse}
  .nomina-tabla th{padding:8px 12px;text-align:left;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--border2)}
  .nomina-tabla td{padding:10px 12px;font-size:13px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
  .nomina-tabla tr:hover td{background:rgba(255,255,255,.03)}
  .rol-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:600;font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.05em;background:rgba(139,43,226,.18);border:1px solid rgba(139,43,226,.35);color:#c084fc}
  .nomina-row-group th{padding:6px 12px;font-size:10px;color:rgba(168,85,247,.7);background:rgba(139,43,226,.08);letter-spacing:.12em;text-transform:uppercase;border:none}
  .nomina-qr-btn{padding:5px 10px;background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.3);color:#00D4FF;border-radius:6px;font-size:11px;cursor:pointer;transition:background .15s}
  .nomina-qr-btn:hover{background:rgba(0,212,255,.2)}
  .nomina-form-wrap{background:rgba(255,255,255,.03);border:1px solid var(--border2);border-radius:12px;padding:18px;margin-bottom:16px;display:none}
  .nomina-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  @media(max-width:600px){.nomina-form-grid{grid-template-columns:1fr}}
  .nomina-form-wrap label{font-size:11px;color:var(--text-muted);margin-bottom:4px;display:block;text-transform:uppercase;letter-spacing:.05em}
  .nomina-form-wrap input,.nomina-form-wrap select,.nomina-form-wrap textarea{width:100%;padding:8px 10px;background:var(--surface2);border:1px solid var(--border2);border-radius:7px;color:var(--text);font-size:13px;outline:none}
  .nomina-form-wrap textarea{resize:vertical;min-height:50px}
  .nf-tabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:8px}
  .nf-tab{padding:5px 14px;background:transparent;border:1px solid transparent;border-radius:6px;font-size:12px;color:var(--text-muted);cursor:pointer;transition:all .15s}
  .nf-tab.active{background:rgba(139,43,226,.18);border-color:rgba(139,43,226,.35);color:#c084fc}
  .historial-person-card{padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid var(--border2);border-radius:8px;cursor:pointer;transition:background .15s}
  .historial-person-card:hover{background:rgba(139,43,226,.12);border-color:rgba(139,43,226,.4)}
  .btn-nomina-save{padding:8px 18px;background:linear-gradient(135deg,#8B2BE2,#a855f7);border:none;border-radius:8px;color:#fff;font-size:13px;font-weight:600;cursor:pointer}
  .btn-nomina-cancel{padding:8px 14px;background:transparent;border:1px solid var(--border2);border-radius:8px;color:var(--text-muted);font-size:13px;cursor:pointer}
  .btn-nomina-del{padding:4px 8px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);border-radius:6px;color:#fca5a5;font-size:11px;cursor:pointer;transition:background .15s}
  .btn-nomina-del:hover{background:rgba(239,68,68,.25)}
  .nomina-qr-card{background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.2);border-radius:12px;padding:16px;margin-bottom:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .nomina-qr-card canvas{border-radius:8px;background:#fff;padding:6px}
  .nomina-qr-info{flex:1;min-width:180px}
  .nomina-qr-info h4{font-size:13px;font-weight:600;margin-bottom:4px;color:#fff}
  .nomina-qr-info p{font-size:11px;color:var(--muted,rgba(240,237,232,.5));line-height:1.5}
  #tp-maitre-nomina:not(.event-selected) .panel-left{width:100% !important;max-width:100% !important;max-height:100% !important;border-right:none !important;overflow-y:auto}
  #tp-maitre-nomina:not(.event-selected) .panel-right{display:none !important}
  #tp-maitre-nomina.event-selected .panel-left{display:none !important}
  #tp-maitre-nomina.event-selected .panel-right{display:block !important;width:100% !important;overflow-y:auto}