/* ==========================================================================
   Farmea — hoja de estilo del frontend (farmea.org)

   MÓVIL PRIMERO, de verdad: todo lo que hay antes de la primera @media es la
   hoja del teléfono. Las @media sólo AÑADEN hacia arriba (480 / 768 / 1024).
   Nadie llega aquí desde un escritorio: llega desde un enlace pegado en un
   grupo de WhatsApp o de Telegram, con el pulgar.

   Identidad heredada de las Aura Cards y de `marca/` (logo "Lacre del
   Tribunal"): negro de tribunal, oro de veredicto y rojo de lacre. Nada de
   morado: el acento de acción es el oro, y el rojo es el sello.

   Sin dependencias: cero CDN, cero tipografía remota, cero framework. Las
   familias son pilas del sistema para que la página pinte en el primer
   fotograma aunque la red esté fatal.
   ========================================================================== */

:root {
  /* --- Color: los mismos hex que estampan las tarjetas --------------- */
  --negro:        #000000;   /* fondo tier top de las cards               */
  --fondo:        #0b0b12;   /* negro humo                                */
  --panel:        #14141e;   /* superficie de tarjeta                     */
  --panel-alto:   #1b1b26;   /* superficie anidada                        */
  --linea:        #2a2a36;
  --linea-suave:  #21212c;

  --oro:          #ffd700;   /* oro veredicto                             */
  --oro-suave:    #fff1a8;   /* luz del oro                               */
  --oro-hondo:    #b08600;   /* sombra del oro                            */

  --lacre:        #e11d2e;   /* sello de todas las cards                  */
  --lacre-claro:  #f4485c;
  --lacre-hondo:  #8e0c1a;

  --verde:        #0b7a4b;   /* "doy fe": blanco encima = 5.4:1           */
  --verde-claro:  #5fd9a0;

  --texto:        #f1ede4;   /* crema: 15:1 sobre el panel                */
  --texto-suave:  #a8a296;   /* 7:1 sobre el panel                        */
  --texto-tenue:  #6f6a60;

  /* --- Tipografía: pilas del sistema, sin descargas ------------------ */
  --tipo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --tipo-titulo: "Iowan Old Style", "Palatino Linotype", Palatino, Palladio,
          Georgia, "Times New Roman", serif;
  --tipo-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  /* --- Ritmo (escala de 4) ------------------------------------------- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px;

  --radio-s: 10px;
  --radio:   14px;
  --radio-l: 20px;
  --pastilla: 999px;

  --tabs-alto: 60px;
  --ancho: 900px;
  --ancho-lectura: 680px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;   /* que el móvil no reescale el texto */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 1rem/1.6 var(--tipo);
  /* Hueco para la barra de pestañas fija (y para el gesto del iPhone). */
  padding-bottom: calc(var(--tabs-alto) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;              /* red de seguridad: nunca scroll lateral */
}

img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--tipo-titulo);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--e3);
  letter-spacing: .01em;
}
h2 { font-size: 1.375rem; }
h3 { font-size: 1.0625rem; margin-top: var(--e5); }
h2:first-child, h3:first-child { margin-top: 0; }
p  { margin: 0 0 var(--e3); }
p:last-child { margin-bottom: 0; }

a { color: var(--oro); }
a:hover { color: var(--oro-suave); }

/* Foco visible SIEMPRE: es la única navegación de quien va por teclado. */
:focus-visible {
  outline: 3px solid var(--oro);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: rgba(255, 215, 0, .28); color: #fff; }

/* Salto al contenido para lectores de pantalla y teclado. */
.saltar {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 200;
  padding: var(--e3) var(--e4);
  background: var(--oro);
  color: #14100a;
  font-weight: 700;
  border-radius: 0 0 var(--radio-s) 0;
  /* Fuera de la vista sin salirse del lienzo (nada de left:-9999px, que
     ensancha el documento). */
  transform: translateY(-110%);
}
.saltar:focus { transform: none; }

/* Sólo para lectores de pantalla (las cabeceras de columna del historial). */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--e4);
}

/* --------------------------------------------------------------------------
   Cabecera: la firma de la marca (sello + FARMEA + regla de oro)
   Es la misma pieza que la gente ya ha visto en la tarjeta compartida.
   -------------------------------------------------------------------------- */
