/* Theme Name: Alerta Nacional Child | Version: 1.5.0 (Alineación Perfecta) */

:root {
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', sans-serif;
    --font-typewriter: 'Special Elite', monospace;
    --color-primary: #111111; 
    --color-accent: #cc0000; 
    --color-border: #dddddd;
}

body { font-family: var(--font-sans) !important; color: var(--color-primary) !important; background-color: #f2f2f2 !important; }

/* ==========================================================================
   1. ALINEACIÓN MAESTRA (EL BLOQUE PERFECTO)
   ========================================================================== */
/* Obligamos a la barra superior, la cabecera, el menú y la página a medir EXACTAMENTE lo mismo */
.alerta-top-bar, #masthead, #site-navigation, #page {
    max-width: 1140px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}
#page { background-color: #ffffff !important; box-shadow: 0 0 15px rgba(0,0,0,0.05); }

/* ==========================================================================
   2. CABECERA Y MANCHETA
   ========================================================================== */
.alerta-top-bar { background-color: #ffffff !important; border-bottom: 1px solid var(--color-border) !important; font-size: 11px !important; padding: 8px 20px !important; color: #555 !important; text-transform: uppercase !important; }
.inside-top-bar { display: flex !important; justify-content: space-between !important; align-items: center !important; }

#masthead { background-color: #ffffff !important; padding: 35px 20px 25px 20px !important; border-bottom: none !important; }
.main-title { text-align: center !important; margin: 0 !important; }
.main-title a { display: block !important; font-family: var(--font-typewriter) !important; font-size: 56px !important; text-transform: uppercase !important; color: var(--color-primary) !important; text-decoration: none !important; line-height: 1 !important; letter-spacing: 0.05em !important; }
.large-init { font-size: 1.25em !important; vertical-align: middle !important; }

/* ==========================================================================
   3. MENÚ: CENTRADO EXACTO CON BUSCADOR FLOTANTE
   ========================================================================== */
#site-navigation { background-color: #ffffff !important; border-top: 1px solid var(--color-border) !important; border-bottom: 1px solid var(--color-border) !important; margin-bottom: 0 !important; }
#site-navigation .inside-navigation { 
    display: flex !important; 
    justify-content: center !important; /* Centra el menú perfectamente */
    align-items: center !important; 
    position: relative !important; /* Vital para que el buscador flote a la derecha */
    padding: 0 20px !important; 
    min-height: 45px !important;
}
#site-navigation .main-nav { width: auto !important; }
#site-navigation .main-nav > ul { display: flex !important; align-items: center !important; margin: 0 !important; }

#site-navigation .main-nav ul li a { 
    font-family: var(--font-sans) !important; font-weight: 600 !important; 
    text-transform: uppercase !important; font-size: 11px !important; 
    color: var(--color-primary) !important; padding: 12px 10px !important; 
    background: transparent !important; line-height: 1 !important;
}
#site-navigation .main-nav ul li:hover > a { color: var(--color-accent) !important; }

/* Submenús Blancos */
#site-navigation .main-nav ul ul { background-color: #ffffff !important; border: 1px solid var(--color-border) !important; border-top: 2px solid var(--color-primary) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important; padding: 0 !important; }
#site-navigation .main-nav ul ul li { border-bottom: 1px solid #f2f2f2 !important; }
#site-navigation .main-nav ul ul li a { padding: 12px 18px !important; font-size: 11px !important; text-align: left !important; color: var(--color-primary) !important; }

