/* accounts visual system — sources: docs/architecture/account-screen.md (composition, semantics)
   and @rvd-ai/brand (Tier 0/1 values, loaded from /static/brand/css/brand.css before this file).
   Semantic tokens re-point to brand primitives; they never restate their values. */

:root {
  --c-canvas: #f1f4fa;
  --c-surface: #ffffff;
  --c-sunken: #f7f9fb;
  --c-ink-900: #14181f;
  --c-ink-700: #333b47;
  --c-ink-500: #5b6472;
  --c-border: #e3e6ec;
  /* ≥3:1 on both surfaces a field sits on (WCAG 1.4.11): #7f8797 measures 3.28:1 on the
     canvas and 3.61:1 on white; the earlier #8a92a1 fell to 2.84:1 once the card dissolved. */
  --c-border-input: #7f8797;
  --c-accent: var(--rvd-brand-navy);
  --c-accent-ink: var(--rvd-color-navy-800);
  --c-accent-ring: color-mix(in srgb, var(--rvd-brand-navy) 28%, transparent);
  --c-cta: var(--rvd-color-navy-700);
  --c-cta-hover: var(--rvd-color-navy-800);
  --c-cta-ink: #ffffff;
  /* The rail's ground is brand navy; what sits on it is named here, once, so the
     contrast is measured where the value is defined (brand rule 6.4): on-navy 15.3:1,
     muted 9.8:1, the current tint 11.4:1 against navy-900. */
  --c-on-navy: var(--c-cta-ink);
  --c-on-navy-muted: color-mix(in srgb, var(--c-cta-ink) 78%, transparent);
  --c-navy-hover: color-mix(in srgb, var(--c-cta-ink) 8%, transparent);
  --c-navy-current: color-mix(in srgb, var(--c-cta-ink) 10%, transparent);
  --c-navy-hairline: color-mix(in srgb, var(--c-cta-ink) 15%, transparent);
  --c-danger: #b3261e;
  /* White on the light danger red is 6.5:1; the dark red is pale and needs the canvas as ink. */
  --c-danger-ink: #ffffff;
  --c-danger-bg: #fdf2f1;
  --c-danger-bd: #e9b9b5;
  --c-success: #14683f;
  --c-success-bg: #f0f8f3;
  --c-success-bd: #b9dcc8;
  --font-sans: var(--rvd-font-family-ui);
  --font-mono: var(--rvd-font-family-mono);
  --sp-1: var(--rvd-spacing-1);
  --sp-2: var(--rvd-spacing-2);
  --sp-3: var(--rvd-spacing-3);
  --sp-4: var(--rvd-spacing-4);
  --sp-5: var(--rvd-spacing-5);
  --sp-6: var(--rvd-spacing-6);
  --sp-8: var(--rvd-spacing-8);
  --sp-10: var(--rvd-spacing-10);
  --r-input: var(--rvd-radius-sm);
  --r-btn: var(--rvd-radius-sm);
  --r-card: var(--rvd-radius-lg);
  --r-pill: var(--rvd-radius-pill);
  --shadow-card: 0 0 0 1px rgba(20, 24, 31, 0.05), 0 1px 2px rgba(20, 24, 31, 0.04), 0 8px 24px -8px rgba(20, 24, 31, 0.10);
  --shadow-focus: 0 0 0 var(--rvd-focus-ring-width) var(--c-accent-ring);
  --dur-fast: var(--rvd-duration-fast);
  --dur-base: var(--rvd-duration-base);
  --ease: var(--rvd-ease-standard);
}

