/**
 * Nubolia design tokens — densidad, layout workspace, cards y patrones de lista.
 * Complementa MudBlazor sin reemplazar su sistema de temas.
 */
:root {
    /* ── Escala de redondeo — UN SOLO VALOR POR NIVEL (constitución VIII.12) ─────────────────
       Contenedor 24 · medio 10 · control 8 · píldora 999. Cambiar el redondeo del ERP debe ser
       editar UNO de estos valores; si hace falta tocar archivos .razor, la regla se está
       incumpliendo. El nivel «control» se inyecta además como valor por defecto de MudBlazor
       desde NuboliaTheme (LayoutProperties.DefaultBorderRadius), para que toda superficie sin
       clase explícita herede el estándar en vez del valor de la librería.
       Prohibido fijar el radio desde el marcado: los utilitarios `rounded-*` llevan !important
       y anulan estos tokens. INV-UX-7 lo verifica. */
    --Nubolia-radius-lg: 24px;
    --Nubolia-radius-md: 10px;
    --Nubolia-radius-sm: 8px;
    --Nubolia-radius-pill: 999px;
    --Nubolia-space-page-y: 1rem;
    --Nubolia-space-page-x: 1.25rem;
    --Nubolia-aside-width: 320px;
    --Nubolia-font-ui: "Inter", "Roboto", system-ui, sans-serif;
    --Nubolia-elev-outline: 1px solid rgba(127, 127, 127, 0.18);
    --Nubolia-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --Nubolia-shadow-card: 0 4px 24px rgba(15, 23, 42, 0.06);
    --Nubolia-table-density: 0.4rem;
}

.mud-theme-dark {
    --Nubolia-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --Nubolia-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
    --Nubolia-elev-outline: 1px solid rgba(255, 255, 255, 0.08);
}

.Nubolia-main-surface {
    min-height: calc(100vh - 64px);
    font-family: var(--Nubolia-font-ui);
}

.Nubolia-page-workspace {
    align-items: flex-start;
}

.Nubolia-aside-shell {
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 96px);
    overflow: auto;
}

.Nubolia-hub-hero {
    border-radius: var(--Nubolia-radius-lg);
    border: var(--Nubolia-elev-outline);
    box-shadow: var(--Nubolia-shadow-sm);
    background: var(--mud-palette-surface);
}

/* Tarjetas y paneles de contenido (patrón facturas / productos) */
.Nubolia-panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--Nubolia-radius-lg);
    background: var(--mud-palette-surface);
    box-shadow: var(--Nubolia-shadow-sm);
}

/* ── UN SOLO MARCO POR NIVEL (constitución VIII.11) ───────────────────────────────────────────
   El panel ES la tarjeta: lo que vive dentro no vuelve a dibujarse como superficie.

   Por qué esto va en CSS y no declarando `Elevation="0"` archivo por archivo: en MudBlazor
   `.mud-elevation-0` apaga SOLO la sombra — `.mud-paper` y `.mud-table` conservan su propio
   `background-color` y su propio `border-radius`. Por eso las 108 tablas que ya declaraban
   `Elevation="0"` seguían dibujando una segunda tarjeta dentro del panel, y el síntoma persistía
   pese a que la convención se venía aplicando. Una regla estructural corrige todas las pantallas
   sin editarlas y —lo que importa más— hace que el caso correcto sea el AUTOMÁTICO: una pantalla
   nueva que meta una tabla en un panel queda bien sin que su autor conozca la regla.

   Exclusiones deliberadas:
   · `.mud-alert` NO aparece aquí — es un BLOQUE SEMÁNTICO: su color comunica severidad, así que
     ahí el fondo sí es información y aplanarlo dejaría una advertencia idéntica al contenido
     ordinario (única excepción declarada de VIII.11). Además no es `.mud-paper`, así que ni
     siquiera lo alcanzaría este selector.
   · Los elementos posicionados (`position:fixed|absolute`) quedan fuera: son CAPAS FLOTANTES
     —cajones laterales, tarjeta del recorrido guiado, oferta del tour— que pueden vivir dentro
     del DOM de un panel pero visualmente flotan sobre la página. Aplanarlas las dejaría
     ilegibles sobre el fondo. Es la misma condición que aplica INV-UX-7.
   · Las superficies INTERACTIVAS (`.cursor-pointer`, `[role=button]`, `.Nubolia-selectable`)
     quedan fuera: en un selector —«Persona Natural / Persona Jurídica», «Físico / Servicio /
     Digital»— el borde NO es decoración duplicada, es la señal de que eso se puede elegir.
     Aplanarlas las deja pareciendo texto con un ícono y el usuario no descubre que son
     pulsables, que es justo lo contrario de lo que persigue el Principio VIII. Encaja con la
     definición de la constitución: un marco es una superficie que **no aporta información**, y
     el borde de una opción seleccionable sí la aporta. (Reportado por el dueño al probar la
     primera versión de esta regla, que las había aplanado.)
   · El borde EXPLÍCITO (`Outlined="true"` → `.mud-paper-outlined`) queda fuera: es una
     declaración de intención del autor, no una duplicación accidental. El doble marco que esta
     regla combate lo producían superficies con fondo y radio IMPLÍCITOS —tablas y rejillas que
     nadie pidió que se vieran como tarjeta—, no un borde que alguien escribió a propósito.
     Verificado sobre los 7 usos del ERP: todos son sub-tarjetas deliberadas —ítems de empresa
     del hub, tarjetas de plan seleccionables, zonas de carga de logo con borde punteado donde
     el borde ES el «suelta aquí»—. Aplanarlas destruía información en todos los casos. */
