:root {
    --bg:var(--theme-bg);
    --card:var(--theme-surface);
    --card2:var(--theme-surface-2);
    --border:var(--theme-border);
    --green:var(--theme-accent);
    --green-soft:var(--theme-accent-soft);
    --danger:var(--theme-danger);
    --orange:var(--theme-orange);
    --text:var(--theme-text);
    --soft:var(--theme-muted);
    --nav-height:76px;
}

* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body {
    min-height:100dvh;
    padding-bottom:calc(var(--nav-height) + 18px + env(safe-area-inset-bottom));
    background:var(--theme-bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
button { font:inherit; -webkit-tap-highlight-color:transparent; }

.app {
    width:100%; max-width:760px; min-height:100dvh; margin:0 auto;
    padding:calc(12px + env(safe-area-inset-top)) clamp(12px,3vw,24px) 24px;
}

.topbar { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; align-items:center; margin-bottom:9px; }
.brand-icon { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--theme-border-strong); border-radius:13px; background:var(--green-soft); color:var(--green); font-size:20px; font-weight:950; }
.topbar-title { min-width:0; }
.topbar-title span { display:block; margin-bottom:2px; color:var(--green); font-size:13px; font-weight:900; letter-spacing:.8px; }
.topbar-title strong { display:block; font-size:clamp(17px,2.7vw,21px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-chip { min-width:28px; height:28px; display:grid; place-items:center; padding:0 7px; border-radius:999px; background:var(--green-soft); color:var(--green); font-size:13px; font-weight:900; }

.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-bottom:8px; }
.summary-grid article { min-width:0; padding:9px; border:1px solid var(--border); border-radius:11px; background:var(--theme-surface); }
.summary-grid span,.summary-grid strong { display:block; }
.summary-grid span { margin-bottom:3px; color:var(--soft); font-size:13px; }
.summary-grid strong { font-size:17px; }
.green{color:var(--green)!important}.danger{color:var(--danger)!important}.orange{color:var(--orange)!important}

.info-banner { display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px; align-items:start; padding:9px; margin-bottom:8px; border:1px solid var(--theme-border); border-radius:11px; background:var(--theme-surface-2); }
.info-banner>span { width:26px; height:26px; display:grid; place-items:center; border-radius:8px; background:var(--green-soft); color:var(--green); font-weight:900; }
.info-banner p { margin:0; color:var(--soft); font-size:13px; line-height:1.45; }
.info-banner strong { color:var(--theme-text-2); }

.filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin-bottom:8px; }
.filter { min-height:35px; border:1px solid var(--border); border-radius:9px; background:var(--card); color:var(--soft); font-size:13px; cursor:pointer; }
.filter.active { border-color:var(--theme-border-strong); background:var(--green-soft); color:var(--green); }

.alert-list { display:flex; flex-direction:column; gap:7px; }
.alert-card { padding:10px; border:1px solid var(--border); border-radius:13px; background:var(--theme-surface); }
.alert-card.late { border-color:rgba(255,102,87,.21); background:var(--theme-danger-soft); }
.alert-card.promise { border-color:rgba(106,170,255,.15); }
.alert-head { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:8px; align-items:center; }
.alert-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:var(--green-soft); color:var(--green); font-weight:900; }
.alert-card.late .alert-icon { background:rgba(255,102,87,.09); color:var(--danger); }
.alert-card.promise .alert-icon { background:rgba(106,170,255,.09); color:var(--theme-info); }
.alert-main { min-width:0; }
.alert-main strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.alert-main span { display:block; margin-top:2px; color:var(--soft); font-size:13px; }
.status-chip { padding:3px 6px; border-radius:999px; background:var(--green-soft); color:var(--green); font-size:13px; font-weight:900; }
.status-chip.late { background:rgba(255,102,87,.09); color:var(--theme-danger); }
.status-chip.promise { background:rgba(106,170,255,.09); color:var(--theme-info); }

.amount-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin-top:8px; }
.amount-grid>div { min-width:0; padding:7px; border:1px solid var(--theme-border); border-radius:8px; background:rgba(0,0,0,.08); }
.amount-grid span,.amount-grid strong { display:block; }
.amount-grid span { margin-bottom:2px; color:var(--soft); font-size:13px; }
.amount-grid strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.amount-grid .expected strong { color:var(--green); }
.amount-grid .mora strong { color:var(--theme-danger); }

