/* _content/OmTrace.Web/Shared/MainLayout.razor.rz.scp.css */
/* ============================
   Barra superior
   ============================ */
.main-navbar[b-scc9rxpawc] {
    height: 56px;
    background: #1f4f73; /* azul principal */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    z-index: 1100;
}

    .main-navbar .navbar-brand[b-scc9rxpawc] {
        color: #ffffff;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        font-size: 0.95rem;
    }

        .main-navbar .navbar-brand:hover[b-scc9rxpawc] {
            color: #f5f9ff;
            text-decoration: none;
        }

.hamburguesa[b-scc9rxpawc] {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.4rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

    .hamburguesa:focus[b-scc9rxpawc] {
        outline: none;
    }

/* ============================
   Menú lateral (overlay)
   ============================ */
.menu-lateral[b-scc9rxpawc] {
    position: fixed;
    top: 56px; /* debajo de la barra superior */
    left: 0;
    height: calc(100vh - 56px);
    width: 250px;
    background: #163752;
    color: #e6f1ff;
    padding: 0.75rem 1rem 2.5rem;
    box-shadow: 4px 0 12px rgba(0,0,0,0.35);
    overflow-y: auto;
    transform: translateX(-100%); /* 👈 por defecto CERRADO */
    transition: transform 0.2s ease-out;
    z-index: 1050;
}

    /* Cuando está abierto */
    .menu-lateral.abierto[b-scc9rxpawc] {
        transform: translateX(0);
    }

    .menu-lateral ul[b-scc9rxpawc] {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    .menu-lateral li[b-scc9rxpawc] {
        margin-bottom: 0.20rem;
    }

    /* Link genérico del menú */
    .menu-lateral a[b-scc9rxpawc] {
        display: flex;
        align-items: center;
        gap: 0.40rem;
        font-size: 0.90rem;
        color: #e6f1ff;
        text-decoration: none;
        padding: 0.20rem 0;
    }

        /* Estado hover */
        .menu-lateral a:hover[b-scc9rxpawc] {
            color: #ffffff;
            text-decoration: underline;
        }

    /* Estado activo de NavLink
   (el :global es para que Blazor no aísle la clase .active) */
    .menu-lateral :global(a.active)[b-scc9rxpawc] {
        font-weight: 600;
        color: #ffffff;
    }

    /* Iconos del menú */
    .menu-lateral i[b-scc9rxpawc] {
        font-size: 0.95rem;
        opacity: 0.95;
    }

    /* ============================
   Títulos de sección
   ============================ */
    .menu-lateral .submenu > span[b-scc9rxpawc] {
        display: block;
        margin-top: 0.75rem;
        margin-bottom: 0.15rem;
        font-size: 0.80rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #ffd166; /* amarillo suave para destacar */
    }

    /* Primera sección (Inicio) un poco separada */
    .menu-lateral > ul > li:first-child[b-scc9rxpawc] {
        margin-bottom: 0.5rem;
    }

/* ============================
   Contenido principal
   ============================ */
.contenido[b-scc9rxpawc] {
    padding: 1.25rem 1.75rem 3rem;
    max-width: 1100px; /* 👈 ancho máximo */
    margin: 0 auto; /* 👈 centrado */
}

/* En pantallas pequeñas: un poquito menos de padding */
@media (max-width: 768px) {
    .contenido[b-scc9rxpawc] {
        padding: 1rem 1rem 2.5rem;
        max-width: 100%;
    }
}

/* ============================
   Pie de página
   ============================ */
.footer-omtrace[b-scc9rxpawc] {
    font-size: 0.8rem;
    padding: 0.75rem 0;
    background: transparent;
    color: #e6f1ff;
}