/*######################################################################
#
# MONITOR COMPARTAMOS
# Archivo : style.css
#
# ÍNDICE
#
# 01. Estilos Generales
# 02. Panel de Control SUTRAN
# 03. Radar Sismos
# 04. Radar SUTRAN
# 05. Popup SUTRAN
# 06. Popup Sismos
# 07. Radar FEN
# 08. Popup FEN
#
######################################################################*/


/* =====================================================================
   INICIO - ESTILOS GENERALES
   ===================================================================== */

html,
body{

    margin:0;

    height:100%;

    background:#ffffff;

}

#map{

    width:100%;

    height:100vh;

}


/* =====================================================================
   FIN - ESTILOS GENERALES
   ===================================================================== */


/* =====================================================================
   INICIO - PANEL DE CONTROL SUTRAN
   ===================================================================== */

.panel-sutran{

    position:absolute;

    left:10px;

    bottom:10px;

    z-index:9999;

    width:240px;

    background:#061a33;

    color:white;

    border-radius:12px;

    padding:12px;

    font-family:Arial;

    box-shadow:
        0 10px 25px rgba(0,0,0,.35);

    /* Permite desplazar el panel cuando su contenido supera la altura visible */
    box-sizing:border-box;
    max-height:calc(100vh - 20px);
    overflow-y:auto;
    overflow-x:hidden;

    /* Barra de desplazamiento del panel */
    scrollbar-width:thin;
    scrollbar-color:#5d7898 #0b2542;

}

.panel-sutran::-webkit-scrollbar{
    width:7px;
}

.panel-sutran::-webkit-scrollbar-track{
    background:#0b2542;
    border-radius:8px;
}

.panel-sutran::-webkit-scrollbar-thumb{
    background:#5d7898;
    border-radius:8px;
    border:1px solid #0b2542;
}

.panel-sutran::-webkit-scrollbar-thumb:hover{
    background:#7f9bb8;
}


.panel-title{

    font-weight:bold;

    margin-bottom:12px;

    font-size:14px;

    color:#cfe3ff;

}


.grupo{

    margin-bottom:14px;

}


.titulo{

    font-weight:bold;

    margin-bottom:6px;

    color:#9cc4ff;

}


.panel-sutran label{

    display:block;

    margin:6px 0;

    cursor:pointer;

    font-size:13px;

}


/* =====================================================================
   PANEL DESPLEGABLE / ACORDEÓN
   ===================================================================== */

.panel-accordion-section{
    margin:0;
    padding:0;
}

.panel-accordion-header{
    position:relative;
    display:flex !important;
    align-items:center;
    gap:5px;
    min-height:28px;
    margin:5px 0 4px !important;
    padding:5px 7px !important;
    border-radius:7px;
    cursor:pointer;
    user-select:none;
    transition:background .15s ease, color .15s ease;
}

.panel-accordion-header:hover{
    background:rgba(255,255,255,.08);
}

.panel-accordion-header:focus-visible{
    outline:1px solid #7fb5ff;
    outline-offset:1px;
}

.panel-accordion-header input{
    flex:0 0 auto;
}

.panel-accordion-arrow{
    margin-left:auto;
    font-size:12px;
    line-height:1;
    color:#9cc4ff;
    transition:transform .15s ease;
}

.panel-accordion-body{
    overflow:hidden;
    max-height:2000px;
    opacity:1;
    transition:max-height .2s ease, opacity .15s ease;
}

.panel-accordion-body.is-collapsed{
    display:none;
}

.panel-accordion-header.is-collapsed{
    margin-bottom:4px !important;
}

/* =====================================================================
   FIN - PANEL DE CONTROL SUTRAN
   ===================================================================== */


/* =====================================================================
   INICIO - RADAR SISMOS
   ===================================================================== */

.sismo-wrap{

    width:34px;

    height:34px;

    position:relative;

}


.sismo-wave{

    position:absolute;

    border-radius:50%;

    border:2px solid;

    top:50%;

    left:50%;

    transform:
        translate(-50%,-50%);

}


.wave1{

    width:28px;

    height:28px;

    animation:
        sismoWave 2s infinite ease-out;

}


.wave2{

    width:44px;

    height:44px;

    animation:
        sismoWave 2s infinite ease-out .5s;

}


.wave3{

    width:60px;

    height:60px;

    animation:
        sismoWave 2s infinite ease-out 1s;

}


@keyframes sismoWave{

    0%{

        transform:
            translate(-50%,-50%)
            scale(.6);

        opacity:.8;

    }

    100%{

        transform:
            translate(-50%,-50%)
            scale(1.8);

        opacity:0;

    }

}


/* =====================================================================
   FIN - RADAR SISMOS
   ===================================================================== */


/* =====================================================================
   INICIO - RADAR SUTRAN
   ===================================================================== */

.sutran-wrap{

    width:34px;

    height:34px;

    position:relative;

}


.sutran-pin{

    width:28px;

    height:28px;

    border-radius:50%;

    background:#e60000;

    border:
        2px solid rgba(0,0,0,.5);

    position:absolute;

    top:3px;

    left:3px;

    z-index:3;

}


.sutran-wave{

    position:absolute;

    border-radius:50%;

    border:
        2px solid rgba(255,0,0,.6);

    top:50%;

    left:50%;

    transform:
        translate(-50%,-50%);

}


.sutran-wave1{

    width:30px;

    height:30px;

    animation:
        sutranPulse 1.6s infinite ease-out;

}


.sutran-wave2{

    width:48px;

    height:48px;

    animation:
        sutranPulse 1.6s infinite ease-out .5s;

}


.sutran-wave3{

    width:66px;

    height:66px;

    animation:
        sutranPulse 1.6s infinite ease-out 1s;

}


@keyframes sutranPulse{

    0%{

        transform:
            translate(-50%,-50%)
            scale(.6);

        opacity:.9;

    }

    100%{

        transform:
            translate(-50%,-50%)
            scale(1.8);

        opacity:0;

    }

}


/* =====================================================================
   FIN - RADAR SUTRAN
   ===================================================================== */


/* =====================================================================
   CONFIGURACIÓN GENERAL LEAFLET
   ===================================================================== */

.leaflet-popup{

    max-width:none !important;

}


.leaflet-popup-content{

    width:auto !important;

    max-width:90vw;

}


/* =====================================================================
   INICIO - POPUP SUTRAN
   ===================================================================== */

.reporte-sutran{

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:13px;

    margin:0;

    width:380px;

    max-width:90vw;

    box-sizing:border-box;

    background:#fff;

    border:
        1px solid #d7d7d7;

    border-radius:6px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.12);

    overflow:hidden;

    color:#222;

}


.reporte-sutran .estado{

    padding:9px;

    text-align:center;

    font-size:15px;

    font-weight:bold;

    text-transform:uppercase;

    color:#fff;

}


.estado-normal{

    background:#2e7d32;

}


.estado-restringido{

    background:#facc15;

    color:#111 !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(0,0,0,0.08);

}


.estado-interrumpido{

    background:#d62828;

}


.tabla-sutran{

    width:100%;

    border-collapse:collapse;

}


.tabla-sutran tr{

    border-bottom:
        1px solid #ececec;

}


.tabla-sutran tr:last-child{

    border-bottom:none;

}


.tabla-sutran td{

    padding:6px 10px;

    vertical-align:top;

}


.tabla-sutran .label{

    width:130px;

    color:#555;

    font-weight:600;

    white-space:nowrap;

}


.tabla-sutran td:last-child{

    color:#111;

    font-weight:500;

    word-break:break-word;

}


.sutran-subtitulo{

    margin:
        8px 10px 5px 10px;

    padding:7px;

    text-align:center;

    font-size:12px;

    font-weight:bold;

    border-radius:3px;

    color:#fff;

    text-transform:uppercase;

}


.estado-normal.sutran-subtitulo{

    background:#2e7d32;

}


.estado-restringido.sutran-subtitulo{

    background:#facc15;

    color:#111;

}


.estado-interrumpido.sutran-subtitulo{

    background:#d62828;

}


/* =====================================================================
   FIN - POPUP SUTRAN
   ===================================================================== */


/* =====================================================================
   INICIO - POPUP SISMOS
   ===================================================================== */

.reporte-sismo{

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:10px;

    margin:0;

    width:380px;

    max-width:90vw;

    box-sizing:border-box;

    background:#fff;

    border:
        1px solid #d7d7d7;

    border-left:
        4px solid #0f172a;

    border-radius:6px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.12);

    overflow:hidden;

    color:#222;

}


.sismo-header{

    padding:9px;

    text-align:center;

    font-size:15px;

    font-weight:bold;

    text-transform:uppercase;

    color:#fff;

    letter-spacing:.3px;

}


.sismo-leve .sismo-header{

    background:#2e7d32;

}


.sismo-moderado .sismo-header{

    background:#facc15;

    color:#111;

}


.sismo-fuerte .sismo-header{

    background:#f97316;

}


.sismo-muyfuerte .sismo-header{

    background:#d62828;

}


.sismo-header .titulo{

    font-size:14px;

    font-weight:bold;

    letter-spacing:.3px;

}


.sismo-header .subtitulo{

    font-size:11px;

    opacity:.75;

    margin-top:2px;

}


.tabla-sismo{

    width:100%;

    border-collapse:collapse;

    margin:0;

}


.tabla-sismo tr{

    border-bottom:
        1px solid #e6e6e6;

}


.tabla-sismo tr:last-child{

    border-bottom:none;

}


.tabla-sismo td{

    padding:6px 10px;

    vertical-align:top;

}


.tabla-sismo .label{

    width:130px;

    font-weight:600;

    color:#555;

    white-space:nowrap;

}


.tabla-sismo .value{

    font-weight:500;

    color:#111;

    word-break:break-word;

}


.sismo-subtitulo{

    margin:
        8px 10px 5px 10px;

    padding:7px;

    text-align:center;

    font-size:12px;

    font-weight:bold;

    border-radius:3px;

    color:#fff;

    text-transform:uppercase;

    background:#0f172a;

}


.reporte-sismo::before{

    content:"";

    display:block;

    height:4px;

    background:
        linear-gradient(
            90deg,
            #0f172a,
            #334155
        );

}


/* =====================================================================
   FIN - POPUP SISMOS
   ===================================================================== */


/* =====================================================================
   SISTEMA UNIFICADO SISMOS + SUTRAN
   ===================================================================== */

.leaflet-popup-content-wrapper{

    border-radius:12px !important;

    overflow:hidden;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.25) !important;

}


.leaflet-popup-content{

    padding:0 !important;

    margin:0 !important;

}


.sismo-header{

    padding:10px;

    text-align:center;

    font-weight:bold;

    text-transform:uppercase;

    letter-spacing:.5px;

}


