/* Mis Finanzas — estilo "glass" inspirado en iOS */
:root{
  --bg:#eef1f7; --ink:#14181f; --muted:#6b7280; --line:rgba(60,70,100,.14); --fill:rgba(120,130,160,.16);
  --accent:#0a7aff; --accent-ink:#fff; --accent-soft:rgba(10,122,255,.12);
  --good:#1f9d55; --bad:#e5383b; --warn:#d97706; --info:#2f6fd6;
  --good-soft:rgba(48,209,88,.16); --bad-soft:rgba(255,69,58,.14); --warn-soft:rgba(255,159,10,.17); --info-soft:rgba(10,132,255,.13);
  --glass:rgba(255,255,255,.58); --glass-strong:rgba(255,255,255,.78); --glass-border:rgba(255,255,255,.75);
  --shadow:0 10px 40px rgba(40,55,110,.10),0 2px 8px rgba(40,55,110,.05);
  --hl:inset 0 1px 0 rgba(255,255,255,.9);
  --r:26px; --r-sm:16px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI Variable Display","Segoe UI",Inter,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#06080f; --ink:#f2f4f8; --muted:#9aa3b5; --line:rgba(255,255,255,.10); --fill:rgba(255,255,255,.12);
    --accent:#4da3ff; --accent-ink:#04101f; --accent-soft:rgba(77,163,255,.18);
    --good:#4ade80; --bad:#ff6b6b; --warn:#fbbf24; --info:#7db4ee;
    --glass:rgba(34,40,58,.55); --glass-strong:rgba(40,47,68,.78); --glass-border:rgba(255,255,255,.10);
    --shadow:0 12px 40px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);
    --hl:inset 0 1px 0 rgba(255,255,255,.09);
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:15px/1.45 var(--font);background:var(--bg);min-height:100vh;
  background-image:
    radial-gradient(900px 520px at 8% -8%,rgba(64,156,255,.38),transparent 62%),
    radial-gradient(760px 480px at 100% 4%,rgba(255,120,190,.26),transparent 60%),
    radial-gradient(900px 620px at 55% 112%,rgba(52,211,153,.24),transparent 62%);
  background-attachment:fixed;letter-spacing:-.005em}
@media (prefers-color-scheme:dark){
  body{background-image:
    radial-gradient(900px 520px at 8% -8%,rgba(40,100,220,.40),transparent 62%),
    radial-gradient(760px 480px at 100% 4%,rgba(150,60,200,.28),transparent 60%),
    radial-gradient(900px 620px at 55% 112%,rgba(20,150,120,.26),transparent 62%)}
}
button,input,select{font:inherit;color:inherit}
a{color:var(--accent)}

/* ---------- barra superior / navegación ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:10px 22px;
  background:var(--glass);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border-bottom:1px solid var(--glass-border)}
.brand{font-weight:700;font-size:17px;display:flex;align-items:center;gap:9px;letter-spacing:-.02em;white-space:nowrap}
.logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(145deg,#5ac8fa,#0a7aff);color:#fff;font-weight:800;box-shadow:0 4px 12px rgba(10,122,255,.4),inset 0 1px 0 rgba(255,255,255,.5)}
nav{display:flex;gap:2px;margin:0 auto;padding:4px;border-radius:999px;background:var(--fill)}
nav button{display:flex;align-items:center;gap:7px;border:0;background:none;padding:7px 13px;border-radius:999px;cursor:pointer;color:var(--muted);font-weight:600;font-size:14px;transition:.2s}
nav button svg{width:18px;height:18px;flex:none}
nav button:hover{color:var(--ink)}
nav button.on{background:var(--glass-strong);color:var(--accent);box-shadow:0 2px 10px rgba(30,40,90,.12),var(--hl)}
.badge{display:inline-block;min-width:19px;padding:0 6px;border-radius:99px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;text-align:center;line-height:19px}
.fresh{font-size:12.5px;color:var(--muted);white-space:nowrap}
.fresh.old{color:var(--warn);font-weight:600}
.job{font-size:12.5px;background:var(--info-soft);color:var(--info);padding:5px 12px;border-radius:99px;font-weight:600;display:flex;align-items:center;gap:8px;white-space:nowrap}
.job[hidden]{display:none}
.job::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

main{max-width:1140px;margin:0 auto;padding:26px 22px 70px;animation:rise .45s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.loading{padding:70px;text-align:center;color:var(--muted)}
h1{font-size:34px;line-height:1.1;margin:0 0 6px;letter-spacing:-.035em;font-weight:800}
h2{font-size:17px;margin:0 0 12px;letter-spacing:-.02em;font-weight:700}
h3{margin:0 0 4px;font-size:20px;letter-spacing:-.02em}
.sub{color:var(--muted);margin:0 0 22px;font-size:15.5px}
.grid{display:grid;gap:18px}
.g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:1.5fr 1fr} .g2e{grid-template-columns:1fr 1fr}
.g2e,.g2{align-items:start}

/* ---------- tarjetas de vidrio ---------- */
.card{position:relative;background:var(--glass);backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);
  border:1px solid var(--glass-border);border-radius:var(--r);padding:22px;box-shadow:var(--shadow),var(--hl);min-width:0}
