/* ZERO · La puerta de entrada
   css/puerta.css

   La primera pantalla que ve cualquiera, antes de tener cuenta. Incluye su
   version de dia. El login es obligatorio, asi que esto es lo primero que
   carga el navegador: cuidado con hacerlo pesado.

   Salio de index.html, que tenia 5302 lineas. Es 1 de 8 pedazos y se
   carga en un orden fijo desde index.html: NO lo reacomodes ahi. */

/* ===== puerta de entrada: la primera pantalla que ve cualquiera =====
   Cubre la app entera hasta que hay sesión. Arranca visible desde el CSS
   (no desde el JS) para que nunca se alcance a ver un frame de la app antes
   de la puerta. El fondo reusa la aurora de la marca, con su propia capa:
   la de la app vive dentro de #phone y aquí necesitamos una que no dependa
   de que la app ya esté pintada. */
#gate{position:absolute;inset:0;z-index:90;display:flex;flex-direction:column;
  background:var(--bg);overflow:hidden;animation:fade .4s var(--ease)}
#gate.hidden{display:none}
/* Ya hay sesión guardada: la puerta no se pinta ni un frame. La marca la pone el
   script de arriba de index.html, antes del primer píxel, y la quita openGate()
   si Supabase acaba diciendo que esa sesión ya no vale. */
html.con-sesion #gate{display:none}

/* MIENTRAS SE AVERIGUA SI YA HAY SESIÓN.
   -------------------------------------------------------------------
   La puerta se pinta desde el primer frame para que nunca se alcance a ver la
   app por debajo — pero eso significaba que quien YA tiene su sesión abierta
   veía aparecer el formulario de "Crear cuenta" un instante antes de entrar,
   como si la app hubiera olvidado quién es.

   Aquí lo que se esconde es solo el formulario, no la puerta: se queda la
   aurora, el lockup y el titular. Para quien ya entró, eso es una pantalla de
   bienvenida de marca; para quien no, el formulario aparece encima en cuanto
   se confirma que no había sesión. Se oculta con opacidad y no con `display`
   para que no salte el alto de la caja al aparecer.

   `visibility` acompaña a la opacidad a propósito: sin ella el formulario
   seguiría recibiendo toques mientras es invisible. */
#gate.comprobando .gate-card,
#gate.comprobando .gate-volver,
#gate.comprobando .gate-legal{opacity:0;visibility:hidden}
.gate-card,.gate-volver,.gate-legal{transition:opacity .32s var(--ease)}
.gate-aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* La puerta tiene composición propia: los blobs de la app están colocados para
   convivir con el hero y el nav, y aquí se apelotonaban arriba a la izquierda
   dejando un lavado café. Estos van repartidos y más saturados — es la única
   pantalla que ve alguien que todavía no conoce la marca. */
#gate .ab{position:absolute;border-radius:50%;will-change:transform;
  animation:lava 26s ease-in-out infinite alternate}
/* Calibración: un blur de 64px sobre un círculo de 400px, con la parada
   transparente al 76%, diluye el color hasta desaparecer. El núcleo sólido
   tiene que llegar más lejos (55-60%) y el blur bajar a ~44px, o los blobs
   se ven como una mancha gris. Verificado a ojo contra captura. */
#gate .ab1{width:460px;height:480px;left:-150px;top:-190px;opacity:.92;filter:blur(46px);
  background:radial-gradient(circle at 55% 55%,var(--t1) 55%,transparent 84%)}
#gate .ab2{width:420px;height:440px;right:-180px;top:4%;opacity:.85;filter:blur(48px);
  animation-duration:34s;animation-direction:alternate-reverse;
  background:radial-gradient(circle at 45% 50%,var(--t3) 14%,var(--t6) 56%,transparent 86%)}
/* Ciruela y Berenjena son casi negras: como blob no aportan luz y dejaban la
   mitad de abajo muerta. Abajo mandan los azules, que sí se ven sobre #0b0b0e. */
/* Azul Profundo (--t6 #3F5B6E) sobre #0b0b0e casi no levanta: es un azul
   oscuro. El que ilumina es Azul Hielo (--t3 #B8C7D4), así que va de núcleo
   ancho y --t6 solo como transición hacia el borde. */
#gate .ab3{width:430px;height:430px;left:-180px;top:40%;opacity:.9;filter:blur(44px);
  animation-duration:40s;
  background:radial-gradient(circle at 50% 50%,var(--t3) 30%,var(--t6) 62%,transparent 88%)}
