/* Estilos propios de Visual Inspector.
   Los colores y la tipografía de la marca están en recursos/tema.css: aquí se usan sus
   variables (var(--wys-...)) y nunca códigos de color escritos a mano. */

h1:focus {
    outline: none;
}

/* Símbolo y nombre de la aplicación junto al logo de WYS, en la cabecera */
.vi-nombre-app {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 300;
    text-transform: uppercase;
    color: var(--wys-azul-titulo);
    letter-spacing: .05em;
    border-left: 1px solid var(--wys-gris-1);
    padding-left: 1.5rem;
}

.vi-nombre-app strong {
    font-weight: 900;
}

/* El símbolo de la app, a la altura del texto: acompaña sin quitar protagonismo al logo WYS */
.vi-simbolo-app {
    height: 2.25rem;
    width: auto;
}

/* Pie: "WITTE Y SOLÀ, S.A." sigue centrado y la versión va abajo a la derecha, discreta */
.vi-pie {
    position: relative;
}

.vi-pie__version {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 400;
    text-transform: none;
    opacity: .75;
}

/* Fondo de las pantallas con la sesión iniciada: ilustración de patrón y muestra, fija (no se
   mueve al bajar por listados largos) y con un velo blanco para que todo se lea igual que sobre
   blanco. Queda detrás de todo: la cabecera y el pie la tapan con su propio color */
.vi-fondo-interior {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;   /* nunca se interpone al pulsar */
    background:
        linear-gradient(rgba(var(--wys-velo-rgb), var(--wys-velo-opacidad)), rgba(var(--wys-velo-rgb), var(--wys-velo-opacidad))),
        url("recursos/app/fondo-interior.jpg") center / cover no-repeat;
}

/* Fondo de la pantalla de entrada: foto de la fábrica (máquina de impresión y tubos),
   difuminada y con un velo blanco más fuerte en el centro para que se lea bien el formulario.
   Ocupa todo el hueco entre la cabecera y el pie, anulando el margen del contenido */
.vi-fondo-entrada {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: -2rem -3rem;
    padding: 2.5rem 3rem 3rem;
    min-height: calc(100vh - 6.6rem);
}

.vi-fondo-entrada::before {
    content: "";
    position: absolute;
    inset: -1rem;   /* el difuminado no deja bordes borrosos en los lados */
    background: url("recursos/app/fondo-entrada.jpg") center 45% / cover no-repeat;
    filter: blur(2px);
    z-index: -2;
}

.vi-fondo-entrada::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 30% 60% at center, rgba(var(--wys-velo-rgb), .7) 0%, rgba(var(--wys-velo-rgb), .3) 60%, rgba(var(--wys-velo-rgb), 0) 100%);
    z-index: -1;
}

/* Pantalla de entrada: nota del TFM arriba a la derecha, sobre la foto */
.vi-nota-tfm {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    padding: .3rem .75rem;
    border-radius: .375rem;
    background: var(--wys-azul-oscuro);
    color: #fff;
    font-size: .85rem;
    letter-spacing: .02em;
}

/* Pantalla de entrada: logo de la aplicación grande y el formulario centrado en una tarjeta */
.vi-entrada {
    max-width: 26rem;
    margin: 0 auto;
    padding-top: .5rem;
}

.vi-entrada__logo {
    display: block;
    width: 100%;
    height: 12rem;
    margin: 0 auto 1.5rem;
    padding: .75rem;
    box-sizing: border-box;
    object-fit: contain;
    /* El logo lleva fondo blanco: va sobre una tarjeta blanca redondeada, como el formulario, y se ve
       igual de día y de noche */
    background: #fff;
    border: 1px solid var(--wys-gris-1);
    border-radius: .5rem;
}