.cabecera {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: linear-gradient(180deg, var(--negro), #08080e);
  border-bottom: 1px solid var(--linea);
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 44px;
  text-decoration: none;
  color: inherit;
  flex: 0 1 auto;
  min-width: 0;
}
.marca-sello {
  width: 38px; height: 38px;
  border-radius: 50%;
  flex: none;
  /* El lacre lleva su propia sombra impresa; esto sólo lo despega del negro. */
  box-shadow: 0 0 0 1px rgba(255, 215, 0, .22);
}
.marca > span { min-width: 0; overflow: hidden; }
.marca-nombre {
  display: block;
  font-family: var(--tipo-titulo);
  font-weight: 700;
  /* En un teléfono de 320 px el selector de idioma se come el sitio: el
     wordmark encoge con la pantalla en vez de meterse debajo. */
  font-size: clamp(1.05rem, 5.2vw, 1.3rem);
  letter-spacing: .1em;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
}
/* El lema completo del wordmark sólo cabe con holgura en pantalla ancha; en
   el móvil vive en la portada y en el pie, no en la barra superior. */
.marca-lema {
  display: none;
  margin-top: 3px;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--oro);
}

/* Selector de idioma: control segmentado, no tres enlaces de 22 px. */
.idiomas {
  display: flex;
  margin-left: auto;
  flex: none;
  border: 1px solid var(--linea);
  border-radius: var(--pastilla);
  overflow: hidden;
  background: rgba(255, 255, 255, .03);
}
.idioma {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--e2);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--texto-suave);
  text-decoration: none;
  touch-action: manipulation;
}
.idioma + .idioma { border-left: 1px solid var(--linea); }
.idioma:hover { color: var(--texto); background: rgba(255, 255, 255, .05); }
.idioma-activo,
.idioma-activo:hover {
  background: var(--oro);
  color: #14100a;
}

/* --------------------------------------------------------------------------
   Navegación principal: barra de pestañas FIJA ABAJO, en la zona del pulgar.
   Cinco destinos, ni uno más (Moderación es de administración y va al pie).
   -------------------------------------------------------------------------- */
.tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .94);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@supports (backdrop-filter: blur(1px)) {
  .tabs { background: rgba(0, 0, 0, .8); backdrop-filter: saturate(150%) blur(14px); }
}
.tabs ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
.tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tabs-alto);
  padding: var(--e2) 2px;
  border-top: 2px solid transparent;
  color: var(--texto-suave);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  transition: color .2s ease, background .2s ease;
}
.tabs a:hover { color: var(--texto); }
.tab-activo a {
  color: var(--oro);
  border-top-color: var(--oro);
  background: linear-gradient(180deg, rgba(255, 215, 0, .14), transparent 78%);
}

/* --------------------------------------------------------------------------
   Contenido
   -------------------------------------------------------------------------- */
/* `main` es también `.contenedor`, así que hay que ganarle en especificidad
   o el `padding: 0 var(--e4)` de la clase deja el contenido pegado al borde
   inferior de la cabecera. */
main.contenedor {
  display: block;
  padding-top: var(--e4);
  padding-bottom: var(--e6);
}

.card {
  background: var(--panel);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio);
  padding: var(--e4);
  margin: 0 0 var(--e4);
}
.card > :last-child { margin-bottom: 0; }

/* La tarjeta "oficial": sello de lacre arriba, como un expediente firmado. */
.sentencia {
  border-color: rgba(255, 215, 0, .38);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(225, 29, 46, .13), transparent 62%),
    var(--panel);
}
.sentencia::before {
  content: "";
  display: block;
  height: 3px;
  margin: calc(var(--e4) * -1) calc(var(--e4) * -1) var(--e4);
  border-radius: var(--radio) var(--radio) 0 0;
  background: linear-gradient(90deg, var(--lacre), var(--oro), var(--lacre));
}

.muted { color: var(--texto-suave); font-size: .9375rem; }
.pos   { color: var(--oro); font-weight: 700; }
.propuesto { color: var(--oro-hondo); font-weight: 700; }
.no    { color: var(--lacre-claro); font-weight: 700; }