#gate .ab5{width:440px;height:420px;left:-170px;bottom:-170px;opacity:.88;filter:blur(46px);
  animation-duration:36s;animation-direction:alternate-reverse;
  background:radial-gradient(circle at 50% 42%,var(--t3) 26%,var(--t6) 60%,transparent 88%)}
/* Ciruela (--t2) y Berenjena (--t4): las dos que faltaban para que la puerta
   tenga la misma paleta que el icono de la app. Son casi negras, así que NO
   funcionan como fuente de luz — aquí no van de luz sino de sombra de color,
   que es exactamente como se leen en el icono: un morado profundo que se
   recorta contra el dorado y el azul. Por eso va la última en el HTML: pinta
   encima, y si fuera al revés el azul se la comería.
   Al ser oscura solo puede subir el contraste de lo que caiga encima, nunca
   bajarlo — el aviso legal de esa zona sale ganando. */
#gate .ab4{width:430px;height:410px;right:-160px;bottom:-150px;opacity:.95;filter:blur(52px);
  animation-duration:31s;
  background:radial-gradient(circle at 45% 45%,var(--t2) 32%,var(--t4) 64%,transparent 87%)}

/* Dos capas, y cada una resuelve un problema distinto.
   ARRIBA: el blob Oliva cae justo detrás del titular, y la segunda línea
   ("toca tu piel") era del mismo Oliva — dorado sobre dorado, 1.94:1 medido,
   ilegible. No se arregla cambiando el color del texto: el fondo ahí va de
   casi negro a dorado brillante, y ningún color aguanta los dos extremos
   (ni Hueso puro pasaba). Tampoco se arregla suavizando el blob: se probó el
   degradado que tenía antes y da 1.18:1 contra 1.16:1 — en pantallas cortas el
   titular sube hasta 43px del centro del blob, o sea va ENCIMA del núcleo, no
   del borde. Lo único que iguala las dos puntas es asentar el fondo en esa
   franja. Medido con la geometría real de 375x812, 375x667 y 394x837.
   ABAJO: el radial de siempre, que solo asienta los bordes. El contraste del
   formulario no depende de ninguna de las dos — depende del panel de vidrio. */
.gate-veil{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(11,11,14,.52) 0%,rgba(11,11,14,.52) 32%,transparent 62%),
    radial-gradient(120% 80% at 50% 0%,transparent 30%,rgba(11,11,14,.42) 100%)}
.gate-in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  justify-content:flex-start;padding:56px 30px 30px;overflow-y:auto;scrollbar-width:none}
.gate-in::-webkit-scrollbar{display:none}

/* el isotipo: lo más reconocible de la marca, así que manda en la pantalla.
   Va sobre un halo propio para que se despegue del blob que le toque detrás. */
/* El lockup vertical no se ajusta a ojo: el manual (scripts/lib/brand.mjs, y el
   archivo normativo assets/logo/svg/zero-vertical-01-negativo.svg) fija que,
   siendo Z el alto del isotipo, el alto de mayúscula del logotipo es 0.30·Z y
   la separación entre los dos es 0.18·Z. Todo cuelga de --mw, el ancho del
   isotipo: para achicar el conjunto se cambia esa sola medida y la proporción
   se mantiene sola.
     0.4653 = tamaño de fuente ÷ ancho del isotipo (da 33 px con --mw:71px)
     0.1396 = separación 0.18·Z menos el hueco que la caja de la fuente deja
              encima de la mayúscula (0.1364 em en Inter, medido). La norma
              mide del borde de la Z al alto de mayúscula, no a la caja. */
#gate{--mw:71px}
/* La Z va centrada sobre la palabra, no alineada a su izquierda. La caja mide
   `fit-content`, o sea lo que ocupa la pieza más ancha (el logotipo), y el
   isotipo se centra dentro. Sale exacto sin números a mano: el margen negativo
   de .gate-word ya descuenta el espaciado que sobra después de la última O, así
   que lo que se centra son las letras visibles y no la caja del texto. El
   lockup completo sigue alineado a la izquierda, como el resto de la puerta. */
.gate-lockup{width:fit-content;display:flex;flex-direction:column;align-items:center}
.gate-logo{position:relative;width:var(--mw);margin:0;
  animation:gateMark 1.1s var(--ease) both}
