/* ══════════════════════════════════════════════════════════════════════════
   SISTEMA VISUAL DE ARAKE
   La paleta sale de `design/arake-panel-v4.html`, dibujada el 21/08/2026.

   ─────────────────────────────────────────────────────────────────────────
   EL COLOR SIGNIFICA. Verde, ámbar y rojo dicen estado. Azul dice que se
   puede pulsar. Gris dice que no hay dato. Nada decora.

   LAS VARIABLES DAN LIBERTAD DE TONO, NO DE SIGNIFICADO. Cambiar el rojo por
   otro rojo es cambiar el aspecto. Cambiar el rojo por verde rompe el idioma
   de la pantalla aunque el CSS esté perfecto.
   ─────────────────────────────────────────────────────────────────────────

   POR QUÉ ESTO ES UN TEMA DE DAISYUI Y NO UN `:root` PROPIO
   ---------------------------------------------------------
   Porque el idioma ya está escrito en las plantillas: 102 `error`, 64
   `warning`, 41 `primary`, 40 `success`. Un `:root` propio al lado sería un
   segundo sistema de color, y dos sistemas no se mantienen sincronizados —
   se descubre el día que alguien cambia la paleta y media aplicación no se
   entera. Definido como tema, todo lo que ya existe cambia de color solo.

   No hay paso de compilación. Un tema de DaisyUI 5 son variables CSS dentro
   de `[data-theme=...]`, y las suyas vienen en oklch solo porque sí: son
   propiedades normales y aceptan hex. Este fichero se carga DESPUÉS de
   daisyui para que gane.

   EL NOMBRE DEL TEMA SE DICE EN DOS SITIOS y tienen que coincidir: aquí y en
   el `data-theme` de `web/templates/base.html`. Si no coinciden, DaisyUI cae
   a su tema por defecto EN SILENCIO y la aplicación se ve casi bien, que es
   la peor forma de fallar. Lo vigila `tests/test_sistema_visual.py`.

   LOS COLORES SUELTOS DE LA MAQUETA
   ----------------------------------
   La maqueta tenía 21 literales fuera de su bloque de paleta. Con la portada
   montada, los ocho que usa alguna pieza han subido aquí como variables —ver
   «LOS DE LA PORTADA» más abajo—. **No entran sueltos en una plantilla ni en
   una hoja aparte**: el primero que se cuele es la primera grieta, y a partir
   de ahí cambiar un tono deja de ser cambiar un tono.

   Los que siguen fuera, y por qué: tres son de la barra de control de la
   propia maqueta, que ella misma marca como «no va en el producto»; dos
   repiten un color que ya está aquí; y el azul oscuro del hover de un botón,
   que sigue sin pintarse. Suben el día que se pinte, no antes: una variable
   que no usa nadie es una decisión de color que nadie ha tomado.

   EL GRIS DEL TACHADO DE UN DIFF ESTABA EN ESA LISTA. YA SE PIDIÓ, Y HAY QUE
   LEER CUÁNDO. Este párrafo se escribió el 21/08/2026 a las 18:51 diciendo que
   ese gris subiría «el día que se pinte». A las 22:48 DEL MISMO DÍA, `cb0b212`
   empezó a pintar el diff de «Anoche» — y nadie volvió aquí. Catorce días con
   las trece clases de ese bloque existiendo solo en la maqueta: sin rejilla,
   sin monoespaciada y sin tachado, o sea el «antes» y el «después» pintados
   idénticos y a ancho completo. La peor noche, la del 25/08, fueron 59.524
   caracteres así.

   Y NADIE PODÍA VERLO. Las pruebas de esta hoja vigilan que no haya un color a
   pelo y que las ranuras tengan valor; ninguna pregunta si una clase que se usa
   tiene alguna regla. Una hoja de estilo a la que le falta media pantalla es
   válida, se sirve sin error y se ve casi bien, que es la forma de fallar que
   este fichero dice tres párrafos más arriba que es la peor.

   Lo que queda escrito, entonces: «cuando el contenido lo pida» NO ES UN PLAZO.
   No lo vigila nadie y no rompe nada el día que se incumple. Si algo se deja
   fuera a propósito, lo que hay que dejar escrito al lado es quién lo va a
   pedir y cómo se va a notar que ya lo pidió.

   AL SUBIRLO NO HIZO FALTA NINGÚN COLOR NUEVO, y ésa es la otra mitad de la
   historia. La maqueta tacha con un `text-decoration-color:#B9C0B7` propio, que
   aquí no existe. Pero entre medias —el 22/08— Cambios contestó la misma
   pregunta para el mismo par antes/después y la contestó sin color aparte: ver
   `.antes`, «EL ANTES ES GRIS TACHADO Y NO ROJO», con `--arake-off`. Dos
   pantallas que pintan lo mismo se tachan igual, así que manda la decisión ya
   tomada y no la maqueta. El literal de la maqueta se queda fuera y ya no
   espera a nadie.
   ══════════════════════════════════════════════════════════════════════════ */