/* Cifras y códigos: mono con cifras tabulares, que no bailen al cambiar. */
.expediente {
  font-family: var(--tipo-mono);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: .06em;
  color: var(--oro);
  overflow-wrap: anywhere;
}
td.num, th.num, .propuesto, .pos { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Portada: los tres segundos que decide quien abre el enlace en el chat
   -------------------------------------------------------------------------- */
.hero {
  text-align: center;
  padding: var(--e4);
  margin-bottom: var(--e4);
  border: 1px solid rgba(255, 215, 0, .2);
  border-radius: var(--radio-l);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(225, 29, 46, .18), transparent 60%),
    linear-gradient(180deg, var(--negro), var(--panel));
}
.hero-sello {
  width: 64px; height: 64px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 215, 0, .3), 0 10px 30px rgba(225, 29, 46, .28);
}
.hero-nombre {
  font-family: var(--tipo-titulo);
  font-size: clamp(2rem, 12vw, 3.4rem);
  line-height: 1;
  letter-spacing: .08em;
  color: #fff;
  margin: var(--e2) 0 var(--e3);
}
.hero-regla {
  display: block;
  width: min(76%, 320px);
  height: 2px;
  margin: 0 auto var(--e2);
  border: 0;
  background: linear-gradient(90deg, transparent, var(--oro-hondo) 15%,
              var(--oro) 50%, var(--oro-hondo) 85%, transparent);
}
.hero-lema {
  margin: 0 0 var(--e3);
  font-size: clamp(.8rem, 3.4vw, .9rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
}
.hero-claim {
  margin: 0 auto;
  max-width: 34em;
  color: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* "Cómo funciona": tres pasos numerados, no tres viñetas. */
.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos li {
  display: flex;
  gap: var(--e3);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--linea-suave);
  line-height: 1.5;
}
.pasos li:last-child { border-bottom: 0; padding-bottom: 0; }
.pasos li::before {
  counter-increment: paso;
  content: counter(paso);
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 215, 0, .4);
  color: var(--oro);
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: .95rem;
}

/* --------------------------------------------------------------------------
   Formularios: la acción principal de toda la web
   -------------------------------------------------------------------------- */
.campo { margin-bottom: var(--e4); }
.campo > label {
  display: block;
  margin-bottom: var(--e2);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--texto);
}
.ayuda { margin: var(--e2) 0 0; font-size: .875rem; color: var(--texto-suave); }