.gate-mark{position:relative;width:100%;height:auto;display:block;
  filter:drop-shadow(0 10px 34px rgba(0,0,0,.6))}
@keyframes gateMark{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
/* fit-content y no ancho completo: el intro aterriza midiendo esta caja,
   y con la caja estirada el salto de escala saldria mal */
.gate-word{width:fit-content;font-family:var(--ff-texto);font-size:calc(var(--mw)*.4653);line-height:1;
  font-weight:300;letter-spacing:.32em;text-transform:uppercase;color:var(--ink);
  margin-top:calc(var(--mw)*.1396);margin-right:-.32em;margin-bottom:26px}
.gate-title{font-family:var(--ff-display);font-size:40px;line-height:1.04;letter-spacing:-.02em;
  color:var(--ink);text-wrap:balance;margin-bottom:30px}
/* Oliva puro se perdía sobre su propio blob. A medio camino hacia Hueso sigue
   leyéndose como "la línea dorada" (21% de diferencia de luminancia contra la
   primera línea, de sobra para distinguirlas) pero ya despega del fondo:
   4.56:1 en el peor punto, contra el mínimo de 3:1 que pide WCAG para texto
   de este tamaño. */
.gate-title em{font-style:normal;color:color-mix(in srgb,var(--t1) 40%,var(--t5))}

/* Panel de vidrio: aísla el formulario de la aurora. Sin esto habría que elegir
   entre fondo bonito y texto legible; con esto se pueden tener los dos. */
.gate-card{position:relative;background:rgba(9,9,13,.56);border:1px solid rgba(255,255,255,.11);
  border-radius:22px;padding:14px 15px 13px;
  -webkit-backdrop-filter:blur(22px) saturate(120%);backdrop-filter:blur(22px) saturate(120%);
  box-shadow:0 20px 60px rgba(0,0,0,.42)}

/* Entrar / Crear cuenta: un solo control segmentado en vez de dos botones que
   se intercambian — se ve de un vistazo en qué modo estás. */
.gate-seg{display:flex;gap:4px;background:rgba(255,255,255,.07);border:1px solid var(--line);
  border-radius:999px;padding:3px;margin-bottom:12px}
.gate-seg button{flex:1;background:none;border:none;border-radius:999px;padding:9px 8px;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-dim);cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease)}
.gate-seg button.on{background:var(--ink);color:#14141a}

/* Google / Apple: mismo botón sea "crear cuenta" o "entrar" — Supabase crea
   la cuenta sola la primera vez que alguien llega por un proveedor externo,
   así que no hace falta que la usuaria distinga entre las dos acciones. */
.gate-social{display:grid;gap:8px;margin-bottom:13px}
.gate-social-btn{display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;border-radius:14px;padding:11px;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:600;
  transition:transform .16s var(--ease),opacity .2s var(--ease)}
.gate-social-btn:active{transform:scale(.985)}
.gate-social-btn:disabled{opacity:.6;cursor:default}
.gate-social-btn svg{width:18px;height:18px;flex:none}
.gate-social-google{background:rgba(255,255,255,.94);color:#1f1f1f;border:1px solid rgba(255,255,255,.94)}
.gate-social-apple{background:#000;color:#fff;border:1px solid rgba(255,255,255,.14)}
.gate-divider{display:flex;align-items:center;gap:10px;margin-bottom:13px;
  font-size:11.5px;color:var(--ink-dim)}
.gate-divider::before,.gate-divider::after{content:"";flex:1;height:1px;background:var(--line)}

.gate-form{display:grid;gap:9px}
.gate-form input{width:100%;background:rgba(255,255,255,.07);border:1px solid var(--line);
  border-radius:14px;padding:12px 15px;color:var(--ink);font-family:inherit;font-size:16px;   /* 16 y no 14.5: por debajo de 16 iOS agranda la pagina al tocar el campo */
  outline:none;transition:border-color .2s var(--ease),background .2s var(--ease)}
.gate-form input::placeholder{color:var(--ink-dim)}
.gate-form input:focus{border-color:var(--t1);background:rgba(255,255,255,.10)}
.gate-form input[hidden]{display:none}

.gate-go{width:100%;border:none;border-radius:14px;padding:13px;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:.01em;
  background:var(--t1);color:var(--t4);
  transition:transform .16s var(--ease),opacity .2s var(--ease)}
.gate-go:active{transform:scale(.985)}
.gate-go:disabled{opacity:.6;cursor:default}

.gate-msg{font-size:13px;line-height:1.5;border-radius:13px;padding:11px 13px}
.gate-msg[hidden]{display:none}
.gate-alt{background:none;border:none;color:var(--ink-dim);font-family:inherit;font-size:13px;
  cursor:pointer;text-decoration:underline;padding:6px;justify-self:center}
.gate-legal{font-size:11.5px;line-height:1.55;color:var(--ink-dim);opacity:.8;
  text-align:center;margin-top:auto;padding-top:22px}
.gate-legal a{color:var(--ink-dim)}

/* Dos escalones, no uno. Con 4 campos + 2 botones de proveedor el bloque ya no
   cabe ni en un iPhone 12 (812 px), que es el tamaño más común — así que el
   primer escalón recorta poquito y sin tocar el lockup, y el segundo (SE y
   parecidos) sí aprieta todo. En ninguno se toca el hueco entre el título y
   el vidrio: ese aire es intencional. */
@media(max-height:860px){
  .gate-in{padding:40px 28px 24px}
  /* se recorta el aire DEBAJO del lockup, nunca el de adentro: isotipo y
     logotipo son una sola pieza y su separación es normativa */
  .gate-word{margin-bottom:22px}
  .gate-form{gap:8px}
  .gate-form input{padding:11px 15px}
  .gate-legal{padding-top:16px}
}
/* Pantallas cortas (iPhone SE y parecidos): aquí sí baja el lockup completo —
   isotipo y logotipo juntos, para que la proporción del manual (0.30·Z de
   altura de mayúsculas) se mantenga aunque el conjunto sea más chico. */
@media(max-height:680px){
  .gate-in{padding:16px 24px 18px}
  #gate{--mw:52px}
  .gate-word{margin-bottom:18px}
  .gate-title{font-size:26px;margin-bottom:18px}
  .gate-card{padding:11px 13px 11px}
  .gate-social-btn{padding:9px;font-size:13px}
  .gate-social{gap:7px;margin-bottom:11px}
  .gate-divider{margin-bottom:11px}
  .gate-seg{margin-bottom:10px}
  .gate-form{gap:8px}
  .gate-form input{padding:10px 14px}
  .gate-go{padding:11px}
  .gate-legal{padding-top:10px;font-size:11px;line-height:1.45}
}

/* ---- la puerta en modo día ----
   Todo lo de arriba está calibrado para lienzo oscuro. En día hay que invertir
   cuatro cosas o la pantalla se rompe: el isotipo Hueso desaparece sobre fondo
   claro, el velo oscuro ensucia, el panel de vidrio negro deja texto oscuro
   sobre oscuro, y el segmento activo pinta tinta sobre tinta. */
.gate-mark-dia{display:none}
body.light .gate-mark-noche{display:none}
body.light .gate-mark-dia{display:block}
body.light #gate .ab{opacity:.5}
body.light .gate-veil{background:radial-gradient(120% 80% at 50% 0%,transparent 34%,rgba(255,255,255,.42) 100%)}
body.light .gate-mark{filter:drop-shadow(0 10px 30px rgba(90,70,100,.22))}
/* En día el vidrio NO puede ser Ciruela sólida: el texto de adentro es tinta
   oscura y quedaría oscuro sobre oscuro. Se queda claro, con un velo de
   Ciruela apenas perceptible para que el guiño de color exista en los dos modos. */
body.light .gate-card{background:rgba(255,255,255,.62);border-color:rgba(20,16,28,.10);
  box-shadow:0 20px 60px rgba(90,70,100,.18)}
body.light .gate-seg{background:rgba(20,16,28,.05)}
body.light .gate-seg button.on{background:var(--ink);color:#f7f3ec}
body.light .gate-form input{background:rgba(255,255,255,.75);border-color:rgba(20,16,28,.12)}
body.light .gate-social-google{border-color:rgba(20,16,28,.14)}
body.light .gate-social-apple{background:var(--ink);color:#fff}
body.light .gate-form input:focus{background:#fff}
/* Oliva sobre lienzo claro no alcanza AA: se oscurece igual que los demás
   acentos del modo día (misma fórmula que .fh-title em). */
body.light .gate-title em{color:color-mix(in srgb,var(--sand) 40%,#453317)}

main{position:relative;z-index:1;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding-bottom:140px}
main::-webkit-scrollbar{display:none}
.view{display:none;animation:fade .3s var(--ease)}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}