/* Lo propio de la pantalla de Acceso: el escenario donde la ilustracion se corre a la
   izquierda y el formulario entra por la derecha, y las baldosas de abajo.
   Los nombres de clase son los del diseño (ac-*), para poder cotejar el portal contra la
   maqueta a simple vista. */

/* El escenario. Adentro todo es absoluto, asi que su alto lo fija el JS midiendo el
   contenido; por debajo de 1024 pasa a auto y el JS no interviene. */
.ac-stage {
  overflow: hidden;
  transition: height var(--t-lenta) var(--curva);
}
/* El fondo de nodos va en #contenido, no en el stage: al stage el JS le pone el alto del
   contenido y en login queda corto, sin llegar al pie. La pagina de acceso es flex-column asi
   el pie queda al fondo y el fondo de nodos llena hasta ahi. */
.app[data-mode] { min-height: 100dvh; display: flex; flex-direction: column; }
.app[data-mode] #contenido { flex: 1 0 auto; background: var(--fondo-claro) url('/img/nodos-claro.png') center/cover no-repeat; }
/* Adentro va el marco del que cuelgan la ilustracion y el panel. El fondo queda afuera, asi
   ocupa toda la ventana mientras el contenido se queda en el ancho del diseño. */
.ac-stage-in { position: relative; height: 100%; max-width: var(--ancho-max); margin-inline: auto; }

.ac-art {
  position: absolute; top: 0; bottom: 0; left: 0; width: 46%;
  display: flex; align-items: center; justify-content: center; padding: var(--aire-11);
  transform: translateX(117.4%);
  transition: transform var(--t-escena) var(--curva);
  will-change: transform;
}
.ac-art picture { display: block; width: 100%; max-width: 430px; }
.ac-art img { width: 100%; height: auto; max-height: 100%; object-fit: contain; display: block; }

.ac-welcome {
  position: absolute; top: 0; bottom: 0; left: 0; width: 54%; padding: var(--aire-13) var(--aire-14);
  display: flex; flex-direction: column; justify-content: center;
  transition: opacity var(--t-fundido-sale) ease var(--t-demora-sale), transform var(--t-desliz-sale) var(--curva) var(--t-demora-sale);
}
.ac-panel {
  position: absolute; top: 0; bottom: 0; right: 0; width: 54%; padding: var(--aire-12) var(--aire-14);
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateX(30px); pointer-events: none;
  transition: opacity var(--t-fundido-entra) ease var(--t-demora-entra), transform var(--t-desliz-entra) var(--curva) var(--t-demora-entra);
}
/* Son fieldset y no div para poder apagar de una el panel que no es el modo activo: el navegador
   autocompleta los campos de los otros aunque esten en display:none. El min-width va si o si, que
   el fieldset trae min-content de fabrica y eso desarma las filas de dos columnas. */
.ac-login, .ac-register, .ac-clave {
  display: none;
  border: 0; margin: 0; padding: 0; min-width: 0;
}

/* Crear cuenta: tres pasos. Con JavaScript se ve uno por vez; sin JavaScript se ven los tres
   seguidos y el ultimo boton envia igual, asi el alta no depende del navegador. */
.ac-stage[data-mode="register"] .ac-art     { transform: translateX(0); }
.ac-stage[data-mode="register"] .ac-welcome { opacity: 0; transform: translateX(-26px); pointer-events: none; transition-delay: 0s; }
.ac-stage[data-mode="register"] .ac-panel   { opacity: 1; transform: translateX(0); pointer-events: auto; }
.ac-stage[data-mode="register"] .ac-register { display: block; }
.app[data-mode="register"] .ac-tiles { grid-template-rows: 0fr; opacity: 0; transition-delay: 0s, 0s; }
.app[data-mode="register"] .ac-tiles > .ac-tiles-in { padding-top: 0; padding-bottom: 0; }

