/* ==========================================================
   PORTAL DE NOTICIAS LA REGIÓN - ESTILOS ULTRA-OPTIMIZADOS
   ========================================================== */

:root {
    --color-primario: #0B6623;
    --color-secundario: #D4AF37;
    --color-fondo: #F8F9FA;
    --color-tarjeta: #FFFFFF;
    --color-texto: #1A1A1A;
    --color-texto-suave: #555555;
    --color-borde: #E5E7EB;
    --color-alerta: #B30006;
    --fuente-titulos: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fuente-texto: Georgia, Cambria, "Times New Roman", Times, serif;
    --ancho-maximo: 1200px;
    --radio-borde: 8px;
    --sombra-suave: 0 2px 8px rgba(0,0,0,0.06);
    --sombra-hover: 0 8px 16px rgba(0,0,0,0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-titulos);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-primario);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.contenedor {
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding: 0 16px;
}

/* ==================== BARRA SUPERIOR ==================== */
.barra-utilidades {
    background: #111827;
    color: #9CA3AF;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid #1F2937;
}

.utilidades-contenido {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fecha-hoy {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selector-regiones {
    display: flex;
    gap: 12px;
}

.selector-regiones a {
    color: #D1D5DB;
    padding: 2px 6px;
    border-radius: 4px;
}

.selector-regiones a:hover,
.selector-regiones a.activo {
    background: var(--color-primario);
    color: #FFF;
}

/* ==================== HEADER PRINCIPAL ==================== */
.cabecera-principal {
    background: #FFFFFF;
    border-bottom: 2px solid var(--color-borde);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.cabecera-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

.logo-sitio {
    display: flex;
    align-items: center;
}

.enlace-logo-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.logo-imagen-brand {
    height: 48px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

.logo-region-nombre {
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8E191A;
    border-left: 2px solid #D1D5DB;
    padding-left: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.etiqueta-region {
    background: var(--color-primario);
    color: #FFFFFF;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Navegación */
.nav-principal {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-principal a {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    padding: 6px 0;
    position: relative;
}

.nav-principal a.activo,
.nav-principal a:hover {
    color: var(--color-primario);
}

.nav-principal a.activo::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-primario);
}

.btn-menu-movil {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #111827;
}

/* Sub-menú de municipios locales */
.subbarra-municipios {
    background: #F3F4F6;
    border-bottom: 1px solid var(--color-borde);
    padding: 8px 0;
    overflow-x: auto;
    white-space: nowrap;
}

.lista-municipios {
    display: flex;
    gap: 16px;
    align-items: center;
}

.lista-municipios span {
    font-size: 12px;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
}

.lista-municipios a {
    font-size: 13px;
    color: #4B5563;
    font-weight: 500;
}

.lista-municipios a:hover {
    color: var(--color-primario);
}

/* ==================== ESTRUCTURA PRINCIPAL ==================== */
.contenido-pagina {
    padding: 24px 0 48px;
}

.layout-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
}

/* ==================== SECCIÓN HERO / DESTACADAS ==================== */
.seccion-hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 36px;
}

.hero-principal {
    position: relative;
    border-radius: var(--radio-borde);
    overflow: hidden;
    background: #000;
    min-height: 380px;
}

.hero-principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: transform 0.3s ease;
}

.hero-principal:hover img {
    transform: scale(1.03);
}

.hero-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
    color: #FFF;
}

.hero-categoria {
    display: inline-block;
    background: var(--color-primario);
    color: #FFF;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.hero-titulo {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 8px;
}

.hero-meta {
    font-size: 12px;
    color: #D1D5DB;
}

/* Columna lateral de destacadas */
.hero-secundarias {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tarjeta-secundaria {
    background: var(--color-tarjeta);
    border-radius: var(--radio-borde);
    padding: 16px;
    border: 1px solid var(--color-borde);
    box-shadow: var(--sombra-suave);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tarjeta-secundaria .cat {
    color: var(--color-primario);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.tarjeta-secundaria h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: #111827;
}

/* ==================== MALLA DE NOTICIAS (GRID) ==================== */
.titulo-seccion {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 2px solid var(--color-primario);
    padding-bottom: 8px;
}

.grid-noticias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 36px;
}

.tarjeta-noticia {
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.tarjeta-noticia:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-hover);
}

.tarjeta-imagen {
    position: relative;
    width: 100%;
    height: 180px;
    background: #E5E7EB;
}

.tarjeta-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tarjeta-cuerpo {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.tarjeta-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primario);
    margin-bottom: 6px;
}

