/* =========================================================
   SALA PRIVADA · hoja de estilos
   Identidad según el brand guideline:
     Ciruela Profundo  #3B0F2E   Oro Champagne  #C9A76A
     Marfil Cálido     #F6F1E8   Negro Carbón   #1A1A1A
     Titulares: Cormorant Garamond · Textos: Montserrat
   Sin recursos de terceros: la CSP solo admite 'self'.
   ========================================================= */

/* ---------------------------------------------------------- Tipografías
   Se cargan desde /static/fonts (ver el README de esa carpeta). Si los
   archivos no están, el navegador cae a las alternativas del stack sin
   romper nada. `local()` evita la descarga si ya están en el sistema.      */

@font-face {
  font-family: "Cormorant Garamond";
  src: local("Cormorant Garamond"), local("CormorantGaramond-Regular"),
       url("../fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: local("Cormorant Garamond SemiBold"), local("CormorantGaramond-SemiBold"),
       url("../fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: local("Montserrat"), local("Montserrat-Regular"),
       url("../fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: local("Montserrat Medium"), local("Montserrat-Medium"),
       url("../fonts/montserrat-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: local("Montserrat SemiBold"), local("Montserrat-SemiBold"),
       url("../fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------- Tokens */
:root {
  /* Paleta oficial */
  --ciruela:      #3B0F2E;
  --oro:          #C9A76A;
  --marfil:       #F6F1E8;
  --carbon:       #1A1A1A;

  /* Superficies. El fondo de página es el ciruela oficial del guideline;
     las capas elevadas suben en luminosidad para que cada tarjeta se
     despegue del fondo en lugar de fundirse con él. */
  --surface-0:    #3B0F2E;   /* Ciruela Profundo — fondo de página */
  --surface-1:    #4A1739;
  --surface-2:    #5A1E46;
  --surface-3:    #6B2755;

  /* Texto */
  --text:         #F6F1E8;
  --text-dim:     rgba(246, 241, 232, .72);
  --text-faint:   rgba(246, 241, 232, .5);
  --on-gold:      #2A0A20;

  /* Línea y acentos */
  --line:         rgba(201, 167, 106, .26);
  --line-strong:  rgba(201, 167, 106, .5);
  --oro-soft:     rgba(201, 167, 106, .12);
  /* Filo superior claro: da volumen sin recurrir a sombras duras */
  --sheen:        inset 0 1px 0 rgba(246, 241, 232, .07);
  /* Superficies hundidas: campos de formulario, bloques de código, pie */
  --recess:       rgba(26, 26, 26, .2);
  --recess-deep:  rgba(26, 26, 26, .3);

  /* Estados */
  --success:      #7BC08D;
  --warning:      #E0B44F;
  --danger:       #D97A7A;
  --info:         #9FB8D6;

  /* Radios generosos: la marca es elegante, no rígida */
  --radius:       8px;
  --radius-lg:    16px;
  --radius-xl:    26px;
  --shadow:       0 20px 52px rgba(18, 4, 14, .45);
  --shadow-lift:  0 28px 68px rgba(18, 4, 14, .5);
  --maxw:         1180px;
  /* Margen lateral fluido: 1rem en móvil, 1.5rem a partir de tableta */
  --gutter:       clamp(1rem, 3vw, 1.5rem);

  --font-display: "Cormorant Garamond", Cormorant, Garamond, "Times New Roman", Georgia, serif;
  --font-body:    "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  --track:        .14em;   /* tracking de la marca: generoso y sobrio */
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--surface-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.7; font-weight: 400;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(201, 167, 106, .2);
}

/* Un correo, un slug o una URL sin espacios no debe romper la maqueta en una
   pantalla estrecha: que corte donde haga falta antes que desbordar.

   `break-word` y **no** `anywhere`, que es lo que había y costó un rato
   entender: los dos rompen la palabra larga cuando iba a desbordar, pero
   `anywhere` además le dice al navegador que el ancho mínimo del elemento puede
   ser **un solo carácter**. En una tabla eso hunde las columnas: los nombres
   salían como «Valent / ina» y las comunas letra a letra, aunque hubiera sitio.
   `break-word` conserva la protección sin tocar el ancho mínimo. */
body, .card, .panel, .datalist, .msg, .table td, .flash {
  overflow-wrap: break-word;
}

/* Iluminación de ambiente: tres halos muy tenues que evitan que el fondo
   se lea como una superficie plana y opaca. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 15% -10%, rgba(201, 167, 106, .1), transparent 62%),
    radial-gradient(900px 560px at 100% 0%, rgba(107, 39, 85, .55), transparent 64%),
    radial-gradient(800px 500px at 50% 110%, rgba(90, 30, 70, .38), transparent 60%);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600; line-height: 1.18; letter-spacing: .012em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); }
h3 { font-size: 1.18rem; }
p  { margin: 0 0 1rem; }

a { color: var(--oro); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--marfil); }

img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* El `display: block` de arriba es de autor y gana al `[hidden] { display:
   none }` del navegador, que es de la hoja del agente de usuario. Sin esto,
   una imagen con `hidden` —las vistas previas de subir foto y de verificar
   identidad, que nacen vacías— se pinta igualmente y sale el icono de imagen
   rota con su texto alternativo. El `!important` es la forma habitual de
   arreglarlo y aquí está justificado: `hidden` significa oculto. */
[hidden] { display: none !important; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.main { padding-top: 2.75rem; padding-bottom: 5rem; min-height: 62vh; }

/* Visible solo para lectores de pantalla */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------- Utilidades
   La CSP no admite `style=""`: el nonce autoriza etiquetas <style>, no
   atributos, y añadir 'unsafe-inline' anularía la defensa contra XSS.
   Por eso los ajustes puntuales de espaciado y alineación viven aquí. */
.m-0      { margin: 0; }
.mb-0     { margin-bottom: 0; }
.mt-xs    { margin-top: .6rem; }
.mt-sm    { margin-top: .9rem; }
.mt-md    { margin-top: 1rem; }
.mt-lg    { margin-top: 1.25rem; }
.mt-xl    { margin-top: 1.5rem; }
.mt-2xl   { margin-top: 1.75rem; }
.mt-3xl   { margin-top: 2.5rem; }
.mt-4xl   { margin-top: 3.5rem; }
.mb-xs    { margin-bottom: .8rem; }

.row-center  { justify-content: center; }
.text-danger { color: var(--danger); }
.pre-line    { white-space: pre-line; }
.list-tight  { padding-left: 1.1rem; }
.muted { color: var(--text-dim); }
.small { font-size: .875rem; }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

/* Antetítulo en versalitas doradas: recurso recurrente de la marca. */
.eyebrow {
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--oro); font-weight: 600; margin-bottom: .7rem; display: block;
}

/* Filete decorativo bajo los títulos de sección */
.rule { width: 46px; height: 1px; background: var(--oro); margin: 0 0 1.5rem; border: 0; }
.rule--center { margin-left: auto; margin-right: auto; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--oro); color: var(--on-gold);
  padding: .6rem 1.1rem; border-radius: var(--radius); z-index: 100;
  font-size: .85rem; letter-spacing: .06em;
}
.skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 1px solid var(--oro); outline-offset: 3px; }

.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; }
.icon--lg { width: 1.9rem; height: 1.9rem; }

/* ---------------------------------------------------------- Cabecera */
.topbar {
  background: rgba(42, 10, 32, .82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 76px; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--marfil); }
.brand:hover { color: var(--marfil); }
.brand__mark { width: 34px; height: 34px; color: var(--marfil); flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-size: 1.32rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.brand__tag {
  font-size: .56rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--oro); margin-top: .28rem;
}

.nav { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.nav a {
  color: var(--text-dim); font-size: .76rem; letter-spacing: var(--track);
  text-transform: uppercase; font-weight: 500;
}
.nav a:hover { color: var(--marfil); }
.inline-form { display: inline; }

/* --- Cuenta y cierre de sesión ------------------------------------------ */
/* Se separan visualmente de la navegación: no son secciones del sitio, son
   acciones sobre tu cuenta. La línea vertical marca el corte. */
.cuenta {
  display: inline-flex; align-items: center; gap: .45rem;
  padding-left: 1.1rem; margin-left: .3rem;
  border-left: 1px solid var(--line);
  text-transform: none; letter-spacing: .02em;
}
.cuenta__correo { font-size: .78rem; }
.cuenta .icon { color: var(--oro); }

.btn--salir {
  border-color: var(--line);
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: .02em;
  font-size: .76rem;
}
.btn--salir:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(217, 122, 122, .1);
}
.btn--salir .icon { width: 1rem; height: 1rem; }

/* --- Menú plegable (solo móvil) ---------------------------------------- */
/* La casilla queda fuera de la vista pero sigue enfocable: Espacio abre y
   cierra el menú sin necesidad de JavaScript. */
.nav-toggle {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
.nav-burger { display: none; }
.nav-burger__lines,
.nav-burger__lines::before,
.nav-burger__lines::after {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--marfil); transition: transform .2s ease, opacity .2s ease;
}
.nav-burger__lines::before,
.nav-burger__lines::after { content: ""; position: absolute; }
.nav-burger__lines::before { transform: translateY(-7px); }
.nav-burger__lines::after  { transform: translateY(7px); }

.nav-toggle:focus-visible + .nav-burger {
  outline: 1px solid var(--oro); outline-offset: 3px;
}

/* ---------------------------------------------------------- Avisos */
.banner { padding: .7rem 0; font-size: .85rem; letter-spacing: .02em; }
.banner--warning { background: rgba(224, 180, 79, .1); border-bottom: 1px solid rgba(224, 180, 79, .25); }

.flashes { margin-bottom: 1.75rem; scroll-margin-top: 90px; }
.flash {
  padding: .9rem 1.15rem; border-radius: var(--radius);
  border: 1px solid var(--line); border-left-width: 3px;
  background: var(--surface-1); margin-bottom: .65rem; font-size: .9rem;
}
.flash--success { border-left-color: var(--success); background: rgba(123, 192, 141, .1); }
.flash--warning { border-left-color: var(--warning); background: rgba(224, 180, 79, .1); }
.flash--danger  { border-left-color: var(--danger);  background: rgba(217, 122, 122, .1); }
.flash--info    { border-left-color: var(--info);    background: rgba(159, 184, 214, .1); }

/* Destello breve al aparecer: llama la atención sin marear. */
.flashes--nuevo .flash { animation: aviso-nuevo .9s ease-out; }
@keyframes aviso-nuevo {
  0%   { transform: translateY(-6px); opacity: 0; }
  35%  { transform: translateY(0); opacity: 1; }
  60%  { box-shadow: 0 0 0 4px rgba(201, 167, 106, .22); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------------------------------------------------------- Botones
   Tres jerarquías, según el guideline: sólido, contorno dorado y texto.   */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.6rem; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: transparent; color: var(--marfil);
  font-family: var(--font-body); font-size: .74rem; font-weight: 600;
  letter-spacing: var(--track); text-transform: uppercase;
  cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--oro-soft); color: var(--marfil); border-color: var(--oro); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary { background: var(--oro); border-color: var(--oro); color: var(--on-gold); }
.btn--primary:hover { background: #D9BA83; border-color: #D9BA83; color: var(--on-gold); }

.btn--plum { background: var(--surface-3); border-color: var(--surface-3); }
.btn--plum:hover { background: var(--surface-2); border-color: var(--line-strong); }

.btn--danger { border-color: rgba(217, 122, 122, .5); color: var(--danger); }
.btn--danger:hover { background: rgba(217, 122, 122, .12); border-color: var(--danger); color: var(--danger); }

.btn--ghost { border-color: transparent; color: var(--text-dim); }
.btn--ghost:hover { color: var(--marfil); background: transparent; }

.btn--sm { padding: .5rem 1rem; font-size: .68rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }

.link-danger { color: var(--danger); }
.link-danger:hover { color: #E9A0A0; }

/* ---------------------------------------------------------- Formularios */
.form { max-width: 470px; }
.form--wide { max-width: 820px; }

.field { margin-bottom: 1.3rem; }
.field__label {
  display: block; font-size: .7rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: .45rem;
}
.field__hint  { font-size: .78rem; color: var(--text-faint); margin: .4rem 0 0; line-height: 1.55; }
.field__error { font-size: .78rem; color: var(--danger); margin: .4rem 0 0; }
.field--error .input { border-color: var(--danger); }

.input, textarea, select {
  width: 100%; padding: .8rem .95rem;
  background: var(--recess); color: var(--marfil);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .92rem; font-family: var(--font-body);
  transition: border-color .18s ease, background .18s ease;
}
.input::placeholder, textarea::placeholder { color: var(--text-faint); }
.input:focus, textarea:focus, select:focus {
  border-color: var(--oro); outline: none; background: var(--recess-deep);
}
textarea { resize: vertical; min-height: 110px; line-height: 1.65; }
select { appearance: none; background-image: none; cursor: pointer; }
select option { background: var(--surface-1); color: var(--marfil); }

.check { display: flex; align-items: flex-start; gap: .65rem; font-size: .87rem; cursor: pointer; margin-bottom: .5rem; }
.check__box { width: 16px; height: 16px; margin-top: .28rem; accent-color: var(--oro); flex: none; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
legend { padding: 0 .5rem; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.5rem; }

/* Trampa antibots */
input[name="website"] { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ---------------------------------------------------------- Paneles */
.panel {
  background: linear-gradient(170deg, var(--surface-2) 0%, var(--surface-1) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.9rem; margin-bottom: 1.6rem;
  box-shadow: var(--sheen);
}
.panel--tight { padding: 1.15rem 1.4rem; }
.panel--roomy { padding: 2.5rem 1.9rem; }
.panel__title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.hero {
  position: relative; text-align: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius-xl);
  background: linear-gradient(168deg, var(--surface-3) 0%, var(--surface-1) 100%);
  padding: 4.5rem 2.5rem; margin-bottom: 3rem; overflow: hidden;
  box-shadow: var(--shadow), var(--sheen);
}
.hero__mark { width: 62px; height: 62px; margin: 0 auto 1.5rem; color: var(--marfil); }
.hero h1 { margin-bottom: .7rem; }
.hero h1 em { font-style: normal; color: var(--oro); }
.hero p { color: var(--text-dim); max-width: 620px; margin: 0 auto 2rem; }

/* ---------------------------------------------------------- Tarjetas */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; }
.card {
  background: linear-gradient(170deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--sheen);
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow); }
.card__media { display: block; aspect-ratio: 3 / 4; background: var(--surface-2); overflow: hidden; position: relative; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.04); }
.card__placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(140deg, var(--surface-2), var(--surface-1));
  display: grid; place-items: center;
}
.card__placeholder::after {
  content: ""; width: 40px; height: 40px; opacity: .35;
  background: currentColor; color: var(--oro);
  mask: radial-gradient(circle at 50% 38%, #000 34%, transparent 36%);
}
.card__body { padding: 1.1rem 1.25rem 1.35rem; }
.card__title { font-size: 1.3rem; margin-bottom: .15rem; }
.card__title a { color: var(--marfil); }
.card__title a:hover { color: var(--oro); }
.card__meta { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 .6rem; }
.card__text { font-size: .86rem; color: var(--text-dim); margin: .6rem 0 .5rem; }
.card__rate { font-size: .82rem; letter-spacing: .08em; color: var(--oro); margin: .7rem 0 0; font-weight: 600; }

/* ---------------------------------------------------------- Distintivos */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .65rem; border-radius: 999px;
  /* Un distintivo es una etiqueta: nunca debe romperse. En una celda estrecha
     salía como «PUBLI / CADO» o «EN / REVISI / ÓN». */
  white-space: nowrap;
  font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--text-dim); background: transparent;
}
.badge--verified { color: var(--oro); border-color: var(--line-strong); background: var(--oro-soft); }
.badge--success  { color: var(--success); border-color: rgba(123, 192, 141, .38); }
.badge--warning  { color: var(--warning); border-color: rgba(224, 180, 79, .38); }
.badge--danger   { color: var(--danger);  border-color: rgba(217, 122, 122, .38); }

/* ---------------------------------------------------------- Perfil */
.profile { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 2.5rem; }
.profile__hero img { width: 100%; border-radius: var(--radius-lg); margin-bottom: 1rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.gallery img { border-radius: var(--radius); aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

.gallery__item {
  display: block; position: relative; border-radius: var(--radius);
  overflow: hidden; border: 2px solid transparent; cursor: pointer;
  transition: border-color .18s ease, opacity .18s ease;
}
.gallery__item:hover { border-color: var(--line-strong); }
/* La que se está viendo en grande queda marcada y algo atenuada, para que se
   entienda que ya está seleccionada. */
.gallery__item.is-active { border-color: var(--oro); }
.gallery__item.is-active img { opacity: .55; }

.profile__hero img { transition: opacity .2s ease; }

.datalist { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.datalist li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .88rem;
}
.datalist li:last-child { border-bottom: 0; }
.datalist span:first-child {
  color: var(--text-faint); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
}
.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.tags li {
  font-size: .72rem; letter-spacing: .06em; padding: .25rem .7rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-dim);
}

/* -------------------------------------------- Cambios pendientes de revisar
   El azul se reserva para "esto es lo que cambió". No se usa en ningún otro
   sitio de la interfaz, así que no se confunde con un estado ni con un error. */
:root { --cambio: #7FB3D5; --cambio-fondo: rgba(127, 179, 213, .1); }

.panel--cambios {
  border-color: rgba(127, 179, 213, .45);
  background: linear-gradient(170deg, rgba(127, 179, 213, .1), var(--surface-1));
}
.tabla-cambios .valor-antes {
  color: var(--text-faint); text-decoration: line-through;
}
.tabla-cambios .valor-despues { color: var(--cambio); font-weight: 600; }
.tabla-cambios .fila-revisable td:first-child { border-left: 2px solid var(--cambio); }

/* Marca los campos tocados dentro de la ficha completa */
.cambiado {
  background: var(--cambio-fondo);
  border-left: 2px solid var(--cambio);
  padding-left: .6rem !important;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.datalist li.cambiado { padding-right: .6rem; }
.etiqueta-cambios { color: var(--cambio); margin-top: .2rem; }

/* Correo completo en la ficha de administración */
.correo-completo {
  display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.correo-completo a { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }

/* ---------------------------------------------------------- Planes */
.plan { display: flex; }
.plan .card__body { display: flex; flex-direction: column; width: 100%; }
.plan--featured { border-color: var(--line-strong); box-shadow: var(--shadow), var(--sheen); }
.plan__name { font-size: 1.5rem; margin-bottom: .15rem; }
.plan__price {
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 600;
  color: var(--oro); margin: .9rem 0 .2rem; line-height: 1;
}
.plan__period { font-family: var(--font-body); font-size: .74rem; letter-spacing: .1em; color: var(--text-faint); }
.plan__features { list-style: none; padding: 0; margin: 1.1rem 0; font-size: .86rem; }
.plan__features li {
  padding: .4rem 0 .4rem 1.4rem; position: relative; border-bottom: 1px solid var(--line);
}
.plan__features li:last-child { border-bottom: 0; }
.plan__features li::before {
  content: "✓"; position: absolute; left: 0; color: var(--oro); font-size: .8rem;
}
.plan .btn { margin-top: auto; }

/* ------------------------------------------------------ Contacto directo */
.contact-box {
  margin-top: 1.25rem; padding: 1rem 1.15rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--oro-soft); text-align: center;
}
.contact-box__phone {
  display: block; font-family: var(--font-display); font-size: 1.6rem;
  font-weight: 600; color: var(--oro); letter-spacing: .04em; margin: .2rem 0 .5rem;
}
.contact-box__phone:hover { color: var(--marfil); }

/* ---------------------------------------------------------- Vídeo */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.video-grid video, .video-preview {
  width: 100%; border-radius: var(--radius); background: #000;
  border: 1px solid var(--line); aspect-ratio: 9 / 16; object-fit: cover;
}
.video-preview { margin-top: .7rem; aspect-ratio: auto; }

/* ---------------------------------------------------------- Tablas */
.table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.table th, .table td { padding: .75rem .8rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
/* `nowrap` solo en las cabeceras: con muchas columnas —estadísticas tiene diez—
   el navegador estrecha las celdas y parte los rótulos en dos líneas, que queda
   ilegible. Impidiéndolo, la tabla crece y `.table-scroll` la desplaza a lo
   ancho, que es para lo que existe. El cuerpo sí sigue partiendo: los nombres y
   las ubicaciones necesitan poder envolver. */
.table th {
  color: var(--text-faint); font-weight: 600; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .14em; white-space: nowrap;
}
/* Las columnas de cifras se leen mucho mejor alineadas a la derecha, y de paso
   se separan visualmente de las de texto. */
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr:hover td { background: rgba(201, 167, 106, .05); }

/* El desplazamiento horizontal necesita **las dos** reglas.
   Con solo `overflow-x: auto`, el `width: 100%` de la tabla la obliga a caber en
   el ancho disponible: en un móvil se comprime en lugar de desplazarse, y las
   celdas parten los nombres letra a letra —«Valent / ina»— mientras las últimas
   columnas quedan fuera de alcance. Con un ancho mínimo, la tabla sí supera al
   contenedor y entonces el desplazamiento existe de verdad.
   44rem cubre las tablas normales del panel, de cinco o seis columnas. */
.table-scroll { overflow-x: auto; }
.table-scroll > .table { min-width: 44rem; }

/* Estadísticas tiene nueve columnas y necesita más suelo que el resto. Va como
   modificador y no en `.table` para no forzar desplazamiento en las tablas
   estrechas, donde sobra el ancho. */
.table--datos { min-width: 58rem; }

/* ---------------------------------------------------------- Métricas */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2.25rem; }
.metric {
  background: linear-gradient(170deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.3rem; box-shadow: var(--sheen);
}
.metric__value { font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; line-height: 1; color: var(--oro); }
.metric__label { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-top: .5rem; }
.metric--alert { border-color: rgba(217, 122, 122, .4); }
.metric--alert .metric__value { color: var(--danger); }

/* Variación de visitas frente al periodo anterior. Se usan los mismos verdes y
   rojos de los estados; no hay clase de utilidad de color de texto y crear dos
   es más honesto que reutilizar una de estado para algo que no es un estado. */
.texto-sube { color: var(--success); }
.texto-baja { color: var(--danger); }

/* ---------------------------------------------------------- Directo */
/* Vídeo a la izquierda y chat a la derecha; en móvil, uno debajo del otro, que
   es donde va a estar la mayoría del tráfico.

   Las dos columnas arrancan a la misma altura y el chat **estira** hasta el alto
   del vídeo. Antes no cuadraba por dos motivos: un `<h2>Chat</h2>` visible
   empujaba la caja unos 70px hacia abajo, y el chat tenía alto fijo mientras el
   vídeo lo saca de su proporción 16:9. El encabezado sigue ahí para lectores de
   pantalla, en `.sr-only`. */
.directo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.75rem; }
.directo__chat { display: flex; flex-direction: column; min-width: 0; }
.directo__player {
  width: 100%; background: #000; border-radius: var(--radius-lg);
  border: 1px solid var(--line); aspect-ratio: 16 / 9;
}
/* El aviso de que falta el servidor de medios. Ocupa el mismo hueco que el
   reproductor para que la página no baile al montar MediaMTX. */
.directo__hueco {
  aspect-ratio: 16 / 9; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: .4rem;
  padding: 1.5rem; background: var(--recess-deep);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
}
.directo__donar { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; }
.directo__donar .input { max-width: 8rem; }

.directo__video { min-width: 0; }
/* El marco envuelve solo el reproductor: es lo que se lleva a pantalla completa,
   con el botón dentro para que siga habiendo salida sin depender de Escape. */
.directo__marco { position: relative; }
.directo__completa { position: absolute; top: .75rem; right: .75rem; z-index: 2; }

/* --- A pantalla completa, como en un reproductor de vídeo ---
   Solo el vídeo: el chat se queda fuera. El navegador pinta el elemento sin los
   márgenes de la página, así que hay que soltar la proporción 16:9 y dejar que
   manden las dimensiones de la pantalla. `contain` sobre negro es lo que da las
   bandas en lugar de recortar la imagen. */
.directo__marco:fullscreen {
  width: 100vw; height: 100vh;
  background: #000; display: flex; align-items: center; justify-content: center;
}
.directo__marco:fullscreen .directo__player,
.directo__marco:fullscreen .directo__hueco {
  aspect-ratio: auto; border: 0; border-radius: 0;
  width: 100%; height: 100%; object-fit: contain;
}
/* El botón se atenúa hasta que se pasa el ratón o recibe el foco, para no
   quedarse encima de la imagen. Con teclado sigue siendo alcanzable. */
.directo__marco:fullscreen .directo__completa { opacity: .35; transition: opacity .2s ease; }
.directo__marco:fullscreen .directo__completa:hover,
.directo__marco:fullscreen .directo__completa:focus-visible { opacity: 1; }

.chat {
  list-style: none; margin: 0 0 1rem; padding: .9rem 1rem;
  background: var(--recess); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  /* Estira hasta el alto que marca el vídeo, en lugar de un alto fijo que no
     coincidía con la proporción 16:9. El mínimo evita que quede ridículo cuando
     la columna es corta. */
  flex: 1 1 auto; min-height: 14rem;
  overflow-y: auto; font-size: .88rem;
}
.chat__linea { padding: .3rem 0; border-bottom: 1px solid rgba(201, 167, 106, .08); }
.chat__linea:last-child { border-bottom: 0; }
.chat__alias { color: var(--oro); margin-right: .4rem; }
/* El anuncio de una donación no es de nadie: se distingue de un comentario. */
.chat__linea--sistema { background: var(--oro-soft); border-radius: var(--radius); padding: .4rem .6rem; }
.chat__sistema { color: var(--oro); }
.chat__form { display: flex; gap: .6rem; }
.chat__form .input { flex: 1; }

.card__live {
  position: absolute; top: .6rem; left: .6rem; z-index: 1;
  padding: .2rem .55rem; border-radius: var(--radius);
  background: var(--danger); color: var(--on-gold);
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}

/* El código que tiene que mostrar a cámara: se lee de lejos y a contraluz. */
.codigo-directo {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 600;
  letter-spacing: .18em; color: var(--oro); margin: .4rem 0;
}

/* ---------------------------------------------------------- Mensajería */
.thread {
  display: flex; flex-direction: column; gap: .8rem;
  min-height: 220px; max-height: 58vh; overflow-y: auto; padding: .5rem;
  overscroll-behavior: contain;
}
/* Con pocos mensajes, este `auto` los empuja abajo en lugar de dejarlos
   flotando arriba con un hueco enorme debajo. Con muchos, no estorba. */
.thread > *:first-child { margin-top: auto; }

.msg {
  max-width: 72%; padding: .75rem 1rem; border-radius: var(--radius-lg);
  font-size: .9rem; line-height: 1.6; width: fit-content;
}
.msg--mine { align-self: flex-end; background: var(--oro); color: var(--on-gold); }
.msg--theirs { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); }
.msg__time { display: block; font-size: .68rem; opacity: .7; margin-top: .35rem; letter-spacing: .06em; }

.conv-list { list-style: none; padding: 0; margin: 0; }
.conv-list li { border-bottom: 1px solid var(--line); }
.conv-list a { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem .3rem; color: var(--marfil); }
.conv-list a:hover { background: rgba(201, 167, 106, .05); color: var(--marfil); }

/* ---------------------------------------------------------- Verificación */
.steps { list-style: none; counter-reset: paso; padding: 0; margin: 0 0 1.5rem; }
.steps li {
  counter-increment: paso; position: relative;
  padding: .95rem 0 .95rem 3rem; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(paso); position: absolute; left: 0; top: .85rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--oro);
  display: grid; place-items: center; font-size: .72rem; font-weight: 600;
}
.steps li[data-done="1"]::before { content: "✓"; background: var(--oro); border-color: var(--oro); color: var(--on-gold); }

.upload-slot {
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
  padding: 1.25rem; margin-bottom: 1rem; background: rgba(26, 26, 26, .18);
}
.upload-slot[data-done="1"] { border-style: solid; border-color: rgba(123, 192, 141, .45); }
.upload-slot__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.upload-slot__title { display: flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .95rem; }
.upload-slot__preview { max-width: 220px; border-radius: var(--radius); margin-top: .8rem; border: 1px solid var(--line); }

.challenge {
  font-family: var(--font-display); font-size: 2rem; font-weight: 600;
  letter-spacing: .2em; color: var(--oro);
  background: var(--recess-deep); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: .85rem 1.4rem; display: inline-block;
}

.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; }
.doc-grid figure { margin: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.doc-grid figcaption { padding: .6rem .9rem; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }

.codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .55rem; margin: 1.25rem 0; }
.codes code {
  background: var(--recess-deep); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem .75rem;
  font-size: .92rem; letter-spacing: .08em; text-align: center; color: var(--oro);
}

.qr { background: var(--marfil); padding: .9rem; border-radius: var(--radius); display: inline-block; }
.secret {
  font-family: ui-monospace, Consolas, monospace; word-break: break-all;
  background: var(--recess-deep); border: 1px solid var(--line);
  padding: .7rem .9rem; border-radius: var(--radius); font-size: .82rem;
  display: block; color: var(--oro);
}

/* ---------------------------------------------------------- Valores / iconos */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.75rem; text-align: center; }
.value__icon {
  width: 2.5rem; height: 2.5rem; margin: 0 auto .8rem; color: var(--oro);
}
.value h3 { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; }
.value p { font-size: .84rem; color: var(--text-dim); margin: 0; }

/* ---------------------------------------------------------- Paginación / filtros */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2.5rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.pagination__info { color: var(--text-faint); }

.filters { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 2rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); }
.filters .field { margin-bottom: 0; min-width: 180px; }

.chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.chip {
  padding: .4rem .95rem; border-radius: 999px; border: 1px solid var(--line);
  font-size: .74rem; letter-spacing: .08em; color: var(--text-dim);
}
.chip:hover, .chip--active { border-color: var(--oro); color: var(--oro); }
/* Las listas de chips llevan <li> por semántica; el punto sobra. */
.chips li { list-style: none; }

/* ==========================================================
   PÁGINAS PÚBLICAS INDEXABLES
   Aterrizaje por categoría y comuna, y contenido de confianza.
   ========================================================== */

/* Entradilla: el primer párrafo bajo el h1, algo mayor que el cuerpo. */
.lead { font-size: 1.05rem; color: var(--text-dim); max-width: 62ch; margin-bottom: 2rem; }

/* Migas de pan. Además de orientar, son las que alimentan el BreadcrumbList
   de datos estructurados y a veces salen en el propio resultado de Google. */
.migas {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  font-size: .78rem; color: var(--text-dim); margin-bottom: 1.25rem;
}
.migas a { color: var(--text-dim); }
.migas a:hover { color: var(--oro); }

/* Preguntas frecuentes: <details> nativo, sin una línea de JavaScript. */
.faq { display: flex; flex-direction: column; gap: .75rem; }
.faq__item {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface-1); padding: 1.1rem 1.35rem;
}
.faq__item[open] { border-color: var(--line-strong); }
.faq__pregunta {
  cursor: pointer; font-weight: 600; color: var(--marfil);
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::after { content: "+"; color: var(--oro); flex: none; }
.faq__item[open] .faq__pregunta::after { content: "−"; }
.faq__respuesta { margin: .85rem 0 0; color: var(--text-dim); }

/* Pasos numerados del proceso de verificación. */
.pasos { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .9rem; }
.pasos li { color: var(--text-dim); }
.pasos strong { color: var(--marfil); }

.lista-limpia { margin: 0 0 1rem; padding-left: 1.15rem; color: var(--text-dim); }
.lista-limpia li { margin-bottom: .4rem; }

/* ==========================================================
   METAS DEL PERFIL
   Barra de progreso y distintivos que se ganan.
   ========================================================== */

.meta-cab {
  display: flex; align-items: center; gap: .75rem;
  flex-wrap: wrap; margin-bottom: .85rem;
}

.barra {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--recess); border: 1px solid var(--line);
  margin-bottom: 1.1rem;
}
.barra__relleno {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--oro-oscuro, #A8863F), var(--oro));
  transition: width .4s ease;
}
/* El ancho va por clase y no con `style=""`: la CSP no admite atributos de
   estilo en línea, y el navegador los ignora en silencio. Se redondea a la
   decena, que para una barra de progreso es de sobra. */
