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 */
}



/* COHERENCIA Y UNIFICACIÓN DE TIPOGRAFÍA EN TABLA DE ENTIDADES (0.85rem) */
#tablaEntidades th,
#tablaEntidades td,
#tablaEntidades tfoot th,
.dataTables_scrollHead th,
.dataTables_scrollFoot th,
.custom-header-datatable {
    font-size: 0.85rem !important;
}

#tablaEntidades th,
#tablaEntidades tfoot th,
.dataTables_scrollHead th,
.dataTables_scrollFoot th,
.custom-header-datatable {
    font-weight: 700;
    color: #111827;
}

#tablaEntidades td {
    font-weight: 400;
    color: #1f2937;
}

/* Estilos para seleccionabilidad nativa de filas en tablas de Contratos y Lotes */
#tablaContratosDetalle tbody tr,
#tablaLotes tbody tr {
    cursor: pointer;
}

#tablaContratosDetalle tbody tr.selected,
#tablaLotes tbody tr.selected {
    background-color: #dbeafe !important;
    color: #1e3a8a !important;
}

/* Estilos para cabecera limpia de tablaContratosDetalle */
#tablaContratosDetalle thead th {
    position: relative;
    vertical-align: top !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 8px !important;
    padding-right: 26px !important; /* Espacio nativo para controles de ordenación */
    font-size: 0.85rem !important;
    background-color: #f8fafc !important;
    height: auto !important;
    white-space: nowrap !important;
}

/* Quitar border-collapse separate de la tabla de lotes */
#tablaLotes {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

/* ========================================================
   RESPONSIVE ENHANCEMENTS FOR CARD HEADERS & TOOLS (MOBILE/TABLET)
   ======================================================== */
@media (max-width: 991.98px) {
    .card-header.d-flex {
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        position: relative;
    }

    .card-header.d-flex > .card-title {
        flex: 1 1 auto;
        min-width: 140px;
        line-height: 1.3;
        padding-right: 35px; /* Espacio para el boton de colapso */
        font-size: 0.88rem !important;
    }

    .card-header.d-flex > .card-tools {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 100%;
        margin-left: 0 !important;
        padding-top: 4px;
        gap: 6px !important;
    }

    .card-header.d-flex > .card-tools > [data-card-widget="collapse"] {
        position: absolute;
        top: 6px;
        right: 8px;
    }

    .card-header.d-flex > .card-tools .input-group {
        width: 150px !important;
        max-width: 150px !important;
        flex: 0 0 150px !important;
    }

    .card-header.d-flex > .card-tools .btn-group {
        flex-shrink: 0;
    }
}

@media (max-width: 575.98px) {
    /* Ocultar texto "Altura:" en movil */
    .card-header .card-tools .text-muted.small,
    .card-header .card-tools .text-white-50.small,
    .card-header-label-altura {
        display: none !important;
    }

    /* Recortar ancho del buscador en movil (ligeramente ampliado a 135px) */
    .card-header.d-flex > .card-tools .input-group {
        width: 135px !important;
        max-width: 135px !important;
        flex: 0 0 135px !important;
    }

    /* Ocultar texto de botones dejando solo iconos en movil */
    .card-header .card-tools .btn-sm .btn-text,
    .card-header .card-tools .btn-outline-info .btn-text,
    .card-header .card-tools .btn-outline-light .btn-text,
    .card-header .card-tools .btn-outline-warning .btn-text,
    .card-header .card-tools .btn-limpiar-filtros-tabla .btn-text {
        display: none !important;
    }

    /* Quitar margenes derechos de iconos en botones compacto en movil */
    .card-header .card-tools .btn .fas,
    .card-header .card-tools .btn .far {
        margin-right: 0 !important;
    }
}

/* Margenes verticales compactos alrededor de la tabla de entidades y widgets superiores */
#widgetstop .small-box {
    margin-bottom: 0.25rem !important;
}

#cardTablaEntidades {
    margin-bottom: 0.25rem !important;
}

/* Compactación de los 6 widgets inferiores (Notificaciones, Registro, Procedimientos, Expedientes, Contratos, Trámites) */
#widgetsi .small-box,
#widgetContratos, 
#widgetDocumentos, 
#widgetTramites,
#widgetNotificaciones, 
#widgetRegistro, 
#widgetProcedimientos {
    margin-bottom: 0.4rem !important;
}

#widgetsi .small-box .inner,
#widgetContratos .inner, 
#widgetDocumentos .inner, 
#widgetTramites .inner,
#widgetNotificaciones .inner, 
#widgetRegistro .inner, 
#widgetProcedimientos .inner {
    padding: 6px 10px !important;
}

#widgetsi .small-box h3,
#widgetContratos h3, 
#widgetDocumentos h3, 
#widgetTramites h3,
#widgetNotificaciones h3, 
#widgetRegistro h3, 
#widgetProcedimientos h3 {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    font-size: 1.35rem !important;
}