[data-theme="arake"] {
  color-scheme: light;

  /* ── LA PALETA ────────────────────────────────────────────────────────
     Los doce colores de la maqueta, con su nombre de allí. Debajo se
     reparten por las ranuras de DaisyUI: así el valor está escrito una vez
     y la ranura dice qué significa. */

  /* papel */
  --arake-paper: #F3F4EF;   /* fondo de la página */
  --arake-card:  #FBFCF8;   /* tarjeta, y tinta sobre los colores sólidos */
  --arake-band:  #E6EDE2;   /* banda alterna de las tablas */
  --arake-rule:  #D5DAD1;   /* línea fina */

  /* tinta */
  --arake-ink:   #161A17;
  --arake-muted: #6C756D;   /* texto secundario */

  /* UN SOLO GRIS DE AUSENCIA. La maqueta traía dos casi iguales —uno para la
     cifra que no existe y otro para la marca— y dos grises que se parecen no
     significan dos cosas: significan que no se decidió. Si algún día hay que
     distinguir la cifra de la marca, se distingue por tamaño o por peso,
     nunca por tono. */
  --arake-off:   #A6AEA4;

  /* significado */
  --arake-link:  #1B4D8F;   /* se puede pulsar. En la maqueta se llama --accent:
                               OJO, no es el `accent` de DaisyUI, que es otra
                               ranura. Va a `primary`. */
  --arake-ok:    #2E6B4F;
  --arake-warn:  #A87A0B;
  --arake-bad:   #A83224;

  /* ── LOS DE LA PORTADA ────────────────────────────────────────────────
     La maqueta los tenía sueltos, fuera de su bloque de paleta. Suben aquí
     al llegar, que es lo que dice la cabecera de este fichero: el primero
     que se cuele suelto en una plantilla es la primera grieta.

     Ninguno inventa un significado nuevo. Son variaciones de los de arriba
     para superficies concretas, y por eso llevan el nombre de la superficie
     y no el del color. */
  --arake-alarma:         #3A1410;  /* fondo de la barra de «puede mentir» */
  --arake-alarma-tinta:   #F6E9E6;  /* y su texto, sobre ese granate */
  --arake-alarma-detalle: #E0C9C4;  /* la línea pequeña, un paso más apagada */
  --arake-apagado:        #3E463F;  /* el titular cuando no hay nada que juzgar:
                                       ni tinta normal ni gris de ausencia */
  --arake-bloque:         #EDEFE9;  /* fondo del paquete copiable */
  --arake-bloque-tinta:   #3C443E;
  --arake-hueca:          #EAEDE7;  /* la marca de una noche SIN REGISTRO, que
                                       no es lo mismo que una noche saltada */
  --arake-banda-alt:      #EDF1EA;  /* la banda de la segunda columna del pulso:
                                       dos rejillas pegadas con la misma banda
                                       se leen como una sola tabla */

  /* ── LOS DE CAMBIOS ───────────────────────────────────────────────────
     Fase 7, pantalla 1. Ver `docs/arake-contrato-cambios.md` y
     `design/arake-cambios-v1.html`.

     LAS DOS SON ESTRUCTURA Y NO ESTADO. Dicen dónde empieza una tarjeta y
     dónde empieza una familia dentro de ella. No dicen que algo vaya bien,
     mal ni a medias: en esta pantalla **todo lo que se pinta ya está
     escrito en el blog**, así que no hay nada que un color pudiera
     distinguir. Verde, ámbar y rojo siguen siendo los tres únicos que
     hablan de estado, y aquí no aparece ninguno.

     Y NO SE REUTILIZAN LAS QUE YA HAY, aunque el tono se pareciera.
     `--arake-band` está documentada como la banda alterna de las tablas y
     la cabecera de una tarjeta no es eso; `--arake-bloque` es el paquete
     copiable de una avería. Dos variables que significan cosas distintas
     no se comparten porque coincida el gris: el día que una de las dos
     tenga que moverse, la otra se mueve con ella sin que nadie lo pida. */
  --arake-cabecera-tarjeta: #EAEDE6;  /* el relleno de la cabecera de una
                                         tarjeta de artículo: dice DÓNDE
                                         EMPIEZA una tarjeta, nada más */
  --arake-rotulo:           #4C554D;  /* el rótulo de familia —«Keyword»,
                                         «Enlaces»— y su barrita. Más oscuro
                                         que `--arake-muted` a propósito: es
                                         un encabezado de sección, no texto
                                         secundario */

  /* ── LAS RANURAS DE DAISYUI ───────────────────────────────────────────
     Las 26 que define un tema suyo. Ninguna se queda sin valor: una ranura
     vacía hereda del tema anterior, otra vez en silencio. */

  /* El papel. Esta aplicación va al revés de la convención de DaisyUI a
     propósito y desde antes de esto: el `<body>` es `bg-base-200` y las
     tarjetas `bg-base-100`. Se respeta, que es lo que hace que las 105
     tarjetas que ya existen salgan bien sin tocarlas. */
  --color-base-100: var(--arake-card);
  --color-base-200: var(--arake-paper);
  --color-base-300: var(--arake-rule);
  --color-base-content: var(--arake-ink);

  /* Azul: se puede pulsar. */
  --color-primary: var(--arake-link);
  --color-primary-content: var(--arake-card);

  /* PROHIBIDAS: la paleta no les da significado, así que usarlas solo puede
     ser decorar. Se les da un gris para que un descuido salga apagado en vez
     de roto, pero quien las impide es la prueba, no el color. */
  --color-secondary: var(--arake-muted);
  --color-secondary-content: var(--arake-card);
  --color-accent: var(--arake-muted);
  --color-accent-content: var(--arake-card);
  --color-neutral: var(--arake-ink);
  --color-neutral-content: var(--arake-card);

  /* `info` es gris y no azul, y es una decisión, no un descuido. Son 15
     cajas repartidas por la aplicación que dicen algo que no se pulsa: en
     azul romperían la regla el primer día. En gris son lo que son,
     información neutra. Queda como deuda en `docs/arake-estado.md`: cuando
     se toquen esas pantallas, cada `alert-info` pasa a la ranura que le
     toque y esta ranura desaparece. */
  --color-info: var(--arake-muted);
  --color-info-content: var(--arake-card);

  /* Estado. Los tres únicos colores que dicen cómo va algo. */
  --color-success: var(--arake-ok);
  --color-success-content: var(--arake-card);
  --color-warning: var(--arake-warn);
  --color-warning-content: var(--arake-card);
  --color-error: var(--arake-bad);
  --color-error-content: var(--arake-card);

  /* Esquinas de la maqueta: 2px en botones y campos, 3px en las cajas.
     `corporate` traía 4px en las tres. */
  --radius-selector: 2px;
  --radius-field: 2px;
  --radius-box: 3px;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;

  /* ── TIPOGRAFÍA ───────────────────────────────────────────────────────
     Por `<link>` desde Google Fonts, en la base. Sin binarios en el
     repositorio y sin compilar nada. */
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

/* ══════════════════════════════════════════════════════════════════════════
   LO QUE UN TEMA NO PUEDE DECIR
   Cuatro reglas, y ninguna es de gusto: cada una existe porque el tema solo
   define variables y esto no cabe en una variable.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · La tipografía del cuerpo. El `<body>` no lleva clase de fuente, así que
   sin esto se quedaría con la del navegador y las variables de arriba no las
   leería nadie. Se escribe aquí y no en la plantilla: la plantilla dice qué
   hay en la pantalla, no con qué letra. */
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* 2 · Y la mono, atada explícitamente en vez de confiar en que la utilidad de
   Tailwind resuelva la variable. Este fichero se carga el último, así que
   gana sin subir la especificidad. */
code, kbd, samp, pre, .font-mono {
  font-family: var(--font-mono);
}

/* 3 · LA BANDA DE LAS TABLAS, que es el único color de la maqueta sin ranura
   donde caber.
   DaisyUI pinta las bandas con `base-200`, que aquí es el papel: sobre una
   tarjeta la banda quedaría casi invisible. Y darle el verde a `base-200`
   pintaría de verde el fondo de la aplicación entera.
   Ni una cosa ni la otra: la banda es color de verdad —es la mitad de la
   legibilidad de las tablas de la maqueta— así que tiene su variable y esta
   regla, y nada más. */
.table-zebra :where(tbody tr:nth-child(even)) {
  background-color: var(--arake-band);
}

/* 4 · El foco visible, tal como lo dibuja la maqueta. DaisyUI trae el suyo,
   pero con otro grosor y otra separación, y el de la maqueta es el que se ha
   mirado contra este fondo. */
:focus-visible {
  outline: 2px solid var(--arake-link);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   PIEZAS DE LA PORTADA
   Ver `docs/arake-contrato-portada.md` y `design/arake-panel-v4.html`.

   POR QUÉ ESTAS SÍ SON CLASES Y NO UTILIDADES. Todo lo demás de esta
   aplicación se monta con clases de Tailwind y componentes de DaisyUI, y así
   sigue. Lo de aquí abajo no tiene equivalente en ninguno de los dos: la cinta
   de catorce noches, el paquete copiable, la rejilla de dos canales que
   desembocan en lo mismo. Escribirlas con utilidades serían treinta clases por
   elemento repetidas en cada sitio, que es la otra manera de no tener sistema.

   NINGUNA TRAE UN COLOR ESCRITO. Todas salen de las variables del tema de
   arriba, y eso es lo que hace que cambiar la paleta siga siendo cambiar el
   bloque de arriba y nada más.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── El rótulo de sección: mono, versalitas, muy espaciado ── */
.rot {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ── CAPA 0 · la barra que solo existe si el bot puede mentir ── */
.alarma {
  background: var(--arake-alarma);
  color: var(--arake-alarma-tinta);
  border-radius: var(--radius-box);
  padding: 15px 18px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.alarma__marca {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  background: var(--arake-bad);
  color: var(--arake-card);
  padding: 3px 7px;
  border-radius: var(--radius-field);
  white-space: nowrap;
  margin-top: 2px;
}
.alarma__t { font-weight: 600; font-size: 16px; margin: 0 0 3px; }
.alarma__d { margin: 0; font-size: 13.5px; color: var(--arake-alarma-detalle); }

/* ── CAPA 1 · el veredicto ── */
.veredicto { padding: 34px 0 8px; }
.veredicto h1 {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.04em;
  margin: 0;
  line-height: 1.05;
}
/* El punto dice el estado, y el titular lo repite en palabras. Las dos cosas:
   el color solo no se lee, y hay quien no lo distingue. */
.punto {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-right: 12px;
  vertical-align: 5px;
  background: var(--arake-ok);
}
.veredicto--malo .punto { background: var(--arake-bad); }
.veredicto--vacio .punto { background: var(--arake-off); }
.veredicto--vacio h1 { color: var(--arake-apagado); }
.veredicto__sub {
  font-size: 15px;
  color: var(--arake-muted);
  margin: 9px 0 0;
  max-width: 62ch;
}

/* Las cuatro comprobaciones. Siempre las cuatro, siempre en el mismo orden. */
.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 13px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--arake-muted);
}
.checks b { color: var(--arake-ink); font-weight: 500; }
.checks i { font-style: normal; color: var(--arake-ok); margin-right: 5px; font-weight: 600; }
.checks .no i { color: var(--arake-bad); }
.checks .nd i { color: var(--arake-off); }

/* ── Cabecera de sección ── */
.sec { margin-top: 38px; }
.sec__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--arake-ink);
  padding-bottom: 7px;
}
.sec__t { font-size: 11.5px; margin: 0; }
.sec__n { font-family: var(--font-mono); font-size: 11.5px; color: var(--arake-muted); }

