/* ===========================================================================
   GreyCell Caja — Black Gold (mobile-first PWA)
   Tokens alineados al design system del CRM.
=========================================================================== */
:root{
  --bg:#050608; --bg-deep:#000; --surface:#0E0F12; --surface-2:#16181C; --input:#0A0B0D;
  --gold:#C9A86A; --gold-hi:#D4B57A; --gold-tint:rgba(201,168,106,.12);
  --bd:rgba(201,168,106,.16); --bd-2:rgba(201,168,106,.32); --bd-focus:rgba(201,168,106,.55);
  --tx:#F5F6F7; --tx-mut:#A8ADB5; --tx-faint:#6B7280;
  --ok:#6B9B7A; --warn:#C8954A; --err:#B5564E; --info:#5B7A99;
  --r:14px; --r-sm:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:Inter,system-ui,-apple-system,sans-serif; font-size:15px; line-height:1.45;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color:transparent;
}
a{color:var(--gold); text-decoration:none}
h1{font-size:21px; letter-spacing:-.02em; margin:0}
h2{font-size:15px; margin:0; letter-spacing:-.01em}
.mono{font-family:'JetBrains Mono',monospace}

/* --- Topbar --- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background:rgba(5,6,8,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bd);
}
.brand strong{color:var(--tx); font-weight:700; letter-spacing:-.02em}
.brand span{color:var(--gold); font-weight:600; margin-left:5px}
.brand-lg{font-size:26px}
.logout button{
  background:transparent; border:1px solid var(--bd-2); color:var(--tx-mut);
  width:38px; height:38px; border-radius:50%; font-size:17px; cursor:pointer;
}
.logout button:active{background:var(--surface-2)}

/* --- Content --- */
.content{padding:16px; max-width:680px; margin:0 auto; animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hi{color:var(--tx-mut); margin:2px 0 16px; font-size:16px}
.hi strong{color:var(--tx)}
.page-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px}
.link-back{font-size:14px; color:var(--tx-mut)}
.opt{color:var(--tx-faint); font-weight:400; font-size:12px}

/* --- Flash --- */
.flash{background:var(--gold-tint); border:1px solid var(--bd-2); color:var(--tx);
  padding:11px 14px; border-radius:var(--r-sm); margin-bottom:14px; font-size:14px}
.flash-err{background:rgba(181,86,78,.14); border-color:rgba(181,86,78,.4); color:#E8B4AE}

/* --- KPIs --- */
.kpis{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px}
.kpi{
  display:flex; flex-direction:column; gap:3px; padding:15px 14px;
  background:var(--surface); border:1px solid var(--bd-2); border-radius:var(--r);
  position:relative; overflow:hidden;
}
.kpi::before{content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}
.kpi-in{grid-column:1 / -1}
.kpi-lbl{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--tx-faint)}
.kpi-val{font-size:23px; font-weight:700; font-family:'JetBrains Mono',monospace; letter-spacing:-.02em}
.kpi-meta{font-size:12px; color:var(--tx-mut)}
.kpi-debt .kpi-val{color:var(--gold-hi)}
.kpi-owe .kpi-val{color:#E0A85C}
.kpi-in .kpi-val{color:var(--ok)}

/* --- Botones --- */
.btn-primary,.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:13px 16px; border-radius:var(--r-sm); font-size:15px; font-weight:600;
  border:1px solid transparent; cursor:pointer; text-align:center;
}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-hi)); color:#050608}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:var(--surface); border-color:var(--bd-2); color:var(--tx)}
.btn-block{width:100%; margin-top:8px; padding:15px}
.btn-sm{padding:9px 13px; font-size:14px}
.quick{display:flex; flex-direction:column; gap:8px; margin-bottom:20px}
.quick .btn-primary{padding:15px}

/* --- Cards / secciones --- */
.card{background:var(--surface); border:1px solid var(--bd); border-radius:var(--r);
  padding:6px 14px 8px; margin-bottom:14px}
.card-h{display:flex; align-items:center; justify-content:space-between; padding:12px 0 6px}
.card-h h2{color:var(--tx)} .card-h a{font-size:13px; color:var(--tx-mut)}

/* --- Filas (rows) --- */
.row{display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--bd)}
.card .row:first-of-type, .content > .row:first-of-type{border-top:0}
.content > .row{background:var(--surface); border:1px solid var(--bd); border-radius:var(--r-sm);
  padding:12px 14px; margin-bottom:8px}
