/* ═══════════════════════════════════════════════════════════════════════════
   Ventrax — capa de diseño sobre MudBlazor.

   MudBlazor.min.css se carga ANTES que este archivo, así que una regla de la
   misma especificidad aquí gana. Es a propósito: la paleta y los radios se
   fijan en el tema de C# (API estable), y aquí va todo lo que el tema tipado
   no alcanza — sombras, densidad, el cromo y los estados.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Superficies: el fondo es gris muy claro para que las tarjetas blancas floten */
    --vx-fondo:            #F6F7F9;
    --vx-superficie:       #FFFFFF;
    --vx-borde:            rgba(16, 21, 28, .08);
    --vx-borde-fuerte:     rgba(16, 21, 28, .14);

    --vx-texto:            #1A2230;
    --vx-texto-suave:      #6B7482;

    --vx-acento:           #2563EB;
    --vx-acento-tenue:     #EFF4FF;

    /* Sombras con desplazamiento y desenfoque amplio: un halo sin offset no da profundidad */
    --vx-sombra-1: 0 1px 2px rgba(16, 21, 28, .04), 0 1px 3px rgba(16, 21, 28, .05);
    --vx-sombra-2: 0 2px 4px -1px rgba(16, 21, 28, .05), 0 6px 16px -4px rgba(16, 21, 28, .08);
    --vx-sombra-3: 0 8px 24px -6px rgba(16, 21, 28, .12), 0 2px 6px -2px rgba(16, 21, 28, .06);

    --vx-radio:            14px;
    --vx-radio-chico:      10px;

    /* IBM Plex: hecha para herramientas técnicas y de negocio, con carácter propio.
       La Mono es funcional, no decorativa — va donde la cifra debe alinearse en columna
       (montos, folios, UUID) y donde el texto es código que se copia. */
    --vx-fuente:      'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --vx-fuente-mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;

    /* Curva de salida fuerte: arranca rápido, se siente inmediata */
    --vx-salida: cubic-bezier(.23, 1, .32, 1);
}

html, body {
    font-family: var(--vx-fuente);
    -webkit-font-smoothing: antialiased;
    background: var(--vx-fondo);
}

/* Las cifras de tablas y KPIs alineadas en columna: sin esto los dígitos bailan */
.mud-table-cell, .vx-cifra, .mud-input-slot input[type="number"] {
    font-variant-numeric: tabular-nums;
}

/* La cifra en mono, no la celda entera: en una tabla mixta el nombre del cliente en
   monoespaciada se lee peor y ocupa más. Solo el número, que es lo que se compara. */
.vx-cifra {
    font-family: var(--vx-fuente-mono);
    letter-spacing: -.01em;
}

/* Bloque de código que el usuario copia y pega en su sitio. Se rompe por palabra
   porque un snippet de una línea en un ancho fijo si no obliga a hacer scroll para
   verificar que se copió completo. */
.vx-codigo {
    font-family: var(--vx-fuente-mono);
    font-size: 12.5px;
    line-height: 1.6;
    background: #F1F3F6;
    border: 1px solid var(--vx-borde);
    border-radius: var(--vx-radio-chico);
    padding: 14px 16px;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--vx-texto);
}

/* ── Tarjetas ──────────────────────────────────────────────────────────── */
.mud-paper {
    border-radius: var(--vx-radio);
    border: 1px solid var(--vx-borde);
}

.mud-elevation-0 { box-shadow: none; }
.mud-elevation-1 { box-shadow: var(--vx-sombra-1); }
.mud-elevation-2 { box-shadow: var(--vx-sombra-2); }
.mud-elevation-3, .mud-elevation-4 { box-shadow: var(--vx-sombra-3); }

/* Los popovers y diálogos flotan de verdad: ahí la sombra sí es profundidad, no adorno */
.mud-popover, .mud-dialog {
    box-shadow: 0 16px 48px -12px rgba(16, 21, 28, .22), 0 4px 12px -4px rgba(16, 21, 28, .10);
}

/* ── Barra superior ────────────────────────────────────────────────────── */
/* Blanca y separada por una línea, no por una sombra: la sombra bajo una barra
   fija compite visualmente con las tarjetas que pasan por debajo al hacer scroll. */
