/**
 * Media Hub NewsAI — la cita
 *
 * Archivo propio, y cargado por el panel Y por el widget del lector.
 *
 * Estaba dentro de components.css, que sólo carga la administración. O sea: el
 * componente que MUESTRA las citas —el widget— nunca descargaba el CSS de las
 * citas, y encima emitía otro marcado. Diseñado, verificado, documentado, y en
 * el archivo equivocado alimentado con el marcado equivocado.
 *
 * Undécima vez que este proyecto tropieza con lo mismo. Que exista no significa
 * que llegue.
 *
 * La cita es la promesa del producto —responde sólo con lo publicado y lo
 * demuestra— así que su aspecto no puede quedar a merced del CSS ajeno ni del
 * color de marca del medio. Es lo único que la Fase 13 no deja configurar.
 *
 * @copyright  (C) 2026 Bruno Invernizzi. All rights reserved.
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */

/* ==========================================================================
   1. CITA — componente firma

   El más importante del sistema y el único que usa serif y petróleo.

   Existe porque las citas del chat salían del color que decidiera la plantilla
   del medio: naranjas en Radio Gabal, quién sabe qué en el próximo cliente. Como
   la cita ES la promesa del producto, fija su color explícitamente en lugar de
   heredarlo.
   ========================================================================== */

/*
 * El blindaje cubría el COLOR y nada más, y eso alcanzaba a medias.
 *
 * La ficha se dibuja dentro de la plantilla del medio, que también impone
 * tipografía: en Radio Gabal la línea de fecha salía en cursiva y el título con
 * otro peso, heredados de reglas del sitio que nadie escribió pensando en esto.
 * El componente fijaba su color explícitamente —esa parte funcionó— pero dejaba
 * que la familia, el estilo y el peso los decidiera el CSS ajeno.
 *
 * Una cita en cursiva se lee como una acotación del sistema; una cita con la
 * tipografía del medio se lee como texto del medio. Las dos cosas son lo
 * contrario de lo que la ficha tiene que decir: «esto es una nota publicada, y
 * acá está la prueba».
 *
 * Así que el blindaje se completa: familia, estilo, peso, interlineado y
 * márgenes, todos declarados. Es la única parte del producto que se defiende de
 * esta manera, y se justifica porque es la única cuya credibilidad depende de
 * verse igual en todos los sitios.
 */
.nm-cite,
.nm-cite * {
    font-family: var(--nm-font-ui);
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
}

.nm-cite p,
.nm-cite a {
    margin: 0;
    padding: 0;
    text-indent: 0;
    text-align: start;
}

.nm-cite {
    border-left: var(--nm-border-width-accent) solid var(--nm-cite);
    border-radius: 0 var(--nm-radius-md) var(--nm-radius-md) 0;
    background: var(--nm-cite-soft);
    padding: var(--nm-space-3);
    margin-block: var(--nm-space-3);
}

/* Sin serif, por decisión revisada.
   La versión anterior usaba Georgia en el título de la fuente. Visto en pantalla
   el efecto no era "editorial" sino "algo se rompió": dentro de una misma
   respuesta, un cambio de tipografía se lee como error antes que como intención,
   y el lector no tiene forma de saber que es deliberado.
   El blindaje frente al CSS de la plantilla —que era el objetivo real— lo dan el
   color explícito y la regla vertical. La serif estaba encima de eso, no debajo. */
.nm-cite__label {
    /* Reafirmados después del blindaje general, que los neutralizó a propósito
       para no heredar los de la plantilla. Lo que el componente sí quiere, lo
       vuelve a pedir. */
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: var(--nm-text-xs);
    /* Negrita, como el marcador: el bloque de cita es la única zona del sistema
       que usa 700, y por el mismo motivo — es texto chico en versalitas y el 600
       no lo sostiene. */
    font-weight: var(--nm-weight-bold);
    color: var(--nm-cite);
    margin-bottom: var(--nm-space-1);
}

.nm-cite__title {
    font-size: var(--nm-text-md);
    font-weight: var(--nm-weight-medium);
    line-height: var(--nm-leading-tight);
    /* Explícito, no heredado: es justamente el punto. */
    color: var(--nm-text);
    text-decoration: none;
}

/* Al apuntar, sólo cambia el color. Sin subrayado: el título ya es el elemento
   dominante de la ficha y no necesita que se lo señale. */
a.nm-cite__title:hover {
    color: var(--nm-cite);
}

/*
 * Con teclado, en cambio, hace falta una marca — y por eso no se quita el
 * indicador, se cambia de forma.
 *
 * Quien navega con tabulador no tiene puntero: si el foco no se ve, no hay
 * manera de saber dónde está. WCAG 2.4.7 lo pide, y acá no hay red de la que
 * colgarse: la regla global de foco del sistema vive en `.nm`, que sólo existe
 * en el panel. En el sitio del lector, si este archivo no lo dibuja, no lo
 * dibuja nadie.
 *
 * Un contorno en vez de un subrayado: cumple la misma función y no reintroduce
 * la línea que sobraba al apuntar con el ratón.
 */
a.nm-cite__title:focus-visible {
    color: var(--nm-cite);
    outline: 2px solid var(--nm-cite);
    outline-offset: 2px;
    border-radius: var(--nm-radius-sm);
}

/* Fecha, sección y estado en una sola línea de metadatos.
   La sección le dice al lector de qué parte del medio salió la nota, que es
   contexto que la fecha sola no da. */
.nm-cite__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nm-space-2);
    font-size: var(--nm-text-xs);
    color: var(--nm-text-muted);
    margin-top: var(--nm-space-1);
}

.nm-cite__sep {
    color: var(--nm-border-control);
}

/* Nota archivada.
   Se dice, no se esconde. Una nota archivada sigue siendo trabajo del medio y
   sigue siendo cierta, pero el lector merece saber que no es de portada: cambia
   cómo interpreta la información, sobre todo si es de hace años.
   Va en tono neutro, no de advertencia: archivar no es desmentir. */
.nm-cite__archived {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--nm-space-2);
    border-radius: var(--nm-radius-sm);
    background: var(--nm-bg);
    border: var(--nm-border-width) solid var(--nm-border);
    color: var(--nm-text-secondary);
    font-size: var(--nm-text-xs);
    font-weight: var(--nm-weight-medium);
    white-space: nowrap;
}

/* Marcador dentro del texto de la respuesta.
   Visualmente es un superíndice; el área táctil se amplía hasta lo usable sin
   alterar el ritmo de la línea. */
.nm-cite__marker {
    font-size: .7em;
    /* Negrita real. Es el único elemento del sistema que usa 700, y se justifica
       por física antes que por estilo: a .7em un peso 600 se pierde dentro del
       párrafo, y este número es lo que separa una afirmación con respaldo de una
       sin él. */
    font-weight: var(--nm-weight-bold);
    color: var(--nm-cite);
    text-decoration: none;
    vertical-align: super;
    padding: 0 .15em;
    position: relative;
}

.nm-cite__marker::after {
    content: "";
    position: absolute;
    inset: -10px -6px;
}

.nm-cite__marker:hover,
.nm-cite__marker:focus-visible {
    text-decoration: underline;
}