/* Layout lateral: "Icon Sidebar" de Radzen (RadzenSidebar + RadzenPanelMenu).
   - Escritorio: riel de 60 px solo con iconos; al pasar el mouse (o al navegar con teclado) se ensancha a 252 px
     ENCIMA del contenido, que no se mueve.
   - Celular (<= 768 px): el riel es un cajon que se abre con el boton de la barra superior.
   Colores: azul noche del logo y dorado de las copas.
   Componentes: Components/Layout/MainLayout.razor, MenuLateral.razor, BarraSuperior.razor y Pages/Home.razor. */

/* ---------- Rejilla de RadzenLayout ---------- */

/* La celda del sidebar mide siempre 60 px; el riel interior (.cva-rail) es el que se ensancha. */
.rz-layout .rz-sidebar.cva-sidebar {
    --rz-sidebar-width: 60px;
    position: relative;
    z-index: 30;
    overflow: visible;
    padding: 0;
    background-color: transparent;
    border-inline-end: 0;
}

/* Barra superior delgada */
.rz-layout .rz-header.cva-header {
    min-height: 60px;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    background-color: #ffffff;
    color: var(--rz-text-color, #1f2937);
    border-bottom: 1px solid #dfe3ec;
    box-shadow: none;
}

/* ---------- Riel del sidebar ---------- */

.cva-rail {
    --cva-fondo: #0a0e1f;
    --cva-linea: #1b2238;
    --cva-oro: #f0ce6a;
    --cva-texto: #c5ccdf;
    --cva-gris: #8a94b2;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60px;
    display: flex;
    flex-direction: column;
    background: var(--cva-fondo);
    color: var(--cva-texto);
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.18s ease, box-shadow 0.18s ease;

    /* Variables del RadzenPanelMenu (el tema las define en :root) */
    --rz-panel-menu-padding-block: 0;
    --rz-panel-menu-padding-inline: 0;
    --rz-panel-menu-item-margin-block: 0;
    --rz-panel-menu-item-margin-inline: 0;
    --rz-panel-menu-item-border: none;
    --rz-panel-menu-item-border-radius: 0;
    --rz-panel-menu-item-padding-block: 0.62rem;
    --rz-panel-menu-item-padding-inline: 20px;
    --rz-panel-menu-item-color: var(--cva-texto);
    --rz-panel-menu-item-background-color: transparent;
    --rz-panel-menu-item-hover-color: #ffffff;
    --rz-panel-menu-item-hover-background-color: rgba(255, 255, 255, 0.08);
    --rz-panel-menu-item-active-color: var(--cva-oro);
    --rz-panel-menu-item-active-background-color: rgba(240, 206, 106, 0.13);
    --rz-panel-menu-item-active-indicator: var(--cva-oro);
    --rz-panel-menu-icon-width: 24px;
    --rz-panel-menu-icon-height: 24px;
    --rz-panel-menu-icon-font-size: 24px;
    --rz-panel-menu-icon-color: #aab2c8;
    --rz-panel-menu-icon-margin-inline: 0 16px;
    --rz-panel-menu-toggle-icon-font-size: 20px;
    --rz-panel-menu-item-2nd-level-offset: 60px;
    --rz-panel-menu-item-2nd-level-padding-block: 0.55rem;
    --rz-panel-menu-item-2nd-level-background-color: transparent;
    --rz-panel-menu-item-2nd-level-color: var(--cva-texto);
    --rz-panel-menu-item-2nd-level-hover-color: #ffffff;
    --rz-panel-menu-item-2nd-level-hover-background-color: rgba(255, 255, 255, 0.08);
    --rz-panel-menu-item-2nd-level-active-color: var(--cva-oro);
    --rz-panel-menu-item-2nd-level-active-background-color: rgba(240, 206, 106, 0.13);
}

/* Expandido: mouse encima o foco de teclado dentro del riel */
.cva-rail:hover,
.cva-rail:has(:focus-visible) {
    width: 252px;
    box-shadow: 8px 0 24px rgba(5, 8, 20, 0.28);
}

/* Logo + nombre */
.cva-brand {
    display: flex;
    align-items: center;
    flex: none;
    height: 60px;
    padding: 0 12px;
    border-bottom: 1px solid var(--cva-linea);
}

.cva-brand-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    color: #ffffff;
    text-decoration: none;
}

.cva-brand-logo {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
}

.cva-brand-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.cva-brand-texto strong {
    font-size: 1.05rem;
    font-weight: 700;
}

.cva-brand-texto small {
    font-size: 0.8rem;
    color: var(--cva-gris);
}

.cva-rail:hover .cva-brand-texto,
.cva-rail:has(:focus-visible) .cva-brand-texto {
    opacity: 1;
}

/* Opciones */
.cva-nav {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2a3350 transparent;
}