.notificaciones-visual-bar,
.registro-visual-bar,
.procedimientos-visual-bar,
.documentos-visual-bar,
.contratos-visual-bar,
.tramites-visual-bar {
    margin: 4px 0 !important;
}

/* 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);
    }
}

.legendExpedientes {
    background: linear-gradient(to right, #FFFBEB, #FDE68A, #FCD34D, #FBBF24, #F59E0B, #D97706, #B45309, #92400E, #78350F, #451A03);
    height: 20px;
    width: 100%;
}

.legendRegistroTelematico {
    background: linear-gradient(to right, #ECFDF5, #A7F3D0, #6EE7B7, #34D399, #10B981, #059669, #047857, #065F46, #064E3B);
    height: 20px;
    width: 100%;
}

.legendRegistroPresencial {
    background: linear-gradient(to right, #FFFBEB, #FDE68A, #FCD34D, #FBBF24, #F59E0B, #D97706, #B45309, #92400E, #78350F);
    height: 20px;
    width: 100%;
}

.legendRegistroDigitalizacion {
    background: linear-gradient(to right, #7C2D12, #C2410C, #F97316, #FBBF24, #FDE68A, #D1FAE5 52%, #34D399, #10B981, #047857, #022C22);
    height: 20px;
    width: 100%;
}

.legendRegistro {
    background: linear-gradient(to right, #ECFDF5, #A7F3D0, #6EE7B7, #34D399, #10B981, #059669, #047857, #065F46, #064E3B);
    height: 20px;
    width: 100%;
}

.legendPoblacion {
    background: linear-gradient(to right, #F0F9FF, #BAE6FD, #7DD3FC, #38BDF8, #0EA5E9, #0284C7, #0369A1, #075985, #0C4A6E, #082F49);
    height: 20px;
    width: 100%;
}

.legend-text.left {
    margin-left: 10px;
    color: #1f2937;
    font-weight: 600;
    font-size: 0.85rem;
}

.legend-text.right {
    margin-right: 10px;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    font-weight: 600;
    font-size: 0.85rem;
}

/* ==========================================
   TARJETA FLOTANTE (INFOCARD) DEL MAPA ÚNICO
   ========================================== */
#mapaInfoCardFlotante {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 330px;
    max-width: 90%;
    max-height: calc(100% - 24px);
    overflow-y: auto;
    z-index: 1050;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(229, 231, 235, 0.85);
    border-radius: 14px;
    box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.18), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 14px 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

/* Scrollbar personalizada fina para la InfoCard */
#mapaInfoCardFlotante::-webkit-scrollbar {
    width: 5px;
}
#mapaInfoCardFlotante::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
#mapaInfoCardFlotante::-webkit-scrollbar-track {
    background: transparent;
}

#mapaInfoCardFlotante .card-title-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

#mapaInfoCardFlotante .card-title-header h5 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}

#mapaInfoCardFlotante .card-title-header .code-badge {
    font-size: 0.75rem;
    font-weight: 600;
    background: #e0f2fe;
    color: #0369a1;
    padding: 2px 6px;
    border-radius: 4px;
}

#mapaInfoCardFlotante .btn-close-infocard {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.2s;
}

#mapaInfoCardFlotante .btn-close-infocard:hover {
    color: #111827;
}

#mapaInfoCardFlotante .stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    margin-bottom: 4px;
}

#mapaInfoCardFlotante .stat-label {
    color: #4b5563;
    font-weight: 500;
}

#mapaInfoCardFlotante .stat-value {
    font-weight: 700;
    color: #111827;
}

/* SECCIONES Y SEPARADORES EN INFOCARD */
#mapaInfoCardFlotante .infocard-section {
    border-top: 1px dashed #e5e7eb;
    margin-top: 8px;
    padding-top: 8px;
}

#mapaInfoCardFlotante .infocard-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #4b5563;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#mapaInfoCardFlotante .infocard-section-title .badge,
#mapaInfoCardFlotante .infocard-badge {
    font-size: 0.875rem;
    font-weight: 700;
    color: #111827 !important;
    background-color: #e5e7eb;
    border: 1px solid #d1d5db;
    padding: 2px 8px;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* BARRAS COMPARATIVAS DE PROPORCIÓN BICOLOR POR WIDGET */
.proportion-bar-container {
    margin-top: 6px;
    margin-bottom: 8px;
    background: #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    height: 10px;
    display: flex;
}