/* Buscador Animado (Posición Absoluta a la derecha) */
.alerta-nav-search { position: absolute !important; right: 20px !important; top: 50% !important; transform: translateY(-50%) !important; }
.alerta-nav-search form { display: flex; align-items: center; border-bottom: 1px solid #ccc; transition: all 0.3s ease; }
.alerta-nav-search input { border: none !important; background: transparent !important; color: var(--color-primary) !important; font-family: var(--font-sans); font-size: 10px; text-transform: uppercase; padding: 4px 0; width: 60px; transition: width 0.4s ease; outline: none; }
.alerta-nav-search input:focus { width: 120px; border-bottom: 1px solid var(--color-accent); }
.alerta-nav-search button { background: transparent !important; border: none !important; color: var(--color-primary) !important; cursor: pointer; padding: 4px; display: flex; }

/* ==========================================================================
   4. TÍTULOS, CINTILLOS Y PORTADA
   ========================================================================== */
h1.entry-title, h2.entry-title, .entry-title, .entry-title a { color: var(--color-primary) !important; font-family: var(--font-serif) !important; font-weight: 700 !important; text-decoration: none !important; line-height: 1.15 !important; }
.entry-title a:hover { color: var(--color-accent) !important; }
.alerta-kicker { display: inline-block !important; font-family: var(--font-sans) !important; font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase !important; color: var(--color-accent) !important; margin-bottom: 8px !important; letter-spacing: 0.1em !important; border-bottom: 1px solid var(--color-accent); padding-bottom: 2px; }

/* Rejilla Principal */
body.blog .site-main { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 30px 40px !important; padding: 20px !important; }

/* Primera Noticia (Apertura) */
body.blog .site-main article:nth-of-type(1) { grid-column: 1 / -1 !important; border-top: 4px solid var(--color-primary) !important; border-bottom: 4px double var(--color-border) !important; padding-top: 25px !important; padding-bottom: 35px !important; margin-bottom: 10px !important; }
body.blog .site-main article:nth-of-type(1) .inside-article { display: flex !important; flex-direction: column !important; }
body.blog .site-main article:nth-of-type(1) .post-image { order: 1 !important; margin: 0 0 20px 0 !important; width: 100% !important; text-align: center; }
body.blog .site-main article:nth-of-type(1) .post-image img { width: 100% !important; height: auto !important; max-height: 600px !important; object-fit: cover !important; }
body.blog .site-main article:nth-of-type(1) .entry-header { order: 2 !important; margin-bottom: 15px !important; }
body.blog .site-main article:nth-of-type(1) .entry-title { font-size: 44px !important; margin-bottom: 15px !important; letter-spacing: -0.01em; line-height: 1.1 !important; }
body.blog .site-main article:nth-of-type(1) .entry-summary { order: 3 !important; }
body.blog .site-main article:nth-of-type(1) .entry-meta { order: 4 !important; margin-top: 15px !important; padding-top: 10px !important; border-top: 1px dashed var(--color-border); }

/* Entradillas Justificadas */
body.blog .site-main .entry-summary p { font-family: var(--font-serif) !important; font-size: 18px !important; color: #333333 !important; line-height: 1.5 !important; text-align: justify !important; hyphens: auto !important; }

/* Noticias Secundarias */
body.blog .site-main article:not(:nth-of-type(1)) { border-bottom: 1px solid var(--color-border) !important; padding-bottom: 25px !important; display: flex !important; flex-direction: column !important; }
body.blog .site-main article:not(:nth-of-type(1)) .entry-header { order: 1 !important; }
body.blog .site-main article:not(:nth-of-type(1)) .post-image { order: 2 !important; margin-top: 15px !important; margin-bottom: 15px !important; }
body.blog .site-main article:not(:nth-of-type(1)) .entry-summary { order: 3 !important; }
body.blog .site-main article:not(:nth-of-type(1)) .entry-title { font-size: 26px !important; line-height: 1.25 !important; margin-bottom: 10px !important; }
body.blog .site-main article:not(:nth-of-type(1)) .entry-meta { order: 4 !important; margin-top: 15px !important; padding-top: 10px !important; border-top: 1px dashed var(--color-border); }

/* Sidebar (Río de noticias) */
.alerta-sidebar-secciones { display: flex; flex-direction: column; gap: 18px; background: #fdfdfd; padding: 15px; border: 1px solid var(--color-border); }
.sidebar-item-seccion { border-bottom: 1px solid #eeeeee; padding-bottom: 12px; }
.sidebar-item-seccion:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-cat-kicker { display: block; font-size: 10px !important; text-transform: uppercase !important; color: var(--color-accent) !important; font-weight: 800 !important; letter-spacing: 0.08em; margin-bottom: 6px; }
.sidebar-item-enlace { display: flex; text-decoration: none !important; gap: 12px; align-items: flex-start; }
.sidebar-img { width: 75px !important; height: 75px !important; object-fit: cover !important; flex-shrink: 0; border-radius: 2px; }
.sidebar-title { font-family: var(--font-sans) !important; font-size: 14px !important; font-weight: 700 !important; color: var(--color-primary) !important; line-height: 1.35 !important; margin: 0 !important; }
.sidebar-item-enlace:hover .sidebar-title { color: var(--color-accent) !important; }

/* Ocultar Paginación */
body.blog .paging-navigation, body.archive .paging-navigation, .nav-links, .page-numbers { display: none !important; }

/* ==========================================================================
   5. ESTRUCTURA 3 COLUMNAS (ESTILO WALL STREET JOURNAL)
   ========================================================================== */
@media (min-width: 1025px) {
    .site-content { 
        display: flex !important; 
        justify-content: space-between; 
        padding-top: 25px !important;
    }
    /* Columna Central (Noticias Principales) */
    #primary { 
        width: 50% !important; 
        padding: 0 35px !important; 
        border-left: 1px solid var(--color-border); 
        border-right: 1px solid var(--color-border); 
    }
    /* Columna Izquierda (Opinión/Análisis) */
    #left-sidebar { 
        width: 22% !important; 
        padding-right: 25px; 
    }
    /* Columna Derecha (Última Hora/Sucesos) */
    #right-sidebar { 
        width: 28% !important; 
        padding-left: 25px; 
    }
}

/* ==========================================================================
   6. LISTADOS DE SOLO TEXTO (SERIEDAD Y DENSIDAD)
   ========================================================================== */
.sidebar-header-kicker { font-family: var(--font-sans) !important; font-size: 14px !important; font-weight: 800 !important; color: var(--color-accent) !important; text-transform: uppercase !important; letter-spacing: 0.1em; border-bottom: 2px solid var(--color-primary); padding-bottom: 8px; margin-bottom: 20px !important; }
.sidebar-texto-item { border-bottom: 1px solid #eeeeee; padding-bottom: 15px; margin-bottom: 15px; }
.sidebar-texto-item:last-child { border-bottom: none; }
.sidebar-texto-title { font-family: var(--font-serif) !important; font-size: 17px !important; font-weight: 700 !important; color: var(--color-primary) !important; line-height: 1.35 !important; margin: 0 0 8px 0 !important; }
.sidebar-texto-item a { text-decoration: none !important; }
.sidebar-texto-item a:hover .sidebar-texto-title { color: var(--color-accent) !important; }
.sidebar-texto-meta { font-family: var(--font-sans); font-size: 10px; color: #777; text-transform: uppercase; letter-spacing: 0.05em; }

/* ==========================================================================
   7. GUILLOTINA DE IMÁGENES SECUNDARIAS (ESTANDARIZACIÓN)
   ========================================================================== */
body.blog .site-main article:not(:nth-of-type(1)) .post-image img {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important; /* Recorte panorámico exacto para todas */
    object-fit: cover !important;
    border-radius: 2px;
}

/* ==========================================================================
   CORRECCIONES WALL STREET JOURNAL (COLOR Y MÁRGENES)
   ========================================================================== */
/* Forzar titulares laterales a negro estricto */
.sidebar-texto-title { 
    color: var(--color-primary) !important; 
}
.sidebar-texto-item a, 
.sidebar-texto-item a:visited, 
.sidebar-texto-item a:focus { 
    color: var(--color-primary) !important; 
    text-decoration: none !important; 
}
.sidebar-texto-item a:hover .sidebar-texto-title { 
    color: var(--color-accent) !important; 
}

/* Limpiar la línea gruesa superior en la primera noticia central */
body.blog .site-main article:nth-of-type(1) {
    border-top: none !important;
    padding-top: 0 !important;
}

/* ==========================================================================
   8. ADAPTABILIDAD MÓVIL (RESPONSIVE FIX PARA SMARTPHONES)
   ========================================================================== */
@media (max-width: 1024px) {
    /* 1. Reducir la mancheta para que "ALERTA NACIONAL" quepa perfecta en móvil */
    .main-title a {
        font-size: 26px !important;
        letter-spacing: 0.02em !important;
        line-height: 1.1 !important;
    }

    /* 2. Devolver el contenedor del menú al comportamiento nativo en móviles */
    #site-navigation .inside-navigation {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: relative !important;
        padding: 0 15px !important;
    }

    /* 3. Reajustar el buscador para que no estorbe en pantallas estrechas */
    .alerta-nav-search {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 5px auto 10px auto !important;
    }

    /* 4. Neutralizar las 3 columnas en móvil para que baje en una sola columna legible */
    .site-content {
        flex-direction: column !important;
    }
    #primary, #left-sidebar, #right-sidebar {
        width: 100% !important;
        padding: 0 15px !important;
        border: none !important;
    }
}

/* ==========================================================================
   9. CORRECCIÓN ABSOLUTA: SCROLL HORIZONTAL EN MÓVIL
   ========================================================================== */
@media (max-width: 1024px) {
    /* 1. Cortar de raíz el desbordamiento en todo el documento */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* 2. El culpable nº1: La rejilla de noticias. Forzamos 1 sola columna en móvil */
    body.blog .site-main {
        display: flex !important;
        flex-direction: column !important;
        padding: 15px !important;
        gap: 20px !important;
    }

    /* 3. El culpable nº2: El Menú. Permitimos que los enlaces bajen de línea si no caben */
    #site-navigation .inside-navigation {
        flex-wrap: wrap !important;
        padding: 10px 5px !important;
    }
    #site-navigation .main-nav {
        width: 100% !important;
    }
    #site-navigation .main-nav > ul {
        flex-wrap: wrap !important; /* Esta es la orden mágica que arregla el menú */
        justify-content: center !important;
        row-gap: 5px !important;
    }
    
    /* 4. Ajuste fino del buscador para que quede centrado debajo de los enlaces */
    .alerta-nav-search {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        justify-content: center !important;
        margin-top: 10px !important;
    }
}