/* ── CAPA 2 · te espera ── */
.tarea {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 15px 12px;
  border-bottom: 1px solid var(--arake-rule);
}
.tarea:nth-of-type(even) { background: var(--arake-band); }
.tarea__tipo {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  width: 104px;
  flex-shrink: 0;
  padding-top: 3px;
  color: var(--arake-muted);
}
/* El punto del tipo: ámbar por defecto, rojo la avería, azul lo que solo
   puedes hacer tú. Ver el § 3 del contrato. */
.tarea__tipo::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--arake-warn);
  margin-right: 7px;
  vertical-align: 1px;
}
.tarea__tipo--averia::before { background: var(--arake-bad); }
.tarea__tipo--tuyo::before { background: var(--arake-link); }
.tarea__cuerpo { flex: 1; min-width: 0; }
.tarea__t { font-weight: 600; margin: 0 0 3px; font-size: 15.5px; }
.tarea__d { margin: 0; font-size: 13.5px; color: var(--arake-muted); }
/* La columna del botón de una tarea. `flex-shrink: 0` es lo que hace el
   trabajo: sin él, «Copiar» se estruja hasta partirse en dos líneas cuando el
   detalle de al lado es largo, que es siempre. */
.tarea__act { display: flex; gap: 8px; align-items: center; flex-shrink: 0; padding-top: 2px; }