.Nubolia-panel :is(.mud-paper, .mud-table, .mud-simple-table, .mud-card, .mud-expansion-panels):not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]):not(.cursor-pointer):not([role="button"]):not(.Nubolia-selectable):not(.mud-paper-outlined) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ── Nivel MEDIO: el bloque interno (ola B) ───────────────────────────────────────────────────
   El nombre que le faltaba a la escala. D6 asignaba «papeles y tarjetas → contenedor», y para los
   papeles de PRIMER nivel es correcto; pero medidos uno por uno, ~30 de los `MudPaper` del ERP son
   otra cosa: sub-bloques DENTRO de un contenedor —la fila de un ítem, la tarjeta de una opción, el
   recuadro de un total—. Darles 24px los dejaría concéntricos con el panel que los envuelve, que es
   justo el efecto que esta feature vino a quitar.

   La segunda regla existe por la CASCADA, no por capricho: `.Nubolia-panel :is(.mud-paper…)` de
   arriba tiene especificidad (0,2,0) y pondría el radio en 0. `.Nubolia-block` sola es (0,1,0) y
   perdería. Con el mismo peso y declarada DESPUÉS, gana — y así un bloque nombrado conserva su
   redondeo sin que nadie tenga que escribir un `!important` en el marcado.

   Es lo que sustituye a los `rounded-lg` que llevaban `!important` y le ganaban al token. */
.Nubolia-block {
    border-radius: var(--Nubolia-radius-md);
}

.Nubolia-panel .Nubolia-block {
    border-radius: var(--Nubolia-radius-md);
}

/* Nivel CONTENEDOR, solo el radio. Existe para la superficie que quiere el redondeo de contenedor
   pero NO su borde ni su fondo: una tarjeta elegible grande, una zona de carga de logo, la tarjeta
   del recorrido guiado. Sin esta clase, quitarles el utilitario `rounded-xl` las dejaba en el nivel
   *control* (8px) —el de un campo de texto—, que en una tarjeta de 320px se ve mal.
   `Nubolia-panel` sigue siendo el tratamiento completo; esta es solo el nivel. */
.Nubolia-surface {
    border-radius: var(--Nubolia-radius-lg);
}

.Nubolia-panel .Nubolia-surface {
    border-radius: var(--Nubolia-radius-lg);
}

/* La ALERTA es bloque semántico (VIII.11) y adopta el nivel medio (D6). Sin esta regla heredaría el
   nivel *control* desde `DefaultBorderRadius`, que es el de un campo de texto: la alerta no es un
   control, es un bloque. Va aquí y no en 39 llamadas del marcado — el radio lo pone el token. */
.mud-alert {
    border-radius: var(--Nubolia-radius-md);
}

