/* La Florida — Gestión
   Tokens en :root; el modo oscuro los redefine. Para cambiar la marca,
   tocar --brand y --brand-ink. */

:root {
  --brand: #105c3a;
  --brand-ink: #ffffff;
  --brand-soft: #e2ebe7;
  --navy: #093522;
  --bg: #f4f5f8;
  --surface: #ffffff;
  --surface-2: #eef0f5;
  --line: #dde1ea;
  --line-strong: #c3c9d6;
  --ink: #121a2e;
  --ink-2: #48526a;
  --ink-3: #737c92;
  --ok: #157a4a;
  --ok-soft: #e2f3ea;
  --warn: #9a5b00;
  --warn-soft: #fbefd9;
  --bad: #b42318;
  --bad-soft: #fde8e6;
  --info: #1f5f9e;
  --info-soft: #e5eef8;
  --shadow: 0 1px 2px rgba(20, 35, 30, .06), 0 4px 16px rgba(20, 35, 30, .06);
  --radius: 10px;
  --radius-sm: 7px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --side: 248px;
  --asis: 400px;
  --top: 56px;
  --tabbar: 64px;
  /* El aire que se deja al final de cada pantalla para que los botones que flotan
     abajo (Ayuda a la derecha y, en la demo, DEMO a la izquierda) no tapen el
     último renglón ni una barra de acciones: llegando al fondo, todo queda por
     encima de ellos. En el celular y el iPad parado flotan arriba de la barra de
     abajo (ver más abajo, en el corte de 900 px). */
  --flot: 76px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #93b6a6;
    --brand-ink: #0b1224;
    --brand-soft: #0c2728;
    --bg: #0b1020;
    --surface: #121a2e;
    --surface-2: #18223a;
    --line: #26304a;
    --line-strong: #38435f;
    --ink: #e8ecf5;
    --ink-2: #b0b9cc;
    --ink-3: #848ea6;
    --ok: #4cc38a; --ok-soft: #15301f;
    --warn: #e6a23c; --warn-soft: #33270f;
    --bad: #f47067; --bad-soft: #3a1714;
    --info: #6aa9e9; --info-soft: #14263a;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand: #93b6a6; --brand-ink: #0b1224; --brand-soft: #0c2728;
  --bg: #0b1020; --surface: #121a2e; --surface-2: #18223a; --line: #26304a; --line-strong: #38435f;
  --ink: #e8ecf5; --ink-2: #b0b9cc; --ink-3: #848ea6;
  --ok: #4cc38a; --ok-soft: #15301f; --warn: #e6a23c; --warn-soft: #33270f;
  --bad: #f47067; --bad-soft: #3a1714; --info: #6aa9e9; --info-soft: #14263a;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.45 var(--font); -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 22px; font-weight: 650; }
h2 { font-size: 17px; font-weight: 640; }
h3 { font-size: 15px; font-weight: 620; }
p { margin: 0 0 .6em; }
small, .small { font-size: 12.5px; }
.muted { color: var(--ink-3); }
.ink2 { color: var(--ink-2); }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 13px; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.pos { color: var(--ok); }
.neg { color: var(--bad); }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* ---------- Layout ---------- */
.app { min-height: 100dvh; }
.side {
  position: fixed; inset: 0 auto 0 0; width: var(--side); background: var(--surface);
  border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 30;
}
.side .brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; }
.side .brand img { width: 34px; height: 34px; border-radius: 8px; }
/* el logo cargado en Configuración: entero, sobre blanco, sin recortarlo al cuadrado */
.login img.logo.con-logo { object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 2px; }
/* en la barra, el logo del cliente va solo, sin marco y grande: 68 px de alto (pedido de Iván del 09/10/2026) */
.side .brand img.con-logo { object-fit: contain; background: none; box-shadow: none; padding: 0; border-radius: 0; }
/* un logo apaisado necesita más ancho que el ícono cuadrado; en el menú plegado vuelve al cuadrado */
.side .brand img.con-logo { height: 68px; width: auto; min-width: 0; max-width: 150px; }
/* en oscuro, un respaldo claro: un logo con letras oscuras no se perdería sobre el fondo */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .side .brand img.con-logo { background: #fff; padding: 5px 7px; border-radius: 12px; } }
:root[data-theme="dark"] .side .brand img.con-logo { background: #fff; padding: 5px 7px; border-radius: 12px; }
.login img.logo.con-logo { width: auto; min-width: 52px; max-width: 200px; }
.app.riel .side .brand img.con-logo { height: auto; max-width: 40px; max-height: 40px; }
.side .brand b { font-size: 14.5px; display: block; line-height: 1.15; }
.side .brand span { font-size: 11.5px; color: var(--ink-3); }
/* Empresa del grupo: arriba del menú, sólo si hay más de una */
.emp-sel { position: relative; padding: 0 10px 8px; }
.emp-btn {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; text-align: left;
  cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s;
}
.emp-btn:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); background: var(--surface); }
.emp-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-soft); border-color: var(--brand); }
.emp-ini {
  flex: none; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center;
  background: var(--brand); color: var(--brand-ink); font-size: 11.5px; font-weight: 650; letter-spacing: .02em;
}
.emp-ini.grupo { background: var(--ink-2); color: var(--bg); font-size: 14px; }
.emp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.emp-txt b { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }   /* el nombre de la empresa, entero: en dos renglones si hace falta */
.emp-txt span { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.emp-chev { flex: none; width: 14px; height: 14px; color: var(--ink-3); }
.emp-pop {
  position: absolute; left: 10px; top: calc(100% - 4px); z-index: 40; padding: 6px;
  width: max(calc(100% - 20px), 312px);  /* más ancho que el menú: los nombres de las sociedades entran enteros */
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06);
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top center;
  transition: opacity .14s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}
.emp-pop.in { opacity: 1; transform: none; }
.emp-pop .emp-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); padding: 6px 8px 4px; }
.emp-pop button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.emp-pop button:hover, .emp-pop button:focus-visible { background: var(--surface-2); outline: none; }
.emp-pop .emp-ok { flex: none; width: 15px; height: 15px; color: var(--brand); visibility: hidden; }
.emp-pop button.on .emp-ok { visibility: visible; }
.emp-pop .emp-sep { height: 1px; background: var(--line); margin: 5px 4px; }
@media (prefers-reduced-motion: reduce) { .emp-pop { transition: none; } }
/* En el teléfono el menú ya ocupa el ancho útil: la lista no se sale de él */
@media (max-width: 767px) {
  .emp-pop { width: auto; right: 10px; }
  .emp-pop .emp-txt b, .emp-pop .emp-txt span { white-space: normal; }  /* el nombre entero, en dos renglones si hace falta */
}

.side nav { overflow-y: auto; padding: 4px 8px 16px; flex: 1; }
/* cada sección se pliega tocando su título; plegada, dice cuántas pantallas tiene */
.side .grp {
  display: flex; align-items: center; gap: 6px; width: 100%; margin: 4px 0 1px; padding: 6px 10px; border: 0; border-radius: 7px;
  background: none; font: inherit; font-size: 11px; line-height: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3);
  cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;
}
.side .grp:hover { color: var(--ink-2); background: var(--surface-2); }
.side .grp:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.side .grp-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .grp-n { font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--ink-3); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .15s; }
.side .ngrp.cerrada .grp-n { opacity: 1; }
/* plegada con algo pendiente adentro: un punto rojo */
.side .grp .badge.dot { margin: 0; min-width: 0; width: 7px; height: 7px; padding: 0; border-radius: 50%; }
.side .ngrp:first-child .grp { margin-top: 0; }
.side .grp-chev { width: 12px; height: 12px; flex: none; transform: rotate(90deg); transition: transform .2s ease; }
.side .ngrp.cerrada .grp-chev { transform: none; }
.side .grp-items { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s ease; }
.side .grp-items > div { min-height: 0; overflow: hidden; }
.side .ngrp.cerrada .grp-items { grid-template-rows: 0fr; }
@media (prefers-reduced-motion: reduce) { .side .grp-items, .side .grp-chev { transition: none; } }
.side .nav-acc { display: flex; justify-content: flex-end; padding: 0 14px; margin-bottom: -4px; }
.side .nav-acc button { border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 12px; color: var(--brand); cursor: pointer; border-radius: 5px; }
.side .nav-acc button:hover { text-decoration: underline; }
.side .nav-acc button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.side .riel-btn svg { width: 18px; height: 18px; }
.side nav a {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px;
  color: var(--ink-2); font-size: 14px; text-decoration: none;
}
.side nav a svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.side nav a:hover { background: var(--surface-2); color: var(--ink); }
.side nav a.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.side nav a .badge { margin-left: auto; }
.side .me { border-top: 1px solid var(--line); padding: 10px 12px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.main { margin-left: var(--side); min-height: 100dvh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--top); display: flex; align-items: center; gap: 12px;
  padding: 0 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 18px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .back { display: none; }
.content { padding: 20px 24px var(--flot); max-width: 1280px; width: 100%; }
.tabbar { display: none; }

.sync { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.sync i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; }
.sync.off i { background: var(--warn); }
.sync.busy i { background: var(--info); animation: pulse 1s infinite; }
.sync.err i { background: var(--bad); }
@keyframes pulse { 50% { opacity: .35; } }

@media (max-width: 900px) {
  .side { transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow); }
  .side.open { transform: none; }
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 25; }
  .main { margin-left: 0; }
  .topbar { padding: 0 12px; padding-top: env(safe-area-inset-top); height: calc(var(--top) + env(safe-area-inset-top)); }
  .topbar .back { display: inline-flex; }
  :root { --flot: calc(var(--tabbar) + 68px + env(safe-area-inset-bottom)); }
  .content { padding: 14px 16px var(--flot); }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface);
    border-top: 1px solid var(--line); height: calc(var(--tabbar) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 11px; color: var(--ink-3); text-decoration: none; position: relative;
  }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a.on { color: var(--brand); font-weight: 600; }
  .tabbar a .badge { position: absolute; top: 6px; left: 55%; }
}


