html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ===========================================================================
   Layout (paridad con AdminFlow)
   ===========================================================================
   El padding del cuerpo se anula aqui porque el espaciado lo pone el
   RadzenRow de MainLayout (rz-px-4 / rz-pt-* / rz-pb-*) sobre un contenedor
   centrado de max-width 1440px. Sin esto se suman los dos y el contenido
   queda descentrado en pantallas anchas.

   Van las DOS variables a proposito: el site.css de AdminFlow usa
   --rz-body-padding (el nombre en Radzen 11), pero en la 10.4.9 que tiene
   fijada HMovil la regla real es
   .rz-body { padding: var(--rz-layout-body-padding) }. Con solo la primera,
   el override no hace nada aqui. */
.rz-body {
    --rz-body-padding: 0;
    --rz-layout-body-padding: 0;
}

/* ---------------------------------------------------------------------------
   "Salir" del menu de perfil
   ---------------------------------------------------------------------------
   Es un <form method="post"> con un <button type="submit"> en vez de un
   RadzenProfileMenuItem, por dos razones (ver MainLayout): el layout NO es
   interactivo, asi que un Click de Blazor nunca se conectaria; y SignOutAsync
   necesita escribir la cookie en HttpContext.Response, o sea un POST real.

   Aqui solo se le quitan los estilos propios del <button> para que herede los
   de .rz-navigation-item-link y quede igual a los demas items del menu. */
.hr-logout {
    margin: 0;
}

