/*
 * Control Vecinal V2 — rediseño reversible.
 * Esta hoja sólo actúa cuando el controller agrega body.control-theme-v2.
 * Para volver al diseño original basta comentar su <link> en views/partials/head.php.
 */

body.control-theme-v2 {
    --control-active-card-v2: 1;
    --control-blue: #1E3A5F;
    --control-blue-soft: #EAF1F8;
    --control-green: #258044;
    --control-canvas: #F2F5F8;
    --control-shadow: 0 12px 32px rgba(19, 35, 56, .10);
    background:
        radial-gradient(circle at 50% -12%, rgba(30, 58, 95, .10), transparent 35%),
        var(--control-canvas);
}

.control-theme-v2 .app-shell {
    width: 100%;
    max-width: 470px;
    min-height: 100dvh;
    padding: max(12px, env(safe-area-inset-top)) 14px calc(92px + env(safe-area-inset-bottom));
}

/* Identidad institucional compacta: marca + persona, sin ocupar media pantalla. */
.control-theme-v2 .app-header--main {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    justify-items: stretch;
    gap: 12px;
    min-height: 78px;
    margin: 0 0 10px;
    padding: 10px 13px;
    overflow: hidden;
    border: 1px solid rgba(30, 58, 95, .14);
    border-radius: 20px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 68%, #EAF1F8 100%);
    box-shadow: var(--control-shadow);
    text-align: left;
}
.control-theme-v2 .app-header--main::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--control-blue), #3679A8);
}
.control-theme-v2 .app-header--main .app-header__logo {
    width: 58px;
    height: 58px;
    align-self: center;
    padding: 5px;
    border: 1px solid #DCE4EC;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(19, 35, 56, .10);
}
.control-theme-v2 .app-header--main .app-header__info {
    width: auto;
    min-width: 0;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    text-align: left;
}
.control-theme-v2 .app-header--main .app-header__info strong {
    max-width: 100%;
    color: #182330;
    font: 800 16px/1.18 'Sora', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.control-theme-v2 .app-header--main .badge {
    position: relative;
    gap: 6px;
    max-width: 100%;
    padding: 5px 9px 5px 22px;
    border: 1px solid #CDE5D3;
    background: #F0FAF3;
    color: #25733A;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}
.control-theme-v2 .app-header--main .badge::before {
    content: '';
    position: absolute;
    left: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2E9B4D;
    box-shadow: 0 0 0 3px rgba(46, 155, 77, .12);
}
.control-theme-v2 .app-header__responsible-use { display: none; }

/* Portada institucional: sólo se expande cuando no hay una alerta en curso. */
body.control-theme-v2.control-alert-idle .app-header--main {
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    gap: 10px;
    min-height: clamp(154px, 23dvh, 194px);
    padding: 17px 18px 15px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 28%, rgba(54, 121, 168, .12), transparent 33%),
        linear-gradient(155deg, #FFFFFF 0%, #F8FAFC 62%, #EAF1F8 100%);
    text-align: center;
}
body.control-theme-v2.control-alert-idle .app-header--main::before {
    inset: auto 24% 0;
    width: auto;
    height: 5px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(90deg, transparent, var(--control-blue) 22%, #3679A8 78%, transparent);
}
body.control-theme-v2.control-alert-idle .app-header--main .app-header__logo {
    width: clamp(92px, 14dvh, 126px);
    height: clamp(92px, 14dvh, 126px);
    padding: 7px;
    border-radius: 24px;
    box-shadow: 0 12px 28px rgba(19, 35, 56, .14);
}
body.control-theme-v2.control-alert-idle .app-header--main .app-header__info {
    width: 100%;
    align-items: center;
    gap: 7px;
    text-align: center;
}
body.control-theme-v2.control-alert-idle .app-header--main .app-header__info strong {
    font-size: clamp(17px, 4.6vw, 20px);
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
body.control-theme-v2.control-alert-idle .app-header--main .badge {
    padding: 6px 12px 6px 25px;
    font-size: 11px;
}
body.control-theme-v2.control-alert-idle .app-header--main .badge::before { left: 11px; }
body.control-theme-v2.control-alert-idle .app-header__responsible-use {
    max-width: 350px;
    display: block;
    margin: 1px auto 0;
    padding: 8px 11px;
    border: 1px solid rgba(30, 58, 95, .12);
    border-radius: 13px;
    background: rgba(255, 255, 255, .66);
    color: #5C6876;
    font-size: 10.5px;
    font-weight: 650;
    line-height: 1.35;
    text-align: center;
}

/* La transición al modo de atención compacta ocurre sin recargar la vista. */
.control-theme-v2 .app-header--main,
.control-theme-v2 .app-header--main .app-header__logo {
    transition: min-height .24s ease, width .24s ease, height .24s ease,
        padding .24s ease, border-radius .24s ease, box-shadow .24s ease;
}

/* Tres verificaciones legibles en una franja de estado. */
.control-theme-v2 .validation-banner--status {
    gap: 6px;
    margin-bottom: 10px;
    padding: 6px;
    border: 1px solid #DEE5EC;
    border-radius: 17px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 7px 20px rgba(19, 35, 56, .06);
}
.control-theme-v2 .validation-status {
    min-height: 62px;
    gap: 4px;
    padding: 6px 3px;
    border-color: transparent;
    border-radius: 12px;
    box-shadow: none;
}
.control-theme-v2 .validation-status__icon {
    width: 27px;
    height: 27px;
    border-radius: 9px;
    font-size: 12px;
}
.control-theme-v2 .validation-status__text { gap: 1px; }
.control-theme-v2 .validation-status__text strong { font-size: 8.8px; }
.control-theme-v2 .validation-status__text small { font-size: 8px; }
.control-theme-v2 .validation-status.is-ready {
    border-color: #D5EBDC;
    background: #F2FAF4;
}
.control-theme-v2 .validation-status.is-denied {
    border-color: #F0D0D6;
    background: #FFF7F8;
}

/* Tres acciones principales apiladas: misma función, lectura más directa. */
.control-theme-v2 .alert-list--compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
.control-theme-v2 .alert-list--compact.alert-list--hidden {
    /* Compatibilidad con una copia anterior de alertas.js en caché. */
    display: grid;
}
.control-theme-v2 .alert-list--compact .alert-square {
    min-width: 0;
    min-height: 78px;
    margin: 0;
    padding: 12px 43px 12px 13px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    border-radius: 17px;
    text-align: left;
    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.control-theme-v2 .alert-list--compact .alert-square::after {
    content: '\203A';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-52%);
    font: 400 27px/1 'Inter', sans-serif;
    opacity: .48;
}
.control-theme-v2 .alert-list--compact .alert-square:active { transform: scale(.975); }

/* Durante una atención las alternativas siguen a la vista, sin admitir otro envío. */
.control-theme-v2 .alert-list--compact.alert-list--locked .alert-square:disabled,
.control-theme-v2 .alert-list--compact.alert-list--hidden .alert-square:disabled {
    opacity: .66;
    cursor: not-allowed;
    filter: saturate(.58);
    box-shadow: 0 4px 12px rgba(19, 35, 56, .07);
    pointer-events: none;
}
.control-theme-v2 .alert-list--compact.alert-list--locked .alert-square--alta:disabled,
.control-theme-v2 .alert-list--compact.alert-list--hidden .alert-square--alta:disabled {
    opacity: .72;
    filter: saturate(.68);
}
.control-theme-v2 .alert-list--compact.alert-list--locked .alert-square:disabled:active,
.control-theme-v2 .alert-list--compact.alert-list--hidden .alert-square:disabled:active {
    transform: none;
}

.control-theme-v2 .alert-list--compact .alert-square--alta {
    min-height: 82px;
    border: 1px solid rgba(255, 255, 255, .22);
    background:
        radial-gradient(circle at 8% 50%, rgba(255, 255, 255, .18), transparent 23%),
        linear-gradient(135deg, #EA2638 0%, var(--color-alerta-alta) 58%, #A70828 100%);
    box-shadow: 0 10px 23px rgba(190, 8, 45, .22);
}
.control-theme-v2 .alert-list--compact.alert-list--contacting .alert-square--alta {
    min-height: 70px;
    padding: 10px 43px 10px 13px;
    opacity: .70;
    filter: saturate(.72);
    box-shadow: 0 7px 17px rgba(190, 8, 45, .14);
}
.control-theme-v2 .alert-list--compact .alert-square--alta .alert-square__icon-wrap {
    width: 46px;
    height: 46px;
}
.control-theme-v2 .alert-list--compact .alert-square--alta .alert-square__icon {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 17px;
    background: rgba(255, 255, 255, .17);
    font-size: 21px;
}
.control-theme-v2 .alert-list--compact .alert-square--alta .alert-square__text {
    align-items: flex-start;
    gap: 3px;
}
.control-theme-v2 .alert-list--compact .alert-square--alta .alert-square__label {
    font-size: 16px;
    letter-spacing: -.35px;
}
.control-theme-v2 .alert-list--compact .alert-square--alta .alert-square__desc {
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    opacity: 1;
}

.control-theme-v2 .alert-list--compact .alert-square--media,
.control-theme-v2 .alert-list--compact .alert-square--baja {
    min-height: 76px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 11px 43px 11px 13px;
    border: 1px solid rgba(255, 255, 255, .20);
    color: #fff;
    text-align: left;
}
.control-theme-v2 .alert-list--compact .alert-square--media {
    border-left: 4px solid #C56A00;
    background: linear-gradient(135deg, #F39A0A 0%, #E68100 58%, #C96900 100%);
    box-shadow: 0 10px 23px rgba(207, 111, 0, .23);
}
.control-theme-v2 .alert-list--compact .alert-square--baja {
    border-left: 4px solid #1D377F;
    background: linear-gradient(135deg, #3159B2 0%, #29499A 58%, #1F397F 100%);
    box-shadow: 0 10px 23px rgba(33, 62, 137, .23);
}
.control-theme-v2 .alert-list--compact .alert-square--media .alert-square__icon-wrap,
.control-theme-v2 .alert-list--compact .alert-square--baja .alert-square__icon-wrap {
    width: 37px;
    height: 37px;
}
.control-theme-v2 .alert-list--compact .alert-square--media .alert-square__icon,
.control-theme-v2 .alert-list--compact .alert-square--baja .alert-square__icon {
    width: 37px;
    height: 37px;
    border-radius: 11px;
    font-size: 15px;
}
.control-theme-v2 .alert-list--compact .alert-square--media .alert-square__icon {
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .17);
    color: #fff;
}
.control-theme-v2 .alert-list--compact .alert-square--baja .alert-square__icon {
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .17);
    color: #fff;
}
.control-theme-v2 .alert-list--compact .alert-square--media .alert-square__icon-wrap::before,
.control-theme-v2 .alert-list--compact .alert-square--baja .alert-square__icon-wrap::before { display: none; }
.control-theme-v2 .alert-list--compact .alert-square--media .alert-square__text,
.control-theme-v2 .alert-list--compact .alert-square--baja .alert-square__text {
    width: 100%;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
}
.control-theme-v2 .alert-list--compact .alert-square--media .alert-square__label,
.control-theme-v2 .alert-list--compact .alert-square--baja .alert-square__label {
    color: #fff;
    font-size: 13px;
    line-height: 1.15;
}
.control-theme-v2 .alert-list--compact .alert-square--media .alert-square__desc,
.control-theme-v2 .alert-list--compact .alert-square--baja .alert-square__desc {
    color: rgba(255, 255, 255, .86);
    font-size: 9px;
    font-weight: 650;
    line-height: 1.25;
    opacity: 1;
}

/* La confirmación visual replica el color de la alerta seleccionada. */
body.control-theme-v2 .countdown-overlay[data-estado="contando"][data-tipo="alta"] .countdown-circulo {
    border-color: #E51F3C;
    color: #F02A46;
    box-shadow: 0 0 0 9px rgba(229, 31, 60, .10), 0 0 32px rgba(229, 31, 60, .25);
}
body.control-theme-v2 .countdown-overlay[data-estado="contando"][data-tipo="media"] .countdown-circulo {
    border-color: #F09308;
    color: #F5A21A;
    box-shadow: 0 0 0 9px rgba(240, 147, 8, .10), 0 0 32px rgba(240, 147, 8, .25);
}
body.control-theme-v2 .countdown-overlay[data-estado="contando"][data-tipo="baja"] .countdown-circulo {
    border-color: #3159B2;
    color: #4B72CA;
    box-shadow: 0 0 0 9px rgba(49, 89, 178, .11), 0 0 32px rgba(49, 89, 178, .27);
}

/* El estado siempre permanece visible como una barra del sistema. */
.control-theme-v2 .alert-list--compact + .activity-panel { margin-top: 10px; }
.control-theme-v2 .activity-panel--idle {
    min-height: 48px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    padding: 8px 12px;
    border: 1px solid #DCE3EA;
    border-top: 1px solid #DCE3EA;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(19, 35, 56, .06);
    text-align: left;
}
.control-theme-v2 .activity-panel--idle .activity-panel__header { margin: 0; }
.control-theme-v2 .activity-panel--idle .activity-panel__header h2 {
    color: #263342;
    font-size: 10.5px;
    white-space: nowrap;
}
.control-theme-v2 .activity-panel--idle .activity-panel__empty {
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}
.control-theme-v2 .activity-panel--idle .activity-panel__empty i {
    color: #2E9B4D;
    font-size: 9px;
}
.control-theme-v2 .activity-panel--idle .activity-panel__empty p {
    overflow: hidden;
    color: #697483;
    font-size: 8.8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.control-theme-v2 .activity-panel--active {
    margin-top: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.control-theme-v2 .activity-panel--active::before,
.control-theme-v2 .activity-panel--active > .activity-panel__header { display: none; }
.control-theme-v2 .activity-panel--active .alert-live {
    --live-color: #285D86;
    --live-soft: #EAF1F8;
    position: relative;
    overflow: hidden;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--live-color) 24%, white);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 11px 27px rgba(19, 35, 56, .10);
    text-align: left;
}
.control-theme-v2 .activity-panel--active .alert-live::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--live-color);
}
.control-theme-v2 .alert-live--reportada { --live-color: #B50E2E !important; --live-soft: #FFF0F3 !important; }
.control-theme-v2 .alert-live--recepcionada { --live-color: #285D86 !important; --live-soft: #EAF1F8 !important; }
.control-theme-v2 .alert-live--intentando_contactar { --live-color: #A76100 !important; --live-soft: #FFF5E2 !important; }
.control-theme-v2 .alert-live--en_camino { --live-color: #1D5F93 !important; --live-soft: #E9F3FA !important; }
.control-theme-v2 .alert-live--en_sitio { --live-color: #157A65 !important; --live-soft: #E8F7F3 !important; }
.control-theme-v2 .alert-live--finalizada { --live-color: #28783A !important; --live-soft: #EAF7EE !important; }
.control-theme-v2 .alert-live--cancelada,
.control-theme-v2 .alert-live--falsa_alarma,
.control-theme-v2 .alert-live--suspendida { --live-color: #626B77 !important; --live-soft: #EFF1F4 !important; }
.control-theme-v2 .alert-live__top {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.control-theme-v2 .activity-panel--active .alert-live__icon {
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 13px;
    background: var(--live-color);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--live-color) 24%, transparent);
}
.control-theme-v2 .alert-live__heading { min-width: 0; }
.control-theme-v2 .activity-panel--active .alert-live__eyebrow {
    color: var(--live-color);
    font-size: 7.5px;
    font-weight: 850;
    letter-spacing: .09em;
}
.control-theme-v2 .activity-panel--active .alert-live h3 {
    margin: 3px 0 0;
    overflow: hidden;
    color: #182330;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.control-theme-v2 .alert-live__counter {
    min-width: 38px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--live-soft);
    color: var(--live-color);
    font-size: 9px;
    font-weight: 850;
}
.control-theme-v2 .activity-panel--active .alert-live__message {
    min-height: 0;
    margin: 9px 0 8px;
    color: #5E6876;
    font-size: 10px;
    line-height: 1.35;
}
.control-theme-v2 .alert-live__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}
.control-theme-v2 .activity-panel--active .alert-live__type,
.control-theme-v2 .alert-live__connected {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 5px 7px;
    border-radius: 8px;
    background: #F3F5F7;
    color: #4F5966;
    font-size: 8px;
    font-weight: 750;
    line-height: 1;
}
.control-theme-v2 .activity-panel--active .alert-live__type {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.control-theme-v2 .activity-panel--active .alert-live__type i { color: var(--live-color); }
.control-theme-v2 .alert-live__connected { flex-shrink: 0; background: #F0FAF3; color: #28783A; }
.control-theme-v2 .alert-live__connected i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2E9B4D;
    box-shadow: 0 0 0 3px rgba(46, 155, 77, .10);
}
.control-theme-v2 .activity-panel--active .alert-live__progress {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    margin: 0;
}
.control-theme-v2 .activity-panel--active .alert-live__progress::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 14px;
    left: 9%;
    right: 9%;
    height: 2px;
    background: #E1E6EB;
}
.control-theme-v2 .alert-live__stage {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: auto;
    border-radius: 0;
    background: transparent;
}
.control-theme-v2 .alert-live__stage-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 9px;
    background: #E8ECF0;
    color: #8A929D;
    font-size: 10px;
    box-shadow: 0 0 0 1px #DDE2E8;
}
.control-theme-v2 .alert-live__stage small {
    max-width: 100%;
    overflow: hidden;
    color: #858D98;
    font-size: 6.8px;
    font-weight: 750;
    line-height: 1.05;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.control-theme-v2 .alert-live__stage.is-done .alert-live__stage-icon {
    background: var(--live-color);
    color: #fff;
    box-shadow: 0 0 0 1px var(--live-color);
}
.control-theme-v2 .activity-panel--active .alert-live__progress .alert-live__stage.is-done { background: transparent; }
.control-theme-v2 .alert-live__stage.is-done small { color: #3F4955; }
.control-theme-v2 .alert-live__stage.is-current .alert-live__stage-icon {
    box-shadow: 0 0 0 3px var(--live-soft), 0 0 0 4px var(--live-color);
}
.control-theme-v2 .activity-panel--active > #activity-panel-body + * { margin-top: 8px; }
.control-theme-v2 .activity-panel--active .btn {
    min-height: 40px;
    margin-top: 8px !important;
    border-radius: 12px;
    font-size: 11px;
    box-shadow: 0 6px 15px rgba(19, 35, 56, .10);
}

/* Navegación con aspecto nativo y superficie separada del contenido. */
.control-theme-v2 .bottom-nav {
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    max-width: 450px;
    margin: 0 auto;
    gap: 7px;
    padding: 7px 8px;
    border: 1px solid #DCE3EA;
    border-radius: 20px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 34px rgba(19, 35, 56, .16);
    backdrop-filter: blur(14px);
}
.control-theme-v2 .bottom-nav__item {
    min-height: 49px;
    justify-content: center;
    gap: 4px;
    border-radius: 14px;
    border: 1px solid #CCD4DD;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F6F8 100%);
    color: #20262D;
    font-size: 9px;
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(19, 35, 56, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.control-theme-v2 .bottom-nav__item i { color:#111820; font-size:18px; }
.control-theme-v2 .bottom-nav__item:active {
    transform: translateY(1px) scale(.98);
    border-color: #AEB9C5;
    background: #EEF1F4;
    box-shadow: 0 1px 4px rgba(19, 35, 56, .10);
}
.control-theme-v2 .bottom-nav__item--active {
    border-color: var(--control-blue);
    background: var(--control-blue);
    color: #fff;
    box-shadow: 0 6px 14px rgba(30, 58, 95, .20);
}

/* El control inactivo utiliza exactamente la altura útil del teléfono. */
body.control-theme-v2.control-alert-idle {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
}
body.control-theme-v2.control-alert-idle .app-shell {
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}
body.control-theme-v2.control-alert-idle .app-header--main {
    min-height: clamp(112px, 21dvh, 190px);
}
body.control-theme-v2.control-alert-idle .app-header--main .app-header__logo {
    width: clamp(68px, 12dvh, 118px);
    height: clamp(68px, 12dvh, 118px);
}
body.control-theme-v2.control-alert-idle .alert-list--compact {
    min-height: 0;
    grid-template-rows: repeat(3, minmax(0, 1fr));
}
body.control-theme-v2.control-alert-idle .alert-list--compact .alert-square {
    min-height: 0 !important;
    height: 100%;
}
@media (max-height: 640px) {
    body.control-theme-v2.control-alert-idle .app-header--main { gap:6px; padding-top:9px; padding-bottom:8px; }
    body.control-theme-v2.control-alert-idle .app-header__responsible-use { padding:5px 8px; font-size:8.5px; }
    body.control-theme-v2.control-alert-idle .validation-status { min-height:48px; padding:3px 2px; }
    body.control-theme-v2.control-alert-idle .validation-status__icon { width:23px; height:23px; }
    body.control-theme-v2.control-alert-idle .alert-list--compact .alert-square--alta { gap:9px; padding:7px 39px 7px 10px; }
    body.control-theme-v2.control-alert-idle .alert-list--compact .alert-square--media,
    body.control-theme-v2.control-alert-idle .alert-list--compact .alert-square--baja { gap:9px; padding:7px 39px 7px 10px; }
}

/* Información posterior para vía pública y actividad sospechosa. */
.suspicious-overlay {
    --detail-accent: #29499A;
    --detail-soft: #EEF3FF;
    --detail-border: #BFCDF0;
    position: fixed;
    inset: 0;
    z-index: 1450;
    display: grid;
    place-items: end center;
    padding: 18px 14px max(18px, env(safe-area-inset-bottom));
    background: rgba(13, 20, 29, .62);
    backdrop-filter: blur(7px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}
.suspicious-overlay[data-alerta-tipo="via_publica"] {
    --detail-accent: #C96900;
    --detail-soft: #FFF4E3;
    --detail-border: #F0C78E;
}
.suspicious-overlay.is-open { opacity:1; visibility:visible; }
.suspicious-card {
    width: min(100%, 440px);
    max-height: calc(100dvh - 36px - env(safe-area-inset-bottom));
    overflow-y: auto;
    padding: 18px 19px 19px;
    border: 1px solid #DCE3EA;
    border-top: 5px solid var(--detail-accent);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 55px rgba(8, 16, 25, .28);
    transform: translateY(22px);
    transition: transform .2s ease;
}
.suspicious-overlay.is-open .suspicious-card { transform:translateY(0); }
.suspicious-card__sent { display:flex;align-items:center;gap:9px;margin-bottom:15px;padding:10px 12px;border:1px solid #BFDCC7;border-radius:13px;background:#F0F9F3;color:#28783A; }
.suspicious-card__sent > i { font-size:20px; }
.suspicious-card__sent span,.suspicious-card__sent strong,.suspicious-card__sent small { display:block; }
.suspicious-card__sent strong { font-size:10.5px;line-height:1.25; }
.suspicious-card__sent small { margin-top:2px;color:#5B7562;font-size:9px;font-weight:650; }
.suspicious-card__icon { width:54px; height:54px; display:grid; place-items:center; margin:0 auto 8px; border:1px solid var(--detail-border); border-radius:18px; background:var(--detail-soft); color:var(--detail-accent); font-size:22px; box-shadow:0 7px 18px rgba(27,45,69,.09); }
.suspicious-card__eyebrow { display:block;margin-bottom:5px;color:var(--detail-accent);font-size:8.5px;font-weight:850;letter-spacing:.12em;text-align:center;text-transform:uppercase; }
.suspicious-card h3 { margin:0 0 7px; color:#17202C; font:800 20px/1.2 'Sora',sans-serif; text-align:center; }
.suspicious-card > p { margin:0 auto 13px; max-width:370px; color:#657080; font-size:11.5px; line-height:1.5; text-align:center; }
.suspicious-card label { display:block; margin-bottom:7px; color:#3F4955; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.suspicious-card textarea { width:100%; min-height:104px; resize:none; padding:12px 13px; border:1px solid #CBD4DE; border-radius:13px; background:#F8FAFC; color:#17202C; font:500 14px/1.45 'Inter',sans-serif; }
.suspicious-card__input-wrap { position:relative; }
.suspicious-card__voice-zone { display:block; margin:11px 0 8px; }
.suspicious-card__voice-zone[hidden] { display:none; }
.suspicious-card__voice { width:100%; min-height:68px; display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:10px 13px; border:1px solid var(--detail-border); border-radius:17px; background:var(--detail-soft); color:var(--detail-accent); font-family:'Inter',sans-serif; text-align:left; box-shadow:0 7px 18px rgba(27,45,69,.08); }
.suspicious-card__voice-icon { width:45px;height:45px;display:grid;place-items:center;flex:0 0 45px;border-radius:50%;background:var(--detail-accent);color:#fff;box-shadow:0 5px 13px rgba(27,45,69,.18); }
.suspicious-card__voice-icon i { font-size:19px; }
.suspicious-card__voice-copy,.suspicious-card__voice-copy strong,.suspicious-card__voice-copy small { display:block; }
.suspicious-card__voice-copy strong { font-size:12px;font-weight:850; }
.suspicious-card__voice-copy small { margin-top:3px;color:#657080;font-size:9.5px;font-weight:650; }
.suspicious-card__voice[hidden] { display:none; }
.suspicious-card__voice.is-listening { border-color:#D60B35; background:#FFF1F4; color:#B50E2E; animation:voicePulse 1.1s ease-in-out infinite; }
.suspicious-card__voice.is-listening .suspicious-card__voice-icon { background:#B50E2E; }
.suspicious-card__voice-status { min-height:16px; margin:0 auto 12px !important; color:#697180 !important; font-size:9.5px !important; line-height:1.35 !important; text-align:center !important; }
.suspicious-card__voice-status[data-tipo="escuchando"] { color:#B50E2E !important; font-weight:750; }
.suspicious-card__voice-status[data-tipo="correcto"] { color:#28783A !important; }
.suspicious-card__voice-status[data-tipo="error"] { color:#A33A46 !important; }
@keyframes voicePulse { 50% { box-shadow:0 0 0 5px rgba(214,11,53,.12); } }
.suspicious-card__divider { display:flex;align-items:center;gap:9px;margin:1px 0 11px;color:#7A8490;font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.06em; }
.suspicious-card__divider::before,.suspicious-card__divider::after { content:"";height:1px;flex:1;background:#E1E6EC; }
.suspicious-card textarea:focus { outline:none; border-color:var(--detail-accent); background:#fff; box-shadow:0 0 0 3px rgba(30,58,95,.10); }
.suspicious-card__counter { margin-top:5px; color:#7A8490; font-size:10px; font-weight:700; text-align:right; }
.suspicious-card__actions { display:grid; grid-template-columns:1fr 1.35fr; gap:9px; margin-top:13px; }
.suspicious-card__actions .btn { min-height:47px; }
.suspicious-card__actions .btn--primary { border-color:var(--detail-accent);background:var(--detail-accent);color:#fff; }

@media (max-width: 360px) {
    .control-theme-v2 .app-shell { padding-left: 10px; padding-right: 10px; }
    .control-theme-v2 .app-header--main { grid-template-columns: 52px minmax(0, 1fr); }
    .control-theme-v2 .app-header--main .app-header__logo { width: 52px; height: 52px; }
    .control-theme-v2 .alert-list--compact .alert-square--media,
    .control-theme-v2 .alert-list--compact .alert-square--baja { padding: 10px 39px 10px 11px; }
    .control-theme-v2 .alert-list--compact .alert-square--media .alert-square__label,
    .control-theme-v2 .alert-list--compact .alert-square--baja .alert-square__label { font-size: 12px; }
}

@media (max-height: 720px) {
    .control-theme-v2 .app-shell { padding-top: max(8px, env(safe-area-inset-top)); }
    .control-theme-v2 .app-header--main { min-height: 68px; margin-bottom: 7px; padding-top: 7px; padding-bottom: 7px; }
    .control-theme-v2 .app-header--main .app-header__logo { width: 50px; height: 50px; }
    .control-theme-v2 .validation-banner--status { margin-bottom: 7px; }
    .control-theme-v2 .validation-status { min-height: 55px; }
    .control-theme-v2 .alert-list--compact .alert-square--alta { min-height: 76px; padding: 10px 41px 10px 12px; }
    .control-theme-v2 .alert-list--compact .alert-square--media,
    .control-theme-v2 .alert-list--compact .alert-square--baja { min-height: 70px; padding: 9px 41px 9px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .control-theme-v2 .alert-square,
    .control-theme-v2 .validation-status { transition: none; animation: none; }
}