/* Título WYS (mayúsculas, azul oscuro, Lato Black; lo pone tema.css) a un tamaño menor */
.vi-entrada__titulo {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.vi-entrada__tarjeta {
    background: var(--wys-fondo);   /* blanco sólido: el formulario no se mezcla con la foto */
    border: 1px solid var(--wys-gris-1);
    border-radius: .5rem;
    padding: 1.75rem;
}

/* Reloj con fecha, hora y turno, abajo a la izquierda, dentro del pie azul */
.vi-reloj {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    font-weight: 400;
    text-transform: none;
    white-space: nowrap;
}

.vi-reloj[hidden] {
    display: none;
}

.vi-reloj__hora {
    font-weight: 900;
    font-variant-numeric: tabular-nums;   /* las cifras no "bailan" al cambiar cada segundo */
}

.vi-reloj__hora::before,
.vi-reloj__turno::before {
    content: "·";
    margin-right: .5rem;
    font-weight: 400;
}

.vi-reloj__turno {
    font-weight: 700;
}

/* Menú de la cabecera: las secciones junto al logo de Visual Inspector y, a la derecha,
   Administración y la persona conectada */
.vi-menu {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.vi-menu__secciones,
.vi-menu__cuenta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.vi-menu__cuenta {
    margin-left: auto;
}

/* Cabecera algo más compacta que la de serie de WYS, para que todo quepa en 1280 px (el mínimo WYS) */
.wys-app .wys-cabecera {
    gap: 1.25rem;
}

/* En la cabecera nada se parte en dos líneas */
.vi-nombre-app,
.vi-menu a,
.vi-menu button {
    white-space: nowrap;
}

/* Menús desplegables de la cabecera: un botón con una flecha que despliega sus opciones.
   El de la persona conectada lleva su nombre y borde; el de Administración va como un enlace */
.vi-desplegable {
    position: relative;
}

.vi-desplegable__boton {
    list-style: none;   /* sin el triángulo que el navegador pone de serie */
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    border: 1px solid var(--wys-azul-oscuro);
    border-radius: .375rem;
    color: var(--wys-azul-titulo);
    font-size: .9rem;
    cursor: pointer;
    user-select: none;
}

.vi-desplegable__boton::-webkit-details-marker {
    display: none;
}

/* Flecha hacia abajo; mira hacia arriba con el menú abierto */
.vi-desplegable__boton::after {
    content: "";
    width: .45rem;
    height: .45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.vi-desplegable[open] .vi-desplegable__boton::after {
    transform: translateY(2px) rotate(-135deg);
}

.vi-desplegable__boton:hover,
.vi-desplegable[open] .vi-desplegable__boton {
    background: var(--wys-azul-oscuro);
    color: #fff;
}

/* El nombre se corta con "…" si es muy largo */
.vi-desplegable__nombre {
    max-width: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vi-desplegable__opciones {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    min-width: 13rem;
    padding: .4rem 0;
    background: var(--wys-fondo);
    border: 1px solid var(--wys-gris-1);
    border-radius: .375rem;
    z-index: 1000;
}

.vi-desplegable__opciones a,
.vi-desplegable__opciones button {
    display: block;
    width: 100%;
    padding: .45rem 1rem;
    border: 0;
    background: none;
    text-align: left;
    text-decoration: none;
    color: var(--wys-azul-titulo);
    font-size: .95rem;
}

.vi-desplegable__opciones a:hover,
.vi-desplegable__opciones button:hover {
    background: var(--wys-gris-1);
}

.vi-desplegable__opciones hr {
    margin: .35rem 0;
    border-color: var(--wys-gris-1);
    opacity: 1;
}

/* Desplegable de la izquierda (Calidad): las opciones se abren hacia la derecha del botón */
.vi-desplegable--izquierda .vi-desplegable__opciones {
    left: 0;
    right: auto;
}

/* Si la pantalla actual es una de sus opciones, el botón se ve en negrita como las demás secciones */
.vi-desplegable:has(a.active) > .vi-desplegable__boton {
    font-weight: 700;
}

/* Variante sin borde (Administración): se ve como un enlace más del menú, con su flecha */
.vi-desplegable--claro .vi-desplegable__boton {
    border-color: transparent;
    padding-left: .4rem;
    padding-right: .4rem;
    font-size: 1rem;
}

.vi-desplegable--claro .vi-desplegable__boton:hover,
.vi-desplegable--claro[open] .vi-desplegable__boton {
    background: var(--wys-gris-1);
    color: var(--wys-azul-titulo);
}

/* Nuevo autocontrol: órdenes en fabricación que se sugieren para el siguiente control */
.vi-ordenes-abiertas {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.vi-orden-abierta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    width: 100%;
    padding: .6rem .9rem;
    border: 1px solid var(--wys-gris-1);
    border-left: 4px solid var(--wys-azul-oscuro);
    border-radius: .375rem;
    background: var(--wys-fondo);
    text-align: left;
    color: var(--wys-azul-titulo);
}

.vi-orden-abierta:hover,
.vi-orden-abierta:focus-visible {
    background: var(--wys-gris-1);
}

/* Ya han pasado las 4 horas recomendadas: toca hacerle el siguiente control */
.vi-orden-abierta--toca {
    border-left-color: var(--bs-warning);
    background: var(--bs-warning-bg-subtle);
}

.vi-orden-abierta--elegida {
    outline: 2px solid var(--wys-azul-brillante);
}

/* Recuadro blanco para agrupar campos sobre el fondo de la aplicación */
.vi-panel {
    background: var(--wys-fondo);
    border: 1px solid var(--wys-gris-1);
    border-radius: .375rem;
    padding: 1.25rem;
}

/* Títulos de columna de todas las tablas con un fondo amarillo clarito (los colores están en
   recursos/tema.css y cambian solos en el modo nocturno) */
.table > thead > tr > th {
    --bs-table-bg: var(--wys-tabla-cabecera);
    --bs-table-color: var(--wys-tabla-cabecera-texto);
    border-bottom-color: var(--wys-gris-azulado-claro);
}

/* Separadores verticales visibles entre los títulos de columna (solo en la cabecera, no en el cuerpo) */
.table > thead > tr > th + th {
    border-left: 1px solid var(--wys-tabla-separador);
}

/* Trazabilidad: cuadro de mando de una orden cerrada (cifras clave y dos barras de progreso) */
.vi-cuadro {
    background: var(--wys-fondo);
    border: 1px solid var(--wys-gris-1);
    border-radius: .5rem;
    padding: 1.5rem 1.75rem;
    max-width: 52rem;
}

.vi-cuadro__cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.vi-cuadro__subtitulo {
    color: var(--wys-texto-secundario);
    font-size: .9rem;
}

.vi-cuadro__acciones {
    display: flex;
    gap: .5rem;
}

.vi-cuadro__cifras {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 2rem;
    margin-bottom: 1.75rem;
}

.vi-cifra__valor {
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.vi-cifra__nombre {
    color: var(--wys-texto-secundario);
    font-size: .9rem;
}

/* Impacto en producción: las cifras de actuaciones en una fila que se reparte en columnas */
.vi-impacto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem 2rem;
    max-width: 52rem;
}

/* Rankings de impacto: el número y, debajo, una barra fina proporcional a la mayor cifra de la tabla */
.vi-celda-barra {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-variant-numeric: tabular-nums;
}

.vi-mini-barra {
    display: block;
    height: .4rem;
    min-width: 2px;
    border-radius: 999px;
    background: var(--wys-azul-brillante);
}

.vi-barra + .vi-barra {
    margin-top: 1.1rem;
}

.vi-barra__texto {
    display: flex;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.vi-barra__pista {
    height: .7rem;
    border-radius: 999px;
    background: var(--wys-gris-1);
    overflow: hidden;
}

.vi-barra__relleno {
    height: 100%;
    border-radius: 999px;
}

/* Verde al llegar al 100 %; ámbar por debajo (colores de estado de Bootstrap, válidos en los dos modos) */
.vi-barra__relleno--completa {
    background: var(--bs-success);
}

.vi-barra__relleno--parcial {
    background: var(--bs-warning);
}

/* Datos de la orden en filas de "nombre: valor" */
.vi-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin-bottom: 0;
}

.vi-datos dt {
    color: var(--wys-texto-secundario);
    font-size: .85rem;
    font-weight: 400;
}

.vi-datos dd {
    margin-bottom: 0;
    font-weight: 700;
}

/* Registros: cada apunte del diario en letra de ancho fijo, tal cual, sobre blanco */
.vi-registro {
    background: var(--wys-fondo);
    border: 1px solid var(--wys-gris-1);
    border-radius: .375rem;
    max-height: 60vh;
    overflow: auto;
    font-family: Consolas, "Courier New", monospace;
    font-size: .8rem;
}

.vi-registro__apunte {
    white-space: pre-wrap;
    word-break: break-word;
    padding: .35rem .75rem;
    border-bottom: 1px solid var(--wys-gris-1);
}

.vi-registro__apunte--error {
    border-left: 3px solid var(--wys-rojo);
}

/* Descripción de la aplicación: una línea pequeña y discreta justo encima del pie */
.vi-descripcion {
    margin: 0;
    padding: .5rem 3rem .6rem;
    text-align: center;
    font-size: .8rem;
    font-weight: 400;
    color: var(--wys-texto-secundario);
}

.vi-menu a.active {
    font-weight: 700;
    color: var(--wys-azul-titulo);
}

.vi-contenido {
    padding: 2rem 3rem;
}

/* Validación de formularios */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--wys-gris-azulado);
}

.invalid {
    outline: 1px solid var(--wys-rojo);
}

.validation-message {
    color: var(--wys-rojo);
}

.darker-border-checkbox.form-check-input {
    border-color: var(--wys-gris-azulado);
}

/* Campo de contraseña con el botón "ojo" a la derecha, dentro del propio campo */
.vi-campo-password {
    position: relative;
}

.vi-campo-password .form-control {
    padding-right: 3rem;   /* hueco para que el texto no quede debajo del ojo */
}

.vi-ojo {
    position: absolute;
    top: 0;
    right: 0;
    width: 3rem;
    height: calc(3.5rem + 2px);   /* la altura de un campo con etiqueta flotante */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--wys-azul-titulo);
    z-index: 5;
}

.vi-ojo:hover,
.vi-ojo:focus-visible {
    color: var(--wys-azul-brillante);
}

/* Se ve un ojo u otro según si la contraseña está oculta o a la vista */
.vi-ojo .vi-ojo__tachado,
.vi-ojo.vi-ojo--visible .vi-ojo__abierto {
    display: none;
}

.vi-ojo.vi-ojo--visible .vi-ojo__tachado {
    display: inline;
}

/* Modo diurno / nocturno: los colores están en recursos/tema.css; aquí, lo que cambia de sitio.
   Logo: se ve el normal de día y el negativo (para fondo azul oscuro) de noche */
.wys-logo--nocturno {
    display: none;
}

[data-bs-theme="dark"] .wys-logo--diurno {
    display: none;
}

[data-bs-theme="dark"] .wys-logo--nocturno {
    display: inline;
}


[data-bs-theme="dark"] .vi-simbolo-app {
    background: #fff;
    border-radius: .4rem;
    padding: .15rem;
}

/* Conmutador diurno / nocturno de la barra: una píldora estrecha, sin texto, con una bola que se
   desliza. De día, sol a la izquierda sobre fondo azul claro; de noche, luna a la derecha sobre fondo
   azul noche. Los colores están en recursos/tema.css */
.vi-conmutador {
    position: relative;
    display: block;
    width: 3.6rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--wys-conmutador-borde);
    border-radius: 999px;
    overflow: hidden;               /* los anillos de la bola no se salen de la píldora */
    background: var(--wys-conmutador-fondo);
    cursor: pointer;
}