/* Registro (Verde / Amarillo) */
.bar-reg-telematico { background: #10b981; height: 100%; transition: width 0.4s ease; }
.bar-reg-presencial { background: #f59e0b; height: 100%; transition: width 0.4s ease; }

/* Contratos (Azul / Morado) */
.bar-contratos-menores { background: #3b82f6; height: 100%; transition: width 0.4s ease; }
.bar-contratos-nomenores { background: #8b5cf6; height: 100%; transition: width 0.4s ease; }

/* Notificaciones (Cian / Naranja) */
.bar-notif-electronicas { background: #06b6d4; height: 100%; transition: width 0.4s ease; }
.bar-notif-papel { background: #f97316; height: 100%; transition: width 0.4s ease; }

/* SUB-CONTROLES Y CONMUTADORES EN LA CABECERA DEL MAPA */
.map-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.subnav-registro {
    display: inline-flex;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 2px;
}

.subnav-registro .subnav-btn {
    border: none;
    background: transparent;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4b5563;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.subnav-registro .subnav-btn.active.btn-telematico {
    background: #10b981;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.subnav-registro .subnav-btn.active.btn-presencial {
    background: #f59e0b;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.mode-calc-switch {
    display: inline-flex;
    background: #e5e7eb;
    border-radius: 8px;
    padding: 2px;
}

.mode-calc-switch .mode-btn {
    border: none;
    background: transparent;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4b5563;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.mode-calc-switch .mode-btn.active {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/*#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;
    
}

#mapaUnico,
#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 */

    #mapaUnico,
    #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: 458px;
    }

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

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

/* ≥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) */

    #mapaUnico,
    #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: 458px;
    }

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

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

}

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

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

    #mapaUnico,
    #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: 458px;
    }

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

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

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

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

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

    #mapaUnico,
    #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: 458px;
    }

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

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

/* (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;
    }

    #mapaUnico,
    #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: 458px;
    }

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

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

}


.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 las barras de progreso apiladas de los widgets */
.documentos-visual-bar .progress,
.registro-visual-bar .progress,
.notificaciones-visual-bar .progress,
.contratos-visual-bar .progress,
.procedimientos-visual-bar .progress,
.tramites-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,
.registro-visual-bar .progress-bar,
.notificaciones-visual-bar .progress-bar,
.contratos-visual-bar .progress-bar,
.procedimientos-visual-bar .progress-bar,
.tramites-visual-bar .progress-bar {
    transition: width 0.6s ease;
}

/* Unificación del tamaño de las etiquetas en todos los widgets */
.documentos-visual-bar .documentos-labels small,
.registro-visual-bar .registro-labels small,
.notificaciones-visual-bar .notificaciones-labels small,
.contratos-visual-bar .contratos-labels small,
.procedimientos-visual-bar .procedimientos-labels small,
.tramites-visual-bar .tramites-labels small {
    font-size: 0.82rem;
    font-weight: 500;
}

.documentos-visual-bar .fas.fa-circle,
.registro-visual-bar .fas.fa-circle,
.notificaciones-visual-bar .fas.fa-circle,
.contratos-visual-bar .fas.fa-circle,
.procedimientos-visual-bar .fas.fa-circle,
.tramites-visual-bar .fas.fa-circle {
    font-size: 0.65rem;
    margin-right: 3px;
}

/* 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,
.small-box .procedimientos-visual-bar,
.small-box .tramites-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,
.small-box:hover .procedimientos-visual-bar,
.small-box:hover .tramites-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;
}

/* =========================================================================
   MARCADOR PERSONALIZADO DE ENTIDADES EN EL MAPA
   ========================================================================= */
.custom-entidad-marker {
    background: transparent !important;
    border: none !important;
}

.entidad-marker-pin {
    position: relative;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 6px rgba(0,0,0,0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.entidad-marker-pin:hover {
    transform: rotate(-45deg) scale(1.18);
    box-shadow: 0 5px 12px rgba(0,0,0,0.45);
    cursor: pointer;
}

.entidad-marker-pin i {
    transform: rotate(45deg);
    font-size: 13px;
}

.entidad-marker-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #dc2626;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    min-width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1.5px solid #ffffff;
    transform: rotate(45deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    line-height: 1;
}

/* =========================================================================
   PANEL INFORMATIVO DESPLEGABLE DE ENTIDADES EN EL MAPA
   ========================================================================= */
.infopanel-mapa {
    position: absolute;
    right: 0;
    top: 0;
    width: 360px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    z-index: 1050;
    box-shadow: -4px 0 18px rgba(0,0,0,0.18);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.25s ease-in-out;
}

.infopanel-mapa .infopanel-header {
    flex-shrink: 0;
}

.infopanel-mapa .infopanel-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
}

.infopanel-mapa .infopanel-body::-webkit-scrollbar {
    width: 5px;
}

.infopanel-mapa .infopanel-body::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

@media (max-width: 576px) {
    .infopanel-mapa {
        width: 100%;
    }
}

/* =========================================================================
   ESTILOS DE FILTROS DESPLEGABLES ACTIVOS EN DATATABLES (RESALTADO AMARILLO)
   ========================================================================= */
.filter-select {
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.filter-select-active {
    background-color: #fef08a !important; /* Amarillo claro destacado */
    border-color: #eab308 !important;     /* Borde dorado tenue */
    color: #713f12 !important;            /* Texto contrastado */
    font-weight: 600 !important;
}