/* =========================================================
   CostoPyme v2 — styles.css
   ========================================================= */

/* ─── Variables ─────────────────────────────────────────── */
:root {
  --p:          #D97706;
  --p-dark:     #B45309;
  --p-hover:    #92400E;
  --p-light:    #FEF3C7;
  --p-ring:     rgba(217,119,6,.2);

  --green:      #15803D;
  --green-bg:   #DCFCE7;
  --green-b:    #86EFAC;
  --yellow:     #92400E;
  --yellow-bg:  #FEF3C7;
  --yellow-b:   #FCD34D;
  --orange:     #C2410C;
  --orange-bg:  #FFEDD5;
  --orange-b:   #FDBA74;
  --red:        #B91C1C;
  --red-bg:     #FEE2E2;
  --red-b:      #FCA5A5;
  --blue:       #1D4ED8;
  --blue-bg:    #DBEAFE;
  --blue-b:     #93C5FD;

  --bg:         #F8FAFB;
  --surface:    #FFFFFF;
  --surface-2:  #F9FAFB;
  --surface-3:  #F3F4F6;
  --border:     #E5E7EB;
  --border-2:   #D1D5DB;
  --shadow-c:   rgba(17,24,39,.07);

  --text:       #111827;
  --text-2:     #374151;
  --text-3:     #6B7280;
  --text-4:     #9CA3AF;
  --text-inv:   #FFFFFF;

  --sb:         #1C2A20;
  --sb-text:    #9DB8A7;
  --sb-active:  #FBBF24;
  --sb-w:       252px;
  --hdr-h:      60px;

  --r-sm:  5px;
  --r:     9px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-full:999px;

  --sh-sm: 0 1px 2px var(--shadow-c);
  --sh:    0 2px 8px var(--shadow-c), 0 1px 2px var(--shadow-c);
  --sh-md: 0 4px 16px var(--shadow-c), 0 2px 4px var(--shadow-c);
  --sh-lg: 0 12px 32px rgba(17,24,39,.12), 0 4px 8px var(--shadow-c);
  --sh-xl: 0 24px 48px rgba(17,24,39,.16);

  --font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'Consolas', 'SF Mono', monospace;
  --tr: 140ms ease;
}

/* Dark mode */
[data-theme="dark"],
body.theme-dark {
  --bg:       #0D1117;
  --surface:  #161B22;
  --surface-2:#1C2128;
  --surface-3:#21262D;
  --border:   #30363D;
  --border-2: #444C56;
  --shadow-c: rgba(0,0,0,.3);
  --text:     #F0F6FC;
  --text-2:   #C9D1D9;
  --text-3:   #8B949E;
  --text-4:   #6E7681;
  --sb:       #0D1117;
}

/* ─── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  min-height:100vh;display:grid;
  grid-template-columns:var(--sb-w) 1fr;
  grid-template-rows:var(--hdr-h) 1fr;
  grid-template-areas:"sidebar header" "sidebar main";
}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:var(--font);border:none;background:none;color:inherit}
input,select,textarea{font-family:var(--font);color:var(--text)}
ul,ol{list-style:none}

/* ─── Sidebar ────────────────────────────────────────────── */
#sidebar{
  grid-area:sidebar;background:var(--sb);color:var(--sb-text);
  display:flex;flex-direction:column;
  height:100vh;position:sticky;top:0;
  overflow-y:auto;overflow-x:hidden;z-index:100;
}
.sb-logo{
  display:flex;align-items:center;gap:10px;
  padding:18px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sb-logo-icon{font-size:26px;line-height:1;flex-shrink:0}
.sb-logo-name{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.3px}
.sb-logo-sub{font-size:10px;color:#6B8A76;display:block;margin-top:1px}

.sb-nav{flex:1;padding:10px 0}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 18px;font-size:13.5px;font-weight:500;
  color:var(--sb-text);transition:all var(--tr);cursor:pointer;
  border-right:3px solid transparent;position:relative;
  white-space:nowrap;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:#E5E7EB}
.nav-item.active{
  background:rgba(251,191,36,.1);color:var(--sb-active);
  border-right-color:var(--sb-active);
}
.nav-icon{font-size:16px;flex-shrink:0;width:20px;text-align:center}

.sb-section{
  font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:#3D5A49;padding:10px 18px 4px;
}
.sb-sep{height:1px;background:rgba(255,255,255,.05);margin:6px 14px}
.sb-footer{
  padding:12px 18px;border-top:1px solid rgba(255,255,255,.05);
  font-size:11px;color:#3D5A49;line-height:1.6;
}
.sb-logout{
  display:flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.6);font-size:13px;font-weight:600;
  text-decoration:none;padding:7px 0;
  transition:color .2s;cursor:pointer;
}
.sb-logout:hover{ color:#fff; }
.sb-mode-badge{
  display:inline-block;padding:1px 7px;border-radius:var(--r-full);
  font-size:10px;font-weight:700;background:rgba(251,191,36,.15);color:var(--sb-active);
  margin-top:4px;
}

/* ─── Header ─────────────────────────────────────────────── */
#topbar{
  grid-area:header;background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;padding:0 22px;
  position:sticky;top:0;z-index:90;box-shadow:var(--sh-sm);
}
#page-title{font-size:16px;font-weight:800;flex:1;letter-spacing:-.2px}
.hdr-biz{
  font-size:12px;color:var(--text-3);
  max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Mode toggle */
.mode-wrap{display:flex;align-items:center;gap:9px;padding:5px 12px;
  border:1px solid var(--border);border-radius:var(--r-full);
  background:var(--surface-2);cursor:pointer;transition:border-color var(--tr)}
.mode-wrap:hover{border-color:var(--border-2)}
.mode-lbl{font-size:11px;color:var(--text-3);font-weight:600}
.mode-opts{display:flex;align-items:center;gap:6px}
.mode-opt{font-size:12px;font-weight:700;color:var(--text-4);transition:color var(--tr);cursor:pointer}
.mode-opt.on{color:var(--p)}
.switch{position:relative;display:inline-block;width:36px;height:20px}
.switch input{opacity:0;width:0;height:0}
.sw-sl{
  position:absolute;inset:0;background:#CBD5E1;border-radius:var(--r-full);
  transition:background var(--tr);cursor:pointer;
}
.sw-sl::before{
  content:'';position:absolute;width:14px;height:14px;
  left:3px;top:3px;background:#fff;border-radius:50%;
  transition:transform var(--tr);box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.switch input:checked+.sw-sl{background:var(--p)}
.switch input:checked+.sw-sl::before{transform:translateX(16px)}

/* Theme button */
.btn-theme{
  width:34px;height:34px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;font-size:17px;
  background:var(--surface-2);border:1px solid var(--border);
  transition:all var(--tr);
}
.btn-theme:hover{background:var(--surface-3);border-color:var(--border-2)}

/* ─── Main ───────────────────────────────────────────────── */
#main-content{grid-area:main;padding:24px;overflow-y:auto;min-height:0}
.view{display:none}
.view.active{display:block;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ─── Typography ─────────────────────────────────────────── */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;gap:12px}
.page-ttl{font-size:22px;font-weight:900;letter-spacing:-.4px;color:var(--text)}
.page-sub{font-size:13px;color:var(--text-3);margin-top:3px}
.sec-ttl{font-size:13px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}

/* ─── Cards ──────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-sm)}
.card-p{padding:20px}
.card-hdr{
  padding:14px 18px 12px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.card-body{padding:14px 18px 18px}
.card-ftr{
  padding:10px 18px;border-top:1px solid var(--border);
  background:var(--surface-2);border-radius:0 0 var(--r) var(--r);
  font-size:12px;color:var(--text-3);
}

/* KPI grid */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:22px}
.kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--sh-sm);position:relative;overflow:hidden;
}
.kpi::after{
  content:'';position:absolute;inset:0;border-radius:var(--r);
  background:linear-gradient(135deg,rgba(255,255,255,0) 60%,rgba(255,255,255,.04));
}
.kpi-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);margin-bottom:6px;padding-right:32px}
.kpi-val{font-size:28px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;padding-right:32px}
.kpi-sub{font-size:12px;color:var(--text-4);margin-top:5px}
.kpi-ico{position:absolute;right:14px;top:14px;font-size:22px;opacity:.3}
.kpi.g .kpi-val{color:var(--green)} .kpi.g .kpi-ico{opacity:.5;filter:drop-shadow(0 0 6px #15803D40)}
.kpi.o .kpi-val{color:var(--p)}
.kpi.r .kpi-val{color:var(--red)}
.kpi.b .kpi-val{color:var(--blue)}
.kpi.y .kpi-val{color:var(--yellow)}

/* Recipe cards */
.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px;margin-bottom:24px}
.recipe-card{
  background:var(--surface);border:1px solid var(--border);
  border-left:4px solid var(--border);border-radius:var(--r);
  padding:16px;box-shadow:var(--sh-sm);transition:box-shadow var(--tr),transform var(--tr);
  display:flex;flex-direction:column;
}
.recipe-card:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.rc-green{border-left-color:var(--green)}
.rc-yellow{border-left-color:#D97706}
.rc-orange{border-left-color:var(--orange)}
.rc-red{border-left-color:var(--red)}

.rc-name{font-size:14.5px;font-weight:800;color:var(--text);margin-bottom:3px;display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.rc-meta{font-size:12px;color:var(--text-4);margin-bottom:12px}
.rc-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);font-size:13px}
.rc-row:last-of-type{border-bottom:none}
.rc-lbl{color:var(--text-3)}
.rc-val{font-weight:700;font-variant-numeric:tabular-nums}
.rc-val.g{color:var(--green)} .rc-val.o{color:var(--p)} .rc-val.r{color:var(--red)}

/* Technical term tooltips */
.term-tip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:4px;
  cursor:help;
  text-decoration:none;
  outline:none;
  border-radius:999px;
  padding:0;
}
.term-tip.term-tip-inline{
  display:inline;
  padding:0;
}

