html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}


h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.3rem;
}

#divMaestro {
    overflow: auto;
    overflow: -x;
    margin-bottom: 30px;
}

.fullscreen {
    background: #808080;
    opacity: 0.4;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

/*#mapaEntidades {
    height: 700px;
}*/

/*#mapaEntidades {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;*/ /* Asegúrate de que el mapa tenga una altura definida */
/*}*/

#mapaEntidades {
    position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
    height: 700px; /* Asegúrate de que el mapa tenga una altura definida */
}



#tablaEntidades tbody tr {
    cursor: pointer;
}

#tablaEntidades th {
    /* Estilos para encabezados de columna */
    font-size: 1rem;
}

#tablaEntidades td {
    /* Estilos para celdas */
    font-size: 0.9rem;
}

/* Estilos personalizados para los encabezados de la tabla */
.custom-header-datatable {
    /*font-size: 10px;*/
    font-size: 0.9rem;
    font-weight: bold;
}

/* Que el input de búsqueda sea más estrecho */
.dataTables_wrapper .dataTables_filter input {
    width: 200px; /* ajústalo al valor que necesites */
    display: inline-block;
    margin-left: 0.5em; /* un poco de espacio respecto al label “Buscar:” */
}

/* Opcional: alinear footer para que info y filtro queden a los extremos */
.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5em;
}

/*.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/ /* Ajusta el overlay para centrarlo exactamente */
/* Estilos adicionales para el overlay según sea necesario */
/*}*/
.nombreEntidadSidebar {
    max-width: 250px;
    word-wrap: break-word;
}

.icono-giratorio {
    animation: girar 1s linear infinite;
}

.fondo-gris {
    background-color: #f1f1f1 !important;
}

.checkMapa {
    border-radius: 0.25rem;
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 70px;
}

@keyframes girar {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/*Leyenda*/
.legendExpedientes {
    background: linear-gradient(to right, #FFFFFF, /* Blanco */
    #FFFFE5, /* 20% más bajo */
    #FFFFCC, /* 30% más bajo */
    #FEF0B5, /* 40% más bajo */
    #FEE391, /* 50% más bajo */
    #FED976, /* 60% más bajo */
    #FEB24C, /* 70% más bajo */
    #FD8D3C, /* 80% más bajo */
    #FC4E2A, /* 90% más bajo */
    #800026 /* Granate oscuro */
    );
    height: 20px;
    width: 100%;
}

.legendRegistro {
    background: linear-gradient(to right, #FF7E96, /* Blanco */
    #FF6A8A, /* 20% más bajo */
    #FF577D, /* 30% más bajo */
    #F54B71, /* 40% más bajo */
    #E34765, /* 50% más bajo */
    #CF4258, /* 60% más bajo */
    #BB3E4C, /* 70% más bajo */
    #A7393F, /* 80% más bajo */
    #942533, /* 90% más bajo */
    #800026 /* Rojo oscuro */
    );
    height: 20px;
    width: 100%;
}

.legendPoblacion {
    background: linear-gradient(to right, #FFFFFF, /* Blanco */
    #CCF2FF, /* 20% más bajo */
    #99E6FF, /* 30% más bajo */
    #66D9FF, /* 40% más bajo */
    #33CCFF, /* 50% más bajo */
    #17A2B8, /* 60% más bajo */
    #006B80, /* 70% más bajo */
    #004C66, /* 80% más bajo */
    #00334D, /* 90% más bajo */
    #001A26 /* Azul oscuro */
    );
    height: 20px;
    width: 100%;
}

.legend-text.left {
    margin-left: 10px; /* Espacio al lado izquierdo */
    color: black;
}

.legend-text.right {
    margin-right: 10px; /* Espacio al lado derecho */
    color: white;
}

/*#infoPanel table.table-sm th,
#infoPanel table.table-sm td {
    padding: 5px;*/ /* Reducir el relleno en cabeceras y celdas de la tabla */
/*}*/

#infoPanelPoblacion table.table-sm {
    font-size: 1em; /* Ajusta el tamaño de la fuente según tus necesidades */
}