/* The dark tokens are declared twice on purpose: once for the system's choice, unless the
   account fixed light, and once for an account that fixed dark (story 001, M7). CSS has
   no way to share one declaration block between a media query and a selector. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dark surfaces are navy-tinted so the theme wears the brand, not generic gray. */
    --c-canvas: #0b0f1a;
    --c-surface: #141a2a;
    --c-sunken: #1b2234;
    --c-ink-900: #eef1f5;
    --c-ink-700: #c3cad4;
    --c-ink-500: #98a1af;
    --c-border: #28304a;
    /* ≥3:1 against the dark surface (WCAG 1.4.11): #747f9b measures 4.3:1 on #141a2a. */
    --c-border-input: #747f9b;
    --c-accent: var(--rvd-color-navy-300);
    --c-accent-ink: var(--rvd-color-navy-200);
    --c-accent-ring: color-mix(in srgb, var(--rvd-color-navy-300) 30%, transparent);
    /* The CTA stays saturated brand blue in the dark theme: navy-500 with white ink (5.5:1). */
    --c-cta: var(--rvd-color-navy-500);
    --c-cta-hover: var(--rvd-color-navy-600);
    --c-cta-ink: #ffffff;
    --c-danger: #ef8a82;
    --c-danger-ink: var(--c-canvas);
    --c-danger-bg: #2a1614;
    --c-danger-bd: #5c2b26;
    --c-success: #6fce9f;
    --c-success-bg: #0f2419;
    --c-success-bd: #245139;
  }

  /* A 5% shadow is invisible in dark mode: the edge comes from a real border. */
  :root:not([data-theme="light"]) .card {
    box-shadow: none;
    border: 1px solid var(--c-border);
  }

  :root:not([data-theme="light"]) .chip {
    border-color: var(--c-border-input);
  }
}

:root[data-theme="dark"] {
  --c-canvas: #0b0f1a;
  --c-surface: #141a2a;
  --c-sunken: #1b2234;
  --c-ink-900: #eef1f5;
  --c-ink-700: #c3cad4;
  --c-ink-500: #98a1af;
  --c-border: #28304a;
  --c-border-input: #747f9b;
  --c-accent: var(--rvd-color-navy-300);
  --c-accent-ink: var(--rvd-color-navy-200);
  --c-accent-ring: color-mix(in srgb, var(--rvd-color-navy-300) 30%, transparent);
  --c-cta: var(--rvd-color-navy-500);
  --c-cta-hover: var(--rvd-color-navy-600);
  --c-cta-ink: #ffffff;
  --c-danger: #ef8a82;
  --c-danger-ink: var(--c-canvas);
  --c-danger-bg: #2a1614;
  --c-danger-bd: #5c2b26;
  --c-success: #6fce9f;
  --c-success-bg: #0f2419;
  --c-success-bd: #245139;
}

:root[data-theme="dark"] .card {
  box-shadow: none;
  border: 1px solid var(--c-border);
}

:root[data-theme="dark"] .chip {
  border-color: var(--c-border-input);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-ink-900);
  background: var(--c-canvas);
  -webkit-font-smoothing: antialiased;
}

html {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
}

/* Composition ------------------------------------------------------------ */

.auth-shell {
  display: flex;
  height: 100dvh;
  overflow: hidden;
  background: var(--c-canvas);
}

.auth-hero {
  display: none;
}

.form-pane {
  width: 100%;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-canvas);
}

.form-scroll {
  display: flex;
  min-height: 100%;
  padding:
    max(var(--sp-10), env(safe-area-inset-top))
    max(var(--sp-4), env(safe-area-inset-right))
    max(var(--sp-10), env(safe-area-inset-bottom))
    max(var(--sp-4), env(safe-area-inset-left));
}

.stack {
  margin: auto;
  width: 100%;
  max-width: 400px;
}

.lockup {
  margin: 0 0 var(--sp-6);
  text-align: center;
}

.lockup img {
  height: 30px;
  width: 110px;
  vertical-align: middle;
}

.card {
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-8);
}

.trust {
  margin: var(--sp-6) 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  text-wrap: balance;
  color: var(--c-ink-500);
}

