:root {
    --bg: #0a141f;
    --panel: #101e2e;
    --panel-alt: #16283b;
    --line: #223447;
    --ink: #f4f7fa;
    --muted: #9fb4c8;
    --red: #ff6b6b;
    --red-bg: #2c1418;
    --green: #4ade80;
    --orange: #f4a261;
    --teal: #2dd4bf;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.shell { width: min(100% - 28px, 640px); margin: 0 auto; padding: 20px 0 48px; }

h1, h2, h3, p { margin: 0; }
h1 { font-size: 2rem; line-height: 1; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }

.eyebrow {
    color: var(--muted);
    font: 700 .7rem/1.2 Arial, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-bottom: 18px; }
.topbar > div { flex: 1 1 160px; min-width: 0; }
.readonly { flex: 0 0 auto; margin-left: auto; white-space: nowrap; font: 700 .78rem Arial, sans-serif; color: var(--teal); }
.readonly span { font-size: .6rem; vertical-align: 1px; }

.panel {
    margin-top: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
}

.alert-panel {
    border: 1px solid #5a2126;
    background: var(--red-bg);
}
.alert-panel h2 { color: var(--red); }

.section-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; }
.section-heading > div:first-child { flex: 1 1 170px; min-width: 0; }
.section-heading > .period,
.section-heading > .status { flex: 0 0 auto; margin-left: auto; }

.period { color: var(--muted); font: 700 .8rem Arial, sans-serif; white-space: nowrap; }

.helper {
    margin-top: 12px;
    color: var(--muted);
    font-size: .88rem;
    font-family: Arial, sans-serif;
}
.helper strong { color: var(--ink); }

.obligation {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px 14px;
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
    font-family: Arial, sans-serif;
}
.obligation:first-of-type { border-top: none; padding-top: 0; }
/* Bloque de titulo: puede ser largo, siempre cede ancho y hace wrap primero. */
.obligation > div:first-child { flex: 1 1 190px; min-width: 0; }
.obligation div span { display: block; margin-top: 3px; color: var(--muted); font-size: .82rem; }
.obligation > div:first-child > strong { font-size: 1rem; white-space: normal; word-break: break-word; }
/* El monto nunca se corta: si no cabe al lado del titulo, baja a su propia
   linea (flex-wrap) y queda pegado al borde derecho (margin-left: auto). */
.obligation > strong:last-child,
.obligation > .charge-right {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
}
.obligation > strong:last-child { font-size: 1.05rem; white-space: nowrap; }
.tiny { font-size: .74rem !important; margin-top: 4px !important; }

.charge-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.charge-right strong { font-size: 1.05rem; white-space: nowrap; }

.value-negative { color: var(--red); }
.value-alert { color: var(--orange); }
.value-pending { color: var(--muted); font-size: .95rem !important; }

.cash-value {
    display: block;
    margin: 2px 0 14px;
    font-size: 2.5rem;
    font-weight: 700;
}

.breakdown { border-top: 1px solid var(--line); padding-top: 10px; }
.breakdown-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 10px;
    padding: 7px 0;
    font-family: Arial, sans-serif;
    font-size: .85rem;
    color: var(--muted);
}
.breakdown-row span { flex: 1 1 190px; min-width: 0; }
.breakdown-row strong {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
    color: var(--ink);
    font-size: .95rem;
}

.chart-svg { width: 100%; height: auto; margin-bottom: 10px; }
.svg-value { fill: var(--muted); font: 700 9px Arial, sans-serif; }
.svg-label { fill: var(--ink); font: 700 10px Arial, sans-serif; }
.svg-baseline { stroke: var(--line); stroke-width: 1; }

.business-list { border-top: 1px solid var(--line); margin-top: 8px; }
.business-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.business-title { display: flex; align-items: center; gap: 11px; flex: 1 1 200px; min-width: 0; }
.business-mark { display: block; width: 8px; height: 38px; border-radius: 4px; background: var(--mark); flex-shrink: 0; }
.business-title span { display: block; margin-top: 2px; color: var(--muted); font-family: Arial, sans-serif; font-size: .78rem; }
.business-row > strong { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.offbook { border-top: 1px dashed var(--line); padding-top: 12px; }

.progress-track {
    margin-top: 6px;
    height: 14px;
    border-radius: 7px;
    background: var(--panel-alt);
    overflow: hidden;
}
.progress-fill { height: 100%; background: var(--teal); border-radius: 7px; min-width: 3px; }

footer {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--muted);
    font-family: Arial, sans-serif;
    font-size: .78rem;
}

@media (min-width: 480px) {
    h1 { font-size: 2.3rem; }
    .cash-value { font-size: 2.8rem; }
}

/* --- Entrada con clave --- */
.login-body {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.login-shell { width: min(100%, 360px); text-align: center; }
.login-shell h1 { margin: 6px 0 24px; font-size: 1.8rem; }
.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}
.login-form label {
    font: 700 .78rem Arial, sans-serif;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.login-form input {
    width: 100%;
    padding: 14px 16px;
    font-size: 1.1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-alt);
    color: var(--ink);
}
.login-form input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.login-form button {
    padding: 14px 16px;
    font: 700 1rem Arial, sans-serif;
    color: #06251f;
    background: var(--teal);
    border: none;
    border-radius: 8px;
}
.login-error {
    margin: 0;
    padding: 10px 12px;
    color: var(--red);
    background: var(--red-bg);
    border: 1px solid #5a2126;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: .88rem;
}
.login-note { text-align: center; margin-top: 18px; }

/* --- Salir --- */
.logout-row { text-align: right; margin: -8px 0 4px; }
.logout-link {
    color: var(--muted);
    font-family: Arial, sans-serif;
    font-size: .8rem;
    text-decoration: underline;
}