/* Interfaz financiera LegalCode — misma familia visual que la Plantilla LegalCode (comando CEO 2026-10-20):
   dos blancos (hoja #FCFCFB, recuadros #FFFFFF), recuadros planos con borde fino, sin sombras,
   sans del sistema, colores semánticos: verde ingreso, rojo egreso, azul saldo/información, ámbar riesgo. */
:root {
  /* v2.2 (§1): escala de espacios; todo margen, padding y separación sale de aquí. */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;
  --fuente: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --t-xs: 12px; --t-s: 14px; --t-m: 16px; --t-l: 20px;
  --radio-s: 6px; --radio-m: 8px; --radio-l: 12px;
  --columna-ancha: 1360px; /* v2.1: a 1440 px las tablas densas caben sin cortes */ --alto-barra: 3.25rem;
  --tinta: #37352f; --tinta-suave: #6f6e69; --tinta-tenue: #9b9a97;
  --linea: #e9e9e7; --linea-fuerte: #d3d1cb;
  --hoja: #fcfcfb; --papel: #ffffff; --papel-suave: #f7f6f3; --papel-hover: #f1f1ef; --acento: #2f2e2b;
  --rojo: #b83b36; --rojo-fondo: #fdebec; --rojo-linea: #f1c9c7;
  --verde: #2f7350; --verde-fondo: #edf3ec; --verde-linea: #c6dcc8; /* = plantilla.css (Javi: unificar) */
  --ambar: #8f5a0a; --ambar-fondo: #fbf3db; --ambar-linea: #ecd9a0;
  --azul: #2b6c93; --azul-fondo: #e7f3f8; --azul-linea: #bcd9e6;
  --sobre-acento: #ffffff; --acento-hover: #000000;
  --azul-texto: #1f4f6e; --verde-texto: #1d5a3a; --ambar-texto: #6e4606;
  --fila-par: #fdfdfc; --velo: rgba(55, 53, 47, 0.35); --globo-fondo: #2f2e2b; --globo-texto: #ffffff;
  accent-color: var(--acento);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { background: var(--hoja); }
body { margin: 0; font-family: var(--fuente); font-size: var(--t-m); line-height: 1.55; color: var(--tinta); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; max-width: var(--columna-ancha); margin: 0 auto; padding: var(--e-5) var(--e-4) var(--e-7); }
section[hidden], [hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* Barra superior */
header { position: sticky; top: 0; z-index: 5; background: var(--hoja); border-bottom: 1px solid var(--linea); }
.nav-top-bar { max-width: var(--columna-ancha); margin: 0 auto; min-height: var(--alto-barra); padding: var(--e-2) var(--e-4); display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.marca { display: inline-flex; align-items: center; gap: var(--e-2); text-decoration: none; color: var(--tinta); font-weight: 600; white-space: nowrap; }
.marca small { font-weight: 400; color: var(--tinta-suave); }
.logo { height: 22px; width: auto; display: block; }
.nav-modulos { display: flex; flex-wrap: wrap; gap: var(--e-1); min-width: 0; }
.pestana { padding: var(--e-1) var(--e-2); font-size: var(--t-s); font-weight: 500; border-radius: var(--radio-s); border: 1px solid transparent; color: var(--tinta); text-decoration: none; white-space: nowrap; }
.pestana:hover, .pestana:focus-visible { background: var(--papel-hover); }
.pestana.es-actual { border-color: var(--linea-fuerte); background: var(--papel); }
.selectores { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); flex-wrap: nowrap; }
.usuario { font-size: var(--t-xs); color: var(--tinta-suave); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Controles */
input, select, textarea, button { font-family: inherit; font-size: var(--t-s); color: var(--tinta); }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { padding: var(--e-2) var(--e-3); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-m); background: var(--papel); max-width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--tinta); outline: none; }
input[readonly] { background: var(--papel-suave); color: var(--tinta-suave); }
.btn { display: inline-block; font-weight: 500; padding: var(--e-2) var(--e-3); border-radius: var(--radio-s); background: var(--papel); border: 1px solid var(--linea-fuerte); color: var(--tinta); cursor: pointer; text-decoration: none; }
.btn:hover, .btn:focus-visible { background: var(--papel-hover); }
.btn[disabled] { color: var(--tinta-tenue); border-style: dashed; cursor: not-allowed; background: transparent; }
.btn-primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.btn-primario:hover, .btn-primario:focus-visible { background: var(--acento-hover); }
.btn-primario[disabled] { background: var(--tinta-tenue); border-color: var(--tinta-tenue); color: var(--sobre-acento); }
.btn-mini { font-size: var(--t-xs); padding: var(--e-1) var(--e-2); border-radius: var(--radio-s); border: 1px solid var(--linea-fuerte); background: var(--papel); cursor: pointer; }
.btn-mini:hover { background: var(--papel-hover); }
.btn-peligro { color: var(--rojo); border-color: var(--rojo-linea); }
.enlace { background: none; border: none; padding: 0; color: var(--azul); cursor: pointer; text-decoration: underline; text-decoration-color: var(--azul-linea); text-underline-offset: 3px; }
.fila-botones { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3) var(--e-4); }
.campos label { display: flex; flex-direction: column; gap: var(--e-1); font-size: var(--t-xs); color: var(--tinta-suave); }
.campos label.ancho, .campos .ancho { grid-column: 1 / -1; }
.campos label.linea { flex-direction: row; align-items: center; gap: var(--e-2); }
.campos input, .campos select, .campos textarea { font-size: var(--t-s); color: var(--tinta); }
.campos textarea { min-height: 3.5rem; resize: vertical; }

/* Encabezado de pantalla */
.encabezado-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-4); }
h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0; }
.encabezado-pagina p { font-size: var(--t-s); color: var(--tinta-suave); margin: var(--e-1) 0 0; }
h2 { font-size: var(--t-m); font-weight: 600; margin: 0; letter-spacing: 0.02em; text-transform: uppercase; }
h3 { font-size: var(--t-s); font-weight: 600; margin: 0 0 var(--e-2); }
.apagado { color: var(--tinta-suave); }
.pequeno { font-size: var(--t-xs); }
.cargando { color: var(--tinta-suave); font-size: var(--t-s); padding: var(--e-4) 0; }

/* Tarjetas y tablas: recuadros planos, sin sombra */
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: var(--e-4); margin-bottom: var(--e-4); }
.tarjeta { border: 1px solid var(--linea); border-radius: var(--radio-l); background: var(--papel); padding: var(--e-4) var(--e-4); margin-bottom: var(--e-4); }
.resumen .tarjeta { margin-bottom: 0; }
.tarjeta-rotulo { font-size: var(--t-s); color: var(--tinta-suave); }
.tarjeta-valor { white-space: nowrap; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tarjeta-nota { font-size: var(--t-xs); color: var(--tinta-suave); }
.valor-rojo { color: var(--rojo); } .valor-verde { color: var(--verde); } .valor-ambar { color: var(--ambar); } .valor-azul { color: var(--azul); }
.tarjeta-tabla { padding: 0; overflow: hidden; }
.tarjeta-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); flex-wrap: wrap; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linea); }
.tarjeta-cabecera span { font-size: var(--t-xs); color: var(--tinta-suave); }
.tarjeta-cuerpo { padding: var(--e-4) var(--e-4); }
.tarjeta-pie { font-size: var(--t-xs); color: var(--tinta-suave); padding: var(--e-3) var(--e-4); border-top: 1px solid var(--linea); margin: 0; }
.desborde { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
th { text-align: left; font-weight: 500; color: var(--tinta-suave); background: var(--papel-suave); padding: var(--e-2) var(--e-2); border-bottom: 1px solid var(--linea); white-space: nowrap; }
td { padding: var(--e-2) var(--e-2); border-bottom: 1px solid var(--linea); vertical-align: middle; }
th:first-child, td:first-child { padding-left: var(--e-4); } th:last-child, td:last-child { padding-right: var(--e-4); }
tbody tr:hover { background: var(--papel-suave); }
tbody tr:last-child td { border-bottom: none; }
tfoot td { font-weight: 600; background: var(--papel-suave); border-top: 1px solid var(--linea-fuerte); border-bottom: none; }
.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fuerte { font-weight: 600; }
td.vacio { padding: var(--e-5) var(--e-4); text-align: center; color: var(--tinta-suave); }
tr.seleccionada td { background: var(--azul-fondo); }
tr.sin-datos td { color: var(--tinta-tenue); }
.recorte { display: inline-block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.dos-lineas { display: flex; flex-direction: column; line-height: 1.3; }
.dos-lineas .sub { font-size: var(--t-xs); color: var(--tinta-suave); }
.insignia { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-xs); font-weight: 500; padding: var(--e-1) var(--e-2) var(--e-1) var(--e-2); border-radius: 999px; border: 1px solid; white-space: nowrap; }
.insignia::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.insignia-azul { color: var(--azul); background: var(--azul-fondo); border-color: var(--azul-linea); }
.insignia-ambar { color: var(--ambar); background: var(--ambar-fondo); border-color: var(--ambar-linea); }
.insignia-verde { color: var(--verde); background: var(--verde-fondo); border-color: var(--verde-linea); }
.insignia-rojo { color: var(--rojo); background: var(--rojo-fondo); border-color: var(--rojo-linea); }
.insignia-gris { color: var(--tinta-suave); background: var(--papel-suave); border-color: var(--linea-fuerte); }
.dos { display: grid; grid-template-columns: 3fr 2fr; gap: var(--e-4); align-items: start; }
.mitades { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); align-items: start; }
.conclusion { border-radius: var(--radio-m); padding: var(--e-4) var(--e-4); margin-bottom: var(--e-4); border: 1px solid var(--linea); background: var(--papel-suave); }
.conclusion strong { display: block; font-size: var(--t-l); font-weight: 600; line-height: 1.35; }
.conclusion span { font-size: var(--t-s); color: var(--tinta-suave); }
.conclusion .btn { display: block; margin-top: var(--e-3); }
.conclusion.verde { background: var(--verde-fondo); border-color: var(--verde-linea); } .conclusion.verde strong { color: var(--verde-texto); }
.conclusion.azul { background: var(--azul-fondo); border-color: var(--azul-linea); } .conclusion.azul strong { color: var(--azul-texto); }
.conclusion.ambar { background: var(--ambar-fondo); border-color: var(--ambar-linea); } .conclusion.ambar strong { color: var(--ambar-texto); }
.conclusion.rojo { background: var(--rojo-fondo); border-color: var(--rojo-linea); } .conclusion.rojo strong { color: var(--rojo); }
.pregunta { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); margin: var(--e-5) 0 var(--e-2); }
.pregunta:first-child { margin-top: 0; }

/* Gráfico */
.grafico { padding: var(--e-2) var(--e-4) var(--e-4); }
.grafico svg { width: 100%; height: auto; display: block; font-family: var(--fuente); }
.leyenda { display: flex; gap: var(--e-4); font-size: var(--t-xs); color: var(--tinta-suave); padding: var(--e-3) var(--e-4) 0; flex-wrap: wrap; }
.leyenda i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; margin-right: var(--e-1); vertical-align: -1px; }
.leyenda i.verde { background: var(--verde); } .leyenda i.rojo { background: var(--rojo); } .leyenda i.azul { background: var(--azul); } .leyenda i.ambar { background: var(--ambar); }