/* Margin health bar */
.mhb{height:4px;background:var(--border);border-radius:var(--r-full);margin:10px 0;overflow:hidden}
.mhb-fill{height:100%;border-radius:var(--r-full);transition:width .5s ease}
.mhb-fill.green{background:linear-gradient(90deg,var(--green),#4ADE80)}
.mhb-fill.yellow{background:linear-gradient(90deg,#D97706,#FCD34D)}
.mhb-fill.orange{background:linear-gradient(90deg,var(--orange),var(--p))}
.mhb-fill.red{background:linear-gradient(90deg,var(--red),#F87171)}

.rc-actions{display:flex;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}

/* Badges */
.badge{
  display:inline-flex;align-items:center;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:var(--r-full);white-space:nowrap;
}
.badge.green {background:var(--green-bg); color:var(--green);  border:1px solid var(--green-b)}
.badge.yellow{background:var(--yellow-bg);color:var(--yellow); border:1px solid var(--yellow-b)}
.badge.orange{background:var(--orange-bg);color:var(--orange); border:1px solid var(--orange-b)}
.badge.red   {background:var(--red-bg);   color:var(--red);    border:1px solid var(--red-b)}
.badge.blue  {background:var(--blue-bg);  color:var(--blue);   border:1px solid var(--blue-b)}
.badge.gray  {background:var(--surface-3);color:var(--text-3); border:1px solid var(--border)}

/* ─── Buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;
  transition:all var(--tr);white-space:nowrap;line-height:1.4;
}
.btn:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.btn:disabled{opacity:.45;pointer-events:none}
.btn-xs{padding:4px 10px;font-size:11px;border-radius:4px}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-lg{padding:11px 24px;font-size:14.5px;border-radius:var(--r)}
.btn-full{width:100%}
.btn-icon{padding:7px;border-radius:var(--r-sm)}

.btn-primary{background:var(--p);color:#fff;box-shadow:0 1px 3px rgba(217,119,6,.35)}
.btn-primary:hover{background:var(--p-dark)}
.btn-primary:active{background:var(--p-hover);transform:scale(.98)}

.btn-success{background:var(--green);color:#fff}
.btn-success:hover{filter:brightness(.9)}

.btn-sec{background:var(--surface);border:1px solid var(--border);color:var(--text-2)}
.btn-sec:hover{background:var(--surface-3);border-color:var(--border-2)}

.btn-ghost{color:var(--text-3)}
.btn-ghost:hover{background:var(--surface-3);color:var(--text)}

.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid var(--red-b)}
.btn-danger:hover{background:var(--red);color:#fff;border-color:var(--red)}

.btn-outline{border:1.5px solid var(--p);color:var(--p);background:transparent}
.btn-outline:hover{background:var(--p-light)}

/* ─── Forms ──────────────────────────────────────────────── */
.fg{margin-bottom:14px}
.fg:last-child{margin-bottom:0}
.flabel{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;color:var(--text-2);margin-bottom:5px;
}
.flabel-hint{font-size:11px;font-weight:400;color:var(--text-4)}
.fc{
  width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-size:13.5px;color:var(--text);background:var(--surface);
  transition:border-color var(--tr),box-shadow var(--tr);outline:none;
  -webkit-appearance:none;
}
.fc:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--p-ring)}
.fc::placeholder{color:var(--text-4)}
.fc.error{border-color:var(--red);box-shadow:0 0 0 3px rgba(185,28,28,.12)}
select.fc{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:30px;
}
textarea.fc{resize:vertical;min-height:72px}
.fhint{font-size:11px;color:var(--text-4);margin-top:4px;line-height:1.4}
.ferr{font-size:11px;color:var(--red);margin-top:3px;display:none}
.fc.error+.ferr{display:block}

.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.finline{display:flex;gap:8px;align-items:flex-end}
.finline .fg{margin-bottom:0;flex:1}

/* Slider */
/* ─── Porcentaje numérico (reemplaza sliders) ────────────── */
.range-wrap{ display:flex; align-items:center; gap:10px }
input.range-num{
  width:72px; padding:6px 8px;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--p);
  font-size:15px; font-weight:800; text-align:center;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  outline:none; flex-shrink:0;
  -moz-appearance:textfield;
}
input.range-num::-webkit-inner-spin-button,
input.range-num::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0 }
input.range-num:focus{ border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
.range-pct-label{ font-size:13px; color:var(--text-2); font-weight:600; }
.range-val{ display:none } /* legacy */
/* Símbolo % después del input numérico */
.range-wrap::after{
  content:'%'; font-size:14px; font-weight:700;
  color:var(--text-2); margin-left:-4px; pointer-events:none;
}

/* Toggle checkbox */
.toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-2);user-select:none}
input[type="checkbox"].cbox{width:16px;height:16px;accent-color:var(--p);cursor:pointer;border-radius:3px}

/* ─── Tables ─────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{
  padding:10px 14px;text-align:left;font-size:11px;font-weight:700;
  color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;
  background:var(--surface-2);border-bottom:2px solid var(--border);white-space:nowrap;
}
thead th.th-r{text-align:right}
tbody td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surface-2)}
.td-name{font-weight:700}
.td-mono{font-family:var(--mono);font-size:13px}
.td-muted{color:var(--text-4);font-size:12px}
.td-r{text-align:right}
.td-acts{text-align:right;white-space:nowrap}

/* Inline editable cell */
.td-edit-wrap{display:flex;align-items:center;gap:4px}
.td-edit-val{cursor:pointer;padding:2px 6px;border-radius:4px;transition:background var(--tr)}
.td-edit-val:hover{background:var(--surface-3)}

/* ─── Ingredient row (recipe form) ──────────────────────── */
.ing-list{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.ing-row{
  display:flex;flex-direction:column;gap:5px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 10px;
}
.ing-row-top{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center}
.ing-row-top .ing-autocomplete{grid-column:1/3;position:relative}
.ing-row-top .ing-row-cost{font-size:12px;color:var(--accent);font-family:var(--mono);font-weight:600;white-space:nowrap;text-align:right}
.ing-row-bot{display:grid;grid-template-columns:minmax(0,1fr) 84px 40px;gap:6px;align-items:center}
.ing-row-bot .ing-del{justify-self:end}
.ing-row-bot .ing-qty,.ing-row-bot .ing-unit{min-width:0}
.ing-search{font-size:13px;width:100%}
/* Autocomplete dropdown */
.ing-autocomplete{position:relative}
.ing-sel-hidden{display:none!important}
.ing-dropdown{
  display:none;position:absolute;z-index:999;
  top:calc(100% + 2px);left:0;right:0;
  background:var(--surface);border:1.5px solid var(--accent);border-radius:var(--r-sm);
  max-height:180px;overflow-y:auto;margin:0;padding:0;list-style:none;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.ing-dropdown.open{display:block}
.ing-dropdown li{padding:9px 12px;cursor:pointer;font-size:13px;color:var(--text-1);border-bottom:1px solid var(--border)}
.ing-dropdown li:last-child{border-bottom:none}
.ing-dropdown li:hover{background:var(--accent);color:#fff}
.ing-dropdown li.ing-dd-empty{color:var(--text-2);cursor:default;font-style:italic}

/* ─── Breakdown ──────────────────────────────────────────── */
.bkd{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.bkd-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 14px;border-bottom:1px solid var(--border);font-size:13px;
}
.bkd-row:last-child{border-bottom:none}
.bkd-row.total{background:var(--surface);font-size:14px;font-weight:700;padding:11px 14px;border-top:2px solid var(--border-2)}
.bkd-row.hl{
  background:transparent;
  box-shadow:none;
}
.bkd-lbl{color:var(--text-3)}
.bkd-val{font-weight:600;font-variant-numeric:tabular-nums}
.bkd-val.g{color:var(--green)} .bkd-val.o{color:var(--p)} .bkd-val.r{color:var(--red)}

/* ─── Alerts ─────────────────────────────────────────────── */
.alert{
  display:flex;align-items:flex-start;gap:10px;padding:11px 14px;
  border-radius:var(--r-sm);font-size:13px;line-height:1.5;margin-bottom:10px;
}
.alert:last-child{margin-bottom:0}
.alert-ico{font-size:15px;flex-shrink:0;margin-top:.1em}
.alert-txt strong{display:block;font-weight:700;margin-bottom:1px}
.alert.info   {background:var(--blue-bg);  color:var(--blue);  border-left:3px solid var(--blue-b)}
.alert.success{background:var(--green-bg); color:var(--green); border-left:3px solid var(--green-b)}
.alert.warning{background:var(--yellow-bg);color:var(--yellow);border-left:3px solid var(--yellow-b)}
.alert.danger {background:var(--red-bg);   color:var(--red);   border-left:3px solid var(--red-b)}

/* Help hero */
.help-hero{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(212,160,23,.28);
  border-radius:var(--r-lg);
  padding:18px 20px;
  background:
    radial-gradient(circle at top right, rgba(212,160,23,.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(29,78,216,.14), transparent 30%),
    linear-gradient(135deg, #F8FBFF 0%, #EDF4FF 48%, #FFF8E7 100%);
  box-shadow:0 18px 36px rgba(17,24,39,.08);
}
[data-theme="dark"] .help-hero,
body.theme-dark .help-hero{
  border-color:rgba(212,160,23,.22);
  background:
    radial-gradient(circle at top right, rgba(212,160,23,.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(109,40,217,.16), transparent 30%),
    linear-gradient(135deg, #121A26 0%, #182130 48%, #1B1710 100%);
  box-shadow:0 18px 36px rgba(0,0,0,.28);
}
.help-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.08), transparent 45%, rgba(255,255,255,.03));
  pointer-events:none;
}
.help-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.74);
  color:var(--p);
  font-size:11px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
  position:relative;
  z-index:1;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset;
}
[data-theme="dark"] .help-hero-badge,
body.theme-dark .help-hero-badge{
  background:rgba(13,17,23,.78);
  color:#F5C451;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
.help-hero-grid{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
  margin-top:14px;
  position:relative;
  z-index:1;
}
.help-hero-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  background:linear-gradient(145deg, rgba(212,160,23,.22), rgba(29,78,216,.12));
  border:1px solid rgba(212,160,23,.25);
  box-shadow:0 10px 20px rgba(17,24,39,.08);
}
[data-theme="dark"] .help-hero-icon,
body.theme-dark .help-hero-icon{
  background:linear-gradient(145deg, rgba(212,160,23,.18), rgba(109,40,217,.18));
  border-color:rgba(212,160,23,.18);
}
.help-hero-title{
  font-size:18px;
  font-weight:900;
  letter-spacing:-.25px;
  color:var(--text);
  margin-bottom:6px;
}
.help-hero-text{
  color:var(--text-2);
  font-size:14px;
  line-height:1.55;
  max-width:72ch;
}

.help-page{
  position:relative;
  padding:6px 0 18px;
  isolation:isolate;
}
.help-page::before,
.help-page::after{
  content:'';
  position:absolute;
  inset:auto;
  pointer-events:none;
  z-index:0;
  filter:blur(24px);
  opacity:.75;
}
.help-page::before{
  width:320px;
  height:320px;
  right:-90px;
  top:12px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(212,160,23,.16) 0%, rgba(212,160,23,.03) 45%, transparent 70%);
}
.help-page::after{
  width:360px;
  height:360px;
  left:-120px;
  bottom:90px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(29,78,216,.14) 0%, rgba(29,78,216,.03) 42%, transparent 72%);
}
.help-page{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.04), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
}
.help-page::selection{background:rgba(212,160,23,.25)}
.help-page > .page-head{
  backdrop-filter:blur(2px);
}
.help-page > *{
  position:relative;
  z-index:1;
}

