/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-g1ojlri1bg],
.components-reconnect-repeated-attempt-visible[b-g1ojlri1bg],
.components-reconnect-failed-visible[b-g1ojlri1bg],
.components-pause-visible[b-g1ojlri1bg],
.components-resume-failed-visible[b-g1ojlri1bg],
.components-rejoining-animation[b-g1ojlri1bg] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-g1ojlri1bg],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-g1ojlri1bg],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-g1ojlri1bg],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-g1ojlri1bg],
#components-reconnect-modal.components-reconnect-retrying[b-g1ojlri1bg],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-g1ojlri1bg],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-g1ojlri1bg],
#components-reconnect-modal.components-reconnect-failed[b-g1ojlri1bg],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-g1ojlri1bg] {
    display: block;
}


#components-reconnect-modal[b-g1ojlri1bg] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-g1ojlri1bg 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-g1ojlri1bg 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-g1ojlri1bg 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-g1ojlri1bg]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-g1ojlri1bg 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-g1ojlri1bg {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-g1ojlri1bg {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-g1ojlri1bg {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-g1ojlri1bg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-g1ojlri1bg] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-g1ojlri1bg] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-g1ojlri1bg] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-g1ojlri1bg] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-g1ojlri1bg] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-g1ojlri1bg] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-g1ojlri1bg 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-g1ojlri1bg] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-g1ojlri1bg {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Ambientales.razor.rz.scp.css */
/* Tablas de Ambientales y ZoneWatch. Mismo estilo que la grilla de WSP - Llamadas; se repite
   aca porque el CSS con alcance no se comparte entre paginas. */