@media (min-width: 960px) {
  .auth-hero {
    position: relative;
    display: flex;
    width: 44%;
    height: 100dvh;
    flex: 0 0 44%;
    overflow: hidden;
    color: #ffffff;
    background: var(--rvd-color-navy-900);
  }

  .hero-image,
  .hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .hero-image {
    object-fit: cover;
    object-position: center;
  }

  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(11, 15, 26, 0.42) 0%, rgba(11, 15, 26, 0.08) 38%, rgba(11, 15, 26, 0.88) 100%),
      linear-gradient(90deg, rgba(23, 34, 76, 0.34), transparent 70%);
  }

  .hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    padding:
      max(48px, env(safe-area-inset-top))
      max(48px, env(safe-area-inset-right))
      max(48px, env(safe-area-inset-bottom))
      max(48px, env(safe-area-inset-left));
  }

  .hero-logo {
    width: 182px;
    height: 50px;
  }

  .hero-copy {
    max-width: 520px;
  }

  .hero-title {
    margin: 0 0 var(--sp-4);
    max-width: 12ch;
    font-size: clamp(32px, 3.2vw, 48px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .hero-lead {
    margin: 0;
    max-width: 48ch;
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    text-wrap: pretty;
  }

  .hero-lead [translate="no"] {
    white-space: nowrap;
  }

  .hero-foot {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
  }

  .form-pane {
    width: 56%;
    flex: 1 1 56%;
  }

  .lockup {
    display: none;
  }
}

/* Chip de producto -------------------------------------------------------- */

.chip-row {
  margin: 0;
}

/* inline-block, not inline-flex: flex turns the text and the <strong> into two items
   and drops the space between them («Continuás aworkbook»). */
.chip {
  display: inline-block;
  font-size: 13px;
  color: var(--c-ink-700);
  background: var(--c-sunken);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  padding: 5px 12px;
}

.hairline {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: var(--sp-5) 0;
}

/* Tipografía -------------------------------------------------------------- */

h1 {
  margin: 0 0 var(--sp-2);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.011em;
  color: var(--c-ink-900);
}

.lead {
  margin: 0 0 var(--sp-5);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: balance;
  color: var(--c-ink-500);
}

a {
  color: var(--c-accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Underline only inside running text. Accent ink against ink-500 is 2.1:1 in light
   and 1.6:1 in dark, so colour alone never marks a link among words and the line
   stays there. A link that is the whole line has nothing to be told apart from:
   weight and place carry it, and the underline returns on hover and focus as the
   non-colour cue (ux-architect, 2026-09-25). */
.link,
.field-escape a,
.identity-switch a,
.result-link,
.foot a,
.link-button {
  font-weight: 600;
  text-decoration: none;
}

/* Hover moves the colour, never draws a line: a standalone link is not prose, and a
   line appearing under a button-shaped control reads as a defect. Focus keeps the
   global ring as the non-colour cue. */
.link:hover,
.field-escape a:hover,
.identity-switch a:hover,
.result-link:hover,
.foot a:hover,
.link-button:hover,
.help a.link:hover {
  color: var(--c-accent);
  text-decoration: none;
}

.foot .button:hover,
.foot .action:hover,
a.button:hover {
  text-decoration: none;
}

.foot-prose a {
  text-decoration: underline;
}

/* A select wears the input's box, with a chevron drawn in place of the native one.
   Scoped to `.field` so it outranks the shared `input, select` box, which sets the
   background shorthand later in this file. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  /* ink-500 in light (5.98:1 on white); the dark blocks below redraw it in the dark
     ink-500, since a data URI cannot read a token. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2398a1af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2398a1af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

select:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: var(--shadow-focus);
}

/* A row's action: a small quiet button, the same for a link and a form button.
   Never red in a list; the confirmation view carries the weight. */
.action {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-border-input);
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--c-accent-ink);
  font: 600 14px/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.action:hover {
  background: var(--c-sunken);
  text-decoration: none;
}

.action:focus-visible {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: var(--shadow-focus);
}

/* A filter of the list, as a row of the same actions; the chosen one is filled. */
.action[aria-current="true"] {
  background: var(--c-sunken);
  border-color: var(--c-accent);
  color: var(--c-ink-900);
}

.filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
}

/* Campos ------------------------------------------------------------------ */

.field {
  margin-bottom: var(--sp-5);
}

label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-ink-700);
}

