/* Plataforma de activos de Salde — identidad del manual de marca v1.0
   Colores: azul marino (principal), verde menta (acento), gris pizarra y gris claro.
   Letras: Outfit para títulos y cifras grandes; Inter para texto y tablas.
   Proporción: 60 % fondos claros, 30 % azul marino, 10 % verde menta. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fuentes/inter-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fuentes/outfit-latin-wght-normal.woff2") format("woff2");
}

:root {
  --marino: #1f2a37;
  --marino-claro: #2b3a4c;
  --menta: #a8e6b5;
  --menta-suave: #e6f6ea;
  --verde: #1d7a45;
  --pizarra: #5b6b7b;
  --niebla: #f4f6f8;
  --linea: #dde3e9;
  --blanco: #ffffff;
  --rojo: #b42318;
  --rojo-barra: #d14b3d;
  --rojo-suave: #fef3f2;

  /* Nombres que usan las pantallas */
  --tinta: var(--marino);
  --tinta-suave: var(--pizarra);
  --fondo: var(--niebla);
  --superficie: var(--blanco);
  --borde: var(--linea);
  --acento: var(--marino);
  --acento-oscuro: var(--marino);
  --error: var(--rojo);
  --radio: 12px;

  --titulos: "Outfit", "Inter", Arial, sans-serif;
  --texto: "Inter", Arial, sans-serif;
  font-family: var(--texto);
  color: var(--marino);
  background: var(--niebla);
}

* { box-sizing: border-box; }
/* Las fichas ocultas de la «i» se salen por la derecha en el celular: sin esto la página se
   desplaza de lado. Las visibles las acomoda comun.js dentro de la pantalla. */
html { overflow-x: clip; }
body { margin: 0; background: var(--niebla); font-size: .9375rem; line-height: 1.55; }
h1, h2, h3 { font-family: var(--titulos); font-weight: 600; color: var(--marino); }
h1 { font-size: 1.875rem; line-height: 1.15; margin: 0 0 .5rem; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; line-height: 1.25; margin: 2rem 0 .75rem; }
h3 { font-size: 1.0625rem; }
a { color: var(--marino); text-decoration-color: var(--pizarra); text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--marino); text-decoration-thickness: 2px; }
small { font-size: .8125rem; }

:focus-visible { outline: 2px solid var(--marino); outline-offset: 2px; box-shadow: 0 0 0 5px var(--menta); }
.saltar { position: absolute; left: -999px; top: .5rem; z-index: 10; background: var(--blanco); padding: .5rem 1rem; border-radius: 8px; }
.saltar:focus { left: .5rem; }

/* Marca (logo sobre fondo oscuro: palabra en blanco con el punto verde) */
/* Logo del manual de marca (static/img): la versión en blanco va sobre el azul marino */
.marca { display: block; text-decoration: none; }
.marca img { display: block; width: 100%; height: auto; }

