/* Módulo Soporte -- prefijo `soporte-*`. Sin html/body/:root/* (HojasDeEstiloSinReglasGlobalesTests), y ningún
   selector pisa el atributo `hidden`. */

.soporte-conversacion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* La cabecera del pedido abierto (título y «Volver a la lista») queda fija arriba: el que scrollea es .vc-detail, y con una
   conversación larga el botón se iba con el scroll. Los márgenes negativos llevan el fondo hasta el borde del panel (su
   padding es de 12px) para que el contenido no se vea pasar por los costados. El top es -12px y no 0 porque el navegador
   pega el sticky DENTRO del padding de quien scrollea: con 0 quedaba 12px abajo del borde, y por esa franja se veía pasar
   la conversación. Si cambia el padding de .vc-detail, cambian los tres 12px de acá. */
.soporte-detalle-cabecera {
    position: sticky;
    top: -12px;
    z-index: 2;
    background-color: var(--mud-palette-surface);
    margin: -12px -12px 8px;
    padding: 12px 12px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.soporte-mensaje {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
}

.soporte-mensaje-propio {
    align-self: flex-end;
    background-color: var(--mud-palette-primary-hover);
}

.soporte-mensaje-ajeno {
    align-self: flex-start;
    background-color: var(--mud-palette-background-gray);
}

.soporte-mensaje-cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}

/* El texto lo escribió una persona: respeta sus saltos de línea y no se sale de la burbuja. */
.soporte-mensaje-texto {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.soporte-respuesta {
    margin-top: 8px;
}

.soporte-pegado {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px dashed var(--mud-palette-lines-inputs);
    border-radius: 4px;
    color: var(--mud-palette-text-secondary);
}

.soporte-pegado:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* En el celular no hay Ctrl+V (PRO-3): la zona se oculta con el mismo corte que Breakpoint.SmAndDown de MudBlazor (menos de
   960 px). Por CSS y no con MudHidden: el elemento sigue en el DOM, que es lo que el componente referencia al arrancar. */
@media (max-width: 959.98px) {
    .soporte-pegado {
        display: none;
    }
}

/* La vista previa de la captura en el formulario de pedido nuevo: entera (contain, no recortada) y a una altura que
   deja ver el formulario debajo. Un clic la amplía en el visor de adjuntos. */
.soporte-captura-vista {
    display: flex;
    justify-content: center;
    cursor: zoom-in;
}

/* Se llega con Tab (tabindex="0") y se amplía con Enter o Espacio: el foco se tiene que ver. */
.soporte-captura-vista:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* El contenedor del contenido del diálogo de pedido recibe el foco con un clic en un hueco (para que Ctrl+V llegue al diálogo), pero no es un control: sin contorno. */
.soporte-dialogo-contenido:focus {
    outline: none;
}

/* El diálogo de alta de pedido (SoporteAltaDialog). MudBlazor deja `overflow-y: auto` en `.mud-dialog` Y en
   `.mud-dialog-content`: con un formulario alto aparecen dos barras, y el scroll del diálogo entero corre el título
   fuera de la ventana (un clic o el foco del Ctrl+V lo desplazan). Con el diálogo en `overflow: hidden` sólo scrollea el
   contenido —que ya es `flex: 1 1 auto; overflow: auto`—, el título y los botones quedan fijos y la barra aparece sólo si
   el contenido de verdad no entra. Local a este diálogo: no se toca la regla compartida de MudBlazor. */
.mud-dialog.soporte-dialogo-alta {
    overflow-y: hidden;
    max-height: calc(100dvh - 32px);
}

.soporte-captura-vista-inactiva {
    cursor: default;
    pointer-events: none;
}

.soporte-captura-vista-img {
    display: block;
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.soporte-punto-novedad {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--mud-palette-primary);
}

/* El «Ayuda» del pie del menú lateral (D26) es el mismo menú de soporte que el «?» de la barra, dibujado como un link
   de navegación. MudMenu es `inline-flex` y sin ancho propio: sin esto el link se achicaba a su contenido en vez de
   ocupar todo el ancho del drawer, como el link que reemplaza. */
.soporte-menu-lateral {
    display: flex;
    width: 100%;
}

/* ── Bandeja (SystemAdmin) ───────────────────────────────────────────────────────────────────────── */

.soporte-bandeja-filtro {
    min-width: 160px;
    max-width: 220px;
}

/* La bandeja tiene el buscador, tres filtros y el botón «Nuevo pedido»: en un ancho justo los controles de la derecha
   pasan a otra fila en vez de salirse del panel (`.vc-toolbar-right` no envuelve por sí solo). */
.soporte-bandeja-toolbar .vc-toolbar-right {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.soporte-dato {
    display: flex;
    gap: 8px;
    font-size: 0.8125rem;
}

.soporte-dato-rotulo {
    flex: 0 0 140px;
    color: var(--mud-palette-text-secondary);
}

.soporte-dato-valor {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.soporte-error-texto {
    margin: 0;
    font-size: 0.75rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 320px;
    overflow: auto;
}

/* La segunda línea de un ítem del menú de soporte («Reportar»): chica, atenuada y partida en renglones en vez de ensanchar el menú. */
.soporte-menu-item-detalle {
    display: block;
    max-width: 18rem;
    white-space: normal;
    color: var(--mud-palette-text-secondary);
}

/* El aviso del error de una pantalla (SoporteErrorBoundary): ocupa el ancho del contenido, con aire alrededor. */
.soporte-error-pantalla {
    margin: 16px;
}

/* ── Notas internas y accesos (bandeja) ─────────────────────────────────────────────────────────── */

/* NUE-10: la nota interna no la ve el usuario; el fondo amarillo pálido la separa de lo que sí le llega. */
.soporte-mensaje-interno {
    background-color: rgba(255, 193, 7, 0.18);
    border-style: dashed;
}

.soporte-accesos td,
.soporte-accesos th {
    white-space: nowrap;
}

/* Columnas numéricas de las MudSimpleTable de las métricas. Una clase pelada NO alcanza: el paquete declara
   `.mud-simple-table table * tr>td { text-align: start }` (0,1,3) y le gana a `grid-cell-right` (0,1,0) sin importar el
   orden de las hojas. Se repite la cadena del paquete con la clase al final (0,2,3), el molde de `.rc-col-right`
   (recepciones.css) y `.oc-right-align` (compras.css). `grid-cell-right` es de MudDataGrid y no aplica acá. */
.mud-simple-table table * tr > td.sm-col-right,
.mud-simple-table table * tr th.sm-col-right {
    text-align: right;
}

/* El banner de avisos de incidente vigentes, arriba de toda pantalla (SoporteAvisosVigentes con Banner, desde MainLayout).
   No crece: el contenido de la pantalla (mainlayout-body-content) se queda con el resto del alto. */
.soporte-avisos-banner {
    flex: 0 0 auto;
    padding: 8px 8px 0;
}