/* Estilos personalizados para la aplicación de denuncias */

/* 1. Tipografía y Colores Base */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Slab:wght@300;400;700&display=swap');

:root {
    --primary-color: #006FB3; /* Primario Gobierno */
    --primary-dark: #0A132D; /* Terciario Gobierno */
    --secondary-color: #FE6565; /* Secundario Gobierno */
    --success-color: #2D717C; /* Verde Gobierno */
    --danger-color: #FE6565; /* Usamos secundario como danger */
    --warning-color: #FFA11B; /* Naranjo Claro Gobierno */
    --info-color: #6633CC; /* Morado Gobierno */
    --light-gray: #EEEEEE; /* Neutral Gobierno */
    --dark-gray: #4A4A4A; /* Gris A Gobierno */
    --white: #FFFFFF;
    --font-family-base: 'Roboto', sans-serif;
    --border-radius: 0.5rem; /* Bordes un poco más redondeados */
    --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

    --bs-primary: #006FB3;
    --bs-secondary: #FE6565;
    --bs-success: #2D717C;
    --bs-info: #6633CC;
    --bs-warning: #FFA11B;
    --bs-danger: #FE6565;
    --bs-light: #EEEEEE;
    --bs-dark: #0A132D;
    
    --kpi-color-1: var(--success-color); /* success */
    --kpi-color-2: var(--primary-color); /* info */
    --kpi-color-3: var(--warning-color); /* warning */
    --kpi-color-4: var(--info-color); /* purple */
    --kpi-color-5: var(--danger-color); /* orange */
}

body {
    font-family: var(--font-family-base);
    background-color: var(--light-gray);
    color: #212529;
}

/* 2. ESTILOS GENERALES Y BOTONES */
.card {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-sm);
    transition: box-shadow 0.2s ease-in-out;
}

.card:hover {
    box-shadow: var(--box-shadow);
}

.card-header {
    background-color: var(--white);
    border-bottom: 1px solid #dee2e6;
    font-weight: 500;
}

.btn {
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
}

/* 3. DASHBOARD: TARJETAS KPI */
.kpi-card-link {
    text-decoration: none;
    color: inherit;
}

.kpi-card {
    border-radius: var(--border-radius, 0.5rem);
    box-shadow: var(--box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    overflow: hidden; /* Para que el icono no se salga */
    position: relative;
}

.kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15)) !important;
}

.kpi-card .card-body {
    position: relative;
    z-index: 1;
}

/* Tarjeta principal de totales */
.kpi-total {
    background: linear-gradient(45deg, var(--primary-dark), var(--primary-color));
    color: var(--white);
    border: none;
}

.kpi-total .card-body {
    padding: 1.5rem;
}

.kpi-total h3 {
    font-weight: 700;
    font-size: 2.5rem; /* Tamaño ajustado para el número */
    margin: 0;
}

.kpi-total .kpi-title {
    font-size: 1.1rem;
    font-weight: 400;
    opacity: 0.9;
}

.kpi-icon-large {
    font-size: 6rem; /* Un poco más grande */
    opacity: 0.15; /* Un poco más visible */
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    transition: transform 0.3s ease;
}

.kpi-card:hover .kpi-icon-large {
    transform: translateY(-50%) scale(1.1);
}


/* Tarjetas de KPI por motivo */
.kpi-motivo-card {
    background-color: var(--white);
    margin-bottom: 0.75rem !important;
    border-left: 5px solid var(--secondary-color);
    transition: border-left-color 0.3s ease;
}

.kpi-motivo-card:hover {
    border-left-color: var(--primary-dark) !important;
}

.kpi-motivo-card:nth-of-type(5n+1) { border-left-color: var(--kpi-color-1); }
.kpi-motivo-card:nth-of-type(5n+2) { border-left-color: var(--kpi-color-2); }
.kpi-motivo-card:nth-of-type(5n+3) { border-left-color: var(--kpi-color-3); }
.kpi-motivo-card:nth-of-type(5n+4) { border-left-color: var(--kpi-color-4); }
.kpi-motivo-card:nth-of-type(5n+5) { border-left-color: var(--kpi-color-5); }

.kpi-motivo-card .card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
}

.kpi-motivo-card .kpi-motivo-nombre {
    font-weight: 500;
    color: #495057;
}

.kpi-motivo-card .kpi-motivo-count {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary-dark);
}

/* 4. BADGES DE ESTADO Y COLORES DE KPI (CONSISTENTES) */
/* Color por defecto para estados que no tengan un color específico asignado */
.badge[class*="status-"] { background-color: #6c757d; color: #fff; }

.badge.status-ingresada, .kpi-ingresada { background-color: #fff3cd !important; color: #664d03 !important; } /* Amarillo */
.badge.status-revision-nivel-central, .kpi-revision-nivel-central { background-color: #e2d9f3 !important; color: #2c0b63 !important; } /* Púrpura */
.badge.status-envio-a-seremi, .kpi-envio-a-seremi { background-color: #cff4fc !important; color: #055160 !important; } /* Cian */
.badge.status-admisible, .kpi-admisible { background-color: #cfe2ff !important; color: #0a367e !important; } /* Azul */
.badge.status-fiscalizacion, .kpi-fiscalizacion { background-color: #ffe5d9 !important; color: #612d1a !important; } /* Naranja */
.badge.status-procedente, .kpi-procedente { background-color: #d1e7dd !important; color: #0f5132 !important; } /* Verde */
.badge.status-itj, .kpi-itj { background-color: #e2e3e5 !important; color: #41464b !important; } /* Gris */
.badge.status-enviada-a-dpr-o-gore, .kpi-enviada-a-dpr-o-gore { background-color: #d3d3d4 !important; color: #141619 !important; } /* Gris Oscuro */
.badge.status-termino-favorable, .kpi-termino-favorable { background-color: #d1e7dd !important; color: #0f5132 !important; } /* Verde Éxito */
.badge.status-termino-no-favorable, .kpi-termino-no-favorable { background-color: #f8d7da !important; color: #58151c !important; } /* Rojo Peligro */

/* Estados Generalizados para Público */
.badge.status-en_proceso { background-color: #cfe2ff !important; color: #0a367e !important; } /* Azul (mismo que admisible) */
.badge.status-terminada { background-color: #d1e7dd !important; color: #0f5132 !important; } /* Verde (mismo que termino favorable) */

/* Ajuste de texto secundario en tarjetas con fondo */
.kpi-card .text-muted {
    opacity: 0.8;
}

/* 5. TABLA DE DATOS */
.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    background-color: var(--light-gray);
    border-bottom-width: 1px;
    font-weight: 500;
}

.table-hover tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.05);
}

tr.highlighted-row {
    background-color: rgba(13, 110, 253, 0.15) !important;
    font-weight: 500;
}

/* 6. MAPA Y SUS ESTADOS */
#map {
    height: 600px;
    width: 100%;
    border-radius: var(--border-radius);
    background-color: #e9ecef;
}

#map-loader, #map-empty {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    z-index: 1000; /* Asegura que esté sobre el mapa */
    border-radius: var(--border-radius);
}

#map.map-loaded + #map-loader {
    display: none !important;
}