/* Pantalla de ingreso. Mismos colores que la app: verde oscuro del menú, menta y el dorado del logo. */
:root {
  --verde-900: #0d241b;
  --verde-800: #123226;
  --verde-700: #1b4836;
  --acento: #1f4d3a;
  --acento-fuerte: #143628;
  --menta: #a8dcc0;
  --oro: #c49d4c;
  --texto: #13221c;
  --texto-2: #34463f;
  --apagado: #6b7c75;
  --borde: #d3d9d5;
  --rojo: #b4414b;
  --rojo-suave: #fdeef0;
  --fondo-app: #f4f5f3;
  --suave: cubic-bezier(.2, .7, .2, 1);
  --resorte: cubic-bezier(.34, 1.4, .5, 1);
  --fuente: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI Variable Display', 'Segoe UI', 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--fuente); font-size: 14px; line-height: 1.5; color: var(--texto);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background:
    radial-gradient(900px 600px at 18% 12%, rgba(168, 220, 192, .10), transparent 60%),
    radial-gradient(700px 520px at 85% 95%, rgba(196, 157, 76, .10), transparent 60%),
    linear-gradient(160deg, var(--verde-900) 0%, var(--verde-800) 45%, var(--verde-700) 100%);
  background-attachment: fixed;
}

/* Emblema gigante de fondo, girando muy despacio */
.fondo-emblema {
  position: fixed; width: 125vmax; height: 125vmax; left: 50%; top: 50%;
  margin: -62.5vmax 0 0 -62.5vmax; opacity: .06; pointer-events: none;
  animation: girar 240s linear infinite;
}

.escena {
  position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh;
  max-width: 1080px; margin: 0 auto; padding: 48px 32px;
  display: grid; grid-template-columns: 1fr 420px; gap: 72px; align-items: center;
}

/* ---------------------------------- Marca ---------------------------------- */
.marca { color: #fff; position: relative; }
.marca::before {   /* halo dorado detrás del emblema */
  content: ''; position: absolute; width: 360px; height: 360px; left: -60px; top: -70px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 157, 76, .16), transparent 65%);
  animation: respirar 6s ease-in-out 2s infinite; pointer-events: none;
}
.emblema { width: 132px; height: 132px; display: block; margin-bottom: 30px; overflow: visible; position: relative; }
.nombre { display: block; width: min(400px, 100%); height: auto; animation: subir .9s var(--suave) .55s backwards; }
.lema {
  margin: 14px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--menta);
  animation: subir .9s var(--suave) .7s backwards;
}
.bajada {
  margin: 28px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); max-width: 380px;
  font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .72);
  animation: subir .9s var(--suave) .85s backwards;
}

/* Animación del emblema: se dibuja el anillo, aparecen las marcas y "cae" el centro */
#emblema .anillo {
  stroke-dasharray: 1000; transform: rotate(-90deg); transform-origin: 528px 528px;
  animation: dibujar 1.5s var(--suave) .1s backwards;
}
#emblema .m { animation: aparecer .5s var(--suave) backwards; }
#emblema .m1 { animation-delay: .55s; } #emblema .m6 { animation-delay: .62s; }
#emblema .m4 { animation-delay: .69s; } #emblema .m8 { animation-delay: .76s; }
#emblema .m2 { animation-delay: .83s; } #emblema .m7 { animation-delay: .90s; }
#emblema .m3 { animation-delay: .97s; } #emblema .m5 { animation-delay: 1.04s; }
#emblema .rayas { animation: aparecer .8s ease-out 1.15s backwards; }
#emblema .centro { transform-origin: 528px 528px; animation: centro .9s var(--resorte) .8s backwards; }

/* --------------------------------- Tarjeta --------------------------------- */
.tarjeta {
  background: #fff; border-radius: 20px; padding: 40px 40px 28px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 30px 80px -24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  animation: entrar .8s var(--suave) .35s backwards;
}
.tarjeta.sacudir { animation: sacudir .42s cubic-bezier(.36, .07, .19, .97); }
h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.025em; line-height: 1.25; }
.sub { margin: 6px 0 26px; color: var(--apagado); font-size: 14px; }
.sub.info { color: var(--acento); }