.sismo-leve{

    background:#22c55e;

    color:#111;

}


.sismo-moderado{

    background:#eab308;

    color:#111;

}


.sismo-alto{

    background:#f97316;

    color:#fff;

}


.sismo-critico{

    background:#000000;

    color:#ffffff;

}


.reporte-sutran .estado{

    padding:10px;

    font-weight:bold;

    text-transform:uppercase;

    text-align:center;

    letter-spacing:.5px;

}


.tabla-sismo,
.tabla-sutran{

    width:100%;

    border-collapse:collapse;

    font-size:12.5px;

}


.tabla-sismo td,
.tabla-sutran td{

    padding:6px 10px;

}


.tabla-sismo tr,
.tabla-sutran tr{

    border-bottom:
        1px solid #eee;

}


.tabla-sismo .label,
.tabla-sutran .label{

    font-weight:600;

    color:#666;

    width:120px;

}


.tabla-sismo .value,
.tabla-sutran td:last-child{

    color:#111;

    font-weight:500;

}


.reporte-sismo,
.reporte-sutran{

    border-radius:12px !important;

    overflow:hidden;

    border:
        1px solid #ddd;

}


.reporte-sismo::before,
.reporte-sutran::before{

    content:"";

    display:block;

    height:4px;

    background:
        linear-gradient(
            90deg,
            #0f172a,
            #334155
        );

}


/* =====================================================================
   IMPACTO OPERATIVO
   ===================================================================== */

.impacto-operativo{

    display:inline-block;

    padding:5px 12px;

    border-radius:4px;

    font-size:12px;

    font-weight:bold;

    text-transform:uppercase;

    color:#fff;

}


.impacto-bajo{

    background:#16a34a;

}


.impacto-moderado{

    background:#facc15;

    color:#111;

}


.impacto-alto{

    background:#f97316;

}


.impacto-fuerte{

    background:#dc2626;

}


.impacto-critico{

    background:#000;

}


.impacto-contenedor{

    text-align:center;

    padding:
        8px 0 10px 0;

}


/* =====================================================================
   AGENCIAS CERCANAS
   ===================================================================== */

.agencias-cercanas{

    margin:10px;

    border:
        1px solid #d7d7d7;

    border-radius:6px;

    overflow:hidden;

}


.agencias-cercanas .titulo{

    background:#f3f4f6;

    padding:7px 10px;

    font-size:12px;

    font-weight:bold;

    text-transform:uppercase;

    border-bottom:
        1px solid #d7d7d7;

    color:#374151;

}


.agencias-cercanas table{

    width:100%;

    border-collapse:collapse;

    font-size:12px;

}


.agencias-cercanas td{

    padding:7px 10px;

    border-bottom:
        1px solid #ececec;

}


.agencias-cercanas tr:last-child td{

    border-bottom:none;

}


.agencias-cercanas td:last-child{

    text-align:right;

    font-weight:bold;

    color:#111;

}


/* =====================================================================
   ONDAS FEN
   ===================================================================== */

.fen-radar{

    width:22px;

    height:22px;

    position:relative;

}


.fen-radar .centro{

    position:absolute;

    left:50%;

    top:50%;

    width:12px;

    height:12px;

    margin-left:-6px;

    margin-top:-6px;

    border-radius:50%;

    background:#8B0000;

    border:
        2px solid #fff;

    box-shadow:
        0 0 8px rgba(0,0,0,.5);

    z-index:10;

}


.fen-radar .onda{

    position:absolute;

    left:50%;

    top:50%;

    width:12px;

    height:12px;

    margin-left:-6px;

    margin-top:-6px;

    border-radius:50%;

    border:
        3px solid rgba(139,0,0,.8);

    animation:
        fenPulse 3s linear infinite;

}


.fen-radar .onda2{

    animation-delay:1.5s;

}


@keyframes fenPulse{

    0%{

        transform:scale(.4);

        opacity:.9;

    }

    100%{

        transform:scale(5);

        opacity:0;

    }

}


/* =====================================================================
   SUBGRUPOS
   ===================================================================== */

.subgrupo{

    margin-left:22px;

    margin-top:6px;

    margin-bottom:10px;

    border-left:
        2px solid #3b4b63;

    padding-left:10px;

}


.subtitulo{

    font-size:12px;

    color:#8fb8ff;

    font-weight:bold;

    margin:6px 0;

}


.subgrupo label{

    display:block;

    margin:4px 0;

}


/* =====================================================================
   POPUP FEN DISTRITOS
   ===================================================================== */

.leaflet-popup.popup-fen-distrito
.leaflet-popup-content-wrapper{

    overflow:visible !important;

    max-width:95vw !important;

}


.leaflet-popup.popup-fen-distrito
.leaflet-popup-content{

    width:900px !important;

    max-width:90vw !important;

    margin:0 !important;

    padding:0 !important;

    box-sizing:border-box;

}


.leaflet-popup.popup-fen-distrito table{

    width:100% !important;

    border-collapse:collapse;

}


.leaflet-popup.popup-fen-distrito td,
.leaflet-popup.popup-fen-distrito th{

    white-space:normal !important;

    word-break:break-word;

    overflow-wrap:anywhere;

}


/* =====================================================================
   NUEVO - POPUP FEN DEPARTAMENTAL
   =====================================================================

   Este bloque corrige el problema del popup FEN que se veía
   demasiado angosto y permite visualizar correctamente las
   7 columnas del reporte.

   ===================================================================== */


.leaflet-popup.fen-popup-leaflet{

    width:1400px !important;

    max-width:1400px !important;

}


.leaflet-popup.fen-popup-leaflet
.leaflet-popup-content-wrapper{

    width:1400px !important;

    max-width:1400px !important;

    padding:0 !important;

    border-radius:12px !important;

    overflow:hidden !important;

}


.leaflet-popup.fen-popup-leaflet
.leaflet-popup-content{

    width:1360px !important;

    max-width:1360px !important;

    margin:0 !important;

    padding:0 !important;

    box-sizing:border-box;

}


/* =====================================================================
   CONTENEDOR DEL REPORTE FEN
   ===================================================================== */

.fen-popup{

    width:100% !important;

    box-sizing:border-box;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


/* =====================================================================
   INFORMACIÓN SUPERIOR FEN
   ===================================================================== */

.fen-info{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:8px;

    margin-top:12px;

}


/* =====================================================================
   TABLA FEN
   ===================================================================== */

.fen-tabla{

    width:100%;

    margin-top:12px;

}


.fen-tabla-scroll{

    width:100%;

    max-height:420px;

    overflow-x:auto;

    overflow-y:auto;

    border:
        1px solid #ddd;

    box-sizing:border-box;

}


.fen-tabla table{

    width:100% !important;

    min-width:1000px;

    border-collapse:collapse;

    font-size:11px;

}


.fen-tabla th{

    position:sticky;

    top:0;

    z-index:10;

    background:#222;

    color:white;

    padding:9px 10px;

    text-align:left;

    white-space:nowrap;

}


.fen-tabla td{

    padding:8px 10px;

    border-bottom:
        1px solid #eee;

    white-space:nowrap;

    vertical-align:middle;

}


.fen-tabla tbody tr:hover{

    background:#f5f5f5;

}


/* =====================================================================
   BADGE FEN
   ===================================================================== */

.fen-badge{

    display:inline-block;

    padding:4px 8px;

    border-radius:12px;

    font-size:9px;

    font-weight:bold;

    color:#111;

    white-space:nowrap;

}


.fen-centro{

    text-align:center;

}


/* =====================================================================
   RESPONSIVE FEN
   ===================================================================== */

@media (max-width:1500px){

    .leaflet-popup.fen-popup-leaflet{

        width:90vw !important;

        max-width:90vw !important;

    }


    .leaflet-popup.fen-popup-leaflet
    .leaflet-popup-content-wrapper{

        width:90vw !important;

        max-width:90vw !important;

    }


    .leaflet-popup.fen-popup-leaflet
    .leaflet-popup-content{

        width:
            calc(90vw - 30px) !important;

        max-width:
            calc(90vw - 30px) !important;

    }

}


@media (max-width:800px){

    .fen-info{

        grid-template-columns:
            repeat(2,1fr);

    }

}

/* =====================================================================
   BUSCADOR DE AGENCIAS
   ===================================================================== */

.buscador-agencias{
    position:relative;
    margin:4px 0 12px;
    z-index:10000;
}

.buscador-agencias-wrap{
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
    box-sizing:border-box;
    background:#ffffff;
    border:1px solid #7890aa;
    border-radius:7px;
    box-shadow:0 2px 6px rgba(0,0,0,.16);
}

.buscador-agencias-icon{
    flex:0 0 auto;
    padding-left:9px;
    font-size:13px;
    line-height:1;
}

.buscador-agencias-input{
    min-width:0;
    width:100%;
    height:34px;
    border:0;
    outline:0;
    padding:0 30px 0 7px;
    background:transparent;
    color:#14243a;
    font-family:Arial,sans-serif;
    font-size:12px;
    box-sizing:border-box;
}

.buscador-agencias-input::placeholder{
    color:#718096;
}

.buscador-agencias-wrap:focus-within{
    border-color:#3b82f6;
    box-shadow:0 0 0 2px rgba(59,130,246,.18);
}

.buscador-agencias-clear{
    position:absolute;
    right:4px;
    top:50%;
    transform:translateY(-50%);
    width:25px;
    height:25px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#60748a;
    cursor:pointer;
    font-size:19px;
    line-height:23px;
}

.buscador-agencias-clear:hover{
    background:#e8eef5;
    color:#16283e;
}

.sugerencias-agencias{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:39px;
    max-height:245px;
    overflow-y:auto;
    background:#ffffff;
    border:1px solid #c7d2df;
    border-radius:7px;
    box-shadow:0 8px 18px rgba(0,0,0,.28);
    z-index:10001;
}

.sugerencias-agencias.visible{
    display:block;
}

.sugerencia-agencia{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    min-height:46px;
    padding:6px 9px;
    border:0;
    border-bottom:1px solid #edf1f5;
    background:#ffffff;
    color:#16283e;
    text-align:left;
    cursor:pointer;
    font-family:Arial,sans-serif;
    box-sizing:border-box;
}

.sugerencia-agencia:last-child{
    border-bottom:0;
}

.sugerencia-agencia:hover,
.sugerencia-agencia.activo{
    background:#edf5ff;
}

.sugerencia-agencia-icon{
    flex:0 0 auto;
    width:25px;
    text-align:center;
    font-size:15px;
}

.sugerencia-agencia-texto{
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:2px;
}

.sugerencia-agencia-texto strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    font-weight:700;
}