/* Barra de filtros bajo el titulo: año, mes y descarga en una fila. */
.filtros[b-oflpi0alzy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.filtro-anio[b-oflpi0alzy] {
    width: 110px;
}

.filtro-mes[b-oflpi0alzy] {
    width: 170px;
}

.tabla-scroll[b-oflpi0alzy] {
    overflow-x: auto;
}

.tabla[b-oflpi0alzy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.tabla th[b-oflpi0alzy] {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
}

.tabla tr.columnas th[b-oflpi0alzy] {
    background: var(--bg-tint);
    color: var(--text-strong);
    text-align: left;
    padding: 10px 16px;
    font-size: var(--text-xs);
    white-space: nowrap;
}

.tabla td[b-oflpi0alzy] {
    padding: 8px 16px;
    border-top: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.tabla td.fecha[b-oflpi0alzy] {
    font-family: var(--font-mono);
    font-size: 12.5px;
    white-space: nowrap;
    width: 180px;
}

.tabla td.sitio[b-oflpi0alzy] {
    color: var(--text-strong);
    font-weight: var(--fw-semibold);
}

.tabla td.sin-resultados[b-oflpi0alzy] {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
}
/* /Components/Pages/AmbientalesLlamados.razor.rz.scp.css */
/* Tablas de Ambientales (llamados) y del modal de detalle. Mismo estilo que Ambientales
   Reporte; se repite aca porque el CSS con alcance no se comparte entre paginas. */

/* Barra de filtros bajo el titulo: año y mes en una fila. */
.filtros[b-b48vgvrtv5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.filtro-anio[b-b48vgvrtv5] {
    width: 110px;
}

.filtro-mes[b-b48vgvrtv5] {
    width: 170px;
}

.tabla-scroll[b-b48vgvrtv5] {
    overflow-x: auto;
}

.tabla[b-b48vgvrtv5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.tabla th[b-b48vgvrtv5] {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
}

.tabla tr.columnas th[b-b48vgvrtv5] {
    background: var(--bg-tint);
    color: var(--text-strong);
    text-align: left;
    padding: 10px 16px;
    font-size: var(--text-xs);
    white-space: nowrap;
}

.tabla td[b-b48vgvrtv5] {
    padding: 8px 16px;
    border-top: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.tabla td.fecha[b-b48vgvrtv5] {
    font-family: var(--font-mono);
    font-size: 12.5px;
    white-space: nowrap;
    width: 180px;
}

.tabla td.sitio[b-b48vgvrtv5] {
    color: var(--text-strong);
    font-weight: var(--fw-semibold);
}

.tabla td.sin-resultados[b-b48vgvrtv5] {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
}

.tabla th.numero[b-b48vgvrtv5],
.tabla td.numero[b-b48vgvrtv5] {
    text-align: right;
    white-space: nowrap;
}

.tabla td.hora[b-b48vgvrtv5],
.tabla td.telefono[b-b48vgvrtv5] {
    font-family: var(--font-mono);
    font-size: 12.5px;
    white-space: nowrap;
}

/* Fila de evento: abre el modal de llamados. */
.tabla tr.clickeable[b-b48vgvrtv5] {
    cursor: pointer;
}

.tabla tr.clickeable:hover td[b-b48vgvrtv5] {
    background: var(--bg-tint);
}

/* Resultado de la llamada: ESTADO 2 contesto, 3 no contesto. */
.resultado[b-b48vgvrtv5] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.resultado.contesto[b-b48vgvrtv5] {
    background: var(--success-100);
    color: var(--success-500);
}

.resultado.no-contesto[b-b48vgvrtv5] {
    background: var(--danger-100);
    color: var(--danger-500);
}

/* Celular: celdas mas compactas y la fecha sin ancho fijo, para que Sitio y Evento tengan
   espacio. Aplica tambien a la tabla del modal. */
@media (max-width: 600px) {
    .tabla tr.columnas th[b-b48vgvrtv5],
    .tabla td[b-b48vgvrtv5] {
        padding: 8px 10px;
    }

    .tabla td.fecha[b-b48vgvrtv5] {
        width: auto;
    }
}
/* /Components/Pages/RadiosAfiliacion.razor.rz.scp.css */
/* Radios Afiliación. Mismo estilo que Ambientales; se repite aca porque el CSS con alcance no
   se comparte entre paginas. */

/* Barra de filtros bajo el titulo: desde, hasta y descarga en una fila. */
.filtros[b-9ldxcdr4b7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.filtro-fecha[b-9ldxcdr4b7] {
    width: 170px;
}

.buscador[b-9ldxcdr4b7] {
    width: 280px;
    max-width: 100%;
}

.tabla-scroll[b-9ldxcdr4b7] {
    overflow-x: auto;
}

.tabla[b-9ldxcdr4b7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.tabla th[b-9ldxcdr4b7] {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
}

.tabla tr.columnas th[b-9ldxcdr4b7] {
    background: var(--bg-tint);
    color: var(--text-strong);
    text-align: left;
    padding: 10px 16px;
    font-size: var(--text-xs);
    white-space: nowrap;
}

.tabla th.numero[b-9ldxcdr4b7],
.tabla td.numero[b-9ldxcdr4b7] {
    text-align: right;
    width: 110px;
}

.tabla td[b-9ldxcdr4b7] {
    padding: 8px 16px;
    border-top: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.tabla td.fecha[b-9ldxcdr4b7] {
    font-family: var(--font-mono);
    font-size: 12.5px;
    white-space: nowrap;
    width: 130px;
}

.tabla td.numero[b-9ldxcdr4b7] {
    font-family: var(--font-mono);
    font-size: 12.5px;
}

.tabla td.sitio[b-9ldxcdr4b7] {
    color: var(--text-strong);
    font-weight: var(--fw-semibold);
}

.tabla td.sin-resultados[b-9ldxcdr4b7] {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
}
/* /Components/Pages/Wsp.razor.rz.scp.css */
/* Tabla de destinatarios. Cabecera agrupada en dos filas, como el mockup: la primera es la
   banda navy con los grupos, la segunda los nombres de columna sobre fondo tintado. */

.buscador[b-pppq3tru1v] {
    width: 280px;
    max-width: 100%;
}

.tabla-scroll[b-pppq3tru1v] {
    overflow-x: auto;
}

.tabla[b-pppq3tru1v] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1020px;
    font-size: 13.5px;
}

.tabla th[b-pppq3tru1v] {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
}

.tabla tr.grupo th[b-pppq3tru1v] {
    background: var(--ram-navy);
    color: #fff;
    text-align: left;
    padding: 10px 16px;
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

.tabla tr.grupo th.grupo-contacto[b-pppq3tru1v] {
    border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.tabla tr.grupo th.grupo-servicio[b-pppq3tru1v] {
    text-align: center;
}

.tabla tr.columnas th[b-pppq3tru1v] {
    background: var(--bg-tint);
    color: var(--text-strong);
    text-align: left;
    padding: 10px 16px;
    font-size: var(--text-xs);
    white-space: nowrap;
}

.tabla th.centro[b-pppq3tru1v],
.tabla td.centro[b-pppq3tru1v] {
    text-align: center;
}

.tabla th.acciones[b-pppq3tru1v] {
    width: 150px;
}

.tabla td[b-pppq3tru1v] {
    padding: 8px 16px;
    border-top: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.tabla tbody tr.nueva[b-pppq3tru1v] {
    background: var(--azure-50);
}

.tabla td.nombre[b-pppq3tru1v] {
    color: var(--text-strong);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.tabla td.telefono[b-pppq3tru1v] {
    font-family: var(--font-mono);
    font-size: 12.5px;
    white-space: nowrap;
}

.tabla td.acciones[b-pppq3tru1v] {
    text-align: right;
    white-space: nowrap;
    padding-right: 10px;
}

.tabla td.sin-resultados[b-pppq3tru1v] {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
}