form { display: flex; flex-direction: column; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span:first-child { font-size: 13px; font-weight: 600; color: var(--texto-2); }
input[type=email], input[type=password], input[type=text] {
  width: 100%; height: 46px; padding: 0 14px; font: inherit; font-size: 15px; color: var(--texto);
  background: #fff; border: 1px solid var(--borde); border-radius: 10px; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:hover { border-color: #b9c3bd; }
input:focus { border-color: var(--acento); box-shadow: 0 0 0 4px rgba(31, 77, 58, .13); }
input[aria-invalid=true] { border-color: var(--rojo); box-shadow: 0 0 0 4px rgba(180, 65, 75, .10); }

.con-ojo { position: relative; display: block; }
.con-ojo input { padding-right: 48px; }
.ojo {
  position: absolute; right: 5px; top: 5px; width: 36px; height: 36px; border: 0; border-radius: 8px;
  background: none; color: var(--apagado); cursor: pointer; display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.ojo:hover { background: #f1f4f2; color: var(--texto); }
.ojo:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.ojo svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; grid-area: 1 / 1; }
.ojo .cerrado, .ojo[aria-pressed=true] .abierto { display: none; }
.ojo[aria-pressed=true] .cerrado { display: block; }
.mayus { color: #a35e1f; font-size: 12px; font-weight: 500; }

/* Casilla propia, accesible (la real queda invisible encima) */
.recordar { position: relative; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--texto-2); cursor: pointer; user-select: none; width: fit-content; }
.recordar input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.caja {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #b9c3bd; background: #fff; flex: none;
  display: grid; place-items: center; transition: background .15s, border-color .15s;
}
.caja::after {
  content: ''; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px;
  transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .2s var(--resorte);
}
.recordar input:checked + .caja { background: var(--acento); border-color: var(--acento); }
.recordar input:checked + .caja::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.recordar input:focus-visible + .caja { box-shadow: 0 0 0 4px rgba(31, 77, 58, .18); }

.error {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 10px;
  background: var(--rojo-suave); color: var(--rojo); font-size: 13.5px; font-weight: 500; line-height: 1.4;
  animation: aparecer .25s ease-out;
}
.error[hidden] { display: none; }

.ingresar {
  position: relative; height: 48px; margin-top: 4px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--acento); color: #fff; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  transition: background .18s, transform .12s, box-shadow .18s;
  box-shadow: 0 8px 20px -10px rgba(20, 54, 40, .8);
}
.ingresar:hover { background: var(--acento-fuerte); }
.ingresar:active { transform: scale(.985); }
.ingresar:focus-visible { outline: 3px solid rgba(31, 77, 58, .35); outline-offset: 2px; }
.ingresar:disabled { cursor: default; }
.girando {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; opacity: 0; animation: girar .7s linear infinite;
}
.ingresar.cargando .txt { opacity: 0; }
.ingresar.cargando .girando { opacity: 1; }
.ingresar.listo { background: #1f7a52; }

.pie { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid #edf0ee; color: var(--apagado); font-size: 12px; display: flex; align-items: center; gap: 7px; justify-content: center; }
.pie svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Al entrar: un fundido al color de la app */
.cortina { position: fixed; inset: 0; z-index: 10; background: var(--fondo-app); opacity: 0; pointer-events: none; transition: opacity .45s ease; }
body.saliendo .cortina { opacity: 1; }
body.saliendo .tarjeta { transform: translateY(-6px) scale(.985); opacity: 0; transition: transform .4s var(--suave), opacity .3s; }

/* --------------------------------- Celular --------------------------------- */
@media (max-width: 880px) {
  .escena { grid-template-columns: 1fr; gap: 32px; padding: 40px 16px 32px; align-content: center; justify-items: center; }
  .marca { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .marca::before { left: 50%; top: -110px; margin-left: -180px; }
  .emblema { width: 84px; height: 84px; margin-bottom: 20px; }
  .nombre { width: min(270px, 80vw); }
  .lema { font-size: 11.5px; margin-top: 10px; }
  .bajada { display: none; }
  .tarjeta { width: 100%; max-width: 420px; padding: 30px 22px 22px; border-radius: 18px; }
}

/* --------------------------------- Animaciones ----------------------------- */
@keyframes dibujar { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes aparecer { from { opacity: 0; } }
@keyframes centro { from { transform: scale(.2); opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(12px); } }
@keyframes entrar { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes respirar { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes sacudir {
  10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .fondo-emblema { animation: none; }
}