/* El indicador de pasos y el salto entre uno y otro */
.ac-steps { display: flex; align-items: center; gap: var(--aire-6); margin-top: var(--aire-8); }
.ac-steps-barras { display: flex; gap: var(--aire-3); flex: 0 0 auto; }
.ac-steps-barra { width: 34px; height: 4px; border-radius: 2px; background: var(--linea-campo); }
.ac-steps-barra.activa { background: var(--petroleo); }
.ac-steps-txt { font-size: var(--tam-meta); font-weight: var(--peso-fuerte); color: var(--tinta-suave); }
.ac-rtitle { font-family: var(--tipo-titulo); font-weight: var(--peso-titulo); font-size: var(--tam-acceso-titulo); color: var(--tinta); letter-spacing: -.015em; }
.ac-rsub   { font-size: var(--tam-base); color: var(--tinta-suave); margin-top: var(--aire-7); }
.ac-paso-botones { display: flex; gap: var(--aire-6); margin-top: var(--aire-9); }
.ac-paso-botones .btn-linea { padding: var(--aire-7) var(--aire-9); font-size: var(--tam-base); flex: 0 0 auto; border-color: var(--linea-campo); }
.ac-paso-botones .btn-primario { flex: 1; padding: var(--aire-7); font-size: var(--tam-acceso-boton); }

/* Los tres pasos miden distinto, asi que los botones cambiaban de lugar al avanzar. El alto lo
   iguala el JS con el del paso mas alto y los botones se anclan al fondo. El margen del anteultimo
   asegura la separacion cuando el contenido llena el bloque. */
.js .ac-step { display: flex; flex-direction: column; min-height: var(--alto-paso, 0); }
.js .ac-step > :last-child { margin-top: auto; }
.js .ac-step > :nth-last-child(2) { margin-bottom: var(--aire-9); }

/* Con JavaScript, un paso por vez, y el que entra se desliza. Los pasos 4 a 8 son las
   pantallas de resultado: cada una viene de su propia ruta, asi que el servidor manda una sola
   y esta regla la deja visible. */
.js .ac-step { display: none; }
.js .ac-register[data-step="1"] .ac-step1,
.js .ac-register[data-step="2"] .ac-step2,
.js .ac-register[data-step="3"] .ac-step3,
.js .ac-register[data-step="4"] .ac-step4,
.js .ac-register[data-step="5"] .ac-step5,
.js .ac-register[data-step="6"] .ac-step6,
.js .ac-register[data-step="7"] .ac-step7,
.js .ac-register[data-step="8"] .ac-step8,
.js .ac-register[data-step="9"] .ac-step9,
.js .ac-register[data-step="10"] .ac-step10,
.js .ac-register[data-step="11"] .ac-step11 { display: block; animation: acPasoEntra var(--t-media) var(--curva-ui) both; }
.js .ac-register[data-sdir="back"] .ac-step { --sx: -12px; }
@keyframes acPasoEntra { from { opacity: 0; transform: translateX(var(--sx, 12px)); } to { opacity: 1; transform: none; } }

/* En las pantallas de resultado no hay pasos que contar ni a donde volver. */
.ac-register[data-step="4"] .ac-steps, .ac-register[data-step="4"] .ac-rback,
.ac-register[data-step="5"] .ac-steps, .ac-register[data-step="5"] .ac-rback,
.ac-register[data-step="6"] .ac-steps, .ac-register[data-step="6"] .ac-rback,
.ac-register[data-step="7"] .ac-steps, .ac-register[data-step="7"] .ac-rback,
.ac-register[data-step="8"] .ac-steps, .ac-register[data-step="8"] .ac-rback,
.ac-register[data-step="9"] .ac-steps, .ac-register[data-step="9"] .ac-rback,
.ac-register[data-step="10"] .ac-steps, .ac-register[data-step="10"] .ac-rback,
.ac-register[data-step="11"] .ac-steps, .ac-register[data-step="11"] .ac-rback { display: none; }
.ac-step4, .ac-step6, .ac-step7, .ac-step8, .ac-step9,
.ac-step10, .ac-step11 { text-align: center; }
.ac-step4 .ac-ring, .ac-step6 .ac-ring, .ac-step7 .ac-ring, .ac-step8 .ac-ring,
.ac-step9 .ac-ring, .ac-step10 .ac-ring, .ac-step11 .ac-ring { margin-top: var(--aire-9); }
.ac-resultado { font-size: var(--tam-base); color: var(--tinta-media); line-height: var(--alto-texto); margin-top: var(--aire-5); }
.ac-resultado strong { color: var(--tinta); }
.ac-step4 .ac-resultado { margin-top: var(--aire-8); }

/* Lo que va debajo de la bajada de cada pantalla del panel, con el aire del diseño: los campos,
   el resumen del paso 3 y el boton que la cierra. */