.sugerencia-agencia-texto small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#66778b;
    font-size:10px;
}

.sugerencia-agencia-vacia{
    padding:12px 10px;
    color:#718096;
    text-align:center;
    font-size:11px;
}

@media (max-width:420px){
    .panel-sutran{
        width:calc(100vw - 20px);
        box-sizing:border-box;
    }
}

/* =====================================================================
   MEDIDOR DE DISTANCIA
   ===================================================================== */

.medidor-control{
    margin-top:10px !important;
    margin-right:10px !important;
}

.medidor-boton{
    display:flex;
    align-items:center;
    gap:7px;
    min-height:36px;
    padding:0 11px;
    border:1px solid #b9c6d5;
    border-radius:7px;
    background:#fff;
    color:#1d3047;
    box-shadow:0 2px 7px rgba(0,0,0,.22);
    cursor:pointer;
    font:600 12px Arial,sans-serif;
    transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}

.medidor-boton:hover{
    background:#f3f8fd;
    border-color:#6f8eae;
}

.medidor-boton.activo{
    background:#1769aa;
    border-color:#0f568d;
    color:#fff;
}

.medidor-boton-icono{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    border:1.5px solid currentColor;
    border-radius:3px;
    font-size:13px;
    line-height:1;
}

.medidor-panel{
    display:none;
    width:275px;
    margin-top:7px;
    padding:11px;
    box-sizing:border-box;
    border:1px solid #c5d0dc;
    border-radius:9px;
    background:#fff;
    color:#1d3047;
    box-shadow:0 8px 22px rgba(0,0,0,.25);
    font-family:Arial,sans-serif;
}

.medidor-panel.visible{
    display:block;
}

.medidor-panel-titulo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
    padding-bottom:7px;
    border-bottom:1px solid #e5eaf0;
    font-size:13px;
    font-weight:700;
}

.medidor-cerrar{
    width:24px;
    height:24px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#66778b;
    cursor:pointer;
    font-size:18px;
    line-height:20px;
}

.medidor-cerrar:hover{
    background:#edf1f5;
    color:#1d3047;
}

.medidor-instruccion{
    color:#536579;
    font-size:11px;
    line-height:1.45;
}

.medidor-resultado{
    margin-top:9px;
    padding:9px;
    border:1px solid #d8e3ed;
    border-radius:7px;
    background:#f6f9fc;
}

.medidor-distancia-principal{
    color:#1769aa;
    font-size:22px;
    font-weight:800;
    line-height:1.1;
}

.medidor-detalle{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-top:7px;
    color:#66778b;
    font-size:9px;
    line-height:1.3;
}

.medidor-detalle strong{
    color:#1d3047;
}

.medidor-nueva{
    width:100%;
    margin-top:9px;
    height:31px;
    border:1px solid #1769aa;
    border-radius:6px;
    background:#fff;
    color:#1769aa;
    cursor:pointer;
    font:700 11px Arial,sans-serif;
}

.medidor-nueva:hover{
    background:#edf6ff;
}

.medidor-punto{
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    box-sizing:border-box;
    border:3px solid #fff;
    border-radius:50%;
    box-shadow:0 2px 7px rgba(0,0,0,.45);
    color:#fff;
    font:800 11px Arial,sans-serif;
}

.medidor-punto-a{
    background:#1769aa;
}

.medidor-punto-b{
    background:#d33b32;
}

.medidor-etiqueta-distancia{
    display:inline-block;
    transform:translate(-50%,-50%);
    padding:4px 7px;
    border:1px solid #1769aa;
    border-radius:5px;
    background:#fff;
    color:#1769aa;
    box-shadow:0 2px 7px rgba(0,0,0,.24);
    white-space:nowrap;
    font:800 11px Arial,sans-serif;
}

#map.medidor-activo{
    cursor:crosshair !important;
}

@media (max-width:600px){
    .medidor-control{
        margin-top:8px !important;
        margin-right:8px !important;
    }

    .medidor-boton-texto{
        display:none;
    }

    .medidor-boton{
        width:38px;
        justify-content:center;
        padding:0;
    }

    .medidor-panel{
        width:min(275px,calc(100vw - 30px));
    }
}

/* =====================================================================
   MEDIDOR - MODOS Y RUTA POR CARRETERA
   ===================================================================== */

.medidor-modos{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    margin-bottom:7px;
}

.medidor-modo{
    min-height:34px;
    padding:5px 6px;
    border:1px solid #cbd6e2;
    border-radius:6px;
    background:#f7f9fb;
    color:#536579;
    cursor:pointer;
    font:700 10px Arial,sans-serif;
    transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}

.medidor-modo:hover{
    border-color:#8ca2b8;
    background:#eef4f9;
}

.medidor-modo.activo{
    border-color:#1769aa;
    background:#eaf4fc;
    color:#1769aa;
    box-shadow:inset 0 0 0 1px rgba(23,105,170,.12);
}

.medidor-modo:last-child.activo{
    border-color:#16844a;
    background:#eaf8f0;
    color:#16844a;
}

.medidor-ayuda-modo{
    margin:0 0 8px;
    color:#728196;
    font-size:9px;
    line-height:1.4;
}

.medidor-estado{
    margin-top:8px;
    padding:8px 9px;
    border-radius:6px;
    background:#f5f8fb;
    color:#536579;
    font-size:10px;
    line-height:1.4;
}

.medidor-estado.cargando{
    border:1px solid #cfe1ef;
    background:#f0f7fc;
    color:#1769aa;
}

.medidor-estado.error{
    border:1px solid #efd0cc;
    background:#fff5f3;
    color:#a83b31;
}

.medidor-spinner{
    display:inline-block;
    width:11px;
    height:11px;
    margin-right:4px;
    vertical-align:-2px;
    border:2px solid #b8d0e2;
    border-top-color:#1769aa;
    border-radius:50%;
    animation:medidorGirar .8s linear infinite;
}

@keyframes medidorGirar{
    to{ transform:rotate(360deg); }
}

.medidor-tipo-resultado{
    margin-bottom:4px;
    color:#1769aa;
    font-size:8px;
    font-weight:800;
    letter-spacing:.5px;
}

.medidor-tipo-resultado.carretera{
    color:#16844a;
}

.medidor-distancia-principal.carretera{
    color:#16844a;
}

.medidor-carretera-datos{
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-top:9px;
    padding-top:7px;
    border-top:1px solid #dfe7ee;
    color:#526579;
    font-size:9px;
    line-height:1.35;
}

.medidor-carretera-datos strong{
    color:#273b50;
}

.medidor-dato-icono{
    display:inline-block;
    width:17px;
    color:#16844a;
    font-weight:800;
}

.medidor-aviso{
    margin-top:7px;
    padding:6px 7px;
    border-left:3px solid #d29a24;
    background:#fff9e9;
    color:#795d20;
    font-size:8px;
    line-height:1.4;
}

.medidor-fuente{
    margin-top:8px;
    padding-top:6px;
    border-top:1px solid #e3e9ef;
    color:#8a98a8;
    font-size:8px;
    line-height:1.35;
}

.medidor-error-titulo{
    color:#a83b31;
    font-size:12px;
    font-weight:800;
}

.medidor-error-texto{
    margin-top:5px;
    color:#6c5960;
    font-size:9px;
    line-height:1.45;
}

.medidor-etiqueta-distancia.carretera{
    border-color:#16844a;
    color:#16844a;
}

@media (max-width:600px){
    .medidor-modo{
        font-size:9px;
    }
}

/* =====================================================================
   MEDIDOR - SELECCION DIRECTA DE MARCADORES E HISTORIAL
   ===================================================================== */

.medidor-flecha-direccion{
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    color:#1769aa;
    text-shadow:0 1px 3px rgba(255,255,255,.95),0 0 2px #fff;
    font:900 22px/22px Arial,sans-serif;
    pointer-events:none;
}

.medidor-historial{
    margin-top:10px;
    padding-top:9px;
    border-top:1px solid #e2e8ef;
}

.medidor-historial-cabecera{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:6px;
    color:#33485e;
    font-size:10px;
    font-weight:800;
}

.medidor-historial-cabecera button{
    padding:2px 6px;
    border:1px solid #d1dbe5;
    border-radius:4px;
    background:#fff;
    color:#6b7c8e;
    cursor:pointer;
    font:700 8px Arial,sans-serif;
}

.medidor-historial-cabecera button:hover{
    border-color:#aebdcb;
    background:#f4f7fa;
    color:#33485e;
}

.medidor-historial-lista{
    display:flex;
    flex-direction:column;
    gap:5px;
    max-height:180px;
    overflow-y:auto;
    padding-right:2px;
}

.medidor-historial-item{
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
    padding:6px 6px 6px 7px;
    border:1px solid #dbe3eb;
    border-radius:6px;
    background:#f8fafc;
}

.medidor-historial-item.actual{
    border-color:#a9c8df;
    background:#f1f7fc;
}

.medidor-historial-info{
    min-width:0;
    flex:1;
}

.medidor-historial-titulo{
    display:flex;
    align-items:center;
    gap:5px;
}

.medidor-historial-numero{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#dfe8f0;
    color:#52677c;
    font:800 8px Arial,sans-serif;
}

.medidor-historial-tipo{
    font-size:7px;
    font-weight:900;
    letter-spacing:.35px;
}

.medidor-historial-tipo.directa{
    color:#1769aa;
}

.medidor-historial-tipo.carretera{
    color:#16844a;
}

.medidor-historial-distancia{
    margin-top:2px;
    color:#1d3047;
    font-size:12px;
    font-weight:900;
    line-height:1.15;
}

.medidor-historial-coords{
    margin-top:2px;
    overflow:hidden;
    color:#7a8998;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:7px;
    line-height:1.25;
}

.medidor-historial-eliminar{
    flex:0 0 auto;
    width:21px;
    height:21px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#8a99a8;
    cursor:pointer;
    font:700 15px/19px Arial,sans-serif;
}

.medidor-historial-eliminar:hover{
    background:#f5e8e7;
    color:#a83b31;
}

/* Cuando el medidor está activo, los marcadores existentes siguen siendo
   visibles y se seleccionan mediante la captura de clic del módulo. */
#map.medidor-activo .leaflet-marker-icon{
    cursor:crosshair !important;
}

@media (max-width:600px){
    .medidor-historial-lista{
        max-height:150px;
    }
}

/* ============================================================
   MEDIDOR - CONTEXTO EN HISTORIAL
   ============================================================ */
.medidor-historial-contexto{
    font-size:10px;
    line-height:1.35;
    color:#555;
    margin-top:2px;
    white-space:normal;
}
.medidor-historial-contexto strong{
    color:#333;
}
.medidor-historial-contexto small{
    color:#777;
}