input,
select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--c-ink-900);
  background: var(--c-surface);
  border: 1px solid var(--c-border-input);
  border-radius: var(--r-input);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: var(--shadow-focus);
}

/* The error has to show on the field, not only in the text below it:
   with two errors the eye cannot tie message to field. */
input[aria-invalid="true"] {
  border-color: var(--c-danger);
}

input[aria-invalid="true"]:focus {
  border-color: var(--c-danger);
  box-shadow: 0 0 0 var(--rvd-focus-ring-width) color-mix(in srgb, var(--c-danger) 28%, transparent);
}

input[readonly] {
  background: var(--c-sunken);
  color: var(--c-ink-700);
}

input[type="hidden"] {
  display: none;
}

.help {
  margin: var(--sp-2) 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-ink-500);
}

.field-error {
  margin: var(--sp-2) 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-danger);
}

.label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.label-row label {
  margin-bottom: 0;
}

/* The secondary escape goes after the field: inside the label it sits between
   email and password in the tab order. */
.field-escape {
  margin: var(--sp-2) 0 0;
  text-align: right;
}

/* WCAG 2.5.8: standalone links need a 24px target; links inside a sentence
   are exempt. */
.label-link,
.field-escape a,
.result-link,
.foot a {
  display: inline-block;
  font-size: 13px;
  padding: 3px 4px;
  margin: -3px -4px;
}

/* Password with toggle ------------------------------------------------------ */

.password-box {
  position: relative;
}

.password-box input {
  padding-right: 76px;
}

.toggle {
  position: absolute;
  right: var(--sp-1);
  top: var(--sp-1);
  height: 40px;
  min-width: 64px;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-accent-ink);
  cursor: pointer;
}

.toggle:hover {
  background: var(--c-sunken);
}

/* Inward: with a positive offset the ring steps on the input border. */
.toggle:focus-visible {
  outline-offset: -2px;
}

/* Requisitos de contraseña ------------------------------------------------- */

/* Lives inside #help-password: it is the same field description, itemized.
   Inherits 13px/1.45/ink-500 from .help — it does not repeat them. */
.rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-1);
}

.rule {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--c-ink-500);
  transition: color var(--dur-fast) var(--ease);
}

/* Fixed slot: the text starts in the same column, met or not, and when a long
   line wraps the indent hangs aligned. */
