/* ═══════════════════════════════════════════════════════════════════════════
   ANILLO Y HILO — el sistema, como archivo

   Hasta ahora esto vivía solo en un documento, así que cada página nueva
   volvía a inventar sus colores: 619 colores distintos escritos a mano en el
   sitio, 195 verdes donde el sistema define dos. Esto es lo mismo que ya
   estaba decidido, pero en un sitio donde el navegador lo puede leer.

   Es ADITIVO: enlazarlo no cambia nada por sí solo. Si algo sale mal, se
   quita el enlace y el sitio queda como estaba.

   LAS DOS PALETAS SON A PROPÓSITO. No son una inconsistencia que haya que
   unificar: la zona de dato habla en lenguaje de app y la zona de hilo habla
   en papel. Quien las junte, mata la idea.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── marca ─────────────────────────────────────────────────────────────── */
  --crema:#F7F3ED;
  --oliva:#6F7554;
  --profundo:#26372C;
  --dorado:#C5A76B;

  /* ── zona de dato · "el anillo" ────────────────────────────────────────── */
  --bg:#F1ECE3;
  --surface:#FFFFFF;
  --surface-2:#FAF7F0;
  --surface-3:#EFE9DE;
  --line:#E2DACA;
  --line-2:#D3C9B4;

  /* ── zona de hilo · conversación, papel ────────────────────────────────── */
  /* Paleta aparte a propósito — ver el aviso de arriba. */
  --papel:#F7F3EA;
  --burbuja:#FFFFFF;
  --burbuja-bd:#E8E0D0;
  --mia:#6F7554;
  --mia-tx:#F7F3ED;

  /* ── texto ─────────────────────────────────────────────────────────────── */
  /* PUNTO CIEGO CERRADO. El dorado sobre la crema da 2,08 de contraste y para
     leer se necesitan 4,5: durante meses hubo texto en dorado que se perdía en
     el celular. El dorado queda para MARCAR (bordes, hilos, acentos) y nunca
     para leer. --profundo da 11,4 sobre la crema y hace ese trabajo.
     --dorado-tx es la única versión del dorado apta para texto (4,6). */
  --tx:#26372C;
  --tx-2:#5C6154;
  --tx-3:#8A8577;
  --dorado-tx:#8A6D3B;
  /* El mismo cuidado con el oliva. Como FONDO (botones, círculos marcados)
     no cambia nunca. Como TEXTO, en tema oscuro daba 2,3 sobre la tarjeta:
     todos los títulos del portal se perdían. --oliva-tx es la versión que se
     lee en los dos temas. */
  --oliva-tx:#6F7554;

  /* ── semáforo ──────────────────────────────────────────────────────────── */
  --ok:#5E8C5A;
  --aviso:#9C7539;
  --urgente:#B24230;
  --lock:#B9B1A0;
  /* Igual que --dorado-tx: la versión del color apta para LEER. --ok y
     --urgente sirven para marcar (bordes, puntos, barras); sobre la crema el
     verde da 3,9 y el rojo 4,4, y para texto se necesitan 4,5. Estos dos sí. */
  --ok-tx:#3F6B45;
  --urgente-tx:#8F3222;

  /* ── forma ─────────────────────────────────────────────────────────────── */
  /* Tres radios, no trescientos setenta y tres. Hoy hay 373 declaraciones de
     radio fuera de esta escala (12px×90, 11px×51, 9px×44, 13px×29). */
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;

  --sombra:0 1px 2px rgba(38,55,44,.05), 0 8px 24px -14px rgba(38,55,44,.28);
  --sombra-alta:0 2px 4px rgba(38,55,44,.06), 0 18px 40px -20px rgba(38,55,44,.4);

  /* ── tipografía ────────────────────────────────────────────────────────── */
  /* Sistema para el dato, Georgia para la voz. Es la regla de las dos zonas
     dicha en tipografía. */
  --ff:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif:Georgia, "Times New Roman", serif;

  /* ── espacio ───────────────────────────────────────────────────────────── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;

  /* ── mínimos que no se negocian ────────────────────────────────────────── */
  /* El texto no baja de 12px: hay subtítulos a 8,5px en el portal y la clienta
     de Alexa tiene 40 y pico y lo lee en el celular.
     El área de toque no baja de 44px: marcar el check list es su gesto diario
     y hoy hay casillas de 30px. */
  --tx-min:12px;
  --toque-min:44px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#111610; --surface:#1A1F17; --surface-2:#20261D; --surface-3:#262D22;
    --line:#2E362A; --line-2:#3C4436;
    --papel:#1D2219; --burbuja:#232A1F; --burbuja-bd:#333B2C;
    --tx:#EDE8DA; --tx-2:#B4AE9C; --tx-3:#8A8577;
    /* En oscuro el dorado sí alcanza para texto; sube en luminosidad. */
    --dorado:#D6BC86; --dorado-tx:#D6BC86;
    --oliva-tx:#A3AB84;
  --ok-tx:#8FC08A; --urgente-tx:#E9A08F;
    --lock:#6A6557;
  }
}

:root[data-theme="dark"]{
  --bg:#111610; --surface:#1A1F17; --surface-2:#20261D; --surface-3:#262D22;
  --line:#2E362A; --line-2:#3C4436;
  --papel:#1D2219; --burbuja:#232A1F; --burbuja-bd:#333B2C;
  --tx:#EDE8DA; --tx-2:#B4AE9C; --tx-3:#8A8577;
  --dorado:#D6BC86; --dorado-tx:#D6BC86;
  --oliva-tx:#A3AB84;
  --ok-tx:#8FC08A; --urgente-tx:#E9A08F;
  --lock:#6A6557;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Utilidades mínimas. A propósito son pocas: esto es un sistema de tokens,
   no un framework. Lo que se repita de verdad en varias páginas, sube aquí.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Área de toque mínima sin cambiar el tamaño visible del control. */
.toque{min-width:var(--toque-min);min-height:var(--toque-min)}

/* La costura: la frontera entre la zona de dato y la de conversación. Es un
   elemento con nombre, no un borde cualquiera. */
.costura{display:flex;align-items:center;gap:var(--s-2)}
/* Iba en 9,5px, contradiciendo el mínimo de 12px que este mismo archivo
   declara tres bloques más arriba. La etiqueta de la costura es corta y va en
   mayúsculas espaciadas, así que a 12px no ocupa más renglón: solo se lee. */
.costura-lbl{font-size:var(--tx-min);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dorado-tx);font-weight:700}
.costura-ln{flex:1;height:1px;
  background:repeating-linear-gradient(90deg,var(--dorado) 0 5px,transparent 5px 10px)}

/* Foco visible. Sin esto, quien navega con teclado no sabe dónde está. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--oliva);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}