/* ═══════════════════════════════════════════════════════════════════════════
   SeguidoresPlay — sistema visual compartido

   Una sola fuente de verdad para las tres superficies: portada, catálogo y
   panel. Con el CSS copiado en cada página se desincroniza en una semana, y
   el primer sitio donde se nota es el color del precio.

   DISCIPLINA DEL COLOR, sin excepciones:
     índigo → marca y navegación
     ámbar  → SOLO dinero y comprar
     verde  → SOLO entregado
     rojo   → SOLO error
   Si el ámbar aparece donde no hay dinero, deja de significar dinero.

   Todos los pares de color están MEDIDOS con la fórmula WCAG, no elegidos a
   ojo. El más flojo de los dos temas da 4,83:1 sobre el mínimo de 4,5.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --papel:   #F6F7FB;
  --papel-2: #FFFFFF;
  --tinta:   #0B0D17;
  --tinta-2: #4A5069;   /* 7,42:1 */
  --tinta-3: #5C6480;   /* 5,46:1 — el #767D96 de antes daba 3,81 */
  --linea:   #E4E7F1;

  --indigo:   #4F46E5;
  --indigo-o: #4338CA;
  --indigo-t: #EEF0FE;
  --sobre-indigo: #FFFFFF;   /* 6,29:1 */

  /* Ámbar en dos tonos y no por capricho: el vivo solo sirve de RELLENO
     (6,25:1 con texto oscuro encima). Como color de texto daba 2,15:1. */
  --ambar:   #F59E0B;
  --ambar-x: #B45309;   /* 5,02:1 — este es el del precio */
  --ambar-t: #FEF6E7;

  --verde:   #047857;   /* 4,83:1 — el #059669 daba 3,77 */
  --verde-t: #E7F6F1;
  --rojo:    #B91C1C;
  --rojo-t:  #FDECEC;

  --r:   14px;
  --r-s: 10px;
  --sombra: 0 1px 2px rgba(11,13,23,.05), 0 10px 28px -14px rgba(11,13,23,.18);
}

/* ── Tema oscuro ──────────────────────────────────────────────────────────
   Tres estados, no dos: claro, oscuro, y **lo que use su teléfono**. El
   tercero es el que se olvida siempre y el que más gente usa: nadie entra a
   cambiar un ajuste que su sistema ya decidió por él.
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel: #0B0D17; --papel-2: #161A2B;
    --tinta: #F4F5FB; --tinta-2: #A9AFC6; --tinta-3: #9199B4;
    --linea: rgba(255,255,255,.11);
    --indigo: #818CF8; --indigo-o: #A5B4FC; --indigo-t: rgba(129,140,248,.14);
    --sobre-indigo: #0B0D17;   /* 6,49:1 — el blanco daba 2,98 */
    --ambar: #F59E0B; --ambar-x: #FBBF24; --ambar-t: rgba(245,158,11,.12);
    --verde: #34D399; --verde-t: rgba(52,211,153,.13);
    --rojo: #F87171;  --rojo-t: rgba(248,113,113,.13);
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -14px rgba(0,0,0,.7);
  }
}
:root[data-tema="oscuro"] {
  --papel: #0B0D17; --papel-2: #161A2B;
  --tinta: #F4F5FB; --tinta-2: #A9AFC6; --tinta-3: #9199B4;
  --linea: rgba(255,255,255,.11);
  --indigo: #818CF8; --indigo-o: #A5B4FC; --indigo-t: rgba(129,140,248,.14);
  --sobre-indigo: #0B0D17;   /* 6,49:1 — el blanco daba 2,98 */
  --ambar: #F59E0B; --ambar-x: #FBBF24; --ambar-t: rgba(245,158,11,.12);
  --verde: #34D399; --verde-t: rgba(52,211,153,.13);
  --rojo: #F87171;  --rojo-t: rgba(248,113,113,.13);
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -14px rgba(0,0,0,.7);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box }

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

body {
  background: var(--papel); color: var(--tinta);
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}

/* Cifras de ancho fijo: precios, saldos y códigos no deben bailar al
   actualizarse ni desalinearse en una columna. */
.dato {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}

.marco { width: min(1140px, 100% - 40px); margin-inline: auto }
@media (max-width: 620px) { .marco { width: min(1140px, 100% - 32px) } }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Foco visible en TODO lo pulsable, no solo en los botones. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 4px;
}