.rule-mark {
  flex: 0 0 16px;
  height: 1.45em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pending: hollow ring. At 9px and in muted ink it does not read as an
   actionable checkbox. */
.rule-mark::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

/* Met: color across the whole item — a 9px glyph alone is too weak a signal
   at 13px; green here is always reward, never alarm. */
.rule[data-met="true"] {
  color: var(--c-success);
}

.rule[data-met="true"] .rule-mark::before {
  content: "\2713";
  width: auto;
  height: auto;
  border: 0;
  font-size: 12px;
  line-height: 1;
}

/* Going over 72 bytes is not fixed by typing more: the only red in the live channel. */
.rules-overflow {
  margin: 0;
  color: var(--c-danger);
}

/* Código OTP ---------------------------------------------------------------- */

.otp {
  height: 60px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.4em;
  /* Compensates the tracking of the last digit, which throws the group off-centre. */
  text-indent: 0.4em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Botones -------------------------------------------------------------------- */

.button {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: var(--sp-6);
  border: 0;
  border-radius: var(--r-btn);
  background: var(--c-cta);
  color: var(--c-cta-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 48px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.button:hover {
  background: var(--c-cta-hover);
}

.button:disabled,
.button[aria-busy="true"] {
  opacity: 0.6;
  cursor: default;
}

.link-button {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-accent-ink);
  cursor: pointer;
}

.link-button:disabled {
  color: var(--c-ink-500);
  text-decoration: none;
  cursor: default;
  font-variant-numeric: tabular-nums;
}

/* Alertas ------------------------------------------------------------------- */

.alert {
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) 14px;
  border: 1px solid;
  border-radius: var(--r-input);
  font-size: 14px;
  line-height: 1.45;
}

/* A blue ring over a red alert mixes two color semantics; and with
   :focus (not :focus-visible) mouse users saw it too. */
.alert:focus {
  outline: none;
}

.alert-error:focus-visible {
  box-shadow: 0 0 0 var(--rvd-focus-ring-width) color-mix(in srgb, var(--c-danger) 28%, transparent);
}

.alert-success:focus-visible {
  box-shadow: 0 0 0 var(--rvd-focus-ring-width) color-mix(in srgb, var(--c-success) 26%, transparent);
}

.alert-error {
  background: var(--c-danger-bg);
  border-color: var(--c-danger-bd);
  color: var(--c-danger);
}

.alert-success {
  background: var(--c-success-bg);
  border-color: var(--c-success-bd);
  color: var(--c-success);
}

/* Reenvío -------------------------------------------------------------------- */

.resend {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: 14px;
  color: var(--c-ink-500);
}

/* Separates the /verificar tail from the resend block: 20 and 24 read the same. */
.resend + .foot {
  margin-top: var(--sp-8);
}

/* Pie de card ---------------------------------------------------------------- */

.foot {
  margin: var(--sp-6) 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--c-ink-500);
}

/* Vista de resultado ----------------------------------------------------------- */

/* The emblem is centred wherever it appears; the text is centred only on the
   terminal result view, where every reference sign-in result is a centred card.
   The other two screens that carry it continue into a link row or a code grid. */
.result {
  text-align: center;
}

.result .lead,
.result .help {
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

.result .strip {
  text-align: left;
}

.glyph {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 600;
}

.glyph-error {
  color: var(--c-danger);
  background: var(--c-danger-bg);
  border-color: var(--c-danger-bd);
}

/* The marks are drawn, not typed: the ✓ and ✕ glyphs sit low and to the right in
   Inter, so the circle looked off-centre however it was padded. Two borders and a
   rotation put the stroke where the eye expects it. */
.glyph::before {
  content: "";
  display: block;
  box-sizing: border-box;
}

.glyph-error::before {
  width: 16px;
  height: 16px;
  background:
    linear-gradient(currentColor, currentColor) center / 2.5px 100% no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat;
  transform: rotate(45deg);
}

.glyph-success {
  color: var(--c-success);
  background: var(--c-success-bg);
  border-color: var(--c-success-bd);
}

.glyph-success::before {
  width: 9px;
  height: 16px;
  margin-top: -4px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
}

.strip {
  margin: var(--sp-4) 0;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-ink-500);
  background: var(--c-sunken);
  border: 1px solid var(--c-border);
  border-radius: var(--r-input);
  overflow-wrap: anywhere;
  word-break: normal;
}

/* The human guidance weighs more than the error code: it goes first and larger. */
.result .help {
  font-size: 15px;
}

/* Utilitarias ----------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.is-hidden {
  display: none;
}

/* Foco visible ------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Breakpoints --------------------------------------------------------------------- */

@media (max-width: 431px) {
  .card {
    padding: var(--sp-6);
  }

  h1 {
    font-size: 22px;
  }
}

@media (max-width: 360px) {
  .form-scroll {
    padding-right: max(var(--sp-3), env(safe-area-inset-right));
    padding-left: max(var(--sp-3), env(safe-area-inset-left));
  }

  .card {
    padding: var(--sp-5);
    border-radius: var(--rvd-radius-md);
  }
}

/* Movimiento reducido ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* Superficie ancha ------------------------------------------------------------------
   The sign-in card is one decision on a narrow column. The account screen is a
   column of sections a person reads through, and 400px turns every one of its
   rows into two lines. Same card, more room. */

.stack-wide {
  max-width: 560px;
}

/* Secciones de la pantalla de cuenta -------------------------------------------------- */

.panel {
  margin: 0 0 var(--sp-8);
  padding: 0 0 var(--sp-8);
  border-bottom: 1px solid var(--c-border);
}

.panel:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.panel h2 {
  margin: 0 0 var(--sp-3);
  font-size: 16px;
  font-weight: 650;
  color: var(--c-ink-900);
}

/* A form inside a panel is one of several on the page: its button belongs to the
   section, not to the screen, so it does not span the full width. */
.panel .button {
  width: auto;
  min-width: 160px;
  padding: 0 var(--sp-5);
  margin-top: var(--sp-4);
}

.button-quiet {
  background: transparent;
  color: var(--c-accent-ink);
  box-shadow: inset 0 0 0 1px var(--c-border-input);
}

.button-quiet:hover {
  background: var(--c-sunken);
}

.button-danger {
  background: var(--c-danger);
  color: var(--c-danger-ink);
}

.button-danger:hover {
  background: color-mix(in srgb, var(--c-danger) 85%, var(--c-ink-900));
}

/* Sesiones abiertas ------------------------------------------------------------------- */

.device-list {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.device {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--c-border);
}

.device:first-child {
  border-top: 0;
}

.device-agent {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink-900);
  overflow-wrap: anywhere;
}

