/*Defino label font-family param que por defecto utilice Manrope en todo el body. */
@font-face
{
    font-family: 'Manrope';
    src: url(./fonts/Manrope/Manrope-Regular.otf);
}

html
{
    font-family: 'Manrope', sans-serif !important;
}

body
{
    font-family: 'Manrope', sans-serif !important;
    background-color: #f4f6f8; /* gris MUY suave */
}
 

code, kbd, pre, samp
{
    font-family: 'Manrope', monospace !important;
}

.text-monospace
{
    font-family: 'Manrope', monospace !important;
}

.tooltip
{
    font-family: 'Manrope', sans-serif !important;
}


.popover
{
    font-family: 'Manrope', sans-serif !important;
}

button, input, optgroup, select, textarea
{
    /*font-family: 'Manrope', sans-serif !important;*/
    font-family: inherit
}

.breadcrumb
{
    background-color: #2b3e4c;
}

.breadcrumb-item.active
{
    color: var(--naturalnqn);
}

.breadcrumb-item > a
{
    color:var(--naturalnqn)
}

.breadcrumb-item > a:hover
{
    color: var(--verdenqn)
}

/*.card-title > a
{
    color: var(--defaultnqn)
}*/
.card-title > a:hover
{
    color: var(--verdenqn)
}
:root
{
    /*Nuevos 2024*/

    --verdenqn: #87b867;
    --naturalnqn: #f4dfb9;
    --natural2nqn: #fcf2dc;
    --defaultnqn: #2b3e4c;
}
/*
    backgrounds
*/
 
.background-verde
{
    background-color: var(--verdenqn) !important;
}


.background-natural
{
    background-color: var(--naturalnqn) !important;
}

.background-natural2
{
    background-color: var(--natural2nqn) !important;
}

.background-defaultnqn
{
    background-color: var(--defaultnqn) !important;
}

.background-img-edificio
{
    background-image: url("../Imagenes/carrousel/catastro_carrousel_1.jpg");
}

/*
    bordes  
*/

.border-verde
{
    border-color: var(--verdenqn) !important;
}

.border-natural
{
    border-color: var(--naturalnqn) !important;
}

.border-natural2
{
    border-color: var(--natural2nqn) !important;
}


.border-defaultnqn
{
    border-color: var(--defaultnqn) !important;
}

/*text*/


.text-verde
{
    color: var(--verdenqn) !important;
}

a.text-verde:hover, a.text-verde:focus
{
    color: var(--defaultnqn) !important;
}

.text-natural
{
    color: var(--naturalnqn) !important;
}


a.text-natural:hover, a.text-natural:focus, a > i.text-natural:hover
{
    color: var(--natural2nqn) !important;
}

.text-natural2
{
    color: var(--natural2nqn) !important;
} 

a.text-natural2:hover, a.text-natural2:focus
{
    color: var(--naturalnqn) !important;
}

.text-defaultnqn
{
    color: var(--defaultnqn) !important;
}

a.text-defaultnqn:hover, a.text-defaultnqn:focus
{
    color: var(--naturalnqn) !important;
}

/*add*/
a.text-white:hover, a.text-white:focus
{
    color: var(--defaultnqn) !important;
}


.alert-defaultnqn
{
    color: var(--natural2nqn);
    background-color: var(--defaultnqn);
    border-color: var(--verdenqn);
}

.alert-naturalnqn
{
    color: var(--defaultnqn);
    background-color: var(--naturalnqn);
    border-color: var(--verdenqn);
}
 

/*Botón ir al inicio*/
.back-to-top
{
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: none;
}

/* Pading era por defecto en 15px*/
.padding-min
{
    padding-right: 0em !important;
    padding-left: 0em !important
}
/*.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover
{
    color: var(--naturalnqn) !important;
}


*/
/*.btn:hover, .btn:focus, .btn:active, .btn.activ
{
    color: var(--naturalnqn) !important;
}
 
*/

 .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover
{
    color: var(--natural2nqn) !important;
}  


.dropdown-item:focus, .dropdown-item:hover
{
    background-color: var(--defaultnqn) !important;
    
}

