/* =================================================================== */
/* ESTILOS MAESTROS - TU CONCEJO ESCUCHA v7.2 (RED BOOST) */
/* =================================================================== */

/* 1. FUENTES */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Oswald:wght@400;600;700&display=swap');

/* 2. VARIABLES Y TEMA INSTITUCIONAL */
:root {
    /* --- PALETA INSTITUCIONAL "LA PAZ" --- */
    --color-institucional-verde: #006848;
    /* Principal / Reclamos */
    --color-institucional-verde-dark: #004d35;
    /* Hover Verde */

    --color-institucional-rojo: #CC0000;
    /* Rojo Bandera / Denuncias */
    --color-institucional-rojo-dark: #990000;
    /* Hover Rojo Oscuro */

    /* CAMBIO CLAVE: ROJO "FERRARI" PARA TÍTULOS (ALTA LUMINOSIDAD) */
    --color-rojo-vibrante: #FF1C1C;

    --color-institucional-vino: #800020;
    /* Iniciativas */
    --color-institucional-dorado: #C5A059;
    /* Acentos Dorados */

    /* COLORES DE ESTADO (DASHBOARD) */
    --color-amarillo-principal: #F0B400;
    /* Mostaza Fuerte */
    --color-azul-principal: #0d6efd;

    /* --- MODO DÍA (CLARO) --- */
    --bs-body-bg: #F4F6F9;
    --bs-body-color: #2D3436;

    /* Tarjetas */
    --card-bg: rgba(255, 255, 255, 0.96);
    --card-border: rgba(0, 0, 0, 0.08);
    --card-text: #2D3436;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

    /* Inputs */
    --input-bg: #ffffff;
    --input-text: #2D3436;
    --input-border: #ced4da;
    --input-focus-shadow: rgba(240, 180, 0, 0.25);

    /* Hero Banner MODO DÍA */
    --hero-bg: rgba(255, 255, 255, 0.92);
    --hero-text: #000000;
    --hero-border: rgba(0, 104, 72, 0.2);

    /* Navbar Glassmorphism */
    --navbar-bg: rgba(0, 77, 53, 0.96);
    --navbar-border-bottom: rgba(197, 160, 89, 0.5);
    --navbar-active-border: var(--color-amarillo-principal);

    /* Fondo Pantalla */
    --bg-image: url('../images/background-claro.jpg');

    /* REDEFINICIÓN BOOTSTRAP */
    --bs-primary: var(--color-institucional-verde);
    --bs-success: var(--color-institucional-verde);
    --bs-danger: var(--color-institucional-rojo);
    --bs-warning: var(--color-amarillo-principal);
}

[data-bs-theme="dark"] {
    /* --- MODO NOCHE (OSCURO MEJORADO) --- */
    --bs-body-bg: #0F1115;
    --bs-body-color: #ECEFF1;

    /* Tarjetas */
    --card-bg: rgba(30, 35, 40, 0.92);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-text: #ECEFF1;
    --card-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);

    /* Inputs */
    --input-bg: #2b3035;
    --input-text: #ffffff;
    --input-border: #555;

    /* Hero Banner MODO NOCHE */
    --hero-bg: linear-gradient(135deg, #004d35 0%, #002a1d 100%);
    --hero-text: #ffffff;
    --hero-border: rgba(255, 255, 255, 0.1);

    /* Navbar */
    --navbar-bg: rgba(5, 10, 8, 0.95);
    --navbar-border-bottom: rgba(197, 160, 89, 0.2);
    --navbar-active-border: #ffffff;

    /* Fondo Pantalla */
    --bg-image: url('../images/background-oscuro.jpg');
}

/* =================================================================== */
/* 3. ESTRUCTURA BASE Y TIPOGRAFÍA */
/* =================================================================== */

body {
    font-family: 'Lato', sans-serif;
    background-color: var(--bs-body-bg);
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: var(--bs-body-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Títulos Corporativos */
h1,
h2,
h3,
h4,
h5,
h6,
.display-6,
.display-5,
.display-4 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Enlaces */
a {
    color: var(--color-institucional-verde);
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover {
    color: var(--color-institucional-rojo);
    text-shadow: 0 0 8px rgba(212, 46, 18, 0.3);
}

/* Focus Accessibility */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-institucional-dorado) !important;
    box-shadow: 0 0 0 0.25rem var(--input-focus-shadow) !important;
}

/* =================================================================== */
/* 4. BARRA DE NAVEGACIÓN (NAVBAR) */
/* =================================================================== */

.navbar {
    background-color: var(--navbar-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--navbar-border-bottom);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 0.8rem 0;
    z-index: 1030;
}

.navbar-brand img {
    height: 55px !important;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

.navbar-brand span {
    color: #fff !important;
    font-family: 'Oswald', sans-serif;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
    font-size: 1.4rem;
    font-weight: 700;
}

.navbar .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* Indicador de link activo */
.navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: var(--navbar-active-border);
    transition: width 0.3s ease-in-out;
    box-shadow: 0 0 5px var(--navbar-active-border);
}

.navbar .nav-link:hover::after {
    width: 80%;
}

/* Botón Modo Noche */
#theme-toggler {
    background: rgba(197, 160, 89, 0.2);
    border: 1px solid rgba(197, 160, 89, 0.4);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s ease, background 0.3s;
    margin-left: 10px;
    padding: 0;
    color: #FFD700;
}

