/* ============================================================
   Marco del portal (prefijo dp-cab- / dp-cuerpo) y la piel del
   lateral de Radzen.

   Solo lo que RadzenLayout no cubre. Ningun color literal: todo
   sale de docsportal-theme.css.
   ============================================================ */

/* --- Cabecera ------------------------------------------------- */
.rz-header {
    background: var(--dp-surface) !important;
    border-bottom: 1px solid var(--dp-line);
    box-shadow: none !important;
}

.dp-cab {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: 0 1rem 0 .25rem;
}

.dp-cab-marca {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    color: var(--dp-fg);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -.01em;
}

.dp-cab-marca-icono {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--dp-primary);
    color: #fff;
    font-size: .95rem;
    flex: 0 0 auto;
}

/* El perfil se va al extremo opuesto de la marca. */
.dp-cab-perfil {
    margin-left: auto;
}

.dp-cab-user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    text-align: right;
}

.dp-cab-user-nombre {
    font-weight: 600;
    font-size: .9rem;
    color: var(--dp-fg);
}

.dp-cab-user-empresa {
    font-size: .75rem;
    color: var(--dp-muted);
}

.dp-cab-entrar {
    margin-left: auto;
    color: var(--dp-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
}

/* --- Lateral -------------------------------------------------- */
/* El tema `software` de Radzen lo trae oscuro; aqui va claro. Y el fondo
   oscuro esta en TRES capas: el propio lateral, el <ul> del menu y la fila
   de cada elemento -mas oscura aun en los submenus-. Aclarar solo la
   primera deja bandas oscuras encima. */
.rz-sidebar {
    background: var(--dp-canvas) !important;
    border-right: 1px solid var(--dp-line) !important;
    color: var(--dp-fg);
    /* El arbol de un producto son cientos de fichas: sin esto desborda y se
       corta a media rama. */
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Plegado de verdad.

   El tema declara `width: 0 !important` en .rz-sidebar-collapsed y aun asi el
   lateral se quedaba a 250px: el ancho no lo manda el elemento, lo manda la
   PISTA del grid de .rz-layout (grid-template-columns: 250px 1fr). Encogiendo
   solo el elemento queda un hueco de 250px. Hay que encoger la pista, y para
   saber si esta plegado se mira al hijo -que es lo que hace el propio Radzen
   en sus reglas responsive-. */
.rz-layout:has(> .rz-sidebar-collapsed) {
    grid-template-columns: 0 1fr;
}

.rz-layout .rz-sidebar.rz-sidebar-collapsed {
    width: 0 !important;
    min-width: 0 !important;
    border-right: none !important;
    overflow: hidden;
}

.rz-panel-menu {
    background: transparent !important;
    padding: .5rem 0;
}

.rz-panel-menu .rz-navigation-item-wrapper:not(.rz-navigation-item-wrapper-active) {
    background: transparent !important;
}

.rz-panel-menu .rz-navigation-item-link,
.rz-panel-menu .rz-navigation-item-text {
    color: var(--dp-fg);
}

.rz-panel-menu .rz-navigation-item-icon {
    color: var(--dp-muted);
}

.rz-panel-menu .rz-navigation-item-link:hover {
    background: var(--dp-primary-lighter);
}

/* Lo abierto se marca con fondo Y con una barra: sobre un lateral claro el
   tono solo no basta para distinguirlo. */
.rz-panel-menu .rz-navigation-item-wrapper-active {
    background: var(--dp-primary-lighter) !important;
    box-shadow: inset 3px 0 0 var(--dp-primary);
}

    .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-text,
    .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
        color: var(--dp-primary-dark);
        font-weight: 600;
    }

/* El arbol de fichas es hondo: cada nivel baja de cuerpo para que la
   jerarquia se lea sin tener que contar sangrias. */
.rz-panel-menu .rz-navigation-menu .rz-navigation-item-text {
    font-size: .88rem;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-text {
    font-size: .84rem;
    color: var(--dp-muted);
}

/* --- Cuerpo --------------------------------------------------- */
.dp-cuerpo {
    padding: 0 1.25rem;
}