/* ── Barra de acciones de formulario (Cancelar / Guardar) ─────────────────────────────────────
   Fuente única del patrón. Va **sticky, no fixed**, y esa es toda la diferencia: `sticky` fluye
   dentro del contenido, así que se alinea sola con el cajón lateral —abierto, mini o cerrado— y
   nunca tapa el final del formulario.

   Tres asistentes (producto, promoción, tercero) usaban `position:fixed` con el desplazamiento
   calculado a mano: `left: var(--mud-drawer-width-left, 0px)`. MudBlazor mantiene variables
   SEPARADAS para el cajón normal (272px) y el mini (56px) —`--mud-drawer-width-mini-left`—, así
   que al plegar el menú la barra se quedaba desplazada 272px sobre un cajón de 56: un hueco de
   216px. Además, sin relleno inferior compensatorio, tapaban las últimas líneas del formulario.
   Con `sticky` no hay aritmética que mantener: no hay nada que se pueda desincronizar. */
.Nubolia-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 50;
    padding: 12px 24px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* La clase gobierna SOLO el posicionamiento, que es donde estaba el defecto. La distribución
   interna (ancho máximo, alineación) la sigue decidiendo cada formulario: imponerla aquí habría
   cambiado el de editar empresa, que es el que el dueño señaló como correcto. */

.Nubolia-page-header {
    border-radius: var(--Nubolia-radius-lg);
    background: var(--mud-palette-surface);
    box-shadow: var(--Nubolia-shadow-sm);
}

.Nubolia-data-toolbar {
    background: var(--mud-palette-surface);
}

/* Barra de estado segmentada (pagado / por vencer / vencido) */
.Nubolia-segment-bar {
    display: flex;
    height: 10px;
    border-radius: var(--Nubolia-radius-pill);
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

.Nubolia-segment-bar > span {
    display: block;
    min-width: 2px;
    transition: width 0.2s ease;
}

/* Chips de tendencia KPI (+/- %) */
.Nubolia-trend-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--Nubolia-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
}

.Nubolia-trend-pill--up {
    background: color-mix(in srgb, var(--mud-palette-success) 18%, transparent);
    color: var(--mud-palette-success);
}

.Nubolia-trend-pill--down {
    background: color-mix(in srgb, var(--mud-palette-error) 18%, transparent);
    color: var(--mud-palette-error);
}

