html, body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    /* Color de fondo del tema (claro u oscuro según el modo); #EEF1F5 hasta que carga MudBlazor. */
    background: var(--mud-palette-background, #EEF1F5);
}

/* Forzar Inter en los componentes de MudBlazor (en vez de depender de la
   API C# de Typography, cuyos nombres de clase varían entre versiones) */
.mud-typography, .mud-button-root, .mud-input, .mud-nav-link, .mud-table-root {
    font-family: 'Inter', sans-serif !important;
}

/* Cabecera fija en TODAS las grillas MudTable (pedido del usuario): la
   grilla tiene alto máximo y se desplaza sola, la fila de títulos queda
   pegada arriba — no hay que volver a subir la página para ver los títulos,
   los filtros o las solapas. Misma regla que MudBlazor 7.8 usa en su
   FixedHeader (.mud-table-sticky-header ... th: sticky + top:0 + fondo),
   aplicada a todas. max-height (no height): las grillas cortas no ocupan
   lugar de más. Una grilla puntual puede desactivarlo con
   Class="sin-cabecera-fija". Las que definen Height propio (FixedHeader +
   Height) siguen usando el suyo si es menor. En impresión se anula abajo. */
.mud-table:not(.sin-cabecera-fija) .mud-table-container {
    max-height: max(300px, calc(100vh - 300px));
    overflow-y: auto;
}
.mud-table:not(.sin-cabecera-fija) .mud-table-container table {
    border-collapse: separate; /* sin esto el sticky pierde los bordes */
}
.mud-table:not(.sin-cabecera-fija) .mud-table-head .mud-table-cell {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--mud-palette-surface);
}

/* Popup con solapas (2026-10-21, SI 1581/26 con 10 ítems en Trabajar con Cotizaciones): el popup es flex en columna con
   scroll y las solapas (overflow hidden) se achicaban al alto de la ventana: lo de abajo (cotizaciones, Agregar
   cotización) quedaba cortado sin barra. Sin achicarse, el popup entero se desplaza. */
.mud-dialog > .mud-tabs { flex-shrink: 0; }

/* Filtros de fecha (Desde/Hasta): ancho mínimo para que se lea dd/MM/yyyy
   completo (en columnas angostas quedaba un solo dígito). Si no entra, el
   MudGrid pasa el campo a la fila siguiente (flex-wrap). */
.mud-grid-item:has(.mud-picker) {
    min-width: 200px;
}

/* Monitores anchos (pedido del usuario 2026-10-01, la pantalla ocupa todo el ancho):
   - desde 1920 px las acciones de cada fila van en un solo renglón (sobra lugar; en notebooks
     siguen pudiendo bajar de renglón para que la grilla no se desplace de costado);
   - desde 2200 px los campos de los filtros no se estiran (un "Número" de 600 px no sirve):
     ancho fijo razonable y el resto de la fila queda libre. Solo los filtros que están directo
     en un MudPaper (los de las pantallas; los popups no). */
