/* Estilo "Drone": celeste claro, azul marino y cian. */
@font-face { font-family: "Inter"; src: url(fonts/inter-regular.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter-medium.woff) format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter-semibold.woff) format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter-bold.woff) format("woff"); font-weight: 700 800; font-display: swap; }

:root {
  --bg: #F1F6FD;
  --surface: #FFFFFF;
  --surface-2: #EDF3FC;
  --ink: #1F375B;          /* azul marino */
  --ink-2: #53668A;
  --ink-3: #8D9BB8;
  --line: #DCE6F4;
  --line-soft: #E3EBF6;
  --accent: #01ABE4;       /* cian: botones, barras, selección */
  --accent-ink: #FFFFFF;
  --accent-soft: #E1F4FC;
  --link: #0A7FB0;         /* cian oscuro para texto sobre blanco */
  --navy-2: #2C4F82;
  --s1: #01ABE4;      /* servicios */
  --s2: #FC7A45;      /* compras */
  --s3: #7985B2;
  --ok: #1E9467;   --ok-soft: #E2F5EC;
  --warn: #D9710B; --warn-soft: #FFF1E2;
  --bad: #E2453C;  --bad-soft: #FDE8E6;
  --mute-soft: #EAF0F9;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(31, 55, 91, .04), 0 8px 24px rgba(31, 55, 91, .07);
  --f-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-num: var(--f-ui);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background-color: var(--bg); color: var(--ink); font: 14px/1.45 var(--f-ui); }