/* ==========================================================================
   10. AJUSTE FINO: MANCHETA MÓVIL MÁS GRANDE Y ARROPADA
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Reducimos el espacio en blanco gigante alrededor del titular */
    #masthead {
        padding: 20px 10px 15px 10px !important; 
    }
    
    /* 2. El titular fluido: crecerá hasta ocupar el ancho de la pantalla sin romperse */
    .main-title a {
        font-size: clamp(32px, 10vw, 48px) !important; 
        line-height: 1.1 !important;
        letter-spacing: 0.01em !important;
    }
}

/* ==========================================================================
   11. MAQUETACIÓN INTERIOR NOTICIA (SINGLE POST)
   ========================================================================== */
/* 1. Desactivar el formato de portada y usar un lienzo de lectura amplio (72% / 28%) */
@media (min-width: 1025px) {
    body.single #primary {
        width: 72% !important;
        padding: 0 50px 0 0 !important; /* Espacio de respiro por la derecha */
        border-left: none !important;   /* Borramos la línea fantasma de la izquierda */
        border-right: 1px solid var(--color-border) !important;
    }
    body.single #right-sidebar {
        width: 28% !important;
        padding-left: 30px !important;
    }
}

/* 2. Estilo de la Foto Principal */
body.single .featured-image {
    margin-bottom: 30px !important;
}
body.single .featured-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 2px;
}