/* Estructura con menú lateral */
body.con-menu { display: grid; grid-template-columns: 13.125rem minmax(0, 1fr); min-height: 100vh; }
.lateral {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2rem;
  padding: 1.75rem 1rem 1.25rem; background: var(--marino); color: #c9d3dc;
}
/* El menú se puede ocultar para dar ancho a las tablas; queda un riel con el botón para abrirlo */
button.alternar-menu {
  position: absolute; top: 2rem; right: .6rem; width: 1.9rem; height: 1.9rem; margin: 0; padding: 0;
  display: grid; place-items: center; border-radius: 8px; border: 1px solid #3a4a5c;
  background: transparent; color: #c9d3dc; font-size: 1.05rem; line-height: 1;
}
button.alternar-menu:hover { color: var(--menta); background: var(--marino-claro); }
@media (min-width: 901px) {
  html.menu-oculto body.con-menu { grid-template-columns: 3.25rem minmax(0, 1fr); }
  html.menu-oculto .lateral { padding-inline: 0; }
  html.menu-oculto .lateral > :not(.alternar-menu) { display: none; }
  html.menu-oculto button.alternar-menu { left: 50%; right: auto; transform: translateX(-50%); }
}
.lateral .marca { width: 8.5rem; margin: 0 0 0 .5rem; }
.lateral :focus-visible { outline-color: var(--menta); box-shadow: none; }
.menu { display: flex; flex-direction: column; gap: .15rem; }
.menu a {
  display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: 8px;
  color: #c9d3dc; text-decoration: none; font-weight: 500;
}
.menu a:hover { color: var(--blanco); background: rgba(255, 255, 255, .06); }
.menu a[aria-current="page"] { color: var(--menta); background: rgba(168, 230, 181, .15); }
.sesion { margin-top: auto; display: flex; flex-direction: column; gap: .6rem; padding: 1rem .75rem 0; border-top: 1px solid var(--marino-claro); }
.quien { font-size: .8125rem; color: #c9d3dc; overflow-wrap: anywhere; }
.version { font-size: .75rem; color: #8fa0b1; }
button.boton-salir {
  margin: 0; width: auto; align-self: flex-start; padding: .35rem .9rem; font-size: .8125rem; font-weight: 500;
  color: #c9d3dc; background: transparent; border: 1px solid #3a4a5c;
}
button.boton-salir:hover { color: var(--blanco); background: var(--marino-claro); }

.contenido { width: 100%; max-width: 76rem; padding: 2.5rem clamp(1rem, 4vw, 3rem) 4rem; }

/* Pantallas de acceso: franja de marca a la izquierda */
body.acceso { display: grid; grid-template-columns: minmax(18rem, 38%) 1fr; min-height: 100vh; }
.presentacion {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: 3rem clamp(1.5rem, 4vw, 3.5rem); background: var(--marino);
}
.presentacion .marca { width: clamp(14rem, 26vw, 22rem); }
.presentacion-texto { margin: 0; max-width: 22rem; color: #c9d3dc; font-size: 1.0625rem; }
.contenido.angosto { max-width: 28rem; align-self: center; justify-self: center; }
.contenido.ancho { max-width: none; padding-inline: clamp(1rem, 2vw, 1.5rem); }
.acceso .tarjeta { padding: 2.25rem; }

/* Superficies */
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; padding: 1.75rem; }
.nota { color: var(--pizarra); margin: .25rem 0 1rem; }
.aviso { background: var(--menta-suave); border: 1px solid #bfe8c9; color: var(--marino); padding: .75rem 1rem; border-radius: var(--radio); }
.aviso-error { background: var(--rojo-suave); border-color: #fecdca; color: var(--rojo); }
.aviso-servidor { margin: 0 0 1rem; }
.error { color: var(--rojo); margin: .25rem 0 .75rem; font-size: .9375rem; }

/* Formularios */
label { display: block; font-weight: 600; margin: 1rem 0 .35rem; font-size: .9375rem; }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], input:not([type]),
select, textarea, input[type="search"], input[type="date"], input[type="month"] {
  width: 100%; padding: .6rem .75rem; font: inherit; font-size: 1rem; color: var(--marino);
  border: 1px solid var(--linea); border-radius: 8px; background: var(--blanco);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marino); box-shadow: 0 0 0 3px var(--menta); }
button {
  margin-top: 1.25rem; width: 100%; padding: .7rem 1rem; font: inherit; font-weight: 600;
  color: var(--menta); background: var(--marino); border: 0; border-radius: 8px; cursor: pointer;
}
button:hover { background: var(--marino-claro); }
.boton-secundario {
  margin: 0; width: auto; padding: .45rem .95rem; font-size: .875rem; font-weight: 600;
  color: var(--marino); background: var(--blanco); border: 1px solid var(--linea);
}
.boton-secundario:hover { background: var(--niebla); border-color: #c5ced8; }
a.boton-secundario { display: inline-block; text-decoration: none; border-radius: 8px; }
.boton {
  display: inline-block; padding: .55rem 1.05rem; font-weight: 600; color: var(--menta); background: var(--marino);
  border-radius: 8px; text-decoration: none;
}
.boton:hover { background: var(--marino-claro); }
a.boton.boton-google { display: block; text-align: center; padding: .8rem 1rem; margin: 1.25rem 0 .75rem; }
.boton-peligro { color: var(--blanco); background: var(--rojo); }
.boton-peligro:hover { background: #8f1c13; }

/* Segundo factor */
.pasos { padding-left: 1.2rem; }
.pasos li { margin-bottom: .5rem; }
.qr { display: flex; justify-content: center; margin: 1rem 0; }
.qr svg { width: 200px; height: 200px; }
details { margin: .5rem 0 1rem; }
summary { cursor: pointer; color: var(--marino); font-weight: 500; }
.clave { font-family: ui-monospace, Menlo, monospace; word-break: break-all; background: var(--niebla); padding: .5rem; border-radius: 6px; }

/* Inicio: tablero según SALDE – Dashboard.html */
.tablero-arriba { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tablero-arriba h1 { font-size: 1.5rem; margin: 0; }
.tablero-arriba .nota { margin: 0; font-size: .8125rem; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: .875rem; }
.fila-tablero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: .75rem; margin-bottom: .875rem; align-items: start; }
.kpis .tarjeta, .fila-tablero .tarjeta { padding: 1rem; }
.fila-tablero h3, .fila-tablero .para-hacer h2 { font-size: 1rem; margin: 0 0 .625rem; }
.kpi small { display: block; color: var(--pizarra); font-size: .75rem; }
.kpi b { display: block; margin: .125rem 0; font-family: var(--titulos); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.kpi span { font-size: .75rem; font-weight: 600; }
.kpi .sube { color: #2e9e5b; }
.kpi .baja { color: #c0392b; }
.kpi .sin-cambio { color: var(--pizarra); font-weight: 500; }
.leyenda-grafico { font-size: .75rem; color: var(--pizarra); margin-bottom: .375rem; }
.leyenda-grafico i { display: inline-block; width: .625rem; height: .625rem; border-radius: 3px; margin: 0 .25rem 0 .625rem; vertical-align: middle; }
.leyenda-grafico i:first-child { margin-left: 0; }
.muestra-desembolso, .barra-desembolso { background: var(--marino); fill: var(--marino); }
.muestra-recaudo, .barra-recaudo { background: var(--menta); fill: var(--menta); }
.grafico { display: block; width: 100%; height: auto; }
.grafico text { fill: var(--pizarra); font: 11px var(--texto); }
.lineas-guia line { stroke: var(--linea); }
.nota.pequena { font-size: .75rem; margin: .625rem 0 0; }
.franja { margin-bottom: .75rem; font-size: .8125rem; }
.franja div { display: flex; justify-content: space-between; }
.franja small { color: var(--pizarra); font-size: .75rem; }
.pista { display: block; width: 100%; height: .5rem; margin-top: .25rem; border-radius: 5px; background: var(--linea); }
.relleno-al-dia { fill: #2e9e5b; }
.relleno-mora-corta { fill: #d98a1b; }
.relleno-mora-larga { fill: #c0392b; }
/* Cartera vs. pasivos: la parte común en azul y pizarra; lo que sobra es el colchón (menta) o
   el descalce (rojo). La raya punteada marca dónde termina la menor. */
.comparativo {
  padding: 1rem 1.25rem; margin-bottom: .875rem;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.5rem;
}
.comparativo-saldos { min-width: 0; }
/* Margen ganado: la misma lectura de color que las barras de saldos */
.margen { border-left: 1px solid var(--linea); padding-left: 1.5rem; min-width: 0; }
.margen h3 { font-size: 1rem; margin: 0 0 .5rem; }
.margen-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .5rem; }
.margen-cifras small { display: block; font-size: .75rem; color: var(--pizarra); }
.margen-cifras b { display: block; font-family: var(--titulos); font-size: 1.375rem; line-height: 1.2; }
.margen-cifras span { display: block; font-size: .75rem; line-height: 1.3; color: var(--verde); }
.margen-cifras .negativo b, .margen-cifras .negativo span { color: var(--rojo); }
.grafico-margen { max-height: 7.5rem; }
.base-margen { stroke: var(--linea); stroke-width: 1; }
.muestra-costo { background: var(--pizarra); }
.muestra-margen { background: var(--menta); }
.muestra-perdida { background: var(--rojo-barra); }
.margen .nota { margin: .25rem 0 0; }
.comparativo-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.comparativo-cabeza h3 { font-size: 1rem; margin: 0 0 .25rem; }
.comparativo-cabeza p { margin: 0; font-size: .875rem; color: var(--pizarra); }
.comparativo-cabeza p b { color: var(--marino); white-space: nowrap; }
.cobertura { text-align: right; }
.cobertura b { display: block; font-family: var(--titulos); font-size: 1.75rem; line-height: 1.1; color: var(--marino); }
.cobertura small { font-size: .75rem; color: var(--pizarra); }
.comparativo-barras {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 5.5rem; grid-template-rows: 2rem 2rem;
  align-items: center; column-gap: .875rem; margin: .875rem 0 .5rem;
}
.comparativo-barras svg { grid-column: 2; grid-row: 1 / 3; width: 100%; height: 4rem; display: block; }
.rotulo-cartera, .rotulo-pasivos { grid-column: 1; font-size: .8125rem; color: var(--pizarra); }
.rotulo-cartera { grid-row: 1; }
.rotulo-pasivos { grid-row: 2; }
.cifra-cartera, .cifra-pasivos { grid-column: 3; text-align: right; font-family: var(--titulos); font-size: 1.0625rem; }
.cifra-cartera { grid-row: 1; }
.cifra-pasivos { grid-row: 2; }
.pista-comparativo { fill: var(--niebla); }
.barra-cartera { fill: var(--marino); }
.barra-pasivos { fill: var(--pizarra); }
.barra-colchon { fill: var(--menta); }
.barra-descalce { fill: var(--rojo-barra); }
.marca-comun { stroke: var(--marino); stroke-width: 1.25; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.comparativo.descalce .cobertura b { color: var(--rojo); }
/* Tasas ponderadas: los puntos repiten el color de cada barra; la diferencia es lo que gana Salde */
.tasas-ponderadas { width: 100%; max-width: 26rem; border-collapse: collapse; font-size: .8125rem; margin: .25rem 0 .75rem; font-variant-numeric: tabular-nums; }
.tasas-ponderadas caption { text-align: left; font-size: .75rem; color: var(--pizarra); padding-bottom: .25rem; }
.tasas-ponderadas th, .tasas-ponderadas td { padding: .2rem .5rem .2rem 0; border: 0; background: none; }
.tasas-ponderadas thead th { font-size: .6875rem; font-weight: 400; color: var(--pizarra); }
.tasas-ponderadas tbody th { font-weight: 400; text-align: left; }
.tasas-ponderadas .numero { text-align: right; }
.tasas-ponderadas i { display: inline-block; width: .55rem; height: .55rem; border-radius: 2px; margin-right: .4rem; vertical-align: middle; }
.punto-cartera { background: var(--marino); }
.punto-pasivos { background: var(--pizarra); }
.tasas-ponderadas tfoot th, .tasas-ponderadas tfoot td { border-top: 1px solid var(--linea); padding-top: .35rem; font-weight: 700; color: var(--verde); text-align: left; }
.tasas-ponderadas tfoot td { text-align: right; }
.tasas-ponderadas tfoot tr.negativo th, .tasas-ponderadas tfoot tr.negativo td { color: var(--rojo); }
.comparativo > .nota { margin: 0; }
.tabla-desliza { overflow-x: auto; }
table.tabla-tablero { font-size: .8125rem; min-width: 32rem; }
table.tabla-tablero th { background: transparent; color: var(--pizarra); font-size: .75rem; padding: .55rem .5rem; }
table.tabla-tablero td { padding: .55rem .5rem; }
.tag { display: inline-block; padding: .125rem .5625rem; border-radius: 20px; font-size: .6875rem; font-weight: 600; white-space: nowrap; }
.t-verde { background: #dff5e6; color: #1d7a45; }
.t-ambar { background: #fdeccf; color: #9a6208; }
.t-roja { background: #f8d9d5; color: #a22a1d; }
.t-gris { background: #e1e7ee; color: #3a4a5c; }
.t-azul { background: #dfe7f0; color: var(--marino); }

/* Próximos vencimientos: cada periodo es a la vez su resumen y el botón que muestra sus clientes.
   Sin JS: radios y :has(); el elegido se pinta en azul marino con la raya menta de la marca. */
.vencen { padding: 1rem; margin-bottom: .875rem; }
.vencen h3 { font-size: 1rem; margin: 0 0 .625rem; }
.vencen-periodos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; min-width: 0; margin: 0 0 .875rem; padding: 0; border: 0; }
.vencen-periodos input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vencen-periodos label {
  position: relative; display: grid; gap: .1rem; padding: .7rem .9rem .8rem; cursor: pointer;
  background: var(--niebla); border: 1px solid var(--linea); border-radius: 10px;
}
.vencen-periodos label span { font-size: .8125rem; color: var(--pizarra); }
.vencen-periodos label b { font-family: var(--titulos); font-size: 1.375rem; font-weight: 700; line-height: 1.2; color: var(--marino); font-variant-numeric: tabular-nums; }
.vencen-periodos label small { font-size: .75rem; color: var(--pizarra); }
.vencen-periodos label:hover { border-color: var(--pizarra); }
.vencen-periodos input:checked + label { background: var(--marino); border-color: var(--marino); }
.vencen-periodos input:checked + label b { color: var(--blanco); }
.vencen-periodos input:checked + label span, .vencen-periodos input:checked + label small { color: #c3cdd8; }
.vencen-periodos input:checked + label::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 0; height: 3px;
  background: var(--menta); border-radius: 3px 3px 0 0;
}
.vencen-periodos input:focus-visible + label { outline: 2px solid var(--marino); outline-offset: 2px; box-shadow: 0 0 0 5px var(--menta); }
.vencen-detalle { display: none; }
.vencen:has(#vencen-15:checked) #detalle-15,
.vencen:has(#vencen-30:checked) #detalle-30,
.vencen:has(#vencen-mes:checked) #detalle-mes,
.vencen:has(#pasivos-30:checked) #detalle-pasivos-30,
.vencen:has(#pasivos-60:checked) #detalle-pasivos-60,
.vencen:has(#pasivos-90:checked) #detalle-pasivos-90 { display: block; }
/* Pasivos vencidos sin decidir: arriba de los plazos, con la raya roja de lo que urge */
.pasivos-vencidas { margin: 0 0 .875rem; padding: .25rem 0 .25rem .875rem; border-left: 3px solid var(--rojo); }
.pasivos-vencidas > p { margin: 0 0 .25rem; font-size: .8125rem; color: var(--pizarra); }
.pasivos-vencidas > p b { color: var(--rojo); }
.vencen-detalle td.fecha { white-space: nowrap; }
.vencen-detalle tfoot th { background: var(--niebla); color: var(--marino); }
.vencen-detalle .tag { margin-left: .35rem; }
.vencen-detalle > .nota { margin: .5rem 0 0; }
@media (max-width: 560px) {
  .vencen-periodos { gap: .375rem; }
  .vencen-periodos label { padding: .55rem .6rem .7rem; }
  .vencen-periodos label b { font-size: 1.05rem; }
  .vencen-periodos input:checked + label::after { left: .6rem; right: .6rem; }
}

.para-hacer { background: var(--marino); color: var(--blanco); border-radius: 14px; padding: 1.5rem 1.5rem .75rem; }
.para-hacer h2 { margin: 0 0 .5rem; color: var(--blanco); font-size: 1.125rem; }
.para-hacer ul { list-style: none; margin: 0; padding: 0; }
.para-hacer li + li { border-top: 1px solid var(--marino-claro); }
.para-hacer a {
  display: grid; grid-template-columns: 3.25rem 1fr; align-items: center; gap: .75rem;
  padding: .85rem 0; color: var(--blanco); text-decoration: none;
}
.para-hacer a:hover span { text-decoration: underline; text-decoration-color: var(--menta); text-underline-offset: .2em; }
.para-hacer a:focus-visible { outline-color: var(--menta); box-shadow: none; border-radius: 6px; }
.para-hacer strong { font-family: var(--titulos); font-weight: 600; font-size: 2rem; line-height: 1; color: var(--menta); text-align: right; font-variant-numeric: tabular-nums; }
.para-hacer .alerta strong { color: #f6a89e; }
.para-hacer small { display: block; color: #c9d3dc; font-size: .8125rem; }
.para-hacer .al-dia { margin: .25rem 0 .75rem; color: #c9d3dc; }

.primeros-pasos h2 { margin-top: 0; }
.primeros-pasos ol { list-style: none; counter-reset: paso; margin: 1.25rem 0; padding: 0; display: grid; gap: .25rem; }
.primeros-pasos li { counter-increment: paso; display: grid; grid-template-columns: 2.25rem 1fr; align-items: center; min-height: 2.75rem; }
.primeros-pasos li::before {
  content: counter(paso); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: 1.5px solid; font-family: var(--titulos); font-weight: 600; font-size: .875rem;
}
.primeros-pasos li { color: var(--pizarra); }
.primeros-pasos li::before { border-color: var(--linea); }
.primeros-pasos li.siguiente { color: var(--marino); }
.primeros-pasos li.siguiente::before { background: var(--marino); border-color: var(--marino); color: var(--menta); }
.primeros-pasos li.hecho::before { content: "✓"; background: var(--menta); border-color: var(--menta); color: var(--marino); }
.primeros-pasos a { font-weight: 600; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Accesos a módulos (si alguna pantalla los usa) */
.modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.modulo { display: flex; flex-direction: column; gap: .25rem; padding: 1.25rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--marino); text-decoration: none; }
a.modulo:hover { border-color: var(--marino); }
.modulo span { color: var(--pizarra); font-size: .875rem; }

/* Tablas */
.tabla-envoltura { overflow-x: auto; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { text-align: left; padding: .65rem .85rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { background: var(--niebla); color: var(--pizarra); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td.fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
td:first-child a { white-space: nowrap; }
td.detalle { color: var(--pizarra); }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table tfoot th, table tfoot td { background: var(--niebla); color: var(--marino); font-weight: 700; }
.paginas { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-top: 1rem; }

/* Módulos de negocio */
.tarjeta h2, .tarjeta h3 { margin-top: 0; }
.miga { margin: 0 0 .5rem; font-size: .875rem; }
.miga a { color: var(--pizarra); }
.encabezado { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.encabezado h1, .encabezado h2 { margin-bottom: .25rem; }
.filtros { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filtros input, .filtros select,
.filtros input[type="search"], .filtros input[type="date"] { width: auto; min-width: 14rem; }
.filtros button { margin: 0; }
label.en-linea { display: inline; margin: 0; }
.etiqueta { display: inline-block; font-size: .8125rem; padding: .05rem .5rem; border-radius: 999px; background: var(--niebla); border: 1px solid var(--linea); }
.etiqueta-pendiente { background: #fffaeb; border-color: #fedf89; color: #93370d; }
.apagado { color: var(--pizarra); }
tr.apagado td { color: var(--pizarra); text-decoration: line-through; }

.estado { display: inline-block; font-size: .8125rem; font-weight: 600; padding: .1rem .6rem; border-radius: 999px; }
.estado-simulada { background: #e8edf2; color: #3a4a5c; }
.estado-aprobada { background: #dfe7f0; color: var(--marino); }
.estado-desembolsada, .estado-vigente, .estado-firmado { background: var(--menta-suave); color: var(--verde); }
.estado-anulada { background: var(--niebla); color: var(--pizarra); text-decoration: line-through; }
.estado-vencida { background: var(--rojo-suave); color: var(--rojo); }
.estado-abonada { background: #dfe7f0; color: var(--marino); }
.estado-pagada { background: var(--marino); color: var(--menta); }
.pendiente { background: #fffaeb; border: 1px solid #fedf89; color: #93370d; padding: .75rem 1rem; border-radius: var(--radio); }
.subir-firmado { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.subir-firmado input[type="file"] { max-width: 16rem; }
.subir-firmado button { width: auto; margin: 0; }

/* Formularios largos */
.formulario fieldset { border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.25rem; margin: 0 0 1rem; background: var(--blanco); }
.formulario legend { font-family: var(--titulos); font-weight: 600; padding: 0 .35rem; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 1rem; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { margin-top: .75rem; }
.etiqueta-campo { display: block; font-weight: 600; margin: .75rem 0 .35rem; font-size: .9375rem; }
.ayuda { display: block; color: var(--pizarra); margin-top: .25rem; }
.requerido { color: var(--rojo); }
.casillas { display: flex; gap: 1.5rem; margin-top: .75rem; }
label.casilla { display: flex; align-items: center; gap: .4rem; font-weight: 500; margin: .5rem 0 0; }
.opciones ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.opciones label { display: flex; align-items: center; gap: .35rem; font-weight: 400; margin: 0; }
.acciones { display: flex; justify-content: flex-end; }
.acciones button { width: auto; min-width: 12rem; }
.tarjeta .formulario button { width: auto; }

/* Detalle de la operación */
h1 .codigo {
  display: inline-block; margin-right: .5rem; padding: .1em .45em; border-radius: 8px; vertical-align: .12em;
  font-size: .72em; letter-spacing: .02em; color: var(--menta); background: var(--marino);
}
.botones-encabezado { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Línea del trámite: cinco pasos en orden; el actual en azul, los hechos con ✓ menta */
.tramite { list-style: none; counter-reset: tramite; display: grid; grid-template-columns: repeat(5, 1fr); margin: .5rem 0 1.5rem; padding: 0; }
.tramite li { counter-increment: tramite; position: relative; padding: 2.4rem .75rem 0 0; color: var(--pizarra); }
.tramite li::before {
  content: counter(tramite); position: absolute; top: 0; left: 0; display: grid; place-items: center;
  width: 1.85rem; height: 1.85rem; border-radius: 50%; border: 1.5px solid var(--linea); background: var(--blanco);
  font-family: var(--titulos); font-weight: 600; font-size: .875rem; color: var(--pizarra);
}
.tramite li::after { content: ""; position: absolute; top: .9rem; left: 2.25rem; right: .5rem; height: 2px; background: var(--linea); }
.tramite li:last-child::after { display: none; }
.tramite .paso-nombre { display: block; font-weight: 600; font-size: .9375rem; }
.tramite small { display: block; color: var(--pizarra); }
.tramite .paso-hecho { color: var(--marino); }
.tramite .paso-hecho::before { content: "✓"; color: var(--marino); background: var(--menta); border-color: var(--menta); }
.tramite .paso-hecho::after { background: var(--marino); }
.tramite .paso-actual { color: var(--marino); }
.tramite .paso-actual::before { color: var(--menta); background: var(--marino); border-color: var(--marino); box-shadow: 0 0 0 4px var(--menta-suave); }

.siguiente-paso { margin: 0 0 1.5rem; padding: 1.5rem 1.75rem; background: var(--blanco); border: 2px solid var(--marino); border-radius: 14px; }
.siguiente-paso h2 { margin: 0 0 .35rem; }
.siguiente-paso > p { margin: 0 0 1rem; max-width: 62ch; }
.acciones-paso { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.acciones-paso form { margin: 0; }
.acciones-paso button { margin: 0; width: auto; }
.siguiente-paso .subir-firmado { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); }
.siguiente-paso .subir-firmado label { flex-basis: 100%; margin: 0; }
.formulario.en-fila { display: flex; flex-wrap: wrap; gap: 0 .75rem; align-items: flex-end; }
.formulario.en-fila .campo { flex: 1 1 18rem; max-width: 28rem; }
.formulario.en-fila button { width: auto; margin: 0 0 .1rem; }
.documentos { margin-top: 1rem; }
.documentos h2 { margin-top: 1.5rem; }

/* Detalle */
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; align-items: start; }
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem 1rem; margin: 0 0 1rem; }
.datos dt { font-size: .8125rem; color: var(--pizarra); }
.datos dd { margin: .1rem 0 0; }
table.cifras { font-size: .9375rem; }
table.cifras th { background: transparent; font-weight: 500; color: var(--pizarra); }
table.cifras td { text-align: right; font-variant-numeric: tabular-nums; }
table.cifras tr.total th, table.cifras tr.total td { font-weight: 700; color: var(--marino); border-top: 2px solid var(--marino); }
details.peligro { margin-top: 1.25rem; }
details.peligro summary { color: var(--rojo); }
details.a-mano { margin-top: 1.5rem; }
details.a-mano form { margin-top: .75rem; }
details.a-mano input { width: 11rem; margin: 0; }
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.resumen div { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: .75rem 1rem; display: flex; flex-direction: column; }
.resumen span { font-size: .8125rem; color: var(--pizarra); }
.resumen strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.resumen .destacado { background: var(--marino); border-color: var(--marino); }
.resumen .destacado span { color: #c9d3dc; }
.resumen .destacado strong { color: var(--menta); }

/* Pagos */
tr.fila-pago td { background: var(--menta-suave); font-size: .875rem; }
table.cuadro tfoot th, table.cuadro tfoot td { border-top: 2px solid var(--marino); }
.botones { gap: .75rem; }
.botones button { margin-top: 1rem; }
.lista-simple { padding-left: 1.2rem; }
table input { min-width: 9rem; }
table.cuadro tfoot td:last-child { white-space: nowrap; }

/* Documentos de Siigo de un pago */
.documento-siigo { margin-top: 1.25rem; }
.documento-siigo h3 { margin: 0; }
.documento-siigo .encabezado { align-items: center; margin-bottom: .5rem; }

/* Liquidación del pago (registrar y detalle): cifras sin signo para que quepa sin desplazar */
table.liquidacion-pago { font-size: .8125rem; }
table.liquidacion-pago th, table.liquidacion-pago td { padding: .5rem .35rem; }
table.liquidacion-pago th { white-space: normal; font-size: .75rem; vertical-align: bottom; }
table.liquidacion-pago td small { display: block; color: var(--pizarra); font-size: .75rem; white-space: nowrap; }
table.liquidacion-pago tfoot small { color: var(--pizarra); font-weight: 400; }
table.liquidacion-pago td.operacion, table.liquidacion-pago td.desde { white-space: nowrap; }
table.liquidacion-pago td.pagador { min-width: 6rem; max-width: 13rem; }
table.liquidacion-pago td.recibido input { min-width: 0; width: 7rem; padding: .4rem .5rem; text-align: right; font-size: .875rem; font-variant-numeric: tabular-nums; }
table.liquidacion-pago td.prorroga input { min-width: 0; width: 7.5rem; padding: .4rem .3rem; font-size: .8125rem; }
table.liquidacion-pago .a-favor { color: var(--verde); }
table.liquidacion-pago th.pagar, table.liquidacion-pago td.pagar { width: 2.25rem; text-align: center; vertical-align: middle; }
table.liquidacion-pago td.pagar input { width: 1.15rem; height: 1.15rem; min-width: 0; margin: 0; accent-color: var(--marino); cursor: pointer; }
table.liquidacion-pago tr.marcada td { background: var(--menta-suave); }
table.liquidacion-pago .resultado .estado { font-size: .6875rem; padding: .05rem .45rem; margin-left: .2rem; }
.estado-a-favor { background: var(--menta-suave); color: var(--verde); border: 1px solid #bfe8c9; }

/* Registrar pago. La franja azul es el comprobante del banco: de quién, qué día, cuánto y con
   qué referencia, todo en un renglón, y debajo cómo se reparte (lo único en azul). */
.titulo-pago { display: flex; align-items: baseline; gap: .5rem 1.25rem; flex-wrap: wrap; }
.titulo-pago h1 { margin: 0; }
.titulo-pago a { color: var(--pizarra); font-size: .875rem; }
.ingreso { margin: .75rem 0 1.25rem; padding: 1.1rem 1.5rem 1.25rem; border-radius: 14px; background: var(--marino); color: var(--blanco); }
.ingreso-datos {
  display: grid; gap: .75rem 1.25rem; align-items: end;
  grid-template-columns: minmax(12rem, 1.2fr) 10.5rem minmax(14rem, 1.3fr) minmax(9rem, .9fr);
}
.ingreso.sin-cliente .ingreso-datos { grid-template-columns: minmax(14rem, 24rem) 10.5rem auto; justify-content: start; }
.ingreso .campo { margin: 0; min-width: 0; }
/* Pago de un cliente o consignación de un pagador por varios clientes */
.pago-de { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; margin: 0 0 .85rem; padding: 0; border: 0; }
.pago-de legend { float: left; margin-right: .5rem; padding: 0; color: #c9d3dc; font-size: .875rem; font-weight: 500; }
.ingreso .opcion-pago-de { display: inline-flex; align-items: center; gap: .4rem; margin: 0; color: var(--blanco); font-size: .9375rem; cursor: pointer; }
.opcion-pago-de input { width: auto; min-width: 0; margin: 0; accent-color: var(--menta); }
.ingreso [data-para][hidden] { display: none; }
table.liquidacion-pago tr.grupo-cliente > * { background: var(--niebla); border-top: 2px solid var(--marino); font-weight: 600; font-size: .8125rem; }
table.liquidacion-pago tr.grupo-cliente th { text-align: left; }
.a-favor-de { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin: .9rem 0 0; padding: .75rem 1rem; border: 1px solid #bfe8c9; border-radius: var(--radio); background: var(--menta-suave); }
.a-favor-de[hidden] { display: none; }
.a-favor-de label { margin: 0; font-weight: 600; }
.a-favor-de select { width: auto; min-width: 16rem; }
.a-favor-de .ayuda { flex-basis: 100%; margin: 0; }
.aviso-consignacion { background: #dfe7f0; border: 1px solid #c6d3e1; color: var(--marino); padding: .75rem 1rem; border-radius: var(--radio); }
table.consignacion-clientes td small { display: block; color: var(--pizarra); font-size: .75rem; }
.ingreso label { margin: 0 0 .3rem; color: #c9d3dc; font-weight: 500; font-size: .875rem; }
.ingreso .requerido { color: #f6a89e; }
.ingreso .error { color: #f6a89e; margin: .5rem 0 0; }
.ingreso :focus-visible { outline-color: var(--menta); }
.ingreso select, .ingreso input[type="date"], .campo-referencia input {
  width: 100%; min-width: 0; height: 2.75rem; color: var(--blanco); background: var(--marino-claro); border-color: #3d4f63; color-scheme: dark;
}
.ingreso select:focus, .ingreso input:focus { border-color: var(--menta); box-shadow: 0 0 0 3px rgba(168, 230, 181, .35); }
.ingreso button { margin: 0; width: auto; height: 2.75rem; color: var(--marino); background: var(--menta); }
.con-signo { display: flex; align-items: center; gap: .4rem; }
.con-signo span { font-family: var(--titulos); font-size: 1.5rem; font-weight: 500; color: var(--menta); }
.campo-ingreso input {
  height: 2.75rem; padding: .2rem .6rem; font-family: var(--titulos); font-size: 1.5rem; font-weight: 600;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--marino);
}
.ingreso-ayuda { margin: .9rem 0 0; color: #c9d3dc; }
.reparto { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--marino-claro); }
.reparto-barra { display: flex; gap: 3px; height: 1.75rem; padding: 3px; border-radius: 9px; background: var(--marino-claro); }
.reparto-barra span { flex: 0 0 0; min-width: 0; border-radius: 6px; transition: flex-grow .35s ease; }
.reparto-barra .pagada { background: var(--menta); }
.reparto-barra .abonada { background: repeating-linear-gradient(135deg, var(--menta) 0 6px, #7fbf92 6px 12px); }
.reparto-barra .a-favor { background: var(--blanco); }
.reparto-barra .por-repartir { background: transparent; outline: 1.5px dashed #6b7d90; outline-offset: -1.5px; }
.reparto-barra .de-mas { background: #f6a89e; }
.reparto-texto { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1.5rem; margin-top: .6rem; }
.ingreso .reparto-estado { margin: 0; font-weight: 600; color: var(--blanco); }
.reparto-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: .8125rem; color: #c9d3dc; }
.reparto-leyenda li { display: flex; align-items: center; gap: .4rem; }
.reparto-leyenda i { width: .75rem; height: .75rem; border-radius: 3px; flex: none; }
.reparto-leyenda b { color: var(--blanco); font-weight: 600; font-variant-numeric: tabular-nums; }
.reparto-leyenda .pagada { background: var(--menta); }
.reparto-leyenda .abonada { background: repeating-linear-gradient(135deg, var(--menta) 0 3px, #7fbf92 3px 6px); }
.reparto-leyenda .a-favor { background: var(--blanco); }
.reparto-leyenda .por-repartir { outline: 1.5px dashed #6b7d90; outline-offset: -1.5px; }
.reparto-leyenda .de-mas { background: #f6a89e; }
@media (prefers-reduced-motion: reduce) { .reparto-barra span { transition: none; } }

.encabezado-tabla { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1rem; margin-bottom: .6rem; }
.encabezado-tabla h2 { margin: 0; font-size: 1.125rem; }
.encabezado-tabla .nota { margin: 0; max-width: 62rem; font-size: .875rem; }
/* La aplicación contable, cuando ya se vio la liquidación: va primero porque es lo que se confirma */
.aplicacion { margin-bottom: 1.5rem; }
.aplicacion .tabla-envoltura { border: 2px solid var(--marino); }
.aplicacion table.cuadro { font-size: .8125rem; }
.aplicacion table.cuadro th, .aplicacion table.cuadro td { padding: .5rem .65rem; }
.aplicacion.desactualizada .tabla-envoltura { opacity: .45; border-color: var(--linea); }
.aplicacion.desactualizada .nota { color: #93370d; font-weight: 500; }

.barra-acciones {
  position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: .5rem 1.5rem;
  flex-wrap: wrap; margin: 1.25rem calc(-1 * clamp(1rem, 2vw, 1.5rem)) 0; padding: .75rem clamp(1rem, 2vw, 1.5rem);
  background: var(--blanco); border-top: 1px solid var(--linea);
}
.barra-acciones .reparto-estado { margin: 0; color: var(--pizarra); font-weight: 500; }
.barra-acciones .botones { display: flex; gap: .75rem; margin-left: auto; }
.barra-acciones button { margin: 0; width: auto; }
@media (max-width: 1100px) {
  .ingreso-datos { grid-template-columns: minmax(0, 1fr) 10.5rem; }
}
@media (max-width: 640px) {
  .ingreso { padding: 1rem; }
  .ingreso-datos, .ingreso.sin-cliente .ingreso-datos { grid-template-columns: minmax(0, 1fr); }
  .barra-acciones .reparto-estado { font-size: .8125rem; }
}

/* Reportes */
.pestanas { display: flex; gap: .25rem; border-bottom: 1px solid var(--linea); margin-bottom: 1.25rem; flex-wrap: wrap; }
.pestanas a { padding: .55rem .9rem; text-decoration: none; color: var(--pizarra); border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 500; }
.pestanas a:hover { color: var(--marino); }
.pestanas a[aria-current="page"] { color: var(--marino); font-weight: 600; border-bottom-color: var(--menta); }
input.corto { min-width: 0 !important; width: 5rem !important; }

/* Celular y tableta: el menú pasa arriba y se desliza de lado */
@media (max-width: 900px) {
  body.con-menu, body.acceso { display: block; }
  button.alternar-menu { display: none; }
  .lateral {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: .75rem 1rem; padding: 1rem;
  }
  .lateral .marca { width: 8rem; margin: 0; }
  .menu { order: 3; flex-basis: 100%; flex-direction: row; overflow-x: auto; gap: .25rem; margin: 0 -.25rem; }
  .menu a { white-space: nowrap; }
  .sesion { margin: 0 0 0 auto; flex-direction: row; align-items: center; padding: 0; border: 0; }
  .quien, .version { display: none; }
  .presentacion { padding: 1.5rem 1rem; }
  .presentacion .marca { width: 12rem; }
  .presentacion-texto { display: none; }
  .contenido { padding: 1.5rem 1rem 3rem; }
  .contenido.angosto { margin: 0 auto; }
  .tarjeta, .acceso .tarjeta { padding: 1.25rem; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .fila-tablero { grid-template-columns: minmax(0, 1fr); }
  .comparativo { grid-template-columns: minmax(0, 1fr); }
  .margen { border-left: 0; padding-left: 0; border-top: 1px solid var(--linea); padding-top: 1rem; }
  .comparativo-cabeza { flex-direction: column; }
  .cobertura { text-align: left; }
  .comparativo-barras { grid-template-columns: 3.75rem minmax(0, 1fr) 4.75rem; column-gap: .5rem; }
  .tramite { grid-template-columns: 1fr; gap: 0; }
  .tramite li { padding: .2rem 0 1.1rem 2.75rem; min-height: 2.6rem; }
  .tramite li::after { top: 2.05rem; bottom: .2rem; left: .87rem; right: auto; width: 2px; height: auto; }
  .siguiente-paso { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media print {
  body.con-menu { display: block; }
  .lateral, .presentacion, .saltar, .no-imprimir, .miga { display: none !important; }
  body { background: #fff; }
  .contenido { padding: 0; max-width: none; }
  .tabla-envoltura, .tarjeta, .resumen div { border-color: #999; }
}

/* Reportes */
.con-js .solo-sin-js { display: none; }
.resumen dt { font-size: .8125rem; color: var(--pizarra); }
.resumen dd { margin: .1rem 0 0; font-family: var(--titulos); font-weight: 600; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.resumen dd small { font-family: var(--texto); font-weight: 500; font-size: .8125rem; color: var(--pizarra); }
.resumen .destacado dt, .resumen .destacado small { color: #c9d3dc; }
.resumen .destacado dd { color: var(--menta); }
.cifras-mes { margin-bottom: 1.25rem; }
.cifras-mes .resumen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cifras-mes .destacado { grid-column: span 2; order: -1; }
@media (max-width: 760px) { .cifras-mes .resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cifras-mes .peligro { margin-top: .25rem; }
/* Cuadre del cierre con Siigo: de la cartera en bruto (1305) a la neta de la plataforma */
.cuadre-siigo { margin: 0 0 1.25rem; padding: 1.25rem 1.5rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; }
.cuadre-siigo h2, .cuadre-siigo h3 { margin: 0 0 .25rem; }
.parte-cuerpo .cuadre-siigo { margin: 1rem 0 0; }
.parte-cuerpo .cuadre-siigo h3 { font-size: 1rem; }
.cuadre-siigo > .nota { margin: 0 0 .75rem; max-width: 72ch; }
table.cuadre-tabla { max-width: 40rem; font-size: .9375rem; }
.cuadre-tabla th, .cuadre-tabla td { background: transparent; border-bottom: 1px solid var(--linea); padding: .5rem .5rem; }
.cuadre-tabla th { font-weight: 500; color: var(--marino); }
.cuadre-tabla .cuenta { color: var(--pizarra); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.cuadre-tabla td.numero { font-variant-numeric: tabular-nums; }
.cuadre-tabla tr.total th, .cuadre-tabla tr.total td.numero { font-weight: 600; }
.cuadre-tabla tr.total th, .cuadre-tabla tr.total td { border-top: 2px solid var(--marino); }
.cuadre-tabla .signo { display: inline-block; width: 1.25rem; font-family: var(--titulos); font-weight: 600; color: var(--pizarra); }

/* Resumen para la gerencia: una portada azul con la lectura del mes y debajo el informe por
   partes (título a la izquierda con la raya menta de los PDF de Salde, contenido a la derecha) */
.gerencia-acciones { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.gerencia-acciones .filtros { margin: 0; }
.portada { background: var(--marino); color: var(--blanco); border-radius: 18px; padding: 2.25rem 2.5rem 0; margin-bottom: 2.5rem; overflow: hidden; }
.portada-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1.5rem; flex-wrap: wrap; }
.portada h1 { color: var(--blanco); font-size: 3rem; line-height: 1; letter-spacing: -.02em; margin: 0; }
.portada-estado { margin: 0; color: #c9d3dc; font-size: .875rem; }
.portada-estado span { display: inline-block; margin-right: .4rem; padding: .1rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.portada-estado .cerrado { background: var(--menta); color: var(--marino); }
.portada-estado .preliminar { box-shadow: inset 0 0 0 1px #c9d3dc; color: var(--blanco); }
.lectura { max-width: 62ch; margin: 1.5rem 0 2rem; font-size: 1.1875rem; line-height: 1.55; color: #e8edf2; }
.portada-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 -2.5rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.portada-cifras div { padding: 1.25rem 2.5rem 1.5rem; }
.portada-cifras div + div { border-left: 1px solid rgba(255, 255, 255, .14); }
.portada-cifras dt { font-size: .8125rem; color: #c9d3dc; }
.portada-cifras dd { margin: .25rem 0 0; }
.portada-cifras b { display: block; font-family: var(--titulos); font-weight: 600; font-size: 1.875rem; line-height: 1.15; color: var(--menta); font-variant-numeric: tabular-nums; }
.portada-cifras span { display: block; margin-top: .25rem; font-size: .75rem; font-weight: 600; }
.portada-cifras .sube { color: var(--menta); }
.portada-cifras .baja { color: #ffb4a8; }
.portada-cifras .sin-cambio { color: #c9d3dc; font-weight: 500; }
.parte { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 2rem; padding: 2rem 0 2.5rem; border-top: 1px solid var(--linea); }
.parte-titulo { align-self: start; position: sticky; top: 1.5rem; }
.parte-titulo::before { content: ""; display: block; width: 2.5rem; height: 4px; border-radius: 2px; background: var(--menta); margin-bottom: .875rem; }
.parte-titulo h2 { margin: 0; font-size: 1.375rem; }
.parte-titulo p { margin: .375rem 0 0; color: var(--pizarra); font-size: .8125rem; line-height: 1.4; }
.parte-cuerpo > :first-child { margin-top: 0; }
.parte-cuerpo > h3 { font-size: 1rem; margin: 1.75rem 0 .625rem; }
.parte-cuerpo .fila-tablero { margin-bottom: 1rem; }
.parte-cuerpo .movimiento { margin-bottom: 0; }
.parte-cuerpo .movimiento h3 { font-size: 1rem; margin: 0 0 .5rem; }
/* En el informe la columna es más angosta: el margen va debajo de los saldos, no al lado */
.parte-cuerpo .comparativo { grid-template-columns: minmax(0, 1fr); padding: 1.25rem 1.5rem; }
.parte-cuerpo .margen {
  border-left: 0; padding: 1.25rem 0 0; border-top: 1px solid var(--linea);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem;
  grid-template-areas: "titulo titulo" "cifras grafico" "nota leyenda";
}
.parte-cuerpo .margen h3 { grid-area: titulo; }
.parte-cuerpo .margen-cifras { grid-area: cifras; align-self: start; }
.parte-cuerpo .grafico-margen { grid-area: grafico; }
.parte-cuerpo .margen .leyenda-grafico { grid-area: leyenda; }
.parte-cuerpo .margen .nota { grid-area: nota; }
.mayores-clientes .parte { display: flex; align-items: center; gap: .5rem; }
.mayores-clientes .parte .pista { width: 8rem; margin-top: 0; }
.resumen-pasivos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.resumen-pasivos dd { white-space: nowrap; }
@media (max-width: 900px) {
  .parte { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .parte-titulo { position: static; }
  .portada { padding: 1.5rem 1.25rem 0; }
  .portada h1 { font-size: 2.25rem; }
  .lectura { font-size: 1.0625rem; }
  .portada-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 -1.25rem; }
  .portada-cifras div { padding: 1rem 1.25rem; }
  .portada-cifras b { font-size: 1.375rem; white-space: nowrap; }
  .portada-cifras div:nth-child(3) { border-left: 0; }
  .portada-cifras div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); }
  .resumen-pasivos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumen-pasivos dd { font-size: .9375rem; }
  .parte-cuerpo .margen { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "cifras" "grafico" "leyenda" "nota"; }
}
@media print {
  .gerencia-acciones { display: none; }
  .portada { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .parte-titulo { position: static; }
}
table.tabla-compacta { font-size: .8125rem; }
table.tabla-compacta th, table.tabla-compacta td { padding: .5rem .55rem; }
table.tabla-compacta th { white-space: normal; vertical-align: bottom; }
table.tabla-compacta td.cliente { min-width: 9rem; max-width: 16rem; }
table.tabla-compacta .estado { font-size: .75rem; padding: .05rem .5rem; }
.composicion { margin: 0 0 1.5rem; }
.composicion-total { margin: 0 0 .6rem; color: var(--pizarra); }
.composicion-total strong { font-family: var(--titulos); font-weight: 600; font-size: 2rem; letter-spacing: -.01em; color: var(--marino); margin-right: .35rem; font-variant-numeric: tabular-nums; }
.composicion-barra { display: block; width: 100%; height: 1.5rem; border-radius: 8px; overflow: hidden; background: var(--linea); }
.g-vigente { fill: var(--marino); background: var(--marino); }
.g-abonada { fill: #6f8aa6; background: #6f8aa6; }
.g-vencida { fill: var(--rojo-barra); background: var(--rojo-barra); }
.composicion-leyenda { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; }
.composicion-leyenda a {
  display: grid; grid-template-columns: .75rem 1fr; column-gap: .55rem; align-items: center; padding: .6rem .8rem;
  border: 1px solid var(--linea); border-radius: 10px; background: var(--blanco); text-decoration: none; color: var(--marino);
}
.composicion-leyenda a:hover { border-color: var(--pizarra); }
.composicion-leyenda a[aria-current="true"] { border-color: var(--marino); box-shadow: inset 0 0 0 1px var(--marino); }
.composicion-leyenda i { width: .75rem; height: .75rem; border-radius: 3px; }
.composicion-leyenda span { font-weight: 600; }
.composicion-leyenda b, .composicion-leyenda small { grid-column: 2; }
.composicion-leyenda b { font-family: var(--titulos); font-weight: 600; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.composicion-leyenda small { color: var(--pizarra); }
.filtro-activo { margin: 0 0 .75rem; color: var(--pizarra); }

.edades { margin: 0 0 1.5rem; padding: 1.25rem 1.5rem 1rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; }
.linea-resumen { display: flex; flex-wrap: wrap; gap: .25rem 2.5rem; margin-bottom: .5rem; }
.linea-resumen p { margin: 0; color: var(--pizarra); }
.linea-resumen strong { font-family: var(--titulos); font-weight: 600; font-size: 1.5rem; margin-right: .3rem; font-variant-numeric: tabular-nums; }
.cifra-vencida strong { color: var(--rojo); }
.cifra-por-vencer strong { color: var(--marino); }
.edades > .nota { margin: 0 0 .75rem; font-size: .8125rem; }
/* Edades de la cartera: una fila por rango, lo vencido arriba y lo que vence abajo, partidos
   por la raya de hoy. Lo vencido se oscurece con la antigüedad. */
.edades-filas { list-style: none; margin: 0; padding: 0; }
.edad {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr) 6.5rem 7.5rem; align-items: center;
  gap: 1rem; padding: .4rem 0; font-size: .875rem;
}
.edad-barra { display: block; width: 100%; height: .75rem; }
.edad-valor { font-family: var(--titulos); font-weight: 700; font-size: 1.0625rem; text-align: right; font-variant-numeric: tabular-nums; }
.edad-cantidad { color: var(--pizarra); font-size: .8125rem; }
.edad.vacia .edad-nombre, .edad.vacia .edad-valor { color: var(--pizarra); font-weight: 400; }
.pista-edad { fill: var(--niebla); }
.relleno-vencida-5 { fill: #8f1d14; }
.relleno-vencida-4 { fill: var(--rojo); }
.relleno-vencida-3 { fill: var(--rojo-barra); }
.relleno-vencida-2 { fill: #e07a6e; }
.relleno-vencida-1 { fill: #eba59c; }
.relleno-por-vencer { fill: var(--marino); }
.edades-hoy { display: flex; align-items: center; gap: .75rem; margin: .5rem 0; font-size: .8125rem; font-weight: 700; color: var(--marino); }
.edades-hoy::after { content: ""; flex: 1; border-top: 2px dashed var(--marino); }
@media (max-width: 640px) {
  .edad { grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .75rem; padding: .5rem 0; }
  .edad-barra { grid-column: 1 / -1; grid-row: 2; }
  .edad-cantidad { grid-column: 1 / -1; }
}

.movimiento { margin: 0 0 1.25rem; padding: 1.25rem 1.5rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; }
.movimiento h2 { margin: 0 0 .5rem; }
table.movimiento-tabla { font-size: .9375rem; }
.movimiento-tabla th, .movimiento-tabla td { background: transparent; border-bottom: 1px solid var(--linea); padding: .55rem .5rem; vertical-align: middle; }
.movimiento-tabla th { color: var(--marino); font-weight: 500; white-space: normal; width: 36%; }
.movimiento-tabla .signo { display: inline-block; width: 1.25rem; font-family: var(--titulos); font-weight: 600; color: var(--pizarra); }
.movimiento-tabla td.barra { width: 40%; }
.movimiento-tabla td.barra svg { display: block; width: 100%; height: .875rem; }
.movimiento-tabla td.numero { font-variant-numeric: tabular-nums; }
.movimiento-tabla .centro { stroke: var(--linea); stroke-width: 2; }
.movimiento-tabla .mov-aumenta rect { fill: var(--marino); }
.movimiento-tabla .mov-recaudo rect { fill: #5cbf7a; }
.movimiento-tabla .mov-ajuste rect { fill: var(--pizarra); }
.movimiento-tabla tr.saldo th { font-weight: 600; }
.movimiento-tabla tr.final th, .movimiento-tabla tr.final td { border-top: 2px solid var(--marino); border-bottom: 0; }
.movimiento-tabla tr.final td.numero strong { font-family: var(--titulos); font-size: 1.375rem; font-weight: 600; }
.movimiento-tabla tr.final svg { border-radius: 4px; overflow: hidden; }
.movimiento-tabla tr.final .vigente { fill: var(--marino); }
.movimiento-tabla tr.final .vencida { fill: var(--rojo-barra); }
.movimiento-tabla tr.final small { display: block; margin-top: .3rem; color: var(--pizarra); font-size: .8125rem; }
@media (max-width: 700px) {
  .movimiento-tabla td.barra { display: none; }
  .movimiento { padding: 1rem; }
}

/* Terceros: cuánta cartera tiene cada uno (concentración) */
.etiqueta-pagador { background: #dfe7f0; border-color: #c6d3e1; }
.etiqueta-inversionista { background: var(--menta-suave); border-color: #bfe8c9; }
table.tabla-terceros td { vertical-align: middle; }
table.tabla-terceros td.roles { white-space: nowrap; }
table.tabla-terceros th.cartera, table.tabla-terceros td.cartera { width: 28%; min-width: 11rem; }
.concentracion { display: grid; gap: .2rem; }
.concentracion b { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.concentracion svg { width: 100%; height: .5rem; border-radius: 4px; overflow: hidden; }
.concentracion .fondo { fill: var(--niebla); }
.concentracion .cliente { fill: var(--marino); }
.concentracion .pagador { fill: #6f8aa6; }
.concentracion small { color: var(--pizarra); font-size: .75rem; }
@media (max-width: 1200px) { table.tabla-terceros .ciudad { display: none; } }
tr.inactivo td { color: var(--pizarra); }

.exposicion {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2.5rem; margin: 0 0 1rem;
  padding: 1.25rem 1.5rem; border-radius: 14px; background: var(--marino); color: var(--blanco);
}
.exposicion-total span { display: block; color: #c9d3dc; font-size: .875rem; }
.exposicion-total strong { display: block; font-family: var(--titulos); font-weight: 600; font-size: 2rem; letter-spacing: -.01em; color: var(--menta); font-variant-numeric: tabular-nums; }
.exposicion-total small { color: #c9d3dc; }
.exposicion-partes { display: flex; gap: 2rem; margin: 0; }
.exposicion-partes dt { color: #c9d3dc; font-size: .8125rem; }
.exposicion-partes dd { margin: .1rem 0 0; font-family: var(--titulos); font-weight: 600; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
details.agregar-cuenta { margin-top: 1rem; }
details.agregar-cuenta summary { cursor: pointer; font-family: var(--titulos); font-weight: 600; font-size: 1.0625rem; }
details.agregar-cuenta[open] summary { margin-bottom: .75rem; }
.dias-vencida { color: var(--rojo); font-weight: 500; }
table.tabla-compacta td.fecha { white-space: nowrap; }

/* Pasivos, pantalla principal: la deuda de hoy y el cierre del mes en cuatro pasos en orden.
   Las marcas de cada cuenta repiten los números de los pasos. */
.deuda-hoy { margin: -.25rem 0 1rem; }
.deuda-hoy p { margin: 0; }
.deuda-hoy span { display: block; font-size: .875rem; color: var(--pizarra); }
.deuda-hoy b { font-family: var(--titulos); font-size: 2.25rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.deuda-hoy .nota { margin-top: .15rem; }
.cierre-mes { padding: 1.1rem 1.25rem 1.25rem; margin-bottom: 1rem; }
.cierre-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cierre-cabeza h2 { margin: 0; font-size: 1.125rem; }
.cierre-cabeza h2::first-letter { text-transform: uppercase; }
.meses-nav { display: flex; gap: 1rem; font-size: .875rem; }
.meses-nav a { color: var(--pizarra); text-decoration: none; }
.meses-nav a:hover, .meses-nav a:focus-visible { color: var(--marino); text-decoration: underline; }
.pasos-cierre { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; counter-reset: none; }
.pasos-cierre li {
  position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: .6rem; row-gap: .1rem;
  grid-template-areas: "n nombre" "n cifra" ". pista" ". enlace";
}
/* La raya entre un paso y el siguiente: es una secuencia */
.pasos-cierre li:not(:last-child)::after {
  content: ""; position: absolute; top: .875rem; left: 2.15rem; right: -1.1rem; height: 0;
  border-top: 1px dashed var(--linea); z-index: 0;
}
.numero-paso {
  grid-area: n; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--marino); background: var(--blanco); font-weight: 700; font-size: .8125rem;
  position: relative; z-index: 1;
}
.pasos-cierre li.completo .numero-paso { background: var(--menta); border-color: var(--menta); }
.pasos-cierre li.sin-pasos .numero-paso { border-style: dashed; border-color: var(--pizarra); color: var(--pizarra); }
.nombre-paso { grid-area: nombre; font-size: .8125rem; color: var(--pizarra); position: relative; z-index: 1; background: var(--blanco); justify-self: start; padding-right: .4rem; }
.pasos-cierre b { grid-area: cifra; font-family: var(--titulos); font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pasos-cierre .pista { grid-area: pista; margin-top: .3rem; background: var(--niebla); }
.pasos-cierre .avance { fill: var(--marino); }
.pasos-cierre li.completo .avance { fill: #2e9e5b; }
.pasos-cierre small { grid-area: enlace; font-size: .75rem; color: var(--pizarra); margin-top: .3rem; }
.pasos-cierre li.elegido b { text-decoration: underline; text-decoration-color: var(--menta); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.filtro-activo { background: var(--menta-suave); border-radius: 10px; padding: .55rem .9rem; font-size: .875rem; margin: 0 0 .75rem; }
.tabla-pasivos td small, .tabla-pasivos th small { display: block; color: var(--pizarra); font-size: .75rem; font-weight: 400; }
.tabla-pasivos tbody.grupo-cuentas { border-top: 1px solid var(--linea); }
.tabla-pasivos tr.fila-inversionista > * { background: var(--niebla); }
.tabla-pasivos tr.fila-inversionista th { text-align: left; font-weight: 400; }
.tabla-pasivos tr.fila-inversionista td { font-weight: 600; }
.tabla-pasivos td.subcuenta-fila { padding-left: 1.6rem; position: relative; }
.tabla-pasivos td.subcuenta-fila::before { content: ""; position: absolute; left: .75rem; top: 0; bottom: 50%; width: .5rem; border-left: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.tabla-pasivos abbr { text-decoration: none; cursor: help; }
.marcas { display: inline-flex; gap: .3rem; }
.marca {
  width: 1.35rem; height: 1.35rem; border-radius: 5px; display: inline-grid; place-items: center;
  font-size: .6875rem; font-weight: 700; text-decoration: none; line-height: 1;
}
.marca-hecho { background: var(--menta); color: var(--marino); }
.marca-pendiente { border: 1.5px solid var(--marino); color: var(--marino); background: var(--blanco); }
.marca-no-aplica { border: 1px dashed var(--linea); color: #a3afbb; }
a.marca:hover { box-shadow: 0 0 0 2px var(--menta-suave); }
a.marca:focus-visible { outline: 2px solid var(--marino); outline-offset: 2px; }
.vacio-pasivos { max-width: 38rem; }
.vacio-pasivos h2 { margin-top: 0; }
@media (max-width: 900px) {
  .pasos-cierre { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 1.25rem; }
  .pasos-cierre li::after { display: none; }
  .deuda-hoy b { font-size: 1.875rem; }
}

/* Pasivos: cada mes de una cuenta, plegable, con sus tramos */
h1 .subcuenta { font-size: 1rem; font-weight: 600; color: var(--pizarra); margin-left: .35rem; }
details.mes-pasivo { border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: .75rem; background: var(--blanco); }
details.mes-pasivo > summary {
  display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; cursor: pointer; list-style: none;
}
details.mes-pasivo > summary::-webkit-details-marker { display: none; }
details.mes-pasivo > summary::before { content: "▸"; color: var(--pizarra); transition: transform .15s; }
details.mes-pasivo[open] > summary::before { transform: rotate(90deg); }
details.mes-pasivo[open] > summary { border-bottom: 1px solid var(--linea); }
.mes-nombre { font-family: var(--titulos); font-weight: 600; font-size: 1.0625rem; min-width: 9rem; }
.mes-saldo { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.mes-saldo small { font-weight: 400; color: var(--pizarra); margin-right: .35rem; }
details.mes-pasivo .tabla-envoltura { margin: 0; border: 0; }
table.tramos td small { display: block; color: var(--pizarra); font-size: .75rem; }
table.tramos td.fecha { white-space: nowrap; }
td.acciones-fila > * { display: block; }
td.acciones-fila form { margin-top: .2rem; }
button.enlace-peligro { width: auto; margin: 0; background: none; border: 0; padding: 0; color: var(--rojo); font: inherit; font-weight: 400; text-decoration: underline; cursor: pointer; }
button.enlace-peligro:hover { background: none; color: #8f1c13; }
.mes-pie { padding: .5rem 1rem 1rem; }
.mes-pie .nota { margin: .25rem 0; }
form.validar-mes { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
form.validar-mes button { width: auto; margin-top: 0; }
@media (prefers-reduced-motion: reduce) { details.mes-pasivo > summary::before { transition: none; } }
.mes-pie .descargas { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; align-items: baseline; margin: .25rem 0 .5rem; }

/* Pasivos, pantalla de una cuenta: lo que se le debe hoy y la historia de su saldo en la banda
   marina (lo único llamativo); el cierre del mes, los datos y los meses van sobrios debajo. */
.cuentas-inversionista { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.25rem 0 1rem; }
.cuentas-inversionista a {
  display: grid; min-width: 11rem; padding: .55rem .85rem; border: 1px solid var(--linea); border-radius: 10px;
  background: var(--blanco); color: var(--marino); text-decoration: none; line-height: 1.3;
}
.cuentas-inversionista a.adicional { border-style: dashed; }
.cuentas-inversionista a:hover { border-color: var(--pizarra); }
.cuentas-inversionista span { font-size: .8125rem; font-weight: 600; }
.cuentas-inversionista b { font-family: var(--titulos); font-weight: 600; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.cuentas-inversionista small { font-size: .75rem; color: var(--pizarra); }
.cuentas-inversionista a[aria-current="page"] { background: var(--marino); border-color: var(--marino); color: var(--blanco); }
.cuentas-inversionista a[aria-current="page"] b { color: var(--menta); }
.cuentas-inversionista a[aria-current="page"] small { color: #c9d3dc; }
@media (max-width: 700px) {
  .cuentas-inversionista { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }
  .cuentas-inversionista a { flex: 0 0 auto; min-width: 9.5rem; }
}

.ficha-saldo {
  display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: end;
  margin: 0 0 1rem; padding: 1.4rem 1.6rem 1.1rem; border-radius: 14px; background: var(--marino); color: var(--blanco);
}
.ficha-hoy { margin: 0 0 1.1rem; }
.ficha-hoy span { display: block; color: #c9d3dc; font-size: .875rem; }
.ficha-hoy strong {
  display: block; margin: .1rem 0 .2rem; font-family: var(--titulos); font-weight: 600; font-size: 2.375rem;
  line-height: 1.1; letter-spacing: -.015em; color: var(--menta); font-variant-numeric: tabular-nums;
}
.ficha-hoy small { display: block; color: #c9d3dc; font-size: .8125rem; }
.ficha-anio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.25rem; margin: 0; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.ficha-anio dt { color: #c9d3dc; font-size: .75rem; }
.ficha-anio dd { margin: .05rem 0 0; font-family: var(--titulos); font-weight: 600; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.ficha-grafico { margin: 0; min-width: 0; }
.ficha-grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.ficha-grafico figcaption { margin-top: .35rem; color: #c9d3dc; font-size: .75rem; }
.saldo-area { fill: var(--menta); fill-opacity: .07; }
.saldo-base { stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.saldo-linea { fill: none; stroke: var(--menta); stroke-width: 2.25; stroke-linejoin: round; }
.saldo-columna { fill: transparent; }
.saldo-mes:hover .saldo-columna, .saldo-mes:focus-visible .saldo-columna { fill: rgba(255, 255, 255, .07); }
.saldo-mes:focus-visible { outline: none; }
.saldo-mes:focus-visible .saldo-punto { stroke-width: 3; }
.saldo-punto { fill: var(--marino); stroke: var(--menta); stroke-width: 1.75; }
.saldo-punto.ultimo { fill: var(--menta); stroke: var(--marino); stroke-width: 2; }
.saldo-rotulo { fill: #c9d3dc; font-size: 13px; font-family: var(--texto); text-anchor: middle; }
@media (max-width: 900px) {
  .ficha-saldo { grid-template-columns: minmax(0, 1fr); padding: 1.1rem 1.1rem .9rem; }
  .ficha-hoy strong { font-size: 2rem; }
}

.ficha-medio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.ficha-medio > .tarjeta { padding: 1.1rem 1.25rem; }
.ficha-medio h2 { margin: 0 0 .75rem; font-size: 1.0625rem; }
.ficha-pasos { list-style: none; margin: 0; padding: 0; }
.ficha-pasos li { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .4rem 0; border-bottom: 1px solid var(--linea); }
.ficha-pasos li:last-child { border-bottom: 0; }
.ficha-pasos small { font-size: .75rem; color: var(--pizarra); }
.ficha-pasos li.paso-pendiente small { color: var(--marino); font-weight: 600; }
.ficha-pasos li.paso-no-aplica > span:not(.marca) { color: var(--pizarra); }
/* Pie de cada mes: los mismos pasos, con el resultado o el botón que lo hace a la derecha */
.pasos-mes { max-width: 46rem; margin: .25rem 0 .5rem; }
.pasos-mes li { min-height: 2.6rem; }
.pasos-mes .paso-nombre { font-weight: 600; color: var(--marino); }
.pasos-mes li.paso-espera > span:not(.marca), .pasos-mes li.paso-no-aplica .paso-nombre { color: var(--pizarra); font-weight: 400; }
.pasos-mes .paso-resultado { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .35rem .75rem; text-align: right; }
.pasos-mes .paso-resultado form { margin: 0; }
.pasos-mes .paso-resultado small { font-size: .8125rem; }
.pasos-mes li.paso-pendiente .paso-resultado small { font-weight: 400; color: var(--pizarra); }
.pasos-mes .paso-resultado .texto-error { color: var(--rojo); font-weight: 600; }
.mes-pie .descargas .apagado { margin-right: -.5rem; }
@media (max-width: 560px) {
  .pasos-mes li { grid-template-columns: 1.35rem minmax(0, 1fr); }
  .pasos-mes .paso-resultado { grid-column: 2; justify-content: flex-start; text-align: left; }
}
.ficha-cierre .nota { margin: .6rem 0 0; font-size: .8125rem; }
.ficha-datos dl { margin: 0; display: grid; gap: .55rem; }
.ficha-datos dl > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .75rem; }
.ficha-datos dt { color: var(--pizarra); font-size: .8125rem; }
.ficha-datos dd { margin: 0; font-size: .875rem; overflow-wrap: anywhere; }
.ficha-datos .falta { color: var(--rojo); }
.tabla-pasivos .falta { color: var(--rojo); }
.ficha-datos .renovar { margin-top: .35rem; }
.ficha-datos .renovar summary { cursor: pointer; color: var(--marino); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.ficha-datos .renovar form { margin-top: .5rem; padding: .75rem; background: var(--niebla); border-radius: 10px; }
.ficha-datos .renovar .nota { margin: .25rem 0 .5rem; font-size: .8125rem; }
.ficha-titulo-meses { margin: 0 0 .6rem; font-size: 1.125rem; }
.mes-cifras { display: flex; gap: 1.25rem; margin-left: auto; font-variant-numeric: tabular-nums; font-size: .875rem; }
.mes-cifras small { color: var(--pizarra); margin-right: .25rem; }
.mes-cifras .mes-adicion { color: var(--verde); }
details.mes-pasivo .mes-cifras + .mes-saldo { margin-left: 1.5rem; }
.certificados-cuenta { margin-top: 1.5rem; }
@media (max-width: 900px) {
  .ficha-medio { grid-template-columns: minmax(0, 1fr); }
  .ficha-datos dl > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .mes-cifras { display: none; }
  details.mes-pasivo .mes-cifras + .mes-saldo { margin-left: auto; }
}
table.consolidado tr.grupo th { background: var(--blanco); padding-top: 1rem; font-family: var(--titulos); font-size: .9375rem; border-bottom: 2px solid var(--marino); }
table.consolidado tr.grupo small { font-family: var(--texto); font-weight: 400; color: var(--pizarra); margin-left: .35rem; }
table.consolidado tr.subtotal th, table.consolidado tr.subtotal td { font-weight: 700; background: var(--niebla, #f4f6f8); }
/* Vista previa del correo del estado de cuenta */
.correo-previo { padding: 1.25rem 1.5rem; margin: 1rem 0; }
.datos-correo { display: grid; gap: .35rem; margin: 0 0 1rem; }
.datos-correo div { display: grid; grid-template-columns: 6rem 1fr; gap: .75rem; }
.datos-correo dt { color: var(--pizarra); }
.datos-correo dd { margin: 0; overflow-wrap: anywhere; }
pre.cuerpo-correo { margin: 0; padding: 1rem; background: var(--niebla); border-radius: 8px; font-family: var(--texto); font-size: .9375rem; white-space: pre-wrap; }
/* Tesorería de pasivos: giros del mes */
table.giros td small { display: block; color: var(--pizarra); font-size: .75rem; }
table.giros td small.pendiente-texto { color: var(--rojo); }
table.giros td input[type="text"] { width: 7.5rem; text-align: right; }
table.giros td input[type="date"] { width: 9.5rem; }
table.giros input[type="checkbox"] { width: auto; min-width: 0; margin: 0 .25rem 0 0; vertical-align: middle; }
table.giros thead th:first-child, table.giros td.pagar { width: 3rem; text-align: center; }
table.giros label.gmf { display: block; margin-top: .25rem; font-size: .75rem; color: var(--pizarra); white-space: nowrap; }
table.giros tr.cerrado td { color: var(--pizarra); }
.acciones-giro { display: flex; justify-content: flex-end; margin-top: 1rem; }
.acciones-giro .campo { margin: 0; }
.acciones-giro button { width: auto; margin-top: 0; }
.descargas-tesoreria { margin-top: 1.5rem; padding: 1.25rem 1.5rem; }
.descargas-tesoreria .filtros button { width: auto; margin-top: 0; }
.certificados-cuenta { padding: 1rem 1.5rem; margin-bottom: 1.25rem; }
.certificados-cuenta h2 { margin: 0 0 .75rem; }
.certificados-cuenta .filtros { margin-bottom: .6rem; }
.certificados-cuenta .filtros label { min-width: 15rem; }
.certificados-cuenta .filtros select, .certificados-cuenta .filtros input[type="date"] { min-width: 9rem; }
.certificados-cuenta .filtros button { width: auto; margin-top: 0; }
.certificados-cuenta .nota { margin: .25rem 0 0; }
/* Pagos: pestaña de saldos a favor y su devolución */
.pestanas .contador { display: inline-block; min-width: 1.35rem; margin-left: .3rem; padding: 0 .4rem; border-radius: 999px; background: var(--menta); color: var(--marino); font-size: .75rem; font-weight: 700; text-align: center; }
table.saldos-a-favor td small { display: block; color: var(--pizarra); font-size: .75rem; }
table.saldos-a-favor .boton-secundario { white-space: nowrap; }
form.en-linea { display: inline; margin: 0 0 0 .5rem; }
button.enlace { width: auto; margin: 0; padding: 0; border: 0; background: none; color: var(--marino); font: inherit; text-decoration: underline; cursor: pointer; }
button.enlace:hover { background: none; text-decoration-thickness: 2px; }
.devolucion { max-width: 52rem; }
.devolucion-valor { margin: 0 0 1rem; }
.devolucion-valor span { display: block; color: var(--pizarra); font-size: .875rem; }
.devolucion-valor strong { font-family: var(--titulos); font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.devolucion h2 { font-size: 1.0625rem; margin: 0 0 .5rem; }
.devolucion form button { width: auto; }

/* La «i» de información: de dónde sale una cifra y a qué corte. Solo se ve al señalarla con el
   mouse, al llegar con el teclado o al tocarla en el celular. */
.titulo-info { display: flex; align-items: baseline; gap: .4rem; }
.titulo-info > :first-child { min-width: 0; }
.info { position: relative; display: inline-flex; flex: none; align-self: center; }
.titulo-info h2 + .info, .titulo-info h3 + .info { align-self: flex-start; margin-top: .2rem; }
.info-boton {
  display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin: 0; padding: 0;
  border: 1.5px solid currentColor; border-radius: 50%; background: transparent; color: var(--pizarra);
  font: italic 700 .6875rem/1 var(--titulos); cursor: help;
}
.info-boton:hover, .info.abierta .info-boton { background: var(--marino); border-color: var(--marino); color: var(--blanco); }
.para-hacer .info-boton { color: #c9d3dc; }
.para-hacer .info-boton:hover, .para-hacer .info.abierta .info-boton { background: var(--menta); border-color: var(--menta); color: var(--marino); }
.info-texto {
  position: absolute; z-index: 30; top: calc(100% + .55rem); left: -.55rem;
  width: min(20rem, calc(100vw - 1.5rem)); padding: .7rem .85rem;
  display: grid; gap: .45rem;
  background: var(--marino); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(31, 42, 55, .22);
  text-align: left; white-space: normal; letter-spacing: 0;
  transform: translateX(var(--corre, 0px));
  visibility: hidden; opacity: 0; transition: opacity .12s ease, visibility .12s;
}
/* La flecha apunta a la «i» aunque la ficha se corra para no salirse de la pantalla */
.info-texto::before {
  content: ""; position: absolute; top: -.3rem; left: calc(.85rem - var(--corre, 0px));
  width: .6rem; height: .6rem; background: inherit; transform: rotate(45deg); border-radius: 2px;
}
.para-hacer .info-texto { outline: 1px solid rgba(255, 255, 255, .22); }
/* Dentro de una tarjeta de cifra no hereda el tamaño ni el color de la cifra */
.info > .info-texto { font: 400 .8125rem/1.45 var(--texto); color: var(--blanco); }
.info-texto b, .info-texto span { display: block; margin: 0; font: inherit; color: inherit; }
.info-texto .info-fila { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .6rem; }
.info-texto .info-fila b { color: var(--menta); font-weight: 600; }
.info-fila + .info-fila { padding-top: .45rem; border-top: 1px solid var(--marino-claro); }
@media (hover: hover) {
  .info:not(.cerrada):hover .info-texto { visibility: visible; opacity: 1; }
}
.info:not(.cerrada):has(:focus-visible) .info-texto, .info.abierta .info-texto { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .info-texto { transition: none; } }

/* Cargar operaciones al corte */
.carga-al-corte { max-width: 44rem; }
.carga-al-corte h2 { font-size: 1.0625rem; margin: 0 0 .5rem; }
.carga-al-corte form button { width: auto; }
.revision-carga { margin-top: 1.5rem; }
.revision-carga .aviso ul, .revision-carga .pendiente ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.revision-carga .pendiente { margin-bottom: 1rem; }
.revision-carga form button { width: auto; }