.vi-conmutador:focus-visible {
    outline: 2px solid var(--wys-azul-brillante);
    outline-offset: 2px;
}

.vi-conmutador__bola {
    position: absolute;
    top: 50%;
    left: .2rem;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wys-conmutador-bola);
    /* Dos anillos suaves alrededor de la bola, como las ondas de la imagen de referencia */
    box-shadow: 0 0 0 .35rem rgba(255, 255, 255, .13), 0 0 0 .75rem rgba(255, 255, 255, .07);
    transition: left .25s ease;
}

.vi-conmutador__bola svg {
    width: 1.15rem;
    height: 1.15rem;
}

/* Color del símbolo del sol (variable de recursos/tema.css; las rayas y el círculo usan el mismo) */
.vi-conmutador__sol circle {
    fill: var(--wys-conmutador-sol);
}

.vi-conmutador__sol g {
    stroke: var(--wys-conmutador-sol);
}

.vi-conmutador__luna {
    display: none;
}

[data-bs-theme="dark"] .vi-conmutador__bola {
    left: calc(100% - 1.7rem);
}

[data-bs-theme="dark"] .vi-conmutador__sol {
    display: none;
}

[data-bs-theme="dark"] .vi-conmutador__luna {
    display: block;
}

/* Cabecera azul oscura de noche: nombre de la aplicación, secciones y botones de los menús en blanco.
   Las opciones desplegables mantienen su propio fondo y color, por eso no se tocan sus enlaces */