.help-section-grid,
.tips-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}
.help-card,
.tip-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow:0 10px 22px rgba(17,24,39,.06);
  transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.reveal-on-scroll{
  opacity:0;
  transform:translateY(18px) scale(.985);
  filter:saturate(.98);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .55s ease;
  transition-delay:var(--reveal-delay, 0ms);
}
.reveal-on-scroll.is-visible{
  opacity:1;
  transform:none;
  filter:saturate(1);
}
.help-card{
  min-height:176px;
  padding-top:18px;
}
.help-card .text-muted,
.tip-card .text-muted{
  position:relative;
  z-index:1;
}
.help-card-ico,
.tip-ico{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  font-size:18px;
  background:linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.38));
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 8px 16px rgba(17,24,39,.08);
}
[data-theme="dark"] .help-card-ico,
[data-theme="dark"] .tip-ico,
body.theme-dark .help-card-ico,
body.theme-dark .tip-ico{
  background:linear-gradient(145deg, rgba(26,31,39,.92), rgba(22,27,34,.72));
  border-color:rgba(255,255,255,.08);
}
.help-card-ico{
  color:var(--p);
}
.tip-ico{
  color:var(--green);
}
.help-card::after,
.tip-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top right, rgba(212,160,23,.10), transparent 36%);
  pointer-events:none;
}
.help-card:hover,
.tip-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(17,24,39,.10);
}
.reveal-on-scroll.is-visible:hover{
  transform:translateY(-2px);
}
.help-card-kicker,
.tip-kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  margin-bottom:10px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.55px;
  text-transform:uppercase;
  color:var(--text-3);
  background:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.24);
}
[data-theme="dark"] .help-card-kicker,
[data-theme="dark"] .tip-kicker,
body.theme-dark .help-card-kicker,
body.theme-dark .tip-kicker{
  background:rgba(13,17,23,.55);
  border-color:rgba(255,255,255,.06);
}
.help-card-title,
.tip-title{
  font-size:16px;
  font-weight:900;
  letter-spacing:-.2px;
  color:var(--text);
  margin-bottom:6px;
}
.help-card .text-muted,
.tip-card .text-muted{
  color:var(--text-2);
  font-size:13px;
  line-height:1.55;
}
.help-card .text-muted{
  max-width:38ch;
}
.help-card-ing::before{background:linear-gradient(180deg, rgba(29,78,216,.68), rgba(29,78,216,.10))}
.help-card-rec::before{background:linear-gradient(180deg, rgba(21,128,61,.68), rgba(21,128,61,.10))}
.help-card-exp::before{background:linear-gradient(180deg, rgba(212,160,23,.68), rgba(212,160,23,.10))}
.help-card-sim::before{background:linear-gradient(180deg, rgba(109,40,217,.68), rgba(109,40,217,.10))}
.help-card-rep::before{background:linear-gradient(180deg, rgba(194,65,12,.68), rgba(194,65,12,.10))}
.help-card-cfg::before{background:linear-gradient(180deg, rgba(15,118,110,.68), rgba(15,118,110,.10))}
.help-card-exp2::before{background:linear-gradient(180deg, rgba(71,85,105,.68), rgba(71,85,105,.10))}
.help-card-user::before{background:linear-gradient(180deg, rgba(185,28,28,.68), rgba(185,28,28,.10))}

.help-section-grid > *,
.tips-grid > *,
.faq-list > *,
.example-panel{
  animation:cardRise .45s cubic-bezier(.2,.8,.2,1) both;
}
.help-section-grid > *:nth-child(1){animation-delay:.02s}
.help-section-grid > *:nth-child(2){animation-delay:.05s}
.help-section-grid > *:nth-child(3){animation-delay:.08s}
.help-section-grid > *:nth-child(4){animation-delay:.11s}
.help-section-grid > *:nth-child(5){animation-delay:.14s}
.help-section-grid > *:nth-child(6){animation-delay:.17s}
.help-section-grid > *:nth-child(7){animation-delay:.20s}
.help-section-grid > *:nth-child(8){animation-delay:.23s}
.tips-grid > *:nth-child(1){animation-delay:.03s}
.tips-grid > *:nth-child(2){animation-delay:.08s}
.tips-grid > *:nth-child(3){animation-delay:.13s}
.faq-list > *:nth-child(1){animation-delay:.02s}
.faq-list > *:nth-child(2){animation-delay:.05s}
.faq-list > *:nth-child(3){animation-delay:.08s}
.faq-list > *:nth-child(4){animation-delay:.11s}
.faq-list > *:nth-child(5){animation-delay:.14s}
.faq-list > *:nth-child(6){animation-delay:.17s}
.faq-list > *:nth-child(7){animation-delay:.20s}
.faq-list > *:nth-child(8){animation-delay:.23s}
.example-panel{animation-delay:.06s}
@keyframes cardRise{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}
}