input[type=text], textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  background: #0a0a11;
  color: var(--texto);
  font: 400 1rem/1.5 var(--tipo);   /* 16px: evita el zoom automático de iOS */
}
textarea { min-height: 112px; resize: vertical; }
input[type=text]::placeholder, textarea::placeholder { color: var(--texto-tenue); }
input[type=text]:focus, textarea:focus {
  border-color: var(--oro);
  background: #0d0d15;
}
#buscar-expediente {
  font-family: var(--tipo-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Botones: 52 px de alto, ancho completo en el móvil
   -------------------------------------------------------------------------- */
.btn, button, input[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border: 1px solid rgba(255, 215, 0, .38);
  border-radius: var(--radio-s);
  background: rgba(255, 215, 0, .08);
  color: var(--oro);
  font: 600 1rem/1.2 var(--tipo);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .15s ease, background .2s ease, filter .2s ease;
}
.btn:hover, button:hover, input[type=submit]:hover {
  background: rgba(255, 215, 0, .16);
  color: var(--oro-suave);
}
.btn:active, button:active, input[type=submit]:active { transform: scale(.985); }

/* Las variantes se escriben `.btn.btn-x` a propósito: `input[type=submit]`
   pesa (0,1,1) y le ganaría a una sola clase, así que el botón de enviar se
   quedaba gris. Todos los botones con variante llevan también `.btn`. */

/* Acción principal: oro macizo con texto negro (contraste 12:1). */
.btn.btn-oro {
  background: linear-gradient(180deg, var(--oro-suave), var(--oro));
  border-color: var(--oro);
  color: #14100a;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(255, 215, 0, .16);
}
.btn.btn-oro:hover { background: var(--oro-suave); color: #14100a; filter: brightness(1.04); }

.btn.btn-fe {
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
}
.btn.btn-fe:hover { background: #0e8f58; color: #fff; }

.btn.btn-mentira {
  background: var(--lacre);
  border-color: var(--lacre);
  color: #fff;
}
.btn.btn-mentira:hover { background: var(--lacre-claro); color: #fff; }

/* Grupo de acciones: apiladas y a lo ancho en el móvil. */
.acciones {
  display: grid;
  gap: var(--e2);
  margin: var(--e4) 0 0;
  padding: 0;
}
.acciones:last-child { margin-bottom: 0; }

/* Firmar o desmentir: las dos únicas respuestas, del mismo tamaño y a lo
   ancho del pulgar. Ninguna de las dos se disfraza de "la buena". */
.veredicto-botones { display: grid; gap: var(--e3); margin-top: var(--e4); }
.veredicto-botones .btn { width: 100%; }

/* --------------------------------------------------------------------------
   Avisos (flash)
   -------------------------------------------------------------------------- */
.flash {
  display: flex;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  margin: 0 0 var(--e4);
  border-radius: var(--radio-s);
  border-left: 4px solid;
  font-size: .9375rem;
  line-height: 1.5;
}
.flash.success { background: rgba(11, 122, 75, .18); border-color: var(--verde-claro); color: #b8f0d4; }
.flash.error   { background: rgba(225, 29, 46, .16); border-color: var(--lacre-claro); color: #ffc9cf; }

/* --------------------------------------------------------------------------
   Etiquetas de estado y cifras
   -------------------------------------------------------------------------- */
.estado-badge {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--pastilla);
  background: var(--panel-alto);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Aviso ámbar: "esto todavía no cuenta, falta que firmen". */
.pendiente {
  padding: var(--e4);
  margin-top: var(--e4);
  border: 1px solid rgba(255, 215, 0, .35);
  border-radius: var(--radio-s);
  background: rgba(255, 215, 0, .06);
}
.pendiente h3 { margin: 0 0 var(--e2); font-size: 1rem; color: var(--oro); }

/* El enlace que se pega en el chat: legible, seleccionable y sin desbordar. */
.compartir {
  padding: var(--e4);
  margin-top: var(--e4);
  border: 1px dashed rgba(255, 215, 0, .4);
  border-radius: var(--radio-s);
  background: rgba(0, 0, 0, .35);
}
.compartir-url {
  display: block;
  margin-top: var(--e2);
  padding: var(--e3);
  border-radius: var(--radio-s);
  background: #0a0a11;
  font-family: var(--tipo-mono);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--oro);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--e3) var(--e2); border-bottom: 1px solid var(--linea-suave); }
th { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); }
tr:last-child td { border-bottom: 0; }

/* Tablas de datos anchas: el scroll se queda DENTRO de la caja, nunca en la
   página. El degradado del borde derecho avisa de que hay más a la derecha. */
.tabla-scroll {
  margin: var(--e3) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Sombras de borde que sólo aparecen si de verdad hay algo más a los lados
     (truco clásico `local` + `scroll`): así se ve que la tabla se desliza. */
  background:
    linear-gradient(90deg, var(--panel) 40%, rgba(20, 20, 30, 0)) left / 22px 100% no-repeat local,
    linear-gradient(270deg, var(--panel) 40%, rgba(20, 20, 30, 0)) right / 22px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .55), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .55), transparent) right / 12px 100% no-repeat scroll;
}
.tabla-scroll table { min-width: 100%; }
.tabla-scroll td, .tabla-scroll th { padding: var(--e3) 6px; font-size: .875rem; }
.tabla-scroll th { font-size: .75rem; letter-spacing: .03em; }

/* Tabla clave/valor (sentencia, verificación, tarjeta): en el móvil deja de
   ser una tabla y pasa a ser una lista de fichas. El HTML no cambia. */
.kv tr {
  display: block;
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--linea-suave);
}
.kv tr:last-child { border-bottom: 0; padding-bottom: 0; }
.kv td { display: block; padding: 0; border: 0; }
.kv tr > td:first-child {
  margin-bottom: 3px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.kv tr > td:last-child { font-size: 1rem; overflow-wrap: anywhere; }

/* Cabecera centrada de verificación y tarjeta: el código es el protagonista. */
.verif-cabeza { text-align: center; margin-bottom: var(--e4); }
.verif-cabeza h2 { margin-bottom: var(--e2); }
.expediente-grande {
  margin: var(--e3) 0 0;
  font-size: clamp(1.1rem, 6vw, 1.6rem);
  letter-spacing: .1em;
}

/* --------------------------------------------------------------------------
   Top: leaderboard
   -------------------------------------------------------------------------- */
.top-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e3);
  margin-top: var(--e4);
  padding: 0;
  list-style: none;
}
.top-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  background: var(--panel-alto);
}
/* La Aura Card es vertical (1080x1920): se enseña con su proporción real,
   no recortada en un cuadrado que le cortaría media sentencia. */
.top-card img {
  width: 46px;
  aspect-ratio: 9 / 16;
  height: auto;
  flex: none;
  border-radius: 6px;
  object-fit: cover;
  background: var(--negro);
}
.rank {
  flex: none;
  width: 40px;
  text-align: center;
  font-family: var(--tipo-titulo);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}
