/* ---------------------------------------------------------------------------
   Las piezas editoriales de un artículo.

   Fichero aparte de blog.css a propósito: aquello es la sección —portada,
   sumario, cabecera, columna— y esto son los bloques que rompen el texto por
   dentro. Se cargan juntos, pero se leen y se tocan por separado.

   EL PROBLEMA QUE RESUELVEN, dicho para que no se deshaga sin querer: un
   artículo en el que todo pesa lo mismo se abandona a la mitad aunque sea
   corto. No es cuestión de longitud, es que el ojo no encuentra dónde
   agarrarse. Estas piezas son los únicos asideros, y son POCAS
   —siete— a propósito: con quince clases cada artículo acabaría pareciendo de
   una web distinta.

   Se escriben desde Markdown con la extensión `admonition` (ver PIEZAS en
   app/blog.py), que es de serie:

       !!! clave "Lo que hay que retener"
           El texto, sangrado cuatro espacios.

   EL COLOR NO ES DECORACIÓN. El acento del artículo cambia según el tema
   —petróleo en VeriFactu, terracota en Aula— y por eso las piezas neutras lo
   heredan. Las que SIGNIFICAN algo no: un aviso es ámbar y un «prohibido» es
   rojo en los dos temas, porque si el rojo cambia de sentido entre secciones
   deja de querer decir nada.
--------------------------------------------------------------------------- */

.blog-texto {
    /* Semáforo y avisos: valores fijos, no heredados del tema. Contraste
       comprobado sobre su propio fondo claro (AA en texto normal). */
    --pieza-verde: #1B7F5A;
    --pieza-verde-fondo: #EDF7F2;
    --pieza-ambar: #9A6508;
    --pieza-ambar-fondo: #FDF6E9;
    --pieza-rojo: #B3392B;
    --pieza-rojo-fondo: #FCF1EF;
    --pieza-neutro: #5A6B78;
    --pieza-neutro-fondo: #F3F6F7;
}

/* En oscuro cambia el FONDO, no el significado: el aviso sigue siendo ambar y
   el «no» sigue siendo rojo. Lo que no puede quedarse es el fondo claro, que
   es justo el fallo que rompio el modo oscuro de la intranet —fondo fijo y
   texto por token— y esta anotado para no repetirlo.

   Mismo contrato que `sistema.css`: primero lo que pide el sistema operativo
   si no se ha elegido nada, y despues la eleccion, que manda. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .blog-texto {
        --pieza-verde: #5FD3A6;  --pieza-verde-fondo: #10322A;
        --pieza-ambar: #E0B44A;  --pieza-ambar-fondo: #322A15;
        --pieza-rojo:  #F08878;  --pieza-rojo-fondo:  #331F1C;
        --pieza-neutro: #9DB3BE; --pieza-neutro-fondo: #14383A;
    }
}

:root[data-theme="dark"] .blog-texto {
    --pieza-verde: #5FD3A6;  --pieza-verde-fondo: #10322A;
    --pieza-ambar: #E0B44A;  --pieza-ambar-fondo: #322A15;
    --pieza-rojo:  #F08878;  --pieza-rojo-fondo:  #331F1C;
    --pieza-neutro: #9DB3BE; --pieza-neutro-fondo: #14383A;
}

/* ── Base común ─────────────────────────────────────────────────────────
   Lo mínimo compartido. Cada pieza se gana su aspecto abajo; si todas
   heredaran la misma caja volveríamos al problema de partida, que era
   justamente que todo se pareciera. */

.blog-texto .admonition {
    margin: 2.2em 0;
    padding: 1.2em 1.4em;
    border-radius: 12px;
    background: var(--pieza-neutro-fondo);
    border-left: 4px solid var(--blog-acento);
}

.blog-texto .admonition > :first-child { margin-top: 0; }
.blog-texto .admonition > :last-child { margin-bottom: 0; }

.blog-texto .admonition-title {
    margin: 0 0 0.5em;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--ink);
}

/* ── Resumen: «en 30 segundos» ──────────────────────────────────────────
   Va arriba del todo. Es lo que se lleva quien no sigue leyendo, y también lo
   que una IA levanta cuando cita el artículo: por eso es texto normal y bien
   estructurado, no una imagen ni una lista de palabras sueltas.

   Más grande que el cuerpo y no más pequeño, que es el error fácil: un resumen
   con letra de pie de página se lee como una nota al margen y se salta. */