/* =========================
   COMISARIAS PNP - ICONO Y POPUP
========================= */
.comisaria-marker{background:transparent!important;border:0!important;width:36px!important;height:42px!important;margin:0!important;padding:0!important;}
.pnp-icon{position:relative;width:36px;height:42px;margin:0;padding:0;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.38));transform:none!important;}
.pnp-shield{position:absolute;left:4px;top:8px;width:28px;height:30px;box-sizing:border-box;background:linear-gradient(145deg,#123b7a 0%,#1d68aa 62%,#0d2d61 100%);border:2px solid #fff;clip-path:polygon(50% 0,94% 14%,86% 72%,50% 100%,14% 72%,6% 14%);display:flex;align-items:center;justify-content:center;color:#fff;}
.pnp-shield span{font:900 8px/1 Arial,sans-serif;letter-spacing:.3px;text-shadow:0 1px 2px rgba(0,0,0,.55);transform:none!important;}
.pnp-star{position:absolute;z-index:3;left:12px;top:0;width:12px;height:12px;color:#f6c431;font:900 12px/12px Arial,sans-serif;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.45);transform:none!important;}
.pnp-icon-especial .pnp-star{color:#ff6a00;}
.pnp-icon-especial .pnp-star-1{left:6px;top:0;}
.pnp-icon-especial .pnp-star-2{left:18px;top:0;}
.pnp-source-row{margin-top:8px;padding-top:8px;border-top:1px solid #e3e8ef;display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;align-items:start;}
.pnp-source-row .pnp-label{font-weight:800;}
.pnp-source-value{font-size:12px;line-height:1.35;color:#4b5563;overflow-wrap:anywhere;}

/* Popup PNP: misma estructura, ancho y jerarquia visual del popup de Agencia */
.reporte-pnp.popup-monitor{
    width:300px;
    max-width:92vw;
    max-height:min(65vh,430px);
    overflow:auto;
    box-sizing:border-box;
}
.reporte-pnp .pnp-header{
    margin:0 0 10px;
    padding:10px 42px 9px 12px;
    background:#174b86;
    color:#fff;
    border-radius:9px;
    font-weight:800;
    font-size:13px;
    display:flex;
    align-items:center;
    gap:6px;
    line-height:1.2;
    cursor:grab;
    user-select:none;
}
.reporte-pnp .pnp-header:active{cursor:grabbing;}
.reporte-pnp{user-select:text;-webkit-user-select:text;}
.reporte-pnp .pnp-row,.reporte-pnp .pnp-label,.reporte-pnp .pnp-value,.reporte-pnp .pnp-precision-row{user-select:text;-webkit-user-select:text;}
.reporte-pnp .pnp-header-icon{
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;width:20px;height:20px;font-size:15px;line-height:1;color:#f6c431;
}
.reporte-pnp .pnp-header-title{min-width:0;word-break:break-word;}
.reporte-pnp .pnp-row{
    display:grid;
    grid-template-columns:88px minmax(0,1fr);
    gap:8px;
    padding:6px 0;
    border-bottom:1px solid var(--popup-line);
}
.reporte-pnp .pnp-row:last-of-type{border-bottom:0;}
.reporte-pnp .pnp-label{color:var(--popup-muted);font-weight:700;}
.reporte-pnp .pnp-value{color:#172033;font-weight:600;word-break:break-word;}
.reporte-pnp .pnp-precision-row{
    display:flex;align-items:center;gap:6px;margin-top:9px;padding:6px 8px;
    border-radius:7px;font-size:10px;font-weight:700;
}
.reporte-pnp .pnp-precision-row.pnp-estado-exacto{background:#edf8f1;color:#247447;}
.reporte-pnp .pnp-precision-row.pnp-estado-referencial{background:#fff7e7;color:#996300;}
.reporte-pnp .pnp-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;flex:0 0 7px;}

/* El popup PNP utiliza el mismo contenedor Leaflet que los popups de Agencia. */
.leaflet-popup.monitor-popup-pnp .leaflet-popup-content-wrapper{border-radius:14px!important;}
.leaflet-popup.monitor-popup-pnp .leaflet-popup-content{margin:0!important;width:auto!important;}


/* ============================================================
   MEJORA VISUAL — PANEL IZQUIERDO COMPACTO
   Mantiene IDs, controles y funcionalidad existentes.
   ============================================================ */
.panel-sutran{
    width:228px;
    padding:8px;
    border-radius:11px;
    background:rgba(6,26,51,.97);
    color:#f5f9ff;
}

.panel-sutran .grupo{margin-bottom:7px}
.panel-sutran .titulo{
    color:#e8f3ff;
    font-size:11px;
    line-height:1.15;
    margin-bottom:3px;
}

/* Encabezados de módulos: compactos, limpios y fáciles de escanear */
.panel-sutran .panel-accordion-header{
    min-height:25px;
    margin:3px 0 !important;
    padding:4px 6px !important;
    border:1px solid rgba(151,190,230,.16);
    border-radius:7px;
    background:rgba(255,255,255,.045);
    color:#f0f7ff;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.15px;
}
.panel-sutran .panel-accordion-header:hover{
    background:rgba(255,255,255,.085);
    border-color:rgba(151,190,230,.3);
}
.panel-sutran .panel-accordion-header input{margin:0 3px 0 0}
.panel-sutran .panel-accordion-arrow{color:#c7e2ff;font-size:10px}
.panel-sutran .panel-accordion-body{padding:0 3px 2px}
.panel-sutran label{font-size:10.5px;line-height:1.2;margin:3px 0;color:#dbe9f7}
.panel-sutran .subgrupo{padding:2px 4px}
.panel-sutran .subtitulo{font-size:9px;color:#a9c5df;margin:4px 0 2px;font-weight:800}
.panel-sutran hr{margin:5px 0;border:0;border-top:1px solid rgba(255,255,255,.09)}

/* Las regiones PNP se compactan para no generar una columna interminable */
.comisarias-regiones{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2px 5px;
    max-height:150px;
    overflow-y:auto;
}
.comisarias-regiones label{margin:1px 0!important;font-size:9px!important}

.buscador-agencias{margin:3px 0 5px}
.buscador-agencias-wrap{min-height:25px}
.buscador-agencias-input{font-size:10px!important;padding:5px 25px 5px 25px!important}

@media(max-width:850px){
    .panel-sutran{width:205px;left:6px;bottom:6px;max-height:calc(100vh - 12px)}
}

/* =====================================================================
   CAPAS OPERATIVAS - ÁRBOL COMPACTO CON VISIBILIDAD
   ===================================================================== */
.capas-operativas .panel-section-title{
    margin-bottom:8px;
    font-size:13px;
}
.capas-operativas .layer-section{
    margin:4px 0;
    border:1px solid rgba(156,196,255,.12);
    border-radius:8px;
    background:rgba(255,255,255,.025);
    overflow:hidden;
}
.capas-operativas .layer-header{
    display:flex;
    align-items:center;
    min-height:30px;
    padding:3px 5px;
    gap:3px;
}
.capas-operativas .layer-toggle,
.capas-operativas .layer-visibility{
    border:0;
    background:transparent;
    color:#dcecff;
    cursor:pointer;
    width:24px;
    height:24px;
    padding:0;
    border-radius:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 24px;
}
.capas-operativas .layer-toggle{
    color:#9fc7ff;
    font-size:15px;
    font-weight:700;
}
.capas-operativas .layer-toggle:hover,
.capas-operativas .layer-visibility:hover{
    background:rgba(255,255,255,.10);
}
.capas-operativas .layer-main-label{
    flex:1;
    margin:0 !important;
    padding:3px 2px !important;
    color:#edf6ff !important;
    font-size:12px !important;
    font-weight:700;
    display:flex !important;
    align-items:center;
    gap:5px;
    min-width:0;
}
.capas-operativas .layer-main-label input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.capas-operativas .layer-visibility{
    color:#74b8ff;
}
.capas-operativas .layer-visibility:not(.is-visible){
    color:#708196;
}
.capas-operativas .eye-icon{
    width:14px;
    height:10px;
    display:block;
    position:relative;
    border:1.5px solid currentColor;
    border-radius:70% 30% 70% 30% / 55% 45% 55% 45%;
    transform:rotate(45deg);
    font-size:0;
}
.capas-operativas .eye-icon::after{
    content:"";
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:currentColor;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
}
.capas-operativas .layer-visibility:not(.is-visible) .eye-icon::before{
    content:"";
    position:absolute;
    width:18px;
    height:1.5px;
    background:currentColor;
    left:-2px;
    top:4px;
    transform:rotate(-45deg);
    z-index:2;
}
.capas-operativas .layer-body{
    padding:2px 8px 7px 30px;
    border-top:1px solid rgba(156,196,255,.08);
    background:rgba(0,0,0,.08);
}
.capas-operativas .layer-body.is-collapsed{
    display:none;
}
.capas-operativas .compact-options label{
    font-size:11.5px !important;
    margin:3px 0 !important;
    color:#dbe9f8;
}
.capas-operativas .compact-options .subtitulo{
    margin:5px 0 3px;
    color:#8ebcff;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.4px;
}
.capas-operativas .comisarias-regiones{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px 7px;
    max-height:300px;
    overflow:auto;
}
.capas-operativas .comisarias-regiones label{
    margin:2px 0 !important;
    font-size:10.5px !important;
}
.capas-operativas .fen-level-filters label{
    border-radius:5px;
    padding:3px 4px !important;
}
.capas-operativas .fen-current-layer-note{
    margin-top:6px;
    padding:5px 6px;
    color:#9fb4cb;
    font-size:9.5px;
    line-height:1.3;
    border-left:2px solid #4d7fb5;
}

/* =====================================================================
   CAPAS OPERATIVAS - CHECKBOX Y NOMBRE TOTALMENTE INDEPENDIENTES
   El checkbox nunca debe abrir/cerrar el acordeón.
   ===================================================================== */
.capas-operativas .layer-header{
    display:flex;
    align-items:center;
    min-height:34px;
    padding:3px 5px;
    gap:4px;
}
.capas-operativas .layer-check{
    width:26px;
    height:26px;
    flex:0 0 26px;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:relative;
}
.capas-operativas .layer-check input{
    position:absolute;
    opacity:0;
    width:26px;
    height:26px;
    margin:0;
    cursor:pointer;
}
.capas-operativas .check-box{
    width:16px;
    height:16px;
    border:1.5px solid rgba(210,230,255,.65);
    border-radius:3px;
    background:rgba(255,255,255,.04);
    display:block;
    position:relative;
    transition:.15s ease;
    pointer-events:none;
}
.capas-operativas .layer-check input:checked + .check-box{
    background:#1685e5;
    border-color:#5eb7ff;
    box-shadow:0 0 0 2px rgba(22,133,229,.12);
}
.capas-operativas .layer-check input:checked + .check-box::after{
    content:"";
    position:absolute;
    width:7px;
    height:4px;
    border-left:2px solid #fff;
    border-bottom:2px solid #fff;
    left:4px;
    top:4px;
    transform:rotate(-45deg);
}
.capas-operativas .layer-name-button{
    flex:1 1 auto;
    min-width:0;
    min-height:28px;
    border:0;
    background:transparent;
    color:#edf6ff;
    cursor:pointer;
    padding:3px 2px;
    margin:0;
    display:flex;
    align-items:center;
    gap:6px;
    text-align:left;
    font:inherit;
    font-size:12px;
    font-weight:700;
    border-radius:5px;
}
.capas-operativas .layer-name-button:hover{
    background:rgba(255,255,255,.07);
}
.capas-operativas .layer-toggle-icon{
    color:#9fc7ff;
    width:13px;
    flex:0 0 13px;
    text-align:center;
    font-size:14px;
    line-height:1;
}
.capas-operativas .layer-visibility{
    flex:0 0 30px;
    width:30px;
    height:28px;
}

/* =====================================================================
   PANEL DE CONTROL — DISEÑO FINAL TIPO ÁRBOL DE CAPAS
   Check = activar/desactivar | Nombre/triángulo = expandir/contraer | Ojo = visibilidad
   ===================================================================== */
.capas-operativas{
    margin:0 !important;
}
.capas-operativas .layer-section{
    margin:6px 0;
    border:1px solid rgba(116,168,224,.18);
    border-radius:10px;
    background:linear-gradient(180deg, rgba(15,48,79,.72), rgba(7,30,55,.72));
    overflow:hidden;
}
.capas-operativas .layer-header{
    min-height:40px;
    padding:4px 7px;
    gap:5px;
}
.capas-operativas .layer-header-simple{
    min-height:40px;
}
.capas-operativas .layer-check{
    width:27px;
    height:30px;
    flex:0 0 27px;
}
.capas-operativas .layer-check input{
    width:27px;
    height:27px;
}
.capas-operativas .check-box{
    width:17px;
    height:17px;
    border-radius:3px;
    border:1.5px solid rgba(220,235,250,.72);
    background:rgba(255,255,255,.04);
}
.capas-operativas .layer-name-button{
    min-height:32px;
    padding:4px 3px;
    gap:7px;
    font-size:13px;
    font-weight:800;
    letter-spacing:.1px;
}
.capas-operativas .layer-toggle-icon{
    width:14px;
    flex:0 0 14px;
    color:#c8e4ff;
    font-size:15px;
    font-weight:900;
}
.capas-operativas .layer-visibility{
    width:30px;
    height:30px;
    flex:0 0 30px;
    color:#69b7ff;
    border-radius:6px;
}
.capas-operativas .layer-visibility:not(.is-visible){
    color:#647b93;
}
.capas-operativas .layer-body{
    padding:6px 9px 8px 39px;
    border-top:1px solid rgba(116,168,224,.10);
}
.capas-operativas .layer-section-heat{
    margin-top:2px;
    margin-bottom:7px;
}
.capas-operativas .layer-section-heat .layer-name-button{
    font-size:13px;
}
.capas-operativas .layer-section:not(.layer-section-heat):hover{
    border-color:rgba(116,168,224,.30);
}
.capas-operativas .layer-header:hover .layer-name-button{
    background:rgba(255,255,255,.055);
}
.capas-operativas .buscador-agencias{
    margin:5px 0 7px;
}
.capas-operativas .buscador-agencias-wrap{
    min-height:48px;
}
.capas-operativas .buscador-agencias-input{
    min-height:44px;
    font-size:13px !important;
    padding:8px 30px 8px 40px !important;
    border-radius:11px !important;
}
.capas-operativas .compact-options label{
    font-size:11.5px !important;
}
.capas-operativas .fen-level-filters{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
}
.capas-operativas .fen-level-filters .subtitulo,
.capas-operativas .fen-current-layer-note{
    grid-column:1 / -1;
}

@media (max-width:850px){
    .panel-sutran{
        width:260px;
    }
}

/* =====================================================================
   AJUSTE FINAL — PANEL IZQUIERDO AJUSTADO
   Ancho: reducción del 30% respecto a la versión anterior (342px -> 239px aprox.).
   Altura de botones: se conserva el formato compacto solicitado.
   ===================================================================== */
.capas-operativas.panel-sutran,
.panel-sutran {
    width:239px;
}

.capas-operativas .layer-section {
    margin:4px 0;
}

.capas-operativas .layer-header,
.capas-operativas .layer-header-simple {
    min-height:28px;
    height:28px;
    padding:2px 6px;
    gap:4px;
}

.capas-operativas .layer-check {
    width:24px;
    height:24px;
    flex:0 0 24px;
}

.capas-operativas .layer-check input {
    width:24px;
    height:24px;
}

.capas-operativas .layer-name-button {
    min-height:23px;
    height:23px;
    padding:2px 3px;
    gap:5px;
    font-size:12.5px;
}

.capas-operativas .layer-toggle-icon {
    width:12px;
    flex:0 0 12px;
    font-size:13px;
}

.capas-operativas .layer-visibility {
    width:25px;
    height:25px;
    flex:0 0 25px;
}

.capas-operativas .layer-body {
    padding:5px 9px 7px 36px;
}

@media (max-width:850px){
    .panel-sutran {
        width:calc(100vw - 12px);
        max-width:239px;
        left:6px;
        bottom:6px;
        max-height:calc(100vh - 12px);
    }
}


/* =====================================================================\n   PANEL DE CONTROL — DETECCIÓN MÓVIL + CONTRAER/EXPANDIR\n   En PC permanece a la izquierda y expandido. En teléfonos pasa a la\n   derecha y arranca contraído para maximizar el área útil del mapa.\n   ===================================================================== */\n.panel-mobile-head{\n    display:flex;\n    align-items:center;\n    gap:6px;\n    margin-bottom:7px;\n}\n.panel-mobile-head .titulo{\n    flex:1 1 auto;\n    margin-bottom:0 !important;\n}\n.btn-contraer-panel{\n    flex:0 0 auto;\n    min-width:30px;\n    height:28px;\n    padding:3px 7px;\n    border:1px solid rgba(255,255,255,.18);\n    border-radius:7px;\n    background:rgba(255,255,255,.08);\n    color:#eaf4ff;\n    font-size:10px;\n    font-weight:800;\n    cursor:pointer;\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n    gap:4px;\n}\n.btn-contraer-panel:hover{background:rgba(255,255,255,.15);}\n.btn-contraer-panel:active{transform:translateY(1px);}\n.btn-contraer-icon{font-size:12px;line-height:1;}\n.panel-sutran.panel-contraido{\n    width:48px !important;\n    max-width:48px !important;\n    padding:6px !important;\n    overflow:hidden !important;\n}\n.panel-sutran.panel-contraido .panel-mobile-head{\n    margin:0;\n    justify-content:center;\n}\n.panel-sutran.panel-contraido .panel-mobile-head .titulo,\n.panel-sutran.panel-contraido > :not(.panel-mobile-head){\n    display:none !important;\n}\n.panel-sutran.panel-contraido .btn-contraer-panel{\n    width:34px;\n    min-width:34px;\n    height:34px;\n    padding:0;\n}\n.panel-sutran.panel-contraido .btn-contraer-text{display:none;}\n.panel-sutran.panel-contraido .btn-contraer-icon{transform:rotate(180deg);}

@media (max-width:700px){\n    .panel-sutran.is-mobile-device{\n        left:auto !important;\n        right:6px !important;\n        bottom:6px !important;\n        width:239px;\n        max-width:calc(100vw - 12px);\n        max-height:calc(100vh - 12px);\n    }\n    .panel-sutran.is-mobile-device:not(.panel-contraido){\n        padding:8px;\n    }\n    .panel-sutran.is-mobile-device .btn-contraer-panel{\n        min-width:34px;\n        height:32px;\n    }\n}

@media (min-width:701px){\n    .panel-sutran.is-mobile-device{\n        left:10px;\n        right:auto;\n    }\n}\n
/* =====================================================================
   CONTROL DE ZOOM PARA TELÉFONOS
   Se coloca en la zona superior derecha para no competir con el panel
   de control, que en móvil se ubica en la esquina inferior derecha.
   ===================================================================== */
.mobile-map-zoom{
    display:none;
}

@media (max-width:700px){
    .mobile-map-zoom{
        position:absolute;
        top:92px;
        right:10px;
        z-index:10000;
        width:42px;
        padding:5px 4px 6px;
        box-sizing:border-box;
        border-radius:12px;
        background:rgba(6,26,51,.94);
        box-shadow:0 5px 16px rgba(0,0,0,.28);
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:4px;
        touch-action:none;
        user-select:none;
        -webkit-user-select:none;
    }

    .mobile-map-zoom button{
        width:34px;
        height:34px;
        padding:0;
        border:1px solid rgba(255,255,255,.18);
        border-radius:8px;
        background:rgba(255,255,255,.09);
        color:#fff;
        font-size:21px;
        line-height:1;
        font-weight:700;
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }

    .mobile-map-zoom button:active{
        background:rgba(255,255,255,.22);
        transform:scale(.96);
    }

    .mobile-map-zoom-slider{
        width:34px;
        height:118px;
        display:flex;
        align-items:center;
        justify-content:center;
        position:relative;
    }

    .mobile-map-zoom input[type="range"]{
        width:108px;
        height:30px;
        margin:0;
        padding:0;
        transform:rotate(-90deg);
        transform-origin:center;
        accent-color:#7fb5ff;
        cursor:pointer;
        touch-action:none;
    }

    .mobile-map-zoom .zoom-label{
        position:absolute;
        bottom:3px;
        left:0;
        right:0;
        text-align:center;
        color:rgba(255,255,255,.7);
        font:700 9px/1 Arial,sans-serif;
        pointer-events:none;
    }
}

/* =====================================================================
   BOTÓN SUPERIOR DEL PANEL — CONTRAER / EXPANDIR
   El control permanece visible tanto con el panel abierto como cerrado.
   ===================================================================== */
.panel-mobile-head{
    position:relative;
    z-index:3;
    min-height:34px;
}

.btn-contraer-panel{
    position:relative;
    z-index:4;
    box-sizing:border-box;
    min-width:82px;
    height:32px;
    padding:4px 9px;
    font-size:10px;
    line-height:1;
    white-space:nowrap;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}

@media (max-width:700px){
    .panel-sutran.is-mobile-device .panel-mobile-head{
        position:sticky;
        top:0;
        padding:1px 0 5px;
        margin-bottom:5px;
        background:inherit;
    }

    .panel-sutran.is-mobile-device:not(.panel-contraido) .btn-contraer-panel{
        min-width:88px;
        height:36px;
        font-size:11px;
    }

    .panel-sutran.is-mobile-device.panel-contraido{
        width:48px !important;
        max-width:48px !important;
        min-width:48px !important;
        padding:6px !important;
        right:6px !important;
        left:auto !important;
    }

    .panel-sutran.is-mobile-device.panel-contraido .panel-mobile-head{
        position:static;
        min-height:34px;
        padding:0;
        margin:0;
    }

    .panel-sutran.is-mobile-device.panel-contraido .btn-contraer-panel{
        min-width:36px;
        width:36px;
        height:36px;
        border-radius:9px;
        padding:0;
        font-size:0;
    }

    .panel-sutran.is-mobile-device.panel-contraido .btn-contraer-icon{
        font-size:17px;
        transform:none;
    }
}

/* =====================================================================
   MINIMIZACIÓN REAL DEL PANEL EN MÓVIL
   Al contraer NO se convierte en una barra lateral. Se oculta todo el
   contenedor y queda únicamente el botón flotante para volver a abrirlo.
   ===================================================================== */
@media (max-width:700px){
    .panel-sutran.is-mobile-device.panel-contraido{
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
        height:auto !important;
        max-height:none !important;
        padding:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        border:0 !important;
        border-radius:0 !important;
        overflow:visible !important;
        scrollbar-width:none !important;
    }

    .panel-sutran.is-mobile-device.panel-contraido::-webkit-scrollbar{
        display:none !important;
        width:0 !important;
        height:0 !important;
    }

    .panel-sutran.is-mobile-device.panel-contraido .panel-mobile-head{
        display:flex !important;
        width:auto !important;
        min-height:0 !important;
        padding:0 !important;
        margin:0 !important;
        background:transparent !important;
        position:static !important;
    }

    .panel-sutran.is-mobile-device.panel-contraido .panel-mobile-head .titulo{
        display:none !important;
    }

    .panel-sutran.is-mobile-device.panel-contraido > :not(.panel-mobile-head){
        display:none !important;
    }

    .panel-sutran.is-mobile-device.panel-contraido .btn-contraer-panel{
        display:flex !important;
        width:44px !important;
        min-width:44px !important;
        height:44px !important;
        margin:0 !important;
        padding:0 !important;
        border:1px solid rgba(255,255,255,.28) !important;
        border-radius:50% !important;
        background:#061a33 !important;
        color:#fff !important;
        box-shadow:0 5px 16px rgba(0,0,0,.38) !important;
        align-items:center !important;
        justify-content:center !important;
        font-size:0 !important;
        line-height:1 !important;
    }

    .panel-sutran.is-mobile-device.panel-contraido .btn-contraer-icon{
        display:block !important;
        font-size:19px !important;
        line-height:1 !important;
        transform:none !important;
    }

    .panel-sutran.is-mobile-device.panel-contraido .btn-contraer-text{
        display:none !important;
    }
}


/* =====================================================================
   COMPATIBILIDAD MÓVIL — CHROME / MODO "SITIO PARA COMPUTADORA"
   No reemplaza los @media existentes; solo los refuerza cuando el
   navegador móvil presenta un viewport CSS ancho.
   ===================================================================== */
html.force-mobile .panel-sutran{
    left:auto !important;
    right:6px !important;
    top:auto !important;
    bottom:6px !important;
    width:239px !important;
    max-width:calc(100vw - 12px) !important;
    max-height:calc(100vh - 12px) !important;
    box-sizing:border-box !important;
}
html.force-mobile .panel-sutran.is-mobile-device{
    left:auto !important;
    right:6px !important;
    bottom:6px !important;
}
html.force-mobile .panel-sutran.panel-contraido{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
    overflow:visible !important;
}
html.force-mobile .panel-sutran.panel-contraido > :not(.panel-mobile-head){
    display:none !important;
}
html.force-mobile .panel-sutran.panel-contraido .panel-mobile-head .titulo{
    display:none !important;
}
html.force-mobile .panel-sutran.panel-contraido .btn-contraer-panel{
    display:flex !important;
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    padding:0 !important;
    border-radius:50% !important;
    font-size:0 !important;
    align-items:center !important;
    justify-content:center !important;
}
html.force-mobile .panel-sutran.panel-contraido .btn-contraer-icon{
    display:block !important;
    font-size:19px !important;
}
html.force-mobile .mobile-map-zoom{
    display:flex !important;
}
html.force-mobile .leaflet-control-zoom{
    display:none !important;
}


/* =====================================================================
   PANEL DE CONTROL — NUEVO CONTROL DE MINIMIZAR / EXPANDIR
   Diseño tipo cápsula: visible y claro incluso cuando el panel está
   minimizado. El panel inicia minimizado en PC y móviles.
   ===================================================================== */
.panel-sutran.panel-contraido{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
}
.panel-sutran.panel-contraido .panel-mobile-head{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    position:static !important;
}
.panel-sutran.panel-contraido .panel-mobile-head .titulo,
.panel-sutran.panel-contraido > :not(.panel-mobile-head){display:none !important;}
.btn-contraer-panel{
    min-width:255px !important;
    height:42px !important;
    padding:0 16px !important;
    border:1px solid rgba(255,255,255,.22) !important;
    border-radius:14px !important;
    background:linear-gradient(135deg,rgba(7,31,61,.98),rgba(16,61,103,.96)) !important;
    color:#fff !important;
    box-shadow:0 7px 22px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.10) !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:.35px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
    touch-action:manipulation !important;
    transition:transform .16s ease,box-shadow .16s ease,filter .16s ease !important;
}
.btn-contraer-panel:hover{filter:brightness(1.10) !important;box-shadow:0 9px 26px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.13) !important;}
.btn-contraer-panel:active{transform:translateY(1px) scale(.99) !important;}
.btn-contraer-icon{
    display:inline-flex !important;align-items:center !important;justify-content:center !important;
    width:23px !important;height:23px !important;border-radius:50% !important;
    background:rgba(255,255,255,.13) !important;color:#fff !important;
    font-size:16px !important;font-weight:900 !important;line-height:1 !important;
    flex:0 0 23px !important;transform:none !important;
}
.panel-sutran.panel-contraido .btn-contraer-text{display:inline !important;}
.panel-sutran:not(.panel-contraido) .btn-contraer-panel{
    min-width:245px !important;height:36px !important;border-radius:11px !important;font-size:10px !important;
}
@media (max-width:700px){
    .panel-sutran.panel-contraido{right:6px !important;left:auto !important;bottom:6px !important;}
    .panel-sutran.panel-contraido .panel-mobile-head{width:auto !important;}
    .panel-sutran.panel-contraido .btn-contraer-panel{
        min-width:255px !important;max-width:calc(100vw - 12px) !important;width:255px !important;
        height:46px !important;border-radius:15px !important;font-size:11px !important;
    }
    .panel-sutran:not(.panel-contraido) .btn-contraer-panel{
        min-width:100% !important;width:100% !important;max-width:none !important;height:38px !important;font-size:10px !important;
    }
}
@media (min-width:701px){
    .panel-sutran.panel-contraido{left:10px !important;right:auto !important;bottom:10px !important;}
}




/* ===== Ajuste visual final del Panel de Control ===== */

/* El botón de minimizar tiene tamaño finito y contenido centrado. */
.btn-contraer-panel,
#btn-contraer-panel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    min-width: 190px !important;
    max-width: calc(100% - 24px) !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 8px auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
    line-height: 1 !important;
}

.btn-contraer-panel .btn-contraer-text,
#btn-contraer-panel .btn-contraer-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Cuando el panel está contraído, la cápsula también queda centrada,
   pero conserva un ancho definido y no ocupa toda la pantalla. */

/* Evita que el contenedor del botón se estire. */
.panel-sutran .btn-contraer-wrap,
.panel-sutran .panel-contraer-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* Buscador de agencias: compacto, aproximadamente 50% de la altura anterior. */
#buscarAgencia,
#buscar-agencia,
#buscadorAgencia,
.input-buscar-agencia,
.buscar-agencia,
#searchAgencia,
.agencias-panel input[type="text"],
.agencias-panel input[type="search"],
.panel-agencias input[type="text"],
.panel-agencias input[type="search"] {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 2px 8px !important;
    box-sizing: border-box !important;
}



/* El contenedor del encabezado centra el botón sin estirarlo. */
.panel-mobile-head {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}



/* Si otra regla intenta convertir el botón en una barra al contraer,
   mantenerlo como cápsula centrada. */
.panel-sutran.panel-contraido .panel-mobile-head #btnContraerPanel.btn-contraer-panel {
    width: max-content !important;
    min-width: 0 !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* === BOTÓN CONTRAER: ancho estrictamente según su contenido === */
.panel-sutran .panel-mobile-head {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.panel-sutran .panel-mobile-head #btnContraerPanel.btn-contraer-panel {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 5px auto !important;
    padding: 0 8px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

.panel-sutran .panel-mobile-head #btnContraerPanel .btn-contraer-icon,
.panel-sutran .panel-mobile-head #btnContraerPanel .btn-contraer-text {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.panel-sutran .panel-mobile-head #btnContraerPanel .btn-contraer-text {
    font-size: 12px !important;
}

.panel-sutran .panel-mobile-head #btnContraerPanel .btn-contraer-icon {
    font-size: 13px !important;
}

/* Al contraerse, exactamente el mismo ancho compacto y centrado. */
.panel-sutran.panel-contraido .panel-mobile-head #btnContraerPanel.btn-contraer-panel {
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ===== MINIMIZAR PANEL: marco compacto, sin espacio sobrante ===== */
.panel-sutran .panel-mobile-head > #btnContraerPanel.btn-contraer-panel {
    display: inline-flex !important;
    position: relative !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 4px !important;
    margin: 4px auto !important;
    gap: 3px !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.panel-sutran .panel-mobile-head > #btnContraerPanel.btn-contraer-panel .btn-contraer-icon {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
}

.panel-sutran .panel-mobile-head > #btnContraerPanel.btn-contraer-panel .btn-contraer-text {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Nunca dejar que el estado minimizado lo vuelva a estirar. */
.panel-sutran.panel-contraido .panel-mobile-head > #btnContraerPanel.btn-contraer-panel {
    width: fit-content !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ================================================================
   PANEL DE CONTROL — AJUSTE RESPONSIVE FINAL
   Desktop: botón de minimizar alineado a la derecha.
   Móvil: panel y sus controles se reducen para dejar visible el mapa.
   ================================================================ */

/* Botón MINIMIZAR PANEL: siempre a la derecha del encabezado. */
.panel-sutran .panel-mobile-head {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.panel-sutran .panel-mobile-head #btnContraerPanel.btn-contraer-panel {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    margin: 4px 6px 4px auto !important;
    padding: 0 7px !important;
    gap: 3px !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.panel-sutran .panel-mobile-head #btnContraerPanel .btn-contraer-icon {
    width: auto !important;
    min-width: 0 !important;
    font-size: 12px !important;
}

.panel-sutran .panel-mobile-head #btnContraerPanel .btn-contraer-text {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
}

/* Cuando está minimizado, el control sigue siendo pequeño y a la derecha. */
.panel-sutran.panel-contraido .panel-mobile-head {
    justify-content: flex-end !important;
}

.panel-sutran.panel-contraido .panel-mobile-head #btnContraerPanel.btn-contraer-panel {
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    margin-left: auto !important;
    margin-right: 6px !important;
}

/* ========================= MÓVIL =========================
   Escala visual aproximada del 50% para que el panel no tape el mapa.
   Se aplica sobre los controles del panel, no sobre el mapa.
   ========================================================= */
html.force-mobile .panel-sutran {
    width: min(50vw, 210px) !important;
    max-width: 50vw !important;
    max-height: 50vh !important;
    font-size: 9px !important;
    box-sizing: border-box !important;
}

html.force-mobile .panel-sutran .panel-mobile-head {
    min-height: 24px !important;
    padding: 0 2px !important;
}

html.force-mobile .panel-sutran .panel-mobile-head #btnContraerPanel.btn-contraer-panel {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    margin: 2px 3px 2px auto !important;
    padding: 0 4px !important;
    gap: 2px !important;
    border-radius: 5px !important;
}

html.force-mobile .panel-sutran .panel-mobile-head #btnContraerPanel .btn-contraer-icon {
    font-size: 8px !important;
}

html.force-mobile .panel-sutran .panel-mobile-head #btnContraerPanel .btn-contraer-text {
    font-size: 7px !important;
}

html.force-mobile .panel-sutran button,
html.force-mobile .panel-sutran input,
html.force-mobile .panel-sutran select,
html.force-mobile .panel-sutran label {
    font-size: 8px !important;
}

html.force-mobile .panel-sutran button {
    min-height: 20px !important;
    height: 20px !important;
    padding: 2px 4px !important;
}

html.force-mobile .panel-sutran input,
html.force-mobile .panel-sutran select {
    height: 20px !important;
    min-height: 20px !important;
    padding: 2px 4px !important;
}

html.force-mobile .panel-sutran img,
html.force-mobile .panel-sutran svg,
html.force-mobile .panel-sutran .icon,
html.force-mobile .panel-sutran .fa,
html.force-mobile .panel-sutran .fas,
html.force-mobile .panel-sutran .far {
    max-width: 12px !important;
    max-height: 12px !important;
    font-size: 10px !important;
}

html.force-mobile .panel-sutran .panel-mobile-head + * {
    margin-top: 2px !important;
}

html.force-mobile .panel-sutran > * {
    box-sizing: border-box !important;
}

/* En móvil minimizado: solo queda el control compacto. */
html.force-mobile .panel-sutran.panel-contraido {
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html.force-mobile .panel-sutran.panel-contraido .panel-mobile-head {
    width: auto !important;
    justify-content: flex-end !important;
}

html.force-mobile .panel-sutran.panel-contraido .panel-mobile-head #btnContraerPanel.btn-contraer-panel {
    margin-right: 4px !important;
}


/* ================================================================
   MÓVIL — PANEL ULTRA COMPACTO
   Ancho: ~50% menos respecto al panel móvil anterior.
   Alto: ~70% menos respecto al panel móvil anterior.
   Solo afecta html.force-mobile.
   ================================================================ */

/* El panel ocupa como máximo ~25vw, no la mitad de la pantalla. */
html.force-mobile .panel-sutran {
    width: min(25vw, 120px) !important;
    max-width: 25vw !important;
    max-height: 30vh !important;
    overflow-y: auto !important;
    font-size: 7px !important;
}

/* Encabezado extremadamente compacto. */
html.force-mobile .panel-sutran .panel-mobile-head {
    min-height: 16px !important;
    height: 16px !important;
    padding: 0 !important;
}

/* Botón minimizado/expandido muy pequeño y a la derecha. */
html.force-mobile .panel-sutran .panel-mobile-head #btnContraerPanel.btn-contraer-panel {
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    margin: 1px 2px 1px auto !important;
    padding: 0 3px !important;
    gap: 2px !important;
    border-radius: 4px !important;
    font-size: 6px !important;
}

html.force-mobile .panel-sutran .panel-mobile-head #btnContraerPanel .btn-contraer-icon {
    font-size: 6px !important;
}