.ac-campos { margin-top: var(--aire-8); }
.ac-step .sumgrid { margin-top: var(--aire-8); }
.ac-step > .btn-bloque,
.ac-step form > .btn-bloque,
.ac-cstep > .btn-bloque,
.ac-cstep form > .btn-bloque,
.ac-login form > .btn-bloque { margin-top: var(--aire-9); }
/* El "Ingresar" que va al pie de las pantallas de resultado */
.ac-step > .btn-bloque-chico,
.ac-cstep > .btn-bloque-chico { margin-top: var(--aire-9); }
/* El primer campo arranca con el mismo aire que en las demas pantallas. No se puede borrar la
   regla: aca las filas cuelgan del form y sin ella quedan en los 14 de una fila cualquiera. */
.ac-login form > .row:first-of-type { margin-top: var(--aire-8); }
/* La aclaracion chica al pie de una pantalla */
/* Del mismo tamano que la linea del reenvio, que es lo mismo: una pregunta y su enlace. */
.ac-nota-pie { font-size: var(--tam-dato); color: var(--tinta-tenue); margin-top: var(--aire-7); }
.ac-nota-pie a { color: var(--enlace); font-weight: var(--peso-medio); }

/* Localidad y codigo postal comparten fila */
.ac-loccp { display: grid; grid-template-columns: minmax(0,60fr) minmax(0,40fr); gap: var(--aire-7); }

/* Restablecer la contraseña: cinco pantallas, y cada una llega por su ruta. */
.ac-stage[data-mode="clave"] .ac-art     { transform: translateX(0); }
.ac-stage[data-mode="clave"] .ac-welcome { opacity: 0; transform: translateX(-26px); pointer-events: none; transition-delay: 0s; }
.ac-stage[data-mode="clave"] .ac-panel   { opacity: 1; transform: translateX(0); pointer-events: auto; }
.ac-stage[data-mode="clave"] .ac-clave   { display: block; }
.app[data-mode="clave"] .ac-tiles { grid-template-rows: 0fr; opacity: 0; transition-delay: 0s, 0s; }
.app[data-mode="clave"] .ac-tiles > .ac-tiles-in { padding-top: 0; padding-bottom: 0; }

.ac-ctitle { font-family: var(--tipo-titulo); font-weight: var(--peso-titulo); font-size: var(--tam-acceso-titulo); color: var(--tinta); letter-spacing: -.015em; }
.ac-clave[data-cstep="2"] .ac-cback,
.ac-clave[data-cstep="4"] .ac-cback,
.ac-clave[data-cstep="5"] .ac-cback { display: none; }
.ac-c2, .ac-c4, .ac-c5 { text-align: center; }
.ac-c2 .ac-ring, .ac-c4 .ac-ring { margin-top: var(--aire-9); }

/* Donde la pantalla ya lo dice en grande, el titulo de arriba sobra.
   OJO: la lista va paso por paso. Un paso nuevo con titulo grande hay que agregarlo aca o
   sale dos veces. */
.ac-register[data-step="6"] .ac-rtitle,
.ac-register[data-step="7"] .ac-rtitle,
.ac-register[data-step="8"] .ac-rtitle,
.ac-register[data-step="9"] .ac-rtitle,
.ac-register[data-step="10"] .ac-rtitle,
.ac-register[data-step="11"] .ac-rtitle,
.ac-clave[data-cstep="4"] .ac-ctitle,
.ac-clave[data-cstep="5"] .ac-ctitle { display: none; }

/* Restablecer copia el espaciado de Ingresar para que al pasar de una a otra no se mueva nada:
   el aviso se separa como un campo mas (14) y abajo reserva el alto de la fila de "Recordarme",
   que Restablecer no tiene. El campo arranca a la misma altura sin regla propia: los dos usan
   los 18 de siempre. */
.ac-c1 .aviso     { margin-top: var(--aire-7); margin-bottom: var(--aire-11); }

/* Al cambiar de pantalla no se desplaza nada, solo se funde el que entra. Va parejo con el alto
   del escenario, que tarda lo mismo: si el fundido termina antes, se ve el corte. */
.ac-stage[data-mode="login"] .ac-login,
.ac-stage[data-mode="clave"] .ac-clave,
.ac-stage[data-mode="register"] .ac-register { animation: acFunde var(--t-lenta) var(--curva); }
@keyframes acFunde { from { opacity: 0; } to { opacity: 1; } }

/* Al entrar al alta desde otra pantalla, el paso no se desliza ademas de fundirse: son dos
   movimientos encimados. El deslizamiento queda para cuando se cambia de paso. */