#theme-toggler:hover {
    background: rgba(197, 160, 89, 0.5);
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.6);
    transform: rotate(180deg);
}

/* =================================================================== */
/* 5. COMPONENTES: HERO Y TARJETAS */
/* =================================================================== */

.hero-banner {
    background: var(--hero-bg);
    color: var(--hero-text);
    border: 1px solid var(--hero-border);
    border-radius: 20px;
    padding: 3rem 2rem;
    margin-bottom: 3rem;
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: -1;
}

[data-bs-theme="dark"] .hero-banner::before {
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
}

/* MEJORA DE CONTRASTE "ROJO VIVO"
   Aplicamos el rojo nuevo + Sombra Sólida para separarlo del fondo verde 
*/
.hero-banner h1,
.hero-banner .display-4,
.hero-banner .display-5,
.titulo-alto-contraste {
    color: var(--color-rojo-vibrante) !important;
    /* Sombra doble: Borde negro fino + Sombra difusa */
    text-shadow:
        1px 1px 0 #000,
        -1px -1px 0 #000,
        0px 4px 15px rgba(0, 0, 0, 0.9) !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
}

/* Tarjetas Generales */
.card {
    background-color: var(--card-bg) !important;
    color: var(--card-text);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(5px);
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Tarjetas de Resultado */
.card-resultado {
    border: none;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-resultado:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3) !important;
}