.blog-texto .resumen {
    margin: 0 0 2.6em;
    padding: 1.5em 1.7em;
    background: var(--blog-acento-suave);
    border-left: none;
    border-top: 3px solid var(--blog-acento);
    border-radius: 0 0 14px 14px;
    font-size: 1.04rem;
}

.blog-texto .resumen .admonition-title {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--blog-acento);
    margin-bottom: 0.8em;
}

.blog-texto .resumen ul,
.blog-texto .resumen ol { margin-bottom: 0; }
.blog-texto .resumen li { margin-bottom: 0.45em; }
.blog-texto .resumen li:last-child { margin-bottom: 0; }

/* ── Clave, aviso y ejemplo ─────────────────────────────────────────────
   Las tres de trabajo. El icono va en `::before` y es una forma, no una
   imagen: no hay que cargar nada, escala con la letra y no se rompe si falla
   la red. Y va marcado como decorativo de hecho —no lo lee ningún lector de
   pantalla— porque lo que dice el icono lo dice ya el título. */

.blog-texto .clave {
    background: var(--blog-acento-suave);
    border-left-color: var(--blog-acento);
}

.blog-texto .clave .admonition-title { color: var(--blog-acento); }

.blog-texto .aviso {
    background: var(--pieza-ambar-fondo);
    border-left-color: var(--pieza-ambar);
}

.blog-texto .aviso .admonition-title { color: var(--pieza-ambar); }

.blog-texto .ejemplo {
    background: var(--pieza-neutro-fondo);
    border-left-color: var(--pieza-neutro);
}

.blog-texto .ejemplo .admonition-title {
    color: var(--pieza-neutro);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ── La cita sacada ─────────────────────────────────────────────────────
   La única pieza SIN caja, y ese es el punto: lo que parte la mancha de texto
   es el aire, no otro rectángulo. En pantalla ancha se sale de la medida de
   lectura por la izquierda, que es lo que la convierte en un alto de verdad y
   no en un párrafo con la letra más grande.

   No lleva título: si se escribe uno, se oculta. Una cita sacada del propio
   texto no necesita que le pongan nombre. */

.blog-texto .sacada {
    margin: 2.6em 0;
    padding: 0 0 0 1.1em;
    background: none;
    border-radius: 0;
    border-left: 3px solid var(--blog-acento);
    font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.65rem);
    line-height: 1.32;
    font-weight: 600;
    letter-spacing: -0.018em;
    color: var(--ink);
    text-wrap: balance;
}

.blog-texto .sacada .admonition-title { display: none; }
.blog-texto .sacada p { margin: 0 0 0.4em; }
.blog-texto .sacada p:last-child { margin-bottom: 0; }

@media (min-width: 1000px) {
    .blog-texto .sacada {
        margin-left: -2.2rem;
        padding-left: 2.2rem;
    }
}

/* ── El dato ────────────────────────────────────────────────────────────
   La cifra va en el título de la pieza y el cuerpo es de dónde sale. Un dato
   sin fuente es un adorno, así que la fuente no es opcional: va en letra
   pequeña, pero va.

   `tabular-nums` para que los dígitos tengan todos el mismo ancho: sin eso un
   «11 %» al lado de un «87 %» se ve descolocado. */

.blog-texto .dato {
    margin: 2.4em 0;
    padding: 1.1em 0;
    background: none;
    border-radius: 0;
    border-left: none;
    border-top: 2px solid var(--blog-acento);
    border-bottom: 1px solid var(--rule);
    text-align: center;
}

.blog-texto .dato .admonition-title {
    margin: 0 0 0.15em;
    font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    color: var(--blog-acento);
}

.blog-texto .dato p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* ── El semáforo ────────────────────────────────────────────────────────
   Bandas compactas y apiladas, no seis cajas grandes: un semáforo se lee de un
   vistazo o no es un semáforo.

   El nivel se dice DOS veces: con el color del punto y con la palabra del
   título. Un semáforo que solo habla por color no lo lee quien no distingue el
   rojo del verde —y tampoco se entiende impreso en blanco y negro— así que el
   color confirma lo que ya está escrito, no lo sustituye. Por eso mismo no se
   usan emojis: 🔴 no lo lee bien un lector de pantalla y en el PDF hay que
   descargar una imagen por cada uno. */