html.force-mobile .panel-sutran .panel-mobile-head #btnContraerPanel .btn-contraer-text {
    font-size: 6px !important;
}

/* Todos los controles internos se reducen considerablemente. */
html.force-mobile .panel-sutran button,
html.force-mobile .panel-sutran input,
html.force-mobile .panel-sutran select,
html.force-mobile .panel-sutran label {
    font-size: 6px !important;
}

html.force-mobile .panel-sutran button {
    min-height: 13px !important;
    height: 13px !important;
    padding: 1px 2px !important;
}

html.force-mobile .panel-sutran input,
html.force-mobile .panel-sutran select {
    height: 13px !important;
    min-height: 13px !important;
    padding: 1px 2px !important;
}

/* Iconos, checks y elementos gráficos. */
html.force-mobile .panel-sutran img,
html.force-mobile .panel-sutran svg,
html.force-mobile .panel-sutran .icon,
html.force-mobile .panel-sutran .fa,
html.force-mobile .panel-sutran .fas,
html.force-mobile .panel-sutran .far {
    max-width: 8px !important;
    max-height: 8px !important;
    font-size: 7px !important;
}

/* Separaciones internas pequeñas. */
html.force-mobile .panel-sutran > *,
html.force-mobile .panel-sutran div,
html.force-mobile .panel-sutran section {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

/* Cuando está minimizado, NO aplicar el ancho de 25vw:
   solo aparece el pequeño botón flotante. */
html.force-mobile .panel-sutran.panel-contraido {
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
}


/* ================================================================
   MÓVIL — PANEL COMPACTO PERO PROPORCIONAL
   No aplastar elementos: reducir ocupación mediante layout y espacios.
   ================================================================ */

@media (max-width: 600px) {
    html.force-mobile .panel-sutran {
        width: min(44vw, 190px) !important;
        max-width: 44vw !important;
        max-height: 55vh !important;
        overflow-y: auto !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        box-sizing: border-box !important;
        padding: 5px !important;
    }

    html.force-mobile .panel-sutran .panel-mobile-head {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 2px !important;
        margin: 0 0 3px 0 !important;
    }

    /* MINIMIZAR PANEL: pequeño, legible y alineado a la derecha. */
    html.force-mobile .panel-sutran .panel-mobile-head #btnContraerPanel.btn-contraer-panel {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 25px !important;
        min-height: 25px !important;
        max-height: 25px !important;
        margin: 1px 2px 1px auto !important;
        padding: 0 7px !important;
        gap: 4px !important;
        border-radius: 6px !important;
        font-size: 9px !important;
    }

    html.force-mobile .panel-sutran .panel-mobile-head #btnContraerPanel .btn-contraer-icon {
        font-size: 9px !important;
        max-width: none !important;
        max-height: none !important;
    }

    html.force-mobile .panel-sutran .panel-mobile-head #btnContraerPanel .btn-contraer-text {
        font-size: 9px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /* Controles: tamaño legible, sin deformarlos. */
    html.force-mobile .panel-sutran button {
        height: 25px !important;
        min-height: 25px !important;
        padding: 3px 6px !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
    }

    html.force-mobile .panel-sutran input,
    html.force-mobile .panel-sutran select {
        height: 25px !important;
        min-height: 25px !important;
        padding: 3px 6px !important;
        font-size: 9px !important;
        box-sizing: border-box !important;
    }

    html.force-mobile .panel-sutran label {
        font-size: 9px !important;
        line-height: 1.15 !important;
        margin: 1px 0 !important;
    }

    /* Iconos proporcionados. */
    html.force-mobile .panel-sutran img,
    html.force-mobile .panel-sutran svg {
        max-width: 16px !important;
        max-height: 16px !important;
    }

    html.force-mobile .panel-sutran .icon,
    html.force-mobile .panel-sutran .fa,
    html.force-mobile .panel-sutran .fas,
    html.force-mobile .panel-sutran .far {
        font-size: 13px !important;
        max-width: none !important;
        max-height: none !important;
    }

    /* Compactar espacios, no los elementos. */
    html.force-mobile .panel-sutran > *,
    html.force-mobile .panel-sutran section,
    html.force-mobile .panel-sutran .panel-section {
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }

    html.force-mobile .panel-sutran .panel-mobile-head + * {
        margin-top: 2px !important;
    }

    /* Minimizado: solo el botón, sin caja grande. */
    html.force-mobile .panel-sutran.panel-contraido {
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    html.force-mobile .panel-sutran.panel-contraido .panel-mobile-head {
        width: auto !important;
        height: 28px !important;
        min-height: 28px !important;
        justify-content: flex-end !important;
    }
}


