/* =========================================================================
   OBSERVAPAZ — estilo institucional
   Verde monte para la navegación y las acciones, blanco con sombras
   suaves para las tarjetas, y el paisaje del proyecto (montañas, río y
   mapa de Colombia) como fondo del acceso y del encabezado del tablero.
   ========================================================================= */
:root {
    --verde-monte: #17382D;
    --verde-monte-oscuro: #102A21;
    --verde-activo: #2B6A4A;
    --verde-medio: #1D6D48;
    --verde-tinte: #E3F0E6;
    --fondo: #EFF2F0;
    --superficie: #FFFFFF;
    --texto: #1B2420;
    --texto-tenue: #5B6961;
    --borde: #E1E6E1;
    --ocre: #BD8A3D;
    --ocre-tinte: #FFF0DA;
    --rojo-alerta: #B3432D;
    --sombra-tarjeta: 0 1px 2px rgba(20, 40, 30, .05), 0 4px 14px rgba(20, 40, 30, .05);
    --alto-franja: 68px;
}

* { box-sizing: border-box; }

body {
    background: var(--fondo);
    color: var(--texto);
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--texto);
    font-weight: 700;
}
.titulo-serif { font-family: 'Lora', Georgia, serif; }

a { color: var(--verde-monte); }
a:hover { color: var(--verde-activo); }

/* El atributo hidden debe ganarle a los display de las clases propias */
[hidden] { display: none !important; }

/* --- Franja institucional ------------------------------------------- */
.franja-institucional {
    position: relative;
    z-index: 3;
    background: var(--superficie);
    box-shadow: 0 1px 8px rgba(20, 40, 30, .09);
    padding: 10px 28px;
    height: var(--alto-franja);
    overflow: hidden;
}
.franja-institucional__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.franja-institucional__izq {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.franja-institucional img { max-height: 48px; width: auto; }

/* --- Estructura general: sidebar + (contenido + pie) ------------------ */
.app {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--alto-franja));
}
.app__columna {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.app__contenido {
    flex: 1;
    min-width: 0;
    padding: 32px 40px 40px;
}

/* --- Sidebar ---------------------------------------------------------- */
.sidebar,
.sidebar-offcanvas {
    width: 268px;
    flex-shrink: 0;
    background:
        url("../img/sidebar-relieve.svg") bottom / cover no-repeat,
        linear-gradient(180deg, #1A3F31 0%, var(--verde-monte) 55%, #132F25 100%);
    color: rgba(255, 255, 255, .92);
    flex-direction: column;
}
.sidebar__interno {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--alto-franja) - 4px);
    max-height: 100vh;
    padding: 30px 0 24px;
}
.sidebar-offcanvas .sidebar__interno { position: static; min-height: 100%; max-height: none; }
.sidebar-offcanvas__cerrar { position: absolute; top: 16px; right: 16px; z-index: 2; }

.sidebar__marca {
    padding: 0 22px 22px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.sidebar__marca-nombre {
    display: block;
    font-family: 'Lora', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
}
.sidebar__marca-sub {
    display: block;
    margin-top: 8px;
    font-size: .86rem;
    color: rgba(255, 255, 255, .68);
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 14px;
    flex: 1;
}
.sidebar__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .88);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}
.sidebar__link:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.sidebar__link.is-active { background: var(--verde-activo); color: #fff; }
.sidebar__icono { width: 21px; height: 21px; flex-shrink: 0; display: flex; }
.sidebar__icono svg { width: 100%; height: 100%; }
.sidebar__badge {
    display: none;
    align-items: center;
    margin-left: auto;
    background: var(--rojo-alerta);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
}

.sidebar__nota {
    display: flex;
    gap: 12px;
    margin: 16px 18px 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    font-size: .8rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .88);
}
.sidebar__nota svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }

.sidebar__pie { padding: 18px 20px 0; margin-top: 16px; }
.sidebar__usuario {
    display: block;
    font-size: .78rem;
    color: rgba(255, 255, 255, .68);
    margin-bottom: 10px;
}
.sidebar__salir,
.sidebar__ingresar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.sidebar__salir svg, .sidebar__ingresar svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar__salir:hover,
.sidebar__ingresar:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* --- Barra superior móvil (sidebar colapsado) ------------------------ */
.app__topbar-movil { display: none; }
.app__toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app__toggle svg { width: 20px; height: 20px; }
.app__topbar-marca {
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    font-size: 1.02rem;
}

@media (max-width: 991.98px) {
    .app { display: block; min-height: 0; }
    .app__columna { min-height: 0; }
    .app__topbar-movil {
        display: flex;
        align-items: center;
        gap: 14px;
        background: var(--verde-monte);
        color: #fff;
        padding: 12px 20px;
        position: sticky;
        top: 0;
        z-index: 1020;
    }
    .app__contenido { padding: 22px 16px 32px; }
    .franja-institucional { padding: 8px 16px; height: auto; overflow: visible; }
    .franja-institucional img { max-height: 34px; }
    .franja-institucional__izq { gap: 14px; }
}
@media (min-width: 992px) {
    .sidebar-offcanvas { display: none !important; }
}

/* --- Pie de página ---------------------------------------------------- */
.pie-sitio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 24px;
    padding: 14px 40px;
    background: rgba(255, 255, 255, .92);
    border-top: 1px solid var(--borde);
    font-size: .76rem;
    color: var(--texto-tenue);
}
.pie-sitio__enlaces { display: flex; flex-wrap: wrap; align-items: center; }
.pie-sitio__enlaces > * + * { margin-left: 14px; padding-left: 14px; border-left: 1px solid #CBD3CC; }
.pie-sitio a { color: inherit; text-decoration: none; }
.pie-sitio a:hover { color: var(--verde-monte); text-decoration: underline; }
@media (max-width: 991.98px) { .pie-sitio { padding: 14px 16px; } }

/* --- Encabezado de página (título + texto de apoyo) ------------------- */
.encabezado-pagina { margin-bottom: 22px; }
.encabezado-pagina__ojo {
    margin: 0 0 6px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--verde-monte);
}
.encabezado-pagina__titulo {
    margin: 0 0 8px;
    font-size: 2rem;
    line-height: 1.15;
}
.encabezado-pagina__texto {
    margin: 0;
    max-width: 62rem;
    color: var(--texto-tenue);
    font-size: 1rem;
}

.seccion-titulo { margin: 30px 0 16px; }
.seccion-titulo__texto {
    margin: 0;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--verde-monte);
}
.seccion-titulo::after {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    margin: 6px 0 10px;
    background: var(--ocre);
}
.seccion-titulo__apoyo { margin: 0; color: var(--texto-tenue); font-size: .92rem; }

/* --- Tarjetas (Bootstrap .card reutilizada en todo el sitio) --------- */
.card {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 12px;
    box-shadow: var(--sombra-tarjeta);
    margin-bottom: 1rem;
}
.card-header {
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    border-radius: 12px 12px 0 0 !important;
    font-weight: 700;
    font-size: .98rem;
    color: var(--texto);
}
.card-footer { background: var(--superficie); border-top: 1px solid var(--borde); }

/* --- Botones: verde monte en lugar del azul de Bootstrap -------------- */
.btn-primary {
    --bs-btn-bg: var(--verde-monte);
    --bs-btn-border-color: var(--verde-monte);
    --bs-btn-hover-bg: var(--verde-monte-oscuro);
    --bs-btn-hover-border-color: var(--verde-monte-oscuro);
    --bs-btn-active-bg: var(--verde-monte-oscuro);
    --bs-btn-active-border-color: var(--verde-monte-oscuro);
    --bs-btn-disabled-bg: var(--verde-monte);
    --bs-btn-disabled-border-color: var(--verde-monte);
    --bs-btn-focus-shadow-rgb: 23, 56, 45;
}
.btn-outline-primary {
    --bs-btn-color: var(--verde-monte);
    --bs-btn-border-color: var(--verde-monte);
    --bs-btn-hover-bg: var(--verde-monte);
    --bs-btn-hover-border-color: var(--verde-monte);
    --bs-btn-active-bg: var(--verde-monte);
    --bs-btn-active-border-color: var(--verde-monte);
    --bs-btn-focus-shadow-rgb: 23, 56, 45;
}
.btn-dark { background: var(--verde-monte); border-color: var(--verde-monte); }
.btn-dark:hover { background: var(--verde-monte-oscuro); border-color: var(--verde-monte-oscuro); }
.btn-outline-dark { color: var(--verde-monte); border-color: var(--verde-monte); }
.btn-outline-dark:hover { background: var(--verde-monte); border-color: var(--verde-monte); }
.btn { border-radius: 8px; font-weight: 600; }