.ac-stage[data-mode="register"] .ac-register:not([data-tocado]) .ac-step { animation: none; }

/* Al pasar a Ingresar: la ilustracion se corre, la bienvenida se va y entra el panel. */
.ac-stage[data-mode="login"] .ac-art     { transform: translateX(0); }
.ac-stage[data-mode="login"] .ac-welcome { opacity: 0; transform: translateX(-26px); pointer-events: none; transition-delay: 0s; }
.ac-stage[data-mode="login"] .ac-panel   { opacity: 1; transform: translateX(0); pointer-events: auto; }
.ac-stage[data-mode="login"] .ac-login   { display: block; }

/* El contenido se agarra de arriba y no se mueve: lo unico que cambia entre una pantalla y otra
   es cuanto se extiende el bloque hacia abajo. Antes el anclaje iba y venia entre arriba, abajo y
   centro, y cada cambio corria todo de lugar. */
.ac-welcome, .ac-panel { justify-content: flex-start; }

.ac-h1 {
  font-family: var(--tipo-titulo); font-weight: var(--peso-titulo); font-size: var(--tam-acceso-h1); line-height: var(--alto-h1);
  color: var(--teal); letter-spacing: -.02em;
}
.ac-h2 {
  font-family: var(--tipo-titulo); font-weight: var(--peso-titulo); font-size: var(--tam-acceso-titulo); line-height: var(--alto-titulo);
  color: var(--tinta); margin-top: var(--aire-6); letter-spacing: -.015em;
}
.ac-beneficios { display: flex; flex-direction: column; gap: var(--aire-6); margin-top: var(--aire-10); }
.ac-beneficio  { display: flex; align-items: center; gap: var(--aire-6); font-size: var(--tam-base); color: var(--tinta-lista); }
.ac-beneficio .msym { font-size: var(--ico-base); color: var(--teal); flex: 0 0 auto; }
.ac-cta { display: flex; gap: var(--aire-6); margin-top: var(--aire-11); flex-wrap: wrap; }

.ac-titulo { font-family: var(--tipo-titulo); font-weight: var(--peso-titulo); font-size: var(--tam-acceso-titulo); color: var(--tinta); letter-spacing: -.015em; }
.ac-bajada { font-size: var(--tam-base); color: var(--tinta-suave); margin-top: var(--aire-3); }
.ac-recordarme { display: flex; align-items: center; justify-content: space-between; margin-top: var(--aire-7); }
.ac-recordarme label { display: flex; align-items: center; gap: var(--aire-4); font-size: var(--tam-dato); color: var(--tinta-media); cursor: pointer; }
.ac-recordarme input { width: 16px; height: 16px; accent-color: var(--petroleo); }
.ac-olvide { font-size: var(--tam-dato); font-weight: var(--peso-medio); color: var(--enlace); }

/* Las baldosas de "¿Que podes asociar y pagar?". Se pliegan al pasar a Ingresar. */
.ac-tiles {
  background: var(--papel); display: grid; grid-template-rows: 1fr; overflow: hidden; opacity: 1;
  transition: grid-template-rows var(--t-lenta) var(--curva),
              opacity var(--t-media) ease var(--t-demora-mosaicos);
}
.ac-tiles > .ac-tiles-in { min-height: 0; max-width: var(--ancho-max); margin-inline: auto; padding: var(--aire-13) var(--aire-14); transition: padding var(--t-lenta) var(--curva); }
.app[data-mode="login"] .ac-tiles { grid-template-rows: 0fr; opacity: 0; transition-delay: 0s, 0s; }
.app[data-mode="login"] .ac-tiles > .ac-tiles-in { padding-top: 0; padding-bottom: 0; }

.ac-tiles-titulo { font-family: var(--tipo-titulo); font-weight: var(--peso-titulo); font-size: var(--tam-acceso-mosaico); color: var(--tinta); letter-spacing: -.01em; }
.ac-tiles-bajada { font-size: var(--tam-base); color: var(--tinta-suave); margin-top: var(--aire-3); }
.ac-tiles-grid   { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--aire-8); margin-top: var(--aire-10); }