/* Titulo de seccion: en el riel cerrado es solo una linea divisoria (la altura no cambia, asi nada salta al ensanchar) */
.cva-sec {
    position: relative;
    height: 34px;
    padding: 16px 24px 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cva-gris);
}

.cva-sec::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 50%;
    height: 1px;
    background: var(--cva-linea);
    transition: opacity 0.12s ease;
}

.cva-sec span {
    position: relative;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.cva-rail:hover .cva-sec::before,
.cva-rail:has(:focus-visible) .cva-sec::before {
    opacity: 0;
}

.cva-rail:hover .cva-sec span,
.cva-rail:has(:focus-visible) .cva-sec span {
    opacity: 1;
}

/* Dentro del riel el menu no pinta su propio fondo ni bordes */
.cva-rail .rz-panel-menu {
    overflow: visible;
}

/* Pagina actual: el NavLink de Radzen marca el enlace con .active (el contenedor no recibe la clase del tema) */
.cva-rail .rz-navigation-item-wrapper:has(> .rz-navigation-item-link.active) {
    background-color: rgba(240, 206, 106, 0.13);
    color: var(--cva-oro);
}

.cva-rail .rz-navigation-item-wrapper:has(> .rz-navigation-item-link.active) .rz-navigation-item-icon {
    color: var(--cva-oro);
}

.cva-rail .rz-navigation-item-wrapper:has(> .rz-navigation-item-link.active)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--cva-oro);
}

/* Riel cerrado en escritorio: los submenus no se muestran (solo los iconos) */
@media (min-width: 769px) {
    .cva-rail:not(:hover):not(:has(:focus-visible)) .rz-navigation-menu {
        display: none;
    }
}

/* ---------- Barra superior ---------- */

.cva-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.cva-barra-izq,
.cva-barra-der {
    display: flex;
    align-items: center;
    min-width: 0;
}

.cva-barra-izq {
    gap: 0.5rem;
}

.cva-barra-der {
    gap: 1rem;
}

.cva-titulo {
    font-size: 1.25rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cva-usuario {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    color: #586075;
}

.cva-usuario-nombre {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.cva-salir {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 0.9rem;
    border: 1px solid #dfe3ec;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.cva-salir:hover {
    background: #f3f5f9;
}

.cva-hamburguesa,
.cva-cerrar-movil {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.cva-cerrar-movil {
    color: #c5ccdf;
}

.cva-backdrop {
    display: none;
}

/* Sin sesion: solo el logo arriba */
.cva-header-login .cva-brand-link {
    flex: none;
    color: var(--rz-text-color, #1f2937);
}

.cva-header-login .cva-brand-texto {
    opacity: 1;
}

/* ---------- Portada (Home.razor) ---------- */

.cva-bienvenida {
    /* alto de la ventana - barra superior - (relleno del cuerpo + relleno de la pagina, arriba y abajo) */
    min-height: calc(100vh - 60px - 4rem);
    max-width: 640px;
    margin: 0 auto;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    text-align: center;
}

.cva-bienvenida img {
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(10, 14, 31, 0.18);
}

.cva-bienvenida h1 {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.4rem);
    line-height: 1.15;
    font-weight: 600;
}

.cva-bienvenida-linea {
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: #e0b94a;
}

.cva-bienvenida p {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.5;
    color: #586075;
}

.cva-solo-movil {
    display: none;
}

/* ---------- Celular: el riel es un cajon ---------- */

@media (max-width: 768px) {
    /* El sidebar forma su propia capa: debe quedar por encima de .cva-backdrop (890) */
    .rz-layout .rz-sidebar.cva-sidebar {
        position: fixed;
        width: 0;
        z-index: 900;
    }

    .cva-rail {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(300px, 86vw);
        transform: translateX(-100%);
        visibility: hidden;
        box-shadow: 8px 0 32px rgba(5, 8, 20, 0.4);
        transition: transform 0.2s ease, visibility 0.2s;
    }

    .cva-menu-abierto .cva-rail {
        transform: none;
        visibility: visible;
    }

    .cva-rail:hover,
    .cva-rail:has(:focus-visible) {
        width: min(300px, 86vw);
    }

    /* En el cajon los textos siempre se ven */
    .cva-brand-texto,
    .cva-sec span {
        opacity: 1;
    }

    .cva-sec::before {
        opacity: 0;
    }

    .cva-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 890;
        background: rgba(5, 8, 20, 0.55);
    }

    .cva-hamburguesa,
    .cva-cerrar-movil {
        display: inline-flex;
    }

    .cva-usuario-nombre,
    .cva-salir-texto {
        display: none;
    }

    .cva-salir {
        padding: 0 0.6rem;
    }

    .cva-solo-escritorio {
        display: none;
    }

    .cva-solo-movil {
        display: inline;
    }
}

/* ---------- Impresion ---------- */

@media print {
    .cva-sidebar,
    .cva-header,
    .cva-backdrop {
        display: none !important;
    }
}