.tarjeta-titulo {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    line-height: 1.35;
    margin-bottom: 8px;
}

.tarjeta-resumen {
    font-size: 13px;
    color: var(--color-texto-suave);
    line-height: 1.5;
    margin-bottom: 12px;
    flex-grow: 1;
}

.tarjeta-fecha {
    font-size: 11px;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ==================== BARRA LATERAL (SIDEBAR) ==================== */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.widget-sidebar {
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: 20px;
    box-shadow: var(--sombra-suave);
}

.widget-titulo {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
    border-bottom: 2px solid var(--color-primario);
    padding-bottom: 8px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lista-mas-leidas {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.item-mas-leida {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.numero-ranking {
    font-size: 24px;
    font-weight: 900;
    color: var(--color-primario);
    line-height: 1;
    min-width: 24px;
}

.info-ranking h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1F2937;
    line-height: 1.35;
}

.espacio-publicidad {
    background: #F3F4F6;
    border: 1px dashed #D1D5DB;
    border-radius: var(--radio-borde);
    padding: 24px 12px;
    text-align: center;
    font-size: 11px;
    color: #9CA3AF;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==================== VISTA DETALLE DE NOTICIA ==================== */
.migas-de-pan {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6B7280;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.articulo-noticia {
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: 32px;
    box-shadow: var(--sombra-suave);
}

.noticia-categoria-badge {
    display: inline-block;
    background: var(--color-primario);
    color: #FFF;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.noticia-titulo-h1 {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.25;
    color: #111827;
    margin-bottom: 16px;
}

.noticia-meta-datos {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: #6B7280;
    border-top: 1px solid var(--color-borde);
    border-bottom: 1px solid var(--color-borde);
    padding: 10px 0;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.noticia-imagen-destacada {
    margin-bottom: 24px;
    border-radius: var(--radio-borde);
    overflow: hidden;
}

.noticia-imagen-destacada img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

.pie-de-foto {
    font-size: 12px;
    color: #6B7280;
    margin-top: 6px;
    font-style: italic;
    text-align: right;
}

.noticia-resumen-destacado {
    font-size: 19px;
    font-weight: 500;
    line-height: 1.5;
    color: #374151;
    margin-bottom: 24px;
    border-left: 4px solid var(--color-primario);
    padding-left: 16px;
    font-style: italic;
}

.noticia-cuerpo-html {
    font-family: var(--fuente-texto);
    font-size: 18px;
    line-height: 1.75;
    color: #2D3748;
}

.noticia-cuerpo-html p {
    margin-bottom: 20px;
}

.noticia-cuerpo-html h2 {
    font-family: var(--fuente-titulos);
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin: 32px 0 14px;
}

.noticia-cuerpo-html blockquote {
    border-left: 4px solid var(--color-primario);
    padding: 12px 20px;
    margin: 24px 0;
    background: #F9FAFB;
    font-style: italic;
    color: #4B5563;
}

/* ==================== FOOTER ==================== */
.pie-pagina {
    background: #111827;
    color: #D1D5DB;
    padding: 48px 0 24px;
    margin-top: 60px;
}

.footer-columnas {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}

.footer-col h3 {
    color: #FFF;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-col ul a {
    color: #9CA3AF;
    font-size: 14px;
}

.footer-col ul a:hover {
    color: #FFF;
}

.footer-bottom {
    border-top: 1px solid #1F2937;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #6B7280;
}

/* ==================== RESPONSIVE (MÓVIL Y TABLET) ==================== */
@media (max-width: 900px) {
    .layout-grid {
        grid-template-columns: 1fr;
    }
    .seccion-hero {
        grid-template-columns: 1fr;
    }
    .footer-columnas {
        grid-template-columns: 1fr;
    }
    .nav-principal {
        display: none;
    }
    .btn-menu-movil {
        display: block;
    }
    .noticia-titulo-h1 {
        font-size: 24px;
    }
    .noticia-cuerpo-html {
        font-size: 16px;
    }
}