/* 3. Titular de gran impacto */
body.single .entry-title {
    font-size: 52px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
    margin-top: 15px !important;
    margin-bottom: 20px !important;
}

/* 4. Línea de Meta (Fecha y Autor) - Estilo editorial clásico */
body.single .entry-meta {
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    color: #666 !important;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 12px 0 !important;
    margin-bottom: 40px !important;
}

/* 5. Tipografía de lectura (Serif) y espaciados */
body.single .entry-content {
    font-family: var(--font-serif) !important; /* Fuente de libro/periódico */
    font-size: 21px !important;
    line-height: 1.65 !important;
    color: #1a1a1a !important; /* Un negro suave que no cansa la vista */
    max-width: 800px; /* Evita que las líneas sean infinitas */
}
body.single .entry-content p {
    margin-bottom: 1.6em !important;
}

/* 6. El detalle de oro: El primer párrafo (entradilla) más grande */
body.single .entry-content p:first-of-type {
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: var(--color-primary) !important;
}

/* ==========================================================================
   12. JUSTIFICACIÓN EDITORIAL Y CORTASÍLABAS
   ========================================================================== */
body.single .entry-content p,
body.single .entry-content blockquote {
    text-align: justify !important;
    hyphens: auto !important;         /* Separa sílabas con guiones automáticamente */
    -webkit-hyphens: auto !important; /* Soporte para Chrome/Safari */
    -ms-hyphens: auto !important;     /* Soporte para Edge */
    word-break: break-word !important;
}

