:root {
    --admin-sidebar-width: clamp(320px, 27.6vw, 397px);
    --admin-sidebar-color: #92a2f3;
    --admin-text-color: #ffffff;
}


/* =========================================================
   CONFIGURACIÓN GENERAL
   ========================================================= */

.admin-shell,
.admin-shell * {
    box-sizing: border-box;
}

.admin-shell {
    display: flex;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    margin: 0;
    /*
       Evita que se desplace toda la página.
       El scroll estará dentro del contenido principal.
    */
    overflow: hidden;
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   MENÚ LATERAL
   ========================================================= */

.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 10;
    width: var(--admin-sidebar-width);
    height: 100dvh;
    padding: clamp(24px, 3.2vh, 35px) 32px clamp(22px, 2.8vh, 30px);
    display: flex;
    flex-direction: column;
    align-items: center;
    /*
       Si la pantalla tiene poca altura, el propio menú
       podrá desplazarse sin afectar el contenido derecho.
    */
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--admin-sidebar-color);
    color: var(--admin-text-color);
}


/* =========================================================
   INFORMACIÓN DEL USUARIO
   ========================================================= */

.admin-profile {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.admin-avatar {
    width: clamp(105px, 13.5vh, 145px);
    height: clamp(105px, 13.5vh, 145px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ffffff;
    color: var(--admin-sidebar-color);
    font-size: clamp(42px, 5.4vh, 58px);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.admin-user-name {
    width: 100%;
    margin-top: clamp(12px, 1.7vh, 18px);
    color: var(--admin-text-color);
    font-size: clamp(18px, 2.2vh, 24px);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}


/* =========================================================
   NAVEGACIÓN
   ========================================================= */

.admin-navigation {
    width: 100%;
    margin-top: clamp(48px, 7vh, 76px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(5px, 0.7vh, 8px);
    flex-shrink: 0;
}

.admin-nav-link {
    position: relative;
    display: block;
    width: fit-content;
    padding: 0;
    color: var(--admin-text-color);
    font-size: clamp(18px, 2.2vh, 23px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 150ms ease, transform 150ms ease;
}

    .admin-nav-link:visited {
        color: var(--admin-text-color);
    }

    .admin-nav-link:hover {
        color: var(--admin-text-color);
        opacity: 0.78;
        transform: translateX(3px);
    }

    .admin-nav-link:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 5px;
        border-radius: 3px;
    }

    .admin-nav-link.active {
        color: var(--admin-text-color);
        opacity: 0.72;
    }

        /*
   Elimina el subrayado de la opción activa.
*/
        .admin-nav-link.active::after {
            display: none;
        }


/* =========================================================
   PARTE INFERIOR DEL MENÚ
   ========================================================= */

.admin-sidebar-footer {
    width: 100%;
    margin-top: auto;
    padding-top: clamp(28px, 4vh, 44px);
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.admin-logout {
    margin: 0 0 clamp(8px, 1.2vh, 13px);
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--admin-text-color);
    font-family: inherit;
    font-size: clamp(18px, 2.2vh, 23px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 150ms ease, transform 150ms ease;
}

    .admin-logout:hover {
        opacity: 0.78;
        transform: translateY(-1px);
    }

    .admin-logout:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 5px;
        border-radius: 3px;
    }

    .admin-logout:disabled {
        cursor: not-allowed;
        opacity: 0.6;
        transform: none;
    }

.admin-sidebar-logo {
    width: clamp(205px, 28vh, 315px);
    height: clamp(205px, 28vh, 315px);
    margin: 0;
    display: block;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: contain;
    background: #ffffff;
    box-shadow: 0 8px 9px rgba(0, 0, 0, 0.22), 0 2px 4px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

.admin-main {
    width: calc(100% - var(--admin-sidebar-width));
    min-width: 0;
    height: 100dvh;
    min-height: 0;
    margin-left: var(--admin-sidebar-width);
    padding: clamp(24px, 3vw, 48px);
    /*
       El contenido de la derecha tendrá su propio
       desplazamiento vertical.
    */
    overflow-x: hidden;
    overflow-y: auto;
    /*
       Evita movimientos bruscos cuando aparece
       la barra de desplazamiento.
    */
    scrollbar-gutter: stable;
    /*
       Evita transferir el scroll al resto de la página.
    */
    overscroll-behavior: contain;
    /*
       Mejora el desplazamiento en dispositivos táctiles.
    */
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
}


/* =========================================================
   PANTALLAS DE POCA ALTURA
   ========================================================= */

@media (max-height: 760px) and (min-width: 769px) {
    .admin-sidebar {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .admin-avatar {
        width: 90px;
        height: 90px;
        font-size: 37px;
    }

    .admin-user-name {
        margin-top: 10px;
        font-size: 17px;
    }

    .admin-navigation {
        margin-top: 26px;
        gap: 4px;
    }

    .admin-nav-link {
        font-size: 16px;
    }

    .admin-sidebar-footer {
        padding-top: 20px;
    }

    .admin-logout {
        margin-bottom: 7px;
        font-size: 16px;
    }

    .admin-sidebar-logo {
        width: 155px;
        height: 155px;
    }
}


/* =========================================================
   TABLETAS Y TELÉFONOS
   ========================================================= */

@media (max-width: 768px) {
    :root {
        --admin-sidebar-width: 100%;
    }

    /*
       En móvil la página vuelve a utilizar el scroll
       normal del navegador.
    */
    .admin-shell {
        height: auto;
        min-height: 100dvh;
        flex-direction: column;
        overflow: visible;
    }

    .admin-sidebar {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 100dvh;
        padding: 30px 24px;
        overflow: visible;
    }

    .admin-avatar {
        width: 110px;
        height: 110px;
        font-size: 43px;
    }

    .admin-user-name {
        margin-top: 14px;
        font-size: 20px;
        white-space: normal;
    }

    .admin-navigation {
        margin-top: 45px;
        gap: 10px;
    }

    .admin-nav-link {
        font-size: 20px;
    }

    .admin-sidebar-footer {
        margin-top: 55px;
        padding-top: 0;
    }

    .admin-logout {
        font-size: 20px;
    }

    .admin-sidebar-logo {
        width: min(245px, 70vw);
        height: min(245px, 70vw);
    }

    .admin-main {
        width: 100%;
        height: auto;
        min-height: auto;
        margin-left: 0;
        padding: 24px 18px;
        overflow: visible;
    }
}