/* El paquete copiable de una avería: texto plano, para transportarlo sin
   deformarlo. Ver el § 3.1. */
.paquete {
  margin-top: 9px;
  background: var(--arake-bloque);
  border: 1px solid var(--arake-rule);
  border-radius: var(--radius-field);
  padding: 9px 11px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--arake-bloque-tinta);
}

/* ── CAPA 3 · anoche el bot ── */
.cinta { display: flex; gap: 2px; margin-left: auto; }
/* Los bots parados de un proyecto (§ 2.3). Va pegado a la cinta y sale también
   en el pulso: es la misma frase en los dos sitios.

   EN `--arake-muted` Y NO EN `--arake-off`, que son los dos grises y significan
   cosas distintas: `off` es «aquí no hay dato», y esto no es un hueco sino una
   frase que explica por qué lo de al lado está quieto. Poner un hueco gris
   diría que falta un número, y el número no falta. */
.parado {
  font-size: 12px;
  color: var(--arake-muted);
  margin: 4px 0 0;
}
/* En el pulso la rejilla lleva su propio sangrado lateral, así que la frase se
   alinea con el nombre del proyecto en vez de pegarse al borde. */
.parado--pulso { margin: 0 14px 8px; }
.marca { width: 4px; height: 14px; border-radius: 1px; background: var(--arake-ok); }
/* No tocaba NO es un fallo: no hacer nada porque no toca es trabajo hecho. */
.marca--salta { background: var(--arake-rule); }
.marca--falla { background: var(--arake-bad); }
/* Y «no hay registro de esa noche» es un cuarto estado, distinto de los tres:
   hueca y más estrecha, para que no se confunda con una saltada. */