.blog-texto .nivel {
    margin: 0.55em 0;
    padding: 0.75em 1.1em;
    border-radius: 9px;
    border-left-width: 4px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.7em;
    /* `start` y no `baseline`: la línea base de un punto vacío es su borde
       inferior, así que con `baseline` el punto queda colgando por debajo del
       título. Con `start` y un margen medido cae donde tiene que caer. */
    align-items: start;
}

/* Un solo punto, centrado en la primera línea del título. */
.blog-texto .nivel::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    /* Medio renglón del título menos medio punto. */
    margin-top: 0.32em;
    flex: none;
}

.blog-texto .nivel .admonition-title { margin: 0; }
.blog-texto .nivel > :not(.admonition-title) { grid-column: 2; }
.blog-texto .nivel p { margin: 0.25em 0 0; font-size: 0.95rem; line-height: 1.55; }

.blog-texto .nivel.verde {
    color: var(--pieza-verde);
    background: var(--pieza-verde-fondo);
    border-left-color: var(--pieza-verde);
}

.blog-texto .nivel.ambar {
    color: var(--pieza-ambar);
    background: var(--pieza-ambar-fondo);
    border-left-color: var(--pieza-ambar);
}

.blog-texto .nivel.rojo {
    color: var(--pieza-rojo);
    background: var(--pieza-rojo-fondo);
    border-left-color: var(--pieza-rojo);
}

/* El título hereda el color del nivel; el texto explicativo vuelve a tinta
   normal, que es la que se lee cómoda en un párrafo. */
.blog-texto .nivel .admonition-title { color: inherit; }
.blog-texto .nivel p { color: var(--ink); }

/* ── Figuras ────────────────────────────────────────────────────────────
   `max-width: 100%` y `height: auto` son obligatorios y no un detalle: una
   captura de 1600 px dentro de una columna de 66ch empuja el `body` entero y
   la página coge scroll horizontal en el móvil. Es el mismo problema que
   tenían las tablas antes de `.blog-tabla-scroll`.

   El `width`/`height` del HTML los pone app/blog.py midiendo el fichero, y
   sirven para otra cosa: reservar el hueco antes de que la imagen cargue, para
   que la página no dé el salto. Estas dos reglas son las que permiten que ese
   par de atributos no le fije el tamaño de verdad. */

.blog-texto .blog-figura {
    margin: 2.4em 0;
}

.blog-texto .blog-figura img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--rule);
    background: var(--pieza-neutro-fondo);
}

.blog-texto .blog-figura figcaption {
    margin-top: 0.7em;
    padding-left: 0.9em;
    border-left: 2px solid var(--blog-acento-suave);
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* En pantalla ancha la figura se sale un poco de la medida de lectura. La
   columna de texto se mide para leer; una captura se mira, y a 66ch se queda
   pequeña para lo que hay que distinguir dentro.

   Hijo DIRECTO, no descendiente: `_figuras()` convierte cualquier párrafo que
   solo lleve una imagen, y eso incluye una imagen dentro de un `!!! ejemplo` o
   de un punto de una lista. Ahí el margen negativo sacaría la imagen fuera del
   fondo de su propia caja. Con `>` la sangría es solo para las figuras que
   cuelgan del cuerpo del artículo. */
@media (min-width: 1000px) {
    .blog-texto > .blog-figura {
        width: calc(100% + 4.5rem);
        max-width: none;
        margin-inline: -2.25rem;
    }
    .blog-texto > .blog-figura figcaption { margin-inline: 2.25rem; }
}

/* Una figura dentro de una pieza o de una lista: más pequeña y sin salirse. */
.blog-texto .admonition .blog-figura,
.blog-texto li .blog-figura { margin: 1.2em 0; }

/* Una imagen suelta dentro de un párrafo —un logotipo, una marca en línea— no
   es una figura y no debe estirarse. */
.blog-texto p img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* ── Separador de tramo ─────────────────────────────────────────────────
   Un `---` de Markdown. Tres puntos y no una línea: una raya de lado a lado
   corta el artículo en dos, y esto es una pausa, no un final. */

.blog-texto hr {
    margin: 3em auto;
    border: none;
    width: 100%;
    max-width: 8rem;
    height: 1em;
    background-image: radial-gradient(circle, var(--blog-acento) 2px, transparent 2px);
    background-size: 2rem 100%;
    background-position: center;
    background-repeat: repeat-x;
    opacity: 0.55;
}