/**
 * Media Hub NewsAI - companion widget styles.
 *
 * Shared by the related, trending and history modules. Deliberately restrained:
 * these boxes sit inside a news template that already has its own voice, so
 * they inherit typography and only bring structure.
 *
 * @copyright  (C) 2026 Bruno Invernizzi. All rights reserved.
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */

/* La paleta propia se fue en la fase 13, y el puente de nombres que la reemplazó
   se fue en esta etapa: los doce usos de `--newsmind-widget-*` pasan a `--nm-*`
   directo, igual que en el chat. Y con ellos las distancias y los tamaños de
   letra sueltos, que eran la escala del sistema escrita con otros números.

   El modo oscuro lo resuelve tokens.css para las cinco superficies a la vez. Que
   cada archivo trajera su propia versión es lo que producía la incoherencia que
   señaló la auditoría: los widgets se adaptaban y el bloque de avisos que estaba
   al lado, no. */
/*
 * LA CAJA DECLARA SU FONDO. ES LA DECISIÓN V-07, TOMADA.
 *
 * Hasta acá estos módulos no declaraban ni fondo ni color de texto: se apoyaban
 * en los de la plantilla del medio. La auditoría lo llamó «blancos y planos» y
 * dijo que al lado de un widget con peso «parecen de otra década», pero el
 * problema de fondo no era estético:
 *
 *   · sin fondo declarado, NADA de adentro podía fijar su color. La pareja
 *     color/fondo sólo se mide si se declaran las dos, así que el título tenía
 *     que heredar el de la plantilla — con el contraste que hubiera;
 *   · y el que decidía cómo se veía el producto era el CSS del cliente. Es la
 *     misma raíz del hallazgo V-06, el de las citas ilegibles en naranja.
 *
 * Con la superficie declarada, todo lo de adentro pasa a ser medible, y de eso
 * vive el resto de este archivo: `--nm-text` da 17,85:1 en claro y 14,81:1 en
 * oscuro, y el modo oscuro llega solo porque `.newsmind-widget` es una de las
 * cinco superficies donde tokens.css declara la paleta.
 *
 * NO SE AGREGA SOMBRA NI FILO DE MARCA. La caja queda igual que el bloque de
 * notas insertadas —superficie, borde, radio, relleno— y no porque sobre para
 * hacer más, sino porque el bloque de notas ya estaba resuelto así y dos cosas
 * del mismo producto en la misma página no pueden pedir atención de dos maneras
 * distintas. Presencia es tener un plano propio, no tener efectos.
 *
 * Consecuencia que hay que saber: en un medio de plantilla oscura cuyo lector
 * tenga el sistema en claro, la caja sale clara sobre página oscura. Es lo que
 * significa declarar una superficie, y para eso el medio tiene `.nm-scheme--dark`
 * en Apariencia.
 */
.newsmind-widget {
    background: var(--nm-surface);
    color: var(--nm-text);
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius-md);
    padding: var(--nm-space-4);
    margin-bottom: var(--nm-space-6);
}

/* Y ahora el título sí fija el suyo, que es lo que la decisión desbloquea. En
   oscuro `--nm-heading` se iguala al texto: ahí la jerarquía la marcan el cuerpo
   y el peso, no el tono. El respaldo a `--nm-text` cubre al sitio, donde
   `--nm-heading` no está declarado. */
.newsmind-widget__title {
    display: flex;
    align-items: center;
    gap: var(--nm-space-2);
    margin: 0 0 var(--nm-space-3);
    font-size: var(--nm-text-md);
    font-weight: var(--nm-weight-semibold);
    color: var(--nm-heading, var(--nm-text));
}

/* EL ICONO SIGUE AL TÍTULO.

   `currentColor`, así que toma el color del `<h3>` que lo acompaña y cambia con
   él en claro y en oscuro sin una regla más. Es lo que un emoji no podía hacer:
   lo dibujaba el sistema operativo del lector, con su color y su forma.

   `flex: none` porque un SVG dentro de un flex se encoge antes que el texto, y
   un icono aplastado se lee como un error de maquetación. */
.newsmind-widget__icon {
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: currentcolor;
}

.newsmind-widget__intro {
    margin: 0 0 var(--nm-space-3);
    font-size: var(--nm-text-base);
    color: var(--nm-text-muted);
}

