/**
 * Media Hub NewsAI - la invitación a instalar y a recibir avisos.
 *
 * ESTA HOJA ERA LA ÚNICA DEL SITIO SIN MODO OSCURO.
 *
 * No porque nadie se acordara: porque no declaraba un solo color. Todo era
 * `color: inherit`, `border-color: currentColor` y opacidades — que parece
 * elegante y en realidad es delegar. Delegando, el bloque se veía como la
 * plantilla del medio quisiera, con dos consecuencias que no se ven hasta que
 * se miran juntas:
 *
 *   · una opacidad NO es un color. `.75` sobre un gris ya claro da un contraste
 *     que nadie calculó y que cambia con el fondo del medio; los mismos textos
 *     con `--nm-text-secondary` se pueden medir, y están medidos;
 *   · el único color propio era `#b42318` para el error. En el modo oscuro del
 *     sitio quedaba rojo oscuro sobre fondo oscuro, que es donde un aviso de
 *     error deja de avisar.
 *
 * `.newsmind-pwa` ya es una de las superficies donde `tokens.css` declara las
 * variables, así que el modo oscuro llega solo. Lo único que hacía falta era
 * usarlas.
 *
 * @copyright  (C) 2026 Bruno Invernizzi. All rights reserved.
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */

.newsmind-pwa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nm-space-2);
    margin-block: var(--nm-space-6);
    color: var(--nm-text);
}

/* ==========================================================================
   EL TEXTO

   Encabezado y explicación ocupan la fila entera para que el botón quede
   debajo y no al lado: una llamada a la acción que comparte renglón con su
   propia explicación obliga a leer en zigzag.
   ========================================================================== */

.newsmind-pwa__heading {
    flex: 1 1 100%;
    margin: 0;
    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-pwa__intro {
    flex: 1 1 100%;
    margin: 0 0 var(--nm-space-1);
    font-size: var(--nm-text-sm);
    line-height: var(--nm-leading-normal);
    color: var(--nm-text-secondary);
}

.newsmind-pwa__status {
    flex: 1 1 100%;
    margin: 0;
    font-size: var(--nm-text-sm);
    color: var(--nm-text-muted);
}

/* El error, con el rojo del sistema y no con uno escrito a mano: así cambia con
   el modo del lector, que es justamente cuando un aviso tiene que verse. */
.newsmind-pwa__status--error {
    color: var(--nm-error);
    font-weight: var(--nm-weight-medium);
}

/* ==========================================================================
   LOS BOTONES

   Píldora con el color de marca del medio. `--nm-brand` es lo que el medio
   configuró en Apariencia; sin configurar, cae en el acento del sistema. Es la
   única parte de este bloque que lleva color: lo demás acompaña.

   `--nm-touch` de alto —44 píxeles— porque esto se pulsa con el dedo. El valor
   anterior daba unos 35: por debajo del mínimo de cualquier guía táctil, y en un
   bloque que existe para que alguien lo pulse.
   ========================================================================== */

.newsmind-pwa__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nm-space-2);
    min-block-size: var(--nm-touch);
    padding-inline: var(--nm-space-4);
    border: var(--nm-border-width) solid var(--nm-brand, var(--nm-accent));
    border-radius: var(--nm-radius-full);
    background: var(--nm-brand, var(--nm-accent));
    color: var(--nm-brand-contrast, var(--nm-accent-contrast));
    font: inherit;
    font-size: var(--nm-text-sm);
    font-weight: var(--nm-weight-medium);
    line-height: 1.2;
    cursor: pointer;
    transition: filter var(--nm-transition-fast);
}

.newsmind-pwa__button:hover:not(:disabled) {
    /* Se oscurece un punto sin cambiar de color: un `filter` sobre el color de
       marca funciona con cualquier marca, y una segunda variable de «marca en
       hover» sería una decisión más que cada medio tendría que tomar. */
    filter: brightness(.92);
}

.newsmind-pwa__button:disabled {
    /* Aquí sí opacidad: no es texto que haya que leer, es un control que está
       fuera de juego, y la señal correcta para eso es que se apague. */
    opacity: .55;
    cursor: default;
}

/*
    ESTADO SUSCRITO: BAJA DE JERARQUÍA, NO SE RELLENA.

    Antes rellenaba la píldora con `currentColor` y dejaba el texto en `inherit`
    —el mismo color— así que fondo y letra quedaban idénticos y la etiqueta se
    volvía invisible. El resultado era una píldora gris y muda que además se leía
    como «botón deshabilitado» cuando significaba «ya estás suscrito».

    Suscribirse es lo que el sitio propone y va destacado; desactivar tiene que
    estar disponible sin competir por la atención, porque un lector que no
    encuentra cómo darse de baja acaba bloqueando el sitio entero en el
    navegador, y de ahí no se vuelve.
*/
.newsmind-pwa__button--quiet {
    border-color: transparent;
    background: transparent;
    color: var(--nm-text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.newsmind-pwa__button--quiet:hover:not(:disabled),
.newsmind-pwa__button--quiet:focus-visible {
    filter: none;
    color: var(--nm-text);
    background: var(--nm-bg);
}

/* El foco, con el anillo del sistema. Sin esto, al quitarle el borde al botón
   silencioso el foco por teclado desaparecía justo en el control que menos se
   encuentra mirando. */
.newsmind-pwa__button:focus-visible {
    outline: var(--nm-border-width-accent) solid var(--nm-focus-border);
    outline-offset: 2px;
}

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

/* En pantalla angosta los botones ocupan el ancho: dos píldoras de 44 píxeles
   una al lado de la otra en 320 px dejan cada rótulo en dos renglones. */
@media (max-width: 30rem) {
    .newsmind-pwa__button {
        flex: 1 1 100%;
    }
}