/* ============================================================
   SIGNET_ADVANCED — Estilos globales
   Archivo: wwwroot/Css/theme.css
   Paleta institucional SIG Advanced:
     Primario: #004080 (azul institucional)
     Acento:   #F9A216 (naranja/ámbar)
   Mismo patrón de theme.css que EQNET_OPERACIONES/SIGNET_CRM,
   con colores propios de SIG Advanced.
   ============================================================ */

:root {
    --adv-primary:       #004080;
    --adv-primary-dark:  #002F5F;
    --adv-primary-light: #E9F0F8;
    --adv-accent:        #F9A216;
    --adv-accent-light:  #FEF3E2;
    --adv-bg:            #F5F7FA;
    --adv-surface:       #FFFFFF;
    --adv-border:        #E2E8F0;
    --adv-text:          #1A2332;
    --adv-text-sec:      #4A5568;
    --adv-danger:        #E5484D;
    --adv-danger-bg:     #FDEAEA;
    --adv-warning:       #F9A216;
    --adv-warning-bg:    #FEF3E2;
    --adv-info:          #3B82F6;
    --adv-info-bg:       #E8F1FE;
    --adv-radius:        8px;
    --adv-radius-lg:     14px;
}

/* ── Fondo general ─────────────────────────────────────────── */
.mud-layout { background: var(--adv-bg) !important; }
.mud-main-content { background: var(--adv-bg) !important; }

/* ── Pie de página del masterpage (fijo, siempre visible) ─────── */
.adv-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    text-align: center;
    font-size: 11px;
    color: var(--adv-text-sec);
    padding: 10px 8px;
    border-top: 1px solid var(--adv-border);
    background: var(--adv-surface);
}

/* ── AppBar (degradado celeste → blanco, como el sistema anterior — D:\Anterior.png) ── */
header.mud-appbar,
header.mud-appbar.mud-theme-primary {
    background: linear-gradient(90deg, #DCE5F1 0%, #FFFFFF 100%) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--adv-border) !important;
    color: var(--adv-text) !important;
}
header.mud-appbar,
header.mud-appbar .mud-toolbar {
    height: 56px !important;
    min-height: 56px !important;
}
header.mud-appbar .mud-toolbar {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 8px !important;
    border-radius: 0 !important;
}
header.mud-appbar .mud-icon-button,
header.mud-appbar .mud-icon-root {
    color: var(--adv-text-sec) !important;
}
header.mud-appbar .mud-icon-root.adv-brand-icon {
    color: var(--adv-primary) !important;
}

/* Marca: el logo con el nombre al lado, en Titillium Web —de trazo cuadrado, que
   acompaña al logo mejor que la tipografía del resto de la aplicación.

   La regla NO va colgada de header.mud-appbar: la pantalla de arranque —la que se ve
   entre que se entra y termina de cargar el menú— dibuja su propia barra de marca, sin
   MudAppBar, y ahí el logo se quedaba sin altura y salía a tamaño natural, enorme, sobre
   la mitad izquierda de la pantalla. */
img.adv-brand-icon {
    height: 40px;
    width: auto;
    flex-shrink: 0;
}
/* Mismo tratamiento que el nombre de la pantalla de acceso (.adv-login-marca-nombre):
   "Advanced" en caja mixta y el interletrado apretado, para que la marca se lea
   igual en el acceso y adentro del sistema. */
.adv-brand-nombre {
    font-family: 'Titillium Web', Roboto, sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.3px;
    line-height: 1;
    color: var(--adv-primary);
    white-space: nowrap;
    margin-left: 2px;
}
/* "ERP" en el naranja del logo, para no leerse como un bloque parejo. */
.adv-brand-nombre > span {
    color: var(--adv-accent);
}

/* Empresa de la sesión: va al lado del buscador, como una etiqueta y no como
   texto suelto, para que se lea de un vistazo sin competir con la marca. */
.adv-empresa {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    margin-right: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--adv-primary-light);
    color: var(--adv-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
}
.adv-empresa > span {
    overflow: hidden;
    text-overflow: ellipsis;
}
header.mud-appbar .adv-empresa .mud-icon-root {
    color: var(--adv-primary) !important;
    font-size: 16px;
    flex-shrink: 0;
}
header.mud-appbar .adv-dropdown-panel {
    color: var(--adv-text);
}

/* ── Contenido principal: el topnav ahora es "sticky" (fluye en el
   documento, no fixed), así que el padding-top solo necesita cubrir
   un pequeño respiro — el alto real del topnav (que puede crecer si
   se envuelve a varias filas en pantallas angostas) ya empuja el
   contenido de forma natural. ── */
.adv-main-content {
    padding-top: 12px;
    padding-bottom: 38px;
}

/* Toolbar del DataGrid (fuera del AppBar) */
.mud-table-toolbar,
.mud-data-grid .mud-toolbar {
    background: #fff !important;
    border-bottom: 0.5px solid rgba(0,0,0,0.07) !important;
    padding: 10px 16px !important;
    border-radius: var(--adv-radius-lg) var(--adv-radius-lg) 0 0 !important;
    min-height: 56px !important;
}

/* ── Menú superior (horizontal, reemplaza el drawer lateral) ───
   Invertido a oscuro (fondo --adv-primary-dark, texto claro) para calzar
   con la barra de menú del sistema anterior (D:\Anterior.png) — antes era
   clara con texto oscuro. Los paneles desplegables (submenús/flyouts) se
   mantienen claros a propósito: es el patrón habitual (barra oscura +
   dropdown claro) y no hay referencia de cómo se veían esos paneles en el
   sistema anterior. */
.adv-topnav {
    position: sticky;
    top: 56px;
    margin-top: 56px; /* empuja el topnav debajo del AppBar (fixed, 56px) */
    z-index: 1099;
    min-height: 40px;
    /* Del azul oscuro al claro: arranca oscuro del lado del logo y se abre hacia la derecha. */
    background: linear-gradient(120deg, var(--adv-primary-dark) 0%, var(--adv-primary) 55%, #0060BF 100%);
    border-bottom: 1px solid var(--adv-primary-dark);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 12px;
}
.adv-topnav-link {
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    border-radius: var(--adv-radius) !important;
    padding: 4px 6px !important;
    min-width: 0 !important;
}
.adv-topnav-link .mud-icon-root {
    font-size: 16px !important;
}
.adv-topnav-link .mud-button-icon-start {
    margin: 0 5px 0 -2px !important;
}
/* Los íconos siguen el color del texto del módulo, así se invierten con él. */
.adv-topnav-link .mud-icon-root {
    color: inherit !important;
}

/* Al pasar el mouse y con el módulo abierto: un celeste apenas marcado sobre el
   azul del menú, sin invertir a blanco — la letra sigue clara y no salta. */
.adv-topnav-link:hover {
    background: rgba(125,195,255,0.22) !important;
    color: #ffffff !important;
}
.adv-topnav-link.adv-topnav-activo,
.adv-menu-dropdown.adv-abierto > .adv-topnav-link {
    background: rgba(125,195,255,0.34) !important;
    color: #ffffff !important;
}

/* «Cerrar sesión» al final de la barra. El separador se come todo el espacio
   sobrante y lo empuja contra el borde derecho; el recuadro lo despega de los
   módulos para que no se lea como uno más de la lista. */
.adv-topnav-sep {
    flex: 1 1 auto;
    min-width: 0;
}
.adv-topnav-link.adv-topnav-salir {
    border: 1px solid rgba(255,255,255,0.45) !important;
    padding: 3px 10px !important;
}
.adv-topnav-link.adv-topnav-salir:hover {
    background: rgba(255,255,255,0.18) !important;
    border-color: #ffffff !important;
}
/* En pantalla angosta la barra se apila en vertical: el separador no tiene qué
   empujar y el botón queda como una fila más, que es lo que corresponde. */
@media (max-width: 767px) {
    .adv-topnav-sep { display: none; }
    .adv-topnav-link.adv-topnav-salir { border: 0 !important; }
}

/* ── Responsive: en pantallas angostas la barra de módulos (que ahora
   es "sticky", no "fixed") se envuelve a más filas en lugar de
   cortarse — al no caber todos los módulos en una fila, los sobrantes
   bajan automáticamente por el flex-wrap de .adv-topnav. En anchos muy
   chicos (celular) naturalmente queda casi 1 módulo por fila. ── */
@media (max-width: 960px) {
    .adv-topbar-search { display: none; }
}

/* ── Búsqueda global del topbar (visual por ahora, sin backend detrás) ── */
.adv-topbar-search {
    max-width: 260px;
    margin: 0 10px;
}
.adv-topbar-search .mud-input-outlined .mud-notched-outline {
    border-color: var(--adv-border) !important;
    border-radius: var(--adv-radius) !important;
}
.adv-topbar-search .mud-input-outlined:hover .mud-notched-outline {
    border-color: var(--adv-primary) !important;
}

/* ── Dropdown simple (menú de usuario) ────────────────────────── */
.adv-dropdown {
    position: relative;
    display: inline-block;
}
.adv-dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 260px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--adv-surface);
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-radius);
    box-shadow: 0 8px 24px rgba(16,24,32,0.12);
    z-index: 1200;
    padding: 6px 0;
}
.adv-dropdown-item {
    display: flex;
    align-items: center;
    padding: 9px 16px;
    font-size: 12.5px;
    color: var(--adv-text);
    cursor: pointer;
    white-space: nowrap;
}
.adv-dropdown-item:hover {
    background: var(--adv-primary-light);
    color: var(--adv-primary);
}

/* ── Filtro por columna (AdvFiltroColumna) ─────────────────────────
   La flecha vive dentro del título de la columna, y el panel repite el
   orden del listado del sistema anterior: ordenar, buscar y la lista de
   valores con su conteo. ── */
.adv-filtro-col {
    display: inline-flex;
    vertical-align: middle;
}
/* El título y su flecha van siempre en la misma línea: si se parten, el encabezado
   queda escalonado y no se entiende a qué columna pertenece cada flecha. */
th:has(> .adv-filtro-col) {
    white-space: nowrap;
}

/* ── Listados de una línea por fila ────────────────────────────────
   Cada dato entero en su renglón: partido en dos líneas la fila crece y cuesta
   leer la grilla. Si no entra todo, la tabla se desplaza en horizontal y la
   columna de acciones queda fija contra el borde derecho, siempre a la vista. */
.adv-grid-una-linea .mud-table-cell {
    white-space: nowrap;
}
.adv-grid-una-linea th:last-child,
.adv-grid-una-linea td:last-child {
    position: sticky;
    right: 0;
    background: var(--adv-surface);
    box-shadow: -6px 0 8px -8px rgba(16,24,32,0.35);
    z-index: 2;
}
.adv-grid-una-linea tr:hover td:last-child {
    background: var(--adv-primary-light);
}
/* Los íconos de acción, uno al lado del otro. */
.adv-grid-una-linea td:last-child {
    white-space: nowrap;
    text-align: center;
}
/* Listados de muchas columnas (Gratificación, Liquidación, Planilla…).
   Con diez o doce columnas la grilla se pasa del ancho de la pantalla y la última
   columna de datos queda tapada por la de acciones, que va fija a la derecha. Casi
   todo ese ancho de más es relleno lateral de las celdas: recortándolo entra sin
   tocar los rótulos, que tienen que decir lo mismo que el sistema anterior. */
.adv-grid-compacto th.mud-table-cell,
.adv-grid-compacto td.mud-table-cell {
    padding-left: 6px;
    padding-right: 6px;
}
/* El botón del filtro por columna pega contra el rótulo; se le deja aire propio. */
.adv-grid-compacto th.mud-table-cell .adv-filtro-col-boton {
    margin-left: 0;
}
/* Los rótulos largos —«Meses Computables», «Bonif.Extraordinaria»— pueden partirse en
   dos líneas: el ancho de la grilla lo manda el título, no el dato. Las filas siguen
   en una sola línea, que es lo que hace legible un listado. */
.adv-grid-compacto th.mud-table-cell {
    white-space: normal;
    line-height: 1.15;
}

.adv-filtro-col-boton {
    width: 22px;
    height: 22px;
    padding: 0 !important;
    margin-left: 2px;
}
.adv-filtro-col-panel {
    min-width: 240px;
    max-width: 320px;
    padding: 4px 0 0;
    cursor: default;
    font-weight: 400;
    font-size: 12.5px;
    text-transform: none;
    letter-spacing: normal;
    color: var(--adv-text);
    background: var(--adv-surface);
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-radius);
    overflow: hidden;
}
.adv-filtro-col-buscador {
    padding: 6px 10px;
    border-top: 1px solid var(--adv-border);
}
.adv-filtro-col-lista {
    max-height: 300px;
    overflow-y: auto;
    border-top: 1px solid var(--adv-border);
    padding: 4px 0;
}
.adv-filtro-col-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    font-size: 12.5px;
    color: var(--adv-text);
    cursor: pointer;
}
.adv-filtro-col-item:hover {
    background: var(--adv-primary-light);
}
/* "Quitar filtro" sin filtro puesto: se ve, pero apagado. */
.adv-dropdown-item-inactivo {
    color: var(--adv-text-sec);
    opacity: 0.5;
    cursor: default;
}
.adv-dropdown-item-inactivo:hover {
    background: transparent;
    color: var(--adv-text-sec);
}

/* "(Seleccionar todo)" separado del resto: es la fila que manda sobre las demás. */
.adv-filtro-col-todos {
    font-weight: 600;
    border-bottom: 1px solid var(--adv-border);
}
.adv-filtro-col-texto {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adv-filtro-col-conteo {
    color: var(--adv-text-sec);
    font-size: 11.5px;
}
.adv-filtro-col-vacio {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--adv-text-sec);
}
.adv-filtro-col-acciones {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--adv-border);
    padding: 2px 6px;
}