.sinMargen {
    margin-bottom: 0px !important;
}

/* BOTONES DE SELECT 2 EN LINEA */
.select-container {
    display: flex;
    align-items: center; /* Alinea verticalmente los elementos del contenedor */
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
}

    .select-container .select2 {
        width: 80% !important; /* Ajusta el ancho del select2, ¡importante para sobreescribir estilos de select2! */
    }

    .select-container button {
        width: 18%; /* Ajusta el ancho del botón */
        height: 38px; /* Asegura que el botón tenga la misma altura que el select */
        margin-left: 1%; /* Añade un pequeño espacio entre el select y el botón */
    }

/*
.select2-container--default .select2-results > .select2-results__options {
    max-height: 550px;
}*/


#EntidadInicial {
    border: 1px solid lightgray; /* Borde gris medio */
    border-radius: 5px; /* Bordes redondeados */
    padding: 8px; /* Opcional: agrega un poco de relleno alrededor del icono */
    text-decoration: none; /* Elimina el subrayado del enlace */
    margin-right: 8px; /* Margen derecho */
}

    #EntidadInicial:hover {
        cursor: pointer;
        background-color: white; /* Fondo blanco al hacer hover */
    }

#refrescarCacheEntidad {
    border: 1px solid lightgray; /* Borde gris medio */
    border-radius: 5px; /* Bordes redondeados */
    padding: 8px; /* Opcional: agrega un poco de relleno alrededor del icono */
    text-decoration: none; /* Elimina el subrayado del enlace */
    margin-right: 8px; /* Margen derecho */
}

    #refrescarCacheEntidad:hover {
        cursor: pointer;
        background-color: white; /* Fondo blanco al hacer hover */
    }

/* Alinear textos */
.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

#top-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*background: rgba(255, 255, 255, 0.8);*/
    text-align: center;
    padding: 40px;
}

#map {
    height: calc(100vh - 50px); /* Adjust according to the height of the top div */
    width: 100%;
}

#graficoWidgetContratos {
    width: 100%;
    height: 200px;
    max-height: 200px;
    display: block;
    box-sizing: border-box;
}

/*#top-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    text-align: center;
    padding: 10px;
}
*/

/* Registros */

.bg-no-presencial > td { /* Usando el selector de hijo directo para mayor especificidad */
    background-color: #e0ffe0 !important; /* Verde muy claro */
}

.bg-presencial > td { /* Usando el selector de hijo directo para mayor especificidad */
    background-color: #ffe0e0 !important; /* Rojo muy claro */
    /* Contenedor de cada contrato, separa unos de otros */
}

#tablaContratosDetalle tbody tr.selected {
    background-color: #ffeeba !important;
}

/* 1) Quita el icono por defecto SOLO EN CONTRATOS */
#tablaContratosDetalle td.details-control {
    background-image: none !important;
    cursor: pointer;
    position: relative; /* para contener el ::before */
}

    /* 2) Ojo “abierto” */
    /*td.details-control::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 16px;*/ /* el tamaño que quieras */
        /*height: 16px;
        margin-right: 6px;
        background-image: url('/img/eye-open.svg');
        background-size: contain;
        background-repeat: no-repeat;
    }*/

/* Ojo abierto (fila cerrada) SOLO EN CONTRATOS */
#tablaContratosDetalle td.details-control::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f06e"; /* 👁️ */
    color: #000000;
}

/* Ojo cerrado (fila expandida) SOLO EN CONTRATOS */
#tablaContratosDetalle tr.shown td.details-control::before {
    content: "\f070"; /* 🚫👁️ */
}

/* ✅ NUEVO: EVITAR que aparezca el icono del ojo en la tabla de Registros */
#tablaRegistros td.details-control {
    background: none !important;
    cursor: pointer;
}

#tablaRegistros td.details-control::before {
    content: none !important; /* ✅ ELIMINAR el ::before */
}

#tablaRegistros tr.shown td.details-control {
    background: none !important;
}

#tablaRegistros tr.shown td.details-control::before {
    content: none !important; /* ✅ ELIMINAR el ::before */
}