/* ── Botones ──────────────────────────────────────────────────────────────
   44px de alto mínimo: es el objetivo táctil real de un pulgar, no un número
   redondo. Por debajo, la gente falla el toque y culpa a la página. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 18px;
  border: 1px solid transparent; border-radius: var(--r-s);
  font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed }
.btn-marca    { background: var(--indigo); color: var(--sobre-indigo) }
.btn-marca:hover:not([disabled]) { background: var(--indigo-o) }
.btn-linea    { border-color: var(--linea); background: var(--papel-2); color: var(--tinta) }
.btn-linea:hover:not([disabled]) { border-color: var(--tinta-3) }
.btn-fantasma { color: var(--tinta-2); background: transparent }
.btn-fantasma:hover:not([disabled]) { color: var(--tinta); background: var(--indigo-t) }
/* Ámbar de relleno = comprar. Texto oscuro encima: 6,25:1. */
.btn-plata    { background: var(--ambar); color: #40270A }
.btn-plata:hover:not([disabled]) { background: #E08C05 }
.btn-grande   { min-height: 52px; font-size: 16.5px; padding: 14px 26px }
.btn-chico    { min-height: 38px; padding: 8px 14px; font-size: 14px }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papel) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}
.cabecera .marco { display: flex; align-items: center; gap: 26px; min-height: 66px }

.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; padding: 6px 0 }
.logo .rejilla {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 6px;
  background: linear-gradient(140deg, var(--indigo), #7C3AED);
}
.logo .rejilla i { background: #fff; border-radius: 2px }
.logo .rejilla i:nth-child(2) { background: rgba(255,255,255,.55) }
.logo .rejilla i:nth-child(3) { background: rgba(255,255,255,.75) }
.logo b { font-size: 19px; font-weight: 700; letter-spacing: -.4px }
.logo b span { color: var(--indigo) }

.menu { display: none; gap: 22px }
.menu a {
  color: var(--tinta-2); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 12px 0; border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--tinta); border-bottom-color: var(--indigo) }
.menu a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--indigo) }
@media (min-width: 900px) { .menu { display: flex } }

.cabecera .fin { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0 }
@media (min-width: 620px) { .cabecera .fin { gap: 10px } }

/* Interruptor de tema. Lleva etiqueta accesible: un botón solo con icono no
   dice nada a quien usa lector de pantalla. */
.tema {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  cursor: pointer; border: 1px solid var(--linea); border-radius: var(--r-s);
  background: var(--papel-2); color: var(--tinta-2);
}
.tema:hover { color: var(--tinta); border-color: var(--tinta-3) }
.tema svg { width: 19px; height: 19px }
.tema .sol { display: none } .tema .luna { display: block }
:root[data-tema="oscuro"] .tema .sol { display: block }
:root[data-tema="oscuro"] .tema .luna { display: none }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema .sol { display: block }
  :root:not([data-tema="claro"]) .tema .luna { display: none }
}

/* ── Tarjetas, sellos, precio ─────────────────────────────────────────────── */
.tarjeta {
  background: var(--papel-2); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 20px;
}

.sellos { display: flex; gap: 6px; flex-wrap: wrap }
.sello {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
  background: var(--papel); color: var(--tinta-2); border: 1px solid var(--linea);
}
.sello.repone { background: var(--verde-t); color: var(--verde); border-color: transparent }
.sello.alerta { background: var(--rojo-t); color: var(--rojo); border-color: transparent }

.precio { font-size: 21px; font-weight: 700; color: var(--ambar-x) }
.precio small { display: block; font-size: 12.5px; color: var(--tinta-3); font-weight: 500 }

.red {
  width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid;
  place-items: center; font-size: 13.5px; color: #fff; font-weight: 700;
  font-family: "JetBrains Mono", monospace;
}

/* ── Estados: nunca solo por color ────────────────────────────────────────
   Quien no distingue rojo de verde ve dos manchas iguales. La palabra y la
   marca van siempre con el color, no en su lugar. */
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600 }
.estado-ok       { color: var(--verde) }
.estado-proceso  { color: var(--indigo) }
.estado-espera   { color: var(--tinta-3) }
.estado-error    { color: var(--rojo) }

/* ── Formularios ──────────────────────────────────────────────────────────── */
.campo-etq { display: block; font-size: 14px; font-weight: 600; color: var(--tinta-2); margin-bottom: 7px }
.campo-ent {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1.5px solid var(--linea); border-radius: var(--r-s);
  background: var(--papel-2); color: var(--tinta);
  font-family: inherit; font-size: 16px;
}
.campo-ent:focus { border-color: var(--indigo) }
.campo-ent::placeholder { color: var(--tinta-3) }
.campo-ayuda { margin-top: 7px; font-size: 13.5px; color: var(--tinta-3); line-height: 1.5 }
/* El error va JUNTO al campo, no en un resumen arriba: quien lo lee tiene que
   poder arreglarlo sin buscar cuál de los ocho campos era. */
.campo-error { margin-top: 7px; font-size: 13.5px; color: var(--rojo); font-weight: 600 }

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.pie { border-top: 1px solid var(--linea); background: var(--papel-2); padding: 34px 0 30px; margin-top: 40px }
.pie .marco { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap }
.pie p { font-size: 14px; color: var(--tinta-3) }