/* ===========================================================================
   inicio.css — el aspecto de las pantallas de ANTES del panel (v194):
   Entrar, Crear cuenta, Confirmar email, Recuperar contraseña, la bienvenida,
   Conectar Garmin y el recorrido de tarjetas (/empezar). Una sola hoja para
   todas: el mismo formato que Felipe aprobo para las tarjetas, sin copiarlo
   en cada pantalla (regla 10 de CLAUDE.md). Colores y letras: los mismos de
   estilo.css. Lo propio de cada pantalla (los dibujos del recorrido) vive en
   esa pantalla.
   =========================================================================== */
:root{
  --ink:#0D0D0E; --panel:#151618; --campo:#1C1E22; --piel:#23272E;
  --line:rgba(255,255,255,.08); --chalk:#F0F4F6; --muted:#8E9299;
  --signal:#5BCBE0; --up:#00E676; --nutri:#A78BFA; --warn:#FFC107; --down:#FF5252;
  /* (v276) los mismos valores que estilo.css; comprobar.py exige que coincidan */
  --signal-rgb:91,203,224; --sobre-signal:#10161a;
  --display:'Barlow Condensed',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --texto:'IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--ink);overscroll-behavior:none}
body{color:var(--chalk);font-family:var(--texto);line-height:1.45;display:flex;justify-content:center}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
form{display:contents}

/* ---------- armazon: toda la pantalla del telefono ---------- */
.pantalla{width:100%;max-width:460px;height:100vh;height:100dvh;display:flex;flex-direction:column;
          position:relative;overflow:hidden}
.b-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;
        padding:calc(10px + env(safe-area-inset-top)) 12px 2px 20px}
.b-dots{display:flex;gap:6px}
.b-dot{width:7px;height:7px;border-radius:4px;background:var(--piel);transition:all .35s}
.b-dot.on{width:22px;background:var(--signal)}
.b-dot.hecho{background:rgba(var(--signal-rgb),.45)}
.b-link{background:none;border:0;color:var(--muted);font-size:13px;padding:10px 8px;text-decoration:none;
        display:inline-flex;align-items:center;gap:4px}
.b-link:hover{color:var(--chalk)}
.idi{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:2px}
.idi a{border-radius:7px;padding:4px 9px;font-family:var(--mono);font-size:11px;color:var(--muted);text-decoration:none}
.idi a[aria-current="true"]{background:var(--piel);color:var(--chalk)}