.hr-logout button.rz-navigation-item-link {
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Formulario de cambio de contrasena de Mi Perfil (HU-WEB-009)
   ---------------------------------------------------------------------------
   Reutiliza el markup de RadzenLogin (rz-form / rz-form-row / rz-textbox), que
   esta pensado para la tarjeta estrecha del login. Dentro de una tarjeta ancha
   los campos se quedan del ancho minimo del input y se ven diminutos, asi que
   aqui se estiran. El max-width evita el extremo contrario: un campo de
   contrasena de 700 px de ancho.
   --------------------------------------------------------------------------- */
.hr-form-perfil .rz-form-input-wrapper {
    width: 100%;
}

.hr-form-perfil input.rz-textbox {
    width: 100%;
    max-width: 420px;
}

/* a / .btn-link: su color se define ahora por token, en el bloque del tema
   claro/oscuro del final del archivo. */

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* .valid.modified / .invalid / .validation-message: sus colores se definen
   ahora por token, en el bloque del tema claro/oscuro del final del archivo. */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ---------------------------------------------------------------------------
   Aviso de error del circuito de Blazor
   ---------------------------------------------------------------------------
   🔴 La regla que IMPORTA es "display: none". El div #blazor-error-ui vive
   siempre en el MainLayout y Blazor lo hace visible por JavaScript cuando el
   circuito se cae. Sin esta regla el aviso "Ocurrio un error no controlado" se
   ve en TODAS las pantallas, todo el tiempo, aunque no haya pasado nada.

   El bloque venia en la plantilla de Blazor y se perdio al reemplazar el
   app.css por el de la marca. El sintoma enganya: parece un error de la
   aplicacion y en realidad es CSS que falta.
   --------------------------------------------------------------------------- */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ===========================================================================
   TEMA CLARO/OSCURO — la mitad de ESTILOS-003 que de verdad cuesta
   ===========================================================================
   🔴 QUIEN PINTA EL PANEL ES RADZEN, Y ESTA HOJA NO.

   El tema de Radzen se cambia intercambiando su hoja (App.razor), y con eso
   solo se resuelven los componentes rz-*. Lo que se queda CLARO SOBRE FONDO
   OSCURO es lo que pinta ESTE archivo, que hasta ESTILOS-003 no tenia una sola
   regla oscura — grep de 'prefers-color-scheme': cero.

   Son pocos colores y estan todos aqui abajo. La lista salio de recorrer el
   archivo entero, no de mirar la pantalla: un color que solo aparece en un
   estado —un campo invalido, un enlace visitado— no se ve al abrir la pagina y
   se descubre semanas despues, de noche y en produccion.

   ---------------------------------------------------------------------------
   POR QUE TRES BLOQUES Y NO UNO
   ---------------------------------------------------------------------------
   Porque el tema tiene TRES estados y no dos:

     :root                                        el claro, y el valor por omision
     @media dark + :root:not([data-tema="light"]) el equipo en oscuro, sin eleccion
     :root[data-tema="dark"]                      eleccion explicita

   ⚠️ El :not() del segundo bloque es lo que hace que elegir CLARO gane sobre un
   equipo configurado en oscuro. Sin el, esa combinacion —la mas probable en el
   turno de dia de quien probo el oscuro una noche— se quedaria oscura y el
   boton diria "Claro".
   --------------------------------------------------------------------------- */
:root {
    --hr-enlace: #006bb7;
    --hr-error: #e50000;
    --hr-valido: #26b050;

    /* Los tonos de las insignias (HU-CM-105). Relleno oscuro con texto blanco.
       Contraste texto/relleno medido: neutro 5.75, info 6.29, revision 6.92,
       atencion 7.65, exito 5.33, panico 7.28. Y el relleno contra el fondo
       de tarjeta (#ffffff) y de pagina (#f6f7fa) pasa de 4.3 en todos. */
    --hr-tono-neutro-fondo: #656668;   --hr-tono-neutro-texto: #ffffff;
    --hr-tono-info-fondo: #1a5fb4;     --hr-tono-info-texto: #ffffff;
    --hr-tono-revision-fondo: #7a5200; --hr-tono-revision-texto: #ffffff;
    --hr-tono-atencion-fondo: #0d5d5e; --hr-tono-atencion-texto: #ffffff;
    --hr-tono-exito-fondo: #1e7b34;    --hr-tono-exito-texto: #ffffff;
    --hr-tono-panico-fondo: #a8201a;   --hr-tono-panico-texto: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="light"]) {
        /* 🔴 NO son los mismos colores con otro nombre: son OTROS valores.
           #006bb7 sobre el fondo oscuro de Radzen (--rz-base-900) da 2.6:1 y
           un enlace deja de distinguirse del texto; #e50000 en un mensaje de
           validacion queda por debajo de lo legible justo cuando el operador
           necesita leerlo. Los claros de aqui estan medidos contra ese fondo. */
        --hr-enlace: #6cb6ff;
        --hr-error: #ff8080;
        --hr-valido: #4ad07d;

        /* 🔴 En oscuro se INVIERTE la insignia: relleno claro con texto oscuro
           (#28363c, el --rz-base-900 del tema). Mantener el relleno oscuro del
           tema claro daria un bloque casi negro sobre la tarjeta #38474e —
           el texto pasaria pero la insignia desapareceria. Medido texto/relleno:
           neutro 7.59, info 6.88, revision 8.37, atencion 6.96, exito 7.43,
           panico 5.47; relleno contra la tarjeta de 4.2 para arriba. */
        --hr-tono-neutro-fondo: #c3cbd0;   --hr-tono-neutro-texto: #28363c;
        --hr-tono-info-fondo: #8ec5ff;     --hr-tono-info-texto: #28363c;
        --hr-tono-revision-fondo: #ffcc66; --hr-tono-revision-texto: #28363c;
        --hr-tono-atencion-fondo: #5ed3d1; --hr-tono-atencion-texto: #28363c;
        --hr-tono-exito-fondo: #7ddc8f;    --hr-tono-exito-texto: #28363c;
        --hr-tono-panico-fondo: #ff8a80;   --hr-tono-panico-texto: #28363c;

        /* Que los controles nativos —barras de desplazamiento, autocompletado
           del navegador, selectores de fecha— salgan tambien oscuros. Sin esto
           el formulario de acceso muestra un campo blanco de autocompletado
           sobre la tarjeta oscura. */
        color-scheme: dark;
    }
}