/* ================================================================
   MÓVIL — PANEL DE CONTROL COMPACTO CON DESPLAZAMIENTO
   Anclado abajo a la derecha. Solo se muestra una fracción de la
   altura total; el contenido se recorre con el dedo.
   ================================================================ */

@media (max-width: 700px) {
    html.force-mobile .panel-sutran,
    .panel-sutran.is-mobile-device {
        position: fixed !important;
        left: auto !important;
        right: 5px !important;
        top: auto !important;
        bottom: 5px !important;

        width: min(180px, 50vw) !important;
        max-width: 50vw !important;

        /* Mostrar aproximadamente la mitad del panel y desplazar el resto. */
        height: auto !important;
        max-height: 42vh !important;
        min-height: 0 !important;

        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;

        padding: 4px !important;
        margin: 0 !important;

        scrollbar-width: thin !important;
        scrollbar-color: rgba(160,190,220,.75) rgba(255,255,255,.08) !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }

    /* Barra de desplazamiento visible y estrecha en Chrome/Edge Android. */
    html.force-mobile .panel-sutran::-webkit-scrollbar,
    .panel-sutran.is-mobile-device::-webkit-scrollbar {
        width: 6px !important;
    }

    html.force-mobile .panel-sutran::-webkit-scrollbar-track,
    .panel-sutran.is-mobile-device::-webkit-scrollbar-track {
        background: rgba(255,255,255,.06) !important;
        border-radius: 6px !important;
    }

    html.force-mobile .panel-sutran::-webkit-scrollbar-thumb,
    .panel-sutran.is-mobile-device::-webkit-scrollbar-thumb {
        background: rgba(160,190,220,.8) !important;
        border-radius: 6px !important;
    }

    /* El encabezado ya no ocupa una franja grande. */
    html.force-mobile .panel-sutran .panel-mobile-head,
    .panel-sutran.is-mobile-device .panel-mobile-head {
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
        min-height: 23px !important;
        height: 23px !important;
        padding: 0 1px !important;
        margin: 0 0 2px 0 !important;
        background: rgba(6,26,51,.98) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    /* Botón compacto, a la derecha, sin icono ocupando una línea aparte. */
    html.force-mobile .panel-sutran .panel-mobile-head #btnContraerPanel.btn-contraer-panel,
    .panel-sutran.is-mobile-device .panel-mobile-head #btnContraerPanel.btn-contraer-panel {
        position: static !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 21px !important;
        min-height: 21px !important;
        max-height: 21px !important;
        margin: 0 1px 0 auto !important;
        padding: 0 5px !important;
        gap: 3px !important;
        border-radius: 5px !important;
        font-size: 8px !important;
        line-height: 1 !important;
        box-shadow: none !important;
    }

    html.force-mobile .panel-sutran .panel-mobile-head #btnContraerPanel .btn-contraer-icon,
    .panel-sutran.is-mobile-device .panel-mobile-head #btnContraerPanel .btn-contraer-icon {
        font-size: 8px !important;
        line-height: 1 !important;
    }

    html.force-mobile .panel-sutran .panel-mobile-head #btnContraerPanel .btn-contraer-text,
    .panel-sutran.is-mobile-device .panel-mobile-head #btnContraerPanel .btn-contraer-text {
        font-size: 8px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /* Reducir espacios, no aplastar controles. */
    html.force-mobile .panel-sutran .grupo,
    .panel-sutran.is-mobile-device .grupo {
        margin-bottom: 4px !important;
    }

    html.force-mobile .panel-sutran .titulo,
    .panel-sutran.is-mobile-device .titulo {
        font-size: 9px !important;
        line-height: 1.15 !important;
        margin-bottom: 2px !important;
    }

    html.force-mobile .panel-sutran label,
    .panel-sutran.is-mobile-device label {
        font-size: 8px !important;
        line-height: 1.15 !important;
        margin: 3px 0 !important;
    }

    html.force-mobile .panel-sutran button,
    .panel-sutran.is-mobile-device button {
        min-height: 22px !important;
        height: 22px !important;
        padding: 2px 5px !important;
        font-size: 8px !important;
    }

    html.force-mobile .panel-sutran input,
    html.force-mobile .panel-sutran select,
    .panel-sutran.is-mobile-device input,
    .panel-sutran.is-mobile-device select {
        height: 22px !important;
        min-height: 22px !important;
        padding: 2px 5px !important;
        font-size: 8px !important;
    }

    /* Iconos proporcionados. */
    html.force-mobile .panel-sutran img,
    html.force-mobile .panel-sutran svg,
    .panel-sutran.is-mobile-device img,
    .panel-sutran.is-mobile-device svg {
        max-width: 13px !important;
        max-height: 13px !important;
    }

    /* Minimizado: solo el pequeño botón, sin panel vacío. */
    html.force-mobile .panel-sutran.panel-contraido,
    .panel-sutran.is-mobile-device.panel-contraido {
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}