/* La segunda explicación de una misma caja va separada de la primera lista.
   Reemplaza a un `style="margin-top:1rem"` escrito en la plantilla del módulo de
   relacionadas —el último estilo en línea que quedaba en el frontend— y de paso
   resuelve lo que ese margen no resolvía: en «cobertura relacionada» conviven
   preguntas y notas, dos cosas distintas, y sin una línea que las separe se leen
   como una sola lista larga. */
.newsmind-widget__intro--second {
    margin-top: var(--nm-space-4);
    padding-top: var(--nm-space-3);
    border-top: var(--nm-border-width) solid var(--nm-border);
}

/* ==========================================================================
   LAS PREGUNTAS
   ========================================================================== */

.newsmind-widget__questions {
    display: flex;
    flex-direction: column;
    gap: var(--nm-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * FILA, NO BLOQUE — y acá está el arreglo del hallazgo V-08.
 *
 * El contador de consultas se sacaba de la fila con `float: right`. Con un
 * título corto quedaba bien; con una pregunta que ocupa dos renglones, el número
 * flotado empuja la primera línea y se despega del resto, y la lista entera
 * pierde la alineación.
 *
 * El texto va ahora en su propio elemento —`__question-text`, que es donde
 * viven las comillas— y el contador es el segundo hijo de una fila flexible. Así
 * el número queda arriba a la derecha pase lo que pase con el largo del texto, y
 * las comillas abrazan al texto en vez de a todo el conjunto: antes la comilla
 * de cierre se dibujaba DESPUÉS del contador.
 */
.newsmind-widget__question {
    display: flex;
    align-items: flex-start;
    gap: var(--nm-space-2);
    width: 100%;
    /* 44 px de alto: se pulsa con el dedo. Con una sola línea de texto quedaba
       en 39, que es de esos números que parecen bien y no lo están. */
    min-block-size: var(--nm-touch);
    text-align: left;
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius-md);
    padding: var(--nm-space-2) var(--nm-space-3);
    color: inherit;
    text-decoration: none;
    font-size: var(--nm-text-base);
    line-height: var(--nm-leading-normal);
    transition: border-color var(--nm-transition-fast);
}

.newsmind-widget__question:hover,
.newsmind-widget__question:focus-visible {
    border-color: var(--nm-brand-text);
    text-decoration: none;
}

.newsmind-widget__question:focus-visible {
    outline: var(--nm-border-width-accent) solid var(--nm-focus-border);
    outline-offset: 2px;
}

.newsmind-widget__question-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Las comillas, con el mismo aire de los dos lados. */
.newsmind-widget__question-text::before {
    content: "\201C";
    opacity: .5;
    margin-inline-end: .15em;
}

.newsmind-widget__question-text::after {
    content: "\201D";
    opacity: .5;
    margin-inline-start: .15em;
}

.newsmind-widget__hits {
    flex: none;
    font-size: var(--nm-text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--nm-text-muted);
    /* Alineado con la primera línea del texto y no con su caja: las dos letras
       tienen tamaños distintos, así que sin esto el número queda alto. */
    padding-block-start: .2em;
}

/* ==========================================================================
   LAS LISTAS DE NOTAS
   ========================================================================== */

.newsmind-widget__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--nm-space-3);
}

.newsmind-widget__item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

/*
 * EL TITULAR DE LA LISTA: 24 PÍXELES Y SEPARACIÓN, NO 44. ES UNA EXCEPCIÓN
 * DECLARADA.
 *
 * La tabla de accesibilidad del sistema pide «≥ 44×44 px en frontend» y esta
 * regla no lo cumple: son 21 de texto más 8 de relleno, 29. Antes de escribir el
 * número hay que decir por qué.
 *
 * Ese 44 es el criterio 2.5.5 de WCAG, que es NIVEL AAA. El piso declarado del
 * producto es AA, y en AA el criterio que rige —2.5.8— pide 24×24 con una
 * excepción explícita cuando los blancos están separados: con 29 de alto y 12 de
 * separación entre elementos, la zona sin vecino supera los 44.
 *
 * Y hay una razón de diseño además de la norma. Esto no es un botón: es el
 * TITULAR de una nota, o sea el contenido. Estirarlo a 44 no agranda nada que se
 * pulse —la línea entera ya es pulsable a lo ancho— y sí hace que un módulo de
 * cinco notas crezca setenta píxeles, que en una barra lateral es la diferencia
 * entre verlo entero y no verlo.
 *
 * Los botones de verdad —los pulgares del chat, el de enviar, el que abre el
 * asistente, las preguntas sugeridas— sí van a 44, sin excepción.
 */
