:root {
  --navy: #111b31; --navy-soft: #1b2946; --blue: #315fdf; --blue-dark: #214aba;
  --canvas: #f5f7fb; --surface: #fff; --border: #e4e9f2; --text: #17223a;
  --muted: #6f7a91; --teal: #159b89; --amber: #d79439; --red: #c94d59;
  --radius: 18px; --shadow: 0 12px 36px rgba(32,49,83,.045),0 2px 8px rgba(32,49,83,.025);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font:14px/1.5 "Segoe UI",Inter,-apple-system,BlinkMacSystemFont,Arial,sans-serif;background:var(--canvas);color:var(--text)}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:var(--blue-dark);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid rgba(49,95,223,.35);outline-offset:2px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(27px,2.3vw,34px);letter-spacing:-.04em;line-height:1.2;margin-bottom:9px}
h2{letter-spacing:-.025em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.eyebrow{display:block;color:#7b8aa5;font-size:10px;font-weight:800;letter-spacing:.17em;margin-bottom:8px}
.text-risk{color:var(--red)!important}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:252px;flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--navy);color:#bdc8dd;display:flex;flex-direction:column;padding:27px 14px 18px}
.sidebar__brand{display:flex;align-items:center;gap:13px;color:#fff;padding:0 12px 35px;border-bottom:1px solid rgba(255,255,255,.09)}
.sidebar__brand:hover{text-decoration:none}
.sidebar__logo{width:64px;height:37px;object-fit:contain;object-position:left center}
.sidebar__brand-copy{display:block;min-width:0}
.sidebar__brand-copy strong{display:block;color:#fff;font-size:12px;white-space:nowrap}
.sidebar__brand-copy small{display:block;color:#8796b6;font-size:10px;margin-top:2px}
.sidebar__eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;color:#6f81a5;margin:29px 12px 13px}
.sidebar__nav{display:flex;flex-direction:column;gap:5px;flex:none;scrollbar-width:none}
.sidebar__nav::-webkit-scrollbar{display:none}
.sidebar__link{display:flex;align-items:center;gap:13px;color:#bac7de;padding:12px 13px;border-radius:11px;font-size:13px;font-weight:600;white-space:nowrap}
.sidebar__link:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.sidebar__link--active{background:#315fdf;color:#fff;box-shadow:0 5px 15px rgba(19,56,153,.35)}
.sidebar__icon{font-size:19px;width:22px;text-align:center;line-height:1}
.sidebar__footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.09);padding-top:13px}
.sidebar__footnote{font-size:10px;color:#687b9e;padding:0 12px 10px}
.sidebar__logout-form{margin:0}
.sidebar__logout{width:100%;display:flex;align-items:center;gap:12px;padding:10px 13px;border:0;border-radius:10px;background:transparent;color:#b5c3dd;text-align:left}
.sidebar__logout:hover{background:rgba(255,255,255,.07);color:#fff}
.app-shell__main{min-width:0;flex:1;display:flex;flex-direction:column}
.topbar{height:71px;display:flex;align-items:center;gap:24px;padding:0 37px;background:#fff;border-bottom:1px solid var(--border)}
.topbar__identity{display:flex;align-items:center;gap:10px;font-size:13px;white-space:nowrap}
.topbar__identity strong{font-weight:700}
.topbar__mark{width:11px;height:11px;background:var(--blue);transform:rotate(45deg);border-radius:2px}
.topbar__meta{flex:1;color:var(--muted);font-size:12px;text-align:right}
.topbar__user{display:flex;align-items:center;gap:9px;padding-left:22px;border-left:1px solid var(--border);font-size:12px}
.topbar__user strong,.topbar__user small{display:block;white-space:nowrap}
.topbar__user small{font-size:10px;color:var(--muted)}
.topbar__avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#e7edff;color:var(--blue);font-weight:800}
/* El bloque de cuenta pasa a tener tres lineas: nombre, rol y el acceso a cambiar la
   propia contrasena. Antes solo se llegaba a esa pantalla por el redirect forzado. */
.topbar__account{display:block;line-height:1.25}
.topbar__account-link{display:block;font-size:10px;font-weight:700;color:var(--blue);white-space:nowrap}
.topbar__account-link:hover{color:var(--blue-dark)}
@media(max-width:520px){.topbar__account-link{font-size:9px}}
.panel__header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.content{padding:28px 37px 48px;width:100%;max-width:1700px;margin:0 auto;flex:1}
.page-header{margin-bottom:22px}
.page-header--split{display:flex;justify-content:space-between;align-items:center;gap:18px}
.page-subtitle{color:var(--muted);margin:0;font-size:13px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:40px;padding:9px 16px;border-radius:10px;border:1px solid transparent;font-weight:700;font-size:12px;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s}
.button:hover{text-decoration:none;transform:translateY(-1px)}
.button--primary{color:#fff;background:var(--blue);box-shadow:0 5px 13px rgba(49,95,223,.17)}
.button--primary:hover{background:var(--blue-dark);color:#fff}
.button--secondary{background:#fff;border-color:#dbe2ed;color:#33415c}
.button--secondary:hover,.button--subtle:hover{border-color:#9eb4f3;color:var(--blue-dark)}
.button--subtle{color:var(--blue-dark);background:#edf2ff;border-color:#dce6ff}
.button:disabled,.button--busy{opacity:.6;cursor:progress;transform:none}
.alert{padding:13px 16px;border-radius:11px;margin-bottom:18px;font-size:12px}
.alert--error{background:#fff0f1;color:#a8303b;border:1px solid #f5cdd1}
.alert--warning{background:#fff7e9;color:#9d661f;border:1px solid #f3dfb9}
.alert--info{background:#edf3ff;color:#264baa;border:1px solid #dce7ff}
.idle-warning{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:500;display:flex;align-items:center;gap:14px;box-shadow:0 8px 24px rgba(0,0,0,.14);margin-bottom:0}
.idle-warning[hidden]{display:none}
.credentials-card__fields{display:flex;flex-wrap:wrap;gap:18px;margin:10px 0}
.credentials-card__fields dt{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.credentials-card__fields dd{margin:2px 0 0}
.credentials-card__actions{display:flex;gap:8px;margin-top:8px}
.projection-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:16px 18px;margin-bottom:22px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.scenario-switch{width:100%;display:flex;align-items:center;gap:17px;padding:1px 0 13px;border-bottom:1px solid var(--border)}
.scenario-switch>span{font-size:10px;font-weight:800;letter-spacing:.12em;color:#8290a8}
.scenario-switch__options{display:inline-flex;gap:4px;background:#f1f4fa;border-radius:9px;padding:3px}
.scenario-switch__option{font-size:11px;font-weight:700;padding:6px 11px;color:#72809a;border-radius:7px}
.scenario-switch__option:hover{text-decoration:none;color:var(--blue-dark)}
.scenario-switch__option--active{background:#fff;color:var(--blue-dark);box-shadow:0 1px 5px rgba(38,59,95,.12)}
.filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:11px;margin:0}
.filters__field{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:11px;font-weight:700}
.filters__field select,.filters__field input{min-height:40px;padding:8px 12px;color:var(--text);background:#fff;border:1px solid #dfe5ef;border-radius:9px;min-width:145px;outline:none}
.filters__field input:focus,.filters__field select:focus,.field input:focus,.ai-input-row input:focus{border-color:#7e9df3;box-shadow:0 0 0 3px rgba(49,95,223,.12)}
.filters__badge{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;background:#edf2ff;color:var(--blue-dark);border-radius:999px;font-size:11px;font-weight:700}
.filters__clear{align-self:center;font-size:11px;font-weight:700}
.action-bar{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px;margin-left:auto}
.action-bar__status{align-self:center;font-size:11px}
.action-bar__status--ok{color:#087d69}
.action-bar__status--error{color:var(--red)}
.filters--standalone{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:17px 18px;margin-bottom:22px;box-shadow:var(--shadow)}
.kpi-grid{display:grid;gap:14px;margin-bottom:22px}
.kpi-grid--five{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpi-grid--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px 20px 18px;min-width:0;box-shadow:var(--shadow)}
.kpi-card--final{background:linear-gradient(135deg,#1c3779,#315fdf);color:#fff;border-color:#315fdf}
.kpi-card__top{display:flex;justify-content:space-between;align-items:start;gap:5px}
.kpi-card__label{font-size:11px;font-weight:700;letter-spacing:.01em;color:#6e7b92}
.kpi-card--final .kpi-card__label,.kpi-card--final .kpi-card__note{color:#d9e5ff}
.kpi-card__glyph{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#edf2ff;color:var(--blue);font-size:15px;flex:none}
.kpi-card__glyph--positive{background:#e7f7f3;color:var(--teal)}
.kpi-card__glyph--negative{background:#fff2ec;color:var(--red)}
.kpi-card--final .kpi-card__glyph{background:rgba(255,255,255,.15);color:#fff}
.kpi-card__value{font-size:clamp(20px,1.7vw,26px);font-weight:800;letter-spacing:-.045em;line-height:1.2;margin:14px 0 8px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.kpi-card__note{font-size:10px;color:#8894a8}
.panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);min-width:0;margin-bottom:20px}
.panel__header{display:flex;justify-content:space-between;align-items:start;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.panel__title{font-size:18px;font-weight:800;margin:0 0 4px;color:var(--text)}
.panel__subtitle{color:var(--muted);font-size:11px;margin:0}
.panel__pill{font-size:11px;font-weight:700;color:var(--blue-dark);background:#edf2ff;padding:6px 10px;border-radius:999px;white-space:nowrap}
.flow-breakdown__controls{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch;margin-bottom:16px}
.flow-breakdown__cutoff,.flow-breakdown__finance-report{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:#fafbfe;min-width:0}
.flow-breakdown__cutoff{flex:2 1 420px}
.flow-breakdown__finance-report{flex:1 1 280px}
.flow-breakdown__group-title{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.flow-breakdown__row{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.flow-breakdown__row .filters__field{margin:0}
.flow-breakdown__row input[type="date"]{padding:7px 9px;border:1px solid var(--border);border-radius:8px;font-size:12px;min-width:130px}
.flow-breakdown__cutoff-status{margin:0;font-size:11px;color:var(--muted)}
.flow-breakdown__cutoff-status strong{color:var(--text)}
.flow-breakdown__cutoff-status.is-error{color:#b42318;font-weight:700}
.flow-breakdown__cutoff-pending{color:#b54708;font-weight:700}
.button.is-disabled{opacity:.45;cursor:not-allowed}
.finance-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.finance-summary__item{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;min-width:0}
.finance-summary__item span{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.finance-summary__item strong{font-size:15px;color:var(--text)}
.finance-summary__item small{font-size:10px;color:var(--muted)}
.finance-summary__item--overdue strong{color:#b42318}
.finance-summary__item--alert{border-color:#f79009;background:#fffaeb}
.finance-detail .table-scroll{max-height:480px;overflow:auto}
.panel__note{color:#8792a5;font-size:10px;margin:14px 0 0}
.panel__text-link{display:block;font-size:11px;font-weight:700;margin-top:20px}
/* Bloque analítico: DOS COLUMNAS INDEPENDIENTES.
   Antes era un grid de dos columnas con las cinco tarjetas como hijas directas, así que
   el grid las emparejaba en FILAS y cada fila tomaba la altura de su hija más alta
   (`grid-template-rows: 1074px 522px 316px` medido). "Obligaciones por pagar" estiraba
   "Evolución de deudas" 500px por debajo de su último elemento: media pantalla en blanco.
   Con dos stacks en columna, cada uno crece por su cuenta y ninguna tarjeta impone su
   altura a la de al lado. Sin alturas fijas, sin JavaScript y sin masonry. */
.dashboard-analysis{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(430px,1fr);gap:20px;align-items:start}
.dashboard-analysis__primary,.dashboard-analysis__secondary{display:flex;flex-direction:column;gap:20px;min-width:0}
.dashboard-analysis .panel{margin-bottom:0}
.chart-scroll{overflow-x:auto}
.finance-chart{display:block;width:100%;min-width:530px;height:auto}
.chart-grid{stroke:#e9edf5;stroke-width:1}
.chart-zero{stroke:#d8dfed;stroke-width:1;stroke-dasharray:4 4}
.chart-axis{fill:#9aa6bb;font-size:10px;font-family:inherit}
.chart-line{fill:none;stroke:#416fe6;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.chart-point{fill:#fff;stroke:#416fe6;stroke-width:2}
.chart-point--negative{stroke:var(--red)}
.chart-bar--collection{fill:#32ad9e}
.chart-bar--payment{fill:#e0a95d}
.chart-footer{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:14px;margin-top:12px;color:#66758d;font-size:11px}
.chart-footer a{margin-left:auto;font-weight:700}
.legend-dot{display:inline-block;width:8px;height:8px;border-radius:2px;vertical-align:0;margin-right:5px}
.legend-dot--blue{background:#416fe6}
.legend-dot--teal{background:#32ad9e}
.legend-dot--amber{background:#e0a95d}
/* Tres cifras en una banda de tres celdas. Antes eran tres filas apiladas con separador,
   316px de alto para tres números. */
.upcoming-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.upcoming-cell{background:#f6f8fc;border:1px solid #edf0f6;border-radius:12px;padding:13px 15px;min-width:0}
.upcoming-cell span{display:block;font-size:10px;color:#75839b;font-weight:700;letter-spacing:.04em}
.upcoming-cell strong{display:block;font-size:19px;letter-spacing:-.035em;margin-top:4px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.panel--comparison{margin-top:20px}
.scenario-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.scenario-card{border:1px solid var(--border);border-radius:13px;background:#fbfcff;padding:17px 18px}
.scenario-card--active{background:#f6f9ff;border-color:#b9cbf8}
.scenario-card__header,.scenario-card__footer{display:flex;justify-content:space-between;align-items:center;gap:10px}
.scenario-card__header strong{font-size:14px}
.scenario-card__metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 16px;margin:15px 0}
.scenario-card__metrics div{border-top:1px solid #e8edf6;padding-top:8px}
.scenario-card__metrics span,.scenario-card__metrics strong{display:block}
.scenario-card__metrics span{color:#7b88a0;font-size:10px}
.scenario-card__metrics strong{font-size:16px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.scenario-card__footer{font-size:10px}
.scenario-card__footer small{color:#8592a8}
.scenario-card__footer a{font-weight:700}
.scenario-card__warning{font-size:10px;color:#a26a27;margin:12px 0 0}
/* position:relative contiene los .sr-only (position:absolute) dentro del scroller:
   sin él su bloque contenedor es la página y estiran el ancho del documento. */
.table-scroll{overflow:auto;max-width:100%;position:relative}
.data-table{width:100%;border-collapse:separate;border-spacing:0;text-align:left;font-size:11px}
.data-table th,.data-table td{padding:12px 13px;white-space:nowrap;border-bottom:1px solid #edf0f5}
.data-table thead th{background:#f7f9fd;color:#71809a;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
/* Dos niveles de énfasis al recorrer una tabla (el hover anterior, #fafbfe, era casi
   invisible sobre blanco). La fila seleccionada pesa más que el hover y añade una barra
   lateral, para saber en qué línea se está aunque el puntero se haya movido a otra.
   La primera columna de la tabla de flujo es sticky y pinta su propio fondo: si no se
   repinta aquí, el resaltado se cortaría justo en la columna de conceptos. */
.data-table tbody tr:not(.group-row){transition:background-color .16s ease,box-shadow .16s ease}
.data-table tbody tr:hover:not(.group-row),
.data-table tbody tr:hover:not(.group-row) th:first-child{background:#eaf1fe}
.data-table tbody tr.is-row-selected:not(.group-row),
.data-table tbody tr.is-row-selected:not(.group-row) th:first-child{background:#d7e5ff}
.data-table tbody tr.is-row-selected:not(.group-row) td:first-child,
.data-table tbody tr.is-row-selected:not(.group-row) th:first-child{box-shadow:inset 3px 0 0 var(--blue)}
.data-table tbody tr.is-row-selected:not(.group-row) td{color:#16306e}
/* La fila de totales y la columna de corte ya traen su propio fondo: se les sube el tono
   en lugar de dejarlas sin reaccionar. */
.data-table__total:hover th,.data-table__total:hover td{background:#e4ecfb}
.data-table__total.is-row-selected th,.data-table__total.is-row-selected td{background:#cfe0ff}
.data-table tbody tr:hover .data-table__col--selected{background:#dbe7ff!important}
.data-table tbody tr.is-row-selected .data-table__col--selected{background:#c7d9ff!important}
.data-table tbody th{font-weight:700}
.data-table .numeric,.data-table--cashflow td{text-align:right;font-variant-numeric:tabular-nums}
.data-table--cashflow{min-width:max-content}
.data-table--cashflow th:first-child{position:sticky;left:0;z-index:2;min-width:160px;background:#fff;box-shadow:1px 0 0 #edf0f5}
.data-table--cashflow thead th:first-child{background:#f7f9fd;z-index:3}
.data-table--cashflow th:not(:first-child),.data-table--cashflow td{min-width:125px;text-align:right}
.data-table--cashflow th a{color:#344f94}
.data-table__col--selected{background:#e9f0ff!important;color:#1c4bc1}
.data-table__total th,.data-table__total td{background:#f3f6fc;font-weight:800;color:#213967}
.data-table__total .data-table__col--selected{background:#dce8ff!important}
.cell-entity{max-width:280px;white-space:normal!important;font-weight:600}
.cell-entity strong,.data-table td small{display:block}
.data-table td small{font-size:10px;color:#8490a5;margin-top:4px}
.group-row th{background:#f4f7fd!important;padding:13px 11px!important}
.source-tag{display:inline-flex;align-items:center;padding:5px 9px;border-radius:7px;background:#e9eefb;color:#3153a9;font-size:10px;font-weight:800}
.source-tag--cobros{background:#e5f6f1;color:#127e70}
.source-tag--egresos{background:#fff0e3;color:#a36e28}
.source-tag--apalancamiento{background:#fff4d6;color:#8a5d00}
.badge-stack{display:flex;gap:5px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:99px;font-size:9px;font-weight:800;letter-spacing:.02em;white-space:nowrap;margin:1px 3px 1px 0}
.badge--overdue{color:#ae3b46;background:#ffebed}
.badge--upcoming{color:#9c6b24;background:#fff2dc}
.badge--ok{color:#087c6c;background:#dff5ef}
.badge--neutral{color:#60708b;background:#edf1f7}
.badge--scheduled{color:#3153a9;background:#e7edff}
/* Condiciones SUNAT: cada una con su propio color, para reconocerlas de un vistazo dentro
   de una fila llena de cifras. El aro interior (box-shadow, no border) les da cuerpo sin
   alterar el box model que comparten con el resto de badges. */
.badge--retention{color:#2f6100;background:#e6ff9c;box-shadow:inset 0 0 0 1px #b4e02f;font-weight:900}
.badge--good-taxpayer{color:#03605a;background:#b8f5ee;box-shadow:inset 0 0 0 1px #35cbbb;font-weight:900}
.badge--perception{color:#8a5a12;background:#ffe9c2;box-shadow:inset 0 0 0 1px #e8b04a;font-weight:900}
.badge--ssco{color:#8c1d28;background:#ffd9dd;box-shadow:inset 0 0 0 1px #e2707d;font-weight:900}
/* Observación de ALQUILERES: violeta, un tono que no colisiona con ninguna condición
   SUNAT (verde retención, turquesa buen contribuyente, ámbar percepción, rojo SSCO).
   El texto viene del Excel y puede ser largo, así que la pastilla se acota y lo recorta
   con puntos suspensivos; el contenido completo queda en el title. `white-space:normal`
   anula el `nowrap` de `.badge` para que en pantallas estrechas pueda repartirse en dos
   líneas en vez de empujar la tabla. */
.badge--observation{color:#4b2a9c;background:#ece5ff;box-shadow:inset 0 0 0 1px #a98df0;font-weight:900;max-width:22ch;overflow:hidden;text-overflow:ellipsis;display:inline-block;white-space:nowrap;vertical-align:middle}
@media (max-width:768px){.badge--observation{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-overflow:clip}}
/* Etiqueta BETA junto al rótulo de PIEERS AI. Reutiliza los tokens de .badge (misma
   píldora, mismo peso) pero se apoya en la línea de texto que acompaña: vertical-align
   middle y font-size relativo (.62em) para que encoja con el título al que se pega —así
   sirve igual en un h1, en el enlace del sidebar o dentro de un botón, sin reglas por
   sitio. La variante --on-dark es para el sidebar y el panel navy del login. */
.beta-tag{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:99px;background:#e7edff;color:#3153a9;font-size:max(9px,.62em);font-weight:800;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;white-space:nowrap;line-height:1.5}
.beta-tag--on-dark{background:rgba(255,255,255,.18);color:#fff}
.panel--filters{padding-bottom:19px}
.filters--payables{display:grid;grid-template-columns:repeat(6,minmax(125px,1fr));gap:12px}
.filters--payables .filters__field input,.filters--payables .filters__field select{width:100%;min-width:0}
.filters--payables .button,.filters--payables .filters__clear{align-self:end}
.empty-state{text-align:center;color:var(--muted);padding:42px 20px}
.empty-state strong{display:block;color:var(--text);font-size:15px;margin-bottom:4px}
.empty-state p{margin:0}
.error-page{min-height:100vh;display:grid;place-items:center}
.error-card{text-align:center}
.error-card h1{font-size:60px;color:var(--blue)}
.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(430px,52%) minmax(380px,48%)}
.login-story{background:radial-gradient(circle at 79% 67%,rgba(60,100,194,.32),transparent 36%),linear-gradient(145deg,#111b31,#1a2c58);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:42px clamp(45px,5vw,85px);min-height:100vh}
.login-story__top{display:flex;align-items:center;gap:17px;color:#aebcdf;font-size:10px;letter-spacing:.2em;font-weight:800}
.login-story__logo{width:94px;height:52px;object-fit:contain}
.login-story__content{max-width:570px}
.login-story__eyebrow{font-size:11px;color:#a6baf3;font-weight:800;letter-spacing:.18em}
.login-story h1{font-size:clamp(42px,4.5vw,68px);line-height:1.13;margin:22px 0 23px;font-weight:700;letter-spacing:-.055em}
.login-story h1 em{font-style:normal;color:#91aaff}
.login-story p{font-size:16px;line-height:1.75;max-width:500px;color:#bac8e2}
.login-story__features{display:flex;flex-wrap:wrap;gap:15px;margin-top:46px}
.login-story__features span{color:#c4d0e9;border-top:1px solid #5d719c;padding-top:12px;font-size:11px;font-weight:700}
.login-story__bottom{color:#8192b6;font-size:11px}
.login-access{display:grid;place-items:center;padding:40px;background:#fafbfe}
.login-card{width:min(100%,390px)}
.login-card__eyebrow{font-size:10px;font-weight:800;color:var(--blue);letter-spacing:.2em}
.login-card h2{font-size:35px;margin:12px 0 9px}
.login-card>p{color:var(--muted);margin-bottom:34px}
.login-form{display:flex;flex-direction:column;gap:17px}
.field{display:flex;flex-direction:column;gap:7px}
.field__label{font-size:12px;font-weight:700}
.field input{width:100%;min-height:47px;padding:11px 13px;border:1px solid #dbe2ed;border-radius:10px;background:#fff;outline:none}
.login-form__submit{width:100%;justify-content:space-between;margin-top:10px;min-height:47px}
.login-card__footer{margin-top:42px;padding-top:17px;border-top:1px solid var(--border);color:#9aa5b6;font-size:11px}
.ai-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px;align-items:start}
.ai-page{padding:0;overflow:hidden;display:flex;flex-direction:column;height:min(740px,calc(100vh - 210px));min-height:540px;margin:0}
.ai-page__header{display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--border);padding:18px 22px}
.ai-page__header .eyebrow{margin:0 0 2px}
.ai-page__header h2{margin:0;font-size:16px}
.ai-page__header p{margin:0;color:var(--muted);font-size:11px}
.ai-avatar,.ai-welcome__mark{display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#315fdf,#7e64dc);color:#fff;font-size:22px}
.ai-avatar{width:43px;height:43px;flex:none}
.ai-status{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;white-space:nowrap}
.ai-status__dot{width:7px;height:7px;border-radius:50%;background:var(--teal)}
.ai-status__dot--off{background:var(--red)}
.ai-chat{display:flex;flex-direction:column;gap:16px;overflow-y:auto;flex:1;padding:25px 27px;background:#fbfcff}
.ai-welcome{max-width:450px;margin:auto;text-align:center}
.ai-welcome__mark{width:51px;height:51px;margin:0 auto 15px}
.ai-welcome h3{font-size:20px;margin-bottom:6px}
.ai-welcome p{color:var(--muted);font-size:12px;line-height:1.7}
.ai-turn{max-width:82%;display:flex;gap:9px;align-items:flex-start}
.ai-turn--user{align-self:flex-end;flex-direction:row-reverse}
.ai-turn--assistant,.ai-turn--pending{align-self:flex-start}
.ai-turn__avatar{display:grid;place-items:center;background:#edf2ff;color:var(--blue);border-radius:9px;width:28px;height:28px;flex:none;font-weight:800;font-size:13px}
.ai-turn--user .ai-turn__avatar{background:#e8eefa;color:#677a9a}
.ai-message{padding:12px 15px;background:#fff;border:1px solid #e8edf6;border-radius:4px 13px 13px 13px;box-shadow:0 2px 8px rgba(25,43,75,.03);font-size:12px;line-height:1.65;overflow-wrap:anywhere;white-space:pre-wrap}
.ai-turn--user .ai-message{background:var(--blue);color:#fff;border-color:var(--blue);border-radius:13px 4px 13px 13px}
.ai-turn--pending .ai-message{color:#697995}
.ai-thinking{display:inline-flex;gap:4px;margin-left:7px}
.ai-thinking i{width:5px;height:5px;background:#829be5;border-radius:50%;animation:thinking 1.1s infinite}
.ai-thinking i:nth-child(2){animation-delay:.15s}
.ai-thinking i:nth-child(3){animation-delay:.3s}
@keyframes thinking{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
.ai-message__block+.ai-message__block{border-top:1px solid #edf1f7;margin-top:12px;padding-top:12px}
.ai-message__block p{margin:0}
.ai-fact-card{background:#f4f7fd;border:1px solid #e7edf9;border-radius:10px;padding:8px 12px;margin:8px 0}
.ai-fact-row{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #e7edf9;padding:7px 0}
.ai-fact-row:last-child{border:0}
.ai-fact-row span{color:#687893}
.ai-fact-row strong{text-align:right;font-weight:800}
.ai-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 0 37px}
.ai-action{background:#fff;border:1px solid #dce5f9;border-radius:99px;color:#3153a9;padding:7px 11px;font-size:11px;font-weight:700}
.ai-action:hover{border-color:#89a4ec}
.ai-composer{padding:17px 22px;background:#fff;border-top:1px solid var(--border)}
.ai-input-row{display:flex;gap:9px}
.ai-input-row input{flex:1;min-width:0;min-height:43px;padding:10px 13px;border:1px solid #dbe2ed;border-radius:10px;outline:none}
.ai-composer>p{font-size:10px;color:#a0aabd;margin:8px 2px 0}
.ai-companion{margin:0;padding:24px 21px}
.ai-companion h2{font-size:18px;margin-bottom:6px}
.ai-companion>p{color:var(--muted);font-size:11px;margin-bottom:18px}
.ai-suggestions{display:flex;flex-direction:column;gap:8px}
.ai-suggestion{display:flex;align-items:start;gap:8px;text-align:left;width:100%;padding:12px;border:1px solid #e6ebf4;background:#f9fbff;border-radius:10px;color:#334462;font-size:11px;font-weight:600}
.ai-suggestion:hover{border-color:#9eb7f3;background:#f0f5ff}
.ai-suggestion span{color:var(--blue)}
.ai-suggestion:disabled{opacity:.45;cursor:not-allowed}
.ai-companion__note{display:flex;gap:10px;border-top:1px solid var(--border);margin-top:25px;padding-top:18px;color:#8493aa}
.ai-companion__note span{color:#6080db}
.ai-companion__note p{font-size:10px;margin:0}
@media(max-width:1280px){.kpi-grid--five{grid-template-columns:repeat(3,minmax(0,1fr))}.filters--payables{grid-template-columns:repeat(3,minmax(0,1fr))}.content{padding:29px 28px 42px}}
@media(max-width:1200px){
  /* Por debajo de ~1200px el contenido útil no da para dos columnas: la izquierda se
     quedaría por debajo del ancho mínimo del gráfico (530px) y aparecería scroll
     horizontal dentro de la tarjeta. Una sola columna a ancho completo es mejor lectura.
     `display:contents` disuelve los dos stacks: las cuatro tarjetas pasan a ser hijas
     del contenedor y heredan UN solo gap. Anidar wrappers con su propio gap daría un
     ritmo doble entre columnas. El orden de lectura sigue siendo el del DOM: no se usa
     `order` en ningún sitio, así que lo que ve el ojo y lo que lee un lector de pantalla
     coinciden. */
  .dashboard-analysis{grid-template-columns:1fr}
  .dashboard-analysis__primary,.dashboard-analysis__secondary{display:contents}.ai-layout{grid-template-columns:1fr}.ai-companion{order:-1}.ai-suggestions{flex-direction:row;flex-wrap:wrap}.ai-suggestion{width:auto;max-width:260px}.ai-companion__note{display:none}}
@media(max-width:900px){.app-shell{display:block}.sidebar{width:100%;position:static;height:auto;min-height:0;overflow:visible;padding:10px 16px}.sidebar__footer{margin-top:0}.sidebar__brand{padding:0 0 10px;border:0}.sidebar__logo{width:50px}.sidebar__eyebrow,.sidebar__footnote{display:none}.sidebar__nav{flex-direction:row;overflow-x:auto;gap:5px}.sidebar__link{padding:9px 11px;font-size:11px}.sidebar__icon{font-size:15px;width:auto}.sidebar__footer{border:0;padding:0}.sidebar__logout-form{position:absolute;right:17px;top:13px}.sidebar__logout{font-size:11px;padding:7px}.topbar{height:auto;min-height:55px;padding:10px 20px}.content{padding:22px 20px 35px}}
@media(max-width:760px){.upcoming-band{grid-template-columns:repeat(2,minmax(0,1fr))}.content{padding-bottom:88px}.login-page{display:block}.login-story{min-height:0;padding:28px 25px 34px}.login-story__content{margin:30px 0 0}.login-story h1{font-size:35px}.login-story p,.login-story__features,.login-story__bottom{display:none}.login-access{min-height:65vh;padding:45px 25px}.kpi-grid--five,.kpi-grid--four{grid-template-columns:repeat(2,minmax(0,1fr))}.page-header--split{align-items:start;flex-direction:column}.filters--payables{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar__meta{display:none}.topbar__identity{flex:1}.panel{padding:19px}.sidebar__link{gap:6px}.sidebar__logout span{display:none}}
@media(max-width:520px){.upcoming-band{grid-template-columns:1fr}.kpi-grid--five,.kpi-grid--four{grid-template-columns:1fr}.projection-toolbar{padding:15px}.filters--projection{width:100%}.filters--projection .filters__field{flex:1;min-width:130px}.filters__field select{min-width:0;width:100%}.action-bar{margin:0}.topbar__user{padding-left:8px}.topbar__user strong,.topbar__user small{display:none}.ai-page{order:1;min-height:480px;height:480px}.ai-companion{order:2}.ai-chat{padding:19px 14px}.ai-turn{max-width:96%}.ai-page__header{padding:13px}.ai-status{font-size:0}.ai-input-row .button{padding:8px}}

@media(max-width:520px){.scenario-comparison{grid-template-columns:1fr}}

/* Interacciones V2: respuesta discreta y estados de teclado visibles. */
html{scroll-behavior:smooth}
/* ZONA SEGURA del lanzador flotante de PIEERS AI: 56px de botón + 22px al borde.
   Única fuente de este valor — estaba declarado también en la regla base de .content, y
   como esta va después ganaba siempre: cambiar la de arriba no hacía absolutamente nada. */
.content{padding-bottom:84px}
.button,.scenario-switch__option,.panel__header a,.panel__text-link,.chart-footer a,.scenario-card__footer a,.ai-suggestion,.ai-action{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease}
.button:hover{box-shadow:0 8px 19px rgba(35,66,128,.14)}
.button:active,.scenario-switch__option:active,.ai-suggestion:active,.ai-action:active{transform:translateY(0) scale(.98)}
.button:hover span[aria-hidden="true"]{transform:translateX(3px)}
.button span[aria-hidden="true"]{display:inline-block;transition:transform .18s ease}
.scenario-switch__option:hover{background:#e4ebfb;box-shadow:0 3px 9px rgba(37,74,158,.08)}
.scenario-switch__option--active:hover{background:#fff}
.panel__header a:hover,.panel__text-link:hover,.chart-footer a:hover,.scenario-card__footer a:hover{transform:translateY(-1px);text-decoration:none}
.filters__field :focus-visible,.ai-input-row input:focus-visible{outline:3px solid rgba(49,95,223,.35);outline-offset:2px}
.chart-point{transition:transform .18s ease,stroke-width .18s ease;transform-box:fill-box;transform-origin:center}
.chart-point:hover{transform:scale(1.65);stroke-width:2.5}
.chart-bar--collection,.chart-bar--payment{transition:opacity .18s ease,filter .18s ease}
.chart-bar--collection:hover,.chart-bar--payment:hover{opacity:.8;filter:drop-shadow(0 2px 3px rgba(32,49,83,.16))}
.scenario-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.scenario-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(32,49,83,.08);border-color:#b5c5e7}
.signal-card--link{color:inherit}
.signal-card--link:hover{color:inherit;text-decoration:none;transform:translateY(-2px);border-color:#bdcbea;box-shadow:0 6px 16px rgba(32,49,83,.08)}

/* KPI: el dato sigue viniendo del servidor; la ayuda es solo presentación. */
.kpi-card{position:relative;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.kpi-card:hover,.kpi-card:focus-visible{transform:translateY(-2px);border-color:#a9bce6;box-shadow:0 9px 22px rgba(32,49,83,.10)}
.kpi-card--link{display:block;color:inherit;cursor:pointer}
.kpi-card--link:hover{color:inherit;text-decoration:none}
.kpi-card--final.kpi-card--link,.kpi-card--final.kpi-card--link:hover{color:#fff}
.kpi-card__glyph{transition:transform .18s ease}
.kpi-card:hover .kpi-card__glyph,.kpi-card:focus-visible .kpi-card__glyph{transform:translateY(-2px) rotate(5deg)}
.kpi-card__tooltip{position:absolute;left:12px;right:12px;bottom:calc(100% + 8px);z-index:8;background:#17294e;color:#fff;border-radius:8px;padding:8px 10px;font-size:11px;font-weight:500;line-height:1.35;box-shadow:0 8px 19px rgba(14,28,56,.2);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease,visibility .18s;pointer-events:none}
.kpi-card:hover .kpi-card__tooltip,.kpi-card:focus-visible .kpi-card__tooltip{opacity:1;visibility:visible;transform:translateY(0)}

/* Matriz y desglose dentro de /cashflow. */
.panel--matrix{margin-bottom:14px}
.data-table--cashflow thead th:not(:first-child){padding:0}
.data-table--cashflow thead th a{display:flex;justify-content:flex-end;align-items:center;gap:6px;min-height:46px;padding:10px 13px;transition:background-color .18s ease,color .18s ease}
.data-table--cashflow thead th a:hover,.data-table--cashflow thead th a:focus-visible{background:#e7efff;color:#1d4cba;text-decoration:none}
.data-table__header-cue{opacity:0;transform:translateY(-3px);transition:opacity .18s ease,transform .18s ease;color:var(--blue)}
.data-table--cashflow thead th a:hover .data-table__header-cue,.data-table--cashflow thead th a:focus-visible .data-table__header-cue,.data-table__col--selected .data-table__header-cue{opacity:1;transform:translateY(0)}
.data-table--cashflow td a{display:inline-block;padding:4px 0;font-weight:700}
.panel--flow-breakdown{scroll-margin-top:20px}
.flow-tree{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.flow-node+.flow-node{border-top:1px solid var(--border)}
.flow-node__summary,.flow-category__summary{display:grid;grid-template-columns:minmax(0,1fr) 150px 170px;gap:12px;align-items:center;list-style:none;cursor:pointer;transition:background-color .18s ease}
.flow-node__summary::-webkit-details-marker,.flow-category__summary::-webkit-details-marker{display:none}
.flow-node__summary{padding:15px 16px;background:#f8faff}
.flow-node__summary:hover,.flow-node__summary:focus-visible{background:#edf3ff}
.flow-node__name{display:flex;align-items:center;gap:11px;color:#233653;font-size:12px;letter-spacing:.04em}
.flow-node__chevron{display:inline-block;color:var(--blue);font-size:19px;line-height:1;transition:transform .18s ease}
.flow-node[open]>.flow-node__summary .flow-node__chevron,.flow-category[open]>.flow-category__summary .flow-node__chevron{transform:rotate(90deg)}
.flow-node__count{font-size:11px;color:var(--muted)}
.flow-node__amount,.flow-category__summary>strong{text-align:right;font-size:13px;font-variant-numeric:tabular-nums}
.flow-node--cobros>.flow-node__summary .flow-node__amount{color:#0a8275}
.flow-node--egresos>.flow-node__summary .flow-node__amount{color:#b65550}
.flow-node__body{padding:5px 14px 10px;background:#fff}
.flow-category{border-bottom:1px solid #edf0f5}
.flow-category__summary{grid-template-columns:minmax(0,1fr) 170px;padding:11px 15px;font-size:11px}
.flow-category__summary:hover,.flow-category__summary:focus-visible{background:#f7faff}
.flow-category__summary>span{display:flex;align-items:center;gap:9px;min-width:0}
.flow-category__summary small{color:var(--muted);font-weight:500;white-space:nowrap}
.flow-category__body{padding:0 6px 7px 28px}
.flow-entry{display:grid;grid-template-columns:minmax(150px,1.25fr) minmax(180px,2fr) 155px;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid #eff2f7;font-size:11px}
.flow-entry:hover{background:#fafbff}
.flow-entry__identity strong,.flow-entry__identity small{display:block;overflow-wrap:anywhere}
.flow-entry__identity small{color:var(--muted);margin-top:2px}
.flow-entry__details{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;color:#66758d;overflow-wrap:anywhere}
.flow-entry__amount{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.flow-node__note{padding:12px 14px;margin:0;color:var(--muted);font-size:11px}

/* El mismo render de respuesta atiende la página completa y el widget. */
.ai-message__time{display:block;margin-top:6px;font-size:9px;color:#99a7ba;text-align:right}
.ai-message__cut{display:block;margin-top:8px;font-size:10px;color:#6b7a90}
.ai-turn--user .ai-message__time{color:#d4e1ff}
.ai-widget{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;flex-direction:column;align-items:flex-end}
.ai-widget__window{width:min(410px,calc(100vw - 32px));height:min(560px,calc(100dvh - 112px));display:flex;flex-direction:column;margin-bottom:12px;background:#fff;border:1px solid #dbe3f1;border-radius:17px;overflow:hidden;box-shadow:0 18px 46px rgba(13,31,70,.22)}
.ai-widget__window[hidden]{display:none}
.ai-widget.is-expanded .ai-widget__window{width:min(680px,calc(100vw - 32px));height:min(720px,85dvh,calc(100dvh - 112px))}
.ai-widget__header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;color:#fff;background:linear-gradient(110deg,#1e4cad,#244493 60%,#352e83)}
.ai-widget__identity{display:flex;align-items:center;gap:10px;min-width:0}
.ai-widget__identity strong,.ai-widget__identity small{display:block}
.ai-widget__identity strong{font-size:13px}
.ai-widget__identity small{font-size:10px;color:#d9e5ff}
.ai-widget__avatar{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);font-size:20px}
.ai-widget__status{display:flex;align-items:center;gap:5px;font-size:9px;color:#e8f1ff}
.ai-widget__status .ai-status__dot{display:inline-block}
.ai-widget__controls{display:flex;align-items:center;gap:3px}
.ai-widget__control{width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:#e5edff;font-size:19px;line-height:1;transition:background-color .18s ease,transform .18s ease}
.ai-widget__control:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.ai-widget__control:active{transform:scale(.98)}
.ai-widget__notice{padding:7px 13px;background:#fff7e9;color:#9d661f;font-size:11px}
.ai-widget .ai-chat{min-height:0;padding:16px 13px;gap:12px}
.ai-widget .ai-turn{max-width:94%}
.ai-widget .ai-message{font-size:11px;padding:10px 12px}
.ai-widget .ai-welcome h3{font-size:16px}
.ai-widget .ai-welcome p{font-size:11px}
.ai-widget__quick{display:flex;gap:7px;overflow-x:auto;flex:none;padding:9px 12px;border-top:1px solid var(--border);scrollbar-width:thin}
.ai-widget__quick .ai-suggestion{width:auto;flex:none;white-space:nowrap;padding:6px 9px;border-radius:999px;font-size:10px}
.ai-widget .ai-composer{flex:none;padding:10px 12px}
.ai-widget .ai-input-row input{min-height:39px;font-size:11px}
.ai-widget .ai-input-row .button{min-height:39px;padding:8px 11px}
.ai-widget .ai-composer>p{font-size:9px}
.ai-widget__launcher-row{display:flex;align-items:center;gap:10px}
/* Oculto por defecto con `visibility`, no con `display`: así conserva su sitio en el
   layout (nada salta al aparecer) y, estando oculto, ni recibe clics ni lo anuncian los
   lectores de pantalla. Se muestra al entrar durante unos segundos (`is-greeting`, lo
   pone y lo quita web/static/js/ai.js), al pasar el ratón por el widget y al enfocar el
   lanzador con el teclado. */
/* `display` y no `opacity`/`visibility`: el globo desaparece de verdad, sin estados
   intermedios. Con `visibility` transicionada se quedaba pintado encima de la leyenda
   —translúcido pero legible— aunque ya no recibiera clics; medido: `pointer-events:none`
   sí se aplicaba y `visibility:hidden` no. Oculto con `display:none` tampoco lo anuncia un
   lector de pantalla, que es lo correcto cuando no está ofreciéndose.
   Se muestra: unos segundos al entrar (`is-greeting`, lo pone y lo quita ai.js), al pasar
   el ratón por el widget y al enfocar el lanzador con el teclado. */
.ai-widget__greeting{display:none;align-items:center;gap:10px;padding:9px 12px;border:1px solid #dfe6f2;border-radius:13px;background:#fff;color:var(--text);box-shadow:0 7px 23px rgba(20,43,83,.13);text-align:left;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ai-widget.is-greeting .ai-widget__greeting,.ai-widget:hover .ai-widget__greeting,.ai-widget:focus-within .ai-widget__greeting{display:flex}
.ai-widget.is-open .ai-widget__greeting{display:none!important}
.ai-widget__greeting:hover{transform:translateY(-2px);border-color:#a9bced;box-shadow:0 10px 25px rgba(20,43,83,.18)}
.ai-widget__greeting strong,.ai-widget__greeting small{display:block;white-space:nowrap}
.ai-widget__greeting strong{font-size:10px}
.ai-widget__greeting small{font-size:9px;color:var(--muted)}
.ai-widget__greeting-dot,.ai-widget__availability{width:8px;height:8px;border-radius:50%;background:#20b899;flex:none}
.ai-widget__greeting-arrow{color:var(--blue);transition:transform .18s ease}
.ai-widget__greeting:hover .ai-widget__greeting-arrow{transform:translateX(3px)}
.ai-widget__launcher{position:relative;display:grid;place-items:center;width:56px;height:56px;flex:none;border:0;border-radius:17px;color:#fff;background:linear-gradient(135deg,#315fdf,#334bb6);font-size:29px;box-shadow:0 10px 26px rgba(31,73,179,.32);transition:transform .18s ease,box-shadow .18s ease}
.ai-widget__launcher:hover{transform:scale(1.055);box-shadow:0 13px 29px rgba(31,73,179,.42)}
.ai-widget__launcher:active{transform:scale(.98)}
.ai-widget__availability{position:absolute;top:1px;right:0;border:2px solid #fff;width:11px;height:11px}
.ai-widget__availability--off{background:var(--red)}
@media(max-width:700px){.flow-node__summary{grid-template-columns:minmax(0,1fr) 105px;gap:5px}.flow-node__count{grid-column:1;grid-row:2;padding-left:27px}.flow-node__amount{grid-column:2;grid-row:1 / span 2}.flow-category__summary{grid-template-columns:minmax(0,1fr) 105px}.flow-category__summary>span{flex-wrap:wrap;gap:4px}.flow-entry{grid-template-columns:minmax(0,1fr) auto;gap:5px 9px}.flow-entry__details{grid-column:1 / -1;grid-row:2}.flow-entry__amount{grid-column:2;grid-row:1}.flow-category__body{padding-left:7px}}
/* En un teléfono el globo mide 214px sobre una pantalla de 390: ahí SIEMPRE tapa algo.
   El `!important` es deliberado — las reglas que lo muestran (`.ai-widget.is-greeting …`)
   tienen más especificidad que este selector, así que sin él ganaban y el globo volvía
   a aparecer justo donde menos sitio hay. */
@media(max-width:520px){.ai-widget{right:14px;bottom:14px}.ai-widget .ai-widget__greeting{display:none!important}.ai-widget__window{width:calc(100vw - 48px);height:min(680px,calc(100dvh - 92px));margin-bottom:8px}.ai-widget.is-expanded .ai-widget__window{width:calc(100vw - 48px);height:min(720px,calc(100dvh - 92px))}.panel--flow-breakdown{padding:16px}.flow-node__summary{padding:12px}.flow-node__body{padding:4px 7px 8px}.flow-entry{padding:10px 7px}.flow-category__summary{padding:10px 7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.scenario-switch__option,.kpi-card,.kpi-card__glyph,.kpi-card__tooltip,.scenario-card,.chart-point,.chart-bar,.ai-widget__launcher,.ai-widget__greeting,.ai-widget__control,.data-table__header-cue{transition:none!important;animation:none!important}}

/* ===== Resumen Ejecutivo: evolución de deudas y tarjetas de dona =========================
   La dona se dibuja con un <path> de trazo grueso sobre un <circle> de pista; la geometría
   llega calculada del servidor (web/services/donut_view.py) y aquí solo se le da grosor,
   color de foco y comportamiento responsive. Ninguna medida depende de JavaScript. */
.legend-dot--red{background:var(--red)}
.text-positive{color:var(--teal)!important}
.chart-line--debt{stroke:var(--red)}
.chart-point--debt{stroke:var(--red)}
.debt-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.debt-summary__item{background:#f6f8fc;border:1px solid #edf0f6;border-radius:12px;padding:12px 13px;min-width:0}
.debt-summary__item span{display:block;font-size:10px;color:#75839b;font-weight:700;letter-spacing:.04em}
.debt-summary__item strong{display:block;font-size:19px;letter-spacing:-.035em;margin:4px 0 2px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.debt-summary__item small{display:block;color:#8693a7;font-size:10px}

.panel--donut{display:flex;flex-direction:column;gap:16px;min-width:0;container-type:inline-size}
.donut-layout{display:grid;grid-template-columns:1fr;justify-items:center;gap:14px;align-items:start}
@container (min-width:430px){
  /* Áreas explícitas. Sin ellas la lectura ("toca un sector…") ocupaba la celda contigua
     a la dona y empujaba la leyenda a una SEGUNDA fila: el bloque medía 566px cuando la
     leyenda mide 358. Con áreas, la leyenda ocupa toda la columna derecha y la lectura se
     queda bajo la dona, que es su sitio natural. */
  .donut-layout{grid-template-columns:minmax(150px,190px) minmax(0,1fr);grid-template-areas:"dona leyenda" "lectura leyenda";justify-items:stretch;gap:8px 18px}
  .donut{grid-area:dona;margin:0}
  .donut__readout{grid-area:lectura;margin:0}
  .donut-legend{grid-area:leyenda}
}
.donut{position:relative;width:100%;max-width:210px;aspect-ratio:1;margin:0 auto}
.donut__svg{display:block;width:100%;height:100%;overflow:visible}
.donut__track{fill:none;stroke:#eef1f7;stroke-width:34}
.donut__segment{fill:none;stroke-width:34;stroke-linecap:butt;cursor:pointer;transition:stroke-width .16s ease,opacity .16s ease}
.donut__segment:hover,.donut__segment:focus-visible,.donut__segment.is-active{stroke-width:40;opacity:.92}
.donut__segment:focus-visible{outline:none}
.donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:0 18%}
.donut__center-label{font-size:9px;font-weight:800;letter-spacing:.14em;color:#7b8aa5;text-transform:uppercase}
.donut__center-value{display:block;font-size:17px;letter-spacing:-.035em;margin-top:3px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;line-height:1.15}
.donut__center-note{display:block;color:#8693a7;font-size:9px;margin-top:3px;overflow-wrap:anywhere}
.donut__readout{grid-column:1;margin:8px 0 0;font-size:10px;color:#8693a7;text-align:center;min-height:1.4em}

/* Leyenda: color, nombre y porcentaje. Nada más.
   El nombre puede envolver en dos líneas en vez de recortarse: "BBVA / CONTINENTAL" o
   "OBLIGACIONES FINANCIERAS" dejan de terminar en puntos suspensivos. El max-height es
   una red para catálogos enormes, no el comportamiento normal: con hasta ~14 entradas no
   aparece ninguna barra interna. */
.donut-legend{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:2px;max-height:460px;overflow-y:auto}
/* Flex con wrap en vez de una rejilla fija: cuando el nombre y las dos cifras no caben
   en una línea, las cifras bajan JUNTAS a la siguiente y siguen alineadas a la derecha.
   Con columnas fijas habría que elegir entre recortar el nombre o desbordar la tarjeta, y
   ninguna de las dos es aceptable en una columna de 300px. */
.donut-legend__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 10px;padding:6px;border-radius:7px;font-size:12.5px}
.donut-legend__row:hover,.donut-legend__row.is-active{background:#f4f7fc}
.donut-legend__dot{width:10px;height:10px;border-radius:3px;flex:none;position:relative;top:2px}
.donut-legend__dot--hollow{background:transparent!important;border:2px dashed var(--red)}
/* La base es pequeña a propósito: con 120px el nombre reclamaba tanto sitio que las
   dos cifras bajaban a una segunda línea aunque cupieran. Con 88px el nombre sigue
   creciendo hasta llenar el hueco, pero cuando no hay para todos es ÉL quien envuelve
   —en dos líneas legibles— y el importe y el porcentaje se quedan donde se leen: a la
   derecha, en su columna, alineados con los de las demás filas. */
.donut-legend__name{flex:1 1 88px;min-width:0;font-weight:600;overflow-wrap:break-word;line-height:1.35}
.donut-legend__amount{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
.donut-legend__share{flex:none;min-width:54px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-weight:700;color:var(--text)}
.donut-legend__row--overdraft .donut-legend__share{color:var(--red);font-weight:600;font-size:10.5px}

.coverage{background:#f4f7fc;border:1px solid #e6ecf6;border-radius:12px;padding:14px 15px}
.coverage--gap{background:#fff9ef;border-color:#f3e6cd}
.coverage__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.coverage__head .eyebrow{margin:0}
.coverage__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:11px}
.coverage__rows>div{min-width:0}
.coverage__rows span{display:block;font-size:9px;color:#75839b;font-weight:700}
.coverage__rows strong{display:block;font-size:15px;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.coverage .panel__note{margin:9px 0 0}
.panel__note--outside{margin:0;padding:10px 12px;background:#fbfcfe;border:1px solid var(--border);border-radius:10px;font-size:11px}
.panel__note--outside strong{font-variant-numeric:tabular-nums;color:var(--text)}

@media(max-width:1280px){.debt-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .donut{max-width:230px}
  .donut-legend{width:100%;max-height:none}
}
@media(max-width:520px){.debt-summary{grid-template-columns:1fr}.donut__center-value{font-size:15px}}
@media(prefers-reduced-motion:reduce){.donut__segment{transition:none!important}}

/* Desbordamiento horizontal del shell por debajo de ~420px (defecto preexistente,
   reproducido igual en /payables y /breakdown antes de tocar nada). `.topbar__identity`
   es nowrap y `flex:1`, así que con poco ancho empuja el bloque de cuenta fuera de la
   pantalla y la página entera gana 17px de scroll lateral. Dejar que el rótulo se recorte
   es lo correcto: es decorativo, mientras que el acceso a la cuenta sí es funcional. */
@media(max-width:430px){
  .topbar__identity{min-width:0;overflow:hidden}
  .topbar__identity>span:last-child{overflow:hidden;text-overflow:ellipsis}
  .topbar__user{padding-left:6px}
}