.alert-note { margin:7px 0 0; color:var(--soft); font-size:13px; line-height:1.42; }
.alert-actions { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:5px; margin-top:8px; }
.alert-actions button { min-height:36px; border-radius:9px; font-size:13px; font-weight:850; cursor:pointer; }
.whatsapp-button { border:0; background:var(--green); color:var(--theme-on-accent); }
.pay-button { border:1px solid var(--theme-border); background:var(--green-soft); color:var(--green); }
.view-button { border:1px solid var(--border); background:var(--theme-surface-2); color:var(--theme-text); }

.empty-state { display:none; padding:24px 14px; border:1px dashed var(--theme-border); border-radius:13px; text-align:center; }
.empty-state.visible { display:block; }
.empty-state>div { width:42px; height:42px; display:grid; place-items:center; margin:0 auto 7px; border-radius:11px; background:var(--green-soft); color:var(--green); font-weight:900; }
.empty-state strong { display:block; margin-bottom:4px; font-size:13px; }
.empty-state p { margin:0; color:var(--soft); font-size:13px; }

.history-card { margin-top:12px; padding:10px; border:1px solid var(--border); border-radius:13px; background:var(--card); }
.section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:7px; }
.section-head span { color:var(--green); font-size:13px; font-weight:900; letter-spacing:.7px; }
.section-head h2 { margin:2px 0 0; font-size:13px; }
.section-head>span { min-width:25px; height:25px; display:grid; place-items:center; border-radius:999px; background:var(--green-soft); }
.reminder-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:7px 1px; border-top:1px solid var(--theme-border); }
.reminder-row:first-child { border-top:0; }
.reminder-row strong,.reminder-row span { display:block; }
.reminder-row strong { font-size:13px; }
.reminder-row span { margin-top:2px; color:var(--soft); font-size:13px; }
.reminder-row time { color:var(--soft); font-size:13px; }
.history-empty { padding:9px; color:var(--soft); font-size:13px; text-align:center; }
.history-empty.hidden { display:none; }

.bottom-nav { position:fixed; z-index:100; left:50%; bottom:0; width:min(100%,760px); min-height:calc(var(--nav-height) + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr 1fr 72px 1fr 1fr; align-items:center; padding:7px 14px calc(7px + env(safe-area-inset-bottom)); transform:translateX(-50%); border-top:1px solid var(--border); background:rgba(5,8,7,.95); }
.nav-button { display:flex; flex-direction:column; align-items:center; gap:2px; border:0; background:transparent; color:var(--theme-muted); }
.nav-button.active { color:var(--green); }
.nav-button span { font-size:20px; }
.nav-button small { font-size:13px; }
.add-button { width:56px; height:56px; display:grid; place-items:center; margin:-23px auto 0; border:5px solid var(--bg); border-radius:50%; background:var(--theme-accent); color:var(--theme-on-accent); font-size:32px; }
.add-button.open { transform:rotate(45deg); }
.quick-menu { position:fixed; z-index:120; left:50%; bottom:calc(86px + env(safe-area-inset-bottom)); width:min(calc(100% - 28px),420px); display:grid; gap:5px; padding:8px; opacity:0; visibility:hidden; transform:translate(-50%,12px); border:1px solid var(--theme-border); border-radius:14px; background:var(--theme-surface-2); transition:.18s ease; }
.quick-menu.open { opacity:1; visibility:visible; transform:translate(-50%,0); }
.quick-menu button { min-height:42px; border:0; border-radius:9px; background:var(--theme-surface); color:var(--theme-text); text-align:left; padding:0 11px; }
.toast { position:fixed; z-index:400; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); max-width:calc(100% - 30px); padding:9px 13px; opacity:0; visibility:hidden; transform:translate(-50%,10px); border:1px solid var(--theme-border-strong); border-radius:999px; background:var(--theme-surface-2); color:var(--theme-text); font-size:13px; transition:.2s ease; }
.toast.show { opacity:1; visibility:visible; transform:translate(-50%,0); }

@media (max-width:520px) {
    .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .amount-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:380px) {
    .alert-actions { grid-template-columns:1fr; }
}


/* PASO 37 — piso de legibilidad en metadatos operativos */
.eyebrow,.topbar-title span{font-size:13px!important}
small,.loan-finance span,.movement-breakdown span,.closure-breakdown span,.aging-card span,.aging-card small,.movement-footer,.loan-due{font-size:13px!important;line-height:1.35}