.newsmind-widget__link {
    display: block;
    padding-block: var(--nm-space-1);
    font-weight: var(--nm-weight-semibold);
    line-height: 1.35;
    color: inherit;
    text-decoration: none;
}

.newsmind-widget__link:hover,
.newsmind-widget__link:focus-visible {
    color: var(--nm-brand-text);
}

.newsmind-widget__link:focus-visible {
    outline: var(--nm-border-width-accent) solid var(--nm-focus-border);
    outline-offset: 2px;
}

.newsmind-widget__meta {
    font-size: var(--nm-text-sm);
    color: var(--nm-text-muted);
}

/* `--nm-brand-text` y no `--nm-brand`: acá la marca es TEXTO sobre el fondo del
   medio, no relleno. Es la distinción que dejó escrita el hallazgo V-06 y que
   costó meses de citas ilegibles. 5,67:1 en claro, 7,51:1 en oscuro. */
.newsmind-widget__badge {
    display: inline-block;
    font-size: var(--nm-text-xs);
    font-weight: var(--nm-weight-semibold);
    color: var(--nm-brand-text);
    border: var(--nm-border-width) solid currentcolor;
    border-radius: var(--nm-radius-full);
    padding: 0 var(--nm-space-1);
    margin-right: .35rem;
}

.newsmind-widget__excerpt {
    font-size: var(--nm-text-sm);
    color: var(--nm-text-muted);
    margin: .1rem 0 0;
}

/* Acá estaba `.newsmind-widget__footer`, un pie de módulo que ninguna de las
   tres plantillas dibuja. Se escribió para un «ver todas» que nunca llegó a
   existir. Guardar el estilo de algo que no está no lo acerca: lo único que hace
   es que el próximo que lea este archivo crea que el pie existe. */

/* El vacío del historial cierra la caja sin dejar un margen colgando. Antes lo
   hacía `mb-0`, una utilidad de Bootstrap: en el panel Bootstrap está garantizado
   porque lo trae Joomla, pero en el SITIO lo trae —o no— la plantilla del medio.
   Una plantilla sin Bootstrap dejaba ese margen puesto. */
.newsmind-widget__intro--last {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .newsmind-widget__question {
        transition: none;
    }
}

/* ==========================================================================
   LA NOTA DEL ARCHIVO INSERTADA EN OTRA NOTA

   Tres formatos del mismo bloque, y la diferencia es cuánta lectura
   interrumpen: `tarjeta` con imagen, `resumen` con entradilla, `enlace` con el
   título solo.

   Reglas nuevas con `--nm-*` DIRECTAMENTE, sin pasar por el puente
   `--newsmind-widget-*` que sostiene lo anterior. Es la regla que dejó anotada
   `tokens.css` cuando se creó el puente: los alias sólo mantienen lo que ya
   existía, y todo lo que se escriba a partir de ahí usa los nombres del sistema.

   El filo de acento del lado del texto es lo único que este bloque tiene de
   marca. Toma `--nm-brand`, así que adopta el color que el medio configuró — y
   si no configuró ninguno, el acento del sistema.
   ========================================================================== */

/* EL MARCO ES DEL BLOQUE, NO DE CADA NOTA.

   Antes cada nota traía su propio recuadro y el envoltorio traía otro: caja
   dentro de caja. Ahora el recuadro es uno solo, el del bloque, y dentro van los
   elementos separados por una línea. Es lo que hace que tres notas se lean como
   una lista —«esto es lo que sigue»— en vez de como tres avisos repetidos.

   Se declara acá y no se hereda de `.newsmind-widget`, que es la tarjeta de los
   módulos del sitio: dos cosas que se parecen no son la misma, y atarlas
   obligaría a cambiar las dos cada vez que cambie una. De `.newsmind-widget`
   sólo se usa lo invisible — es la superficie donde `tokens.css` declara las
   variables— y por eso se le quitan borde, relleno y margen. */
.newsmind-widget.newsmind-notes {
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius-md);
    background: var(--nm-surface);
    padding: var(--nm-space-4);
    margin-block: var(--nm-space-6);
}

/* El bloque se presenta. Sin título, un recuadro con dos titulares en medio de
   un artículo es ambiguo: puede ser una cita, un destacado o el final de la
   nota. Tres palabras lo resuelven. */