/* zona que se desplaza si la pantalla es baja; margin:auto la centra cuando cabe */
.scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:6px 24px 10px}
.carrusel{flex:1;min-height:0;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.pista{display:flex;height:100%;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.tarjeta{flex:0 0 100%;height:100%;display:flex;flex-direction:column;padding:6px 24px 10px;
         overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.t-cuerpo{margin:auto 0;display:flex;flex-direction:column;gap:16px}
.formulario .t-cuerpo{gap:13px}
.ilus{display:flex;justify-content:center;min-height:178px;align-items:center;position:relative}
.badge{width:60px;height:60px;border-radius:18px;margin:0 auto;display:flex;align-items:center;justify-content:center;
       background:rgba(var(--signal-rgb),.1);border:1px solid rgba(var(--signal-rgb),.3);color:var(--signal);flex:none}
.t-tit{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.08;text-align:center;text-wrap:balance;margin:0}
.t-txt{font-size:13.5px;color:#B9BEC3;text-align:center;margin:0;overflow-wrap:anywhere}
.t-txt b{color:var(--chalk);font-weight:500}
.t-txt em{color:var(--signal);font-style:normal;font-weight:500}
.t-nota{font-size:11.5px;color:var(--muted);text-align:center;margin:0}
.anima > *{animation:sube .4s ease-out both}
.anima > *:nth-child(2){animation-delay:.05s}.anima > *:nth-child(3){animation-delay:.1s}
.anima > *:nth-child(4){animation-delay:.15s}.anima > *:nth-child(5){animation-delay:.2s}
@keyframes sube{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- campos ---------- */
.campos{display:flex;flex-direction:column;gap:11px}
.fila2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fila-cuerpo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* en imperial la altura lleva dos casillas (pies y pulgadas): peso y altura
   van cada uno en su fila, asi cada casilla tiene lugar para dos cifras y su
   unidad sin encimarse (lo marco Felipe en el diseño, con 11 pulgadas) */
.fila-cuerpo.imperial{grid-template-columns:1fr}
.alto-imp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fila-fecha{display:grid;gap:8px}
.fila-fecha.dma{grid-template-columns:.8fr 1.6fr 1fr}
.fila-fecha.mda{grid-template-columns:1.6fr .8fr 1fr}
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo > .etq{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.caja{position:relative;display:flex;align-items:center;min-width:0}
.caja input,.caja select{width:100%;min-width:0;background:var(--campo);border:1px solid var(--line);border-radius:12px;
       padding:11px 12px;font-size:16px;color:var(--chalk);transition:border-color .2s}
.caja input:focus,.caja select:focus{outline:none;border-color:var(--signal)}
.caja input:disabled{opacity:.6}
.caja select{appearance:none;-webkit-appearance:none;padding-right:28px;
       background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E9299' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
       background-repeat:no-repeat;background-position:right 10px center}
.caja select:invalid{color:var(--muted)}
.caja em{position:absolute;right:12px;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--muted);pointer-events:none}
.caja input.con-u{padding-right:50px}
.caja input[type=number]{-moz-appearance:textfield}
.caja input::-webkit-outer-spin-button,.caja input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.caja .mostrar{position:absolute;right:6px;background:none;border:0;color:var(--muted);font-size:12px;padding:6px 8px;border-radius:8px}
.caja input.con-mostrar{padding-right:80px}
.codigo input{text-align:center;font-family:var(--mono);font-size:24px;letter-spacing:.35em;padding:12px}
.ayuda{font-size:11px;color:var(--muted);margin:0}
.campo.malo input,.campo.malo select{border-color:rgba(255,82,82,.6)}
.err{font-size:11.5px;color:#FF8A80;margin:0}
.aviso-error,.aviso-ok{display:flex;gap:9px;align-items:flex-start;border-radius:12px;padding:10px 12px;font-size:12.5px;text-align:left}
.aviso-error{border:1px solid rgba(255,82,82,.4);background:rgba(255,82,82,.08);color:#FFB3AD}
.aviso-error svg{flex:none;color:var(--down);margin-top:1px}
.aviso-ok{border:1px solid rgba(0,230,118,.35);background:rgba(0,230,118,.07);color:#B6F5D2}
.aviso-ok svg{flex:none;color:var(--up);margin-top:1px}
.nota-caja{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;color:var(--muted);text-align:left;
           background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 11px}
.nota-caja svg{flex:none;color:var(--up);margin-top:1px}

/* ---------- opciones ---------- */
.segm2{display:grid;gap:6px}
.segm2 button{background:var(--campo);border:1px solid var(--line);border-radius:12px;padding:10px 6px;font-size:14px;color:#C9CDD1;transition:all .2s}
.segm2 button[aria-pressed="true"]{border-color:var(--signal);background:rgba(var(--signal-rgb),.12);color:var(--chalk)}
.sistema{display:grid;grid-template-columns:1fr 1fr;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:3px;gap:3px}
.sistema button{background:none;border:0;border-radius:10px;padding:7px 6px;display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--muted);transition:all .2s}
.sistema button b{font-size:13.5px;font-weight:600}
.sistema button small{font-family:var(--mono);font-size:10px}
.sistema button[aria-pressed="true"]{background:var(--piel);color:var(--chalk);box-shadow:inset 0 0 0 1px rgba(var(--signal-rgb),.45)}
.chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.chips button{background:var(--campo);border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-size:13px;color:#C9CDD1;display:inline-flex;align-items:center;gap:6px;transition:all .2s}
.chips button[aria-pressed="true"]{border-color:var(--signal);background:rgba(var(--signal-rgb),.12);color:var(--chalk)}
.chips button[aria-pressed="true"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal)}
.ops{display:flex;flex-direction:column;gap:7px}
.op{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:11px 13px;transition:all .2s}
.op b{display:block;font-family:var(--display);font-weight:700;font-size:17px;line-height:1.1;letter-spacing:.01em}
.op small{display:block;font-size:11.5px;line-height:1.35;color:var(--muted);margin-top:2px}
.op i{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#fff;transition:all .2s}
.op i svg{opacity:0}
.op[aria-pressed="true"]{border-color:var(--signal);background:var(--campo)}
.op[aria-pressed="true"] i{background:var(--signal);border-color:var(--signal);color:var(--sobre-signal)}
.op[aria-pressed="true"] i svg{opacity:1}

/* ---------- conectar garmin: el reloj mandando datos a la app ---------- */
.sync{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto}
.sync .badge{margin:0;width:54px;height:54px}
.sync .badge.app{color:var(--chalk);background:var(--campo);border-color:var(--line)}
.flujo{display:flex;gap:6px}
.flujo i{width:6px;height:6px;border-radius:50%;background:var(--signal);opacity:.2;animation:fluye 1.6s ease-in-out infinite}
.flujo i:nth-child(2){animation-delay:.2s}.flujo i:nth-child(3){animation-delay:.4s}
.conectando .flujo i{animation-duration:.8s}
@keyframes fluye{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ---------- pie ---------- */
.b-pie{padding:8px 22px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:9px}
.botones{display:flex;gap:8px;width:100%}
.b-btn,.b-sec{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;text-align:center;text-decoration:none;border-radius:14px;line-height:1.25}
.b-btn{flex:1;border:0;padding:14px;font-weight:600;font-size:15px;background:var(--signal);color:var(--sobre-signal)}
.b-btn.final{background:var(--warn);color:#141414}
.b-btn:disabled{opacity:.75;cursor:default}
.b-sec{border:1px solid var(--line);padding:11px;font-size:14px;color:var(--chalk);background:none}
.b-atras{flex:none;background:none;border:1px solid var(--line);border-radius:14px;padding:0 16px;font-size:14px;color:var(--chalk)}
.b-texto{background:none;border:0;font-size:13px;color:var(--muted);padding:4px;text-decoration:none}
.b-texto b{color:var(--signal);font-weight:600}
.b-texto:disabled{cursor:default}
.b-cuenta{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.giro{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;flex:none;animation:gira .8s linear infinite}
.b-btn .giro{border-color:rgba(16,22,26,.3);border-top-color:var(--sobre-signal)}
@keyframes gira{to{transform:rotate(360deg)}}
.tiembla{animation:tiembla .35s}
@keyframes tiembla{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* telefonos bajos (o Safari con sus barras a la vista): se aprieta el aire */
@media (max-height:700px){
  .t-cuerpo{gap:11px}
  .formulario .t-cuerpo{gap:10px}
  .ilus{min-height:0}
  .t-tit{font-size:23px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- verificacion en dos pasos (v224) ---------- */
/* el QR siempre negro sobre blanco: la camara lo lee mal al reves */
.dp-qr{background:#fff;border-radius:14px;padding:10px;margin:0 auto;width:max-content;max-width:100%;line-height:0}
.dp-qr svg{width:200px;height:auto;max-width:100%}
.dp-paso{text-align:left}
.dp-enlace{color:var(--signal);text-decoration:none;font-weight:600}
.dp-clave{font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-align:center;margin:0;
          padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--campo);overflow-wrap:anywhere}
.dp-codigos{list-style:none;margin:0;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;
            border:1px solid var(--line);border-radius:14px;background:var(--campo);
            font-family:var(--mono);font-size:16px;letter-spacing:.08em;text-align:center}
.dp-rescate{font-size:12.5px;color:var(--muted);text-align:center}
.dp-rescate summary{cursor:pointer;padding:6px;list-style:none}
.dp-rescate summary::-webkit-details-marker{display:none}
.dp-rescate[open] summary{margin-bottom:8px}

/* ---------- ultimas entradas (v225) ---------- */
.ac-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left}
.ac-item{border:1px solid var(--line);border-radius:12px;background:var(--campo);padding:10px 12px;
         display:flex;flex-direction:column;gap:2px}
.ac-fila{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13.5px;color:var(--chalk)}
.ac-este{font-size:11px;color:var(--up);border:1px solid rgba(0,230,118,.35);border-radius:999px;padding:1px 8px;
         white-space:nowrap}
.ac-aparato{font-size:12.5px;color:#B9BEC3}
.ac-ip{font-family:var(--mono);font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}

/* ---------- descargar mis datos y borrar mi cuenta (v227) ---------- */
.bc-lista{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:6px;text-align:left;
          font-size:13px;color:#B9BEC3}
.bc-peligro{color:var(--down)}
.b-btn.bc-boton{background:var(--down)}

/* ---------- politica de privacidad, terminos y aceptacion (v228) ---------- */
.lg-casilla{display:flex;gap:10px;align-items:flex-start;text-align:left;font-size:12.5px;color:#B9BEC3;line-height:1.45}
.lg-casilla input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--signal)}
.lg-casilla a,.lg-pie a,.lg-doc a{color:var(--signal);text-decoration:none}
.lg-pie{margin:2px 0 0;font-size:11.5px;color:var(--muted);text-align:center}
.lg-doc{text-align:left}
.lg-doc .t-tit,.lg-doc>.t-txt{text-align:left}
.lg-sec h2{font-family:var(--display);font-size:18px;letter-spacing:.01em;margin:6px 0 4px;color:var(--chalk)}
.lg-sec p{font-size:13.5px;color:#B9BEC3;margin:0 0 8px;line-height:1.55}