/* ════════════════════════════════════════════════════════════════════
   +Salto - Centro Comercial e Industrial de Salto
   Todo el color sale de los tokens de :root. No hay valores sueltos.
   ════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Fira Sans";src:url("assets/fonts/fira-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans";src:url("assets/fonts/fira-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans";src:url("assets/fonts/fira-sans-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  --fondo:#F5F2ED;
  --superficie:#FFFFFF;
  --tinta:#1F1A15;
  --tinta-suave:#6E655C;
  --naranja:#ED6E00;
  --rio:#0E6E7A;
  --linea:rgba(31,26,21,.12);

  /* Derivados */
  --rio-velo:rgba(14,110,122,.18);
  --hilo:rgba(31,26,21,.016);        /* trama del lino */
  --radio:16px;
  --radio-chico:12px;
  --radio-grande:20px;
  --ancho:480px;
  --borde:20px;

  --cuerpo:"Fira Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

/* Las pantallas declaran display:flex, asi que [hidden] necesita peso
   propio para seguir ocultandolas. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  color:var(--tinta);
  font-family:var(--cuerpo);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;

  /* Lino: dos tramas cruzadas de 3 px, apenas perceptibles. */
  background-color:var(--fondo);
  background-image:
    repeating-linear-gradient(90deg, var(--hilo) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  var(--hilo) 0 1px, transparent 1px 3px);
}

/* ── Motivos de Salto detras de todo ────────────────────────────── */
.tela{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  fill:none;
  stroke:var(--tinta);
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.028;
}
body.en-exito .tela{display:none}

.app{
  position:relative;
  z-index:1;
  max-width:var(--ancho);
  min-height:100dvh;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  padding-inline:calc(var(--borde) + env(safe-area-inset-left)) calc(var(--borde) + env(safe-area-inset-right));
}

@keyframes aparecer{from{opacity:0}to{opacity:1}}

/* ════════════════════════════════════════════════════════════════════
   Entrada: los "+" de Salto, cuatro tiempos y el logo. 4,4 s en total.
   ════════════════════════════════════════════════════════════════════ */
.entrada{
  position:fixed;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  padding:var(--borde);
  background-color:var(--fondo);
  background-image:
    repeating-linear-gradient(90deg, var(--hilo) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  var(--hilo) 0 1px, transparent 1px 3px);
  animation:entrada-salir .45s ease-in 4.15s both;
}
@keyframes entrada-salir{to{opacity:0;visibility:hidden}}

/* Todas las piezas comparten viewBox, asi que van todas a left:0 con el
   mismo ancho y se alinean solas. No hay un solo offset que calcular. */
.entrada-escena{
  --w:min(100%,380px);
  position:relative;
  width:var(--w);
  height:calc(var(--w) * .42);
}
.entrada-escena img{
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  height:auto;
  opacity:0;
}

/* El "+" no se mueve en toda la secuencia. Es el eje. */
.entrada-signo{
  transform:translateY(-50%);
  animation:signo 3.75s ease-out .15s both;
}
@keyframes signo{
   0%  {opacity:0}
   6%  {opacity:1}
  82%  {opacity:1}
 100%  {opacity:0}
}

/* Cinco palabras que se relevan sin cruzarse: cada animacion dura
   exactamente lo que su turno, asi ninguna se encima con la siguiente. */
.entrada-palabra{
  animation:palabra .56s ease-out both;
  animation-delay:calc(.30s + var(--turno) * .56s);
}
@keyframes palabra{
   0%  {opacity:0;transform:translateY(calc(-50% + 9px))}
  20%  {opacity:1;transform:translateY(-50%)}
  75%  {opacity:1;transform:translateY(-50%)}
 100%  {opacity:0;transform:translateY(calc(-50% - 7px))}
}

/* El logotipo crece desde el borde izquierdo, o sea desde el "+". */
.entrada-marca{
  transform-origin:left center;
  animation:marca-entra .6s cubic-bezier(.2,.7,.3,1) 3.25s both;
}
@keyframes marca-entra{
  from{opacity:0;transform:translateY(-50%) scale(.86)}
  to  {opacity:1;transform:translateY(-50%) scale(1)}
}

/* Sin la clase, la entrada nunca se muestra: si el JS no corre, el
   formulario queda accesible igual. */
body:not(.con-entrada) .entrada{display:none}