.dataTables_length {
    font-size: 0.9rem;
}

.dataTables_filter {
    font-size: 0.9rem;
}

.dataTables_paginate {
    font-size: 0.9rem;
}

.dataTables_info {
    font-size: 0.9rem;
}

#tablaContratosDetalle th {
    white-space: normal !important;
    font-size: 0.9rem;
}

#tablaContratosDetalle td {
    white-space: normal !important;
    font-size: 0.9rem;
}

/* Para que las celdas de Lote hagan wrap en varias líneas */
#tablaLotes td:nth-child(2) {
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 0.9rem;
}

/* Opcional: si quieres que los encabezados también hagan wrap */
#tablaLotes th {
    white-space: normal !important;
    font-size: 0.9rem;
}

#tablaLotes td {
    white-space: normal !important;
    font-size: 0.9rem;
}

.titulo-contrato {
    background-color: #e5e5e5 !important;
}

/* Asegúrate de que esta regla se aplique después de la del table row-hover */
#tablaLotes tbody tr .titulo-contrato:hover {
    background-color: #ddd !important;
}

/* estilo único para la fila de contrato */
#tablaLotes tr.contract-header {
    background-color: #f0f0f0;
}

    #tablaLotes tr.contract-header td {
        font-size: 0.9rem;
        color: #212529;
        white-space: normal;
        word-wrap: break-word;
    }

/* Breakpoints Bootstrap 4.6 (mobile-first)
   sm: 576px, md: 768px, lg: 992px, xl: 1200px  */

/* Base: móvil (xs) */

.navbar h3 {
    font-size: 1.1rem !important; /* ~20px */
}



.small-box h3 {
    font-size: 1.3rem!important; /* ~20px */
    line-height: 1.5;
    margin: 0;
    
}

#mapaPoblacion {
    position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
    /* height: 576px; */ /* Asegúrate de que el mapa tenga una altura definida */
    height: 200px;
}

#mapaRegistro {
    position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
    height: 200px;
}

#mapaExpedientes {
    position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
    height: 200px;
}


#overlayMapas {
    z-index: 1000;
}


/* ≥576px (sm) */
@media (min-width: 576px) {
    .navbar h3 {
        font-size: 1.3rem !important; /* ~20px */
    }

    .small-box h3 {
        font-size: 1.3rem!important;
    }
    /* ~24px */

    #mapaPoblacion {
        position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
        /* height: 576px; */ /* Asegúrate de que el mapa tenga una altura definida */
        height: 440px;
    }

    #mapaRegistro {
        position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
        height: 440px;
    }

    #mapaExpedientes {
        position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
        height: 440px;
    }
}

/* ≥768px (md) */
@media (min-width: 768px) {

    .navbar h3 {
        font-size: 1.5rem !important; /* ~20px */
    }

    .small-box h3 {
        font-size: 1.5rem!important;
    }
    /* ~27px (tu valor) */

    #mapaPoblacion {
        position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
        /* height: 576px; */ /* Asegúrate de que el mapa tenga una altura definida */
        height: 440px;
    }

    #mapaRegistro {
        position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
        height: 440px;
    }

    #mapaExpedientes {
        position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
        height: 440px;
    }

}

/* ≥992px (lg) */
@media (min-width: 992px) {
    .navbar h3 {
        font-size: 1.7rem !important; /* ~20px */
    }

    .small-box h3 {
        font-size: 1.7rem!important;
    }
    /* ~32px */

    #mapaPoblacion {
        position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
        /* height: 576px; */ /* Asegúrate de que el mapa tenga una altura definida */
        height: 440px;
    }

    #mapaRegistro {
        position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
        height: 440px;
    }

    #mapaExpedientes {
        position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
        height: 440px;
    }
}

/* ≥1200px (xl) */
@media (min-width: 1200px) {

    .navbar h3 {
        font-size: 1.7rem !important; /* ~20px */
    }

    .small-box h3 {
        font-size: 1.6rem!important;
    }

    #mapaPoblacion {
        position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
        /* height: 576px; */ /* Asegúrate de que el mapa tenga una altura definida */
        height: 440px;
    }

    #mapaRegistro {
        position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
        height: 440px;
    }

    #mapaExpedientes {
        position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
        height: 440px;
    }
}