.top-datos { min-width: 0; flex: 1 1 auto; }
.top-name { font-weight: 700; overflow-wrap: anywhere; }
.top-aura { color: var(--oro); font-weight: 700; font-variant-numeric: tabular-nums; }
.top-1 { border-color: rgba(255, 215, 0, .45); background:
  linear-gradient(180deg, rgba(255, 215, 0, .08), var(--panel-alto)); }
.top-1 .rank, .top-2 .rank, .top-3 .rank { color: var(--oro); font-size: 1.6rem; }

.grupo-rank { list-style: none; padding: 0; margin: var(--e4) 0 0; counter-reset: grupo; }
.grupo-rank li {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--linea-suave);
  flex-wrap: wrap;
}
.grupo-rank li:last-child { border-bottom: 0; }
.grupo-rank li::before {
  counter-increment: grupo;
  content: counter(grupo);
  flex: none;
  min-width: 22px;
  color: var(--texto-tenue);
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.grupo-rank-name { font-weight: 700; flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; }
.grupo-rank-meta { color: var(--oro); font-size: .9375rem; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Perfil: el historial es una lista de fichas, no una tabla de seis columnas
   -------------------------------------------------------------------------- */
.perfil-cabeza { display: flex; gap: var(--e4); align-items: center; flex-wrap: wrap; }
.aura-total {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  border: 1px solid rgba(255, 215, 0, .3);
  border-radius: var(--radio-s);
  background: rgba(255, 215, 0, .06);
}
.aura-cifra {
  font-family: var(--tipo-titulo);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
}
.aura-et { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); }

.tarjeta-img {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: var(--e4) auto 0;
  border-radius: var(--radio-s);
}

.juicios { list-style: none; margin: var(--e4) 0 0; padding: 0; display: grid; gap: var(--e3); }
.juicio {
  padding: var(--e4);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio-s);
  background: var(--panel-alto);
}
.juicio-veredicto { font-weight: 700; margin: 0 0 var(--e1); }
.juicio-anecdota { margin: 0 0 var(--e3); color: var(--texto-suave); font-size: .9375rem; }
.cifras { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e3); }
.cifra {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  background: rgba(0, 0, 0, .3);
}
.cifra-et {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-suave);
}
.cifra-valor { font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.juicio-pie { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: center; }
.juicio-fecha { color: var(--texto-suave); font-size: .875rem; }

/* --------------------------------------------------------------------------
   Vincular: el código a la vista
   -------------------------------------------------------------------------- */
.codigo-caja {
  text-align: center;
  padding: var(--e5) var(--e4);
  margin: var(--e4) 0;
  border: 1px solid rgba(255, 215, 0, .35);
  border-radius: var(--radio);
  background: rgba(0, 0, 0, .35);
}
.codigo-valor {
  display: block;
  margin: var(--e3) 0;
  font-family: var(--tipo-mono);
  font-size: clamp(1.5rem, 9vw, 2.2rem);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--oro);
  overflow-wrap: anywhere;
}
.oculto { display: none; }

/* --------------------------------------------------------------------------
   Reglas: índice, listas y comandos
   -------------------------------------------------------------------------- */
.card[id] { scroll-margin-top: var(--e4); }

.indice { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }
.indice a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--e4);
  border: 1px solid var(--linea);
  border-radius: var(--pastilla);
  background: var(--panel-alto);
  color: var(--texto);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  touch-action: manipulation;
}
.indice a:hover { border-color: var(--oro); color: var(--oro); }

.reglas-lista { margin: var(--e3) 0 0; padding-left: 1.2em; }
.reglas-lista li { margin-bottom: var(--e3); line-height: 1.55; }
.reglas-lista li:last-child { margin-bottom: 0; }

/* Subtítulo dentro de una tarjeta ("Dónde se saca el código"): más pequeño
   que un h3 y sin el aire de arriba, porque cuelga del párrafo anterior. */
.identidad-como {
  margin: var(--e4) 0 0;
  font-family: var(--tipo-titulo);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--oro);
}

.comandos { list-style: none; margin: var(--e3) 0 0; padding: 0; }
.comandos li {
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--linea-suave);
  line-height: 1.5;
}
.comandos li:last-child { border-bottom: 0; padding-bottom: 0; }
.comandos code { display: inline-block; margin-bottom: var(--e1); }