/* Avisos */
.avisos { max-width: var(--columna-ancha); margin: 0 auto; padding: 0 var(--e-4); display: flex; flex-direction: column; gap: var(--e-2); }
.aviso-caja { display: flex; justify-content: space-between; gap: var(--e-4); align-items: flex-start; margin-top: var(--e-3); padding: var(--e-2) var(--e-4); border-radius: var(--radio-m); border: 1px solid; font-size: var(--t-s); }
.aviso-azul { background: var(--azul-fondo); border-color: var(--azul-linea); color: var(--azul-texto); }
.aviso-verde { background: var(--verde-fondo); border-color: var(--verde-linea); color: var(--verde-texto); }
.aviso-ambar { background: var(--ambar-fondo); border-color: var(--ambar-linea); color: var(--ambar-texto); }
.aviso-rojo { background: var(--rojo-fondo); border-color: var(--rojo-linea); color: var(--rojo); }
.aviso-caja .cerrar { background: none; border: none; font-size: 1.1rem; line-height: 1; cursor: pointer; color: inherit; padding: 0 var(--e-1); }
.nota { font-size: var(--t-xs); color: var(--tinta-suave); margin: var(--e-1) 0 0; }

/* Login */
.caja-login { max-width: 420px; margin: var(--e-7) auto; border: 1px solid var(--linea); border-radius: var(--radio-l); background: var(--papel); padding: var(--e-5) var(--e-5); }
.caja-login h1 { margin-bottom: var(--e-1); }
.caja-login .campos { grid-template-columns: 1fr; margin-top: var(--e-4); }
.nota-login { margin-top: var(--e-4); font-size: var(--t-xs); }

/* Filtros de pantalla */
.filtros { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }
.filtros label { font-size: var(--t-xs); color: var(--tinta-suave); display: flex; align-items: center; gap: var(--e-1); }
input[type="search"] { width: 240px; max-width: 100%; }
.buscador { position: relative; }
.sugerencias { position: absolute; left: 0; right: 0; top: 100%; z-index: 4; background: var(--papel); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-m); max-height: 14rem; overflow: auto; margin: 0; padding: 0; list-style: none; }
.sugerencias li { padding: var(--e-2) var(--e-3); cursor: pointer; font-size: var(--t-s); }
.sugerencias li:hover, .sugerencias li.activa { background: var(--papel-hover); }
.sugerencias li small { color: var(--tinta-suave); margin-left: var(--e-2); }

/* Diálogo */
dialog.ficha { border: 1px solid var(--linea); border-radius: var(--radio-l); padding: 0; width: min(640px, calc(100vw - 2rem)); color: var(--tinta); background: var(--papel); }
dialog.ficha.ancha { width: min(900px, calc(100vw - 2rem)); }
dialog.ficha::backdrop { background: var(--velo); }
.ficha-cuerpo { padding: var(--e-4) var(--e-5); }
.ficha-cuerpo h2 { font-size: var(--t-l); text-transform: none; letter-spacing: 0; margin-bottom: var(--e-1); }
.ficha-cuerpo > p { font-size: var(--t-s); color: var(--tinta-suave); margin: 0 0 var(--e-4); }
.ficha-pie { display: flex; gap: var(--e-2); justify-content: flex-end; align-items: center; padding: var(--e-4) var(--e-5); border-top: 1px solid var(--linea); background: var(--papel-suave); }
.ficha-pie .estado { margin-right: auto; font-size: var(--t-xs); color: var(--tinta-suave); }
.tabs { display: flex; gap: var(--e-1); border-bottom: 1px solid var(--linea); margin-bottom: var(--e-4); }
.tabs .pestana.es-actual { border-bottom-color: var(--papel); }
.subpanel { margin-top: var(--e-3); }
.historial { margin: var(--e-3) 0 0; padding: 0; list-style: none; font-size: var(--t-xs); color: var(--tinta-suave); border-top: 1px solid var(--linea); }
.historial li { padding: var(--e-2) 0; border-bottom: 1px solid var(--linea); display: flex; gap: var(--e-3); justify-content: space-between; flex-wrap: wrap; }
.historial li.anulada { text-decoration: line-through; color: var(--tinta-tenue); }

/* Cargar */
.zona-archivo { border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-m); padding: var(--e-4); text-align: center; color: var(--tinta-suave); background: var(--papel); }
.mapeo { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e-2) var(--e-4); margin-top: var(--e-4); }
.mapeo label { display: flex; flex-direction: column; gap: var(--e-1); font-size: var(--t-xs); color: var(--tinta-suave); }
.mapeo label b { color: var(--tinta); font-weight: 500; }
.vista-previa td, .vista-previa th { font-size: var(--t-xs); padding: var(--e-1) var(--e-2); }
tr.rechazada td { color: var(--rojo); }

/* Pie */
.pie-app { max-width: var(--columna-ancha); margin: 0 auto; width: 100%; padding: var(--e-4); font-size: var(--t-xs); color: var(--tinta-suave); display: flex; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; border-top: 1px solid var(--linea); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 860px) {
  body { overflow-x: hidden; }
  .nav-top-bar { gap: var(--e-2); }
  .nav-modulos { flex: 1 1 100%; width: 100%; }
  .pestana { padding: var(--e-1) var(--e-2); font-size: var(--t-xs); }
  .dos, .mitades { grid-template-columns: 1fr; }
  .campos { grid-template-columns: 1fr; }
  .selectores { margin-left: 0; width: 100%; }
  .tarjeta-valor { font-size: 1.35rem; }
  th, td { padding-left: var(--e-2); padding-right: var(--e-2); }
  .usuario { display: none; }
}

/* Impresión: Oficio 8.5 × 13 in, misma hoja que la plantilla */
/* Pie con asunto y numeración en las cajas de margen de la página (Chrome ≥ 131); el pie de la app no se imprime. */
@page {
  size: 8.5in 13in; margin: 14mm 13mm 18mm;
  @bottom-left { content: "CASHFLOW · Confidencial"; font: 9px ui-sans-serif, -apple-system, Helvetica, Arial, sans-serif; color: #6f6e69; }
  @bottom-right { content: "Página " counter(page) " de " counter(pages); font: 9px ui-sans-serif, -apple-system, Helvetica, Arial, sans-serif; color: #6f6e69; }
}
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #fcfcfb; }
  header, .avisos, .filtros, .barra-filtros, .no-imprimir, .btn, .btn-mini, .menu-boton, .menu-fila, dialog, .selectores, .pie-app, .barra-carga, .col-acciones, .flecha { display: none !important; }
  main { padding: 0; max-width: none; }
  .tarjeta { break-inside: avoid; box-decoration-break: clone; }
  .tarjeta-tabla { break-inside: auto; overflow: visible; }      /* Javi 2: la tabla fluye entre páginas */
  .desborde { overflow: visible; }
  thead { display: table-header-group; }                        /* encabezado repetido en cada hoja */
  tfoot { display: table-row-group; }
  tr { break-inside: avoid; }
  .resumen, .tarjeta-cabecera { break-inside: avoid; break-after: avoid; }
  .col-opcional { display: table-cell !important; }
  select.inline { border: none; padding: 0 var(--e-1); background: none; }
  .imprimir-encabezado { display: flex !important; justify-content: space-between; align-items: center; border-bottom: 1px solid #e9e9e7; padding-bottom: var(--e-2); margin-bottom: var(--e-4); }
  .grafico svg { min-width: 0 !important; }
  .col-media { display: table-cell !important; }
  .col-telefono { display: none !important; }
  select.inline { display: none !important; }
  .solo-impresion { display: inline !important; }
  table { font-size: 10px; }
  th, td { padding: var(--e-1) var(--e-2); }
  .recorte { max-width: 11rem; }
  select.inline { max-width: 7rem; font-size: 10px; }
}
.imprimir-encabezado { display: none; }
.logo-impresion { height: 30px; width: auto; }

/* ===== v2 (29-10-2026): navegación de ocho pestañas, indicador de carga, edición inline, filas expandibles ===== */
.barra-carga { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 20; background: linear-gradient(90deg, var(--azul) 0%, var(--azul-linea) 50%, var(--azul) 100%); background-size: 200% 100%; animation: barra 1.1s linear infinite; }
@keyframes barra { from { background-position: 200% 0; } to { background-position: 0 0; } }
.nav-secundario { display: flex; gap: var(--e-1); align-items: center; border-left: 1px solid var(--linea); padding-left: var(--e-2); }
.nav-secundario .pestana { color: var(--tinta-suave); }
.encabezado-pagina h1 { font-size: 1.65rem; }
.encabezado-pagina h1 .ctx { color: var(--tinta-suave); font-weight: 400; }
.encabezado-pagina .explica { max-width: 60rem; }
.rotulo-lectura { display: inline-flex; gap: var(--e-1); align-items: center; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); }
.rotulo-lectura::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--tinta-tenue); }
/* v2.1 (Javi 3): la lectura se distingue por la forma del rótulo, no por verde/ámbar (que significan ingreso/riesgo). */
.rotulo-lectura.confirmado::before, .rotulo-lectura.real::before { background: var(--tinta); }
.rotulo-lectura.provisorio::before { background: transparent; border: 1.5px solid var(--tinta-suave); box-sizing: border-box; }
.rotulo-lectura.proyectado::before { background: transparent; border: 1.5px dashed var(--azul); box-sizing: border-box; }
.inline { font-size: var(--t-xs); padding: var(--e-1) var(--e-2); max-width: 9rem; }
select.inline { padding-right: var(--e-5); }
.acciones { display: flex; gap: var(--e-1); flex-wrap: nowrap; justify-content: flex-end; align-items: center; }
tr.expandible { cursor: pointer; }
.celda-expandible { display: flex; align-items: center; gap: var(--e-1); }
tr.expandible .flecha { display: inline-block; flex: 0 0 auto; width: 1rem; color: var(--tinta-tenue); transition: transform 0.15s; }
tr.expandible.abierta .flecha { transform: rotate(90deg); }
tr.detalle > td { background: var(--papel-suave); padding: var(--e-2) var(--e-4) var(--e-3); }
tr.detalle table { font-size: var(--t-xs); }
tr.detalle th { background: transparent; }
tr.anulado td { color: var(--tinta-tenue); text-decoration: line-through; }
tr.grupo td { background: var(--papel-suave); font-weight: 600; }
tr.subtotal td { background: var(--papel-suave); font-weight: 600; border-top: 1px solid var(--linea-fuerte); }
.chips { display: flex; gap: var(--e-1); flex-wrap: wrap; }
.chip { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; font-size: 11px; padding: 0 var(--e-2); border-radius: 999px; border: 1px solid var(--linea-fuerte); background: var(--papel); color: var(--tinta-suave); white-space: nowrap; }
.tres { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--e-4); align-items: start; }
.codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-xs); color: var(--tinta-suave); }
.construccion { max-width: 640px; margin: var(--e-6) auto; }
.lista-plana { margin: var(--e-2) 0 0; padding-left: var(--e-4); font-size: var(--t-s); color: var(--tinta-suave); }
.pie-tabla-totales td { font-weight: 600; }
.resumen.compacta { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.resumen.compacta .tarjeta-valor { font-size: 1.25rem; }
.texto-derecha { text-align: right; }
@media (max-width: 860px) {
  .tres { grid-template-columns: 1fr; }
  .nav-secundario { border-left: none; padding-left: 0; }
}

/* ===== v2.1 (29-10-2026): auditorías de Mariana (interfaz) y Javi (diseño) ===== */
/* Javi 1: tablas sin cortes. Fecha, cuenta y unidad no se parten; la descripción se recorta con title. */
.sin-corte { white-space: nowrap; }
td.col-acciones, th.col-acciones { width: 1%; white-space: nowrap; }
tbody tr:nth-child(even) td { background: var(--fila-par); }
tbody tr:hover td { background: var(--papel-suave); }
tr.grupo td, tr.detalle > td { background: var(--papel-suave); }
tr.expandible:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.campo-con-enlace { display: flex; flex-direction: column; gap: var(--e-1); align-items: flex-start; }

/* Menú de fila único (Mariana C2): botón «⋯» + menú flotante. */
.menu-boton { min-width: 2rem; font-weight: 700; letter-spacing: 0.05em; }
.menu-fila { position: fixed; z-index: 30; min-width: 13rem; background: var(--papel); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-m); padding: var(--e-1); display: flex; flex-direction: column; }
.menu-fila button { text-align: left; background: none; border: none; border-radius: var(--radio-s); padding: var(--e-2) var(--e-3); font-size: var(--t-s); cursor: pointer; color: var(--tinta); }
.menu-fila button:hover, .menu-fila button:focus-visible { background: var(--papel-hover); outline: none; }
.menu-fila button.peligro { color: var(--rojo); }
body.recargando .acciones button, body.recargando .accion-primaria-visible { opacity: 0.5; pointer-events: none; }