/* Botón con flecha al final ("Abrir registro →") */
.btn-flecha::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: .55em;
    vertical-align: -.14em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='13 5 20 12 13 19'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='13 5 20 12 13 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

.form-control, .form-select { border-color: #D3DAD3; border-radius: 8px; }
.form-select:focus, .form-control:focus {
    border-color: var(--verde-monte);
    box-shadow: 0 0 0 .2rem rgba(23, 56, 45, .16);
}
.form-label { font-weight: 600; font-size: .88rem; }

/* =========================================================================
   Acceso (login)
   ========================================================================= */
.pagina-login .app__columna {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.pagina-login .app__columna::before {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: -1;
    background:
        linear-gradient(150deg, rgba(248, 250, 250, .20) 0%, rgba(248, 250, 250, .05) 55%, rgba(248, 250, 250, .15) 100%),
        url("../img/paisaje.jpg") center center / cover no-repeat;
    filter: blur(0);
}
.pagina-login .app__contenido { padding-top: 44px; }
.pagina-login .pie-sitio { background: rgba(255, 255, 255, .86); }

.login-pagina { max-width: 860px; margin: 0 auto; }
.login-encabezado__titulo {
    margin: 0 0 10px;
    font-family: 'Lora', Georgia, serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
}
.login-encabezado__texto {
    margin: 0;
    max-width: 30em;
    color: #4A5851;
    font-size: 1.12rem;
    line-height: 1.4;
}
.login-encabezado::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-top: 16px;
    background: var(--verde-monte);
}

.login-tarjeta {
    max-width: 552px;
    margin: 30px auto 0;
    padding: 24px 30px 24px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 10px 34px rgba(20, 40, 30, .14);
}
.login-tarjeta__cabecera { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.login-tarjeta__icono {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #D9EBDC;
    color: var(--verde-monte);
}
.login-tarjeta__icono svg { width: 24px; height: 24px; }
.login-tarjeta__titulo {
    margin: 2px 0 4px;
    font-family: 'Lora', Georgia, serif;
    font-size: 1.28rem;
    font-weight: 700;
}
.login-tarjeta__apoyo { margin: 0; font-size: .86rem; line-height: 1.4; color: var(--texto-tenue); }

.campo-icono { position: relative; }
.campo-icono__icono {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: #3C4A43;
    pointer-events: none;
}
.campo-icono .form-control { height: 46px; padding-left: 44px; background: #FAFBFA; }
.campo-icono__ojo {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: #3C4A43;
    border-radius: 8px;
}
.campo-icono__ojo:hover { background: #EDF1ED; }
.campo-icono__ojo svg { width: 19px; height: 19px; }
.campo-icono--ojo .form-control { padding-right: 48px; }

.btn-ingresar { height: 46px; font-size: 1rem; }
.login-tarjeta__pie {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--borde);
    text-align: center;
    font-size: .88rem;
    color: var(--texto-tenue);
}
.login-tarjeta__pie p { margin: 0 0 2px; }
.login-tarjeta__pie a { color: var(--verde-medio); }

.login-accesos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 820px;
    margin: 34px auto 0;
}
.acceso-rapido {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .97);
    border-radius: 12px;
    box-shadow: var(--sombra-tarjeta);
    color: var(--texto);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.acceso-rapido:hover { color: var(--texto); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20, 40, 30, .12); }
.acceso-rapido__icono {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #DDEBE0;
    color: var(--verde-monte);
}
.acceso-rapido__icono svg { width: 22px; height: 22px; }
.acceso-rapido__texto { flex: 1; min-width: 0; }
.acceso-rapido__titulo { display: block; font-weight: 700; font-size: .98rem; }
.acceso-rapido__apoyo { display: block; font-size: .78rem; color: var(--texto-tenue); }
.acceso-rapido__flecha { width: 20px; height: 20px; flex-shrink: 0; }
@media (max-width: 767.98px) {
    .login-accesos { grid-template-columns: 1fr; gap: 14px; }
    .login-encabezado__titulo { font-size: 2rem; }
    .login-tarjeta { padding: 20px 18px; }
}

/* =========================================================================
   Registro de información (lista pública de formularios)
   ========================================================================= */
.registro-general {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 26px;
    padding: 26px 30px;
    margin-bottom: 0;
    background-color: var(--superficie);
    background-image:
        radial-gradient(circle at 93% 30%, #F3E2AE 0 15px, transparent 16px),
        radial-gradient(circle at 97% 125%, rgba(150, 196, 160, .55) 0 110px, transparent 111px),
        radial-gradient(circle at 80% 150%, rgba(190, 220, 196, .55) 0 130px, transparent 131px),
        linear-gradient(90deg, #fff 55%, #F3F7F3 100%);
}
.registro-general__icono {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #DDEBE0;
    color: var(--verde-monte);
}
.registro-general__icono svg { width: 32px; height: 32px; }
.registro-general__cuerpo {
    flex: 1;
    min-width: 0;
    padding-left: 26px;
    border-left: 1px solid var(--borde);
}
.registro-general__titulo { margin: 0 0 6px; font-size: 1.28rem; }
.registro-general__texto { margin: 0; max-width: 40rem; color: var(--texto-tenue); font-size: .92rem; }
.registro-general .btn { flex-shrink: 0; margin-right: 150px; }
@media (max-width: 991.98px) { .registro-general .btn { margin-right: 0; } }
@media (max-width: 767.98px) {
    .registro-general { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
    .registro-general__cuerpo { padding-left: 0; border-left: 0; }
}

.obs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1099.98px) { .obs-grid { grid-template-columns: 1fr; } }
.obs-tarjeta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 0;
}
.obs-tarjeta__icono {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #DDEBE0;
    color: #1D6D48;
}
.obs-tarjeta__icono svg { width: 26px; height: 26px; }
.obs-tarjeta--ocre .obs-tarjeta__icono { background: var(--ocre-tinte); color: #B8741F; }
.obs-tarjeta__cuerpo { flex: 1; min-width: 0; }
.obs-tarjeta__codigo {
    display: inline-block;
    padding: 2px 11px;
    margin-bottom: 6px;
    border-radius: 999px;
    background: #DDEBE0;
    color: #1D5A3C;
    font-size: .74rem;
    font-weight: 700;
}
.obs-tarjeta--ocre .obs-tarjeta__codigo { background: var(--ocre-tinte); color: #8A5A12; }
.obs-tarjeta__nombre { margin: 0 0 4px; font-size: .98rem; line-height: 1.25; }
.obs-tarjeta__lugar { display: flex; align-items: center; gap: 5px; margin: 0 0 4px; font-size: .8rem; color: #3E4C45; }
.obs-tarjeta__lugar svg { width: 14px; height: 14px; color: #1D6D48; flex-shrink: 0; }
.obs-tarjeta__texto { margin: 0; font-size: .78rem; color: var(--texto-tenue); }
.obs-tarjeta .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 575.98px) {
    .obs-tarjeta { flex-wrap: wrap; }
    .obs-tarjeta .btn { width: 100%; }
}

/* =========================================================================
   Tablero (público y privado)
   ========================================================================= */
.tablero-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 150px;
    margin-bottom: 16px;
    border: 1px solid var(--borde);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--sombra-tarjeta);
    background:
        linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .97) 40%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(270deg, rgba(14, 46, 33, .56) 0%, rgba(14, 46, 33, .2) 40%, rgba(14, 46, 33, 0) 62%),
        url("../img/paisaje.jpg") 55% 78% / cover no-repeat;
}
.tablero-banner__texto { position: relative; max-width: 58%; padding: 22px 30px; }
.tablero-banner__titulo { margin: 0; font-size: 1.85rem; line-height: 1.15; }
.tablero-banner__subtitulo { margin: 4px 0 6px; font-size: 1.12rem; font-weight: 700; }
.tablero-banner__apoyo { margin: 0; font-size: .86rem; color: var(--texto-tenue); max-width: 40rem; }
.tablero-banner__apoyo a { color: var(--verde-medio); }
.tablero-banner__lema {
    position: relative;
    margin: 0;
    padding: 0 40px;
    max-width: 360px;
    color: #fff;
    font-size: 1.28rem;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}
.tablero-banner__lema b { color: #F5C842; font-weight: 700; }
@media (max-width: 991.98px) {
    .tablero-banner { min-height: 0; }
    .tablero-banner__texto { max-width: 100%; padding: 18px 20px; }
    .tablero-banner__lema { display: none; }
    .tablero-banner {
        background:
            linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .92) 60%, rgba(255, 255, 255, .55) 100%),
            url("../img/paisaje.jpg") 55% 78% / cover no-repeat;
    }
}

/* Filtros */
.filtros {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 12px 16px;
    align-items: center;
    padding: 14px 18px;
    margin-bottom: 16px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 12px;
    box-shadow: var(--sombra-tarjeta);
}
.filtros__campo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.filtros__icono { width: 22px; height: 22px; flex-shrink: 0; color: var(--verde-medio); }
.filtros__control { flex: 1; min-width: 0; }
.filtros__control .form-label {
    display: block;
    margin: 0 0 2px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--texto);
}
.filtros__control .form-select,
.filtros__control .form-control { font-size: .84rem; padding-top: .28rem; padding-bottom: .28rem; }
.filtros__fechas {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding-top: 10px;
    border-top: 1px dashed var(--borde);
}
.filtros__fechas .filtros__campo { flex: 0 1 260px; }
.filtros__resumen {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 10px;
    border-top: 1px dashed var(--borde);
    font-size: .78rem;
    color: var(--texto-tenue);
}
.btn-limpiar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    background: #EEF6F0;
    border: 1px solid var(--verde-medio);
    color: var(--verde-monte);
    font-size: .86rem;
}
.btn-limpiar:hover { background: var(--verde-tinte); color: var(--verde-monte); border-color: var(--verde-monte); }
.btn-limpiar svg { width: 16px; height: 16px; }
@media (max-width: 1399.98px) {
    .filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .filtros .btn-limpiar { justify-self: start; }
}
@media (max-width: 767.98px) {
    .filtros { grid-template-columns: 1fr; }
}

