/* =====================================================================
   SISTEMA UNIFICADO DE POPUPS - CENTRO DE CONTROL
   ===================================================================== */

:root {
    --popup-radius: 14px;
    --popup-shadow: 0 12px 32px rgba(15, 23, 42, .22), 0 3px 10px rgba(15, 23, 42, .12);
    --popup-border: rgba(148, 163, 184, .45);
    --popup-bg: #ffffff;
    --popup-text: #172033;
    --popup-muted: #64748b;
    --popup-line: #e8edf3;
    --popup-padding: 14px;
    --popup-font: Arial, Helvetica, sans-serif;
    --popup-width: 340px;
}

/* ---------- Contenedor Leaflet ---------- */
.leaflet-popup.monitor-popup {
    max-width: min(92vw, 390px) !important;
    z-index: 10000 !important;
}

.leaflet-popup.monitor-popup .leaflet-popup-content-wrapper {
    position: relative;
    padding: 0 !important;
    border: 1px solid var(--popup-border) !important;
    border-radius: var(--popup-radius) !important;
    background: var(--popup-bg) !important;
    box-shadow: var(--popup-shadow) !important;
    overflow: hidden;
}

.leaflet-popup.monitor-popup .leaflet-popup-content {
    margin: 0 !important;
    width: auto !important;
    max-width: 92vw !important;
    font-family: var(--popup-font);
}

.leaflet-popup.monitor-popup .leaflet-popup-tip {
    box-shadow: 2px 2px 5px rgba(15, 23, 42, .10);
}

.leaflet-popup.monitor-popup .leaflet-popup-close-button {
    position: absolute !important;
    z-index: 5;
    top: 7px !important;
    right: 7px !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 27px !important;
    padding: 0 !important;
    border-radius: 50%;
    color: #475569 !important;
    background: rgba(248,250,252,.96);
    font-size: 20px !important;
    font-weight: 400 !important;
    text-align: center;
    transform: none;
    transition: background .15s ease, transform .15s ease;
}

.leaflet-popup.monitor-popup .leaflet-popup-close-button:hover {
    background: rgba(0,0,0,.14);
    transform: scale(1.05);
}

/* ---------- Marco interno común ---------- */
.popup-monitor {
    width: var(--popup-width);
    max-width: 92vw;
    box-sizing: border-box;
    padding: var(--popup-padding);
    background: #fff;
    color: var(--popup-text);
    font-family: var(--popup-font);
    font-size: 12px;
    line-height: 1.35;
}

.popup-monitor--edge-to-edge {
    padding: 0;
}

.popup-header-monitor {
    margin: 0 0 10px;
    padding: 10px 42px 10px 13px;
    min-height: 42px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    color: #fff;
    font-weight: 700;
    cursor: grab;
    user-select: none;
}

.popup-header-monitor:active {
    cursor: grabbing;
}

.popup-header-monitor .popup-header-title {
    min-width: 0;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: .2px;
}

.popup-header-monitor .popup-header-subtitle {
    margin-top: 2px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .7px;
    opacity: .78;
    text-transform: uppercase;
}

.popup-icon-small {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    font-size: 16px;
}

.popup-section {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--popup-line);
}