.mud-appbar.mud-appbar-fixed-top {
    background: var(--vx-superficie);
    color: var(--vx-texto);
    box-shadow: none;
    border-bottom: 1px solid var(--vx-borde);
}

/* El contenido tiene que empezar POR DEBAJO de la appbar, que es fija.
   MudBlazor ya reserva ese hueco, pero la utilidad `pt-4` que llevaba MudMainContent lo pisaba
   —las utilidades de espaciado de MudBlazor son `!important`— y dejaba el padding en 16px. Con
   la appbar midiendo 65px, los primeros ~50px de CADA pantalla quedaban tapados por la barra.
   Medido el 10 ago 2026 en producción: el encabezado de /usuarios estaba en top:16 y su botón
   «Nuevo usuario» era literalmente inalcanzable — no se podía dar de alta a nadie.

   Es también lo que se veía como «una franja naranja sin texto» en la sesión de soporte: no era
   el scroll, era el borde inferior de la banda asomando por debajo de la barra.

   Se SUMA a la variable en vez de fijar un número: si algún día cambia la altura de la appbar,
   esto la sigue. Los 18px cubren el borde inferior (1px, 2px en soporte) y dejan aire. */
.mud-layout .mud-main-content {
    padding-top: calc(var(--mud-appbar-height, 64px) + 18px);
}

/* ── Sesión de soporte (impersonación) ─────────────────────────────────────
   La banda del contenido explica y ofrece la salida, pero vive DENTRO del contenido y por
   tanto se va con el scroll: el 10 ago 2026, en una ventana baja, quedó reducida a una franja
   naranja sin texto y el usuario ya no sabía qué era. Un aviso ambiguo es peor que ninguno,
   porque enseña a ignorarlo. Esto va en la appbar, que es fija y no se va nunca.

   Tres clases para ganarle a `.mud-appbar.mud-appbar-fixed-top` (0-2-0) por especificidad y no
   con !important: los overrides de MudBlazor pierden EN SILENCIO si empatan (ver §15). */
.mud-appbar.mud-appbar-fixed-top.vx-appbar-soporte {
    border-bottom: 2px solid var(--mud-palette-warning);
}

.vx-soporte-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    /* Tinte pálido y texto ámbar oscuro: 6.3:1. Con `--mud-palette-warning-lighten` de fondo
       (#F98C10 en este tema, que de «lighten» tiene poco) el contraste caía a 3.75:1, y a
       .75rem eso es texto pequeño — por debajo del mínimo. El color de alarma lo pone el borde
       de la appbar, que no tiene que sostener ninguna lectura. */
    background: #FEF3C7;
    color: #92400E;
    font-size: .75rem;
    line-height: 1.25;
    white-space: nowrap;
}

/* La salida vive junto al aviso: si estuviera en el contenido, al hacer scroll desaparecería
   justo cuando el usuario quiere volver a lo suyo. */
.mud-appbar .vx-soporte-salir {
    color: #92400E;
    margin-left: 4px;
    text-transform: none;
    font-size: .75rem;
    font-weight: 600;
}

/* En pantallas estrechas la appbar ya va justa: se conserva el color y el icono —que es lo que
   avisa— y se sueltan los textos, que es lo que desborda. El botón conserva su icono, así que
   la salida sigue estando. */
@media (max-width: 700px) {
    .vx-soporte-chip span { display: none; }
    .mud-appbar .vx-soporte-salir .mud-button-label { display: none; }
    .mud-appbar .vx-soporte-salir { min-width: 0; padding: 4px 8px; }
}

.vx-buscador .mud-input-control .mud-input.mud-input-filled {
    background: var(--vx-fondo);
    border-radius: 999px;
}

.vx-buscador .mud-input.mud-input-filled:hover:not(.mud-disabled):before,
.vx-buscador .mud-input.mud-input-filled:before,
.vx-buscador .mud-input.mud-input-filled:after { border-bottom: none; }

/* ── Barra lateral ─────────────────────────────────────────────────────── */
.mud-drawer {
    border-right: 1px solid var(--vx-borde);
    box-shadow: none;
}