/* Contadores en pestañas (Mariana). */
.pestana { display: inline-flex; align-items: center; gap: var(--e-1); }
.contador { font-size: 11px; font-weight: 600; line-height: 1; padding: var(--e-1) var(--e-2); border-radius: 999px; background: var(--papel-suave); border: 1px solid var(--linea-fuerte); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.contador-rojo { color: var(--rojo); background: var(--rojo-fondo); border-color: var(--rojo-linea); }
.contador-ambar { color: var(--ambar); background: var(--ambar-fondo); border-color: var(--ambar-linea); }

/* Filtros de Proyectado (Mariana C3). */
.barra-filtros { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linea); }
.segmentos { display: inline-flex; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-m); overflow: hidden; }
.segmento { background: var(--papel); border: none; border-right: 1px solid var(--linea-fuerte); padding: var(--e-1) var(--e-3); font-size: var(--t-s); cursor: pointer; white-space: nowrap; }
.segmento:last-child { border-right: none; }
.segmento:hover { background: var(--papel-hover); }
.segmento.es-actual { background: var(--acento); color: var(--sobre-acento); }
.cuenta-segmento { font-size: var(--t-xs); opacity: 0.75; font-variant-numeric: tabular-nums; }
.barra-filtros input[type="search"] { width: 18rem; }

/* Resultado: dos lecturas sin tarjeta dentro de tarjeta (Javi, menor V-5). */
.bloque-lectura { margin-bottom: var(--e-4); }
.bloque-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); margin-bottom: var(--e-2); }
.bloque-lectura .resumen { margin-bottom: 0; }

/* Gráfico SVG semanal: colores semánticos de la plantilla. */
.grafico { overflow-x: auto; }
.g-guia { stroke: var(--linea); stroke-width: 1; }
.g-cero { stroke: var(--linea-fuerte); stroke-width: 1.5; }
.g-eje { fill: var(--tinta-suave); font-size: 11px; }
.g-ingreso { fill: var(--verde); }
.g-egreso { fill: var(--rojo); }
.g-saldo { fill: none; stroke: var(--azul); stroke-width: 2.25; stroke-linejoin: round; }
.g-punto { fill: var(--azul); stroke: var(--papel); stroke-width: 1.5; }
.g-punto-negativo { fill: var(--rojo); stroke: var(--papel); stroke-width: 1.5; }
.g-nota { fill: var(--ambar); font-size: 11px; font-weight: 600; }
.g-nota-rojo { fill: var(--rojo); }

/* Javi (menor): a 1440 px la barra va en una sola línea; el selector de sociedad se acota y el correo vive en el title de «Salir». */
/* ≥ 861 px: las 8 pestañas nunca se encogen ni se tapan; si no cabe todo en una línea, los selectores bajan completos a la derecha (Mariana, crítico 1). */
@media (min-width: 861px) { .nav-top-bar { flex-wrap: wrap; gap: var(--e-1); } .nav-secundario { padding-left: var(--e-1); } .nav-modulos { flex: 0 0 auto; flex-wrap: nowrap; gap: 0; overflow: visible; } .pestana { padding: var(--e-1) var(--e-2); } .selectores { flex: 0 0 auto; gap: var(--e-1); } }
#sel-sociedad { max-width: 8.5rem; text-overflow: ellipsis; }
@media (max-width: 1500px) { .marca small { display: none; } }
.nav-modulos { overflow-x: auto; scrollbar-width: none; }
.nav-modulos::-webkit-scrollbar { display: none; }
#sel-mes { width: 9.75rem; }

/* Javi 5 + Mariana (teléfono): barra no fija, pestañas en una línea con desplazamiento, tarjetas en 2 columnas. */
@media (max-width: 860px) {
  header { position: static; }
  .nav-modulos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav-modulos::-webkit-scrollbar { display: none; }
  .selectores { flex-wrap: wrap; }
  .resumen { grid-template-columns: 1fr 1fr; gap: var(--e-2); }
  .resumen .tarjeta { padding: var(--e-3) var(--e-3); }
  .tarjeta-valor { font-size: 1.15rem; }
  .encabezado-pagina h1 { font-size: 1.3rem; }
}
.solo-telefono { display: none; }
.solo-impresion { display: none; }
.select-celda { display: inline-flex; }
/* Portátil (< 1366 px): se ocultan columnas secundarias (unidad, monto bruto, destinos) para que la acción quepa (Mariana). */
@media (max-width: 1365px) { .col-media { display: none; } }
.col-telefono { display: none; }
@media (max-width: 700px) { .col-telefono { display: table-cell; } }
/* Teléfono: columnas prioritarias; las acciones viven en el menú de fila (Marcar pagado primero, área táctil ≥ 40 px). */
@media (max-width: 700px) {
  .col-opcional { display: none; }
  .accion-primaria { display: none; }
  .menu-boton { min-width: 2.5rem; min-height: 2.5rem; font-size: var(--t-m); }
  .menu-fila button { min-height: 2.75rem; font-size: var(--t-m); }
  .recorte { max-width: 7rem; }
  .solo-escritorio { display: none !important; }
  .solo-telefono { display: inline !important; }
  td, th { padding-left: var(--e-2); padding-right: var(--e-2); }
  .grafico svg { min-width: 640px; }
  .barra-filtros input[type="search"] { width: 100%; }
  .segmento { padding: var(--e-1) var(--e-2); }
  .segmentos { flex-wrap: wrap; }
  .recorte { max-width: 6rem; }
  .menu-boton { min-width: 2.25rem; }
  .col-opcional-inline { display: none; }
  select.inline { max-width: 6rem; }
  tr.detalle > td { padding-left: var(--e-2); padding-right: var(--e-2); }
  tr.detalle .desborde { max-width: calc(100vw - 3.5rem); }
  th:first-child, td:first-child { padding-left: var(--e-3); } th:last-child, td:last-child { padding-right: var(--e-3); }
}