/* (opcional) ≥1400px "xxl" personalizado para pantallas muy grandes */
@media (min-width: 1400px) {
    .navbar h3 {
        font-size: 1.9rem !important; /* ~20px */
    }

    .small-box h3 {
        font-size: 1.4rem!important;
    }

    .col-xxl-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    .col-xxl-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .order-xxl-1 {
        order: 1 !important;
    }

    .order-xxl-2 {
        order: 2 !important;
    }

    .order-xxl-3 {
        order: 3 !important;
    }

    #mapaPoblacion {
        position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
        /* height: 576px; */ /* Asegúrate de que el mapa tenga una altura definida */
        height: 440px;
    }

    #mapaRegistro {
        position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
        height: 440px;
    }

    #mapaExpedientes {
        position: relative; /* Necesario para que el posicionamiento absoluto del hijo funcione correctamente */
        height: 440px;
    }

}


.small-box .icon > i {
    font-size: 50px !important;
}

/* Estilos para el mensaje informativo de widgets */
.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.alert-info .fas {
    color: #17a2b8 !important;
}

/* Mejora visual para el mensaje informativo */
.widget-info-message {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background: linear-gradient(135deg, #d1ecf1 0%, #e8f4f8 100%);
}

.widget-info-message small {
    opacity: 0.8;
}

.widget-info-message .fas.fa-info-circle {
    animation: pulse-info 2s ease-in-out infinite;
}

@keyframes pulse-info {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Forzar que Select2 ocupe todo el ancho disponible */
.select2-container {
    display: block !important;
    width: 100% !important;
}

/* =========================================================================
	   ESTILOS RESPONSIVE PARA NAVBAR PRINCIPAL
	   ========================================================================= */
/* ✅ Contenedor principal del navbar */
.navbar-principal-custom {
    padding: 0.5rem 1rem;
}

.navbar-content-wrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* ✅ Permitir wrap para que los elementos salten de línea */
    align-items: center;
    gap: 0.5rem;
}

/* ✅ Primera fila: Botón Home + Título Entidades + Controles (Idioma + Login) */
.navbar-controls-row {
    display: flex;
    flex-wrap: wrap; /* ✅ Permitir wrap interno */
    align-items: center;
    width: 100%;
    gap: 0.5rem;
}

.navbar-home-btn {
    flex-shrink: 0;
}

/* ✅ Contenedor de títulos de entidades - puede hacer wrap */
.navbar-entities-row {
    flex: 1 1 auto; /* ✅ Puede crecer y encogerse */
    min-width: 0; /* ✅ Permitir que se encoja */
    display: flex;
    flex-wrap: wrap; /* ✅ Permitir que las entidades salten de línea */
    align-items: center;
    gap: 0.25rem;
}

.navbar-entity-title {
    font-size: 1rem;
    font-weight: bold;
    text-transform: capitalize;
    word-break: break-word;
    line-height: 1.4; /* ✅ Mejor legibilidad cuando hace wrap */
}

/* ✅ Controles de usuario SIEMPRE a la derecha */
.navbar-user-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto; /* ✅ Empujar siempre a la derecha */
    flex-shrink: 0; /* ✅ No permitir que se encoja */
}

/* =========================================================================
	   MEDIA QUERIES PARA RESPONSIVE
	   ========================================================================= */

/* 📱 MÓVIL (hasta 576px) */
@media (max-width: 575.98px) {
    .navbar-entity-title {
        font-size: 0.85rem;
    }

    .navbar-principal-custom {
        padding: 0.5rem;
    }

    /* Ocultar texto "Bienvenido" en móvil para ahorrar espacio */
    .navbar-user-controls .btn span {
        display: none;
    }

    .navbar-user-controls .btn i {
        margin-right: 0 !important;
    }

    /* ✅ En móvil, permitir que la entidad hija baje de línea */
    .navbar-controls-row {
        justify-content: space-between;
    }
}