.vx-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 18px 14px;
}

.vx-marca__logo {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--vx-acento);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 17px;
    flex: none;
}

.vx-marca__nombre { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.vx-marca__sub    { font-size: 11px; color: var(--vx-texto-suave); letter-spacing: .04em; }

/* El activo es una píldora, no una franja: no toca los bordes del cajón y se
   lee como "estás aquí" sin gritar. */
.mud-navmenu .mud-nav-link {
    margin: 2px 10px;
    padding: 9px 12px;
    border-radius: var(--vx-radio-chico);
    font-size: .875rem;
    font-weight: 500;
    color: var(--vx-texto-suave);
    min-height: 0;
    transition: background-color 150ms var(--vx-salida), color 150ms var(--vx-salida);
}

.mud-navmenu .mud-nav-link .mud-nav-link-icon { color: var(--vx-texto-suave); }

@media (hover: hover) and (pointer: fine) {
    .mud-navmenu.mud-navmenu-default .mud-nav-link:hover:not(.active):not(.mud-nav-link-disabled) {
        background-color: rgba(16, 21, 28, .04);
        color: var(--vx-texto);
    }
    .mud-navmenu.mud-navmenu-default .mud-nav-link:hover:not(.active):not(.mud-nav-link-disabled) .mud-nav-link-icon {
        color: var(--vx-texto);
    }
}

/* El selector copia el de MudBlazor (.mud-navmenu.mud-navmenu-default … :not(…)) porque
   con una especificidad menor su gris de "hover" gana y la píldora nunca se pinta. */
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: var(--vx-acento-tenue);
    color: var(--vx-acento);
    font-weight: 600;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--vx-acento);
}

.vx-nav-grupo {
    padding: 16px 22px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vx-texto-suave);
}

/* ── Botones ───────────────────────────────────────────────────────────── */
.mud-button-root {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    border-radius: var(--vx-radio-chico);
    transition: background-color 150ms var(--vx-salida), box-shadow 150ms var(--vx-salida),
                transform 120ms var(--vx-salida);
}

/* Responder a la pulsación: sin esto el botón se siente sordo */
.mud-button-root:active:not(:disabled) { transform: scale(.97); }

.mud-button-filled { box-shadow: none; }
.mud-button-filled:hover { box-shadow: var(--vx-sombra-1); }

/* ── Tablas ────────────────────────────────────────────────────────────── */
.mud-table-root .mud-table-head .mud-table-cell {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--vx-texto-suave);
    background: var(--vx-fondo);
    border-bottom: 1px solid var(--vx-borde);
}

.mud-table-root .mud-table-cell { border-bottom: 1px solid var(--vx-borde); }
.mud-table-container .mud-table-row:last-child .mud-table-cell { border-bottom: none; }

/* MudDataGrid: las listas venían con rayas, bordes y denso a la vez — todas las
   afordancias encendidas. Con una línea fina por fila y el hover basta para seguir
   el renglón, y la vista deja de parecer una hoja de cálculo. */
.mud-table.mud-data-grid .mud-table-cell {
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--vx-borde);
    font-size: .8125rem;
}

.mud-table.mud-data-grid .mud-table-body .mud-table-row:nth-of-type(even) { background: transparent; }
.mud-table.mud-data-grid .mud-table-body .mud-table-row:hover { background: rgba(16, 21, 28, .025); }
.mud-table.mud-data-grid .mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: none; }

/* Que la fila respire: `Dense` de MudBlazor aprieta hasta hacerla incómoda de leer */
.mud-table.mud-data-grid.mud-table-dense .mud-table-cell { padding: 10px 16px; }

.mud-table.mud-data-grid .mud-table-toolbar,
.mud-table.mud-data-grid .mud-table-pagination { border: none; }

.mud-table.mud-data-grid .mud-table-pagination { color: var(--vx-texto-suave); font-size: .8125rem; }

/* ── Encabezado de pantalla ────────────────────────────────────────────── */
.vx-encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

