/*
 * Paneles municipales V2 — Superadmin, Admin, Supervisor y Monitor.
 * Tema completamente reversible: comentar su <link> en views/partials/head.php.
 * No modifica estructura, lógica, permisos ni comportamiento en tiempo real.
 */

body.panel-theme-v2 {
    --panel-navy: #173552;
    --panel-navy-2: #214D70;
    --panel-blue: #2D6F9F;
    --panel-blue-soft: #EAF2F8;
    --panel-red: #B50E2E;
    --panel-green: #28783A;
    --panel-alert-public: #E68100;
    --panel-alert-suspicious: #29499A;
    --panel-canvas: #F1F4F7;
    --panel-border: #DCE3EA;
    --panel-shadow: 0 12px 32px rgba(18, 43, 65, .08);
    min-height: 100vh;
    background:
        radial-gradient(circle at 84% -8%, rgba(45, 111, 159, .14), transparent 28%),
        linear-gradient(180deg, #EAF0F5 0, var(--panel-canvas) 260px);
    color: #172331;
}

/* Estructura general y cabecera institucional compartida. */
.panel-theme-v2 .sa-shell,
.panel-theme-v2 .ad-shell,
.panel-theme-v2 .sv-shell {
    width: min(1320px, calc(100% - 40px));
    padding-top: 18px;
}
.panel-theme-v2 .monitor-shell {
    width: min(1500px, calc(100% - 32px));
    padding-top: 16px;
}
.panel-theme-v2 .sa-topbar,
.panel-theme-v2 .monitor-topbar {
    min-height: 76px;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 20px;
    background:
        radial-gradient(circle at 16% 0, rgba(255, 255, 255, .10), transparent 25%),
        linear-gradient(135deg, var(--panel-navy), #10283E 72%);
    box-shadow: 0 15px 34px rgba(15, 39, 59, .18);
}
.panel-theme-v2 .sa-brand,
.panel-theme-v2 .monitor-brand { gap: 12px; }
.panel-theme-v2 .sa-brand__logo,
.panel-theme-v2 .monitor-brand__logo {
    width: 50px;
    height: 50px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 17px rgba(0, 0, 0, .16);
}
.panel-theme-v2 .sa-brand strong,
.panel-theme-v2 .monitor-brand strong {
    color: #fff;
    font-size: 14px;
}
.panel-theme-v2 .sa-brand span,
.panel-theme-v2 .monitor-brand span {
    margin-top: 3px;
    color: #BFD2E1;
    font-size: 10.5px;
}
.panel-theme-v2 .sa-user > div strong,
.panel-theme-v2 .monitor-operator > div strong { color: #fff; }
.panel-theme-v2 .sa-user > div span,
.panel-theme-v2 .monitor-operator > div span { color: #B8CCDB; }
.panel-theme-v2 .sa-user .sa-audit-link,
.panel-theme-v2 .monitor-back,
.panel-theme-v2 .monitor-operator .btn-icon-round {
    min-height: 42px;
    border-color: rgba(255, 255, 255, .20);
    background: rgba(255, 255, 255, .09);
    color: #EDF5FA;
    box-shadow: none;
    backdrop-filter: blur(7px);
}
.panel-theme-v2 .sa-user .sa-audit-link i {
    background: rgba(255, 255, 255, .13);
    color: #fff;
}
.panel-theme-v2 .sa-user .sa-audit-link:hover,
.panel-theme-v2 .monitor-back:hover,
.panel-theme-v2 .monitor-operator .btn-icon-round:hover {
    border-color: rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .16);
    color: #fff;
}
.panel-theme-v2 .sa-user .sa-audit-link[href="/panel-comunicaciones"],
.panel-theme-v2 .sa-user .sa-audit-link[href="/auditoria-operativa"] {
    border-color: rgba(255, 255, 255, .20);
    background: rgba(255, 255, 255, .09);
    color: #EDF5FA;
}
.panel-theme-v2 .sa-logout,
.panel-theme-v2 .monitor-logout {
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 11px;
    background: #A90E2B;
    box-shadow: 0 6px 15px rgba(105, 0, 22, .28);
}

/* Título de cada espacio: contexto a la izquierda, situación operativa a la derecha. */
.panel-theme-v2 .sa-heading,
.panel-theme-v2 .monitor-heading {
    align-items: center;
    margin: 22px 3px 14px;
}
.panel-theme-v2 .sa-heading h1,
.panel-theme-v2 .monitor-heading h1 {
    margin: 4px 0 6px;
    color: #142231;
    font-size: clamp(24px, 2.6vw, 31px);
    letter-spacing: -.035em;
}
.panel-theme-v2 .sa-heading p,
.panel-theme-v2 .monitor-heading p {
    max-width: 720px;
    color: #667485;
    font-size: 11.5px;
    line-height: 1.5;
}
.panel-theme-v2 .kicker {
    color: var(--panel-blue);
    letter-spacing: .08em;
}
.panel-theme-v2 .role-scope {
    margin-bottom: 15px;
    padding: 12px 15px;
    border: 1px solid #CFDDE8;
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 5px 16px rgba(18, 43, 65, .045);
}
.panel-theme-v2 .role-scope > i {
    background: var(--panel-blue-soft);
    color: var(--panel-blue);
}

/* Tarjetas, formularios y tablas: una sola familia visual. */
.panel-theme-v2 .sa-card,
.panel-theme-v2 .monitor-register,
.panel-theme-v2 .monitor-lane {
    border-color: var(--panel-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--panel-shadow);
}
.panel-theme-v2 .sa-card__header {
    min-height: 70px;
    padding: 15px 18px;
    background: linear-gradient(180deg, #fff, #FAFCFD);
}
.panel-theme-v2 .sa-card__header h2 { font-size: 16px; }
.panel-theme-v2 .sa-table thead { background: #EDF3F7; }
.panel-theme-v2 .sa-table th {
    color: #536678;
    font-size: 9px;
    letter-spacing: .055em;
}
.panel-theme-v2 .sa-table tbody tr { transition: background .15s ease; }
.panel-theme-v2 .sa-table tbody tr:hover { background: #F7FAFC; }
.panel-theme-v2 .sa-table td { border-color: #E7ECF0; }
.panel-theme-v2 input:not([type="hidden"]):not([type="checkbox"]),
.panel-theme-v2 select,
.panel-theme-v2 textarea {
    border-color: #D4DEE6;
    border-radius: 10px;
    background-color: #FAFCFD;
}
.panel-theme-v2 input:focus,
.panel-theme-v2 select:focus,
.panel-theme-v2 textarea:focus {
    border-color: var(--panel-blue);
    box-shadow: 0 0 0 3px rgba(45, 111, 159, .12);
}
.panel-theme-v2 .btn--primary {
    background: linear-gradient(135deg, var(--panel-navy-2), var(--panel-blue));
    box-shadow: 0 7px 16px rgba(33, 77, 112, .18);
}

/* Superadmin: lectura ejecutiva y continuidad del servicio. */
.panel-theme-v2 .sa-kpis { gap: 13px; }
.panel-theme-v2 .sa-kpi {
    position: relative;
    min-height: 132px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--panel-shadow);
}
.panel-theme-v2 .sa-kpi::after {
    content: '';
    position: absolute;
    width: 92px;
    height: 92px;
    top: -42px;
    right: -36px;
    border-radius: 50%;
    background: var(--panel-blue-soft);
}
.panel-theme-v2 .sa-kpi__icon {
    width: 43px;
    height: 43px;
    border-radius: 13px;
}
.panel-theme-v2 .sa-kpi strong { color: #152434; font-size: 25px; }
.panel-theme-v2 .sa-kpi span { color: #607082; }
.panel-theme-v2 .sa-system-status,
.panel-theme-v2 .ad-attention,
.panel-theme-v2 .sv-room-list {
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid #D4E1EA;
    border-radius: 12px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 5px 15px rgba(18, 43, 65, .05);
}
.panel-theme-v2 .sa-health-list > div { padding: 13px 0; }

/* Admin: acciones agrupadas y zonas fáciles de recorrer. */
.panel-theme-v2 .ad-grid { gap: 15px; }
.panel-theme-v2 .ad-action summary {
    min-height: 58px;
    color: #243444;
}
.panel-theme-v2 .ad-action summary span i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--panel-blue-soft);
    color: var(--panel-blue);
}
.panel-theme-v2 .ad-action[open] summary {
    background: #F4F8FB;
    box-shadow: inset 4px 0 0 var(--panel-blue);
}
.panel-theme-v2 .ad-role.is-monitor { background: #E7F1F8; color: #245F89; }
.panel-theme-v2 .ad-role.is-supervisor { background: #EEEAF8; color: #604591; }

/* Supervisor: territorio y demoras son la primera lectura. */
.panel-theme-v2 .sv-alert-queue.has-overdue {
    border-color: #D95870;
    box-shadow: 0 0 0 3px rgba(181, 14, 46, .07), var(--panel-shadow);
}
.panel-theme-v2 .sv-alert-list,
.panel-theme-v2 .sv-review-grid { background: #F3F6F8; }
.panel-theme-v2 .sv-alert-card,
.panel-theme-v2 .sv-review-card {
    border-radius: 15px;
    box-shadow: 0 7px 20px rgba(18, 43, 65, .065);
}
.panel-theme-v2 .sv-territory {
    border-color: #C9DCE9;
    background: #EFF6FA;
}
.panel-theme-v2 .sv-territory > i { background: var(--panel-blue); }
.panel-theme-v2 .sv-location-status.has-gps {
    background: #E8F2F8;
    color: #245F89;
}

/* Monitor: máxima densidad útil, estado de conexión y prioridades inequívocas. */
.panel-theme-v2 .monitor-command-bar {
    border-color: #D2DEE7;
    border-radius: 14px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 7px 20px rgba(18, 43, 65, .06);
}
.panel-theme-v2 .monitor-overview { gap: 9px; }
.panel-theme-v2 .monitor-overview__item,
.panel-theme-v2 .monitor-overview__guide {
    min-height: 66px;
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .90);
    box-shadow: 0 5px 14px rgba(18, 43, 65, .045);
}
.panel-theme-v2 .monitor-priority-legend {
    padding: 8px;
    border-color: var(--panel-border);
    border-radius: 16px;
    box-shadow: var(--panel-shadow);
}
.panel-theme-v2 .monitor-priority { border-radius: 12px; }
.panel-theme-v2 .monitor-priority--alta {
    background: linear-gradient(135deg, #EA2638 0%, #D60B35 60%, #A70828 100%);
    box-shadow: 0 6px 16px rgba(214, 11, 53, .23);
}
.panel-theme-v2 .monitor-priority--media {
    background: linear-gradient(135deg, #F39A0A 0%, var(--panel-alert-public) 60%, #C96900 100%);
    box-shadow: 0 6px 16px rgba(207, 111, 0, .23);
}
.panel-theme-v2 .monitor-priority--baja {
    background: linear-gradient(135deg, #3159B2 0%, var(--panel-alert-suspicious) 60%, #1F397F 100%);
    box-shadow: 0 6px 16px rgba(33, 62, 137, .23);
}
.panel-theme-v2 .monitor-priority--media .monitor-priority__count { color:#C96900; }
.panel-theme-v2 .monitor-priority--baja .monitor-priority__count { color:#29499A; }
.panel-theme-v2 .monitor-lane { padding: 14px; }
.panel-theme-v2 .monitor-lane--incoming {
    border-top: 4px solid var(--panel-red);
}
.panel-theme-v2 .monitor-lane--active {
    border-top: 4px solid var(--panel-blue);
    background: #F7FAFC;
}
.panel-theme-v2 .monitor-lane .queue-card,
.panel-theme-v2 .monitor-lane .case-card { border-radius: 15px; }
.panel-theme-v2 .monitor-lane .queue-card--alta,
.panel-theme-v2 .monitor-lane .case-card--alta {
    border-color:#D60B35;
    background:#FFF0F3;
    box-shadow:0 8px 22px rgba(214,11,53,.14);
}
.panel-theme-v2 .monitor-lane .queue-card--media,
.panel-theme-v2 .monitor-lane .case-card--media {
    border-color:var(--panel-alert-public);
    background:#FFF7E8;
    box-shadow:0 8px 22px rgba(207,111,0,.14);
}
.panel-theme-v2 .monitor-lane .queue-card--baja,
.panel-theme-v2 .monitor-lane .case-card--baja {
    border-color:var(--panel-alert-suspicious);
    background:#F0F4FF;
    box-shadow:0 8px 22px rgba(33,62,137,.14);
}
.panel-theme-v2 .monitor-lane .queue-card--alta .queue-card__top,
.panel-theme-v2 .monitor-lane .case-card--alta .queue-card__top {
    background:linear-gradient(135deg,#EA2638,#B5092B);
}
.panel-theme-v2 .monitor-lane .queue-card--media .queue-card__top,
.panel-theme-v2 .monitor-lane .case-card--media .queue-card__top {
    background:linear-gradient(135deg,#F39A0A,#C96900);
}
.panel-theme-v2 .monitor-lane .queue-card--baja .queue-card__top,
.panel-theme-v2 .monitor-lane .case-card--baja .queue-card__top {
    background:linear-gradient(135deg,#3159B2,#1F397F);
}
/* Una alerta demorada mantiene la advertencia roja sin perder en el encabezado
   el color que identifica su tipo. */
.panel-theme-v2 .monitor-lane .queue-card.queue-card--overdue {
    border-color:#D20D34;
    background:#FFF1F4;
    box-shadow:0 0 0 4px rgba(210,13,52,.10),0 10px 26px rgba(181,14,46,.16);
}
.panel-theme-v2 .queue-card--media.queue-card--nuevo { animation:queueCardFlashMediaV2 1.8s ease-out 2; }
.panel-theme-v2 .queue-card--baja.queue-card--nuevo { animation:queueCardFlashBajaV2 1.8s ease-out 2; }
@keyframes queueCardFlashMediaV2 {
    0% { box-shadow:0 0 0 0 rgba(230,129,0,.52); }
    50% { box-shadow:0 0 0 11px rgba(230,129,0,0); }
    100% { box-shadow:0 8px 22px rgba(207,111,0,.14); }
}
@keyframes queueCardFlashBajaV2 {
    0% { box-shadow:0 0 0 0 rgba(41,73,154,.52); }
    50% { box-shadow:0 0 0 11px rgba(41,73,154,0); }
    100% { box-shadow:0 8px 22px rgba(33,62,137,.14); }
}
.panel-theme-v2 .monitor-register > summary { min-height: 58px; }

/*
 * Lenguaje de estados compartido con Control Vecinal.
 * El borde conserva el tipo/prioridad; insignia, progreso y acción indican etapa.
 */
.panel-theme-v2 .case-card[data-estado] {
    --case-state-color: #285D86;
    --case-state-soft: #EAF1F8;
}
.panel-theme-v2 .case-card[data-estado="recepcionada"] {
    --case-state-color: #285D86;
    --case-state-soft: #EAF1F8;
}
.panel-theme-v2 .case-card[data-estado="intentando_contactar"] {
    --case-state-color: #A76100;
    --case-state-soft: #FFF5E2;
}
.panel-theme-v2 .case-card[data-estado="en_camino"] {
    --case-state-color: #1D5F93;
    --case-state-soft: #E9F3FA;
}
.panel-theme-v2 .case-card[data-estado="en_sitio"] {
    --case-state-color: #157A65;
    --case-state-soft: #E8F7F3;
}
/* La hoja base aplica fondo blanco a la insignia dentro del encabezado de la
   tarjeta. Estas reglas más específicas conservan el color y el contraste
   correspondientes a cada estado operativo. */
.panel-theme-v2 .monitor-lane .case-card .queue-card__top .account-badge--recepcionada {
    border-color: #285D86;
    background: #285D86;
    color: #fff !important;
}
.panel-theme-v2 .monitor-lane .case-card .queue-card__top .account-badge--intentando-contactar {
    border-color: #A76100;
    background: #A76100;
    color: #fff !important;
}
.panel-theme-v2 .monitor-lane .case-card .queue-card__top .account-badge--en-camino {
    border-color: #1D5F93;
    background: #1D5F93;
    color: #fff !important;
}
.panel-theme-v2 .monitor-lane .case-card .queue-card__top .account-badge--en-sitio {
    border-color: #157A65;
    background: #157A65;
    color: #fff !important;
}
.panel-theme-v2 .case-card[data-estado] .case-progress::before {
    background: color-mix(in srgb, var(--case-state-color) 20%, #DDE1E7);
}
.panel-theme-v2 .case-card[data-estado] .case-progress__step.is-done,
.panel-theme-v2 .case-card[data-estado] .case-progress__step.is-current {
    color: var(--case-state-color);
}
.panel-theme-v2 .case-card[data-estado] .case-progress__step.is-done i,
.panel-theme-v2 .case-card[data-estado] .case-progress__step.is-current i {
    border-color: var(--case-state-color);
    background: var(--case-state-color);
    color: #fff;
}
.panel-theme-v2 .case-card[data-estado] .case-progress__step.is-current i {
    box-shadow: 0 0 0 4px var(--case-state-soft), 0 0 0 5px var(--case-state-color);
}
.panel-theme-v2 .case-card[data-estado] .btn-avanzar {
    border-color: var(--case-state-color);
    background: var(--case-state-color);
    color: #fff;
    box-shadow: 0 6px 15px color-mix(in srgb, var(--case-state-color) 22%, transparent);
}
.panel-theme-v2 .case-card[data-estado="en_sitio"] .btn-finalizar {
    border-color: #28783A;
    background: #28783A;
    box-shadow: 0 6px 15px rgba(40, 120, 58, .20);
}

/* Cada rol conserva una señal cromática discreta sin romper la identidad común. */
.panel-role-superadmin .sa-heading { border-left: 4px solid var(--panel-navy); padding-left: 14px; }
.panel-role-admin .sa-heading { border-left: 4px solid var(--panel-blue); padding-left: 14px; }
.panel-role-supervisor .sa-heading { border-left: 4px solid #5F4A91; padding-left: 14px; }
.panel-role-monitor .monitor-heading { border-left: 4px solid var(--panel-red); padding-left: 14px; }

/* Limpieza protegida para preparar demostraciones. */
.panel-theme-v2 .sa-audit-link--danger { border-color:#E8BBC5;background:rgba(255,240,243,.10);color:#FFD9E1; }
.panel-theme-v2 .sa-audit-link--danger i { background:#B50E2E;color:#fff; }
.panel-theme-v2 .sa-otp-status { display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid rgba(185,226,196,.38);border-radius:10px;background:rgba(37,120,58,.18);color:#D8F5DF;font-size:9px;font-weight:850;white-space:nowrap; }
.demo-clean-risk { display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #E7B6C1;border-radius:10px;background:#FFF1F4;color:#A40D2A;font-size:10px;font-weight:800; }
.demo-clean-grid { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:16px;align-items:start; }
.demo-clean-summary,.demo-clean-action { padding:18px; }
.demo-clean-counts { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px; }
.demo-clean-counts > div { min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid var(--panel-border);border-radius:11px;background:#F7F9FB; }
.demo-clean-counts span { color:#596573;font-size:10.5px;font-weight:700; }.demo-clean-counts strong { color:#172331;font:800 18px 'Sora',sans-serif; }
.demo-clean-preserved { display:grid;grid-template-columns:42px 1fr;gap:11px;align-items:center;margin-top:14px;padding:13px;border:1px solid #BFDCC7;border-radius:12px;background:#F0F9F3; }
.demo-clean-preserved > i { width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:#28783A;color:#fff; }
.demo-clean-preserved strong,.demo-clean-preserved span { display:block; }.demo-clean-preserved strong { color:#225F33;font-size:11px; }.demo-clean-preserved span { margin-top:3px;color:#4F6757;font-size:10px;line-height:1.45; }
.demo-clean-action > .sa-card__header > i { width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:#FDE8ED;color:#B50E2E;font-size:17px; }
.demo-clean-backup { display:grid;grid-template-columns:37px 1fr;gap:10px;align-items:center;margin:14px 0;padding:12px;border:1px solid #C8D9E7;border-radius:11px;background:#F2F7FB; }
.demo-clean-backup > i { width:37px;height:37px;display:grid;place-items:center;border-radius:10px;background:#285D86;color:#fff; }.demo-clean-backup strong,.demo-clean-backup span { display:block; }.demo-clean-backup strong { color:#214E70;font-size:10.5px; }.demo-clean-backup span { color:#587084;font-size:9.5px;line-height:1.4; }
.demo-clean-form label > strong { color:#A40D2A; }.demo-clean-form .btn { margin-top:4px; }.demo-clean-form .btn:disabled { opacity:.45;cursor:not-allowed; }
.sa-feedback small { display:block;margin-top:5px;font-size:10px;opacity:.82; }
@media(max-width:850px){.demo-clean-grid{grid-template-columns:1fr}.demo-clean-counts{grid-template-columns:1fr}}

@media (max-width: 900px) {
    .panel-theme-v2 .sa-shell,
    .panel-theme-v2 .ad-shell,
    .panel-theme-v2 .sv-shell,
    .panel-theme-v2 .monitor-shell {
        width: min(100% - 22px, 1500px);
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
    }
    .panel-theme-v2 .sa-topbar,
    .panel-theme-v2 .monitor-topbar { align-items: flex-start; }
    .panel-theme-v2 .sa-user,
    .panel-theme-v2 .monitor-operator { flex-wrap: wrap; }
    .panel-theme-v2 .sa-heading,
    .panel-theme-v2 .monitor-heading { align-items: flex-start; }
}

@media (max-width: 620px) {
    .panel-theme-v2 .sa-topbar,
    .panel-theme-v2 .monitor-topbar {
        padding: 12px;
        border-radius: 17px;
    }
    .panel-theme-v2 .sa-brand__logo,
    .panel-theme-v2 .monitor-brand__logo { width: 46px; height: 46px; }
    .panel-theme-v2 .sa-heading,
    .panel-theme-v2 .monitor-heading {
        padding-left: 11px;
        margin-top: 18px;
    }
    .panel-theme-v2 .sa-heading h1,
    .panel-theme-v2 .monitor-heading h1 { font-size: 23px; }
    .panel-theme-v2 .sa-card,
    .panel-theme-v2 .monitor-lane { border-radius: 15px; }
}