/* ═══════════════════════════════════════
   SHARED SIDEBAR — CostApp · SYM HostelGestión
   Componente unificado para todas las páginas
   ═══════════════════════════════════════ */

/* ── LAYOUT ── */
.app-shell{display:flex;min-height:100vh;}
.sidebar{width:250px;flex-shrink:0;background:var(--navy);display:flex;flex-direction:column;transition:width .25s;z-index:100;position:fixed;top:0;left:0;bottom:0;overflow:hidden !important;}
.sidebar.collapsed{width:60px;overflow:hidden !important;}
.main-content{flex:1;display:flex;flex-direction:column;min-width:0;overflow-y:auto;background:var(--cream);margin-left:250px;transition:margin-left .25s;}
.sidebar.collapsed ~ .main-content{margin-left:60px;}

/* ── SIDEBAR HEADER ── */
.sidebar-header{padding:12px 14px 10px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:8px;min-height:50px;}
.sidebar-brand{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden;transition:opacity .2s;text-decoration:none;}
.sidebar.collapsed .sidebar-brand{opacity:0;width:0;flex:0;display:none;}

/* Logo EscandUP horizontal blanco */
.sb-logo-white{height:28px;width:auto;max-width:160px;object-fit:contain;display:block;}

/* Fallback texto si no carga la imagen */
.sb-logo-fallback-txt{align-items:center;white-space:nowrap;}
.sb-logo-sm-txt{color:#c9a84c;font-weight:700;font-size:13px;letter-spacing:1px;}
.sb-logo-name{color:#fff;font-size:14px;font-weight:600;letter-spacing:.01em;white-space:nowrap;}
.sb-logo-name strong{font-weight:800;}
.sidebar-toggle{background:none;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7);width:28px;height:28px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;transition:.15s;}
.sidebar-toggle:hover{background:rgba(255,255,255,.1);}

/* ── NAV ITEMS ── */
.sidebar-sec-label{font-size:10px;font-weight:700;color:rgba(255,255,255,.28);text-transform:uppercase;letter-spacing:.9px;padding:8px 14px 3px;white-space:nowrap;overflow:hidden;transition:opacity .2s;}
.sidebar.collapsed .sidebar-sec-label{opacity:0;height:0;padding:0;overflow:hidden;margin:0;}
.sidebar-nav{flex:1;padding:2px 0;overflow-y:auto;overflow-x:hidden;}
.sidebar-nav::-webkit-scrollbar {width:4px;}
.sidebar-nav::-webkit-scrollbar-track {background:transparent;}
.sidebar-nav::-webkit-scrollbar-thumb {background:rgba(255, 255, 255, 0.15);border-radius:2px;}
.sidebar-nav::-webkit-scrollbar-thumb:hover {background:rgba(255, 255, 255, 0.3);}

.sb-nav-a{display:flex;align-items:center;gap:10px;padding:7px 14px;color:rgba(255,255,255,.55);font-family:inherit;font-size:13px;font-weight:500;transition:.15s;border-left:3px solid transparent;text-decoration:none;cursor:pointer;background:none;width:100%;text-align:left;}
.sb-nav-a:hover{background:rgba(255,255,255,.06);color:white;}
.sb-nav-a.active{background:rgba(201,168,76,.1);color:var(--gold,#c9a84c);border-left:3px solid var(--gold,#c9a84c);}
.sb-icon{font-size:15px;flex-shrink:0;width:20px;text-align:center;}
.sb-label{overflow:hidden;white-space:nowrap;transition:opacity .2s;}
.sidebar.collapsed .sb-label{display:none !important;}
.sb-pro{font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;background:var(--gold,#c9a84c);color:var(--navy,#0f2340);margin-left:auto;flex-shrink:0;}
.sidebar.collapsed .sb-pro, .sidebar.collapsed .sb-crown {display:none !important;}
.sb-nav-a.pro-locked{opacity:.38;cursor:not-allowed;}

/* Colapsado items alignment */
.sidebar.collapsed .sb-nav-a {padding:7px 0;justify-content:center;gap:0;border-left:3px solid transparent;}
.sidebar.collapsed .sb-nav-a.active {border-left:3px solid var(--gold,#c9a84c);}
.sidebar.collapsed .sb-icon {margin:0 auto;}

/* ── PRO FEATURE BADGE (botones) ── */
.pro-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:5px;border-radius:6px;font-weight:700;transition:all .2s;vertical-align:middle;}
.pro-badge.plan-free{font-size:10px;background:var(--gold,#c9a84c);color:var(--navy,#0f2340);padding:1px 5px;}
.pro-badge.plan-pro{font-size:13px;background:none;padding:0;opacity:.55;}
.sb-nav-a.pro-locked:hover{background:none;}
.sb-divider{height:1px;background:rgba(255,255,255,.07);margin:4px 10px;}

/* ── SIDEBAR BOTTOM ── */
.sidebar-bottom{padding:8px 14px;border-top:1px solid rgba(255,255,255,.08);}
.sidebar.collapsed .sidebar-bottom{padding:8px;display:flex;flex-direction:column;align-items:center;}
.sidebar.collapsed .sb-completeness {display:none !important;}

/* Bottom nav links */
.sb-bottom-links{display:flex;flex-direction:column;gap:1px;margin-bottom:4px;}
.sidebar.collapsed .sb-bottom-links{width:100%;align-items:center;}
.sb-bottom-a{display:flex;align-items:center;gap:8px;padding:5px 10px;color:rgba(255,255,255,.45);font-size:12px;font-weight:500;cursor:pointer;border-radius:6px;transition:.15s;background:none;border:none;width:100%;text-align:left;font-family:inherit;}
.sb-bottom-a:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);}
.sb-bottom-a .sb-icon{font-size:13px;}
.sidebar.collapsed .sb-bottom-a{justify-content:center;padding:5px 0;gap:0;}
.sidebar.collapsed .sb-bottom-a .sb-label{display:none !important;}
.sidebar.collapsed .sb-bottom-a .sb-icon{margin:0 auto;}

/* Dark mode toggle container */
.sb-dark-toggle-wrap{padding:4px 0;display:flex;align-items:center;justify-content:center;}
.sidebar.collapsed .sb-dark-toggle-wrap{padding:4px 0;width:100%;display:flex;justify-content:center;}

/* Collapsed dark mode toggle button */
.sidebar.collapsed .dm-toggle-btn {width:36px !important;height:36px !important;border-radius:50% !important;padding:0 !important;justify-content:center !important;}
.sidebar.collapsed .dm-toggle-btn .dm-icon {margin:0 !important;transform:none !important;opacity:1 !important;position:static !important;}
.sidebar.collapsed .dm-toggle-btn.light .dm-icon.moon {display:none !important;}
.sidebar.collapsed .dm-toggle-btn:not(.light) .dm-icon.sun {display:none !important;}
.sidebar.collapsed .dm-toggle-label,
.sidebar.collapsed .dm-stars,
.sidebar.collapsed .dm-clouds,
.sidebar.collapsed .dm-plane {display:none !important;}

/* Plan section */
.sb-plan-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.sb-plan-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase;}
.sb-plan-badge.free{background:rgba(255,255,255,.1);color:rgba(255,255,255,.55);}
.sb-plan-badge.pro{background:var(--gold,#c9a84c);color:var(--navy,#0f2340);}
.sb-plan-badge.premium{background:#7ec8ff;color:#0a1628;}
.sb-plan-name{font-size:11px;color:rgba(255,255,255,.4);white-space:nowrap;overflow:hidden;}
.sidebar.collapsed .sb-plan-name,.sidebar.collapsed .sb-upgrade{display:none;}
.sidebar.collapsed .plan-badge-static {display:none !important;}
.sb-upgrade{display:block;width:100%;padding:7px;background:var(--gold,#c9a84c);color:var(--navy,#0f2340);border:none;border-radius:7px;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;text-align:center;}
.sb-upgrade:hover{background:#b8943d;}

/* ── FREE/PRO TOGGLE (estilo carta-escandallos) ── */
.plan-toggle{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:4px 12px;cursor:pointer;transition:.18s;margin-bottom:8px;}
.plan-toggle:hover{background:rgba(255,255,255,.15);}
.plan-toggle-label{font-size:11px;color:rgba(255,255,255,.5);font-weight:600;}
.plan-toggle-pill{font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px;text-transform:uppercase;transition:.2s;}
.plan-toggle-pill.free{background:rgba(255,255,255,.15);color:rgba(255,255,255,.7);}
.plan-toggle-pill.pro{background:var(--gold,#c9a84c);color:var(--navy,#0f2340);}
.plan-toggle-pill.premium{background:#7ec8ff;color:#0a1628;}
.plan-toggle-switch{width:32px;height:18px;border-radius:9px;background:rgba(255,255,255,.2);position:relative;transition:.2s;}
.plan-toggle-switch.on{background:var(--gold,#c9a84c);}
.plan-toggle-switch::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:white;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.plan-toggle-switch.on::after{left:16px;}

/* ── TOPBAR ── */
.topbar{background:var(--navy,#0f2340);padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:50;}
.topbar-brand{font-family:'Playfair Display',serif;font-size:18px;color:var(--gold,#c9a84c);font-weight:700;}
.topbar-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
.tb-logo-img{height:24px;width:auto;max-width:140px;object-fit:contain;display:block;}
.tb-logo-fallback{color:#fff;font-size:14px;font-weight:600;}
.tb-logo-fallback strong{font-weight:800;}
.topbar-right{display:flex;align-items:center;gap:12px;}
.topbar-resto{display:flex;align-items:center;gap:8px;cursor:pointer;}
.topbar-avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;color:var(--gold,#c9a84c);font-size:13px;font-weight:700;overflow:hidden;flex-shrink:0;}
.topbar-avatar img{width:100%;height:100%;object-fit:cover;}
.topbar-resto-name{color:rgba(255,255,255,.7);font-size:12px;font-weight:500;}
.topbar-resto-plan{font-size:9px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.5px;}
.plan-badge{background:var(--gold,#c9a84c);color:var(--navy,#0f2340);font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase;}

/* ── DARK MODE TOGGLE (avión animado) ── */
.dm-toggle-btn{
  width:100%;height:36px;border-radius:18px;border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg,#1a3354 0%,#0f2340 100%);
  cursor:pointer;position:relative;overflow:hidden;transition:all .5s ease;
  display:flex;align-items:center;padding:0 6px;
}
.dm-toggle-btn.light{
  background:linear-gradient(180deg,#87CEEB 0%,#5DA9E9 100%);
  border-color:rgba(255,255,255,.3);
}
.dm-toggle-btn .dm-icon{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;transition:all .4s cubic-bezier(.68,-.55,.27,1.55);
  position:relative;z-index:2;flex-shrink:0;
}
.dm-toggle-btn .dm-icon.moon{
  background:rgba(201,168,76,.2);transform:translateX(0);
}
.dm-toggle-btn.light .dm-icon.moon{
  transform:translateX(calc(100% + 160px));opacity:0;
}
.dm-toggle-btn .dm-icon.sun{
  background:rgba(255,200,0,.3);position:absolute;right:6px;opacity:0;transform:scale(.5);
}
.dm-toggle-btn.light .dm-icon.sun{
  opacity:1;transform:scale(1);
}
.dm-toggle-label{
  font-size:10px;font-weight:600;color:rgba(255,255,255,.5);
  margin-left:8px;white-space:nowrap;transition:.3s;
}
.dm-toggle-btn.light .dm-toggle-label{color:rgba(0,0,0,.5);}
.sidebar.collapsed .dm-toggle-label{display:none;}
/* Stars in dark mode */
.dm-stars{position:absolute;inset:0;pointer-events:none;transition:opacity .4s;}
.dm-toggle-btn.light .dm-stars{opacity:0;}
.dm-star{position:absolute;width:2px;height:2px;background:white;border-radius:50%;animation:twinkle 2s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.3}50%{opacity:1}}
/* Clouds in light mode */
.dm-clouds{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;}
.dm-toggle-btn.light .dm-clouds{opacity:1;}
.dm-cloud{position:absolute;background:rgba(255,255,255,.6);border-radius:10px;height:6px;}
/* Plane */
.dm-plane{
  position:absolute;font-size:12px;top:50%;transform:translateY(-50%) translateX(-30px);
  transition:transform .6s cubic-bezier(.68,-.55,.27,1.55);opacity:0;
}
.dm-toggle-btn.transitioning .dm-plane{
  opacity:1;transform:translateY(-50%) translateX(120px);
}

/* ── HELP MODAL ── */
.help-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2000;align-items:center;justify-content:center;padding:20px;}
.help-overlay.open{display:flex;}
.help-modal{background:white;border-radius:14px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 24px rgba(15,35,64,.15);}
.help-mhead{background:var(--navy,#0f2340);color:white;padding:18px 22px;border-radius:14px 14px 0 0;display:flex;align-items:center;justify-content:space-between;}
.help-mhead h2{font-family:'Playfair Display',serif;font-size:18px;color:var(--gold,#c9a84c);}
.help-mclose{background:none;border:none;color:rgba(255,255,255,.6);font-size:20px;cursor:pointer;}
.help-mclose:hover{color:white;}
.help-mbody{padding:22px;}
.help-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
.help-field label{font-size:11px;font-weight:700;color:var(--gray,#6b7280);text-transform:uppercase;letter-spacing:.5px;}
.help-field input,.help-field select,.help-field textarea{padding:9px 12px;border:1.5px solid #e5e7eb;border-radius:6px;font-size:14px;font-family:'DM Sans',sans-serif;}
.help-field input:focus,.help-field select:focus,.help-field textarea:focus{outline:none;border-color:var(--navy,#0f2340);}
.help-field .help-hint{font-size:12px;color:var(--gray,#6b7280);}
.help-field textarea{resize:vertical;min-height:100px;}
.help-char-count{font-size:11px;color:var(--gray,#6b7280);text-align:right;}
.help-char-count.ok{color:#059669;}
.help-char-count.warn{color:#dc2626;}
.help-photo-area{border:2px dashed #e5e7eb;border-radius:8px;padding:20px;text-align:center;cursor:pointer;transition:.15s;color:var(--gray,#6b7280);font-size:13px;}
.help-photo-area:hover{border-color:var(--navy,#0f2340);background:rgba(15,35,64,.02);}
.help-photo-area.has-file{border-color:#059669;background:rgba(5,150,105,.05);color:#059669;}
.help-mfooter{padding:14px 22px;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end;gap:10px;}
.help-btn{padding:9px 18px;border-radius:6px;font-size:14px;font-family:inherit;font-weight:600;cursor:pointer;border:none;transition:.18s;}
.help-btn-cancel{background:white;color:var(--navy,#0f2340);border:1.5px solid #e5e7eb;}
.help-btn-cancel:hover{border-color:var(--navy,#0f2340);}
.help-btn-send{background:var(--navy,#0f2340);color:white;}
.help-btn-send:hover{background:#1a3a5c;}
.help-btn-send:disabled{opacity:.5;cursor:not-allowed;}

/* Help thank you */
.help-thanks{text-align:center;padding:30px 20px;}
.help-thanks .ht-icon{font-size:48px;margin-bottom:12px;}
.help-thanks h3{font-family:'Playfair Display',serif;font-size:20px;color:var(--navy,#0f2340);margin-bottom:8px;}
.help-thanks p{font-size:14px;color:var(--gray,#6b7280);line-height:1.6;margin-bottom:18px;}
.help-wa-btn{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:white;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;transition:.2s;border:none;cursor:pointer;font-family:inherit;}
.help-wa-btn:hover{background:#1da851;}

/* ── SUPERUSER PIN ── */
.pin-overlay{position:fixed;inset:0;background:rgba(5,12,26,.96);z-index:9999;display:none;align-items:center;justify-content:center;}
.pin-overlay.open{display:flex;}
.pin-box{background:var(--navy,#0f2340);border:1px solid rgba(201,168,76,.3);border-radius:20px;padding:40px 36px;max-width:360px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.pin-icon{font-size:48px;margin-bottom:14px;}
.pin-title{font-family:'Playfair Display',serif;font-size:22px;color:var(--gold,#c9a84c);margin-bottom:6px;}
.pin-subtitle{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:22px;line-height:1.5;}
.pin-dots{display:flex;justify-content:center;gap:12px;margin-bottom:22px;}
.pin-dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:transparent;transition:.15s;}
.pin-dot.filled{background:var(--gold,#c9a84c);border-color:var(--gold,#c9a84c);}
.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:240px;margin:0 auto 14px;}
.pin-key{padding:14px;border:1.5px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.05);color:white;font-size:18px;font-family:inherit;font-weight:600;cursor:pointer;transition:.15s;}
.pin-key:hover{background:rgba(255,255,255,.12);}
.pin-key:active{transform:scale(.93);}
.pin-key.zero{grid-column:2;}
.pin-key.del{background:rgba(192,57,43,.12);border-color:rgba(192,57,43,.25);color:#c0392b;}
.pin-error{color:#c0392b;font-size:13px;margin-top:8px;min-height:18px;font-weight:500;}
.pin-su-bar{display:none;background:linear-gradient(90deg,#7c3aed,#a855f7);padding:6px 16px;align-items:center;justify-content:space-between;font-size:12px;color:white;font-weight:600;}
.pin-su-bar.visible{display:flex;}
.pin-su-bar .su-plan-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;}
.pin-su-bar .su-switch{width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,.3);position:relative;transition:.2s;}
.pin-su-bar .su-switch.on{background:#c9a84c;}
.pin-su-bar .su-switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:white;transition:.2s;}
.pin-su-bar .su-switch.on::after{left:18px;}

/* ── DARK MODE VARIABLES ── */
body.dark-mode{
  --navy:#0a1628;--cream:#1a1a2e;--cream2:#242438;
  --gray-light:#2d2d44;--gray:#9ca3af;
  --shadow:0 2px 12px rgba(0,0,0,.3);--shadow-md:0 4px 24px rgba(0,0,0,.4);
  color:#efeeec;
}
body.dark-mode .main-content{background:var(--cream);color:#efeeec;}
body.dark-mode .topbar{background:#0a1628;}
body.dark-mode .stat-card:not(.gold):not(.green):not(.red):not(.orange) .v{color:#efeeec;}
/* ── TOAST de guardado ── */
.sb-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(18px);background:#233845;color:#fff;padding:13px 18px;border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.45);font-family:'DM Sans',sans-serif;font-size:13.5px;line-height:1.45;max-width:92vw;z-index:11000;opacity:0;transition:opacity .35s ease,transform .35s ease;pointer-events:none;text-align:center;}
.sb-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.sb-toast b{color:#e8c96a;font-weight:600;}
body.dark-mode .stat-card,
body.dark-mode .card,
body.dark-mode .accordion,
body.dark-mode .kpi-card,
body.dark-mode .ing-table,
body.dark-mode .hist-table-wrap,
body.dark-mode .dash-bar,
body.dark-mode table tbody td,
body.dark-mode .modal{background:#1e1e32;color:#e0e0e0;border-color:#2d2d44;}
body.dark-mode thead{background:#0a1628;}
body.dark-mode .field input,body.dark-mode .field select,body.dark-mode .field textarea,
body.dark-mode .help-field input,body.dark-mode .help-field select,body.dark-mode .help-field textarea,
body.dark-mode .fsel,body.dark-mode .search-wrap input,
body.dark-mode .field-group input,body.dark-mode .field-group select{
  background:#242438;color:#e0e0e0;border-color:#3d3d54;
}
body.dark-mode tr:hover td{background:#242438;}
body.dark-mode .ing-row:hover{background:#242438;}
body.dark-mode .cat-body{background:#1e1e32;}
body.dark-mode .cat-header{background:#0a1628;}
body.dark-mode .col-headers{background:#242438;}
body.dark-mode .mhead,.help-mhead{background:#0a1628;}
/* ══════════════════════════════════════════════════════════════
   MÓVIL ≤600px — Sidebar derecha como overlay + hamburger
   ══════════════════════════════════════════════════════════════ */

/* Hamburger: visible en móvil, oculto en desktop */
.sb-hamburger:hover { background: rgba(255,255,255,.1); }
.hb-line {
  display: block;
  width: 20px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease, width .3s ease;
  transform-origin: center;
}
/* Animación → X */
.sb-hamburger.open .hb-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sb-hamburger.open .hb-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.sb-hamburger.open .hb-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay oscuro detrás del sidebar */
.sb-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 998;
  -webkit-tap-highlight-color: transparent;
}
.sb-mobile-overlay.open { display: block; }

@media (max-width: 900px) {
  /* Prevenir scroll horizontal */
  html, body { max-width: 100vw; }

  

  /* Sidebar: oculto a la derecha, slide-in como overlay */
  .sidebar {
    left: auto !important;
    right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom)) !important;
    transform: translateX(110%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    width: 280px !important;
    z-index: 999;
    box-shadow: -4px 0 24px rgba(0,0,0,.35);
    /* Scroll cuando hay muchos items */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar.mobile-open { transform: translateX(0) !important; }

  /* Anular estado collapsed en móvil */
  .sidebar.collapsed { width: 280px !important; transform: translateX(110%); }
  .sidebar.collapsed.mobile-open { transform: translateX(0) !important; }
  .sidebar.collapsed .sidebar-brand { opacity: 1 !important; width: auto !important; flex: 1 !important; }
  .sidebar.collapsed .sb-label { opacity: 1 !important; width: auto !important; }
  .sidebar.collapsed .sidebar-sec-label { opacity: 1 !important; height: auto !important; padding: 12px 14px 5px !important; }
  .sidebar.collapsed .sb-pro { display: inline !important; }
  .sidebar.collapsed .sidebar-bottom { padding: 10px 14px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
  .sidebar.collapsed .sb-bottom-a .sb-label { opacity: 1 !important; width: auto !important; }

  /* Main content: ancho completo, sin margen */
  .main-content { margin-left: 0 !important; max-width: 100vw; overflow-x: hidden; }

  /* Ocultar botón colapso (☰ interior) — solo tiene sentido en PC */
  .sidebar-toggle { display: none !important; }

  /* Nav: sin flex expansivo para evitar hueco grande */
  .sidebar-nav { flex: none !important; overflow-y: visible !important; }

  /* Bottom: siempre visible, ajustado para quedar sobre la botonera móvil */
  .sidebar-bottom {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--navy, #0f2340) !important;
    padding-bottom: 14px !important;
    z-index: 2;
  }

  
  .topbar { padding: 8px 56px 8px 14px; }
  .topbar-brand { font-size: 15px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-resto-name { display: block; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-resto-plan { display: block; }

  /* Tablas internas: scroll horizontal sin arrastrar página.
     :not(.history-table) evita duplicar el contenedor de scroll en tablas que
     ya llevan su propio wrapper dedicado (p. ej. Costes Fijos en
     escandallo-app.html) — dos contenedores de scroll horizontal anidados
     hacían que el gesto se parara a mitad de camino y hubiera que deslizar
     dos veces para llegar al final. */
  .main-content table:not(.history-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* Grids a 1 columna */
  .main-content .grid { grid-template-columns: 1fr !important; }
}



/* ── CUSTOM TAB & LOGO IMPROVEMENTS ── */

/* Ocultar barra de desplazamiento en los menús de pestañas (tabs) internos */
.nav-tabs,
.internal-tabs-nav,
.int-tabs-bar {
  -ms-overflow-style: none !important;  /* IE y Edge */
  scrollbar-width: none !important;  /* Firefox */
}
.nav-tabs::-webkit-scrollbar,
.internal-tabs-nav::-webkit-scrollbar,
.int-tabs-bar::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari y Opera */
}

/* Ocultar logo del topbar cuando el sidebar está visible y expandido en pantallas grandes */
.topbar-logo {
  display: none;
}
.sidebar.collapsed ~ .main-content .topbar-logo {
  display: flex;
}
@media (max-width: 768px) {
  .topbar-logo {
    display: flex;
  }
}

/* ── TRANSICIÓN DE PÁGINA (FADE IN/OUT) ── */
body {
  opacity: 0;
  transition: opacity 0.18s ease-in-out;
  background-color: var(--cream, #faf8f3);
}
body.page-ready {
  opacity: 1;
}
body.page-leaving {
  opacity: 0;
}

/* ── BOTONERA INFERIOR (MÓVIL ONLY) ── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  height: calc(56px + env(safe-area-inset-bottom));
  background: var(--navy, #0f2340);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: none; /* Oculto en escritorio */
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 9999;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}

.bottom-nav-item:hover,
.bottom-nav-item.active {
  color: var(--gold, #c9a84c);
}

.bottom-nav-icon {
  font-size: 18px;
  margin-bottom: 2px;
}

@media (max-width: 900px) {
  .bottom-nav {
    display: flex; /* Mostrar en móvil */
  }
  
  /* Evitar que la botonera tape el contenido al hacer scroll */
  .main-content {
    padding-bottom: 56px !important;
    padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
  }

  /* Desplazar chatbot flotante por encima de la botonera inferior */
  #eb-launcher, 
  #eb-halo-rings {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
  
  .eb-s-balloon {
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
  
  #eb-panel {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    max-height: calc(100vh - 90px - env(safe-area-inset-bottom)) !important;
  }
}

/* ── OPTIMIZACIONES DE COMPORTAMIENTO MÓVIL (TÁCTIL) ── */

/* 1. Eliminar recuadro azul de selección al hacer tap en móviles */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 2. Evitar resaltados y selecciones de texto accidentales en botones e iconos */
button, 
a, 
.btn, 
.vtbtn, 
.int-tab, 
.bottom-nav-item, 
.sb-nav-a, 
.sb-bottom-a,
.sidebar-toggle,
.sb-hamburger {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 3. Feedback táctil inmediato (efecto al presionar) */
.btn:active, 
.vtbtn:active,
.int-tab:active, 
.bottom-nav-item:active, 
.sb-nav-a:active,
.sb-bottom-a:active,
.sidebar-toggle:active,
.sb-hamburger:active {
  transform: scale(0.96);
  opacity: 0.88;
  transition: transform 0.08s ease;
}

/* 4. Bloquear el rebote del cuerpo del navegador (overscroll) */
body {
  overscroll-behavior-y: none;
}
.main-content {
  overscroll-behavior-y: clamp;
  -webkit-overflow-scrolling: touch;
}

/* 5. Modales estilo Bottom Sheet (deslizables desde abajo) en móvil */
@media (max-width: 900px) {
  .overlay,
  #helpOverlay,
  #pinOverlay,
  #sbUpgradeModal {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    /* Reserva el hueco de la botonera inferior fija (.bottom-nav) para que el
       pie del modal (botones Guardar/Anterior, etc.) nunca quede tapado. */
    padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
  }

  .modal, 
  .help-box, 
  .pin-box, 
  .upgrade-box,
  #sbUpgradeModal > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 85vh !important;
    transform: translateY(0) !important;
    animation: sbBottomSheetSlideUp 0.24s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    box-shadow: 0 -8px 32px rgba(15, 35, 64, 0.25) !important;
  }
}

@keyframes sbBottomSheetSlideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}