/* ══════════════════════════════════════════════════════════════════════
   KACHAI · Estética editorial: papel, tinta y cobre

   Hoja común a TODAS las páginas. Va justo después de kachai-mono.css y
   reutiliza su mecanismo: mono reasigna los tokens heredados de cada hoja
   a la escala --w-*, y aquí esa escala deja de ser gris neutro y pasa a
   ser papel crema y tinta cálida. Cada pantalla conserva su estructura;
   cambia la piel.

   La estética viene del KACHAI académico (tokens.css, editorial.css y
   estudio.css). Se toma su lenguaje visual —titulares serif, rótulos en
   versalitas espaciadas, filetes finos, el cobre como único acento— y no
   su modelo de "espacios de estudio": esta aplicación sigue siendo la
   estación de trabajo.

   Las hojas por zona (editorial-chat, editorial-panel, editorial-graf,
   editorial-modulo) rematan cada pantalla sobre estos mismos tokens.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Papel y tinta ──────────────────────────────────────────────── */
/* El papel no es blanco puro ni la tinta negro puro: un #fff a pantalla
   completa cansa en una sesión larga. Los grises viran a cálido, porque
   un gris azulado sobre crema se ve sucio. */
:root,
:root[data-theme="light"] {
  --w-papel: #f4efe3;
  --w-barra: #efe8da;
  --w-panel: #faf6ed;
  --w-hover: #ebe3d4;
  --w-tinta: #241c16;
  --w-tinta-2: #4a4036;
  --w-tinta-3: #776d60;
  --w-tinta-4: #9a8f81;
  --w-linea: #e3dacb;
  --w-linea-2: #d3c8b6;
  --w-acento: #241c16;
  --w-acento-tinta: #fff8ed;
  --w-sombra: 0 1px 2px rgba(74, 60, 40, .06), 0 8px 30px rgba(73, 57, 28, .07);

  /* El cobre es el único acento: llamadas a la acción, foco, el número
     que importa. Petróleo y salvia son funcionales —lo tuyo, lo correcto—
     y aparecen poco. */
  --ed-cobre: #b65d40;
  --ed-cobre-2: #c77453;
  --ed-cobre-suave: rgba(182, 93, 64, .12);
  --ed-petroleo: #2f6269;
  --ed-salvia: #526a50;
  --ed-tinta-cta: #251e18;
  --ed-papel-cta: #fff8ed;

  --ed-serif: Georgia, 'Times New Roman', serif;
  --ed-radio: 6px;
  --ed-radio-sm: 3px;
  --ed-grano: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%238b795c' opacity='.055' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

/* Oscuro: el mismo juego invertido. Papel negro cálido y tinta de papel;
   el cobre sube de luz para sostener el contraste. */
:root[data-theme="dark"] {
  --w-papel: #121110;
  --w-barra: #0e0d0c;
  --w-panel: #1c1a16;
  --w-hover: #26231e;
  --w-tinta: #ece7dd;
  --w-tinta-2: #cfc8bb;
  --w-tinta-3: #a69f93;
  --w-tinta-4: #7a7368;
  --w-linea: #2b2823;
  --w-linea-2: #3a362f;
  --w-acento: #ece7dd;
  --w-acento-tinta: #121110;
  --w-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 30px rgba(0, 0, 0, .35);

  --ed-cobre: #d07a5c;
  --ed-cobre-2: #de8d70;
  --ed-cobre-suave: rgba(208, 122, 92, .14);
  --ed-petroleo: #8cbbc0;
  --ed-salvia: #adc3a5;
  --ed-tinta-cta: #ece7dd;
  --ed-papel-cta: #121110;
}

/* Estados: matices de la tinta, no color de alarma. */
:root,
:root[data-theme="light"] {
  --peligro: #8f3b30;
  --peligro-suave: rgba(143, 59, 48, .10);
  --aviso: #7a6230;
  --exito: var(--ed-salvia);
  /* La marca vuelve a tener "degradado", pero de una sola tinta: así las
     piezas que se pintan con --grad-marca (isotipo, letras recortadas)
     dejan de quedar transparentes. */
  --grad-marca: linear-gradient(var(--w-tinta), var(--w-tinta));
  /* La acción principal de los módulos lleva texto blanco fijo sobre
     --grad-boton; con la capa mono valía `none` y en claro el botón era
     blanco sobre papel. Cobre sólido: 4,9:1 con el blanco en los dos temas. */
  --grad-boton: linear-gradient(#a9543a, #a9543a);
}
:root[data-theme="dark"] {
  --peligro: #d39385;
  --peligro-suave: rgba(211, 147, 133, .12);
  --aviso: #c9ad78;
  --exito: var(--ed-salvia);
  --grad-marca: linear-gradient(var(--w-tinta), var(--w-tinta));
  --grad-boton: linear-gradient(#a9543a, #a9543a);
}

/* ── 2. Superficie ─────────────────────────────────────────────────── */
html { scroll-padding-top: 30px; }
body {
  background-color: var(--w-papel);
  background-image: var(--ed-grano);
  color: var(--w-tinta);
}
::selection { background: rgba(182, 93, 64, .22); }
:root[data-theme="dark"] ::selection { background: rgba(208, 122, 92, .32); }

/* El foco es cobre: se ve sobre papel y sobre tinta. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ed-cobre);
  outline-offset: 3px;
}

/* ── 3. Tipografía ─────────────────────────────────────────────────── */
/* Los titulares son serif de peso normal: la jerarquía la da el tamaño y
   el interletrado apretado, no la negrita. */
h1, h2, h3 {
  font-family: var(--ed-serif);
  font-weight: 400;
  letter-spacing: -.02em;
}
/* Muchas hojas fijan el peso del titular en su propia clase (.mod-panel h2,
   .p-title…) y le ganaban al selector de elemento: el serif salía en
   negrita y perdía todo el aire. :not(#\#) sube la especificidad al nivel
   de un id sin depender de ningún nombre de clase. */
:is(h1, h2, h3):not(#\#) {
  font-family: var(--ed-serif);
  font-weight: 400;
}

/* Rótulo editorial: versalitas serif muy espaciadas. Reemplaza a las
   etiquetas en monoespaciada, que leían como terminal y no como página. */
.ed-kicker {
  font: 400 10px/1.8 var(--ed-serif);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--w-tinta-3);
}

/* ── 4. Marca ──────────────────────────────────────────────────────── */
/* Isotipo y palabra en tinta; los nodos entre letras, en cobre. Es el
   mismo gesto del "● KACHAI" de la referencia, sin perder la K propia. */
/* La K de partículas se usa como máscara y la tinta pone el color. En el
   chat la pieza existía sin máscara —un span vacío— y no se veía nada. */
.kachai-brand__mark {
  -webkit-mask: url('/assets/img/kachai-mark-reference-transparent.png') center / contain no-repeat;
  mask: url('/assets/img/kachai-mark-reference-transparent.png') center / contain no-repeat;
  background: var(--w-tinta) !important;
  background-image: none !important;
}
.kachai-brand__word {
  color: var(--w-tinta) !important;
  font-weight: 600 !important;
  letter-spacing: .17em !important;
  text-shadow: none !important;
}
/* Geometría del punto fijada aquí: en oscuro chat-light.css se apaga y
   con ella su tamaño, y el nodo (que contiene un "." de texto) se pintaba
   como un rectángulo del alto de la letra. */
.kachai-brand__word .node,
.kachai-brand__word .node--violet {
  display: inline-block !important;
  width: .16em !important;
  height: .16em !important;
  margin: 0 .16em !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  text-indent: -999em !important;
  vertical-align: .08em !important;
  color: var(--ed-cobre) !important;
  background: currentColor !important;
}
.kachai-brand__word .ai {
  background: none !important;
  color: var(--ed-cobre) !important;
  -webkit-text-fill-color: currentColor;
}
.brand__sub {
  font-family: var(--ed-serif) !important;
  font-size: 9px !important;
  letter-spacing: .2em !important;
  color: var(--w-tinta-3) !important;
}

/* ── 5. Controles base ─────────────────────────────────────────────── */
/* Llamada principal de la referencia: rectángulo de tinta con el extremo
   derecho redondeado y un círculo de cobre con la flecha. Se aplica a
   quien la pida con .ed-cta; los botones existentes sólo toman la paleta. */
.ed-cta {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 18px; min-height: 44px; padding: 0 0 0 20px;
  border: 1px solid var(--ed-tinta-cta); border-radius: 3px 24px 24px 3px;
  background: var(--ed-tinta-cta); color: var(--ed-papel-cta);
  font: 16px var(--ed-serif); text-decoration: none; cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.ed-cta > .ed-cta__flecha {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--ed-cobre); color: #fff8ed;
  font: 22px/1 var(--ed-serif);
  transition: transform .35s, background-color .35s;
}
.ed-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(52, 37, 23, .14); }
.ed-cta:hover > .ed-cta__flecha { transform: rotate(-12deg); background: var(--ed-cobre-2); }

input, select, textarea { accent-color: var(--ed-cobre); }

@media (prefers-reduced-motion: reduce) {
  .ed-cta, .ed-cta > .ed-cta__flecha { transition: none; }
  .ed-cta:hover, .ed-cta:hover > .ed-cta__flecha { transform: none; }
}