/* ⛔ Aquí NO va `position: sticky`. Se intentó (ago 2026) para que la acción primaria no se
   fuera con el scroll, y provocó un solape en todas las pantallas de lista: el contenedor
   principal no reserva la altura de la appbar en el flujo, así que `top: 64px` EMPUJA el
   encabezado hacia abajo sobre lo que viene detrás —con scroll o sin él—, y lo que viene
   detrás es el PanelFiltros, que quedaba cortado a media altura.

   Para que la acción siga alcanzable en un formulario largo, se repite el botón al final
   del formulario (`vx-acciones-pie`), que es donde termina el usuario después de editar. */

/* Fila de acciones al cierre de un formulario largo. */
.vx-acciones-pie {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

.vx-encabezado__titulo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0;
    color: var(--vx-texto);
}

.vx-encabezado__sub { font-size: .8125rem; color: var(--vx-texto-suave); margin-top: 3px; }
.vx-encabezado__acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Barra de filtros ──────────────────────────────────────────────────── */
.vx-filtros {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--vx-superficie);
    border: 1px solid var(--vx-borde);
    border-radius: var(--vx-radio);
}

/* Los campos de la barra van compactos y sin etiqueta flotante: el placeholder basta
   cuando el control cabe en una línea junto a los demás. */
.vx-filtros .mud-input-control { margin: 0; }
.vx-filtros .vx-filtro-campo { min-width: 200px; flex: 1 1 200px; max-width: 320px; }
.vx-filtros .vx-filtro-select { min-width: 150px; flex: 0 1 180px; }
.vx-filtros__limpiar { margin-left: auto; color: var(--vx-texto-suave); }

/* ── Portada (login y activación) ──────────────────────────────────────── */
.vx-portada {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--vx-fondo);
}

.vx-portada__caja { width: 100%; max-width: 400px; }

/* La marca encabeza la tarjeta de acceso; ya no va suelta encima de ella. */
.vx-portada__marca {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-bottom: 26px;
}

.vx-portada__titulo {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--vx-texto);
}

.vx-portada__sub {
    font-size: .8125rem;
    color: var(--vx-texto-suave);
    margin: 4px 0 22px;
}

/* ── Pie legal (login y menú) ──────────────────────────────────────────── */
.vx-pie {
    text-align: center;
    font-size: .6875rem;
    line-height: 1.5;
    color: var(--vx-texto-suave);
    opacity: .85;
    user-select: text;
}

.vx-pie__version { opacity: .8; }

/* ── Diálogos ──────────────────────────────────────────────────────────── */
.mud-dialog { border-radius: var(--vx-radio); box-shadow: var(--vx-sombra-3); }

.mud-dialog .mud-dialog-title {
    padding: 20px 24px 14px;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.mud-dialog .mud-dialog-content { padding: 0 24px 4px; }

/* La barra de acciones se separa con una línea y su propio fondo: en un formulario largo,
   sin ella los botones quedan flotando entre campos y no se ve dónde termina. */
.mud-dialog .mud-dialog-actions {
    padding: 14px 24px;
    margin-top: 18px;
    gap: 8px;
    border-top: 1px solid var(--vx-borde);
    background: rgba(16, 21, 28, .02);
}

/* ── Diálogo de confirmación ───────────────────────────────────────────── */
.vx-confirmar__icono {
    width: 38px; height: 38px; flex: none;
    border-radius: var(--vx-radio-chico);
    display: flex; align-items: center; justify-content: center;
}

.vx-confirmar__detalle {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--vx-radio-chico);
    background: #F1F3F6;
    border: 1px solid var(--vx-borde);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--vx-texto);
    word-break: break-word;
}

/* Etiqueta de etapa del pipeline. El color lo pone el tenant en la BD, así que llega
   por variable: el fondo teñido y el borde se derivan de él en vez de codificarse. */
.vx-etapa {
    display: inline-block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--etapa);
    background: color-mix(in srgb, var(--etapa) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--etapa) 28%, transparent);
    white-space: nowrap;
}

/* ── Chips y campos ────────────────────────────────────────────────────── */
.mud-chip { font-weight: 600; }

.mud-input-control .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--vx-radio-chico);
    border-color: var(--vx-borde-fuerte);
}