/* ===== v2.1.2 (29-10-2026): claves de la 014 ===== */
/* Meta de ingresos (Resultado y Proyectado). Verde SOLO con alcanzada = true; lo esperado / por cerrar va aparte, punteado. */
.meta-bloques { display: grid; grid-template-columns: 1fr 1fr; }
.meta-bloque { padding: var(--e-4) var(--e-4); min-width: 0; }
.meta-bloque + .meta-bloque { border-left: 1px solid var(--linea); }
.meta-bloque.es-alcanzada { background: var(--verde-fondo); }
.meta-bloque-titulo { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-2); }
.meta-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2) var(--e-4); }
.meta-cifra { display: flex; flex-direction: column; min-width: 0; }
.meta-rot { font-size: var(--t-xs); color: var(--tinta-suave); }
.meta-val { font-size: 1.15rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.meta-barra { display: flex; height: 0.6rem; margin: var(--e-3) 0 var(--e-2); border-radius: 999px; background: var(--papel-suave); border: 1px solid var(--linea); overflow: hidden; }
.meta-logrado { display: block; height: 100%; background: var(--azul); }
.meta-logrado.es-alcanzada { background: var(--verde); }
.meta-esperado { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--ambar-linea) 0 6px, transparent 6px 10px); }
.meta-sec { margin: var(--e-1) 0 0; font-size: var(--t-xs); color: var(--tinta-suave); }
.meta-avisos { padding: var(--e-2) var(--e-4); border-top: 1px solid var(--ambar-linea); background: var(--ambar-fondo); }
.meta-aviso { margin: var(--e-1) 0; font-size: var(--t-s); color: var(--ambar-texto); }
.tarjeta-meta .tarjeta-pie strong { color: var(--tinta); font-weight: 600; }
@media (max-width: 860px) {
  .meta-bloques { grid-template-columns: 1fr; }
  .meta-bloque + .meta-bloque { border-left: none; border-top: 1px solid var(--linea); }
  .meta-cifras { grid-template-columns: 1fr 1fr; }
}
@media print { .meta-bloque.es-alcanzada, .meta-logrado, .meta-esperado { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Fuera del horizonte (Proyectado): rótulo + lista desplegable. */
.desplegable > summary { cursor: pointer; padding: var(--e-3) var(--e-4); font-size: var(--t-s); color: var(--azul); list-style-position: inside; }
.desplegable > summary:hover { background: var(--papel-hover); }
.desplegable[open] > summary { border-bottom: 1px solid var(--linea); }
@media print { .desplegable:not([open]) > summary::after { content: " (despliega en pantalla para imprimir la lista)"; color: var(--tinta-tenue); } }

/* ===== v2.2 (29-10-2026): espacios, jerarquía, tabla de trabajo, panel lateral, gráfico interactivo (spec Mariana, fase 1) ===== */
/* §1 Espacios: 32 px entre bloques, 16 px entre tarjetas, 24 × 16 dentro de recuadros, celdas de 12 × 16 y filas ≥ 44 px. */
main { padding: var(--e-5) var(--e-6) var(--e-7); }
.tarjeta, .resumen, .conclusion, .bloque { margin-bottom: var(--e-6); }
.resumen { gap: var(--e-4); }
.tarjeta { padding: var(--e-4) var(--e-5); }
.tarjeta-tabla { padding: 0; }
.tarjeta-cabecera { padding: var(--e-4) var(--e-5); }
.tarjeta-pie { padding: var(--e-3) var(--e-5); }
th, td { padding: var(--e-3) var(--e-4); }
td { height: 44px; }
th:first-child, td:first-child { padding-left: var(--e-5); } th:last-child, td:last-child { padding-right: var(--e-5); }
.encabezado-pagina { margin-bottom: var(--e-5); }
@media (max-width: 860px) {
  main { padding: var(--e-4) var(--e-4) var(--e-6); }
  .tarjeta { padding: var(--e-4); }
  .tarjeta-cabecera, .tarjeta-pie { padding-left: var(--e-4); padding-right: var(--e-4); }
  th, td { padding: var(--e-2) var(--e-2); }
}

/* §2 Jerarquía. Nivel 1: héroe (una cifra a 40 px + frase); nivel 2: ≤ 4 secundarias a 24 px; nivel 3: gráfico y tabla. */
.heroe { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--e-2) var(--e-6); align-items: center; border: 1px solid var(--linea); border-radius: var(--radio-l); background: var(--papel); padding: var(--e-5); margin-bottom: var(--e-4); }
.heroe-rotulo { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); }
.heroe-valor { font-size: 40px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; margin: var(--e-1) 0; }
.heroe-nota { font-size: var(--t-xs); color: var(--tinta-suave); }
.heroe-frase { font-size: var(--t-l); line-height: 1.4; color: var(--tinta); margin: 0; }
.heroe-lado { display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-start; min-width: 0; }
.pastilla { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-xs); font-weight: 600; padding: var(--e-1) var(--e-2); border-radius: 999px; border: 1px solid var(--linea-fuerte); color: var(--tinta-suave); background: var(--papel-suave); font-variant-numeric: tabular-nums; }
.pastilla-azul { color: var(--azul); background: var(--azul-fondo); border-color: var(--azul-linea); }
.pastilla-rojo { color: var(--rojo); background: var(--rojo-fondo); border-color: var(--rojo-linea); }
.pastilla-verde { color: var(--verde); background: var(--verde-fondo); border-color: var(--verde-linea); }
.pastilla-ambar { color: var(--ambar); background: var(--ambar-fondo); border-color: var(--ambar-linea); }
.secundarias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); margin-bottom: var(--e-4); }
.tarjeta.n2 { margin-bottom: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.tarjeta.n2 .tarjeta-rotulo { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.tarjeta.n2 .tarjeta-valor { font-size: 24px; font-weight: 600; }
.tarjeta.n2 .tarjeta-nota { margin-top: var(--e-1); }
/* Ratios: franja de 4 bajo las secundarias; fórmula en el title y el periodo en la nota. */
.ratios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); }
.ratio { border: 1px solid var(--linea); border-radius: var(--radio-m); background: var(--papel); padding: var(--e-3) var(--e-4); display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.ratio-rotulo { font-size: var(--t-xs); color: var(--tinta-suave); }
.ratio-valor { font-size: var(--t-l); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ratio-nota { font-size: var(--t-xs); color: var(--tinta-suave); }
.ratio .sin-dato { color: var(--tinta-tenue); font-weight: 500; }
.ratios-mas { margin: var(--e-3) 0 var(--e-6); }
.ratios-mas > summary { cursor: pointer; font-size: var(--t-s); color: var(--azul); padding: var(--e-1) 0; }
.ratios-mas .ratios { margin-top: var(--e-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.franja-ratios { margin-bottom: var(--e-6); }
.franja-ratios > .ratios-titulo { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); margin: 0 0 var(--e-2); }

/* 8.1 Barra de parámetros (pegada bajo la barra superior al desplazarse). */
.barra-parametros { position: sticky; top: var(--alto-cabecera, 0px); z-index: 4; background: var(--hoja); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); padding: var(--e-3) 0; margin-bottom: var(--e-5); border-bottom: 1px solid var(--linea); }
.param { display: flex; align-items: center; gap: var(--e-2); }
.param > .param-rotulo { font-size: var(--t-xs); color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.06em; }
.selector-periodo { display: inline-flex; align-items: center; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-m); background: var(--papel); }
.selector-periodo button { background: none; border: none; padding: var(--e-1) var(--e-3); cursor: pointer; font-size: var(--t-m); color: var(--tinta); }
.selector-periodo button:hover { background: var(--papel-hover); }
.selector-periodo .periodo-txt { padding: var(--e-1) var(--e-2); font-size: var(--t-s); font-weight: 600; min-width: 9rem; text-align: center; white-space: nowrap; }
.selector-periodo input[type="month"] { border: none; padding: var(--e-1); width: 9.5rem; }
.barra-parametros input[type="search"] { width: 14rem; }
.barra-parametros select { padding: var(--e-1) var(--e-2); }
.segmento { padding: var(--e-1) var(--e-3); }

/* §5 Tabla de trabajo: ordenar, filtrar por columna (embudo), agrupar con subtotales; casilla de un clic. */
.tt-fichas { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; padding: var(--e-3) var(--e-5); border-bottom: 1px solid var(--linea); }
.tt-fichas:empty { display: none; }
.ficha-filtro { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-xs); padding: var(--e-1) var(--e-2); border-radius: 999px; border: 1px solid var(--azul-linea); background: var(--azul-fondo); color: var(--azul-texto); }
.ficha-filtro button { background: none; border: none; cursor: pointer; color: inherit; font-size: var(--t-s); line-height: 1; padding: 0 var(--e-1); }
th.tt-th { padding: 0; }
.tt-th-in { display: flex; align-items: center; gap: var(--e-1); padding: var(--e-3) var(--e-4); }
th.num .tt-th-in { justify-content: flex-end; }
th:first-child .tt-th-in { padding-left: var(--e-5); } th:last-child .tt-th-in { padding-right: var(--e-5); }
.tt-orden { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; gap: var(--e-1); align-items: center; white-space: nowrap; }
.tt-orden:hover { color: var(--tinta); }
.tt-flecha { font-size: 10px; color: var(--tinta-tenue); min-width: 0.6rem; }
th[aria-sort="ascending"] .tt-flecha, th[aria-sort="descending"] .tt-flecha { color: var(--tinta); }
.tt-embudo { background: none; border: 1px solid transparent; border-radius: var(--radio-s); cursor: pointer; padding: 0 var(--e-1); color: var(--tinta-tenue); font-size: 11px; line-height: 1.6; }
.tt-embudo:hover, .tt-embudo.activo { color: var(--azul); border-color: var(--azul-linea); background: var(--azul-fondo); }
.tt-menu { position: fixed; z-index: 30; min-width: 15rem; max-height: 22rem; overflow: auto; background: var(--papel); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-m); padding: var(--e-2); display: flex; flex-direction: column; gap: var(--e-1); }
.tt-menu label { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-s); padding: var(--e-1) var(--e-2); border-radius: var(--radio-s); cursor: pointer; }
.tt-menu label:hover { background: var(--papel-hover); }
.tt-menu label small { margin-left: auto; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.tt-menu .tt-menu-pie { display: flex; justify-content: space-between; gap: var(--e-2); padding-top: var(--e-2); border-top: 1px solid var(--linea); margin-top: var(--e-1); }
tr.tt-grupo td { background: var(--papel-suave); font-weight: 600; padding-top: var(--e-2); padding-bottom: var(--e-2); height: auto; cursor: pointer; }
tr.tt-grupo .tt-grupo-n { font-weight: 400; color: var(--tinta-suave); margin-left: var(--e-2); }
tr.tt-grupo .flecha { display: inline-block; width: 1rem; color: var(--tinta-tenue); transition: transform 0.12s; }
tr.tt-grupo:not(.plegado) .flecha { transform: rotate(90deg); }
tr.tt-fila { cursor: pointer; }
tr.tt-fila.marcada td { background: var(--azul-fondo); }
tr.tt-fila.pendiente .fecha-esperada { font-style: italic; }
tr.tt-fila.pendiente td { color: var(--tinta); }
.tt-pie td { font-weight: 600; background: var(--papel-suave); border-top: 1px solid var(--linea-fuerte); height: auto; }
.tt-resumen { font-weight: 400; color: var(--tinta-suave); }
td.col-casilla, th.col-casilla { width: 1%; padding-left: var(--e-3); padding-right: 0; }
th.col-casilla .tt-th-in { padding-left: var(--e-3); padding-right: 0; }
.casilla { width: 44px; height: 44px; margin: -12px 0; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; }
.casilla::before { content: ""; width: 20px; height: 20px; border-radius: var(--radio-s); border: 1.5px solid var(--linea-fuerte); background: var(--papel); box-sizing: border-box; }
.casilla:hover::before { border-color: var(--tinta-suave); }
.casilla[aria-checked="true"]::before { content: "✓"; color: var(--sobre-acento); background: var(--verde); border-color: var(--verde); font-size: 13px; font-weight: 700; line-height: 17px; text-align: center; }
.casilla.bloqueada { cursor: not-allowed; }
.casilla.bloqueada[aria-checked="true"]::before { background: var(--verde-fondo); color: var(--verde); border-color: var(--verde-linea); }
.casilla[disabled] { cursor: progress; opacity: 0.5; }
.casilla:focus-visible { outline: 2px solid var(--tinta); outline-offset: -6px; }
.insignia-origen { font-size: 11px; }

/* §6 Panel lateral: uno solo en el DOM, reutilizado; 440 px a la derecha (hoja completa en el teléfono). Sin animaciones > 150 ms. */
.panel-lateral { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100vw; z-index: 25; background: var(--papel); border-left: 1px solid var(--linea-fuerte); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.12s ease-out; visibility: hidden; }
.panel-lateral.abierto { transform: none; visibility: visible; }
.panel-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-3); padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linea); }
.panel-cab h2 { text-transform: none; letter-spacing: 0; font-size: var(--t-l); }
.panel-cab .panel-monto { font-size: 28px; font-weight: 650; font-variant-numeric: tabular-nums; margin: var(--e-1) 0; }
.panel-cab .insignias { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.panel-nav { display: flex; gap: var(--e-1); }
.panel-cuerpo { flex: 1; overflow: auto; padding: var(--e-4) var(--e-5); display: flex; flex-direction: column; gap: var(--e-5); }
.panel-seccion h3 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); margin: 0 0 var(--e-2); }
.panel-seccion .campos { grid-template-columns: 1fr 1fr; gap: var(--e-3) var(--e-4); }
.panel-seccion .nota { margin-top: var(--e-2); }
.panel-pie { display: flex; gap: var(--e-2); align-items: center; justify-content: flex-end; padding: var(--e-3) var(--e-5); border-top: 1px solid var(--linea); background: var(--papel-suave); }
.panel-pie .estado { margin-right: auto; font-size: var(--t-xs); color: var(--tinta-suave); }
.panel-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.panel-lateral details > summary { cursor: pointer; font-size: var(--t-s); color: var(--azul); }
.buscar-cuenta { margin-bottom: var(--e-1); }
@media (min-width: 1100px) { body.con-panel main { padding-right: calc(440px + var(--e-4)); } }
@media (max-width: 700px) { .panel-lateral { width: 100vw; border-left: none; } .panel-seccion .campos { grid-template-columns: 1fr; } }

/* Aviso con «Deshacer». */
.aviso-caja .deshacer { margin-left: auto; font-weight: 600; }