@media (min-width: 1920px) {
    .mud-table-cell:has(.mud-icon-button) {
        white-space: nowrap;
    }
}
@media (min-width: 2200px) {
    /* Filas un poco más bajas: entran más renglones en la grilla. */
    .mud-table-body .mud-table-cell {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .mud-paper > .mud-grid > .mud-grid-item:has(.mud-input-control) {
        flex: 0 0 360px;
        max-width: 360px;
    }
    /* Desde y Hasta juntos (dos fechas en un mismo bloque). */
    .mud-paper > .mud-grid > .mud-grid-item:has(.mud-picker + .mud-picker),
    .mud-paper > .mud-grid > .mud-grid-item:has(.mud-stack .mud-picker) {
        flex: 0 0 560px;
        max-width: 560px;
    }
}

/* Filtros SIEMPRE en un renglón (pedido del usuario 2026-10-09, "ya es la 3ra vez"): nunca bajan; si no entran, cada
   filtro se achica desde su ancho (style en cada div) y los botones no. Letra chica y poco relleno en todos.
   Control: Scripts/ayuda/verificar_filtros.mjs (todas las pantallas, 1366 con menú y 1680; sin renglones ni "..."). */
.filtros-compactos { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; }
.filtros-compactos > div { flex: 0 1 auto; min-width: 0; }
/* ...y lo de adentro también se achica (si no, el campo se salía de su lugar y quedaba debajo del filtro de al lado). */
.filtros-compactos > div > *, .filtros-compactos .mud-input-control, .filtros-compactos input { min-width: 0; }
.filtros-compactos > div:has(.mud-button-root:not(.mud-icon-button), > .mud-tooltip-root, > .mud-icon-button, .mud-switch, .mud-checkbox, .mud-picker) { flex-shrink: 0; }
/* Campos cuyo valor no se puede cortar (Empresa, número de solicitud): no se achican; achican los demás. */
.filtros-compactos > div.sin-achicar { flex-shrink: 0; }
/* Menos espacio entre filtros donde no entran de otra forma (Autorizaciones Gerenciales con el filtro Ítem, 2026-10-28). */
.filtros-compactos.filtros-juntos { gap: 4px; }
/* Combo que cerrado muestra solo una parte del ítem (2026-10-28, Moneda de Autorizaciones Gerenciales: el signo; la lista,
   signo y nombre). MudBlazor 7.8 dibuja en el combo cerrado el contenido del ítem elegido, no el ToStringFunc. */
.mud-select .mud-input .solo-en-lista { display: none; }
/* Filtro que usa el lugar que sobra en pantallas anchas, hasta su max-width (2026-10-29, Autorizaciones Gerenciales). */
.filtros-compactos > div.crece { flex-grow: 1; }
/* Lista de un combo angosto más ancha que el campo (MudBlazor la limita al ancho del campo con max-width en línea). */
.mud-popover.lista-ancha { max-width: none !important; width: max-content !important; }
.mud-popover.lista-ancha .mud-list-item-text { white-space: nowrap; }
/* Excepción decidida por el usuario (2026-10-09): Trabajar con Solicitudes y Autorizaciones de Entrega pueden usar 2
   renglones cuando no entran (recuadro de menos de 1300 px: 1366 con el menú abierto); ahí no se achican. NO quitarla. */
.mud-paper:has(> .filtros-dos-renglones) { container-type: inline-size; }
@container (max-width: 1300px) {
    .filtros-compactos.filtros-dos-renglones { flex-wrap: wrap; row-gap: 8px; }
    .filtros-compactos.filtros-dos-renglones > div { flex-shrink: 0; }
    /* Renglones parejos (pedido del usuario): corte fijo a la mitad y los campos se estiran hasta llenar el renglón. */
    .filtros-compactos.filtros-dos-renglones > div:has(.mud-input-control) { flex-grow: 1; }
    .filtros-compactos.filtros-dos-renglones > .corte-renglon { display: block; flex-basis: 100%; height: 0; }
}
.filtros-compactos > .corte-renglon { display: none; }
.filtros-compactos .mud-button-root:not(.mud-icon-button) { height: 36px; min-height: 0; padding: 4px 10px; white-space: nowrap; font-size: 0.75rem; }
.filtros-compactos .mud-button-full-width { width: auto; }
.mud-main-content .filtros-compactos .mud-input, .mud-main-content .filtros-compactos .mud-input-label { font-size: 0.75rem; }
/* ...y menos relleno a los costados del valor (14 -> 8 px) y antes de la flecha / el calendario. */
.filtros-compactos .mud-input-slot { padding-left: 8px !important; }
.filtros-compactos input.mud-input-slot:not(.mud-input-root-adorned-end) { padding-right: 8px !important; }
.filtros-compactos .mud-input.mud-input-outlined { padding-right: 6px !important; }
.filtros-compactos .mud-input-adornment-end { margin-left: 2px !important; }
/* Renglón "Agregar ítem" del alta de solicitudes (pedido del usuario 2026-10-15): letra chica, Unidad / Cantidad / Fecha del
   ancho justo (fijado en el div) y la descripción con todo el resto, justificada; al crecer hacia abajo el resto queda arriba. */
.renglon-item { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.renglon-item > div { flex: 0 0 auto; }
.renglon-item > .renglon-item-descripcion { flex: 1 1 320px; min-width: 260px; }
/* div.renglon-item: le gana a ".mud-dialog .mud-input" (0,875rem, más abajo), si no los combos salían cortados. */
div.renglon-item .mud-input, div.renglon-item .mud-input-label { font-size: 0.8rem; }
div.renglon-item textarea { text-align: justify; }
div.renglon-item .mud-button-root { height: 40px; white-space: nowrap; font-size: 0.8rem; }
/* Todo el sistema compacto, como Autorizaciones Gerenciales (pedido del usuario 2026-10-07): grillas con letra chica
   (también el segundo renglón), celdas con poco relleno, pie (filas por página / páginas) bajo, y los campos con letra
   un poco más chica. Los comprobantes impresos usan tablas propias (.tabla-comprobante), no MudTable. */
.mud-table .mud-table-cell { font-size: 0.7rem; }
/* Tablas simples con la letra de las grillas (detalle y alta del asiento; el Tablero de Control no la usa). */
.mud-simple-table.letra-grilla td, .mud-simple-table.letra-grilla th { font-size: 0.7rem; }
.mud-table .celda-sub { font-size: 1em; }
.mud-table .mud-table-cell.letra-chica { font-size: 0.65rem; }
/* Un renglón sin partir, hasta 130 px (más largo: "..." y el texto completo en el title). */
.un-renglon { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.mud-table .mud-table-row .mud-table-cell { padding: 6px 12px 6px 10px; }
.mud-table .mud-table-row .mud-table-cell:last-child { padding-right: 10px; }
.mud-table .celda-seleccion { width: 34px; min-width: 34px; padding: 0 2px !important; text-align: center; }
.mud-table .celda-seleccion .mud-checkbox { margin: 0; }
.max-2-renglones { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Un renglón que no ensancha la columna: toma el ancho de la celda y corta (texto completo en el title). */
.max-1-renglon { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; width: 0; min-width: 100%; word-break: break-all; }
/* Palabras largas que se parten: no fijan un ancho mínimo de columna (grillas que tienen que entrar a 1366). */
.partir-palabras { overflow-wrap: anywhere; }
.mud-main-content .mud-input, .mud-dialog .mud-input { font-size: 0.875rem; }
.mud-main-content .mud-input-label, .mud-dialog .mud-input-label { font-size: 0.875rem; }
.mud-table-pagination-toolbar { min-height: 0; height: 32px !important; padding: 0 8px; }
.mud-table-pagination-toolbar, .mud-table-pagination-toolbar .mud-input { font-size: 0.75rem; }
.mud-table-pagination-toolbar .mud-icon-button { padding: 4px; }

/* Segundo renglón dentro de una celda de grilla (dato asociado: fecha, moneda,
   quién solicitó...): agrupar columnas así evita el desplazamiento horizontal. */
.celda-sub {
    font-size: 0.8em;
}

/* Letra negra en todos los listados y en el VALOR de los campos de solo
   lectura (pedido del usuario): MudBlazor pinta lo deshabilitado con
   --mud-palette-text-disabled (gris muy claro) y no se leían, ej. el popup
   "Ver solicitud". Las etiquetas y los botones deshabilitados siguen grises. */
/* Solo en modo día: en modo nocturno la letra la da el tema (clara). */
.modo-dia .mud-table-cell {
    color: #000;
}
.modo-dia .mud-input.mud-disabled,
.modo-dia .mud-input.mud-disabled input,
.modo-dia .mud-input.mud-disabled textarea {
    color: #000;
    -webkit-text-fill-color: #000; /* Chrome/Edge aclaran el texto de un input disabled */
}

/* ===== Modo nocturno (pedido del usuario). La clase modo-oscuro / modo-dia
   la pone Blazor en el contenedor que envuelve toda la app (MainLayout). La
   paleta oscura la pone MudBlazor (NoProductivoTheme.PaletteDark); acá lo que
   el tema no cubre. ===== */
.modo-oscuro {
    background: var(--mud-palette-background);
}
/* Títulos de pantalla (pedido del usuario: en modo nocturno no se veían bien
   en la mayoría de las pantallas): blanco y un poco más de peso, forzado, en
   el contenido de la página (no en comprobantes, que van en blanco y negro). */
.modo-oscuro .mud-main-content .mud-typography-h4,
.modo-oscuro .mud-main-content .mud-typography-h5,
.modo-oscuro .mud-main-content .mud-typography-h6 {
    color: #FFFFFF !important;
    font-weight: 500;
}
.modo-oscuro .mud-main-content .comprobante .mud-typography-h4,
.modo-oscuro .mud-main-content .comprobante .mud-typography-h5,
.modo-oscuro .mud-main-content .comprobante .mud-typography-h6 {
    color: #000 !important;
}
/* Valor de campos de solo lectura: claro y legible (no el gris de "deshabilitado"). */
.modo-oscuro .mud-input.mud-disabled,
.modo-oscuro .mud-input.mud-disabled input,
.modo-oscuro .mud-input.mud-disabled textarea {
    color: var(--mud-palette-text-primary);
    -webkit-text-fill-color: var(--mud-palette-text-primary);
}
/* Grillas (pedido del usuario): en modo nocturno SIN colores de referencia
   por estado — las filas pintadas en línea (RowStyleFunc) quedan con el fondo
   del tema y letra clara; con pastel no se leían en varias pantallas. Solo
   se mantiene la fila seleccionada, en azul tenue: se reconoce por el
   border-left que le ponen las pantallas (el #E3F2FD solo no alcanza:
   Cotizaciones lo usa también para "2 de 3 aprobaciones") o, en AE, por su
   celeste propio #BBDEFB. */
.modo-oscuro tr[style*="background-color"] {
    background-color: transparent !important;
}
.modo-oscuro tr[style*="border-left"],
.modo-oscuro tr[style*="#BBDEFB"] {
    background-color: rgba(127, 167, 217, 0.22) !important;
}
/* Íconos de acción (pedido del usuario): en modo nocturno todos en blanco,
   los de color (rojo, azul, verde) no se veían sobre el fondo oscuro; si la
   acción está deshabilitada, blanco apagado. También los íconos sueltos de
   las grillas (ej. el reloj de "falta completar"). */
.modo-oscuro .mud-icon-button,
.modo-oscuro .mud-table .mud-icon-root {
    color: #FFFFFF !important;
}
.modo-oscuro .mud-icon-button:disabled,
.modo-oscuro .mud-icon-button.mud-disabled,
.modo-oscuro .mud-icon-button:disabled .mud-icon-root,
.modo-oscuro .mud-icon-button.mud-disabled .mud-icon-root {
    color: rgba(255, 255, 255, 0.28) !important;
}
/* Sin colores en las filas, las leyendas de colores sobran: se ocultan
   (chips de referencia y los cuadraditos de color con su texto). */
.modo-oscuro .mud-chip[style*="background-color: #"],
.modo-oscuro .mud-stack:has(> div[style*="background-color: #"]),
.modo-oscuro .mud-stack:has(> .mud-stack > div[style*="background-color: #"]) {
    display: none !important;
}
/* Lo que NO es fila y tiene fondo pastel en línea (burbujas del asistente,
   tablas para copiar a un mail) vuelve a letra e íconos oscuros. Se
   redefinen las variables del tema en ese elemento, así los hijos las heredan. */
.modo-oscuro [style*="background-color: #"]:not(tr) {
    --mud-palette-text-primary: #1B2230;
    --mud-palette-text-secondary: #5B6472;
    --mud-palette-action-default: rgba(0, 0, 0, 0.6);
    --mud-palette-primary: #1B294A;
    color: #1B2230;
}
/* El logo de la barra cambia a img/logo-oscuro.png (MainLayout): marino
   aclarado, verde y azul de marca más luminosos, "F2J" oscuro. */

@media print {
    /* Los avisos en pantalla (Snackbar: "Entrega registrada…") y los tooltips / menús abiertos no van en la hoja
       (pedido del usuario 2026-10-02: salían impresos en el recibo de entrega y otros reportes). Vale para todo. */
    #mud-snackbar-container, .mud-snackbar, .mud-popover {
        display: none !important;
    }
    /* Al imprimir no hay scroll: la grilla completa tiene que salir en la hoja. */
    .mud-table .mud-table-container {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }
    .mud-table .mud-table-head .mud-table-cell {
        position: static !important;
    }
}

/* Tamaño de página fijo A4 para todo lo que se imprime (comprobantes,
   Notas de Pedido, etc.) — no depende de la config. de impresora del navegador.
   Hoja SIN margen (pedido del usuario 2026-10-01): así el navegador no tiene dónde poner su
   encabezado y pie (fecha y hora, título de la pestaña, dirección de la página, n° de hoja).
   El margen de 15 x 12 mm lo da el contenedor de la página o del popup (abajo, en @media print)
   con box-decoration-break: clone, que lo repite en CADA hoja (probado).
   Sin "Página n de x" (probado 2026-10-06): va en el margen de la hoja y no sale si el diálogo de impresión tiene
   Márgenes = Ninguno; la N.P. repite su encabezado en cada hoja (thead de NotaPedidoComprobante). */
@page {
    size: A4;
    margin: 0;
}

/* Al imprimir (o guardar como PDF desde el diálogo de impresión), se oculta
   todo lo que no sea el contenido de la pantalla — menú lateral, barra
   superior, botones de acción. */
@media print {
    /* Genérico para cualquier MudDialog que muestre su propia vista
       imprimible (mismo criterio que .no-imprimir, pero para popups): oculta
       la página de fondo y el overlay/marco del diálogo, dejando que el
       contenido del diálogo fluya como una página normal.
       Ojo: el ":has(.mud-dialog-container .comprobante)" es a propósito —
       si el comprobante se imprime directo en la página (Solicitudes,
       Notas de Pedido) NO hay que ocultar .mud-main-content, porque el
       comprobante vive justo ahí adentro (si no, queda la hoja en blanco). */
    body:has(.mud-dialog-container .comprobante) .mud-overlay,
    body:has(.mud-dialog-container .comprobante) .mud-main-content { display: none !important; }
    /* Comprobante en un popup abierto encima de otro (Entregar sobre Entregas de la solicitud, 2026-10-16): solo sale ese. */
    body:has(.mud-dialog-container .comprobante) .mud-dialog-container:not(:has(.comprobante)) { display: none !important; }
    .mud-dialog-container { position: static !important; }
    .mud-dialog { position: static !important; box-shadow: none !important; max-width: 100% !important; }
    /* Margen de la hoja para lo que se imprime desde un popup (ver @page). */
    .mud-dialog:has(.comprobante) {
        padding: 15mm 12mm !important;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }
    /* Popup que no es un comprobante y lo imprime (Ver solicitud, 2026-10-16): sin el título del popup en la hoja. */
    .mud-dialog:has(.comprobante-en-popup) .mud-dialog-title { display: none !important; }
    /* ...y sin el alto máximo ni el scroll del popup (los tiene el .mud-dialog, alto de la pantalla): si no, la hoja sale
       cortada donde estaba el scroll (sin logo ni margen) y una solicitud larga no pasa a la hoja siguiente. */
    .mud-dialog-container:has(.comprobante-en-popup),
    .mud-dialog:has(.comprobante-en-popup) {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }
    /* ...y el ancho de la hoja (Imprimir cotizaciones, 2026-10-30: salía angosto, centrado, con el fondo gris del popup y
       una barra de desplazamiento al pie). */
    .mud-dialog-container:has(.comprobante-en-popup) { display: block !important; background: none !important; }
    .mud-dialog:has(.comprobante-en-popup) { width: 100% !important; margin: 0 !important; border-radius: 0 !important; }
    .mud-dialog:has(.comprobante-en-popup) .mud-dialog-content { padding: 0 !important; overflow: visible !important; }

    .no-imprimir {
        display: none !important;
    }
    /* Ayuda: el contenido ocupa todo el ancho (el índice de la izquierda no se imprime). */
    .ayuda-contenido { max-width: 100% !important; flex-basis: 100% !important; }
    .ayuda-seccion { break-before: page; border: none !important; }
    .ayuda-seccion:first-child { break-before: auto; }
    .mud-drawer, .mud-appbar {
        display: none !important;
    }
    .mud-main-content {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }

    /* El MudContainer de MainLayout.razor (MaxWidth.ExtraLarge + pa-3/pa-md-6)
       le suma su propio ancho máximo y padding al comprobante — sin esto
       queda con mucho margen izquierdo/derecho de más, encima del margen
       de @page de acá arriba. */
    .mud-container {
        max-width: none !important;
        /* Margen de la hoja (ver @page): se repite en cada hoja. */
        padding: 15mm 12mm !important;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }

    /* Tipografía más chica y compacta al imprimir — los Typo.h5/h6/subtitle
       de MudBlazor están pensados para pantalla, en el papel quedan
       desproporcionados para un documento comercial (Nota de Pedido,
       comprobante de Solicitud, etc.). Solo afecta la impresión/PDF, no la
       vista en pantalla. */
    .comprobante .mud-typography-h5 { font-size: 15px !important; }
    .comprobante .mud-typography-h6 { font-size: 13px !important; }
    .comprobante .mud-typography-subtitle1 { font-size: 12px !important; }
    .comprobante .mud-typography-subtitle2 { font-size: 11px !important; }
    .comprobante .mud-typography-body1,
    .comprobante .mud-typography-body2 { font-size: 11px !important; }
    .comprobante .mud-typography-caption { font-size: 9px !important; }
    .tabla-comprobante { font-size: 10px !important; }
    .tabla-comprobante th, .tabla-comprobante td { padding: 4px 6px !important; }
}

/* Impresión directa (Services/Impresion.cs): mientras el comprobante está armado en la página, la pantalla queda
   tapada por un velo "Preparando impresión…" (pedido del usuario: no se tiene que ver el comprobante parpadeando antes
   de la ventana del navegador). Solo en pantalla; desaparece solo al cerrar la impresión (se quita el comprobante).
   capturar.mjs pone la clase captura-ayuda para fotografiar el comprobante. */
@media screen {
    html:not(.captura-ayuda) body:has(.comprobante)::after {
        content: "Preparando impresión…";
        position: fixed;
        inset: 0;
        z-index: 100000;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--mud-palette-background, #fff);
        color: var(--mud-palette-text-primary, #000);
        font-family: var(--mud-typography-default-family, sans-serif);
        font-size: 1.25rem;
    }
}

/* Comprobante impreso de Solicitud (VC/SG/SI) — ver Pages/Solicitudes.razor */
.comprobante {
    background: white;
    padding: 16px;
}

/* Letra negra en TODO comprobante/reporte, en la vista previa y al imprimir
   (pedido del usuario: salía gris muy clara — heredaba el gris del tema y el
   del texto chico). Quedan afuera las marcas rojas de copia sin validez. */
.comprobante *:not(.marca-agua-obsoleta):not(.aviso-obsoleta) {
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.tabla-comprobante {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tabla-comprobante th, .tabla-comprobante td {
    border: 1px solid #333;
    padding: 6px 8px;
    text-align: left;
}

/* Libro Diario (Informes > Contables, 2026-11-05): hojas armadas por la pantalla con renglones de alto FIJO (InformeDiario.razor
   RenglonesPorHoja = 52): 52 x 4,2 mm + encabezado ~24 mm entran en los 267 mm útiles de la hoja (márgenes de .mud-container).
   Si se cambia el alto o la letra, recalcular RenglonesPorHoja. En pantalla se ven como hojas blancas; al imprimir, una por página. */
.diario-hoja { color: #000; font-size: 8.5pt; width: 186mm; max-width: 100%; box-sizing: border-box; }
.diario-vista .diario-hoja { background: #fff; border: 1px solid #ccc; padding: 6mm; margin: 0 auto 4mm auto; width: 198mm; }
.diario-cabecera { display: flex; justify-content: space-between; height: 9mm; }
.diario-cabecera .der { text-align: right; }
.diario-titulo { text-align: center; font-weight: bold; font-size: 12pt; letter-spacing: 4px; border-top: 1px solid #000; border-bottom: 1px solid #000; height: 7mm; line-height: 7mm; }
.diario-periodo { text-align: center; height: 6mm; line-height: 6mm; }
.diario-renglon { display: grid; grid-template-columns: 1fr 40mm 28mm 28mm; height: 4.2mm; line-height: 4.2mm; overflow: hidden; box-sizing: border-box; }
.diario-renglon span { white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.diario-renglon .imp { text-align: right; }
.diario-renglon.titulo { font-weight: bold; }
.diario-renglon.detalle .txt { padding-left: 12mm; font-size: 7.5pt; }
.diario-renglon.total { font-weight: bold; }
.diario-renglon.sep { border-bottom: 1px solid #000; }
@media print {
    /* Sin el relleno de .comprobante (16 px y 90 px abajo al imprimir): la hoja entera tiene que entrar en la página. */
    .diario-hoja { break-after: page; padding: 0 !important; }
    .diario-hoja:last-child { break-after: auto; }
}

/* Sumas y Saldos, Balances y Estado de resultados (Informes > Contables, 2026-11-05; como los listados viejos): sin líneas
   verticales, las cuentas título en una franja gris y los TOTAL en negrita con raya arriba. */
.tabla-comprobante.saldos { font-size: 0.75rem; }
.tabla-comprobante.saldos th, .tabla-comprobante.saldos td { padding: 2px 6px; border: none; border-bottom: 1px solid #e0e0e0; }
.tabla-comprobante.saldos thead tr:not(.sin-borde) th { border-bottom: 1px solid #000; }
.tabla-comprobante.saldos td.imp { text-align: right; white-space: nowrap; }
.tabla-comprobante.saldos .saldos-franja { background: #d0d0d0; display: inline-block; min-width: 60%; padding-right: 8px; }
.tabla-comprobante.saldos tr.saldos-titulo td { font-weight: 600; }
.tabla-comprobante.saldos tr.saldos-total td { font-weight: bold; border-top: 1px solid #000; }
.modo-oscuro .tabla-comprobante.saldos .saldos-franja { background: transparent; text-decoration: underline; }

/* Mayor de cuentas (Informes > Contables, 2026-11-05): letra chica, encabezado sin bordes (se repite en cada hoja) y la fila
   de cada cuenta sombreada. */
.tabla-comprobante.mayor { font-size: 0.75rem; }
.tabla-comprobante.mayor th, .tabla-comprobante.mayor td { padding: 2px 6px; }
.tabla-comprobante tr.sin-borde th { border: none; font-weight: normal; }
.tabla-comprobante.mayor tr.mayor-cuenta td { background: #EEF1F5; }
.modo-oscuro .tabla-comprobante.mayor tr.mayor-cuenta td { background: transparent; }
/* Libro IVA Compras (Informes > Impositivos, 2026-11-11): la tabla del Mayor, importes a la derecha y la fila de totales en negrita. */
.tabla-comprobante.mayor .imp { text-align: right; white-space: nowrap; }
.tabla-comprobante.mayor tr.libro-iva-total td { font-weight: bold; }

.tabla-firmas th, .tabla-firmas td {
    text-align: center;
    height: 34px;
}

/* Hojas A4 armadas por descargas.js paginarComprobante (Nota de Pedido, como el Crystal). Se arman fuera de la vista y
   se miden en pantalla: por eso todo va en mm y con la MISMA letra que la impresión (@media print .comprobante ...).
   Contenido: 296 mm de hoja - 15 arriba - 10 abajo (margen inferior de 1 cm, pedido del usuario 2026-10-07). */
.np-paginada { position: absolute; left: -10000px; top: 0; }
.np-paginada .hoja-impresa {
    width: 210mm;
    height: 296mm;
    box-sizing: border-box;
    padding: 15mm 12mm 0 12mm;
    position: relative;
    overflow: hidden;
    break-after: page;
    background: white;
}
.np-paginada .hoja-impresa:last-child { break-after: auto; }
.np-paginada .hoja-contenido { height: 271mm; overflow: hidden; }
/* Franja fija del texto legal (param F-COM-008) al pie de la última hoja (46 mm, contra el margen inferior): el contenido de esa hoja es más bajo. */
.np-paginada .hoja-contenido.con-pie { height: 223mm; }
.np-paginada .hoja-pie { position: absolute; left: 12mm; right: 12mm; bottom: 10mm; height: 46mm; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
/* Cabecera de la N.P. como el Crystal (cabeceraNP.jpg): logo / domicilio / fecha y datos fiscales; la fecha (14 pt)
   y los datos fiscales contra el margen derecho, que es el del cuadro del detalle. */
.np-cabecera { display: grid; grid-template-columns: auto 1fr auto; column-gap: 24px; font-size: 11px; font-weight: bold; }
.np-cabecera > div { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.np-cabecera img { align-self: flex-start; width: auto; } /* sin esto la columna flex lo estira al ancho del texto de abajo */
.np-cabecera .np-fecha { font-size: 14pt; text-align: right; }
.np-cabecera .np-fiscal { align-self: flex-end; }
.np-no-factura { display: flex; align-items: center; gap: 10px; }
.np-no-factura .np-x { border: 2px solid #000; border-radius: 6px; font-size: 22px; padding: 2px 12px; }
/* Cuadro del título: centrado, y a la derecha "Página n de x" con la leyenda "Estos números deberán..." debajo. */
.np-titulo { border: 1px solid #000; padding: 6px 8px; margin: 12px 0; display: grid; grid-template-columns: 1fr auto 1fr;
    column-gap: 12px; align-items: start; text-align: center; }
.np-titulo-der { text-align: right; font-size: 9px; justify-self: end; max-width: 210px; }
.np-titulo-der .hoja-numero { font-size: 10px; font-weight: bold; margin-bottom: 2px; }
.np-paginada .mud-typography-h5 { font-size: 15px !important; }
.np-paginada .mud-typography-h6 { font-size: 13px !important; }
.np-paginada .mud-typography-subtitle1 { font-size: 12px !important; }
.np-paginada .mud-typography-subtitle2 { font-size: 11px !important; }
.np-paginada .mud-typography-body1,
.np-paginada .mud-typography-body2 { font-size: 11px !important; }
.np-paginada .mud-typography-caption { font-size: 9px !important; }
.np-paginada .tabla-comprobante { font-size: 10px !important; }
.np-paginada .tabla-comprobante th, .np-paginada .tabla-comprobante td { padding: 4px 6px !important; }
/* Observación de la N.P. (ObservNPed) en 7 pt y texto legal del pie (param F-COM-008) en 6 pt, en pantalla y al imprimir. */
.comprobante .np-observacion.mud-typography { font-size: 7pt !important; }
.comprobante .np-pie.mud-typography { font-size: 6pt !important; }
@media print {
    /* Con las hojas armadas, se imprimen solo ellas (el resto de la página y el comprobante corrido, ocultos). */
    body:has(> .np-paginada) > :not(.np-paginada) { display: none !important; }
    .np-paginada { position: static; }
}

/* Pie que se repite en CADA hoja A4 al imprimir (position:fixed se repite por página en Chrome/Edge): Fondo Fijo y
   Recibo de entrega de VC. La N.P. NO lo usa: su texto legal (param) sale una sola vez al final. */
.pie-documento {
    margin-top: 16px;
}

@media print {
    .pie-documento {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        /* La hoja no tiene margen (ver @page): el pie se separa solo del borde. */
        padding: 4px 12mm 8mm 12mm;
        border-top: 1px solid #999;
    }

    /* Deja lugar al pie fijo para que no tape la última fila de la tabla. */
    .comprobante {
        padding-bottom: 90px;
    }
}

/* Revisión obsoleta (impresión desde NOTASPEDIDOBACKUP): marca de agua
   diagonal para que la copia no pueda usarse como NP vigente. En pantalla
   va sobre el comprobante; al imprimir queda fixed (se repite en CADA hoja,
   mismo truco que .pie-documento). print-color-adjust: el navegador no
   descarta el color al imprimir. */
.comprobante { position: relative; }
.marca-agua-obsoleta {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-35deg);
    font-size: 64px;
    font-weight: 800;
    color: rgba(198, 40, 40, 0.18);
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.aviso-obsoleta {
    border: 2px solid #C62828;
    color: #C62828;
    text-align: center;
    font-weight: 700;
    padding: 6px;
    margin-bottom: 12px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

@media print {
    .marca-agua-obsoleta {
        position: fixed;
        top: 50%;
        font-size: 80px;
    }
}

.pantalla-carga {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    color: #5B6472;
    font-size: 0.95rem;
}

#blazor-error-ui {
    background: #B33F3F;
    color: white;
    display: none;
    left: 0;
    bottom: 0;
    position: fixed;
    width: 100%;
    z-index: 1000;
    padding: 0.75rem 1rem;
    font-family: 'Inter', sans-serif;
}

#blazor-error-ui .reload {
    color: white;
    text-decoration: underline;
    margin-left: 0.5rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

/* Autorizaciones Gerenciales: consumo del mes del área contra su presupuesto (2026-10-08). Letra negra, color tenue. */
.franja-consumo {
    font-size: 0.75rem;
    color: #000;
    padding: 3px 8px;
    border-radius: 4px;
    max-width: 760px;
    line-height: 1.3;
}

/* Menú lateral más chico (pedido del usuario 2026-10-08): letra, íconos y alto de renglón menores; entran más
   opciones sin desplazar. */
.mud-drawer .mud-navmenu .mud-nav-link {
    font-size: 0.8rem;
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 0;
}
.mud-drawer .mud-navmenu .mud-nav-link .mud-nav-link-text {
    font-size: inherit;
    line-height: 1.3;
}
.mud-drawer .mud-navmenu .mud-nav-link .mud-icon-root {
    font-size: 1.1rem;
}

/* ===== Estilo A (rama estetica, 2026-10-13): fondo gris, recuadros blancos con borde fino y sombra suave, menú
   lateral marino del logo (en modo nocturno: recuadros más claros que el fondo y menú más oscuro). Colores en
   NoProductivoTheme; acá lo que el tema no cubre. Solo en pantalla: la impresión no cambia. ===== */
@media screen {
    .mud-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
    /* Recuadros de primer nivel del contenido (filtros, grillas, tarjetas); los anidados quedan planos. */
    .mud-main-content :is(.mud-paper, .mud-table):not(:is(.mud-paper, .mud-table, .comprobante) *) {
        border: 1px solid var(--mud-palette-lines-default);
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.08);
    }
    .modo-oscuro .mud-main-content :is(.mud-paper, .mud-table):not(:is(.mud-paper, .mud-table, .comprobante) *) {
        box-shadow: none;
    }
    /* Títulos de las grillas sobre gris tenue y en negrita (también la cabecera fija). */
    .mud-table .mud-table-head .mud-table-cell { font-weight: 600; }
    .modo-dia .mud-table .mud-table-head .mud-table-cell { background-color: #F5F7FA; }
    .modo-oscuro .mud-table .mud-table-head .mud-table-cell { background-color: #2E3238; }
    /* Título de cada pantalla en marino (modo día). */
    .modo-dia .mud-main-content .mud-typography-h5:not(.comprobante *) { color: #1B294A; font-weight: 600; }

    /* Menú lateral: en modo día del mismo gris que el fondo, separado por una línea; la opción activa en celeste con una
       franja azul a la izquierda, como la fila seleccionada de las grillas. En modo nocturno, menú oscuro y opción activa
       en azul tenue. */
    .mud-drawer:not(.drawer-asistente) { border-right: 1px solid var(--mud-palette-lines-default); }
    .mud-drawer .mud-navmenu { --mud-palette-action-default-hover: rgba(27, 41, 74, 0.06); }
    .modo-oscuro .mud-drawer .mud-navmenu { --mud-palette-action-default-hover: rgba(255, 255, 255, 0.08); }
    .mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled),
    .mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { color: #1B294A !important; }
    .mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) {
        background-color: #E3F2FD !important;
        border-inline-end-width: 0;
        box-shadow: inset 3px 0 0 #04709B;
    }
    .modo-oscuro .mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled),
    .modo-oscuro .mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { color: #FFFFFF !important; }
    .modo-oscuro .mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) {
        background-color: rgba(127, 167, 217, 0.22) !important;
        box-shadow: inset 3px 0 0 #4FB3D9;
    }
    /* El panel del Asistente también es un MudDrawer: se queda con los colores de un recuadro común. */
    .mud-drawer.drawer-asistente {
        --mud-palette-drawer-background: var(--mud-palette-surface);
        --mud-palette-drawer-text: var(--mud-palette-text-primary);
        --mud-palette-drawer-icon: var(--mud-palette-action-default);
    }
}

/* Tablero de Control (2026-10-23): tarjetas de indicadores y gráficos en columnas que se acomodan al ancho. */
.tablero-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.tablero-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 8px; }
@media (max-width: 600px) { .tablero-graficos { grid-template-columns: 1fr; } }