/* AJUSTE FINAL — PANEL MÓVIL ULTRA COMPACTO */
@media (max-width: 700px) {
    .panel-sutran {
        width: min(148px, 42vw) !important;
        max-width: 42vw !important;
        max-height: 36vh !important;
        padding: 3px !important;
        border-radius: 9px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        font-size: 7px !important;
    }

    .panel-sutran .panel-header,
    .panel-sutran .titulo-panel,
    .panel-sutran .panel-title {
        min-height: 20px !important;
        height: 20px !important;
        padding: 2px 4px !important;
        font-size: 7px !important;
        line-height: 16px !important;
    }

    .panel-sutran button,
    .panel-sutran .btn,
    .panel-sutran .panel-btn,
    .panel-sutran .control-btn {
        min-height: 21px !important;
        height: 21px !important;
        padding: 2px 4px !important;
        margin: 1px 0 !important;
        font-size: 7px !important;
        line-height: 16px !important;
        gap: 3px !important;
        border-radius: 5px !important;
    }

    .panel-sutran label {
        min-height: 19px !important;
        padding: 1px 3px !important;
        margin: 0 !important;
        font-size: 7px !important;
        line-height: 16px !important;
        gap: 3px !important;
    }

    .panel-sutran input[type="checkbox"],
    .panel-sutran input[type="radio"] {
        width: 10px !important;
        height: 10px !important;
        min-width: 10px !important;
        min-height: 10px !important;
        margin: 0 2px 0 0 !important;
    }

    .panel-sutran i,
    .panel-sutran svg,
    .panel-sutran img,
    .panel-sutran .icon,
    .panel-sutran .fa,
    .panel-sutran .fas,
    .panel-sutran .far {
        width: 11px !important;
        max-width: 11px !important;
        height: 11px !important;
        max-height: 11px !important;
        font-size: 10px !important;
        flex: 0 0 11px !important;
    }

    .panel-sutran .submodulo,
    .panel-sutran .submenu,
    .panel-sutran .panel-section,
    .panel-sutran .grupo-controles {
        margin: 1px 0 !important;
        padding: 1px !important;
    }

    .panel-sutran::-webkit-scrollbar {
        width: 4px !important;
    }

    .panel-sutran::-webkit-scrollbar-thumb {
        border-radius: 4px !important;
    }
}

