/* Base, paleta y componentes comunes.
   Minimalismo claro: fondo blanco, superficies grises muy suaves, un único
   acento índigo, bordes casi invisibles y esquinas generosas. Sin tema oscuro:
   la aplicación se ve igual en cualquier ajuste del sistema. */

/* --- Tipografía autoalojada ---------------------------------------------
   Va en el repositorio y en la caché del service worker: la experiencia sin
   conexión tiene que ser idéntica a la de con conexión, también en la letra. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter.woff2') format('woff2');
}

/* Noto Sans llega troceado por sistema de escritura; el navegador baja sólo el
   trozo que necesita cada carácter. Las runas viven en una familia aparte
   porque Noto Sans no las trae. */

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-sans-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-sans-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Noto Sans Runic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-sans-runic.woff2') format('woff2');
  unicode-range: U+16A0-16F8;
}

@font-face {
  font-family: 'Noto Sans Georgian';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-sans-georgian.woff2') format('woff2');
  unicode-range: U+10A0-10FF;
}

@font-face {
  font-family: 'Noto Sans Armenian';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-sans-armenian.woff2') format('woff2');
  unicode-range: U+0530-058F;
}

/* Naskh y no Sans: es el estilo de libros y prensa, el que el usuario va a
   encontrarse. El rango incluye el tatweel (U+0640) de las formas
   contextuales y el ZWNJ (U+200C) que separa formas en el indicador. */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-naskh-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}

/* --- Tokens --- */