.marca--hueca {
  background: var(--arake-hueca);
  border: 1px solid var(--arake-rule);
  width: 3px;
}

/* ── Los cambios de cada proyecto · § 4.2 ──
   Trece clases que existían solo en `design/arake-panel-v4.html` desde el
   21/08/2026. Ver la cabecera de este fichero: lo que las dejó fuera no fue una
   decisión, fue un «cuando el contenido lo pida» que nadie vigilaba.

   LA REJILLA ES LO QUE HACE LEGIBLE EL BLOQUE, y por eso va primero: el rótulo
   de la familia a la izquierda en una columna fija, y a la derecha los cambios.
   Sin ella, el rótulo y su recuento —«8 de 8 escritos»— acaban a treinta líneas
   uno del otro y el recuento se lee como una frase suelta sin dueño. */
.proj { border-bottom: 1px solid var(--arake-rule); padding: 16px 12px; }
/* La banda alterna separa proyectos cuando hay varios desplegados. Es
   estructura, no estado: `--arake-band` es el mismo gris de las tablas. */
.proj:nth-of-type(even) { background: var(--arake-band); }
/* En línea y con `flex-wrap`, porque aquí caben tres cosas de ancho variable —
   nombre, recuento y cinta— y la cinta se va a la derecha con su
   `margin-left: auto`, que sin este `flex` no hace nada. */