.Nubolia-trend-pill--flat {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

/* Drawer: columna con scroll + pie fijo */
.Nubolia-drawer-column.mud-drawer {
    display: flex;
    flex-direction: column;
}

.Nubolia-drawer-column .mud-drawer-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.Nubolia-drawer-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.Nubolia-drawer-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

/* Iconos en app bar (referencia Dribbble) */
.Nubolia-appbar-icon {
    border-radius: var(--Nubolia-radius-sm);
}

/* Tablas densas opcional */
.Nubolia-table-dense .mud-table-cell {
    padding-top: var(--Nubolia-table-density);
    padding-bottom: var(--Nubolia-table-density);
}

/* Master-detail: lista seleccionable */
.Nubolia-master-list .mud-table-row {
    cursor: pointer;
}

.Nubolia-master-list .mud-selected {
    outline: 2px solid color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    outline-offset: -2px;
}

/* Navegación lateral: ítems más legibles */
.Nubolia-nav-menu .mud-nav-link {
    border-radius: var(--Nubolia-radius-sm);
    margin-bottom: 2px;
}

.Nubolia-nav-menu .mud-nav-link.mud-nav-link-active {
    font-weight: 600;
}

/* ─── Feature 024: menú por categorías ─────────────────────────────────────── */

/* Títulos de categoría (MudNavGroup) con peso y hit-target cómodos */
.Nubolia-nav-menu .mud-nav-group > .mud-nav-link {
    font-weight: 600;
}

/* Subencabezados no interactivos dentro de una categoría (nivel visual, no de interacción) */
.Nubolia-nav-subheader {
    display: block;
    opacity: 0.55;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    user-select: none;
}

/* Ítems anidados: indentación clara bajo la categoría */
.Nubolia-nav-menu .mud-nav-group .mud-navmenu {
    padding-left: 6px;
}

/* Foco visible por teclado (WCAG 2.1 AA) en links y grupos del menú */
.Nubolia-nav-menu .mud-nav-link:focus-visible,
.Nubolia-nav-rail .mud-icon-button:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Resaltado del buscador del menú */
.Nubolia-nav-menu mark,
.Nubolia-nav-menu .mud-highlighter {
    background: color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
    color: inherit;
    /* Fuera de la escala a propósito: esto NO es una superficie, es el resaltado de las letras que
       coinciden con lo que el usuario escribió. No participa de la taxonomía de marcos (VIII.11) y
       el nivel más pequeño de la escala —8px, el de un campo— sobre dos o tres caracteres se ve como
       una pastilla y estorba la lectura. */
    border-radius: 2px;
    padding: 0 1px;
}

/* ─── Categoría como fila + panel flotante (2026-09-02 · afinado 2026-09-03) ───
   La fila de categoría NO es un enlace ni un acordeón: abre un panel al lado. Por eso
   lleva su propia clase en vez de reusar `.mud-nav-link` — un rótulo que se ve igual que
   un enlace y no navega es justo lo que VIII.13 prohíbe hacer deducir al usuario. El
   chevron es la señal, y por eso está siempre visible aunque atenuado.

   Todos los radios salen de los tokens (VIII.12): cambiar el redondeo del menú es editar
   `--Nubolia-radius-*`, no barrer este archivo. */
.Nubolia-nav-cat {
    /* Es un <button>: hay que apagarle los estilos que trae de fábrica para que se lea como una
       fila del menú y no como un botón de formulario. */
    appearance: none;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;

    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    margin-bottom: 2px;
    border-radius: var(--Nubolia-radius-sm);
    cursor: pointer;
    user-select: none;
    position: relative;
    color: var(--mud-palette-text-primary);
    transition: background-color 120ms ease, color 120ms ease;
}

.Nubolia-nav-cat:hover {
    background: var(--mud-palette-action-default-hover);
}

.Nubolia-nav-cat:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.Nubolia-nav-cat-icon {
    flex: 0 0 auto;
    font-size: 1.25rem;
    color: var(--mud-palette-text-secondary);
}

.Nubolia-nav-cat-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.Nubolia-nav-cat-chevron {
    flex: 0 0 auto;
    font-size: 1.05rem;
    opacity: 0.3;
    color: var(--mud-palette-text-secondary);
    transition: opacity 120ms ease, transform 120ms ease;
}

.Nubolia-nav-cat:hover .Nubolia-nav-cat-chevron {
    opacity: 0.85;
    transform: translateX(2px);
}

/* Activa: la barra de la izquierda contesta «¿dónde estoy?» de un vistazo, sin leer. */
.Nubolia-nav-cat--active {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.Nubolia-nav-cat--active .Nubolia-nav-cat-icon,
.Nubolia-nav-cat--active .Nubolia-nav-cat-chevron {
    color: var(--mud-palette-primary);
    opacity: 1;
}

.Nubolia-nav-cat--active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: var(--Nubolia-radius-pill);
    background: var(--mud-palette-primary);
}

/* ── La segunda columna ────────────────────────────────────────────────────
   Sustituye al panel flotante del 2026-09-02. Aquel se anclaba a la fila, y por eso
   se despegaba al desplazar el menú y volcaba al borde superior cuando no cabía. Esta
   columna está fija respecto a la VENTANA —de debajo de la barra superior hasta abajo,
   pegada al borde derecho del menú—, así que su sitio no depende de dónde esté la fila
   ni de cuánto mida el contenido: es el mismo para las ocho categorías.

   El borde izquierdo lo pone el componente en línea (72 px en rail, 272 px en menú
   completo): es el único dato que el CSS no puede saber.

   Capa flotante ⇒ conserva sombra y borde (VIII.11 excluye del aplanado lo que flota).
   Lo de DENTRO va plano: ni tarjetas ni cajas anidadas. */
.Nubolia-nav-panel {
    position: fixed;
    top: var(--mud-appbar-height, 64px);
    bottom: 0;
    left: var(--Nubolia-nav-left, 272px);
    width: 288px;
    /* Cinturón: pase lo que pase con los cortes de abajo, la columna NO puede salirse de la
       pantalla. Sin esto, en la ventana de 817 px del dueño se iba 14 px fuera, y en un móvil
       de 360 px se iba 472 — la columna medía 560 y empezaba en 272, siempre. */
    max-width: calc(100vw - var(--Nubolia-nav-left, 272px));
    display: flex;
    flex-direction: column;
    z-index: 1301; /* sobre el contenido y el velo; bajo el cajón (1302), que sigue pulsable */
    background: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--mud-elevation-8);
    animation: Nubolia-nav-panel-in 120ms ease-out;
}

.Nubolia-nav-panel--wide {
    width: 560px;
}

@keyframes Nubolia-nav-panel-in {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: none; }
}

/* Quien pide no animar, no ve animación. */
@media (prefers-reduced-motion: reduce) {
    .Nubolia-nav-panel { animation: none; }
}