[data-bs-theme="dark"] .wys-cabecera .vi-nombre-app,
[data-bs-theme="dark"] .wys-cabecera .vi-menu__secciones a,
[data-bs-theme="dark"] .wys-cabecera .vi-menu__secciones a.active,
[data-bs-theme="dark"] .wys-cabecera .vi-desplegable__boton {
    color: #fff;
}

[data-bs-theme="dark"] .vi-nombre-app {
    border-left-color: var(--wys-gris-azulado);
}

[data-bs-theme="dark"] .wys-cabecera .vi-desplegable__boton {
    border-color: var(--wys-gris-azulado-claro);
}

[data-bs-theme="dark"] .wys-cabecera .vi-desplegable--claro .vi-desplegable__boton {
    border-color: transparent;
}

[data-bs-theme="dark"] .wys-cabecera .vi-desplegable__boton:hover,
[data-bs-theme="dark"] .wys-cabecera .vi-desplegable[open] .vi-desplegable__boton,
[data-bs-theme="dark"] .wys-cabecera .vi-desplegable--claro .vi-desplegable__boton:hover,
[data-bs-theme="dark"] .wys-cabecera .vi-desplegable--claro[open] .vi-desplegable__boton {
    background: var(--wys-azul-medio);
    color: #fff;
}