.proj__h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 11px;
}
.proj__n { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.proj__s { font-family: var(--font-mono); font-size: 11.5px; color: var(--arake-muted); }

.chg { display: grid; grid-template-columns: 130px 1fr; gap: 4px 16px; align-items: baseline; }
.chg__k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--arake-muted);
  padding-top: 4px;
}
.chg__v { font-size: 14px; padding-top: 2px; }

/* MONOESPACIADA PARA EL DIFF, y no es decoración: dos textos casi iguales solo
   se comparan si las letras caen unas debajo de otras. */
.diff { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; margin: 2px 0 6px; }
/* EL «ANTES» ES GRIS TACHADO Y NO ROJO: un texto anterior no es un error. Es
   la misma regla y el mismo par de propiedades que `.antes` en Cambios, que
   pinta exactamente esto en la otra pantalla — y por eso NO se trae el
   `text-decoration-color` propio que traía la maqueta. Dos pantallas que
   pintan lo mismo tachan igual, o la segunda vez que alguien cambie el tono
   solo cambiará una de las dos. */
.diff .o { color: var(--arake-off); text-decoration: line-through; text-decoration-thickness: 1px; }
.diff .n { color: var(--arake-ink); }
/* Los signos − y +: se ven, no se copian. `user-select: none` los deja fuera
   cuando alguien selecciona el texto para llevárselo. */
.diff .m { color: var(--arake-muted); user-select: none; margin-right: 6px; }
/* El recuento con denominador de cada familia (§ 4.2). En `--arake-muted` y no
   en `--arake-off`: es una frase que se lee, no un hueco. */
/* «No había» NO SE TACHA: no hay nada que tachar, y un tachón sobre un hueco
   se lee como que había algo. La clase es la misma que usa Cambios para este
   caso —y la regla también—; aquí solo se ajusta al cuerpo del diff, que es
   más pequeño que el de aquella pantalla. */
/* El artículo publicado, que se abre. AZUL ES «ESTO SE PULSA» y es el único
   sitio de esta sección donde algo se pulsa: los demás cambios se leen. */
.publicado { color: var(--arake-link); text-decoration: none; }
.publicado:hover { text-decoration: underline; }
/* De qué post es cada cambio y qué se tocó (§ 4.2). Va encima del par y no al
   lado: al lado compite con el texto, que es lo que se viene a leer. En
   `--arake-off` porque es una etiqueta, no el cambio. */
.quien {
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--arake-off);
  margin-top: 4px;
}
.diff .nohabia { font-size: 12px; color: var(--arake-muted); font-style: italic; }
.mas { font-size: 13px; color: var(--arake-muted); margin-top: 6px; }

/* El proyecto sin cambios: una línea, del mismo alto que las demás, con el
   nombre en tinta y el resto apagado. */
.quieto {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 11px 12px;
  border-bottom: 1px solid var(--arake-rule);
  font-size: 13.5px;
  color: var(--arake-muted);
}
.quieto b { color: var(--arake-ink); font-weight: 600; font-size: 15px; }
/* Lo que sí se hizo con un proyecto tranquilo. Un paso más apagado que el
   «sin cambios» de al lado: aquello es el titular de la línea y esto el
   detalle que impide leerlo como «no se tocó». */
.quieto__hizo { font-size: 12.5px; color: var(--arake-off); }

/* El vacío honrado: se explica, no se disimula. */
.hueco {
  border-bottom: 1px solid var(--arake-rule);
  padding: 22px 12px;
  font-size: 14px;
  color: var(--arake-muted);
  max-width: 70ch;
}
.hueco b { color: var(--arake-ink); font-weight: 600; }

/* ── CAPA 4 · el pulso ── */
.pulso { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.rejilla { border-bottom: 1px solid var(--arake-rule); }
.rejilla:nth-of-type(odd) { border-right: 1px solid var(--arake-rule); }
.rejilla__h { display: flex; align-items: baseline; gap: 10px; padding: 14px 14px 10px; }
.rejilla__n { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.rejilla__s {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--arake-muted);
  margin-left: auto;
}
.canales { display: grid; grid-template-columns: 1fr 1fr; padding: 0 14px; }
.canal { padding-bottom: 10px; }
.canal + .canal { border-left: 1px solid var(--arake-rule); padding-left: 13px; }
.canal__t {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--arake-muted);
  margin: 0 0 7px;
}
.filas { border-top: 1px solid var(--arake-rule); }
.fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 6px;
}
.fila:nth-child(odd) { background: var(--arake-band); }
.canal + .canal .fila:nth-child(odd) { background: var(--arake-banda-alt); }
.fila__k { font-size: 12.5px; color: var(--arake-muted); }
/* El motivo de una cifra, VISIBLE. Era un `title=`, o sea un tooltip: un motivo
   que hay que descubrir pasando el ratón no cierra ninguna pregunta —y en un
   móvil no existe—. El § 0 pide que el motivo se escriba siempre; escribirlo
   donde no se ve es no escribirlo. */