.newsmind-notes__title {
    display: flex;
    align-items: center;
    gap: var(--nm-space-2);
    margin: 0 0 var(--nm-space-3);
    /* Un punto por encima del cuerpo del artículo. El bloque interrumpe la
       lectura para ofrecer otra cosa, y un título del mismo tamaño que el texto
       que lo rodea no se lee como un título: se lee como un renglón más. */
    font-size: var(--nm-text-lg);
    font-weight: var(--nm-weight-bold);
    line-height: var(--nm-leading-tight);
    color: var(--nm-heading, var(--nm-text));
}

/* `currentColor`: el icono sigue al título en claro y en oscuro sin una regla
   más. `flex: none` porque un SVG dentro de un flex se encoge antes que el
   texto, y un ojo aplastado se lee como un error de maquetación. */
.newsmind-notes__icon {
    flex: none;
    inline-size: 1.4rem;
    block-size: 1.4rem;
    color: currentcolor;
}

.newsmind-notes__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.newsmind-note {
    display: flex;
    align-items: stretch;
    gap: var(--nm-space-3);
    padding: var(--nm-space-3);
    /* Color propio y explícito. Sin esto, la plantilla del medio pinta el enlace
       con el suyo y el bloque cambia de aspecto en cada sitio — que es
       exactamente lo que le pasó a las citas del chat, naranjas en Radio Gabal
       sin que nadie lo hubiera decidido. */
    color: var(--nm-text);
    text-decoration: none;
}

.newsmind-note:hover,
.newsmind-note:focus-visible {
    background: var(--nm-bg);
    text-decoration: none;
}

/* EL FILO MIDE LO QUE MIDE EL CONTENIDO, NO LO QUE MIDE LA CAJA.

   Era un `border-inline-start`, y un borde cubre también el relleno: sobresalía
   por arriba y por abajo del contenido que acompaña. Como hijo flexible con
   `align-self: stretch` mide exactamente el alto de la línea —la imagen si la
   hay, el título con la entradilla si no, y sólo el título en el formato de
   enlace—, que es lo que hace que los tres formatos se vean como tres tamaños de
   la misma cosa y no como tres cosas distintas.

   Cuatro píxeles: con dos, sobre el fondo del artículo, el color de marca del
   medio apenas se distinguía de una línea de tabla. */
.newsmind-note::before {
    content: "";
    flex: none;
    align-self: stretch;
    inline-size: 4px;
    border-radius: 2px;
    background: var(--nm-brand, var(--nm-accent));
}

/* La línea entre elementos, y sólo ENTRE: encima del primero sobraría, porque
   ahí ya está el título separando. */
.newsmind-notes__item + .newsmind-notes__item {
    border-block-start: var(--nm-border-width) solid var(--nm-border);
}

/* Fuera de la pantalla pero no del árbol: es lo que le cuenta a quien no ve que
   el enlace abre otra pestaña. `clip-path` y no `display:none`, que lo sacaría
   también del lector de pantalla. */
.nm-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* La imagen no se estira: recorta. Una foto deformada en el medio de una nota se
   ve peor que no ponerla. */
.newsmind-note__image {
    flex: 0 0 auto;
    inline-size: 8.5rem;
    block-size: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--nm-radius-sm);
}

.newsmind-note__body {
    display: flex;
    flex-direction: column;
    gap: var(--nm-space-1);
    /* Sin esto, un título largo empuja la flecha fuera de la caja: un hijo
       flexible no baja de su ancho de contenido salvo que se le diga. */
    min-inline-size: 0;
    flex: 1 1 auto;
}

.newsmind-note__kicker {
    font-size: var(--nm-text-xs);
    font-weight: var(--nm-weight-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nm-text-muted);
}

.newsmind-note__title {
    font-size: var(--nm-text-base);
    font-weight: var(--nm-weight-bold);
    line-height: var(--nm-leading-tight);
    color: var(--nm-heading, var(--nm-text));
}

