/*
Theme Name: Almomento
Theme URI: https://almomento.net
Author: Almomento
Author URI: https://almomento.net
Description: Tema premium de alta velocidad para portal de noticias 24/7. Incluye ticker continuo, categorías destacadas, streaming de videos, widgets de WhatsApp y redes sociales.
Version: 1.3.0
License: GNU General Public License v2 or later
Text Domain: deultimo-minuto
*/

/* ---------------------------------------------------------------
   Escala de la interfaz en escritorio.

   A tamaño real el portal se veía disperso, con el texto pequeño y
   demasiado aire entre las piezas. Todas las medidas del tema son px
   fijos (fontSize y spacing de la configuración de Tailwind, más los
   valores sueltos tipo text-[17px] de las plantillas), así que subir
   el font-size de la raíz habría escalado sólo las clases nativas de
   Tailwind, que sí van en rem, y el resto se habría quedado atrás.

   `zoom` escala el conjunto —texto, espaciados, imágenes y bordes— tal
   como lo hace el zoom del navegador, y a diferencia de
   `transform: scale()` recoloca el contenido en vez de deformarlo.

   La escala va por tramos, y no plana, por un detalle de `zoom`: los
   media queries siguen midiendo el ancho real de la ventana, no el
   que queda después de ampliar. En un portátil de 1366 px el 1.25
   deja 1093 px útiles pero el navegador sigue aplicando el diseño de
   `xl:` (pensado para 1280 en adelante), y la rejilla se estrecha.
   Por eso el 125% completo se reserva para monitores grandes, donde
   sí sobra sitio, y en pantallas medianas se amplía menos.

   Para ajustar la intensidad basta con cambiar --dum-escala: 1 deja el
   tamaño original y 1.25 equivale al 125% del navegador.

   Sólo se aplica en escritorio: en móvil el diseño ya está dimensionado
   para la pantalla del aparato y ampliarlo lo desbordaría.
   --------------------------------------------------------------- */
:root {
    --dum-escala: 1;
}

/* Portátiles y monitores medianos. */
@media (min-width: 1024px) {
    :root {
        --dum-escala: 1.12;
    }
}

/* Monitores grandes: el 125% completo. */
@media (min-width: 1600px) {
    :root {
        --dum-escala: 1.25;
    }
}

body {
    zoom: var(--dum-escala);
}

/* ---------------------------------------------------------------
   Botones flotantes de redes.

   Anclados abajo a la izquierda, con la página arriba del todo caían
   justo encima del titular de la noticia principal. En vez de moverlos
   —abajo a la derecha ya está el de WhatsApp— se esconden mientras el
   lector no ha empezado a bajar: al principio de la página lo que
   importa es el titular, y en cuanto rueda un poco vuelven a estar a
   mano.

   El estado inicial es oculto y lo destapa el guion de la cabecera. Sin
   JavaScript se quedarían invisibles, así que el guion quita la clase
   dum-flotantes-listo para dejarlos fijos y visibles.
   --------------------------------------------------------------- */
.dum-flotantes {
    transition: opacity .25s ease, transform .25s ease;
}