.kpi .lbl{font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:600}
.kpi .val{font-size:29px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .note{font-size:12.5px;color:var(--muted);margin-top:6px}
.pos{color:var(--good)} .neg{color:var(--bad)}
.hero{background:linear-gradient(140deg,rgba(10,122,255,.92),rgba(88,86,214,.9));color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:0 16px 44px rgba(10,100,255,.35),inset 0 1px 0 rgba(255,255,255,.45)}
.hero h2{color:#fff;opacity:.92}
.hero .big{font-size:44px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.05}
.hero .small{opacity:.88;font-size:14px}
.hero ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.hero li{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:11px 14px;cursor:pointer;display:flex;gap:10px;align-items:flex-start;transition:.2s;backdrop-filter:blur(10px)}
.hero li:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}
.hero li::before{content:"›";opacity:.75;font-weight:700}
.hero input{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3);color:#fff}
.hero input::placeholder{color:rgba(255,255,255,.7)}
.warn{border-color:rgba(255,159,10,.5);background:linear-gradient(var(--warn-soft),var(--warn-soft)),var(--glass)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row-end{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.sp{flex:1} .mt{margin-top:18px} .stack>*+*{margin-top:11px}
.muted{color:var(--muted)} .small{font-size:12.5px}

/* ---------- controles ---------- */
button.primary{background:var(--accent);color:var(--accent-ink);border:0;padding:11px 20px;border-radius:999px;font-weight:650;cursor:pointer;box-shadow:0 6px 18px rgba(10,122,255,.32);transition:.15s}
button.primary:hover{filter:brightness(1.06);transform:translateY(-1px)} button.primary:active{transform:scale(.97)}
button.ghost{background:var(--glass-strong);border:1px solid var(--line);padding:10px 18px;border-radius:999px;cursor:pointer;font-weight:600;transition:.15s}
button.ghost:hover{background:var(--fill)}
button.ghost.light{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35);color:#fff}
button.sm{padding:7px 14px;font-size:13px}
select,input[type=text],input[type=search],input[type=date],input[type=number],input[type=month],input:not([type]){
  border:1px solid var(--line);background:var(--glass-strong);padding:10px 14px;border-radius:14px;min-width:0;outline:none;transition:.15s}
select:focus,input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
select.cat{max-width:230px;width:100%}
input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;vertical-align:-3px;padding:0}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--fill)}
.seg button{border:0;background:none;padding:7px 16px;cursor:pointer;color:var(--muted);border-radius:999px;font-weight:600;transition:.2s}
.seg button.on{background:var(--glass-strong);color:var(--ink);box-shadow:0 2px 8px rgba(30,40,90,.14),var(--hl)}
.range{width:100%;accent-color:var(--accent);padding:0}
.pill{display:inline-block;padding:3px 11px;border-radius:99px;font-size:12px;font-weight:650;background:var(--fill);color:var(--muted)}
.pill.alta{background:var(--bad-soft);color:var(--bad)} .pill.media{background:var(--warn-soft);color:var(--warn)} .pill.info{background:var(--info-soft);color:var(--info)} .pill.good{background:var(--good-soft);color:var(--good)}