.help-page .sec-ttl{
  margin-top:2px;
}

.example-panel{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:center;
  padding:18px 20px;
  border-radius:20px;
  border:1px solid rgba(21,128,61,.18);
  background:
    radial-gradient(circle at top right, rgba(21,128,61,.10), transparent 30%),
    linear-gradient(135deg, rgba(220,252,231,.92), rgba(240,253,244,.82));
  box-shadow:0 14px 26px rgba(17,24,39,.07);
}
[data-theme="dark"] .example-panel,
body.theme-dark .example-panel{
  border-color:rgba(21,128,61,.22);
  background:
    radial-gradient(circle at top right, rgba(21,128,61,.16), transparent 30%),
    linear-gradient(135deg, rgba(16,24,19,.96), rgba(13,19,15,.86));
  box-shadow:0 14px 26px rgba(0,0,0,.22);
}
.example-panel::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  border-radius:20px 0 0 20px;
  background:linear-gradient(180deg, rgba(21,128,61,.95), rgba(34,197,94,.72));
}
.example-panel-icon{
  width:44px;
  height:44px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  background:rgba(255,255,255,.72);
  color:var(--green);
  box-shadow:0 8px 16px rgba(17,24,39,.08);
}
[data-theme="dark"] .example-panel-icon,
body.theme-dark .example-panel-icon{
  background:rgba(22,27,34,.88);
}
.example-panel-title{
  font-size:13px;
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:4px;
}
.example-panel-text{
  color:var(--text-2);
  line-height:1.6;
  font-size:13.5px;
}
.help-page .sec-ttl{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:.45px;
}
.help-page .sec-ttl::after{
  content:'';
  height:1px;
  flex:1;
  background:linear-gradient(90deg, rgba(212,160,23,.35), transparent);
}

/* FAQ accordions */
.faq-list{display:grid;gap:10px;margin-bottom:18px}
.faq-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--sh-sm);
  overflow:hidden;
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:15px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:800;
  color:var(--text);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'＋';
  color:var(--p);
  font-size:16px;
  font-weight:900;
  flex-shrink:0;
}
.faq-item[open] summary::after{content:'−'}
.faq-item[open]{border-color:rgba(217,119,6,.35);box-shadow:var(--sh-md)}
.faq-item div{
  padding:0 18px 16px;
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.6;
}

/* ─── Modal ──────────────────────────────────────────────── */
#modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;
  display:flex;align-items:flex-start;justify-content:center;
  padding:40px 20px;overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
#modal-overlay.open{opacity:1;pointer-events:auto}
#modal-box{
  background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:640px;
  box-shadow:var(--sh-xl);display:flex;flex-direction:column;
  max-height:calc(100vh - 80px);
  transform:translateY(12px) scale(.99);
  transition:transform .22s ease;
}
#modal-overlay.open #modal-box{transform:none}
.modal-hdr{
  padding:16px 20px 13px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.modal-ttl{font-size:15.5px;font-weight:800;letter-spacing:-.2px}
.modal-close-btn{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);color:var(--text-4);font-size:18px;transition:all var(--tr);
}
.modal-close-btn:hover{background:var(--surface-3);color:var(--text)}
.modal-body{padding:18px 20px;overflow-y:auto;flex:1}
.modal-ftr{
  padding:12px 20px;border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;
  background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg);
}

/* Large modal */
.modal-lg #modal-box{max-width:780px}

/* ─── Tabs ───────────────────────────────────────────────── */
.tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:18px;gap:0;overflow-x:auto}
.tab-btn{
  padding:8px 16px;font-size:13px;font-weight:600;color:var(--text-4);
  border-bottom:2.5px solid transparent;margin-bottom:-2px;transition:all var(--tr);white-space:nowrap;
}
.tab-btn:hover{color:var(--text-2)}
.tab-btn.on{color:var(--p);border-bottom-color:var(--p)}
.tab-panel{display:none}
.tab-panel.on{display:block}
body.mode-simple .recipe-ings-panel{display:block}