.device .help {
  margin: var(--sp-1) 0 0;
}

.device-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-end;
  flex-shrink: 0;
  /* Centres a 32px action on the row's 21px title line. */
  margin-top: -5px;
}

.chip-quiet {
  background: var(--c-sunken);
  color: var(--c-ink-500);
}

/* On a phone a row's action drops under its text rather than squeezing it into a
   column a hundred pixels wide (ux-architect, M10). */
@media (max-width: 479px) {
  .device {
    flex-wrap: wrap;
  }

  .device-side {
    flex: 1 1 100%;
    align-items: flex-start;
    margin-top: 0;
  }
}

.account-signout {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
  text-align: center;
}

/* La barra lateral -----------------------------------------------------------------
   The signed-in shell (story 001). The hero's column becomes a flat navy surface:
   the mark, the sections, and, pinned at the bottom, who is signed in and the
   way out. Below 960px only the section list survives, as a strip above the card,
   and the page's own foot carries the sign-out. */

.rail-mark {
  text-decoration: none;
}

.skip-link {
  text-decoration: none;
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: 2;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-btn);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  color: var(--c-ink-900);
  font-size: 14px;
  font-weight: 600;
}

.skip-link:focus-visible {
  top: var(--sp-4);
}

.rail-item {
  display: inline-block;
  padding: var(--sp-3) var(--sp-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink-700);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.rail-item[aria-current="page"] {
  color: var(--c-ink-900);
  border-bottom-color: var(--c-accent);
}

.rail-nav ul {
  display: flex;
  margin: 0;
  padding: 0 var(--sp-4);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
}

.rail-nav ul::-webkit-scrollbar {
  display: none;
}

.identity-strip {
  margin: var(--sp-5) 0 var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
}

.identity-name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--c-ink-900);
  overflow-wrap: anywhere;
}

.identity-email {
  margin: 2px 0 0;
  font-size: 15px;
  color: var(--c-ink-500);
  overflow-wrap: anywhere;
}

.identity-switch {
  margin: var(--sp-2) 0 0;
  font-size: 14px;
}

/* «Tu cuenta»: who the person is on the left, what they can do about it on the
   right, one row. The name's form is on the page from the start and takes the
   place of the text while editing; nothing on the page moves. */
.identity-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  align-items: flex-start;
  justify-content: space-between;
  margin: var(--sp-5) 0 var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
}

.identity-shown,
.identity-edit {
  flex: 1 1 280px;
  min-width: 0;
}

.identity-edit,
.identity-row.is-editing .identity-shown,
.identity-row.is-editing [data-edit] {
  display: none;
}

.identity-row.is-editing .identity-edit {
  display: block;
}

.identity-edit .field {
  margin-bottom: var(--sp-2);
}

.identity-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-top: var(--sp-3);
}

.identity-actions .button {
  width: auto;
  min-width: 0;
  height: 32px;
  line-height: 32px;
  margin: 0;
  padding: 0 var(--sp-4);
  font-size: 14px;
}

