/*
 * Lo que comparten las páginas de entrar, darse de alta, aceptar una
 * invitación y confirmar el correo.
 *
 * Existía cuatro veces. Cada página llevaba su propio bloque `<style>` con los
 * mismos tokens copiados, y al añadir `verificar.html` se copiaron una quinta
 * vez: cambiar un color eran cuatro ediciones y la garantía de que alguna se
 * olvidaba. Los cuatro bloques eran idénticos salvo dos líneas.
 *
 * Quien abre cualquiera de estas páginas **no tiene cuenta todavía**, así que
 * no se le entrega la interfaz del panel: ni sus tokens ni su peso.
 */

  /* Los mismos tokens que `login.html` e `invitacion.html`. Quien abre esta
     página no tiene cuenta —está pidiéndola— así que tampoco se le entrega la
     interfaz del panel. */
  :root {
    --bg: #0a0b0f;
    --panel: #13151c;
    --panel-2: #1a1d26;
    --line: #262a36;
    --line-soft: #1e222c;
    --text: #e9ecf3;
    --muted: #99a1b3;
    /* Igual que en `panel.css`: el anterior no llegaba al mínimo de contraste
       y aquí viste el pie, que es donde se dice cómo conseguir una cuenta. */
    --dim: #838da3;
    --accent: #56c7e0;
    --red: #ee6b63;
    --red-dim: #5c2b28;
    --red-wash: #2a1614;
    --radius: 14px;
    --radius-sm: 9px;
    --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; min-height: 100vh;
    display: grid; place-items: center;
    background: radial-gradient(90% 70% at 50% 35%, var(--panel), var(--bg) 70%);
    color: var(--text); font: 14px/1.55 var(--ui);
    -webkit-font-smoothing: antialiased;
  }
  .caja {
    width: 320px; padding: 26px;
    background: var(--panel); border: 1px solid var(--line-soft);
    border-radius: var(--radius); box-shadow: 0 1px 2px #0006, 0 8px 24px -12px #0008;
  }
  .marca {
    font: 650 26px var(--ui); letter-spacing: -1px;
    text-align: center; margin-bottom: 8px;
  }
  .marca span { color: var(--accent); }
  /* `login.html` es la única sin entradilla, así que su marca respira sola. */
  .marca.sola { margin-bottom: 22px; }
  .intro {
    text-align: center; font-size: 12.5px; color: var(--muted);
    margin-bottom: 20px; line-height: 1.6;
  }
  .intro b { color: var(--text); font-weight: 600; }
  label {
    display: block; font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.7px; color: var(--dim); font-weight: 600;
    margin: 0 0 5px;
  }
  input {
    width: 100%; padding: 9px 11px; margin-bottom: 14px;
    background: var(--panel-2); border: 1px solid var(--line);
    border-radius: var(--radius-sm); color: var(--text);
    font: 13.5px var(--ui); outline: none;
    transition: border-color .16s;
  }
  input:focus { border-color: var(--accent); }
  button {
    width: 100%; padding: 11px; margin-top: 4px;
    background: var(--accent); border: 0; border-radius: var(--radius-sm);
    color: #05171c; font: 600 14px var(--ui); cursor: pointer;
    transition: filter .16s, transform .08s;
  }
  button:hover:not(:disabled) { filter: brightness(1.08); }
  button:active:not(:disabled) { transform: translateY(1px); }
  button:disabled { opacity: .5; cursor: not-allowed; }
  .error {
    margin-top: 14px; padding: 9px 11px;
    background: var(--red-wash); border: 1px solid var(--red-dim);
    border-radius: var(--radius-sm); color: #ffb9b4; font-size: 12.5px;
  }
  .hide { display: none; }
  .pie {
    margin-top: 18px; text-align: center;
    font-size: 11px; color: var(--dim); line-height: 1.6;
  }