.logo-nqn
{
    max-width: 450px;
    height: auto;
}

@media (max-width: 576px)
{ /* pantallas chicas */
    .logo-nqn
    {
        max-width: 200px;
    }
}

.nav-pills .nav-link
{
    border-radius: 0;
    color: var(--naturalnqn);
    font-weight: 500;
    text-align: left;
    background-color: var(--defaultnqn); /* Fondo principal oscuro */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-pills .nav-link:hover
{
    background-color: rgba(43, 62, 76, 0.2); /* tono suave del defaultnqn */
    color: var(--natural2nqn);
}

.nav-pills .nav-link.active
{
    background-color: var(--verdenqn);
    color: var(--naturalnqn) !important; /* Texto claro consistente */
    font-weight: 600;
}

.mapa-thumb
{
    width: 100%;
    height: 200px; /* Altura un poco más grande */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa; /* Fondo claro para imágenes pequeñas */
    border-bottom: 1px solid #dee2e6;
    overflow: hidden;
    padding: 5px;
}

.mapa-thumb img
{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Evita recortes y distorsión */
    transition: transform 0.25s ease;
}

.mapa-thumb img.hover-shadow:hover
{
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.mapa-item .card
{
    min-height: 280px; /* Aumentamos para compensar la imagen más alta */
}

/* --- Diseño responsive --- */
@media (max-width: 768px)
{
    .mapa-thumb
    {
        height: 160px; /* Más baja en pantallas pequeñas */
    }

    .mapa-item .card
    {
        min-height: 240px;
    }
}


/*
.btn-secondary:hover
{
    color: var(--naturalnqn) !important;
    background-color: var(--naturalnqn) !important;
    border-color: var(--naturalnqn) !important;
}*/

/* fondos**/

.section-white
{
    background-color: #ffffff;
    border-radius: 12px;
    padding: 3rem 2rem;
    margin-bottom: 3rem;
}
.section-light
{
    background-color: #ffffff;
    border-radius: 3px;
    padding: 1rem 0.5rem;
}

.section-soft
{
    background-color: #eef2f4;
    border-radius: 3px;
    padding: 1rem 0.5rem;
}




/* =========================
   HOME – CARDS VERDES (OFICIALES)
========================= */

.card-home
{
    border-radius: 16px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover general */
.hover-scale:hover
{
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* Icono caja + flecha */
.icon-home
{
    font-size: 1.6rem;
    color: var(--naturalnqn); /* mismo color que "Consultar" */
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Hover del icono */
.hover-scale:hover .icon-home
{
    opacity: 1;
    transform: translateX(3px);
}



/* =========================
   HOME – CARDS INSTITUCIONALES SECUNDARIAS
========================= */

.home-section-card
{
    background-color: var(--natural2nqn); /* fondo clarito */
    border: 1px solid rgba(43, 62, 76, 0.25);
    border-radius: 14px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
}

    .home-section-card h5
    {
        color: var(--defaultnqn);
        font-weight: 700;
    }

    .home-section-card p
    {
        color: var(--defaultnqn);
        opacity: 0.85;
    }

    /* Hover */
    .home-section-card:hover
    {
        transform: translateY(-3px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
    }

    /* Botón */
    .home-section-card .btn
    {
        background-color: var(--defaultnqn);
        color: var(--naturalnqn);
        border: none;
    }

    /* Hover botón */
    .home-section-card:hover .btn
    {
        background-color: var(--verdenqn);
        color: var(--defaultnqn);
    }



 
/* ==============================
   HOME – CARDS DE CONSULTAS
   ============================== */

.home-blue-card .card
{
    background-color: var(--defaultnqn);
    color: var(--naturalnqn);
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    transition: all 0.25s ease;
    height: 100%;
}

.home-blue-card h5
{
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--naturalnqn);
}

.home-blue-card p
{
    font-size: 0.85rem;
    opacity: 0.85;
    margin-bottom: 0;
}

/* Hover */
.home-blue-card:hover .card
{
    background-color: #2b3e4c; /* tono apenas más oscuro */
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}