:root[data-tema="dark"] {
    --hr-enlace: #6cb6ff;
    --hr-error: #ff8080;
    --hr-valido: #4ad07d;


    /* Mismos valores que el bloque @media: ver la explicacion alli.
       🔴 En oscuro se INVIERTE la insignia: relleno claro con texto oscuro
       (#28363c, el --rz-base-900 del tema). Mantener el relleno oscuro del
       tema claro daria un bloque casi negro sobre la tarjeta #38474e —
       el texto pasaria pero la insignia desapareceria. Medido texto/relleno:
       neutro 7.59, info 6.88, revision 8.37, atencion 6.96, exito 7.43,
       panico 5.47; relleno contra la tarjeta de 4.2 para arriba. */
    --hr-tono-neutro-fondo: #c3cbd0;   --hr-tono-neutro-texto: #28363c;
    --hr-tono-info-fondo: #8ec5ff;     --hr-tono-info-texto: #28363c;
    --hr-tono-revision-fondo: #ffcc66; --hr-tono-revision-texto: #28363c;
    --hr-tono-atencion-fondo: #5ed3d1; --hr-tono-atencion-texto: #28363c;
    --hr-tono-exito-fondo: #7ddc8f;    --hr-tono-exito-texto: #28363c;
    --hr-tono-panico-fondo: #ff8a80;   --hr-tono-panico-texto: #28363c;
    color-scheme: dark;
}

/* Los colores fijos de mas arriba, ahora por token. Las reglas originales
   quedan sustituidas por estas: dos definiciones del mismo selector, una con
   color fijo y otra con token, dejarian el resultado a merced del orden. */
a, .btn-link {
    color: var(--hr-enlace);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--hr-valido);
}

.invalid {
    outline: 1px solid var(--hr-error);
}

.validation-message {
    color: var(--hr-error);
}

/* ---------------------------------------------------------------------------
   El selector de tema (Components/Shared/SelectorTema.razor)
   ---------------------------------------------------------------------------
   🔴 LOS COLORES SALEN DE currentColor Y DE UN GRIS TRANSLUCIDO, A PROPOSITO.

   La tentacion es usar las variables de Radzen (--rz-base-200 y compania) y es
   una trampa medida: --rz-base-200 vale #e9edf0 en los DOS temas —la escala de
   grises no se invierte, lo que cambia es que rol juega cada peldano—, asi que
   un fondo de boton pintado con ella seria un bloque casi blanco sobre el
   Panel oscuro.

   Un gris al 20% de opacidad se aclara sobre fondo oscuro y se oscurece sobre
   fondo claro sin saber sobre cual esta, que es justo lo que hace falta: este
   mismo control vive sobre la cabecera del Panel Y sobre la tarjeta de acceso.
   --------------------------------------------------------------------------- */
.hr-selector-tema {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
}

