/* =========================================================================
   PAGE SHELL — chrome compartido de las páginas estáticas que no son la App:
   confirm.html, reset-password.html y terminos.html.

   POR QUÉ EXISTE: las tres páginas repetían el mismo bloque de ~50 líneas
   (fondo con degradados de marca, tipografías, .brand-matic, .neon-card,
   keyframes del spinner, reglas de shell del documento y franja superior).
   Duplicado así, cualquier arreglo de shell —el scroll con el teclado de iOS,
   por ejemplo— solo llegaba a una de las páginas y las otras dos se quedaban
   con el fallo.

   QUÉ SE QUEDA EN CADA PÁGINA: solo lo suyo (las reglas del contenido legal,
   los campos, y las medidas que la página necesita además del shell).

   ORDEN DE CARGA: output.css → este archivo → <style> de la página, para que
   la página conserve la última palabra en la cascada, como antes.

   Antes de tocar las reglas de shell, leer el comentario de scroll: la
   versión anterior fijaba la ALTURA del contenedor al área visible y el
   formulario acababa recortado a media pantalla. NO volver a fijar alturas.
   ========================================================================= */

:root { color-scheme: dark; }

html, body {
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(0,245,212,.07), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(247,37,133,.06), transparent 55%),
    radial-gradient(1200px 700px at 50% 120%, rgba(157,78,221,.05), transparent 60%),
    #0d0d14;
  background-attachment: fixed;
}
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, .font-display { font-family: 'Montserrat', sans-serif; }

/* Misma escala legible que la aplicacion para acceso, confirmacion, reinicio
   de clave y terminos. Las paginas conservan su composicion propia. */
body { font-size: .875rem; line-height: 1.5; }
p, li { line-height: 1.55; }
label { font-size: .75rem; line-height: 1.4; }
button { min-height: 44px; }
@media (max-width: 639px), (any-pointer: coarse) {
  input, select, textarea { min-height: 44px; font-size: 16px !important; }
}

:root { --brand-gradient: linear-gradient(135deg, #00F5D4 0%, #9D4EDD 50%, #F72585 100%); }
.brand-matic {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .brand-matic { color: #F72585; background: none; -webkit-text-fill-color: currentColor; }
}

.neon-card {
  background: linear-gradient(180deg, #1e1f30 0%, #191a27 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1.1rem;
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.03);
}

.neon-input {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,0.09);
  color: #fff;
  border-radius: .65rem;
  color-scheme: dark;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.neon-input::placeholder { color: #7d7f95; }
.neon-input:hover { border-color: rgba(255,255,255,0.16); }
.neon-input:focus {
  outline: none; border-color: #00F5D4;
  background: rgba(255,255,255,.045);
  box-shadow: 0 0 0 3px rgba(0,245,212,.14);
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0,245,212,.3), 0 0 60px rgba(0,245,212,.1); }
  50% { box-shadow: 0 0 30px rgba(0,245,212,.5), 0 0 80px rgba(0,245,212,.2); }
}
@keyframes fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.spinner {
  width: 48px; height: 48px;
  border: 3px solid rgba(0,245,212,.15);
  border-top-color: #00F5D4;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.glow-pulse { animation: pulse-glow 2s ease-in-out infinite; }
.fade-in { animation: fade-in 0.5s ease-out both; }

/* ═══ SCROLL DEL DOCUMENTO + HUECO DEL TECLADO — mismo criterio que el acceso
   de la App: la página scrollea con el documento e iOS revela el campo
   enfocado. Lo único que aporta JS es el hueco inferior del teclado
   (`--kb-inset`: SOLO padding, nunca alturas), así no hay ninguna medida
   transitoria capaz de recortar la pantalla como hacía el lock anterior.
   La franja superior va en el flujo (sticky) y no se desplaza.
   En navegador/escritorio env() = 0 y nada cambia. */
body {
  /* El min-height SUMA el inset: con box-sizing: border-box el padding no
     agranda la caja y el hueco se comería el alto (sin scroll útil). */
  min-height: calc(100dvh + var(--kb-inset, 0px));
  /* Laterales: recorte del dispositivo en landscape (0 en vertical). */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--kb-inset, 0px));
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
/* Reserva para la barra accesoria del Llavero (↑↓✓) al revelar el campo:
   96px = REVEAL_MARGIN_PX de src/ui/authKeyboard.js. */
input, select {
  scroll-margin-block-end: 96px;
  scroll-margin-block-start: calc(env(safe-area-inset-top, 0px) + 16px);
}
/* Franja superior en el flujo del layout: no se desplaza con el paneo. */
#topbar {
  position: sticky;
  top: 0;
  flex-shrink: 0;
  height: calc(env(safe-area-inset-top, 0px) + 10px);
  background: #0d0d14;
  z-index: 30;
  pointer-events: none;
}

/* Suppress native browser validation tooltips */
:invalid { outline: none; box-shadow: none; border-color: inherit; }
:required { outline: none; }
::-webkit-validation-bubble { display: none !important; }
::-webkit-validation-bubble-arrow { display: none !important; }
::-webkit-validation-bubble-message { display: none !important; }