/* Los tokens del DS (docs/mepagaste-diseno/design-system/tokens.json), con sus
   nombres. Claro y oscuro según el teléfono, como la app. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');

:root {
  --surface-page: #f2f1ee;
  --surface-card: #ffffff;
  --surface-inverse: #191918;
  --line-control: #8f8b83;
  --ink-900: #1a1a18;
  --ink-500: #5f5d58;
  --ink-inverse: #ffffff;
  --lime-500: #d6f75b;
  --on-primary: #d6f75b;
  --danger-fg: #a8261b;
  --danger-bg: #fff8f7;
  --done-fg: #0b6b3a;
  --done-bg: #e6f6ec;
  --focus-ring: #1a1a18;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-page: #121211;
    --surface-card: #1c1c1a;
    --surface-inverse: #0a0a09;
    --line-control: #77746d;
    --ink-900: #f3f2ee;
    --ink-500: #a3a09a;
    --on-primary: #1a1a18;
    --danger-fg: #ff8b7e;
    --danger-bg: #3b1714;
    --done-fg: #6fdc9c;
    --done-bg: #11301f;
    --focus-ring: #d6f75b;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-page);
  color: var(--ink-900);
  font: 16px/1.5 'Plus Jakarta Sans', system-ui, sans-serif;
}
header { background: var(--surface-inverse); color: var(--ink-inverse); padding: 20px 16px 56px; }
.marca { font-weight: 800; font-size: 20px; max-width: 480px; margin: 0 auto; }
.marca span { color: var(--lime-500); }
/* La marca lleva a la portada: quien llegaba a una página suelta desde un
   correo o un buscador no tenía cómo salir de ella (specs/037). */
.marca a { color: inherit; font-weight: inherit; text-decoration: none; }
main { max-width: 480px; margin: -36px auto 32px; padding: 0 16px; }
.tarjeta { background: var(--surface-card); border-radius: 24px; padding: 24px 20px; }
h1 { font-size: 22px; line-height: 1.25; margin: 0 0 4px; font-weight: 800; }
p { margin: 8px 0; color: var(--ink-500); }
a { color: var(--ink-900); font-weight: 600; }
label { display: block; font-weight: 600; margin: 16px 0 6px; }
input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 14px;
  font: inherit;
  color: var(--ink-900);
  background: var(--surface-card);
  border: 1px solid var(--line-control);
}
/* El botón principal del DS: negro con letra lima (en oscuro, al revés). */
button {
  width: 100%;
  min-height: 54px;
  margin-top: 20px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  background: var(--ink-900);
  color: var(--on-primary);
  cursor: pointer;
}
button:disabled { opacity: 0.6; cursor: default; }
/* Un enlace con la cara del botón principal («Entrar a MePagaste»), y su par
   secundario, de borde. */
.boton { display: flex; align-items: center; justify-content: center; min-height: 54px; width: 100%;
  margin-top: 12px; padding: 0 16px; border-radius: 999px; background: var(--ink-900); color: var(--on-primary);
  font-weight: 800; text-align: center; text-decoration: none; }
.boton.borde { background: transparent; color: var(--ink-900); border: 1px solid var(--line-control); }
/* Un botón que se lee como enlace: hace algo en la página, no lleva a otra. */
button.enlace { width: auto; min-height: 48px; margin: 0; padding: 0; background: none; color: var(--ink-900);
  font-weight: 600; text-align: left; text-decoration: underline; border-radius: 6px; }
.pasos { margin: 12px 0 4px; padding-left: 22px; color: var(--ink-900); }
.pasos li { margin: 8px 0; padding-left: 4px; }
.atascado { margin-top: 20px; text-align: center; font-size: 15px; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.aviso { border-radius: 14px; padding: 12px 14px; margin-top: 16px; }
.error { background: var(--danger-bg); color: var(--danger-fg); }
.hecho { background: var(--done-bg); color: var(--done-fg); }
[hidden] { display: none !important; }