.fila__n {
  display: block;
  font-size: 10.5px;
  color: var(--arake-off);
  line-height: 1.3;
  margin-top: 1px;
}
/* De cuándo son los datos de este canal, y sobre cuántos días compara. Gris de
   texto secundario y no de ausencia: no es un hueco, es una fecha que existe. */
.canal__pie {
  font-size: 10.5px;
  color: var(--arake-muted);
  margin: 6px 0 0;
  padding-top: 5px;
  border-top: 1px solid var(--arake-rule);
}
.fila__v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14.5px;
  font-weight: 500;
}
/* «no hay dato» en gris de ausencia. Nunca un cero. */
.fila__v.nd { color: var(--arake-off); }

/* La comparación con los 28 días anteriores (§ 5.1).

   EL COLOR VA POR MEJOR O PEOR, NO POR EL SIGNO, y es lo único que hay que
   saber de estas tres reglas: la posición media mejora cuando BAJA, así que su
   «−2%» es verde y ese mismo número en clics es rojo. Por eso las clases se
   llaman `mejor` y `peor` y no `sube` y `baja` — quien las pinte no tiene que
   saber de qué métrica habla, y quien las escriba no puede confundirse mirando
   el signo. Lo decide `_delta`, en el servicio.

   Y son los verdes y rojos del tema, los mismos que el resto del panel: aquí
   el color DICE ESTADO, así que un verde distinto sería un estado distinto.
   Nada de tonos nuevos para una cifra pequeña. */
.delta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  margin-left: 5px;
}
.delta--mejor { color: var(--arake-ok); }
.delta--peor  { color: var(--arake-bad); }
/* Sin color: «=» y «nuevo» no son un cambio a mejor ni a peor, y una
   comparación que falta tampoco. Verde y rojo dicen estado; si se gastan en
   «no ha pasado nada», dejan de significar. */
.delta--igual { color: var(--arake-muted); }

/* La desembocadura: los dos canales acaban en el mismo sitio, y la línea
   gruesa lo dice. */
.llegan { margin: 0 14px 14px; border-top: 2px solid var(--arake-ink); padding-top: 10px; }
.llegan__t {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--arake-ink);
  margin: 0 0 9px;
}
.llegan__g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cifra { min-width: 0; }
.cifra__k { font-size: 11.5px; color: var(--arake-muted); line-height: 1.25; display: block; margin-bottom: 2px; }
.cifra__v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.cifra__n { font-size: 11px; color: var(--arake-muted); display: block; margin-top: 1px; }
.cifra--off .cifra__v { color: var(--arake-off); }
/* Roto NO es vacío: el dato debería existir y el cálculo no se puede hacer. */
.cifra--roto .cifra__v { color: var(--arake-bad); }
.nota {
  font-size: 12.5px;
  color: var(--arake-muted);
  margin: 10px 14px 14px;
  max-width: 66ch;
}
/* El subrayado del enlace, a un tercio: sale del azul de pulsar y no de un
   color nuevo. */
.nota a { border-bottom: 1px solid color-mix(in srgb, var(--arake-link) 30%, transparent); }