/* ── Botón primario / acento (degradado, look moderno) ──────────── */
.mud-button-filled-primary {
    background: linear-gradient(135deg, #0060BF 0%, var(--adv-primary) 55%, var(--adv-primary-dark) 100%) !important;
    box-shadow: 0 2px 6px rgba(0,64,128,0.25) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    border-radius: var(--adv-radius) !important;
    text-transform: none !important;
    transition: box-shadow .15s ease, transform .15s ease;
}
.mud-button-filled-primary:hover {
    box-shadow: 0 4px 14px rgba(0,64,128,0.35) !important;
    transform: translateY(-1px);
}

/* Deshabilitado: gris plano y letra gris. Los degradados de arriba van con !important, así que
   también pintaban el botón apagado; encima MudBlazor le pone la letra en gris translúcido y el
   texto quedaba ilegible sobre el azul (un botón sin nada seleccionado se veía vacío).
   MudBlazor marca el botón apagado con el atributo `disabled` del <button>, no con una clase:
   por eso la regla va sobre `:disabled`. El botón del acceso queda fuera: tiene su propio
   apagado en azul claro. */
.mud-button-root:disabled:not(.adv-login-boton):not(.mud-icon-button),
.mud-button-root[disabled]:not(.adv-login-boton):not(.mud-icon-button) {
    background: #E4E9F0 !important;
    background-image: none !important;
    color: #8A94A6 !important;
    box-shadow: none !important;
    transform: none !important;
}
.mud-button-root:disabled:not(.adv-login-boton):not(.mud-icon-button) .mud-icon-root,
.mud-button-root[disabled]:not(.adv-login-boton):not(.mud-icon-button) .mud-icon-root {
    color: #8A94A6 !important;
}
/* Los de sólo texto (Cancelar, Salir) no llevan fondo ni apagados. */
.mud-button-text:disabled:not(.mud-icon-button),
.mud-button-text[disabled]:not(.mud-icon-button) {
    background: transparent !important;
}
.mud-button-filled-secondary {
    background: linear-gradient(135deg, #FFBB4D 0%, var(--adv-accent) 60%, #E88A00 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(249,162,22,0.3) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    border-radius: var(--adv-radius) !important;
    text-transform: none !important;
    transition: box-shadow .15s ease, transform .15s ease;
}
.mud-button-filled-secondary:hover {
    box-shadow: 0 4px 14px rgba(249,162,22,0.4) !important;
    transform: translateY(-1px);
}
/* Imprimir (rojo, como el PDF) y Excel (verde): mismo tratamiento de degradado y
   sombra que el botón primario, si no salen planos y desentonan al lado de Agregar. */
.mud-button-filled-error {
    background: linear-gradient(135deg, #E4574C 0%, #D32F2F 55%, #B02620 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(176,38,32,0.28) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    border-radius: var(--adv-radius) !important;
    text-transform: none !important;
    transition: box-shadow .15s ease, transform .15s ease;
}
.mud-button-filled-error:hover {
    box-shadow: 0 4px 14px rgba(176,38,32,0.38) !important;
    transform: translateY(-1px);
}
.mud-button-filled-success {
    background: linear-gradient(135deg, #2FA45A 0%, #1E8449 55%, #166B39 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(22,107,57,0.28) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    border-radius: var(--adv-radius) !important;
    text-transform: none !important;
    transition: box-shadow .15s ease, transform .15s ease;
}
.mud-button-filled-success:hover {
    box-shadow: 0 4px 14px rgba(22,107,57,0.38) !important;
    transform: translateY(-1px);
}
/* Info (Reportes) y Tertiary (Carga Masiva): salían planos al lado de Agregar porque el
   degradado sólo estaba definido para primary, secondary, error y success. Cada uno con su
   color, para que la barra se lea de un vistazo: azul el alta, naranja el estado, verde
   azulado la carga masiva y celeste los reportes. */
.mud-button-filled-info {
    background: linear-gradient(135deg, #3EA6EE 0%, #1E7FD0 55%, #1461A6 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(20,97,166,0.28) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    border-radius: var(--adv-radius) !important;
    text-transform: none !important;
    transition: box-shadow .15s ease, transform .15s ease;
}
.mud-button-filled-info:hover {
    box-shadow: 0 4px 14px rgba(20,97,166,0.38) !important;
    transform: translateY(-1px);
}
.mud-button-filled-tertiary {
    background: linear-gradient(135deg, #2ED3B0 0%, #12A98D 55%, #0C806B 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(12,128,107,0.28) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    border-radius: var(--adv-radius) !important;
    text-transform: none !important;
    transition: box-shadow .15s ease, transform .15s ease;
}
.mud-button-filled-tertiary:hover {
    box-shadow: 0 4px 14px rgba(12,128,107,0.38) !important;
    transform: translateY(-1px);
}

/* Warning (Cerrar Caja / Cerrar Entrega): faltaba en la lista y quedaba con el estilo de fábrica
   de MudBlazor — en MAYUSCULAS y con otro tamaño de letra, desparejo con el resto de la barra. */
.mud-button-filled-warning {
    background: linear-gradient(135deg, #FBB540 0%, #F9A216 55%, #D2860A 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(210,134,10,0.28) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    border-radius: var(--adv-radius) !important;
    text-transform: none !important;
    transition: box-shadow .15s ease, transform .15s ease;
}
.mud-button-filled-warning:hover {
    box-shadow: 0 4px 14px rgba(210,134,10,0.38) !important;
    transform: translateY(-1px);
}

.mud-button-outlined,
.mud-button-text {
    border-radius: var(--adv-radius) !important;
    font-size: 11.5px !important;
    text-transform: none !important;
}

/* ── Paper / Cards ─────────────────────────────────────────── */
.mud-paper {
    border-radius: var(--adv-radius-lg) !important;
    box-shadow: 0 1px 3px rgba(16,24,32,0.06) !important;
    border: 1px solid var(--adv-border);
}

/* ── Tabla ─────────────────────────────────────────────────── */
.mud-table-head .mud-table-cell {
    background: #FBFCFD !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: var(--adv-text-sec) !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid var(--adv-primary) !important;
    padding: 9px 14px !important;
}
.mud-table-body .mud-table-cell {
    font-size: 12px !important;
    padding: 9px 14px !important;
    border-bottom: 0.5px solid var(--adv-border) !important;
    color: var(--adv-text) !important;
}
.mud-table-body .mud-table-row:hover .mud-table-cell {
    background: var(--adv-primary-light) !important;
}

/* ── Chips de estado ───────────────────────────────────────── */
.mud-chip-outlined.mud-chip-color-success {
    border-color: #1E8E5A !important;
    color: #146B44 !important;
    background: #E6F6ED !important;
    font-size: 11px !important;
    height: 22px !important;
    font-weight: 500 !important;
}
.mud-chip-outlined.mud-chip-color-warning {
    border-color: var(--adv-warning) !important;
    color: #97650F !important;
    background: var(--adv-warning-bg) !important;
    font-size: 11px !important;
    height: 22px !important;
    font-weight: 500 !important;
}
.mud-chip-outlined.mud-chip-color-error {
    border-color: var(--adv-danger) !important;
    color: #B3231F !important;
    background: var(--adv-danger-bg) !important;
    font-size: 11px !important;
    height: 22px !important;
    font-weight: 500 !important;
}
.mud-chip-outlined.mud-chip-color-info {
    border-color: var(--adv-info) !important;
    color: #1D4ED8 !important;
    background: var(--adv-info-bg) !important;
    font-size: 11px !important;
    height: 22px !important;
    font-weight: 500 !important;
}
/* Faltaba «primary», y se notaba: un chip pintado con el azul del sistema se quedaba con el
   estilo de fábrica de MudBlazor —fondo blanco, más alto y con la letra más grande— al lado de
   los otros, que sí tienen su fondo suave y sus 11px. En Despacho y Facturación, DESPACHADO se
   veía de otro tamaño que PENDIENTE. */
.mud-chip-outlined.mud-chip-color-primary {
    border-color: var(--adv-primary) !important;
    color: var(--adv-primary) !important;
    background: var(--adv-primary-light) !important;
    font-size: 11px !important;
    height: 22px !important;
    font-weight: 500 !important;
}
.mud-chip-outlined.mud-chip-color-default {
    border-color: #D7DCE1 !important;
    color: var(--adv-text-sec) !important;
    background: #F4F6F7 !important;
    font-size: 11px !important;
    height: 22px !important;
}

/* ── Inputs ────────────────────────────────────────────────── */
.mud-input-outlined .mud-notched-outline { border-radius: var(--adv-radius) !important; }
.mud-input-label { font-size: 12.5px !important; }
.mud-input { font-size: 12.5px !important; }

.mud-input-outlined input:read-only,
.mud-input-outlined textarea:read-only {
    background-color: #F1F3F4 !important;
    color: var(--adv-text-sec) !important;
}

/* ── Grillas de formulario / filtros (MudGrid) ─────────────────
   Casi ninguna pantalla fija Spacing en <MudGrid>, así que heredan
   el default de MudBlazor (Spacing=6 → 24px de gutter), lo que deja
   los campos de captura y los filtros de listados demasiado separados.
   Se unifica a un gutter compacto (8px, equivalente a Spacing=2) para
   Spacing 3 a 6 (incluye los Home de módulo, que usan Spacing=3 para
   sus tiles); Spacing 0/1/2 ya son suficientemente compactos y quedan
   sin tocar. ── */
.mud-grid-spacing-xs-3 > .mud-grid-item,
.mud-grid-spacing-xs-4 > .mud-grid-item,
.mud-grid-spacing-xs-5 > .mud-grid-item,
.mud-grid-spacing-xs-6 > .mud-grid-item {
    padding-left: 8px !important;
    padding-top: 8px !important;
}
/* MudBlazor compensa ese padding con un margin-left negativo + width extra
   en el contenedor (ej. spacing-xs-6 trae margin-left:-24px de fábrica) —
   hay que igualar ambos al mismo 8px o el contenido queda corrido a la
   izquierda y se corta contra el borde del diálogo/página. */
.mud-grid-spacing-xs-3,
.mud-grid-spacing-xs-4,
.mud-grid-spacing-xs-5,
.mud-grid-spacing-xs-6 {
    width: calc(100% + 8px) !important;
    margin-left: -8px !important;
    margin-top: -8px !important;
}

/* ── Opciones de combos / autocomplete (popover) ──────────────
   El texto ya salía en 13px (heredado de .mud-typography-body1 más abajo),
   pero cada fila usaba el padding/alto de Material Design por defecto
   (8px 16px, ~43px de alto) — se sentía "grande" comparado con la
   densidad del resto de las pantallas (filas de tabla ~9px, inputs 32px). */
.mud-list-item {
    min-height: 32px !important;
    padding: 6px 12px !important;
}
.mud-list-item .mud-list-item-text .mud-typography {
    font-size: 12px !important;
}
.mud-list-item .mud-icon-root { font-size: 18px !important; }

/* ── Breadcrumbs ───────────────────────────────────────────────
   Compactos a propósito: son una ayuda de ubicación, no contenido.
   Antes se comían ~40px de alto en cada listado, que es justo lo que
   falta para que una tabla entre sin scroll en 1366x768. Se dejan
   como una línea fina de 10.5px pegada al título.
   Para ocultarlos por completo en todo el sistema basta con poner
   `display: none` en la primera regla. */
/* El breadcrumb va CENTRADO en la banda que queda entre el menú azul y el panel de la
   opción. La banda mide 44px y se arma así:
       .adv-main-content  padding-top  12px
       .mud-container     padding-top  16px   -> el breadcrumb arrancaba en 28px
       breadcrumb                      14px
       margen inferior                  2px   -> quedaba pegado al panel
   Para centrarlo sin mover el panel (la altura total tiene que seguir siendo 44px) se sube
   13px con margin-top negativo y se compensa abajo: 15px arriba + 14px + 15px abajo = 44px. */
.mud-breadcrumbs {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    padding: 0 !important;
    margin: -13px 0 15px 0 !important;
    min-height: 0 !important;
}
.mud-breadcrumbs li { padding: 0 !important; }
.mud-breadcrumb-item { color: var(--adv-text-sec) !important; }
.mud-breadcrumb-item:last-child { color: var(--adv-text) !important; font-weight: 500 !important; }
.mud-breadcrumb-separator { color: #c0c8d4 !important; margin: 0 4px !important; }

/* ── Dialog ────────────────────────────────────────────────── */
.mud-dialog {
    border-radius: var(--adv-radius-lg) !important;
    overflow: hidden !important;
}
.mud-dialog::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--adv-accent);
}
.mud-dialog-title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-bottom: 0.5px solid var(--adv-border) !important;
    padding: 13px 20px !important;
}
.mud-dialog-content { padding: 16px 20px !important; }
.mud-dialog-actions {
    padding: 10px 20px 14px !important;
    border-top: 0.5px solid var(--adv-border) !important;
}

/* ── Tabs ──────────────────────────────────────────────────── */
.mud-tabs-tabbar {
    background: #FFFFFF !important;
    border-bottom: 2px solid var(--adv-accent) !important;
    padding-bottom: 0 !important;
}
.mud-tab {
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: var(--adv-text-sec) !important;
    min-width: 120px !important;
    padding: 10px 18px !important;
    text-transform: none !important;
}
.mud-tab.mud-tab-active {
    color: #FFFFFF !important;
    background: var(--adv-primary) !important;
    border-radius: 6px 6px 0 0 !important;
    font-weight: 700 !important;
}
.mud-tab-slider {
    display: none !important;
}

/* ── Tipografía ────────────────────────────────────────────── */
.mud-typography-h5 { font-size: 15px !important; font-weight: 700 !important; color: var(--adv-text) !important; }
.mud-typography-h6 { font-size: 13.5px !important; font-weight: 600 !important; }
.mud-typography-body1 { font-size: 12.5px !important; }
.mud-typography-body2 { font-size: 11.5px !important; }
.mud-typography-caption { font-size: 11px !important; }
.mud-typography-subtitle2 { font-size: 11.5px !important; font-weight: 500 !important; }

/* ── Paginador / Snackbar ──────────────────────────────────── */
.mud-table-pagination { font-size: 11px !important; color: var(--adv-text-sec) !important; }
.mud-snackbar { font-size: 11.5px !important; border-radius: var(--adv-radius) !important; }

/* ── Scroll ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,64,128,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,64,128,0.4); }

/* ── Focus ─────────────────────────────────────────────────── */
.mud-button:focus-visible,
.mud-icon-button:focus-visible {
    outline: 2px solid var(--adv-primary) !important;
    outline-offset: 2px !important;
}

/* ── Menú superior con submenú desplegable (estilo Menu.png) ─── */
.adv-menu-dropdown {
    position: relative;
    display: inline-block;
}
/* Los paneles están SIEMPRE en el DOM y se prenden con una clase (advMenu.js).
   Antes se renderizaban desde el servidor según el estado del componente, así
   que abrir un módulo costaba un viaje por SignalR: en producción eso se veía
   como una recarga y el segundo clic impaciente volvía a cerrarlo. */
.adv-menu-dropdown-panel { display: none; }
.adv-menu-dropdown.adv-abierto > .adv-menu-dropdown-panel { display: block; }
.adv-menu-flyout-panel { display: none; }
.adv-menu-dropdown.adv-abierto > .adv-menu-flyout-panel.adv-flyout-visible { display: block; }

.adv-menu-dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    background: var(--adv-surface);
    border: 1px solid var(--adv-border);
    border-top: 3px solid var(--adv-accent);
    border-radius: 0 0 var(--adv-radius) var(--adv-radius);
    box-shadow: 0 10px 28px rgba(16,24,32,0.14);
    z-index: 1300;
    padding: 6px 0;
}
.adv-menu-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    font-size: 12.5px;
    color: var(--adv-text);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.adv-menu-dropdown-item:hover {
    background: var(--adv-primary-light);
    color: var(--adv-primary);
}
.adv-menu-dropdown-item .mud-icon-root { font-size: 17px; color: #A9B2BA; }
.adv-menu-dropdown-item:hover .mud-icon-root { color: var(--adv-primary); }
/* ── Submenú de tercer nivel: flotante al costado (hover) ───────── */
/* Hermano de .adv-menu-dropdown-panel (no hijo): si fuera hijo, el
   overflow-y:auto del panel principal le recorta el "position:absolute"
   por la regla CSS que fuerza overflow-x a auto cuando overflow-y no es visible. */
.adv-menu-flyout-trigger {
    justify-content: space-between;
}
.adv-menu-flyout-arrow {
    margin-left: auto;
}
.adv-menu-flyout-panel {
    position: absolute;
    top: 100%;
    left: 280px;
    min-width: 240px;
    /* El "left: 280px" es sólo el valor de arranque antes de que corra JS (evita
       un panel sin posición en el primer instante). La posición real la fija
       advMenu.js con left/right inline cada vez que se abre, midiendo el ancho
       real del panel principal ya renderizado — así el flyout entra completo
       aunque el panel principal + flyout juntos no quepan del lado que abrió
       el panel principal. */
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    background: var(--adv-surface);
    border: 1px solid var(--adv-border);
    border-top: 3px solid var(--adv-accent);
    border-radius: var(--adv-radius);
    box-shadow: 0 10px 28px rgba(16,24,32,0.14);
    z-index: 1400;
    padding: 6px 0;
}

/* Variante "abre a la izquierda" del panel principal: advMenu.js la prende o
   apaga en el momento de abrir cada panel, según entre completo a la derecha
   del botón o no (mide el ancho real contra lo que queda libre de ventana).
   No es una regla fija por módulo: el mismo botón puede abrir a la derecha
   con la ventana ancha y a la izquierda si se angosta. */
.adv-menu-dropdown.adv-menu-abre-izquierda .adv-menu-dropdown-panel {
    left: auto;
    right: 0;
    border-radius: 0 0 var(--adv-radius) var(--adv-radius);
}

/* El renglón "volver" del tercer nivel sólo tiene sentido cuando el submenú
   reemplaza al panel del módulo, o sea en pantalla angosta. */
.adv-menu-flyout-volver { display: none; }

/* ── Tablet / pantalla angosta ─────────────────────────────────
   Con la barra de módulos envuelta en dos filas, anclar los paneles al botón
   dejaba el submenú fuera del viewport (el último módulo cae a la izquierda de
   la segunda fila pero abre hacia la izquierda) y el tercer nivel, que sólo
   respondía al hover, no había forma de abrirlo con el dedo.
   Acá los dos paneles pasan a ocupar el ancho de la pantalla colgando de la
   propia barra, y el tercer nivel ocupa el lugar del panel del módulo con un
   renglón para volver. */
@media (max-width: 1200px) {
    /* El panel se ancla a la barra (sticky = contexto de posicionamiento), no al botón. */
    .adv-menu-dropdown { position: static; }

    .adv-menu-dropdown-panel,
    .adv-menu-dropdown.adv-menu-abre-izquierda .adv-menu-dropdown-panel,
    .adv-menu-flyout-panel,
    .adv-menu-dropdown.adv-menu-abre-izquierda .adv-menu-flyout-panel {
        left: 8px;
        right: 8px;
        width: auto;
        min-width: 0;
        max-height: calc(100vh - 160px);
        border-radius: 0 0 var(--adv-radius) var(--adv-radius);
    }

    /* El tercer nivel se abre en el lugar del panel del módulo. */
    .adv-menu-flyout-panel {
        top: 100% !important;
    }
    .adv-menu-dropdown.adv-menu-con-flyout .adv-menu-dropdown-panel {
        display: none;
    }

    .adv-menu-flyout-volver {
        display: flex;
        font-weight: 600;
        color: var(--adv-primary);
        border-bottom: 1px solid var(--adv-border);
    }

    /* Renglones más altos: se tocan con el dedo, no con el puntero. */
    .adv-menu-dropdown-item { padding: 12px 18px; }
}

/* ── CRM: barra única de métricas + filtros ─────────────────
   Métricas y filtros comparten una sola fila. Los combos se dimensionan
   al contenido en vez de reservar un ancho fijo generoso, y el resumen
   se lee en línea: lo que antes eran dos bandas ahora es una. */
.adv-crm-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.adv-crm-barra-titulo { margin-right: 4px; }

.adv-crm-metricas {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
}
/* Cada métrica es una ficha independiente. El color se define por variable
   para que la etiqueta, el valor, el borde y el fondo salgan del mismo tono
   y no haya que repetirlo en cuatro reglas. */
.adv-crm-metrica {
    --m-color: var(--adv-primary);
    --m-fondo: var(--adv-primary-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px 12px 5px 11px;
    border: 1px solid var(--adv-border);
    border-left: 3px solid var(--m-color);
    border-radius: var(--adv-radius);
    background: var(--m-fondo);
    line-height: 1.25;
}
.adv-crm-metrica .k {
    font-size: 9.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--m-color);
    opacity: .85;
}
.adv-crm-metrica .v {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--m-color);
    font-variant-numeric: tabular-nums;
}

/* Azul institucional: el volumen total en juego. */
.adv-crm-metrica.m-bruto    { --m-color: #004080; --m-fondo: #E9F0F8; }
/* Turquesa: lo que realmente se espera cerrar, distinto del bruto. */
.adv-crm-metrica.m-forecast { --m-color: #0D7A70; --m-fondo: #E4F4F2; }
/* Índigo: es un conteo, no dinero. */
.adv-crm-metrica.m-abiertas { --m-color: #4F46E5; --m-fondo: #ECEBFC; }
/* Semánticos: rojo si hay cartera sin seguimiento, verde si no queda ninguna. */
.adv-crm-metrica.m-alerta   { --m-color: #C0392B; --m-fondo: #FCEBE9; }
.adv-crm-metrica.m-bien     { --m-color: #1E8E5A; --m-fondo: #E6F4EC; }

.adv-crm-filtro-texto { width: 190px; }
.adv-crm-filtro-combo { width: 155px; }

@media (max-width: 1100px) {
    .adv-crm-metricas { order: 3; width: 100%; }
}

/* ── CRM: tarjetas del tablero Kanban ───────────────────────
   El contenido se apila con gap, no con líneas pegadas: en una columna
   estrecha el título de la oportunidad es lo que se lee al escanear, y
   necesita separarse del número de arriba y del cliente de abajo. */
.adv-crm-col-encabezado {
    padding: 2px 0 8px 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--adv-border);
}
.adv-crm-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 11px 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}
.adv-crm-card:hover {
    box-shadow: 0 4px 14px rgba(16,24,32,.13);
    transform: translateY(-1px);
}
.adv-crm-card-alto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.adv-crm-card-numero {
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--adv-text-sec);
}
.adv-crm-card-titulo {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--adv-text);
}
.adv-crm-card-cliente {
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--adv-text-sec);
}
/* Separador fino antes del importe: divide "de qué se trata" de "cuánto vale". */
.adv-crm-card-importe {
    padding-top: 7px;
    border-top: 1px solid var(--adv-border);
}
.adv-crm-card-monto {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--adv-text);
}
.adv-crm-card-prob {
    font-size: 11.5px;
    color: var(--adv-text-sec);
}
.adv-crm-card-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.adv-crm-card-pie {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--adv-text-sec);
}
.adv-crm-card-vendedor {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adv-crm-card-fecha {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
.adv-crm-card-sin-actividad { color: var(--adv-danger, #C0392B); font-weight: 600; }

/* ── CRM: pegado de capturas y miniaturas del hilo ──────────── */
.adv-crm-pegar {
    border: 1px dashed var(--adv-border);
    border-radius: var(--adv-radius);
    padding: 8px 10px;
    background: var(--adv-bg);
    outline: none;
}
.adv-crm-pegar:focus-within {
    border-color: var(--adv-primary);
    background: var(--adv-surface);
}
.adv-crm-elegir {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--adv-primary);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--adv-radius);
}
.adv-crm-elegir:hover { background: var(--adv-primary-soft, rgba(0,64,128,0.08)); }
.adv-crm-miniaturas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.adv-crm-miniatura {
    position: relative;
    width: 96px;
    height: 96px;
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-radius);
    overflow: hidden;
    background: var(--adv-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}
.adv-crm-miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.adv-crm-miniatura-quitar {
    position: absolute !important;
    top: 2px;
    right: 2px;
    background: rgba(255,255,255,0.85) !important;
}
/* En el hilo de bitácora la miniatura se amplía al hacer clic. */
.adv-crm-miniatura-hilo { cursor: zoom-in; }
.adv-crm-miniatura-hilo:hover { border-color: var(--adv-primary); }

/* ── Encabezado de listado (icono + título + búsqueda + acción) ── */
.adv-listado-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    /* Aire a los lados: sin esto el último botón de acción queda pegado al borde del panel. */
    padding: 2px 8px;
}

/* Los filtros de los listados reservaban 170–190px cada uno y quedaban con
   la mitad del ancho vacío, empujando el botón de acción a una segunda
   línea en pantallas de 1366px. Se acotan aquí, en un solo sitio, en vez de
   corregir el `min-width` inline de cada una de las pantallas.
   Van con !important porque compiten contra estilos en línea.
   Los selectores de fecha quedan fuera: necesitan su ancho para dd/mm/yyyy. */
.adv-listado-header .mud-select {
    width: 158px !important;
    min-width: 0 !important;
}
.adv-listado-header .adv-search-box {
    width: 230px !important;
    max-width: 230px !important;
}
/* El desplegable sí se muestra completo, aunque el campo vaya recortado. */
.adv-listado-header .mud-select .mud-input-slot {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.adv-listado-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--adv-text);
}
/* En los reportes el panel va a media pantalla, y un título largo («Reporte de Cuentas por
   Cobrar Vencimiento») empujaba el botón Excel a una segunda línea. El título cede: se parte
   en dos renglones antes que separar los botones de acción, que van siempre juntos. */
.adv-reporte-panel .adv-listado-header {
    flex-wrap: nowrap;
}
.adv-reporte-panel .adv-listado-header > .adv-listado-titulo {
    flex: 0 1 auto;
    min-width: 0;
}
.adv-reporte-panel .adv-listado-header > .mud-spacer {
    flex: 1 1 0;
    min-width: 8px;
}
.adv-listado-titulo .mud-icon-root {
    color: var(--adv-primary);
    font-size: 22px;
}

/* ── Miniatura de foto en columna de listado ───────────────── */
.adv-listado-foto-mini {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--adv-border);
    display: block;
}
.adv-listado-foto-mini-placeholder {
    width: 32px;
    height: 32px;
    color: #C0C8D4 !important;
    font-size: 20px !important;
}

/* Columna «Sunat» de los listados que emiten documentos electrónicos: los .png son
   los del sistema anterior y ya vienen a 32px, así que se muestran a tamaño real. */
.adv-icono-sunat {
    width: 26px;
    height: 26px;
    display: block;
}

/* El ícono abre la respuesta del OSE, así que tiene que verse que se puede tocar:
   sin esto el usuario nunca descubre que ahí está el motivo del rechazo. */
.adv-icono-sunat-click {
    cursor: pointer;
    transition: transform .12s ease;
}
.adv-icono-sunat-click:hover { transform: scale(1.15); }

/* ── Buscador de productos (AdvBuscadorProducto) ─────────────────────────
   Barra de captura de las pantallas de movimiento: selector de modo + campo
   ancho + panel de resultados con stock y último costo. */
.adv-buscador-prod { position: relative; }

.adv-buscador-prod-barra {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}
/* El campo no se estira: con 30% alcanza de sobra para escribir un código o unas
   letras de la descripción, y los dos botones quedan pegados a su derecha. */
.adv-buscador-prod-campo {
    flex: 0 0 30%;
    max-width: 30%;
    min-width: 180px;
    margin: 0 !important;
}
/* Catálogo y carga masiva: iconos chicos, para que el campo se quede con el ancho. */
.adv-buscador-prod-accion.mud-icon-button {
    flex: none;
    min-width: 34px;
    width: 34px;
    height: 34px;
    padding: 5px;
}
.adv-buscador-prod-accion .mud-icon-root { font-size: 18px; }

/* Panel de resultados. Va en el flujo, no flotando: dentro de un diálogo el
   contenido tiene su propio scroll y un panel absoluto quedaba cortado por el
   borde. Empujar la grilla unos píxeles es preferible a no poder leer la lista. */
.adv-buscador-prod-panel {
    margin-top: 4px;
    background: var(--adv-surface);
    border: 1px solid #C3CDDA;
    border-radius: var(--adv-radius);
    box-shadow: 0 4px 14px rgba(10, 30, 60, .10);
    overflow: hidden;
}

.adv-buscador-prod-fila {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 60px 96px 104px;
    gap: 10px;
    align-items: center;
    padding: 7px 12px;
    border-bottom: 1px solid #EDF1F6;
    font-size: 13px;
    cursor: pointer;
}
/* Sin la columna de costo (Salidas y Guías) la descripción se queda con ese espacio. */
.adv-buscador-prod-panel .adv-buscador-prod-fila:has(> :nth-child(4):last-child) {
    grid-template-columns: 112px minmax(0, 1fr) 60px 96px;
}
.adv-buscador-prod-fila:last-of-type { border-bottom: 0; }
.adv-buscador-prod-fila.hl { background: var(--adv-primary-light); }
.adv-buscador-prod-fila .cod {
    font-weight: 600;
    color: var(--adv-primary);
    font-variant-numeric: tabular-nums;
}
.adv-buscador-prod-fila .dsc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adv-buscador-prod-fila .uni { color: var(--adv-text-sec); font-size: 12px; }
.adv-buscador-prod-fila .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Producto dado de baja: se lista para que se vea que el codigo existe, pero apagado y con su
   etiqueta, y al elegirlo el buscador avisa en vez de agregarlo. */
.adv-buscador-prod-fila.inactivo { opacity: .55; cursor: not-allowed; }
.adv-buscador-prod-fila.inactivo .cod { color: var(--adv-text-sec); }
.adv-buscador-prod-inactivo {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--adv-warning, #F9A216);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--adv-warning, #F9A216);
    vertical-align: 1px;
}

.adv-buscador-prod-cab {
    cursor: default;
    background: var(--adv-bg);
    border-bottom: 1px solid var(--adv-border);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--adv-text-sec);
}
.adv-buscador-prod-cab .num { text-align: right; }