/* Velo transparente: no pinta nada, solo recoge el clic de fuera para cerrar. Va por
   DEBAJO del cajón (1302) para poder saltar de una categoría a otra sin cerrar antes,
   y arranca bajo la barra superior para no bloquear el buscador global. */
.Nubolia-nav-scrim {
    position: fixed;
    top: var(--mud-appbar-height, 64px);
    /* Empieza en el borde derecho del menú: a pantalla completa este velo taparía el propio
       menú, porque se pinta dentro de él. */
    left: var(--Nubolia-nav-left, 272px);
    right: 0;
    bottom: 0;
    z-index: 1300;
    background: transparent;
}

.Nubolia-nav-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 12px 8px 12px 14px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.Nubolia-nav-panel-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: var(--Nubolia-radius-sm);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.Nubolia-nav-panel-head-icon .mud-icon-root {
    color: var(--mud-palette-primary);
    font-size: 1.125rem;
}

.Nubolia-nav-panel-head-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.Nubolia-nav-panel-close {
    flex: 0 0 auto;
}

/* El contenido es lo único que se desplaza: el encabezado se queda, así que la columna
   siempre dice de qué categoría es lo que se está leyendo. */
.Nubolia-nav-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Dos columnas solo en las categorías grandes; lo decide C# contando las filas que se
   van a pintar (NavCategoryPanel.TwoColumns). */
.Nubolia-nav-panel-list--wide {
    column-count: 2;
    column-gap: 8px;
}

/* Una sección no se parte entre columnas: su rótulo quedaría en una y sus destinos en la
   otra, que es exactamente el rótulo mintiendo. */