/* ── Encabezado ─────────────────────────────────────────────────── */
.marca{
  display:flex;
  align-items:center;
  gap:14px;
  padding-block:calc(18px + env(safe-area-inset-top)) 14px;
}
.marca-ccis{height:62px;width:auto}
.marca-salto{height:34px;width:auto}
.marca-linea{width:1px;align-self:stretch;margin-block:4px;background:var(--linea)}

/* ── Intro ──────────────────────────────────────────────────────── */
.intro{padding-bottom:18px}

h1{
  font-size:clamp(1.875rem,8vw,2.375rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:.15em 0 .3em;
  text-wrap:balance;
}

.bajada{
  margin:0;
  color:var(--tinta-suave);
  font-size:1rem;
  max-width:38ch;
}

.guino{
  margin:12px 0 0;
  font-size:.9375rem;
  font-weight:600;
  color:var(--rio);
}

/* ── Campos ─────────────────────────────────────────────────────── */
/* La pantalla estira el formulario para que el pie pegajoso quede
   siempre al fondo, aunque el contenido sea corto. */
#pantalla-form{flex:1;display:flex;flex-direction:column}
form{flex:1;display:flex;flex-direction:column}

.campo{margin-bottom:18px;border:0;padding:0;min-width:0}

.campo > label{
  display:block;
  font-weight:600;
  font-size:.9375rem;
  margin-bottom:6px;
}

input,select{
  width:100%;
  min-height:52px;
  padding:12px 14px;
  font-family:inherit;
  font-size:16px;              /* menos de 16 px y iOS hace zoom al enfocar */
  line-height:1.35;
  color:var(--tinta);
  background:var(--superficie);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  appearance:none;
}
input::placeholder{color:var(--tinta-suave);opacity:.7}

/* El titulo del exito recibe el foco por codigo, para que el lector de
   pantalla lo anuncie. No es un control, asi que no lleva anillo. */
[tabindex="-1"]:focus{outline:none}

input:focus-visible,select:focus-visible,
.boton:focus-visible,.panel-volver:focus-visible{
  outline:2px solid var(--rio);
  outline-offset:2px;
}
input:focus,select:focus{border-color:var(--rio);box-shadow:0 0 0 3px var(--rio-velo)}
input:focus{outline:none}

.selector{position:relative}
.selector select{padding-right:44px}
.selector-flecha{
  position:absolute;right:15px;top:50%;translate:0 -50%;
  width:20px;height:20px;pointer-events:none;
  fill:none;stroke:var(--tinta-suave);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
select.vacio{color:var(--tinta-suave)}

.pista{margin:6px 0 0;font-size:.8125rem;color:var(--tinta-suave)}

.error{
  margin:6px 0 0;
  font-size:.8125rem;
  font-weight:600;
  color:var(--tinta);
  display:flex;
  gap:6px;
}
.error::before{content:"";flex:0 0 3px;border-radius:2px;background:var(--naranja)}
.campo.con-error input,
.campo.con-error select{border-color:var(--naranja)}

/* ── Credito institucional ──────────────────────────────────────── */
.credito{
  margin:6px 0 22px;
  padding-top:18px;
  border-top:1px solid var(--linea);
}
.credito p{
  margin:0 0 12px;
  font-size:.75rem;
  line-height:1.45;
  color:var(--tinta-suave);
  max-width:40ch;
}
.credito-logos{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
/* El del Gobierno es horizontal y el del CCIS apilado: al mismo alto el
   apilado se ve la mitad. Se compensa dandole mas. */
.credito-logos img{height:34px;width:auto;opacity:.9}
.credito-logos .logo-apilado{height:48px}
.credito-logos-exito{justify-content:center;margin-top:22px;padding-top:20px;border-top:1px solid var(--linea)}

/* ── Pie fijo con el boton ──────────────────────────────────────── */
.pie{
  position:sticky;
  bottom:0;
  margin-inline:calc(var(--borde) * -1);
  margin-top:auto;
  padding:12px var(--borde) calc(12px + env(safe-area-inset-bottom));
  background:var(--fondo);      /* solido: el contenido no se transparenta */
  border-top:1px solid var(--linea);
}

.boton{
  width:100%;
  min-height:54px;
  padding:14px 20px;
  font-family:inherit;
  font-size:1.0625rem;
  font-weight:800;
  color:var(--tinta);           /* tinta sobre naranja: 5,6:1, pasa AA */
  background:var(--naranja);
  border:1px solid var(--naranja);
  border-radius:var(--radio);
  cursor:pointer;
  transition:transform .12s ease,filter .12s ease;
}
.boton:active{transform:scale(.985);filter:brightness(.94)}
.boton[disabled]{opacity:.6;cursor:default}

.boton-borde{color:var(--tinta);background:var(--superficie);border-color:var(--linea)}
.boton-texto{
  color:var(--rio);background:none;border-color:transparent;
  font-weight:600;font-size:.9375rem;min-height:44px;
}

.legal{
  margin:10px 0 0;
  font-size:.75rem;
  line-height:1.4;
  color:var(--tinta-suave);
  text-align:center;
}

/* ── Confirmacion ───────────────────────────────────────────────── */
/* Es el unico bloque naranja pleno de toda la app. */
body.en-exito{background-color:var(--naranja);background-image:none}
.exito{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
  margin-inline:calc(var(--borde) * -1);
  padding:calc(28px + env(safe-area-inset-top)) var(--borde) calc(28px + env(safe-area-inset-bottom));
  background:var(--naranja);
  animation:aparecer .25s ease-out both;
}
.exito-marca{height:38px;width:auto;align-self:center}

.exito-tarjeta{
  background:var(--superficie);
  border-radius:var(--radio-grande);
  padding:26px 22px 22px;
  text-align:center;
}
.exito-tarjeta h2{
  font-size:clamp(1.5rem,6.5vw,1.875rem);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.015em;
  margin:0 0 .3em;
  overflow-wrap:anywhere;
}
.exito-texto{margin:0;color:var(--tinta-suave);font-size:.9375rem}

.exito-etiqueta{
  margin:22px 0 0;
  font-size:.75rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinta-suave);
}
/* 44 px y peso 800: el naranja sobre blanco (3,07:1) cumple AA para
   texto grande. En cuerpo de texto no se usa nunca. */
.exito-numero{
  margin:2px 0 0;
  font-size:2.75rem;font-weight:800;line-height:1.05;
  letter-spacing:-.01em;color:var(--naranja);
  font-variant-numeric:tabular-nums;
}
.exito-guardalo{
  margin:16px auto 24px;
  padding-top:16px;
  border-top:1px solid var(--linea);
  font-size:.9375rem;color:var(--tinta-suave);max-width:34ch;
}

/* ── Panel del organizador ──────────────────────────────────────── */
.panel{padding-block:calc(20px + env(safe-area-inset-top)) calc(28px + env(safe-area-inset-bottom))}
.panel h2{font-size:1.5rem;font-weight:800;margin:0 0 .2em;letter-spacing:-.015em}
.panel-bajada{margin:0 0 18px;color:var(--tinta-suave);font-size:.9375rem}

.panel-cifras{display:flex;gap:10px;margin-bottom:16px}
.cifra{
  flex:1;background:var(--superficie);
  border:1px solid var(--linea);border-radius:var(--radio);padding:14px 16px;
}
.cifra-num{display:block;font-size:1.75rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.cifra-rot{display:block;font-size:.8125rem;color:var(--tinta-suave)}

.panel-acciones{display:flex;flex-direction:column;gap:10px}
.panel-aviso{
  margin:14px 0 0;padding:12px 14px;
  border-radius:var(--radio-chico);
  background:var(--superficie);
  border:1px solid var(--linea);
  border-left:3px solid var(--rio);
  font-size:.875rem;
}

.panel-lista{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.panel-lista li{
  background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--radio-chico);padding:12px 14px;font-size:.875rem;
}
.panel-lista .fila{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.panel-lista .num{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.panel-lista .meta{color:var(--tinta-suave);font-size:.8125rem;margin-top:2px}
.panel-lista .pendiente{color:var(--rio);font-weight:600;font-size:.75rem}
.panel-vacio{color:var(--tinta-suave);font-size:.9375rem;margin-top:18px}

.panel-volver{display:inline-block;margin-top:22px;color:var(--rio);font-weight:600;font-size:.9375rem}

/* ── Pantallas grandes: sigue siendo una columna, sin marcos falsos ── */
@media (min-width:600px){
  :root{--borde:28px}
  .marca{padding-block:32px 18px}
  .exito{border-radius:var(--radio-grande);margin-block:24px}
  body.en-exito{background-color:var(--fondo)}
  .entrada-escena{--w:min(100%,460px)}
}

/* ── Menos movimiento: no hay entrada ni transiciones ────────────── */
@media (prefers-reduced-motion:reduce){
  .entrada{display:none !important}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}