.adv-buscador-prod-stock {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
}
.adv-buscador-prod-stock.ok { background: #E6F4EC; color: #1E8E5A; }
.adv-buscador-prod-stock.bad { background: var(--adv-danger-bg); color: var(--adv-danger); }

.adv-buscador-prod-vacio,
.adv-buscador-prod-pie {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--adv-text-sec);
}
.adv-buscador-prod-pie {
    background: var(--adv-bg);
    border-top: 1px solid #EDF1F6;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.adv-buscador-prod-pie kbd {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
    border: 1px solid #C3CDDA;
    border-bottom-width: 2px;
    border-radius: 3px;
    padding: 0 4px;
    background: var(--adv-surface);
    color: var(--adv-text-sec);
}

/* ── Sección dentro de un formulario ─────────────────────────────────────
   Agrupa un conjunto de campos que se leen juntos (ej. los datos de transporte
   de la Guía de Remisión) sobre un fondo propio, para separarlos de la cabecera
   sin recurrir a otra pantalla ni a un tab. */
.adv-seccion {
    background: var(--adv-bg);
    border: 1px solid var(--adv-border);
    border-left: 3px solid var(--adv-primary);
    border-radius: var(--adv-radius);
    padding: 12px 14px 14px;
}
.adv-seccion-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--adv-primary);
    margin-bottom: 10px;
}
.adv-seccion-titulo .mud-icon-root { font-size: 17px; }

/* Título que pliega la sección: el resumen y la flecha van a la derecha. */
.adv-seccion-titulo-click { cursor: pointer; user-select: none; }
.adv-seccion-titulo-click:focus-visible { outline: 2px solid var(--adv-accent); outline-offset: 2px; }
.adv-seccion-titulo-click > .mud-icon-root:last-child { margin-left: auto; }
.adv-seccion-resumen {
    margin-left: 10px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    font-size: 12px;
    color: var(--adv-text-sec);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Con resumen, la flecha se apoya en él y no en el borde. */
.adv-seccion-resumen:not(:empty) + .mud-icon-root { margin-left: 8px !important; }

/* Campos en cuadrícula de columnas iguales: los de cada fila caen exactamente
   debajo de los de la anterior. Con MudGrid + MudItem de anchos distintos las
   filas quedaban desfasadas y costaba recorrer el formulario con la vista. */
.adv-campos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: start;
}
@media (max-width: 1100px) {
    .adv-campos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .adv-campos-grid { grid-template-columns: minmax(0, 1fr); }
}
.adv-campos-grid > * { margin: 0 !important; min-width: 0; }
/* Las casillas no llevan la altura de un campo: se alinean con su fila. */
.adv-campos-grid > .mud-input-control-boolean-input { align-self: center; }

/* El transporte se distingue con el ámbar de la marca: es el bloque que cambia
   según el tipo de traslado y conviene que salte a la vista. */
