/* =========================================================
   DOLCI HANDS
   NAVBAR
   ========================================================= */


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

    position:
        relative;

    z-index:
        var(--z-header);

    width:
        100%;

    background:
        rgba(247, 240, 230, 0.96);

    border-bottom:
        1px solid
        var(--color-border-soft);

}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {

    width:
        min(
            100% - (
                var(--container-padding) * 2
            ),
            var(--container-width)
        );

    min-height:
        84px;

    margin-inline:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        32px;

}


/* =========================================================
   MARCA
   ========================================================= */

.navbar-brand {

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    color:
        var(--color-text);

}


.navbar-brand-name {

    font-family:
        var(--font-display);

    font-size:
        1.55rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        -0.02em;

}


/* =========================================================
   ENLACES
   ========================================================= */

.navbar-links {

    flex:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        30px;

}


.navbar-link {

    position:
        relative;

    padding:
        30px 0;

    color:
        var(--color-text);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-weight-semibold);

    transition:
        color var(--transition-fast);

}


.navbar-link::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        20px;

    width:
        0;

    height:
        1px;

    background:
        var(--color-accent);

    transform:
        translateX(-50%);

    transition:
        width var(--transition-normal);

}


.navbar-link:hover {

    color:
        var(--color-accent);

}


.navbar-link:hover::after,
.navbar-link.active::after {

    width:
        30px;

}


.navbar-link.active {

    color:
        var(--color-text);

}


/* =========================================================
   ACCIONES
   ========================================================= */

.navbar-actions {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


/* =========================================================
   BOTONES DEL NAVBAR
   ========================================================= */

.navbar-button {

    min-height:
        44px;

    padding:
        10px 20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-pill);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-weight-semibold);

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);

}


.navbar-button:hover {

    transform:
        translateY(-1px);

}


.navbar-button-outline {

    border-color:
        var(--color-accent);

    color:
        var(--color-text);

    background:
        transparent;

}


.navbar-button-outline:hover {

    background:
        rgba(184, 111, 91, 0.08);

}


.navbar-button-primary {

    background:
        var(--color-primary);

    color:
        var(--dh-warm-white);

}


.navbar-button-primary:hover {

    background:
        var(--color-primary-deep);

}


/* =========================================================
   ICONOS
   ========================================================= */

.navbar-icon-button {

    position:
        relative;

    width:
        44px;

    height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--color-border);

    border-radius:
        50%;

    color:
        var(--color-text);

    background:
        transparent;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);

}


.navbar-icon-button:hover {

    background:
        var(--dh-cream-warm);

    border-color:
        var(--color-accent);

    transform:
        translateY(-1px);

}


.navbar-icon {

    display:
        block;

    font-size:
        1.1rem;

    line-height:
        1;

}


/* =========================================================
   DROPDOWN DE NOTIFICACIONES
========================================================= */

.navbar-notifications {

    position:
        relative;

}


.navbar-notifications::after {

    content:
        "";

    position:
        absolute;

    top:
        100%;

    right:
        -12px;

    width:
        372px;

    height:
        24px;

    background:
        transparent;

    pointer-events:
        none;

    z-index:
        999;

}


.navbar-notifications.notifications-open::after {

    pointer-events:
        auto;

}


.navbar-notifications-dropdown {

    position:
        absolute;

    top:
        calc(100% + 12px);

    right:
        0;

    width:
        360px;

    max-width:
        calc(100vw - 30px);

    background:
        #fffaf5;

    border:
        1px solid
        rgba(0, 0, 0, 0.08);

    border-radius:
        18px;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.16);

    overflow:
        hidden;

    opacity:
        1;

    visibility:
        hidden;

    transform:
        translateY(-8px);

    pointer-events:
        none;

    z-index:
        1000;

}



.navbar-notifications.notifications-open
.navbar-notifications-dropdown {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

    pointer-events:
        auto;

}



/* =========================================================
   CABECERA
========================================================= */

.navbar-notifications-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        17px 18px;

    border-bottom:
        1px solid
        var(--color-border);

}


.navbar-notifications-header span {

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .12em;

}


.navbar-notifications-header strong {

    font-size:
        11px;

    font-weight:
        600;

    color:
        var(--color-accent);

}


/* =========================================================
   LISTA
========================================================= */

.navbar-notifications-list {

    max-height:
        360px;

    overflow-y:
        auto;

}


/* =========================================================
   NOTIFICACIÓN
========================================================= */

.navbar-notification-item {

    position:
        relative;

    padding:
        15px 18px;

    border-bottom:
        1px solid
        rgba(0, 0, 0, .06);

    cursor:
        pointer;

    transition:
        background .2s ease;

}