.side .brand { color: inherit; text-decoration: none !important; border-radius: 10px; margin: 4px 6px 0; }
.side .brand:hover { background: var(--surface-2); }
.side .brand:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Componentes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: 500 14px var(--font); cursor: pointer; white-space: nowrap; text-decoration: none !important;
}
.btn:hover { background: var(--surface-2); }
.btn svg { width: 17px; height: 17px; }
.btn.pri { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.pri:hover { filter: brightness(1.07); }
.btn.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { min-height: 30px; padding: 0 10px; font-size: 13px; }
.btn.icon { padding: 0; width: 36px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
@media (max-width: 900px) { .btn { min-height: 42px; } .btn.sm { min-height: 36px; } .btn.icon { width: 42px; } }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.spacer { flex: 1; }
.stack > * + * { margin-top: 16px; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .g2, .g3 { grid-template-columns: 1fr; } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.card > h2, .card > .card-h { margin-bottom: 12px; }
.card-h { display: flex; align-items: center; gap: 10px; }
.card-h h2 { flex: 1; }
/* lo que no entra de ancho (una tabla con muchas columnas) se desliza de costado, no se corta */
.card.flush { padding: 0; overflow: auto hidden; -webkit-overflow-scrolling: touch; }
.card.flush > .card-h { padding: 14px 16px 0; }

.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.kpi .l { font-size: 12.5px; color: var(--ink-3); }
.kpi .v { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .s { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
@media (max-width: 640px) { .kpi .v { font-size: 19px; } }
/* Una cifra que no entra en su tarjeta se achica hasta entrar (js/cifras.js); los
   puntos suspensivos quedan sólo de respaldo. Si tuviera que achicarse demasiado,
   la fila de tarjetas pasa a la mitad de columnas: */
.grid.kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid.kpis-1 { grid-template-columns: minmax(0, 1fr) !important; }
.grid.kpis-2 > .kpi, .grid.kpis-1 > .kpi { grid-column: auto !important; }

.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 550;
  background: var(--surface-2); color: var(--ink-2); white-space: nowrap; line-height: 1.6;
}
.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.info { background: var(--info-soft); color: var(--info); }
.badge.brand { background: var(--brand-soft); color: var(--brand); }
.badge.dot { min-width: 18px; justify-content: center; padding: 0 5px; background: var(--bad); color: #fff; }

/* El globito de avisos va en la esquina del botón, no encima de la campana.
   Iba adentro, con `top:2px; right:0`, sobre un botón de 36 px: tapaba el 88%
   del ícono con un dígito y entero con dos. El número escondía justo lo que
   había que tocar. Afuera y más chico se leen las dos cosas; el anillo del
   color del fondo lo despega del ícono para que no se lean como una mancha. */
.btn.icon.avisos { position: relative; overflow: visible; }
.btn.icon.avisos .badge.dot {
  position: absolute; top: -2px; right: -2px;
  min-width: 15px; height: 15px; padding: 0 4px;
  font-size: 10px; font-weight: 650; line-height: 1;
  box-shadow: 0 0 0 2px var(--bg);
  pointer-events: none;
}

.alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font-size: 14px; }
.alert.warn { background: var(--warn-soft); color: var(--warn); }
.alert.bad { background: var(--bad-soft); color: var(--bad); }
.alert.info { background: var(--info-soft); color: var(--info); }
.alert.ok { background: var(--ok-soft); color: var(--ok); }
.alert a { color: inherit; text-decoration: underline; }
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; }
.tabs a { padding: 9px 12px; font-size: 14px; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; }
.tabs a.on { color: var(--brand); border-color: var(--brand); font-weight: 600; }

/* ---------- Tablas (en celular pasan a tarjetas) ---------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: 550; font-size: 12.5px; color: var(--ink-3); padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; white-space: nowrap; }
.tbl th.num { text-align: right; }   /* el título de una columna de números va sobre los números */
.tbl th.sortable { cursor: pointer; }
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr.click { cursor: pointer; }
.tbl tbody tr.click:hover td { background: var(--surface-2); }
.tbl tfoot td { font-weight: 650; border-top: 1px solid var(--line-strong); border-bottom: 0; }
.tbl tr.sub td { font-size: 13px; color: var(--ink-2); }
.tbl .strong { font-weight: 600; }
/* el estado con su candado al lado (una factura emitida): van juntos, el candado no baja solo a otro renglón */
.tbl td:has(> .badge + svg) { white-space: nowrap; }
.empty { padding: 28px 16px; text-align: center; color: var(--ink-3); font-size: 14px; }

@media (max-width: 720px) {
  table.tbl.cards thead { display: none; }
  table.tbl.cards, .tbl.cards tbody, .tbl.cards tr, .tbl.cards td { display: block; width: 100%; }
  .tbl.cards tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  /* el nombre de la columna a la izquierda y el dato a la derecha. Con flotante y no con
     flex: el dato puede traer partes adentro (un número que no se parte, una marca) y con
     flex cada parte se iba a una punta */
  .tbl.cards td { border: 0; padding: 2px 0; text-align: right; display: flow-root; }
  .tbl.cards td::before { content: attr(data-l); color: var(--ink-3); font-size: 12.5px; float: left; margin-right: 12px; }
  .tbl.cards td.first { font-weight: 600; font-size: 15px; text-align: left; }
  .tbl.cards td.first::before { content: none; }
  .tbl.cards td .badge { white-space: normal; border-radius: 10px; text-align: left; }
  .tbl.cards td:empty { display: none; }
  .tbl.cards tfoot tr { background: var(--surface-2); }
}

/* Lo que no se parte en dos renglones: un CUIT, una fecha, un código, un importe (lo marca js/tablas.js) */
table .entero { white-space: nowrap; }
/* Una tabla que no entra en su lugar (js/tablas.js lo mide): primero se aprieta… */
html table.tbl.apretada { font-size: 13.5px; }
html table.tbl.apretada th, html table.tbl.apretada td { padding-left: 9px; padding-right: 9px; }
html table.tbl.apretada th:first-child, html table.tbl.apretada td:first-child { padding-left: 16px; }
html table.tbl.apretada th:last-child, html table.tbl.apretada td:last-child { padding-right: 16px; }
/* …y si así tampoco entra, cada renglón es una tarjeta: la primera columna de
   título y las demás en grilla, cada dato con el nombre de su columna arriba.
   Es el patrón del celular (arriba), para cualquier ancho y cualquier tabla.
   (La clase va dos veces en cada selector a propósito: tiene que ganarle a las
   reglas de cada diseño y de cada tabla, que también pesan dos clases.) */
html table.en-tarjetas.en-tarjetas { display: block; min-width: 0; width: 100%; }
html table.en-tarjetas.en-tarjetas thead { display: none; }
html table.en-tarjetas.en-tarjetas tbody, html table.en-tarjetas.en-tarjetas tfoot { display: block; width: 100%; }
html table.en-tarjetas.en-tarjetas tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 18px; align-items: start; width: auto; padding: 12px 16px; border-bottom: 1px solid var(--line); }
html table.en-tarjetas.en-tarjetas tbody tr:last-child { border-bottom: 0; }
html table.en-tarjetas.en-tarjetas td, html table.en-tarjetas.en-tarjetas td.num { display: block; width: auto; max-width: none; min-width: 0; border: 0; padding: 0; text-align: left; white-space: normal; background: none; }
html table.en-tarjetas.en-tarjetas td[data-l]::before { content: attr(data-l); display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; text-transform: none; }
html table.en-tarjetas.en-tarjetas td:first-child, html table.en-tarjetas.en-tarjetas td.first, html table.en-tarjetas.en-tarjetas td[colspan] { grid-column: 1 / -1; }
html table.en-tarjetas.en-tarjetas td:first-child { font-weight: 600; font-size: 15px; }
html table.en-tarjetas.en-tarjetas td:first-child::before { content: none; }
html table.en-tarjetas.en-tarjetas td:empty { display: none; }
html table.en-tarjetas.en-tarjetas td .badge { white-space: normal; border-radius: 10px; max-width: 100%; }
html table.en-tarjetas.en-tarjetas td small { white-space: normal; }
html table.en-tarjetas.en-tarjetas tfoot tr { background: var(--surface-2); border-top: 1px solid var(--line-strong); border-bottom: 0; }
html table.en-tarjetas.en-tarjetas tbody tr.click:hover { background: var(--surface-2); }
html table.en-tarjetas.en-tarjetas tbody tr.click:hover td { background: none; }
/* en el celular, igual que las tablas que ya pasaban a tarjetas: un dato por renglón,
   el nombre de la columna a la izquierda y el dato a la derecha */
@media (max-width: 720px) {
  html table.en-tarjetas.en-tarjetas tr { display: block; padding: 10px 14px; }
  html table.en-tarjetas.en-tarjetas td, html table.en-tarjetas.en-tarjetas td.num { display: flow-root; padding: 2px 0; text-align: right; }
  html table.en-tarjetas.en-tarjetas td[data-l]::before { display: inline; float: left; margin: 0 12px 0 0; font-size: 12.5px; font-weight: 400; overflow: visible; }
  html table.en-tarjetas.en-tarjetas td:first-child { text-align: left; }
}
/* Una planilla (una columna por mes o por día) es ancha por lo que muestra: se
   desliza de costado, con la primera columna, la de los conceptos, siempre a la vista */
table.planilla th:first-child, table.planilla td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface-solida, var(--surface)); box-shadow: 1px 0 0 var(--line); }
table.planilla th:first-child { z-index: 2; }
html table.tbl.planilla.apretada { font-size: 12px; }
html table.tbl.planilla.apretada th, html table.tbl.planilla.apretada td { padding-left: 6px; padding-right: 6px; }
html table.tbl.planilla.apretada th:first-child, html table.tbl.planilla.apretada td:first-child { padding-left: 14px; }
html table.tbl.planilla.apretada th:last-child, html table.tbl.planilla.apretada td:last-child { padding-right: 14px; }