.identity-side {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: flex-end;
}

/* No lockup on a signed-in page: the rail carries the mark on desktop and the tab
   strip is the header below it. It only pushed the content down, and its <picture>
   follows the system scheme rather than the account's fixed theme. */
.shell-rail .lockup {
  display: none;
}

@media (max-width: 959px) {
  .shell-rail {
    flex-direction: column;
  }

  .shell-rail .form-scroll {
    padding-top: var(--sp-6);
  }

  /* Under the strip the content starts at the top, as it does beside the rail: a
     short form centred on a phone floats mid-screen. */
  .shell-rail .stack {
    margin: 0 auto;
  }

  .auth-rail {
    display: block;
    flex: 0 0 auto;
  }

  .rail-mark,
  .rail-foot {
    display: none;
  }

  .shell-rail .form-pane {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
}

@media (min-width: 960px) {
  /* A navigation width, not the hero's ratio: 7 rungs of the spacing ladder, enough
     for the mark and an address without wrapping (ux-architect, 2026-09-25). */
  .auth-rail {
    display: flex;
    flex-direction: column;
    width: 280px;
    flex: 0 0 280px;
    height: 100dvh;
    padding: max(var(--sp-10), env(safe-area-inset-top)) var(--sp-8) max(var(--sp-10), env(safe-area-inset-bottom)) max(var(--sp-8), env(safe-area-inset-left));
    overflow-y: auto;
    background: var(--rvd-color-navy-900);
    color: var(--c-on-navy);
  }

  .rail-mark {
    display: block;
    width: 182px;
    margin: 0 0 var(--sp-10);
  }

  .rail-mark img {
    display: block;
    width: 182px;
    height: 50px;
  }

  .rail-nav {
    flex: 1 1 auto;
  }

  .rail-nav ul {
    display: block;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .rail-nav li {
    margin: 0 0 var(--sp-1);
  }

  .rail-item {
    display: block;
    width: 100%;
    padding: 10px var(--sp-4);
    border-bottom: 0;
    border-left: 3px solid transparent;
    border-radius: var(--r-btn);
    font-size: 15px;
    font-weight: 500;
    color: var(--c-on-navy-muted);
    text-align: left;
    white-space: normal;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }

  .rail-item:hover {
    background: var(--c-navy-hover);
    color: var(--c-on-navy);
  }

  .rail-item[aria-current="page"] {
    font-weight: 600;
    color: var(--c-on-navy);
    background: var(--c-navy-current);
    border-left-color: var(--c-on-navy);
  }

  /* The global ring is accent navy and vanishes on navy. */
  .auth-rail :focus-visible {
    outline: 2px solid var(--c-on-navy);
    outline-offset: 2px;
    box-shadow: none;
  }

  .rail-foot {
    display: block;
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-navy-hairline);
  }

  /* The identity aligns with the items' text (same horizontal padding) and reads as a
     person: an initial in a circle, the name, the address. */
  .rail-identity {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: var(--sp-3);
    align-items: center;
    margin: 0 0 var(--sp-3);
    padding: 0 var(--sp-4);
    overflow-wrap: anywhere;
  }

  .rail-avatar {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-navy-current);
    color: var(--c-on-navy);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
  }

  .rail-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-on-navy);
  }

  .rail-email {
    font-size: 14px;
    color: var(--c-on-navy-muted);
  }

  .shell-rail .account-signout {
    display: none;
  }

  /* Beside a rail the content is a panel, not a sign-in card floating in space: it
     anchors top-left on the rail mark's baseline, stops at a reading width, and sits
     on the canvas with the panels' hairlines as its rhythm (ux-architect, 2026-09-25). */
  .shell-rail .form-scroll {
    padding: max(var(--sp-10), env(safe-area-inset-top)) var(--sp-10) max(var(--sp-10), env(safe-area-inset-bottom));
  }

  .shell-rail .stack {
    margin: 0;
    max-width: 720px;
  }

  .shell-rail .trust {
    text-align: left;
  }

  .auth-shell.shell-rail .card {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
  }

  .shell-rail h1 {
    font-size: 28px;
  }

  .shell-rail .lead {
    font-size: 16px;
    max-width: 60ch;
  }

  .shell-rail .panel h2 {
    font-size: 18px;
  }

  /* A single-value field in the settings column is bounded to the sign-in width
     and drops to 44px: at 720px a name box reads as a text area, and 48px beside
     an 18px heading dominates the section (ux-architect, 2026-09-25). */
  .shell-rail .field {
    max-width: 400px;
    margin-bottom: var(--sp-4);
  }

  .shell-rail .field label {
    margin-bottom: 6px;
  }

  .shell-rail .field input,
  .shell-rail .field select {
    height: 44px;
    padding: 0 var(--sp-3);
  }

  .shell-rail .help,
  .shell-rail .field-error {
    margin-top: 6px;
  }

  .shell-rail .panel .button {
    height: 44px;
    line-height: 44px;
  }

  /* A button outside a panel (the confirmation's submit, «Cerrar todas las demás») is
     bounded like the field beside a rail: 44px, its own width, and its foot aligned left
     (ux-architect, M10). Full width is the sign-in card's grammar, not the panel's. */
  .shell-rail .button {
    width: auto;
    min-width: 160px;
    height: 44px;
    line-height: 44px;
    padding: 0 var(--sp-5);
  }

  .shell-rail a.button {
    display: inline-block;
  }

  .shell-rail .foot {
    text-align: left;
  }

  /* Beside the rail the home says nothing the rail does not; the identity block
     lives on «Tu cuenta». Below 960px the home's strip stands in for the rail. */
  .shell-rail .identity-compact {
    display: none;
  }
}