/* ─── Toasts ─────────────────────────────────────────────── */
#toast-wrap{
  position:fixed;bottom:20px;right:20px;z-index:2000;
  display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:var(--r);
  font-size:13px;font-weight:600;color:#fff;box-shadow:var(--sh-lg);
  pointer-events:auto;min-width:200px;max-width:340px;
  animation:toastIn .2s ease;
}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast.success{background:var(--green)}
.toast.error  {background:var(--red)}
.toast.info   {background:var(--blue)}
.toast.warning{background:#92400E}
.toast-ico{font-size:15px}

/* ─── Express view ───────────────────────────────────────── */
.ex-result{
  background:linear-gradient(135deg,var(--p) 0%,var(--p-dark) 100%);
  color:#fff;border-radius:var(--r-lg);padding:24px;text-align:center;
}
.ex-price{font-size:46px;font-weight:900;letter-spacing:-1.5px;line-height:1}
.ex-plbl{font-size:12px;opacity:.75;margin-bottom:2px}
.ex-psub{font-size:12.5px;opacity:.7;margin-top:6px}
.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.ex-mini{background:rgba(255,255,255,.15);border-radius:var(--r-sm);padding:10px}
.ex-mini-val{font-size:19px;font-weight:900;line-height:1}
.ex-mini-lbl{font-size:11px;opacity:.7;margin-top:3px}

/* Reverse result */
.rv-result{
  background:linear-gradient(135deg,var(--blue) 0%,#1E40AF 100%);
  color:#fff;border-radius:var(--r-lg);padding:22px;text-align:center;
}
.rv-pct{font-size:44px;font-weight:900;letter-spacing:-1px;line-height:1}

/* ─── Matrix table ───────────────────────────────────────── */
.matrix-table{width:100%;border-collapse:collapse;font-size:12.5px}
.matrix-table th{
  padding:8px 10px;text-align:center;font-size:11px;font-weight:700;
  color:var(--text-3);text-transform:uppercase;letter-spacing:.4px;
  background:var(--surface-2);border-bottom:2px solid var(--border);
}
.matrix-table th:first-child{text-align:left}
.matrix-table td{padding:9px 10px;text-align:center;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.matrix-table td:first-child{font-weight:700;text-align:left;color:var(--text-2)}
.matrix-table tr:last-child td{border-bottom:none}
.matrix-table tr:hover td{background:var(--surface-2)}
.matrix-best{background:var(--green-bg)!important;color:var(--green);font-weight:800}
.matrix-lbl{display:block;font-size:10px;color:var(--text-4);margin-top:2px}

/* ─── Proyector ──────────────────────────────────────────── */
.proy-hero{
  background:linear-gradient(135deg,#1D4ED8,#1E40AF);
  color:#fff;border-radius:var(--r-lg);padding:22px;text-align:center;
}
.proy-gain{font-size:38px;font-weight:900;letter-spacing:-1px;line-height:1}

/* ─── Reports ────────────────────────────────────────────── */
.report-bar-wrap{display:flex;align-items:center;gap:8px}
.report-bar-bg{flex:1;height:7px;background:var(--border);border-radius:var(--r-full);overflow:hidden}
.report-bar-fill{height:100%;border-radius:var(--r-full);transition:width .5s .1s ease}
.report-bar-fill.green {background:linear-gradient(90deg,var(--green),#4ADE80)}
.report-bar-fill.yellow{background:linear-gradient(90deg,#D97706,#FCD34D)}
.report-bar-fill.orange{background:linear-gradient(90deg,var(--orange),var(--p))}
.report-bar-fill.red   {background:linear-gradient(90deg,var(--red),#F87171)}

/* ─── Impact bars ────────────────────────────────────────── */
.impact-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.impact-name{font-size:12px;font-weight:600;color:var(--text-2);min-width:130px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.impact-bar-bg{flex:1;height:6px;background:var(--border);border-radius:var(--r-full);overflow:hidden}
.impact-bar-fill{height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--p-dark),var(--p))}
.impact-pct{font-size:11px;font-weight:700;color:var(--text-3);min-width:38px;text-align:right;font-variant-numeric:tabular-nums}

/* ─── Simulador ──────────────────────────────────────────── */
.sim-comp{display:grid;grid-template-columns:1fr 36px 1fr;gap:14px;align-items:start}
.sim-vs{font-size:22px;font-weight:900;color:var(--text-4);display:flex;align-items:center;justify-content:center;padding-top:44px}
.sim-col-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.diff-up{color:var(--red);font-size:11px;font-weight:700}
.diff-dn{color:var(--green);font-size:11px;font-weight:700}
.diff-eq{color:var(--text-4);font-size:11px}

/* ─── Empty state ────────────────────────────────────────── */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:52px 32px;color:var(--text-3)}
.empty-ico{font-size:52px;margin-bottom:14px;line-height:1}
.empty-ttl{font-size:15px;font-weight:700;color:var(--text-2);margin-bottom:6px}
.empty-txt{font-size:13px;line-height:1.6;max-width:300px;margin-bottom:20px}

/* ─── Sort/filter bar ────────────────────────────────────── */
.filter-bar{
  display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap;
}
.filter-pill{
  padding:5px 12px;font-size:12px;font-weight:600;
  border:1.5px solid var(--border);border-radius:var(--r-full);color:var(--text-3);
  background:var(--surface);transition:all var(--tr);cursor:pointer;
}
.filter-pill:hover{border-color:var(--border-2);color:var(--text)}
.filter-pill.on{border-color:var(--p);color:var(--p);background:var(--p-light)}
.filter-search{
  flex:1;min-width:180px;padding:6px 12px;
  border:1.5px solid var(--border);border-radius:var(--r-full);font-size:13px;
  background:var(--surface);outline:none;transition:border-color var(--tr);
}
.filter-search:focus{border-color:var(--p)}

/* ─── Welcome ────────────────────────────────────────────── */
#welcome-screen{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);z-index:3000;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.welcome-box{
  background:var(--surface);border-radius:var(--r-xl);padding:36px 40px;
  max-width:500px;width:100%;box-shadow:var(--sh-xl);text-align:center;
}
.welcome-emoji{font-size:56px;line-height:1;margin-bottom:14px}
.welcome-ttl{font-size:26px;font-weight:900;letter-spacing:-.5px;margin-bottom:8px}
.welcome-sub{color:var(--text-3);font-size:14px;line-height:1.6;margin-bottom:28px}
.welcome-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:24px}
.wt-btn{
  display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;
  border:2px solid var(--border);border-radius:var(--r);font-size:12px;font-weight:600;
  color:var(--text-3);cursor:pointer;transition:all var(--tr);background:var(--surface);
}
.wt-btn:hover,.wt-btn.on{border-color:var(--p);color:var(--p);background:var(--p-light)}
.wt-emoji{font-size:24px}

/* ─── Misc ───────────────────────────────────────────────── */
.sep{height:1px;background:var(--border);margin:14px 0}
.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-full);background:var(--surface-3);color:var(--text-3);border:1px solid var(--border)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mb-6{margin-bottom:6px} .mb-10{margin-bottom:10px} .mb-14{margin-bottom:14px}
.mb-18{margin-bottom:18px} .mb-22{margin-bottom:22px} .mb-28{margin-bottom:28px}
.mt-6{margin-top:6px} .mt-10{margin-top:10px} .mt-14{margin-top:14px}
.mt-18{margin-top:18px} .mt-22{margin-top:22px} .mt-28{margin-top:28px}
.flex{display:flex} .flex-c{display:flex;align-items:center}
.jb{justify-content:space-between} .gap-6{gap:6px} .gap-8{gap:8px} .gap-10{gap:10px} .gap-12{gap:12px}
.text-sm{font-size:12px} .text-xs{font-size:11px} .text-g{color:var(--green)} .text-r{color:var(--red)} .text-p{color:var(--p)} .text-muted{color:var(--text-3)} .text-right{text-align:right}
.font-bold{font-weight:700} .font-black{font-weight:900}

/* Advanced-only / simple-only visibility */
body.mode-simple  .adv-only{display:none!important}
body.mode-avanzado .simple-only{display:none!important}

/* ═══════════════════════════════════════════════════════════
   MÓVIL / ANDROID — Diseño nativo completo
   Regla de oro: todo tappable mínimo 48×48dp
   ═══════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* ─── Variables móvil ────────────────────────────────────── */
  :root{
    --hdr-h:     56px;
    --nav-h:     66px;
    --font:      'Segoe UI', system-ui, -apple-system, sans-serif;
  }
  html{ font-size: 16px }   /* base 16px — legibilidad Android */

  /* ─── Layout mobile: todo fixed, sin grid ───────────────── */
  body{
    display: block;
    height: 100vh;
    overflow: hidden;
  }

  /* ─── Barra de navegación inferior (fixed real) ──────────── */
  #sidebar{
    position: fixed;
    top: auto !important;   /* cancela el top:0 del CSS base */
    bottom: 0; left: 0; right: 0;
    height: var(--nav-h);
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    border-top: 1.5px solid rgba(255,255,255,.14);
    box-shadow: 0 -4px 16px rgba(0,0,0,.4);
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .sb-logo,.sb-footer,.sb-sep,.sb-section{ display:none }

  .sb-nav{
    display: flex;
    flex-direction: row;
    flex: 1;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sb-nav::-webkit-scrollbar{ display:none }

  .nav-item{
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px 6px;
    border-right: none;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    min-width: 72px;
    min-height: var(--nav-h);
    text-align: center;
    border-bottom: 3px solid transparent;
    transition: all .14s ease;
  }
  .nav-item span:last-child{
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--sb-text);
    transition: color .14s;
    white-space: nowrap;
  }
  .nav-item:hover span:last-child,
  .nav-item.active span:last-child{ color: var(--sb-active) }
  .nav-item.active{
    border-right: none;
    border-bottom: 3px solid var(--sb-active);
    background: rgba(251,191,36,.1);
  }
  .nav-icon{
    font-size: 24px;   /* grande y claro */
    width: auto;
    line-height: 1;
  }

  /* ─── Topbar (fixed arriba) ─────────────────────────────── */
  #topbar{
    position: fixed !important;
    top: 0 !important; left: 0; right: 0;
    height: var(--hdr-h);
    padding: 0 12px;
    gap: 6px;
    z-index: 150;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-sm);
    display: flex;
    align-items: center;
  }
  #page-title{
    font-size: 16px;
    font-weight: 900;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hdr-biz{ display:none }
  /* Ocultar búsqueda en topbar para dar espacio al switch+tema */
  .gsearch-wrap{ display:none !important }

  /* Búsqueda: sólo ícono en mobile, se expande al tocar */
  .gsearch-wrap{ position:relative }
  .gsearch{
    width: 40px;
    height: 40px;
    padding: 0 0 0 36px;
    font-size: 0;              /* ocultar texto */
    border-radius: 50%;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transition: all .22s ease;
  }
  .gsearch:focus{
    width: 170px;
    height: 38px;
    font-size: 14px;
    padding: 8px 12px 8px 34px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    border-color: var(--p);
    box-shadow: 0 0 0 3px var(--p-ring);
  }
  .gsearch-ico{ font-size: 18px; left: 10px }
  .gsearch-dd{ min-width: 280px; right: 0; left: auto }

  /* Modo toggle: mostrar switch + etiquetas cortas */
  .mode-lbl{ display:none }
  .mode-wrap{
    display: flex;
    align-items: center;
    padding: 5px 10px;
    gap: 5px;
    border-radius: var(--r-full);
    flex-shrink: 0;
  }
  .mode-opts{ gap: 5px }
  #mode-lbl-s,#mode-lbl-a{
    display: inline;
    font-size: 11px;
    font-weight: 700;
  }
  .switch{ width: 36px; height: 20px; flex-shrink: 0 }
  .sw-sl::before{ width: 14px; height: 14px; top: 3px; left: 3px }
  .switch input:checked+.sw-sl::before{ transform:translateX(16px) }

  /* Botón tema */
  .btn-theme{
    width: 40px; height: 40px;
    font-size: 20px;
    flex-shrink: 0;
  }

  /* ─── Área principal (fixed entre topbar y nav) ─────────── */
  #main-content{
    position: fixed;
    top: var(--hdr-h);
    bottom: var(--nav-h);
    left: 0; right: 0;
    padding: 16px 14px 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ─── Tipografía ─────────────────────────────────────────── */
  .page-ttl{ font-size: 22px; font-weight: 900 }
  .page-sub{ font-size: 14px }
  .sec-ttl{ font-size: 12px }
  .page-head{
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 18px;
  }
  .page-head > div:last-child{ width: 100% }
  .page-head .btn-primary,.page-head .btn-sec{
    width: 100%;
    justify-content: center;
  }

  /* ─── KPIs ──────────────────────────────────────────────── */
  .kpi-grid{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
  }
  .kpi{ padding: 14px 12px }
  .kpi-val{ font-size: 26px; padding-right: 30px }
  .kpi-lbl{ font-size: 10px; padding-right: 30px }
  .kpi-sub{ font-size: 11px }
  .kpi-ico{ font-size: 20px; top: 10px; right: 10px; opacity:.25 }

  /* ─── Botones: mínimo 48dp (estándar Android) ────────────── */
  .btn{
    min-height: 48px;
    padding: 10px 18px;
    font-size: 14px;
    border-radius: var(--r);
    gap: 8px;
  }
  .btn-sm{  min-height: 44px; padding: 10px 14px; font-size: 13px }
  .btn-xs{  min-height: 40px; padding: 8px 13px;  font-size: 12px }
  .btn-lg{  min-height: 54px; font-size: 15px }
  .btn-full{ min-height: 54px; width: 100% }
  .btn-icon{ min-height: 48px; min-width: 48px; padding: 12px; border-radius: var(--r) }

  /* ─── Formularios — entradas grandes para dedos ──────────── */
  .fc{
    padding: 13px 14px;
    font-size: 16px;        /* CRITICAL: < 16px dispara zoom en iOS, mejor igual en Android */
    border-radius: var(--r-sm);
    min-height: 48px;
  }
  select.fc{ font-size: 16px; min-height: 48px; padding-right: 38px }
  textarea.fc{ font-size: 16px; min-height: 96px }
  .frow,.frow3{ grid-template-columns: 1fr; gap: 12px }
  .flabel{ font-size: 13px; margin-bottom: 6px }
  .fhint{ font-size: 12px }
  .ferr{ font-size: 12px }
  .finline{ gap: 10px }
  .finline .fc{ min-height: 48px }

  /* Input porcentaje en mobile */
  input.range-num{ font-size: 17px; width: 76px; padding: 8px 10px; min-height: 46px; }

  /* ─── Recipe grid ────────────────────────────────────────── */
  .recipe-grid{ grid-template-columns: 1fr; gap: 12px }
  .recipe-card{ padding: 16px }
  .rc-name{ font-size: 15px }
  .rc-meta{ font-size: 13px }
  .rc-row{ font-size: 14px; padding: 9px 0 }
  .rc-val{ font-size: 14px }
  .rc-actions{
    display: grid;
    grid-template-columns: 1fr 1fr auto auto auto;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
  }
  .rc-actions .btn-sec,.rc-actions .btn-outline{
    flex: 1;
    min-height: 44px;
    font-size: 13px;
  }
  .rc-actions .btn-icon{ min-height: 44px; min-width: 44px }

  /* ─── Tablas ─────────────────────────────────────────────── */
  .table-wrap{ -webkit-overflow-scrolling:touch; border-radius: var(--r-sm) }
  table{ font-size: 13.5px }
  thead th{ padding: 10px 12px; font-size: 10px }
  tbody td{ padding: 13px 12px }
  .td-acts .btn-sm{ min-height: 40px }
  .td-acts .btn-xs{ min-height: 38px }

  /* ─── Ingredient row (form de receta) ────────────────────── */
  .ing-row{ padding: 10px 10px; gap: 8px; }
  .ing-row-bot{ grid-template-columns: minmax(0,1fr) 90px 46px; gap: 8px; }
  .ing-row .fc{ padding: 10px 12px; font-size: 14px; min-height: 44px }
  .ing-del{ min-height: 44px; min-width: 44px; font-size: 18px }
  .ing-search{ font-size: 14px; }
  .ing-dropdown li{ font-size: 14px; padding: 11px 14px; }

  /* ─── Modal: bottom sheet ────────────────────────────────── */
  #modal-overlay{
    align-items: flex-end;
    padding: 0;
  }
  #modal-box{
    border-radius: 20px 20px 0 0;
    max-height: 94vh;
    width: 100%;
    max-width: 100%;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .modal-hdr{
    padding: 16px 18px 14px;
    /* "pastilla" drag indicator */
    background: var(--surface);
  }
  .modal-hdr::before{
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: var(--border-2);
    border-radius: 2px;
    margin: 0 auto 14px;
  }
  .modal-ttl{ font-size: 16px }
  .modal-body{ padding: 16px 18px; font-size: 14px }
  .modal-ftr{
    padding: 14px 18px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .modal-ftr .btn{ flex: 1; min-width: 120px }

  /* ─── Tabs del modal ─────────────────────────────────────── */
  .tab-btn{ padding: 10px 14px; font-size: 13px }

  /* ─── Breakdown (desglose de costos) ─────────────────────── */
  .bkd-row{ padding: 12px 14px; font-size: 14px }
  .bkd-row.total{ font-size: 15px; padding: 14px 14px }
  .bkd-lbl{ font-size: 13px }
  .bkd-val{ font-size: 14px }

  /* ─── Alertas ────────────────────────────────────────────── */
  .alert{ font-size: 13.5px; padding: 13px 14px; line-height: 1.5 }
  .alert-ico{ font-size: 17px }

  /* ─── Badges ─────────────────────────────────────────────── */
  .badge{ font-size: 11px; padding: 3px 9px }

  /* ─── Express view ───────────────────────────────────────── */
  .ex-price{ font-size: 40px; letter-spacing: -1px }
  .ex-grid{ grid-template-columns: 1fr 1fr; gap: 8px }
  .ex-mini-val{ font-size: 18px }
  .ex-mini-lbl{ font-size: 12px }

  /* ─── Simulador ──────────────────────────────────────────── */
  .sim-comp{ grid-template-columns: 1fr; gap: 14px }
  .sim-vs{ display: none }

  /* ─── Filter bar ─────────────────────────────────────────── */
  .filter-bar{ gap: 8px; flex-wrap: wrap }
  .filter-pill{ min-height: 40px; padding: 8px 14px; font-size: 13px }
  .filter-search{ min-height: 44px; font-size: 15px; flex: 1 }
  .cat-chips{ gap: 8px }
  .cat-chip{ min-height: 40px; font-size: 13px; padding: 8px 16px }

  /* ─── View toggle (cards / lista) ────────────────────────── */
  .vtbtn{ width: 40px; height: 40px; font-size: 18px }

  /* ─── Quick edit (precio inline) ────────────────────────── */
  .qe-val{ font-size: 14px; padding: 6px 9px }
  .qe-input{ font-size: 15px; width: 110px; padding: 6px 9px }

  /* ─── Welcome ────────────────────────────────────────────── */
  .welcome-grid{ grid-template-columns: 1fr 1fr; gap: 10px }
  .welcome-box{ padding: 28px 20px; border-radius: var(--r-xl) }
  .welcome-ttl{ font-size: 22px }
  .welcome-sub{ font-size: 14px }
  .wt-btn{ padding: 14px 8px; font-size: 12px }

  /* ─── Matrix table ───────────────────────────────────────── */
  .matrix-table{ font-size: 12px }
  .matrix-table th,.matrix-table td{ padding: 8px 8px }

  /* ─── Dashboard chart ────────────────────────────────────── */
  .dash-chart-wrap{ padding: 14px 14px 12px }

  /* ─── Separadores y espaciado ────────────────────────────── */
  .mb-22{ margin-bottom: 16px }
  .mt-22{ margin-top: 16px }

  /* ─── Configuración: columnas → una sola ─────────────────── */
  #view-configuracion [style*="grid-template-columns:1fr 1fr"]{
    display: flex !important;
    flex-direction: column !important;
  }
  #view-express [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns: 1fr !important;
  }

  /* Scrollbars invisibles en toda la app */
  *{ scrollbar-width: none }
  *::-webkit-scrollbar{ display:none }
}