/* ── El pie · la sala de máquinas ── */
.maquinas {
  margin-top: 44px;
  border-top: 1px solid var(--arake-rule);
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
}
.maquinas span {
  color: var(--arake-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .pulso { grid-template-columns: 1fr; }
  .rejilla:nth-of-type(odd) { border-right: 0; }
  .llegan__g { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  /* La columna fija de 130px no cabe: el rótulo de familia pasa a ir encima de
     sus cambios en vez de al lado. */
  .chg { grid-template-columns: 1fr; gap: 0; }
  .canales { grid-template-columns: 1fr; }
  .canal + .canal {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--arake-rule);
    padding-top: 10px;
  }
  .tarea { flex-wrap: wrap; }
  .tarea__tipo { width: 100%; }
  .veredicto h1 { font-size: 30px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PIEZAS DE CAMBIOS
   Ver `docs/arake-contrato-cambios.md` y `design/arake-cambios-v1.html`.

   Mismo trato que las de la portada: aquí abajo solo va lo que no tiene
   equivalente en Tailwind ni en DaisyUI —la tarjeta de artículo con su
   cabecera, el rótulo de familia con su barrita, el par antes/después—, y
   NINGUNA TRAE UN COLOR ESCRITO: todas salen de las variables del tema.

   LO ESCRITO NO LLEVA VERDE, y es la decisión que hay que ver aquí porque no
   se lee en el contrato. Tentaba, y sería mentir con color: verde es un
   estado y «esto se escribió» no lo es. En esta pantalla todo lo que se pinta
   ya está escrito en el blog, así que el color no tiene nada que distinguir.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── La tarjeta de un artículo ── */
.cambio {
  background: var(--color-base-100);
  border: 1px solid var(--arake-rule);
  border-radius: var(--radius-box);
  overflow: hidden;
}
/* La cabecera es ESTRUCTURA: dice dónde empieza una tarjeta y no dice ningún
   estado. Por eso es un relleno neutro y no verde, ámbar, rojo ni azul. */
.cambio__cabecera {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 18px 12px;
  border-bottom: 1px solid var(--arake-rule);
  background: var(--arake-cabecera-tarjeta);
}
.cambio__titulo { font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.cambio__slug {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--arake-muted);
  word-break: break-all;
}
.cambio__meta { margin-left: auto; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.cambio__cuantos {
  font-size: 14px;
  font-weight: 600;
  background: var(--color-base-100);
  border: 1px solid var(--arake-rule);
  border-radius: 999px;
  padding: 3px 11px;
}
.cambio__cuando { font-size: 13px; color: var(--arake-muted); }

/* ── Una familia dentro de la tarjeta ── */
.familia { padding: 14px 18px; border-bottom: 1px solid var(--arake-rule); }
.familia:last-child { border-bottom: none; }
.familia__rotulo {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--arake-rotulo);
  display: flex;
  align-items: center;
  gap: 9px;
}
/* La barrita separa familias. Estructura, no estado. */
.familia__rotulo::before {
  content: "";
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--arake-rotulo);
  flex: none;
}

/* ── El par antes/después ── */
.campo { margin-bottom: 12px; }
.campo:last-child { margin-bottom: 0; }
.campo__etiqueta { font-size: 12.5px; color: var(--arake-muted); margin-bottom: 3px; }
/* EL «ANTES» ES GRIS TACHADO Y NO ROJO: un texto anterior no es un error. */
.antes {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--arake-off);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  display: block;
  margin-bottom: 2px;
}
.despues { font-family: var(--font-mono); font-size: 13px; display: block; }
/* «No había» NO se tacha: no hay nada que tachar, y un tachón sobre un hueco
   se lee como que había algo. */
.nohabia {
  font-size: 12.5px;
  color: var(--arake-muted);
  font-style: italic;
  display: block;
  margin-bottom: 2px;
}

/* ── Operaciones: H2 y enlaces ── */
.op { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 13.5px; }
.op + .op { border-top: 1px dotted var(--arake-rule); }
.op__verbo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--arake-muted);
  min-width: 62px;
  padding-top: 2px;
}
.op code { font-family: var(--font-mono); font-size: 13px; }
.op .antes { display: inline; margin: 0; }
.op__flecha { color: var(--arake-off); }
.op__veces { font-size: 12px; color: var(--arake-muted); }

/* ── §4 · las dos líneas de lo que no se escribió ──
   Ni rojo ni ámbar: no son un estado del sistema, son un recuento de una
   noche. Lo que va mal se juzga en la cadena, que es a donde llevan. */
.fallidos { padding: 12px 2px 0; font-size: 14px; color: var(--arake-muted); }
.fallidos p { margin: 0 0 4px; }
.fallidos__nota { display: block; font-size: 13px; }

/* ── Los vacíos ── */
.vacio { font-size: 15px; }
.vacio__porque { font-size: 13.5px; color: var(--arake-muted); }
.vacio--gris .vacio__frase { color: var(--arake-off); }