/*
  Login · identidad de Destinos (lote 01, 2026-10-20).
  Capa solo visual, cargada después de styles.css. Conserva la escena 3D, el 50/50 y el
  botón naranja con texto oscuro (excepción de marca del acceso). Cambia tipografía a
  IBM Plex Sans, alturas de campos y botones (52 px), radios (12) y colores de texto.
*/
:root {
  --canvas: #F7F6F2;
  --surface: #FFFFFF;
  --ink: #181513;
  --muted: #5F5954;
  --subtle: #777069;
  --orange: #FE7220;
  --orange-hover: #EF6411;
  --link: #B84308;
  --border: #E5E0DA;
  --error: #B42318;
  --error-soft: #FDECEA;
  --orange-soft: #FFF0E7;
  font-family: "IBM Plex Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body { background: var(--canvas); }

/* Campos: el borde claro necesita más contraste que el token para que el campo se lea como tal. */
input[type=email], .otp-input { height: 52px; border-color: #D6D0C9; border-radius: 12px; background: var(--surface); }
input::placeholder { color: var(--subtle); }
input[aria-invalid=true] { border-color: var(--error); background: #FFFCFB; }
input[readonly] { background: #F3F1ED; }

/* Botones */
.button { min-height: 52px; border-radius: 12px; }
.button-primary { font-weight: 700; }
.button-secondary { border-color: #D6D0C9; }
.button-passkey { background: var(--ink); color: #fff; }

/* Textos */
h1 { font-weight: 700; letter-spacing: -.03em; }
.form-lead, .step-description, .delivery-help, .input-hint, .status-info, .passkey-divider { color: var(--muted); }
.login-footer { color: var(--subtle); }
.text-button, .back-link { color: var(--ink); }
.step-symbol { background: var(--orange-soft); color: var(--link); border-radius: 12px; }
.status-error { color: var(--error); font-weight: 500; }

@media (max-width: 1099px), (max-aspect-ratio: 4/3) {
  input[type=email], .otp-input { height: 52px; border-radius: 12px; }
  .button { min-height: 52px; border-radius: 12px; }
}

@media (hover: hover) and (pointer: fine) {
  .button-secondary:hover:not(:disabled) { background: #F3F1ED; }
  .text-button:hover:not(:disabled), .back-link:hover { color: var(--link); }
}

/* El PNG del logo trae fondo blanco: se funde con el lienzo cálido. */
.brand img { mix-blend-mode: multiply; }