/* §4 Gráfico: ancho real, curva monótona, números en los puntos, hoy, separadores de mes, detalle al puntero y clic que filtra. */
.grafico-v22 { position: relative; padding: var(--e-2) var(--e-5) var(--e-4); overflow-x: auto; }
.grafico-v22 svg { display: block; font-family: var(--fuente); }
.g2-guia { stroke: var(--linea); stroke-width: 1; stroke-dasharray: 2 3; }
.g2-cero { stroke: var(--linea-fuerte); stroke-width: 1.5; }
.g2-eje { fill: var(--tinta-suave); font-size: 12px; }
.g2-ing { fill: var(--verde); opacity: 0.7; }
.g2-egr { fill: var(--rojo); opacity: 0.7; }
.g2-proy { opacity: 0.38; }
.g2-saldo { fill: none; stroke: var(--azul); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.g2-saldo.proyectado { stroke-dasharray: 5 4; }
.g2-punto { fill: var(--azul); stroke: var(--papel); stroke-width: 1.5; }
.g2-punto.negativo { fill: var(--rojo); }
.g2-valor { fill: var(--azul); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--papel); stroke-width: 3px; }
.g2-valor.negativo { fill: var(--rojo); }
.g2-hoy { stroke: var(--tinta); stroke-width: 1; stroke-dasharray: 4 3; }
.g2-hoy-txt { fill: var(--tinta); font-size: 12px; font-weight: 600; }
.g2-mes { stroke: var(--linea-fuerte); stroke-width: 1; }
.g2-mes-txt { fill: var(--tinta-suave); font-size: 12px; }
.g2-zona { fill: transparent; cursor: pointer; outline: none; }
.g2-zona:hover, .g2-zona:focus { fill: var(--papel-hover); fill-opacity: 0.6; }
.g2-zona.sel { fill: var(--azul-fondo); fill-opacity: 0.4; }
.g2-zona:focus-visible { stroke: var(--tinta); stroke-width: 1; }
.g2-detalle { position: absolute; z-index: 6; pointer-events: none; min-width: 12rem; background: var(--papel); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-m); padding: var(--e-2) var(--e-3); font-size: var(--t-xs); display: flex; flex-direction: column; gap: var(--e-1); }
.g2-detalle strong { font-size: var(--t-s); }
.g2-detalle .fila-d { display: flex; justify-content: space-between; gap: var(--e-4); font-variant-numeric: tabular-nums; }
.g2-detalle .pista { color: var(--tinta-suave); border-top: 1px solid var(--linea); padding-top: var(--e-1); }
.leyenda .linea-solida, .leyenda .linea-punteada, .leyenda .linea-hoy { display: inline-block; width: 1.25rem; height: 0; border-top: 2px solid var(--azul); vertical-align: middle; margin-right: var(--e-1); }
.leyenda .linea-punteada { border-top-style: dashed; }
.leyenda .linea-hoy { border-top: 1px dashed var(--tinta); }
.leyenda i.tenue { opacity: 0.38; }

@media (max-width: 860px) {
  .heroe { grid-template-columns: 1fr; padding: var(--e-4); }
  .heroe-valor { font-size: 32px; }
  .heroe-frase { font-size: var(--t-m); }
  .secundarias, .ratios { grid-template-columns: 1fr 1fr; gap: var(--e-3); }
  .ratios-mas .ratios { grid-template-columns: 1fr; }
  .barra-parametros { position: static; gap: var(--e-2) var(--e-3); }
  .barra-parametros input[type="search"] { width: 100%; }
  .grafico-v22 { padding: var(--e-2) var(--e-2) var(--e-3); }
  .tt-fichas { padding: var(--e-2) var(--e-4); }
  th:first-child .tt-th-in { padding-left: var(--e-2); }
}
@media print { .barra-parametros, .panel-lateral, .casilla, .tt-embudo, .g2-detalle { display: none !important; } .barra-parametros { position: static; } }

/* Ajuste de anchos (1440 px): la tabla de Flujo cabe completa; la búsqueda ocupa lo que sobra de la barra. */
.tt .recorte { max-width: 11rem; }
.tt td.col-opcional .recorte { max-width: 12rem; }
.barra-parametros { gap: var(--e-2) var(--e-4); }
.barra-parametros input[type="search"] { flex: 1 1 10rem; width: auto; min-width: 10rem; }
@media (max-width: 1500px) { .tt th, .tt td { padding-left: var(--e-2); padding-right: var(--e-2); } .tt .tt-th-in { padding-left: var(--e-2); padding-right: var(--e-2); } .tt .recorte { max-width: 9.5rem; } }
/* Avisos flotantes: no empujan el contenido (marcar pagado no mueve la página). */
.avisos { position: fixed; top: calc(var(--alto-cabecera, 52px) + var(--e-2)); right: var(--e-4); left: auto; width: min(26rem, calc(100vw - 2 * var(--e-4))); padding: 0; z-index: 27; pointer-events: none; }
.avisos .aviso-caja { pointer-events: auto; margin-top: 0; background-clip: padding-box; }
@media (max-width: 860px) { .avisos { top: auto; bottom: var(--e-4); } }

/* Portátil y 1440: la unidad baja al panel; la tabla de Flujo cabe sin desplazamiento lateral. */
@media (max-width: 1600px) { .tt .col-ancha { display: none; } }
.selector-periodo .periodo-txt { min-width: 8rem; }
.barra-parametros input[type="search"] { min-width: 8rem; }
#sel-mes { width: 11rem; }
@media (max-width: 700px) {
  .barra-parametros .segmentos { flex-wrap: nowrap; }
  .barra-parametros .segmento { padding: var(--e-1) var(--e-2); font-size: var(--t-xs); }
  .barra-parametros .param { flex-wrap: wrap; }
  .tt .recorte { max-width: 8rem; }
}
@media print { .tt .col-ancha { display: table-cell !important; } }
@media (max-width: 700px) {
  .tt .recorte { max-width: 6.5rem; }
  .tt th, .tt td { padding-left: var(--e-1); padding-right: var(--e-1); }
  .tt .tt-th-in { padding-left: var(--e-1); padding-right: var(--e-1); gap: 2px; }
  .tt th:first-child .tt-th-in, .tt td:first-child { padding-left: var(--e-1); }
  .tt .tt-flecha { display: none; }
  .tt th.col-casilla .tt-orden { font-size: 0; } .tt th.col-casilla .tt-orden::after { content: "✓"; font-size: var(--t-xs); }
}
/* Con el panel abierto, los avisos van a su izquierda (no lo tapan). */
@media (min-width: 701px) { body.con-panel .avisos { right: calc(440px + var(--e-4)); } }
.panel-seccion .panel-acciones { margin-top: var(--e-3); }

/* Filas de grupo y total: una celda por columna; el rótulo flota desde la primera celda (no ensancha la columna de la casilla). */
td.tt-celda-rotulo { position: relative; }
.tt-rotulo-fila { position: absolute; left: var(--e-5); top: 50%; transform: translateY(-50%); white-space: nowrap; z-index: 1; }
tr.tt-grupo-fijo td { background: var(--rojo-fondo); color: var(--rojo); }
tr.tt-grupo-fijo .tt-grupo-n { color: var(--rojo); }
.tt { width: 100%; }
.tarjeta-tabla > .desborde, .tarjeta-tabla > div > .desborde { width: 100%; }
/* En Flujo manda la barra de periodo: el selector global de mes no se muestra (no puede contradecirla). */
body[data-pantalla="flujo"] #sel-mes { display: none; }
@media (max-width: 860px) {
  .grafico-v22 { overflow-x: hidden; }
  .tt-rotulo-fila { left: var(--e-1); }
}
.grafico-v22 { overflow-x: hidden; }
/* Con el panel abierto, la descripción y el origen se leen en el panel: la tabla cabe sin desplazamiento lateral. */
@media (min-width: 701px) { body.con-panel .tt .col-sin-panel { display: none; } }
.tt-rotulo-fila { overflow: hidden; text-overflow: ellipsis; }
.tt-resumen-linea { margin: 0; padding: var(--e-2) var(--e-5); font-size: var(--t-xs); color: var(--tinta-suave); border-top: 1px solid var(--linea); }
.tt-resumen-linea:empty { display: none; }
@media (max-width: 860px) { .tt-resumen-linea { padding: var(--e-2) var(--e-4); } }

