:root{
  --bg:#F8F7FC; --surface:#FFFFFF; --ink:#241C36; --ink-muted:#6B6084;
  --brand-dark:#241A42; --brand:#6D4FE0; --pink:#EC4899; --accent:#E8A33D; --accent-ink:#3A2609;
  --line:#E7E3F2; --danger:#B5482E; --ok:#1E8E5A;
  --grad1:#FDEEF3; --grad2:#F1E7FB; --grad3:#FFF3E8;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15121F; --surface:#1E1930; --ink:#EDEAF7; --ink-muted:#A79BC4;
    --brand-dark:#120E1E; --brand:#8B72F0; --line:#332B4D;
  }
}
:root[data-theme="dark"]{
  --bg:#15121F; --surface:#1E1930; --ink:#EDEAF7; --ink-muted:#A79BC4;
  --brand-dark:#120E1E; --brand:#8B72F0; --line:#332B4D;
}
*{box-sizing:border-box}
html{scroll-padding-top:var(--safe-t)}
body{margin:0;font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);padding-top:var(--safe-t);padding-bottom:var(--safe-b)}
h1,h2,h3,.brand{font-family:'Space Grotesk',sans-serif}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}
a{color:inherit}

/* ---------- TOP NAV (landing) ---------- */
.topnav{display:flex;align-items:center;justify-content:space-between;padding:18px 40px;background:#150F26}
.topnav .logo-img{height:40px;display:block}
.topnav .actions{display:flex;align-items:center;gap:12px}
.link-plain{font-size:14px;font-weight:600;text-decoration:none;color:var(--ink-muted)}
.link-plain:hover{color:var(--ink)}

.btn-pill{border-radius:999px;padding:11px 20px;font-size:13px;font-weight:600;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;line-height:1}
.btn-pill-outline{background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff}
.btn-pill-outline:hover{background:rgba(255,255,255,.08)}
.btn-pill-gradient{background:linear-gradient(90deg,var(--pink),var(--accent));color:#fff}
.btn-pill-gradient:hover{filter:brightness(1.05)}
.btn-pill-solid{background:var(--brand);color:#fff}
.btn-pill-solid:hover{background:#5A3DC9}

/* ---------- HERO / LANDING ---------- */
.hero{background:linear-gradient(135deg,var(--grad1) 0%,var(--grad2) 55%,var(--grad3) 100%);padding:64px 40px;text-align:center}
.hero h1{font-size:38px;line-height:1.25;font-weight:600;max-width:680px;margin:0 auto;color:#241C36}
.hero h1 .grad{background:linear-gradient(90deg,var(--brand),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#5B4E78;max-width:460px;margin:14px auto 0;line-height:1.6}

.industries{max-width:1000px;margin:40px auto 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.industry-tile{border-radius:14px;padding:18px 16px;text-align:left;color:#fff;min-height:80px;display:flex;align-items:flex-end}
.industry-tile b{font-size:14px}

/* ---------- MODALES (login / registro) ---------- */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,6,20,.6);align-items:center;justify-content:center;padding:20px;z-index:50}
.modal-overlay.open{display:flex}
.modal-card{position:relative;width:100%;max-width:380px;background:var(--surface);border-radius:16px;padding:32px;border:1px solid var(--line);max-height:90vh;overflow-y:auto}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;font-size:22px;color:var(--ink-muted);cursor:pointer;line-height:1;padding:4px}

/* ---------- BANNER MEMBRESÍA VENCIDA ---------- */
.banner-vencido{display:none;background:#3A1414;color:#FFD9CD;text-align:center;padding:11px 16px;font-size:13px;font-weight:600}
.banner-vencido a{color:#fff;text-decoration:underline}

/* ---------- SECCIONES PROMOCIONALES (landing) ---------- */
.section{padding:60px 40px;max-width:1080px;margin:0 auto}
.section.alt{max-width:none;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section.alt > .section-inner{max-width:1080px;margin:0 auto}
.section-head{text-align:center;max-width:560px;margin:0 auto 36px}
.section-head h2{font-size:26px;margin:0 0 10px;font-weight:600}
.section-head p{color:var(--ink-muted);font-size:14px;line-height:1.65;margin:0}

.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.feature-card{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--surface)}
.feature-card .tag{display:block;width:28px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--brand),var(--pink));margin-bottom:16px}
.feature-card h3{font-size:15px;margin:0 0 8px}
.feature-card p{font-size:13px;color:var(--ink-muted);line-height:1.65;margin:0}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px}
.step .num{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;background:linear-gradient(90deg,var(--brand),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px;display:block}
.step h3{font-size:15px;margin:0 0 6px}
.step p{font-size:13px;color:var(--ink-muted);line-height:1.65;margin:0}

.cta-band{background:linear-gradient(120deg,var(--brand-dark),#3A2A66);border-radius:20px;margin:0 40px 64px;padding:48px 32px;text-align:center;color:#fff}
.cta-band h2{font-size:24px;margin:0 0 10px;font-weight:600}
.cta-band p{color:#CFC3EE;font-size:14px;max-width:420px;margin:0 auto 22px;line-height:1.6}
.cta-band .btn-pill{padding:13px 26px;font-size:14px}

.site-footer{padding:28px 40px;text-align:center;color:var(--ink-muted);font-size:12px;border-top:1px solid var(--line)}
.site-footer a{color:var(--ink-muted)}

@media (max-width:760px){
  .section, .cta-band{padding-left:20px;padding-right:20px}
  .cta-band{margin-left:20px;margin-right:20px}
}

/* ---------- LOGIN SECTION ---------- */
.login-wrap{display:flex;justify-content:center;padding:56px 24px 80px}
.login-card{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:32px}
.login-card h2{font-size:22px;margin:0 0 6px}
.login-card .sub{color:var(--ink-muted);font-size:14px;margin:0 0 26px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--ink-muted)}
.field input,.field select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:14px}
.field input:focus,.field select:focus{outline:2px solid var(--brand);outline-offset:1px}
.error-text{color:var(--danger);font-size:13px;margin:-8px 0 14px;display:none}
.btn{border:none;border-radius:8px;padding:12px 18px;font-size:14px;font-weight:600;width:100%}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:#5A3DC9}
.btn-primary:disabled{opacity:.6;cursor:default}
.btn-accent{background:linear-gradient(90deg,var(--brand),var(--pink));color:#fff}
.btn-accent:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.divider{display:flex;align-items:center;gap:10px;color:var(--ink-muted);font-size:12px;margin:20px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.advisor{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;color:var(--brand);text-decoration:none;font-size:14px;font-weight:600}
.advisor:hover{text-decoration:underline}

/* ---------- DASHBOARD SHELL ---------- */
.shell{display:flex;width:100%;min-height:100vh}
.sidebar{width:230px;background:var(--brand-dark);color:#fff;padding:24px 16px;display:flex;flex-direction:column;gap:28px;flex-shrink:0}
.sidebar .brand{color:#fff;font-size:20px;font-weight:700;display:flex;align-items:center;gap:9px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:block;background:none;border:none;color:#CFC3EE;text-align:left;padding:10px 12px;border-radius:7px;font-size:14px;border-left:3px solid transparent;text-decoration:none}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav a.active{background:rgba(255,255,255,.1);color:#fff;border-left-color:var(--pink);font-weight:600}
.sidebar-foot{margin-top:auto;font-size:12px;color:#8F80B8}
.main-col{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;border-bottom:1px solid var(--line);background:var(--surface)}
.topbar .who{display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.who-text{line-height:1.3}
.who-text b{font-size:14px}
.who-text span{font-size:12px;color:var(--ink-muted)}
.topbar-actions{display:flex;gap:10px;align-items:center}
.pill-btn{border:none;border-radius:20px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer}
.pill-btn.solid{background:linear-gradient(90deg,var(--brand),var(--pink));color:#fff}
.pill-btn.outline{background:transparent;border:1px solid var(--line);color:var(--ink)}
.logout{background:none;border:1px solid var(--line);border-radius:7px;padding:8px 14px;font-size:13px;color:var(--ink)}
.main{padding:32px;overflow-x:auto}
.main h1{font-size:22px;margin:0 0 4px}
.main .lead{color:var(--ink-muted);font-size:14px;margin:0 0 28px}

/* ---------- MODULE CARDS (usuario) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card{border:1px solid var(--line);border-radius:10px;padding:18px;background:var(--surface)}
.icon-circle{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:12px}
.card h3{font-size:15px;margin:0 0 6px}
.card p{font-size:13px;color:var(--ink-muted);margin:0 0 14px;line-height:1.5}
.badge{display:inline-block;font-size:11px;font-weight:600;padding:4px 9px;border-radius:20px;background:var(--bg);color:var(--ink-muted);border:1px solid var(--line)}
.badge.ok{background:#E6F5EC;color:var(--ok);border-color:#CDEBD9}
.badge.off{background:#E9E6F2;color:#4B4266;border-color:#D6D0E6}
.badge.warn{background:#FDECE7;color:var(--danger);border-color:#F7D2C6}

/* ---------- ADMIN ---------- */
.row-between{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:16px;flex-wrap:wrap}
.btn-inline{width:auto;padding:10px 16px}

.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.stat-num{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;color:var(--ink)}
.stat-label{font-size:12px;color:var(--ink-muted);font-weight:600}
.stat-card.stat-ok .stat-num{color:var(--ok)}
.stat-card.stat-warn .stat-num{color:var(--danger)}
.stat-card.stat-off .stat-num{color:#7A6FA0}

.table-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(36,28,54,.04)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--ink-muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;background:var(--bg)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--bg)}
td.actions{white-space:nowrap;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.link-btn{background:none;border:none;color:var(--brand);font-weight:600;font-size:13px;padding:6px 10px;border-radius:7px}
.link-btn:hover{background:var(--bg);text-decoration:none}
.link-btn.danger{color:var(--danger)}
.days-input{width:56px;padding:6px 7px;border:1px solid var(--line);border-radius:6px;font-size:13px}

.quick-days{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.chip-btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:20px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer}
.chip-btn:hover{background:var(--bg)}
.custom-days-row{display:flex;gap:8px;margin-top:6px}
.custom-days-row input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:14px}

@media (max-width:760px){
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .table-card{overflow-x:auto}
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;max-width:640px}
.form-grid .full{grid-column:1/-1}
.form-actions{display:flex;gap:10px;margin-top:8px;max-width:640px}
.form-actions .btn{width:auto;padding:11px 22px}
.hint{font-size:12px;color:var(--ink-muted);margin-top:-10px;margin-bottom:2px}
.empty-state{padding:40px 20px;text-align:center;color:var(--ink-muted);font-size:14px}

/* ---------- SUBMENÚ (sidebar) ---------- */
.nav-group{display:flex;flex-direction:column}
.nav-group-head{display:flex;align-items:center;justify-content:space-between;background:none;border:none;color:#CFC3EE;text-align:left;padding:10px 12px;border-radius:7px;font-size:14px;cursor:pointer}
.nav-group-head:hover{background:rgba(255,255,255,.06)}
.nav-chev{transition:transform .15s;font-size:12px}
.nav-group.open .nav-chev{transform:rotate(180deg)}
.nav-group-body{display:none;flex-direction:column;padding-left:14px;border-left:1px solid rgba(255,255,255,.12);margin-left:14px}
.nav-group.open .nav-group-body{display:flex}
.nav-group-body a{padding:8px 12px;font-size:13px}

/* ---------- MÓDULOS (inventario / recetas / servicios / registros) ---------- */
.mod-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.mod-filters{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.mod-filters input[type="search"],.mod-filters select{padding:10px 13px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:14px}
.mod-filters input[type="search"]{flex:1;min-width:180px}
.tool-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}

/* Campos de monto doble moneda (USD/Bs) */
.money-field .money-input-row{display:flex;gap:8px}
.money-field .money-monto{flex:1;padding:11px 13px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:14px}
.money-field .money-moneda{width:76px;padding:11px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:13px}
.money-field .money-equiv{display:block;margin-top:4px;font-size:12px;color:var(--ink-muted)}
.money-sub{color:var(--ink-muted);font-size:12px}

/* Secciones colapsables (Variaciones, Campos Avanzados, Información de pago) */
.collapse{border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden}
.collapse-head{width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--bg);border:none;padding:13px 16px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.collapse .chev{transition:transform .15s;color:var(--ink-muted)}
.collapse.open .chev{transform:rotate(180deg)}
.collapse-body{display:none;padding:16px}
.collapse.open .collapse-body{display:block}

/* Tabla chiquita dentro de modales (variaciones, items de receta) */
.mini-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:13px}
.mini-table th,.mini-table td{text-align:left;padding:8px;border-bottom:1px solid var(--line)}
.mini-table input{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:6px;font-size:13px;background:var(--surface);color:var(--ink)}
.btn-round-add{width:30px;height:30px;border-radius:50%;border:1px dashed var(--brand);background:none;color:var(--brand);font-size:16px;cursor:pointer}

/* Autocompletar de items (Recetas/Combos) */
.autocomplete-list{display:none;border:1px solid var(--line);border-radius:8px;margin-top:6px;max-height:180px;overflow-y:auto;background:var(--surface)}
.autocomplete-item{padding:9px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line)}
.autocomplete-item:last-child{border-bottom:none}
.autocomplete-item:hover{background:var(--bg)}
.muted-inline{color:var(--ink-muted);font-size:12px}

/* Chips de selección múltiple (canales de venta) */
.chip-check-row{display:flex;gap:8px;flex-wrap:wrap}
.chip-check{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:20px;padding:7px 12px;font-size:13px;cursor:pointer}
.chip-check input{margin:0}

/* Resumen de costo/ganancia (Recetas/Combos, Servicios) */
.cost-summary{display:flex;gap:20px;flex-wrap:wrap;background:var(--bg);border-radius:10px;padding:14px 16px;margin:14px 0}
.cost-summary div{display:flex;flex-direction:column;gap:2px}
.cost-summary span{font-size:11px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.03em}
.cost-summary b{font-size:16px}

.check-row{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:14px;cursor:pointer}
.notice-box{background:#FFF3D6;border:1px solid #F0DBA0;border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.5;margin-bottom:14px;color:var(--accent-ink)}
:root[data-theme="dark"] .notice-box{background:#3A2F14;border-color:#5C4A1E;color:#F2DFAE}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .notice-box{background:#3A2F14;border-color:#5C4A1E;color:#F2DFAE}}

/* ---------- TOASTS (mensajitos arriba a la derecha) ---------- */
.toast-container{position:fixed;top:calc(var(--safe-t) + 18px);right:18px;display:flex;flex-direction:column;gap:10px;z-index:999}
.toast{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:10px;padding:12px 16px;font-size:13px;font-weight:500;color:var(--ink);box-shadow:0 6px 20px rgba(36,28,54,.12);opacity:0;transform:translateX(16px);transition:opacity .2s,transform .2s;max-width:320px}
.toast.show{opacity:1;transform:translateX(0)}
.toast-error{border-left-color:var(--danger)}
.toast-icono{width:18px;height:18px;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.toast-error .toast-icono{background:var(--danger)}

/* ---------- % de ganancia (precio calculado desde el costo) ---------- */
.margen-toggle{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-muted);margin-top:8px;cursor:pointer}
.margen-toggle input{margin:0}
.margen-input-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.margen-input-row input{width:90px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:13px}
.margen-input-row span{font-size:12px;color:var(--ink-muted)}

/* ---------- Módulo Tasa ---------- */
.tasa-opciones{display:flex;flex-direction:column;gap:12px}
.tasa-opcion{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:16px;cursor:pointer}
.tasa-opcion:has(input:checked){border-color:var(--brand);background:var(--bg)}
.tasa-opcion input{margin-top:3px}
.tasa-valor{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;margin:6px 0 0;color:var(--brand)}
.tasa-manual-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.tasa-manual-row input{width:120px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:13px}
.tasa-manual-row span{font-size:12px;color:var(--ink-muted)}

@media (max-width:760px){
  .shell{flex-direction:column}
  .sidebar{width:100%;flex-direction:row;align-items:center;justify-content:space-between;padding:14px 18px}
  .nav{flex-direction:row;overflow-x:auto}
  .sidebar-foot{display:none}
  .main{padding:20px}
  .form-grid{grid-template-columns:1fr}
  .hero h1{font-size:28px}
}

/* =====================================================================
   RESPONSIVE (tablet + teléfono) — todo va dentro de @media, así que
   la versión de PC (> 900px) queda EXACTAMENTE igual.
   ===================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:rgba(109,79,224,.12)}
img,video,canvas,svg{max-width:100%}
.modal-overlay,.toast-container{-webkit-overflow-scrolling:touch}
/* Respaldo para Android/WebView viejos que no entienden "inset:0" */
.modal-overlay{top:0;right:0;bottom:0;left:0}

/* Botón hamburguesa + fondo del menú: ocultos en PC */
.menu-toggle{display:none}
.sidebar-backdrop{display:none}
.sidebar-close{display:none}

/* ---------- TABLET (≤ 1024px) ---------- */
@media (max-width:1024px){
  .main{padding:24px}
  .topbar{padding:14px 22px}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .topnav{padding:16px 28px}
  .hero{padding:52px 28px}
  .section{padding:52px 28px}
  .cta-band{margin-left:28px;margin-right:28px}
}

/* ---------- TABLET VERTICAL + TELÉFONO (≤ 900px): menú lateral tipo cajón ---------- */
@media (max-width:900px){
  body{overflow-x:hidden}
  .shell{flex-direction:column;min-height:100vh}
  .sidebar{
    position:fixed;top:0;bottom:0;left:0;z-index:300;
    width:290px;max-width:86vw;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:calc(var(--safe-t) + 18px) 14px calc(var(--safe-b) + 18px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    -webkit-transform:translateX(-105%);transform:translateX(-105%);
    -webkit-transition:-webkit-transform .25s ease;transition:transform .25s ease;
    visibility:hidden;
  }
  body.nav-open .sidebar{-webkit-transform:none;transform:none;visibility:visible;box-shadow:8px 0 30px rgba(10,6,20,.35)}
  .sidebar .brand{justify-content:space-between}
  .sidebar-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:8px;background:rgba(255,255,255,.1);color:#fff;font-size:22px;line-height:1}
  .nav{flex-direction:column;overflow:visible}
  .nav a,.nav-group-head{padding:13px 12px;font-size:15px}
  .nav-group-body a{padding:11px 12px;font-size:14px}
  .sidebar-foot{display:block}
  .sidebar-backdrop{
    display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:290;
    background:rgba(10,6,20,.55);opacity:0;visibility:hidden;transition:opacity .2s;
  }
  body.nav-open{overflow:hidden}
  body.nav-open .sidebar-backdrop{opacity:1;visibility:visible}

  .menu-toggle{
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:42px;height:42px;margin-right:10px;border:1px solid var(--line);border-radius:10px;
    background:var(--surface);color:var(--ink);font-size:20px;line-height:1;padding:0;
  }
  .topbar{flex-wrap:wrap;gap:10px;padding:12px 18px}
  .topbar .who{flex:1 1 auto;min-width:0}
  .who-text{min-width:0}
  .who-text b,.who-text span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}
  .topbar-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px}
  .main{padding:20px 18px}
  .form-grid{grid-template-columns:1fr}
  .form-grid,.form-actions{max-width:none}

  /* iOS/Android hacen zoom al enfocar campos con letra < 16px: se evita */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{font-size:16px!important}
}

/* ---------- TELÉFONO (≤ 760px) ---------- */
@media (max-width:760px){
  /* Sobrescribe el bloque anterior de 760px (que dejaba el menú como fila) */
  .shell{flex-direction:column}
  .sidebar{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:calc(var(--safe-t) + 18px) 14px calc(var(--safe-b) + 18px)}
  .nav{flex-direction:column;overflow:visible}
  .sidebar-foot{display:block}

  /* Landing */
  .topnav{padding:12px 16px;flex-wrap:wrap;gap:10px;justify-content:center}
  .topnav .logo-img{height:34px}
  .topnav .actions{flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
  .btn-pill{padding:11px 16px;font-size:13px}
  .hero{padding:40px 20px 44px}
  .hero h1{font-size:28px}
  .hero p{font-size:15px}
  .industries{margin-top:28px;gap:10px}
  .section{padding:40px 20px}
  .section-head{margin-bottom:26px}
  .section-head h2{font-size:22px}
  .cta-band{margin:0 16px 40px;padding:36px 20px;border-radius:16px}
  .cta-band h2{font-size:21px}
  .site-footer{padding:22px 16px}
  .login-wrap{padding:32px 16px 48px}

  /* Panel */
  .topbar-actions{width:100%;justify-content:flex-start}
  .topbar-actions .pill-btn,.topbar-actions .logout{flex:1 1 auto;text-align:center;padding:11px 12px}
  .main h1{font-size:20px}
  .main .lead{margin-bottom:20px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .row-between{align-items:stretch}
  .row-between .btn-inline{width:100%}
  .btn,.link-btn,.chip-btn,.logout,.pill-btn{min-height:42px}
  .table-card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-card table{min-width:560px}
  .mod-head{flex-direction:column;align-items:stretch}
  .mod-filters input[type="search"]{min-width:0;width:100%;flex:1 1 100%}
  .mod-filters select{flex:1 1 100%}
  .tool-row .btn,.tool-row button{flex:1 1 auto}
  .collapse-body{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mini-table{min-width:480px}
  .cost-summary{gap:14px 22px}
  .tasa-manual-row{flex-wrap:wrap}
  .form-actions{flex-wrap:wrap}
  .form-actions .btn{flex:1 1 auto}

  /* Modales */
  .modal-overlay{padding:10px}
  .modal-card{padding:24px 18px;max-height:calc(100vh - 20px);border-radius:14px}

  /* Toasts a todo el ancho */
  .toast-container{left:12px;right:12px;top:calc(var(--safe-t) + 10px)}
  .toast{max-width:none;width:100%}
}

/* ---------- TELÉFONO CHICO (≤ 480px) ---------- */
@media (max-width:480px){
  .hero h1{font-size:25px}
  .industries{grid-template-columns:repeat(2,minmax(0,1fr))}
  .industry-tile{min-height:68px;padding:14px}
  .features-grid,.steps{grid-template-columns:1fr}
  .stats-row{gap:10px}
  .stat-card{padding:13px 14px}
  .stat-num{font-size:22px}
  .main{padding:16px 12px}
  .topbar{padding:10px 12px}
  .grid{grid-template-columns:1fr}
  .who-text b,.who-text span{max-width:38vw}
  .quick-days{gap:6px}
  .custom-days-row{flex-wrap:wrap}
  .money-field .money-moneda{width:70px}
}

/* ---------- TELÉFONO MUY CHICO / ANDROID VIEJO (≤ 360px) ---------- */
@media (max-width:360px){
  .hero h1{font-size:22px}
  .btn-pill{padding:10px 13px;font-size:12px}
  .stats-row{grid-template-columns:1fr}
  .modal-card{padding:22px 14px}
  .main h1{font-size:18px}
}

/* ---------- Pantallas táctiles: toques cómodos y sin "hover pegado" ---------- */
@media (hover:none) and (pointer:coarse){
  .nav a,.nav-group-head,.autocomplete-item{min-height:44px}
  .btn-round-add{width:38px;height:38px}
  .modal-close{width:40px;height:40px;top:8px;right:8px;font-size:26px}
  .check-row,.chip-check,.margen-toggle{min-height:36px}
}

/* Altura real de pantalla en móviles (barra de direcciones que sube y baja) */
@supports (height:100dvh){
  @media (max-width:900px){
    .shell{min-height:100dvh}
    .modal-card{max-height:calc(100dvh - 20px)}
  }
}

/* ================================================================
   FIX DEMO LANDING + MODO OSCURO COMPLETO
   ================================================================ */
.landing-page .demo-real .demo-panel{display:block}
.landing-page .demo-real .demo-panel[hidden]{display:none!important}
.landing-page .demo-real .demo-panel{animation:panelIn .28s ease}
.landing-page .demo-ready .demo-product-grid,
.landing-page .demo-ready .demo-inventory-list,
.landing-page .demo-ready .demo-account-list,
.landing-page .demo-ready .demo-report-chart{min-height:1px}
.landing-page .demo-empty{padding:16px;border:1px dashed #DCD6EA;border-radius:12px;text-align:center;color:#7F7890;font-size:11px;background:#FBFAFE}
.landing-page .demo-qty{display:inline-flex;align-items:center;gap:4px;margin-left:auto}
.landing-page .demo-qty button{width:24px;height:24px;border:1px solid #DDD6EA;border-radius:7px;background:#F7F5FB;color:#5E4BC5;font-weight:800;line-height:1}
.landing-page .demo-qty b{min-width:14px;text-align:center;font-size:10px;color:#34304A}

/* Dashboard: colores fijos que necesitaban adaptación al tema oscuro */
:root[data-theme="dark"] .nav-home.active{background:rgba(139,114,240,.16);color:#B9A9FF}
:root[data-theme="dark"] .nav-section-label{color:#8F84A8}
:root[data-theme="dark"] .badge.ok{background:#17382B;color:#7DE0B4;border-color:#275944}
:root[data-theme="dark"] .badge.off{background:#2A2539;color:#BDB2D5;border-color:#45405A}
:root[data-theme="dark"] .badge.warn{background:#422824;color:#F1B4A5;border-color:#6C3B31}
:root[data-theme="dark"] .stat-card.stat-off .stat-num{color:#A79BC4}
:root[data-theme="dark"] .notice-box{background:#3A2F14;border-color:#5C4A1E;color:#F2DFAE}

/* Landing: el verde queda como acento; el tema oscuro oscurece paneles y superficies, no solo el fondo. */
:root[data-theme="dark"] .landing-page{background:#11101A;color:#EEEAF7}
:root[data-theme="dark"] .landing-page .hero-wrap{background:radial-gradient(circle at 84% 16%,rgba(109,79,224,.20),transparent 30%),radial-gradient(circle at 8% 82%,rgba(25,167,125,.08),transparent 22%),linear-gradient(135deg,#171425 0%,#171727 55%,#1D1822 100%);border-bottom-color:#2D2740}
:root[data-theme="dark"] .landing-page .hero h1,
:root[data-theme="dark"] .landing-page .section-head h2{color:#F1EDF9}
:root[data-theme="dark"] .landing-page .hero-copy,
:root[data-theme="dark"] .landing-page .section-head p{color:#B4ABC9}
:root[data-theme="dark"] .landing-page .hero-product{background:linear-gradient(145deg,#211B33,#1B1928);border-color:#3B3350;box-shadow:0 28px 80px rgba(0,0,0,.35)}
:root[data-theme="dark"] .landing-page .browser-bar{background:#252038;border-bottom-color:#3A3450;color:#C9C1D8}
:root[data-theme="dark"] .landing-page .product-shell{background:#15131F}
:root[data-theme="dark"] .landing-page .product-side{background:#171328}
:root[data-theme="dark"] .landing-page .p-stat,
:root[data-theme="dark"] .landing-page .chart,
:root[data-theme="dark"] .landing-page .logo-chip,
:root[data-theme="dark"] .landing-page .story,
:root[data-theme="dark"] .landing-page .feature-card,
:root[data-theme="dark"] .landing-page .industry-card,
:root[data-theme="dark"] .landing-page .faq details,
:root[data-theme="dark"] .landing-page .demo-card,
:root[data-theme="dark"] .landing-page .demo-product-card,
:root[data-theme="dark"] .landing-page .floating-note{background:#211D30;border-color:#3A334D;color:#EEEAF7}
:root[data-theme="dark"] .landing-page .p-stat small,
:root[data-theme="dark"] .landing-page .preview-head small,
:root[data-theme="dark"] .landing-page .story-head span,
:root[data-theme="dark"] .landing-page .story p,
:root[data-theme="dark"] .landing-page .feature-card p,
:root[data-theme="dark"] .landing-page .demo-panel-head p,
:root[data-theme="dark"] .landing-page .demo-product-meta small,
:root[data-theme="dark"] .landing-page .demo-metric-row span,
:root[data-theme="dark"] .landing-page .demo-cash-list>div,
:root[data-theme="dark"] .landing-page .demo-account-row small,
:root[data-theme="dark"] .landing-page .demo-client-profile small,
:root[data-theme="dark"] .landing-page .demo-client-stats span{color:#AAA1BE}
:root[data-theme="dark"] .landing-page .p-stat strong,
:root[data-theme="dark"] .landing-page .sales-row span:last-child,
:root[data-theme="dark"] .landing-page .logo-chip b,
:root[data-theme="dark"] .landing-page .story-head b,
:root[data-theme="dark"] .landing-page .faq summary,
:root[data-theme="dark"] .landing-page .demo-card h3,
:root[data-theme="dark"] .landing-page .demo-inventory-row>b,
:root[data-theme="dark"] .landing-page .demo-account-row>b,
:root[data-theme="dark"] .landing-page .demo-client-profile strong,
:root[data-theme="dark"] .landing-page .demo-client-stats b{color:#F0ECF8}
:root[data-theme="dark"] .landing-page .section.alt{background:#171521;border-top-color:#2D2740;border-bottom-color:#2D2740}
:root[data-theme="dark"] .landing-page .logo-strip .logo-chip{box-shadow:0 10px 30px rgba(0,0,0,.16)}
:root[data-theme="dark"] .landing-page .demo-controls{background:#1C1928;border-bottom-color:#332C45}
:root[data-theme="dark"] .landing-page .demo-panels{background:linear-gradient(145deg,#171521,#14131D)}
:root[data-theme="dark"] .landing-page .demo-tab{color:#AAA1BE}
:root[data-theme="dark"] .landing-page .demo-tab:hover{background:#282239;color:#D7CFF0}
:root[data-theme="dark"] .landing-page .demo-card-top h3 small,
:root[data-theme="dark"] .landing-page .demo-currency{background:#28223A;border-color:#403652}
:root[data-theme="dark"] .landing-page .demo-currency button{color:#AAA1BE}
:root[data-theme="dark"] .landing-page .demo-product-card{background:#211D30;border-color:#3D3550}
:root[data-theme="dark"] .landing-page .demo-product-card:hover{border-color:#7563C8;box-shadow:0 12px 28px rgba(0,0,0,.24)}
:root[data-theme="dark"] .landing-page .demo-toolbar input,
:root[data-theme="dark"] .landing-page .demo-toolbar select,
:root[data-theme="dark"] .landing-page .demo-inventory-form input,
:root[data-theme="dark"] .landing-page .demo-inventory-form select,
:root[data-theme="dark"] .landing-page .demo-periods button,
:root[data-theme="dark"] .landing-page .demo-currency button{background:#17151F;color:#EEEAF7;border-color:#40384F}
:root[data-theme="dark"] .landing-page .demo-toolbar input::placeholder,
:root[data-theme="dark"] .landing-page .demo-inventory-form input::placeholder{color:#7F7790}
:root[data-theme="dark"] .landing-page .demo-cart-row,
:root[data-theme="dark"] .landing-page .demo-inventory-row,
:root[data-theme="dark"] .landing-page .demo-account-row,
:root[data-theme="dark"] .landing-page .demo-client-profile,
:root[data-theme="dark"] .landing-page .demo-client-stats>div,
:root[data-theme="dark"] .landing-page .account-flow>div{border-color:#3A334D;background:#1C1928}
:root[data-theme="dark"] .landing-page .demo-qty button{background:#2A243A;border-color:#453C57;color:#C7BDF0}
:root[data-theme="dark"] .landing-page .demo-options label,
:root[data-theme="dark"] .landing-page .demo-pay-row select,
:root[data-theme="dark"] .landing-page .demo-total-row,
:root[data-theme="dark"] .landing-page .demo-totals span{color:#B1A8C3}
:root[data-theme="dark"] .landing-page .demo-tip-box,
:root[data-theme="dark"] .landing-page .insight-box{background:#262138;border-color:#3D3550}
:root[data-theme="dark"] .landing-page .demo-periods button{color:#B4ABC9}
:root[data-theme="dark"] .landing-page .demo-report-chart{border-bottom-color:#3B334C}
:root[data-theme="dark"] .landing-page .demo-axis{color:#80778F}
:root[data-theme="dark"] .landing-page .metric{background:#211C31;border-color:#39314C}
:root[data-theme="dark"] .landing-page .metrics .metric span{color:#ADA3C1}
:root[data-theme="dark"] .landing-page .site-footer{background:#11101A;border-top-color:#2D2740;color:#978DAE}
:root[data-theme="dark"] .landing-page .cta-band{background:linear-gradient(135deg,#211A34 0%,#31264D 58%,#24314B 100%);box-shadow:0 25px 70px rgba(0,0,0,.30)}
:root[data-theme="dark"] .landing-page .login-card{background:#211D30;border-color:#3A334D;color:#EEEAF7}
:root[data-theme="dark"] .landing-page .login-brand img{background:#171A21}
:root[data-theme="dark"] .landing-page .login-brand b,
:root[data-theme="dark"] .landing-page .login-card h2{color:#F0ECF8}
:root[data-theme="dark"] .landing-page .login-brand span,
:root[data-theme="dark"] .landing-page .login-card .sub,
:root[data-theme="dark"] .landing-page .login-card .field label{color:#AAA1BE}
:root[data-theme="dark"] .landing-page .login-card .field input{background:#17151F;border-color:#40384F;color:#F1EDF8}
:root[data-theme="dark"] .landing-page .login-card .advisor{border-top-color:#3A334D}

/* Página Configuración > Apariencia */
:root[data-theme="dark"] .appearance-page{background:#11101A}
:root[data-theme="dark"] .appearance-page .ap-card{box-shadow:0 15px 50px rgba(0,0,0,.24)}
:root[data-theme="dark"] .appearance-page .preview{background:#0F0C18}
:root[data-theme="dark"] .appearance-page .preview-content{background:#211D30;color:#F0ECF8}
:root[data-theme="dark"] .appearance-page .preview-content small{color:#AAA1BE}
:root[data-theme="dark"] .appearance-page .preview-cards i{background:#2A243A;border-color:#40384F}
:root[data-theme="dark"] .appearance-page .preview-graph{background:#17151F;border-color:#3A334D}

@media(max-width:760px){
  .landing-page .demo-qty{gap:2px}
  .landing-page .demo-qty button{width:28px;height:28px}
}


/* =====================================================================
   KONTA — PULIDO GLOBAL DEL TEMA OSCURO + RESPONSIVE
   Solo presentación. No modifica lógica, datos ni comportamiento JS.
   ===================================================================== */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0d0b12;
  --surface:#15121b;
  --surface-2:#1b1723;
  --surface-3:#221d2d;
  --ink:#f4f1f8;
  --ink-muted:#a9a1b8;
  --brand-dark:#0a0810;
  --brand:#8d74f5;
  --pink:#ec4f9e;
  --accent:#e6a34b;
  --line:#30293b;
  --danger:#ef806c;
  --ok:#54c98c;
  --grad1:#17121d;
  --grad2:#1b1424;
  --grad3:#20171f;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0d0b12; --surface:#15121b; --surface-2:#1b1723; --surface-3:#221d2d;
    --ink:#f4f1f8; --ink-muted:#a9a1b8; --brand-dark:#0a0810; --brand:#8d74f5;
    --pink:#ec4f9e; --accent:#e6a34b; --line:#30293b; --danger:#ef806c; --ok:#54c98c;
    --grad1:#17121d; --grad2:#1b1424; --grad3:#20171f;
  }
}

/* Controles nativos */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] option,
:root[data-theme="dark"] button,
:root[data-theme="dark"] [role="button"]{color-scheme:dark}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{color:#827a91;opacity:1}
:root[data-theme="dark"] textarea{background:var(--surface);color:var(--ink);border-color:var(--line)}

:root[data-theme="dark"] .hero h1{color:var(--ink)}
:root[data-theme="dark"] .hero p{color:var(--ink-muted)}
:root[data-theme="dark"] .section.alt{background:var(--surface)}
:root[data-theme="dark"] .site-footer{background:var(--bg)}

/* Superficies globales */
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .table-card,
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] .login-card,
:root[data-theme="dark"] .feature-card,
:root[data-theme="dark"] .collapse,
:root[data-theme="dark"] .autocomplete-list,
:root[data-theme="dark"] .toast,
:root[data-theme="dark"] .mini-table,
:root[data-theme="dark"] .notice-box{box-shadow:0 10px 32px rgba(0,0,0,.16)}
:root[data-theme="dark"] .table-card,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .feature-card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] .login-card{border-color:var(--line)}
:root[data-theme="dark"] th{background:#110f16;color:#aaa1b8}
:root[data-theme="dark"] tbody tr:hover{background:#191521}
:root[data-theme="dark"] .badge{background:#211c29;color:#b5acc5}
:root[data-theme="dark"] .badge.ok{background:#143426;color:#78d4a5;border-color:#24563e}
:root[data-theme="dark"] .badge.off{background:#24202b;color:#aba3b5;border-color:#3a3443}
:root[data-theme="dark"] .badge.warn{background:#35221f;color:#ffad9c;border-color:#5a332d}
:root[data-theme="dark"] .nav-group-body{border-left-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .divider::before,
:root[data-theme="dark"] .divider::after{background:var(--line)}

/* Evita que módulos con estilos inline vuelvan a pintar superficies blancas.
   Se limita a pantalla; tickets/facturas conservan su diseño de impresión. */
@media screen{
  :root[data-theme="dark"] [style*="background:#fff"],
  :root[data-theme="dark"] [style*="background: #fff"],
  :root[data-theme="dark"] [style*="background:#ffffff"],
  :root[data-theme="dark"] [style*="background: #ffffff"],
  :root[data-theme="dark"] [style*="background-color:#fff"],
  :root[data-theme="dark"] [style*="background-color: #fff"],
  :root[data-theme="dark"] [style*="background-color:#ffffff"],
  :root[data-theme="dark"] [style*="background-color: #ffffff"]{
    background:var(--surface)!important;
    color:var(--ink)!important;
    border-color:var(--line)!important;
  }
}

/* Avisos y estados suaves */
:root[data-theme="dark"] .landing-page .demo-empty,
:root[data-theme="dark"] .landing-page .demo-qty button{background:#1b1723;border-color:#342c42;color:#b8afc8}
:root[data-theme="dark"] .notice-box{background:#302615;border-color:#584722;color:#f2dca9}
:root[data-theme="dark"] .cost-summary,
:root[data-theme="dark"] .tasa-opcion:has(input:checked){background:#191521}
:root[data-theme="dark"] .collapse-head{background:#16121d}

/* Home */
:root[data-theme="dark"] .kh-hero,
:root[data-theme="dark"] .kh-card,
:root[data-theme="dark"] .kh-brand,
:root[data-theme="dark"] .kh-chip{background:#15121b;border-color:#30293b;box-shadow:0 10px 30px rgba(0,0,0,.16)}
:root[data-theme="dark"] .kh-hero{background:linear-gradient(135deg,#17131d 0%,#1b1625 70%,#21191f 100%)}
:root[data-theme="dark"] .kh-brand img{background:#211c29;border-color:#342c42}
:root[data-theme="dark"] .kh-brand-logo-placeholder{background:#29203a;color:#a98ffc}
:root[data-theme="dark"] .kh-metric{background:#1b1723;border-color:#342c42}
:root[data-theme="dark"] .kh-progress{background:#30293a}
:root[data-theme="dark"] .kh-link{color:#aa93ff}

/* Clientes */
:root[data-theme="dark"] .cl-owner,
:root[data-theme="dark"] .cl-card,
:root[data-theme="dark"] .cl-panel,
:root[data-theme="dark"] .cl-kpi,
:root[data-theme="dark"] .cl-picker,
:root[data-theme="dark"] .cl-history-item,
:root[data-theme="dark"] .cl-product,
:root[data-theme="dark"] .cl-marketing-box{background:var(--surface);border-color:var(--line)}
:root[data-theme="dark"] .cl-whatsapp-btn{background:#173527;border-color:#285a40;color:#68d29a}

/* Cuentas */
:root[data-theme="dark"] .kc-card,
:root[data-theme="dark"] .kc-tabs,
:root[data-theme="dark"] .kc-table-wrap,
:root[data-theme="dark"] .kc-modal-card,
:root[data-theme="dark"] .kc-filter,
:root[data-theme="dark"] .kc-input,
:root[data-theme="dark"] .kc-select{background:var(--surface);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .kc-badge.warn{background:#302717;color:#f2d79c;border-color:#584722}
:root[data-theme="dark"] .kc-badge.danger{background:#351f1f;color:#ff9f8d;border-color:#5b302b}

/* Ventas / mesas / devoluciones */
:root[data-theme="dark"] .vx-panel,
:root[data-theme="dark"] .vx-product-card,
:root[data-theme="dark"] .vx-cart-panel,
:root[data-theme="dark"] .vx-cajas-resumen,
:root[data-theme="dark"] .vx-caja-card,
:root[data-theme="dark"] .vx-modal-card,
:root[data-theme="dark"] .vx-success,
:root[data-theme="dark"] .vm-panel,
:root[data-theme="dark"] .vm-table-card,
:root[data-theme="dark"] .vm-modal-card,
:root[data-theme="dark"] .dv-card,
:root[data-theme="dark"] .dv-line{background:var(--surface);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .vx-product-img,
:root[data-theme="dark"] .vm-item-img{background:#111018}
:root[data-theme="dark"] .vx-btn-cashea{background:#1c1824;border-color:#3b334a}
:root[data-theme="dark"] .vx-btn-cashea.active,
:root[data-theme="dark"] .vx-btn-cashea.primary{background:#211a2e;border-color:var(--brand)}
:root[data-theme="dark"] .konta-measure-chip{background:#1b1723;color:var(--ink);border-color:#342c42}
:root[data-theme="dark"] .inv-tag{background:#2b2240;color:#bcaaff}
:root[data-theme="dark"] .inv-credit-box,
:root[data-theme="dark"] .inv-repeat-card,
:root[data-theme="dark"] .inv-calc-box{background:#1b1723;border-color:#3a3149}
:root[data-theme="dark"] .dv-toggle button.on{background:#211c29;color:var(--ink)}
:root[data-theme="dark"] .dv-item{background:var(--surface);color:var(--ink)}
:root[data-theme="dark"] .dv-item:hover:not(:disabled){background:#1b1723}
:root[data-theme="dark"] .vm-badge.st-en_proceso{color:#e9be65;background:#352a19;border-color:#5d4725}
:root[data-theme="dark"] .vm-badge.st-entregado{color:#73d8a0;background:#143426;border-color:#24563e}
:root[data-theme="dark"] .vm-invoice{background:#fff;color:#17131f;border-color:#ddd6e3}

/* Caja y reportes de cierre */
:root[data-theme="dark"] .kcaj-tools,
:root[data-theme="dark"] .kcaj-card,
:root[data-theme="dark"] .rcx-panel,
:root[data-theme="dark"] .rcx-cuenta{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink)}
:root[data-theme="dark"] .kcaj-pin,
:root[data-theme="dark"] .kcaj-banner,
:root[data-theme="dark"] .rcx-stat,
:root[data-theme="dark"] .rcx-diff{background:#1b1723!important;color:var(--ink)}
:root[data-theme="dark"] .kcaj-banner.setup{background:#302615!important;color:#f1d79d}
:root[data-theme="dark"] .kcaj-status.off{background:#25212c;color:#aba3b5}
:root[data-theme="dark"] .kcaj-tag{background:#24202e;color:#bfb7cc}
:root[data-theme="dark"] .rcx-btn.ghost{background:#24202b;color:var(--ink)}
:root[data-theme="dark"] .rcx-btn.primary{background:#f0ecf6;color:#16121b}
:root[data-theme="dark"] .rcx-diff.ok{background:#173527;color:#76d6a3}
:root[data-theme="dark"] .rcx-diff.warn,
:root[data-theme="dark"] .rcx-error{background:#351f1f;color:#ffad9e}

/* Acceso a cajas */
:root[data-theme="dark"] .konta-caja-panel,
:root[data-theme="dark"] .konta-caja-card{background:#15121b!important;border-color:#30293b!important;color:var(--ink)}
:root[data-theme="dark"] .konta-caja-empty{background:#15121b!important}
:root[data-theme="dark"] .konta-caja-input,
:root[data-theme="dark"] .konta-caja-card .konta-caja-meta{color:var(--ink)}

/* Servicio técnico */
:root[data-theme="dark"] .st-btn,
:root[data-theme="dark"] .st-kpi,
:root[data-theme="dark"] .st-filters,
:root[data-theme="dark"] .st-tab,
:root[data-theme="dark"] .st-card,
:root[data-theme="dark"] .st-empty,
:root[data-theme="dark"] .st-modal,
:root[data-theme="dark"] .st-cli-row,
:root[data-theme="dark"] .st-line,
:root[data-theme="dark"] .st-prod,
:root[data-theme="dark"] .st-qty button,
:root[data-theme="dark"] .st-svc,
:root[data-theme="dark"] .st-pay{background:var(--surface);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .st-btn:hover,
:root[data-theme="dark"] .st-svc.on{background:#211a2f}
:root[data-theme="dark"] .st-falla,
:root[data-theme="dark"] .st-cli-sel,
:root[data-theme="dark"] .st-cli-new,
:root[data-theme="dark"] .st-box,
:root[data-theme="dark"] .st-total,
:root[data-theme="dark"] .st-summary div,
:root[data-theme="dark"] .st-dev{background:#1b1723;border-color:var(--line);color:var(--ink)}

/* Revendedores */
:root[data-theme="dark"] .rv-owner,
:root[data-theme="dark"] .rv-rev{--rv-line:#30293b;--rv-mut:#a9a1b8}
:root[data-theme="dark"] .rv-tabs,
:root[data-theme="dark"] .rv-kpi,
:root[data-theme="dark"] .rv-box,
:root[data-theme="dark"] .rv-card2,
:root[data-theme="dark"] .rv-x,
:root[data-theme="dark"] .rv-sticky{background:#15121b;border-color:#30293b;color:var(--ink)}
:root[data-theme="dark"] .rv-hist:hover{background:#1b1723}
:root[data-theme="dark"] .rv-map{background:#20202a}

/* Cuenta/configuración */
:root[data-theme="dark"] .kce-card{background:#15121b;border-color:#30293b;color:var(--ink)}
:root[data-theme="dark"] .kce-business{background:linear-gradient(135deg,#1b1725,#211b2b);border-color:#392f4a}
:root[data-theme="dark"] .kce-item{background:#1b1723;border-color:#30293b}
:root[data-theme="dark"] .kce-bar{background:#312a3b}
:root[data-theme="dark"] .kce-error{background:#302615;border-color:#584722;color:#f2dca9}

/* =====================================================================
   Responsive global: móvil primero, sin reflow horizontal accidental.
   ===================================================================== */
@media (max-width:900px){
  .main{padding:20px 16px;overflow-x:visible}
  .main-col{min-width:0}
  .topbar{padding:12px 14px;gap:10px}
  .topbar-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .pill-btn,.logout{min-height:40px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .form-grid{grid-template-columns:1fr;gap:12px}
  .form-grid .full{grid-column:auto}
  .form-actions{flex-wrap:wrap;max-width:none}
  .form-actions .btn{flex:1 1 150px}
  .mod-head{margin-bottom:16px}
  .mod-filters{display:grid;grid-template-columns:1fr;gap:8px}
  .mod-filters input[type="search"],.mod-filters select{min-width:0;width:100%}
}
@media (max-width:680px){
  body{font-size:14px}
  .main{padding:16px 12px}
  .topbar{align-items:flex-start}
  .who-text b{font-size:13px}
  .who-text span{font-size:11px}
  .topbar-actions{width:auto}
  .topbar-actions .pill-btn,.topbar-actions .logout{padding:8px 10px;font-size:12px}
  .main h1{font-size:20px}
  .main .lead{font-size:13px;margin-bottom:20px}
  .row-between,.mod-head{gap:10px}
  .row-between>.btn,.mod-head>.btn{width:100%}
  .grid{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat-card{padding:13px 14px}
  .stat-num{font-size:23px}
  .tool-row{display:grid;grid-template-columns:1fr;gap:8px}
  .tool-row .btn{width:100%}
  .field{margin-bottom:12px}
  .field input,.field select,.field textarea,.money-field .money-monto,.money-field .money-moneda{min-height:44px}
  .money-field .money-input-row{display:grid;grid-template-columns:minmax(0,1fr) 82px}
  .custom-days-row{display:grid;grid-template-columns:minmax(0,1fr);}
  .custom-days-row .btn{width:100%}
  .toast-container{left:12px;right:12px;top:calc(var(--safe-t) + 12px)}
  .toast{max-width:none;width:100%}
  .modal-overlay{padding:10px}
  .modal-card{padding:22px 16px;border-radius:18px;max-height:calc(100vh - 20px)}
  .mini-table{display:block;overflow-x:auto;white-space:nowrap}

  /* Tablas administrativas: se convierten en tarjetas sin crear scroll lateral. */
  .table-card{overflow:visible;background:transparent;border:0;box-shadow:none}
  .table-card table{display:block}
  .table-card thead{display:none}
  .table-card tbody{display:grid;gap:10px}
  .table-card tr{display:grid;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:5px 12px;box-shadow:0 7px 22px rgba(0,0,0,.08)}
  .table-card td{display:grid;grid-template-columns:minmax(95px,34%) 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);white-space:normal}
  .table-card td::before{content:attr(data-label);font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted);font-weight:700}
  .table-card td:last-child{border-bottom:0}
  .table-card td.actions{display:flex;gap:6px;align-items:center;justify-content:flex-start;flex-wrap:wrap;padding-top:12px}
  .table-card td.actions::before{width:100%;content:attr(data-label);margin-bottom:2px}
  .days-input{width:74px;min-height:38px}
  .link-btn{min-height:36px;padding:7px 9px}
}
@media (max-width:390px){
  .stats-row{grid-template-columns:1fr 1fr}
  .stat-label{font-size:11px}
  .topbar-actions .pill-btn{display:none}
}

/* =====================================================================
   MENÚ DE MÓDULOS EN MÓVIL/TABLET — SOLO PRESENTACIÓN
   El escritorio (> 1100px) conserva exactamente su disposición actual.
   ===================================================================== */
@media (max-width:1100px){
  .sidebar .brand > span:first-child{display:flex;align-items:center;gap:9px;min-width:0}
  .sidebar-close{flex:0 0 36px}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:42px;height:42px;margin-right:10px;border:1px solid var(--line);border-radius:10px;
    background:var(--surface);color:var(--ink);font-size:20px;line-height:1;padding:0}
  .sidebar-backdrop{pointer-events:none}
  body.nav-open .sidebar-backdrop{pointer-events:auto}
}

/* iPad/tablet horizontal y otros dispositivos táctiles anchos */
@media (min-width:901px) and (max-width:1100px){
  body{overflow-x:hidden}
  .shell{flex-direction:column;min-height:100vh}
  .sidebar{
    position:fixed;top:0;bottom:0;left:0;z-index:300;
    width:290px;max-width:86vw;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:calc(var(--safe-t) + 18px) 14px calc(var(--safe-b) + 18px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    -webkit-transform:translateX(-105%);transform:translateX(-105%);
    -webkit-transition:-webkit-transform .25s ease;transition:transform .25s ease;
    visibility:hidden;
  }
  body.nav-open .sidebar{-webkit-transform:none;transform:none;visibility:visible;box-shadow:8px 0 30px rgba(10,6,20,.35)}
  .sidebar .brand{justify-content:space-between}
  .sidebar-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
    border:0;border-radius:8px;background:rgba(255,255,255,.1);color:#fff;font-size:22px;line-height:1}
  .nav{flex-direction:column;overflow:visible}
  .nav a,.nav-group-head{padding:13px 12px;font-size:15px}
  .nav-group-body a{padding:11px 12px;font-size:14px}
  .sidebar-foot{display:block}
  .sidebar-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:290;
    background:rgba(10,6,20,.55);opacity:0;visibility:hidden;transition:opacity .2s}
  body.nav-open{overflow:hidden}
  body.nav-open .sidebar-backdrop{opacity:1;visibility:visible}
  .topbar{flex-wrap:wrap;gap:10px;padding:12px 18px}
  .topbar .who{flex:1 1 auto;min-width:0}
  .who-text{min-width:0}
  .who-text b,.who-text span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}
  .topbar-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px}
}

@media (max-width:760px){
  .menu-toggle{width:44px;height:44px;margin-right:6px;font-size:21px;border-radius:11px}
  .topbar{align-items:center}
}

@media (max-width:480px){
  .menu-toggle{width:42px;height:42px;margin-right:4px}
}