:root {
  --bg: #ffffff;
  --surface: #f5f5f7;
  --surface-2: #ebebed;
  --line: rgba(0, 0, 0, 0.08);
  --line-active: rgba(0, 0, 0, 0.2);
  --accent: #4f6ef7;
  --accent-dim: rgba(79, 110, 247, 0.1);
  --accent-line: rgba(79, 110, 247, 0.25);
  --fg: #111114;
  --fg-muted: #6b7280;
  --fg-subtle: #9ca3af;
  --danger: #ef4444;
  --danger-dim: rgba(239, 68, 68, 0.1);
  --danger-line: rgba(239, 68, 68, 0.25);
  --success: #16a34a;
  --success-dim: rgba(22, 163, 74, 0.1);
  --success-line: rgba(22, 163, 74, 0.25);

  /* Tonos con los que se distingue un alfabeto de otro. Son decoración: los
     reparte la interfaz por orden, los datos no saben de colores. */
  --tone-1: #4f6ef7;
  --tone-2: #ef4444;
  --tone-3: #16a34a;
  --tone-4: #f59e0b;
  --tone-5: #8b5cf6;
  --tone-6: #06b6d4;

  --sp-xs: 4px;
  --sp-sm: 10px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 30px;
  --sp-2xl: 48px;

  --r-btn: 14px;
  --r-card: 14px;
  --r-tile: 12px;
  --r-pill: 20px;
  --r-mark: 20px;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-accent: 0 4px 16px rgba(79, 110, 247, 0.28);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-glyph: 'Noto Sans', 'Noto Sans Runic', 'Noto Sans Georgian', 'Noto Sans Armenian',
    'Noto Naskh Arabic', 'Segoe UI Historic', 'Segoe UI Symbol', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.app {
  min-height: 100%;
  display: flex;
  justify-content: center;
  padding: max(var(--sp-lg), env(safe-area-inset-top)) var(--sp-xl) var(--sp-2xl);
}

.screen {
  width: min(28rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
  position: relative;
}

.icon { flex: none; display: block; }

/* --- Botones --- */

.btn {
  font: inherit;
  font-weight: 600;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 12px 18px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}

.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn:active:not(:disabled) { transform: scale(0.98); border-color: var(--line-active); }
.btn:disabled { cursor: default; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn--primary {
  color: #fff;
  background: var(--accent);
  border-color: transparent;
  box-shadow: var(--shadow-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.btn--primary:hover:not(:disabled) { background: #4460ef; }

.btn--big {
  width: 100%;
  font-size: 17px;
  padding: 18px;
}

/* Botón sin peso visual: acción secundaria que no debe competir con la
   principal de la pantalla. */
.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--fg-muted);
  font-weight: 500;
}

.btn--ghost:hover:not(:disabled) { background: var(--surface); color: var(--fg); }

/* Acción escrita, sin caja: los accesos del pie del inicio. */
.btn--text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border-color: transparent;
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 10px;
}

.btn--text:hover:not(:disabled) { background: transparent; color: var(--accent); }

.btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--r-tile);
  color: var(--fg-muted);
}

.btn--small { font-size: 13px; padding: 8px 14px; border-radius: var(--r-pill); }

/* Acción secundaria que acompaña a la principal y se alinea con ella. */
.btn--full { width: 100%; }

/* Botón de dos líneas: la acción arriba y a qué se aplica debajo, para que
   «Continuar» diga por dónde se sigue sin necesitar una frase aparte. */
.btn--stacked { display: flex; flex-direction: column; gap: 4px; }

.btn__sub {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.85;
}

/* Botón que lleva icono y texto */
.btn--icons { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn--on { background: var(--accent); border-color: transparent; color: #fff; }
.btn--on:hover:not(:disabled) { background: #4460ef; }
.btn--danger { color: var(--danger); border-color: var(--danger-line); background: transparent; }
.btn--danger:hover:not(:disabled) { background: var(--danger-dim); }

/* --- Cabecera --- */

.topbar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* La cabecera de las pantallas con vuelta atrás se separa del contenido con una
   línea a todo lo ancho, como en el resto de la aplicación. */
.topbar--page {
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-xs);
}

.topbar__title {
  /* Ocupa lo que quede para empujar la acción secundaria al otro extremo. */
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.topbar__forms {
  font-family: var(--font-glyph);
  font-size: 15px;
  color: var(--fg-muted);
}

/* --- Etiquetas y textos auxiliares --- */

.hint { color: var(--fg-muted); margin: 0; }

.label {
  margin: 0;
  align-self: flex-start;
  color: var(--fg-subtle);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Cápsula: un dato corto que acompaña sin gritar. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--fg-muted);
}

.pill__strong { color: var(--fg); font-weight: 600; }

/* --- Inicio --- */

.screen--home { justify-content: center; gap: var(--sp-lg); padding-top: 6vh; }

.brand { display: flex; flex-direction: column; align-items: center; text-align: center; }

.brand__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin-bottom: var(--sp-lg);
  background: var(--surface);
  border-radius: var(--r-mark);
  color: var(--accent);
  font-family: var(--font-glyph);
  font-size: 40px;
  line-height: 1;
}

.brand__name {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand__claim {
  margin: 8px 0 0;
  max-width: 22em;
  color: var(--fg-muted);
  font-size: 14px;
}

/* --- Bienvenida y guía (§17) --- */

/* Las dos se ven una sola vez y no tienen nada que hacer salvo leerse, así que
   se quedan centradas y con un único botón al final. */
.screen--welcome,
.screen--guide {
  justify-content: center;
  gap: var(--sp-lg);
  padding-top: 6vh;
}

.guide__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.points {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.points__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px var(--sp-md);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.5;
}

.points__row .icon { color: var(--accent); }

.stats {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
}

.stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--sp-md);
  background: var(--surface);
  border-radius: var(--r-card);
}

.stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--tone);
}

.stat__body { display: flex; flex-direction: column; line-height: 1.2; }
.stat__value { font-size: 22px; font-weight: 700; }
.stat__label { color: var(--fg-muted); font-size: 13px; }

.nav {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-sm);
}

.nav__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 4px;
  font: inherit;
  color: var(--fg-muted);
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-tile);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.nav__btn:hover { background: var(--surface-2); color: var(--fg); }
.nav__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav__label { font-size: 12px; font-weight: 500; }

/* Fila de acciones secundarias de la portada: se reparten el ancho. */
.actions { width: 100%; display: flex; gap: var(--sp-sm); }
.actions > .btn { flex: 1; }

.links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-sm); }

/* --- Tarjetas de alfabeto --- */

.cards { width: 100%; display: flex; flex-direction: column; gap: var(--sp-sm); }