.barra--0   { width: 0; }
.barra--10  { width: 10%; }
.barra--20  { width: 20%; }
.barra--30  { width: 30%; }
.barra--40  { width: 40%; }
.barra--50  { width: 50%; }
.barra--60  { width: 60%; }
.barra--70  { width: 70%; }
.barra--80  { width: 80%; }
.barra--90  { width: 90%; }
.barra--100 { width: 100%; }

.faltantes { margin: 0 0 1rem; padding-left: 1.15rem; }
.faltantes li { margin-bottom: .45rem; color: var(--text-dim); }
.faltantes strong { color: var(--marfil); }

/* Distintivo de los que se ganan, distinto del de identidad verificada para
   que no se confundan: uno lo da el equipo, el otro lo da la actividad. */
.badge--gana {
  border-color: var(--oro);
  color: var(--oro);
}

/* ==========================================================
   MENÚ DE ADMINISTRACIÓN
   Sale en todas las pantallas de /admin, justo bajo la barra.
   ========================================================== */

.adminnav {
  background: var(--recess);
  border-bottom: 1px solid var(--line);
  /* En pantallas estrechas se desplaza en horizontal en lugar de romperse en
     cuatro filas y empujar el contenido fuera de la vista. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.adminnav__inner {
  display: flex; align-items: center; gap: .35rem;
  padding: .5rem 0; white-space: nowrap;
}
.adminnav__link {
  padding: .38rem .8rem; border-radius: var(--radius-sm);
  font-size: .78rem; letter-spacing: .04em; color: var(--text-dim);
  text-decoration: none; flex: none;
}
.adminnav__link:hover { color: var(--marfil); background: var(--surface-1); }
.adminnav__link.is-active {
  color: var(--ciruela-oscuro, #2A0A20); background: var(--oro); font-weight: 600;
}
.adminnav__sep {
  width: 1px; height: 1.1rem; background: var(--line-strong);
  margin: 0 .45rem; flex: none;
}

/* ==========================================================
   FICHAS
   ========================================================== */

.saldo {
  display: flex; align-items: baseline; gap: .6rem;
  margin: 0 0 1.5rem;
}
.saldo__valor {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  line-height: 1; color: var(--oro);
}
.saldo__label { color: var(--text-dim); font-size: .9rem; }

.card--pack { text-align: center; }
.pack__fichas { font-size: 1.35rem; color: var(--marfil); margin: .35rem 0; }
.pack__bonus { color: var(--oro); font-size: .78rem; display: block; }

.positivo { color: var(--oro); }
.negativo { color: var(--text-dim); }
.right { text-align: right; }

.regalo { margin-bottom: .75rem; }

/* La semilla y el hash del sorteo: son cadenas largas que hay que poder copiar
   y comparar carácter a carácter, así que van en monoespaciada y parten. */
.mono {
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size: .74rem; word-break: break-all;
}

/* ==========================================================
   RESEÑAS Y ESTRELLAS
   ========================================================== */

.estrellas { display: inline-flex; align-items: center; gap: .35rem; }
.estrellas__dibujo { letter-spacing: .05em; line-height: 1; }
.estrella { color: var(--line-strong); }
.estrella--llena { color: var(--oro); }
.estrellas__nota { font-weight: 600; color: var(--marfil); font-size: .9rem; }
.estrellas__total { color: var(--text-dim); font-size: .8rem; }
.sin-subrayado { text-decoration: none; }

.resenas__resumen { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.resena {
  border-top: 1px solid var(--line);
  padding-top: 1.15rem;
  margin-top: 1.15rem;
}
.resena:first-of-type { border-top: 0; }
.resena__cabecera {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: .5rem;
}
.resena__autor { font-size: .82rem; color: var(--marfil); }
.resena__fecha { font-size: .78rem; }
.resena__texto { margin: 0; white-space: pre-line; }

/* La réplica va sangrada y con filete: se lee como lo que es, una respuesta a
   lo de arriba y no una reseña más. */
.resena__replica {
  margin: .85rem 0 0 1rem;
  padding: .85rem 1.1rem;
  border-left: 2px solid var(--oro);
  background: var(--recess);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ---------------------------------------------- Puntuación con estrellas

   Radios de verdad, sin JavaScript: si el JS falla, el formulario sigue
   funcionando. El truco de siempre es pintar las estrellas en orden inverso
   con `row-reverse`, que es lo que permite iluminar «esta y las anteriores»
   con el selector `~` al pasar el ratón.                                   */
.rating-radio {
  border: 0; padding: 0; margin: 0 0 1.25rem;
  display: flex; flex-direction: row-reverse; justify-content: flex-end;
}
.rating-radio legend { width: 100%; }
.rating-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.rating-radio label {
  font-size: 1.9rem; line-height: 1; cursor: pointer;
  color: var(--line-strong); padding: 0 .1rem;
  transition: color .12s ease;
}
.rating-radio label:hover,
.rating-radio label:hover ~ label,
.rating-radio input:checked ~ label { color: var(--oro); }
/* El foco tiene que verse: se navega con teclado. */
.rating-radio input:focus-visible + label { outline: 2px solid var(--oro); outline-offset: 2px; }

.resena-form { border-top: 1px solid var(--line); padding-top: 1.5rem; }

/* ---------------------------------------------------------- Pie */
.footer { border-top: 1px solid var(--line); background: var(--recess); padding: 3.5rem 0 2rem; margin-top: 4rem; }
.footer__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2.5rem; }
.footer__col { display: flex; flex-direction: column; gap: .6rem; }
.footer__brand { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .12em; text-transform: uppercase; }
.footer__col a { color: var(--text-dim); font-size: .8rem; letter-spacing: .06em; }
.footer__col a:hover { color: var(--oro); }
.footer__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .74rem; letter-spacing: .08em; }

/* ---------------------------------------------------------- Errores / muro */
.error-page { text-align: center; padding: 6rem 1rem; }
.error-page__code { font-family: var(--font-display); font-size: 5.5rem; font-weight: 600; color: var(--oro); line-height: 1; }

.gate { display: grid; place-items: center; min-height: 70vh; padding: 1.5rem 0 3rem; }
.gate__box {
  max-width: 560px; text-align: center;
  /* El degradado termina más claro que el fondo de página: si acabara en el
     mismo tono, la tarjeta se fundiría con la página y se leería como un
     bloque plano en lugar de como un elemento elevado. */
  background: linear-gradient(168deg, var(--surface-3) 0%, var(--surface-1) 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  padding: 3.25rem 3rem;
  box-shadow: var(--shadow-lift), var(--sheen);
}
.gate__mark { width: 56px; height: 56px; margin: 0 auto 1.5rem; color: var(--marfil); }
/* La casilla se alinea a la izquierda para que se lea como una frase, pero
   el bloque va centrado dentro de la tarjeta. */
.gate__consent { max-width: 340px; margin: 0 auto 1.5rem; text-align: left; }
/* Los botones del muro van siempre centrados bajo el texto. */
.gate__box .btn-row { justify-content: center; }

/* ----------------------------------------------------------------
   Muro de edad superpuesto

   Variante del muro para las páginas que deben posicionar en Google.
   El contenido está en el HTML —un buscador no pulsa botones— y esto se
   pinta encima. Ver `age_gate_overlay` en app/security/decorators.py.

   El desenfoque del fondo es deliberado: se intuye que hay algo detrás,
   pero no se lee. Sin él, el aviso parecería opcional.
   ---------------------------------------------------------------- */
.muro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  overflow-y: auto;
  background: rgba(12, 4, 10, 0.86);
  backdrop-filter: blur(14px);
}
.muro__caja {
  max-width: 560px;
  text-align: center;
  background: linear-gradient(168deg, var(--surface-3) 0%, var(--surface-1) 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-lift), var(--sheen);
}
.muro__caja .btn-row { justify-content: center; }
/* La casilla se alinea a la izquierda para que se lea como una frase, pero el
   bloque va centrado dentro de la tarjeta. Igual que en el muro clásico. */
.muro__caja .gate__consent { max-width: 340px; margin: 0 auto 1.5rem; text-align: left; }
/* Sin esto, el contenido de detrás se puede recorrer con la rueda del ratón
   mientras el aviso sigue en pantalla. */
body:has(.muro) { overflow: hidden; }

@media (max-width: 560px) {
  .muro__caja { padding: 2rem 1.25rem; }
}

/* ==========================================================
   RESPONSIVE
   Enfoque: la maqueta es fluida por defecto (rejillas auto-fit,
   sin anchos fijos, tipografía con clamp). Los puntos de corte
   solo resuelven lo que la fluidez no arregla sola.
   ========================================================== */

/* ---------------------------------------------- Tableta grande (≤1024px) */
@media (max-width: 1024px) {
  .profile { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.75rem; }
  .hero { padding: 3.5rem 2rem; }
  .panel { padding: 1.6rem; }
}

/* ---------------------------------------------------- Tableta (≤820px) */
@media (max-width: 820px) {
  .profile { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero { padding: 3rem 1.5rem; }
  .panel { padding: 1.4rem; }
  .msg { max-width: 88%; }
  .thread { max-height: none; }
  .footer { padding: 2.5rem 0 1.5rem; margin-top: 2.5rem; }
  .footer__inner { gap: 1.75rem; }

  /* --- El menú pasa a plegable --- */
  .topbar__inner { min-height: auto; padding: .85rem 0; gap: .75rem; }

  /* El menú de administración son trece enlaces en una fila, y en un móvil se
     salía de la pantalla: las últimas colas quedaban inalcanzables. Se desplaza
     a lo ancho en lugar de desbordar, con el arrastre táctil por inercia. */
  .adminnav__inner {
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .adminnav__link { flex: none; }

  .nav-burger {
    display: grid; place-items: center; position: relative;
    width: 44px; height: 44px;          /* zona táctil mínima recomendada */
    margin-left: auto; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--radius);
  }

  .nav {
    display: none; order: 3; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--line); margin-top: .35rem; padding-top: .35rem;
  }
  .nav-toggle:checked ~ .nav { display: flex; }

  .nav a {
    padding: .85rem .25rem; font-size: .82rem;
    border-bottom: 1px solid var(--line);
  }
  .nav a:last-child { border-bottom: 0; }
  /* Los botones del menú ocupan el ancho completo, más fáciles de acertar */
  .nav .btn { width: 100%; margin: .6rem 0; justify-content: center; }
  .nav .inline-form { display: block; width: 100%; }

  /* En el desplegable, la cuenta encabeza su propio bloque en vez de ir
     colgando del borde izquierdo, que ahí no significa nada. */
  .cuenta {
    padding-left: .25rem; margin-left: 0;
    border-left: 0; border-bottom: 1px solid var(--line);
    padding-top: .85rem; padding-bottom: .85rem; width: 100%;
  }

  /* Aspa cuando está abierto */
  .nav-toggle:checked + .nav-burger .nav-burger__lines { background: transparent; }
  .nav-toggle:checked + .nav-burger .nav-burger__lines::before { transform: rotate(45deg); }
  .nav-toggle:checked + .nav-burger .nav-burger__lines::after  { transform: rotate(-45deg); }
}

/* ------------------------------------------------------ Móvil (≤600px) */
@media (max-width: 600px) {
  h1 { font-size: clamp(1.6rem, 6.5vw, 2rem); }
  .main { padding-top: 1.75rem; padding-bottom: 3rem; }

  .hero { padding: 2.25rem 1.25rem; margin-bottom: 2rem; border-radius: var(--radius-lg); }
  .hero__mark { width: 48px; height: 48px; margin-bottom: 1rem; }

  .gate { min-height: auto; padding: 1rem 0 2rem; }
  .gate__box { padding: 2rem 1.35rem; border-radius: var(--radius-lg); }
  .gate__mark { width: 46px; height: 46px; }

  .panel { padding: 1.15rem; border-radius: var(--radius-lg); }
  .panel--tight { padding: .95rem 1.1rem; }

  /* Una sola columna: por debajo de 600px dos columnas aprietan demasiado */
  .cards   { grid-template-columns: 1fr; gap: 1rem; }
  .directo { grid-template-columns: 1fr; gap: 1.25rem; }
  /* Apilados, el chat ya no tiene un vídeo al lado que le marque el alto: se le
     fija uno para que no crezca sin fin con los mensajes. */
  .chat    { flex: none; height: 16rem; min-height: 0; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
  .doc-grid { grid-template-columns: 1fr; }
  .values  { gap: 1.25rem; }
  .metrics { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .65rem; }
  .metric  { padding: 1rem; }
  .metric__value { font-size: 1.6rem; }

  /* Los filtros en columna: apilados se rellenan mucho mejor con el pulgar */
  .filters { flex-direction: column; align-items: stretch; gap: .85rem; }
  .filters .field { min-width: 0; width: 100%; }
  .filters .btn { width: 100%; }

  .btn { width: auto; }
  .btn-row { gap: .5rem; }
  .btn-row > form { flex: 1 1 auto; }

  .msg { max-width: 94%; }
  .challenge { font-size: 1.4rem; letter-spacing: .14em; padding: .65rem 1rem; }
  .codes { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

  .datalist li { flex-direction: column; gap: .15rem; padding: .6rem 0; }
  .footer__legal { flex-direction: column; gap: .4rem; }

  /* Aviso de que la tabla se desplaza en horizontal */
  .table-scroll {
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--surface-1) 30%, transparent),
      linear-gradient(to left,  var(--surface-1) 30%, transparent) 100% 0;
    background-size: 32px 100%, 32px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local;
  }
  .table th, .table td { padding: .6rem .55rem; }
}

/* ------------------------------------------- Móvil pequeño (≤380px) */
@media (max-width: 380px) {
  .brand__mark { width: 28px; height: 28px; }
  .brand__name { font-size: 1.05rem; letter-spacing: .06em; }
  .brand__tag  { font-size: .48rem; letter-spacing: .2em; }
  .gate__box, .panel { padding: 1rem; }
  .hero { padding: 1.75rem 1rem; }
  .codes { grid-template-columns: 1fr; }
  /* El código que ella muestra a cámara mide nueve caracteres con separación
     generosa. A 390px entra con holgura; por debajo iba justo, y es el texto que
     tiene que poder leer y copiar a mano sin equivocarse. */
  .codigo-directo { font-size: 2rem; letter-spacing: .12em; }
}

/* ------------------------------------------------ Pantallas táctiles */
/* En un dedo no se acierta un objetivo de 28px. Se aplica por tipo de
   puntero y no por ancho: hay tabletas grandes que también son táctiles. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn--sm { min-height: 38px; }
  .nav a { min-height: 44px; display: flex; align-items: center; }
  .check { padding: .35rem 0; }
  .check__box { width: 20px; height: 20px; }
  .input, textarea, select { padding: .85rem .95rem; font-size: 1rem; }
  .pagination a { padding: .6rem .4rem; }
}

/* --------------------------------------------------- Pantalla apaisada */
/* Un móvil en horizontal tiene muy poca altura: el muro de edad no debe
   obligar a hacer scroll para llegar al botón. */
@media (max-height: 520px) and (orientation: landscape) {
  .gate { min-height: auto; padding: 1rem 0; }
  .gate__box { padding: 1.5rem; }
  .gate__mark { display: none; }
  .hero { padding: 2rem 1.5rem; }
  .thread { max-height: 45vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .topbar, .footer, .btn, .flashes { display: none !important; }
  body { background: #fff; color: #000; }
}