.ac-tile { border: 1px solid var(--linea-tarjeta); border-radius: var(--r-caja); padding: var(--aire-9); }
.ac-tile-glifo {
  width: 52px; height: 52px; border-radius: var(--r-caja);
  display: flex; align-items: center; justify-content: center; margin: 0 0 var(--aire-6) 0;
}
.ac-tile-glifo .msym, .ac-tile-glifo .lapida { font-size: var(--tam-acceso-titulo); }
.ac-tile-nombre { font-family: var(--tipo-titulo); font-weight: var(--peso-fuerte); font-size: var(--tam-tarjeta); color: var(--tinta); }
.ac-tile-texto  { font-size: var(--tam-dato); color: var(--tinta-suave); margin-top: var(--aire-2); line-height: var(--alto-texto); }
.ac-tile-texto strong { color: var(--tinta); }

/* Un color por tipo, de tokens */
.ac-tile-inmueble   .ac-tile-glifo { background: var(--inmueble-tinte); color: var(--inmueble); }
.ac-tile-rodado     .ac-tile-glifo { background: var(--rodado-tinte);   color: var(--rodado); }
.ac-tile-comercio   .ac-tile-glifo { background: var(--comercio-tinte); color: var(--comercio); }
.ac-tile-cementerio .ac-tile-glifo { background: var(--cementerio-tinte); color: var(--cementerio); }

/* Aca habia un pie mas compacto para Acceso -logo de 44- para que la pantalla entrara sin
   bajar. Se saco el 21-08: hacia que el pie midiera 69 en Acceso y 99 en el resto, y con el
   logo a 44 su letra chica quedaba en 8.8px, por debajo de todo lo que usa el sitio. Ahora
   las dos franjas miden --franja en todas las pantallas. */

/* ---------- Cortes ---------- */
@media (max-width: 1280px) {
  .ac-welcome { padding: var(--aire-12); }
  .ac-panel   { padding: var(--aire-11) var(--aire-12); }
  .ac-art     { padding: var(--aire-10) var(--aire-9); }
}
@media (max-width: 1024px) {
  /* Se apila: la ilustracion arriba, el contenido abajo, y el alto lo maneja el navegador. */
  .ac-stage { min-height: 0 !important; height: auto !important; }
  /* Apilado no hay escenario de alto fijo: cada paso va con su alto y no se iguala al mas alto
     (el resumen), que dejaba un hueco abajo del boton en los pasos cortos del alta. */
  .js .ac-step { min-height: 0; }
  .ac-art, .ac-welcome, .ac-panel {
    position: static; width: 100%; height: auto; transform: none; padding: var(--aire-11) var(--aire-10);
  }
  .ac-panel { display: none; }
  /* Con el formulario a la vista la ilustracion se va. Apilada arriba mide 347 px, asi que
     el primer campo arrancaba abajo del pliegue y habia que scrollear para leer que te piden.
     En la bienvenida se queda: ahi es lo unico que hay para mirar. */
  .ac-stage[data-mode="login"] .ac-art,
  .ac-stage[data-mode="register"] .ac-art,
  .ac-stage[data-mode="clave"] .ac-art { display: none !important; }
  .ac-stage[data-mode="login"] .ac-panel,
  .ac-stage[data-mode="register"] .ac-panel,
  .ac-stage[data-mode="clave"] .ac-panel      { display: flex; }
  .ac-stage[data-mode="login"] .ac-welcome,
  .ac-stage[data-mode="register"] .ac-welcome,
  .ac-stage[data-mode="clave"] .ac-welcome    { display: none; }
  .ac-h1 { font-size: var(--tam-acceso-h1-medio); }
  .ac-tiles { grid-template-rows: 1fr !important; transition: none; }
  .ac-tiles > .ac-tiles-in { padding: var(--aire-11) var(--aire-10); }
  .app[data-mode="login"] .ac-tiles,
  .app[data-mode="register"] .ac-tiles,
  .app[data-mode="clave"] .ac-tiles { display: none; }
  .ac-tiles-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .ac-art, .ac-welcome, .ac-panel { padding: var(--aire-10) var(--aire-8); }
  .ac-art picture { max-width: 300px; }
  .ac-h1 { font-size: var(--tam-acceso-titulo); }
  .ac-cta { flex-direction: column; }
  .ac-cta > * { width: 100%; }
  .ac-tiles > .ac-tiles-in { padding: var(--aire-10) var(--aire-8); }
  .ac-tiles-grid { grid-template-columns: 1fr; gap: var(--aire-6); }
  /* Localidad y C.P. dejan de compartir fila: en un telefono no entran los dos. */
  .ac-loccp { grid-template-columns: 1fr; }
}