.row-main{flex:1; min-width:0}
.row-main strong{display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row-main small{color:var(--tx-mut); font-size:12.5px}
.row-main small a{color:var(--info)}
.row-end{display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0}
.row-actions{display:flex; align-items:center; gap:5px}
.is-paid{opacity:.55}
.is-paid .row-main strong{text-decoration:line-through; text-decoration-color:var(--tx-faint)}

/* montos */
.amt{font-family:'JetBrains Mono',monospace; font-weight:600; font-size:15px}
.amt-debt{color:var(--gold-hi)} .amt-owe{color:#E0A85C}
.amt-late{color:var(--err)} .amt-ok{color:var(--ok)}
.late{color:var(--err)}

/* mini botones de acción */
.mini-ok,.mini-x{border:1px solid var(--bd-2); background:var(--input); color:var(--tx-mut);
  border-radius:8px; padding:6px 9px; font-size:13px; cursor:pointer; line-height:1}
.mini-ok{color:var(--ok); border-color:rgba(107,155,122,.4)}
.mini-ok:active,.mini-x:active{transform:translateY(1px)}
.mini-x{color:var(--tx-faint)}
form{display:inline}

.badge-ok{font-size:12px; color:var(--ok)}
.badge-pot{font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  background:var(--gold-tint); color:var(--gold); padding:2px 7px; border-radius:20px; margin-left:4px}
.star{color:var(--gold)}

.empty{color:var(--tx-faint); text-align:center; padding:14px; font-size:14px}
.empty.big{padding:40px 14px; font-size:15px; line-height:1.8}

/* --- Tabs --- */
.tabs{display:flex; gap:6px; margin-bottom:14px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.tabs a{flex-shrink:0; padding:8px 14px; border-radius:20px; font-size:13.5px;
  background:var(--surface); border:1px solid var(--bd); color:var(--tx-mut); white-space:nowrap}
.tabs a.on{background:var(--gold-tint); border-color:var(--bd-2); color:var(--gold)}

/* --- Formularios --- */
.form{display:flex; flex-direction:column}
.form label{margin:14px 0 6px; color:var(--tx-mut); font-size:13px}
.form label.check{flex-direction:row; display:flex; align-items:center; gap:9px; color:var(--tx); margin-top:18px}
.form label.check input{width:auto}
input,select,textarea{
  width:100%; padding:13px 14px; font-size:16px; /* 16px evita zoom en iOS */
  background:var(--input); border:1px solid var(--bd-2); border-radius:var(--r-sm);
  color:var(--tx); font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--bd-focus)}
textarea{resize:vertical}

/* --- Bottom tab bar (estilo app) --- */
.tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  display:flex; justify-content:space-around;
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  background:rgba(10,11,13,.92); backdrop-filter:blur(14px);
  border-top:1px solid var(--bd);
}
.tabbar a{display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--tx-faint); font-size:10.5px; padding:4px 8px; min-width:56px; border-radius:10px}
.tabbar a .ic{font-size:20px; line-height:1}
.tabbar a.on{color:var(--gold)}
.tabbar a.on .ic{filter:drop-shadow(0 0 6px rgba(201,168,106,.5))}

/* --- Login --- */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh;
  padding:20px; padding-bottom:20px}
.login-card{width:100%; max-width:380px; background:var(--surface);
  border:1px solid var(--bd-2); border-radius:18px; padding:30px 24px}
.login-card .brand{text-align:center; display:block; margin-bottom:4px}
.login-sub{text-align:center; color:var(--tx-mut); font-size:14px; margin:0 0 22px}
.login-card label{display:block; margin:14px 0 6px; color:var(--tx-mut); font-size:13px}

/* --- Vault (caja fuerte) --- */
.vault-box{background:var(--surface); border:1px solid var(--bd-2); border-radius:var(--r); padding:18px 16px; margin-bottom:14px}
.vault-intro{color:var(--tx-mut); font-size:14px; margin:0 0 14px}
.pw{font-family:'JetBrains Mono',monospace; color:var(--gold-hi); letter-spacing:.5px}

/* --- Barras de reportes --- */
.bar-row{padding:9px 0; border-top:1px solid var(--bd)}
.bar-row:first-child{border-top:0}
.bar-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; font-size:14px}
.bar-top small{color:var(--tx-faint)}
.bar-top strong{font-family:'JetBrains Mono',monospace; color:var(--gold-hi)}
.bar{height:8px; background:var(--input); border-radius:6px; overflow:hidden}
.bar-fill{height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-hi)); border-radius:6px;
  animation:grow 1s cubic-bezier(.2,.8,.2,1)}
@keyframes grow{from{width:0 !important}}
.bar-sub{font-size:11.5px; color:var(--ok); margin-top:4px}
.link-open{font-size:12px; color:var(--info)}

/* --- Accesos de dinero (grid 2x2) --- */
.money-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px}
.money-link{display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 10px;
  background:var(--surface); border:1px solid var(--bd-2); border-radius:var(--r); font-size:24px;
  transition:transform .15s ease, border-color .15s ease}
.money-link span{font-size:13px; color:var(--tx); font-weight:600}
.money-link:active{transform:scale(.96); border-color:var(--bd-focus)}

/* ===========================================================================
   PREMIUM — transiciones de página (estilo app) + feedback táctil + movimiento
=========================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root){ animation: vtOut .16s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root){ animation: vtIn .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vtOut{ to{ opacity:0; transform:translateY(-8px) scale(.99); } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(12px) scale(.99); } }

/* feedback al tocar: todo lo presionable se hunde un poco */
.btn-primary,.btn-ghost,.btn-sm,.kpi,.money-link,.mini-ok,.mini-x,.tabs a,.tabbar a,.logout button,
input,select,textarea{
  transition:transform .13s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.btn-primary:active,.btn-ghost:active,.btn-sm:active,.money-link:active,.kpi:active,
.mini-ok:active,.mini-x:active{ transform:scale(.955); }
.tabbar a:active{ transform:scale(.85); }
.tabs a:active{ transform:scale(.93); }
.btn-primary:hover{ box-shadow:0 8px 24px rgba(201,168,106,.28); }
.card:active{ transform:scale(.995); }
a{ -webkit-tap-highlight-color:transparent; }

/* entrada suave de las tarjetas (ligero, no satura) */
.kpi,.card{ animation:rise .38s cubic-bezier(.2,.8,.2,1) both; }
.kpi:nth-child(2){ animation-delay:.04s } .kpi:nth-child(3){ animation-delay:.08s }
.card:nth-of-type(2){ animation-delay:.05s } .card:nth-of-type(3){ animation-delay:.09s }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } }

/* barra inferior: el activo "respira" suave */
.tabbar a.on .ic{ animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }

@media (prefers-reduced-motion: reduce){
  *,::view-transition-old(root),::view-transition-new(root){ animation:none !important; transition:none !important; }
}
.tabbar a .ic{font-size:19px}  /* un pelín más chico: ahora son 6 tabs */
.tabbar a{min-width:50px; padding:4px 5px}