/* Aviso que aparece si se pierde la conexión con el servidor */
#blazor-error-ui {
    background: var(--wys-rojo);
    color: #fff;
    bottom: 0;
    display: none;
    left: 0;
    padding: .6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui a {
    color: #fff;
    text-decoration: underline;
}

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

/* Pantalla Ayuda: índice a la izquierda y la guía de usuario a la derecha */
.vi-ayuda__indice {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow: auto;
}

.vi-ayuda__indice a {
    display: block;
    padding: .25rem 0;
    text-decoration: none;
}

.vi-ayuda__apartado {
    scroll-margin-top: 1rem;
    margin-bottom: 2rem;
}

.vi-ayuda__apartado table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
}

.vi-ayuda__apartado th {
    background: var(--wys-tabla-cabecera);
    color: var(--wys-tabla-cabecera-texto);
}

.vi-ayuda__apartado th,
.vi-ayuda__apartado td {
    border: 1px solid var(--wys-gris-1);
    padding: .4rem .75rem;
    vertical-align: top;
}


/* Panel de ayuda flotante: encima de la pantalla, sin fondo que la bloquee. Abre abajo a la derecha;
   se mueve arrastrando la cabecera y se ajusta de tamaño con la esquina inferior derecha */
.vi-ayuda-flotante {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    width: 26rem;
    height: 32rem;
    min-width: 18rem;
    min-height: 14rem;
    max-width: 95vw;
    max-height: 95vh;
    resize: both;
    overflow: hidden;
    background: var(--wys-fondo);
    color: var(--bs-body-color);
    border: 1px solid var(--wys-azul-oscuro);
    border-radius: .5rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}

