@inherits LayoutComponentBase
@inject GestionaDenunciasAN.Models.UserState userState

<style>


    /* Barra superior con gradiente de azul: izquierda azul clarito, derecha azul oscuro */
    .top-row {
        position: relative;
        width: 100%;
        height: 60px;
        background: linear-gradient(to right, #5a9bd5, #1f497d);
        color: #fff;
    }

    /* Título del portal posicionado a la izquierda */
    .portal-title {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        font-weight: bold;
        font-size: 1.2rem;
        margin-left: 1rem;
    }

    /* Contenedor del enlace de usuario posicionado a la derecha */
    .logout-container {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        margin-right: 1rem;
    }

    /* Enlace que luce como texto, sin decoraciones */
    .logout-link {
        text-decoration: none;
        color: #fff;
        display: flex;
        align-items: center;
        border: none;
        background: transparent;
        cursor: pointer;
        font: inherit;
        padding: 0;
    }

        /* Icono SVG más grande */
        .logout-link img {
            height: 1.5em;
            width: auto;
            margin-right: 0.5rem;
        }

        /* Al pasar el ratón, se pone en negrita y mantiene el color blanco */
        .logout-link:hover,
        .logout-link:focus,
        .logout-link:active {
            font-weight: bold;
            color: #fff !important;
            text-decoration: none;
        }
</style>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <!-- Barra superior completa con gradiente de azul -->
        <div class="top-row">
            <div class="portal-title">
                Portal Gestion Denuncias
            </div>
            <div class="logout-container">
                <a class="logout-link" href="/">
                    <img src="Content/icon/person-fill.svg" alt="User Icon" />
                    <span>@userState?.NombreUsu</span>
                </a>
            </div>
        </div>

        <article class="content">
            @Body
        </article>
    </main>
</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>