.dum-flotantes-listo .dum-flotantes {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.dum-flotantes-listo .dum-flotantes.dum-flotantes-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* Quien prefiera que no se muevan las cosas por la pantalla. */
@media (prefers-reduced-motion: reduce) {
    .dum-flotantes {
        transition: none;
    }
}

/* ---------------------------------------------------------------
   Zonas que cambian con la paleta elegida en el Personalizador.
   Los valores vienen de las variables que imprime inc/paletas.php;
   los de reserva son los de la paleta Azul y Oro, que es la del portal.
   --------------------------------------------------------------- */

/* Franja del logo: va en blanco, que es el fondo del logotipo Al Momento. */
.dum-barra-marca {
    background-color: var(--dum-marca-fondo, #ffffff);
}

.dum-marca-icono {
    color: var(--dum-marca-texto, #081c76);
}

/* El logo que suba el usuario puede venir en cualquier tamaño: aquí se acota
   para que no reviente la altura de la franja de marca. */
.dum-barra-marca img,
.custom-logo,
.custom-logo-link img {
    max-height: 48px !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .dum-barra-marca img,
    .custom-logo,
    .custom-logo-link img {
        max-height: 38px !important;
    }
}

/* Barra de categorías. */
.dum-barra-categorias {
    background-color: var(--dum-cat-fondo, #eeae00);
    color: var(--dum-cat-texto, #081c76);
}

.dum-barra-categorias a {
    color: var(--dum-cat-texto, #081c76);
}

.dum-barra-categorias a:hover {
    opacity: .72;
}

.dum-barra-categorias .dum-separador {
    color: var(--dum-cat-separador, rgba(8, 28, 118, .45));
}

/* Distintivos: URGENTE, EXCLUSIVA, EN VIVO… */
.dum-destacado {
    background-color: var(--dum-destacado, #eeae00);
    color: var(--dum-destacado-texto, #081c76);
}

.dum-destacado .dum-punto {
    background-color: var(--dum-destacado-texto, #081c76);
}

/* Píldora del elemento activo en el menú blanco. La maqueta la traía en
   negro; va en el azul de la marca para que la cabecera no mezcle paletas. */
.dum-pildora-activa {
    background-color: var(--dum-primary, #081c76);
    color: #ffffff;
}

/* Filo superior de los bloques de la barra lateral. */
.dum-filo-seccion {
    border-top-color: var(--dum-primary, #081c76);
}

/* Panel de vídeos de YouTube: fondo del pie en vez de negro. Los botones de
   reproducción y el distintivo YOUTUBE sí siguen en rojo, que es la marca de
   la plataforma. */
.dum-panel-video {
    background-color: var(--dum-pie-fondo, #050f42);
    border: 1px solid var(--dum-pie-filo, #eeae00);
}

/* Subrayado de los encabezados de sección. */
.dum-subrayado {
    border-bottom-color: var(--dum-subrayado, #eeae00) !important;
}

/* Botones de acción. */
.dum-boton {
    background-color: var(--dum-boton, #eeae00);
    color: var(--dum-boton-texto, #081c76);
}

.dum-boton:hover {
    filter: brightness(1.08);
}

/* Pie. */
.dum-pie {
    background-color: var(--dum-pie-fondo, #050f42);
    border-top-color: var(--dum-pie-filo, #eeae00);
}

.dum-pie .dum-pie-titulo {
    color: var(--dum-pie-titulo, #eeae00);
}

/* Detalles de acento sobre fondos oscuros: viñetas del pie, «redacción
   activa», la sección de vídeos… */
.dum-acento-texto {
    color: var(--dum-pie-titulo, #eeae00);
}

.dum-acento-fondo {
    background-color: var(--dum-pie-titulo, #eeae00);
}

.dum-acento-fondo-fuerte {
    background-color: var(--dum-accent, #eeae00);
    color: var(--dum-accent-texto, #081c76);
}

.dum-acento-hover:hover {
    background-color: var(--dum-accent, #eeae00);
    color: var(--dum-accent-texto, #081c76);
}

.ticker-wrap {
    width: 100%;
    overflow: hidden;
    background-color: var(--dum-ticker-fondo, #081c76);
    color: var(--dum-ticker-texto, #ffffff);
    box-sizing: border-box;
}

.ticker {
    display: inline-flex;
    white-space: nowrap;
    animation: ticker 30s linear infinite;
}

.ticker-item {
    flex-shrink: 0;
    padding-right: 2rem;
}

@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* Velo del héroe.
   La maqueta lo resuelve con `bg-gradient-to-t from-black/90 via-black/50`,
   pero bajo WordPress el CDN de Tailwind genera su CSS antes de recibir la
   configuración y el `from` se queda transparente: el titular blanco acaba
   sobre fondo claro. En CSS plano no depende de ese arranque. */
.dum-hero-overlay {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, 0) 100%);
}

/* Fondo para el héroe cuando la entrada no trae imagen destacada: el texto
   va en blanco, así que el hueco no puede quedarse gris claro. Se pinta con
   el azul de la marca en vez de con negro. */
.dum-hero-sinfoto {
    background: radial-gradient(120% 120% at 50% 0%, #12277f 0%, #050f42 70%);
}

/* Paginación de los archivos: WordPress la imprime con su propio marcado,
   así que se le da el aspecto del tema desde aquí. */
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 9999px;
    background: #e9e8e7;
    color: #1b1c1c;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.page-numbers:hover,
.page-numbers.current {
    background: var(--dum-primary, #081c76);
    color: #ffffff;
}

ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: none;
    min-width: 0;
    height: auto;
}

ul.page-numbers li { display: flex; }

.pulse-dot {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* El contenido de las entradas viene en bloques de WordPress; sin esto los
   párrafos y listas del cuerpo salen sin separación, porque Tailwind hace
   reset de márgenes. */
.entrada-cuerpo > p { margin-bottom: 1rem; line-height: 1.7; }
.entrada-cuerpo > h2 { font-family: 'Archivo Narrow', sans-serif; font-size: 1.6rem; font-weight: 700; margin: 1.6rem 0 .6rem; }
.entrada-cuerpo > h3 { font-family: 'Archivo Narrow', sans-serif; font-size: 1.3rem; font-weight: 700; margin: 1.3rem 0 .5rem; }
.entrada-cuerpo > ul,
.entrada-cuerpo > ol { margin: 0 0 1rem 1.4rem; }
.entrada-cuerpo > ul { list-style: disc; }
.entrada-cuerpo > ol { list-style: decimal; }
.entrada-cuerpo > ul li,
.entrada-cuerpo > ol li { margin-bottom: .35rem; }
.entrada-cuerpo a { color: var(--dum-primary, #081c76); text-decoration: underline; }
.entrada-cuerpo blockquote {
    border-left: 4px solid var(--dum-accent, #eeae00);
    padding-left: 1rem;
    margin: 1.2rem 0;
    font-style: italic;
    color: #4a4a52;
}
.entrada-cuerpo img { max-width: 100%; height: auto; }

/* Floating WhatsApp CTA */
.whatsapp-float {
    background-color: var(--dum-whatsapp, #081c76);
    box-shadow: 0 4px 18px rgba(8, 28, 118, 0.6);
    animation: whatsapp-glow 2s ease-in-out infinite;
}

@keyframes whatsapp-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(8, 28, 118, 0.6), 0 4px 18px rgba(8, 28, 118, 0.6);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(8, 28, 118, 0), 0 4px 18px rgba(8, 28, 118, 0.6);
    }
}

.whatsapp-float:hover {
    animation-play-state: paused;
    filter: brightness(1.12);
}

/* Floating social buttons: plain CSS so the color always renders */
.social-float-tiktok { background-color: #000000; }
.social-float-instagram { background-image: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); }

/* X (antes Twitter): su color de marca es el negro. Se le deja un filo claro
   para que no se confunda con el botón de TikTok, que va justo al lado. */
.social-float-x {
    background-color: #000000;
    border: 1px solid rgba(255, 255, 255, .25);
}