.Nubolia-nav-panel-list--wide .Nubolia-nav-section,
.Nubolia-nav-panel-list--wide .Nubolia-nav-item-row {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* ── Sección dentro de la columna (antes un acordeón) ──────────────────────
   El rótulo es TEXTO, no un control: no se pliega, no navega y no debe parecer que sí.
   Por eso va en versalitas atenuadas y sin fondo ni borde propios (VIII.11: un solo marco
   por nivel — el marco ya lo pone la columna). */
.Nubolia-nav-section {
    margin-top: 10px;
}

.Nubolia-nav-section:first-child {
    margin-top: 2px;
}

.Nubolia-nav-section-label {
    padding: 4px 12px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    opacity: 0.75;
}

/* ── Filas de destino dentro de la columna ─────────────────────────────────
   Se escanean, no se leen: alto contenido, ícono atenuado y solo la activa con color. */
.Nubolia-nav-panel .mud-nav-link {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: var(--Nubolia-radius-sm);
    font-size: 0.875rem;
}

.Nubolia-nav-panel .mud-nav-link .mud-icon-root {
    font-size: 1.125rem;
    color: var(--mud-palette-text-secondary);
}

.Nubolia-nav-panel .mud-nav-link.active {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    font-weight: 600;
}

.Nubolia-nav-panel .mud-nav-link.active .mud-icon-root {
    color: var(--mud-palette-primary);
}

/* La fila cuya columna está abierta: se marca para que se vea de dónde salió. Es distinto
   de «activa» (la ruta en la que estoy), y por eso son dos clases y no una. */
.Nubolia-nav-cat--open {
    background: var(--mud-palette-action-default-hover);
}

.Nubolia-nav-cat--open .Nubolia-nav-cat-chevron {
    opacity: 0.9;
    transform: translateX(2px);
}

/* ── Pantallas estrechas ───────────────────────────────────────────────────
   Medido en el navegador antes de escribir esto: la columna medía 560 px y empezaba en 272,
   así que su borde derecho caía SIEMPRE en 832 — se salía 14 px en una ventana de 817 y 472 px
   en un móvil de 360. Dos columnas de ajustes no caben en un teléfono por mucho que se
   estrechen: lo que hay que cambiar no es el ancho, es la forma. */

/* Banda intermedia (900–1099): siguen lado a lado, pero en UNA columna. Dos necesitan
   272 + 560 = 832 px solo para el menú y el panel, y lo que queda de página es una rendija. */
@media (min-width: 900px) and (max-width: 1099.98px) {
    .Nubolia-nav-panel--wide {
        width: 288px;
    }

    .Nubolia-nav-panel-list--wide {
        column-count: 1;
    }
}

/* Por debajo de 900: el menú y la columna NO caben lado a lado (272 + 288 = 560, y un teléfono
   tiene 360). La columna pasa a ocupar la pantalla entera, como una segunda vista: se entra por
   la categoría y se vuelve con la X del encabezado. Es el recorrido de siempre en móvil, y
   conserva las tres garantías de VIII.15 — no se pierde la posición, se ve en qué categoría se
   está, y la salida es una sola acción visible.

   Sube por encima del cajón (1302) a propósito: por debajo, el cajón le taparía los primeros
   272 px, que es justo donde están los rótulos. */
@media (max-width: 899.98px) {
    .Nubolia-nav-panel {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        z-index: 1303;
        border-right: 0;
    }

    .Nubolia-nav-panel--wide {
        width: auto;
    }

    /* El velo sobra: la columna ocupa todo, así que no queda ningún "fuera" que pulsar. Dejarlo
       sería una capa invisible que no puede recibir un clic. */
    .Nubolia-nav-scrim {
        display: none;
    }

    /* Área de toque cómoda con el dedo: 44 px es el mínimo que recomiendan iOS y Android, y por
       debajo se falla el destino y se acaba abriendo el de al lado. */
    .Nubolia-nav-panel .mud-nav-link {
        min-height: 44px;
    }

    .Nubolia-nav-cat {
        min-height: 44px;
    }
}

/* Teléfono: además, una sola columna. Entre 600 y 900 (tableta, o una ventana estrecha de
   escritorio) la columna ocupa toda la pantalla y SÍ caben dos: con eso la categoría de ajustes
   —19 destinos— se lee entera sin desplazar, que es justo lo que se perdía al pasar a una. */
@media (max-width: 599.98px) {
    .Nubolia-nav-panel-list--wide {
        column-count: 1;
    }
}

/* Rail compacto (RF-007): columna de íconos de categoría */
.Nubolia-nav-rail {
    width: 100%;
}

.Nubolia-nav-rail .mud-icon-button {
    border-radius: var(--Nubolia-radius-sm);
    margin: 2px 0;
}

/* Activo en el rail: pastilla tintada, no solo color de ícono. En una columna sin rótulos el
   color es la única señal, y para quien no distingue bien los colores no es ninguna; la forma
   sí se ve siempre. */
.Nubolia-nav-rail .Nubolia-nav-rail-btn--active {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

/* Rail con la columna abierta: el mismo criterio que en el menú completo — «abierta» y
   «activa» son dos hechos distintos y se marcan distinto. */
.Nubolia-nav-rail .Nubolia-nav-rail-btn--open {
    background: var(--mud-palette-action-default-hover);
}

/* Estrella de favorito (US5): el LAYOUT de la fila va inline en NavMenu.razor — aquí solo
   el hover-to-reveal. Si esta hoja no llega, la estrella queda visible y la fila no se rompe. */
.Nubolia-nav-item-row .Nubolia-nav-star {
    opacity: 0;
    transition: opacity 120ms ease;
}

.Nubolia-nav-item-row:hover .Nubolia-nav-star,
.Nubolia-nav-item-row:focus-within .Nubolia-nav-star,
.Nubolia-nav-item-row .Nubolia-nav-star.mud-warning-text {
    opacity: 0.9;
}

/* ─── Feature 024 (US4): recorrido guiado ──────────────────────────────────── */

/* El posicionamiento del tour va inline en GuidedTourOverlay.razor (no depende de esta hoja);
   aquí solo la transición del spotlight al saltar de un paso a otro. */
.Nubolia-tour-spotlight {
    transition: all 200ms ease;
}

/* Oferta del tour (no bloqueante, esquina inferior derecha) */
.Nubolia-tour-offer {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 320px;
    max-width: calc(100vw - 32px);
    z-index: 1500;
    border: 1px solid var(--mud-palette-lines-default);
    /* Capa flotante: conserva su elevación (VIII.11) y el radio de contenedor lo pone el token, no un
       `rounded-xl` en el marcado (ola D). */
    border-radius: var(--Nubolia-radius-lg);
}

/* Tarjeta del recorrido guiado (la burbuja anclada al elemento resaltado). Es la hermana de
   `.Nubolia-tour-offer` y, como ella, es CAPA FLOTANTE: mantiene su elevación por diseño (VIII.11).
   Hasta la ola D esta clase NO tenía ninguna regla en ninguna hoja: su redondeo salía entero del
   `rounded-xl` del marcado. Quitar el utilitario sin dejarle el token la habría aplanado al nivel
   control, así que el radio se declara aquí, donde vive el resto de su identidad. */
.Nubolia-tour-card {
    border-radius: var(--Nubolia-radius-lg);
}

/* App bar: hit target */
.Nubolia-appbar-icon.mud-icon-button {
    padding: 8px;
}

/* Contraste tablas en modo oscuro */
.mud-theme-dark .Nubolia-panel {
    border-color: var(--mud-palette-lines-default);
}

/* ─── AppImportGrid: overlay fullscreen del wizard ──────────────────────────── */

/* Barra sticky al pie del header del overlay editor */
.ig-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    bottom: 0;
    z-index: 5;
    border-radius: 0 0 var(--Nubolia-radius-lg) var(--Nubolia-radius-lg);
}

/* ── Feature 033 (T115 / RF-024): densidad de contenido por usuario ──────────────────────────
   La densidad COMPACTA es el default y no se toca (preserva la experiencia del experto, CE-005).
   "comfortable" añade aire vertical; se activa desde UserUiPreference.VisualDensity en MainLayout.
   Distinta del menú mini (por dispositivo, localStorage, feature 024) — D7. */
.Nubolia-density-comfortable { line-height: 1.7; }
.Nubolia-density-comfortable .Nubolia-panel { padding: 1.5rem; }
.Nubolia-density-comfortable .mud-table.mud-table-dense .mud-table-cell { padding-top: 9px; padding-bottom: 9px; }
.Nubolia-density-comfortable .mud-list-item-dense { padding-top: 8px; padding-bottom: 8px; }
.Nubolia-density-comfortable .mud-card-content { padding: 20px; }

/* ── Feature 044: líneas de documento que se reacomodan ─────────────────────────────────────────
   Sustituyen a la tabla de siete columnas que no cabía en la columna del formulario. Aquella se
   sostenía con un ancho mínimo de 900px y desbordamiento, lo que producía DOS barras horizontales
   anidadas (la del contenedor propio y la que MudTable trae de serie).

   Regla que no se puede perder de vista al tocar esto: NINGUNA de estas reglas fija overflow-x. El
   ajuste lo hace `flex-wrap`, no una barra de desplazamiento — reintroducir una devolvería el
   problema en cuanto la ventana se estreche.

   El radio y el borde salen de los tokens; escribirlos aquí a mano llevaría `!important` y anularía
   la escala (VIII.12). Este bloque es un nivel «bloque» dentro del panel, así que hereda su radio. */
.Nubolia-doc-line {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  /* Feature 059 — el CANAL de la izquierda lo reservan TODAS las líneas, tengan padre o no.
     Antes solo lo gastaba la hija, así que el campo del concepto padre salía ~30px más ancho que
     el de sus hijas y la fila se leía como un descuido de maquetación en vez de como jerarquía.
     Reservándolo en las dos, los campos quedan del MISMO tamaño y alineados, y lo que distingue a
     la hija es la barra que se dibuja en ese canal — que es información, no un margen. */
  padding: 10px 0 10px 26px;
  border-bottom: 1px solid var(--Nubolia-border, rgba(0, 0, 0, .08));
}

.Nubolia-doc-line:last-child { border-bottom: 0; }

/* Feature 050 — una línea que cuelga de otra se representa con INDENTACIÓN, no con una tarjeta dentro
   de otra (VIII.11). La barra de la izquierda dice de un vistazo dónde empieza y acaba el grupo, sin
   tener que leer los nombres. Un solo nivel, que es lo que INV-3 permite y lo que el impreso sabe
   representar. */
.Nubolia-doc-line--child::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: var(--Nubolia-radius-pill, 999px);
  /* Se dibuja DENTRO del canal reservado, así que no mueve ni estrecha ningún campo. Y va en el
     color de acento, no en el del borde: a 2px y en gris la barra no se veía, y la jerarquía
     quedaba anunciada solo por un icono pequeño. Lo que agrupa tiene que verse de un vistazo. */
  background: var(--mud-palette-primary, #1976d2);
  opacity: .55;
}

/* Qué es: se lleva el espacio sobrante y nunca baja de un ancho legible. 220px es donde el nombre
   de un producto normal deja de partirse en dos. */
.Nubolia-doc-line__what {
  flex: 1 1 220px;
  min-width: 220px;
}

/* Cuánto cuesta: los campos numéricos bajan solos cuando no caben, en vez de empujar la fila. */
.Nubolia-doc-line__numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
}