.popup-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.popup-section-title {
    margin-bottom: 6px;
    padding: 5px 8px;
    border-radius: 7px;
    background: #f1f5f9;
    color: #334155;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.popup-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.popup-coordinates {
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.popup-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 6px 9px;
    border-radius: 7px;
    background: #eff6ff;
    color: #1769aa;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}

.popup-action:hover {
    background: #dbeafe;
    text-decoration: none;
}


/* El encabezado es la zona de arrastre; no debe iniciar el pan del mapa. */
.popup-header-monitor,
.reporte-sismo .sismo-header,
.reporte-agencia .agencia-header,
.reporte-sutran .estado,
.popup-volcan .volcan-titulo,
.reporte-bomberos .rb-header {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.reporte-agencia.popup-monitor,
.reporte-sutran.popup-monitor,
.popup-volcan.popup-monitor,
.reporte-bomberos.popup-monitor,
.reporte-sismo.popup-monitor {
    border: 1px solid rgba(148,163,184,.35);
}

/* Deja aire real entre el contenido y el borde del popup. */
.reporte-agencia .agencia-row:first-of-type,
.reporte-sutran .tabla-sutran:first-of-type,
.popup-volcan .volcan-alerta,
.reporte-bomberos .rb-estado-contenedor {
    margin-top: 2px;
}

/* ---------- Sismo ---------- */
.reporte-sismo.popup-monitor {
    width: 350px;
    max-height: min(70vh, 560px);
    overflow: auto;
    border-left: 0;
}

.reporte-sismo .sismo-header {
    margin: 0 0 10px;
    padding: 10px 42px 9px 12px;
    border-radius: 9px;
    min-height: 45px;
    box-sizing: border-box;
    border-radius: 9px;
    cursor: grab;
    user-select: none;
}

.reporte-sismo .sismo-header:active {
    cursor: grabbing;
}

.reporte-sismo .sismo-header .titulo {
    font-size: 13px;
    line-height: 1.2;
}

.reporte-sismo .sismo-header .subtitulo {
    font-size: 9px;
    margin-top: 3px;
}

.reporte-sismo .tabla-sismo {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.reporte-sismo .tabla-sismo td {
    padding: 6px 4px;
    vertical-align: top;
    border-bottom: 1px solid var(--popup-line);
}

.reporte-sismo .tabla-sismo tr:last-child td {
    border-bottom: 0;
}

.reporte-sismo .tabla-sismo .label {
    width: 105px;
    padding-right: 9px;
    color: var(--popup-muted);
    font-weight: 700;
    white-space: nowrap;
}

.reporte-sismo .tabla-sismo .value,
.reporte-sismo .tabla-sismo td:last-child {
    color: #172033;
    font-weight: 600;
    word-break: break-word;
}

/* ---------- Reporte sísmico por WhatsApp ---------- */
.btn-reporte-sismo-whatsapp {
    width: 100%;
    margin-top: 12px;
    min-height: 38px;
    border: 0;
    border-radius: 9px;
    padding: 9px 12px;
    background: #16a34a;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-sizing: border-box;
}
.btn-reporte-sismo-whatsapp:hover { background: #15803d; }
.btn-reporte-sismo-whatsapp:active { transform: translateY(1px); }
.btn-reporte-sismo-whatsapp:disabled { opacity: .75; cursor: wait; transform: none; }

.sismo-subtitulo {
    margin: 10px 0 6px;
    padding: 7px 8px;
    border-radius: 7px;
    font-size: 10px;
    letter-spacing: .35px;
}

/* ---------- Agencia ---------- */
.reporte-agencia.popup-monitor {
    width: 300px;
    max-height: min(65vh, 430px);
    overflow: auto;
}

.reporte-agencia .agencia-header {
    margin: 0 0 10px;
    padding: 10px 42px 9px 12px;
    background: #c00000;
    color: #fff;
    border-radius: 9px;
    font-weight: 800;
    font-size: 13px;
    border-radius: 9px;
    cursor: grab;
    user-select: none;
}

.reporte-agencia .agencia-header:active {
    cursor: grabbing;
}

.reporte-agencia .agencia-header {
    display: flex;
    align-items: center;
    gap: 4px;
}

.reporte-agencia .agencia-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    font-size: 16px;
    line-height: 1;
}

.reporte-agencia .agencia-header-title {
    min-width: 0;
    line-height: 1.2;
}

.reporte-agencia .agencia-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--popup-line);
}

.reporte-agencia .agencia-row:last-of-type {
    border-bottom: 0;
}

.reporte-agencia .agencia-label {
    color: var(--popup-muted);
    font-weight: 700;
}

.reporte-agencia .agencia-value {
    color: #172033;
    font-weight: 600;
    word-break: break-word;
}

/* ---------- SUTRAN ---------- */
.reporte-sutran.popup-monitor {
    width: 350px;
    max-height: min(70vh, 560px);
    overflow: auto;
    padding: var(--popup-padding);
}

.reporte-sutran .estado {
    margin: 0 0 10px;
    padding: 10px 42px 9px 12px;
    min-height: 42px;
    box-sizing: border-box;
    border-radius: 9px;
    cursor: grab;
    user-select: none;
}

.reporte-sutran .estado:active {
    cursor: grabbing;
}

.reporte-sutran .tabla-sutran {
    font-size: 11.5px;
}

.reporte-sutran .tabla-sutran td {
    padding: 6px 4px;
}

.reporte-sutran .tabla-sutran .label {
    width: 108px;
    padding-right: 8px;
}

.reporte-sutran .sutran-subtitulo {
    margin: 10px 0 6px;
    padding: 7px 8px;
    border-radius: 7px;
    font-size: 10px;
}

.sutran-maps-action {
    margin-top: 8px;
    display: flex;
    justify-content: flex-start;
}

/* ---------- Volcán ---------- */
.popup-volcan.popup-monitor {
    width: 350px;
    max-height: min(70vh, 540px);
    overflow: auto;
    padding: var(--popup-padding);
}

.popup-volcan .volcan-titulo {
    margin: 0 0 9px;
    padding: 10px 42px 9px 12px;
    min-height: 43px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: #172033;
    background: #f8fafc;
    border: 1px solid var(--popup-line);
    border-radius: 9px;
    font-size: 14px;
    font-weight: 800;
    cursor: grab;
    user-select: none;
}

.popup-volcan .volcan-titulo:active {
    cursor: grabbing;
}

.popup-volcan .volcan-alerta {
    margin: 0 0 9px;
    padding: 7px 9px;
    border-radius: 7px;
    font-size: 11px;
    line-height: 1.2;
}

.popup-volcan .volcan-dato {
    display: grid;
    grid-template-columns: 92px minmax(0,1fr);
    gap: 7px;
    padding: 5px 0;
    border-bottom: 1px solid var(--popup-line);
}

.popup-volcan .volcan-dato:last-child {
    border-bottom: 0;
}

.popup-volcan .volcan-label {
    color: var(--popup-muted);
    font-weight: 700;
}

.popup-volcan .volcan-value {
    font-weight: 600;
    word-break: break-word;
}

.popup-volcan .ranking-volcan {
    max-height: 190px;
    overflow: auto;
    padding-right: 2px;
}

/* ---------- Bomberos ---------- */
.reporte-bomberos.popup-monitor {
    width: 335px;
    max-height: min(68vh, 520px);
    overflow: auto;
}

.reporte-bomberos .rb-header {
    margin: 0 0 9px;
    padding: 9px 42px 9px 11px;
    min-height: 50px;
    box-sizing: border-box;
    border-radius: 9px;
    gap: 9px;
    cursor: grab;
    user-select: none;
}

.reporte-bomberos .rb-header:active {
    cursor: grabbing;
}

.reporte-bomberos .rb-icono {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 18px;
}

.reporte-bomberos .rb-tipo {
    font-size: 12.5px;
    line-height: 1.2;
}

.reporte-bomberos .rb-parte {
    font-size: 10px;
}

.reporte-bomberos .rb-estado-contenedor {
    padding: 0 0 8px;
}

.reporte-bomberos .rb-info {
    border-top: 1px solid var(--popup-line);
    border-bottom: 1px solid var(--popup-line);
}

.reporte-bomberos .rb-fila {
    padding: 6px 0;
    font-size: 11px;
}

.reporte-bomberos .rb-valor {
    max-width: 190px;
}

.reporte-bomberos .rb-ubicacion {
    margin-top: 9px;
    padding: 9px;
    border-radius: 8px;
}

.reporte-bomberos .rb-direccion {
    font-size: 11.5px;
}

/* ---------- Conector dinámico popup -> marcador ---------- */
.popup-connector {
    position: absolute;
    height: 2px;
    transform-origin: 0 50%;
    background: rgba(15, 23, 42, .55);
    border-radius: 2px;
    pointer-events: none;
    z-index: 699;
}

.popup-connector::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(15, 23, 42, .65);
    transform: translate(50%, -50%);
    box-sizing: border-box;
}

