/* ============================================================================
   Artículos del blog · Escuela de Inteligencia Artificial
   Hereda de documentos.css: la columna de lectura, la cabecera con fondo y los
   siete estilos de tabla ya están ahí. Aquí va solo lo que un artículo tiene y
   un documento de marca no: fichas de prompt, bloques de código y gráficos.
   ========================================================================== */

:root {
  /* El magenta de marca (#E94FD1) tiene L 0,681 en OKLCH y la banda válida para
     datos sobre fondo oscuro termina en 0,67: se empasta con el texto claro.
     Este es el mismo tono un escalón más abajo, y pasa las cinco
     comprobaciones (banda, croma, separación para daltonismo y contraste). */
  --dato-magenta: #e247ca;
  /* Trío categórico. Son las tres familias de marca bajadas a la banda válida.
     Dato curioso y verificable: los mismos tres colores FALLAN la comprobación
     de daltonismo en el orden magenta→teal→oro y la PASAN en el orden
     magenta→oro→teal, porque la prueba es sobre pares adyacentes. El orden de
     asignación es parte de la paleta, no un detalle. */
  --dato-oro:  #c48001;
  --dato-teal: #00a198;
}

/* --------------------------------------------------------------- categoría */
.art__cat {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 6px 12px;
  border: 1px solid rgb(var(--c-rgb) / .45); border-radius: 999px;
  font: 600 11.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper);
}
.art__cat::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: rgb(var(--c-rgb) / 1);
}

/* ------------------------------------------------------ ficha de prompt --- */
.bloque--ficha {
  margin-block: 30px;
  padding: 22px 24px 20px;
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-left: 3px solid rgb(var(--c-rgb) / .8);
  border-radius: 12px;
}
.bloque--ficha > h3:first-child { margin-top: 0; }
.bloque--ficha p { margin: 8px 0; }

/* -------------------------------------------------------------- código --- */
pre.cod {
  margin: 16px 0 4px; padding: 16px 18px;
  background: var(--ink); border: 1px solid var(--rule); border-radius: 10px;
  overflow-x: auto;
  /* Un prompt es una orden de trabajo: se copia entera o no sirve. Por eso se
     deja envolver en vez de recortarse en una línea infinita. */
  white-space: pre-wrap; word-break: break-word;
}
pre.cod code {
  font: 400 13px/1.7 var(--font-mono);
  color: var(--paper-dim); background: none; padding: 0;
}

/* -------------------------------------------------------------- gráfico --- */
.grafico {
  margin-block: 34px; padding: 26px 28px 20px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 14px;
}
.grafico__t { margin: 0 0 4px; font: 800 20px/1.25 var(--font-display); color: var(--paper); letter-spacing: -.01em; }
.grafico__f { margin: 0 0 6px; font: 400 13.5px/1.5 var(--font-body); color: var(--paper-dim); }
.grafico__pie {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule);
  font: 400 13px/1.55 var(--font-body); color: var(--paper-dim);
}
.gr { display: block; width: 100%; height: auto; margin-block: 22px 6px; }
.gr__et    { fill: var(--paper-dim); font: 500 17px var(--font-body); }
.gr__val   { fill: var(--paper); font: 700 17px var(--font-mono); }
.gr__pista { fill: rgb(242 238 250 / .07); }
.gr__barra { fill: var(--dato-magenta); }
.gr__base  { stroke: var(--rule); stroke-width: 2; }

/* Gráfico de pendiente: dos momentos, tres series. Sin leyenda porque cada
   línea lleva su nombre pegado al punto de partida — que además es la
   codificación secundaria que exige la paleta cuando el contraste entre dos
   hues queda en la banda de riesgo para daltonismo. */
