/* Las piezas que usa mas de una pantalla: la barra, el pie, los botones, el campo y el cartel.
   Los valores son los del diseño; lo unico que cambia es que salen de tokens.css en vez de
   estar escritos adentro de cada pantalla. */

/* ---------- El marco ---------- */
.app {
  min-height: 100vh;
  /* En el telefono, el alto que queda de verdad: 100vh cuenta la barra del navegador como
     si no estuviera y deja el pie abajo del borde. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
}

/* OJO: sin esto el contenido toma su alto natural, el pie queda flotando a media pantalla y
   abajo queda un blanco enorme. El marco ya ocupa toda la ventana; lo que faltaba era que
   el medio se estirara para empujar el pie contra el fondo. */
/* El contenido crece hasta el pie, y ADENTRO tambien: sin la segunda linea el hijo mide lo que
   mide su contenido, y el fondo de la pantalla -su color, su patron- termina a media altura con
   el blanco de la app abajo. Se resuelve aca una vez y vale para todas: ninguna pantalla tiene
   que acordarse de estirar su propio fondo.
   Va con `1 0 auto`: crece si sobra lugar, pero no se achica si el contenido es mas alto. */
#contenido { flex: 1 1 auto; display: flex; flex-direction: column; }
#contenido > * { flex: 1 0 auto; }

/* ---------- Barra superior ---------- */
.barra {
  height: var(--franja);
  background: var(--barra);
  color: var(--sobre-barra);
  display: flex;
  align-items: center;
  /* El fondo va de punta a punta y el contenido queda centrado en el ancho del diseño. */
  padding-inline: max(32px, calc((100% - var(--ancho-max)) / 2));
  gap: var(--aire-10);
  flex: 0 0 auto;
}
.barra-marca { display: flex; align-items: center; gap: var(--aire-6); flex: 0 1 auto; min-width: 0; color: var(--sobre-barra); }
.barra-marca:hover { color: var(--sobre-barra); }
.barra-marca img { width: var(--logo-barra); height: var(--logo-barra); display: block; flex: 0 0 auto; }
.barra-marca-txt { display: block; min-width: 0; line-height: var(--alto-titulo); }
.barra-portal    { display: block; font-family: var(--tipo-titulo); font-weight: var(--peso-fuerte); font-size: var(--barra-titulo); }
.barra-municipio { display: block; font-size: var(--barra-muni); color: var(--barra-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El nombre del municipio va entero, siempre: Maxi lo pidio asi. Si el ancho aprieta se recorta con
   puntos antes que desbordar y hacer que Android achique la pagina. El corto ya no se usa. */
.marca-corto { display: none; }
.barra-acciones  { display: flex; align-items: center; gap: var(--aire-5); flex: 0 0 auto; margin-left: auto; }

/* Las iniciales y el nombre del que ya entro. Viven adentro del menu del usuario. */
/* Sale del token, como la publica. Tenia 68 escrito a mano y por eso las dos barras del
   sitio no median lo mismo entre si. */
.barra-privada { height: var(--franja); }
.barra-iniciales {
  width: var(--pastilla-iniciales); height: var(--pastilla-iniciales); border-radius: 50%; background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  font-family: var(--tipo-titulo); font-weight: var(--peso-fuerte); font-size: var(--tam-rotulo);
}
.barra-nombre { font-size: var(--tam-dato); font-weight: var(--peso-medio); }

/* ---------- Puente: lo que se ve al entrar hasta que exista Mis cuentas ---------- */
.puente {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--aire-14) var(--aire-10);
  background: var(--fondo-claro) url('/img/nodos-claro.png') center/cover no-repeat;
}
.puente-caja {
  background: var(--papel); border: 1px solid var(--linea-tarjeta); border-radius: var(--r-caja);
  padding: var(--aire-12) var(--aire-12); max-width: 520px; text-align: center;
}
.puente-icono { font-size: var(--ico-anillo); color: var(--ok); }
.puente-titulo {
  font-family: var(--tipo-titulo); font-weight: var(--peso-titulo); font-size: var(--tam-pantalla); color: var(--tinta);
  letter-spacing: -.015em; margin-top: var(--aire-7);
}
.puente-texto { font-size: var(--tam-base); color: var(--tinta-media); line-height: var(--alto-texto); margin-top: var(--aire-5); }
.puente-acciones { display: flex; gap: var(--aire-6); justify-content: center; margin-top: var(--aire-10); flex-wrap: wrap; }

/* ---------- Botones ---------- */
/* La forma de todos los botones: la caja, el radio, como se acomoda el glifo y como funde el
   color. Lo propio de cada uno -relleno, colores- va abajo.
   OJO: un boton nuevo hay que agregarlo aca. Si no, queda en display:block y sin radio, o sea
   cuadrado y con el glifo pegado al texto. Paso dos veces el mismo dia. */
.btn-primario, .btn-ok, .btn-linea, .btn-claro, .btn-linea-claro {
  font-family: var(--tipo-ui);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aire-4);
  border-radius: var(--r-boton);
  text-decoration: none;
  /* El cambio de color se funde. Sin esto salta de golpe, que es lo unico del portal que se
     movia sin transicion. */
  transition: background var(--t-rapida) ease, color var(--t-rapida) ease,
              border-color var(--t-rapida) ease;
}
.btn-primario {
  background: var(--petroleo); color: var(--sobre-barra); border: none;
  padding: var(--aire-7) var(--aire-10); font-weight: var(--peso-fuerte); font-size: var(--tam-base);
}
.btn-primario:hover { background: var(--petroleo-osc); color: var(--sobre-barra); }

.btn-linea {
  background: var(--papel); color: var(--petroleo); border: 1.5px solid var(--petroleo);
  padding: var(--aire-7) var(--aire-10); font-weight: var(--peso-fuerte); font-size: var(--tam-base);
}
/* Al pasar el mouse se INVIERTE: fondo petroleo y letra blanca. Antes ponia el mismo color que
   ya tenia, o sea que no cambiaba nada y no habia que animar. */
.btn-linea:hover {
  background: var(--petroleo); color: var(--sobre-barra); border-color: var(--petroleo);
}
.btn-linea:hover .msym { color: var(--sobre-barra); }
/* Ocupa todo el ancho: el boton de enviar de un formulario. */
.btn-bloque { width: 100%; padding: var(--aire-7); font-size: var(--tam-base); }
.btn-bloque-chico { width: 100%; padding: var(--aire-6); font-size: var(--tam-base); }
/* El glifo del boton no hereda: si hereda, sigue al texto y queda en 14. Va en la escala de
   iconos, que es la que le corresponde. Medido en la maqueta: 20. */
.btn-primario .msym, .btn-linea .msym,
.btn-bloque .msym, .btn-bloque-chico .msym { font-size: var(--ico-base); }

/* Los de la barra, sobre el degradado */
.btn-claro {
  background: var(--papel); color: var(--petroleo); border: none;
  padding: var(--aire-5) var(--aire-9); font-size: var(--tam-dato); font-weight: var(--peso-fuerte); gap: var(--aire-3);
}
.btn-claro:hover { color: var(--petroleo); }
.btn-claro .msym { font-size: var(--ico-chico); }
.btn-linea-claro {
  background: transparent; color: var(--sobre-barra); border: 1.5px solid var(--barra-borde);
  padding: var(--aire-5) var(--aire-8); font-size: var(--tam-dato); font-weight: var(--peso-medio);
}
.btn-linea-claro:hover { color: var(--sobre-barra); }

/* Volver: el enlace con la flecha, arriba de un formulario */
.volver {
  display: inline-flex; align-items: center; gap: var(--aire-3);
  color: var(--tinta-suave); font-size: var(--tam-dato); font-weight: var(--peso-medio);
  cursor: pointer; margin-bottom: var(--aire-8);
  background: none; border: none; padding: 0; font-family: var(--tipo-ui);
}
.volver .msym { font-size: var(--tam-tarjeta); }

/* ---------- Campo de formulario ---------- */
.fld {
  display: flex; align-items: center; gap: var(--ico-gap);
  /* 2px enteros y no 1.5: un borde fraccionario no cae parejo en la grilla de pixeles y cada
     lado antialiasa distinto. Y como no cambia de grosor al marcarse, el campo no crece ni
     empuja a los de abajo. */
  border: 2px solid var(--linea-campo); border-radius: var(--r-campo);
  /* Sin relleno a la derecha: se lo lleva el input, para que su caja llegue al borde y ahi el
     clic entre al campo. Lo reponen el ojo y el mensaje, que son los que cierran cuando estan. */
  /* El fondo va en una variable porque el input tiene que pintarse del mismo color: el
     navegador le pinta el autocompletado a EL, no al recuadro. */
  padding: var(--campo-pad-y) 0 var(--campo-pad-y) var(--campo-pad-x);
  --fondo-campo: var(--papel); background: var(--fondo-campo);
  transition: border-color var(--t-campo) ease, box-shadow var(--t-campo) ease;
}
.fld { position: relative; }
.fld:focus-within { border-color: var(--foco); box-shadow: 0 0 0 3px var(--foco-halo); }
.fld input {
  flex: 1 1 118px; min-width: 80px;
  border: none; outline: none; background: transparent;
  font-family: var(--tipo-ui); font-size: var(--tam-base); color: var(--tinta-cuerpo);
  text-overflow: ellipsis;
  /* El desplegable del navegador se pega a la caja del input, no al recuadro, y arrancaba
     adentro del campo. Los margenes negativos llevan la caja hasta el borde; el relleno deja el
     texto donde estaba. */
  --corrimiento: calc(var(--ico-ancho) + var(--ico-gap) + var(--campo-pad-x));
  margin: calc(-1 * var(--campo-pad-y)) 0 calc(-1 * var(--campo-pad-y)) calc(-1 * var(--corrimiento));
  padding: var(--campo-pad-y) var(--ojo-espacio, var(--campo-pad-x)) var(--campo-pad-y) var(--corrimiento);
  align-self: stretch;   /* que ocupe el alto entero y no quede centrado a media altura */
  /* El radio del recuadro menos el borde: la caja del input va contra el borde interno.
     Sin esto el fondo del autocompletado sale cuadrado y asoma en los vertices. */
  border-radius: calc(var(--r-campo) - 2px);
}
/* La etiqueta de cada campo ES el placeholder: el label de verdad esta oculto, para lectores de
   pantalla. Asi que este color es texto que se lee, no una marca de agua, y tiene que llegar al
   minimo de la norma. Con --tinta-apagada daba 2.58 sobre 4.5. */
.fld input::placeholder { color: var(--tinta-tenue); }
/* Un select o un textarea NO heredan la fuente: la toman del navegador, y ahi aparece una letra
   que no es la del portal. Es el unico lugar donde hay que decirlo dos veces. */
.fld select, .fld textarea, select.fld, textarea.fld, input.fld {
  font-family: var(--tipo-ui); font-size: var(--tam-base); color: var(--tinta-cuerpo);
}

/* Safari en iPhone hace zoom solo al enfocar un campo con letra menor a 16px: la pantalla pega un
   salto y despues hay que salir del zoom a dos dedos. Por eso el campo va con piso de 16, y de ahi
   para arriba sigue la escala como el resto -si no, con el zoom del celular el campo se quedaba
   mas chico que el texto de al lado-. Va por pointer y no por ancho: el problema es del dedo. */
@media (pointer: coarse) {
  .fld input, .fld select, .fld textarea { font-size: max(16px, var(--tam-base)); }
}
/* Firefox de Android parte la pantalla en densidad 4 y todo el texto baja con la banda de
   densidad; el campo se quedaba en 16 y ahi se veia un tercio mas grande que el resto. En esa
   banda no hay Safari, asi que el minimo de 16 no hace falta y el campo sigue la escala. */
@media (min-resolution: 3.5dppx) and (max-width: 420px) and (pointer: coarse) {
  .fld input, .fld select, .fld textarea { font-size: var(--tam-base); }
}

/* El autocompletado. El navegador lo pinta sobre la caja del input, y la del campo que se
   achica para dejarle lugar al mensaje termina donde termina el dato: quedaba un bloque
   amarillo adentro del recuadro, mas corto que el campo.
   Se lo pasamos al recuadro entero, y el input se pinta del mismo color que el recuadro tenga
   en ese momento: si el campo esta marcado, gana la marca. El transition larguisimo es para
   frenar el degradado con el que el navegador vuelve a su amarillo. */
.fld:has(input:-webkit-autofill):not([data-state="err"]):not([data-state="aviso"]) {
  --fondo-campo: var(--autofill);
}
.fld input:-webkit-autofill,
.fld input:-webkit-autofill:hover,
.fld input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--fondo-campo) inset;
  -webkit-text-fill-color: var(--tinta-cuerpo);
  transition: background-color 5000s ease-in-out 0s;
}
/* Cursor de texto en todo el recuadro, no solo donde llega el input. */
.fld { cursor: text; }
/* El position lo levanta por encima del input, que le pasa por arriba con el margen negativo.
   Sin esto el fondo del autocompletado tapa el icono y el texto queda corrido sin nada al lado. */
.fld .ico { font-size: var(--ico-ancho); color: var(--tinta-tenue); flex: 0 0 auto; position: relative; }
.fld .ico-ok { display: none; }
/* El estado lo pone el servidor o el JS; sin estado, el campo se ve neutro.
   Marcado va sin relleno: el campo queda blanco y avisan el borde rojo y su propio icono,
   tambien rojo. El icono NO se reemplaza, asi el sobre sigue siendo el sobre mientras el campo
   esta marcado. El tilde verde si reemplaza, que ahi no hay nada que buscar. */
.fld[data-state="ok"]  { border-color: var(--ok-linea); }
.fld[data-state="ok"]  .ico-base { display: none; }
.fld[data-state="ok"]  .ico-ok   { display: inline; color: var(--ok); }
/* Lo que distingue a los dos marcados es el mensaje, no el color: el dato que esta mal lo
   dice adentro del campo, y al que falta lo nombra la leyenda de arriba. */