/* Consentimiento --------------------------------------------------------------------- */

.field-check {
  margin-top: var(--sp-5);
}

.check {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-ink-700);
  cursor: pointer;
}

.check input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--c-cta);
}

/* A few exclusive choices, stacked: the same row as a checkbox, one per option (story 001, M7). */
.choice {
  margin: var(--sp-5) 0 0;
  padding: 0;
  border: 0;
}

.choice legend {
  padding: 0;
  margin-bottom: var(--sp-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink-700);
}

.choice .check {
  padding: var(--sp-2) 0;
  font-size: 16px;
  color: var(--c-ink-900);
}

/* A radio or checkbox is not a text box: the input focus ring drew a rectangle around
   a circle. The global outline, rounded to the control, is the focus cue here. */
.check input:focus {
  box-shadow: none;
  border-color: transparent;
}

.check input:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 50%;
}

.check input[type="checkbox"]:focus-visible {
  border-radius: 3px;
}

/* Segundo factor --------------------------------------------------------------------- */

.qr-box {
  display: flex;
  justify-content: center;
  margin: var(--sp-6) 0 var(--sp-4);
}

.qr {
  width: 200px;
  height: 200px;
  border-radius: var(--rvd-radius-sm);
  /* The white quiet zone is part of the symbol, not decoration: a code drawn
     edge to edge on a tinted card is a code a phone will not read. */
  box-shadow: 0 0 0 1px var(--c-border);
}

.secret {
  margin: var(--sp-2) 0 var(--sp-6);
  text-align: center;
}

.secret code {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--c-ink-900);
}

.recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-6) 0;
  padding: var(--sp-5);
  border-radius: var(--rvd-radius-sm);
  background: var(--c-sunken);
  list-style: none;
}

.recovery-codes code {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--c-ink-900);
}

/* Ingreso con un proveedor ------------------------------------------------------------ */

.social {
  margin-top: var(--sp-6);
}

.social-divider {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-4);
  color: var(--c-ink-500);
  font-size: 13px;
}

.social-divider::before,
.social-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

.button-social {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: center;
  margin-top: 0;
  background: var(--c-surface);
  color: var(--c-ink-900);
  box-shadow: inset 0 0 0 1px var(--c-border-input);
}

.button-social:hover {
  background: var(--c-sunken);
}

.social-mark {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}