/* ===== v2.2.1 (29-10-2026): ronda CEO 1 de Flujo — cascada semanal, pantalla liviana, «i», íconos, franja de filtros, menú ===== */
/* Íconos de línea: 24×24, trazo 1,75, monocromos; color semántico solo donde aporta. */
.ico { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ico .ico-lleno, .ico-lleno { fill: currentColor; stroke: none; }
.ico-verde { color: var(--verde); } .ico-rojo { color: var(--rojo); } .ico-azul { color: var(--azul); }
.btn-icono { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-s); background: var(--papel); color: var(--tinta); cursor: pointer; }
.btn-icono:hover, .btn-icono:focus-visible { background: var(--papel-hover); }
.btn-icono .ico { width: 18px; height: 18px; }
/* «i»: botón mínimo junto a la etiqueta; el globo es uno solo y flota. */
.info { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -4px 0 -4px var(--e-1); padding: 0; border: none; background: none; color: var(--tinta-tenue); cursor: help; border-radius: 50%; vertical-align: middle; }
.info:hover, .info:focus-visible, .info[aria-expanded="true"] { color: var(--azul); background: var(--azul-fondo); }
.info .ico { width: 15px; height: 15px; }
.globo-info { position: fixed; z-index: 40; background: var(--globo-fondo); color: var(--globo-texto); font-size: var(--t-xs); line-height: 1.5; padding: var(--e-2) var(--e-3); border-radius: var(--radio-m); text-transform: none; letter-spacing: 0; font-weight: 400; }
/* Encabezado compacto: título + «i»; acciones como íconos. */
.encabezado-pagina.compacto { align-items: center; margin-bottom: var(--e-4); }
.encabezado-pagina.compacto h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--e-1); }
.encabezado-pagina.compacto .filtros { gap: var(--e-2); }
/* Héroe y tarjetas condensadas: una línea de etiqueta (ícono + texto + «i») y la cifra. */
.heroe-rotulo, .tarjeta.n2 .tarjeta-rotulo, .ratio-rotulo { display: flex; align-items: center; gap: var(--e-2); }
.heroe { padding: var(--e-4) var(--e-5); gap: var(--e-2) var(--e-5); }
.heroe-valor { margin: var(--e-1) 0 0; }
.heroe-frase { font-size: var(--t-m); color: var(--tinta-suave); }
.secundarias.n1 { grid-template-columns: 1fr; } .secundarias.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .secundarias.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tarjeta.n2 { padding: var(--e-3) var(--e-4); gap: var(--e-1); }
.tarjeta.n2 .tarjeta-valor { font-size: 22px; }
.ratio { padding: var(--e-2) var(--e-3); }
.ratio-valor { font-size: var(--t-m); }
.ratios-titulo { display: flex; align-items: center; gap: var(--e-1); }
.franja-ratios { margin-bottom: var(--e-6); }
/* Cascada semanal */
.tarjeta-cabecera h2 { display: inline-flex; align-items: center; gap: var(--e-1); }
.leyenda-cascada { display: flex; gap: var(--e-4); font-size: var(--t-xs); color: var(--tinta-suave); align-items: center; }
.leyenda-cascada span { display: inline-flex; align-items: center; gap: var(--e-1); }
.leyenda-cascada .ico { width: 12px; height: 12px; }
.microtexto { margin: 0; padding: var(--e-2) var(--e-5) 0; font-size: var(--t-xs); color: var(--tinta-suave); }
.cascada-marco { position: relative; padding: var(--e-2) var(--e-5) var(--e-4); }
.cascada { overflow-x: hidden; }
.cascada.desplaza { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.cascada svg { display: block; font-family: var(--fuente); }
.cs-saldo { fill: var(--azul); opacity: 0.85; }
.cs-saldo.negativo { fill: var(--rojo); }
.cs-sube { fill: var(--verde); opacity: 0.8; }
.cs-baja { fill: var(--rojo); opacity: 0.8; }
.cs-pend { opacity: 0.32; }
.cs-cero { stroke: var(--tinta-tenue); stroke-width: 1; }
.cs-conector { stroke: var(--tinta-tenue); stroke-width: 1; stroke-dasharray: 2 2; }
.cs-valor { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--papel); stroke-width: 3px; }
.cs-valor-saldo { fill: var(--azul); } .cs-valor-sube { fill: var(--verde); } .cs-valor-baja { fill: var(--rojo); }
.cs-valor.valor-rojo { fill: var(--rojo); }
.cs-eje-sem { font-weight: 600; fill: var(--tinta); }
.cs-eje-saldo { font-weight: 600; fill: var(--azul); }
.cs-zona { fill: transparent; cursor: pointer; outline: none; }
.cs-zona:hover, .cs-zona:focus { fill: var(--papel-hover); fill-opacity: 0.8; }
.cs-zona.sel { fill: var(--azul-fondo); fill-opacity: 0.55; }
.cs-zona:focus-visible { stroke: var(--tinta); stroke-width: 1; }
/* Franja de filtros sobre la tabla: desplegables del mismo alto «Etiqueta: valor», buscador al final y «Limpiar». */
.franja-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); padding: var(--e-3) var(--e-5); border-bottom: 1px solid var(--linea); background: var(--papel); }
.filtro-compacto { height: 32px; padding: 0 var(--e-5) 0 var(--e-2); font-size: var(--t-xs); border-radius: var(--radio-s); border: 1px solid var(--linea-fuerte); background-color: var(--papel); color: var(--tinta); max-width: 13rem; }
.filtro-compacto.activo { border-color: var(--azul); background-color: var(--azul-fondo); color: var(--azul-texto); }
.buscador-barra { display: inline-flex; align-items: center; gap: var(--e-1); height: 32px; padding: 0 var(--e-2); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-s); background: var(--papel); color: var(--tinta-suave); flex: 1 1 9rem; min-width: 8rem; max-width: 18rem; }
.buscador-barra input[type="search"] { border: none; padding: 0; height: 30px; width: 100%; min-width: 0; font-size: var(--t-xs); background: transparent; }
.buscador-barra input:focus { outline: none; }
.buscador-barra:focus-within { border-color: var(--tinta); }
.limpiar-filtros { font-size: var(--t-xs); margin-left: auto; }
.btn-filtros { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-xs); }
.btn-filtros.activo { border-color: var(--azul); color: var(--azul-texto); background: var(--azul-fondo); }
.solo-telefono-flex { display: none !important; }
.cuenta-filas { font-size: var(--t-xs); color: var(--tinta-suave); margin-left: auto; }
.tarjeta-cabecera { align-items: center; }
td.col-editar, th.col-editar { width: 1%; padding-left: 0; }
.col-editar .btn-icono { width: 30px; height: 30px; border-color: transparent; background: transparent; color: var(--tinta-tenue); }
tr.tt-fila:hover .col-editar .btn-icono { color: var(--tinta); border-color: var(--linea-fuerte); }
.barra-parametros { margin-bottom: var(--e-4); padding: var(--e-2) 0; }
.param-periodo { flex-wrap: nowrap; }
/* Menú hamburguesa: la navegación vive plegada; a la vista, la pantalla actual. */
.hamburguesa { border-color: transparent; }
.marca .logo { height: 20px; }
.pantalla-actual { font-weight: 600; font-size: var(--t-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-nav { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 16rem; margin: 0 var(--e-4); background: var(--papel); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-m); padding: var(--e-2); display: flex; flex-direction: column; gap: var(--e-1); }
.menu-nav[hidden] { display: none !important; }
.menu-nav .nav-modulos, .menu-nav .nav-secundario { display: flex; flex-direction: column; gap: 2px; overflow: visible; border: none; padding: 0; }
.menu-nav .nav-secundario { border-top: 1px solid var(--linea); padding-top: var(--e-1); margin-top: var(--e-1); align-items: stretch; }
.menu-nav .contador { margin-left: auto; }
.menu-nav .pestana { display: flex; justify-content: flex-start; gap: var(--e-2); padding: var(--e-2) var(--e-3); font-size: var(--t-s); min-height: 40px; align-items: center; }
.menu-nav .pestana.es-actual { background: var(--papel-suave); border-color: var(--linea); }
header .nav-top-bar { position: relative; flex-wrap: nowrap; gap: var(--e-3); }
@media (max-width: 860px) {
  header .nav-top-bar { flex-wrap: wrap; }
  .menu-nav { left: 0; right: 0; margin: 0 var(--e-2); }
  .selectores { width: auto; margin-left: auto; }
  #sel-sociedad { max-width: 7rem; }
}
@media (max-width: 700px) {
  .solo-telefono-flex { display: inline-flex !important; }
  .franja-filtros { display: none; }
  .franja-filtros.abierta { display: flex; flex-direction: column; align-items: stretch; padding: var(--e-3) var(--e-4); }
  .franja-filtros.abierta .filtro-compacto, .franja-filtros.abierta .buscador-barra { max-width: none; width: 100%; height: 40px; }
  .franja-filtros.abierta .limpiar-filtros { margin-left: 0; align-self: flex-start; }
  .cascada-marco { padding: var(--e-2) var(--e-2) var(--e-3); }
  .microtexto { padding: var(--e-2) var(--e-4) 0; }
  .leyenda-cascada { gap: var(--e-2); }
  .tarjeta-cabecera { flex-wrap: wrap; }
  .tarjeta.n2 .tarjeta-valor { font-size: 18px; }
  .heroe-valor { font-size: 30px; }
  .param-periodo { width: 100%; justify-content: space-between; }
  .barra-parametros .selector-periodo .periodo-txt { min-width: 6.5rem; font-size: var(--t-xs); }
  .encabezado-pagina.compacto h1 { font-size: 1.15rem; }
  .selectores { flex-wrap: nowrap; }
}
@media print { .info, .globo-info, .franja-filtros, .btn-filtros, .col-editar, .hamburguesa, .menu-nav, .microtexto { display: none !important; } }
/* Etiqueta de estado (reemplaza la casilla): palabra + color; se toca para cambiar el estado. */
:root { --hoy: #2f2e2b; --sobre-hoy: #ffffff; }   /* acento propio de «hoy»: tinta oscura, no compite con verde, rojo ni azul */
.estado-tag { display: inline-flex; align-items: center; gap: var(--e-1); min-height: 28px; padding: 0 var(--e-2); border-radius: 999px; border: 1px solid; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; cursor: pointer; background: var(--papel); }
.estado-tag .ico { width: 13px; height: 13px; }
.estado-tag:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.tag-verde { color: var(--verde); background: var(--verde-fondo); border-color: var(--verde-linea); }
.tag-azul { color: var(--azul); background: var(--azul-fondo); border-color: var(--azul-linea); }
.tag-rojo { color: var(--rojo); background: var(--rojo-fondo); border-color: var(--rojo-linea); }
.tag-ambar { color: var(--ambar); background: var(--ambar-fondo); border-color: var(--ambar-linea); }
.estado-tag.punteado { border-style: dashed; border-color: var(--ambar); }
.estado-tag.bloqueado { cursor: default; }
.estado-tag.en-vuelo { opacity: 0.6; cursor: progress; }
.estado-tag:not(.bloqueado):hover { filter: brightness(0.97); box-shadow: inset 0 0 0 1px currentColor; }
.menu-estado button { display: flex; align-items: center; gap: var(--e-2); }
td.col-estado, th.col-estado { width: 1%; white-space: nowrap; }
/* Columna principal: DESCRIPCIÓN en mayúsculas y negrita; entidad debajo, más chica y en gris. El resto, secundario. */
td.col-principal { min-width: 12rem; }
.principal { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.principal-desc { font-weight: 700; font-size: var(--t-s); letter-spacing: 0.01em; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26rem; }
.principal-ent { font-size: var(--t-xs); color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26rem; }
.tt td.col-sec { color: var(--tinta-suave); font-size: var(--t-xs); }
.monto-fila { font-weight: 600; font-variant-numeric: tabular-nums; }
.monto-fila.pendiente { font-weight: 500; }
/* HOY muy visible: línea continua gruesa + píldora en la cascada; separador fino en la tabla ordenada por fecha. */
.cs-hoy { stroke: var(--hoy); stroke-width: 2.5; }
.cs-hoy-pildora { fill: var(--hoy); }
.cs-hoy-txt { fill: var(--sobre-hoy); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.cs-sube.pasada, .cs-baja.pasada { opacity: 0.55; }
.cs-sube.pasada.cs-pend, .cs-baja.pasada.cs-pend { opacity: 0.25; }
tr.tt-hoy td { height: auto; padding: 0 var(--e-5); background: transparent; border-bottom: 2px solid var(--hoy); }
tr.tt-hoy .tt-hoy-txt { display: inline-block; transform: translateY(50%); background: var(--hoy); color: var(--sobre-hoy); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 1px var(--e-2); border-radius: 999px; }
tr.tt-hoy:hover td { background: transparent; }
@media (max-width: 700px) {
  .principal-desc, .principal-ent { max-width: 9.5rem; }
  td.col-principal { min-width: 0; }
  .estado-tag { padding: 0 var(--e-1); }
  tr.tt-hoy td { padding: 0 var(--e-2); }
}
@media print { .estado-tag { border: none; background: none; padding: 0; } .cs-hoy-pildora { fill: #000; } }
td.col-principal.tt-celda-rotulo .tt-rotulo-fila { left: var(--e-4); }
@media (max-width: 700px) { td.col-principal.tt-celda-rotulo .tt-rotulo-fila { left: var(--e-1); } }

/* ===== Tema oscuro (v2.2.1): grises azulados profundos (no negro), 3 niveles de superficie, texto AA, semánticos menos saturados.
   Respeta prefers-color-scheme; el interruptor sol/luna fija data-theme en <html> (guardado en localStorage). ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hoja: #10161e; --papel: #18202a; --papel-suave: #1f2833; --papel-hover: #26313e; --fila-par: #1b232d;
    --linea: #2a3441; --linea-fuerte: #3a4655;
    --tinta: #e4e8ee; --tinta-suave: #a9b3c0; --tinta-tenue: #7d8898;
    --acento: #dfe5ec; --sobre-acento: #10161e; --acento-hover: #ffffff;
    --verde: #62c08f; --verde-fondo: #15302a; --verde-linea: #2b5a46; --verde-texto: #a9dfc3;
    --rojo: #ef8079; --rojo-fondo: #361d21; --rojo-linea: #6a3338; --rojo-texto: #f6b8b3;
    --azul: #74b6e2; --azul-fondo: #152b3a; --azul-linea: #2c5674; --azul-texto: #aed6f1;
    --ambar: #e2b866; --ambar-fondo: #322819; --ambar-linea: #66512a; --ambar-texto: #f1d6a1;
    --hoy: #f1f3f6; --sobre-hoy: #10161e;
    --velo: rgba(4, 8, 14, 0.6); --globo-fondo: #e4e8ee; --globo-texto: #10161e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --hoja: #10161e; --papel: #18202a; --papel-suave: #1f2833; --papel-hover: #26313e; --fila-par: #1b232d;
  --linea: #2a3441; --linea-fuerte: #3a4655;
  --tinta: #e4e8ee; --tinta-suave: #a9b3c0; --tinta-tenue: #7d8898;
  --acento: #dfe5ec; --sobre-acento: #10161e; --acento-hover: #ffffff;
  --verde: #62c08f; --verde-fondo: #15302a; --verde-linea: #2b5a46; --verde-texto: #a9dfc3;
  --rojo: #ef8079; --rojo-fondo: #361d21; --rojo-linea: #6a3338; --rojo-texto: #f6b8b3;
  --azul: #74b6e2; --azul-fondo: #152b3a; --azul-linea: #2c5674; --azul-texto: #aed6f1;
  --ambar: #e2b866; --ambar-fondo: #322819; --ambar-linea: #66512a; --ambar-texto: #f1d6a1;
  --hoy: #f1f3f6; --sobre-hoy: #10161e;
  --velo: rgba(4, 8, 14, 0.6); --globo-fondo: #e4e8ee; --globo-texto: #10161e;
  color-scheme: dark;
}
/* Logo: monocromo claro sobre fondo oscuro. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo { filter: brightness(0) invert(0.92); } }
:root[data-theme="dark"] .logo { filter: brightness(0) invert(0.92); }
/* Interruptor: luna en claro, sol en oscuro. */
#btn-tema .ico-sol { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #btn-tema .ico-sol { display: block; } :root:not([data-theme="light"]) #btn-tema .ico-luna { display: none; } }
:root[data-theme="dark"] #btn-tema .ico-sol { display: block; } :root[data-theme="dark"] #btn-tema .ico-luna { display: none; }
:root[data-theme="light"] #btn-tema .ico-sol { display: none; } :root[data-theme="light"] #btn-tema .ico-luna { display: block; }
/* Conectores y números de la cascada con contraste en ambos temas (usan tokens); estado «Pendiente» y desplegables heredan los tokens. */
.cs-conector { stroke: var(--tinta-tenue); }
.conclusion.rojo strong, .aviso-rojo { color: var(--rojo); }
select, input, textarea { background-color: var(--papel); color: var(--tinta); }
/* Nombre del sistema y del usuario. */
.marca { gap: var(--e-2); }
.nombre-sistema { font-weight: 700; letter-spacing: 0.08em; font-size: var(--t-s); color: var(--tinta); }
.usuario-nombre { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--tinta-suave); white-space: nowrap; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .usuario-nombre { display: none; } .nombre-sistema { font-size: var(--t-xs); } }
/* Ajustes tras capturas: HOY en la tabla sobre su línea, etiquetas cortas en el teléfono, franja en una línea a 1440. */
tr.tt-hoy td { padding: var(--e-1) var(--e-5); }
tr.tt-hoy .tt-hoy-txt { transform: none; }
.tag-corto { display: none; }
@media (max-width: 700px) { .tag-largo { display: none; } .tag-corto { display: inline; } .principal-desc, .principal-ent { max-width: 8.5rem; } tr.tt-hoy td { padding: var(--e-1) var(--e-2); } }
.filtro-compacto { max-width: 9.5rem; text-overflow: ellipsis; }
.franja-filtros .buscador-barra { flex: 1 1 7rem; min-width: 7rem; }
.cs-eje-neto { font-size: 10px; }

/* ===== v2.2.2 (29-10-2026): correcciones de Mariana a la ronda CEO 1 ===== */
/* 1 · Descripción en dos líneas (sin puntos suspensivos); grupos y total a todo el ancho en el teléfono. */
.principal-desc { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.principal-ent { white-space: normal; overflow: visible; text-overflow: clip; }
td.tt-grupo-movil { display: none; }
@media (max-width: 700px) {
  .principal-desc, .principal-ent { max-width: none; }
  tr.tt-grupo > td:not(.tt-grupo-movil), tr.tt-pie > td:not(.tt-grupo-movil) { display: none; }
  tr.tt-grupo > td.tt-grupo-movil, tr.tt-pie > td.tt-grupo-movil { display: table-cell; padding: var(--e-2) var(--e-2); }
  td.tt-grupo-movil { white-space: normal; }
  td.tt-grupo-movil .tt-grupo-nombre { font-weight: 700; }
  td.tt-grupo-movil .tt-grupo-n { margin-left: var(--e-2); white-space: nowrap; }
}
/* 2 · Rótulos chicos en el teléfono. */
.cs-valor-chico { font-size: 9.5px; }
/* 3 · Pendiente rayado: rayas del color semántico, más claras que lo pagado (en oscuro, el tono claro del semántico). */
.cs-pend { stroke-width: 1; opacity: 1; }
.cs-pend-sube { fill: url(#cs-trama-sube); stroke: var(--verde); }
.cs-pend-baja { fill: url(#cs-trama-baja); stroke: var(--rojo); }
.cs-trama-sube { stroke: var(--verde); stroke-width: 2.2; opacity: 0.55; }
.cs-trama-baja { stroke: var(--rojo); stroke-width: 2.2; opacity: 0.55; }
.cs-pend.pasada { opacity: 0.7; }
.muestra-trama { display: inline-block; width: 12px; height: 10px; border: 1px solid var(--tinta-suave); border-radius: 2px; background: repeating-linear-gradient(45deg, var(--tinta-suave) 0 1.5px, transparent 1.5px 4px); opacity: 0.8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cs-trama-sube { stroke: var(--verde-texto); opacity: 0.85; } :root:not([data-theme="light"]) .cs-trama-baja { stroke: var(--rojo-texto); opacity: 0.85; } :root:not([data-theme="light"]) .cs-pend-sube { stroke: var(--verde-texto); } :root:not([data-theme="light"]) .cs-pend-baja { stroke: var(--rojo-texto); } }
:root[data-theme="dark"] .cs-trama-sube { stroke: var(--verde-texto); opacity: 0.85; } :root[data-theme="dark"] .cs-trama-baja { stroke: var(--rojo-texto); opacity: 0.85; }
:root[data-theme="dark"] .cs-pend-sube { stroke: var(--verde-texto); } :root[data-theme="dark"] .cs-pend-baja { stroke: var(--rojo-texto); }
/* 3 · Fila «Vencido antes del periodo» en oscuro: rojo al 13 %. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) tr.tt-grupo-fijo td { background: rgba(239, 128, 121, 0.13); } }
:root[data-theme="dark"] tr.tt-grupo-fijo td { background: rgba(239, 128, 121, 0.13); }
/* 4 y 6 · Teléfono: barra en una sola fila; nombre, sociedad, mes y «Salir» arriba dentro del menú. */
.menu-cuenta { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-2) var(--e-2) var(--e-3); border-bottom: 1px solid var(--linea); margin-bottom: var(--e-1); }
.menu-cuenta[hidden] { display: none; }
.menu-cuenta .usuario-nombre { display: block; font-size: var(--t-s); color: var(--tinta); max-width: none; }
.menu-cuenta select, .menu-cuenta input, .menu-cuenta .btn { width: 100%; max-width: none !important; min-height: 40px; }
@media (max-width: 700px) {
  header .nav-top-bar { flex-wrap: nowrap; gap: var(--e-2); padding: var(--e-2) var(--e-3); }
  .marca .logo { display: none; }
  .selectores { margin-left: auto; width: auto; flex: 0 0 auto; }
  .pantalla-actual { min-width: 0; flex: 1 1 auto; }
}
/* 7 · Buscador: sin recuadro interno; 200 px mínimo en escritorio; en el teléfono, arriba y a todo el ancho (siempre visible). */
.buscador-barra input[type="search"]:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { border: none; background: transparent; padding: 0; box-shadow: none; }
.franja-filtros .buscador-barra { min-width: 200px; }
@media (max-width: 700px) {
  .franja-filtros, .franja-filtros.abierta { display: flex; flex-direction: column; align-items: stretch; padding: var(--e-3) var(--e-4); gap: var(--e-2); }
  .franja-filtros:not(.abierta) > :not(.buscador-barra) { display: none; }
  .franja-filtros .buscador-barra { order: -1; width: 100%; max-width: none; min-width: 0; height: 40px; flex: 0 0 auto; }
  .franja-filtros.abierta .filtro-compacto { width: 100%; max-width: none; height: 40px; }
}
/* Franja en una sola línea a 1440: cada desplegable mide lo que dice (tope 10rem) y el buscador tiene 200 px. */
@media (min-width: 701px) { .filtro-compacto { width: auto; max-width: 10rem; } .franja-filtros { gap: var(--e-2); flex-wrap: wrap; } }
@media (min-width: 701px) { .filtro-compacto { max-width: 8.4rem; } .franja-filtros .buscador-barra { flex: 1 1 200px; max-width: none; } }
/* Flecha propia (más angosta que la nativa): «Etiqueta: valor» se lee completo. */
.filtro-compacto { -webkit-appearance: none; appearance: none; padding: 0 22px 0 var(--e-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236f6e69' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
@media (min-width: 701px) { .filtro-compacto { max-width: 9.2rem; } }
/* v2.2.3 · Teléfono: el ícono de LegalCode (recorte del logo) junto a CASHFLOW. */
@media (max-width: 700px) { .marca .logo { display: block; width: 20px; height: 20px; object-fit: cover; object-position: left center; } }

/* ===== v2.2.4 · Resumen de Flujo: dos ecuaciones + meta en velocímetro (recuadros planos, sin sombra). ===== */
.eq-grilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 240px; gap: var(--e-4); margin-bottom: var(--e-5); }
.eq-bloque { border: 1px solid var(--linea); border-radius: var(--radio-l); background: var(--papel); padding: var(--e-4) var(--e-5); min-width: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.eq-cab { display: flex; flex-direction: column; gap: var(--e-1); }
.eq-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); }
.eq-reservado { visibility: hidden; }
.eq-linea { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-1) var(--e-3); }
.eq-control { display: inline-flex; align-items: center; gap: var(--e-2); }
.eq-control .segmento { font-size: var(--t-xs); padding: 2px var(--e-2); }
.eq-resultado { font-size: 40px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.eq-resultado.sin-dato, .eq-num.sin-dato { color: var(--tinta-tenue); font-weight: 500; }
.eq-filas { display: flex; flex-direction: column; gap: var(--e-3); }
.eq-fila { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.eq-fila-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-1) var(--e-3); }
.eq-dato { display: flex; flex-direction: column; min-width: 0; }
.eq-rot { font-size: var(--t-xs); color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.06em; }
.eq-num { font-size: 24px; font-weight: 600; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.eq-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 2px var(--e-3); font-size: var(--t-xs); color: var(--tinta-suave); }
.eq-leyenda li { display: inline-flex; align-items: center; gap: var(--e-1); white-space: nowrap; }
.eq-leyenda strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.eq-mon { font-size: var(--t-xs); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.eq-riel { position: relative; display: flex; gap: 2px; height: 22px; border-radius: var(--radio-s); overflow: hidden; background: var(--papel-suave); }
.eq-seg { display: block; height: 100%; position: relative; overflow: hidden; background: var(--tono); flex: 0 0 auto; }
.tono-verde { --tono: var(--verde); } .tono-rojo { --tono: var(--rojo); } .tono-azul { --tono: var(--azul); }
.eq-seg.t2 { opacity: 0.72; } .eq-seg.t3 { opacity: 0.54; } .eq-seg.t4 { opacity: 0.4; }
/* En oscuro bajar opacidad hunde el tono en el fondo: t3 y t4 se aclaran para que las categorías vecinas se distingan. */
:root[data-theme="dark"] .eq-seg.t2 { opacity: 0.62; }
:root[data-theme="dark"] .eq-seg.t3 { opacity: 1; background: color-mix(in srgb, var(--tono) 58%, #ffffff); }
:root[data-theme="dark"] .eq-seg.t4 { opacity: 1; background: color-mix(in srgb, var(--tono) 30%, #ffffff); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .eq-seg.t2 { opacity: 0.62; }
  :root:not([data-theme="light"]) .eq-seg.t3 { opacity: 1; background: color-mix(in srgb, var(--tono) 58%, #ffffff); }
  :root:not([data-theme="light"]) .eq-seg.t4 { opacity: 1; background: color-mix(in srgb, var(--tono) 30%, #ffffff); }
}
.eq-seg.gris { background: var(--tinta-tenue); }
.eq-leyenda .eq-seg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.eq-seg-pend, .eq-seg.pend { background-image: repeating-linear-gradient(135deg, transparent 0 4px, var(--papel) 4px 6px); }
.eq-seg-pend { position: absolute; top: 0; right: 0; bottom: 0; }
.eq-dif { display: block; height: 100%; flex: 1 1 0; border: 1px dashed var(--linea-fuerte); border-radius: 0 var(--radio-s) var(--radio-s) 0; box-sizing: border-box; }
.eq-dif.deficit { border-color: var(--rojo-linea); } .eq-dif.superavit { border-color: var(--azul-linea); }
.eq-riel.escalera { display: block; }
.eq-riel.escalera .eq-seg { position: absolute; top: 0; bottom: 0; height: auto; min-width: 2px; }
.eq-cero { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--tinta); z-index: 2; }
.eq-nota { margin: 0; font-size: var(--t-xs); color: var(--tinta-suave); }
/* Velocímetro: semicírculo plano; relleno azul y verde desde el 100 %; riel neutro; sin puntero ni escala. */
.eq-meta { align-items: stretch; }
.vel-grupo { display: flex; flex-direction: column; gap: var(--e-4); flex: 1; justify-content: space-around; }
.vel-caja { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.vel-rot { font-size: var(--t-xs); color: var(--tinta-suave); }
.vel { display: block; width: 100%; max-width: 176px; height: auto; }
.vel-riel, .vel-avance { fill: none; stroke-width: 18; stroke-linecap: butt; }
.vel-riel { stroke: var(--papel-hover); }
.vel-avance { stroke: var(--azul); }
.vel-avance.es-alcanzada { stroke: var(--verde); }
.vel-num { fill: var(--azul); font-size: 34px; font-weight: 650; letter-spacing: -0.02em; text-anchor: middle; font-variant-numeric: tabular-nums; }
.vel-num.es-alcanzada { fill: var(--verde); }
.vel-num.sin-dato { fill: var(--tinta-tenue); font-size: 26px; font-weight: 500; }
.vel-det { font-size: var(--t-xs); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.vel-det span { white-space: nowrap; }
@media (max-width: 1239px) {
  .eq-grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .eq-meta { grid-column: 1 / -1; }
  .vel-grupo { flex-direction: row; justify-content: center; gap: var(--e-6); }
  .vel-caja { flex: 0 1 220px; }
}
/* Panel abierto: Neto y Saldo siguen lado a lado y la meta pasa a fila completa; si se apilaran, la página crecería y la fila clicada saldría de pantalla. */
@media (min-width: 861px) {
  body.con-panel .eq-grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.con-panel .eq-meta { grid-column: 1 / -1; }
  body.con-panel .vel-grupo { flex-direction: row; justify-content: center; gap: var(--e-6); }
  body.con-panel .vel-caja { flex: 0 1 220px; }
  body.con-panel .franja-ratios { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .eq-grilla { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
  .eq-bloque { padding: var(--e-4); }
  .eq-resultado { font-size: 32px; }
  .vel-grupo { gap: var(--e-3); }
  .vel-caja { flex: 1 1 0; }
}
@media print { .eq-bloque { break-inside: avoid; } .eq-seg, .vel-avance { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .eq-control { display: none; } }
/* Ratios en dos secciones: «Del mes» (periodo elegido) y «Cronología» (ventanas fijas). */
.franja-ratios { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr); gap: var(--e-4); }
.ratios-seccion { min-width: 0; }
.franja-ratios .ratios-titulo { margin: 0; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); }
.ratios-titulo strong { color: var(--tinta); font-weight: 600; }
.ratios-cubre { margin: 0 0 var(--e-2); font-size: var(--t-xs); color: var(--tinta-suave); }
.ratios-seccion.de-periodo .ratios { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ratios-seccion.de-hoy .ratios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ratios-seccion .ratio { padding: var(--e-3); }
.ratios-seccion .ratio-rotulo { display: flex; align-items: flex-start; gap: var(--e-1); min-height: 2.6em; line-height: 1.3; }
@media (max-width: 1239px) { .franja-ratios { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .ratios-seccion.de-periodo .ratios, .ratios-seccion.de-hoy .ratios { grid-template-columns: 1fr 1fr; } }
/* Punto 2: marcar pagado o cobrado, en verde y con ícono. */
.btn-verde { display: inline-flex; align-items: center; gap: var(--e-1); background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); }
.btn-verde:hover, .btn-verde:focus-visible { filter: brightness(0.92); }
.btn-verde[disabled] { background: var(--verde-fondo); border-color: var(--verde-linea); color: var(--verde-texto); border-style: solid; }
:root { --sobre-verde: #ffffff; }
:root[data-theme="dark"] { --sobre-verde: #10161e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sobre-verde: #10161e; } }
.menu-fila button.exito { color: var(--verde); font-weight: 600; }
.menu-fila button { display: flex; align-items: center; gap: var(--e-2); }
/* Punto 1: ícono en cada campo del panel. */
.campo-rot { display: inline-flex; align-items: center; gap: var(--e-1); }
.campo-rot .ico { width: 14px; height: 14px; }
/* Panel «Clasificar por uso». */
.uso-lista { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-3); }
.uso-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 14rem); gap: var(--e-2); align-items: center; }
.uso-nombre { display: flex; flex-direction: column; min-width: 0; }
.uso-nombre strong { font-size: var(--t-s); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uso-nombre small { font-size: var(--t-xs); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
/* Punto 11: aviso donde el límite corta la tabla. */
tr.tt-fila { scroll-margin-top: calc(var(--alto-cabecera, 0px) + 64px); scroll-margin-bottom: var(--e-5); }   /* que marcar() no la deje bajo las barras fijas */
.cuenta-filas { display: inline-flex; align-items: center; gap: var(--e-2); }
@media print { .filas-control { display: none; } }
tr.tt-mas td { padding: var(--e-2) var(--e-5); font-size: var(--t-xs); color: var(--tinta-suave); background: var(--papel-suave); text-align: left; height: auto; }

/* ===== v2.2.5 · Conciliación del saldo: estampa, línea de desajuste, panel y diálogo (recuadros planos, sin sombra; solo tokens existentes). ===== */
.tag-gris { color: var(--tinta-suave); background: var(--papel-suave); border-color: var(--linea); }
.conc-estampa { min-height: 24px; align-self: flex-end; }
span.conc-estampa { cursor: default; }
span.conc-estampa:hover { filter: none !important; box-shadow: none !important; }
.conc-punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.conc-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--e-2); font-size: var(--t-xs); color: var(--tinta-suave); min-height: 20px; }
.conc-linea strong { font-variant-numeric: tabular-nums; color: var(--tinta); }
.conc-linea strong.valor-ambar { color: var(--ambar); }
.conc-linea .enlace { margin-left: auto; font-size: var(--t-xs); }
.conc-tarjeta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.conc-tarjeta .conc-estampa { align-self: flex-start; }
.conc-tarjeta .conc-linea { width: 100%; }
.conc-cab { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.conc-cab .conc-estampa { align-self: flex-start; }
.conc-cifras { display: grid; grid-template-columns: auto auto; gap: 2px var(--e-4); margin: 0; font-size: var(--t-s); }
.conc-cifras dt { color: var(--tinta-suave); }
.conc-cifras dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.conc-candidatos { display: flex; flex-direction: column; margin-top: var(--e-3); border-top: 1px solid var(--linea); }
.conc-candidato { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-2) 0; border-bottom: 1px solid var(--linea); }
.conc-cand-txt { min-width: 0; font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.conc-otras { margin-top: var(--e-3); }
.conc-otra { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin: var(--e-1) 0 0; font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.conc-discreto { margin: var(--e-3) 0 0; }
.conc-previa { display: flex; flex-direction: column; gap: var(--e-1); margin-top: var(--e-3); padding: var(--e-3); border: 1px solid var(--linea); border-radius: var(--radio-s); background: var(--papel-suave); }
.conc-previa-fila { display: flex; justify-content: space-between; gap: var(--e-3); font-size: var(--t-xs); color: var(--tinta-suave); }
.conc-previa-fila strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.conc-previa-fila strong.valor-ambar { color: var(--ambar); }
@media print { .conc-linea .enlace { display: none; } }
/* En teléfono la estampa va bajo el saldo en los tres estados: así «Conciliado · 30-10», más larga, no cambia el alto del bloque. */
@media (max-width: 700px) { .eq-fila-cab:has(.conc-estampa) { flex-direction: column; align-items: flex-start; } .eq-fila-cab .conc-estampa { align-self: flex-start; } }

/* v2.2.5 · Semanas en Rango (paso aparte de la conciliación) */
.selector-periodo input[type="date"]:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { border: none; padding: var(--e-1); width: 8.5rem; background: none; }
@media (max-width: 700px) {
  .param-periodo:has(input[type="date"]:not([hidden])) { flex-wrap: wrap; }
  .selector-periodo:has(input[type="date"]:not([hidden])) { flex-wrap: wrap; justify-content: center; width: 100%; }
  .selector-periodo:has(input[type="date"]:not([hidden])) input[type="date"]:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { flex: 1 1 0; min-width: 0; width: auto; font-size: var(--t-xs); }
  .selector-periodo:has(input[type="date"]:not([hidden])) .periodo-txt { order: 3; flex-basis: 100%; }
}