/* P private area frame and AccountSidebar */

.dc-private-frame {
    display: grid;
    gap: var(--dc-space-4);
    align-items: start;
    width: 100%;
}

.dc-private-frame:not(.dc-private-frame--mobile) {
    grid-template-columns: minmax(0, 1fr);
}

.dc-private-frame--mobile {
    grid-template-columns: minmax(0, 1fr);
}

.dc-private-frame__sidebar {
    min-width: 0;
}

.dc-private-frame__main {
    min-width: 0;
    padding: var(--dc-space-8) var(--dc-space-4);
    box-shadow: var(--dc-shadow-1);
}

.dc-account-sidebar {
    padding: 0;
    overflow: hidden;
    box-shadow: var(--dc-shadow-1);
}

.dc-account-sidebar__header {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: var(--dc-space-4);
    border-bottom: var(--dc-border-width) solid var(--dc-ceniza);
}

.dc-account-sidebar__identity {
    display: flex;
    align-items: center;
    gap: var(--dc-space-3);
    min-width: 0;
}

.dc-account-sidebar__avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--dc-radius-input);
    background: var(--dc-pino);
    color: var(--dc-lima);
    font-family: var(--dc-font-display);
    font-weight: var(--dc-weight-extrabold);
    font-size: var(--dc-size-body);
    letter-spacing: 0.03125rem;
}