.leaflet-popup.popup-dragging {
    filter: drop-shadow(0 14px 26px rgba(15, 23, 42, .22));
}

@media (max-width: 600px) {
    :root {
        --popup-padding: 10px;
    }

    .leaflet-popup.monitor-popup {
        max-width: calc(100vw - 20px) !important;
    }

    .popup-monitor,
    .reporte-sismo.popup-monitor,
    .reporte-agencia.popup-monitor,
    .reporte-sutran.popup-monitor,
    .popup-volcan.popup-monitor,
    .reporte-bomberos.popup-monitor {
        width: min(330px, calc(100vw - 28px));
    }
}

/* Compatibilidad con estilos históricos del proyecto */
.reporte-sutran .tabla-sutran,
.reporte-sismo .tabla-sismo {
    border-collapse: collapse;
}

.reporte-sutran .tabla-sutran td,
.reporte-sismo .tabla-sismo td {
    box-sizing: border-box;
}

.leaflet-popup.monitor-popup .leaflet-popup-content > .popup-monitor {
    box-sizing: border-box;
}


/* ================================================================
   AJUSTES FINOS - MARGEN SUPERIOR Y LATERAL
   ================================================================ */
.reporte-agencia.popup-monitor,
.reporte-sutran.popup-monitor,
.popup-volcan.popup-monitor,
.reporte-bomberos.popup-monitor,
.reporte-sismo.popup-monitor {
    padding: 14px !important;
}