/* ---------- Formularios ---------- */
.form { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 12px 14px; }
.f { grid-column: span 6; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.f.s12 { grid-column: span 12; } .f.s3 { grid-column: span 3; } .f.s4 { grid-column: span 4; } .f.s8 { grid-column: span 8; } .f.s2 { grid-column: span 2; }
@media (max-width: 720px) { .f, .f.s3, .f.s4, .f.s8, .f.s2 { grid-column: span 12; } .f.half { grid-column: span 6; } }
.f > label { font-size: 12.5px; color: var(--ink-2); font-weight: 550; }
.f .hint { font-size: 12px; color: var(--ink-3); }
.f .err { font-size: 12px; color: var(--bad); }
.sec { grid-column: span 12; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px; }
input, select, textarea {
  font: 15px var(--font); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 8px 10px; min-height: 38px; width: 100%; min-width: 0;
}
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; min-height: 0; accent-color: var(--brand); }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 0; border-color: var(--brand); }
input[readonly] { background: var(--surface-2); }
/* un texto de ejemplo o un valor más largo que el campo termina en puntos suspensivos, no cortado a media letra */
input { text-overflow: ellipsis; }
input.num { text-align: right; font-variant-numeric: tabular-nums; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; min-height: 38px; }
@media (max-width: 900px) { input, select, textarea { font-size: 16px; min-height: 44px; } }

.search { position: relative; flex: 1; min-width: 180px; max-width: 360px; }
.search input { padding-left: 32px; }
.search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-3); }
@media (max-width: 720px) { .search { max-width: none; flex-basis: 100%; } }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar select { width: auto; }

/* líneas de comprobante */
.lines { width: 100%; border-collapse: collapse; }
.lines th { font-size: 12px; color: var(--ink-3); text-align: left; padding: 4px 6px; font-weight: 550; }
.lines td { padding: 3px 4px; vertical-align: top; }
.lines input, .lines select { min-height: 34px; padding: 5px 8px; }

/* Renglón sin producto de la lista: la descripción baja a todo el ancho.
   Cuando el ítem es un servicio que no está en el catálogo —un análisis con su
   COA, un trabajo a medida— el texto es largo y es el único lugar donde se
   dice qué se facturó: en la columna angosta se escribía a ciegas. Las dos
   filas se leen como un solo renglón, y por eso no hay aire entre ellas. */