/* ---------- tablas ---------- */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:650;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;white-space:nowrap}
.tbl-wrap{overflow-x:auto}
.cp{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tr.click{cursor:pointer} tr.click:hover td{background:var(--fill)}
.detail td{background:var(--fill)}

/* ---------- barras, listas, alertas ---------- */
.bar{height:9px;border-radius:6px;background:var(--fill);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:6px}
.catrow{display:grid;grid-template-columns:minmax(120px,1.2fr) 2fr auto;gap:12px;align-items:center;padding:7px 0}
.catrow .nm{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.alert{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.alert:last-child{border:0}
.alert .pill{align-self:flex-start;white-space:nowrap;flex:none}
.alert .t{font-weight:650} .alert .d{color:var(--muted);font-size:14px}
.link{color:var(--accent);cursor:pointer;font-weight:650;font-size:13px}
.legend{display:flex;gap:14px;font-size:13px;color:var(--muted);margin-bottom:6px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:4px;margin-right:5px}
svg text{fill:var(--muted);font-size:11px}
.stackbar,.segbar{display:flex;height:24px;border-radius:9px;overflow:hidden;background:var(--fill)}
.stackbar>div{display:grid;place-items:center;color:#fff;font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden}
.segbar{height:22px;border-radius:8px}.segbar>i{display:block;height:100%}
.empty{padding:60px 20px;text-align:center;color:var(--muted)}
.steps{margin:0;padding-left:20px;color:var(--muted)} .steps li{margin:4px 0}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.filters input,.filters select{flex:1 1 150px}
.drop{border:2px dashed var(--line);border-radius:var(--r);padding:50px 20px;text-align:center;color:var(--muted);transition:.2s;cursor:pointer;background:var(--glass);backdrop-filter:blur(20px)}
.drop.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);transform:scale(1.01)}
.drop strong{display:block;font-size:19px;color:var(--ink);margin-bottom:4px}
.tcard{display:grid;gap:6px} .tcard .nm{font-weight:700;font-size:16px} .tcard .tot{font-size:26px;font-weight:800;letter-spacing:-.03em}

/* ---------- clasificar (listas estilo iOS) ---------- */
.guide .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.steps3>div{display:grid;gap:4px;padding:14px;border-radius:var(--r-sm);background:var(--fill)}
.steps3 i{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-style:normal;font-weight:700;display:grid;place-items:center;font-size:13px}
.steps3 b{font-size:15px} .steps3 span{font-size:13.5px;color:var(--muted)} .steps3 em{font-style:normal;color:var(--accent);font-weight:650}
.suggest{background:linear-gradient(var(--good-soft),var(--good-soft)),var(--glass);border-color:rgba(48,209,88,.4)}
.list{display:grid;gap:10px}
.item{background:var(--glass);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid var(--glass-border);border-radius:20px;padding:14px 16px;box-shadow:var(--shadow),var(--hl)}
.item-top{display:flex;gap:12px;align-items:center}
.amt{font-size:19px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px;align-items:center}
.chip{border:1px solid var(--line);background:var(--glass-strong);padding:7px 15px;border-radius:999px;cursor:pointer;font-weight:600;font-size:13.5px;transition:.15s}
.chip:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chip.hint{border-color:var(--good);color:var(--good);box-shadow:0 0 0 3px var(--good-soft)}
.chipsel{border-radius:999px;padding:7px 14px;font-size:13.5px;max-width:200px}
.chipsel.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}

/* ---------- diálogos y avisos ---------- */
dialog{border:1px solid var(--glass-border);border-radius:28px;padding:24px;background:var(--glass-strong);backdrop-filter:blur(36px) saturate(180%);-webkit-backdrop-filter:blur(36px) saturate(180%);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.35);width:min(440px,92vw)}
dialog::backdrop{background:rgba(10,15,30,.35);backdrop-filter:blur(4px)}
dialog[open]{animation:pop .25s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
dialog label{display:block;margin:13px 0 0;font-size:13px;color:var(--muted);font-weight:600}
dialog input,dialog select{display:block;width:100%;margin-top:6px;font-size:16px}
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--glass-strong);backdrop-filter:blur(24px);border:1px solid var(--glass-border);color:var(--ink);padding:11px 20px;border-radius:999px;font-weight:650;box-shadow:var(--shadow);z-index:60;max-width:90vw}