/* ── Utilidades del dashboard ──────────────────────────────────────────── */
.vx-tarjeta-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.vx-tarjeta-titulo { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }

.vx-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--vx-borde);
}

.vx-fila:last-child { border-bottom: none; }
.vx-fila__principal { min-width: 0; flex: 1; }
.vx-fila__titulo { font-size: .875rem; font-weight: 600; color: var(--vx-texto);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-fila__meta   { font-size: .75rem; color: var(--vx-texto-suave);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-fila__cola   { font-size: .75rem; color: var(--vx-texto-suave); white-space: nowrap; text-align: right; }

/* Inicial de color estable por nombre — ver ColoresAvatar en el código */
.vx-inicial {
    width: 34px; height: 34px; flex: none;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8125rem; font-weight: 700;
}

.vx-fecha-chip {
    width: 42px; flex: none; text-align: center;
    border-radius: var(--vx-radio-chico);
    background: var(--vx-acento-tenue);
    color: var(--vx-acento);
    padding: 5px 0;
    line-height: 1.15;
}

.vx-fecha-chip__mes { font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.vx-fecha-chip__dia { font-size: 1rem; font-weight: 700; }

/* ── Estado de carga: esqueletos, no un spinner en medio del contenido ─── */
.vx-esqueleto {
    background: linear-gradient(90deg, rgba(16,21,28,.05) 25%, rgba(16,21,28,.09) 37%, rgba(16,21,28,.05) 63%);
    background-size: 400% 100%;
    animation: vx-brillo 1.4s ease infinite;
    border-radius: 6px;
}

@keyframes vx-brillo { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
    .vx-esqueleto { animation: none; }
    .mud-button-root, .mud-navmenu .mud-nav-link { transition-duration: .01ms; }
}

/* ── ManejadorErroresRaiz (HTML plano, sin MudBlazor) ─────────────────── */
.ventrax-error-raiz {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--vx-fondo);
    font-family: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
    padding: 16px;
}

.ventrax-error-raiz__card {
    background: #fff;
    border-radius: var(--vx-radio);
    box-shadow: var(--vx-sombra-3);
    padding: 40px 32px;
    max-width: 480px;
    width: 100%;
    text-align: center;
}

.ventrax-error-raiz__icono { font-size: 3rem; line-height: 1; color: #DC2626; }
.ventrax-error-raiz__titulo { margin: 16px 0 8px; font-size: 1.4rem; font-weight: 600; }
.ventrax-error-raiz__cuerpo { color: var(--vx-texto-suave); margin-bottom: 24px; line-height: 1.6; }

.ventrax-error-raiz__btn {
    background: var(--vx-acento);
    color: #fff;
    border: none;
    border-radius: var(--vx-radio-chico);
    padding: 10px 28px;
    font-size: .95rem;
    cursor: pointer;
    font-weight: 600;
}

.ventrax-error-raiz__btn:hover { background: #1D4ED8; }
.ventrax-error-raiz__btn:active { transform: scale(.97); }

.ventrax-error-raiz__detalle { margin-top: 24px; text-align: left; font-size: .75rem; color: #888; }

.ventrax-error-raiz__detalle pre {
    background: var(--vx-fondo);
    padding: 8px;
    border-radius: 6px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin-top: 6px;
}

/* El cartel de error del framework se oculta: ManejadorErroresRaiz lo reemplaza */
#blazor-error-ui { display: none !important; }

/* ── Registro del servidor ─────────────────────────────────────────────────
   Monoespaciada y sin ajuste de línea: un log con las líneas partidas deja de
   alinearse por timestamp y se vuelve ilegible justo cuando urge leerlo. */
.vx-log {
    max-height: 62vh;
    overflow: auto;
    background: #0f172a;
    padding: 12px 14px;
}

.vx-log__linea {
    font-family: var(--vx-fuente-mono);
    font-size: .75rem;
    line-height: 1.5;
    color: #cbd5e1;
    white-space: pre;
}

.vx-log__linea--aviso { color: #fbbf24; }
.vx-log__linea--error { color: #fca5a5; font-weight: 600; }