/* ==========================================================================
   1. CONFIGURACIÓN DE FUENTES Y VARIABLES
   ========================================================================== */
:root {
    --primary-red: #D90429;
    --primary-dark: #1D1D1D;
    --bg-body: #FFFFFF;
    --bg-card: #F8F9FA;
    --text-main: #212529;
    --text-muted: #6c757d;
    --border-color: #dee2e6;
    --white: #ffffff;
}

[data-theme="dark"] {
    --primary-red: #EF233C;
    --primary-dark: #000000;
    --bg-body: #121212;
    --bg-card: #1E1E1E;
    --text-main: #E0E0E0;
    --text-muted: #B0B0B0;
    --border-color: #333333;
}

/* ==========================================================================
   2. ESTILOS GENERALES
   ========================================================================== */
body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: 'Roboto', sans-serif;
    transition: background-color 0.3s, color 0.3s;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, .font-oswald {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
}

/* ==========================================================================
   3. HERO / CARRUSEL DIVIDIDO
   ========================================================================== */
.hero-split-container {
    height: 60vh;
    min-height: 450px;
    display: flex;
    align-items: stretch;
    background-color: var(--bg-card);
    overflow: hidden;
    position: relative;
}

.hero-content-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5% 8%;
    z-index: 20; 
    background-color: var(--bg-card);
}

.hero-image-side {
    flex: 1;
    position: relative;
    z-index: 10;
}

.hero-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* DEGRADADO INTELIGENTE */
.hero-image-side::after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 15;
}

.hero-split-container:not(.flex-row-reverse) .hero-image-side::after {
    left: 0;
    background: linear-gradient(to right, var(--bg-card), transparent);
}

.hero-split-container.flex-row-reverse .hero-image-side::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-card), transparent);
}

/* Controles del carrusel */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    z-index: 30;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: var(--primary-red);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* --- AJUSTES DINÁMICOS DEL BOTÓN (HOVER INVERTIDO) --- */

/* 1. Texto superior */
.hero-content-side h5.text-danger {
    color: var(--primary-red) !important;
}