/* ---------- responsive ---------- */
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3,.g2,.g2e{grid-template-columns:1fr}.guide .steps3{grid-template-columns:1fr}}
@media (min-width:761px) and (max-width:1000px){nav button span{display:none}nav button{padding:8px 12px}main{padding:22px 16px 60px}}
@media (max-width:760px){
  body{padding-bottom:92px}
  .top{padding:calc(10px + env(safe-area-inset-top)) 16px 10px;gap:10px;justify-content:space-between}
  .fresh{font-size:11.5px;white-space:normal;text-align:right}
  /* barra de pestañas inferior estilo iOS */
  nav{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;margin:0;padding:6px;border-radius:26px;justify-content:space-between;
    background:var(--glass);backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);border:1px solid var(--glass-border);box-shadow:0 14px 40px rgba(20,30,70,.25),var(--hl)}
  nav button{flex-direction:column;gap:2px;padding:6px 1px;font-size:9.5px;flex:1;min-width:0;border-radius:20px;position:relative}
  nav button svg{width:22px;height:22px}
  nav button .badge{position:absolute;top:0;right:4px;font-size:10px;min-width:16px;line-height:16px;padding:0 4px;margin:0}
  main{padding:18px 16px 30px}
  h1{font-size:30px}
  .g4{grid-template-columns:1fr 1fr;gap:12px} .grid{gap:14px}
  .kpi .val{font-size:22px}
  .hero .big{font-size:36px}
  .card{padding:16px;border-radius:22px}
  .tbl-wrap{overflow:visible}
  table,tbody{display:block;width:100%}
  thead{display:none}
  tr{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;padding:11px 2px;border-bottom:1px solid var(--line)}
  tr:last-child{border-bottom:0}
  td{border:0;padding:0;min-width:0}
  td:first-child{flex:1 1 100%}
  td.num{margin-left:auto}
  .cp{max-width:100%}
  select.cat{max-width:100%;width:100%;margin-top:4px}
  .t-mov td:nth-child(3){order:1;flex:1 1 100%}
  .t-mov td:nth-child(1){order:2;flex:0 0 auto;font-size:13px}
  .t-mov td:nth-child(2){order:3;flex:0 0 auto;font-size:13px}
  .t-mov td:nth-child(5){order:4;margin-left:auto;flex:0 0 auto;font-size:16px}
  .t-mov td:nth-child(4){order:5;flex:1 1 100%}
  .t-mov td:nth-child(6){display:none}
  .detail td{padding:6px}
  .catrow{grid-template-columns:1fr auto;gap:4px 10px}
  .catrow .bar{grid-column:1 / -1;order:3}
  .row-end .primary,.row-end .ghost{flex:1}
  .filters input,.filters select{flex:1 1 100%} .filters input[type=date]{flex:1 1 40%}
  .drop{padding:34px 14px}
  .item-top{align-items:flex-start}
  .toast{bottom:104px}
  .steps3>div{padding:12px}
}

a.ghost{text-decoration:none;display:inline-block;color:var(--ink)}
.selbar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:30;display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:999px;background:var(--glass-strong);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:1px solid var(--glass-border);box-shadow:0 14px 40px rgba(20,30,70,.3)}
.selbar[hidden]{display:none}
.selbar select{max-width:210px;border-radius:999px;padding:8px 14px}
.item.picked{outline:2px solid var(--accent);outline-offset:-2px}
.item-top input.sel{flex:none;margin-right:2px}
dialog.wide{width:min(640px,94vw);max-height:92vh;overflow:auto}
dialog textarea{display:block;width:100%;margin-top:6px;font-size:14px;border:1px solid var(--line);background:var(--glass-strong);padding:10px 14px;border-radius:14px;outline:none;font-family:ui-monospace,Consolas,monospace;resize:vertical}
dialog label.check{display:flex;gap:8px;align-items:flex-start;font-weight:500}
dialog label.check input{width:auto;margin-top:3px}
@media (max-width:760px){.selbar{bottom:100px;left:10px;right:10px;transform:none;border-radius:22px;flex-wrap:wrap}.selbar select{flex:1}}