/* ─── Pantallas muy pequeñas (< 380px, ej. Galaxy A) ────────── */
@media (max-width:380px){
  html{ font-size: 15px }
  :root{ --nav-h: 62px }
  .kpi-val{ font-size: 23px }
  .nav-icon{ font-size: 22px }
  .nav-item span:last-child{ font-size: 9px }
  .page-ttl{ font-size: 20px }
  .ex-price{ font-size: 36px }
  .ing-row-bot{ grid-template-columns: minmax(0,1fr) 82px 46px }
  .btn{ min-height: 46px; padding: 9px 14px }
  .fc{ padding: 11px 12px; min-height: 46px }
}

/* ─── Global Search ─────────────────────────────────────── */
.gsearch-wrap{position:relative;display:flex;align-items:center}
.gsearch{
  width:200px;padding:7px 12px 7px 32px;
  border:1.5px solid var(--border);border-radius:var(--r-full);
  font-size:13px;background:var(--surface-2);outline:none;
  transition:all .2s ease;color:var(--text);
}
.gsearch:focus{border-color:var(--p);background:var(--surface);width:260px;box-shadow:0 0 0 3px var(--p-ring)}
.gsearch-ico{position:absolute;left:9px;font-size:13px;pointer-events:none;color:var(--text-4)}
.gsearch-dd{
  position:absolute;top:calc(100% + 6px);left:0;min-width:300px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--sh-lg);z-index:500;overflow:hidden;
}
.gsearch-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;cursor:pointer;font-size:13px;
  border-bottom:1px solid var(--border);transition:background var(--tr);
}
.gsearch-item:last-child{border-bottom:none}
.gsearch-item:hover,.gsearch-item:focus{background:var(--surface-2)}
.gsearch-item-type{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-4)}
.gsearch-item-name{font-weight:600}
.gsearch-empty{padding:16px;text-align:center;color:var(--text-4);font-size:13px}