.navbar-notification-item:hover {

    background:
        var(--dh-cream-warm);

}


.navbar-notification-item.is-unread {

    background:
        rgba(139, 92, 246, .045);

}


.navbar-notification-item.is-unread:hover {

    background:
        var(--dh-cream-warm);

}


.navbar-notification-item-content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

}


.navbar-notification-item-title {

    font-size:
        13px;

    font-weight:
        700;

}


.navbar-notification-item-message {

    font-size:
        12px;

    line-height:
        1.45;

    color:
        var(--color-text-muted);

}


.navbar-notification-item-date {

    font-size:
        10px;

    color:
        var(--color-text-muted);

}


/* =========================================================
   VACÍO
========================================================= */

.navbar-notifications-empty {

    padding:
        30px 20px;

    text-align:
        center;

}


.navbar-notifications-empty span {

    display:
        block;

    margin-bottom:
        8px;

    font-size:
        20px;

}


.navbar-notifications-empty p {

    margin:
        0;

    font-size:
        12px;

    color:
        var(--color-text-muted);

}


/* =========================================================
   FOOTER
========================================================= */

.navbar-notifications-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        15px 18px;

    border-top:
        1px solid
        var(--color-border);

    font-size:
        12px;

    font-weight:
        600;

    color:
        var(--color-text);

    text-decoration:
        none;

    transition:
        background .2s ease;

}


.navbar-notifications-footer:hover {

    background:
        var(--dh-cream-warm);

}


/* =========================================================
   BADGE DE NOTIFICACIONES
   ========================================================= */

.notification-badge {

    position:
        absolute;

    top:
        -4px;

    right:
        -4px;

    min-width:
        18px;

    height:
        18px;

    padding:
        0 4px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        2px solid
        var(--dh-cream);

    border-radius:
        var(--radius-pill);

    background:
        var(--color-accent);

    color:
        var(--dh-warm-white);

    font-size:
        9px;

    font-weight:
        var(--font-weight-bold);

    line-height:
        1;

}


/* =========================================================
   BOTÓN MÓVIL
   ========================================================= */

.navbar-mobile-toggle {

    display:
        none;

    width:
        44px;

    height:
        44px;

    padding:
        10px;

    border:
        1px solid
        var(--color-border);

    border-radius:
        50%;

    background:
        transparent;

}


.navbar-mobile-toggle span {

    display:
        block;

    width:
        20px;

    height:
        1.5px;

    margin:
        4px auto;

    background:
        var(--color-text);

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .navbar {

        gap:
            20px;

    }


    .navbar-links {

        gap:
            18px;

    }


    .navbar-link {

        font-size:
            0.8rem;

    }


    .navbar-button {

        padding:
            10px 15px;

    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 850px) {

    .site-header {

        position:
            sticky;

        top:
            0;

    }


    .navbar {

        min-height:
            70px;

        gap:
            12px;

    }


    .navbar-brand-name {

        font-size:
            1.35rem;

    }


    .navbar-links {

        display:
            none;

    }


    .navbar-actions {

        margin-left:
            auto;

    }


    .navbar-actions
    .navbar-button {

        display:
            none;

    }


    .navbar-mobile-toggle {

        display:
            block;

    }

}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 480px) {

    .navbar {

        min-height:
            64px;

    }


    .navbar-brand-name {

        font-size:
            1.2rem;

    }


    .navbar-icon-button {

        width:
            40px;

        height:
            40px;

    }


    .navbar-mobile-toggle {

        width:
            40px;

        height:
            40px;

    }

}



/* =========================================================
   NAVBAR
   ESTADO ACTIVO
   ========================================================= */


/* =========================================================
   ICONOS ACTIVOS
   ========================================================= */

.navbar-icon-button.active {

    background:
        rgba(184, 120, 93, 0.12);

    border-color:
        rgba(184, 120, 93, 0.35);

    box-shadow:
        0 6px 18px
        rgba(76, 51, 40, 0.08);

}


/* =========================================================
   MI CUENTA ACTIVO
   ========================================================= */

.navbar-button-outline.active {

    background:
        rgba(184, 120, 93, 0.12);

    border-color:
        rgba(184, 120, 93, 0.35);

    color:
        #6f493b;

    box-shadow:
        0 6px 18px
        rgba(76, 51, 40, 0.08);

}


/* =========================================================
   ACTIVO + HOVER
   ========================================================= */

.navbar-icon-button.active:hover,
.navbar-button-outline.active:hover {

    background:
        rgba(184, 120, 93, 0.17);

    border-color:
        rgba(184, 120, 93, 0.45);

}