/* 2. Botón Estado Normal: Fondo paleta, Borde Negro */
.hero-content-side .btn-danger {
    background-color: var(--primary-red) !important;
    border: 2px solid #000000 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 3. HOVER INVERTIDO: Fondo blanco, texto y borde con color de la paleta */
.hero-content-side .btn-danger:hover {
    background-color: #ffffff !important; /* Fondo cambia a blanco */
    color: var(--primary-red) !important;     /* Texto adopta color paleta */
    border-color: var(--primary-red) !important; /* Borde adopta color paleta */
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
}

/* 4. Modo Oscuro Títulos */
[data-theme="dark"] .hero-content-side .text-main {
    color: #ffffff !important;
}
/* ==========================================================================
   4. SERVICIOS (TARJETAS FLOTANTES) - CORRECCIÓN HOVER
   ========================================================================== */
.feature-section {
    position: relative;
    z-index: 30;
    margin-top: -50px;
}

.feature-card {
    background: var(--bg-card);
    padding: 35px 25px;
    border: 1px solid var(--border-color);
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    border-bottom: 4px solid transparent;
}

/* EL CÍRCULO: Gris neutro por defecto */
.feature-icon-wrapper {
    width: 80px;
    height: 80px;
    background-color: #ebeaea !important; /* Gris normal */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
}

/* EL ICONO: Color de la paleta por defecto */
.feature-icon {
    font-size: 2.5rem;
    color: var(--primary-red) !important; 
    transition: all 0.3s ease;
}

/* --- LOGICA DEL HOVER (Aquí corregimos el error) --- */

.feature-card:hover {
    transform: translateY(-10px);
    border-bottom: 5px solid var(--primary-red);
}

/* Al pasar el mouse, el círculo DEJA de ser gris y toma la paleta */
.feature-card:hover .feature-icon-wrapper {
    background-color: var(--primary-red) !important; 
}

/* Al pasar el mouse, el icono se vuelve BLANCO para resaltar sobre la paleta */
.feature-card:hover .feature-icon {
    color: #FFFFFF !important;
}

/* Ajustes para Modo Oscuro */
[data-theme="dark"] .feature-icon-wrapper {
    background-color: #333333 !important; /* Gris oscuro en modo noche */
}

[data-theme="dark"] .feature-card p,
[data-theme="dark"] .feature-card .text-muted {
    color: #FFFFFF !important;
}
/* ==========================================================================
   5. SECCIÓN DE NOTICIAS (Sincronizada con Paleta)
   ========================================================================== */
.section-title h2 { font-size: 2.2rem; }

/* La línea separatoria ahora sigue la paleta */
.separator-line {
    width: 50px;
    height: 4px;
    background-color: var(--primary-red) !important;
    margin: 15px auto;
    transition: background-color 0.3s ease;
}

[data-theme="dark"] section.bg-white {
    background-color: var(--bg-body) !important;
}

[data-theme="dark"] .section-title h2 {
    color: #FFFFFF !important;
}

.hover-lift.card,
[data-theme="dark"] .hover-lift.card {
    background-color: #FFFFFF !important;
    transition: all 0.3s ease;
    border-bottom: 4px solid transparent !important;
}

[data-theme="dark"] .hover-lift.card .card-title a,
[data-theme="dark"] .hover-lift.card h4,
[data-theme="dark"] .hover-lift.card .card-text {
    color: #212529 !important;
}

[data-theme="dark"] .card-footer.bg-white {
    background-color: #FFFFFF !important;
}

/* El borde inferior al hacer hover en la card */
.hover-lift.card:hover {
    border-bottom: 4px solid var(--primary-red) !important;
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}

/* Badge de fecha y Leer Más */
.date-badge, .text-danger {
    background-color: var(--primary-red) !important;
}

.text-danger {
    background: none !important; /* Para el enlace 'Leer Más' */
    color: var(--primary-red) !important;
}

.date-badge {
    position: absolute;
    top: 15px; left: 15px;
    color: white;
    padding: 8px 12px;
    text-align: center;
    z-index: 5;
}

.date-badge .day { display: block; font-weight: 700; font-size: 1.2rem; line-height: 1; }
.date-badge .month { font-size: 0.75rem; text-transform: uppercase; }

/* Icono del extintor cuando no hay foto */
.placeholder-news i, .placeholder-news {
    color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
}

/* --- BOTÓN VER ARCHIVO --- */
.btn-outline-dark {
    color: #212529;
    border-color: #212529;
    transition: all 0.3s ease;
}

[data-theme="dark"] .btn-outline-dark {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

.btn-outline-dark:hover,
[data-theme="dark"] .btn-outline-dark:hover {
    background-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    color: #FFFFFF !important;
}
/* ==========================================================================
   6. REDES SOCIALES (CORRECCIÓN LÍNEA BLANCA)
   ========================================================================== */
section.bg-dark {
    margin-bottom: 0 !important;
    padding-bottom: 3rem !important;
}

.social-card-v2, 
[data-theme="dark"] .social-card-v2 {
    background-color: #FFFFFF !important; 
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 12px;
    height: 600px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .social-card-v2 h5 {
    color: #212529 !important; 
}

.social-card-v2:hover {
    transform: translateY(-8px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.fb-border { border-top: 6px solid #1877F2 !important; }
.ig-border { border-top: 6px solid #E1306C !important; }
.tk-border { border-top: 6px solid #000000 !important; }

.social-embed-wrapper,
[data-theme="dark"] .social-embed-wrapper {
    flex-grow: 1;
    width: 100% !important;
    overflow-y: auto; 
    display: block;
    background-color: #FFFFFF !important; 
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.instagram-media, .tiktok-embed, iframe[id^="instagram-embed-"], 
.tiktok-embed iframe, .fb-page, .fb-page span, .fb-page iframe {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
/* Fuerza el color negro en el h2 específico de Redes Sociales */
[data-theme="dark"] .section-title h2.text-black,
.section-title h2.text-black {
    color: #000000 !important;
}
/* ==========================================================================
   7. HEADER, NAVEGACIÓN Y MENÚ MÓVIL
   ========================================================================== */
.header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.top-bar {
    background-color: var(--primary-dark);
    color: var(--white);
    font-size: 0.85rem;
    padding: 5px 0;
}

/* Solo añadimos esta regla para el texto que no se ve */
.top-bar .text-muted {
    color: var(--white) !important;
}

.navbar {
    background-color: var(--bg-card) !important; 
    border-bottom: 4px solid var(--primary-red);
    padding: 10px 0;
}

.navbar-toggler {
    border-color: var(--primary-red) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(217, 4, 41, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

[data-theme="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(239, 35, 60, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.nav-link {
    color: var(--text-main) !important;
    font-weight: 600;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

/* Ajuste: Color de la paleta al pasar el mouse por el menú */
.nav-link:hover {
    color: var(--primary-red) !important;
}

.user-access-link {
    width: 42px; height: 42px;
    background-color: var(--white) !important; 
    border: 1px solid var(--primary-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark) !important; 
    transition: all 0.3s ease;
    margin-left: 15px;
}

[data-theme="dark"] .user-access-link {
    background-color: var(--white) !important; 
    color: #000000 !important;
}

.user-access-link:hover {
    background-color: var(--primary-red) !important;
    color: var(--white) !important;
    transform: translateY(-2px);
}

/* Fuerza a la clase border-danger de la top-bar a usar la paleta */
.top-bar.border-danger {
    border-color: var(--primary-red) !important;
}

/* Opcional: Si quieres que también cambie cuando el mouse pasa por encima */
.top-bar.border-danger:hover {
    border-color: var(--primary-red) !important;
    filter: brightness(1.2);
}

/* ==========================================================================
   8. ESTACIONES Y DROPDOWNS (CORREGIDO)
   ========================================================================== */
.scrollable-menu { 
    max-height: 350px; 
    overflow-y: auto !important; 
    overflow-x: hidden;
    /* Estilo para Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--primary-red) transparent;
}

/* Estilo para Chrome, Edge y Safari (Scroll delgado y dinámico) */
.scrollable-menu::-webkit-scrollbar {
    width: 4px; /* Grosor muy fino */
}

.scrollable-menu::-webkit-scrollbar-track {
    background: transparent; /* Sin fondo para que sea más limpio */
}

.scrollable-menu::-webkit-scrollbar-thumb {
    background-color: var(--primary-red); /* Color de tu paleta */
    border-radius: 10px;
}

.navbar-nav {
    position: relative;
    z-index: 9999 !important;
}

.dropdown-menu {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color);
    z-index: 10000 !important;
    padding: 0.5rem 0; /* Espaciado interno mejorado */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Sombra suave para elegancia */
}

.dropdown-item { 
    color: var(--text-main) !important; 
    transition: all 0.2s ease;
}

.dropdown-item:hover { 
    background-color: var(--primary-red) !important; 
    color: var(--white) !important; 
}

/* Asegura que la clase show de Bootstrap sea respetada */
.dropdown-menu.show {
    display: block !important;
}
/* ==========================================================================
   9. TEMA, FOOTER Y RESPONSIVIDAD
   ========================================================================== */
footer {
    margin-top: 0 !important; /* Elimina espacio arriba del footer */
}

.theme-switch-wrapper {
    position: fixed;
    bottom: 25px; left: 25px;
    z-index: 9999;
}

.btn-theme-toggle {
    background: var(--primary-red);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px; height: 50px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* --- SECCIÓN DE ALERTAS (TOP BAR) --- */

/* 1. Ticker: Movimiento lento y fluido */
.ticker-wrapper {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%; /* Empieza desde la derecha */
    animation: ticker-move 45s linear infinite; /* 45s = Velocidad de lectura cómoda */
}

/* Pausa el texto al pasar el mouse */
.ticker-wrapper:hover {
    animation-play-state: paused;
    cursor: pointer;
}

.ticker-item {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.9rem;
}

@keyframes ticker-move {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); } /* Ajustado para ciclo infinito suave */
}

/* 2. Badge ALERTA: Efecto de Vibración y Brillo (Tipo Emergencia) */
.animate-pulse {
    display: inline-block;
    animation: alarm-shake 0.6s ease infinite, alarm-glow 1.5s infinite;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Animación de vibración */
@keyframes alarm-shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-1.5px) rotate(-1deg); }
    50% { transform: translateX(1.5px) rotate(1deg); }
    75% { transform: translateX(-1.5px) rotate(-1deg); }
    100% { transform: translateX(0); }
}

/* Animación de brillo intermitente */
@keyframes alarm-glow {
    0% { 
        box-shadow: 0 0 0 0 rgba(217, 4, 41, 0.7); 
        background-color: #d90429; 
    }
    50% { 
        box-shadow: 0 0 12px 4px rgba(217, 4, 41, 0.5); 
        background-color: #ef233c; /* Rojo más brillante en el medio */
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(217, 4, 41, 0.7); 
        background-color: #d90429; 
    }
}

/*opciones de servicios */
.feature-card {
    background: var(--bg-card, #ffffff); /* Compatible con modo oscuro */
    padding: 40px 30px;
    border-radius: 10px;
    transition: all 0.3s ease;
    border-bottom: 4px solid transparent;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-10px);
    border-bottom: 4px solid var(--primary-red);
}

.feature-icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(217, 4, 41, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: 0.3s;
}

.feature-card:hover .feature-icon-wrapper {
    background: var(--primary-red);
}

.feature-icon {
    font-size: 2.5rem;
    color: var(--primary-red);
    transition: 0.3s;
}

.feature-card:hover .feature-icon {
    color: #ffffff;
}

.read-more-link i {
    transition: transform 0.3s;
}

.read-more-link:hover i {
    transform: translateX(5px);
}

/* Contenedor del icono: Círculo perfecto y centrado */
.feature-icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(217, 4, 41, 0.1); /* Rojo muy clarito */
    border-radius: 50%;
    
    /* Esto es lo que hace la magia del centrado */
    display: flex;
    align-items: center;
    justify-content: center;
    
    margin: 0 auto 20px; /* Centra el círculo en la tarjeta */
    transition: all 0.3s ease;
}

/* El icono dentro del círculo */
.feature-icon {
    font-size: 2.2rem; /* Ajusté un poco el tamaño */
    color: var(--primary-red);
    margin: 0 !important; /* Quitamos márgenes que traiga el icono por defecto */
    line-height: 1; /* Evita que el alto de línea lo empuje hacia abajo */
}

/* Efecto Hover: El círculo se llena de rojo y el icono pasa a blanco */
.feature-card:hover .feature-icon-wrapper {
    background: var(--primary-red);
    transform: rotateY(360deg); /* Un giro sutil para darle dinamismo */
}

.feature-card:hover .feature-icon {
    color: #ffffff;
}

@media (max-width: 992px) {
    /* 1. Subimos el botón para que "pise" la imagen */
    .hero-content-side .btn-lg {
        margin-top: -70px !important; /* Lo empuja hacia arriba, hacia la foto */
        margin-bottom: 30px !important; /* Crea espacio para que el título no se pegue */
        z-index: 100 !important;
        position: relative;
        width: 90%;
        align-self: center; /* Lo centra */
    }

    /* 2. Le damos un poco de espacio al primer texto (h5) para compensar */
    .hero-content-side h5 {
        margin-top: 10px !important;
    }


    .user-access-link {
        margin: 15px auto;
        width: 50px; height: 50px;
    }
}

/* ==========================================================================
   10. AJUSTES banda roja
   ========================================================================== */
   .stat-column {
    transition: transform 0.3s ease;
}

.stat-column:hover {
    transform: translateY(-5px);
}

.stat-icon-box i {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.stat-column:hover i {
    transform: scale(1.2) rotate(10deg);
    color: #ffd1d1; /* Un toque de brillo al icono */
}

.red-divider-small {
    width: 30px;
    height: 2px;
    background: rgba(255,255,255,0.3);
    transition: width 0.3s ease;
}

.stat-column:hover .red-divider-small {
    width: 60px;
    background: #fff;
}

/* Animación de entrada para los números */
.counter {
    display: inline-block;
}

 /* ==========================================================================
   11. AJUSTES Restilos login 
   ========================================================================== */
 /* Eliminamos cualquier rastro de bordes o bandas */
    #main-wrapper { margin-top: 0 !important; background-color: #f8f9fa !important; }
    
    .login-frameless-container {
        min-height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
    }

    .login-content {
        width: 100%;
        max-width: 380px;
        background: transparent; /* Totalmente transparente */
        text-align: center;
    }

    /* Títulos integrados al estilo del sitio */
    .login-content h2 {
        font-family: 'Oswald', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        color: #212529;
        letter-spacing: 1px;
        margin-bottom: 5px;
    }

    .login-content p {
        color: #6c757d;
        font-size: 0.9rem;
        margin-bottom: 35px;
    }

    /* Estilo de inputs: Fondos muy sutiles para que parezcan incrustados */
    .form-floating-custom {
        margin-bottom: 15px;
        position: relative;
    }

    .form-floating-custom .form-control {
        border: 1px solid #dee2e6;
        border-radius: 10px;
        padding: 15px 15px 15px 45px; /* Espacio para el icono */
        background-color: rgba(255, 255, 255, 0.8); /* Semi-transparente */
        height: 55px;
        transition: all 0.3s ease;
    }

    .form-floating-custom i.input-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-red);
        z-index: 10;
    }

    .form-floating-custom .form-control:focus {
        background-color: #fff;
        border-color: var(--primary-red);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.1);
    }

    /* Ojo de contraseña integrado */
    .btn-toggle-eye {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        background: none;
        color: #adb5bd;
        z-index: 10;
    }

    /* Botón de acción: Estilo Bomberos */
    .btn-action-bomberos {
        background-color: var(--primary-red);
        color: white;
        border: none;
        border-radius: 10px;
        width: 100%;
        padding: 15px;
        font-family: 'Oswald', sans-serif;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 1px;
        margin-top: 10px;
        transition: 0.3s;
    }

    .btn-action-bomberos:hover {
        background-color: #bb2d3b;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
    }

    .back-to-site {
        margin-top: 30px;
        display: inline-block;
        color: #6c757d;
        text-decoration: none;
        font-size: 0.85rem;
        transition: 0.2s;
    }

    .back-to-site:hover {
        color: var(--primary-red);
    }

/* ==========================================================================
   12. AJUSTES boton 911
   ========================================================================== */
/* --- BOTÓN 911: ESTADO NORMAL --- */
.btn-911-circle {
    width: 45px !important;
    height: 45px !important;
    background-color: var(--primary-red) !important; /* Lleno de color */
    color: #ffffff !important;                       /* Icono y texto blancos */
    border: 2px solid var(--primary-red) !important;
    border-radius: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out;
    line-height: 1 !important;
    padding: 0 !important; /* Evita que el padding de Bootstrap lo deforme */
}

.btn-911-circle i {
    font-size: 1rem;
    transform: rotate(135deg);
    margin-bottom: -2px;
}

.btn-911-circle span {
    font-size: 0.8rem;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
}

/* --- ESTADO HOVER: EL "CAMBIO" QUE BUSCAMOS --- */
.btn-911-circle:hover {
    background-color: #ffffff !important; /* Fondo Blanco Puro */
    color: #000000 !important;             /* Icono y Texto Negros */
    border-color: var(--primary-red) !important; /* Mantiene el contorno del tema */
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

/* Asegura que los dropdowns se desplieguen hacia abajo en móvil */
@media (max-width: 991px) {
    .dropdown-menu.show {
        display: block !important;
        position: static !important; /* Hace que empuje el contenido hacia abajo */
        float: none;
        width: 100%;
        background-color: var(--bg-card);
        border: none;
    }
}

/* En escritorio, que sigan funcionando normal */
@media (min-width: 992px) {
    .dropdown-menu.show {
        display: block !important;
        position: absolute !important;
    }
}

@media (max-width: 1300px) {
    /* Reducimos el tamaño de la letra del menú */
    .navbar-nav .nav-link {
        font-size: 0.9rem;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Hacemos el logo un poco más pequeño para ganar espacio */
    .navbar-brand img {
        height: 50px; 
    }

    /* Si el botón LLAMAR 911 es muy grande, lo ajustamos */
    .btn-llamada {
        padding: 10px 15px;
        font-size: 0.8rem;
    }
}
@media (max-width: 1280px) {
    .page-header-banner, .slider-principal {
        min-height: 600px; /* Evita que sea gigante en pantallas cuadradas */
    }

    .display-3 {
        font-size: 2.5rem; /* El título "SALVAR ES TAREA DE TODOS" se hace más pequeño */
    }
}
@media (max-width: 1280px) {
    .container {
        max-width: 95%; /* Les damos un poco de "aire" a los lados */
    }
}

/* ==========================================================================
   13. SELECTOR FLOTANTE DE COLORES Y TEMA (CORREGIDO)
   ========================================================================== */
.theme-controls-wrapper {
    position: fixed !important;
    right: 0 !important;
    /* Ajusta este número (60%, 70% o 600px) hasta que libre el botón del carrusel */
    top: 65% !important; 
    transform: translateY(0) !important; /* Quitamos el centrado negativo para que baje */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    z-index: 999999 !important;
    padding-right: 0;
    pointer-events: auto;
}

/* Estilo de los botones laterales */
.btn-theme-toggle {
    background: var(--primary-red) !important;
    color: white !important;
    border: none;
    border-radius: 10px 0 0 10px;
    width: 50px; 
    height: 50px;
    cursor: pointer;
    box-shadow: -2px 4px 12px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
}

.btn-theme-toggle:hover {
    width: 60px;
    background-color: var(--primary-dark) !important;
}

.btn-theme-toggle i {
    font-size: 1.4rem; /* Icono un poco más grande para facilitar el clic */
    pointer-events: none; /* Evita que el icono bloquee el clic al botón */
}

/* Ajuste de la paleta para que salga hacia la IZQUIERDA */
.color-palette {
    display: none;
    position: absolute;
    right: 60px; 
    /* Agregamos bottom: 0 para que se alinee con la base del botón al subir */
    bottom: 0; 
    background: var(--bg-card);
    padding: 12px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    border: 2px solid var(--primary-red);
    flex-wrap: wrap;
    max-width: 140px; 
    gap: 8px;
    /* CAMBIO DE ANIMACIÓN */
    animation: slideUpPalette 0.3s ease;
}

/* NUEVA ANIMACIÓN: De abajo hacia arriba */
@keyframes slideUpPalette {
    from { 
        opacity: 0; 
        transform: translateY(20px); /* Empieza 20px abajo */
    }
    to { 
        opacity: 1; 
        transform: translateY(0);    /* Termina en su sitio */
    }
}
.color-dot {
    width: 22px; 
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--white);
    cursor: pointer;
    transition: transform 0.2s;
    padding: 0;
}

.color-dot:hover { 
    transform: scale(1.3); 
}

/* --- 10 COLORES DE ALTO IMPACTO Y CONTRASTE --- */
.dot-1  { background: #D90429; } /* Rojo Bombero (Clásico) */
.dot-2  { background: #2A2AFF; } /* Azul Directorio (El de la imagen anterior) */
.dot-3  { background: #007FFF; } /* AZUL REY (Potente y vibrante) */
.dot-4  { background: #2AD4FF; } /* Amarillo Oro (Máximo contraste) */
.dot-5  { background: #F48C06; } /* Naranja Táctico (Rescate) */
.dot-6  { background: #2D6A4F; } /* Verde Esmeralda (Forestal) */
.dot-7  { background: #560BAD; } /* Púrpura Real (Autoridad) */
.dot-8  { background: #FF55FF; } /* Verde Oliva (Militar/Táctico) */
.dot-9  { background: #C1121F; } /* Rojo Oscuro (Sangre de Grado/Tradición) */
.dot-10 { background: #FFD400; } /* Negro Profundo (Elegancia/Gala) */
/* REGLA CRÍTICA: Reemplazamos colores estáticos por la variable */
.divider-red {
    background-color: var(--primary-red) !important;
}
.text-danger {
    color: var(--primary-red) !important;
}

/* Clase para que el hover de los sitios de interés adopte el color elegido */
.border-color-variable:hover {
    background-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    color: white !important;
}

/* Forzar que el icono de la paleta y otros elementos se actualicen */
.text-danger, .fa-map-marker-alt, .fa-phone-alt {
    color: var(--primary-red) !important;
}/* ==========================================================================
   14. AJUSTES PARA PÁGINAS INTERNAS (HISTORIA, MISIÓN, VISIÓN)
   ========================================================================== */

/* Sustituye el color estático de historia.php por el dinámico */
.divider-red {
    background-color: var(--primary-red) !important;
    height: 4px;
    width: 60px;
    border: none;
    margin: 20px 0;
    display: block; /* Asegura visibilidad si es un div vacío */
}

/* Para cualquier texto que deba resaltar con el color del tema en la historia */
.text-danger-custom {
    color: var(--primary-red) !important;
}

/* Si tienes banners superiores en las páginas internas */
.internal-page-header {
    border-bottom: 5px solid var(--primary-red) !important;
}

/* Iconos de listas informativas (ej. valores de la institución) */
.list-values i {
    color: var(--primary-red) !important;
}
/* ==========================================================================
   14. AJUSTES PÁGINAS INTERNAS (FINAL CORREGIDO)
   ========================================================================== */

/* Banner centrado y con altura */
.page-header-banner {
    min-height: 350px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    text-align: center !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.page-header-banner h1.display-3 {
    line-height: 1.2 !important;
    letter-spacing: 2px !important;
    font-weight: 700 !important;
    margin-bottom: 5px !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Línea divisora centrada y dinámica */
.divider-red {
    background-color: var(--primary-red) !important;
    height: 5px !important;
    width: 80px !important;
    border: none !important;
    margin: 15px auto !important;
    display: block !important;
}

/* LETRA CAPITAL SIEMPRE ROJA */
.text-content::first-letter, 
.text-content p:first-of-type::first-letter {
    float: left !important;
    font-size: 3.5rem !important;
    line-height: 0.8 !important;
    padding: 5px 12px 0 0 !important;
    color: #D90429 !important; /* Rojo fijo */
    text-transform: uppercase !important;
}

/* Evita que los párrafos de TinyMCE se peguen demasiado */
.text-content p {
    margin-bottom: 1.5rem;
}

/* Borde superior de tarjeta dinámico */
.content-wrapper {
    border-top: 5px solid var(--primary-red) !important;
    border-radius: 8px;
    color: var(--text-main);
}

/* === PEGA AQUÍ EL BLOQUE DE MODO OSCURO === */
[data-theme="dark"] .bg-card.content-wrapper {
    background-color: var(--bg-card) !important; 
    color: var(--text-main) !important;
}

[data-theme="dark"] .text-content,
[data-theme="dark"] .text-content p {
    color: var(--text-main) !important;
}

/* 1. Asegura el color gris de los círculos de iconos */
.icon-circle, .feature-icon-wrapper {
    background-color: #f0f0f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. Asegura que el icono dentro sea de la paleta */
.icon-circle i, .feature-icon {
    color: var(--primary-red) !important;
}

/* 3. La línea superior dinámica para las tarjetas */
.content-wrapper {
    border-top: 5px solid var(--primary-red) !important;
    border-radius: 8px !important;
}

/* 4. Letra capital roja fija */
.text-content p:first-of-type::first-letter {
    color: #D90429 !important;
    float: left !important;
    font-size: 3.5rem !important;
    font-weight: 700 !important;
}
/* ==========================================================================
   SECCIÓN 15: ESTRUCTURA ORGANIZATIVA (ORGANIZACION.PHP)
   ========================================================================== */

/* Colores Dinámicos para Títulos y Bordes */
.color-rojo-fuerza {
    color: var(--primary-red) !important;
    text-shadow: none !important;
}

.card-unidades-roja {
    border-top: 6px solid var(--primary-red) !important;
}

/* Forzado de legibilidad para cajas con fondo claro constante */
.force-black, 
.force-black p, 
.force-black ul, 
.force-black li, 
.force-black div,
.force-black span:not(.text-danger) {
    color: #1a1a1a !important;
}

/* Estilos de las Carpetas y Toggle */
.folder-content { display: none; overflow: hidden; }
.btn-toggle-custom {
    background: none; border: none; padding: 0;
    font-size: 0.8rem; font-weight: bold; color: inherit;
    text-align: left; cursor: pointer; width: 100%;
    transition: color 0.2s ease;
}
.btn-toggle-custom:hover { color: var(--primary-red); }

/* Enlaces de Gerentes y Estaciones */
.titulo-gerente-link {
    text-decoration: none; color: inherit; display: block;
    padding: 5px; border-radius: 8px; transition: 0.3s;
}
.titulo-gerente-link:hover { background: rgba(var(--primary-red-rgb), 0.05); }
.titulo-gerente-link:hover .badge-click { opacity: 1; }
.titulo-gerente-link:hover h6, .titulo-gerente-link:hover i { color: var(--primary-red) !important; }

.estacion-item {
    color: #1a1a1a !important;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-block;
    width: 100%;
}
.estacion-item:hover { color: var(--primary-red) !important; padding-left: 5px; }

/* Otros auxiliares */
.badge-click {
    display: block; font-size: 0.6rem; color: #999;
    text-transform: uppercase; margin-bottom: 2px;
    opacity: 0; transition: 0.3s; text-align: center;
}
/* Botón dinámico que sigue la paleta de colores */
.btn-outline-custom {
    color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    background-color: transparent;
    transition: all 0.3s ease;
}

.btn-outline-custom:hover {
    background-color: var(--primary-red) !important;
    color: #ffffff !important; /* Texto blanco al hacer hover */
    border-color: var(--primary-red) !important;
}
/* ==========================================================================
   16. ESTILOS HEREDADOS DE IDENTIDAD (SÍMBOLOS Y BRIGADAS)
   ========================================================================== */

/* Banner específico para Identidad */
.page-header-banner {
    height: 300px;
    background-size: cover !important;
    background-position: center !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* Clases de utilidad para Identidad */
.ls-2 { letter-spacing: 2px; }
.text-justify { text-align: justify; }
.small-text { font-size: 0.9rem; }
.x-small-text { font-size: 0.8rem; }

/* Efecto de elevación en tarjetas de brigadas */
.hover-elevate {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.hover-elevate:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
}

/* Contenedor del Himno con Scroll */
.himno-texto {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 15px;
}

.himno-texto::-webkit-scrollbar { width: 5px; }
.himno-texto::-webkit-scrollbar-thumb { background: var(--primary-red); }

/* Soporte para Modo Oscuro en Identidad */
[data-theme="dark"] .bg-card {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .bg-dark {
    background-color: #121212 !important; /* Para que los entes resalten */
}
/* ==========================================================================
  17.  ACTUALIZACIÓN DE REGLAS GLOBALES
   ========================================================================== */
.text-danger, 
.fa-map-marker-alt, 
.fa-phone-alt, 
.fa-envelope,
.fa-clock {
    color: var(--primary-red) !important;
}
/* Esta regla vincula la línea inferior con tu paleta de colores */
.linea-dinamica {
    border-bottom-color: var(--primary-red) !important;
}
/* Vincula el borde lateral de los Entes con la paleta de colores */
.linea-dinamica-lateral {
    border-left-color: var(--primary-red) !important;
}
/* Vincula el borde superior de las Oraciones con la paleta de colores */
.linea-dinamica-superior {
    border-top-color: var(--primary-red) !important;
}
/* Fuerza a que estos títulos ignoren el Modo Oscuro */
.texto-fijo-oscuro {
    color: #1a1a1a !important; 
}

/* Opcional: Si quieres que el subtítulo del banner también sea legible */
.page-header-banner p.ls-2 {
    color: #ffffff !important; /* El del banner siempre debe ser blanco */
}
/* ==========================================================================
   18. ICONOS CENTRADOS Y GRISES (MISIÓN/VISIÓN)
   ========================================================================== */
.icon-circle {
    width: 70px !important;
    height: 70px !important;
    background-color: #f0f0f0 !important; /* Gris suave Imagen 1 */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 20px !important; /* Fuerza el centrado horizontal */
}

/* Color del icono dentro del círculo: Sigue la paleta */
.icon-circle i {
    color: var(--primary-red) !important;
}

/* Ajuste para Modo Oscuro */
[data-theme="dark"] .icon-circle {
    background-color: #2d2d2d !important;
}

/* ==========================================================================
   19. LÍNEA DE MANDO - ESTILOS PÚBLICOS (REFINADO)
   ========================================================================== */
.bg-light-section { background-color: #fcfcfc; }
[data-bs-theme="dark"] .bg-light-section { background-color: #111111; }

.bg-card-mando { 
    background-color: #ffffff; 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
[data-bs-theme="dark"] .bg-card-mando { background-color: #1a1a1a; }

.cursor-pointer { cursor: pointer; }

.transition-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(217, 4, 41, 0.15) !important;
}

.mando-img-container {
    background: #f8f9fa;
    transition: transform 0.4s ease;
}

.transition-hover:hover .mando-img-container {
    transform: scale(1.05);
}

.object-cover { object-fit: cover; }

.color-mando-nombre { color: #212529 !important; }
[data-bs-theme="dark"] .color-mando-nombre { color: #ffffff !important; }

.text-muted-mando { color: #6c757d !important; }
[data-bs-theme="dark"] .text-muted-mando { color: #adb5bd !important; }

.bg-danger-soft { background-color: rgba(217, 4, 41, 0.08); }
.text-danger-light { color: #ff6b6b; }

/* AJUSTE DE RESEÑA: Separación real del texto y scroll fino */
.resena-scroll {
    padding-right: 25px !important; /* Espacio base */
    line-height: 1.7;
    text-align: justify;
    /* Evita que el contenido se mueva cuando aparece el scroll */
    scrollbar-gutter: stable; 
}

/* Forzamos que el contenido interno tenga un margen extra */
#resena_contenido p, 
#resena_contenido div {
    margin-right: 15px !important; 
    display: block;
}

/* --- SCROLLBAR REFINADO ULTRA-FINO --- */
.resena-scroll::-webkit-scrollbar {
    width: 4px !important; /* Grosor muy fino */
}

.resena-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03) !important;
    border-radius: 10px !important;
    /* Margen para que el track no pegue de los bordes del modal */
    margin: 10px 0; 
}

.resena-scroll::-webkit-scrollbar-thumb {
    background-color: var(--primary-red) !important;
    border-radius: 10px !important;
    /* Creamos un borde transparente para que la barra se vea más delgada visualmente */
    border: 1px solid transparent;
}

/* Soporte para Firefox */
.resena-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-red) rgba(0, 0, 0, 0.03);
}
.label-cargo {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.divider-red {
    background-color: var(--primary-red) !important;
}
/* ==========================================================================
   20. VISTA DETALLE DE NOTICIAS (CORREGIDO)
   ========================================================================== */

/* Contenedor principal de la imagen de cabecera */
.news-header {
    position: relative;
    height: 450px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    margin-top: -24px; /* Ajuste para pegar al navbar */
    background-color: #333;
}

/* Capa oscura para legibilidad del título */
.news-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 100%);
    z-index: 1;
}

.news-title-box { 
    position: relative; 
    z-index: 2; 
    padding-bottom: 40px; 
    color: white;
}

/* Cuerpo de la noticia */
.content-article {
    font-size: 1.15rem;
    line-height: 1.9;
    color: #2d3436;
    text-align: justify;
}

/* --- EFECTO LETRA CAPITAL (DROP CAP) --- */
/* Se aplica al primer párrafo que genere TinyMCE */
.content-article p:first-of-type::first-letter {
    float: left;
    font-size: 4.5rem;
    line-height: 0.8;
    font-weight: bold;
    margin-right: 15px;
    margin-top: 5px;
    color: var(--primary-red); /* Color dinámico de tu paleta */
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}

/* Estilos para títulos dentro del contenido */
.content-article h1, .content-article h2, .content-article h3 {
    font-family: 'Oswald', sans-serif;
    color: #333;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* Sidebar y Botones */
.sidebar-sticky { 
    position: sticky; 
    top: 100px; 
}

.share-btn {
    width: 45px; 
    height: 45px;
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 50%; 
    color: white !important; 
    transition: 0.3s;
    text-decoration: none;
}

.share-btn:hover { 
    transform: scale(1.1); 
    filter: brightness(1.1);
}

/* Ajuste para que los iconos del header usen el color dinámico */
.news-title-box i {
    color: var(--primary-red);
}
/* ==========================================================================
   ESTILOS ESPECÍFICOS PARA VISTA DE ESTACIONES Y PERSONAL
   ========================================================================== */

/* Scrollbar personalizado para reseñas y descripciones */
.custom-scroll {
    overflow-y: auto !important;
}

.custom-scroll::-webkit-scrollbar {
    width: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: var(--primary-red); /* Dinámico según tu paleta */
    border-radius: 10px;
}

/* Divisor dinámico */
.divider-red {
    height: 4px;
    width: 60px;
    background-color: var(--primary-red) !important;
    margin-bottom: 1rem;
}

/* Fondo oscuro premium para tarjetas de jefe */
.bg-dark-custom {
    background-color: #1a1c1e !important;
    color: #ffffff;
}

/* Estilo para labels de información operativa */
.info-label-dinamico {
    color: var(--primary-red) !important;
    font-weight: bold;
    display: block;
    text-transform: uppercase;
    font-size: 0.7rem;
}
/* Título que se adapta al modo claro/oscuro */
.title-dynamic {
    color: var(--text-main) !important;
}

/* Opcional: Si quieres que el título de estación siempre sea negro en modo claro 
   pero blanco puro en modo oscuro, usa esto: */
[data-theme="dark"] .title-dynamic {
    color: #ffffff !important;
}

/* ==========================================================================
   SECCIÓN: MAPA INTERACTIVO Y ESTACIONES (Limpio y consolidado)
   ========================================================================== */

/* 1. CONFIGURACIÓN DEL MAPA */
#svg-map-container svg { 
    width: 100% !important; 
    height: auto !important; 
    display: block; 
    overflow: visible !important; 
    margin-bottom: 20px !important; /* Espacio controlado para que no se monte */
}

#svg-map-container .muni-group path {
    pointer-events: auto; 
    stroke: #646464; 
    stroke-width: 1px; 
    transition: all 0.2s ease;
    cursor: pointer;
}

/* 2. LÓGICA DE LOS PINES */
.pin-marker {
    opacity: 0; 
    pointer-events: none;
    transform-origin: bottom center !important;
}

.muni-group.has-station .pin-marker { opacity: 1; }
.pin-active { display: none !important; }
.muni-group.active .pin-default { display: none !important; }
.muni-group.active .pin-active { 
    display: block !important; 
    animation: fastMicroJump 0.3s infinite alternate ease-in-out;
    filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.3));
}

.muni-group.active path {
    stroke: #000 !important; 
    stroke-width: 2.5px !important;
}

@keyframes fastMicroJump {
    from { transform: translateY(0); }
    to { transform: translateY(-4px); }
}

/* 3. TOOLTIP */
#map-tooltip {
    position: fixed; 
    padding: 5px 10px; 
    background: rgba(0, 0, 0, 0.85);
    color: #fff; 
    border-radius: 4px; 
    font-size: 12px; 
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase; 
    pointer-events: none; 
    z-index: 10000; 
    display: none;
}

/* 4. ALINEACIÓN DE INFORMACIÓN Y TARJETAS */
.info-row { 
    display: flex; 
    align-items: flex-start; 
    margin-bottom: 8px; 
    font-size: 0.85rem; 
}
.info-row i { 
    width: 20px; 
    margin-top: 3px; 
}

/* 5. CORRECCIÓN DE SCROLL */
#info-container.custom-scroll {
    height: 550px; 
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin; 
    scrollbar-color: var(--primary-red) rgba(0,0,0,0.05);
}

#info-container.custom-scroll::-webkit-scrollbar { width: 5px; }
#info-container.custom-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); }
#info-container.custom-scroll::-webkit-scrollbar-thumb { background: var(--primary-red); border-radius: 10px; }

/* 6. COLORES POR MUNICIPIO Y TRAZOS */
.muni-path {
    stroke: #ffffff !important;
    stroke-width: 1px !important;
    transition: fill 0.3s ease !important;
}

#ALBERTO_ADRIANI { fill: #e75b7e; }
#ANDRES_BELLO { fill: #75e483; }
#ARICAGUA { fill: #fae870; }
#ARZOBISPO_CHACON { fill: #637ddd; }
#CAMPO_ELIAS { fill: #f09c60; }
#CARACCIOLO_PARRA_OLMEDO { fill: #9846b1; }
#CARDENAL_QUINTERO { fill: #6bdef8; }
#GUARAQUE { fill: #f168eb; }
#JULIO_CESAR_SALAS { fill: #d6f18f; }
#JUSTO_BRICENO { fill: #FABEBE; }
#LIBERTADOR { fill: #4e9b92; }
#MIRANDA { fill: #E6BEFF; }
#OBISPO_RAMOS_DE_LORA { fill: #9A6324; }
#PADRE_NOGUERA { fill: #FFFAC8; }
#PUEBLO_LLANO { fill: #6b4242; }
#RANGEL { fill: #AAFFC3; }
#RIVAS_DAVILA { fill: #808000; }
#SANTOS_MARQUINA { fill: #FFD8B1; }
#SUCRE { fill: #3a3a6d; }
#TOVAR { fill: #A9A9A9; }
#TULIO_FEBRES_CORDERO { fill: #575656; }
#ZEA { fill: #F6FF00; }
#ANTONIO_PINTO_SALINAS { fill: #ecbbec; }

/* 7. ESTILO DE LEYENDA (UNIFICADO) */
.leyenda-mapa {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
    background: #fdfdfd;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #eee;
    margin-top: 10px !important;
}

.leyenda-item {
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: #555;
}

.leyenda-color {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 5px;
    border: 1px solid rgba(0,0,0,0.1);
}

/* 8. CÍRCULO INFERIOR (UNIFICADO) */
#muni-circle-container {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.circle-info {
    width: 120px;
    height: 120px;
    background-color: var(--primary-red);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    padding: 10px;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 4px solid #fff;
    transition: transform 0.2s ease;
}
/* ==========================================================================
   X. MÓDULO DE ARCHIVO NOTICIAS (TARJETAS Y PLACEHOLDERS)
   ========================================================================== */

/* Estilos del Badge de Fecha */
.date-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary-red); /* Usando tu variable */
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    text-align: center;
    line-height: 1;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.date-badge .day {
    display: block;
    font-size: 1.4rem;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
}

.date-badge .month {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
}

/* Estilos de Imagen y Placeholder */
.news-image-container {
    height: 220px;
    width: 100%;
    overflow: hidden;
    background-color: #f0f0f0;
    position: relative;
}

.placeholder-news {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 4px solid var(--primary-red);
}

.placeholder-news span {
    font-family: 'Oswald', sans-serif;
    font-size: 6rem;
    font-weight: bold;
    color: rgba(217, 4, 41, 0.05); /* Rojo muy transparente */
    position: absolute;
    text-transform: uppercase;
    pointer-events: none;
}

.placeholder-news i {
    font-size: 3.5rem;
    color: var(--primary-red);
    z-index: 1;
    opacity: 0.8;
}

.card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Efecto hover opcional para las tarjetas */
.card:hover .card-img-top {
    transform: scale(1.05);
}
/* ==========================================================================
   MÓDULOS DE CONTENIDO servcios detalles 
   ========================================================================== */

/* 1. NOTICIAS (TARJETAS Y PLACEHOLDERS) */
.date-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary-red);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    text-align: center;
    line-height: 1;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.date-badge .day {
    display: block;
    font-size: 1.4rem;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
}
.date-badge .month {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
}
.news-image-container {
    height: 220px;
    width: 100%;
    overflow: hidden;
    background-color: #f0f0f0;
    position: relative;
}
.placeholder-news {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 4px solid var(--primary-red);
}
.placeholder-news i {
    font-size: 3.5rem;
    color: var(--primary-red);
    opacity: 0.8;
}

/* 2. CONTENIDO GENERAL (SERVICIOS / ANUNCIOS / TINYMCE) */
.content-text { 
    word-wrap: break-word; 
    overflow-wrap: break-word; 
}
.content-text ul, .content-text ol { 
    padding-left: 2rem; 
    margin-bottom: 1.5rem; 
}
.content-text ul { list-style-type: disc !important; }
.content-text ol { list-style-type: decimal !important; }
.content-text img { 
    max-width: 100%; 
    height: auto !important; 
    border-radius: 8px; 
    margin: 1rem 0;
}
.content-text table { 
    width: 100% !important; 
    border-collapse: collapse; 
    margin: 1rem 0; 
}
.content-text table td { 
    border: 1px solid var(--border-color); 
    padding: 10px; 
}

/* 3. EFECTO EDITORIAL (LETRA CAPITAL - HISTORIA) */
.dropcap-container p {
    text-align: justify;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}
.dropcap-container > p:first-of-type::first-letter {
    color: var(--primary-red);
    float: left;
    font-family: 'Oswald', sans-serif;
    font-size: 4.2rem;
    line-height: 0.8;
    padding-top: 4px;
    padding-right: 10px;
    padding-left: 3px;
    font-weight: bold;
    text-transform: uppercase;
}
/* ==========================================================================
   FIN DEL ARCHIVO CSS
   ========================================================================== */