/* Ajuste fino visual para las citas (blockquotes) */
body.single .entry-content blockquote {
    border-left: 4px solid var(--color-primary) !important;
    padding-left: 20px !important;
    margin-left: 0 !important;
    font-style: italic !important;
    color: #444 !important;
}

/* ==========================================================================
   13. QUIOSCO INFERIOR Y ESPACIOS PUBLICITARIOS
   ========================================================================== */
.quiosco-contenedor {
    background-color: #fdfdfd;
    border-top: 4px solid var(--color-primary); /* Línea gruesa que separa de la zona superior */
    padding: 40px 20px;
    margin-top: 40px;
}
.quiosco-inner {
    max-width: 1140px; /* Mantenemos la alineación maestra de toda la web */
    margin: 0 auto;
}
.quiosco-seccion {
    margin-bottom: 45px;
}
.quiosco-kicker {
    font-family: var(--font-sans) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--color-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em;
    border-top: 2px solid var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    padding: 8px 0;
    margin-bottom: 25px;
}
.quiosco-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Columnas perfectas */
    gap: 25px;
}
.quiosco-item a { text-decoration: none !important; }
.quiosco-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important; /* Guillotina fotográfica */
    object-fit: cover !important;
    margin-bottom: 12px;
    border-radius: 2px;
}
.quiosco-title {
    font-family: var(--font-serif) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--color-primary) !important;
    margin: 0 !important;
}
.quiosco-item a:hover .quiosco-title { color: var(--color-accent) !important; }