/* ─── Dashboard Chart ────────────────────────────────────── */
.dash-chart-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-sm);padding:16px 18px 14px;margin:8px 0 22px}
#margin-chart{width:100%!important;display:block}

/* ─── KPI extra ──────────────────────────────────────────── */
.kpi.b .kpi-val{color:var(--blue)}

/* ─── Recipe list/table toggle ───────────────────────────── */
.view-toggle{display:flex;gap:4px}
.vtbtn{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);font-size:16px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text-3);transition:all var(--tr);cursor:pointer;
}
.vtbtn.on{border-color:var(--p);color:var(--p);background:var(--p-light)}
.rec-list td .badge{font-size:9px}

/* ─── Category filter chips ──────────────────────────────── */
.cat-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.cat-chip{
  display:inline-flex;align-items:center;gap:5px;padding:5px 13px;
  border:1.5px solid var(--border);border-radius:var(--r-full);
  font-size:12px;font-weight:600;color:var(--text-3);background:var(--surface);
  cursor:pointer;transition:all var(--tr);white-space:nowrap;
}
.cat-chip:hover{border-color:var(--border-2);color:var(--text)}
.cat-chip.on{border-color:var(--p);color:var(--p);background:var(--p-light)}

/* ─── Sortable table header ──────────────────────────────── */
.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
.th-sort:hover{color:var(--p)}
.sort-ico{opacity:.35;font-size:10px;margin-left:3px}
.th-sort.asc .sort-ico::after{content:'↑';color:var(--p);opacity:1}
.th-sort.desc .sort-ico::after{content:'↓';color:var(--p);opacity:1}
.th-sort .sort-ico::after{content:'↕'}

/* ─── Inline quick-edit price ────────────────────────────── */
.qe-wrap{display:inline-flex;align-items:center;gap:4px}
.qe-val{
  font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;
  cursor:pointer;padding:3px 7px;border-radius:4px;
  border:1.5px solid transparent;transition:all var(--tr);font-size:13px;
}
.qe-val:hover{background:var(--p-light);border-color:var(--p);color:var(--p)}
.qe-input{
  font-family:var(--mono);font-weight:700;font-size:13px;
  width:96px;padding:3px 7px;border:1.5px solid var(--p);border-radius:4px;
  background:var(--surface);outline:none;color:var(--text);
  box-shadow:0 0 0 3px var(--p-ring);
}
.qe-hint{font-size:10px;color:var(--text-4)}