/* Selector ligero para las 3 comisarías más cercanas a una agencia */
.comisarias-cercanas{margin:8px 0 10px;padding:8px;border:1px solid rgba(0,0,0,.12);border-radius:8px;background:rgba(255,255,255,.55)}
.comisarias-cercanas-title{font-size:11px;font-weight:700;margin-bottom:6px;color:#222}
.comisarias-cercanas-select{width:100%;box-sizing:border-box;height:32px;border:1px solid #aaa;border-radius:6px;background:#fff;padding:0 8px;font-size:12px}
.comisarias-cercanas-btn{width:100%;margin-top:6px;height:31px;border:0;border-radius:6px;cursor:pointer;font-size:12px;font-weight:700;background:#eee;color:#111}
.comisarias-cercanas-btn:active{transform:translateY(1px)}
.comisarias-cercanas-status{font-size:10px;line-height:1.3;margin-top:5px;min-height:13px;color:#555}

/* Buscador y filtro avanzado de comisarías cercanas */
.comisarias-cercanas-field{position:relative;margin:0 0 7px}
.comisarias-cercanas-field>label{display:block;font-size:10px;font-weight:700;color:#333;margin:0 0 3px}
.comisarias-cercanas-input-wrap{position:relative;display:flex;align-items:center}
.comisarias-cercanas-icon{position:absolute;left:8px;font-size:12px;z-index:2;pointer-events:none}
.comisarias-cercanas-input{width:100%;height:32px;box-sizing:border-box;border:1px solid #aaa;border-radius:6px;background:#fff;padding:0 28px 0 27px;font-size:12px;outline:none}
.comisarias-cercanas-input:focus{border-color:#4b78a8;box-shadow:0 0 0 2px rgba(75,120,168,.12)}
.comisarias-cercanas-clear{position:absolute;right:4px;top:3px;width:25px;height:26px;border:0;background:transparent;color:#777;font-size:19px;line-height:24px;cursor:pointer;border-radius:4px}
.comisarias-cercanas-clear:hover{background:#eee;color:#111}
.comisarias-cercanas-sugerencias{position:absolute;left:0;right:0;top:51px;display:none;z-index:1200;background:#fff;border:1px solid #bbb;border-radius:6px;box-shadow:0 5px 14px rgba(0,0,0,.18);max-height:190px;overflow:auto}
.comisarias-cercanas-sugerencias.visible{display:block}
.comisarias-sugerencia{width:100%;display:flex;align-items:center;gap:7px;text-align:left;border:0;border-bottom:1px solid #eee;background:#fff;padding:6px 8px;cursor:pointer;font-size:11px;color:#111}
.comisarias-sugerencia:last-child{border-bottom:0}
.comisarias-sugerencia:hover,.comisarias-sugerencia.activo{background:#eef5fb}
.comisarias-sugerencia-icon{width:19px;flex:0 0 19px;text-align:center}
.comisarias-sugerencia span:last-child{min-width:0;display:flex;flex-direction:column}
.comisarias-sugerencia strong{font-size:11px;line-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comisarias-sugerencia small{font-size:9px;color:#666;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comisarias-sugerencia-vacia{padding:9px;font-size:10px;color:#666;text-align:center}
.comisarias-cercanas-controls{display:flex;gap:6px;align-items:flex-end}
.comisarias-cercanas-controls .cantidad-field{flex:1;margin-bottom:0}
.comisarias-cantidad-wrap{display:flex;gap:4px}
.comisarias-cantidad{width:78px;height:31px;box-sizing:border-box;border:1px solid #aaa;border-radius:6px;background:#fff;padding:0 5px;font-size:12px}
.comisarias-todas-btn{height:31px;padding:0 8px;border:1px solid #aaa;border-radius:6px;background:#fff;font-size:10px;font-weight:700;cursor:pointer}
.comisarias-todas-btn:hover,.comisarias-todas-btn.activo{background:#e8f1f8;border-color:#4b78a8}
.comisarias-cercanas-controls .comisarias-cercanas-btn{flex:1;margin-top:0;max-width:105px}
.comisarias-distancia{font-size:10px;line-height:14px;margin-top:5px;color:#14527d;min-height:0}
.comisaria-ruta-flecha{background:transparent!important;border:0!important}
.comisaria-ruta-flecha span{display:block;width:24px;height:24px;line-height:24px;text-align:center;color:#1769aa;font-size:24px;font-weight:900;text-shadow:0 1px 2px rgba(255,255,255,.95)}
.comisaria-ruta-distancia{background:transparent!important;border:0!important;white-space:nowrap}
.comisaria-ruta-distancia span{display:inline-block;transform:translate(-50%,-50%);background:#fff;border:1px solid #1769aa;border-radius:10px;padding:2px 6px;font-size:10px;font-weight:800;color:#14527d;box-shadow:0 1px 4px rgba(0,0,0,.18)}