/* Espacio de Publicidad (Placeholder) */
.alerta-espacio-publi {
    display: flex; justify-content: center; align-items: center;
    background: #f0f0f0; color: #999;
    font-family: var(--font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
    margin: 0 auto 45px auto;
    max-width: 970px; min-height: 90px;
    border: 1px dashed #ccc;
}

/* Adaptabilidad Móvil del Quiosco */
@media (max-width: 1024px) {
    .quiosco-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .quiosco-grid { grid-template-columns: 1fr; }
    .alerta-espacio-publi { min-height: 250px; max-width: 300px; } /* Banner formato móvil */
}

/* ==========================================================================
   14. CORRECCIÓN COLUMNA CENTRAL: NOTICIAS SECUNDARIAS APILADAS
   ========================================================================== */
/* Desactivamos la cuadrícula de 2 columnas en el bloque central principal */
body.blog .site-main { 
    display: flex !important; 
    flex-direction: column !important; /* Apila todo verticalmente */
    gap: 30px !important; 
}

/* Rediseño de las noticias secundarias (Debajo de la principal) */
body.blog .site-main article:not(:nth-of-type(1)) {
    display: flex !important;
    flex-direction: column !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding-bottom: 25px !important;
}

/* La imagen secundaria (Guillotina) ahora ocupa todo el ancho de su bloque */
body.blog .site-main article:not(:nth-of-type(1)) .post-image {
    width: 100% !important;
    margin: 15px 0 !important;
}
body.blog .site-main article:not(:nth-of-type(1)) .post-image img {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
}

/* Tipografía de las noticias secundarias: más contenida y legible */
body.blog .site-main article:not(:nth-of-type(1)) .entry-title {
    font-size: 28px !important; /* Un tamaño serio pero menor que la principal */
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
}

/* El texto de la entradilla vuelve a ser legible (sin estiramientos feos) */
body.blog .site-main article:not(:nth-of-type(1)) .entry-summary p {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* ==========================================================================
   15. FIRMAS DE OPINIÓN (ESTILO RETRATO/HEDCUT)
   ========================================================================== */
.alerta-sidebar-firmas {
    margin-bottom: 40px;
}
.firma-item {
    display: flex;
    align-items: flex-start; /* Alinea foto y texto arriba */
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #dddddd;
}
.firma-item:last-child {
    border-bottom: none;
}
.firma-avatar {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
}
.firma-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%; /* Hace que el retrato sea un círculo perfecto */
    filter: grayscale(100%) contrast(1.2); /* Forzamos un tono serio, cuasi-dibujo */
    border: 1px solid var(--color-border);
}
.firma-texto {
    display: flex;
    flex-direction: column;
}
.firma-autor {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.firma-titulo {
    font-family: var(--font-serif) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-style: italic !important; /* Toque clásico de opinión */
    line-height: 1.3 !important;
    color: var(--color-primary) !important;
    margin: 0 !important;
}
.firma-texto a { text-decoration: none !important; }
.firma-texto a:hover .firma-titulo { color: var(--color-accent) !important; }

/* ==========================================================================
   16. BOTONES DE COMPARTIR (ELEGANCIA MONOCROMÁTICA - ADDTOANY)
   ========================================================================== */
/* Contenedor general: espacio limpio y líneas de separación */
.addtoany_share_save_container {
    margin: 30px 0 !important;
    padding: 15px 0 !important;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    text-align: left; /* Alineado a la izquierda con el texto */
}

/* Forzar todos los iconos a "Negro Tinta" y quitar fondos de marca */
.addtoany_share_save_container .a2a_svg {
    background-color: transparent !important;
    fill: #1a1a1a !important; /* Nuestro color tinta */
    transform: scale(0.9); /* Ligeramente más pequeños para no gritar */
    transition: all 0.2s ease-in-out !important;
}

/* Efecto al pasar el ratón (Hover): Cambian sutilmente a nuestro rojo corporativo */
.addtoany_share_save_container a:hover .a2a_svg {
    fill: var(--color-accent) !important;
    transform: scale(1.05);
}

/* Ocultar el texto de "Compartir" que ensucia visualmente */
.addtoany_header {
    display: none !important;
}

/* ==========================================================================
   17. CORRECCIÓN: VISIBILIDAD DE LOS ICONOS DE COMPARTIR
   ========================================================================== */
.addtoany_share_save_container .a2a_svg {
    background-color: #f4f4f4 !important; /* Un gris muy suave y elegante de fondo */
    fill: #222222 !important;            /* El icono interior en negro tinta fuerte */
    border-radius: 2px !important;       /* Un toque sutil cuadrado, muy periodístico */
    padding: 6px !important;             /* Espaciado interno para que respiren */
    width: 32px !important;
    height: 32px !important;
    box-sizing: content-box !important;
}

/* Efecto al pasar el ratón (Hover) */
.addtoany_share_save_container a:hover .a2a_svg {
    background-color: var(--color-primary) !important;
    fill: #ffffff !important;            /* Icono blanco sobre fondo oscuro al pasar el ratón */
}

/* ==========================================================================
   17.1. REFUERZO DE VISIBILIDAD: BOTONES DE COMPARTIR
   ========================================================================== */
.addtoany_share_save_container .a2a_svg {
    background-color: #e2e2e2 !important; /* Gris más visible por defecto */
    fill: #111111 !important;            /* Tinta negra más profunda */
    border: 1px solid #cccccc !important;  /* Borde sutil y limpio */
    border-radius: 3px !important;       
    padding: 6px !important;             
    width: 32px !important;
    height: 32px !important;
    box-sizing: content-box !important;
}

/* Efecto al pasar el ratón (Hover) */
.addtoany_share_save_container a:hover .a2a_svg {
    background-color: var(--color-primary) !important;
    fill: #ffffff !important;            
    border-color: var(--color-primary) !important;
}

/* ==========================================================================
   18. DISCRECIÓN EDITORIAL: BANNER DE COOKIES
   ========================================================================== */
#cookie-notice {
    background-color: #1a1a1a !important; /* Fondo negro pizarra */
    color: #ffffff !important;           /* Texto blanco */
    padding: 20px !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    text-align: center !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
}

#cookie-notice a {
    color: #ffffff !important;
    text-decoration: underline !important;
}

#cn-accept-cookie {
    background-color: var(--color-primary) !important; /* Nuestro rojo corporativo */
    color: #ffffff !important;
    padding: 8px 20px !important;
    border-radius: 2px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    margin-left: 15px !important;
}
#cn-accept-cookie:hover {
    background-color: #000000 !important;
    border: 1px solid var(--color-primary) !important;
}