.fld[data-state="err"],
.fld[data-state="aviso"] { border-color: var(--error-campo); }
.fld[data-state="err"] .ico-base,
.fld[data-state="aviso"] .ico-base { color: var(--error-icono); }
/* El ojo sale del flujo. Si es un hermano mas, la caja del input se corta antes de llegar a el
   y ahi el fondo del autocompletado deja el hueco blanco. Lo que va adentro se frena solo, con
   --ojo-espacio, que solo existe en los campos que tienen ojo. */
.fld-ojo { --ojo-espacio: calc(var(--ico-ancho) + var(--ico-gap) + var(--campo-pad-x)); }
.fld .eye {
  position: absolute; right: var(--campo-pad-x); top: 50%; transform: translateY(-50%);
  font-size: var(--ico-base); color: var(--tinta-tenue); cursor: pointer; z-index: var(--z-campo);
}
.fld-ojo .inmsg[data-on="1"] { margin-right: var(--ojo-espacio); }
.row { margin-top: var(--aire-7); }
/* El campo se achica para dejarle lugar al mensaje, en vez de empujarlo abajo. Sin relleno a la
   derecha, que el mensaje va pegado al dato. */
.fld input.fit { flex: 0 1 auto; min-width: 60px; padding-right: 0; }

/* El mensaje de error va adentro del campo, al lado del valor, y se abre de costado. */
.inmsg {
  flex: 0 1 auto; min-width: 0; max-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: var(--tam-meta); line-height: var(--alto-compacto); color: var(--error);
  opacity: 0; margin-left: -3px;
  transition: max-width var(--t-mensaje) var(--curva-ui), opacity var(--t-rapida) ease;
}
.inmsg[data-on="1"] { max-width: 64%; opacity: 1; }
/* Cuando el mensaje es el ultimo, el relleno de la derecha lo pone el. Si hay ojo, lo pone el ojo. */
.inmsg[data-on="1"]:last-child { margin-right: var(--campo-pad-x); }
.inmsg[data-on="1"]::before { content: "- "; }

/* "Campo requerido" al lado del subtitulo, cuando quedo alguno vacio. */
.reqleg { opacity: 0; transition: opacity var(--t-rapida) ease; }
.reqleg[data-on="1"] { opacity: 1; }
.reqleg .msym { font-size: var(--tam-tarjeta); color: var(--error); vertical-align: -3px; }
.reqleg span { color: var(--error); }

/* ---------- Resumen de datos (el "Confirmá tus datos") ---------- */
.sumgrid { border: 1px solid var(--linea-tarjeta); border-radius: var(--r-boton); background: var(--papel); padding: var(--aire-3) var(--aire-8); }
.sum { display: flex; align-items: baseline; justify-content: space-between; gap: var(--aire-8); padding: var(--aire-5) 0; border-bottom: 1px solid var(--linea-suave); }
/* La ultima fila no lleva linea abajo, sea simple o de a dos. */
.sumgrid > :last-child { border-bottom: none; }
.sumpair { display: grid; grid-template-columns: minmax(0,60fr) minmax(0,40fr); column-gap: var(--aire-10); border-bottom: 1px solid var(--linea-suave); }
.sumpair > .sum { border-bottom: none; }
.sum .k   { font-size: var(--tam-dato); color: var(--tinta-tenue); flex: 0 0 auto; }
.sum .val { font-size: var(--tam-base); font-weight: var(--peso-fuerte); color: var(--tinta-cuerpo); text-align: right; word-break: break-word; }

/* ---------- Pantallas de resultado (¡Listo!, Revisá tu correo, enlace vencido) ---------- */
.ac-ring { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: var(--aire-3) auto 0; }
.ac-ring .msym { font-size: var(--ico-anillo); }
.ac-ring[data-tono="info"]   { background: var(--info-fondo);   color: var(--petroleo); }
.ac-ring[data-tono="bien"]   { background: var(--bien-fondo);   color: var(--ok); }
.ac-ring[data-tono="bien"] .msym { font-size: var(--ico-anillo); }
.ac-ring[data-tono="mal"]    { background: var(--error-fondo);  color: var(--error); }
.ac-ring[data-tono="neutro"] { background: var(--neutro-fondo); color: var(--neutro-icono); }
.ac-land { font-family: var(--tipo-titulo); font-weight: var(--peso-titulo); font-size: var(--tam-acceso-titulo); color: var(--tinta); letter-spacing: -.015em; margin-top: var(--aire-9); }

/* ---------- Aviso al pie de un formulario ---------- */
.aviso { display: flex; align-items: flex-start; gap: var(--aire-5); border-radius: var(--r-campo); padding: var(--aire-6) var(--aire-7); margin-top: var(--aire-8); }
.aviso .msym { flex: 0 0 auto; font-size: var(--ico-base); }
.aviso-texto { font-size: var(--tam-dato); line-height: var(--alto-texto); }
.aviso-info  { background: var(--info-fondo); border: 1px solid var(--info-linea); }
.aviso-info .msym, .aviso-info .aviso-texto { color: var(--petroleo); }
.aviso-info .aviso-texto { color: var(--info-texto); }
.aviso-gris  { background: var(--fondo-suave); border: 1px solid var(--linea-pie); }
.aviso-gris .msym { color: var(--tinta-tenue); }
.aviso-gris .aviso-texto { color: var(--tinta-media); }
/* Dos seguidos son el mismo aviso partido en dos: van mas juntos que lo de arriba. */
.aviso + .aviso { margin-top: var(--aire-4); }
/* El reloj del "vence en": el aviso es gris pero el reloj llama la atencion. */
.aviso .msym.reloj { color: var(--ambar); }

/* Lo que solo tiene sentido con JavaScript (los pasos del alta). Sin JS se ve todo junto
   y el formulario se envia igual. */
.no-js .solo-js { display: none !important; }

/* ---------- Lo que se abre y se cierra en su lugar ---------- */
/* Uno solo para todo el sitio: el cartel de aviso, el campo que aparece, lo que venga.

   El alto va de 0fr a 1fr, que es la unica forma de animarlo sin saber cuanto mide.
   display:none no transiciona, asi que nada se esconde con eso.
   Adentro va un solo hijo, que es lo que el grid achica, y el aire de arriba va en su relleno,
   que como margen del bloque dejaria un hueco con la caja cerrada. Ojo que el relleno tampoco
   se achica solo con la fila: cerrada hay que ponerlo en cero a mano.
   El recorte es lo que hace posible el plegado y ademas se come el halo del campo enfocado,
   asi que se suelta al terminar de abrirse. Esa parte la hace campo.js. */
.plegable {
  --plegable-aire: 0px;
  display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden;
  transition: grid-template-rows var(--t-media) var(--curva-ui), opacity var(--t-rapida) ease;
}
/* El min-width va con el min-height y no es de adorno: el hijo de un grid arranca en
   min-width auto, o sea que NO baja de su ancho minimo de contenido. Si adentro hay una fila que
   no envuelve, ese minimo se le impone al grid, el grid al contenedor y termina desbordando la
   pantalla: medido el 24-08 en Mis cuentas a 390, la pagina daba 419 de ancho hiciera lo que
   hiciera el viewport, y Android achicaba el sitio entero para que entrara. */
.plegable > * {
  min-height: 0; min-width: 0; padding-top: var(--plegable-aire);
  transition: padding-top var(--t-media) var(--curva-ui);
}
/* Cerrada, sin aire. El relleno de un item de grilla no entra en el 0fr, asi que sin esto la
   caja apagada ocupa sus px y ahi no se dibuja nada. Va con html.js porque sin JavaScript
   nadie la abre y la que tiene que verse se muestra sola, unas lineas mas abajo. */
html.js .plegable:not([data-on="1"]) > * { padding-top: 0; }
/* Nada de animacion de entrada encima de la transicion. Las dos corrian sobre las mismas
   propiedades: al terminar la animacion el valor caia al de la transicion, que iba unos pocos
   px atras, y el contenido de abajo pegaba un salto para arriba.
   El que ya viene abierto del servidor aparece con la pagina, que es cuando aparece todo. */
.plegable[data-on="1"] { grid-template-rows: 1fr; opacity: 1; }
.plegable.abierta { overflow: visible; }
@media (prefers-reduced-motion: reduce) {
  .plegable, .plegable > * { transition: none; }
  .plegable[data-on="1"] { overflow: visible; }
}
/* La que abre el JS al escribir: sin JavaScript nadie la abre, asi que se ve siempre. Es la
   unica forma de que se pueda completar. */
html:not(.js) .plegable[data-espeja] { grid-template-rows: 1fr; opacity: 1; overflow: visible; }
/* Una fila de campos que se pliega: el aire de arriba pasa adentro, a plegarse con ella. */
.row.plegable { margin-top: 0; --plegable-aire: 14px; }

/* ---------- El badge de resultado ---------- */
/* Como el portal contesta lo que el vecino acaba de hacer: asociar, cambiar un alias,
   desasociar. Va donde la pantalla lo pone -en Asociar abajo del boton, en Mis cuentas arriba
   de la lista- y siempre se ve igual.
   No es el cartel .note: aquel avisa algo de la pantalla y este contesta una accion. */
.badge {
  display: flex; align-items: flex-start; gap: var(--aire-5);
  margin: 0; padding: var(--aire-6) var(--aire-8);
  border: 1px solid; border-radius: var(--r-boton);
  font-size: var(--tam-dato); font-weight: var(--peso-fuerte); line-height: var(--alto-texto);
}
.badge .msym { font-size: var(--ico-base); flex: 0 0 auto; }
.badge[data-tono="ok"]  { background: var(--ok-fondo); border-color: var(--ok-linea); color: var(--ok-texto); }
.badge[data-tono="mal"] { background: var(--error-fondo); border-color: var(--error-linea); color: var(--error-texto); }
.badge[data-tono="espera"] { background: var(--espera-fondo); border-color: var(--espera-linea); color: var(--espera-texto); }

/* ---------- Cartel de error ---------- */
.note { --plegable-aire: 16px; }
.note-caja {
  display: flex; align-items: flex-start; gap: var(--aire-5); text-align: left;
  background: var(--error-fondo); border: 1px solid var(--error-linea);
  border-radius: var(--r-boton); padding: var(--aire-6) var(--aire-8);
}
.note-caja .msym { font-size: var(--ico-base); color: var(--error); flex: 0 0 auto; }
.note-texto { min-width: 0; font-size: var(--tam-dato); font-weight: var(--peso-medio); color: var(--error-texto); line-height: var(--alto-texto); }
/* Un enlace adentro del cartel toma su color: es parte de la frase, no un enlace aparte. */
.note-texto a { color: inherit; font-weight: var(--peso-fuerte); text-decoration: underline; }
/* Sali bien / espera un poco. Sin tono, el cartel es el de error. */
.note-caja[data-tono="ok"]     { background: var(--bien-fondo);   border-color: var(--bien-linea); }
.note-caja[data-tono="ok"] .msym, .note-caja[data-tono="ok"] .note-texto { color: var(--bien-texto); }
.note-caja[data-tono="espera"] { background: var(--espera-fondo); border-color: var(--espera-linea); }
.note-caja[data-tono="espera"] .msym, .note-caja[data-tono="espera"] .note-texto { color: var(--espera-texto); }

/* ---------- Detalles sueltos del diseño ---------- */
/* "Conexion segura · sitio oficial". SACADO DE TODAS LAS PANTALLAS EL 15-08-2026, la clase queda
   por si se repone. Donde estaba, que es donde lo pone el diseño:
     Acceso    Ingresar
     Alta      pantallas 4 (revisa tu correo), 6 (listo), 7 y 8 (enlace no valido)
     Clave     las cinco
   No estaba en los tres pasos del alta ni en "Cambiar direccion". */
.sello-seguro {
  display: flex; align-items: center; justify-content: center; gap: var(--aire-3);
  color: var(--tinta-apagada); font-size: var(--tam-meta); margin-top: var(--aire-9);
}
.sello-seguro .msym { font-size: var(--ico-chico); }

/* El "¿Primera vez?" con una linea a cada lado */
.separador { display: flex; align-items: center; gap: var(--aire-7); margin: var(--aire-9) 0 var(--aire-8); }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--linea-tarjeta); }
.separador span { font-size: var(--tam-meta); color: var(--tinta-tenue); }

/* ---------- Pie institucional ---------- */
/* Alto fijo, el mismo en todas las pantallas: antes media 69 en Acceso y 99 en el resto.
   Es 8 mas alto que la barra a proposito: su logo mide 52 y con 72 quedaba apretado.
   El logo se queda en 58 aunque sobre poco aire: su texto va dentro de la imagen, y mas
   chico se sale de la escala tipografica del sitio. */