code {
  padding: 2px 6px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: #0a0a11;
  color: var(--oro);
  font-family: var(--tipo-mono);
  font-size: .875rem;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
.pie {
  padding: var(--e6) var(--e4) var(--e5);
  border-top: 1px solid var(--linea-suave);
  text-align: center;
}
/* Quién eres: un indicio discreto, no un panel de cuenta. Va arriba del todo
   del pie porque es lo primero que se busca cuando algo no cuadra ("¿este
   aura es mía?"), pero en gris y a 0.8rem: no compite con nada. */
.pie-identidad {
  margin: 0 0 var(--e4);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--texto-suave);
}
.pie-identidad .identidad-ok { color: var(--oro); }
.pie-identidad a {
  display: inline-block;
  margin-left: var(--e2);
  /* En el móvil se toca con el pulgar: 44 px de alto efectivo sin romper la
     línea de texto (padding vertical, no `min-height`). */
  padding: var(--e2) 0;
  color: var(--texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pie-identidad a:hover { color: var(--oro); }

.pie-lema {
  margin: 0 0 var(--e3);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
}
.pie-texto { margin: 0 auto var(--e4); max-width: 40em; color: var(--texto-suave); font-size: .875rem; }
.pie-enlaces { display: flex; justify-content: center; gap: var(--e4); flex-wrap: wrap; }
.pie-enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto-suave);
  font-size: .875rem;
  text-decoration: none;
}
.pie-enlaces a:hover { color: var(--oro); text-decoration: underline; }

/* ==========================================================================
   480 px — teléfono grande: los botones dejan de ocupar toda la fila
   ========================================================================== */
@media (min-width: 480px) {
  .btn, button, input[type=submit] { width: auto; }
  .acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }
  .veredicto-botones { grid-template-columns: 1fr 1fr; }
  .marca-sello { width: 42px; height: 42px; }
  .marca-nombre { font-size: 1.4rem; }
  .top-grid { grid-template-columns: 1fr 1fr; }
  .tabla-scroll td, .tabla-scroll th { padding: var(--e3) var(--e2); font-size: .9375rem; }
  .tabla-scroll th { font-size: .8125rem; letter-spacing: .06em; }

  /* La lista clave/valor recupera sus dos columnas. */
  .kv tr {
    display: grid;
    grid-template-columns: minmax(120px, 33%) 1fr;
    gap: var(--e3);
    align-items: baseline;
  }
  .kv tr > td:first-child { margin-bottom: 0; }
}

/* ==========================================================================
   768 px — tableta: la barra de pestañas sube a la cabecera
   ========================================================================== */
@media (min-width: 768px) {
  body { padding-bottom: 0; }

  .cabecera {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: var(--e4);
    gap: var(--e5);
    border-bottom: 1px solid var(--linea);
    background: none;
  }

  .tabs {
    position: static;
    flex: 1 1 auto;
    background: none;
    backdrop-filter: none;
    border-top: 0;
    padding: 0;
  }
  .tabs ul { display: flex; justify-content: center; gap: var(--e1); }
  .tabs a {
    min-height: 44px;
    padding: 0 var(--e3);
    border-top: 0;
    border-radius: var(--pastilla);
    font-size: .9375rem;
  }
  .tab-activo a {
    background: rgba(255, 215, 0, .12);
    border-top: 0;
  }

  main.contenedor { padding-top: var(--e5); }
  .card { padding: var(--e5); }
  .sentencia::before { margin: calc(var(--e5) * -1) calc(var(--e5) * -1) var(--e5); }
  .hero { padding: var(--e7) var(--e5) var(--e6); }
  .hero-sello { width: 96px; height: 96px; }
  textarea { min-height: 148px; }
  h2 { font-size: 1.6rem; }
  .top-grid { grid-template-columns: repeat(3, 1fr); }
  .pasos li { padding: var(--e4) 0; }

  /* Medida de lectura: los párrafos largos de /reglas no cruzan la pantalla. */
  .card > p, .reglas-lista, .comandos { max-width: var(--ancho-lectura); }
}

/* ==========================================================================
   1024 px — escritorio
   ========================================================================== */
@media (min-width: 1024px) {
  :root { --ancho: 980px; }
  .hero-claim { font-size: 1.125rem; }
  .marca-lema { display: block; }   /* ya cabe el wordmark entero */
}

/* ==========================================================================
   Preferencias del sistema
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Contraste alto: se refuerzan los bordes, que es lo primero que se pierde. */
@media (prefers-contrast: more) {
  :root { --linea: #55555f; --linea-suave: #44444e; --texto-suave: #cfc9bd; }
}