.lines tr.con-libre > td { padding-bottom: 0; }
.lines tr.libre > td { padding: 0 4px 10px; }
.lines tr.libre label { display: block; margin-bottom: 2px; }
.lines tr.libre textarea { width: 100%; min-height: 54px; }
@media (max-width: 720px) {
  .lines thead { display: none; }
  .lines, .lines tbody, .lines tr, .lines td { display: block; width: 100%; }
  .lines tr { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
  .lines td::before { content: attr(data-l); display: block; font-size: 12px; color: var(--ink-3); }
  /* En celular cada fila es una tarjeta: las dos del mismo ítem se cosen en una */
  .lines tr.con-libre { border-bottom: 0; border-radius: 8px 8px 0 0; margin-bottom: 0; padding-bottom: 0; }
  .lines tr.libre { border-top: 0; border-radius: 0 0 8px 8px; padding-top: 0; }
  .lines tr.libre td::before { content: none; }
}

/* ---------- Modal / hoja ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(10, 18, 15, .45); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px 0; overflow-y: auto; }
/* el aire de abajo va en la tarjeta: con padding en el fondo, el pie pegajoso deja ver filas por debajo */
.modal-bg > .modal { margin-bottom: 5vh; }
.modal { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); width: 100%; max-width: 760px; }
.modal.wide { max-width: 1040px; }
.modal.narrow { max-width: 460px; }
.modal-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px 10px; }
.modal-h h2 { flex: 1; }
.modal-b { padding: 6px 18px 16px; }
.modal-f { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--surface); border-radius: 0 0 14px 14px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .modal-bg { padding: 0; align-items: flex-end; }
  .modal-bg > .modal { margin-bottom: 0; }
  .modal { border-radius: 16px 16px 0 0; max-height: 94dvh; overflow-y: auto; max-width: none !important; }
  .modal-f { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .modal-f .btn { flex: 1; }
}

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 9px; font-size: 14px; box-shadow: var(--shadow); }
.toast.bad { background: var(--bad); color: #fff; }
@media (max-width: 900px) { .toasts { left: 16px; right: 16px; bottom: calc(var(--tabbar) + 12px + env(safe-area-inset-bottom)); } }

/* ---------- Varios ---------- */
.list-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list-item:last-child { border-bottom: 0; }
.list-item .t { font-weight: 560; }
.list-item .grow { flex: 1; min-width: 0; }
/* `max-content` a secas nunca se achica: la etiqueta más larga fijaba la
   columna y, cuando la tarjeta se angostaba —al abrir el asistente, por
   ejemplo— el valor se salía del recuadro en vez de acomodarse. Con
   `minmax(0, max-content)` la etiqueta cede y parte en dos renglones antes de
   desbordar. Sigue midiendo por la más larga mientras haya lugar.
   El valor va con mínimo `min-content` y no cero: un importe o un badge no se
   pueden partir, así que ante la duda el que se achica es el rótulo. */
.dl { display: grid; grid-template-columns: minmax(0, max-content) minmax(min-content, 1fr); gap: 6px 16px; font-size: 14px; }
.dl dt { color: var(--ink-3); min-width: 0; }
.dl dd { margin: 0; min-width: 0; }
.bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand); }
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--ink-3); font-size: 11px; font-family: var(--font); }
.chart .grid-l { stroke: var(--line); }
.drop { border: 1.5px dashed var(--line-strong); border-radius: 10px; padding: 18px; text-align: center; color: var(--ink-2); cursor: pointer; }
.drop.over { border-color: var(--brand); background: var(--brand-soft); }
.drop svg { width: 20px; height: 20px; vertical-align: -5px; margin-right: 6px; }
.attach { display: flex; flex-wrap: wrap; gap: 8px; }
.attach a, .attach span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.pill-sel { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.pill-sel button { border: 0; background: var(--surface); padding: 6px 12px; font: 13px var(--font); color: var(--ink-2); cursor: pointer; }
.pill-sel button.on { background: var(--brand); color: var(--brand-ink); }

.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login .card { width: 100%; max-width: 400px; padding: 28px; }
.login .logo { width: 52px; height: 52px; border-radius: 12px; margin-bottom: 14px; }

.cal { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.cal .d { min-height: 84px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; font-size: 12px; background: var(--surface); overflow: hidden; }
.cal .d.out { opacity: .45; }
.cal .d.today { border-color: var(--brand); }
.cal .d b { display: block; font-size: 12px; color: var(--ink-3); }
.cal .d a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
.cal .h { font-size: 11px; color: var(--ink-3); text-align: center; }
@media (max-width: 720px) { .cal .d { min-height: 54px; } .cal .d a { font-size: 10px; } }

@media print {
  .side, .topbar, .tabbar, .toolbar, .btn { display: none !important; }
  .main { margin: 0; }
  .card { border: 0; }
}

/* ---------- Divisores regulables (sólo escritorio) ----------
   Barra lateral: se arrastra su borde derecho o se pliega a una columna de íconos.
   Lista | ficha: en las pantallas con ficha, la ficha se abre a la derecha de la lista. */
.divisor { position: absolute; top: 0; bottom: 0; width: 12px; cursor: col-resize; z-index: 5; touch-action: none; outline: none; }
.divisor::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-.5px); background: transparent; transition: background .15s, width .15s; }
.divisor:hover::before, .divisor.arrastrando::before, .divisor:focus-visible::before { width: 3px; transform: translateX(-1.5px); background: color-mix(in srgb, var(--brand) 55%, transparent); }
.divisor .plegar {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22px; height: 44px; padding: 0;
  display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-2); cursor: pointer; opacity: 0; transition: opacity .15s; box-shadow: var(--shadow);
}
.divisor:hover .plegar, .divisor:focus-within .plegar, .divisor .plegar:focus-visible { opacity: 1; }
.divisor .plegar svg { width: 14px; height: 14px; }
.side > .divisor { right: -6px; }
body.redimensionando, body.redimensionando * { cursor: col-resize !important; user-select: none !important; }