.hr-tema-boton {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Area tactil comoda: el Panel es de escritorio, pero el operador lo abre
       en tableta y estos botones son de los mas pequenos de la pantalla. */
    min-height: 36px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.hr-tema-boton:hover {
    background: rgba(127, 127, 127, 0.20);
}

/* 🔴 El foco NO se quita. Los tres botones se recorren con Tab y el operador
   tiene que ver en cual esta: es la parte de accesibilidad que si aplica aqui
   —que sea operable con teclado—, aunque el Centro de Monitoreo este exento
   del nivel WCAG contractual. */
.hr-tema-boton:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

/* ⚠️ El estado activo NO se comunica SOLO con el fondo: lleva ademas borde y
   aria-pressed. Un tinte del 28% sobre una cabecera oscura es poco evidente, y
   el borde es lo que lo salva sin depender de distinguir dos grises. */
.hr-tema-activo {
    background: rgba(127, 127, 127, 0.28);
    border-color: rgba(127, 127, 127, 0.55);
}

/* En pantallas estrechas se queda el icono. El nombre no se pierde para la
   ayuda tecnica: cada boton lleva su 'title'. */
@media (max-width: 767px) {
    .hr-tema-texto {
        display: none;
    }
}

/* En la pantalla de acceso el selector va arriba a la derecha de la columna
   del formulario, separado de el. */
.hr-selector-tema-acceso {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

/* ---------------------------------------------------------------------------
   Insignias (Components/Shared/Insignia.razor, HU-CM-105)
   ---------------------------------------------------------------------------
   Una sola forma para tipo, estado del reporte, estado del incidente y
   activo/inactivo. El tono resuelve el par de colores del tema en curso a
   traves de --hr-tono-*: la insignia no sabe en que tema esta, y no tiene
   que saberlo.

   Las medidas (0.75rem, 600, mayusculas, pastilla) son las del rz-badge de
   Radzen 10.4.9, para que una insignia junto a un badge que quede por ahi no
   se vea de otra familia. Lo que cambia son los colores — ver los tokens. */
.hr-insignia {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
    letter-spacing: 0.02rem;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--hr-insignia-fondo);
    color: var(--hr-insignia-texto);
}

.hr-insignia-icono {
    font-size: 1rem;
    line-height: 1;
}

.hr-insignia-neutro   { --hr-insignia-fondo: var(--hr-tono-neutro-fondo);   --hr-insignia-texto: var(--hr-tono-neutro-texto); }
.hr-insignia-info     { --hr-insignia-fondo: var(--hr-tono-info-fondo);     --hr-insignia-texto: var(--hr-tono-info-texto); }
.hr-insignia-revision { --hr-insignia-fondo: var(--hr-tono-revision-fondo); --hr-insignia-texto: var(--hr-tono-revision-texto); }
.hr-insignia-atencion { --hr-insignia-fondo: var(--hr-tono-atencion-fondo); --hr-insignia-texto: var(--hr-tono-atencion-texto); }
.hr-insignia-exito    { --hr-insignia-fondo: var(--hr-tono-exito-fondo);    --hr-insignia-texto: var(--hr-tono-exito-texto); }
.hr-insignia-panico   { --hr-insignia-fondo: var(--hr-tono-panico-fondo);   --hr-insignia-texto: var(--hr-tono-panico-texto); font-weight: 700; }

/* Solo contorno: hereda el color del texto de la pagina (que ya pasa de 9:1
   en los dos temas de Radzen) y toma el borde de un gris translucido, que se
   aclara u oscurece solo segun el fondo — mismo truco que el selector de
   tema. Es como sale un tipo de reporte comun. */
.hr-insignia-contorno {
    background: transparent;
    color: inherit;
    border-color: rgba(127, 127, 127, 0.55);
}

/* ---------------------------------------------------------------------------
   El mapa del Centro de Monitoreo (Components/Shared/MapaDelCentro.razor)
   ---------------------------------------------------------------------------
   El lienzo ocupa todo el hueco que le da el componente; MapLibre mide el
   contenedor al montar, asi que el alto tiene que estar resuelto ANTES de que
   corra el JavaScript — de ahi que vaya por estilo en linea desde el
   componente y no por clase aqui. */
.hr-mapa {
    position: relative;
    width: 100%;
}

.hr-mapa__lienzo {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    /* Un fondo neutro mientras llegan las teselas, para que el hueco no
       parpadee en blanco sobre el tema oscuro. */
    background: rgba(127, 127, 127, 0.15);
}

.hr-mapa__aviso {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
}

/* ---------------------------------------------------------------------------
   La bandeja de reportes (Components/Pages/Operacion/BandejaReportes.razor)
   ---------------------------------------------------------------------------
   🔴 La fila de un Panico se marca entera (RN-CC-REP-006), con un filete del
   tono de panico al margen y un tinte muy leve. El filete es lo que sobrevive
   a una captura en blanco y negro; el tinte solo, no. */
.hr-fila-panico > td:first-child {
    box-shadow: inset 4px 0 0 var(--hr-tono-panico-fondo);
}

.hr-fila-panico > td {
    background: color-mix(in srgb, var(--hr-tono-panico-fondo) 8%, transparent);
}

/* El listado de incidentes (Components/Pages/Operacion/ListadoIncidentes.razor)
   ---------------------------------------------------------------------------
   La fila de un incidente que hoy AFECTA LA MOVILIDAD (HU-API-802) se marca
   entera, con el mismo recurso que la fila de Panico en la bandeja: filete al
   margen y tinte leve, en el tono de advertencia. */
.hr-fila-afecta > td:first-child {
    box-shadow: inset 4px 0 0 var(--rz-warning);
}

.hr-fila-afecta > td {
    background: color-mix(in srgb, var(--rz-warning) 8%, transparent);
}

.hr-folio {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* El folio es un enlace al detalle (HU-CM-202): con el color de enlace del
   tema, para que se sepa que abre algo sin pasar el raton, y subrayado al
   pasar o al enfocarlo con el teclado. */
a.hr-folio {
    color: var(--rz-link-color, var(--rz-primary));
    text-decoration: none;
}

a.hr-folio:hover,
a.hr-folio:focus-visible {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   El detalle del reporte (Components/Pages/Operacion/ReporteDetalle.razor)
   ---------------------------------------------------------------------------
   Las fotografias en miniatura y la vista ampliada. La ampliada es una capa
   sobre la pagina y no una navegacion: al cerrar, el operador sigue donde
   estaba, con el reporte a la vista (criterio de HU-CM-202). */
.hr-fotos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hr-fotos__miniatura {
    width: 160px;
    height: 120px;
    padding: 0;
    border: 1px solid rgba(127, 127, 127, 0.35);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(127, 127, 127, 0.15);
    cursor: zoom-in;
}

.hr-fotos__miniatura:focus-visible {
    outline: 3px solid var(--rz-primary);
    outline-offset: 2px;
}

.hr-fotos__miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hr-visor {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
}

.hr-visor__figura {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: default;
}

.hr-visor__figura img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    background: #000;
}

.hr-visor__figura figcaption {
    color: #fff;
    font-size: 0.875rem;
}

.hr-visor__cerrar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
}

.hr-visor__cerrar:hover,
.hr-visor__cerrar:focus-visible {
    background: rgba(255, 255, 255, 0.3);
    outline: 2px solid #fff;
}

.hr-coordenadas {
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   Conversacion del reporte (EP-CM-4, HU-CM-401)
   ═══════════════════════════════════════════════════════════════════════
   El historial crece hacia abajo y la vista se queda PEGADA al final sin
   JavaScript: el contenedor es column-reverse con UN solo hijo, asi el orden
   del DOM sigue siendo el cronologico (lo que lee un lector de pantalla) y el
   navegador ancla el desplazamiento abajo cuando llega un mensaje nuevo.

   🔴 Quien envio se distingue por POSICION, COLOR y ROTULO a la vez: el rotulo
   ("Ciudadano" / "Centro de Monitoreo") es lo que no depende del color. */
.hr-chat {
    display: flex;
    flex-direction: column-reverse;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 8px;
}

.hr-chat__hilo {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.hr-chat__mensaje {
    max-width: min(75%, 42rem);
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.hr-chat__mensaje--ciudadano {
    align-self: flex-start;
    border: 1px solid rgba(127, 127, 127, 0.4);
    border-bottom-left-radius: 2px;
}

.hr-chat__mensaje--centro {
    align-self: flex-end;
    background: var(--hr-tono-atencion-fondo);
    color: var(--hr-tono-atencion-texto);
    border-bottom-right-radius: 2px;
}

.hr-chat__meta {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    white-space: normal;
}

.hr-chat__adjunto {
    display: block;
    margin-top: 0.35rem;
    max-width: 100%;
}

/* HU-CM-403 — el <input type=file> se oculta VISUALMENTE, no con display:none:
   asi sigue en el orden de tabulacion y el <label> que lo envuelve es el boton. */
.hr-visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.hr-boton-adjuntar {
    position: relative;
    cursor: pointer;
}

.hr-boton-adjuntar:focus-within {
    outline: 3px solid var(--rz-primary);
    outline-offset: 2px;
}

.hr-boton-adjuntar.rz-state-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.hr-adjunto-elegido {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px dashed rgba(127, 127, 127, 0.5);
    border-radius: 8px;
}

.hr-adjunto-elegido__vista {
    max-width: 320px;
    max-height: 240px;
    border-radius: 6px;
}

/* HU-CM-404 — la fotografia del mensaje se amplia al pulsarla. */
.hr-chat__miniatura {
    display: block;
    margin-top: 0.35rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    overflow: hidden;
    cursor: zoom-in;
    background: none;
}

.hr-chat__miniatura img {
    display: block;
    max-width: 260px;
    max-height: 200px;
    object-fit: cover;
}

.hr-chat__miniatura:focus-visible {
    outline: 3px solid var(--rz-primary);
    outline-offset: 2px;
}

/* VIDEO-TAM-CM-001 — el video del ciudadano en tamaño de vista previa. Ocupaba
   todo el ancho de la tarjeta y un video vertical llenaba la pantalla; el
   tamaño completo se pide con "Pantalla completa" (VideoEnVistaPrevia.razor).
   En pantalla completa el navegador quita estos limites por su cuenta. */
.hr-video-previa {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: 0.35rem;
    max-width: 100%;
}

.hr-video-previa__video {
    display: block;
    width: 360px;
    max-width: 100%;
    max-height: 240px;
    border-radius: 6px;
    background: #000;
}

.hr-video-previa__completa {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.hr-video-previa__completa:focus-visible {
    outline: 3px solid var(--rz-primary);
    outline-offset: 2px;
}

/* CHAT-VIVO-CM-001 — un archivo del ciudadano que no cargo tras los reintentos
   (js/adjuntos.js). La caja no ocupa lugar propio (display: contents), para no
   mover la rejilla de fotos ni el hilo; solo cambia que se ve dentro. El texto
   y el boton heredan el color del mensaje, que ya esta medido en los dos temas. */
.hr-adjunto-cargable {
    display: contents;
    /* El mensaje del chat es white-space: pre-wrap (para el texto del ciudadano):
       sin esto, los saltos de linea del marcado de la caja se pintan como renglones
       vacios bajo la foto, el audio o el video. Se hereda a traves de contents. */
    white-space: normal;
}

.hr-adjunto-cargable__fallo {
    display: none;
}

.hr-adjunto-cargable[data-fallo] > :not(.hr-adjunto-cargable__fallo) {
    display: none;
}

.hr-adjunto-cargable[data-fallo] > .hr-adjunto-cargable__fallo {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    padding: 0.4rem 0.6rem;
    border: 1px dashed currentColor;
    border-radius: 6px;
    font-size: 0.875rem;
}

.hr-adjunto-cargable__reintentar {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.hr-adjunto-cargable__reintentar:focus-visible {
    outline: 3px solid var(--rz-primary);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   CM-CON-001 — "Mensajes en espera (N)" en el encabezado.
   El color ACOMPAÑA: el numero y la palabra "Pánico" van en el texto. Los
   tonos son los de las insignias, que ya estan medidos en los dos temas.
   ───────────────────────────────────────────────────────────────────────── */
.hr-aviso-espera {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.875rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    color: inherit;
}
.hr-aviso-espera:hover,
.hr-aviso-espera:focus-visible { text-decoration: underline; }
.hr-aviso-espera--pendiente {
    background: var(--hr-tono-atencion-fondo);
    color: var(--hr-tono-atencion-texto);
    font-weight: 600;
}
.hr-aviso-espera--panico {
    background: var(--hr-tono-panico-fondo);
    color: var(--hr-tono-panico-texto);
    font-weight: 700;
}
/* En pantallas angostas queda el icono y el numero; el texto completo va en title. */
@media (max-width: 767px) {
    .hr-aviso-espera { font-size: 0.8rem; padding: 0.2rem 0.45rem; }
}
/* CM-CON-001 — la fila de la bandeja con mensajes sin leer. */
.hr-sin-leer {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    background: var(--hr-tono-atencion-fondo);
    color: var(--hr-tono-atencion-texto);
}
.hr-sin-leer .rzi { font-size: 1rem; }

/* CM-SON-001 — el estado del sonido de alertas en el encabezado. En texto, no
   solo en color: "Sonido activo", "Activar sonido de alertas", "Silenciar". */
.hr-aviso-sonido {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* HU-CM-207 — un reporte recien llegado a la bandeja se resalta y el resaltado
   se apaga solo. Es transitorio a proposito: lo permanente (Panico) va con su
   propia clase. Con prefers-reduced-motion, se marca sin animar. */
@keyframes hr-llegada {
    from { background-color: color-mix(in srgb, var(--hr-tono-atencion-fondo) 25%, transparent); }
    to   { background-color: transparent; }
}
.hr-fila-nueva > td {
    animation: hr-llegada 6s ease-out 1;
}
@media (prefers-reduced-motion: reduce) {
    .hr-fila-nueva > td { animation: none; font-weight: 600; }
}

/* HU-CM-307 — el alcance de cada nivel de afectacion en el expediente. El nivel
   elegido se marca en negrita Y con "(elegido)" en el texto: no solo con color.
   Hereda el color de texto del tema, asi que sirve igual en claro y oscuro. */
.hr-tabla-alcance {
    border-collapse: collapse;
    width: 100%;
    max-width: 40rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
}
.hr-tabla-alcance caption {
    text-align: start;
    padding-bottom: 0.35rem;
}
.hr-tabla-alcance th,
.hr-tabla-alcance td {
    text-align: start;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--rz-base-300, #d0d0d0);
}
.hr-tabla-alcance thead th { font-weight: 600; }
.hr-tabla-alcance tbody th { font-weight: 400; }
.hr-alcance-elegido > th,
.hr-alcance-elegido > td { font-weight: 600; }

/* ===========================================================================
   Tablero del Centro de Monitoreo (DASH-CM-001)
   ---------------------------------------------------------------------------
   Los tonos son los --hr-tono-* de las insignias (HU-CM-105), ya medidos en
   claro y en oscuro: aqui no se inventa ningun color. El tono va en el filete
   izquierdo y en el icono; el rotulo de cada tarjeta es lo que la distingue,
   el color solo lo refuerza.
   =========================================================================== */
.hr-tablero-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.hr-tarjeta-tablero {
    --hr-tarjeta-tono: var(--hr-tono-neutro-fondo);
    background: var(--rz-base-background-color, var(--rz-white));
    border: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.12));
    border-left: 6px solid var(--hr-tarjeta-tono);
    border-radius: var(--rz-border-radius, 4px);
    padding: 0.75rem 1rem;
}

.hr-tarjeta-tablero-neutro   { --hr-tarjeta-tono: var(--hr-tono-neutro-fondo); }
.hr-tarjeta-tablero-info     { --hr-tarjeta-tono: var(--hr-tono-info-fondo); }
.hr-tarjeta-tablero-revision { --hr-tarjeta-tono: var(--hr-tono-revision-fondo); }
.hr-tarjeta-tablero-atencion { --hr-tarjeta-tono: var(--hr-tono-atencion-fondo); }
.hr-tarjeta-tablero-exito    { --hr-tarjeta-tono: var(--hr-tono-exito-fondo); }

/* 🔴 El panico se DESTACA por mas que el color: ocupa dos columnas y lleva
   el rotulo en negrita (RN-CC-REP-006). */
.hr-tarjeta-tablero-panico {
    --hr-tarjeta-tono: var(--hr-tono-panico-fondo);
    grid-column: span 2;
    font-weight: 700;
}

.hr-tarjeta-tablero-icono {
    color: var(--hr-tarjeta-tono);
    font-size: 2rem;
}

.hr-tarjeta-tablero-enlace {
    color: inherit;
    display: block;
    text-decoration: none;
}

.hr-tarjeta-tablero-enlace:hover .hr-tarjeta-tablero-cifra,
.hr-tarjeta-tablero-enlace:focus-visible .hr-tarjeta-tablero-cifra {
    text-decoration: underline;
}

.hr-tablero-graficas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 0.75rem;
}

.hr-tablero-grafica-vacia {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 220px;
}

@media (max-width: 480px) {
    .hr-tarjeta-tablero-panico { grid-column: auto; }
    .hr-tablero-graficas { grid-template-columns: 1fr; }
}

.hr-tarjeta-tablero-aviso { display: block; }

.hr-tablero-alertas {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    font-weight: 400;
}