/* ---------- guía de archivos ---------- */
.ftypes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ftype{display:grid;gap:14px;padding:16px;border-radius:22px;background:var(--fill);border:1px solid transparent;transition:.2s}
.ftype.over{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.01)}
.mock{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(var(--glass),var(--glass))}
.mock svg{display:block;width:100%;height:auto}
.mock-n{position:absolute;left:10px;bottom:8px;font-size:10.5px;color:var(--muted);background:var(--glass-strong);padding:2px 9px;border-radius:99px}
.mock .pg{fill:var(--glass-strong);stroke:var(--line)}
.mock .sk{fill:var(--fill)} .mock .gl{stroke:var(--line);stroke-width:.7}
.mock .hd2{fill:var(--accent)} .mock .caja{fill:none;stroke:var(--line);stroke-width:1}
.mock text{font-size:7.6px;fill:var(--muted)} .mock .th{fill:#fff;font-weight:700;font-size:7.2px}
.mock .tt{fill:var(--ink);font-weight:700;font-size:8.6px} .mock .tm{fill:var(--ink);font-family:ui-monospace,Consolas,monospace;font-size:7.4px}
.mock .escaneo rect{fill:var(--warn)} .mock .escaneo text{fill:#fff;font-weight:700;font-size:7px}
.ft-st{font-size:13px;color:var(--muted);font-weight:600;margin:3px 0 8px}
.ft-st.ok{color:var(--good)}
.ft-dl{margin:0 0 8px;display:grid;gap:2px;font-size:13.5px}
.ft-dl dt{font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:8px}
.ft-dl dd{margin:0}
@media (max-width:1000px){.ftypes{grid-template-columns:1fr}}

/* ---------- efectivo y navegación de 8 pestañas ---------- */
.catrow.cf{padding:7px 8px;border-radius:12px;transition:.15s}
.catrow.cf:hover{background:var(--fill)} .catrow.cf.sel{background:var(--accent-soft);outline:1px solid var(--accent)}
@media (max-width:760px){
  nav button span:not(.badge){font-size:0}
  nav button span[data-s]::after{content:attr(data-s);font-size:9.5px;font-weight:600}
  nav button{padding:6px 0}
  nav button svg{width:21px;height:21px}
}
@media (min-width:761px) and (max-width:1100px){nav button span{display:none}nav button .badge{display:inline-block}}
@media (max-width:1100px){.fresh{white-space:normal;max-width:130px;text-align:right;font-size:11.5px;line-height:1.25}.top{gap:10px;padding-left:14px;padding-right:14px}.brand{font-size:0}.brand .logo{font-size:15px}}

/* ---------- avatar, menú de cuenta, hoja "Más" ---------- */
.avatar{width:38px;height:38px;border-radius:50%;border:1px solid var(--glass-border);background:linear-gradient(145deg,#5ac8fa,#0a7aff);color:#fff;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 4px 14px rgba(10,122,255,.35),inset 0 1px 0 rgba(255,255,255,.5);flex:none;transition:.15s}
.avatar:hover,.avatar.on{transform:scale(1.06);box-shadow:0 0 0 3px var(--accent-soft),0 4px 14px rgba(10,122,255,.4)}
.menu{position:fixed;top:58px;right:18px;z-index:50;min-width:210px;padding:8px;border-radius:20px;background:var(--glass-strong);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:1px solid var(--glass-border);box-shadow:0 20px 50px rgba(20,30,70,.28)}
.menu[hidden],.sheet[hidden]{display:none}
.menu button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:600;text-align:left}
.menu button:hover{background:var(--fill)} .menu svg{width:19px;height:19px;color:var(--accent)} .menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.solo-movil{display:none}
.sheet{position:fixed;inset:0;z-index:45;background:rgba(10,15,30,.35);backdrop-filter:blur(3px);display:flex;align-items:flex-end}
.sheet-in{width:100%;padding:10px 16px calc(100px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;background:var(--glass-strong);backdrop-filter:blur(36px) saturate(180%);-webkit-backdrop-filter:blur(36px) saturate(180%);border:1px solid var(--glass-border);animation:subir .28s cubic-bezier(.2,.9,.3,1)}
@keyframes subir{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet-grip{width:40px;height:5px;border-radius:3px;background:var(--fill);margin:4px auto 14px}
.sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sheet-grid button{display:grid;justify-items:center;gap:6px;padding:12px 4px;border:0;border-radius:18px;background:var(--fill);cursor:pointer;font-size:11.5px;font-weight:600;color:var(--ink)}
.sheet-grid svg{width:26px;height:26px;color:var(--accent)}
@media (max-width:760px){.solo-escritorio{display:none!important}.solo-movil{display:flex}.menu{top:calc(56px + env(safe-area-inset-top));right:12px}nav button{flex:1}}
@media (min-width:761px){.sheet{display:none!important}}

/* ---------- ayudas ⓘ ---------- */
.tip{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:6px;border-radius:50%;border:1px solid var(--muted);color:var(--muted);font:700 10px/1 var(--font);cursor:help;vertical-align:2px;opacity:.75;font-style:normal;text-transform:none;letter-spacing:0}
.tip:hover,.tip:focus{opacity:1;color:var(--accent);border-color:var(--accent);outline:none}
#tipbox{position:fixed;z-index:90;max-width:min(300px,86vw);padding:10px 13px;border-radius:14px;background:var(--glass-strong);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);border:1px solid var(--glass-border);box-shadow:0 14px 36px rgba(20,30,70,.3);font-size:13px;line-height:1.4;font-weight:500;color:var(--ink);pointer-events:none;text-transform:none;letter-spacing:0}
#tipbox[hidden]{display:none}

/* ---------- estadísticas ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.stat{padding:16px 18px;border-radius:22px;background:var(--glass);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid var(--glass-border);box-shadow:var(--shadow),var(--hl)}
.stat .lbl{font-size:12.5px;color:var(--muted);font-weight:650;margin-bottom:6px}
.stat .val{font-size:25px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.stat .sub{font-size:12.5px;color:var(--muted);margin-top:6px}
.stat.pos-t .val{color:var(--good)} .stat.neg-t .val{color:var(--bad)} .stat.warn-t{border-color:rgba(255,159,10,.5)} .stat.warn-t .val{color:var(--warn)}
.d{font-weight:700;font-size:12px} .d.up{color:var(--good)} .d.down{color:var(--bad)}
.dona{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .dona-l{flex:1;min-width:190px;display:grid;gap:6px}
.hb{margin:9px 0} .hb-l{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;margin-bottom:4px} .hb-l .cp{max-width:60%}

/* ---------- perfil, configuración, ayuda ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{display:block;font-size:12.5px;color:var(--muted);font-weight:600}
.form input,.form select{display:block;width:100%;margin-top:5px;font-size:15px}
.avatar-xl{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.5);font-size:28px;font-weight:800}
.card.danger{border-color:rgba(255,69,58,.35)}
details.qa{border-bottom:1px solid var(--line);padding:2px 0}
details.qa:last-child{border:0}
details.qa summary{cursor:pointer;padding:12px 4px;font-weight:650;list-style:none;display:flex;justify-content:space-between;gap:10px}
details.qa summary::after{content:"＋";color:var(--accent);font-weight:700}
details.qa[open] summary::after{content:"−"}
details.qa summary::-webkit-details-marker{display:none}
details.qa>div{padding:0 4px 14px;color:var(--muted);font-size:14.5px;line-height:1.55}
details.qa>div b{color:var(--ink)}
code{background:var(--fill);padding:1px 6px;border-radius:6px;font-size:12.5px}
@media (max-width:760px){.form{grid-template-columns:1fr}.sheet-grid{grid-template-columns:repeat(3,1fr)}.stats{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:13px 14px}.stat .val{font-size:20px}}

/* ---------- Más (hoja en celular, panel en escritorio), recordatorios, formularios genéricos ---------- */
@media (min-width:761px){
  .oculto-esc{display:none}
  .sheet{display:flex!important;background:rgba(10,15,30,.25);align-items:flex-start;justify-content:center}
  .sheet[hidden]{display:none!important}
  .sheet-in{width:min(620px,92vw);margin-top:70px;padding:18px;border-radius:26px;animation:pop .22s cubic-bezier(.2,.9,.3,1.2)}
  .sheet-grip{display:none} .sheet-grid{grid-template-columns:repeat(4,1fr)}
}
.rec{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)} .rec:last-child{border:0}
.rec-f{min-width:48px;padding:3px 0;text-align:center;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:13px}
fieldset.checks{border:1px solid var(--line);border-radius:14px;margin:14px 0 0;padding:10px 12px;max-height:210px;overflow:auto}
fieldset.checks legend{font-size:13px;color:var(--muted);font-weight:600;padding:0 6px}
fieldset.checks label.check{display:flex;gap:8px;margin:6px 0;color:var(--ink);font-weight:500;font-size:14px;align-items:center}
dialog .seg{display:flex} dialog .seg button{flex:1}
@media (max-width:760px){.t-cli td:nth-child(1){order:1;flex:1 1 100%}.t-cli td:nth-child(2){order:2}.t-cli td:nth-child(3){order:3;font-size:13px}.t-cli td:nth-child(4){order:4;font-size:13px}.t-cli td:nth-child(5){order:5;font-size:13px}.t-cli td:nth-child(6){order:6;margin-left:auto}.t-cli td:nth-child(7){order:7;flex:1 1 100%;text-align:right}.sheet-grid{grid-template-columns:repeat(3,1fr)}}

.dona svg{max-width:100%;height:auto}.dona{justify-content:center}
@media (max-width:420px){.hero .big{font-size:30px}.stat .val{font-size:18px}}