@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#1c2434;
  --ink-soft:#5a6478;
  --paper:#f3f4f7;
  --card:#ffffff;
  --line:#e2e5ea;
  --brand:#22315c;
  --brand-dark:#182448;
  --gold:#a4762c;
  --gold-bg:#f7efdf;
  --ok:#1f7a4d;
  --ok-bg:#e8f4ee;
  --warn:#b5490a;
  --warn-bg:#fdece1;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3,.serif{font-family:'Source Serif 4',Georgia,serif;}
a{color:var(--brand);}

/* ---------- Layout autenticado ---------- */
.shell{max-width:560px;margin:0 auto;min-height:100vh;padding-bottom:84px;}

.topbar{
  background:var(--brand);
  color:#fff;
  padding:16px 18px 14px;
  border-radius:0 0 16px 16px;
  position:relative;
}
.topbar .eyebrow{font-size:.66rem;letter-spacing:.04em;color:#aab4d4;margin:0 0 2px;text-transform:uppercase;}
.topbar h1{font-size:1.15rem;font-weight:600;margin:0;color:#fff;}
.topbar .sub{font-size:.76rem;color:#aab4d4;margin-top:2px;}
.topbar .gear{position:absolute;top:16px;right:14px;background:rgba(255,255,255,.14);border:none;color:#fff;width:32px;height:32px;border-radius:9px;text-decoration:none;display:flex;align-items:center;justify-content:center;font-size:.95rem;}
.topbar-cuenta{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  border-radius:9px;padding:6px 10px;margin-top:9px;font-size:.74rem;color:#fff;
  cursor:pointer;
}
.topbar-cuenta b{font-family:'Source Serif 4',serif;}
.topbar-cuenta .copy-ic{opacity:.85;flex-shrink:0;}

.content{padding:12px;}

.card{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px 14px;margin-bottom:10px;}
.card h2{font-size:.92rem;margin:0 0 8px;font-weight:600;}

.alert-banner{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;margin-bottom:10px;font-size:.82rem;line-height:1.35;}
.alert-banner.warn{background:var(--warn-bg);color:var(--warn);border:1px solid #f3cdb3;}
.alert-banner.ok{background:var(--ok-bg);color:var(--ok);border:1px solid #bfe3cf;}
.alert-banner.info{background:#eef1fb;color:var(--brand);border:1px solid #cfd6ee;}
.alert-banner b{display:block;font-size:.86rem;margin-bottom:1px;}

.resumen-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.resumen-item{border:1px solid var(--line);border-radius:11px;padding:9px 10px;background:#f8f9fb;}
.resumen-item .label{font-size:.68rem;color:var(--ink-soft);margin-bottom:2px;}
.resumen-item .valor{font-size:1.1rem;font-weight:700;font-family:'Source Serif 4',serif;}
.resumen-item.pend{background:var(--warn-bg);border-color:#f3cdb3;}
.resumen-item.pend .valor{color:var(--warn);}
.resumen-item.pagado{background:var(--ok-bg);border-color:#bfe3cf;}
.resumen-item.pagado .valor{color:var(--ok);}

.card.tone-blue{background:#eef2fb;border-color:#cfd9f2;}
.card.tone-gold{background:var(--gold-bg);border-color:#ecdbb5;}
.card.tone-navy{background:var(--brand);border-color:var(--brand-dark);color:#fff;}
.card.tone-navy h2{color:#fff;}
.card.tone-navy .resumen-item{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);}
.card.tone-navy .resumen-item .label{color:#c7cee3;}
.card.tone-navy .resumen-item .valor{color:#fff;}

/* ---------- Selector de tipo (Pensión / Adicional) ---------- */
.tipo-toggle-wrap{display:flex;gap:5px;background:#eef0f5;padding:5px;border-radius:13px;}
.tipo-btn{flex:1;padding:10px 6px;border-radius:9px;border:none;background:transparent;color:var(--ink-soft);
  font-weight:600;font-size:.86rem;cursor:pointer;font-family:inherit;transition:background .15s,color .15s;
  display:flex;align-items:center;justify-content:center;gap:5px;}
.tipo-btn.active{background:var(--brand);color:#fff;}

.row-line{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:.84rem;}
.row-line:last-child{border-bottom:none;}
.row-line .nombre{font-weight:600;}
.row-line .detalle{color:var(--ink-soft);font-size:.78rem;text-align:right;}

/* ---------- Formularios ---------- */
label{display:block;font-size:.78rem;color:var(--ink-soft);margin:12px 0 5px;}
label:first-child{margin-top:0;}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  font-size:.94rem;font-family:inherit;background:#fff;color:var(--ink);
}
textarea{resize:vertical;min-height:60px;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 18px;border-radius:11px;border:none;font-weight:600;font-size:.93rem;cursor:pointer;font-family:inherit;text-decoration:none;}
.btn-primary{background:var(--brand);color:#fff;width:100%;margin-top:16px;}
.btn-primary:hover{background:var(--brand-dark);}
.btn-ghost{background:transparent;color:var(--brand);border:1px solid var(--line);}
.btn-danger-ghost{background:transparent;color:var(--warn);border:1px solid #f3cdb3;font-size:.78rem;padding:6px 10px;}
.btn-add{background:#eef0f5;color:var(--brand);border:1px dashed #c3c9d9;width:100%;margin-top:6px;}
.btn-block{width:100%;}

.file-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1.5px dashed #c3c9d9;border-radius:12px;padding:22px 10px;color:var(--ink-soft);font-size:.82rem;cursor:pointer;background:#fafbfc;}
.file-preview{width:100%;border-radius:12px;margin-top:10px;display:block;}

/* ---------- Historial ---------- */
.dep-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:flex-start;}
.dep-item:last-child{border-bottom:none;}
.dep-thumb{width:52px;height:52px;border-radius:9px;object-fit:cover;flex-shrink:0;background:#eef0f5;}
.dep-thumb.noimg{display:flex;align-items:center;justify-content:center;color:#a9b0c0;font-size:1.3rem;}
.dep-body{flex:1;min-width:0;}
.dep-top{display:flex;justify-content:space-between;gap:8px;}
.dep-monto{font-weight:700;font-family:'Source Serif 4',serif;font-size:1.02rem;}
.dep-fecha{font-size:.76rem;color:var(--ink-soft);white-space:nowrap;}
.dep-meta{font-size:.78rem;color:var(--ink-soft);margin-top:2px;}
.dep-nota{font-size:.8rem;margin-top:3px;}

.empty{text-align:center;padding:40px 20px;color:var(--ink-soft);}
.empty .icon{font-size:2rem;margin-bottom:8px;}

.hijo-config-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.hijo-config-row input{flex:1;}
.hijo-config-row .rm{background:none;border:none;color:var(--warn);font-size:1.2rem;cursor:pointer;padding:4px 8px;}

/* ---------- Bottom nav ---------- */
.bottomnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;background:#fff;border-top:1px solid var(--line);display:flex;padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:20;}
.navbtn{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;color:#9aa2b3;font-size:.68rem;font-family:inherit;cursor:pointer;text-decoration:none;}
.navbtn .ic{font-size:1.15rem;}
.navbtn.active{color:var(--brand);font-weight:600;}

/* ---------- Páginas públicas (login / registro) ---------- */
.auth-bg{
  min-height:100vh;
  background:
    radial-gradient(circle at 15% 8%, rgba(164,118,44,.18), transparent 45%),
    var(--brand-dark);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.auth-card{background:#fff;border-radius:18px;max-width:400px;width:100%;padding:32px 28px;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);position:relative;overflow:hidden;}
.auth-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--gold),var(--brand));}
.auth-badge{width:46px;height:46px;border-radius:50%;background:var(--gold-bg);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:14px;}
.auth-card h1{font-size:1.35rem;margin:0 0 4px;}
.auth-card p.lead{color:var(--ink-soft);font-size:.86rem;margin:0 0 20px;}
.auth-foot{text-align:center;margin-top:18px;font-size:.85rem;color:var(--ink-soft);}
.auth-error{background:var(--warn-bg);color:var(--warn);border:1px solid #f3cdb3;padding:10px 14px;border-radius:10px;font-size:.85rem;margin-bottom:14px;}
.auth-success{background:var(--ok-bg);color:var(--ok);border:1px solid #bfe3cf;padding:10px 14px;border-radius:10px;font-size:.85rem;margin-bottom:14px;}

@media print{
  .bottomnav,.no-print{display:none !important;}
  body{background:#fff;}
}