/* =========================================================
   DOLCI HANDS — MENÚ LATERAL MÓVIL
========================================================= */

.mobile-drawer-overlay {

    position:
        fixed;

    inset:
        0;

    background:
        rgba(
            47,
            35,
            30,
            0.38
        );

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity 220ms ease,
        visibility 220ms ease;

    z-index:
        9998;

}


.mobile-drawer-overlay.is-visible {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

}


/* =========================================================
   DRAWER
========================================================= */

.mobile-drawer {

    position:
        fixed;

    top:
        0;

    right:
        0;

    width:
        min(
            86vw,
            360px
        );

    height:
        100dvh;

    display:
        flex;

    flex-direction:
        column;

    background:
        #fffaf5;

    border-left:
        1px solid
        rgba(
            91,
            63,
            51,
            0.12
        );

    box-shadow:
        -12px 0 35px
        rgba(
            73,
            53,
            44,
            0.16
        );

    transform:
        translateX(
            100%
        );

    transition:
        transform 260ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    overflow-y:
        auto;

    overscroll-behavior:
        contain;

    z-index:
        9999;

}


.mobile-drawer.is-open {

    transform:
        translateX(
            0
        );

}


/* =========================================================
   CABECERA
========================================================= */

.mobile-drawer-header {

    min-height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 20px;

    border-bottom:
        1px solid
        #e7ddd5;

}


.mobile-drawer-brand {

    color:
        #49352c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        24px;

    font-weight:
        700;

    text-decoration:
        none;

}


.mobile-drawer-close {

    width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #ddcec4;

    border-radius:
        50%;

    background:
        #fffaf5;

    color:
        #49352c;

    font-size:
        28px;

    line-height:
        1;

    cursor:
        pointer;

}


.mobile-drawer-close:active {

    transform:
        scale(
            0.96
        );

}


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

.mobile-drawer-navigation {

    display:
        flex;

    flex-direction:
        column;

    padding:
        14px 12px 8px;

}


.mobile-drawer-link {

    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    padding:
        0 14px;

    border-radius:
        12px;

    color:
        #49352c;

    font-size:
        15px;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        background 160ms ease,
        color 160ms ease;

}


.mobile-drawer-link:active {

    background:
        #f3e7de;

}


.mobile-drawer-link:hover {

    background:
        #f7eee8;

}


/* =========================================================
   SEPARADOR
========================================================= */

.mobile-drawer-divider {

    height:
        1px;

    margin:
        8px 20px;

    background:
        #e7ddd5;

}


/* =========================================================
   CUENTA
========================================================= */

.mobile-drawer-account {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;

    padding:
        8px 12px 20px;

}


.mobile-drawer-account-link {

    min-height:
        46px;

    width:
        100%;

    box-sizing:
        border-box;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 8px;

    text-align:
        center;

}

.mobile-drawer-account-link.navbar-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        0 8px;

}


.mobile-drawer-account-link[href*="logout"] {

    margin-top:
        0;

    color:
        #9a5c49;

}


/* =========================================================
   BLOQUEAR SCROLL DEL DOCUMENTO
========================================================= */

body.mobile-drawer-open {

    overflow:
        hidden;

}


/* =========================================================
   BOTONES DE CUENTA — MENÚ MÓVIL
========================================================= */

.mobile-drawer-account-link.navbar-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    width:
        100%;

    box-sizing:
        border-box;

}


/* CREAR CUENTA */

.mobile-drawer-account-link.navbar-button:not(
    .navbar-button-outline
) {

    background:
        #b96f58;

    color:
        #ffffff;

    border:
        1px solid
        #b96f58;

}


/* INICIAR SESIÓN */

.mobile-drawer-account-link.navbar-button.navbar-button-outline {

    background:
        transparent;

    color:
        #49352c;

    border:
        1px solid
        #d8c8be;

}


/* =========================================================
   MÓVIL
========================================================= */

@media (min-width: 851px) {

    .mobile-drawer,
    .mobile-drawer-overlay {

        display:
            none;

    }

}


@media (max-width: 850px) {

    .mobile-drawer,
    .mobile-drawer-overlay {

        display:
            flex;

    }

}



/* =========================================================
   CENTRADO REAL — BOTONES DEL DRAWER MÓVIL
========================================================= */

.mobile-drawer .mobile-drawer-account-link {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    text-align:
        center !important;

    margin:
        0 !important;

    padding:
        0 8px !important;

    line-height:
        1 !important;

}


/* El contenido interno del botón también debe centrarse */

.mobile-drawer .mobile-drawer-account-link * {

    margin:
        0 !important;

    text-align:
        center !important;

    line-height:
        1 !important;

}