.pie {
  background: var(--papel); border-top: 1px solid var(--linea-pie);
  height: var(--franja-pie);
  padding-inline: max(34px, calc((100% - var(--ancho-max)) / 2));
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
/* OJO con el logo, mide 836x129: a 58 de alto necesita 376 de ancho, y NO entra en ningun telefono
   -el mas ancho deja 362-. Sin el max-width se desbordaba contra los bordes; Firefox lo
   mostraba asi y Chrome lo achicaba por su cuenta, por eso se veian distintos.
   Con los dos topes respeta el que le apriete: en escritorio manda el alto, en el telefono
   el ancho, y la proporcion se mantiene sola. Ahi la letra del logo queda mas chica que la
   escala del sitio, y eso no se arregla con CSS: pide un logo apilado para pantallas
   angostas. */
.pie img { max-height: var(--logo-pie); max-width: 100%; width: auto; height: auto; display: block; }

/* Se muestra o no segun lo que diga el servidor: el enlace de reenvio y su reemplazo, y el
   bloque de "cambiar direccion" que solo tiene sentido si el registro es de este navegador. */
.rs { display: none; }
.rs[data-on="1"] { display: inline; }
.onlyreg { display: none; }
.onlyreg[data-on="1"] { display: block; }
.rs-espera { color: var(--tinta-apagada); font-weight: var(--peso-fuerte); cursor: default; }
.rs-link {
  color: var(--enlace); font-weight: var(--peso-fuerte); cursor: pointer;
  background: none; border: none; padding: 0; font-family: inherit; font-size: inherit;
}
.rs-pie   { font-size: var(--tam-dato); color: var(--tinta-suave); margin-top: var(--aire-9); }
.rs-pie form { display: inline; }
.linea-fina { height: 1px; background: var(--linea-suave); margin: var(--aire-8) 0 0; }

/* ---------- Cortes ---------- */
@media (max-width: 720px) {
  .barra { height: auto; padding: var(--aire-6) var(--aire-8); flex-wrap: wrap; gap: var(--aire-6); }
  .barra { padding-inline: var(--aire-8); }
  /* El pie acompaña: con los 34 de escritorio, al logo le queda menos ancho todavia. */
  .pie { padding-inline: var(--aire-6); }
  .barra-acciones { width: 100%; margin-left: 0; }
  .barra-acciones > * { flex: 1; }

  /* En el telefono los botones de la barra publica quedan solo con el icono. Como ocupan
     poco, dejan de necesitar una fila propia y suben al lado del logo: con width 100% la
     barra los mandaba abajo y quedaba un renglon casi vacio.
     El wrap de .barra NO se toca: la barra privada lo necesita para su fila de navegacion.
     Los dos van a 44x44, que es el minimo para el dedo y ademas los deja iguales entre si:
     sueltos median 52x36 y 58x38, porque uno lleva borde y el otro no.
     El texto se esconde con lo mismo que .sr-only, nunca con display none: asi el lector de
     pantalla lo sigue leyendo y el boton no queda sin nombre. */
  /* La barra publica vuelve a su alto fijo: el height auto de arriba estaba porque los
     botones se llevaban una fila entera, y ahora entran al lado del logo. Asi el sitio
     abre y cierra con la misma franja tambien en el telefono. La privada se queda con
     auto: sus tres filas no entran en una. */
  .barra:not(.barra-privada) { height: var(--franja); flex-wrap: nowrap; }
  .barra:not(.barra-privada) .barra-acciones { width: auto; margin-left: auto; }
  .barra:not(.barra-privada) .barra-acciones > * {
    flex: 0 0 auto; width: var(--toque); height: var(--toque); padding: 0; justify-content: center;
  }
  .barra:not(.barra-privada) .barra-acciones .btn-txt {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .sumpair { grid-template-columns: 1fr; border-bottom: none; }
  .sumpair > .sum { border-bottom: 1px solid var(--linea-suave); }
  .sum { flex-direction: column; align-items: flex-start; gap: var(--aire-1); }
  .sum .val { text-align: left; }
}
@media (max-width: 420px) {
  .fld { --ico-gap: var(--aire-3); --campo-pad-x: 11px; --campo-pad-y: 10px; }
  .fld input { min-width: 60px; }
  /* Ya no entra al lado del dato: el mensaje se lleva el ancho que necesite. */
  .inmsg[data-on="1"] { max-width: 100%; }
}

/* ---- La barra de quien ya entro: accesos y menu del usuario (Mis datos, 17-08) ---- */
/* La pantalla en la que estas se marca: sin esto la barra no dice donde estoy. */


/* El menu del usuario es un <details>: abre y cierra sin JavaScript. */
.menu-usuario { position: relative; flex: 0 0 auto; }
.menu-usuario > summary {
  display: flex; align-items: center; gap: var(--aire-4); cursor: pointer; list-style: none;
  background: rgba(255,255,255,.18); border-radius: var(--r-pilula); padding: var(--aire-2) var(--aire-7) var(--aire-2) var(--aire-2); min-height: var(--toque);
}
/* El triangulito que Safari y Chrome le ponen solo al summary. */
.menu-usuario > summary::-webkit-details-marker { display: none; }
.menu-usuario > summary::marker { content: ''; }
.menu-usuario[open] .menu-flecha { transform: rotate(180deg); }
.menu-flecha { font-size: var(--tam-tarjeta); color: var(--barra-sub); transition: transform var(--t-rapida) var(--curva-ui); }

/* El desplegable del usuario es el mismo componente que el menu de una fila: su caja y sus items
   se definen mas abajo, con .cuenta-menu-caja. Aca no va nada suyo, y si hay que cambiar uno se
   cambian los dos. Estuvieron escritos dos veces hasta el 24-08, con seis valores distintos. */

@media (max-width: 720px) {
    .barra-privada .barra-nombre { display: none; }

  /* Salir queda solo con el icono, como los de la barra publica. Con eso las acciones dejan
     de llevarse una fila entera y suben al lado de la marca: la barra pasa de tres filas a
     dos, de 170 a poco mas de 100 en un telefono.
     Y de paso arregla el menu de la pastilla: se anclaba a la derecha del boton, y el boton
     estaba a la izquierda, asi que el desplegable se salia 143px por fuera de la pantalla.
     Con las acciones a la derecha, entra solo. */
  .barra-privada .barra-acciones { width: auto; margin-left: auto; }
  .barra-privada .barra-acciones > a[href$="logout"] {
    flex: 0 0 auto; width: var(--toque); height: var(--toque); padding: 0; justify-content: center;
  }
  .barra-privada .barra-acciones .btn-txt {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* Tope por si el nombre es largo: el menu nunca se sale de la pantalla. */
  .menu-caja { max-width: calc(100vw - var(--aire-8) * 2); }

    .barra-privada { height: var(--franja); flex-wrap: nowrap; }
  .barra-privada
    }


/* ---------- La tabla de datos ---------- */
/* Del diseno de Cuenta corriente. El componente pone el marco -borde, cabecera, separadores,
   alineacion, y el cambio a tarjetas-; la PANTALLA pone el ancho de sus columnas en
   --tabla-cols, que es lo unico que cambia de una tabla a otra.

   Abajo de --tabla-corte la tabla no entra y se muestran las tarjetas. No son la misma tabla
   reacomodada: son otro contenido, con los periodos como botones. Las dos las dibuja la
   pantalla y aca se decide cual se ve. */
.tabla {
  --tabla-cols: 1fr;
  /* La piel. La tabla del plan de pagos es esta misma en azul, asi que en vez de otro
     componente cambian estos seis valores y nada mas. */
  --piel-cab: var(--fondo-suave); --piel-linea: var(--linea-tarjeta); --piel-rotulo: var(--neutro-icono);
  --piel-total: var(--fondo-total); --piel-total-linea: var(--linea-fuerte);
  --piel-total-rotulo: var(--tinta-suave);
  border: 1px solid var(--linea-tarjeta); border-radius: var(--r-boton); overflow: hidden;
  background: var(--papel);
}
.tabla-cab, .tabla-fila {
  display: grid; grid-template-columns: var(--tabla-cols); align-items: center;
}
.tabla-cab {
  background: var(--piel-cab); border-bottom: 1px solid var(--piel-linea);
  font-size: var(--tam-rotulo); font-weight: var(--peso-fuerte); letter-spacing: .05em;
  color: var(--piel-rotulo); text-transform: uppercase;
}
/* La cabecera reparte igual que la fila: si no, el rotulo no cae sobre su dato. Llevaba 14 de
   relleno contra los 12 de la fila y las cinco columnas de numeros quedaban a 2 px. */
.tabla-cab > * { padding: var(--aire-5) var(--aire-6); }
.tabla-cab > *:first-child { padding-left: var(--aire-8); }
.tabla-cab > *:last-child { padding-right: var(--aire-7); }
.tabla-fila {
  border-bottom: 1px solid var(--linea-fila); cursor: pointer; position: relative;
}
.tabla-fila:last-child { border-bottom: none; }
.tabla-fila:hover { background: var(--fila-hover); }
/* El mismo sangrado que una fila de Mis cuentas. */
.tabla-fila > * { padding: var(--aire-6); min-width: 0; }
.tabla-fila > *:first-child { padding-left: var(--aire-8); }
/* El mismo relleno que la cabecera y que el pie: los tres numeros de la ultima columna se leen
   en la misma vertical. Con 12 aca y 14 alla quedaban a 2 px. */
.tabla-fila > *:last-child { padding-right: var(--aire-7); }
/* La primera celda: la casilla, la sangria, el mas/menos y el dato de la fila. En ese orden,
   que es el del diseño: el simbolo va antes del año, y el periodo del año entra justo donde
   estaba ese simbolo. */
.tabla-a { display: flex; align-items: center; gap: var(--aire-5); flex-wrap: nowrap; }
.tabla-a .msym { font-size: var(--ico-base); color: var(--tinta-simbolo); flex: 0 0 auto;
                 cursor: pointer; }

/* Los numeros van a la derecha y con cifras de ancho fijo, o las columnas bailan al cambiar
   de fila. La clase .num la pone la pantalla en la celda que lleva un numero. */
.tabla-fila .num { text-align: right; }
.tabla-cab .num, .tabla-fila .num { font-variant-numeric: tabular-nums; }
.tabla-fila .cen { text-align: center; }
/* Los rotulos de la cabecera van centrados sobre su columna, aunque el dato caiga a la derecha
   (Maxi, 29-08). En el detalle de deuda la primera celda no se centra: es un flex con el boton de
   abrir todo, y "Año" sigue cayendo sobre las casillas. */
.tabla-cab > * { text-align: center; }
/* Donde va un tilde que esa fila no lleva. Mide lo mismo, asi la clave sigue cayendo en su
   vertical: sin el, la cuota paga se corre a la izquierda y la columna se desarma. */
.tabla-hueco { width: var(--marca-tabla); flex: 0 0 auto; }
.tabla-fila .num { font-size: var(--tam-dato); color: var(--tinta-media); white-space: nowrap; }
.tabla-fila .tabla-lista { font-size: var(--tam-dato); }
.tabla-fila .tabla-clave { font-size: var(--tam-base); font-weight: var(--peso-fuerte); color: var(--tinta); }
/* El año y cada numerito ahora despliegan o marcan por su cuenta -selección granular, 27-08-,
   asi que necesitan su propio foco: no hay input adentro del que colgarse como en .tabla-marca. */
.tabla-clave, .anio-chip { cursor: pointer; }
.tabla-clave:focus-visible, .anio-chip:focus-visible {
  outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--r-mini);
}
/* El actualizado se resalta solo si esa fila esta elegida: el año cuando estan todos sus
   periodos, y el periodo cuando esta el suyo. Es lo que separa lo que se va a pagar de lo que
   esta ahi al lado. */
.tabla-fila .tabla-total { font-size: var(--tam-base); font-weight: var(--peso-fuerte); color: var(--tinta); }
/* Donde se elige, el peso lo dice: normal lo que no esta elegido, fuerte lo que si. Una tabla
   sin casillas -la del plan- se queda con el fuerte de siempre. */
.tabla-fila[data-marcada] .tabla-total { font-weight: var(--peso-cuerpo); }
.tabla-fila[data-marcada="1"] .tabla-total { font-weight: var(--peso-fuerte); }
.tabla-fila .tabla-lista { color: var(--enlace); overflow-wrap: anywhere; white-space: normal; }

/* El pie: lo que resume la tabla entera. */
.tabla-pie {
  display: flex; align-items: center; gap: var(--aire-6); flex-wrap: wrap;
  background: var(--piel-total); padding: var(--aire-6) var(--aire-7);
  border-top: 1px solid var(--piel-total-linea);
}
.tabla-pie-rotulo { flex: 1; text-align: right; font-size: var(--tam-dato);
                    font-weight: var(--peso-medio); color: var(--piel-total-rotulo);
                    padding-right: var(--aire-6); }
.tabla[data-piel="plan"] {
  --piel-cab: var(--plan-fondo); --piel-linea: var(--plan-linea); --piel-rotulo: var(--plan-tinta);
  --piel-total: var(--plan-fondo); --piel-total-linea: var(--plan-linea-fuerte);
  --piel-total-rotulo: var(--plan-tinta);
}
/* El numero del plan, arriba de su tabla. */
.plan-pastilla {
  display: inline-block; font-size: var(--tam-meta); font-weight: var(--peso-fuerte);
  color: var(--petroleo); background: var(--plan-fondo);
  border-radius: var(--r-pilula); padding: var(--aire-1) var(--aire-5);
}
/* La caja donde vive una propuesta de plan. */
.plan-caja {
  background: var(--plan-fondo); border: 1px solid var(--plan-linea-fuerte);
  border-radius: var(--r-boton); padding: var(--aire-6) var(--aire-7);
}

/* Cae justo debajo de la columna de totales: la pantalla dice cuanto mide esa columna en
   --tabla-carril, igual que dice las demas en --tabla-cols. Sin eso el numero baila. */
.tabla-pie-total  { font-size: var(--tam-bloque); font-weight: var(--peso-titulo); color: var(--tinta);
                    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
                    min-width: var(--tabla-carril, auto); }

/* La casilla de marcar una fila. Va en pixel entero como el campo, no en 1.5 como la maqueta. */
.tabla-marca {
  width: var(--marca-tabla); height: var(--marca-tabla); border-radius: var(--r-mini); flex: 0 0 auto;
  border: 2px solid var(--linea-marca); background: var(--papel);
  display: flex; align-items: center; justify-content: center;
}
.tabla-marca .msym { font-size: var(--ico-detalle); color: var(--sobre-barra); }
/* El verde de la seleccion. Entero y a medias se distinguen por el color y no solo por el
   glifo: el aclarado avisa de lejos que ahi adentro falta algo (maqueta 5a, 24-08). */
.tabla-fila[data-marcada="1"] .tabla-marca { border-color: var(--ok); background: var(--ok); }
.tabla-fila[data-marcada="parcial"] .tabla-marca { border-color: var(--ok-suave); background: var(--ok-suave); }
/* La del año pesa un poco mas que la del periodo -misma diferencia que ya tiene celular entre
   .anio-marca y .tabla-marca-: se reconoce por tener al lado el +/-, no hay otra marca asi
   en toda la pantalla (Maxi, 28-08). */
.tabla-fila:has(.tabla-mas) .tabla-marca { width: var(--marca-caja); height: var(--marca-caja); }

/* El mismo lugar que .tabla-marca, pero redondo: es para elegir UNA opcion, no varias -las
   propuestas de un plan nuevo, nunca una lista que se tilda-. El punto de adentro va con
   position/transform y no con flex: --marca-tabla es impar (19px) y flex+pseudo-elemento
   redondeaba distinto en cada lado, el punto no quedaba centrado (Maxi, 27-08). */
.tabla-radio {
  position: relative; width: var(--marca-tabla); height: var(--marca-tabla);
  border-radius: 50%; flex: 0 0 auto; border: 2px solid var(--linea-marca); background: var(--papel);
}
/* El area de adentro (19px de anillo menos 2px de borde de cada lado) queda en un numero
   impar, asi que centrar por 50%+transform cae en medio pixel y el navegador redondea el
   punto para un lado y el borde para el otro: se ve descentrado. inset+margin:auto centra
   por caja, no por porcentaje, y no arrastra ese redondeo (Maxi, 27-08). */
.tabla-radio::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 9px; height: 9px; border-radius: 50%; background: transparent;
}
.tabla-fila[data-marcada="1"] .tabla-radio { border-color: var(--petroleo); }
.tabla-fila[data-marcada="1"] .tabla-radio::after { background: var(--petroleo); }
.tabla-fila[data-marcada="1"] { background: var(--ok-fondo-tenue); }

/* Al expandir un año, sus periodos entran como filas de la misma lista. No es un panel que se
   abre: es la tabla con mas filas, y por eso el total de abajo sigue cuadrando.
   La fila del periodo no repite el año: deja la primera celda vacia y pone su numero en la
   columna de periodos, que es donde corresponde. Sin sangria: el tilde del periodo cae en la
   misma vertical que el del año -antes se sangraba a proposito para separarlos, ahora se
   busca lo contrario- (Maxi, 27-08). */
.tabla-sangria { width: 0; flex: 0 0 auto; }
.tabla-fila[data-hija="1"] .tabla-clave { font-weight: var(--peso-cuerpo); }
/* La fila elegida se pinta entera, no solo la casilla. El año va en verde -entero o a medias-
   y el periodo suelto se queda en el celeste: asi se ve cual es cual sin leer la sangria. */
.tabla-fila[data-marcada="1"] { background: var(--ok-fondo); }
.tabla-fila[data-marcada="parcial"] { background: var(--ok-fondo-tenue); }
.tabla-fila[data-hija="1"][data-marcada="1"] { background: var(--fila-marcada); }
/* Los periodos se pliegan: la fila va de alto cero al suyo, y vuelve. Escalonada de arriba
   hacia abajo, con el retardo que pone la pantalla en --paso.
   Con display:none la ida no se podia animar y el año se cerraba de golpe. */
.tabla-fila[data-hija="1"] {
  max-height: 0; opacity: 0; overflow: hidden; border-bottom-width: 0;
  transition: max-height var(--t-rapida) var(--curva-ui) var(--paso, 0ms),
              opacity var(--t-rapida) var(--curva-ui) var(--paso, 0ms);
}
.tabla-fila[data-hija="1"][data-ver="1"] {
  max-height: var(--alto-fila); opacity: 1; border-bottom-width: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .tabla-fila[data-hija="1"] { transition: none; }
}

/* El total seleccionado vive dentro de la tabla, asi que en el telefono se iba con ella. Es el
   numero que el vecino mira antes de pagar: la lista de años lleva el suyo.
   Un solo renglon -rotulo contra total, sin "Total a pagar" de mas- y con los mismos colores
   que el pie de la tabla de escritorio, .tabla-pie: Maxi los igualo (28-08). Va hasta el borde
   de la tarjeta, con las esquinas de abajo redondeadas porque ahi termina. */
.tarjetas-pie {
  display: flex; align-items: center; justify-content: space-between; gap: var(--aire-7);
  background: var(--fondo-total); border-top: 1px solid var(--linea-fuerte); border-bottom: 1px solid var(--linea-fuerte);
  padding: var(--aire-6) var(--aire-8);
  /* al borde de la tabla como las filas de año -.anio-: es la fila que suma. Lineas arriba y abajo
     -franja cerrada, como el encabezado de la tabla-, sin borde lateral -no se pega al de la
     tarjeta, sin doble linea-. */
  margin: 0 calc(-1 * var(--aire-9));
}
.tarjetas-pie-rotulo {
  font-size: var(--tam-meta); font-weight: var(--peso-medio); color: var(--tinta-suave);
}
.tarjetas-pie-total {
  font-size: var(--tam-base); font-weight: var(--peso-titulo); color: var(--tinta);
}

/* El cambio, a los 760: es lo que miden las cinco columnas fijas mas el relleno.
   Va por el ancho del CONTENEDOR y no el de la ventana: la tabla vive adentro de un panel que
   no ocupa toda la pantalla, asi que lo que decide es cuanto lugar tiene, no cuanto mide el
   navegador. El 760 va escrito: una @container tampoco acepta una variable. */
/* Toda tabla que se cambia por una lista en angosto declara las dos: el CSS elige. Son dos
   nombres porque son dos contenidos distintos -los años de la deuda y las cuotas del plan-,
   pero el conmutador es uno solo. */
.tarjetas-anio, .tarjetas-cuota { display: none; }
/* Se probo un margen negativo aca para que la tarjeta llegue al borde del recurso, pero
   desbordaba la tabla desplegada fuera de la pantalla. Lo que hacia falta era sólo alinear
   los tildes -ver .anio-per y .anio-tabla mas abajo-, no llevar la tarjeta al borde (Maxi, 27-08). */
@container tabla (max-width: 760px) {
  .tabla { display: none; }
  .tarjetas-anio, .tarjetas-cuota { display: block; }
}
/* La tabla del plan tiene 9 columnas y entra en escritorio -contenido capado a 960, contenedor
   ~918- pero no en una tablet: se comia Estado y Total. Pasa a las tarjetas a los 850, antes que la
   de deuda -que con 6 columnas si entra-. Solo el plan (data-piel="plan") y sus tarjetas; la deuda
   sigue cambiando a los 760 (Maxi, 29-08). */
@container tabla (max-width: 850px) {
  .tabla[data-piel="plan"] { display: none; }
  .tarjetas-cuota { display: block; }
}
.tabla-caja { container: tabla / inline-size; }


/* ---------- El modal ---------- */
/* Del diseno de Cuenta corriente. Va sobre <dialog>: abierto con showModal(), el navegador
   atrapa el foco adentro, cierra con Escape y deja inerte lo de atras. Nada de eso hay que
   escribirlo.
   La hoja crece hasta donde entra y su cuerpo scrollea solo: un comprobante largo no puede
   empujar los botones fuera de la pantalla. */
.modal {
  /* El dialog ya se centra solo -su margen es auto-, lo que faltaba era que el ancho y el alto
     no llegaran al borde. En un telefono width 100% lo pegaba a los dos costados. */
  width: calc(100% - 2 * var(--aire-6)); max-width: 620px;
  max-height: calc(100% - 2 * var(--aire-9));
  padding: 0; border: none; border-radius: var(--r-modal);
  background: var(--papel); box-shadow: var(--sombra-hoja);
  overflow: hidden;
}
.modal[open] { display: flex; flex-direction: column; }

/* La entrada y la salida. Va sin JavaScript: el navegador anima el dialog si se le declaran
   display y overlay como discretas, y @starting-style le da el estado del que sale.
   Se anima con `scale` y NO con transform: en telefono el modal ya usa transform para centrarse
   y escribirlo de nuevo aca lo mandaria al borde.
   El navegador que no entienda @starting-style lo muestra de golpe, que es lo que hacia antes. */
.modal {
  opacity: 0; scale: .97;
  transition: opacity var(--t-rapida) var(--curva-ui), scale var(--t-media) var(--curva-ui),
              overlay var(--t-media) allow-discrete, display var(--t-media) allow-discrete;
}
.modal[open] { opacity: 1; scale: 1; }
@starting-style {
  .modal[open] { opacity: 0; scale: .97; }
}
.modal::backdrop {
  background: var(--velo);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--t-media) var(--curva-ui),
              overlay var(--t-media) allow-discrete, display var(--t-media) allow-discrete;
}
.modal[open]::backdrop { opacity: 1; }
@starting-style {
  .modal[open]::backdrop { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .modal, .modal::backdrop { transition: none; }
  .modal { scale: 1; }
}

.modal-cab {
  display: flex; align-items: center; gap: var(--aire-6);
  padding: var(--aire-8); border-bottom: 1px solid var(--linea-suave);
}
.modal-cab > .msym { font-size: var(--ico-base); color: var(--petroleo); flex: 0 0 auto; }
.modal-titulos { flex: 1; min-width: 0; line-height: var(--alto-compacto); }
.modal-titulo {
  /* Sin esto el h2 trae el margen del navegador y abre un hueco abajo del titulo. */
  margin: 0;
  font-family: var(--tipo-titulo); font-weight: var(--peso-titulo);
  font-size: var(--tam-tarjeta); color: var(--tinta);
}
/* La bajada va pegada al titulo: es su continuacion, no un bloque aparte. */
.modal-titulo + .modal-texto { margin-top: calc(-1 * var(--aire-3)); }
.modal-sub { font-size: var(--tam-meta); color: var(--tinta-tenue); margin-top: var(--aire-1); }

/* 44 px es lo que necesita un dedo para no errarle. */
.modal-cerrar {
  width: var(--toque); height: var(--toque); flex: 0 0 auto;
  border: none; border-radius: var(--r-campo); background: transparent;
  color: var(--tinta-tenue); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.modal-cerrar:hover { background: var(--fondo-hover); color: var(--tinta); }
.modal-cerrar .msym { font-size: var(--ico-grande); }

/* La franja de aviso, entre el titulo y el cuerpo. */
.modal-franja {
  display: flex; align-items: center; gap: var(--aire-4);
  padding: var(--aire-4) var(--aire-8); background: var(--fondo-suave);
  border-bottom: 1px solid var(--linea-suave);
  font-size: var(--tam-rotulo); color: var(--tinta-tenue);
}
.modal-franja .msym { font-size: var(--ico-linea); color: var(--error); flex: 0 0 auto; }
.modal-franja span { flex: 1; min-width: 0; overflow: hidden;
                     text-overflow: ellipsis; white-space: nowrap; }

/* Sin relleno: lo que va adentro es el documento, y un marco con margen desperdicia pantalla.
   La pantalla que quiera poner otra cosa le pone su propio aire. */
/* El min-width va al lado del min-height, siempre: sin el, lo que entra adentro le impone su
   ancho minimo y el cuerpo sale MAS ancho que el modal, que lo recorta. Se vio con la tabla del
   plan -620 de cuerpo adentro de 601 de modal-. Ver sistema_visual.md §5-quater. */
/* En fila, no en columna, quedaba mal apenas alguien pusiera DOS hijos: el de Ver Cuotas
   siempre tuvo uno solo y por eso nunca se noto (Maxi, 27-08). */
.modal-cuerpo { flex: 1; min-height: 0; min-width: 0; overflow: auto;
                background: var(--linea-suave); display: flex; flex-direction: column; }
.modal-pie {
  display: flex; align-items: center; gap: var(--aire-6); flex-wrap: wrap;
  justify-content: flex-end; padding: var(--aire-8); border-top: 1px solid var(--linea-suave);
}
/* El cuerpo cuando adentro va un FORMULARIO y no un documento. El otro -.modal-cuerpo- es el
   marco gris del visor de PDF: un formulario ahi queda sobre gris y apretado contra un costado. */
.modal-form {
  /* Respira: la maqueta le da 32 arriba, 36 a los lados y 28 abajo. Con la mitad, el titulo
     queda pegado al borde y el modal parece un cartel. */
  padding: var(--aire-11) var(--aire-11) var(--aire-10);
  display: grid; gap: var(--aire-5); background: var(--papel);
}
.modal-form label { font-size: var(--tam-dato); font-weight: var(--peso-fuerte); color: var(--tinta-cuerpo); }
/* La linea que explica de que se trata, arriba de los campos. */
.modal-texto { font-size: var(--tam-dato); color: var(--tinta-suave); margin: 0; line-height: var(--alto-texto); }

/* ---------- El modal que pide confirmacion ---------- */
/* Es otra pieza que el de formulario: va centrado, con el circulo del aviso arriba, el titulo en
   pregunta y la accion en rojo. Se usa cuando lo que sigue saca algo. */
.modal-confirmar { max-width: 430px; text-align: center; }
.modal-confirmar .modal-form { padding: var(--aire-11) var(--aire-11) var(--aire-10); }
.modal-aviso-ico {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto;
  background: var(--error-fondo); color: var(--error);
  display: flex; align-items: center; justify-content: center;
}
.modal-aviso-ico .msym { font-size: var(--ico-aviso); }
.modal-confirmar .modal-titulo { display: block; }
/* La aclaracion va en su caja: es lo que saca el miedo de encima, no una linea mas de texto. */
.modal-nota {
  display: flex; align-items: flex-start; gap: var(--aire-5); text-align: left;
  background: var(--fondo-suave); border: 1px solid var(--linea-pie);
  border-radius: var(--r-campo); padding: var(--aire-6) var(--aire-7);
  font-size: var(--tam-dato); color: var(--tinta-suave); line-height: var(--alto-texto);
}
.modal-nota .msym { font-size: var(--ico-chico); color: var(--tinta-tenue); flex: 0 0 auto; }
/* La accion que saca algo va en rojo lleno: no se puede confundir con Cancelar. */
.btn-peligro {
  background: var(--error); color: var(--sobre-barra); border: none;
  padding: var(--aire-7) var(--aire-10); font-weight: var(--peso-fuerte); font-size: var(--tam-base);
  font-family: var(--tipo-ui); cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: var(--aire-4); border-radius: var(--r-boton);
  transition: background var(--t-rapida) ease;
}
.btn-peligro:hover { background: var(--error-texto); }

/* ---------- El documento que viene de SIP, adentro del modal ---------- */
/* El comprobante y la propuesta de plan son PDFs que arma SIP. El portal se los pide firmados y
   los vuelve a servir desde su propio dominio, asi que el marco es del mismo origen y hace falta
   que salga con Content-Disposition: inline, o el navegador lo baja en vez de mostrarlo.

   Va en todos los anchos, incluido el telefono: es lo que hace PagosOnline hoy y se ve. El
   type="application/pdf" del marco lo pone la pantalla, como en el viejo. */
.modal-doc {
  flex: 1; min-height: 320px; width: 100%; border: none; background: var(--linea-suave);
}

/* Lo que dice el documento va en el ENCABEZADO, no en una caja aparte: en un telefono cada
   renglon arriba del marco es un renglon menos de comprobante. El dato que importa -el total-
   se destaca ahi mismo. */
.modal-sub b { color: var(--tinta); font-weight: var(--peso-fuerte); }

/* ---------- La lista de cuentas asociadas ---------- */
/* Mis cuentas y Asociar. Del diseño, traduciendo cada valor a su token: la maqueta trae los
   grises que no llegan al contraste y los bordes fraccionarios que ya se corrigieron.

   No son tarjetas sueltas: es una lista de filas dentro de una caja, agrupada por tipo, y cada
   grupo se pliega con el .plegable de siempre. El color y el glifo salen del tipo. */
.cuentas-grupo { margin-top: var(--aire-10); }

/* El encabezado del grupo es un boton: toda la banda abre y cierra, no solo la flecha. */
.cuentas-cab {
  display: flex; align-items: center; gap: var(--aire-5); width: 100%;
  background: transparent; border: none; padding: 0 var(--aire-1) var(--aire-5);
  cursor: pointer; font-family: var(--tipo-ui); text-align: left;
}
.cuentas-cab .msym, .cuentas-cab .lapida { font-size: var(--ico-base); flex: 0 0 auto; }
.cuentas-nombre {
  font-family: var(--tipo-titulo); font-weight: var(--peso-fuerte);
  font-size: var(--tam-bloque); color: var(--tinta);
}
/* Cuantas hay en el grupo. */
.cuentas-cuantas {
  font-size: var(--tam-rotulo); font-weight: var(--peso-fuerte); color: var(--petroleo);
  background: var(--pastilla-fondo); padding: var(--aire-1) var(--aire-5);
  border-radius: var(--r-pilula);
}
/* El total del grupo. El rotulo hace de encabezado de la columna de deuda y la suma va
   en un carril propio, para que cierre contra los montos de las filas. Si se mueven los
   botones del final de la fila, hay que recalcular ese ancho. */
.cuentas-total {
  margin-left: auto; display: flex; align-items: baseline; gap: var(--aire-4);
  font-size: var(--tam-base); font-weight: var(--peso-fuerte);
}
.cuentas-total-rotulo { color: var(--tinta-media); }
.cuentas-total-suma { min-width: var(--carril-deuda); text-align: right; color: var(--tinta); }
/* La flecha es decorativa: el estado ya lo dice el contenido, que se ve o no se ve. */
.cuentas-flecha {
  font-size: var(--ico-base); color: var(--tinta-apagada);
  transition: transform var(--t-rapida) var(--curva-ui);
}
.cuentas-grupo:not([data-abierto="1"]) .cuentas-flecha { transform: rotate(-90deg); }

/* La caja blanca donde viven las filas. */
.cuentas-caja {
  background: var(--papel); border: 1px solid var(--linea-tarjeta);
  border-radius: var(--r-caja); overflow: hidden;
}

/* Una cuenta. Toda la fila abre su cuenta corriente; los botones del final no. */
.cuenta {
  display: flex; align-items: center; gap: var(--aire-7);
  padding: var(--aire-5) var(--aire-6) var(--aire-5) var(--aire-8);
  border-bottom: 1px solid var(--linea-suave); cursor: pointer;
  transition: background var(--t-rapida) ease;
}
.cuenta:last-child { border-bottom: none; }
.cuenta:hover { background: var(--fondo-suave); }
/* La pastilla del glifo: el color dice el tipo antes de leer nada. */
.cuenta-glifo {
  width: var(--glifo-caja); height: var(--glifo-caja); border-radius: var(--r-medio);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  border: none; padding: 0; font-family: inherit; cursor: pointer;
}
.cuenta-glifo .msym, .cuenta-glifo .lapida { font-size: var(--ico-base); }
.cuenta-datos { flex: 1; min-width: 0; line-height: var(--alto-compacto); }
/* El enlace envuelve al numero y nada mas: el alias es un boton y no puede ir adentro de un <a>.
   Su ::after es el que cubre la fila entera. */
.cuenta-ir { display: block; min-width: 0; }
/* Van uno debajo del otro. Son span en el markup, asi que sin esto caen en el mismo
   renglon y el numero queda pegado al alias. */
.cuenta-alias, .cuenta-numero { display: block; }
/* El alias es un boton, no un texto: al tocarlo se edita. Se le saca lo que el navegador le
   pone -borde, fondo, relleno, alineacion, letra- y al pasarle el mouse se SUBRAYA, que es lo
   que avisa que se puede editar sin agregarle nada al lado.
   Sube con su z-index o el toque se lo lleva el enlace estirado de la fila. */
.cuenta-alias {
  /* Mide lo que mide su texto y no mas: si tomara todo el ancho, tocar el vacio de la derecha
     abriria el modal en vez de llevar a la cuenta corriente. Medido: eran 621 px. */
  border: none; background: none; text-align: left;
  width: fit-content; max-width: 100%;
  /* El relleno agranda lo que se toca y el margen negativo devuelve el lugar: la fila queda
     igual y el dedo tiene 10 px mas de alto. Con el alto del texto pelado eran 17. */
  padding: var(--aire-2) 0; margin: calc(var(--aire-2) * -1) 0;
  font-family: var(--tipo-ui);
  position: relative; z-index: var(--z-campo);
  cursor: pointer;
  font-size: var(--tam-base); font-weight: var(--peso-fuerte); color: var(--tinta-cuerpo);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cuenta-alias:hover, .cuenta-alias:focus-visible { text-decoration: underline; }
/* El numero que el vecino reconoce. La maqueta lo pone en un gris que no llega al minimo de
   contraste, y no es adorno: es el dato con el que identifica cual de sus cuentas es. */
.cuenta-numero { font-size: var(--tam-meta); color: var(--tinta-tenue); }
.cuenta-monto {
  font-size: var(--tam-base); font-weight: var(--peso-titulo); color: var(--tinta);
  text-align: right; flex: 0 0 auto; line-height: var(--alto-compacto);
}
/* El que no debe nada lo dice, no lo deja en blanco. Tampoco va en el gris de lo apagado:
   es informacion, se lee. */
.cuenta-monto.sin { font-weight: var(--peso-medio); color: var(--tinta-tenue); }
/* Sin deuda y sin plan es "Al dia", no "sin" nada: va en verde con el mismo tilde que usa
   Cuenta corriente para el mismo estado, no en el gris apagado de arriba (Maxi, 27-08). */
.cuenta-monto.al-dia {
  color: var(--ok); font-weight: var(--peso-fuerte);
  display: inline-flex; align-items: center; gap: var(--aire-3);
}
.cuenta-monto-icono { font-size: var(--ico-detalle); color: var(--ok); flex: 0 0 auto; }
.cuenta-flecha { font-size: var(--ico-base); color: var(--petroleo); flex: 0 0 auto; }

/* Los botones del final de la fila. */
.cuenta-accion {
  width: 34px; height: 34px; border-radius: var(--r-chico);
  border: 1px solid var(--linea-tarjeta); background: var(--papel); color: var(--petroleo);
  cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  transition: background var(--t-rapida) ease, border-color var(--t-rapida) ease;
}
.cuenta-accion:hover { border-color: var(--petroleo); background: var(--fondo-hover); }
.cuenta-accion .msym { font-size: var(--ico-base); }
/* Apagado, no escondido: que se vea que la accion existe y por que no esta disponible.
   Va con aria-disabled y NO con disabled: un boton deshabilitado no dispara eventos de mouse,
   asi que su title no aparece nunca y el vecino se queda sin saber por que no anda. */
.cuenta-accion[disabled], .cuenta-accion[aria-disabled="true"] {
  color: var(--tinta-apagada); cursor: default;
}
.cuenta-accion[disabled]:hover, .cuenta-accion[aria-disabled="true"]:hover {
  border-color: var(--linea-tarjeta); background: var(--papel);
}
/* El menu de la fila. Va con <details>, que lo abre el navegador: no depende de JavaScript.
   Tiene que quedar por encima del recorte del plegable, y por eso el plegable suelta su
   overflow cuando termina de abrirse. */
.cuenta-menu { position: relative; flex: 0 0 auto; }
.cuenta-menu > summary { list-style: none; }
.cuenta-menu > summary::-webkit-details-marker { display: none; }
.cuenta-menu-caja, .menu-caja {
  position: absolute; right: 0; top: calc(100% + var(--aire-4)); z-index: var(--z-menu);
  min-width: var(--menu-ancho);   /* el de la maqueta: entra el item mas largo sin cortarse */
  background: var(--papel); border: 1px solid var(--linea-flotante);
  border-radius: var(--r-boton); box-shadow: var(--sombra-menu);
  padding: var(--aire-3); display: grid; gap: 0; text-align: left;
}
.cuenta-menu-rotulo {
  display: block; font-size: var(--tam-meta); font-weight: var(--peso-fuerte);
  color: var(--tinta-tenue); margin-bottom: var(--aire-2);
}
.cuenta-menu-quitar { color: var(--error-texto); }
/* Un item del menu de la fila. Los tres se ven igual aunque uno sea un enlace, otro un boton y
   el del medio abra un campo. */
.cuenta-menu-item, .menu-caja a {
  display: flex; align-items: center; gap: var(--aire-5);
  font-size: var(--tam-base); color: var(--tinta-cuerpo);
  padding: var(--aire-6) var(--aire-6); border-radius: var(--r-chico);
  min-height: var(--ico-anillo);
}
.cuenta-menu-item .msym, .menu-caja a .msym { font-size: var(--ico-base); color: var(--petroleo); flex: 0 0 auto; }
.cuenta-menu-item.apagado { color: var(--tinta-apagada); }
/* Los que son boton: que no parezcan boton, parecen item. */
button.cuenta-menu-item {
  width: 100%; background: transparent; border: none; cursor: pointer;
  font-family: var(--tipo-ui); text-align: left;
  transition: background var(--t-rapida) ease;
}
button.cuenta-menu-item:hover, .menu-caja a:hover { background: var(--fondo-hover); color: var(--tinta); }
.cuenta-menu-item.quitar, .cuenta-menu-item.quitar .msym { color: var(--error-texto); }
/* Desasociar va separado por una linea: es la unica del menu que saca algo. El fondo rosado es
   del HOVER, no permanente -en reposo es un item mas, en rojo-. */
.cuenta-menu-item.quitar { border-radius: var(--r-chico); }
/* El separador es un elemento con su propio margen: asi queda igual de lejos de los dos items.
   Como pseudo-elemento se anclaba al <details>, que es el ancestro posicionado, y rayaba la
   sombra del menu. */
.cuenta-menu-sep { height: 1px; background: var(--linea-suave); margin: var(--aire-2) var(--aire-4); }
button.cuenta-menu-item.quitar:hover { background: var(--error-fondo); }
/* El de un formulario es mas angosto que el visor de un PDF. */
.modal-chico { max-width: 430px; }
.cuenta-menu-item.apagado .msym { color: var(--tinta-apagada); }
.cuenta-menu-caja .cuenta-menu-rotulo { display: flex; align-items: center; gap: var(--aire-5); }
.cuenta-menu-caja .cuenta-menu-rotulo .msym { font-size: var(--ico-chico); color: var(--petroleo); }

/* Toda la fila lleva a su cuenta corriente, y el enlace es uno solo: el del alias, estirado
   sobre la fila. Asi no hay un boton adentro de un <a>, que no es HTML valido. */
.cuenta { position: relative; }
.cuenta-ir { text-decoration: none; color: inherit; }
/* El ::after se ancla al ancestro posicionado mas cercano. Si el <a> tuviera position, ese
   ancestro seria el <a> y el enlace cubriria solo su texto: desde el monto no se entraba.
   Por eso .cuenta-ir se queda estatico y el unico relativo de la fila es .cuenta. */
.cuenta-ir::after { content: ''; position: absolute; inset: 0; }
.cuenta-accion, .cuenta-menu, .cuenta-glifo { position: relative; z-index: var(--z-campo); }
/* El foco del enlace no se dibuja: se toca con el dedo, no se tabula, y el recuadro del
   navegador ahi no dice nada. */
.cuenta-ir:focus { outline: none; }
/* Abierto sube: el z-index del <details> crea un contexto que encierra al desplegable, asi que
   sin esto las filas de abajo le pasan por encima y se ven sus tres puntitos adentro del menu. */
.cuenta-menu[open] { z-index: var(--z-menu); }
/* En la ultima fila se abre hacia arriba: abajo no queda pantalla y el menu se salia del grupo.
   Es el unico caso que se puede resolver sin medir, y es justo el que se ve. */
.cuenta:last-child .cuenta-menu-caja { top: auto; bottom: calc(100% + var(--aire-4)); }

/* El de los tres puntos no lleva marco: es el menos importante de los dos. */
.cuenta-accion.suelto { border-color: transparent; background: transparent; color: var(--tinta-tenue); }
.cuenta-accion.suelto:hover { background: var(--fondo-hover); color: var(--petroleo); border-color: transparent; }

/* El color de cada tipo. Es lo unico que cambia entre una fila y otra. */
.cuenta[data-tipo="I"] .cuenta-glifo { background: var(--inmueble-tinte); color: var(--inmueble); }
.cuenta[data-tipo="R"] .cuenta-glifo { background: var(--rodado-tinte); color: var(--rodado); }
.cuenta[data-tipo="C"] .cuenta-glifo { background: var(--comercio-tinte); color: var(--comercio); }
.cuenta[data-tipo="E"] .cuenta-glifo { background: var(--cementerio-tinte); color: var(--cementerio); }
/* El glifo del grupo lleva el color de su tipo, igual que el de la fila. Va por el atributo del
   grupo, que es quien sabe de que tipo es. */
.mc-grupo[data-tipo="I"] .mc-grupo-cab > .msym:first-child { color: var(--inmueble); }
.mc-grupo[data-tipo="R"] .mc-grupo-cab > .msym:first-child { color: var(--rodado); }
.mc-grupo[data-tipo="C"] .mc-grupo-cab > .msym:first-child { color: var(--comercio); }
.mc-grupo[data-tipo="E"] .mc-grupo-cab > .lapida:first-child { color: var(--cementerio); }

/* En el telefono la fila sigue en un renglon, como la maqueta. Lo que cede es el texto: el alias
   y el numero se recortan con puntos suspensivos, y el monto nunca se achica.
   OJO con envolverla, que es lo que hacia antes: donde parte depende del largo del monto, asi que
   una fila con deuda de siete digitos y la de al lado con cuatro quedan armadas distinto. Medido a
   390, que es un iPhone: con el monto mas largo que hay -14 caracteres- no se recorta nada. */
@media (max-width: 720px) {
  /* Imprimir el ultimo comprobante no va en el telefono POR AHORA (Maxi, 25-08). Se saca con
     display none y no con visibility: lo que se busca es el lugar que ocupa en la fila. */
  .cuenta > button.cuenta-accion { display: none; }
  /* Y se ancla arriba en vez de centrarse. Con el teclado abierto un modal centrado queda mitad
     y mitad detras de el: el teclado se lleva lo de abajo de la pantalla, asi que arriba es lo
     unico que queda libre. Los costados siguen en auto, o sea centrado a lo ancho.
     Se cuelga de lo que se ve DE VERDAD, no de la ventana: --desde-arriba y --alto-visible los
     pone campo.js con visualViewport. Asi el modal no se estira ni se corre cuando el teclado
     entra o sale, que era lo que se veia erratico al tocar Cancelar. Sin JavaScript el CSS cae
     en 0 y 100%, que es lo que hacia antes. */
  .modal {
    position: fixed;
    /* Centrado en la mitad de lo que se VE, no de la ventana. Con el teclado abierto la mitad de
       la ventana cae detras de el. El translate es la unica forma de centrar sin saber el alto. */
    top: calc(var(--desde-arriba, 0px) + var(--alto-visible, 100vh) / 2);
    transform: translateY(-50%);
    margin-top: 0; margin-bottom: 0;
    max-height: calc(var(--alto-visible, 100%) - var(--aire-9) * 2);
  }
  /* El relleno de adentro del modal baja de 34 a 20: con 34 de cada lado, en 352 de ancho al
     campo le quedaban 284. */
  .modal-form, .modal-confirmar .modal-form { padding: var(--aire-9); }
  /* La accion principal va primero -a la izquierda-, al reves que en escritorio: es la maqueta,
     confirmada contra la pantalla (Maxi, 27-08). El pie no cambia de DOM, solo de sentido. */
  .modal-pie { flex-direction: row-reverse; }
  .cuenta { gap: var(--aire-7); padding: var(--aire-6); }
  .cuenta-datos { flex: 1 1 0; }
  .cuenta-alias, .cuenta-numero { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* El glifo es un interruptor: al tocarlo el alias y el numero dejan de recortarse, y al
     tocarlo de nuevo vuelven. Los dos campos se reparten el ancho -el texto pide lo que
     necesita y el monto cede, sin bajar de --carril-monto-, asi que la fila no crece, nada se
     mueve de lugar y el monto nunca queda tapado.
     Va con una casilla escondida y no con :focus, que no vuelve al segundo toque.
     Se anima el ancho del que cede, para que el cambio se vea como un movimiento. */
  .cuenta-monto { max-width: 100%; transition: max-width var(--t-media) var(--curva-ui); }
  .cuenta-ver:checked ~ .cuenta-monto {
    max-width: var(--carril-monto); min-width: var(--carril-monto);
    overflow: hidden; text-overflow: ellipsis;
  }
  .cuenta-ver:checked ~ .cuenta-datos .cuenta-alias,
  .cuenta-ver:checked ~ .cuenta-datos .cuenta-numero { overflow: visible; text-overflow: clip; }
  /* El foco se ve en el glifo, que es lo que se toca: la casilla esta fuera de pantalla. */
  .cuenta-ver:focus-visible + .cuenta-glifo { outline: 2px solid var(--foco); outline-offset: 2px; }
  .cuenta-flecha { display: none; }
  .cuenta-monto { flex: 0 0 auto; }
}

/* ---------- La tarjeta de un año, en la cuenta corriente ---------- */
/* Donde la tabla no entra, la deuda se muestra por año: una tarjeta por cada uno, con sus
   periodos adentro. NO es la tabla reacomodada -eso se probo y no daba-: es otro contenido.
   Del diseño, traduciendo cada valor a su token.

   La tarjeta tiene tres partes: el encabezado que se elige, la linea de periodos que resume lo
   elegido, y la tabla de periodos que se despliega. */
/* Donde arranca el periodo dentro de su tabla: justo debajo del mas/menos del año, no debajo
   del tilde. Es lo que desfasa un tilde del otro y hace que se lea la jerarquia. Escrito como
   la cuenta que es -relleno + tilde + separacion-, asi se mantiene solo. */
.anio { --sangria-periodo: calc(var(--aire-7) + var(--marca-caja) + var(--aire-4)); }

/* 5b no las dibuja como tarjetas sueltas: es una lista con separadores, y el fondo de la
   seleccion pinta el año entero -encabezado, periodos y tabla-. */
.anio {
  background: var(--papel); border-bottom: 1px solid var(--linea-suave);
  /* Cancela el padding de .recurso-adentro y llega al borde. Va en el año, no en .tarjetas-anio
     -esa lleva tambien a .tarjetas-pie, que no se mueve-. .recurso-cuerpo ya tiene
     overflow:hidden para su propio 0fr/1fr; contiene esto de yapa (Maxi, 28-08). */
  margin: 0 calc(-1 * var(--aire-9));
}
.anio[data-marcada="1"] { background: var(--ok-fondo); }
.anio[data-marcada="parcial"] { background: var(--ok-fondo-tenue); }

/* Tocar el encabezado despliega; marcar es el tilde o el año, y nada mas. Antes tocar
   cualquier parte marcaba y el chevron del extremo desplegaba (5b, 24-08). */
.anio-cab {
  display: flex; align-items: center; gap: var(--aire-4);
  /* Un poco mas que --aire-7: con la tarjeta ahora al borde de verdad, ese aire quedaba justo
     (maqueta 5d, 28-08). */
  padding: 0 var(--aire-8); min-height: 52px; cursor: pointer;
}
/* La casilla de la tarjeta: la misma pieza que la de la tabla, un poco mas grande. */
.anio-marca {
  width: var(--marca-caja); height: var(--marca-caja); border-radius: var(--r-mini);
  border: 2px solid var(--linea-marca); background: var(--papel); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color var(--t-campo) ease, border-color var(--t-campo) ease;
}
.anio-marca .msym { font-size: var(--ico-detalle); color: var(--sobre-barra); }
.anio[data-marcada="1"] .anio-marca { border-color: var(--ok); background: var(--ok); }
.anio[data-marcada="parcial"] .anio-marca { border-color: var(--ok-suave); background: var(--ok-suave); }
.anio-clave { font-size: var(--tam-base); font-weight: var(--peso-titulo); color: var(--tinta); }
/* Cuantos periodos hay, o cuantos se eligieron. Cambia de texto, no de lugar, y de paso es
   quien empuja al total contra el borde derecho. */
.anio-cuenta { font-size: var(--tam-rotulo); color: var(--tinta-tenue); flex: 1; min-width: 0; }
.anio-total { font-size: var(--tam-base); font-weight: var(--peso-titulo); color: var(--tinta); flex: 0 0 auto; }
/* El mas/menos, entre el tilde y el año: el mismo que la tabla de escritorio. Reemplaza al
   chevron que estaba en el extremo derecho (5b, 24-08). NO gira: cambia de glifo. */
.anio-mas { font-size: var(--ico-chico); color: var(--tinta-simbolo); flex: 0 0 auto; }

/* Los periodos del año, en una linea: no son botones, son el resumen de lo que hay adentro.
   Doce columnas fijas, una por mes -no fluye mas-, para que el mes 7 caiga en el mismo lugar
   tenga o no deuda ese año (maqueta 5d, 27-08). El "1" arranca justo debajo del +/- de arriba
   -sangria-periodo ya es esa cuenta, sin sumarle nada mas- y el espacio entre columnas subio
   un escalon: pegado se notaba mas con los meses de dos digitos (10/11/12), que ya de por si
   pesan mas que "1" y dejaban menos aire libre a los costados (Maxi, 27-08). */
.anio-chips {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); justify-items: center;
  align-items: center; gap: 0 var(--aire-4);
  /* +1: la casilla del año mide un punto mas que la de la tabla -marca-caja contra
     marca-tabla-, y esa diferencia hay que sumarla para llegar al mismo lugar (Maxi, 27-08). */
  padding: 0 var(--aire-8) var(--aire-4) calc(var(--sangria-periodo) + var(--marca-caja) - var(--marca-tabla));
  font-size: var(--tam-meta); line-height: var(--alto-texto);
}
.anio-chip { color: var(--tinta-tenue); font-weight: var(--peso-medio); }
.anio-chip[data-on="1"] { color: var(--tinta); font-weight: var(--peso-titulo); }
/* El mes sin deuda ocupa igual su lugar, con un punto: los doce meses quedan siempre en la
   misma columna y se ve a simple vista cuales faltan (maqueta 5d, 27-08). No es un boton. */
.anio-chip-vacio { color: var(--tinta-apagada); cursor: default; }

/* La tabla de periodos. Cuatro columnas fijas: el periodo, el origen, la que rota, y el total
   actualizado. table-layout fijo para que las cifras no muevan las columnas.
   Se probo hacerla llegar a los bordes del recurso, como la tabla ancha de escritorio: sin
   compensar el resto de la tarjeta (cabecera, chips) el tilde quedaba a --aire-9 del tilde
   del año, y aparte desbordaba la pantalla al abrirse. Se descarto: lo que hacia falta era
   solo alinear los tildes entre si, no llevar la tabla al borde (Maxi, 27-08). */
.anio-tabla { border-top: 1px solid var(--linea-suave); }
/* La tabla se ve cuando la tarjeta esta abierta. Cerrada quedan el encabezado y los periodos,
   que son el resumen; abierta los periodos sobran, porque estan en la tabla. */
.anio:not([data-abierta="1"]) .anio-tabla { display: none; }
.anio[data-abierta="1"] .anio-chips { display: none; }
.anio-tabla table {
  width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed;
}
/* El ancho de cada columna. Con table-layout fijo, sin esto las cuatro salen iguales: el
   rotulo deja de estar arriba de su columna y el boton del periodo se comprime.
   Son los del diseño; la pantalla los puede pisar con --anio-cols-N si alguna vez hace falta. */
.anio-tabla th:nth-child(1) { width: var(--anio-col-per, 80px); }
.anio-tabla th:nth-child(2) { width: var(--anio-col-ori, 88px); }
.anio-tabla th:nth-child(3) { width: var(--anio-col-rot, 84px); }
.anio-tabla th:nth-child(4) { width: var(--anio-col-act, 104px); }
.anio-tabla th {
  font-size: var(--tam-rotulo); font-weight: var(--peso-fuerte); letter-spacing: .04em;
  text-transform: uppercase; height: 30px;
  /* La maqueta lo pone en un gris que no llega al minimo sobre este fondo. Es el rotulo de una
     columna: se lee. */
  color: var(--tinta-tenue);
  background: var(--fondo-suave); border-bottom: 1px solid var(--linea-tarjeta);
  /* El navegador le pone 1px de relleno a un th, y el interlineado del cuerpo lo estira: la
     banda medía 33 en vez de los 30 del diseño. */
  padding: 0; line-height: var(--alto-icono); box-sizing: border-box;
}
/* El tilde del periodo cae en la misma vertical que el del año -antes se sangraba a proposito
   para separarlos, ahora se busca lo contrario- (Maxi, 27-08). */
.anio-tabla th:first-child { text-align: center; padding-left: var(--aire-8); }
.anio-tabla td:first-child { padding: 0 0 0 var(--aire-8); }
/* La celda no lleva alto: lo pone el boton, que es quien se toca. */
.anio-per-caja { display: flex; align-items: center; }
.anio-tabla td {
  border-bottom: 1px solid var(--linea-fila); text-align: right;
  font-size: var(--tam-dato); color: var(--tinta-media); white-space: nowrap;
  padding: 0 var(--aire-2);
}
/* La ultima columna, contra el borde de verdad ahora: el mismo aire que la primera, no el
   --aire-2 chico que separa las columnas entre si (maqueta 5d, 28-08). */
.anio-tabla th:last-child { padding-right: var(--aire-8); }
.anio-tabla td:last-child { padding-right: var(--aire-8); }
.anio-tabla tr:last-child td { border-bottom: none; }
.anio-tabla .col-total { font-weight: var(--peso-fuerte); color: var(--tinta); }
/* La fila entera se pinta si el periodo esta elegido -no solo el tilde y el numero-, igual que
   .tabla-fila en la tabla de escritorio: la maqueta 5d tambien pinta toda la fila. Se habia
   armado sin esto (Maxi, 27-08). */
/* Verde de año completo a proposito, no el celeste de la fila hija de escritorio: la maqueta
   5d trae #f3f8fb en fondoFila, pero Maxi pidio este mismo verde (27-08). */
.anio-tabla tr[data-marcada="1"] { background: var(--ok-fondo); }

/* El periodo es un boton, y ocupa su columna entera: el tilde a la izquierda. El numero ya no
   va contra el borde derecho -quedaba lejos del tilde-: va pegado, con el mismo aire que separa
   al tilde del +/- en la cabecera del año, para que caiga debajo (Maxi, 27-08). NO es una
   pastilla -eso era 5a, que en angosto no se usa-. El tilde es la misma pieza de la tabla, que
   ya mide 19: la de 20 es la del año. */
.anio-per {
  display: flex; align-items: center; gap: var(--aire-4); width: 100%;
  min-height: var(--toque); border: none; background: none; padding: 0;
  font-family: var(--tipo-ui); cursor: pointer;
}
.anio-per[data-on="1"] .tabla-marca { border-color: var(--ok); background: var(--ok); }
/* Ancho minimo de dos cifras y alineado a la derecha: sin esto "1" y "12" no comparten el
   mismo borde y el ojo no los lee en la misma columna (Maxi, 27-08). */
.anio-per-nro {
  flex: 0 0 auto; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: var(--peso-titulo); font-size: var(--tam-meta); color: var(--tinta-media);
}
.anio-per[data-on="1"] .anio-per-nro { color: var(--tinta); }

/* La columna que rota: mora, interes y multa se turnan en el mismo lugar. Las tres no entran, y
   sacar una perderia el dato. El encabezado es el que las cambia.
   Mora es interes + multa; tocando el rotulo se abre en sus dos partes.

   Los tres valores estan ESCRITOS en la celda y el CSS elige cual se lee. Asi sin JavaScript se
   ve el primero en vez de una columna vacia, y rotar no tiene que ir a buscar nada. */
.anio-rota { cursor: pointer; user-select: none; }
.anio-rota-nombre { color: var(--petroleo); }
.anio-rota .msym { font-size: var(--ico-micro); color: var(--rota-glifo); }

/* Escondidos los tres, y se enciende el que toca. Sin el atributo se ve mora, que es el que
   viene del servidor: asi la columna nunca sale vacia si el JavaScript no corre. */
.anio-rota > span, .anio-rota-valor { display: none; }
.anio-tabla:not([data-col]) .anio-rota > [data-col="mora"],
.anio-tabla[data-col="mora"] .anio-rota > [data-col="mora"],
.anio-tabla[data-col="i"]    .anio-rota > [data-col="i"],
.anio-tabla[data-col="m"]    .anio-rota > [data-col="m"] {
  display: flex; align-items: center; justify-content: center; gap: var(--aire-1); height: 30px;
  padding: 0 var(--aire-2);
}
.anio-tabla:not([data-col]) .anio-rota-valor[data-col="mora"],
.anio-tabla[data-col="mora"] .anio-rota-valor[data-col="mora"],
.anio-tabla[data-col="i"]    .anio-rota-valor[data-col="i"],
.anio-tabla[data-col="m"]    .anio-rota-valor[data-col="m"] { display: inline; }

@media (prefers-reduced-motion: no-preference) {
  .anio-rota-nombre, .anio-rota-valor { animation: sube-valor var(--t-media) var(--curva-ui) both; }
}
/* Sube desde abajo: se lee que el valor se reemplazo, no que la tabla cambio. */
@keyframes sube-valor { from { opacity: 0; transform: translateY(8px); } }

/* ---------- El encabezado de un imponible ---------- */
/* Arriba de la cuenta corriente: de quien es la deuda que se esta mirando. El glifo y su tinte
   salen del tipo, igual que en la lista de cuentas. */
.imp-cab { display: flex; align-items: center; gap: var(--aire-6); }
.imp-glifo {
  width: 38px; height: 38px; border-radius: var(--r-medio); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.imp-glifo .msym, .imp-glifo .lapida { font-size: var(--ico-base); }
.imp-datos { min-width: 0; }
.imp-alias {
  font-family: var(--tipo-titulo); font-size: var(--tam-tarjeta);
  font-weight: var(--peso-titulo); color: var(--tinta); line-height: var(--alto-compacto);
}
/* El tipo y su numero. La maqueta lo pone en un gris que no llega al minimo, y es el dato que
   identifica de que imponible se esta hablando. */
.imp-numero { font-size: var(--tam-meta); color: var(--tinta-tenue); }
.imp-cuantos { font-size: var(--tam-meta); color: var(--tinta-tenue); margin-top: var(--aire-3); }
.imp-cab[data-tipo="I"] .imp-glifo { background: var(--inmueble-tinte); color: var(--inmueble); }
.imp-cab[data-tipo="R"] .imp-glifo { background: var(--rodado-tinte); color: var(--rodado); }
.imp-cab[data-tipo="C"] .imp-glifo { background: var(--comercio-tinte); color: var(--comercio); }
.imp-cab[data-tipo="E"] .imp-glifo { background: var(--cementerio-tinte); color: var(--cementerio); }

/* ---------- Un recurso, y lo que tiene adentro ---------- */
/* La deuda de un imponible viene partida por recurso -tasa, patente, derechos-, y cada uno se
   abre por separado. Adentro va su tabla, o el aviso de que no debe nada.
   No es una caja: es una banda separada por una linea, para que la lista se lea como una sola
   cosa y no como tarjetas sueltas. */
/* Cada recurso es su propia tarjeta, con su borde y su radio -no filas de una caja comun-. La
   cabecera se toca siempre y el cuerpo se pliega abajo. */
.recurso {
  margin-top: var(--aire-8); background: var(--papel);
  border: 1px solid var(--linea-tarjeta); border-radius: var(--r-caja);
}
/* La fila lleva el boton que pliega -crece- y el de mas acciones -su tamaño fijo- (27-08). */
.recurso-cab-fila { display: flex; align-items: center; }
.recurso-cab {
  display: flex; align-items: center; gap: var(--aire-6);
  flex: 1; min-width: 0; background: none; border: none; padding: var(--aire-8) var(--aire-9);
  cursor: pointer; text-align: left;
  /* Un <button> no hereda la letra ni el color: sin esto se queda con los del navegador. */
  font-family: var(--tipo-ui); font-size: var(--tam-base); color: var(--tinta);
}
/* Sin deuda en ningun recurso no hay nada que desplegar: la flecha queda cerrada y no es mano. */
.recurso-cab[aria-disabled="true"] { cursor: default; }
/* Afuera del boton que pliega, mismo aspecto que .cc-plegar-todo -icono solo, 44px- (27-08). */
.recurso-mas {
  border: none; background: transparent; color: var(--tinta-simbolo); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--toque); height: var(--toque); border-radius: var(--r-mini); margin-right: var(--aire-7);
}
.recurso-mas:hover { background: var(--fondo-hover); color: var(--tinta); }
.recurso-mas .msym { font-size: var(--ico-base); }
/* El estado del recurso, de un vistazo: ambar el que debe, verde el que no. */
.recurso-estado { font-size: var(--ico-base); flex: 0 0 auto; color: var(--ambar); }
.recurso[data-deuda="0"] .recurso-estado { color: var(--ok); }
.recurso-nombre {
  font-size: var(--tam-bloque); font-weight: var(--peso-fuerte); color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Ya no es un monto, es el estado: "Con deuda" en ambar o "Al dia" en verde -mismos colores
   que .recurso-estado, es el mismo dato dicho dos veces- (Maxi, maqueta 5c, 27-08). */
.recurso-monto {
  margin-left: auto; font-size: var(--tam-base); font-weight: var(--peso-fuerte);
  color: var(--ambar); flex: 0 0 auto; white-space: nowrap;
}
.recurso[data-deuda="0"] .recurso-monto { color: var(--ok); }
.recurso-flecha {
  font-size: var(--ico-base); color: var(--tinta-apagada); flex: 0 0 auto;
  transition: transform var(--t-rapida) var(--curva-ui);
}
.recurso:not([data-abierto="1"]) .recurso-flecha { transform: rotate(-90deg); }
/* Se pliega en vez de aparecer: es el mismo mecanismo que .plegable -de 0fr a 1fr-, escrito
   aca porque el hijo que se achica es el cuerpo entero y no un bloque suelto.
   Con display:none no habia nada que animar y el recurso saltaba. */
.recurso-cuerpo {
  display: grid; grid-template-rows: 1fr; overflow: hidden;
  transition: grid-template-rows var(--t-media) var(--curva-ui);
}
.recurso:not([data-abierto="1"]) .recurso-cuerpo { grid-template-rows: 0fr; }
.recurso-adentro {
  min-height: 0; min-width: 0;
  padding: var(--aire-9) var(--aire-9) var(--aire-10);
  border-top: 1px solid var(--linea-suave);
  transition: padding var(--t-media) var(--curva-ui), border-top-width var(--t-media) var(--curva-ui);
}
/* Cerrado, el relleno va en cero a mano: el de un item de grilla NO entra en el 0fr, la fila
   vale cero y esos pixeles siguen ocupando. Eran 47 -20 + 26 + el borde-. */
.recurso:not([data-abierto="1"]) .recurso-adentro {
  padding-top: 0; padding-bottom: 0; border-top-width: 0;
}
.recurso-titulo {
  font-family: var(--tipo-titulo); font-size: var(--tam-bloque); font-weight: var(--peso-fuerte);
  color: var(--tinta); margin-bottom: var(--aire-6);
}

/* ---------- La barra de acciones ---------- */
/* Al pie de lo que se esta mirando: lo que se puede hacer con lo elegido. Siempre las mismas y
   en el mismo orden, para que la mano las encuentre sin leer.
   Las tres van juntas contra el borde derecho, separadas del detalle por una linea. */
.acciones {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: var(--aire-6);
  margin-top: var(--aire-9); padding-top: var(--aire-9);
  border-top: 1px solid var(--linea-suave);
}

/* Pagar es lo unico que mueve plata, y va en el verde de la seleccion: el mismo con el que se
   marco lo que se va a pagar. */
.btn-ok {
  background: var(--ok); color: var(--sobre-barra); border: none;
  padding: var(--aire-7) var(--aire-10); font-weight: var(--peso-fuerte); font-size: var(--tam-base);
}
.btn-ok:hover { background: var(--ok-texto); color: var(--sobre-barra); }
.btn-ok .msym { font-size: var(--ico-base); }


/* Apagado. Va con aria-disabled y NO con disabled: un boton deshabilitado no dispara eventos de
   mouse, asi que su ayuda no aparece nunca -sistema_visual.md §5-ter-. */
.btn-linea[aria-disabled="true"], .btn-ok[aria-disabled="true"] { cursor: default; }
.btn-linea[aria-disabled="true"] {
  color: var(--gris-simbolo); border-color: var(--linea-tarjeta); background: var(--papel);
}
.btn-linea[aria-disabled="true"]:hover {
  color: var(--gris-simbolo); border-color: var(--linea-tarjeta); background: var(--papel);
}
.btn-linea[aria-disabled="true"]:hover .msym { color: var(--gris-simbolo); }
.btn-ok[aria-disabled="true"], .btn-ok[aria-disabled="true"]:hover { background: var(--linea-marca); }

/* Por que un boton no se puede tocar. Aparece al intentarlo, no antes: si estuviera siempre,
   seria un cartel que nadie lee. */
.acciones-aviso {
  display: flex; align-items: flex-start; gap: var(--aire-5); width: 100%;
  background: var(--fondo-suave); border: 1px solid var(--linea-pie); border-radius: var(--r-campo);
  padding: var(--aire-6) var(--aire-7); margin-top: var(--aire-7);
  font-size: var(--tam-meta); color: var(--tinta-media); line-height: var(--alto-compacto);
}
.acciones-aviso .msym { font-size: var(--ico-base); color: var(--petroleo); flex: 0 0 auto; }

/* En una pantalla angosta los tres no entran en una linea, y salir de distinto ancho se lee
   como que uno importa mas. Van apilados y del mismo ancho, con Pagar arriba: es lo que la
   pantalla quiere que hagas. */
@media (max-width: 560px) {
  .acciones { flex-direction: column; align-items: stretch; }
  .acciones > button { width: 100%; }
  .acciones .btn-ok { order: -1; }
}


/* ---------- El rastro de donde estas ---------- */
/* Va abajo de la barra, en todas las pantallas del lado privado y a cualquier ancho. Antes esto
   eran DOS cosas para lo mismo: una navegacion adentro de la barra en escritorio y una franja
   aparte en el telefono, con los mismos dos enlaces escritos dos veces en el HTML.
   El separador lo pone el CSS: no es contenido, es puntuacion, y un lector de pantalla no tiene
   que leerlo. */
.migas {
  display: flex; align-items: center; justify-content: space-between; gap: var(--aire-6);
  padding-block: var(--aire-7);
  padding-inline: max(var(--aire-8), calc((100% - var(--ancho-max)) / 2));
  background: var(--papel); border-bottom: 1px solid var(--linea-tarjeta);
  flex: 0 0 auto;
}
.migas-rastro {
  display: flex; align-items: center; gap: var(--aire-3);
  list-style: none; margin: 0; padding: 0; min-width: 0;
}
.migas-rastro li {
  display: flex; align-items: center; gap: var(--aire-3);
  font-size: var(--tam-dato); color: var(--tinta-cuerpo); white-space: nowrap;
}
.migas-rastro li + li::before {
  content: '›'; color: var(--gris-simbolo); font-size: var(--tam-bloque); line-height: 1;
}
.migas-rastro a { color: var(--enlace); }
.migas-rastro a:hover { color: var(--petroleo); }
.migas-rastro [aria-current="page"] { font-weight: var(--peso-fuerte); color: var(--tinta); }
.migas-ayuda {
  display: flex; align-items: center; gap: var(--aire-3); flex: 0 0 auto;
  font-size: var(--tam-dato); color: var(--tinta-tenue); white-space: nowrap;
}
.migas-ayuda .msym { font-size: var(--ico-linea); }
.migas-ayuda:hover { color: var(--petroleo); }

/* ---------- La cabecera de una pantalla ---------- */
/* Todas se presentan igual: glifo, titulo y una linea de bajada, y opcionalmente una accion a la
   derecha. Estaba escrita en mis_cuentas.css y la iba a copiar una tercera vez al armar Asociar. */
.pant-cab {
  background: var(--papel); border: 1px solid var(--linea-tarjeta);
  border-radius: var(--r-caja); padding: var(--aire-9) var(--aire-10);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--aire-8); flex-wrap: wrap;
}
.pant-cab-txt { display: flex; align-items: center; gap: var(--aire-8); min-width: 0; }
.pant-glifo {
  width: var(--ico-anillo); height: var(--ico-anillo); border-radius: var(--r-campo);
  background: var(--pastilla-fondo); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.pant-glifo .msym, .pant-glifo .lapida { font-size: var(--ico-grande); color: var(--petroleo); }
/* Con tipo, el glifo toma su color: el mismo par tinte/color que la fila de una cuenta. La
   pantalla lo pide poniendo `tipo` en el embed de la cabecera. */
.pant-cab[data-tipo="I"] .pant-glifo { background: var(--inmueble-tinte); }
.pant-cab[data-tipo="R"] .pant-glifo { background: var(--rodado-tinte); }
.pant-cab[data-tipo="C"] .pant-glifo { background: var(--comercio-tinte); }
.pant-cab[data-tipo="E"] .pant-glifo { background: var(--cementerio-tinte); }
.pant-cab[data-tipo="I"] .pant-glifo .msym, .pant-cab[data-tipo="I"] .pant-glifo .lapida { color: var(--inmueble); }
.pant-cab[data-tipo="R"] .pant-glifo .msym, .pant-cab[data-tipo="R"] .pant-glifo .lapida { color: var(--rodado); }
.pant-cab[data-tipo="C"] .pant-glifo .msym, .pant-cab[data-tipo="C"] .pant-glifo .lapida { color: var(--comercio); }
.pant-cab[data-tipo="E"] .pant-glifo .msym, .pant-cab[data-tipo="E"] .pant-glifo .lapida { color: var(--cementerio); }
.pant-datos { min-width: 0; line-height: var(--alto-compacto); }
.pant-titulo {
  /* El margen que trae el h1 del navegador infla la tarjeta 24 px y separa el titulo de su
     bajada. Va en cero. */
  display: block; margin: 0;
  font-family: var(--tipo-titulo); font-weight: var(--peso-titulo);
  font-size: var(--tam-tarjeta); color: var(--tinta); letter-spacing: -.01em;
}
/* El boton de la cabecera es el chico: al lado de un titulo de 18 el grande se come la tarjeta. */
.pant-cab .btn-linea {
  padding: var(--aire-5) var(--aire-8); font-size: var(--tam-dato);
  border-radius: var(--r-medio); gap: var(--aire-3);
}
.pant-cab .btn-linea .msym { font-size: var(--ico-base); }
.pant-bajada { display: block; font-size: var(--tam-meta); color: var(--tinta-tenue); margin-top: var(--aire-1); }

@media (max-width: 720px) {
  /* La cabecera en telefono. Estaba en mis_cuentas.css y es de todas las pantallas. */
  .pant-titulo { font-size: var(--tam-tarjeta-cel); }
  .pant-glifo { width: var(--ico-anillo-cel); height: var(--ico-anillo-cel); border-radius: var(--r-medio); }
  .pant-glifo .msym { font-size: var(--ico-chico); }
  .pant-cab { gap: var(--aire-6); }
  /* Sin la palabra el boton es un cuadrado del area tactil, no del anillo: con --ico-anillo
     quedaba mas grande que el glifo que lleva adentro y competia con el titulo. --toque es el
     minimo que la norma pide para el dedo, asi que no se puede achicar mas. */
  .pant-cab .btn-linea {
    width: var(--toque); height: var(--toque);
    padding: 0; gap: 0; border-radius: var(--r-campo);
    justify-content: center; align-self: flex-start;
  }
  .pant-cab .btn-linea .msym { font-size: var(--ico-base); }
  .pant-cab .btn-rotulo { display: none; }
}

/* ---------- El cuerpo de una pantalla ---------- */
/* El fondo de nodos y el ancho del contenido. Estaba en mis_cuentas.css y copiado en cuenta.css
   con otros nombres; al armar Asociar iba a ser la tercera copia.
   El relleno de arriba es menos que el de abajo desde que existe la franja de las migas: ella ya
   separa de la barra, y con los 34 de antes la tarjeta quedaba muy despegada. */
.pant-body {
  background: var(--fondo-claro) url('/img/nodos-claro.png') center / cover no-repeat;
  padding: var(--aire-9) var(--aire-11) var(--aire-14);
}

/* El contenido va mas angosto que la barra: 960 contra el ancho del sitio. Es de la maqueta y
   no un token porque es de esta pantalla. */
.pant-ancho { width: 100%; max-width: 960px; margin: 0 auto; }
.pant-body { flex: 1; }

@media (max-width: 720px) {
  .pant-body { padding: var(--aire-8) var(--aire-6) var(--aire-11); }
}
@media (max-width: 480px) {
  .pant-body { padding: var(--aire-7) var(--aire-6) var(--aire-10); }
}

/* El pie de botones de un modal. Estaba en mis_cuentas.css, y Asociar -que no carga esa hoja- se
   quedaba sin el: los dos botones salian de distinto ancho.
   Los dos miden lo mismo. Dos botones pegados de distinto tamaño se leen como si uno importara
   mas que el otro, y aca la eleccion es libre. */
/* El modal de esta pantalla no lleva cabecera con X ni pie con linea: es un bloque solo, como en
   la maqueta. El titulo y los botones van adentro del cuerpo. */
.modal-rotulo { font-size: var(--tam-meta); font-weight: var(--peso-fuerte); color: var(--tinta-media); margin-top: var(--aire-5); }
.modal-botones { display: flex; gap: var(--aire-6); margin-top: var(--aire-4); }
.modal-botones > * { flex: 1 1 0; }

/* ------------------------------------------------------------------ */
/* La fecha de pago de un bloque de la cuenta corriente: "Vencimiento: dd/mm/aaaa" con su
   calendario (maqueta 5c/5d). El popover se teleporta al body y va en position:fixed -el JS le
   pone left/bottom sobre el boton, abriendo hacia arriba-: asi ningun overflow de la tabla o del
   plegable lo recorta. La logica en Alpine.data('venc'). */
.venc { display: inline-flex; align-items: center; gap: var(--aire-3); flex: 0 0 auto; }
.venc-txt { font-size: var(--tam-dato); color: var(--piel-total-rotulo); font-weight: var(--peso-medio);
  white-space: nowrap; }
.venc-txt b { font-weight: var(--peso-fuerte); color: var(--tinta); }
.venc-btn { display: flex; align-items: center; justify-content: center; background: transparent;
  border: none; padding: 0; color: var(--petroleo); cursor: pointer; line-height: 0; }
.venc-btn:hover { color: var(--tinta); }
.venc-btn .msym { font-size: var(--ico-base); }
/* El calendario es un <dialog>: el navegador lo centra y lo pone en la top-layer, sin position ni
   z-index. Mismo cuadro que el popup; el velo lo separa de la pantalla. Alto fijo -6 filas siempre,
   como Google Calendar-: no cambia de alto al pasar de mes, asi las flechas quedan quietas. */
.venc-cal { box-sizing: border-box; width: 334px; max-width: calc(100vw - var(--aire-8) * 2);
  background: var(--papel); border: 1px solid var(--linea-flotante); border-radius: var(--r-boton);
  box-shadow: var(--sombra-menu); padding: var(--aire-8); text-align: left; }
/* Entra y sale como el resto de los modales -.modal-: opacity + scale, y overlay/display discretas
   para que el navegador anime el dialog sin JavaScript. @starting-style da el estado del que sale. */
.venc-cal { opacity: 0; scale: .97;
  transition: opacity var(--t-rapida) var(--curva-ui), scale var(--t-media) var(--curva-ui),
              overlay var(--t-media) allow-discrete, display var(--t-media) allow-discrete; }
.venc-cal[open] { opacity: 1; scale: 1; }
@starting-style { .venc-cal[open] { opacity: 0; scale: .97; } }
.venc-cal::backdrop { background: var(--velo); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--t-media) var(--curva-ui), overlay var(--t-media) allow-discrete, display var(--t-media) allow-discrete; }
.venc-cal[open]::backdrop { opacity: 1; }
@starting-style { .venc-cal[open]::backdrop { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .venc-cal, .venc-cal::backdrop { transition: none; } .venc-cal { scale: 1; } }
/* las flechas van a los bordes -simetricas- y el mes queda centrado por el space-between */
.venc-cal-cab { display: flex; align-items: center; justify-content: space-between;
  gap: var(--aire-3); margin-bottom: var(--aire-2); }
.venc-mes { text-align: center; font-size: var(--tam-dato); font-weight: var(--peso-fuerte); color: var(--tinta); }
.venc-nav { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: var(--r-mini); color: var(--petroleo); cursor: pointer; }
.venc-nav .msym { font-size: var(--ico-base); }
.venc-nav:disabled { opacity: .3; cursor: default; }
.venc-nav:hover:not(:disabled) { background: var(--fondo-hover); }
.venc-dow, .venc-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--venc-celda); }
.venc-dias { margin-top: var(--venc-celda); }
.venc-dow span { text-align: center; font-size: var(--venc-dow); font-weight: var(--peso-fuerte);
  color: var(--verde-sip); padding: var(--venc-celda) 0; }
.venc-dias-enviando { opacity: .55; pointer-events: none; }
.venc-dia { height: 36px; display: flex; align-items: center; justify-content: center; border: none;
  border-radius: var(--r-mini); background: transparent; color: var(--petroleo); cursor: pointer;
  font-family: inherit; font-size: var(--venc-dia); font-weight: var(--peso-medio); font-variant-numeric: tabular-nums; }
.venc-dia:hover:not(:disabled) { background: var(--fondo-hover); }
/* dias del mes anterior o siguiente, en gris: completan las 6 filas sin dejar hueco */
.venc-dia.venc-otro { color: var(--tinta-apagada); }
.venc-dia.venc-fuera { color: var(--tinta-apagada); cursor: default; }
/* el elegido: fondo tenue mas un anillo fino petroleo, asi se distingue del hover sin ser lleno */
.venc-dia.venc-sel { background: var(--fondo-hover); color: var(--petroleo); font-weight: var(--peso-fuerte);
  box-shadow: inset 0 0 0 1px var(--petroleo); }
/* el pie: Cancelar y Aceptar del mismo ancho, repartiendo todo el ancho del cuadro */
.venc-pie { display: flex; align-items: center; gap: var(--aire-6); margin-top: var(--aire-6); }
/* misma relacion de colores que el Cancelar de los demas modales -.btn-linea-: papel con borde y
   texto petroleo, y al pasar el mouse invierte a fondo petroleo con letra blanca */
.venc-cancelar { flex: 1; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--petroleo); background: var(--papel); border-radius: var(--r-boton);
  color: var(--petroleo); cursor: pointer; font-family: inherit; font-size: var(--venc-boton); font-weight: var(--peso-fuerte); }
.venc-cancelar:hover { background: var(--petroleo); color: var(--sobre-barra); }
/* el borde transparente iguala el ancho con el Cancelar -que si tiene borde- al repartir con flex */
.venc-ok { flex: 1; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid transparent; border-radius: var(--r-boton); background: var(--petroleo); color: var(--papel);
  cursor: pointer; font-family: inherit; font-size: var(--venc-boton); font-weight: var(--peso-fuerte); }
.venc-ok:hover:not(:disabled) { background: var(--petroleo-osc); }
.venc-ok:disabled { opacity: .6; cursor: default; }
.venc-falla { margin: var(--aire-3) 0 0; font-size: var(--tam-meta); color: var(--error-texto); }
/* en el pie de la tabla el control queda a la izquierda; el rotulo ya empuja a la derecha */
.tabla-pie .venc { margin-right: auto; }
/* en el telefono va en su propia fila, abajo del total. Al borde -como las filas de año- y con el
   texto sangrado igual que ellas -padding-left aire-8-, asi "Vencimiento" alinea con los años.
   Padding parejo arriba y abajo, y linea divisoria abajo -separa la deuda de la seccion Plan de Pagos-. */
.venc-fila { display: flex; margin: 0 calc(-1 * var(--aire-9)); padding: var(--aire-5) var(--aire-8);
  border-bottom: 1px solid var(--linea-suave); }
/* el vencimiento del ultimo bloque -sin Plan de Pagos despues- no lleva la linea: no separa nada */
.recurso-adentro > .tabla-caja:last-child .venc-fila { border-bottom: none; }
@media (max-width: 720px) {
  .venc-nav { width: 44px; height: 44px; border-radius: var(--venc-radio-cel); }
  /* fijo -no la escala del telefono, que lo dejaba mas chico que los dias- y un punto sobre ellos */
  .venc-mes { font-size: var(--venc-mes-cel); }
  .venc-dow span { font-size: var(--venc-dow-cel); }
  .venc-dia { height: 44px; font-size: var(--venc-dia); border-radius: var(--venc-radio-cel); }
  /* los botones del pie mantienen el --r-boton del sitio, no el radio de las celdas */
  .venc-ok, .venc-cancelar { height: 44px; font-size: var(--venc-dia); }
}