/* ============================================================================
   nvx-shell.css — chrome de la aplicación: banda del D.O. y menú de la cuenta.

   Va como CSS global y no como .razor.css aislado por dos razones:

     1. El menú de la cuenta es un MudMenu, y MudBlazor renderiza los
        desplegables en el portal de MudPopoverProvider, al final del body.
        Queda FUERA del árbol del layout, así que ninguna regla con ámbito de
        MainLayout puede alcanzarlo.

     2. La banda del D.O. y el topbar son elementos únicos del shell. Aislarlos
        no aporta nada y sí agrega una capa de ámbito donde equivocarse.

   Todo lo demás sigue la regla del sistema: los componentes llevan su
   .razor.css aislado.
   ============================================================================ */

/* ══ TOPBAR ═══════════════════════════════════════════════════════════════ */

/* Empresa a la que pertenece el usuario. Va antes del nombre y con menos peso:
   es contexto, no identidad. */
.nvx-topbar__empresa {
    padding: 3px 10px;
    border-radius: var(--nvx-r-sm);
    background: rgba(255, 255, 255, .14);
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
    white-space: nowrap;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Accesos a las pantallas del D.O. Se separan del buscador con una línea fina
   para que se lean como un grupo aparte. */
.nvx-topbar__acciones {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, .2);
}

@media (max-width: 620px) {
    .nvx-topbar__acciones { margin-left: 4px; padding-left: 4px; border-left: 0; }
}

.nvx-topbar__usuario {
    margin-right: 4px;
    font-size: var(--nvx-text-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
    white-space: nowrap;
}

@media (max-width: 1100px) { .nvx-topbar__empresa { display: none; } }
@media (max-width: 620px)  { .nvx-topbar__usuario { display: none; } }


/* ══ MENÚ DE LA CUENTA ════════════════════════════════════════════════════
   Se renderiza en el portal de MudBlazor, sobre fondo claro.
   ═══════════════════════════════════════════════════════════════════════ */

.nvx-cuenta {
    padding: 12px 16px 10px;
    min-width: 248px;
    max-width: 320px;
}

.nvx-cuenta__nombre {
    font-size: var(--nvx-text-h3);
    font-weight: 700;
    color: var(--nvx-800);
    line-height: 1.3;
}

.nvx-cuenta__usuario,
.nvx-cuenta__correo {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.nvx-cuenta__seccion {
    margin: 12px 0 6px;
    padding-top: 10px;
    border-top: 1px solid var(--nvx-gray-200);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-gray-400);
}

.nvx-cuenta__empresa {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 4px 0;
}

.nvx-cuenta__empresa-icono {
    font-size: 18px;
    color: var(--nvx-700);
    flex: none;
    margin-top: 1px;
}

.nvx-cuenta__empresa-nombre {
    font-size: var(--nvx-text-body);
    font-weight: 600;
    color: var(--nvx-gray-800);
    line-height: 1.35;
}

.nvx-cuenta__empresa-nit {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
}

.nvx-cuenta__perfiles {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 2px 0 4px;
}


/* ══ BANDA DEL D.O. ═══════════════════════════════════════════════════════
   Fila de tarjetas rotuladas bajo el topbar. Queda fija al hacer scroll:
   mientras haya un D.O. cargado, sus datos se ven desde cualquier pantalla.
   ═══════════════════════════════════════════════════════════════════════ */

.bdo {
    position: sticky;
    top: 0;
    z-index: var(--nvx-z-sticky);

    display: flex;
    align-items: stretch;
    gap: 0;

    background: #fff;
    border-bottom: 1px solid var(--nvx-gray-200);
    box-shadow: var(--nvx-shadow-sm);
}

/* ── Identificación: bloque destacado a la izquierda ────────────────────── */
.bdo__ident {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: none;
    padding: 10px 18px;
    background: var(--nvx-50);
    border-right: 1px solid var(--nvx-gray-200);
    /* Filo turquesa: ancla la banda a la marca sin teñirla entera. */
    box-shadow: inset 4px 0 0 var(--nvx-500);
}

.bdo__icono {
    font-size: 21px;
    color: var(--nvx-700);
    flex: none;
}

.bdo__nro {
    font-family: var(--nvx-font-mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--nvx-900);
    letter-spacing: -.01em;
    white-space: nowrap;
}

.bdo__tipo {
    padding: 1px 8px;
    border-radius: var(--nvx-r-sm);
    background: var(--nvx-100);
    border: 1px solid var(--nvx-300);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--nvx-900);
    white-space: nowrap;
}

/* ── Campos ─────────────────────────────────────────────────────────────── */
.bdo__campos {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.bdo__campos::-webkit-scrollbar { display: none; }

.bdo__campo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    flex: none;
    padding: 8px 18px;
    border-right: 1px solid var(--nvx-gray-100);
}

.bdo__rotulo {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-700);
    white-space: nowrap;
}

.bdo__valor {
    font-size: var(--nvx-text-sm);
    font-weight: 500;
    color: var(--nvx-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

/* ── Acciones ───────────────────────────────────────────────────────────── */
.bdo__acciones {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
    padding: 8px 14px;
    border-left: 1px solid var(--nvx-gray-200);
}

/* ── Angosto ────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .bdo__valor { max-width: 168px; }
    .bdo__campo { padding: 8px 14px; }
}

@media (max-width: 900px) {
    .bdo__ident { padding: 10px 14px; }
    .bdo__valor { max-width: 132px; }
}

/* Al imprimir, la banda es contexto útil pero no debe quedar fija. */
@media print {
    .bdo { position: static; box-shadow: none; }
    .bdo__acciones { display: none; }
}