/* Panel «Análisis Major» (js/major-mapa.js). Mismo lenguaje visual que el panel GIS Jurídico. */
#majorMapaPanel {
    --mm-accent: #22d3ee;
    position: fixed;
    inset: 0 0 0 auto;
    width: 380px;
    max-width: calc(100vw - 32px);
    z-index: 6460;
    display: flex;
    flex-direction: column;
    color: #e2e8f0;
    background:
        radial-gradient(circle at 90% 0, rgba(34, 211, 238, .16), transparent 36%),
        linear-gradient(180deg, rgba(15, 23, 42, .985), rgba(2, 6, 23, .985));
    border-left: 1px solid rgba(34, 211, 238, .3);
    box-shadow: -24px 0 70px rgba(0, 0, 0, .55);
    transform: translateX(105%);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
    font-family: Inter, system-ui, sans-serif;
}
#majorMapaPanel.open { transform: translateX(0); }
.mm-head { padding: 15px 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mm-title-row { display: flex; gap: 11px; align-items: center; margin-bottom: 12px; }
.mm-logo { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; color: #67e8f9; background: rgba(34, 211, 238, .13); border: 1px solid rgba(34, 211, 238, .3); }
.mm-title { min-width: 0; flex: 1; }
.mm-title h3 { margin: 0; color: #fff; font-size: 14px; font-weight: 900; }
.mm-title p { margin: 3px 0 0; color: #94a3b8; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.mm-icon-btn { width: 31px; height: 31px; flex: none; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; color: #94a3b8; background: rgba(255, 255, 255, .05); cursor: pointer; }
.mm-icon-btn:hover { color: #fff; border-color: rgba(34, 211, 238, .45); }
.mm-label { display: block; font-size: 9px; font-weight: 900; color: #67e8f9; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; }
.mm-select { width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 11px; border: 1px solid rgba(148, 163, 184, .22); color: #fff; background: rgba(2, 6, 23, .7); font-size: 12px; font-weight: 700; outline: none; cursor: pointer; }
.mm-select:focus { border-color: rgba(34, 211, 238, .65); box-shadow: 0 0 0 3px rgba(34, 211, 238, .12); }
.mm-select optgroup { color: #67e8f9; background: #0f172a; font-style: normal; }
.mm-select option { color: #e2e8f0; background: #0f172a; }
.mm-desc { margin: 8px 0 0; color: #94a3b8; font-size: 10px; line-height: 1.45; }
.mm-tools { padding: 10px 14px 6px; }
.mm-filter { position: relative; margin-bottom: 8px; }
.mm-filter i { position: absolute; left: 11px; top: 10px; color: #67e8f9; font-size: 10px; }
.mm-filter input { width: 100%; box-sizing: border-box; padding: 8px 10px 8px 30px; border-radius: 10px; border: 1px solid rgba(148, 163, 184, .2); color: #fff; background: rgba(2, 6, 23, .58); font-size: 11px; outline: none; }
.mm-tool-row { display: flex; gap: 6px; }
.mm-chip { flex: 1; border: 1px solid rgba(148, 163, 184, .16); background: rgba(15, 23, 42, .6); color: #cbd5e1; border-radius: 999px; padding: 6px 8px; font-size: 9px; font-weight: 800; cursor: pointer; }
.mm-chip:hover { border-color: rgba(34, 211, 238, .45); color: #fff; }
.mm-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 10px; scrollbar-width: thin; scrollbar-color: #475569 transparent; }
.mm-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: background .15s, opacity .15s; }
.mm-row:hover { background: rgba(255, 255, 255, .05); border-color: rgba(148, 163, 184, .12); }
.mm-row:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 1px; }
.mm-row.off { opacity: .42; }
.mm-row.off .mm-sw { background: transparent !important; }
.mm-sw { width: 14px; height: 14px; flex: none; border-radius: 4px; background: var(--c); border: 2px solid var(--c); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.mm-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mm-row-l { font-size: 11px; font-weight: 700; color: #f1f5f9; line-height: 1.25; overflow-wrap: anywhere; }
.mm-bar { display: block; height: 3px; border-radius: 3px; background: rgba(148, 163, 184, .12); overflow: hidden; }
.mm-bar i { display: block; height: 100%; border-radius: 3px; opacity: .85; }
.mm-row-n { flex: none; text-align: right; font-size: 11px; font-weight: 800; color: #e2e8f0; font-variant-numeric: tabular-nums; }
.mm-row-n small { display: block; font-size: 9px; font-weight: 600; color: #64748b; }
.mm-solo { flex: none; width: 24px; height: 24px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: #64748b; cursor: pointer; opacity: 0; transition: opacity .15s; }
.mm-row:hover .mm-solo, .mm-solo:focus-visible { opacity: 1; }
.mm-solo:hover { color: #67e8f9; border-color: rgba(34, 211, 238, .35); }
.mm-empty { padding: 26px 12px; text-align: center; color: #64748b; font-size: 11px; }
.mm-error { color: #fca5a5; }
.mm-foot { padding: 11px 14px 14px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(2, 6, 23, .5); }
.mm-summary { font-size: 11px; color: #cbd5e1; margin-bottom: 9px; }
.mm-summary b { color: #67e8f9; }
.mm-foot-row { display: flex; gap: 7px; }
.mm-btn { flex: 1; border: 1px solid rgba(148, 163, 184, .2); border-radius: 10px; padding: 8px 9px; color: #e2e8f0; background: rgba(15, 23, 42, .75); font-size: 10px; font-weight: 800; cursor: pointer; }
.mm-btn:hover { border-color: rgba(34, 211, 238, .45); }
.mm-btn:disabled { opacity: .45; cursor: not-allowed; }
.mm-btn-set { color: #1c1917; background: #f59e0b; border-color: #f59e0b; }
.mm-btn-set:hover { background: #fbbf24; }
.mm-note { margin: 9px 0 0; font-size: 9px; line-height: 1.45; color: #64748b; }
@media (max-width: 640px) {
    #majorMapaPanel { inset: auto 0 0 0; width: auto; max-width: none; height: 72vh; border-left: 0; border-top: 1px solid rgba(34, 211, 238, .3); border-radius: 18px 18px 0 0; transform: translateY(105%); }
    #majorMapaPanel.open { transform: translateY(0); }
    .mm-solo { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { #majorMapaPanel { transition: none; } }
