/* ============================================================
   CENTRO DE RIESGOS OPERATIVOS
   ============================================================ */

.monitor-dashboard{
    position:fixed;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    z-index:10020;
    width:min(1320px,calc(100vw - 24px));
    box-sizing:border-box;
    display:grid;
    grid-template-columns:190px repeat(4,minmax(0,1fr));
    gap:7px;
    padding:7px;
    border:1px solid rgba(117,166,220,.24);
    border-radius:16px;
    background:#fff;
    color:#1f2937;
    box-shadow:0 10px 28px rgba(15,23,42,.18);
    backdrop-filter:blur(8px);
    font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
}

.monitor-dashboard-head{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:7px 9px;
    border-right:1px solid #e5e7eb;
}

.monitor-dashboard-brand{display:flex;align-items:center;gap:8px}
.monitor-dashboard-brand strong{display:block;font-size:10px;letter-spacing:.9px}
.monitor-dashboard-brand small{display:block;margin-top:3px;color:#6b7280;font-size:8px}
.monitor-dashboard-pulse{
    width:9px;height:9px;border-radius:50%;background:#39d98a;flex:none;
    box-shadow:0 0 0 5px rgba(57,217,138,.10),0 0 13px rgba(57,217,138,.55)
}
.monitor-dashboard-updated{margin-top:8px;color:#6b7280;font-size:7px}

.monitor-dashboard-card{
    min-width:0;
    padding:7px 8px;
    border:1px solid #e5e7eb;
    border-radius:11px;
    background:#fff;
    overflow:hidden;
}
.monitor-dashboard-card.sutran{border-color:rgba(239,68,68,.25)}
.monitor-dashboard-card.bomberos{border-color:rgba(251,146,60,.25)}
.monitor-dashboard-card.sismos{border-color:rgba(234,179,8,.25)}
.monitor-dashboard-card.volcanes{border-color:rgba(249,115,22,.25)}

.monitor-dashboard-card-title{
    display:flex;align-items:center;gap:5px;color:#374151;
    font-size:8px;font-weight:800;letter-spacing:.55px
}
.monitor-dashboard-icon{
    width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;
    border-radius:6px;background:#f3f4f6;font-size:10px
}
.monitor-dashboard-count{
    margin-left:auto;min-width:18px;padding:2px 5px;border-radius:6px;
    background:#f3f4f6;color:#111827;text-align:center;font-size:8px
}
.monitor-dashboard-number{
    display:inline-block;margin-top:4px;margin-right:5px;font-size:21px;line-height:1;font-weight:900
}
.monitor-dashboard-card.sutran .monitor-dashboard-number{color:#ff7373}
.monitor-dashboard-card.bomberos .monitor-dashboard-number{color:#ffad63}
.monitor-dashboard-card.sismos .monitor-dashboard-number{color:#facc15}
.monitor-dashboard-card.volcanes .monitor-dashboard-number{color:#fb923c}
.monitor-dashboard-label{display:inline-block;color:#6b7280;font-size:7px}
.monitor-dashboard-muted{color:#6b7280;font-size:8px;display:block;padding:7px 0}

.dashboard-eventos-list{margin-top:4px;max-height:58px;overflow:auto}
.dashboard-evento{
    width:100%;display:flex;align-items:center;gap:5px;padding:3px 2px;margin:1px 0;
    border:0;border-radius:5px;background:transparent;color:#1f2937;text-align:left;cursor:pointer
}
.dashboard-evento:hover{background:rgba(255,255,255,.07)}
.dashboard-evento-icon{width:16px;flex:none;text-align:center;font-size:10px}
.dashboard-evento b{display:block;font-size:7px;line-height:1.1}
.dashboard-evento small{display:block;color:#6b7280;font-size:6.5px;line-height:1.15;margin-top:1px}
.dashboard-impacto{margin-top:4px}
.dashboard-volcan-nombre{font-size:13px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

.riesgo-badge{
    display:inline-flex;align-items:center;padding:2px 5px;border-radius:5px;
    font-size:7px;font-weight:900;letter-spacing:.25px
}
.riesgo-badge.critico{background:rgba(239,68,68,.18);color:#ff8585}
.riesgo-badge.alto{background:rgba(249,115,22,.18);color:#ffad63}
.riesgo-badge.moderado{background:rgba(234,179,8,.18);color:#facc15}
.riesgo-badge.bajo{background:rgba(34,197,94,.16);color:#6ee7a1}

/* Perfil lateral derecho */
.riesgo-perfil{
    position:fixed;
    top:112px;
    right:12px;
    z-index:10015;
    width:min(370px,calc(100vw - 24px));
    max-height:calc(100vh - 124px);
    overflow:auto;
    display:none;
    box-sizing:border-box;
    padding:12px;
    border:1px solid rgba(117,166,220,.24);
    border-radius:14px;
    background:#fff;
    color:#1f2937;
    box-shadow:0 16px 42px rgba(0,0,0,.42);
    backdrop-filter:blur(12px);
    font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif
}
.riesgo-perfil.visible{display:block}
.perfil-cabecera{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.perfil-cabecera small{color:#6b7280;font-size:7px;letter-spacing:.8px}
.perfil-cabecera h2{font-size:15px;margin:3px 0 0}
.perfil-cabecera button{
    border:0;background:rgba(255,255,255,.07);color:#fff;border-radius:6px;
    width:24px;height:24px;cursor:pointer;font-size:17px;line-height:1
}
.perfil-seccion{margin-top:9px;padding:8px;border:1px solid #e5e7eb;border-radius:9px;background:rgba(255,255,255,.025)}
.perfil-seccion h3{margin:0 0 6px;color:#b9c9d9;font-size:9px;letter-spacing:.45px}
.perfil-fila{display:flex;justify-content:space-between;gap:10px;padding:2px 0;font-size:7.5px}
.perfil-fila span{color:#7d91a8}
.perfil-fila strong{color:#edf5fc;text-align:right;max-width:68%;font-weight:700}
.perfil-nivel{padding:3px 0}
.perfil-evento{padding:6px 0;border-top:1px solid rgba(255,255,255,.055)}
.perfil-evento:first-of-type{border-top:0}
.perfil-evento b{display:block;font-size:8px}
.perfil-evento span,.perfil-evento small,.perfil-evento em{display:block;margin-top:2px;font-size:7px;color:#8da0b5;font-style:normal}
.perfil-evento em{color:#ff9c9c}
.perfil-ok{padding:5px 0;color:#6ee7a1;font-size:7.5px}

@media(max-width:1100px){
    .monitor-dashboard{grid-template-columns:160px repeat(4,minmax(150px,1fr));overflow-x:auto}
}
@media(max-width:850px){
    .monitor-dashboard{
        left:6px;transform:none;width:calc(100vw - 12px);
        grid-template-columns:repeat(4,190px);top:6px;overflow-x:auto
    }
    .monitor-dashboard-head{display:none}
    .riesgo-perfil{top:105px;max-height:65vh}
}
@media(max-width:520px){
    .monitor-dashboard{grid-template-columns:repeat(4,175px)}
    .riesgo-perfil{right:6px;width:calc(100vw - 12px)}
}

/* ============================================================
   MEJORA VISUAL — DASHBOARD SUPERIOR
   Tipografía más legible y contraste reforzado.
   ============================================================ */
.monitor-dashboard{
    grid-template-columns:205px repeat(4,minmax(0,1fr));
    padding:8px;
    gap:8px;
}
.monitor-dashboard-head{padding:9px 11px}
.monitor-dashboard-brand strong{
    font-size:14px;
    line-height:1.15;
    letter-spacing:.65px;
    color:#f7fbff;
}
.monitor-dashboard-brand small{
    font-size:10px;
    line-height:1.2;
    color:#c2d5e8;
}
.monitor-dashboard-updated{
    margin-top:7px;
    font-size:9px;
    color:#aec3d8;
}
.monitor-dashboard-card{padding:8px 9px}
.monitor-dashboard-card-title{
    color:#d9e9f8;
    font-size:10px;
    letter-spacing:.45px;
}
.monitor-dashboard-icon{font-size:11px}
.monitor-dashboard-count{font-size:9px;color:#f1f7ff}
.monitor-dashboard-number{font-size:23px}
.monitor-dashboard-label{font-size:9px;color:#b9cde0}
.monitor-dashboard-muted{font-size:9px;color:#aec3d8}
.dashboard-evento{padding:4px 3px}
.dashboard-evento b{font-size:9px;line-height:1.15;color:#f3f8fd}
.dashboard-evento small{font-size:8px;line-height:1.2;color:#b5c9dc}
.riesgo-badge{font-size:8px}

@media(max-width:1100px){
    .monitor-dashboard{grid-template-columns:175px repeat(4,minmax(150px,1fr))}
}
@media(max-width:850px){
    .monitor-dashboard{grid-template-columns:repeat(4,200px)}
}
@media(max-width:520px){
    .monitor-dashboard{grid-template-columns:repeat(4,185px)}
}

/* Ajustes del dashboard solicitado */
.monitor-dashboard{grid-template-columns:repeat(4,minmax(0,1fr));width:min(1320px,calc(100vw - 24px));padding:10px;gap:9px;background:#fff;}
.monitor-dashboard-head{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;justify-content:space-between;border-right:0;border-bottom:1px solid #e5e7eb;padding:4px 8px 8px;}
.monitor-dashboard-card{background:#fff;border:1px solid #e5e7eb!important;}
.monitor-dashboard-card-title{font-size:13px;color:#111827;letter-spacing:.2px;}
.monitor-dashboard-card-title strong{font-weight:800;}
.monitor-dashboard-icon{font-size:14px;background:#f3f4f6;}
.monitor-dashboard-subtitle{font-size:10px;font-weight:800;color:#4b5563;margin:4px 0;}
.dashboard-categorias-sutran,.dashboard-categorias-bomberos{display:flex;flex-wrap:wrap;gap:4px 8px;margin:4px 0;}
.dashboard-categorias-sutran span,.dashboard-categorias-bomberos span{font-size:9px;color:#4b5563;}
.dashboard-categorias-sutran b,.dashboard-categorias-bomberos b{color:#111827;}
.dashboard-magnitud{margin-left:auto;font-size:14px;color:#374151;}
.dashboard-agencias-top3 .dashboard-evento{padding:4px 2px;}
.dashboard-eventos-list{max-height:78px;}
.dashboard-evento b{font-size:9px;color:#111827;}
.dashboard-evento small{font-size:8px;color:#6b7280;}
.monitor-dashboard-number{font-size:16px;}
.dashboard-minimizar{position:absolute;right:10px;top:8px;width:28px;height:26px;border:1px solid #d1d5db;border-radius:7px;background:#fff;color:#111827;font-size:18px;line-height:1;cursor:pointer;z-index:2;}
.monitor-dashboard.minimizado{width:180px;display:block;padding:7px;}
.monitor-dashboard.minimizado .monitor-dashboard-head{border-bottom:0;padding-right:34px;}
.monitor-dashboard.minimizado .monitor-dashboard-card{display:none;}
.monitor-dashboard.minimizado .monitor-dashboard-updated{display:none;}
.monitor-dashboard.minimizado .monitor-dashboard-brand strong{font-size:9px;}
.dashboard-ir-agencia{margin-top:4px;border:1px solid #d1d5db;background:#f9fafb;color:#111827;border-radius:5px;padding:2px 6px;cursor:pointer;font-size:8px;}
.agencia-cercana-dashboard{position:relative;padding-right:42px;}
@media (max-width:900px){
 .monitor-dashboard{grid-template-columns:repeat(2,minmax(0,1fr));}
 .monitor-dashboard-head{grid-column:1/-1;}
}


/* ============================================================
   AJUSTES SOLICITADOS — TEXTO DEL ENCABEZADO Y CONTADORES
   Se conservan los demás colores del dashboard.
   ============================================================ */
.monitor-dashboard-brand strong,
.monitor-dashboard-brand small,
.monitor-dashboard-count{
    color:#000 !important;
}

/* ============================================================
   RESPONSIVE — CELULAR Y TABLET
   Se usa CSS nativo para no agregar una dependencia externa innecesaria.
   ============================================================ */
@media (max-width: 900px){
    .monitor-dashboard{
        top:6px;
        left:6px;
        transform:none;
        width:calc(100vw - 12px);
        max-width:none;
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-height:calc(100vh - 12px);
        overflow-y:auto;
    }
    .monitor-dashboard-head{
        grid-column:1 / -1;
        border-right:0;
        border-bottom:1px solid #e5e7eb;
    }
}

@media (max-width: 560px){
    .monitor-dashboard{
        grid-template-columns:1fr;
        border-radius:12px;
        padding:6px;
        gap:6px;
    }
    .monitor-dashboard-head{
        grid-column:1;
        padding:6px 8px 7px;
    }
    .monitor-dashboard-brand strong{font-size:11px;}
    .monitor-dashboard-brand small{font-size:8px;}
    .monitor-dashboard-card{padding:7px 8px;}
    .dashboard-eventos-list{max-height:90px;}
    .monitor-dashboard.minimizado{width:180px;}
}

/* ============================================================
   AUDIO DE ALARMA — PANEL LATERAL IZQUIERDO
   ============================================================ */
.audio-alarma-btn[hidden]{display:none !important;}
.audio-alarma-btn{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin:0 0 7px;
    padding:9px 10px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:8px;
    color:#fff;
    font-size:11px;
    font-weight:900;
    line-height:1.2;
    text-align:center;
    cursor:pointer;
    box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.audio-alarma-btn.audio-alarma-inactivo{background:#dc2626;}
.audio-alarma-btn.audio-alarma-activo{background:#65a30d;}
.audio-alarma-btn:hover{filter:brightness(1.06);}
.audio-alarma-btn:active{transform:translateY(1px);}

/* Dashboard: en celular inicia minimizado para liberar el mapa. */
@media (max-width:700px){
    .monitor-dashboard.minimizado{
        width:180px !important;
        max-width:180px !important;
        max-height:none !important;
        overflow:visible !important;
        padding:7px !important;
    }
    .monitor-dashboard.minimizado .dashboard-minimizar{
        right:7px;
        top:7px;
    }
}

/* Refuerzo para Chrome móvil con viewport amplio. */
html.force-mobile .monitor-dashboard{
    top:6px !important;
    left:6px !important;
    transform:none !important;
    width:calc(100vw - 12px) !important;
    max-width:none !important;
    max-height:calc(100vh - 12px) !important;
    overflow-y:auto !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
html.force-mobile .monitor-dashboard-head{
    grid-column:1 / -1 !important;
    border-right:0 !important;
    border-bottom:1px solid #e5e7eb !important;
}
@media (max-width:560px){
    html.force-mobile .monitor-dashboard{
        grid-template-columns:1fr !important;
    }
    html.force-mobile .monitor-dashboard-head{
        grid-column:1 !important;
    }
}


/* El control de minimizar/expandir siempre debe quedar centrado y acotado. */
.btn-contraer-panel,
#btn-contraer-panel {
    width: fit-content !important;
    min-width: 190px !important;
    max-width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* No permitir que reglas del Dashboard estiren el botón de control. */
#btnContraerPanel.btn-contraer-panel,
.btn-contraer-panel {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}