.card {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  width: 100%;
  padding: var(--sp-md);
  font: inherit;
  text-align: left;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-card);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.card:hover { background: var(--surface-2); }
/* El alfabeto que se está practicando ya. */
.card--on { border-color: var(--accent); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* El tono lo pone la interfaz por orden de alfabeto (`--tone`). */
.card__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: var(--r-tile);
  background: color-mix(in srgb, var(--tone) 12%, var(--bg));
  color: var(--tone);
  font-family: var(--font-glyph);
  font-size: 26px;
  letter-spacing: 0.06em;
  line-height: 1;
}

.card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card__name { font-size: 16px; font-weight: 600; }
.card__native { color: var(--fg-muted); font-size: 13px; }
.card__meta { color: var(--fg-muted); font-size: 13px; }

/* --- Mapa de niveles --- */

/* Todo el alfabeto de un vistazo, encima de la rejilla. */
.strip {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.strip__glyphs {
  font-family: var(--font-glyph);
  font-size: 20px;
  color: var(--accent);
  letter-spacing: 0.14em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.strip__rest { color: var(--fg-subtle); font-size: 13px; white-space: nowrap; }

.grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--sp-sm);
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 90px;
  padding: 12px 6px;
  font: inherit;
  color: var(--fg-muted);
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-tile);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.tile:hover:not(:disabled) { background: var(--surface-2); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* El nivel al que le toca: es la única acción esperada de la pantalla. */
.tile--current {
  background: var(--accent-dim);
  border-color: var(--accent-line);
}

.tile--locked { cursor: default; color: var(--fg-subtle); }
.tile__id { font-size: 15px; font-weight: 600; color: var(--accent); }
.tile--locked .tile__id { color: var(--fg-subtle); }
.tile__forms { font-family: var(--font-glyph); font-size: 19px; color: inherit; }
.tile--locked .tile__forms { color: var(--fg-subtle); }

/* --- Estrellas y puntos de dominio --- */

.stars { display: inline-flex; gap: 3px; color: var(--fg-subtle); }
.star--on { color: #f59e0b; }
/* Los puntos vacíos tienen que verse sobre la propia tarjeta, que ya es gris. */
.score { display: inline-flex; gap: 2px; color: #d6d6db; }
.score__dot--on { color: #f59e0b; }

/* --- Conmutador (alfabeto, idioma) --- */

.switch { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* --- Colección de caracteres --- */

.collection {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: var(--sp-sm);
}

.cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  font: inherit;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-tile);
  cursor: pointer;
  transition: background 0.12s ease;
}

.cell:hover:not(:disabled) { background: var(--surface-2); }
.cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cell__glyph { font-family: var(--font-glyph); font-size: 26px; line-height: 1.2; }
.cell--bloqueado { color: var(--fg-subtle); cursor: default; }
.cell--dominado { background: var(--accent-dim); border-color: var(--accent-line); }

/* --- Ficha de un carácter --- */

.detail { width: 100%; min-height: 0; }

.detail__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--sp-md);
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-card);
}

.detail__name { font-size: 16px; font-weight: 600; }
.detail__latin { color: var(--fg-muted); }

.detail__forms {
  margin-left: auto;
  display: flex;
  gap: 12px;
  font-family: var(--font-glyph);
  font-size: 28px;
  line-height: 1;
}

/* --- Listas (logros) --- */

.rows { width: 100%; display: flex; flex-direction: column; gap: var(--sp-sm); }

.row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--sp-md);
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-card);
}

.row--off { color: var(--fg-subtle); }

.row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-dim);
  color: var(--accent);
}

.row--off .row__icon { background: var(--bg); color: var(--fg-subtle); }
.row__body { display: flex; flex-direction: column; line-height: 1.45; min-width: 0; }
.row__name { font-size: 15px; font-weight: 600; }
.row__desc { color: var(--fg-muted); font-size: 13px; }
.row--off .row__name, .row--off .row__desc { color: inherit; }

/* --- Estadísticas --- */

.figures {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--sp-sm);
}

.figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-md) 8px;
  background: var(--surface);
  border-radius: var(--r-card);
}

.figure__value { font-size: 22px; font-weight: 700; line-height: 1.3; }
.figure__label { color: var(--fg-muted); font-size: 13px; text-align: center; }