body { background: linear-gradient(180deg, #E4EEFA 0, #F1F6FD 340px, #F6F9FE 100%) fixed; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font: 700 30px/1.15 var(--f-ui); margin: 0; letter-spacing: -.02em; }
h2 { font-size: 17px; margin: 0; }
h3 { font: 700 15px/1.3 var(--f-ui); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
h4 { margin: 12px 0 6px; font-size: 13px; }
.muted { color: var(--ink-2); }
.small, small { font-size: 12px; }
.block { display: block; }
.num, .r, td.r, th.r { font-variant-numeric: tabular-nums lining-nums; }
.num, td.r, .kpi b, .hbars .num { font-family: var(--f-num); }
.r { text-align: right; }
.nowrap { white-space: nowrap; }
.neg { color: var(--bad); }
.warn-text { color: var(--warn); }
.bad-text { color: var(--bad); }
.loading { padding: 40px; color: var(--ink-2); }

/* Layout */
.layout { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
aside { background: rgba(255, 255, 255, .75); border-right: 0; box-shadow: 1px 0 0 var(--line-soft); padding: 18px 12px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.brand { font: 800 13px/1.2 var(--f-ui); padding: 8px 12px 24px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
aside nav { display: flex; flex-direction: column; gap: 2px; }
aside nav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius); color: #6B7C9C; font-weight: 500; }
aside nav a:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
aside nav a.on { background: var(--accent-soft); color: var(--link); font-weight: 600; }
aside nav small { margin-left: auto; font-size: 10px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 99px; padding: 0 5px; }
.ni, .logo { display: none; }
.aside-foot { margin-top: auto; font-size: 11px; color: var(--ink-3); padding: 0 10px; }
main { padding: 26px 32px 60px; max-width: 1280px; width: 100%; min-width: 0; }
.menu-btn { display: none; }

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head p { margin: 4px 0 0; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow); min-width: 0; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cols > .card { margin-bottom: 16px; }
.cols .grow { grid-column: span 1; }
.cols.three { grid-template-columns: repeat(3, 1fr); }
.count { background: var(--accent-soft); border: 0; color: var(--link); font: 600 11px var(--f-ui); border-radius: 99px; padding: 1px 8px; font-weight: 600; }

.hero { display: grid; grid-template-columns: 1.1fr 2fr; gap: 16px; margin-bottom: 16px; }
.saldo { background: linear-gradient(135deg, var(--ink), var(--navy-2)); color: #fff; border: 0; box-shadow: var(--shadow); border-radius: var(--radius-lg); padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.saldo .label { color: rgba(255, 255, 255, .75); font-size: 14px; }
.saldo strong { font: 700 46px/1.15 var(--f-ui); color: #fff; letter-spacing: -.02em; margin: 4px 0 2px; }
.saldo strong.neg { color: #FFB4AE; }
.saldo .muted { color: rgba(255, 255, 255, .75); font-size: 13px; }
.flow { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.flow > div { padding: 20px; display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--line); }
.flow > div:first-child { border-left: 0; }
.flow .num { font-size: 25px; font-weight: 600; letter-spacing: -.01em; }
.label { font-size: 13px; color: var(--ink-2); }

.kpis { display: grid; grid-template-columns: repeat(6, 1fr); margin-bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; color: var(--ink); border-left: 1px solid var(--line); }
.kpi:first-child { border-left: 0; }
.kpi:hover { text-decoration: none; background: var(--surface-2); }
.kpi span { font-size: 13px; color: var(--ink-2); line-height: 1.25; }
.kpi b { font-size: 24px; font-weight: 500; }
.kpi.bad span, .kpi.bad b { color: var(--bad); }
.kpi.warn span, .kpi.warn b { color: var(--warn); }
.kpi.warn span::before, .kpi.bad span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: currentColor; vertical-align: 1px; }

.alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.alerts li { display: flex; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: var(--radius); }
.alerts li:hover { background: var(--surface-2); }
.alerts li .muted { margin-left: auto; font-size: 12px; white-space: nowrap; }
.alerts li::before { content: ''; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--ink-3); transform: translateY(-1px); }
.alerts li.alta::before { background: var(--bad); }
.alerts li.media::before { background: var(--warn); }


/* Charts */
.chart svg { display: block; max-width: 100%; }
.chart .grid { stroke: var(--line); }
.chart .axis { fill: var(--ink-3); font-size: 11px; }
.chart .axis.on { fill: var(--ink); font-weight: 600; }
.chart .s1, .hbars .s1 { fill: var(--s1); background: var(--s1); }
.chart .s2 { fill: var(--s2); }
.hbars .s3 { background: var(--s3); }
.chart .mark { stroke: var(--ink); stroke-width: 2; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); margin-bottom: 8px; flex-wrap: wrap; }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.legend .sw.s1 { background: var(--s1); } .legend .sw.s2 { background: var(--s2); } .legend .sw.line { height: 2px; background: var(--ink); vertical-align: 3px; }
.legend .tip { margin-left: auto; color: var(--ink); }
.ok-text { color: var(--ok); }

/* Resumen: gráfico "Últimos 12 meses" por categoría */
.grafico-meses { position: relative; }
.gm-controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.gm-controles select { width: auto; min-width: 160px; }
.gm-controles .gm-tabla { margin-left: auto; color: var(--link); }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border-radius: var(--radius); }
.seg button { border: 0; background: none; padding: 5px 12px; border-radius: 6px; font: 500 13px var(--f-ui); color: var(--ink-2); cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(31, 55, 91, .12); }
.gm-leyenda { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-bottom: 6px; }
.gm-item { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: none; padding: 3px 8px; border-radius: 99px;
  font: 500 12.5px var(--f-ui); color: var(--ink-3); cursor: pointer; }
.gm-item.on { color: var(--ink); }
button.gm-item:hover { border-color: var(--line); }
.grafico-meses .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid transparent; flex: none; vertical-align: -1px; }
.grafico-meses .sw.linea { width: 14px; height: 0; border: 0; border-top: 2px solid var(--ink); border-radius: 0; position: relative; }
.grafico-meses .sw.linea::after { content: ""; position: absolute; left: 4px; top: -5px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.gm-item:not(.on) .sw.linea, .gm-item:not(.on) .sw.linea::after { opacity: .35; }
.gm-lienzo { position: relative; }
.gm-lienzo svg { touch-action: pan-y; }
.gm-foco { fill: var(--surface-2); }
.chart .axis.anio { font-size: 10px; fill: var(--ink-3); }
.gm-aportado polyline { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; pointer-events: none; }
.gm-aportado circle { fill: var(--ink); stroke: var(--surface); stroke-width: 2; pointer-events: none; }
.gm-tip { position: absolute; top: 4px; width: 230px; z-index: 6; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px 12px; font-size: 12.5px; pointer-events: none; }
.gm-tip ul { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 3px; }
.gm-tip li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 6px; }
.gm-tip-pie { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; border-top: 1px solid var(--line-soft); padding-top: 6px; }
.gm-tip-pie span:nth-child(odd) { color: var(--ink-2); }
.gm-tip .num { font-variant-numeric: tabular-nums; text-align: right; }
table.gm-tabla-datos td:first-child { white-space: nowrap; }
table.gm-tabla-datos tr.total td { border-top: 1px solid var(--line); font-weight: 600; }
.hbars { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.hbars li { display: grid; grid-template-columns: 130px 1fr 90px; gap: 10px; align-items: center; }
.hbars .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars .bar { background: var(--surface-2); border-radius: 2px; height: 10px; overflow: hidden; }
.hbars .bar i { display: block; height: 100%; border-radius: 2px; }
.hbars .num { text-align: right; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover { background: var(--surface-2); }
tfoot th { border-top: 2px solid var(--line); border-bottom: 0; color: var(--ink); }
.table-wrap > table { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.card .table-wrap > table { border: 0; box-shadow: none; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions > * + * { margin-left: 6px; }
table.pivot td, table.pivot th { padding: 6px 8px; font-size: 13px; }
table.catalog td { padding: 4px 6px; }
table.catalog input[type=text], table.catalog input[type=number], table.catalog select { width: 100%; }
/* Edición en lote (Configuración): filas cambiadas, errores y barra "Guardar cambios" */
table.catalog tr.fila-cambiada td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.catalog tr.fila-cambiada td { background: var(--accent-soft); }
table.catalog tr.fila-error td { background: var(--bad-soft); }
table.catalog tr.fila-error td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.errores-lote { margin: 8px 0 0; padding: 8px 12px 8px 28px; background: var(--bad-soft); color: var(--bad); border-radius: var(--radius); font-size: 13px; }
.lote-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px;
  position: sticky; bottom: 0; z-index: 5; padding: 8px 0; background: var(--surface); }
.barra-cambios { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 6px 6px 6px 14px; border-radius: var(--radius);
  background: var(--ink); color: #fff; box-shadow: var(--shadow); font-size: 13px; }
.barra-cambios .btn:not(.primary) { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }

/* Badges */
.badge { display: inline-flex; gap: 4px; align-items: center; border-radius: 99px; padding: 2px 9px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.mute { background: var(--mute-soft); color: var(--ink-2); }
.tag { font-size: 12px; padding: 1px 8px; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.tag.pago_directo { background: var(--accent-soft); color: var(--accent); }
.tag.adelanto, .tag.extra { background: var(--warn-soft); color: var(--warn); }
.pill { font-size: 12px; padding: 3px 10px; border-radius: 99px; }
.pill.bad { background: var(--bad-soft); color: var(--bad); } .pill.warn { background: var(--warn-soft); color: var(--warn); }

/* Controls */
button { font: inherit; cursor: pointer; }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: 7px 12px; font-weight: 500; }
.btn:hover { border-color: var(--ink-3); text-decoration: none; }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: 0 6px 16px rgba(1, 171, 228, .3); }
.btn.primary:hover { background: #0399CC; border-color: #0399CC; }
.btn.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--bad); }
.btn.small { padding: 3px 9px; font-size: 12px; }
.icon { border: 0; background: transparent; color: var(--ink-2); padding: 4px 6px; border-radius: var(--radius); font-size: 15px; }
.icon:hover { background: var(--surface-2); color: var(--ink); }
.link { border: 0; background: none; padding: 0; color: var(--ink); text-align: left; }
.link:hover { color: var(--link); text-decoration: underline; }
.link.strong { font-weight: 500; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 9px; min-width: 0; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { width: 100%; resize: vertical; }
.check { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); white-space: nowrap; }
.monthpicker { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 2px; box-shadow: var(--shadow); }
.monthpicker span { min-width: 130px; text-align: center; font: 600 15px var(--f-ui); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.filters input[type=search] { flex: 1 1 220px; }
.summary { display: flex; gap: 22px; margin: 0 0 12px; color: var(--ink-2); flex-wrap: wrap; }
.summary .num, .summary strong { color: var(--ink); margin-left: 4px; }
.notice { background: var(--warn-soft); border: 1px solid var(--warn); color: var(--ink); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.notice .btn { margin-left: auto; }
.empty { border: 1px dashed var(--line); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--ink-2); background: var(--surface); margin-bottom: 16px; }
.dropzone { border: 2px dashed var(--line); border-radius: var(--radius); padding: 18px; text-align: center; color: var(--ink-2); margin-bottom: 16px; }
.dropzone.on { border-color: var(--accent); background: var(--accent-soft); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 14px 0; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 8px 12px; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button.on { color: var(--link); border-color: var(--accent); font-weight: 600; }
.inline { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.inline-filter { margin-left: auto; font-weight: 400; }
.spacer { flex: 1; }

/* Modal */
.overlay { position: fixed; inset: 0; background: rgba(31, 55, 91, .45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: var(--surface); border-radius: var(--radius-lg); width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.modal.wide { width: min(900px, 100%); }
.modal header h2 { font: 700 18px var(--f-ui); }
.modal header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.modal-body { padding: 16px 18px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field > span { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.field small { color: var(--ink-2); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.factura-box { display: flex; gap: 12px; align-items: center; padding: 10px; background: var(--surface-2); border-radius: var(--radius); margin-top: 6px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.preview iframe { width: 100%; height: 560px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.notes { background: var(--warn-soft); border-radius: var(--radius); padding: 8px 8px 8px 26px; margin: 0 0 12px; font-size: 13px; }

/* Import */
.import-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.import-head p { margin: 4px 0; }
.import-actions { display: flex; gap: 8px; align-items: center; }
.issues { list-style: none; padding: 0; margin: 0; }
.issues li { display: flex; gap: 10px; padding: 8px 10px; border-radius: var(--radius); margin-bottom: 4px; }
.issues li.error { background: var(--bad-soft); }
.issues li.aviso { background: var(--warn-soft); }
.issues li.info { background: var(--surface-2); }
.ok-card { border-color: var(--ok); }
.prose ol, .prose ul { padding-left: 20px; } .prose li { margin: 4px 0; }
.venc.vencidas { border-left: 4px solid var(--bad); }
.venc.hoy, .venc.semana { border-left: 4px solid var(--warn); }
.venc.pagadas { border-left: 4px solid var(--ok); }
.w-date { width: 110px; }

/* Toasts */
.toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0, 0, 0, .2); max-width: 360px; }
.toast.error { background: var(--bad); color: #fff; }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .hero { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  aside { position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; height: auto; width: min(300px, 85vw); transform: translateX(-100%); transition: transform .2s; padding-top: calc(18px + env(safe-area-inset-top)); padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  aside.open { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .3); }
  main { padding: calc(14px + env(safe-area-inset-top)) 14px calc(84px + env(safe-area-inset-bottom)); }
  .cols, .cols.three, .grid2, .split { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: 1fr; }
  .flow > div { border-left: 0; border-top: 1px solid var(--line); }
  .hbars li { grid-template-columns: 100px 1fr 80px; }
}

/* Limpieza de datos */
.btn.danger-solid { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger-solid:disabled { opacity: .45; }
.datos-item { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.datos-item:last-child { border-bottom: 0; }
.datos-item p { margin: 0; max-width: 640px; }
.datos-item h3 { margin-bottom: 4px; }
.danger-zone h3 { color: var(--bad); }
.sel-list { list-style: none; padding: 0; margin: 12px 0; border: 1px solid var(--line); border-radius: var(--radius); }
.sel-list > li { border-bottom: 1px solid var(--line); }
.sel-list > li:last-child { border-bottom: 0; }
.sel-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.sel-row .muted { margin-left: auto; font-size: 12px; }
.sel-items { list-style: none; margin: 0; padding: 4px 12px 10px 38px; max-height: 260px; overflow: auto; background: var(--surface-2); }
.sel-items li { padding: 2px 0; }
.sel-items .check { white-space: normal; color: var(--ink); }
.block-warn { background: var(--warn-soft); border: 1px solid var(--warn); border-radius: var(--radius); padding: 10px 14px; margin: 12px 0; }
.block-warn p { margin: 4px 0; }
.block-warn ul { margin: 6px 0 0; padding-left: 18px; max-height: 260px; overflow: auto; font-size: 13px; }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
@media (max-width: 820px) { .datos-item { flex-direction: column; align-items: flex-start; } }

/* Revisión de facturas */
.progress { height: 4px; background: var(--surface-2); border-radius: 99px; margin: -4px 0 14px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.filename { word-break: break-all; }
.filename .tag { margin-left: 6px; }
.gasto-choice { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.radio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.radio select { flex: 1 1 220px; min-width: 0; }
.block-warn.small { font-size: 13px; margin: 0; padding: 6px 10px; }
.resultados { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow: auto; }
.resultados li { display: flex; gap: 10px; padding: 8px 10px; border-radius: var(--radius); background: var(--surface-2); }
.resultados li.ok > span { color: var(--ok); } .resultados li.error > span { color: var(--bad); }

/* Tablas ordenables y filtros */
th.sortable { padding: 0; }
th.sortable button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 8px 10px; width: 100%; box-sizing: border-box; }
th.sortable.r button { justify-content: flex-end; }
th.sortable button:hover { color: var(--ink); }
th.sortable button:focus-visible { outline: 2px solid var(--accent); }
th.sortable .arrow { font-size: 10px; opacity: .35; }
th.sortable.on { color: var(--accent); }
th.sortable.on .arrow { opacity: 1; }
.filters .range { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 6px; background: var(--surface); }
.filters .range > span { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.filters .range input { border: 0; padding: 4px 2px; }
.filters .range input[type=number] { width: 80px; }
.filters .count-res { margin-left: auto; font-size: 12px; color: var(--ink-2); }
td.obs { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 13px; }
.table-wrap th:not(.sortable), .table-wrap td { padding-left: 8px; padding-right: 8px; }
.table-wrap th.sortable button { padding-left: 8px; padding-right: 8px; }
.table-wrap td.strong { font-weight: 500; white-space: nowrap; }
td.obs.narrow { max-width: 130px; }
.row-actions .btn.small { padding: 2px 7px; }
.stack-actions { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.stack-actions > * + * { margin-left: 0 !important; }
.stack-actions .btn { justify-content: center; }

/* Carga de varios meses */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -2px 0 12px; }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); border-radius: 99px; padding: 3px 10px; font-size: 12px; text-decoration: line-through; }
.chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); text-decoration: none; font-weight: 600; }
.lote-personas { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin: 4px 0 8px; }
.lote-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.lote-head .inline { margin: 0; }
.lote-head input { width: 190px; }
.lote-row { display: grid; grid-template-columns: 22px 1fr 140px; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); }
.lote-row input[type=number] { width: 100%; }
.lote-row input:disabled { opacity: .4; }
.tag.sistema { background: var(--surface-2); color: var(--ink-3); font-size: 11px; }
/* Diferencias factura ↔ gasto */
table.difs { margin: 6px 0 8px; font-size: 13px; background: transparent; }
table.difs th, table.difs td { padding: 4px 8px; border-bottom: 1px solid rgba(0,0,0,.06); }
.decision { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.decision .radio { font-weight: 500; }
.icon:disabled { opacity: .3; cursor: default; }
.btn { white-space: nowrap; }

/* Resumen: paneles de indicadores */
.section-title { margin: 22px 0 10px; }
.panel { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); margin-bottom: 16px; box-shadow: var(--shadow); }
.cells { display: grid; }
.cells.c5 { grid-template-columns: repeat(5, 1fr); }
.cells.c3 { grid-template-columns: repeat(3, 1fr); }
.cell { padding: 16px 18px; border-left: 1px solid var(--line); min-width: 0; }
.cells.c5 > .cell:first-child, .cells.c3 > .cell:nth-child(3n + 1) { border-left: 0; }
.cells.c3 > .cell:nth-child(n + 4) { border-top: 1px solid var(--line); }
.cell .l { color: var(--ink-2); font-size: 13px; }
.cell .v { font: 600 23px/1.2 var(--f-ui); font-variant-numeric: tabular-nums lining-nums; margin-top: 6px; }
.cell .v .num { font: inherit; }
.n, .cell .n { color: var(--ink-3); font-size: 12.5px; line-height: 1.4; margin-top: 4px; }
.cell.warn .l, .cell.warn .v, .cell.warn .v .num { color: var(--warn); }
.cell.bad .l, .cell.bad .v, .cell.bad .v .num { color: var(--bad); }
.cell.warn .l::before, .cell.bad .l::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.cell .meter { display: block; height: 6px; background: var(--mute-soft); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.cell .meter i { display: block; height: 100%; background: var(--accent); }
.cell.dos .v { display: flex; flex-direction: column; gap: 4px; font-size: 20px; }
.cell.dos .fila { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cell.dos .fila b { font-weight: 600; }
.cell.dos .fila .n { margin: 0; font-family: var(--f-ui); }
.sube { color: var(--bad); } .baja { color: var(--ok); }
.flow > div .n { margin-top: 0; }
@media (max-width: 1100px) {
  .cells.c5 { grid-template-columns: repeat(3, 1fr); }
  .cells.c5 > .cell { border-left: 0; border-top: 1px solid var(--line); }
  .cells.c5 > .cell:nth-child(-n + 3) { border-top: 0; }
  .cells.c5 > .cell:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); }
}
@media (max-width: 820px) {
  .cells.c5, .cells.c3 { grid-template-columns: 1fr; }
  .cells > .cell, .cells.c5 > .cell:not(:nth-child(3n + 1)) { border-left: 0; border-top: 1px solid var(--line); }
  .cells > .cell:first-child { border-top: 0; }
  .saldo strong { font-size: 38px; }
}
.statelist { list-style: none; padding: 0; margin: 0; }
.statelist li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.statelist li b { margin-left: auto; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
.dot.pagado { background: var(--ok); } .dot.pendiente, .dot.pendiente_factura { background: var(--warn); } .dot.vencido { background: var(--bad); }

/* Resumen: gastos por categoría con media mensual */
.catmedia { display: flex; flex-direction: column; }
.cm-head, .cm-row, .cm-foot { display: grid; grid-template-columns: 22px minmax(90px, 140px) 1fr 84px 84px; gap: 8px; align-items: center; }
.cm-head { font-size: 12px; color: var(--ink-3); padding-bottom: 4px; }
.cm-row { padding: 4px 0; cursor: pointer; }
.cm-row:hover .lbl { color: var(--accent); }
.cm-row .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-row .bar { background: var(--surface-2); border-radius: 2px; height: 10px; overflow: hidden; }
.cm-row .bar i { display: block; height: 100%; background: var(--s1); border-radius: 2px; }
.cm-row.off .lbl, .cm-row.off .num { color: var(--ink-3); }
.cm-row.off .bar i { background: var(--ink-3); opacity: .35; }
.cm-foot { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.cm-foot .sel-acc { grid-column: 1 / 3; font-size: 12.5px; }
.cm-foot .tot-l { grid-column: 3 / 5; white-space: nowrap; text-align: right; color: var(--ink-2); font-size: 13px; }
.cm-foot .tot { font: 700 17px var(--f-ui); color: var(--link); justify-self: end; }
@media (max-width: 820px) {
  .cm-head, .cm-row, .cm-foot { grid-template-columns: 22px 1fr 76px 76px; }
  .cm-row .bar, .cm-head > span:nth-child(3) { display: none; }
  .cm-foot .sel-acc { grid-column: 1 / -1; }
  .cm-foot .tot-l { grid-column: 1 / 4; }
}
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
table.compacta { font-size: 13px; }
table.compacta td, .table-wrap table.compacta th:not(.sortable), .table-wrap table.compacta th.sortable button { padding-left: 6px; padding-right: 6px; }
table.compacta .badge { padding: 2px 7px; }
table.compacta td.obs { max-width: 110px; }
table.compacta td.strong { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
table.compacta td.periodo { line-height: 1.3; }

/* Correos */
.filtro-estados { margin: 0 0 12px; }
.filtro-estados .chip { text-decoration: none; color: var(--ink-2); cursor: pointer; }
.filtro-estados .chip.on { color: var(--link); }
.card.conectar { max-width: 640px; }
.card.conectar p { margin: 0 0 14px; }
table.correos td { vertical-align: top; }
table.correos td.remitente { max-width: 190px; }
table.correos td.remitente .strong { font-weight: 600; }
table.correos td.remitente small, table.correos td.asunto small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.correos td.asunto { max-width: 300px; }
table.correos td.asunto small { max-width: 300px; }
table.correos td.adjuntos { max-width: 230px; }
.adj { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 1px 0; }
.adj .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
/* Configuración → Correo */
.correo-config { max-width: 760px; }
.cfg-bloque { padding: 4px 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.cfg-bloque p { margin: 0 0 10px; }
.pasos { margin: 0 0 10px; padding-left: 20px; color: var(--ink-2); }
.pasos li { margin: 4px 0; }
.copiar { display: flex; gap: 8px; margin: 0 0 12px 20px; }
.copiar input { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--surface-2); }
.cuenta-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cuenta-row p { margin: 4px 0 0; }
.veces input[type=number] { width: 64px; margin: 0 8px; }
.veces .inline { margin: 0 0 10px; }
.horas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.horas input { width: 124px; }
.horas input.error { border-color: var(--bad); }
table.correos td.estado .small { margin-top: 4px; white-space: nowrap; }
table.correos td.remitente { max-width: 170px; }
table.correos td.remitente small { max-width: 170px; }
table.correos td.asunto, table.correos td.asunto small { max-width: 270px; }
table.correos td.asunto, table.correos td.asunto small { max-width: 240px; }
table.correos td.remitente, table.correos td.remitente small { max-width: 150px; }
table.correos td.estado .small { white-space: normal; max-width: 190px; }

/* Configuración → Datos */
.datos > .datos-item:first-child { padding-top: 4px; }
.datos .card { box-shadow: none; }
.formatos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.formato { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; cursor: pointer; }
.formato.on { border-color: var(--accent); background: var(--accent-soft); }
.formato input { margin-top: 3px; }
.formato small { display: block; color: var(--ink-2); margin-top: 3px; line-height: 1.35; }
.pdf-check { margin: 4px 0 10px; color: var(--ink); white-space: normal; }
@media (max-width: 600px) { .formatos { grid-template-columns: 1fr; } }
.formato input[type=checkbox] { flex: 0 0 16px; width: 16px; height: 16px; padding: 0; margin: 2px 0 0; }
/* Correos: archivo y filtro por proveedor */
.filtro-estados { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.filtro-estados .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.filtro-estados .chip.archivo { border-style: dashed; }
.filtro-estados .chip.archivo.on { border-style: solid; }
.multiselect { position: relative; }
.ms-boton { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: 5px 10px; font-size: 13px; }
.multiselect.activo .ms-boton { border-color: var(--accent); background: var(--accent-soft); color: var(--link); font-weight: 600; }
.ms-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 230px; max-height: 320px; overflow: auto; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; }
.ms-opcion { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.ms-opcion:hover { background: var(--surface-2); }
.ms-opcion input { flex: 0 0 16px; width: 16px; height: 16px; padding: 0; margin: 0; }
.ms-opcion span { flex: 1; }
.ms-pie { border-top: 1px solid var(--line); margin-top: 4px; padding: 6px 8px 2px; display: flex; justify-content: flex-end; }

/* Acceso (login, primer administrador, cambio de contraseña) */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.acceso-caja { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 28px 28px 22px; }
.acceso-caja .brand { padding: 0 0 18px; }
.acceso-caja h1 { font-size: 24px; margin-bottom: 6px; }
.acceso-caja > p.muted { margin: 0 0 16px; }
.acceso-caja form { margin-top: 14px; }
.acceso-caja .grid2 { gap: 0 12px; }
.acceso-error { background: var(--bad-soft); color: var(--bad); border-radius: var(--radius); padding: 9px 12px; margin: 10px 0; font-size: 13px; }
.btn.ancho { width: 100%; justify-content: center; padding: 10px 12px; margin-top: 6px; }
.btn.google { width: 100%; justify-content: center; gap: 10px; padding: 9px 12px; font-weight: 600; }
.o { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12px; margin: 16px 0; }
.o::before, .o::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.acceso-caja > p.small { margin: 16px 0 0; }
/* Menú de usuario en la barra lateral */
.usuario-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-top: 1px solid var(--line); margin: auto -12px -18px; }
.usuario-menu .quien { display: flex; flex-direction: column; }
.usuario-menu .quien b { color: var(--ink); font-size: 13px; }
.usuario-menu .quien small { color: var(--ink-3); }
.usuario-menu .link { color: var(--ink-2); }
/* Modales en modo consulta: se ven los datos pero no se editan */
fieldset.solo-lectura { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.solo-lectura .modal-actions, fieldset.solo-lectura .btn.danger { display: none; }
fieldset.solo-lectura input, fieldset.solo-lectura select, fieldset.solo-lectura textarea { background: var(--surface-2); color: var(--ink); }
/* Usuarios */
.opciones-rol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opciones-rol .formato.deshabilitado { opacity: .6; cursor: default; }
.opciones-rol input[type=radio] { flex: 0 0 16px; width: 16px; height: 16px; padding: 0; margin: 2px 0 0; }
tr.inactivo td { color: var(--ink-3); }
td.nombre-usuario .tag { margin-left: 6px; }
.temporal { display: grid; gap: 10px; background: var(--surface-2); border-radius: var(--radius); padding: 12px 14px; margin: 10px 0; }
.temporal div { display: flex; flex-direction: column; }
.temporal code { font-size: 17px; padding: 4px 8px; width: fit-content; letter-spacing: .02em; }
@media (max-width: 600px) { .opciones-rol { grid-template-columns: 1fr; } }
td.nombre-usuario { font-weight: 500; white-space: nowrap; }
.pasos-nota { margin: 4px 0 8px 20px !important; }

/* Aportaciones: neto por persona */
.cols.apor { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.cols.apor .por-persona .num.neg { color: var(--ink-2); }
table.por-persona th.grupo { text-align: center; border-bottom: 1px solid var(--line); color: var(--ink-3); font-weight: 600; }
table.por-persona th, table.por-persona td { padding-left: 6px; padding-right: 6px; }
table.por-persona td.strong { font-weight: 600; }
table.por-persona td.mas { color: var(--link); font-weight: 600; }
table.por-persona td.menos { color: var(--warn); font-weight: 600; }
table.otros td { padding: 5px 6px; font-size: 13px; }
.card h4 { margin: 16px 0 4px; font-size: 13px; color: var(--ink-2); }
.devoluciones ul { list-style: none; padding: 0; margin: 8px 0; max-height: none; font-size: 13px; }
.devoluciones li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(0,0,0,.06); flex-wrap: wrap; }
@media (max-width: 1500px) { .cols.apor { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Móvil y app instalada (PWA) */
.tabbar, .velo, .filtros-toggle { display: none; }
.filtros-resto { display: contents; }
@media (max-width: 820px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--line-soft);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border: 0; background: none;
    color: var(--ink-3); font: 500 10.5px var(--f-ui); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .tabbar a.on, .tabbar button.on { color: var(--link); }
  .tabbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .velo { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(31, 55, 91, .35); }
  .lote-pie { bottom: calc(58px + env(safe-area-inset-bottom)); }
  .barra-cambios { width: 100%; }
  .barra-cambios span { flex: 1; }
  h1 { font-size: 26px; }
  .page-head { margin-bottom: 14px; align-items: stretch; }
  .page-head > div:first-child { width: 100%; }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1 1 auto; justify-content: center; }
  .page-head > .btn, .page-head > label.btn { width: 100%; justify-content: center; }
  .monthpicker { flex: 1 1 100%; justify-content: space-between; }
  .dropzone { display: none; }
  /* Formularios: 16px evita que el iPhone haga zoom al escribir */
  input, select, textarea { font-size: 16px; }
  .modal-actions { flex-wrap: wrap; }
  /* Filtros plegables */
  .filters { gap: 8px; }
  .filters input[type=search] { flex: 1 1 0; min-width: 0; }
  .filtros-toggle { display: inline-flex; }
  .filtros-toggle.activo { border-color: var(--accent); color: var(--link); background: var(--accent-soft); }
  .filtros-resto { display: none; }
  .filters.abierto .filtros-resto { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; }
  .filters .range { display: grid; grid-template-columns: auto 1fr auto 1fr; }
  .filters .range input { width: 100%; }
  .filters .count-res { margin: 0; }
  .summary { gap: 6px 16px; font-size: 13px; }
  .card { padding: 14px; }
  .multiselect .ms-panel { right: auto; left: 0; }
  .filtro-estados .spacer { display: none; }
  /* Tablas anchas que se desplazan en horizontal, con la primera columna fija */
  table.desliza th:first-child, table.desliza td:first-child, table.balance th:first-child, table.balance td:first-child, table.pivot th:first-child, table.pivot td:first-child {
    position: sticky; left: 0; background: var(--surface); z-index: 1; }
  .datos-item .btn, .datos-item label.btn { width: 100%; justify-content: center; }
}
@media (max-width: 820px) and (display-mode: standalone) {
  main { padding-top: calc(10px + env(safe-area-inset-top)); }
}
/* Tablas como tarjetas en pantallas estrechas */
@media (max-width: 700px) {
  .table-wrap:has(> table.tarjetas) { overflow: visible; }
  table.tarjetas, .table-wrap > table.tarjetas { display: block; background: transparent; border: 0; box-shadow: none; overflow: visible; }
  table.tarjetas thead { display: none; }
  table.tarjetas tbody { display: flex; flex-direction: column; gap: 10px; }
  table.tarjetas tr { display: block; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 8px 14px; }
  table.tarjetas tbody tr:hover { background: var(--surface); }
  table.tarjetas td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 5px 0 !important; border: 0; text-align: right;
    max-width: none !important; white-space: normal !important; overflow: visible; font-size: 14px; }
  table.tarjetas td::before { content: attr(data-label); flex: 0 0 auto; color: var(--ink-3); font-size: 12px; font-weight: 500; text-align: left; }
  table.tarjetas td[data-label=""]::before { content: none; }
  table.tarjetas td:empty, table.tarjetas td.obs:empty, table.tarjetas td[data-vacio] { display: none; }
  table.tarjetas td > * { min-width: 0; }
  table.tarjetas td.row-actions { justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px !important; }
  table.tarjetas td.row-actions .stack-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  table.tarjetas td.periodo br { display: none; }
  /* Primera celda como título de la tarjeta */
  table.tarjetas td:first-child { font-weight: 600; color: var(--ink); }
  table.correos.tarjetas td.remitente small, table.correos.tarjetas td.asunto small { max-width: 60vw; }
  table.correos.tarjetas td.asunto, table.correos.tarjetas td.remitente { flex-direction: row; }
  table.correos.tarjetas td.asunto > span, table.correos.tarjetas td.remitente > span { text-align: right; }
}
@media (max-width: 820px) {
  .flow { grid-template-columns: repeat(3, 1fr); }
  .flow > div { border-top: 0; border-left: 1px solid var(--line); padding: 12px 10px; }
  .flow > div:first-child { border-left: 0; }
  .flow .num { font-size: 17px; }
  .flow .label { font-size: 12px; }
  .saldo strong { font-size: 40px; }
}
@media (max-width: 820px) {
  aside { background: var(--surface); }
  .overlay { z-index: 70; padding: 0; place-items: stretch; }
  .modal, .modal.wide { width: 100%; max-height: 100%; height: 100%; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
  .modal header { padding-top: calc(14px + env(safe-area-inset-top)); }
  .toasts { bottom: calc(80px + env(safe-area-inset-bottom)); left: 14px; right: 14px; }
  .toast { max-width: none; }
}