.dc-account-sidebar__identity-copy {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.dc-account-sidebar__company {
    font-size: var(--dc-size-body-s);
    font-weight: var(--dc-weight-semibold);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dc-account-sidebar__user {
    font-size: var(--dc-size-small);
    color: var(--dc-gris);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dc-account-sidebar__level-badge {
    width: max-content;
    background: var(--dc-lima-300);
    color: var(--dc-musgo);
    border-radius: var(--dc-radius-pill);
    padding: 0.1875rem 0.625rem;
    font-size: 0.75rem;
    font-weight: var(--dc-weight-semibold);
}

.dc-account-sidebar__nav {
    padding: var(--dc-space-2);
}

.dc-account-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.dc-account-sidebar__link,
.dc-account-sidebar__logout {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5625rem 0.625rem;
    border-radius: var(--dc-radius-input);
    font-family: var(--dc-font-text);
    font-size: var(--dc-size-body-s);
    font-weight: var(--dc-weight-medium);
    color: var(--dc-tinta);
    text-decoration: none;
    background: transparent;
    transition: background var(--dc-transition), color var(--dc-transition);
}

.dc-account-sidebar__logout {
    color: var(--dc-gris);
}

.dc-account-sidebar__link-icon {
    flex: 0 0 auto;
    display: inline-flex;
    line-height: 0;
}

.dc-account-sidebar__link-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dc-account-sidebar__link-badge {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--dc-radius-pill);
    background: var(--dc-lima);
    color: var(--dc-pino);
    font-size: var(--dc-size-caption);
    font-weight: var(--dc-weight-bold);
}

.dc-account-sidebar__separator {
    display: block;
    height: 1px;
    margin: 0.375rem 0.625rem;
    background: var(--dc-ceniza);
}

/* AccountSidebar.dc.html: hover hueso, no underline; active lima-300 + pino. */
.dc-account-sidebar__link:hover,
.dc-account-sidebar__link:focus-visible,
.dc-account-sidebar__link:visited:hover,
.dc-account-sidebar__logout:hover,
.dc-account-sidebar__logout:focus-visible,
.dc-account-sidebar__logout:visited:hover {
    background: var(--dc-hueso);
    color: var(--dc-tinta);
    text-decoration: none;
}

.dc-account-sidebar__link.is-active {
    background: var(--dc-lima-300);
    color: var(--dc-pino);
    font-weight: var(--dc-weight-semibold);
}

.dc-account-sidebar__link.is-active:hover,
.dc-account-sidebar__link.is-active:focus-visible,
.dc-account-sidebar__link.is-active:visited:hover {
    background: var(--dc-lima-300);
    color: var(--dc-pino);
    text-decoration: none;
}

/* Blocksy/global a:hover — keep sidebar DS hovers on mi cuenta. */
body.dc-my-account-page .dc-account-sidebar__link:hover,
body.dc-my-account-page .dc-account-sidebar__link:focus-visible,
body.dc-my-account-page a.dc-account-sidebar__link:visited:hover {
    text-decoration: none;
}

.dc-account-sidebar__identity-row {
    display: flex;
    align-items: center;
    gap: var(--dc-space-3);
    min-width: 0;
}

.dc-account-sidebar__identity-row .dc-account-sidebar__identity {
    flex: 1;
    min-width: 0;
}

.dc-account-sidebar__tier-pill--mobile {
    display: none;
    flex: 0 0 auto;
    background: var(--dc-lima-300);
    color: var(--dc-musgo);
    border-radius: var(--dc-radius-pill);
    padding: 0.1875rem 0.625rem;
    font-size: 0.75rem;
    font-weight: var(--dc-weight-semibold);
    white-space: nowrap;
}

.dc-account-sidebar__pills-wrap {
    display: none;
    position: relative;
    min-width: 0;
}

.dc-account-sidebar__pills-track {
    display: flex;
    align-items: center;
    gap: var(--dc-space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* Room for the 3px focus ring (compensated by the negative margins) and for the last pill to clear the fade. */
    padding-block: var(--dc-space-1);
    margin-block: calc(-1 * var(--dc-space-1));
    padding-inline-start: var(--dc-space-1);
    margin-inline-start: calc(-1 * var(--dc-space-1));
    padding-inline-end: 2.75rem;
    scroll-padding-inline: var(--dc-space-1) 2.75rem;
}

.dc-account-sidebar__pills-track::-webkit-scrollbar {
    display: none;
}

.dc-account-sidebar__pills-fade {
    display: none;
}

.dc-account-sidebar__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    padding: 0.4375rem 0.875rem;
    border: var(--dc-border-width) solid var(--dc-ceniza);
    border-radius: var(--dc-radius-pill);
    background: var(--dc-blanco);
    color: var(--dc-tinta);
    font-family: var(--dc-font-text);
    font-size: var(--dc-size-small);
    font-weight: var(--dc-weight-medium);
    line-height: var(--dc-lh-h2);
    white-space: nowrap;
    text-decoration: none;
    scroll-snap-align: start;
    transition: background var(--dc-transition), color var(--dc-transition), border-color var(--dc-transition);
}

.dc-account-sidebar__pill:hover,
.dc-account-sidebar__pill:focus-visible,
.dc-account-sidebar__pill:visited:hover {
    text-decoration: none;
    color: var(--dc-tinta);
}

.dc-account-sidebar__pill.is-active {
    background: var(--dc-lima-300);
    border-color: var(--dc-lima-300);
    color: var(--dc-pino);
    font-weight: var(--dc-weight-semibold);
}

.dc-account-sidebar__pill.is-active:hover,
.dc-account-sidebar__pill.is-active:focus-visible,
.dc-account-sidebar__pill.is-active:visited:hover {
    background: var(--dc-lima-300);
    border-color: var(--dc-lima-300);
    color: var(--dc-pino);
}

.dc-account-sidebar__pill-badge {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    border-radius: var(--dc-radius-pill);
    background: var(--dc-lima);
    color: var(--dc-pino);
    font-size: 0.625rem;
    font-weight: var(--dc-weight-bold);
}

.dc-private-frame__logout {
    display: none;
    margin: 0;
    font-size: var(--dc-size-body-s);
    font-weight: var(--dc-weight-regular);
    line-height: var(--dc-lh-small);
    color: var(--dc-gris);
    text-align: center;
    text-decoration: none;
}

.dc-private-frame__logout:hover,
.dc-private-frame__logout:focus-visible,
.dc-private-frame__logout:visited:hover {
    color: var(--dc-gris);
    text-decoration: underline;
}

@media (max-width: 767px) {
    .dc-private-frame__main {
        padding: var(--dc-space-4);
    }

    /* Room for the fixed tab bar (P-M): its height plus the iOS home-indicator inset. */
    body.dc-has-mobile-tab-bar {
        padding-bottom: calc(var(--dc-tab-bar-height) + env(safe-area-inset-bottom, 0px));
    }
}

/* Mobile and tablet: single column, identity card + pills (P-M); the vertical sidebar starts at 1024px. */
@media (max-width: 1023px) {
    body.dc-my-account-page .dc-account-sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--dc-space-4);
        background: transparent;
        border: none;
        box-shadow: none;
        overflow: visible;
    }

    body.dc-my-account-page .dc-account-sidebar__header {
        flex-direction: row;
        align-items: center;
        gap: var(--dc-space-3);
        padding: 0.875rem;
        background: var(--dc-blanco);
        border: var(--dc-border-width) solid var(--dc-ceniza);
        border-radius: var(--dc-radius-card);
    }

    body.dc-my-account-page .dc-account-sidebar__identity-row {
        flex: 1;
        min-width: 0;
    }

    body.dc-my-account-page .dc-account-sidebar__level-badge {
        display: none;
    }

    body.dc-my-account-page .dc-account-sidebar__tier-pill--mobile {
        display: inline-flex;
    }

    body.dc-my-account-page .dc-account-sidebar__pills-wrap {
        display: block;
    }

    body.dc-my-account-page .dc-account-sidebar__pills-fade {
        display: block;
        position: absolute;
        top: 0;
        right: -1px;
        width: 2.75rem;
        height: 100%;
        background: linear-gradient(to right, transparent, var(--dc-hueso));
        pointer-events: none;
    }

    body.dc-my-account-page .dc-account-sidebar__nav--vertical {
        display: none;
    }

    body.dc-my-account-page .dc-private-frame__logout {
        display: block;
    }
}

/* Desktop: sidebar 288px + 24px gap + fluid content (P-1), sidebar sticky. */
@media (min-width: 1024px) {
    .dc-private-frame:not(.dc-private-frame--mobile) {
        grid-template-columns: 18rem minmax(0, 1fr);
        gap: var(--dc-space-6);
    }
}

/* Sticky only when the viewport is tall enough for the sidebar, clear of the admin bar. */
@media (min-width: 1024px) and (min-height: 40rem) {
    .dc-private-frame:not(.dc-private-frame--mobile) .dc-private-frame__sidebar {
        position: sticky;
        top: calc(var(--dc-space-6) + var(--wp-admin--admin-bar--height, 0px));
    }
}