/* ═══════════════════════════════════════
   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;}
.sidebar.collapsed{width:60px;}
.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:16px 14px 12px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:8px;min-height:56px;}
.sidebar-brand{font-family:'Playfair Display',serif;font-size:15px;color:var(--gold,#c9a84c);font-weight:700;white-space:nowrap;overflow:hidden;transition:opacity .2s;flex:1;}
.sidebar.collapsed .sidebar-brand{opacity:0;width:0;flex:0;}
.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:12px 14px 5px;white-space:nowrap;overflow:hidden;transition:opacity .2s;}
.sidebar.collapsed .sidebar-sec-label{opacity:0;height:0;padding:0;overflow:hidden;}
.sidebar-nav{flex:1;padding:4px 0;overflow-y:auto;}
.sb-nav-a{display:flex;align-items:center;gap:10px;padding:9px 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{opacity:0;width:0;}
.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{display:none;}
.sb-nav-a.pro-locked{opacity:.38;cursor:not-allowed;}
/* ── 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:10px 14px;border-top:1px solid rgba(255,255,255,.08);}
.sidebar.collapsed .sidebar-bottom{padding:8px;display:flex;flex-direction:column;align-items:center;}

/* Bottom nav links */
.sb-bottom-links{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
.sb-bottom-a{display:flex;align-items:center;gap:8px;padding:7px 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 .sb-label{opacity:0;width:0;}

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

/* 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-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;}
.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-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-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);
}
body.dark-mode .main-content{background:var(--cream);}
body.dark-mode .topbar{background:#0a1628;}
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;}
body.dark-mode h1,body.dark-mode .page-header h1,body.dark-mode .kpi-value,body.dark-mode .stat-card .v{color:#e0e0e0;}
body.dark-mode .topbar-brand{color:var(--gold,#c9a84c);}

/* Dark mode — text & general elements */
body.dark-mode,
body.dark-mode .main,
body.dark-mode .dash-body,
body.dark-mode .page-header h1,
body.dark-mode .page-header p,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode p,
body.dark-mode label,
body.dark-mode span,
body.dark-mode td,
body.dark-mode th,
body.dark-mode .ing-name,
body.dark-mode .cat-tag,
body.dark-mode .price-val,
body.dark-mode .merma-val,
body.dark-mode .dish-name,
body.dark-mode .dish-cat,
body.dark-mode .kpi-val,
body.dark-mode .kpi-lbl,
body.dark-mode .stat-card .l,
body.dark-mode .section-title,
body.dark-mode .prop-card-title,
body.dark-mode .topbar-title,
body.dark-mode .card-title,
body.dark-mode .acc-name,
body.dark-mode .acc-margin,
body.dark-mode .ri-label,
body.dark-mode .ri-value,
body.dark-mode .detail-name,
body.dark-mode .fc-badge,
body.dark-mode .page-title,
body.dark-mode .page-sub,
body.dark-mode .field-note,
body.dark-mode .hint,
body.dark-mode .field .hint,
body.dark-mode .col-headers{
  color:#e0e0e0;
}
body.dark-mode .stat-card .v,
body.dark-mode .kpi-value,
body.dark-mode .r-value,
body.dark-mode .result-card .r-value{color:#e0e0e0;}
body.dark-mode .stat-card.green .v{color:#6ee7a0;}
body.dark-mode .stat-card.red .v{color:#f87171;}
body.dark-mode .stat-card.gold .v{color:#c9a84c;}
body.dark-mode .stat-card.orange .v{color:#fbbf6e;}
body.dark-mode .kpi-card.ok .kpi-val{color:#6ee7a0;}
body.dark-mode .kpi-card.warn .kpi-val{color:#fbbf6e;}
body.dark-mode .kpi-card.bad .kpi-val{color:#f87171;}

/* Dark mode — borders & subtle elements */
body.dark-mode .prop-card,
body.dark-mode .dish-card,
body.dark-mode .family-card,
body.dark-mode .pending-card,
body.dark-mode .alert-bar,
body.dark-mode .pro-teaser,
body.dark-mode .breakdown,
body.dark-mode .bar-wrap,
body.dark-mode .result-card,
body.dark-mode .proration-box{
  background:#1e1e32;border-color:#2d2d44;color:#e0e0e0;
}

/* Dark mode — buttons keep legibility */
body.dark-mode .btn-secondary{background:#1e1e32;color:#e0e0e0;border-color:#3d3d54;}
body.dark-mode .btn-secondary:hover{border-color:#c9a84c;}

/* Dark mode — pro teaser */
body.dark-mode .pro-blurred{filter:blur(4px) brightness(0.5);}

/* Dark mode — dropdowns and selects */
body.dark-mode select,
body.dark-mode .fsel{background:#242438;color:#e0e0e0;border-color:#3d3d54;}

/* Dark mode — ing-row and cat sections */
body.dark-mode .cat-header{background:#0a1628;}
body.dark-mode .cat-body,
body.dark-mode .ing-row{background:#1e1e32;color:#e0e0e0;}
body.dark-mode .ing-row:hover{background:#282845;}
body.dark-mode .col-headers{background:#151528;}

/* Dark mode — overlay modals */
body.dark-mode .modal,
body.dark-mode .help-modal{background:#1e1e32;color:#e0e0e0;}
body.dark-mode .mbody,
body.dark-mode .help-mbody{color:#e0e0e0;}
body.dark-mode .mfooter,
body.dark-mode .help-mfooter{border-color:#2d2d44;}

/* ── SIDEBAR COLLAPSED — hide overflow ── */
.sidebar.collapsed .plan-toggle{display:none;}
.sidebar.collapsed .sb-bottom-links .sb-label{display:none;}
.sidebar.collapsed .dm-toggle-label{display:none;}
.sidebar.collapsed .dm-toggle-btn{width:36px;height:36px;border-radius:50%;padding:0;justify-content:center;}
.sidebar.collapsed .sb-dark-toggle-wrap{padding:4px 0;display:flex;justify-content:center;}
.sidebar.collapsed .sb-bottom-links{align-items:center;}
.sidebar.collapsed .sb-bottom-a{justify-content:center;padding:7px;}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);position:fixed;z-index:200;}
  .sidebar.mobile-open{transform:translateX(0);}
  .main-content{margin-left:0!important;}
}