/* ─── CSV / print buttons ────────────────────────────────── */
.btn-csv{background:var(--green-bg);color:var(--green);border:1px solid var(--green-b)}
.btn-csv:hover{background:var(--green);color:#fff;border-color:var(--green)}
.btn-print{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-b)}
.btn-print:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
/* ─── Print: detalle de receta ───────────────────────────── */
@media print{
  /* Ocultar todo excepto el modal */
  body.printing-recipe #sidebar,
  body.printing-recipe #topbar,
  body.printing-recipe #toast-wrap,
  body.printing-recipe .modal-ftr,
  body.printing-recipe .modal-close-btn,
  body.printing-recipe .modal-hdr,
  body.printing-recipe .filter-bar,
  body.printing-recipe .rc-actions,
  body.printing-recipe .no-print,
  body.printing-recipe .alert{display:none!important}

  body.printing-recipe{background:#fff!important;color:#000!important}
  body.printing-recipe #main-content{display:none!important}

  /* Modal como hoja */
  body.printing-recipe #modal-overlay{
    position:static!important;inset:auto!important;
    background:none!important;padding:0!important;
    opacity:1!important;pointer-events:auto!important;display:block!important;
  }
  body.printing-recipe #modal-box{
    max-width:none!important;width:100%!important;
    max-height:none!important;box-shadow:none!important;
    border:none!important;border-radius:0!important;
    transform:none!important;overflow:visible!important;
    margin:0!important;padding:0!important;
  }
  body.printing-recipe .modal-body{
    padding:0!important;overflow:visible!important;
    max-height:none!important;
  }

  /* Contenido del detalle */
  body.printing-recipe .recipe-print-sheet{
    display:block!important;color:#000!important;background:#fff!important;
    font-size:13px!important;line-height:1.5!important;
  }
  body.printing-recipe .recipe-print-sheet *{color:#000!important}
  body.printing-recipe .recipe-print-sheet .bkd-val.o{color:#b8860b!important;font-weight:700!important}
  body.printing-recipe .recipe-print-sheet .bkd-val.g{color:#15803D!important}
  body.printing-recipe .recipe-print-sheet .bkd-val.r{color:#B91C1C!important}

  body.printing-recipe .sec-ttl{
    font-size:14px!important;font-weight:800!important;
    margin-top:16px!important;margin-bottom:6px!important;
    text-transform:uppercase!important;letter-spacing:.5px!important;
    border-bottom:none!important;
  }
  body.printing-recipe .bkd{
    border:1px solid #ccc!important;box-shadow:none!important;
    break-inside:avoid!important;border-radius:6px!important;
  }
  body.printing-recipe .bkd-row{
    border-bottom:1px solid #e5e5e5!important;
    padding:8px 12px!important;display:flex!important;
    justify-content:space-between!important;
  }
  body.printing-recipe .bkd-row.total{
    background:#f5f5f5!important;font-weight:700!important;
  }
  body.printing-recipe .bkd-row.hl{
    background:#fff8e1!important;
  }
  body.printing-recipe .bkd-val{
    font-weight:600!important;text-align:right!important;
    font-family:'SF Mono',Consolas,monospace!important;
  }

  /* Impacto de ingredientes */
  body.printing-recipe .impact-row{
    display:flex!important;align-items:center!important;gap:8px!important;
    margin-bottom:4px!important;
  }
  body.printing-recipe .impact-bar-bg{
    background:#e5e5e5!important;height:10px!important;border-radius:5px!important;
  }
  body.printing-recipe .impact-bar-fill{
    background:#333!important;height:10px!important;border-radius:5px!important;
  }

  /* Badge de margen */
  body.printing-recipe .margin-badge{
    border:1px solid #000!important;background:transparent!important;
  }
}

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--border-2)}


/* ─── Login overlay ──────────────────────────────────────── */
.login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: #f0f0f0;
  overflow-y: auto;
  padding: 20px 16px;
  box-sizing: border-box;
}
body.logged-in #login-overlay,
#login-overlay[style*="display: none"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
body.login-open{
  overflow:hidden;
}
.login-box {
  width: 100%; max-width: 380px;
  padding: 36px 28px 36px;
  background: #ffffff;
  color: #1f2937;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.15);
  box-sizing: border-box;
}
.login-logo {
  text-align: center; margin-bottom: 28px;
}
.login-app-name {
  display: block; font-size: 26px; font-weight: 800;
  color: #b8860b; letter-spacing: .06em;
}
.login-app-sub {
  display: block; font-size: 12px; color: #64748b; margin-top: 2px;
}
.login-field { margin-bottom: 16px; }
.login-field label {
  display: block; font-size: 12px; font-weight: 600;
  color: #94a3b8; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em;
}
.login-field input {
  width: 100%; padding: 10px 12px; border: 1.5px solid #ddd;
  border-radius: 8px; background: #f8f8f8; color: #1a1a1a;
  font-size: 15px; box-sizing: border-box; outline: none;
}
.login-field input:focus { border-color: #b8860b; background: #fff; }
.login-error {
  font-size: 13px; color: var(--danger, #e55);
  background: rgba(220,50,50,.08); border-radius: var(--r);
  padding: 8px 10px; margin-bottom: 12px;
}
.login-btn {
  display: block !important;
  width: 100%; padding: 14px;
  background: #b8860b;  /* color fijo, no depende de CSS vars */
  color: #fff;
  border: none; border-radius: 8px; font-size: 16px; font-weight: 700;
  cursor: pointer; transition: opacity .2s; margin-top: 8px;
}
.login-btn:hover { background: #a07608; }
.login-btn:disabled { opacity: .6; cursor: default; }
.login-footer {
  text-align: center; font-size: 11px; color: #94a3b8;
  margin-top: 20px; margin-bottom: 0;
}
@media (max-width:768px){
  .login-overlay{
    padding:24px 14px;
    align-items:flex-start;
  }
  .login-box{
    margin-top:max(18px, env(safe-area-inset-top, 0px));
  }
}

/* ─── Sync badge ─────────────────────────────────────────── */
.btn-sync {
  background: none; border: none; cursor: pointer;
  padding: 6px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.sync-badge {
  width: 10px; height: 10px; border-radius: 50%; display: block;
  transition: background .3s;
}
.sync-badge.idle    { background: #4caf50; }
.sync-badge.syncing { background: #ff9800; animation: pulse-sync .8s infinite; }
.sync-badge.error   { background: #f44336; }
.sync-badge.offline { background: #9e9e9e; }
@keyframes pulse-sync {
  0%,100% { opacity: 1; } 50% { opacity: .3; }
}

/* ─── Admin panel ────────────────────────────────────────── */
.admin-wrap { padding: 20px 0; max-width: 640px; margin: 0 auto; }
.admin-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.admin-user-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--surface); border-radius: var(--r);
  margin-bottom: 8px; gap: 12px;
}
.admin-user-info { flex: 1; min-width: 0; }
.admin-user-info strong { display: block; font-size: 14px; }
.admin-user-meta { font-size: 12px; color: var(--text-2); }
.admin-user-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-danger { background: var(--danger, #e55) !important; color: #fff !important; }

/* FAQ accordions overrides */
.faq-intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:-2px 0 14px;
  padding:14px 16px;
  border:1px solid rgba(212,160,23,.18);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,248,232,.54));
  box-shadow:0 10px 20px rgba(17,24,39,.05);
}
[data-theme="dark"] .faq-intro,
body.theme-dark .faq-intro{
  background:linear-gradient(180deg, rgba(22,27,34,.94), rgba(17,20,27,.78));
  border-color:rgba(212,160,23,.14);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.faq-intro-ttl{
  font-size:12px;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--text);
}
.faq-intro-sub{
  font-size:12.5px;
  color:var(--text-3);
  text-align:right;
}
.faq-list{display:grid;gap:12px;margin-bottom:18px}
.faq-item{
  position:relative;
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 8px 18px rgba(17,24,39,.05);
  overflow:hidden;
  transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr), background var(--tr);
}
.faq-item::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg, rgba(212,160,23,.55), rgba(29,78,216,.35));
  opacity:.65;
}
.faq-item[data-tone="blue"]::before{background:linear-gradient(180deg, rgba(29,78,216,.6), rgba(29,78,216,.15))}
.faq-item[data-tone="green"]::before{background:linear-gradient(180deg, rgba(21,128,61,.6), rgba(21,128,61,.15))}
.faq-item[data-tone="orange"]::before{background:linear-gradient(180deg, rgba(194,65,12,.6), rgba(194,65,12,.15))}
.faq-item[data-tone="purple"]::before{background:linear-gradient(180deg, rgba(109,40,217,.6), rgba(109,40,217,.15))}
.faq-item[data-tone="teal"]::before{background:linear-gradient(180deg, rgba(15,118,110,.6), rgba(15,118,110,.15))}
.faq-item[data-tone="red"]::before{background:linear-gradient(180deg, rgba(185,28,28,.6), rgba(185,28,28,.15))}
.faq-item[data-tone="slate"]::before{background:linear-gradient(180deg, rgba(71,85,105,.58), rgba(71,85,105,.12))}
.faq-item[data-tone="gold"]::before{background:linear-gradient(180deg, rgba(180,83,9,.62), rgba(180,83,9,.16))}
.faq-head{display:flex;align-items:center;gap:10px;min-width:0}
.faq-ico{
  width:30px;height:30px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--p-light);color:var(--p);
  font-size:15px;flex-shrink:0;
  box-shadow:0 4px 10px rgba(217,119,6,.12);
  transition:transform var(--tr), box-shadow var(--tr), background var(--tr), color var(--tr);
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:18px 20px 18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:64px;
  font-weight:900;
  color:var(--text);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';
  color:var(--p);
  font-size:16px;
  font-weight:900;
  flex-shrink:0;
  transition:transform var(--tr), color var(--tr), opacity var(--tr);
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(217,119,6,.08);
}
.faq-item[open] summary::after{content:'-'}
.faq-item div{
  padding:0 20px 18px 58px;
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.6;
  animation:faqIn .22s ease;
}
.faq-item[open]{border-color:rgba(217,119,6,.35);box-shadow:0 14px 28px rgba(17,24,39,.10);transform:translateY(-1px)}
.faq-item[open] summary{background:linear-gradient(90deg,rgba(251,191,36,.12),rgba(255,255,255,0) 72%)}
.faq-item[open] .faq-ico{transform:scale(1.08);box-shadow:0 6px 16px rgba(217,119,6,.18)}
.faq-item:hover{box-shadow:0 12px 24px rgba(17,24,39,.08);transform:translateY(-1px)}
.faq-item[data-tone="gold"] .faq-ico{background:#FEF3C7;color:#B45309;box-shadow:0 4px 10px rgba(180,83,9,.12)}
.faq-item[data-tone="blue"] .faq-ico{background:#DBEAFE;color:#1D4ED8;box-shadow:0 4px 10px rgba(29,78,216,.12)}
.faq-item[data-tone="green"] .faq-ico{background:#DCFCE7;color:#15803D;box-shadow:0 4px 10px rgba(21,128,61,.12)}
.faq-item[data-tone="orange"] .faq-ico{background:#FFEDD5;color:#C2410C;box-shadow:0 4px 10px rgba(194,65,12,.12)}
.faq-item[data-tone="purple"] .faq-ico{background:#EDE9FE;color:#6D28D9;box-shadow:0 4px 10px rgba(109,40,217,.12)}
.faq-item[data-tone="teal"] .faq-ico{background:#CCFBF1;color:#0F766E;box-shadow:0 4px 10px rgba(15,118,110,.12)}
.faq-item[data-tone="red"] .faq-ico{background:#FEE2E2;color:#B91C1C;box-shadow:0 4px 10px rgba(185,28,28,.12)}
.faq-item[data-tone="slate"] .faq-ico{background:#E5E7EB;color:#475569;box-shadow:0 4px 10px rgba(71,85,105,.12)}
.faq-item[data-tone="gold"][open]{border-color:rgba(180,83,9,.30)}
.faq-item[data-tone="blue"][open]{border-color:rgba(29,78,216,.22)}
.faq-item[data-tone="green"][open]{border-color:rgba(21,128,61,.22)}
.faq-item[data-tone="orange"][open]{border-color:rgba(194,65,12,.22)}
.faq-item[data-tone="purple"][open]{border-color:rgba(109,40,217,.22)}
.faq-item[data-tone="teal"][open]{border-color:rgba(15,118,110,.22)}
.faq-item[data-tone="red"][open]{border-color:rgba(185,28,28,.22)}
.faq-item[data-tone="slate"][open]{border-color:rgba(71,85,105,.22)}
body.theme-dark .faq-item[data-tone="gold"]::before,
body.theme-dark .faq-item[data-tone="blue"]::before,
body.theme-dark .faq-item[data-tone="green"]::before,
body.theme-dark .faq-item[data-tone="orange"]::before,
body.theme-dark .faq-item[data-tone="purple"]::before,
body.theme-dark .faq-item[data-tone="teal"]::before,
body.theme-dark .faq-item[data-tone="red"]::before,
body.theme-dark .faq-item[data-tone="slate"]::before,
[data-theme="dark"] .faq-item[data-tone="gold"]::before,
[data-theme="dark"] .faq-item[data-tone="blue"]::before,
[data-theme="dark"] .faq-item[data-tone="green"]::before,
[data-theme="dark"] .faq-item[data-tone="orange"]::before,
[data-theme="dark"] .faq-item[data-tone="purple"]::before,
[data-theme="dark"] .faq-item[data-tone="teal"]::before,
[data-theme="dark"] .faq-item[data-tone="red"]::before,
[data-theme="dark"] .faq-item[data-tone="slate"]::before{
  opacity:.78;
}
  @keyframes faqIn{
    from{opacity:0;transform:translateY(-6px)}
    to{opacity:1;transform:none}
  }