.newsmind-note__intro {
    font-size: var(--nm-text-sm);
    line-height: var(--nm-leading-normal);
    color: var(--nm-text-secondary);
    /* Dos líneas y corta. La entradilla acompaña al título; si crece, el bloque
       insertado empieza a competir con la nota que lo contiene. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.newsmind-note__arrow {
    flex: 0 0 auto;
    align-self: center;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--nm-text-muted);
}

/* ==========================================================================
   LA CRONOLOGÍA

   Compacta y en columna: el punto y la línea que los une son lo que dice, sin
   una palabra, que esto es una sucesión y no una lista de recomendaciones. La
   fecha encima del titular y no al lado — al lado obligaba a una columna fija de
   7,5 rem que en el ancho de un artículo es la mitad del renglón.

   Un punto menos de cuerpo que el resto de los bloques: son cinco o seis
   entradas de las que se lee la fecha y se busca la que interesa, no cinco o
   seis notas para leer enteras.
   ========================================================================== */

.newsmind-note--hito {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 0 var(--nm-space-4) var(--nm-space-6);
    /* La línea que une los puntos. Va en el elemento y no en un pseudo del
       contenedor para que llegue exactamente hasta el siguiente. */
    border-inline-start: 2px solid var(--nm-border);
}

/* El filo de 4 px del resto de los bloques pasa a ser el punto de la línea. */
.newsmind-note--hito::before {
    position: absolute;
    inset-inline-start: -6px;
    inset-block-start: .15rem;
    inline-size: 10px;
    block-size: 10px;
    border-radius: var(--nm-radius-full);
    /* El halo del color del fondo separa el punto de la línea: sin él, punto y
       línea se leen como una sola mancha alargada. */
    box-shadow: 0 0 0 3px var(--nm-surface);
}

/* La última no continúa: una línea que sigue después del último punto promete
   otra entrada que no existe. */
.newsmind-notes__item:last-child .newsmind-note--hito {
    border-color: transparent;
    padding-block-end: 0;
}

/* En la cronología los elementos no se separan con línea: ya los separa la
   propia línea de tiempo. */
.newsmind-notes__item + .newsmind-notes__item .newsmind-note--hito {
    border-block-start: 0;
}

.newsmind-note--hito .newsmind-note__date {
    font-size: var(--nm-text-xs);
    font-weight: var(--nm-weight-bold);
    line-height: 1.4;
    color: var(--nm-brand-text, var(--nm-accent));
    font-variant-numeric: tabular-nums;
}

.newsmind-note--hito .newsmind-note__title {
    font-size: var(--nm-text-sm);
    line-height: var(--nm-leading-normal);
}

/* La flecha sobra: en una cronología el ojo baja por la columna, no busca hacia
   dónde va cada renglón. */
.newsmind-note--hito .newsmind-note__arrow {
    display: none;
}

/* ==========================================================================
   EL BLOQUE A UN COSTADO

   `float` y no rejilla: es lo único que hace que el texto del artículo corra
   alrededor, que es justamente lo que se pidió. La rejilla partiría el artículo
   en dos columnas y el bloque dejaría un hueco debajo.

   `45%` y no la mitad: con la mitad justa, la columna de texto que queda al lado
   baja de las cuarenta y cinco letras por renglón, que es donde una línea deja
   de leerse de corrido.
   ========================================================================== */

@media (min-width: 40rem) {
    .newsmind-notes--izquierda,
    .newsmind-notes--derecha {
        inline-size: 45%;
        max-inline-size: 22rem;
    }

    .newsmind-notes--izquierda {
        float: inline-start;
        margin-inline-end: var(--nm-space-6);
    }

    .newsmind-notes--derecha {
        float: inline-end;
        margin-inline-start: var(--nm-space-6);
    }
}

/* Por debajo de eso no hay dos columnas que valgan: el bloque ocupa el ancho y
   el texto sigue debajo. Un despiece de 45 % en un teléfono son tres palabras
   por renglón a cada lado. */

/* El formato de sólo título es una línea, no una tarjeta: menos aire arriba y
   abajo, para que varios seguidos se lean como una lista. */
.newsmind-note--enlace {
    padding-block: var(--nm-space-2);
}

/* EL ENLACE EN MEDIO DE LA FRASE.

   No es un bloque: es una palabra del texto que además lleva a otra nota. Toda
   la marca que necesita es el subrayado y el color del medio; cualquier cosa
   más —un icono, un fondo— convertiría una frase en una interrupción, que es
   justo lo que este formato existe para evitar. */
.newsmind-notelink {
    color: var(--nm-brand-text, var(--nm-accent));
    text-decoration: underline;
    text-underline-offset: .15em;
    text-decoration-thickness: max(1px, .06em);
}

.newsmind-notelink:hover,
.newsmind-notelink:focus-visible {
    text-decoration-thickness: max(2px, .12em);
}

/* En pantalla angosta la imagen pasa arriba: a 320 píxeles, una foto de 8,5rem
   al lado del texto deja al título en columna de tres palabras. */
@media (max-width: 30rem) {
    .newsmind-note--tarjeta {
        flex-wrap: wrap;
    }

    .newsmind-note--tarjeta .newsmind-note__image {
        inline-size: 100%;
        aspect-ratio: 16 / 9;
    }

    .newsmind-note__arrow {
        display: none;
    }
}