/* Indicadores */
.indicadores {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
@media (max-width: 1399.98px) { .indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .indicadores { grid-template-columns: 1fr; } }
.indicador {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 16px 16px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 12px;
    box-shadow: var(--sombra-tarjeta);
}
.indicador__icono {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E4F1E7;
    color: #1D6D48;
}
.indicador__icono svg { width: 26px; height: 26px; }
.indicador--ocre .indicador__icono { background: #FFEFDF; color: #C2761D; }
.indicador--amarillo .indicador__icono { background: #FFF2D8; color: #B88512; }
.indicador__cuerpo { min-width: 0; }
.indicador__valor {
    display: block;
    font-size: 1.72rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}
.indicador__valor--fecha { font-size: 1.22rem; padding: .22rem 0; }
.indicador__etiqueta { display: block; font-size: .86rem; font-weight: 700; line-height: 1.2; }
.indicador__nota { display: block; margin-top: 1px; font-size: .74rem; color: var(--texto-tenue); }
.indicadores.cargando .indicador__valor { opacity: .45; transition: opacity .15s ease; }

/* Gráficos */
.fila-graficos {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 1399.98px) { .fila-graficos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fila-graficos > :last-child { grid-column: 1 / -1; } }
@media (max-width: 767.98px) { .fila-graficos { grid-template-columns: 1fr; } }
.fila-graficos .card { margin-bottom: 0; }
.card-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
}
.card-titulo__icono { width: 20px; height: 20px; flex-shrink: 0; color: var(--verde-medio); }
.card-titulo__texto { flex: 1; min-width: 0; }
.card-titulo__selector { width: auto; font-size: .8rem; padding-top: .2rem; padding-bottom: .2rem; }
.card-titulo__texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Selector segmentado (Por municipio | Por observatorio) */
.segmentado {
    display: inline-flex;
    margin-bottom: 8px;
    border: 1px solid #D3DAD3;
    border-radius: 8px;
    overflow: hidden;
}
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado label {
    margin: 0;
    padding: .28rem .8rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--texto-tenue);
    cursor: pointer;
    background: #fff;
}
.segmentado label + input + label { border-left: 1px solid #D3DAD3; }
.segmentado input:checked + label { background: var(--verde-tinte); color: var(--verde-monte); }
.segmentado input:focus-visible + label { outline: 2px solid var(--verde-activo); outline-offset: -2px; }
.fila-graficos .card-body { padding: 14px 16px 12px; }
.grafico { position: relative; height: 310px; }
.grafico--dona { height: 310px; }
.grafico--linea { height: 310px; }
.sin-datos {
    margin: 0;
    padding: 48px 8px;
    text-align: center;
    color: var(--texto-tenue);
    font-size: .9rem;
}

/* Población afectada */
.poblacion { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 22px; padding: 4px 4px; }
@media (max-width: 1199.98px) { .poblacion { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .poblacion { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.poblacion__item { display: flex; align-items: center; gap: 14px; min-width: 0; }
.poblacion__icono {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tinte);
    color: var(--tono);
}
.poblacion__icono svg { width: 26px; height: 26px; }
.poblacion__cuerpo { flex: 1; min-width: 0; }
.poblacion__valor { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.poblacion__etiqueta { display: block; font-size: .8rem; font-weight: 600; line-height: 1.2; }
.poblacion__barra { height: 6px; margin-top: 7px; border-radius: 3px; background: var(--tinte); overflow: hidden; }
.poblacion__barra > span { display: block; height: 100%; border-radius: 3px; background: var(--tono); transition: width .3s ease; }

/* Nota pública */
.nota-publica {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    margin-bottom: 0;
    background: #DCEAF5;
    border: 1px solid #C8DCEC;
    border-radius: 12px;
    color: #2A4660;
    font-size: .82rem;
    line-height: 1.4;
}
.nota-publica > svg { width: 22px; height: 22px; flex-shrink: 0; color: #2B6CB0; }
.nota-publica__texto { flex: 1; margin: 0; }
.nota-publica .btn { flex-shrink: 0; }
@media (max-width: 767.98px) { .nota-publica { flex-wrap: wrap; } .nota-publica .btn { width: 100%; } }

/* --- Tablas y otros -------------------------------------------------- */
.table > :not(caption) > * > * { padding-top: .7rem; padding-bottom: .7rem; }
.table-light { --bs-table-bg: #F4F7F4; }

/* --- Reajustes de Bootstrap para las demás plantillas ------------------ */
.bg-primary, .text-bg-primary { background-color: var(--verde-monte) !important; }
.text-primary { color: var(--verde-medio) !important; }
.btn-link { color: var(--verde-medio); }
.btn-link:hover { color: var(--verde-monte); }
.card-header.bg-primary { border-radius: 12px 12px 0 0 !important; }
.form-check-input:checked { background-color: var(--verde-monte); border-color: var(--verde-monte); }