.progress { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.progress__head { display: flex; justify-content: space-between; align-items: baseline; }
.progress__name { font-size: 15px; font-weight: 600; }
.progress__meta { color: var(--fg-muted); font-size: 13px; }
.progress .gauge { flex: none; width: 100%; }
.progress .pill { align-self: flex-start; margin-top: var(--sp-xs); }

/* Las cifras de los demás (§13): llegan después y caben en su hueco. */
.community { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-sm); }
.community:empty { display: none; }
.community--alphabet { gap: 2px; margin-top: var(--sp-xs); }
.community p { margin: 0; }
.community .figures { margin-top: 2px; }

.compare { width: 100%; display: flex; flex-direction: column; gap: 6px; }

.compare__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: var(--r-tile);
  font-size: 13px;
}

.compare__name { font-weight: 600; }
.compare__meta { color: var(--fg-muted); }
.compare__ahead { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--accent); font-weight: 600; }

/* --- Tabla de dominio --- */

.table { width: 100%; display: flex; flex-direction: column; gap: 6px; }

.table__row {
  display: grid;
  grid-template-columns: 3rem 1fr 2.5rem 4.5rem auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-tile);
  font-size: 13px;
}

.table__row--head {
  background: transparent;
  padding: 0 12px;
  color: var(--fg-subtle);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.table__row--dominado { background: var(--accent-dim); border-color: var(--accent-line); }
.table__cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table__cell--glyph { font-family: var(--font-glyph); font-size: 19px; letter-spacing: 0.08em; }
.table__cell--latin { font-weight: 600; color: var(--accent); }
.table__form { display: flex; align-items: center; gap: 6px; }
.table__form-glyph { font-family: var(--font-glyph); min-width: 1.3em; color: var(--fg-muted); }

/* --- Ajustes --- */

.screen--settings { gap: var(--sp-lg); align-items: stretch; }
.screen--settings .switch { justify-content: flex-start; }
.screen--settings .label { margin-bottom: -14px; }
.screen--settings .btn { align-self: flex-start; }
.screen--settings .btn--big { align-self: stretch; }

/* --- Cuenta --- */

.screen--auth, .screen--account, .screen--reset { gap: var(--sp-lg); }

.auth__title {
  margin: 0;
  align-self: flex-start;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.auth__form { width: 100%; display: flex; flex-direction: column; gap: var(--sp-md); }
.field { display: flex; flex-direction: column; gap: 6px; width: 100%; }

.field__label {
  color: var(--fg-subtle);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field__input {
  font-family: var(--font);
  font-size: 15px;
  padding: 13px 14px;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  transition: border-color 0.12s ease, background 0.12s ease;
}

.field__input::placeholder { color: var(--fg-subtle); }
.field__input:focus { outline: none; background: var(--bg); border-color: var(--accent-line); }
.field__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.hint--error { color: var(--danger); }
.hint--ok { color: var(--success); }
.account__email { margin: 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.account__alias { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-sm); }
.account__alias .hint { margin: 0; }

/* Estado de la sincronización: información de fondo, nunca protagonista. */
.sync {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
}

.sync__state { margin: 0; text-align: center; }

/* --- Consentimiento (§31) ---
   El aviso de la medición. Fijo abajo, fuera de la pantalla, para que no
   estorbe ni bloquee: se juega igual con él a la vista y desaparece al
   contestar. Lo comparten la aplicación y las páginas para buscadores. */
.consent {
  position: fixed;
  left: 50%;
  bottom: max(var(--sp-md), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(28rem, calc(100% - 2 * var(--sp-md)));
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding: var(--sp-md);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  z-index: 10;
}

.consent[hidden] { display: none; }

.consent__text {
  margin: 0;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.5;
}

.consent__text a { color: var(--accent); }

.consent__actions {
  display: flex;
  gap: var(--sp-sm);
}

/* Las dos respuestas pesan igual: decir que no cuesta lo mismo que decir que sí. */
.consent__actions .btn { flex: 1; }

/* Enlace suelto, para lo poco que lleva fuera de la aplicación. */
.link {
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}