.reporte-agencia .agencia-header,
.reporte-sutran .estado,
.popup-volcan .volcan-titulo,
.reporte-bomberos .rb-header,
.reporte-sismo .sismo-header {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
}

/* El conector nunca debe tapar etiquetas permanentes de agencias. */
.popup-connector {
    z-index: 690;
}

/* Durante el arrastre, el popup mantiene su propia referencia visual. */
.leaflet-popup.popup-dragging .leaflet-popup-content-wrapper,
.leaflet-popup.popup-dragging .leaflet-popup-tip-container {
    will-change: transform;
}

/* =====================================================================
   ARRASTRE SEGURO DE POPUPS
   ===================================================================== */
.leaflet-popup.monitor-popup .leaflet-popup-content-wrapper,
.leaflet-popup.monitor-popup .leaflet-popup-tip-container,
.leaflet-popup.monitor-popup .leaflet-popup-tip {
    transition: none !important;
}

.leaflet-popup.monitor-popup.popup-dragging {
    cursor: grabbing;
}

.leaflet-popup.monitor-popup.popup-dragging .leaflet-popup-content-wrapper {
    box-shadow: 0 16px 38px rgba(15, 23, 42, .28) !important;
}

.popup-connector {
    position: absolute;
    height: 2px;
    min-width: 1px;
    transform-origin: 0 50%;
    background: rgba(30, 41, 59, .55);
    border-radius: 2px;
    pointer-events: none !important;
    z-index: 9998;
}

.leaflet-popup.monitor-popup {
    z-index: 10000 !important;
}


/* ---------- Selector de destino para reporte sísmico ---------- */
.selector-whatsapp-sismo-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0,0,0,.45);
}
.selector-whatsapp-sismo {
    width: min(390px, 100%);
    box-sizing: border-box;
    padding: 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(0,0,0,.28);
    position: relative;
}
.selector-whatsapp-cerrar {
    position: absolute;
    top: 7px;
    right: 10px;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #555;
}
.selector-whatsapp-titulo { font-weight: 800; font-size: 17px; margin-right: 25px; }
.selector-whatsapp-ayuda { font-size: 12px; color: #666; margin: 7px 0 14px; }
.selector-whatsapp-opcion {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-top: 9px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    text-align: left;
    cursor: pointer;
}
.selector-whatsapp-opcion:hover { background: #f5f5f5; }
.selector-whatsapp-opcion:disabled { opacity: .65; cursor: wait; }
.selector-whatsapp-icono { font-size: 25px; width: 30px; text-align: center; }
.selector-whatsapp-opcion strong { display:block; font-size: 14px; }
.selector-whatsapp-opcion small { display:block; margin-top: 2px; color:#666; font-size: 11px; }