.gr--pendiente { margin-block: 26px 10px; }
.gr__eje  { fill: var(--paper-dim); font: 600 15px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.gr__guia { stroke: var(--rule); stroke-width: 2; }
.ser__l   { fill: none; stroke-width: 3; stroke-linecap: round; }
.ser__p   { stroke: var(--panel); stroke-width: 2; }   /* anillo de superficie */
.ser__iz, .ser__de { fill: var(--paper-dim); font: 500 16px var(--font-body); }
.ser__n   { fill: var(--paper); font-family: var(--font-mono); font-weight: 700; }
.ser--a .ser__l, .ser--a .ser__p { stroke: var(--dato-magenta); }
.ser--a .ser__p { fill: var(--dato-magenta); }
.ser--b .ser__l, .ser--b .ser__p { stroke: var(--dato-oro); }
.ser--b .ser__p { fill: var(--dato-oro); }
.ser--c .ser__l, .ser--c .ser__p { stroke: var(--dato-teal); }
.ser--c .ser__p { fill: var(--dato-teal); }

@media (max-width: 560px) {
  .grafico { padding: 20px 16px 16px; }
  .gr__eje { font-size: 19px; }
  .ser__iz, .ser__de { font-size: 20px; }
  .gr__et, .gr__val { font-size: 21px; }   /* el viewBox encoge; el texto no debe */
}

/* ------------------------------------------------- figuras de fondo claro --
   Una ilustración sobre papel blanco dentro de una página de tinta abre un
   agujero de luz: el salto va de L 0,006 (el fondo) a L 0,95 (el papel). No se
   arregla bajando la opacidad —eso la deja apagada, como si estuviera
   deshabilitada—, sino haciendo dos cosas a la vez:

     · bajar el pico de luminancia para acercarlo a nuestras superficies claras;
     · teñir el blanco hacia el violeta de marca con `multiply`, que oscurece
       los claros y deja intactos los oscuros — justo al revés que un velo.

   Y enmarcarla, para que se lea como un objeto puesto ahí a propósito y no
   como un hueco. La clase la pone genart.py midiendo la imagen, no a mano:
   el umbral es L media > 0,55, y en este artículo separa cinco de tres con un
   hueco de 0,20 entre los dos grupos.
   -------------------------------------------------------------------------- */
.dp__fig--claro {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgb(var(--c-rgb) / .28);
  box-shadow: 0 24px 60px -34px rgb(0 0 0 / .9);
}
.dp__fig--claro img {
  display: block;
  filter: brightness(.80) contrast(1.05);
}
.dp__fig--claro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--violet);
  mix-blend-mode: multiply;
  opacity: .05;
}
/* Un borde interior de un píxel evita el filo duro entre el papel y la tinta */
.dp__fig--claro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(242 238 250 / .07);
}
/* Si el visitante pide menos efectos, se queda el marco y se va el tratamiento */
@media (prefers-contrast: more) {
  .dp__fig--claro img { filter: none; }
  .dp__fig--claro::after { display: none; }
}

/* --------------------------------------------------------------- cierre --- */
.art__cierre { border-top: 1px solid var(--rule); margin-top: 48px; padding-top: 28px; }
.art__cierre-t { margin: 0 0 6px; font: 600 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-dim); }
.art__verif {
  margin: 0 0 26px; font: 400 14px/1.6 var(--font-body); color: var(--paper-dim);
}

/* ------------------------------------------------- página de categoría ----
   Las tres categorías eran anclas dentro de /blog/ (#diseno-web-ia y sus dos
   hermanas). Funcionaban, pero una ancla no es una página: no se indexa, no se
   comparte y no puede crecer. Ahora son /blog/<categoria>/ de verdad.
   -------------------------------------------------------------------------- */
.art-lista { display: grid; gap: 18px; margin-block: 6px 44px; }
.art-card {
  display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: center;
  padding: 14px; background: var(--panel); border: 1px solid var(--rule);
  border-radius: 14px; text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.art-card:hover, .art-card:focus-visible {
  border-color: rgb(var(--c-rgb) / .5); transform: translateY(-2px);
}
.art-card img { display: block; width: 100%; height: auto; border-radius: 10px; }
.art-card__t { margin: 0 0 7px; font: 800 21px/1.25 var(--font-display); color: var(--paper); letter-spacing: -.01em; }
.art-card__b { margin: 0 0 12px; font: 400 15px/1.55 var(--font-body); color: var(--paper-dim); }
.art-card__m { margin: 0; font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim); }
.art-vacia { margin: 8px 0 44px; font: 400 16px/1.6 var(--font-body); color: var(--paper-dim); }
@media (max-width: 620px) { .art-card { grid-template-columns: 1fr; gap: 14px; } }

/* ------------------------------------------- portada del blog: categorías --
   Solo aparece en /blog/. Pastillas, no tarjetas: compiten con las .art-card
   que van justo debajo y tienen que perder esa competencia — son navegación,
   no contenido. La cifra va en mono porque es un dato, igual que en el resto
   de la casa.
   -------------------------------------------------------------------------- */
.art-cats { margin-block: 4px 30px; }
.art-cats ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.art-cats a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border: 1px solid var(--rule); border-radius: 100px;
  font: 700 14px/1 var(--font-body); color: var(--paper-dim); text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.art-cats a:hover, .art-cats a:focus-visible { border-color: rgb(var(--c-rgb) / .5); color: var(--paper); }
.art-cats span { font: 500 12px/1 var(--font-mono); color: var(--c); }
.art-nota { margin: 4px 0 44px; font: 400 15px/1.65 var(--font-body); color: var(--paper-dim); }
.art-nota a { color: var(--paper); }