.vi-ayuda-flotante[hidden] {
    display: none;
}

.vi-ayuda-flotante__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .75rem;
    background: var(--wys-azul-oscuro);
    color: #fff;
    cursor: move;
    user-select: none;
    touch-action: none;
}

.vi-ayuda-flotante__acciones {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .85rem;
}

.vi-ayuda-flotante__acciones a {
    color: #fff;
}

.vi-ayuda-flotante__cerrar {
    border: 0;
    background: none;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.vi-ayuda-flotante__cuerpo {
    flex: 1;
    overflow: auto;
    padding: .75rem;
}

.vi-ayuda-flotante__apartado {
    border-bottom: 1px solid var(--wys-gris-1);
    padding: .4rem 0;
}

.vi-ayuda-flotante__apartado > summary {
    font-weight: 700;
    cursor: pointer;
}

.vi-ayuda-flotante__texto {
    padding-top: .5rem;
    font-size: .9rem;
}

.vi-ayuda-flotante__texto table {
    width: 100%;
    margin: .5rem 0;
    border-collapse: collapse;
}

.vi-ayuda-flotante__texto th {
    background: var(--wys-tabla-cabecera);
    color: var(--wys-tabla-cabecera-texto);
}

.vi-ayuda-flotante__texto th,
.vi-ayuda-flotante__texto td {
    border: 1px solid var(--wys-gris-1);
    padding: .3rem .5rem;
    vertical-align: top;
}

/* Icono de ayuda (interrogante) junto al conmutador de modo: círculo gris con borde rojo oscuro e
   interrogante rojo, como el dibujo de referencia. Los colores son los rojos de WYS */
.vi-ayuda-icono {
    display: block;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.vi-ayuda-icono__dibujo {
    display: block;
    width: 100%;
    height: 100%;
}

.vi-ayuda-icono__fondo {
    fill: var(--wys-gris-1);
    stroke: var(--wys-rojo-oscuro);
    stroke-width: 1.2;
}

.vi-ayuda-icono__contorno {
    fill: none;
    stroke: var(--wys-rojo-oscuro);
    stroke-width: 4.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vi-ayuda-icono__signo {
    fill: none;
    stroke: var(--wys-rojo);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vi-ayuda-icono__punto {
    fill: var(--wys-rojo);
    stroke: var(--wys-rojo-oscuro);
    stroke-width: .8;
}

.vi-ayuda-icono:hover {
    filter: brightness(1.06) drop-shadow(0 0 .25rem rgba(0, 0, 0, .35));
}

/* Con el panel abierto, un aro azul alrededor */
.vi-ayuda-icono[aria-expanded="true"] {
    box-shadow: 0 0 0 .2rem var(--wys-azul-brillante);
}

.vi-ayuda-icono:focus-visible {
    outline: 2px solid var(--wys-azul-brillante);
    outline-offset: 2px;
}

/* Icono de alerta de la lista de autocontroles: orden en fabricación sin un autocontrol nuevo desde hace 4 horas */
.vi-alerta-control {
    width: 1.9rem;
    height: 1.9rem;
    margin-left: .4rem;
    vertical-align: text-bottom;
}

/* En la leyenda de debajo de la tabla, el icono va al tamaño del texto */
.small .vi-alerta-control {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0;
    margin-right: .25rem;
}

/* Hueco fijo para el icono de alerta, delante del número de orden: así los números de orden quedan
   alineados aunque unas filas lleven el icono y otras no */
.vi-alerta-hueco {
    display: inline-block;
    width: 2.3rem;
    vertical-align: middle;
}

.vi-alerta-hueco .vi-alerta-control {
    margin-left: 0;
    vertical-align: middle;
}

/* Lista de autocontroles: título y búsqueda a la izquierda, una foto del escáner en medio y el botón de
   nuevo autocontrol a la derecha. La foto se difumina por los lados (y un poco por arriba y abajo) con una
   máscara de transparencia, así se funde con el fondo en modo diurno y nocturno */
.vi-listado-cabecera {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
}

.vi-listado-cabecera__izquierda {
    flex: 0 0 32rem;
}

.vi-listado-cabecera__escena {
    /* Foto del escáner (24 x 8,5 rem) con una lupa encima, pegada al botón «Nuevo Autocontrol» (el margen
       izquierdo automático la empuja hacia él). Es solo ambiente: no debe resaltar. El conjunto va
       inclinado como una foto dejada sobre la mesa */
    position: relative;
    flex: 0 0 auto;
    align-self: center;
    margin-left: auto;
    margin-right: .5rem;
    width: 24rem;
    height: 8.5rem;
    transform: rotate(-6deg);
    pointer-events: none;
}

.vi-listado-cabecera__imagen {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    opacity: .8;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
                        linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
                linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
    mask-composite: intersect;
}

/* Lupa transparente (el cristal deja ver la foto): su lente, de unos 5 rem, cae sobre la parte izquierda del sobre del escáner */
.vi-listado-cabecera__lupa {
    position: absolute;
    left: 1.25rem;
    top: 1.7rem;
    width: 6.8rem;
    height: 6.8rem;
    filter: drop-shadow(0 .15rem .25rem rgba(0, 0, 0, .35));
}

[data-bs-theme="dark"] .vi-listado-cabecera__lupa {
    /* De noche el aro azul se pierde sobre el fondo oscuro: un halo claro lo despega */
    filter: drop-shadow(0 0 .2rem rgba(255, 255, 255, .6));
}

.vi-listado-cabecera__accion {
    flex: 0 0 auto;
    align-self: flex-start;
    /* Botón de nuevo autocontrol con las esquinas muy redondeadas (en forma de píldora) */
    border-radius: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* En pantallas estrechas no hay hueco para la foto */
@media (max-width: 1150px) {
    .vi-listado-cabecera__escena {
        display: none;
    }

    .vi-listado-cabecera {
        justify-content: space-between;
    }
}

/* Histórico de OFs: la cabecera lleva la misma escena inclinada que la lista de autocontroles, pero con una
   ilustración (carpeta de órdenes con una lupa sobre un tubo) en lugar de la foto del escáner */
.vi-listado-cabecera__izquierda--ancha {
    flex-basis: 48rem;
}

.vi-listado-cabecera__escena--historico {
    /* Pequeña y pegada al botón Buscar (sin el margen automático que la llevaba al borde derecho) */
    width: 9.5rem;
    height: 7.1rem;
    margin-left: .5rem;
    margin-right: 0;
}

.vi-listado-cabecera__ilustracion {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: .65;
    filter: drop-shadow(0 .15rem .25rem rgba(0, 0, 0, .2));
}

[data-bs-theme="dark"] .vi-listado-cabecera__ilustracion {
    /* De noche el azul oscuro de la carpeta se pierde sobre el fondo: un halo claro suave la despega */
    filter: drop-shadow(0 0 .25rem rgba(255, 255, 255, .45));
}