/* barra lateral plegada: sólo íconos (en el celular el menú siempre es completo) */
@media (min-width: 901px) {
  .app.riel { --side: 68px; }
  .app.riel .side .brand { justify-content: center; padding-left: 0; padding-right: 0; }
  .app.riel .side .brand > div, .app.riel .side .grp, .app.riel .side .nav-acc, .app.riel .side nav a > span:not(.badge), .app.riel .side .me .grow { display: none; }
  /* achicado a íconos se ven todas las secciones, separadas por una raya */
  .app.riel .side .ngrp.cerrada .grp-items { grid-template-rows: 1fr; }
  .app.riel .side .ngrp + .ngrp { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
  .app.riel .side .me { flex-direction: column; gap: 4px; }
  .app.riel .side nav { padding: 4px 10px 16px; }
  .app.riel .emp-btn { justify-content: center; padding: 7px 0; }
  .app.riel .emp-btn .emp-txt, .app.riel .emp-btn .emp-chev { display: none; }
  .app.riel .emp-pop { width: 312px; }
  .app.riel .side nav a { justify-content: center; padding: 9px 0; position: relative; }
  .app.riel .side nav a .badge { position: absolute; top: 2px; right: 4px; margin: 0; }
  .app.riel .side .me { justify-content: center; }
  .side, .main { transition: width .2s ease, margin-left .2s ease; }
  body.redimensionando .side, body.redimensionando .main { transition: none; }
}
@media (max-width: 900px) { .side > .divisor, .side .riel-btn { display: none; } }

/* lista | ficha */
.main > .content.con-split { padding: 0; max-width: none; }
/* El ancho de la lista también lo guarda la persona en píxeles: mismo `min()`
   que en Inicio, para que ceda cuando el asistente se lleva parte del ancho. */
.split { display: grid; grid-template-columns: minmax(0, min(var(--split-lista, 40%), 60%)) 0 minmax(0, 1fr); height: calc(100dvh - var(--top)); }
.split > .panel { overflow: auto; min-width: 0; overscroll-behavior: contain; }
.split > .lista { padding: 16px 16px var(--flot) 24px; border-right: 1px solid var(--line); }
.split > .ficha { padding: 16px 24px var(--flot); }
.split > .divisor { position: relative; width: 0; }
.split > .divisor > .zona { position: absolute; top: 0; bottom: 0; left: -6px; width: 12px; }
.split.sin-lista { grid-template-columns: 0 0 minmax(0, 1fr); }
.split.sin-lista > .lista { visibility: hidden; padding: 0; border: 0; }
/* Ficha plegada: la lista ocupa la pantalla entera */
.split.sin-ficha { grid-template-columns: minmax(0, 1fr) 0 0; }
.split.sin-ficha > .ficha { visibility: hidden; padding: 0; }
.split.sin-ficha > .lista { border-right: 0; padding-right: 24px; }
.split.sin-ficha > .divisor { display: none; }

/* Botones de panel, arriba a la derecha */
.paneles { display: inline-flex; gap: 2px; }
.paneles[hidden] { display: none; }
.panel-btn { color: var(--ink-3); }
.panel-btn:hover { color: var(--ink); }
.panel-btn.on { color: var(--brand); }
.panel-btn svg { width: 19px; height: 19px; }
/* el lado que está plegado se dibuja vacío */
.panel-btn:not(.on) svg path:not(:first-of-type) { opacity: .25; }
@media (max-width: 1099px) { .paneles { display: none !important; } }
.split .lista .tbl tr.sel td { background: var(--brand-soft); }
.split .lista .tbl tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.split .lista .toolbar { position: sticky; top: -16px; z-index: 2; background: var(--bg); padding-top: 8px; margin-top: -8px; }

/* ---------- Configuración → Apariencia ---------- */
.opcion-tema { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.opcion-tema:hover { border-color: var(--line-strong); }
.opcion-tema.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.opcion-tema:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.opcion-tema .t { font-weight: 600; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.miniatura { display: grid; grid-template-columns: 26% 1fr; aspect-ratio: 16 / 10; width: 100%; border-radius: 9px; overflow: hidden; background: var(--f); border: 1px solid rgba(128,128,128,.25); }
.miniatura i { display: block; font-style: normal; }
.miniatura .m-lat { background: var(--l); padding: 12% 12%; display: flex; flex-direction: column; gap: 9%; }
.miniatura .m-lat b { display: block; height: 6%; min-height: 4px; border-radius: 3px; background: color-mix(in srgb, var(--x) 22%, transparent); }
.miniatura .m-lat b.on { background: var(--a); }
.miniatura .m-cont { padding: 8% 8%; display: flex; flex-direction: column; gap: 7%; }
.miniatura .m-tit { height: 8%; width: 45%; border-radius: 3px; background: var(--x); opacity: .85; }
.miniatura .m-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6%; height: 26%; }
.miniatura .m-kpis i, .miniatura .m-card { background: var(--t); border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.miniatura .m-card { flex: 1; }
/* lista angosta al lado de la ficha: renglones compactos de una línea */
.split .lista .tbl { font-size: 13px; }
.split .lista .tbl th, .split .lista .tbl td { padding: 8px 12px; white-space: nowrap; }
.split .lista .tbl td { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.split .lista .toolbar { gap: 6px; }
.split .lista .toolbar .btn { min-height: 32px; padding: 0 11px; font-size: 13px; }
.split .lista .tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }

/* Globo de ayuda de los botones (js/ayuda.js) */
.globo-ayuda { position: fixed; top: 0; left: 0; z-index: 200; max-width: 280px; padding: 7px 10px; border-radius: 8px;
  background: var(--ink); color: var(--surface); font: 500 12.5px/1.4 var(--font); letter-spacing: 0; text-transform: none;
  box-shadow: 0 6px 20px rgba(8, 12, 28, .22); pointer-events: none; text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) { .globo-ayuda:not([hidden]) { animation: globo-entra .12s ease-out; } @keyframes globo-entra { from { opacity: 0; } } }

/* ---------- Inicio: disposiciones (js/pages/portada.js) ---------- */
/* El ancho del resumen lo guarda la persona en píxeles, arrastrando el
   divisor. `min(…, 52%)` hace que igual ceda cuando el contenido se angosta:
   si no, al abrir el asistente la columna de la derecha se queda sin lugar y
   sus tarjetas se cortan. */
.inicio-split { display: grid; grid-template-columns: minmax(0, min(var(--res-ancho, 300px), 52%)) 24px minmax(0, 1fr); align-items: start; }
.inicio-split > .divisor { position: relative; width: auto; align-self: stretch; }
.res-col { position: sticky; top: calc(var(--top) + 14px); max-height: calc(100dvh - var(--top) - 28px); overflow: auto; padding: 6px 16px 14px; }
.res-grupo { padding-block: 12px 10px; display: grid; gap: 2px; }
.res-grupo + .res-grupo { border-top: 1px solid var(--line); }
.res-t { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.res-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; padding: 6px 8px; margin-inline: -8px; border-radius: 8px; color: inherit; text-decoration: none !important; }
.res-fila:hover { background: var(--surface-2); }
.res-fila:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.res-fila .l { font-size: 13px; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.res-fila .v { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.res-fila .v.neg { color: var(--bad); } .res-fila .v.pos { color: var(--ok); }
.res-fila .s { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); }
.res-dia { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; padding: 5px 8px; margin-inline: -8px; border-radius: 8px; font-size: 13px; color: var(--ink); text-decoration: none !important; }
.res-dia:hover { background: var(--surface-2); }
.res-dia .fd { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.res-dia .fd.neg { color: var(--bad); font-weight: 600; }
.res-detalle .g2 { grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr)); }
.res-detalle .g3 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.res-card { padding: 8px 16px; }
.inicio-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.inicio-col-t { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
/* Inicio: plegar el resumen o el detalle desde los botones de la barra.
   Al sacar columnas con display:none la grilla recoloca lo que queda, así que
   se pasa a una sola columna en vez de dejar anchos en cero. */
.inicio-split.sin-resumen,
.inicio-split.sin-detalle { grid-template-columns: minmax(0, 1fr); }
.inicio-split.sin-resumen > .res-col,
.inicio-split.sin-resumen > .divisor,
.inicio-split.sin-detalle > .res-detalle,
.inicio-split.sin-detalle > .divisor { display: none; }
.inicio-split.sin-detalle > .res-col { position: static; max-height: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); column-gap: 28px; }

@media (max-width: 1099px) {
  .inicio-split { display: flex; flex-direction: column; gap: 14px; }
  .inicio-split > .divisor { display: none; }
  .res-col { position: static; max-height: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); column-gap: 24px; }
  .res-grupo + .res-grupo { border-top: 0; }
  .inicio-dos { grid-template-columns: minmax(0, 1fr); }
}

/* Lo mismo, pero contando el panel del asistente: se lleva 400px del
   contenido y los medios siguen midiendo la ventana. El umbral es el de
   arriba más el ancho del panel. Es una repetición a propósito: la
   alternativa es una consulta de contenedor sobre `.main`, que además
   cambiaría el bloque contenedor de todo lo que tenga posición fija adentro. */
@media (max-width: 1499px) {
  .con-asis .inicio-split { display: flex; flex-direction: column; gap: 14px; }
  .con-asis .inicio-split > .divisor { display: none; }
  .con-asis .res-col { position: static; max-height: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); column-gap: 24px; }
  .con-asis .res-grupo + .res-grupo { border-top: 0; }
  .con-asis .inicio-dos { grid-template-columns: minmax(0, 1fr); }
}
/* Configuración → Inicio */
.bloques-inicio { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 6px 18px; }

/* ---------- Lector de códigos de barras (js/escaner.js) ---------- */
.escaner { display: grid; gap: 12px; }
.escaner-vista { position: relative; aspect-ratio: 4 / 3; max-height: 46vh; background: #0b1020; border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; }
.escaner-vista video, .escaner-vista canvas, .escaner-vista img { width: 100%; height: 100%; object-fit: cover; }
.escaner-mira { position: absolute; inset: 22% 12%; border: 2px solid rgba(255,255,255,.9); border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(8,12,28,.28); pointer-events: none; }
.escaner-estado { font-size: 14px; color: var(--ink-2); min-height: 20px; }
.escaner-estado.mal { color: var(--bad); }
.escaner-manual .row { gap: 8px; margin-top: 4px; }
.escaner-manual input { flex: 1; min-width: 0; }
.escaner-leidos { display: grid; gap: 4px; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 8px; max-height: 120px; overflow: auto; }
.escaner-leidos div:first-child { color: var(--ink); font-weight: 600; }

/* ---------- Cámara de la app (js/camara.js) ---------- */
.camara { display: grid; gap: 10px; }
.camara-vista { position: relative; aspect-ratio: 4 / 3; max-height: 52vh; background: #0b1020; border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; }
.camara-vista video { width: 100%; height: 100%; object-fit: contain; }
.camara-tiras { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.camara-tira { position: relative; flex: none; }
.camara-tira img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.camara-tira button { position: absolute; top: -6px; right: -6px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 50%; }

/* ---------- Ayuda y recorrido guiado ---------- */
.lista-temas .list-item { border-top: 1px solid var(--line); }
.lista-temas .list-item:first-child { border-top: 0; }
.tema-cuerpo { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.tema-cuerpo b { color: var(--ink); }
.tema-pasos { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.tema-pasos li::marker { color: var(--brand); font-weight: 650; }
.primeros .pasos-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; font-size: 14px; }
.primeros .pasos-lista li { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.primeros .pasos-lista li.ok { color: var(--ink-3); text-decoration: line-through; }
.primeros .pasos-lista .marca { width: 18px; height: 18px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; color: var(--ok); }
.primeros .pasos-lista li.ok .marca { border-color: var(--ok); }
.primeros .pasos-lista svg { width: 12px; height: 12px; }
/* El oscurecido lo hace la sombra gigante del foco, que deja el hueco justo sobre
   lo resaltado. El fondo va transparente: si también pintara, lo que se quiere
   mostrar quedaría tapado y borroso, que es lo que pasaba antes. Sólo se oscurece
   por su cuenta en los pasos que no apuntan a ningún elemento. */
.tour-fondo { position: fixed; inset: 0; z-index: 150; background: transparent; }
.tour-fondo.tour-solo { background: rgba(8, 12, 28, .58); }
.tour-foco { position: fixed; z-index: 151; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--brand), 0 0 0 100vmax rgba(8, 12, 28, .58);
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease; }
.tour-globo { position: fixed; z-index: 152; width: min(380px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(8, 12, 28, .35); border: 1px solid var(--line); padding: 16px 18px; font-family: var(--font); }
.tour-globo .tour-n { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 650; }
.tour-globo h2 { font-size: 17px; margin: 4px 0 6px; }
.tour-globo p { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.tour-bot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .tour-foco { transition: none; } }
/* Los recorridos para hacer (recorridos-guiados.js): el cartel no tapa la app y lo
   que hay que tocar lleva un anillo, sin oscurecer el resto (se sigue usando). */
.tour-foco.tour-anillo { border-radius: 10px; box-shadow: 0 0 0 3px var(--brand), 0 0 0 8px color-mix(in srgb, var(--brand) 20%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .tour-foco.tour-anillo { animation: tour-latido 1.8s ease-in-out infinite; }
  @keyframes tour-latido { 50% { box-shadow: 0 0 0 3px var(--brand), 0 0 0 12px color-mix(in srgb, var(--brand) 6%, transparent); } }
}
.tour-globo.tour-hacer { width: min(360px, calc(100vw - 16px)); padding: 14px 16px 14px; box-shadow: 0 14px 40px rgba(8, 12, 28, .28); }
.tour-cab { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.tour-cab .tour-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-chico { flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.tour-chico:hover { background: var(--surface-2); color: var(--ink); }
.tour-chico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tour-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tour-aviso { margin-top: 8px !important; font-size: 13px !important; color: var(--bad) !important; }
.tour-espera { margin-top: 8px !important; font-size: 13px !important; color: var(--ink-2) !important; }
.tour-listo { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--ok); font-weight: 600; font-size: 14px; }
.tour-listo svg { width: 16px; height: 16px; }
.tour-globo.tour-hecho .tour-bot { display: none; }
.tour-pildora { position: fixed; z-index: 152; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--bg); padding: 9px 15px; font: 500 13px var(--font); box-shadow: 0 8px 24px rgba(8, 12, 28, .3); display: inline-flex; align-items: center; gap: 8px; }
.tour-pildora[hidden], .tour-globo[hidden] { display: none; }
.tour-pildora b { font-weight: 650; }
.tour-pildora span { opacity: .7; }
.tour-pildora:focus-visible, .tour-chico:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (max-width: 640px) {
  .tour-globo.tour-hacer { width: calc(100vw - 16px); padding: 12px 14px; border-radius: 16px; }
  .tour-globo.tour-hacer h2 { font-size: 16px; margin: 2px 0 4px; }
  .tour-globo.tour-hacer p { font-size: 13.5px; line-height: 1.45; }
  .tour-globo.tour-hacer .tour-bot { margin-top: 10px; }
  .tour-pildora { left: 8px; bottom: calc(var(--tabbar, 0px) + 10px + env(safe-area-inset-bottom, 0px)); }
}

/* Ayuda: los recorridos para hacer de la demo */
.ay-hacer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ay-hacer-b { text-align: left; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; line-height: 1.35; display: flex; flex-direction: column; gap: 4px; }
.ay-hacer-b:hover { border-color: var(--line-strong); background: var(--surface-2); }
.ay-hacer-b b { font-size: 14.5px; font-weight: 650; }
.ay-hacer-b span { font-size: 13px; color: var(--ink-3); flex: 1; }
.ay-hacer-b em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--brand); margin-top: 4px; }
.ay-hacer-b:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (max-width: 640px) { .ay-hacer { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Ayuda flotante ---------- */
.ayuda-fab { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); cursor: pointer;
  background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 9px 15px 9px 12px;
  font: 600 13px var(--font); box-shadow: 0 6px 20px rgba(8, 12, 28, .16); }
.ayuda-fab:hover { color: var(--ink); border-color: var(--line-strong); }
.ayuda-fab:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.ayuda-fab svg { width: 17px; height: 17px; color: var(--brand); }
.ayuda-panel { position: fixed; right: 18px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); z-index: 91;
  width: min(390px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 130px)); display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(8, 12, 28, .28); overflow: hidden; }
.ayuda-p-h { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.ayuda-p-b { padding: 12px 16px 16px; overflow: auto; display: grid; gap: 10px; }
.ayuda-p-b input { width: 100%; }
.ayuda-p-f { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.ayuda-res { display: grid; gap: 2px; }
.ayuda-res button { text-align: left; background: none; border: 0; padding: 7px 8px; margin-inline: -8px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--ink); display: grid; }
.ayuda-res button:hover { background: var(--surface-2); }
.ayuda-res button span { font-size: 12px; color: var(--ink-3); }
.ayuda-tema h3 { font-size: 15.5px; margin: 0 0 6px; }
.ayuda-tema .tema-cuerpo { font-size: 13.5px; }
.ayuda-tema .tema-pasos { font-size: 13.5px; }
.ayuda-ver { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
@media (max-width: 900px) {
  .ayuda-fab { bottom: calc(var(--tabbar) + 12px + env(safe-area-inset-bottom, 0px)); padding: 9px 13px 9px 11px; }
  .ayuda-fab span { display: none; }
  .ayuda-panel { right: 12px; left: 12px; width: auto; bottom: calc(var(--tabbar) + 62px + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - var(--tabbar) - 120px); }
}

/* El manual (adentro de la app y suelto) tiene sus estilos en css/manual.css */

/* Grilla de asistencia: una columna por día del mes */
.asis-grilla { width: max-content; min-width: 100%; }
.asis-grilla td.first, .asis-grilla th.first { position: sticky; left: 0; z-index: 1; background: var(--surface-solida, var(--surface)); white-space: nowrap; min-width: 170px; box-shadow: 1px 0 0 var(--line); }
.asis-grilla th.asis, .asis-grilla td.asis { width: 28px; min-width: 28px; max-width: 28px; padding: 7px 0; text-align: center; }
.asis-grilla th.asis { line-height: 1.1; }
.asis-grilla th.asis b { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.asis-grilla th.asis small { display: block; font-size: 10px; color: var(--ink-3); font-weight: 500; }
.asis-grilla .dom { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.asis-grilla th.hoy b { color: var(--brand); } .asis-grilla th.hoy small { color: var(--brand); }
.asis-grilla td.hoy { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.asis-grilla td.asis i, .asis-ley i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; font: 700 10.5px/1 inherit; font-family: inherit; font-style: normal; vertical-align: middle; }
.asis-grilla td.asis i:empty { font-size: 0; }
.asis-grilla td.fut i, .asis-grilla td.libre i { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }
.asis-grilla td.ok i, .asis-ley .ok i { background: color-mix(in srgb, var(--ok) 22%, transparent); }
.asis-grilla td.tarde i, .asis-ley .tarde i { background: var(--warn); color: #fff; }
.asis-grilla td.impar i, .asis-ley .impar i { background: var(--bad); color: #fff; }
.asis-grilla td.hoy.impar i:empty, .asis-ley .adentro i { background: none; box-shadow: inset 0 0 0 1.5px var(--ok); }
.asis-grilla td.falta i, .asis-ley .falta i { box-shadow: inset 0 0 0 1.5px var(--bad); }
.asis-grilla td.lic i, .asis-ley .lic i { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info); }
.asis-grilla td { padding-top: 7px; padding-bottom: 7px; }
.asis-ley { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); }
.asis-ley span { display: inline-flex; align-items: center; gap: 6px; }
.asis-ley i { width: 14px !important; height: 14px !important; border-radius: 4.5px !important; font-size: 9px !important; }
@media (max-width: 720px) { .asis-grilla { font-size: 12px; } }

/* ---------------------------------------------------------------------------
   El Asistente al costado
   ---------------------------------------------------------------------------
   Se corre la app en vez de taparla: el chiste es ver lo que hace mientras se
   lo pedís. Abajo de 1100px no hay lugar para dos columnas, así que pasa a ser
   una hoja desde abajo —en un teléfono, partir la pantalla no es partirla:
   es dejar dos mitades inservibles.
--------------------------------------------------------------------------- */
.asis-dock {
  position: fixed; inset: 0 0 0 auto; width: var(--asis); z-index: 28;
  display: none; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.con-asis .asis-dock { display: flex; }
.con-asis .main { margin-right: var(--asis); }
.con-asis .topbar { padding-right: 16px; }

.asis-h { display: flex; align-items: center; gap: 6px; padding: 0 10px 0 14px; height: var(--top); border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.asis-t { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.asis-t svg { width: 17px; height: 17px; color: var(--brand); }

/* La conversación ocupa todo el alto que deja el panel y se desliza sola; el
   cuadro de texto queda siempre abajo. (Había quedado una regla vieja, de
   cuando el chat vivía en la pantalla de Ayuda, que lo frenaba en 340 px: el
   cuadro de texto quedaba a mitad de pantalla, con el resto vacío.) */
.asis-hilo { flex: 1 1 0; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.asis-yo, .asis-el { max-width: min(92%, 640px); padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.asis-yo { align-self: flex-end; background: var(--brand); color: var(--brand-ink); border-bottom-right-radius: 4px; }
.asis-el { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px; }
.asis-esperando { color: var(--ink-3); font-style: italic; }
.asis-hizo { margin-top: 7px; font-size: 12.5px; color: var(--ok); }
.asis-hizo.mal { color: var(--bad); }
.asis-aviso { display: flex; gap: 6px; align-items: flex-start; margin-top: 7px; font-size: 12.5px; color: var(--warn); }
.asis-aviso svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; }

.asis-vacio { margin: auto 0; color: var(--ink-3); font-size: 13px; }
.asis-vacio p { margin: 0 0 12px; }
.asis-ejemplos { display: flex; flex-wrap: wrap; gap: 6px; }

.asis-pie { flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.asis-pie textarea {
  flex: 1; min-width: 0; resize: none; font: inherit; font-size: 13.5px; line-height: 1.45;
  min-height: 40px; max-height: 140px;   /* un renglón; crece con lo que se escribe (asistente-dock.js) */
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink);
}
.asis-pie .btn.icon { flex: none; width: 40px; min-height: 40px; }
.asis-pie textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

/* El botón de la barra: con texto donde entra, sólo la chispa donde no. */
.btn.asis-btn { gap: 6px; color: var(--brand); }
/* `flex: 0 0 auto` no es de adorno: sin eso, con el texto escondido el flex le
   come el ancho al ícono y la chispa queda de 4 px, aplastada. */
.btn.asis-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
@media (max-width: 1240px) { .btn.asis-btn span { display: none; } .btn.asis-btn { padding: 0; width: 36px; } }
/* En el teléfono, del mismo tamaño que la campana de al lado. */
@media (max-width: 900px) { .btn.asis-btn { width: 42px; min-height: 42px; } }
/* En el celular el título necesita todo el ancho que se le pueda dar: los botones
   de la barra más juntos, y del indicador de sincronización sólo el punto mientras
   sincroniza (lo que sí hay que leer —sin conexión, cambios por subir, un error—
   queda escrito, en dos renglones chicos). Si el título aun así no entra, se le
   achica la letra hasta que entre (js/cifras.js): nunca se corta. */
@media (max-width: 640px) {
  .topbar { gap: 2px; padding-left: 6px; padding-right: 6px; }
  .topbar h1 { margin-left: 6px; margin-right: 4px; }
  .topbar .btn.icon, .topbar .btn.asis-btn { width: 40px; }
  .sync { gap: 5px; padding: 0 6px; }
  .sync.busy span, .sync span:empty { display: none; }
  .sync span { font-size: 11px; line-height: 1.15; white-space: normal; max-width: 66px; text-align: right; }
}

/* Con el panel al costado, lo que flota a la derecha (Ayuda, avisos) se corre
   con la app: si no, el botón de Ayuda queda encima del botón de enviar. */
@media (min-width: 1101px) {
  .con-asis .ayuda-fab, .con-asis .ayuda-panel { right: calc(var(--asis) + 18px); }
  .con-asis .toasts { right: calc(var(--asis) + 16px); }
}
@media (max-width: 1100px) {
  .con-asis .main { margin-right: 0; }
  .asis-dock {
    inset: auto 0 0 0; width: auto; height: min(78dvh, 640px); padding-top: 0;
    border-left: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,.18);
  }
  /* la hoja tapa la barra de abajo: los botones flotantes no se le suben encima */
  .con-asis .ayuda-fab, .con-asis .ayuda-panel, .con-asis .demo-boton { display: none; }
  .asis-pie textarea { font-size: 16px; min-height: 44px; }   /* con menos de 16 px el iPhone acerca la pantalla al tocar */
  .asis-pie .btn.icon { width: 44px; min-height: 44px; }
}
/* En el teléfono, a pantalla completa. El alto y el arranque los corrige
   asistente-dock.js con lo que queda a la vista cuando sale el teclado, para
   que el cuadro de texto nunca quede tapado. */
@media (max-width: 720px) {
  .asis-dock {
    inset: var(--asis-arriba, 0px) 0 auto 0; height: var(--asis-alto, 100dvh);
    border-top: 0; border-radius: 0; box-shadow: none; padding-top: env(safe-area-inset-top);
  }
  .asis-yo, .asis-el { font-size: 15px; }
  .asis-vacio { font-size: 14px; }
  .asis-ejemplos .btn { min-height: 40px; }
}

/* Recibo de sueldo: una grilla compartida por todos los bloques */
.rec-bloque { margin-top: 16px; }
.rec-bloque h3 { margin: 0 0 4px; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.rec-fila { display: grid; grid-template-columns: minmax(0, 1fr) 90px 170px 170px; gap: 12px; align-items: baseline; padding: 11px 12px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.rec-fila .n { text-align: right; color: var(--ink-2); }
.rec-fila .n.i { color: var(--ink); font-weight: 500; }
.rec-fila .c small { display: none; }
.rec-cab { padding-top: 6px; padding-bottom: 6px; font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.rec-cab span:not(:first-child) { text-align: right; }
@media (max-width: 720px) {
  .rec-fila { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 2px; }
  .rec-fila > .n:not(.i), .rec-cab { display: none; }
  .rec-fila .c small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
}

/* Con un modal abierto la ayuda flotante no tapa los importes ni el pie */
body:has(.modal-bg) .ayuda-fab { display: none; }

/* Selector de mes: ‹ Septiembre de 2026 › */
.mes-sel { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.mes-sel small { font-size: 12.5px; color: var(--ink-3); padding: 0 4px 0 10px; }
.mes-sel b { font-weight: 600; font-size: 14px; min-width: 148px; text-align: center; font-variant-numeric: tabular-nums; }
.mes-sel button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; color: var(--ink-2); border-radius: 50%; cursor: pointer; }
.mes-sel button:hover { background: var(--surface-2); color: var(--ink); }
.mes-sel button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* La demo avisa que el asistente no está conectado */
.asis-demo { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); color: var(--ink-2); border-radius: 10px; padding: 9px 11px; }
.asis-ejemplos .btn { text-align: left; white-space: normal; }

/* ---------- Configuración: grupos de pestañas, roles, planta ---------- */
.cfg-nav { margin-bottom: 16px; }
.cfg-nav .tabs { margin-bottom: 0; }
.cfg-grupos { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; }
.cfg-grupos a { flex: none; padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 550; color: var(--ink-2); text-decoration: none; background: var(--surface-2); }
.cfg-grupos a:hover { color: var(--ink); }
.cfg-grupos a.on { background: var(--brand); color: var(--brand-ink); }
.marcas { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.marcas legend { font-size: 12.5px; color: var(--ink-2); font-weight: 550; padding: 0; margin-bottom: 2px; }
.marcas .hint { font-size: 12px; color: var(--ink-3); }
.marcas-op { display: flex; flex-wrap: wrap; gap: 0 18px; }
.marcas-op .check { min-height: 36px; }
.rol-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 18px; }
.rol-datos .check, .rol-pantallas .check { align-items: flex-start; line-height: 1.3; padding: 6px 0; }
.rol-datos .check input, .rol-pantallas .check input { margin-top: 1px; flex: none; }
.rol-pantallas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 18px; }
.rol-pantallas .marcas { gap: 0; }
.rol-pantallas .check { min-height: 0; font-size: 14px; }
.rol-pantallas .check .small { font-size: 12px; }
.rol-pantallas.apagada { opacity: .45; }
.rol-si { color: var(--ok, #1a7f4b); display: inline-flex; }
.rol-si svg { width: 16px; height: 16px; }
.rol-celda { min-width: 0; }
.rol-celda .rol-desc, .rol-celda > .small { display: block; max-width: 60ch; margin-top: 2px; }
.rol-celda .badge { vertical-align: 1px; }
.rit-card { text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; transition: border-color .15s; }
.rit-card:hover { border-color: var(--line-strong); }
.rit-card.apagado { opacity: .6; }
.rit-card h3 { margin: 8px 0 10px; font-size: 16px; }
.rit-h { display: flex; gap: 6px; }
.rit-int { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rit-int li { display: grid; grid-template-columns: 96px 1fr; column-gap: 10px; font-size: 14px; }
.rit-int li span { color: var(--ink-3); font-size: 12.5px; padding-top: 1px; }
.rit-int li small { grid-column: 2; color: var(--ink-3); font-size: 12px; }
.rit-filas { display: grid; gap: 8px; }
.rit-fila { display: grid; grid-template-columns: 140px 1fr 1fr 38px; gap: 8px; align-items: center; }
@media (max-width: 640px) { .rit-fila { grid-template-columns: 1fr 38px; } .rit-fila [data-i=nombre], .rit-fila [data-i=matricula] { grid-column: 1; } .rit-fila [data-quitar] { grid-row: 1; grid-column: 2; } }
.causas .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; background: var(--surface-2); border-radius: 999px; padding: 4px 6px 4px 12px; }
.causas .chip button { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--ink-3); }
.causas .chip button:hover { background: var(--line); color: var(--ink); }
.causas .chip svg { width: 12px; height: 12px; }
.arca-emp { max-width: 100%; overflow-x: auto; }
.arca-emp button { white-space: nowrap; }
.cfg-sec { padding: 10px 2px 0; }
.cfg-sec h2 { margin: 0 0 4px; }
.cfg-sec p { margin: 0; max-width: 80ch; }
.merc-t { font-size: 12.5px; font-weight: 550; color: var(--ink-2); margin: 14px 0 8px; }
.merc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; }
.merc { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; min-height: 36px; border-bottom: 1px solid var(--line); }
.merc span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merc select { width: auto; min-height: 30px; padding: 3px 8px; font-size: 13.5px; }

/* ---------- No se pudo guardar (js/rechazados.js) ----------
   Franja fija abajo al centro, también en Modo Planta: no se va sola y no tapa
   el título ni los botones. */
.rechazos-aviso { position: fixed; z-index: 55; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 9px 10px 9px 14px; border: 0; border-radius: 999px;
  background: var(--bad); color: #fff; font: 500 14px/1.3 var(--font); box-shadow: 0 6px 24px rgba(180, 35, 24, .35); cursor: pointer; text-align: left; }
.rechazos-aviso svg { width: 18px; height: 18px; flex: none; }
.rechazos-aviso span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rechazos-aviso em { font-style: normal; font-weight: 650; background: rgba(255, 255, 255, .2); padding: 4px 11px; border-radius: 999px; flex: none; }
.rechazos-aviso:hover em { background: rgba(255, 255, 255, .3); }
.rechazos-aviso:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 640px) { .rechazos-aviso { bottom: calc(var(--tabbar) + 12px + env(safe-area-inset-bottom)); } .rechazos-aviso small { display: none; } }
/* En Modo Planta, sin tapar nada de lo que se toca: en la PC, a la izquierda
   del pie (a la derecha está «Salir»); en el celular, arriba de los botones. */
body:has(.pa) .rechazos-aviso { top: auto; left: 28px; transform: none; bottom: calc(14px + env(safe-area-inset-bottom)); font-size: 16px; padding: 12px 12px 12px 18px; max-width: calc(100vw - 360px); }
body:has(.pb) .rechazos-aviso { top: auto; bottom: calc(88px + env(safe-area-inset-bottom)); font-size: 16px; padding: 12px 12px 12px 18px; }
.rz-intro { margin: 0 0 14px; color: var(--ink-2); font-size: 14px; }
.rz-lista { display: grid; gap: 10px; }
.rz { border: 1px solid var(--line); border-left: 3px solid var(--bad); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); }
.rz header { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.rz header b { font-weight: 650; font-size: 14.5px; }
.rz header time { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rz-motivo { margin: 6px 0 0; color: var(--bad); font-size: 14px; }
.rz-campos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.rz-campos label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.rz-campos input { width: 140px; }
.rz-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.rz-acc .rz-descartar { margin-left: auto; color: var(--bad); }
.rz-datos { margin: 10px 0 0; max-height: 220px; overflow: auto; background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px; font: 12px/1.45 var(--mono); white-space: pre-wrap; }
.rechazos-aviso small { font-size: inherit; opacity: .92; }

/* El aviso de la cuenta suspendida (app/js/app.js, avisoSuspension) */
.aviso-plan { display: flex; gap: 10px; align-items: flex-start; margin: 10px 16px 0; padding: 12px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: 14px; line-height: 1.4; }
.aviso-plan svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
.aviso-plan.aviso-soporte { background: var(--info-soft); color: var(--info); }

/* Configuración → Plan y módulos (app/js/pages/_plan.js) */
.plan-grupo h3 { margin: 18px 0 2px; font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: .01em; }
.plan-mods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); column-gap: 28px; }
.plan-mods li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; min-width: 0; }
.plan-mods li > span:first-child { min-width: 0; }
.plan-mods li.off > span:first-child { color: var(--ink-3); }
.plan-mods .badge { flex: none; }
/* El certificado sanitario provincial: la vista previa de un ejemplar (121) */
.cp-hoja { border: 1px solid var(--line, #d8dce3); border-radius: 12px; padding: 18px 22px; background: #fff; color: #111; font-size: 13.5px; line-height: 1.5; }
.cp-hoja .cp-enc { text-align: center; font-weight: 700; font-size: 12px; letter-spacing: .02em; }
.cp-hoja .cp-num { text-align: right; font-weight: 700; margin-top: -4px; }
.cp-hoja h3 { text-align: center; margin: 8px 0 10px; font-size: 15px; }
.cp-hoja ul { margin: 4px 0 8px 18px; padding: 0; }
.cp-hoja .cp-firma { text-align: right; margin-top: 26px; border-top: 1px solid #999; display: inline-block; float: right; padding-top: 4px; font-size: 12px; }
.cp-hoja::after { content: ''; display: block; clear: both; }

/* Carga inicial (Configuración → Empresa, 123) */
.ci-tipo { display: flex; flex-direction: column; gap: 6px; }
.ci-tipo h3 { margin: 0; }
.ci-tipo p { margin: 0; }
.ci-tipo .ci-acc { margin-top: auto; padding-top: 8px; gap: 8px; flex-wrap: wrap; }
.ci-mas { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.ci-mas > summary { cursor: pointer; font-size: 14px; font-weight: 550; color: var(--brand); list-style: none; }
.ci-mas > summary::-webkit-details-marker { display: none; }
.ci-mas > summary::before { content: '›'; display: inline-block; margin-right: 8px; transition: transform .15s; }
.ci-mas[open] > summary::before { transform: rotate(90deg); }
.ci-mas[open] > summary { margin-bottom: 12px; }
.ci-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.ci-pie { gap: 8px; flex-wrap: wrap; }
/* Carnicerías → Informes: los locales con otro sistema (124) */
.ci-local .card-h { align-items: flex-start; gap: 12px; }
.ci-local .card-h select, .ci-otro select { width: auto; min-width: 170px; flex: none; }
.ci-estado { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.ci-estado > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.ci-estado > div > b { font-size: 14px; font-weight: 600; }
.ci-estado .btn { align-self: flex-start; margin-top: auto; }
.ci-estado > div > span { margin-bottom: 6px; }
.ci-estado .warn-t { color: var(--warn); }
.ci-local .ci-mas .tbl-wrap { margin-top: 8px; }
@media (max-width: 1100px) { .ci-estado { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ci-estado { grid-template-columns: 1fr; } .ci-local .card-h { flex-wrap: wrap; } }

/* Carga inicial → Movimientos del año (pages/_carga-anual.js) */
.ca-entrada { display: flex; align-items: center; gap: 16px; }
.ca-entrada h2 { margin: 0 0 4px; }
.ca-entrada p { margin: 0; }
.ca-entrada .btn { flex: none; }
.ca-hojas { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ca-hoja .card-h { align-items: flex-start; gap: 12px; }
.ca-hoja .card-h h2 { margin: 0 0 2px; }
.ca-hoja .card-h p { margin: 0; }
.ca-hoja.hecha { box-shadow: inset 0 0 0 1px var(--ok); }
.ca-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ca-cuenta { display: flex; flex-wrap: wrap; gap: 6px; }
.ca-nom-lista { display: flex; flex-direction: column; }
.ca-nom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ca-nom:first-child { border-top: 0; }
.ca-nom > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ca-nom select { width: auto; min-width: 240px; max-width: 50%; flex: none; }
@media (max-width: 760px) {
  .ca-entrada { flex-direction: column; align-items: stretch; }
  .ca-hojas { grid-template-columns: 1fr; }
  .ca-nom { flex-direction: column; align-items: stretch; }
  .ca-nom select { max-width: none; min-width: 0; width: 100%; }
}
.ca-nom-acc { gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ca-nom-acc input[type="search"] { max-width: 320px; }
@media (min-width: 721px) and (max-width: 1180px) { .ca-hoja .f.s3 { grid-column: span 6; } }
.ca-nom select.falta { border-color: var(--warn); }
.ca-nom-acc select { width: auto; min-width: 240px; flex: none; }
@media (max-width: 760px) { .ca-nom-acc select { flex: 1 1 100%; min-width: 0; } }
/* la cuenta corriente del portal (129): las tres cifras en una fila; en el celular, una debajo de otra */
.pt-cc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .pt-cc-kpis { grid-template-columns: 1fr; } }