.adv-seccion-transporte {
    background: var(--adv-accent-light);
    border-left-color: var(--adv-accent);
}
.adv-seccion-transporte .adv-seccion-titulo { color: #B77400; }
/* Los campos van en blanco para que se lean sobre el fondo de la sección. */
.adv-seccion-transporte .mud-input.mud-input-outlined { background: var(--adv-surface); }

/* Campo + botón en la misma celda de un formulario (ej. N° Orden + Importar). */
.adv-form-inline {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.adv-form-inline > *:first-child { flex: 1 1 auto; min-width: 0; }
/* Sólo el botón propio de la celda, no el de limpiar que el autocomplete lleva dentro.
   Los campos con Label arrancan 8px más abajo que el borde de su contenedor (mismo
   desfase que en los buscadores de los listados), así que el botón necesita ese
   margen para quedar a la altura de la caja del campo. */
.adv-form-inline > .mud-button-root {
    flex: none;
    margin-top: 8px;
    height: 36px;
}

/* ── Grilla de detalle de los diálogos de movimiento ─────────────────────
   Letra más chica que la de un listado: son muchas columnas dentro de un
   diálogo, y las acciones de la fila van en una sola línea. */
/* MudSimpleTable fija el tamaño de celda con más peso en la cascada: hace falta !important. */
table.adv-grid-detalle td,
table.adv-grid-detalle th,
.adv-grid-detalle td,
.adv-grid-detalle th {
    font-size: 11px !important;
    padding: 3px 8px !important;
}
/* MudSimpleTable trae sus propios estilos de encabezado con más peso en la cascada. */
table.adv-grid-detalle thead th,
.adv-grid-detalle thead th {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase !important;
    color: var(--adv-text-sec) !important;
    white-space: nowrap;
    /* Línea que separa los títulos de las filas. */
    border-bottom: 2px solid var(--adv-primary) !important;
}
.adv-grid-detalle td { white-space: nowrap; }
/* La observación/comentario de la línea (el texto chico bajo el producto en pedidos,
   facturas, notas, cotizaciones y órdenes de compra) sí parte en varias líneas: con
   nowrap una observación larga estiraba la columna y el grid se corría a la derecha. */
.adv-grid-detalle td .mud-typography-caption.d-block {
    white-space: pre-line;   /* parte las líneas y respeta los Enter del usuario */
    overflow-wrap: anywhere;
    min-width: 220px;
    max-width: 380px;
}

.adv-grid-detalle-acciones {
    width: 74px;
    white-space: nowrap !important;
}
.adv-grid-detalle-acciones .mud-icon-button {
    display: inline-flex;
    min-width: 28px;
    width: 28px;
    height: 28px;
    padding: 4px;
}
.adv-grid-detalle-acciones .mud-icon-root { font-size: 17px; }

/* Botón «Agregar línea» de un detalle dentro de un formulario: mismo alto y ancho mínimo que
   el resto de los botones de acción (la regla general sólo alcanza a la cabecera del listado y
   a las acciones del diálogo). El flex-shrink es lo que lo deja en un solo renglón: al lado de
   un texto largo el botón se encogía y el caption se partía en dos líneas. */
.adv-detalle-agregar {
    min-width: 120px;
    height: 36px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Modificar edita en la propia fila: la celda pasa a tener un campo, no un panel aparte. */
.adv-grid-detalle-editando > td { background: var(--adv-accent-light); }
.adv-grid-detalle-input {
    margin: 0 !important;
    width: 92px;
}
.adv-grid-detalle-input .mud-input-slot {
    font-size: 11px !important;
    text-align: right;
    padding: 2px 6px !important;
}
.adv-grid-detalle-input .mud-input.mud-input-outlined { min-height: 26px; height: 26px; }
.adv-grid-detalle-input .mud-input-outlined-border { border-color: var(--adv-primary); }

/* Variantes de la celda editable: los números van a la derecha (el ancho base de 92px);
   el texto se lee a la izquierda y necesita más sitio según el campo. */
.adv-grid-detalle-texto { width: 130px; }
.adv-grid-detalle-largo { width: 190px; }
.adv-grid-detalle-fecha { width: 132px; }
.adv-grid-detalle-texto .mud-input-slot,
.adv-grid-detalle-largo .mud-input-slot,
.adv-grid-detalle-fecha .mud-input-slot { text-align: left; }
/* El icono del calendario dentro de la celda no puede empujar la fila. */
.adv-grid-detalle-fecha .mud-input-adornment-end .mud-icon-root { font-size: 16px; }

/* El desplegable de N° Orden no puede tomar el ancho del campo: cada opción lleva
   número, proveedor y fecha, y con 175px el proveedor no se lee. */
.adv-popover-orden .mud-list {
    min-width: 440px;
}

/* Opción del combo de N° Orden: número, proveedor y fecha en una línea. */
.adv-opcion-orden {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) 88px;
    gap: 10px;
    align-items: center;
    width: 100%;
    font-size: 13px;
}
.adv-opcion-orden .cod {
    font-weight: 600;
    color: var(--adv-primary);
    font-variant-numeric: tabular-nums;
}
.adv-opcion-orden .dsc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adv-opcion-orden .fec {
    text-align: right;
    color: var(--adv-text-sec);
    font-variant-numeric: tabular-nums;
}

/* ══ Color de las acciones de la fila ═══════════════════════════════
   Siete colores fijos, uno por lo que la acción le hace al documento, y NINGUNA
   acción en gris. La familia no la elige cada pantalla: la deduce del título y
   del ícono AdvAcciones.ClaseDe, así la misma acción se ve igual en todo el
   sistema y una pantalla nueva la hereda sin acordarse de nada.

     adv-action-edit       #004080  azul de marca · toca el dato
     adv-action-delete     #E5484D  rojo          · saca de circulación
     adv-action-pdf        #E5484D  rojo          · imprime, sale un PDF
     adv-action-excel      #1E8E5A  verde         · sale un Excel
     adv-action-firme      #1E8E5A  verde         · deja el documento en firme
     adv-action-enviar     #2563EB  azul          · sale del sistema
     adv-action-ver        #0F766E  verde azulado · sólo mira
     adv-action-proceso    #7C3AED  violeta       · corre un proceso
     adv-action-pendiente  #F9A216  ámbar         · falta algo (estado de la fila)

   El !important es el que le gana al color que MudBlazor le pone al ícono desde
   el tema y al Color que alguna pantalla haya puesto a mano.

   El único gris que queda no es una acción: es la flecha que abre el menú cuando
   la fila tiene más iconos de los que entran. */

.adv-action-edit      .mud-icon-root { color: #004080 !important; }
.adv-action-delete    .mud-icon-root,
.adv-action-pdf       .mud-icon-root,
.adv-action-imprimir  .mud-icon-root { color: #E5484D !important; }
.adv-action-excel     .mud-icon-root,
.adv-action-firme     .mud-icon-root { color: #1E8E5A !important; }
.adv-action-enviar    .mud-icon-root { color: #2563EB !important; }
.adv-action-ver       .mud-icon-root { color: #0F766E !important; }
.adv-action-proceso   .mud-icon-root { color: #7C3AED !important; }
.adv-action-pendiente .mud-icon-root { color: #F9A216 !important; }

/* Los dos pares que dependen del ESTADO de la fila, no de la acción: el lado
   cumplido va en verde —es el mismo «quedó en firme»— y el pendiente en ámbar.
   Además de cambiar de color cambian de ícono (ToggleOn / ToggleOff, candado
   abierto / cerrado), así el estado se entiende también impreso en blanco y
   negro y por quien no distingue bien los colores. */
.adv-action-candado-cerrado  .mud-icon-root,
.adv-action-toggle-activo    .mud-icon-root { color: #1E8E5A !important; }
.adv-action-candado-abierto  .mud-icon-root,
.adv-action-toggle-inactivo  .mud-icon-root,
.adv-action-toggle           .mud-icon-root { color: #F9A216 !important; }

/* El gris de la flecha «más acciones». Los :not() NO son adorno: MudBlazor pinta
   el ícono poniéndole al BOTÓN una clase «mud-<color>-text», y este selector le
   ganaría por especificidad, dejando gris cualquier acción a la que la pantalla
   le haya puesto un Color. */
.adv-acciones-fila .mud-icon-button:not([class*="adv-action-"]):not([class*="mud-primary-text"]):not([class*="mud-secondary-text"]):not([class*="mud-success-text"]):not([class*="mud-error-text"]):not([class*="mud-warning-text"]):not([class*="mud-info-text"]) .mud-icon-root {
    color: #64748B;
}
.adv-acciones-fila .mud-icon-button:not([class*="adv-action-"]):hover .mud-icon-root { color: #2563EB; }

/* ── Al pasar el mouse ──────────────────────────────────────────────
   La celda toma el celeste de la fila y el ícono se oscurece DENTRO de su propio
   color. No se lleva todo al azul: un «Anular» que se vuelve azul deja de avisar
   que es destructivo justo cuando el usuario está por hacerle clic. */
.adv-acciones-fila [class*="adv-action-"]:hover,
.adv-acciones-menu [class*="adv-action-"]:hover {
    background: var(--adv-primary-light) !important;
}

.adv-action-edit:hover      .mud-icon-root { color: #002F5F !important; }
.adv-action-delete:hover    .mud-icon-root,
.adv-action-pdf:hover       .mud-icon-root,
.adv-action-imprimir:hover  .mud-icon-root { color: #B91C1C !important; }
.adv-action-excel:hover     .mud-icon-root,
.adv-action-firme:hover     .mud-icon-root { color: #16653C !important; }
.adv-action-enviar:hover    .mud-icon-root { color: #1D4ED8 !important; }
.adv-action-ver:hover       .mud-icon-root { color: #115E59 !important; }
.adv-action-proceso:hover   .mud-icon-root { color: #5B21B6 !important; }
.adv-action-pendiente:hover .mud-icon-root { color: #C77E10 !important; }

.adv-action-candado-cerrado:hover .mud-icon-root,
.adv-action-toggle-activo:hover   .mud-icon-root { color: #16653C !important; }
.adv-action-candado-abierto:hover .mud-icon-root,
.adv-action-toggle-inactivo:hover .mud-icon-root,
.adv-action-toggle:hover          .mud-icon-root { color: #C77E10 !important; }

/* Deshabilitada (p. ej. ventana en modo consulta): el ícono va en el gris de
   MudBlazor; si conservara su color parecería que todavía se puede usar. */
[class*="adv-action-"]:disabled .mud-icon-root,
[class*="adv-action-"].mud-disabled .mud-icon-root { color: rgba(0, 0, 0, 0.26) !important; }

/* ── Fila anulada de un listado de movimientos ────────────────────
   Equivale al conditionalFormatting="MVSts = 'A':Danger:" de WorkWithPlus,
   que en el legado pinta la fila entera, no solo el chip de Estado. */
/* ── Color de fila según el estado del documento ───────────────
   El listado del sistema anterior pinta la fila entera con el color del estado
   (Grid.Load asigna WWColumnDanger / WWColumnInfo a cada columna): anulado en
   rojo y pendiente de autorización en celeste. Acá se resuelve con una clase
   por fila (RowClassFunc del MudTable) en lugar de columna por columna. */
/* Los tres tonos son los de la propuesta de estilos (D:\Colores.jpeg): son un punto más
   claros que los que había, para que el texto de la fila se siga leyendo cuando además
   está seleccionada o con el mouse encima. */
.adv-row-anulada td { color: var(--adv-danger) !important; background: #FEF2F2 !important; }
.adv-row-porautorizar td { background: var(--adv-primary-light) !important; }
/* Póliza de importación ya cerrada: el listado original la pinta en verde (WWColumnSuccess). */
.adv-row-cerrada td { background: #F0FDF4 !important; }

/* ── Los dos estados que agrega la propuesta ──────────────────────
   «Pendiente» en ámbar y «Emitida» en verde. Los usan los listados de documentos
   electrónicos, donde el estado que importa no es si el documento está activo sino qué
   contestó SUNAT: aceptado, pendiente de respuesta o dado de baja.

   El ámbar es #FFFBEB y no el --adv-warning-bg (#FEF3E2) de la marca: éste último es el
   fondo de los AVISOS, y usarlo también para filas hacía que una fila normal pareciera un
   aviso. Son dos roles distintos aunque los dos sean ámbar. */
.adv-row-pendiente td { background: #FFFBEB !important; }
.adv-row-emitida td { background: #F0FDF4 !important; }

.adv-row-pendiente td:first-child { border-left: 3px solid var(--adv-warning) !important; }
.adv-row-emitida td:first-child { border-left: 3px solid #1E8E5A !important; }

/* Barra de color al costado izquierdo de la fila, del color de su estado.

   El fondo solo no alcanza: son tonos muy claros —tienen que serlo, si no el texto de la
   fila no se lee— y en una pantalla con brillo bajo o un proyector las tres filas se ven
   blancas. La barra es un color pleno de 3px, así que se distingue igual, y además marca
   dónde empieza cada fila cuando el listado es largo.

   En el escritorio va en la primera celda y no en el <tr>: un borde puesto sobre la fila de
   una tabla no se dibuja de forma pareja entre navegadores. En celular es al revés —ver el
   bloque de abajo—, porque ahí la fila SÍ es un bloque. */
.adv-row-anulada td:first-child { border-left: 3px solid var(--adv-danger) !important; }
.adv-row-porautorizar td:first-child { border-left: 3px solid var(--adv-primary) !important; }
.adv-row-cerrada td:first-child { border-left: 3px solid #1E8E5A !important; }

/* En celular el listado se lee como fichas: la fila pasa a `display: block` y las celdas se
   apilan una debajo de otra. Ahí la barra tiene que ir en la FICHA ENTERA; dejada en la
   primera celda quedaría como una rayita de 3px al lado del primer renglón y nada más.
   Se apaga en la celda a propósito: la regla de arriba le gana por especificidad a la que
   borra los bordes de las celdas en celular, así que sin esto la rayita seguiría estando. */
@media (max-width: 767px) {
    .adv-row-anulada td:first-child,
    .adv-row-porautorizar td:first-child,
    .adv-row-cerrada td:first-child,
    .adv-row-pendiente td:first-child,
    .adv-row-emitida td:first-child { border-left: 0 !important; }

    .mud-table tbody tr.adv-row-anulada { border-left: 3px solid var(--adv-danger); }
    .mud-table tbody tr.adv-row-porautorizar { border-left: 3px solid var(--adv-primary); }
    .mud-table tbody tr.adv-row-cerrada { border-left: 3px solid #1E8E5A; }
    .mud-table tbody tr.adv-row-pendiente { border-left: 3px solid var(--adv-warning); }
    .mud-table tbody tr.adv-row-emitida { border-left: 3px solid #1E8E5A; }
}

/* ── Total que todavía no cierra (distribución de gastos de importación) ───── */
.adv-total-invalido { color: var(--adv-danger); }

/* ── Diálogo abierto en consulta (modo 'DSP' del sistema anterior) ───────────
   El contenido va dentro de un <fieldset disabled> para que ningún control se
   pueda tocar: es la única forma de bloquearlos todos de una sin repetir
   ReadOnly campo por campo. El fieldset nativo trae borde y márgenes propios
   —y pinta el texto de gris— así que acá se le quitan: la pantalla se ve igual
   que en edición, sólo que inerte. */
.adv-fieldset-plano { border: 0; padding: 0; margin: 0; min-width: 0; }
.adv-fieldset-plano:disabled { opacity: 1; }
.adv-fieldset-plano:disabled .mud-input-slot,
.adv-fieldset-plano:disabled .mud-input-root,
.adv-fieldset-plano:disabled .mud-select-input input {
    color: var(--adv-text) !important;
    cursor: default;
}

/* ── Filtro de fecha en listados (ancho fijo, sin heredarlo al popover) ── */
.adv-date-filter { width: 170px; flex: 0 0 auto; }
.adv-date-filter .mud-picker-container { min-width: 300px; }

/* ── El calendario nunca hereda el ancho del campo ──────────────────
   MudPicker vuelca el `Style` del componente en DOS lugares: el campo y el papel
   del calendario (PickerPaperStylename). O sea que un `Style="width:150px"` o un
   `Style="max-width:140px"` puestos para angostar el campo terminaban también en
   el popover; y como MudBlazor le da overflow-x:hidden a ese papel, el calendario
   —que mide ~254px— quedaba recortado: se veían tres columnas de días y el resto
   desaparecía. Se vio en Facturar Pedido › Cuotas, pero la trampa es de cualquier
   pantalla que angoste una fecha por Style (Canje de Letras, Documentos por Pagar).
   Acá se le devuelve al popover su ancho natural. El ancho del campo NO se pierde:
   ése lo aplica el mismo Style sobre .mud-picker, que este selector no toca. */
.mud-picker-popover-paper {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
}

/* ── Buscador de listado dentro de un rectángulo (listados.png) ─── */
.adv-search-box .mud-input-outlined .mud-notched-outline {
    border-color: var(--adv-border) !important;
    border-radius: var(--adv-radius) !important;
}
.adv-search-box .mud-input-outlined:hover .mud-notched-outline {
    border-color: var(--adv-primary) !important;
}
.adv-search-box .mud-input-slot { background: var(--adv-surface); }

/* ── Imagen clicable para subir Foto/Firma (input file superpuesto) ── */
.adv-upload-box { position: relative; cursor: pointer; }
/* AdvFileUpload: el <input type="file"> transparente va ENCIMA del botón, para que el clic del
   usuario caiga directo en él. Safari no abre el selector con un input.click() lanzado desde
   código (lo hacía el componente antes): en Mac/iPhone no se podía adjuntar. */
.adv-file-upload {
    position: relative;
    /* Mide lo que mide su botón. Las reglas de las filas de filtros (.adv-filtros) estiran a los
       hijos de la columna a todo el ancho, y con eso el botón de al lado quedaba fuera del panel. */
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content;
}
.adv-file-upload .adv-file-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}
.adv-file-upload .adv-file-upload-input::-webkit-file-upload-button { cursor: pointer; }
.adv-file-upload-deshabilitado .adv-file-upload-input {
    cursor: default;
    pointer-events: none;
}

.adv-upload-box input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.adv-upload-box:hover .adv-upload-hint { opacity: 1; }
.adv-upload-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,64,128,0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    transition: opacity .15s ease;
    border-radius: inherit;
    pointer-events: none;
}

/* ── Contenido de diálogo con alto fijo (no salta entre pestañas) ── */
.adv-dialog-fixed { min-height: 420px; }
.adv-dialog-fixed-sm { min-height: 260px; }
.adv-dialog-fixed-xs { min-height: 180px; }

/* ── Grupos colapsables de Plan de Cuentas (2 dígitos) ───────── */
.adv-plancuentas-group {
    background: var(--adv-primary-light) !important;
    cursor: pointer;
}

/* ── Árbol vertical de permisos (Seguridad › Perfiles de Accesos) ───────────
   Rediseñado el 2026-08-17 a partir de la maqueta aprobada. Antes eran tarjetas
   en columnas tipo masonry, cada una con su propio scroll: costaba seguir dónde
   terminaba un módulo y empezaba el otro. Ahora es una sola columna a todo el
   ancho, un módulo debajo del otro.

   El color propio de cada módulo entra por --adv-perm-color (lo fija el
   componente con un style inline) y se usa sólo en el riel izquierdo y en el
   título: alcanza para ubicarse sin volver la pantalla un arcoíris. ── */
/* La pantalla entera de Perfiles va a media pantalla y no a todo el ancho: con
   1600 px la casilla quedaba pegada al borde izquierdo y el contador al derecho,
   con medio metro de vacío en el medio. La cabecera, los campos y el botón
   Guardar comparten el mismo ancho que el árbol para que se lean como una sola
   columna. Es el mismo 50% que usan los reportes. */
.adv-perfil-editor {
    max-width: 50%;
    min-width: 620px;
}
@media (max-width: 1240px) {
    .adv-perfil-editor { max-width: 100%; min-width: 0; }
}

/* Buscador de opciones, arriba del árbol. */
.adv-perm-buscador {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.adv-perm-buscador-campo { max-width: 320px; }
.adv-perm-buscador-cuenta {
    font-size: 12px;
    color: var(--adv-text-sec);
    font-variant-numeric: tabular-nums;
}
.adv-perm-sin-datos {
    padding: 18px 16px;
    font-size: 13px;
    color: var(--adv-text-sec);
}

.adv-perm-arbol {
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-radius);
    overflow: hidden;
    background: var(--adv-surface);
}
@media (max-width: 1240px) {
    .adv-perm-arbol { max-width: 100%; min-width: 0; }
}

.adv-perm-modulo { border-bottom: 1px solid var(--adv-border); }
.adv-perm-modulo:last-child { border-bottom: 0; }

.adv-perm-modulo-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 12px;
    background: #FAFBFD;
    border-left: 4px solid var(--adv-perm-color, var(--adv-primary));
    cursor: pointer;
    user-select: none;
}
.adv-perm-modulo-cab:hover { background: var(--adv-primary-light); }

.adv-perm-modulo-nombre {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--adv-perm-color, var(--adv-primary));
}

/* El chevron apunta a la derecha cerrado y baja al abrir. */
.adv-perm-chevron.mud-icon-root {
    font-size: 18px;
    color: var(--adv-text-sec);
    flex-shrink: 0;
    transition: transform .15s ease;
}
.adv-perm-modulo.abierto > .adv-perm-modulo-cab > .adv-perm-chevron.mud-icon-root,
.adv-perm-grupo.abierto > .adv-perm-grupo-cab > .adv-perm-chevron.mud-icon-root {
    transform: rotate(90deg);
}
.adv-perm-chevron-hueco { width: 18px; flex-shrink: 0; }

/* Conteo de asignadas sobre el total de la rama. */
.adv-perm-cuenta {
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--adv-text-sec);
    background: var(--adv-surface);
    border: 1px solid var(--adv-border);
    border-radius: 999px;
    padding: 1px 9px;
    white-space: nowrap;
}
.adv-perm-cuenta.completo { color: #1B7A3D; border-color: #1B7A3D; }
.adv-perm-cuenta.vacio { color: #8A94A6; }
.adv-perm-cuenta-chica {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: #8A94A6;
    white-space: nowrap;
}

.adv-perm-modulo-cuerpo { padding: 2px 0 6px; }

/* ── Submódulo (2do nivel) y opciones (3er nivel) ── */
.adv-perm-grupo-cab,
.adv-perm-opcion {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 16px;
    min-height: 30px;
}
.adv-perm-grupo-cab { cursor: pointer; user-select: none; padding-left: 20px; }
.adv-perm-grupo-cab:hover,
.adv-perm-opcion:hover { background: #F4F7FB; }
.adv-perm-grupo-nombre { font-weight: 500; }

.adv-perm-nombre {
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--adv-text);
}

/* La sangría del tercer nivel se marca con una guía y no sólo con espacio: con
   sesenta opciones seguidas el ojo necesita la línea para no perder el nivel. */
.adv-perm-grupo-cuerpo .adv-perm-opcion {
    padding-left: 50px;
    position: relative;
}
.adv-perm-grupo-cuerpo .adv-perm-opcion::before {
    content: "";
    position: absolute;
    left: 32px;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--adv-border);
}
/* Opción de 2do nivel sin submódulo: alineada con los submódulos. */
.adv-perm-opcion-suelta { padding-left: 44px; }

.adv-perm-casilla.mud-checkbox { flex-shrink: 0; }
.adv-perm-casilla .mud-icon-button { padding: 3px; }

.adv-perm-acciones-toggle.mud-icon-button {
    padding: 2px;
    margin-left: 2px;
    color: var(--adv-text-sec);
    flex-shrink: 0;
}
.adv-perm-acciones-toggle .mud-icon-root { font-size: 16px; }

.adv-perm-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 14px;
    padding: 4px 12px 8px 78px;
    background: #FBFCFD;
}
.adv-perm-acciones .mud-checkbox { padding: 2px; }
.adv-perm-accion-label {
    font-size: 11.5px;
    color: var(--adv-text-sec);
    margin-left: -6px;
}

/* «Todas / Ninguna» del panel de acciones: enlaces, no botones — son un atajo
   dentro del panel y compiten con las casillas si se ven como botones. */
.adv-perm-acc-todas {
    border: none;
    background: none;
    padding: 0 2px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--adv-primary, #004080);
    cursor: pointer;
    text-decoration: underline;
}
.adv-perm-acc-todas:hover { color: #0a58ca; }

/* «3/5»: la opción está tildada pero le sacaron acciones. En rojo cuando no le
   queda ninguna, que es el caso en que la pantalla abre sin un solo botón. */
.adv-perm-acc-cuenta {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 8px;
    background: #EEF2F7;
    color: var(--adv-text-sec);
    flex-shrink: 0;
}
.adv-perm-acc-cuenta.sin { background: #FDECEA; color: #B3261E; }

/* Campos obligatorios: asterisco rojo (MudBlazor Required="true") */
.mud-input-required > .mud-input-control-input-container > .mud-input-label::after {
    color: #D32F2F;
    margin-left: 2px;
}
.mud-checkbox-required .mud-checkbox-label::after,
.mud-switch-required .mud-switch-label::after {
    content: "*";
    color: #D32F2F;
    margin-left: 2px;
}

/* ─────────────────────────────────────────────────────────────
   Pantallas de REPORTE (solo filtros + Imprimir/Excel, sin grilla).

   En el SIG legado (GeneXus/WorkWithPlus) estos paneles NO ocupan el
   ancho completo: el objeto `R_*` declara su `TableContent` con
   responsiveSizes [{"scale":"sm","rows":[[{"width":50}]]}], es decir
   50% del ancho a partir del breakpoint `sm`, con los filtros
   distribuidos en 2 columnas. Verificado en R_StockActual,
   R_ReporteKardexMensual, R_SaldosNegativos, R_StockActualxLotes,
   R_ReporteTomaInventarioFisico y R_ReporteStockMinimo: todos 50%.

   Los listados, mantenimientos y transacciones (objetos WP_ y TR_) NO
   declaran TableContent y por eso van a ancho completo: no llevan esta clase.
   OJO: no escribir la secuencia asterisco-barra dentro de un comentario CSS,
   porque lo cierra antes de tiempo y anula la regla que viene después.
   ───────────────────────────────────────────────────────────── */
.adv-reporte-panel {
    width: 50%;
    /* Por debajo de `sm` el legado colapsa a ancho completo. */
    min-width: 560px;
    max-width: 100%;
}

@media (max-width: 959px) {
    .adv-reporte-panel {
        width: 100%;
        min-width: 0;
    }
}

/* ─────────────────────────────────────────────────────────────
   ESTÁNDAR DE BOTONES Y ALINEACIÓN DE FILAS
   (definido 2026-08-11; aplica a TODOS los módulos, no solo Almacén/Compras)

   Problema que resuelve: los botones tomaban su ancho del largo del texto,
   así que "Imprimir", "Excel" y "Nuevo" quedaban de tres tamaños distintos
   en la misma barra; y había `max-width` en línea dispersos por las
   pantallas con 8 valores distintos (120, 140, 150, 160, 200, 220, 260, 280).
   ───────────────────────────────────────────────────────────── */

/* Botones de acción: mismo alto y ancho mínimo en toda la aplicación.
   Se excluyen los de solo ícono, que son cuadrados por definición. */
.adv-listado-header .mud-button-root:not(.mud-icon-button),
.adv-form-actions .mud-button-root:not(.mud-icon-button),
.mud-dialog-actions .mud-button-root:not(.mud-icon-button) {
    min-width: 120px;
    height: 36px;
    white-space: nowrap;
}

/* Imprimir, Excel y PDF miden SIEMPRE 120×36, estén donde estén: en la cabecera de un listado,
   en el panel de filtros de un reporte o dentro de un MudStack. Ancho fijo, no mínimo —igual que
   el botón de alta—, porque con min-width cada pantalla terminaba con un «Imprimir» un poco más
   ancho que el «Excel» de al lado y dos reportes del mismo módulo no coincidían entre sí.
   El patrón de referencia es Registro de Ventas. Va por clase y no con width en línea: así una
   pantalla nueva lo hereda y el tamaño se cambia en un solo lugar. */
.adv-btn-accion {
    width: 120px;
    min-width: 120px;
    height: 36px;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* El botón de alta mide SIEMPRE 120×36, en toda la aplicación: ancho fijo, no mínimo. Por eso
   su texto es una sola palabra —«Agregar», el caption del legado— y no «Nuevo Proveedor» o
   «Nueva Guía», que estiraban el botón a un ancho distinto en cada pantalla. */
.adv-listado-header .mud-button-filled-primary:not(.mud-icon-button) {
    width: 120px;
    min-width: 120px;
    flex: 0 0 120px;
    padding-left: 8px;
    padding-right: 8px;
}

/* El ANCHO es el mismo para todos los botones (los 120px de arriba), sobre todo cuando van
   juntos en la misma barra: dos botones pegados de anchos distintos se ven mal. Imprimir y
   Excel son salidas del reporte y no la acción principal de la pantalla, así que se los baja
   un punto SÓLO en alto — nunca en ancho. */
.adv-listado-header .mud-button-filled-error:not(.mud-icon-button),
.adv-listado-header .mud-button-filled-success:not(.mud-icon-button) {
    height: 32px;
}

/* Botones de acción por fila dentro de una grilla: cuadrados y uniformes. */
.mud-table-cell .mud-icon-button {
    width: 32px;
    height: 32px;
}

/* Filas de filtros: los campos con etiqueta y sin etiqueta tienen distinto
   alto interno, así que sin esto quedan escalonados. Alinear por la base
   los deja parejos sin importar la combinación. */
/* Los campos de una fila se alinean por ARRIBA, no por abajo. Con `flex-end`, un campo que
   lleva texto de ayuda hace más alta su celda y todos los que no lo llevan se caen al pie de
   la fila: en la Nueva Salida, «Centro de Costo» quedaba 37px por debajo de «Almacén Destino».
   Alineando por arriba, los campos quedan siempre en la misma horizontal y el texto de ayuda
   cuelga debajo del suyo, que es donde tiene que estar. */
.adv-filtros .mud-grid-item {
    display: flex;
    align-items: flex-start;
}
.adv-filtros .mud-grid-item > * {
    width: 100%;
}

/* Un filtro de radios se alinea como los combos: el rótulo con ancho fijo a la izquierda y los
   radios pegados a él, sin estirarse a lo ancho de la columna. */
.adv-filtro-radios {
    min-height: 40px;
    gap: 8px;
}
/* 106px es lo que mide el rótulo más largo del sistema («Tipo de informe:») sin partirse. */
.adv-filtros .adv-filtro-radios > .mud-typography {
    width: 106px;
    flex: 0 0 106px;
}
.adv-filtros .adv-filtro-radios > .mud-input-control {
    width: auto;
    flex: 0 1 auto;
    margin: 0;
}
/* Un grupo de radios como filtro (Tipo, Orden) ocupa la fila entera: cuatro opciones no caben
   junto a un combo, y partidas en dos líneas quedan desalineadas. El rótulo lleva ancho fijo
   para que todos los grupos arranquen en la misma vertical. */
.adv-filtros .adv-filtro-radios {
    flex: 0 0 100%;
    max-width: 100%;
}
.adv-filtros .adv-filtro-radios > .mud-input-control {
    max-width: none;
}
.adv-filtro-radios .mud-radio-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ...pero los BOTONES sueltos dentro de una columna de filtros NO se estiran: siguen el mismo
   estándar de 120x36 del resto de la aplicación. Sin esta excepción, un "Filtrar" solo en su
   columna se abría a todo el ancho y descuadraba la fila de filtros. */
.adv-filtros .mud-grid-item > .mud-button-root:not(.mud-icon-button),
.adv-filtros .mud-grid-item .d-flex > .mud-button-root:not(.mud-icon-button) {
    width: auto;
    min-width: 120px;
    height: 36px;
}

/* Fila de filtros con ancho propio por campo: la grilla reparte columnas iguales y en
   pantallas de pocos campos cortos (fechas, importes) deja más espacio vacío que contenido.
   Acá cada campo declara su ancho y todos se alinean por la base, como en la grilla. */
.adv-filtros-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
}
/* Ningún campo crece para rellenar la fila: cada uno mide lo suyo. */
.adv-filtros-flex > * {
    flex: 0 0 auto;
}

/* Anchos de campo dentro de esa fila. Se declaran acá y no en el Style de cada
   componente porque MudBlazor no traslada Style al elemento raíz de los inputs
   (y en el MudSelect la clase cae en el control interno, por eso el descendiente). */
.adv-filtros-flex .adv-campo-md { width: 240px; }
.adv-filtros-flex .adv-campo-sm { width: 170px; }

/* Los campos de cada fila van dentro de un bloque de ancho fijo para que los botones
   arranquen en la misma columna en todas las filas, aunque los campos no sean los mismos. */
.adv-filtros-campos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
    width: 620px;
}

/* La grilla llega hasta donde terminan los botones de la fila de filtros: cortada antes,
   el hueco a la derecha se lee como espacio sobrante.
   620 (campos) + 12 + 120 (botón) + 12 + 120 (botón) = 884. */
.adv-tabla-ancho-filtros {
    width: 884px;
    max-width: 100%;
}

/* Barra de acciones de un formulario: alineada a la derecha y con
   separación uniforme, igual en todas las pantallas. */
.adv-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Opciones del menú aún no migradas ─────────────────────────────────────
   El menú muestra TODAS las opciones del sistema anterior, estén construidas o
   no, para que se vea el alcance completo de la migración. Las que todavía no
   tienen pantalla se pintan apagadas, con un punto ámbar y sin cursor de enlace.
   La detección es automática (MainLayout.EnConstruccion): apenas se crea la
   página con su @page, la opción recupera el estilo normal sin tocar nada. */
.adv-menu-dropdown-item.adv-menu-pendiente {
    color: #9aa5b1 !important;
    cursor: not-allowed;
    font-style: italic;
}
.adv-menu-dropdown-item.adv-menu-pendiente:hover {
    background: transparent !important;
    color: #9aa5b1 !important;
}
.adv-menu-dropdown-item.adv-menu-pendiente .mud-icon-root {
    opacity: .45;
}
.adv-menu-dropdown-item.adv-menu-pendiente::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-radius: 50%;
    background: #F9A216;
    flex: 0 0 auto;
}

/* ── Pantalla de acceso (/login) ────────────────────────────────────────────
   Diseño portado del sistema anterior (SIGERP_ADVANCED / siglogin.aspx):
   pantalla partida en dos, ilustración a la izquierda sobre un degradado y
   panel blanco a la derecha con logo, campos, botón y pie.
   Los tamaños salen de las clases del legado (TableLoginLeft / TableLoginRight /
   TableLoginForm / AttributeLogin* / ButtonLogin / TextBlockFooterLogin). */

.adv-login {
    display: flex;
    min-height: 100vh;
    background: #FFFFFF;
}

/* Mitad izquierda: degradado y la ilustración de módulos, centrada.
   Se oculta en pantallas chicas, igual que el «hidden-xs» del legado. */
.adv-login-ilustracion {
    flex: 0 0 62%;
    max-width: 62%;
    background: linear-gradient(to left, #DAE4F0, #FEFEFE);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px;
}
/* Un poco más chica que el ancho/alto disponible, pero sin moverse: el centrado
   lo sigue dando el flex del contenedor, así que reducir los topes la achica
   «hacia adentro» y queda igual de centrada. */
.adv-login-ilustracion-img {
    max-width: 80%;
    max-height: 58vh;
    height: auto;
}

/* Ilustración y frase como un solo bloque: el ancho lo manda el dibujo y la
   frase se alinea a su borde izquierdo, así se lee como su pie y no como un
   texto suelto flotando en el degradado. */
/* El ancho lo manda la propia ilustración, que es cuadrada: se ata al alto
   disponible (56vh) para que la frase empiece justo donde empieza el dibujo y
   no sobresalga por la izquierda en pantallas bajas. */
.adv-login-bloque {
    display: flex;
    flex-direction: column;
    width: min(78%, 56vh);
    max-width: 620px;
}
.adv-login-bloque .adv-login-ilustracion-img {
    width: 100%;
    max-width: 100%;
    max-height: none;
}

.adv-login-claim {
    margin: 18px 0 0;
    text-align: left;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    color: #3C5570;
}
/* Los módulos que la frase enumera, en seminegrita: son lo mismo que rotula la
   ilustración de arriba. */
.adv-login-claim > b {
    font-weight: 600;
    color: var(--adv-primary);
}

/* Mitad derecha: panel blanco. El formulario se centra vertical y el pie
   queda pegado abajo (el «margin:auto» del formulario absorbe el sobrante). */
.adv-login-panel {
    flex: 1 1 38%;
    max-width: 38%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 24px 16px 16px;
}
.adv-login-form {
    width: 80%;
    max-width: 340px;
    margin: auto;
    text-align: center;
}

/* Emblema del panel: el mismo de la cabecera, sin texto. El nombre del sistema lo
   pone siempre la tipografía (.adv-login-marca-nombre, justo debajo) y no la
   imagen, así no hay dos versiones distintas del nombre en la misma pantalla. */
.adv-login-marca {
    width: 168px;
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}
/* El nombre del sistema, siempre bajo el emblema y en todos los anchos: es el
   único lugar de la pantalla donde se nombra. Mismo tratamiento que la marca de
   la cabecera (Titillium Web, «ERP» en ámbar) para que se lean igual. */
.adv-login-marca-nombre {
    font-family: 'Titillium Web', Roboto, sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.3px;
    line-height: 1;
    color: var(--adv-primary);
    margin-bottom: 16px;
}
.adv-login-marca-nombre > span { color: var(--adv-accent); }

/* Los dos pasos del acceso (empresa → usuario). El flujo ya era de dos pasos;
   acá se hace visible cuál está en curso. */
.adv-login-pasos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 11px;
    color: #8093A8;
}
.adv-login-paso {
    display: flex;
    align-items: center;
    gap: 5px;
}
.adv-login-paso .bolita {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #DCE6F2;
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}
.adv-login-paso.activo { color: var(--adv-primary); font-weight: 500; }
.adv-login-paso.activo .bolita,
.adv-login-paso.hecho .bolita { background: var(--adv-primary); }
.adv-login-pasos .raya { width: 26px; height: 1px; background: #DCE6F2; }

/* Encabezado del formulario */
.adv-login-titulo {
    font-family: 'Titillium Web', Roboto, sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--adv-text);
    margin-bottom: 3px;
}
.adv-login-sub {
    font-size: 12px;
    color: #6A7B8F;
    line-height: 1.5;
    margin-bottom: 18px;
}

/* Sesión expirada: antes se avisaba con un Snackbar abajo a la derecha, que se
   va solo a los 3 segundos y el usuario alcanza a no leerlo. Acá queda a la
   vista dentro del formulario hasta que vuelva a entrar. */
.adv-login-banner {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--adv-accent-light);
    border: 1px solid #F5DDB4;
    border-left: 3px solid var(--adv-accent);
    border-radius: 5px;
    padding: 8px 10px;
    margin-bottom: 16px;
    font-size: 11.5px;
    line-height: 1.4;
    color: #7A4E00;
    text-align: left;
}
.adv-login-banner .mud-icon-root { font-size: 16px; color: var(--adv-accent); flex: 0 0 auto; }

/* «Recordar esta empresa»: da control sobre algo que hasta ahora pasaba siempre
   y sin avisar (el RUC queda guardado en el navegador y el acceso arranca en el
   paso 2). Destildarlo lo borra al entrar — para equipos compartidos. */
.adv-login-recordar {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 2px 0 12px;
    font-size: 11.5px;
    color: #6A7B8F;
    text-align: left;
    cursor: pointer;
    user-select: none;
}
.adv-login-recordar input {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: var(--adv-primary);
    cursor: pointer;
    flex: 0 0 auto;
}

.adv-login-sep {
    height: 1px;
    background: #E7EEF6;
    margin: 20px 0 14px;
}
.adv-login-ayuda {
    font-size: 11.5px;
    line-height: 1.7;
    color: #6A7B8F;
}

/* «Entrar a otra empresa»: sale debajo del combo de empresas recordadas, para el caso de una
   que todavía no está en la lista de este equipo. */
.adv-login-otra {
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
}

.adv-login-otra span {
    color: var(--adv-primary, #1B4F8A);
    cursor: pointer;
}

.adv-login-otra span:hover {
    text-decoration: underline;
}

/* Versión del sistema: soporte la pide en cada llamada. */
.adv-login-version {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    letter-spacing: 0.3px;
    color: #8093A8;
}

/* Campos: caja redondeada, fondo azul muy claro, borde suave y el iconito
   del legado como imagen de fondo a la izquierda. */
.adv-login-campo {
    margin-bottom: 12px !important;
}
.adv-login-campo .mud-input.mud-input-outlined {
    background-color: #F2F7FD;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 14px 14px;
}
.adv-login-campo .mud-input-outlined-border {
    border-width: 1px !important;
    border-color: #CFDCEC !important;
    border-radius: 5px !important;
}
.adv-login-campo .mud-input.mud-input-outlined:hover .mud-input-outlined-border,
.adv-login-campo .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-width: 1px !important;
    border-color: var(--adv-primary) !important;
}
.adv-login-campo .mud-input-slot.mud-input-root-outlined {
    padding: 10px 12px 10px 32px !important;
    font-size: 13px;
    color: var(--adv-primary);
    height: auto;
}
.adv-login-campo .mud-input-slot::placeholder {
    color: #8093A8;
    opacity: 1;
}
.adv-login-campo .mud-input-adornment-end .mud-icon-root {
    font-size: 18px;
    color: #8093A8;
}
/* Los avisos de campo obligatorio se dan por Snackbar (igual que antes), así que
   el mensaje en línea de MudBlazor se oculta: si se mostrara, aparecería apenas
   el campo pierde el foco y movería todo el formulario hacia abajo. */
.adv-login-campo .mud-input-helper-text,
.adv-login-campo .mud-input-control-helper-container {
    display: none !important;
}
.adv-login-campo .mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border {
    border-color: #CFDCEC !important;
}
.adv-login-campo .mud-input.mud-input-outlined.mud-input-error.mud-focused .mud-input-outlined-border {
    border-color: var(--adv-primary) !important;
}
.adv-login-campo-empresa .mud-input.mud-input-outlined { background-image: url('../images/login/EmpresaSIGA.png'); }
.adv-login-campo-usuario .mud-input.mud-input-outlined { background-image: url('../images/login/UsuarioSIGA.png'); }
.adv-login-campo-clave   .mud-input.mud-input-outlined { background-image: url('../images/login/ClaveSIGA.png'); }

/* Empresa ya validada (paso 1 confirmado): misma caja que los campos */
.adv-login-empresa {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F2F7FD;
    border: 1px solid #CFDCEC;
    border-radius: 5px;
    padding: 4px 4px 4px 10px;
    margin-bottom: 12px;
    text-align: left;
}
.adv-login-empresa-icono {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}
.adv-login-empresa-nombre {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--adv-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adv-login-empresa-cambiar .mud-icon-root {
    font-size: 16px;
    color: #8093A8;
}

/* Botón «Iniciar sesión»: azul institucional, radio 5px y, al pasar el mouse,
   el texto en ámbar (así lo hace el ButtonLogin del legado). */
.adv-login-boton {
    /* Degradado en el azul de la marca, como el fondo de la mitad izquierda: plano
       al lado de esa pantalla el botón se veía apagado. */
    background: linear-gradient(135deg, #0056A6 0%, #004080 55%, #002F5F 100%) !important;
    color: #FFFFFF !important;
    border-radius: 5px !important;
    height: 36px;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    box-shadow: none !important;
    margin-top: 2px;
}
.adv-login-boton:hover,
.adv-login-boton:focus {
    background: linear-gradient(135deg, #004080 0%, #002F5F 55%, #002246 100%) !important;
    color: var(--adv-accent) !important;
    box-shadow: none !important;
}
/* Deshabilitado: color plano —el shorthand «background» borra el degradado. */
.adv-login-boton:disabled,
.adv-login-boton[disabled] {
    background: #8FA9C4 !important;
    color: #FFFFFF !important;
}

/* Pie del panel: texto de la empresa y línea azul debajo */
.adv-login-pie {
    width: 80%;
    max-width: 340px;
    text-align: center;
    flex: 0 0 auto;
}
.adv-login-pie-texto {
    font-size: 11px;
    color: var(--adv-primary);
}
.adv-login-pie-linea {
    height: 3px;
    border-radius: 2px;
    background: var(--adv-primary);
    margin-top: 10px;
}

/* Responsiva: por debajo de 900px desaparece la ilustración y el panel
   ocupa todo el ancho (mismo comportamiento que el legado a 375 y 768). */
@media (max-width: 900px) {
    .adv-login-ilustracion { display: none; }
    .adv-login-panel {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .adv-login-form,
    .adv-login-pie {
        width: 100%;
        max-width: 360px;
    }
}
@media (max-width: 480px) {
    .adv-login-panel { padding: 16px 20px 12px; }
    .adv-login-marca { width: 136px; margin-bottom: 8px; }
}

/* ─────────────────────────────────────────────────────────────
   FILAS DE GRUPO Y SUBTOTAL EN REPORTES AGRUPADOS
   (definido 2026-08-16 para Comercial > Análisis de Ventas)

   Varios reportes portados del legado tienen cortes de control (cliente,
   producto, línea, vendedor) y se dibujan con MudSimpleTable en vez de
   MudTable, porque el árbol viene ya agrupado desde la API y no hace falta
   que MudBlazor lo reagrupe. MudSimpleTable no trae las clases
   `mud-table-cell-custom-group`, así que la fila de encabezado de grupo y la
   de subtotal necesitan estas dos.

   Se usan sólo con `<tr class="...">`; los colores salen de las variables del
   tema para que funcionen igual en claro y en oscuro.
   ───────────────────────────────────────────────────────────── */
.adv-grupo-row > td {
    background-color: var(--mud-palette-background-grey);
    font-weight: 600;
}

.adv-subtotal-row > td {
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* ─────────────────────────────────────────────────────────────
   BUSCAR ESCRIBIENDO EN EL PROPIO COMBO (js/advComboBuscador.js)
   (definido 2026-08-16)

   Todo MudSelect, sin mínimo de opciones, deja escribir en su mismo campo para
   filtrar la lista; no se agrega ningún cuadro de búsqueda aparte. Sin texto
   se ven las primeras 20 opciones; al escribir se ven todas las coincidencias.

   El script inserta un <input class="adv-combo-entrada"> dentro de la caja del
   campo (clonándole las clases al slot nativo, de ahí que aquí sólo haga falta
   ajustar borde/fondo/ancho) y marca con [data-adv-oculto] tanto el slot nativo
   como las opciones descartadas. Es un atributo propio, no una clase: Blazor
   re-renderiza la lista constantemente y borraría cualquier class o style que
   le pongamos, pero no toca los atributos que nunca estuvieron en su árbol.
   ───────────────────────────────────────────────────────────── */
.mud-list-item[data-adv-oculto],
.mud-input-slot[data-adv-oculto] { display: none !important; }

.adv-combo-entrada {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--adv-text);
    /* Por encima del .mud-overlay transparente que MudBlazor tiende a pantalla
       completa mientras el desplegable está abierto; si no, el campo no recibe
       los clics y no se puede ni posicionar el cursor. */
    position: relative;
    z-index: 1202;
}
.adv-combo-entrada::placeholder {
    color: var(--adv-text-sec);
    opacity: 0.75;
}

/* Resaltado de la opción sobre la que están las flechas del teclado. */
.mud-list-item.adv-combo-activo { background-color: var(--adv-primary-light); }

/* ─────────────────────────────────────────────────────────────
   OBSERVACIÓN EN AUDITORÍA (Seguridad › Auditoría)
   (definido 2026-08-17)

   SGAuDocObs guarda el motivo que escribió el usuario (por qué anuló, qué
   cambió), hasta 500 caracteres y con saltos de línea — por ejemplo el motivo
   y debajo el detalle de los documentos afectados. Mostrarlo dentro de la
   celda estiraba las filas, así que va en un popup: la celda queda siempre en
   una sola línea y el texto completo se lee al abrirlo.
   ───────────────────────────────────────────────────────────── */
.adv-auditoria-glosa {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* El botón del popup no debe engordar la fila: sin padding propio. */
.adv-auditoria-obs-boton .mud-icon-button {
    padding: 2px;
    color: var(--adv-primary);
}

.adv-auditoria-obs-popup {
    /* min-width además de max-width: un motivo corto no debe dejar un popup
       diminuto y desalineado con el icono. */
    min-width: 260px;
    max-width: 520px;
    max-height: 320px;
    overflow-y: auto;
    padding: 10px 14px;
    white-space: pre-line;      /* respeta los saltos de línea del motivo */
    overflow-wrap: anywhere;    /* un texto largo se acomoda, no desborda */
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--adv-text);
}

/* ─────────────────────────────────────────────────────────────
   CARGA MASIVA DESDE EXCEL (Components/Shared/AdvCargaMasiva.razor)
   (definido 2026-08-17)

   Los botones de los dos pasos —"Descargar" la plantilla y "Elegir archivo"—
   comparten ancho: son pares dentro del mismo recorrido y con anchos distintos
   la columna derecha del diálogo queda despareja.
   ───────────────────────────────────────────────────────────── */
.adv-carga-masiva-boton {
    min-width: 170px !important;
    justify-content: center;
}

/* ─────────────────────────────────────────────────────────────
   INDICADOR DE CARGA GLOBAL (wwwroot/js/advCargando.js)
   (definido 2026-08-19)

   Capa que tapa la pantalla cuando una acción tarda más de 300 ms: logo del
   sistema dentro de un aro que gira, sobre un velo claro. Aparece y se va con
   una transición corta para que no dé la sensación de parpadeo.
   ───────────────────────────────────────────────────────────── */
#adv-cargando {
    position: fixed;
    inset: 0;
    z-index: 3000;                 /* por encima de diálogos (1400) y popovers de MudBlazor */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 247, 250, 0.72);
    backdrop-filter: blur(1.5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}

#adv-cargando.adv-cargando-visible {
    opacity: 1;
    visibility: visible;
}

.adv-cargando-caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 22px 30px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
}

/* El aro gira alrededor del logo, que se queda quieto: el logo del sistema girando
   se lee como un error de imagen, no como "esperá un momento". */
.adv-cargando-aro {
    position: relative;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adv-cargando-aro::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(0, 64, 128, .18);
    border-top-color: var(--adv-primary);
    animation: adv-cargando-giro .8s linear infinite;
}

.adv-cargando-aro img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.adv-cargando-texto {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--adv-primary);
}

@keyframes adv-cargando-giro {
    to { transform: rotate(360deg); }
}

/* Respeta a quien pidió menos animación en el sistema operativo. */
@media (prefers-reduced-motion: reduce) {
    .adv-cargando-aro::before { animation-duration: 2.4s; }
}

/* ── Panel «Datos Complementarios» de los documentos ───────────────────────
   Va plegado y con una cabecera en el celeste institucional del sistema, para
   que la línea del título se distinga de los datos generales sin salirse de
   la paleta. El contenido queda en blanco, como el resto del formulario.   */
.adv-panel-plegable .mud-expand-panel-header {
    background: var(--adv-primary-light);
    border-left: 4px solid var(--adv-primary);
    font-weight: 600;
    color: var(--adv-primary);
}
.adv-panel-plegable .mud-expand-panel-header:hover {
    background: #DCE7F4;
}

/* Desplegable de los buscadores que viven dentro de una celda del grid (cuenta contable,
   auxiliar): la celda es angosta, pero la lista necesita ancho para mostrar
   «código — descripción» en una sola línea. */
.adv-lookup-popover {
    min-width: 640px !important;
    max-width: 90vw;
}
.adv-lookup-popover .mud-list-item {
    white-space: nowrap;
}

/* Los buscadores de cuenta contable y auxiliar viven en una celda del grid: necesitan algo
   más de ancho que un numérico para que el código se lea entero, y el texto va a la
   izquierda (son códigos, no importes). */
.adv-grid-detalle-lookup {
    width: 130px !important;
}
.adv-grid-detalle-lookup .mud-input-slot {
    text-align: left;
}

/* ── Cotizaciones de la oportunidad (CRM) ─────────────────────────────
   La versión vigente es EL concepto de la pestaña: se destaca en ámbar, el mismo
   acento del sistema, y es el único realce de la grilla. */
.adv-grid-detalle tr.adv-fila-vigente > td {
    background: var(--adv-accent-light);
    box-shadow: inset 3px 0 0 var(--adv-accent);
    font-weight: 500;
}

/* Eslabones de la trazabilidad: verde lo cerrado, ámbar lo que está en curso,
   punteado lo que todavía no ocurre. */
.adv-eslabon {
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-radius);
    background: var(--adv-surface);
}
.adv-eslabon-t { border-color: #1E8E5A; background: rgba(30, 142, 90, .06); }
.adv-eslabon-c { border-color: var(--adv-accent); background: var(--adv-accent-light); }
.adv-eslabon-p { border-style: dashed; color: var(--adv-text-sec); }

/* Imágenes de una línea de la cotización: miniatura en el grid, tamaño manejable en el diálogo. */
.adv-cot-miniatura {
    height: 34px;
    width: auto;
    max-width: 60px;
    object-fit: cover;
    border: 1px solid var(--adv-border);
    border-radius: 4px;
}
.adv-cot-imagen {
    width: 118px;
    height: 88px;
    object-fit: contain;
    background: var(--adv-bg);
    border-radius: 4px;
}

/* ── Debe / Haber: los colores del sistema anterior ───────────────────────────
   En el listado legado la única celda que se pinta es «Total Haber», y sólo
   cuando el importe no es cero: es la clase WWColumnWarning de WorkWithPlus,
   #FAF2CC, que marca la salida de dinero. «Total Debe» va siempre sin fondo.
   La condición está en wp_listadomovimientobanco.cs:2607. */
.adv-celda-importe { text-align: right; }
.adv-celda-haber-salida { background: #FAF2CC !important; text-align: right; }
/* El Debe también se pinta, aunque el legado deje esa celda en blanco: con las dos
   columnas marcadas se ve de un vistazo si el movimiento entra o sale plata. Se usa el
   otro color de WorkWithPlus, el de WWColumnInfo (el «Pago Total» del listado de Pagos),
   para que no desentone con el resto del sistema. */
.adv-celda-debe-entrada { background: #E0F1FF !important; color: #2E6E93; text-align: right; }

/* El popup de conceptos sí distingue las dos columnas con color, igual que el
   legado: el Debe sobre verde y el Haber sobre azul. */
.adv-celda-debe  { background: #EAF6EE !important; text-align: right; }
.adv-celda-haber { background: #E9F1FB !important; text-align: right; }

/* ── «Pago Total» del listado de Pago a Proveedores ───────────────────────────
   Es la clase WWColumnInfo de WorkWithPlus tal cual (wp_listadopagos.cs:3029), y va
   sin condición: la columna entera, título incluido. El listado de Pagos Varios NO
   la lleva, así que la clase queda con el nombre de la columna que sí la usa. */
.adv-celda-pago-total { background: #E0F1FF !important; color: #3C8DBC !important; text-align: right; }
/* El mismo «Pago Total», pero como campo de sólo lectura del formulario de Pagos. */
.adv-campo-pago-total .mud-input-slot { background: #E0F1FF !important; color: #3C8DBC !important; text-align: right; }

/* WWColumnSuccess: en el detalle de Pagos marca cuál de las dos columnas de saldo
   está en la moneda del documento (wp_pagos, formato condicional por TSTempMonCod). */
.adv-celda-saldo-moneda { background: #DFF0D8 !important; color: #3C763D !important; text-align: right; }

/* ── Saldo Actual del Listado de Movimientos de Bancos ────────────────
   Mismos colores que las columnas del grid: en positivo el del Debe (entra
   plata) y en negativo el del Haber (sale), para que el campo se lea igual
   que la columna con la que se compara.

   El color va sobre el propio <input>, no sobre el contenedor .mud-input: el
   campo es de sólo lectura y la regla de arriba («.mud-input-outlined
   input:read-only») le pinta un gris que tapaba por completo al contenedor.
   De ahí el selector con :read-only, que empata su especificidad. */
.adv-campo-saldo-debe .mud-input-slot,
.adv-campo-saldo-haber .mud-input-slot {
    font-weight: 600;
    text-align: right;
}
.mud-input-outlined.adv-campo-saldo-debe input:read-only,
.adv-campo-saldo-debe .mud-input-outlined input:read-only {
    background-color: #E0F1FF !important;
    color: #2E6E93 !important;
}
.mud-input-outlined.adv-campo-saldo-haber input:read-only,
.adv-campo-saldo-haber .mud-input-outlined input:read-only {
    background-color: #FAF2CC !important;
    color: #6B5B14 !important;
}

/* ── Colores de celda que trae el listado legado ─────────────────────────────
   Saldo pendiente del Listado de Ventas: WorkWithPlus lo pinta con WWColumnDanger
   (wp_listadoventas.cs) y deja en blanco el documento ya cancelado. */
.adv-celda-saldo-pendiente {
    background: #F2DEDE !important;
    color: #A94442 !important;
}

/* Fila del documento anulado: el legado le pone WWColumnDanger a TODAS sus celdas
   (Grid.Load de wp_listadonotas / wp_listadoventas), o sea la fila entera en rojo. */
.adv-fila-anulada > td {
    background: #F2DEDE !important;
    color: #A94442 !important;
}

.adv-fila-anulada:hover > td {
    background: #EDCFCF !important;
}

/* Fila de agrupación por documento dentro de un grid de detalle: el legado abre cada
   bloque de líneas con el número del pedido (WC_PedidoRemisionDetalle / WC_PedidoVentaDetalle). */
.adv-grid-detalle .adv-fila-grupo td {
    background: #F5F7FA;
    font-weight: 600;
}

/* ── Pantalla de arranque ───────────────────────────────────────
   Se ve mientras MainLayout resuelve sesión y menú (que dependen del token en
   localStorage y por eso van después de que conecte el circuito). Muestra la
   barra de marca ya dibujada para que el arranque no se lea como una recarga. */
.adv-arranque {
    min-height: 100vh;
    background: var(--adv-bg, #F5F7FA);
    display: flex;
    flex-direction: column;
}
.adv-arranque-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 16px;
    background: var(--adv-surface, #ffffff);
    border-bottom: 1px solid var(--adv-border, #E3E8EE);
}
.adv-arranque-cuerpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.adv-arranque-texto {
    font-size: 13px;
    color: var(--adv-text-sec, #6B7684);
}

/* ── Visor de PDF embebido (AdvVisorPdf) ────────────────────────
   Los comprobantes se ven dentro del sistema, no en una pestaña suelta. El
   iframe monta el visor nativo del navegador, que ya trae imprimir y descargar. */
.adv-visor-pdf {
    width: 100%;
    height: 75vh;
    border: none;
    display: block;
}
/* Maximizado: el PDF ocupa la pantalla completa menos el encabezado del diálogo.
   Ya no se descuenta el pie: «Cerrar» se subió a la barra de arriba y el diálogo
   quedó sin DialogActions, así que el iframe gana esos ~65px. */
.adv-visor-pdf.adv-visor-max {
    height: calc(100vh - 76px);
}
/* Sin visor de PDF en el navegador (Chrome en Android): en lugar del iframe, un aviso con el
   botón de descarga, centrado. */
.adv-visor-sin-visor {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 40vh;
    padding: 24px 16px;
}
.adv-visor-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

/* Visor maximizado: ocupa toda la ventana. La clase la pone advVisorMaximizar en el
   <body>, no el propio dialogo: MudBlazor lee sus opciones una sola vez al abrirlo. */
body.adv-visor-maximizado .adv-visor-dialogo {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
body.adv-visor-maximizado .adv-visor-pdf {
    height: calc(100vh - 78px);
}

/* ─── Total de los documentos ──────────────────────────────────────────────
   El resto de los importes queda como cualquier otro campo; sólo el Total va
   resaltado, en el verde que el tema anterior usaba para esa celda
   (WWColumnSuccess), porque es la cifra que se busca primero. Se marca con
   Class="adv-total-ok" en el MudItem, dentro de un MudGrid Class="adv-totales". */
.adv-totales .adv-total-ok .mud-input.mud-input-outlined {
    background-color: #DFF0D8;
    border-radius: 4px;
}

/* El <input> trae su propio fondo —y el gris de :read-only— que taparía el
   color de la celda. */
.adv-totales .adv-total-ok .mud-input-slot,
.adv-totales .adv-total-ok .mud-input-slot:read-only {
    background-color: transparent !important;
    font-weight: 700;
    color: #1f4d1f;
}

.adv-totales .adv-total-ok .mud-input-outlined-border { border-color: #8bc48b !important; }
.adv-totales .adv-total-ok label.mud-input-label { color: #2b6b2b !important; }

/* ─── Fila de un activo dado de baja ───────────────────────────────────────
   El listado de Activos Fijos del sistema anterior pinta la fila entera de rojo
   cuando el activo está en estado «B» (clase WWColumnDanger de su tema), igual
   que ya se hace en Entradas y Salidas con los documentos anulados. */
.adv-fila-baja > td {
    background-color: #FBE9E7;
}
.adv-fila-baja:hover > td {
    background-color: #F8DDD9 !important;
}

/* Pantalla de acceso: mientras se averigua si ya hay sesión abierta no se pinta el
   login. Sin esto la ilustración de la izquierda alcanzaba a aparecer un instante
   antes de que la pantalla se fuera sola a la aplicación. */
.adv-login-espera {
    min-height: 100vh;
    background: #FFFFFF;
}

/* ── Tramos de la escala de renta de 5ta (Parámetros UIT) ─────────────────────
   El formulario del sistema anterior pinta las tres partes de cada tramo con los
   colores de WorkWithPlus: el rango en UIT sobre crema (WWColumnWarning), el
   importe equivalente en soles sobre celeste (WWColumnInfo) y la tasa sobre verde
   (WWColumnSuccess). Se pinta el <input>, no el .mud-input: en un campo de sólo
   lectura el input gris tapa el color de afuera. */
.adv-tramo-rango .mud-input-slot   { background: #FAF2CC !important; text-align: right; }
.adv-tramo-importe .mud-input-slot { background: #E0F1FF !important; color: #2E6E93 !important; text-align: right; }
.adv-tramo-tasa .mud-input-slot    { background: #DFF0D8 !important; color: #3C763D !important; text-align: right; }
/* ── Registro de Planilla: los colores de columna del sistema anterior ────────
   El listado legado (wp_listadoplanilla) pinta la fila entera por tipo de importe, y
   así se lee de un vistazo qué suma y qué resta: Ingresos y Neto a Pagar en verde
   (WWColumnSuccess), los dos aportes en crema (WWColumnWarning) y los Descuentos en
   azul (WWColumnInfo). El título va sin fondo, como allá.

   El fondo va más saturado que el del legado y el número en negrita: con el tono pálido
   original la columna de importes se perdía contra el blanco de la grilla, sobre todo en
   el Visualizar, donde las cuatro grillas conviven en la misma pantalla. */
.adv-celda-planilla-ingreso  { background: #CDEBD8 !important; color: #1B5E33 !important; text-align: right; font-weight: 600; }
.adv-celda-planilla-aporte   { background: #F6E6A8 !important; color: #6B520F !important; text-align: right; font-weight: 600; }
.adv-celda-planilla-dcto     { background: #C7E4FB !important; color: #14547A !important; text-align: right; font-weight: 600; }
.adv-celda-planilla-neto     { background: #B7E4C7 !important; color: #14532D !important; text-align: right; font-weight: 700; }

/* ── «Visualizar» de la planilla (PlanillaTrabajadorDialog) ────────────────
   Tres cosas que la pantalla necesitaba:

   1. El scroll lo lleva el CUERPO y no el diálogo, para que los Totales queden
      pegados abajo y siempre visibles. Por eso el contenido del diálogo no
      scrollea (ClassContent="adv-dialog-planilla") y el cuerpo sí.
   2. Datos Generales con un tinte suave, para que se lea como la ficha del
      trabajador y no se confunda con las grillas de importes.
   3. En las grillas de conceptos la descripción BAJA DE LÍNEA. La regla general
      de .adv-grid-detalle es «nowrap», y con nombres como «TRABAJO EN
      SOBRETIEMPO (HORAS EXTRAS) 25%» eso empujaba la columna de importes fuera
      del panel: aparecía scroll horizontal y el importe quedaba cortado. */
.adv-dialog-planilla.mud-dialog-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}
.adv-planilla-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}
.adv-planilla-totales {
    flex: 0 0 auto;
    border-top: 2px solid var(--adv-primary);
    background: var(--adv-surface);
    padding: 6px 0 2px;
}
.adv-planilla-totales-titulo {
    font-size: 12px;
    font-weight: 600;
    color: var(--adv-text-sec);
    padding: 2px 0 4px;
}
/* Datos Generales como SECCIÓN: el tinte va en el panel entero —cabecera incluida—
   y no sólo en el contenido, porque con el contenido solo la separación no se leía.
   El contenedor del contenido de un MudExpansionPanel es .mud-collapse-container,
   no .mud-expand-panel-content.

   Gris azulado y no el ámbar de --adv-accent-light: ese tono es el mismo que el de
   las celdas de aportes y competía con ellas. La barra de la izquierda es la que
   hace de separador; el fondo solo, en #F5F7FA, era casi invisible contra el blanco. */
.adv-panel-ficha,
.adv-panel-ficha .mud-collapse-container,
.adv-panel-ficha .mud-expand-panel-header { background: #EDF1F7 !important; }
.adv-panel-ficha {
    border-left: 3px solid var(--adv-primary);
    border-radius: 4px;
    margin-bottom: 6px;
}
/* Los campos de la ficha son de solo lectura: en blanco resaltan sobre el tinte y
   se sigue viendo cuál es cada dato. */
.adv-panel-ficha .mud-input.mud-input-outlined { background: var(--adv-surface); }

/* El % con el que se calculó el concepto, al lado de su descripción. Atenuado y en
   tabular-nums para que los números no bailen entre filas. */
.adv-tasa-concepto {
    color: var(--adv-text-sec);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-left: 3px;
}

.adv-grid-conceptos { table-layout: fixed; width: 100%; }
.adv-grid-conceptos td:nth-child(2) { white-space: normal !important; word-break: break-word; }

/* Chip de estado dentro de un listado de una línea: el chip de MudBlazor viene
   con 32px de alto y estira la fila, así que acá va compacto. Lo usa la columna
   «Firma» del Registro de Planilla, que en el legado es un tag rojo/verde. */
.adv-chip-estado.mud-chip {
    height: 18px;
    min-height: 18px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .2px;
    margin: 0;
    padding: 0 8px;
}

/* Una cifra que sale en rojo porque falta: la diferencia de materia prima de la Orden de
   Producción es negativa cuando el stock no alcanza, igual que la marca el legado. */
.adv-negativo { color: #c62828; }

/* ── Plan de Cuentas: colores de fila del listado anterior ──────────────────
   TR_PlanCuentasWW pinta la fila con WWColumnSuccess cuando la cuenta es de dos
   dígitos y está activa —la cabecera de la clase, «10 EFECTIVO Y EQUIVALENTE»—
   y con WWColumnWarning cuando la cuenta está inactiva. Son los mismos verdes y
   cremas que ya usan Entradas/Salidas para sus estados. */
.adv-fila-clase > td {
    background: #E6F4EA !important;
    color: #1E6B3A !important;
    font-weight: 600;
}
.adv-fila-clase:hover > td {
    background: #DAEDE0 !important;
}

.adv-fila-inactiva > td {
    background: #FAF2CC !important;
}
.adv-fila-inactiva:hover > td {
    background: #F5EABF !important;
}

/* Primera fila de una cabecera de dos niveles (Plan de Cuentas: «Cuentas de
   Destino» sobre Debe/Haber y «Opciones de Cuenta» sobre los tres checks). Va
   más tenue que la fila de títulos para que se lea como un rótulo de grupo. */
.adv-grid-cabecera-grupo th {
    background: #F5F7FA;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ─────────────────────────────────────────────────────────────
   GRILLA DE PREVISUALIZACIÓN DE LOS REPORTES  (2026-08-28)

   Los reportes de Contabilidad nacieron como panel de filtros al 50% y sin
   grilla, porque el legado tampoco la tiene. Se les agregó la
   previsualización —lo mismo que va a salir impreso— y al llevar grilla el
   panel pasa a ancho completo, como el Balance de Comprobación.

   Con columnas de ancho fijo, un texto largo (una glosa, el nombre de un
   auxiliar) se montaba sobre la columna de al lado. Se recorta con elipsis y
   la tabla entera scrollea en horizontal dentro de su contenedor.
   ───────────────────────────────────────────────────────────── */
.adv-grid-reporte table {
    table-layout: fixed;
    /* Con anchos fijos que suman menos que el contenedor la tabla se encogía y quedaba
       un hueco a la derecha; con esto ocupa al menos todo el ancho disponible. */
    width: max-content;
    min-width: 100%;
}

.adv-grid-reporte td,
.adv-grid-reporte th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────
   .text-end  (2026-08-28)

   Las pantallas venían usando class="text-end" para alinear a la derecha las
   columnas de importe. MudBlazor la copia al <td>, pero esa clase no existe
   en ninguna hoja de estilos —no es de MudBlazor, es de Bootstrap—, así que
   no hacía nada: todas las cifras salían pegadas a la izquierda de su
   columna. Se define acá y quedan alineadas en todos los módulos de una vez.
   ───────────────────────────────────────────────────────────── */
.text-end {
    text-align: right !important;
}

/* ─────────────────────────────────────────────────────────────
   CELULAR

   Hasta 767px la pantalla es de un teléfono: el menú deja de ser una barra
   horizontal —donde catorce módulos se apilaban en tres renglones
   desordenados— y pasa a ser una lista vertical que se abre con el botón de
   la barra superior. Los submenús se despliegan ahí mismo, uno debajo del
   otro, en vez de flotar.

   El botón sólo existe en ese modo: de 768px para arriba el menú vuelve a
   ser la barra de siempre.
   ───────────────────────────────────────────────────────────── */
.adv-menu-movil-boton {
    display: none;
    background: none;
    border: 0;
    padding: 6px;
    margin-right: 4px;
    color: var(--adv-primary-dark);
    cursor: pointer;
    line-height: 0;
}

@media (max-width: 767px) {
    .adv-menu-movil-boton { display: inline-flex; }

    /* La barra superior deja sitio: fuera el buscador y el nombre de la empresa. */
    .adv-empresa { display: none !important; }
    .adv-brand-nombre { font-size: 15px !important; }

    /* El menú, vertical y desplegable. */
    .adv-topnav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 0;
        padding: 4px 0;
        max-height: calc(100vh - 56px);
        overflow-y: auto;
    }

    .adv-topnav-abierto { display: flex; }

    .adv-topnav .adv-topnav-link {
        width: 100%;
        justify-content: flex-start !important;
        font-size: 14px !important;
        padding: 10px 14px !important;
        border-radius: 0 !important;
    }

    .adv-menu-dropdown { width: 100%; }

    /* Los submenús se abren en la misma lista, no flotando. */
    .adv-menu-dropdown-panel,
    .adv-menu-flyout-panel {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        border: 0 !important;
        background: rgba(255, 255, 255, .06) !important;
    }

    .adv-menu-dropdown-panel .adv-menu-dropdown-item,
    .adv-menu-flyout-panel .adv-menu-dropdown-item {
        color: #ffffff !important;
        padding: 10px 14px 10px 34px !important;
        font-size: 13px !important;
    }

    .adv-menu-flyout-panel .adv-menu-dropdown-item { padding-left: 52px !important; }

    /* Los listados: la tabla se desplaza en horizontal en vez de romper la página,
       y el encabezado de la pantalla se apila. */
    .adv-listado-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .adv-listado-header .mud-button-root {
        flex: 1 1 auto;
        min-width: 120px;
    }
    /* Los listados se leen como fichas: una por fila, con el rótulo de la columna
       delante de cada dato. Una tabla de ocho o diez columnas no entra en un
       teléfono ni desplazándola de lado. El rótulo sale del `data-label` que
       MudBlazor escribe cuando el MudTd trae `DataLabel`. */
    .mud-table-container {
        overflow-x: visible;
        max-height: none !important;
    }

    .mud-table-container table { min-width: 0; }

    /* El encabezado se esconde: cada dato ya trae su rótulo. Va con el selector de
       MudBlazor porque el suyo —`.mud-table-root .mud-table-head`— gana por
       especificidad a un `.mud-table thead`. */
    .mud-table-root .mud-table-head { display: none; }

    .mud-table tbody tr {
        display: block;
        margin: 0 0 10px;
        padding: 8px 0;
        border: 1px solid var(--adv-border);
        border-radius: var(--adv-radius);
        background: var(--adv-surface);
    }

    .mud-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: auto !important;
        max-width: none !important;
        border: 0 !important;
        padding: 3px 10px !important;
        white-space: normal !important;
        text-align: left !important;
    }

    .mud-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .2px;
        color: var(--adv-text-sec);
    }

    /* Una celda sin dato no ocupa un renglón: en una ficha se nota mucho más que
       en una tabla. */
    .mud-table tbody td:empty { display: none; }

    /* La celda de acciones no tiene rótulo: los botones se van a la derecha. */
    .mud-table tbody td:not([data-label])::before {
        content: "";
        flex: 0 0 0;
    }

    /* La última celda son las acciones: los botones se agrupan a la derecha y el
       rótulo sobra, se ven los íconos. */
    .mud-table tbody td:last-child {
        justify-content: flex-end;
        gap: 4px;
    }

    .mud-table tbody td:last-child::before {
        content: "";
        flex: 0 0 0;
    }

    /* El pie con los totales se lee igual que una fila. */
    .mud-table tfoot tr { display: block; }

    .mud-table tfoot td,
    .mud-table tfoot th {
        display: flex;
        justify-content: space-between;
        border: 0 !important;
        padding: 3px 10px !important;
    }

    /* Las pantallas de carga: menos margen, que el ancho útil es poco. */
    .mud-main-content .mud-paper { padding: 12px !important; }

    /* Los diálogos, a pantalla casi completa. */
    .mud-dialog {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px !important;
    }
}

/* ── Combo «Mes» de planillas ────────────────────────────────────────────────
   Cada opción muestra el mes y, debajo y en chico, si el período está ABIERTO o
   CERRADO, como el combo del sistema anterior. */
.adv-periodo-mes {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.adv-periodo-mes small {
    font-size: .68rem;
    letter-spacing: .04em;
    color: var(--adv-text-sec);
}

/* El estado se lee de un vistazo: verde el período abierto, rojo el cerrado. */
.adv-periodo-mes small.adv-periodo-abierto,
.adv-periodo-estado-abierto .mud-input-helper-text {
    color: #1D9E75;
    font-weight: 600;
}

.adv-periodo-mes small.adv-periodo-cerrado,
.adv-periodo-estado-cerrado .mud-input-helper-text {
    color: var(--adv-danger);
    font-weight: 600;
}

/* Aviso en naranja debajo de un campo (p. ej. «Venta muestra: no afecta la cuenta por cobrar»). */
.adv-ayuda-naranja .mud-input-helper-text {
    color: #E07B00;
    font-weight: 600;
}

/* El renglón del estado se saca del flujo: si ocupara alto, el campo Mes mediría 23px más
   que el de Año y los dos combos dejarían de estar alineados. */
.adv-mes-planilla { position: relative; }

.adv-mes-planilla .mud-input-control-helper-container {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 1px;
    white-space: nowrap;
    pointer-events: none;
}

/* ── Buscador de opciones de la barra superior ─────────────────────────────
   El panel cuelga del campo, por encima de todo lo demás: la barra tiene su
   propio apilamiento y sin el z-index el menú azul le pasa por encima. */
.adv-topbar-buscador { position: relative; display: flex; align-items: center; }

.adv-buscador-panel {
    position: absolute; top: calc(100% + 4px); right: 0;
    width: 380px; max-width: 90vw;
    background: var(--adv-surface, #ffffff);
    border: 1px solid var(--adv-border, #e0e0e0);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    z-index: 1500;
    overflow: hidden;
}

.adv-buscador-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px; cursor: pointer;
    border-bottom: 1px solid var(--adv-border, #eeeeee);
}
.adv-buscador-item:last-child { border-bottom: none; }

/* El resaltado es el mismo celeste del menú, para que se lea como la misma cosa. */
.adv-buscador-item-sel { background: var(--adv-menu-hover, #e3f2fd); }

.adv-buscador-texto { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.adv-buscador-titulo { font-size: 13px; font-weight: 600; color: var(--adv-text); }

/* La ruta del menú («Compras › Reportes») en chico: sin ella no se distinguen
   dos opciones que se llaman igual en módulos distintos. */
.adv-buscador-ruta {
    font-size: 11px; color: var(--adv-text-sec);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.adv-buscador-vacio { padding: 12px; font-size: 12px; color: var(--adv-text-sec); }

/* ── Acciones de fila bloqueadas ──────────────────────────────────────────
   Ver Components/Shared/AdvAccion. La accion que no se puede usar NO se
   esconde: se apaga y queda en su lugar, asi los iconos no se corren de fila a
   fila y el usuario no termina haciendo clic en el de al lado. El motivo sale
   al pasar el mouse, sobre el <span> —un boton deshabilitado no recibe eventos
   del mouse y su propio title no se mostraria nunca—. */
.adv-accion { display: inline-flex; }
.adv-accion-bloqueada { cursor: not-allowed; }
.adv-accion-bloqueada .mud-icon-button { opacity: .32; }

/* Las acciones de la fila en una sola linea: el menu de «mas acciones» tiene que
   quedar pegado a los iconos sueltos, no debajo. Ver Components/Shared/AdvAcciones. */
.adv-acciones-fila { display: inline-flex; align-items: center; white-space: nowrap; }

/* La marca de «tiene adjuntos» de los documentos que no tienen pantalla de
   archivos: ocupa siempre el mismo ancho aunque no haya nada, asi las acciones
   de al lado no se corren de fila a fila. */
.adv-accion-marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* El mismo alto que un MudIconButton Small: sin esto el icono queda mas arriba
       que los botones de al lado y la fila se ve despareja. */
    width: 30px;
    height: 30px;
}

/* ─────────────────────────────────────────────────────────────
   PANTALLA DE INICIO (Components/Pages/Home.razor)
   Tres bloques: indicadores, atajos y módulos. Todo se dibuja a partir del
   menú del usuario, así que estas reglas no saben nada de módulos concretos.
   ───────────────────────────────────────────────────────────── */

/* Rótulo de cada bloque. Discreto a propósito: son separadores, no títulos que
   compitan con el nombre de la pantalla. */
/* El rótulo del módulo es una etiqueta, no un título: chico, en versalitas y
   gris. Lo que tiene que resaltar en la pantalla son las cifras, no los
   carteles. El aire de arriba es el que separa un módulo del anterior. */
.adv-inicio-seccion {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--adv-text-sec);
    margin: 0 0 7px 2px;
}

/* ── Indicadores ─────────────────────────────────────────────── */
.adv-inicio-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 14px 16px;
    cursor: pointer;
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-radius);
    /* La franja de color a la izquierda distingue los cuatro de un vistazo sin
       necesidad de leer el rótulo. El color concreto lo pone la regla de abajo. */
    border-left: 4px solid var(--adv-primary);
    transition: box-shadow .15s ease, transform .15s ease;
}
.adv-inicio-kpi:hover {
    box-shadow: 0 4px 14px rgba(0, 64, 128, .12);
    transform: translateY(-1px);
}

.adv-inicio-kpi-cabecera {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--adv-text-sec);
}
.adv-inicio-kpi-cabecera .mud-icon-root { font-size: 18px; }
/* Mismo criterio adentro del recuadro: el rótulo acompaña, la cifra manda. */
.adv-inicio-kpi-titulo {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--adv-text-sec);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adv-inicio-kpi-valor {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--adv-text);
    /* Cifras de igual ancho: sin esto las columnas de recuadros contiguos bailan. */
    font-variant-numeric: tabular-nums;
}

/* El saldo en la otra moneda va debajo y más chico: acompaña a la cifra
   principal, no compite con ella (no se suman, son dos totales distintos). */
.adv-inicio-kpi-segunda {
    font-size: 13px;
    font-weight: 600;
    color: var(--adv-text-sec);
    font-variant-numeric: tabular-nums;
}

/* El pie se va al fondo del recuadro. En una fila conviven recuadros de un número
   —altos de tres renglones— con los de cinco renglones de ranking, y todos toman la
   altura del más alto: sin esto el de «0» queda con el texto arriba y un hueco
   blanco abajo, como si le faltara algo. */
.adv-inicio-kpi-pie {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
}
.adv-inicio-kpi-detalle { font-size: 10.5px; color: var(--adv-text-sec); line-height: 1.3; }

.adv-inicio-var {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
}
.adv-inicio-var .mud-icon-root { font-size: 14px; }
.adv-inicio-var-sube { color: #1E8E5A; background: #E6F4EE; }
.adv-inicio-var-baja { color: var(--adv-danger); background: var(--adv-danger-bg); }

/* Un color por MÓDULO y no por indicador: los recuadros se leen agrupados, así
   que el color que sirve es el que dice de qué módulo es cada bloque. Va por el
   grupo que manda la API y no por la posición: un usuario que no ve Ventas
   sigue viendo Compras con el color de Compras. */
.adv-inicio-kpi[data-grupo="Almacén"]      { border-left-color: var(--adv-primary); }
.adv-inicio-kpi[data-grupo="Ventas"]       { border-left-color: #1E8E5A; }
.adv-inicio-kpi[data-grupo="Compras"]      { border-left-color: var(--adv-accent); }
.adv-inicio-kpi[data-grupo="Bancos"]       { border-left-color: var(--adv-info); }
.adv-inicio-kpi[data-grupo="Contabilidad"] { border-left-color: #7E57C2; }

/* Los que avisan de algo que ya se pasó de fecha van en rojo, sin importar el
   módulo: es lo primero que el ojo tiene que encontrar en la pantalla. */
.adv-inicio-kpi[data-clave="cobranza-vencida"],
.adv-inicio-kpi[data-clave="pagos-vencidos"],
.adv-inicio-kpi[data-clave="stock-minimo"]     { border-left-color: var(--adv-danger); }

/* ── Atajos (favoritos y últimas pantallas) ──────────────────── */
.adv-inicio-accesos {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.adv-inicio-acceso {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    cursor: pointer;
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-radius);
    background: var(--adv-surface);
    font-size: 13px;
    color: var(--adv-text);
}
.adv-inicio-acceso:hover { background: var(--adv-primary-light); }
/* El ícono va en el azul de la marca y sobre un fondo suave: gris sobre blanco los
   seis atajos se leían como una lista de texto, y lo que se busca acá es reconocer
   la pantalla de un golpe de vista, sin leer. */
.adv-inicio-acceso .mud-icon-root {
    font-size: 18px;
    color: var(--adv-primary);
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 4px;
    border-radius: 6px;
    background: var(--adv-primary-light);
}

/* El favorito se distingue del reciente: es el que el usuario eligió. */
.adv-inicio-favorito .mud-icon-root {
    color: var(--adv-accent);
    background: rgba(245, 166, 35, .14);
}

/* El nombre se queda con todo el sobrante y empuja la estrella al borde derecho,
   así las estrellas de todos los renglones quedan alineadas. */
.adv-inicio-acceso-texto {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Estrella de favorito ────────────────────────────────────── */
.adv-inicio-estrella {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    /* Apagada mientras no se pase por encima: marcar favoritos es opcional y no
       tiene por qué llenar la pantalla de estrellas grises. */
    opacity: .25;
    transition: opacity .15s ease;
}
.adv-inicio-acceso:hover .adv-inicio-estrella { opacity: .7; }
.adv-inicio-estrella:hover { opacity: 1 !important; }
.adv-inicio-estrella-activa { opacity: 1 !important; }
.adv-inicio-estrella-activa .mud-icon-root { color: var(--adv-accent) !important; }

/* Los renglones de los indicadores que son una lista: lo que más rota, el
   saldo de cada cuenta. La cifra va a la derecha y alineada entre renglones,
   que es como se leen las columnas de plata en todo el sistema. */
.adv-inicio-kpi-filas {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 6px 0 2px;
}

.adv-inicio-kpi-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    line-height: 1.35;
}

.adv-inicio-kpi-fila-texto {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Ranking ─────────────────────────────────────────────────
   El puesto y la barra son lo que convierte una lista de cinco renglones en algo
   que se lee de un vistazo: el número ordena y la barra dice cuánto pesa cada uno
   contra el primero. Sin eso hay que comparar cifras a ojo, que es justo lo que
   uno no hace al entrar a la pantalla. */
.adv-inicio-kpi-ranking .adv-inicio-kpi-fila {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
    padding: 2px 0;
}

.adv-inicio-kpi-puesto {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--adv-primary-light);
    color: var(--adv-primary);
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/* El primero se destaca: en un ranking, el que encabeza es el dato. */
.adv-inicio-kpi-ranking .adv-inicio-kpi-fila:first-child .adv-inicio-kpi-puesto {
    background: var(--adv-primary);
    color: #fff;
}

.adv-inicio-kpi-barra {
    flex: 1 0 100%;
    margin-left: 24px;
    height: 3px;
    margin-top: 1px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .06);
    overflow: hidden;
}

.adv-inicio-kpi-barra-lleno {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--adv-primary);
    opacity: .55;
}

/* La barra toma el color del módulo, como la franja del recuadro. */
.adv-inicio-kpi[data-grupo="Ventas"] .adv-inicio-kpi-barra-lleno  { background: #1E8E5A; }
.adv-inicio-kpi[data-grupo="Compras"] .adv-inicio-kpi-barra-lleno { background: var(--adv-accent); }

/* El código del producto acompaña al nombre: más chico y en gris, para que el
   ojo lea primero el nombre y encuentre el código sólo cuando lo busca. */
.adv-inicio-kpi-fila-detalle {
    color: var(--adv-text-sec);
    font-size: 10px;
    margin-left: 5px;
}

.adv-inicio-kpi-fila-valor {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Celular ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .adv-inicio-kpi-valor { font-size: 21px; }
    /* La estrella no aparece con el hover porque no hay puntero: se deja visible. */
    .adv-inicio-estrella { opacity: .6; }
}

/* ─── Grillas dentro del visor de un documento ─────────────────────────────
   Cuando el diálogo es sólo para mirar —Autorización de Pedidos— el detalle y
   la cuenta corriente no pueden estirar la ventana hasta el pie de la pantalla:
   crecen hasta donde se ve cómodo y de ahí en más la grilla scrollea sola, con
   sus títulos fijos arriba. */
.adv-scroll-detalle {
    max-height: 300px;
    overflow: auto;
}
.adv-scroll-detalle .adv-grid-detalle thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--adv-surface, #FFFFFF);
}

/* Documento con la fecha de vencimiento pasada: es el dato que decide una
   autorización, así que la fecha y el saldo se leen en rojo. */
.adv-cc-vencido {
    color: #C62828 !important;
    font-weight: 600;
}

/* El «Total :» del sistema anterior, al pie de la propia grilla. */
.adv-grid-detalle tfoot tr.adv-cc-total > td {
    font-weight: 700 !important;
    border-top: 2px solid var(--adv-primary);
    background: var(--adv-surface, #FFFFFF);
    position: sticky;
    bottom: 0;
}

/* ── Ayuda (burbuja flotante) ─────────────────────────────────────────
   Va fija abajo a la derecha, por encima de todo menos de los diálogos: si tapara
   un diálogo, el botón quedaría encima del «Guardar» de cualquier formulario.
   Ver Components/Shared/AdvChatAyuda. */
.adv-ayuda { position: fixed; right: 20px; bottom: 20px; z-index: 1200;
             display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

.adv-ayuda-burbuja { width: 54px; height: 54px; border-radius: 50% !important;
    background: var(--adv-primary) !important; color: #fff !important;
    box-shadow: 0 6px 20px rgba(0, 64, 128, .35); align-self: flex-end; }
.adv-ayuda-burbuja:hover { background: var(--adv-primary-dark) !important; }

.adv-ayuda-panel { width: 380px; max-width: calc(100vw - 40px); height: 520px;
    max-height: calc(100vh - 130px); display: flex; flex-direction: column;
    background: var(--adv-surface); border: 1px solid var(--adv-border);
    border-radius: 12px; overflow: hidden; box-shadow: 0 14px 44px rgba(0, 64, 128, .22); }

.adv-ayuda-cab { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px;
    background: var(--adv-primary); color: #fff; }
.adv-ayuda-cab-txt { line-height: 1.2; }
.adv-ayuda-tit { font-weight: 700; font-size: 14px; }
.adv-ayuda-sub { font-size: 11px; opacity: .85; }

/* Desde el 04/10/2026 la burbuja es un BUSCADOR en los manuales (ya no un chat):
   arriba la caja de búsqueda y abajo los resultados, cada uno un botón que abre el manual. */
.adv-ayuda-caja { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 12px;
    border-bottom: 1px solid var(--adv-border); }
.adv-ayuda-caja .adv-ayuda-input { flex: 1 1 auto; }

.adv-ayuda-hilo { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px; }
.adv-ayuda-esperando { display: flex; align-items: center; gap: 8px; color: var(--adv-text-sec); font-size: 13px; }
.adv-ayuda-nota { font-size: 12px; line-height: 1.5; color: var(--adv-text-sec); }
.adv-ayuda-rotulo { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--adv-text-sec); }

.adv-ayuda-resultado { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; padding: 9px 11px;
    border: 1px solid var(--adv-border); border-radius: 8px; background: var(--adv-surface);
    font-family: inherit; color: var(--adv-text); text-align: left; cursor: pointer; }
.adv-ayuda-resultado:hover { border-color: var(--adv-primary); background: var(--adv-primary-light); }
.adv-ayuda-resultado > span { display: block; text-align: left; }
.adv-ayuda-res-camino { font-size: 11px; color: var(--adv-text-sec); }
.adv-ayuda-res-titulo { font-size: 13.5px; font-weight: 700; color: var(--adv-primary); }
.adv-ayuda-res-texto { font-size: 12px; line-height: 1.45; color: var(--adv-text); }
.adv-ayuda-res-texto mark { background: #fff1b8; color: inherit; padding: 0 1px; border-radius: 2px; }

/* En celular ocupa casi toda la pantalla: un panel de 380px no entra. */
@media (max-width: 600px) {
    .adv-ayuda { right: 12px; bottom: 12px; left: 12px; align-items: stretch; }
    .adv-ayuda-panel { width: auto; height: calc(100vh - 150px); }
}

/* ── Selector de dos opciones (MudToggleGroup) ────────────────────────────────
   Ej.: el T/D «03 Boleta de Venta / 01 Factura» de Facturar Pedido.
   MudBlazor le da 8px de radio a cada botón adentro de un grupo con 4px: el
   bloque de color del elegido queda redondeado dentro de un marco recto y se
   ven cuñas blancas en las esquinas. Se cuadran los botones y el grupo recorta.
   Va acá, y no en una pantalla, para que valga en todos los que se agreguen. */
.mud-toggle-group {
    overflow: hidden;
    border-radius: var(--adv-radius, 4px);
}

.mud-toggle-group .mud-toggle-item {
    border-radius: 0 !important;
    margin: 0;
}

/* La línea entre opciones, del color del marco: si queda en el color por
   defecto se ve como otro borde blanco contra el bloque de color. */
.mud-toggle-group.mud-toggle-group-outlined .mud-toggle-item.mud-toggle-item-delimiter:not(:last-child) {
    border-right: 1px solid var(--adv-primary);
}

/* ── Avisos (snackbar) ────────────────────────────────────────────────────────
   Van arriba a la derecha. Sin este corrimiento quedan pegados al borde y se
   montan sobre la barra azul del menú, que es justo donde está la vista. */
.mud-snackbar-location-top-right {
    top: 84px !important;
    right: 16px !important;
}

@media (max-width: 767px) {
    /* En celular la cabecera es más baja y el menú se despliega aparte. */
    .mud-snackbar-location-top-right { top: 64px !important; }
}

/* ── Grilla de Control de Asistencia ──────────────────────────────────────────
   Trabajadores en las filas y los 31 días en las columnas. La primera columna
   queda fija: al desplazarse a la derecha, sin eso se pierde de vista de quién
   es la fila, que es el mismo problema que ya tenía la plantilla de 67 columnas. */
.adv-asis-cont { overflow-x: auto; border: 1px solid var(--adv-border); border-radius: 8px; }
.adv-asis { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.adv-asis th, .adv-asis td { border-bottom: 1px solid var(--adv-border); padding: 0; }

.adv-asis-trab { position: sticky; left: 0; z-index: 2; background: var(--adv-surface);
    padding: 6px 12px; border-right: 1px solid var(--adv-border); min-width: 220px; text-align: left; }
thead .adv-asis-trab { z-index: 3; background: var(--adv-primary); color: #fff;
    font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; }
.adv-asis tbody tr:nth-child(even) .adv-asis-trab,
.adv-asis tbody tr:nth-child(even) td { background: var(--adv-surface-alt, #F4F7FB); }
.adv-asis-trab .n { display: block; font-weight: 600; line-height: 1.25; }
.adv-asis-trab .c { font-size: 11px; color: var(--adv-text-sec); }

.adv-asis-dia { background: var(--adv-primary); color: #fff; width: 30px; padding: 4px 0;
    text-align: center; font-size: 11px; line-height: 1.2; }
.adv-asis-dia small { display: block; font-size: 9px; opacity: .75; }
.adv-asis-dia.fds { background: var(--adv-primary-dark, #003366); }
.adv-asis-tot { background: var(--adv-primary); color: #fff; padding: 4px 10px; text-align: right;
    font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
    min-width: 62px; border-left: 1px solid rgba(255,255,255,.25); }

.adv-asis-celda { width: 30px; height: 32px; text-align: center; cursor: pointer;
    font-size: 10.5px; font-weight: 700; border-right: 1px solid var(--adv-border); }
.adv-asis-celda:hover { outline: 2px solid var(--adv-primary); outline-offset: -2px; }
.adv-asis-celda.sel { outline: 2px solid #C55A11; outline-offset: -2px; }
.adv-asis-num { text-align: right; padding: 6px 10px; font-size: 12px; white-space: nowrap;
    min-width: 62px; border-left: 1px solid var(--adv-border); }

/* El color dice el estado sin tener que leer la letra. */
.e-PR { background: rgba(22,163,74,.14);  color: #16A34A; }
.e-TA { background: rgba(180,83,9,.20);   color: #B45309; }
.e-FA { background: rgba(220,38,38,.15);  color: #DC2626; }
.e-JU { background: rgba(0,64,128,.14);   color: #004080; }
.e-DE { background: #EAF0F8;              color: #64748B; }
.e-FE { background: rgba(197,90,17,.16);  color: #C55A11; }
.e-SM { background: rgba(220,38,38,.28);  color: #DC2626; box-shadow: inset 0 0 0 2px #DC2626; }

.adv-asis-leyenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px;
    font-size: 12.5px; color: var(--adv-text-sec); }
.adv-asis-leyenda i { font-style: normal; font-weight: 700; font-size: 10.5px;
    padding: 2px 6px; border-radius: 4px; margin-right: 5px; }

.adv-asis-dh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 18px; background: #EAF0F8; border-bottom: 1px solid var(--adv-border); }
.adv-asis-dh b { font-size: 15px; }
.adv-asis-dh span { font-size: 13px; color: var(--adv-text-sec); }
.adv-asis-dl { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0;
    border-bottom: 1px dashed var(--adv-border); font-size: 13.5px; }
.adv-asis-dl:last-child { border-bottom: 0; }

/* Lista de centros de costo del diálogo de usuario de Rinde Gastos: son muchos y la
   selección se hace con checkbox, así que la caja scrollea en vez de estirar el diálogo. */
.adv-centros-lista {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--adv-border, #E0E0E0);
    border-radius: 4px;
}

/* La moneda de origen del documento en la Cobranza: la columna de saldo que de verdad
   corresponde va resaltada. Con Saldo MN y Saldo ME iguales era fácil leer la de la otra
   moneda y cobrar de más o de menos. */
.adv-moneda-origen {
    font-weight: 600;
    color: var(--adv-primary, #1E40AF) !important;
    background: #EFF6FF;
}

/* El aviso «Requerido para este tipo de movimiento (es una transferencia)» del Almacén
   Destino, en el naranja de la marca: es una condición que el usuario tiene que cumplir
   antes de grabar, no un texto de ayuda más, y en gris se perdía debajo del campo. */
.adv-helper-aviso .mud-input-helper-text {
    color: var(--adv-warning) !important;
    font-weight: 600;
}

/* ══ Visor de adjuntos ══════════════════════════════════════════════
   El archivo se abre DENTRO del sistema, en un diálogo propio encima del de
   «Archivos del Documento», y no en otra pestaña: así no se pierde de vista el
   documento que se estaba mirando.

   Va como diálogo y no como una capa dentro del otro porque el diálogo de
   MudBlazor lleva un transform, y adentro de él «position: fixed» se ancla al
   diálogo en vez de a la pantalla: el visor terminaba recortado. */
.adv-visor-cuerpo { display: flex; flex-direction: column; }
.adv-visor-cuerpo:focus { outline: none; }

.adv-visor-cab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--adv-border);
}
.adv-visor-titulo { min-width: 0; flex: 1; }
.adv-visor-titulo b {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adv-visor-titulo span { font-size: 12px; color: var(--adv-text-sec); }
.adv-visor-contador {
    font-size: 12px;
    color: var(--adv-text-sec);
    border: 1px solid var(--adv-border);
    padding: 3px 9px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* El fondo oscuro no es decoración: una imagen con fondo blanco o un PDF con
   márgenes se recortan solos contra él. */
.adv-visor-lienzo {
    position: relative;
    background: #2B3648;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    margin-top: 12px;
    min-height: 320px;
    overflow: auto;
}
.adv-visor-lienzo img {
    max-width: 100%;
    max-height: 58vh;
    background: #fff;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
}
.adv-visor-lienzo iframe {
    width: 100%;
    height: 58vh;
    border: 0;
    background: #fff;
}
.adv-visor-sin-vista { color: #D6DEE9; text-align: center; max-width: 34ch; }
.adv-visor-sin-vista p { font-size: 13.5px; margin: 8px 0 0; color: #AEBACB; }

.adv-visor-flecha.mud-icon-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .9);
    color: #16202E;
    border-radius: 0;
    z-index: 1;
}
.adv-visor-flecha.mud-icon-button:hover { background: #fff; }
.adv-visor-flecha.izq { left: 10px; }
.adv-visor-flecha.der { right: 10px; }

/* La tira de miniaturas sólo aparece con más de un adjunto. */
.adv-visor-tira {
    display: flex;
    gap: 8px;
    padding: 10px 0 0;
    overflow-x: auto;
}
.adv-visor-mini {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border: 1px solid var(--adv-border);
    background: #fff;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.adv-visor-mini img { width: 100%; height: 100%; object-fit: cover; }
.adv-visor-mini:hover { border-color: var(--adv-primary); }
.adv-visor-mini[aria-current="true"] {
    border-color: var(--adv-primary);
    box-shadow: inset 0 0 0 1px var(--adv-primary);
}

.adv-visor-teclas { flex: 1; font-size: 12px; color: var(--adv-text-sec); }

@media (max-width: 767px) {
    .adv-visor-lienzo { min-height: 0; padding: 8px; }
    .adv-visor-lienzo iframe { height: 48vh; }
    .adv-visor-teclas { display: none; }
}

/* ── Campo fijo: un combo que el documento ya resolvió ─────────
   El gris de los campos que no se editan (más arriba) sólo alcanza a
   input:read-only, y un MudSelect muestra su valor en un <div>, no en
   un input — así que un combo deshabilitado quedaba blanco al lado de
   un Cliente o una Dirección grises. Con esta clase se ve igual que
   ellos y deja de hacer falta una leyenda que lo explique. ── */
.adv-campo-fijo .mud-input,
.adv-campo-fijo .mud-input-slot,
.adv-campo-fijo input:read-only,
.adv-campo-fijo input:disabled {
    background-color: #F1F3F4 !important;
    color: var(--adv-text-sec) !important;
}

/* ── Desglose del stock por almacén ────────────────────────────────────────────
   En las pantallas de venta el Stock Actual del buscador abre la ventana con los
   almacenes que lo componen (el WC_StockProducto del sistema anterior). El número
   se marca como clicable; en las pantallas de almacén no lleva esta clase y queda
   como estaba, porque ahí el stock ya es el de un almacén concreto. */
.adv-stock-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.adv-stock-link:hover { filter: brightness(0.92); }
/* Stock negativo dentro de la ventana del desglose. */
.adv-stock-bad { color: var(--adv-danger); }

/* Migración de Ventas: las cuatro acciones en un renglón y a la misma altura. El botón de
   «Exportar» es un MudMenu y el de archivo un MudFileUpload, que no traen el alto de los
   MudButton; sin esto quedan de distinto porte aunque estén en la misma fila. */
.adv-acciones-migracion > * > .mud-button-root,
.adv-acciones-migracion > .mud-button-root { height: 36px; }

/* ── Switch marcado y deshabilitado ─────────────────────────────────────────
   MudBlazor pinta de gris TODO switch deshabilitado, encendido o apagado. En una
   pantalla de sólo lectura eso borra justamente el dato que se fue a mirar: el
   usuario abría un documento de compra y no podía saber si estaba marcado
   «Afecta Activo Fijo» (Revisión 14).

   La clase se pone únicamente cuando el valor es verdadero, así que el apagado
   sigue gris —que es lo correcto— y sólo el encendido recupera el color. El
   cursor queda en "default": sigue sin poder tocarse, no hay que sugerir que sí. */
.adv-switch-marcado.mud-disabled .mud-switch-thumb,
.adv-switch-marcado .mud-disabled .mud-switch-thumb {
    color: var(--adv-primary) !important;
}
.adv-switch-marcado.mud-disabled .mud-switch-track,
.adv-switch-marcado .mud-disabled .mud-switch-track {
    background: var(--adv-primary) !important;
    opacity: 0.45 !important;
}
.adv-switch-marcado.mud-disabled .mud-switch-label,
.adv-switch-marcado .mud-disabled + .mud-switch-label {
    color: var(--adv-text) !important;
}

/* Pasos de un proceso (Cierre de Costos y los que declaren «Pasos»): uno por
   renglón, con viñeta y la misma tinta secundaria de la descripción. Sin esto
   la <ul> hereda el margen del navegador y se despega del párrafo de arriba. */
.adv-proceso-pasos {
    margin: 0 0 0 4px;
    padding-left: 18px;
    list-style: disc;
    color: var(--mud-palette-text-secondary, #616161);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────
   AVISO DE RECONEXIÓN (wwwroot/js/advReconexion.js, elemento en App.razor)
   (definido 2026-09-23)

   Reemplaza el «Rejoining the server» de Blazor. Tres grados, según cuánto tarde:
     · adv-rc-barra: una línea fina animada arriba, sin tapar nada;
     · adv-rc-aviso: la misma línea más una cajita «Reconectando con el servidor…» y un velo
       que frena los clics (con el circuito caído no llegarían a ninguna parte);
     · adv-rc-fallo: la cajita con «Reintentar» y «Recargar».
   Sin ninguna de esas clases no se ve nada. Las clases components-reconnect-* que agrega
   Blazor se ignoran a propósito: el JS decide con sus propios tiempos.
   ───────────────────────────────────────────────────────────── */
#components-reconnect-modal {
    position: fixed;
    inset: 0;
    z-index: 3100;                 /* sobre el indicador de carga (3000) */
    pointer-events: none;
    display: none;
}

#components-reconnect-modal.adv-rc-barra,
#components-reconnect-modal.adv-rc-aviso,
#components-reconnect-modal.adv-rc-fallo {
    display: block;
}

#components-reconnect-modal.adv-rc-aviso,
#components-reconnect-modal.adv-rc-fallo {
    pointer-events: auto;
    background: rgba(245, 247, 250, 0.45);
}

.adv-rc-linea {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    overflow: hidden;
    background: rgba(0, 64, 128, 0.15);
}

.adv-rc-linea::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30%;
    background: var(--adv-primary, #004080);
    animation: adv-rc-deslizar 1.2s ease-in-out infinite;
}

.adv-rc-fallo .adv-rc-linea { display: none; }

@keyframes adv-rc-deslizar {
    from { left: -30%; }
    to   { left: 100%; }
}

.adv-rc-caja {
    display: none;
    position: absolute;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
    padding: 10px 18px;
    border-radius: 6px;
    background: #FFFFFF;
    color: #1A2332;
    font: 500 0.875rem/1.4 Roboto, Arial, sans-serif;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    border-left: 4px solid var(--adv-primary, #004080);
}

.adv-rc-aviso .adv-rc-caja,
.adv-rc-fallo .adv-rc-caja { display: flex; }

.adv-rc-fallo .adv-rc-caja { border-left-color: #C62828; }

.adv-rc-aro {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(0, 64, 128, 0.2);
    border-top-color: var(--adv-primary, #004080);
    animation: adv-rc-girar .8s linear infinite;
}

.adv-rc-fallo .adv-rc-aro { display: none; }

@keyframes adv-rc-girar { to { transform: rotate(360deg); } }

.adv-rc-botones { display: none; gap: 8px; }
.adv-rc-fallo .adv-rc-botones { display: inline-flex; }

.adv-rc-botones button {
    min-width: 96px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    font: 500 0.8125rem Roboto, Arial, sans-serif;
    cursor: pointer;
    color: #FFFFFF;
    background: var(--adv-primary, #004080);
}

.adv-rc-botones .adv-rc-recargar {
    color: var(--adv-primary, #004080);
    background: transparent;
    border: 1px solid var(--adv-primary, #004080);
}

@media (prefers-reduced-motion: reduce) {
    .adv-rc-linea::before { animation-duration: 3s; }
    .adv-rc-aro { animation-duration: 2s; }
}

/* ─── Combos desplegados: una sola barra de desplazamiento ────────────────────
   El MudSelect pone el tope de 300px a la VEZ en el popover y en su lista. El
   popover tiene 1px de borde arriba y abajo, así que por dentro le quedan 298px
   y la lista de 300px lo desborda por 2px: aparecían dos barras, la de la lista
   y otra del popover. La lista es la que tiene que scrollear; el popover no. */
.mud-popover:has(> .mud-list) {
    overflow-y: hidden;
}

/* Renta de 5ta: debajo de cada concepto, cómo salió el número. */
.adv-renta-calc {
    font-size: 11.5px;
    color: var(--adv-text-secondary, #5F6B7A);
    line-height: 1.35;
    margin-top: 2px;
    white-space: normal;
}

/* Control de Asistencia: día de descanso o feriado trabajado (va con sobretasa del 100 %). */
.adv-asis-celda.desc-trab { box-shadow: inset 0 -3px 0 #C55A11; font-weight: 700; }

/* Histórico por Trabajador: concepto × mes, con la celda que varió resaltada. */
.adv-hist-wrap { overflow-x: auto; }
.adv-hist { border-collapse: collapse; width: 100%; font-size: 12px; }
.adv-hist th { background: var(--mud-palette-primary); color: #fff; padding: 6px 8px; text-align: right; white-space: nowrap; }
.adv-hist td { padding: 4px 8px; text-align: right; border-bottom: 1px solid #e3e8ef; white-space: nowrap; }
.adv-hist th.adv-hist-sunat, .adv-hist td.adv-hist-sunat { text-align: left; width: 56px; }
.adv-hist th.adv-hist-concepto, .adv-hist td.adv-hist-concepto { text-align: left; min-width: 260px; white-space: normal; }
.adv-hist tr.adv-hist-seccion td { background: #eef2f7; font-weight: 700; text-align: left; color: var(--mud-palette-primary); }
.adv-hist tr.adv-hist-total td { font-weight: 600; }
.adv-hist tr.adv-hist-neto td { font-weight: 700; background: #e8f5e9; }
.adv-hist td.adv-hist-tot { font-weight: 700; background: #f5f7fa; }
.adv-hist-var { background: #fff3cd !important; }
.adv-listado-header .adv-hist-trab .mud-select { width: 440px !important; }
.adv-listado-header .adv-hist-ano .mud-select { width: 130px !important; }
.adv-listado-header .adv-hist-ano, .adv-listado-header .adv-hist-trab { flex: 0 0 auto; }
/* Cliente 360: el combo muestra la razón social completa (la regla general lo deja en 158px). */
.adv-listado-header .mud-select.adv-cli360-combo { width: 640px !important; max-width: 100%; flex: 0 1 auto; }


/* ── CRM: Tablero Comercial (/crm/dashboard) ─────────────────
   Banda de KPIs, luego paneles en grilla de 2 y 3 columnas que se apilan
   en pantallas angostas. El «Modo TV» lo lleva a pantalla completa. */
.adv-dash { display: flex; flex-direction: column; gap: 14px; }
.adv-dash-tv {
    position: fixed; inset: 0; z-index: 1300; overflow: auto;
    background: var(--adv-bg); padding: 18px 22px 32px;
}
.adv-dash-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; }
.adv-dash-sub { color: var(--adv-text-sec); font-size: 12.5px; margin-top: 2px; }
.adv-dash-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adv-dash-chip {
    background: var(--adv-surface); border: 1px solid var(--adv-border); border-radius: var(--adv-radius);
    padding: 6px 12px; font: inherit; font-size: 13px; color: var(--adv-text); cursor: pointer;
}
.adv-dash-chip:hover { border-color: var(--adv-primary); }
.adv-dash-chip.on { background: var(--adv-primary); border-color: var(--adv-primary); color: #fff; }
.adv-dash-chip:focus-visible { outline: 2px solid var(--adv-accent); outline-offset: 2px; }

.adv-dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.adv-dash-kpi {
    background: var(--adv-surface); border: 1px solid var(--adv-border); border-left: 3px solid var(--adv-primary);
    border-radius: var(--adv-radius); padding: 10px 14px; display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.adv-dash-kpi .l { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; color: var(--adv-text-sec); }
.adv-dash-kpi .v { font-size: 22px; font-weight: 700; color: var(--adv-primary); font-variant-numeric: tabular-nums; }
.adv-dash-kpi .d { font-size: 12px; color: var(--adv-text-sec); }
.adv-dash .up { color: #1E8E5A !important; }
.adv-dash .down { color: #C0392B !important; }

.adv-dash-g2 { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; }
.adv-dash-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1000px) { .adv-dash-g2, .adv-dash-g3 { grid-template-columns: 1fr; } }

.adv-dash-panel {
    background: var(--adv-surface); border: 1px solid var(--adv-border); border-radius: var(--adv-radius);
    padding: 12px 16px; min-width: 0;
}
.adv-dash-panel h3, .adv-dash-insight h3 {
    margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--adv-text);
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.adv-dash-panel h3 small { font-weight: 400; font-size: 11.5px; color: var(--adv-text-sec); }
.adv-dash-panel > svg { display: block; width: 100%; height: auto; }
.adv-dash-etapa { cursor: pointer; }
.adv-dash-etapa:hover rect { opacity: .85; }
.adv-dash-etapa-txt { fill: #fff; font-size: 13px; font-weight: 600; paint-order: stroke; stroke: rgba(0,0,0,.35); stroke-width: 2px; }
.adv-dash-muted { fill: var(--adv-text-sec); color: var(--adv-text-sec); font-size: 12px; }
.adv-dash-txt { fill: var(--adv-text); font-size: 12.5px; }
.adv-dash-num { fill: var(--adv-text); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.adv-dash-eje { stroke: var(--adv-border); }
.adv-dash-s1 { fill: #004080; } .adv-dash-s2 { fill: #4675B8; } .adv-dash-s3 { fill: #9DB7DD; }
.adv-dash-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--adv-text-sec); margin-top: 4px; }
.adv-dash-leyenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.adv-dash-leyenda .s1::before { background: #004080; } .adv-dash-leyenda .s2::before { background: #4675B8; } .adv-dash-leyenda .s3::before { background: #9DB7DD; }

.adv-dash-vend, .adv-dash-hbar {
    display: grid; grid-template-columns: minmax(90px, 1.2fr) 3fr auto; gap: 10px; align-items: center;
    padding: 6px 0; border-bottom: 1px solid var(--adv-border); font-size: 13px;
}
.adv-dash-vend:last-of-type, .adv-dash-hbar:last-of-type { border-bottom: 0; }
.adv-dash-vend .n, .adv-dash-hbar .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-dash-vend .p, .adv-dash-hbar .p { font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; }
.adv-dash .bar { height: 9px; border-radius: 5px; background: var(--adv-primary-light); position: relative; overflow: visible; }
.adv-dash .bar i { position: absolute; inset: 0 auto 0 0; background: var(--adv-primary); border-radius: 5px; }
.adv-dash .bar.ok i { background: #1E8E5A; }
.adv-dash .bar b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--adv-accent); }

.adv-dash-tbl { overflow-x: auto; }
.adv-dash-tbl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adv-dash-tbl th { text-align: left; font-weight: 600; color: var(--adv-text-sec); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; padding: 6px; border-bottom: 1px solid var(--adv-border); }
.adv-dash-tbl td { padding: 7px 6px; border-bottom: 1px solid var(--adv-border); }
.adv-dash-tbl .r { text-align: right; }
.adv-dash-tbl .num { font-variant-numeric: tabular-nums; }
.adv-dash-tbl tr.clic { cursor: pointer; }
.adv-dash-tbl tr.clic:hover td { background: var(--adv-primary-light); }
.adv-dash-pill { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.adv-dash-pill.p-bad { background: #FCEBE9; color: #C0392B; }
.adv-dash-pill.p-warn { background: var(--adv-warning-bg); color: #A86A00; }
.adv-dash-pill.p-ok { background: #E6F4EC; color: #1E8E5A; }

.adv-dash-insight { background: var(--adv-primary-light); border-radius: var(--adv-radius); padding: 12px 16px; border: 1px solid var(--adv-border); }
.adv-dash-insight ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.adv-dash-nota { margin: 8px 0 0; font-size: 11.5px; color: var(--adv-text-sec); }
.adv-dash-vacio { margin: 6px 0; font-size: 13px; color: var(--adv-text-sec); }

/* ── Dashboard de Ventas: períodos rápidos y comparativo anual ─────────── */
.adv-dv-rapidos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adv-dv-tvinfo { font-size: 12.5px; color: var(--adv-text-sec); margin-left: 6px; }
.adv-cmp { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.adv-cmp-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.adv-cmp-combo { width: 190px; flex: 0 0 auto; }
.adv-cmp-corte { font-size: 12.5px; color: var(--adv-text-sec); }
.adv-cmp-aviso { font-size: 12px; color: #A86A00; background: var(--adv-warning-bg); border-radius: 6px; padding: 3px 8px; }
.adv-cmp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; }
.adv-cmp-kpi {
    background: var(--adv-surface); border: 1px solid var(--adv-border); border-top: 3px solid var(--adv-primary);
    border-radius: var(--adv-radius); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.adv-cmp-kpi.destacado { background: linear-gradient(135deg, #004080, #2A5A9E); border-top-color: var(--adv-accent); }
.adv-cmp-kpi.destacado .l, .adv-cmp-kpi.destacado .v, .adv-cmp-kpi.destacado .d { color: #fff !important; }
.adv-cmp-kpi .l { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; color: var(--adv-text-sec); }
.adv-cmp-kpi .v { font-size: 21px; font-weight: 700; color: var(--adv-primary); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-cmp-kpi .d { font-size: 12px; color: var(--adv-text-sec); }
.adv-cmp .sube { color: #1E8E5A !important; font-weight: 600; }
.adv-cmp .baja { color: #C0392B !important; font-weight: 600; }
.adv-cmp-lectura {
    display: flex; gap: 10px; align-items: flex-start; background: var(--adv-accent-light);
    border: 1px solid #F6D9A6; border-radius: var(--adv-radius); padding: 10px 14px; color: var(--adv-text);
}
.adv-cmp-lectura .mud-icon-root { color: #C97A00; margin-top: 2px; }
.adv-cmp-lectura ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.adv-cmp-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.adv-cmp-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1100px) { .adv-cmp-g2, .adv-cmp-g3 { grid-template-columns: 1fr; } }
.adv-cmp-panel { background: var(--adv-surface); border: 1px solid var(--adv-border); border-radius: var(--adv-radius); padding: 12px 16px; min-width: 0; }
.adv-cmp-panel h4 { margin: 0 0 8px; font-size: 14.5px; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.adv-cmp-panel h4 small { font-weight: 400; font-size: 11.5px; color: var(--adv-text-sec); }
.adv-cmp-panel > svg { display: block; width: 100%; height: auto; }
.adv-cmp-grid { stroke: var(--adv-border); }
.adv-cmp-eje { fill: var(--adv-text-sec); font-size: 12px; }
.adv-cmp-val { fill: var(--adv-primary); font-size: 13px; font-weight: 700; }
.adv-cmp-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--adv-text-sec); margin-top: 4px; }
.adv-cmp-leyenda span::before { content: ""; display: inline-block; width: 16px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; background: var(--c, #004080); }
.adv-cmp-leyenda span.act::before { background: #004080; height: 8px; vertical-align: 0; }
.adv-cmp-leyenda span.ant::before { background: #F9A216; height: 8px; vertical-align: 0; }
.adv-cmp-tbl { overflow-x: auto; }
.adv-cmp-calor { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.adv-cmp-calor th { font-weight: 600; color: var(--adv-text-sec); font-size: 11px; text-align: center; padding: 4px; }
.adv-cmp-calor tbody th { text-align: left; color: var(--adv-text); font-size: 13px; }
.adv-cmp-calor td { text-align: center; padding: 6px 4px; border-radius: 6px; background: #F4F6FA; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adv-cmp-calor td .pct { display: block; font-size: 10px; opacity: .8; }
.adv-cmp-calor td.curso { font-style: italic; outline: 1px dashed #94A3B8; }
.adv-cmp-calor .tot { font-weight: 700; background: var(--adv-primary-light); color: var(--adv-primary); }
.adv-cmp-nota { margin: 6px 0 0; font-size: 11.5px; color: var(--adv-text-sec); }
.adv-cmp-sub { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--adv-text-sec); margin: 8px 0 4px; }
.adv-cmp-clientes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.adv-cmp-clientes > div { background: #F4F6FA; border-radius: 8px; padding: 8px; text-align: center; display: flex; flex-direction: column; }
.adv-cmp-clientes .n { font-size: 20px; font-weight: 700; color: var(--adv-primary); }
.adv-cmp-clientes .t { font-size: 11px; color: var(--adv-text-sec); }
.adv-cmp-clientes .ok .n { color: #1E8E5A; } .adv-cmp-clientes .bad .n { color: #C0392B; }
.adv-cmp-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--adv-border); }
.adv-cmp-fila:last-child { border-bottom: 0; }
.adv-cmp-fila .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.adv-cmp-fila .m { font-variant-numeric: tabular-nums; white-space: nowrap; }
.adv-cmp-vend { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto; gap: 8px; align-items: center; padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid var(--adv-border); }
.adv-cmp-vend .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.adv-cmp-vend .barras { display: flex; flex-direction: column; gap: 2px; }
.adv-cmp-vend .barras i { display: block; height: 6px; border-radius: 3px; }
.adv-cmp-vend .barras .act { background: #004080; } .adv-cmp-vend .barras .ant { background: #F9A216; }
.adv-cmp-vend .p { font-size: 11.5px; white-space: nowrap; }

/* Campo numérico angosto con lupa (p. ej. «Anticipo» al facturar el pedido): el icono tapaba el
   último dígito y «0.00» se leía «0.0C». Se achica la lupa y el relleno, sin tocar el ancho. */
.adv-campo-lupa-compacta .mud-input.mud-input-outlined.mud-input-adorned-end { padding-right: 2px; }
.adv-campo-lupa-compacta .mud-input-adornment-end { margin-left: 0; }
.adv-campo-lupa-compacta .mud-input-adornment-end .mud-icon-button { padding: 2px; }
.adv-campo-lupa-compacta .mud-input-adornment-end .mud-icon-root { font-size: 18px; }
.adv-campo-lupa-compacta .mud-input-slot { padding-right: 2px; }


/* ── Manuales de usuario (botón de la barra y página /manuales) ───────────── */
.adv-boton-manuales {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin-right: 12px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--adv-primary);
    color: var(--adv-primary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.adv-boton-manuales:hover { background: var(--adv-primary-light); }
header.mud-appbar .adv-boton-manuales .mud-icon-root { color: var(--adv-primary) !important; font-size: 16px; }
@media (max-width: 767px) {
    .adv-boton-manuales { padding: 0 8px; margin-right: 6px; }
    .adv-boton-manuales > span { display: none; }
}
.adv-manuales { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.adv-manuales-lista { flex: 1 1 260px; max-width: 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.adv-manuales-lista { max-width: 230px; }
.adv-manuales-detalle { flex: 999 1 520px; min-width: 0; }
.adv-manual-opciones { flex: 1 1 260px; max-width: 320px; min-width: 0; border: 1px solid var(--adv-border, #e2e7ee); border-radius: 8px; padding: 10px; background: #fafbfc; }
.adv-manual-opciones-lista { max-height: calc(100vh - 330px); min-height: 300px; overflow-y: auto; }
.adv-manual-grupo { font-size: 12px; font-weight: 700; color: var(--adv-primary); padding: 8px 4px 2px; }
.adv-manual-opcion { display: flex; gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; font-family: inherit; font-size: 13px; color: var(--adv-text); text-align: left; cursor: pointer; }
.adv-manual-opcion > span:first-child { flex-grow: 1; }
.adv-manual-opcion:hover { background: var(--adv-primary-light); }
.adv-manual-opcion-sel { background: var(--adv-primary-light); font-weight: 700; }
.adv-manual-opcion-pag { font-size: 12px; color: var(--adv-text-sec); white-space: nowrap; }
.adv-manual-item {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 8px 12px;
    border: 1px solid var(--adv-border, #e2e7ee); border-radius: 8px; background: #fff;
    font-family: inherit; color: var(--adv-text); text-align: left; cursor: pointer;
}
.adv-manual-item:hover { border-color: var(--adv-primary); }
.adv-manual-item-sel { border: 2px solid var(--adv-primary); background: var(--adv-primary-light); }
.adv-manual-item-texto { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.adv-manual-item-titulo { font-size: 14px; font-weight: 700; }
.adv-manual-item-sub { font-size: 12px; color: var(--adv-text-sec); }
.adv-manual-nuevo { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #fff1dc; color: #8a4b00; }
.adv-manual-visor { width: 100%; height: calc(100vh - 300px); min-height: 480px; border: 1px solid var(--adv-border, #e2e7ee); border-radius: 6px; }
.adv-manual-vacio { padding: 40px 16px; text-align: center; color: var(--adv-text-sec); border: 1px dashed var(--adv-border, #e2e7ee); border-radius: 6px; }
.adv-manual-caja { border: 1px solid var(--adv-border, #e2e7ee); border-radius: 8px; padding: 10px 14px; }
.adv-manual-caja-titulo { font-size: 12px; font-weight: 700; color: var(--adv-text-sec); text-transform: uppercase; margin-bottom: 6px; }
.adv-manual-novedad { font-size: 13px; padding: 2px 0; }

/* Contador de las acciones (el número de adjuntos sobre el clip): más chico que el
   badge por defecto de MudBlazor, para que no tape el ícono. */
.adv-accion-contador .mud-badge.mud-badge-overlap {
    min-width: 14px !important;
    height: 14px !important;
    padding: 0 3px !important;
    font-size: 9px !important;
    line-height: 14px !important;
    border-width: 1px !important;
    inset: auto auto calc(100% - 12px) calc(100% - 12px) !important;
}