/* 📱 TABLET (576px a 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .navbar-entity-title {
        font-size: 0.95rem;
    }
}

/* 💻 DESKTOP PEQUEÑO (768px a 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar-entity-title {
        font-size: 1.1rem;
    }

    /* ✅ La entidad hija puede saltar de línea si no cabe */
    .navbar-entities-row {
        max-width: calc(100% - 200px); /* ✅ Dejar espacio para los controles */
    }
}

/* 🖥️ DESKTOP (992px en adelante) */
@media (min-width: 992px) {
    /* ✅ En desktop >= 992px, TODO en una sola línea sin wrap */
    .navbar-content-wrapper {
        flex-wrap: nowrap; /* ✅ NO permitir wrap */
    }

    .navbar-controls-row {
        flex-wrap: nowrap; /* ✅ NO permitir wrap */
        gap: 1rem;
    }

    .navbar-entities-row {
        flex-wrap: nowrap; /* ✅ NO permitir wrap */
        white-space: nowrap; /* ✅ Evitar saltos de línea en el texto */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navbar-entity-title {
        font-size: 1.25rem;
        white-space: nowrap;
    }

    .navbar-user-controls {
        gap: 0.75rem;
    }
}

/* 🖥️ DESKTOP GRANDE (1200px en adelante) */
@media (min-width: 1200px) {
    .navbar-entity-title {
        font-size: 1.4rem;
    }
}

/* =========================================================================
	   FIN ESTILOS NAVBAR RESPONSIVE
	   ========================================================================= */

/* Estilos para la barra de progreso apilada del widget de documentos */
.documentos-visual-bar .progress {
    border-radius: 5px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.documentos-visual-bar .progress-bar {
    transition: width 0.6s ease;
}

.documentos-visual-bar .documentos-labels small {
    font-size: 0.7rem;
    font-weight: 500;
}

.documentos-visual-bar .fas.fa-circle {
    font-size: 0.6rem;
    margin-right: 2px;
}

/* Estilos para la barra de progreso apilada del widget de registro */
.registro-visual-bar .progress {
    border-radius: 5px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.registro-visual-bar .progress-bar {
    transition: width 0.6s ease;
}

.registro-visual-bar .registro-labels small {
    font-size: 0.7rem;
    font-weight: 500;
}

.registro-visual-bar .fas.fa-circle {
    font-size: 0.6rem;
    margin-right: 2px;
}

/* Estilos para la barra de progreso apilada del widget de notificaciones */
.notificaciones-visual-bar .progress {
    border-radius: 5px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.notificaciones-visual-bar .progress-bar {
    transition: width 0.6s ease;
}

.notificaciones-visual-bar .notificaciones-labels small {
    font-size: 0.7rem;
    font-weight: 500;
}

.notificaciones-visual-bar .fas.fa-circle {
    font-size: 0.6rem;
    margin-right: 2px;
}

/* Estilos para la barra de progreso apilada del widget de contratos */
.contratos-visual-bar .progress {
    border-radius: 5px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.contratos-visual-bar .progress-bar {
    transition: width 0.6s ease;
}

.contratos-visual-bar .contratos-labels small {
    font-size: 0.7rem;
    font-weight: 500;
}

.contratos-visual-bar .fas.fa-circle {
    font-size: 0.6rem;
    margin-right: 2px;
}

/* Mejoras visuales generales para los widgets */
.small-box .documentos-visual-bar,
.small-box .registro-visual-bar,
.small-box .notificaciones-visual-bar,
.small-box .contratos-visual-bar {
    opacity: 0.9;
}

.small-box:hover .documentos-visual-bar,
.small-box:hover .registro-visual-bar,
.small-box:hover .notificaciones-visual-bar,
.small-box:hover .contratos-visual-bar {
    opacity: 1;
}

/* =========================================================================
   ESTILOS PÁGINA DE ERROR
   ========================================================================= */

.error-icon {
    font-size: 60px;
    margin-bottom: 20px;
}

.error-code {
    font-size: 80px;
    font-weight: bold;
    line-height: 80px;
}