.card-resultado .card-body {
    background: rgba(255, 255, 255, 0.96);
    color: #212529;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

[data-bs-theme="dark"] .card-resultado .card-body {
    background: rgba(40, 40, 40, 0.96);
    color: #e0e0e0;
}

.card-resultado i.display-3 {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

/* Gradientes específicos */
.tramite-verde,
.card-resultado.tramite-reclamo {
    background: linear-gradient(135deg, var(--color-institucional-verde) 0%, #003d2a 100%);
}

.tramite-rojo,
.card-resultado.tramite-denuncia {
    background: linear-gradient(135deg, var(--color-institucional-rojo) 0%, #990000 100%);
}

.tramite-vino,
.card-resultado.tramite-iniciativa {
    background: linear-gradient(135deg, var(--color-institucional-vino) 0%, #4a0010 100%);
}

/* =================================================================== */
/* 6. ESTILOS DE FORMULARIOS Y TEMA */
/* =================================================================== */

.form-control,
.form-select {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border);
    padding: 0.75rem;
    border-radius: 8px;
}

.form-control::placeholder {
    color: #888;
}

/* Bordes Superiores Semánticos */
.border-tema-reclamo {
    border-top: 5px solid var(--color-institucional-verde) !important;
}

.border-tema-denuncia {
    border-top: 5px solid var(--color-institucional-rojo) !important;
}

.border-tema-iniciativa {
    border-top: 5px solid var(--color-institucional-vino) !important;
}

/* Textos Semánticos */
.text-tema-reclamo {
    color: var(--color-institucional-verde) !important;
}

.text-tema-denuncia {
    color: var(--color-institucional-rojo) !important;
}

.text-tema-iniciativa {
    color: var(--color-institucional-vino) !important;
}

/* Fondos Semánticos */
.bg-tema-reclamo {
    background-color: var(--color-institucional-verde) !important;
    color: white;
}

.bg-tema-denuncia {
    background-color: var(--color-institucional-rojo) !important;
    color: white;
}

.bg-tema-iniciativa {
    background-color: var(--color-institucional-vino) !important;
    color: white;
}

/* Bordes Laterales */
.border-start-reclamo {
    border-left: 5px solid var(--color-institucional-verde) !important;
}

.border-start-denuncia {
    border-left: 5px solid var(--color-institucional-rojo) !important;
}

.border-start-iniciativa {
    border-left: 5px solid var(--color-institucional-vino) !important;
}

/* Headers con Gradiente */
.bg-gradient-reclamo {
    background: linear-gradient(135deg, #006848 0%, #00966B 100%);
    border-top: 4px solid #004d35;
}

.bg-gradient-denuncia {
    background: linear-gradient(135deg, #CC0000 0%, #CC0000 40%, #006848 60%, #006848 100%);
    border-top: 4px solid #CC0000;
}

.bg-gradient-iniciativa {
    background: linear-gradient(135deg, #800020 0%, #B22222 100%);
    border-top: 4px solid #5a0016;
}

/* =================================================================== */
/* 7. BOTONES PERSONALIZADOS */
/* =================================================================== */

.btn-primary {
    background-color: var(--color-institucional-verde);
    border-color: var(--color-institucional-verde);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 25px;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
    background-color: var(--color-institucional-verde-dark);
    border-color: var(--color-institucional-verde-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 104, 72, 0.4);
}

/* Botones Ghost */
.btn-tramite {
    background-color: transparent;
    border-width: 2px;
    border-style: solid;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-tramite-reclamo {
    color: #006848;
    border-color: #006848;
}

.btn-tramite-reclamo:hover {
    background-color: #006848;
    color: white;
    box-shadow: 0 5px 15px rgba(0, 104, 72, 0.4);
}

.btn-tramite-iniciativa {
    color: #800020;
    border-color: #800020;
}

.btn-tramite-iniciativa:hover {
    background-color: #800020;
    color: white;
    box-shadow: 0 5px 15px rgba(128, 0, 32, 0.4);
}

.btn-tramite-denuncia {
    color: #CC0000;
    border-color: #CC0000;
}

.btn-tramite-denuncia:hover {
    background: linear-gradient(90deg, #CC0000, #006848);
    border-color: transparent;
    color: white;
    box-shadow: 0 5px 15px rgba(204, 0, 0, 0.4);
}

/* =================================================================== */
/* 8. FOOTER Y UTILIDADES */
/* =================================================================== */

footer {
    background-color: var(--card-bg);
    border-top: 1px solid var(--card-border) !important;
    color: var(--bs-body-color);
    margin-top: auto;
    backdrop-filter: blur(10px);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bs-body-bg);
}

::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 5px;
    border: 2px solid var(--bs-body-bg);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-institucional-verde);
}

.list-group-item {
    background-color: var(--card-bg);
    color: var(--card-text);
    border-color: var(--card-border);
    transition: all 0.2s;
}

.list-group-item:hover {
    background-color: rgba(0, 104, 72, 0.08);
    padding-left: 1.5rem;
    color: var(--color-institucional-verde);
}

[data-bs-theme="dark"] .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

canvas {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

/* =================================================================== */
/* 9. CORRECCIONES MODO OSCURO */
/* =================================================================== */

[data-bs-theme="dark"] .bg-light {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .bg-white {
    background-color: rgba(30, 35, 40, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ECEFF1 !important;
}

[data-bs-theme="dark"] .form-check.bg-white {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .text-muted {
    color: #B0BEC5 !important;
}

[data-bs-theme="dark"] .text-dark {
    color: #FFFFFF !important;
}

/* Alertas */
.alert {
    border: none;
    border-radius: 8px;
    color: white !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-weight: 500;
}

.alert-success {
    background-color: var(--color-institucional-verde);
}

.alert-danger {
    background-color: var(--color-institucional-rojo);
}

.alert-info {
    background-color: var(--color-azul-principal);
}

.alert-warning {
    background-color: var(--color-amarillo-principal);
    color: white;
}

/* =================================================================== */
/* 10. ESTILOS DE IMPRESIÓN */
/* =================================================================== */

@media print {

    header,
    nav,
    footer,
    .btn,
    .d-print-none,
    .toast-container,
    .hero-banner,
    #theme-toggler {
        display: none !important;
    }

    *,
    html,
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    div,
    a,
    li,
    table,
    td,
    th,
    label {
        color: #000000 !important;
        background: transparent !important;
        -webkit-text-fill-color: #000000 !important;
        text-shadow: none !important;
        box-shadow: none !important;
    }

    body {
        margin: 0;
        padding: 0;
        font-size: 11pt;
    }

    .container,
    .row,
    .col-lg-8 {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .card {
        border: none !important;
    }

    .card-header {
        border-bottom: 2px solid #000;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    .table-bordered,
    .table-bordered td,
    .table-bordered th {
        border: 1px solid #000 !important;
    }

    .logo-impresion {
        filter: grayscale(100%) contrast(200%);
        height: 55px;
        width: auto;
    }
}