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

.dsm-account {
    padding-block: var(--dsm-space-6);
}

.dsm-account__header {
    margin-bottom: var(--dsm-space-6);
}

.dsm-account__title {
    margin: 0 0 var(--dsm-space-2);
}

.dsm-account__description {
    margin: 0;
    color: var(--dsm-color-text-muted);
}

.dsm-account__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, 0.65fr);
    gap: var(--dsm-space-5);
    margin-bottom: var(--dsm-space-5);
}

.dsm-account__grid > .dsm-card {
    height: 100%;
}

.dsm-account__modules {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: var(--dsm-space-5);
    margin-top: var(--dsm-space-5);
}

.dsm-account__modules > * {
    min-width: 0;
    margin: 0;
}

.dsm-account-module {
    display: block;
}

.dsm-account-module > .dsm-card {
    height: 100%;
}

.dsm-account-module__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--dsm-space-5);
    height: 100%;
}

.dsm-account-module__summary {
    margin-bottom: 0;
    color: var(--dsm-color-text-muted);
    font-size: var(--dsm-font-size-sm);
}

.dsm-account-module__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dsm-space-3);
}

.dsm-account__danger-zone {
    margin-top: var(--dsm-space-7);
}

@media (max-width: 900px) {
    .dsm-account__grid,
    .dsm-account__modules {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .dsm-account {
        padding-top: var(--dsm-space-5);
        padding-bottom: var(--dsm-space-6);
    }

    .dsm-account__grid,
    .dsm-account__modules {
        gap: var(--dsm-space-4);
    }

    .dsm-account-module__actions,
    .dsm-account-module__actions .dsm-button {
        width: 100%;
    }

    .dsm-account-module__actions .dsm-button {
        justify-content: center;
    }
}


/* ==========================================================
   MI CUENTA - OPCIONES CONFIGURABLES
   ========================================================== */

.dsm-account__session {
    margin-top: var(--dsm-space-2);
    color: var(--dsm-color-text-muted);
    font-size: var(--dsm-font-size-sm);
}

.dsm-account__grid--single {
    grid-template-columns: 1fr;
}

.dsm-account__modules--columns-1 {
    grid-template-columns: 1fr;
}

.dsm-account__modules--columns-2 {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}

@media (max-width: 900px) {

    .dsm-account__modules--columns-2 {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   PLANES Y SUSCRIPCIONES
   ========================================================== */

.dsm-subscription-plans {
    width: min(
        1180px,
        calc(100% - 32px)
    );
    margin-inline: auto;
    padding-block:
        var(--dsm-space-7);
}

.dsm-subscription-plans .dsm-account-header {
    max-width: 760px;
    margin-bottom:
        var(--dsm-space-6);
}

.dsm-subscription-plans .dsm-account-header h1 {
    margin:
        0
        0
        var(--dsm-space-2);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );
}

.dsm-subscription-plans .dsm-account-header p {
    margin: 0;
    color:
        var(--dsm-color-text-muted);
    font-size:
        var(--dsm-font-size-base);
}


/* ==========================================================
   GRID DE PLANES
   ========================================================== */

.dsm-subscription-plans__grid {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
    gap:
        var(--dsm-space-5);
    align-items: stretch;
}


/* ==========================================================
   TARJETA DE PLAN
   ========================================================== */

.dsm-subscription-plans__grid > .dsm-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 100%;

    padding:
        clamp(
            var(--dsm-space-5),
            2vw,
            var(--dsm-space-6)
        );

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

    border-radius:
        22px;

    background:
        var(--dsm-color-surface);

    box-shadow:
        0 8px 28px
        rgba(0, 0, 0, 0.05);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.dsm-subscription-plans__grid > .dsm-card:hover {
    transform:
        translateY(-4px);

    border-color:
        var(--dsm-color-primary);

    box-shadow:
        0 16px 38px
        rgba(0, 0, 0, 0.09);
}


/* ==========================================================
   NOMBRE / DESCRIPCIÓN
   ========================================================== */

.dsm-subscription-plans__grid > .dsm-card h2 {
    margin:
        0
        0
        var(--dsm-space-3);

    font-size:
        1.35rem;
}

.dsm-subscription-plans__grid > .dsm-card > p:not(
    .dsm-subscription-plan__price
) {
    margin:
        0
        0
        var(--dsm-space-5);

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

    line-height:
        1.55;
}


/* ==========================================================
   PRECIO
   ========================================================== */

.dsm-subscription-plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap:
        6px;

    margin:
        0
        0
        var(--dsm-space-5);
}

.dsm-subscription-plan__price strong {
    font-size:
        clamp(
            1.8rem,
            3vw,
            2.35rem
        );

    line-height:
        1;

    letter-spacing:
        -0.03em;
}

.dsm-subscription-plan__price span {
    color:
        var(--dsm-color-text-muted);

    font-size:
        var(--dsm-font-size-sm);
}


/* ==========================================================
   CARACTERÍSTICAS
   ========================================================== */

.dsm-subscription-plans__grid > .dsm-card ul {
    display: grid;
    gap:
        var(--dsm-space-3);

    margin:
        0
        0
        var(--dsm-space-6);

    padding: 0;

    list-style: none;
}

.dsm-subscription-plans__grid > .dsm-card li {
    position: relative;

    padding-left:
        28px;

    line-height:
        1.45;
}

.dsm-subscription-plans__grid > .dsm-card li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width:
        20px;

    height:
        20px;

    border-radius:
        999px;

    color:
        var(--dsm-color-primary);

    background:
        color-mix(
            in srgb,
            var(--dsm-color-primary) 10%,
            transparent
        );

    font-size:
        0.75rem;

    font-weight:
        900;
}


/* ==========================================================
   CTA / ESTADO
   ========================================================== */

.dsm-subscription-plans__grid > .dsm-card form,
.dsm-subscription-plans__grid > .dsm-card > .dsm-button,
.dsm-subscription-plans__grid > .dsm-card > .dsm-account-notice {
    margin-top:
        auto;
}

.dsm-subscription-plans__grid > .dsm-card form {
    width:
        100%;
}

.dsm-subscription-plans__grid > .dsm-card form .dsm-button,
.dsm-subscription-plans__grid > .dsm-card > .dsm-button {
    width:
        100%;

    min-height:
        48px;

    justify-content:
        center;

    border-radius:
        12px;
}

.dsm-subscription-plans__grid .dsm-account-notice {
    padding:
        12px
        14px;

    border-radius:
        12px;
}


/* ==========================================================
   TARJETA ACTIVA / FREE
   ========================================================== */

.dsm-subscription-plans__grid > .dsm-card:has(
    .dsm-account-notice--success
) {
    border-color:
        var(--dsm-color-primary);
}

.dsm-subscription-plans__grid > .dsm-card:has(
    .dsm-account-notice--success
)::before {
    content:
        "Activo";

    position:
        absolute;

    top:
        14px;

    right:
        14px;

    padding:
        5px
        9px;

    border-radius:
        999px;

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

    color:
        white;

    font-size:
        0.72rem;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.04em;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {

    .dsm-subscription-plans__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}

@media (max-width: 650px) {

    .dsm-subscription-plans {
        width:
            min(
                100% - 24px,
                1180px
            );

        padding-block:
            var(--dsm-space-5);
    }

    .dsm-subscription-plans__grid {
        grid-template-columns:
            1fr;

        gap:
            var(--dsm-space-4);
    }

    .dsm-subscription-plans__grid > .dsm-card {
        border-radius:
            16px;
    }

    .dsm-subscription-plan__price strong {
        font-size:
            2rem;
    }

}


/* ==========================================================
   MIS FAVORITOS
   ========================================================== */

.dsm-customer-favorites {
    width: min(
        1180px,
        calc(100% - 32px)
    );
    margin-inline: auto;
    padding-block: var(--dsm-space-7);
}


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

.dsm-customer-favorites__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--dsm-space-5);
    margin-bottom: var(--dsm-space-6);
}

.dsm-customer-favorites__title {
    margin:
        0
        0
        var(--dsm-space-2);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );
}

.dsm-customer-favorites__description {
    max-width: 680px;
    margin: 0;

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

.dsm-customer-favorites__count {
    flex: 0 0 auto;

    padding:
        8px
        14px;

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

    border-radius:
        999px;

    background:
        var(--dsm-color-surface);

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

    font-weight:
        700;
}


/* ==========================================================
   GRID
   ========================================================== */

.dsm-customer-favorites__grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        var(--dsm-space-5);
}


/* ==========================================================
   TARJETA
   ========================================================== */

.dsm-customer-favorite {
    display: flex;
    flex-direction: column;

    min-width: 0;
    overflow: hidden;

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

    border-radius:
        18px;

    background:
        var(--dsm-color-surface);

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, 0.035);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.dsm-customer-favorite:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--dsm-color-primary);

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.07);
}


/* ==========================================================
   IMAGEN
   ========================================================== */

.dsm-customer-favorite__image {
    position: relative;

    display: block;

    overflow: hidden;

    aspect-ratio:
        4 / 5;

    background:
        var(--dsm-color-surface-muted);

    color: inherit;
    text-decoration: none;
}

.dsm-customer-favorite__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.25s ease;
}

.dsm-customer-favorite:hover
.dsm-customer-favorite__image img {
    transform:
        scale(1.025);
}

.dsm-customer-favorite__placeholder {
    display: flex;

    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;

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

.dsm-customer-favorite__placeholder .dashicons {
    width: auto;
    height: auto;

    font-size:
        2.3rem;

    opacity:
        0.35;
}


/* ==========================================================
   RESERVADO
   ========================================================== */

.dsm-customer-favorite__reserved {
    position: absolute;

    top:
        12px;

    left:
        12px;

    padding:
        6px
        10px;

    border-radius:
        999px;

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

    color:
        var(--dsm-color-text-inverse);

    font-size:
        0.72rem;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.03em;
}


/* ==========================================================
   CUERPO
   ========================================================== */

.dsm-customer-favorite__content {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding:
        var(--dsm-space-5);
}

.dsm-customer-favorite__title {
    margin:
        0
        0
        var(--dsm-space-3);

    font-size:
        1.05rem;

    line-height:
        1.3;
}

.dsm-customer-favorite__title a {
    color:
        var(--dsm-color-text);

    text-decoration:
        none;
}

.dsm-customer-favorite__title a:hover,
.dsm-customer-favorite__title a:focus-visible {
    text-decoration:
        underline;
}


/* ==========================================================
   PRECIO
   ========================================================== */

.dsm-customer-favorite__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap:
        8px;

    margin-bottom:
        var(--dsm-space-4);
}

.dsm-customer-favorite__price strong {
    font-size:
        1.18rem;
}

.dsm-customer-favorite__price del {
    color:
        var(--dsm-color-text-muted);

    font-size:
        var(--dsm-font-size-sm);
}


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

.dsm-customer-favorite__attributes {
    display: grid;

    gap:
        10px;

    margin:
        0
        0
        var(--dsm-space-5);
}

.dsm-customer-favorite__attributes > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        12px;
}

.dsm-customer-favorite__attributes dt {
    color:
        var(--dsm-color-text-muted);

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

    font-weight:
        600;
}

.dsm-customer-favorite__attributes dd {
    margin: 0;

    text-align: right;

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

    font-weight:
        700;
}


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

.dsm-customer-favorite__actions {
    display: flex;
    align-items: stretch;

    gap:
        10px;

    margin-top:
        auto;
}

.dsm-customer-favorite__actions > a {
    flex:
        1 1 auto;
}

.dsm-customer-favorite__actions form {
    flex:
        0 0 auto;

    margin: 0;
}

.dsm-customer-favorite__actions
.dsm-favorites-button {
    min-height:
        44px;

    border-radius:
        11px;
}


/*
 * CTA principal.
 */
.dsm-customer-favorite__actions
.dsm-favorites-button--primary {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        10px
        16px;

    color:
        var(--dsm-color-text-inverse);

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

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

    text-decoration:
        none;

    font-weight:
        800;
}


/*
 * Quitar favorito.
 *
 * Lo dejamos como acción secundaria,
 * no como otro botón visualmente igual.
 */
.dsm-customer-favorite__actions
.dsm-favorites-button--secondary {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap:
        6px;

    height:
        44px;

    padding:
        0
        12px;

    color:
        var(--dsm-color-primary);

    background:
        transparent;

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

    font-weight:
        700;

    cursor:
        pointer;
}

.dsm-customer-favorite__actions
.dsm-favorites-button--secondary:hover {
    border-color:
        var(--dsm-color-primary);

    background:
        var(--dsm-color-surface-muted);
}


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

.dsm-customer-favorites__empty {
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width:
        640px;

    margin-inline:
        auto;

    padding:
        clamp(
            40px,
            8vw,
            72px
        );

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

    border-radius:
        20px;

    background:
        var(--dsm-color-surface);

    text-align:
        center;
}

.dsm-customer-favorites__empty > .dashicons {
    width: auto;
    height: auto;

    margin-bottom:
        var(--dsm-space-3);

    font-size:
        2.5rem;

    color:
        var(--dsm-color-primary);
}

.dsm-customer-favorites__empty h2 {
    margin:
        0
        0
        var(--dsm-space-2);
}

.dsm-customer-favorites__empty p {
    margin:
        0
        0
        var(--dsm-space-5);

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


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

@media (max-width: 1000px) {

    .dsm-customer-favorites__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


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

@media (max-width: 600px) {

    .dsm-customer-favorites {
        width:
            min(
                100% - 24px,
                1180px
            );

        padding-block:
            var(--dsm-space-5);
    }

    .dsm-customer-favorites__header {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            var(--dsm-space-3);

        margin-bottom:
            var(--dsm-space-5);
    }

    .dsm-customer-favorites__title {
        font-size:
            2rem;
    }

    .dsm-customer-favorites__grid {
        grid-template-columns:
            1fr;

        gap:
            var(--dsm-space-4);
    }

    .dsm-customer-favorite__image {
        aspect-ratio:
            4 / 4.5;
    }

    .dsm-customer-favorite__actions {
        flex-direction:
            column;
    }

    .dsm-customer-favorite__actions form,
    .dsm-customer-favorite__actions
    .dsm-favorites-button {
        width:
            100%;
    }

}


/* ==========================================================
   AJUSTE DE ANCHO - MIS FAVORITOS
   ========================================================== */

.dsm-customer-favorites__grid {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}

@media (max-width: 900px) {

    .dsm-customer-favorites__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}

@media (max-width: 600px) {

    .dsm-customer-favorites__grid {
        grid-template-columns:
            1fr;
    }

}


/* ==========================================================
   FAVORITOS - CORAZÓN SOBRE LA IMAGEN
   ========================================================== */

.dsm-customer-favorite {
    position: relative;
}

.dsm-customer-favorite__heart-form {
    position: absolute;
    z-index: 5;

    top: 12px;
    right: 12px;

    margin: 0;
}

.dsm-customer-favorite__heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.75);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.94);

    color:
        var(--dsm-color-primary);

    box-shadow:
        0 4px 16px
        rgba(0, 0, 0, 0.12);

    cursor: pointer;

    transition:
        transform 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}

.dsm-customer-favorite__heart:hover {
    transform:
        scale(1.06);

    background:
        var(--dsm-color-surface);

    box-shadow:
        0 6px 20px
        rgba(0, 0, 0, 0.16);
}

.dsm-customer-favorite__heart:focus-visible {
    outline:
        3px solid
        var(--dsm-color-focus);

    outline-offset:
        2px;
}

.dsm-customer-favorite__heart .dashicons {
    width: auto;
    height: auto;

    font-size: 22px;
}


/*
 * Ahora solo queda Ver anuncio,
 * así que puede ocupar todo el ancho.
 */
.dsm-customer-favorite__actions > a {
    width: 100%;
    flex: 1 1 100%;
}


/* Reservado queda en la esquina opuesta. */
.dsm-customer-favorite__reserved {
    left: 12px;
    right: auto;
}


/* ==========================================================
   MIS FAVORITOS - CORAZÓN ACTIVO
   ========================================================== */

.dsm-customer-favorite__heart-icon {
    display: block;

    width: auto;
    height: auto;

    margin: 0;
    padding: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        25px;

    font-weight:
        400;

    line-height:
        1;

    color:
        #d9232e;
}


/* ==========================================================
   MIS ANUNCIOS
   ========================================================== */

.dsm-customer-advertisements {
    width: min(
        1180px,
        calc(100% - 32px)
    );

    margin-inline: auto;
    padding-block: var(--dsm-space-7);
}


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

.dsm-customer-advertisements
.dsm-account-section-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: var(--dsm-space-5);

    margin-bottom: var(--dsm-space-6);
}

.dsm-customer-advertisements
.dsm-account-section-header__content {
    min-width: 0;
}

.dsm-customer-advertisements
.dsm-account-section-header h1 {
    margin:
        0
        0
        var(--dsm-space-2);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    line-height: 1.1;
}

.dsm-customer-advertisements
.dsm-account-section-header p {
    max-width: 680px;

    margin: 0;

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

.dsm-customer-advertisements
.dsm-account-section-header__actions {
    flex: 0 0 auto;
}

.dsm-customer-advertisements
.dsm-account-section-header__actions
.dsm-button {
    min-height: 46px;

    padding-inline:
        20px;

    border-radius:
        12px;
}


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

.dsm-customer-advertisements
.dsm-account-empty-state {
    display: flex;

    flex-direction: column;
    align-items: center;

    width: min(
        100%,
        640px
    );

    margin:
        var(--dsm-space-7)
        auto
        0;

    padding:
        clamp(
            42px,
            7vw,
            72px
        )
        clamp(
            24px,
            5vw,
            54px
        );

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

    border-radius:
        22px;

    background:
        var(--dsm-color-surface);

    text-align: center;

    box-shadow:
        0 8px 26px
        rgba(0, 0, 0, 0.035);
}


/*
 * No dependemos de Dashicons para el diseño.
 */
.dsm-customer-advertisements
.dsm-account-empty-state
> .dashicons {
    display: none;
}

.dsm-customer-advertisements
.dsm-account-empty-state::before {
    content: "+";

    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom:
        var(--dsm-space-4);

    border-radius: 50%;

    background:
        var(--dsm-color-surface-muted);

    color:
        var(--dsm-color-primary);

    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
}

.dsm-customer-advertisements
.dsm-account-empty-state h2 {
    margin:
        0
        0
        var(--dsm-space-2);

    font-size:
        1.55rem;
}

.dsm-customer-advertisements
.dsm-account-empty-state p {
    max-width: 460px;

    margin:
        0
        0
        var(--dsm-space-5);

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

    line-height: 1.55;
}

.dsm-customer-advertisements
.dsm-account-empty-state
.dsm-button {
    min-height: 46px;

    padding-inline:
        22px;

    border-radius:
        12px;
}


/* ==========================================================
   FILTROS DE ESTADO
   ========================================================== */

.dsm-customer-advertisements__filters {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom:
        var(--dsm-space-6);
}

.dsm-customer-advertisements
.dsm-account-filter {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 42px;

    padding:
        8px
        14px;

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

    border-radius:
        999px;

    background:
        var(--dsm-color-surface);

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

    text-decoration:
        none;

    transition:
        border-color 0.16s ease,
        background 0.16s ease,
        color 0.16s ease;
}

.dsm-customer-advertisements
.dsm-account-filter:hover {
    border-color:
        var(--dsm-color-primary);
}

.dsm-customer-advertisements
.dsm-account-filter.is-active {
    border-color:
        var(--dsm-color-primary);

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

    color:
        var(--dsm-color-text-inverse);
}

.dsm-customer-advertisements
.dsm-account-filter strong {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 24px;
    height: 24px;

    padding-inline: 6px;

    border-radius:
        999px;

    background:
        rgba(0, 0, 0, 0.06);

    font-size:
        0.75rem;
}

.dsm-customer-advertisements
.dsm-account-filter.is-active
strong {
    background:
        rgba(255, 255, 255, 0.16);
}


/* ==========================================================
   LISTA DE ANUNCIOS
   ========================================================== */

.dsm-customer-advertisements__grid {
    display: grid;

    grid-template-columns:
        1fr;

    gap:
        var(--dsm-space-4);
}


/* ==========================================================
   TARJETA DE GESTIÓN
   ========================================================== */

.dsm-customer-advertisement-card {
    display: grid;

    grid-template-columns:
        190px
        minmax(0, 1fr);

    grid-template-rows:
        auto
        auto;

    overflow: hidden;

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

    border-radius:
        18px;

    background:
        var(--dsm-color-surface);

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, 0.035);

    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

.dsm-customer-advertisement-card:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--dsm-color-primary);

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, 0.065);
}


/* ==========================================================
   IMAGEN
   ========================================================== */

.dsm-customer-advertisement-card__image {
    position: relative;

    grid-row:
        1 / 3;

    min-height:
        220px;

    overflow: hidden;

    background:
        var(--dsm-color-surface-muted);
}

.dsm-customer-advertisement-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    min-height:
        220px;

    object-fit: cover;
}

.dsm-customer-advertisement-card__placeholder {
    display: flex;

    width: 100%;
    height: 100%;

    min-height:
        220px;

    align-items: center;
    justify-content: center;

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

.dsm-customer-advertisement-card__placeholder
.dashicons {
    width: auto;
    height: auto;

    font-size:
        2.3rem;

    opacity: 0.25;
}


/* ==========================================================
   ESTADO DEL ANUNCIO
   ========================================================== */

.dsm-customer-advertisement-card__status {
    position: absolute;

    top: 12px;
    left: 12px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 28px;

    padding:
        5px
        10px;

    border-radius:
        999px;

    background:
        var(--dsm-color-surface);

    font-size:
        0.72rem;

    font-weight: 800;

    text-transform:
        uppercase;

    letter-spacing:
        0.03em;

    box-shadow:
        0 2px 10px
        rgba(0, 0, 0, 0.08);
}

.dsm-customer-advertisement-card__status--success {
    color:
        #166534;

    background:
        #dcfce7;
}

.dsm-customer-advertisement-card__status--warning {
    color:
        #92400e;

    background:
        #fef3c7;
}

.dsm-customer-advertisement-card__status--danger {
    color:
        #991b1b;

    background:
        #fee2e2;
}

.dsm-customer-advertisement-card__status--muted {
    color:
        var(--dsm-color-text-muted);

    background:
        #f1f3f2;
}

.dsm-customer-advertisement-card__status--neutral {
    color:
        var(--dsm-color-text);

    background:
        #f3f4f3;
}


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

.dsm-customer-advertisement-card__content {
    min-width: 0;

    padding:
        var(--dsm-space-5)
        var(--dsm-space-5)
        var(--dsm-space-3);
}

.dsm-customer-advertisement-card__content header {
    margin-bottom:
        var(--dsm-space-3);
}

.dsm-customer-advertisement-card__content h2 {
    margin:
        0
        0
        5px;

    font-size:
        1.3rem;

    line-height: 1.25;
}

.dsm-customer-advertisement-card__brand {
    margin: 0;

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

    font-size:
        var(--dsm-font-size-sm);
}

.dsm-customer-advertisement-card__price {
    margin:
        0
        0
        var(--dsm-space-4);

    font-size:
        1.45rem;

    font-weight: 800;
}


/* ==========================================================
   AVISOS DENTRO DE TARJETA
   ========================================================== */

.dsm-customer-advertisement-card__content
.dsm-account-notice {
    margin:
        0
        0
        var(--dsm-space-4);

    padding:
        11px
        13px;

    border-radius:
        10px;

    font-size:
        var(--dsm-font-size-sm);
}


/* ==========================================================
   METADATOS
   ========================================================== */

.dsm-customer-advertisement-card__metadata {
    display: flex;

    flex-wrap: wrap;

    gap:
        10px
        28px;

    margin:
        var(--dsm-space-4)
        0
        0;
}

.dsm-customer-advertisement-card__metadata
> div {
    display: flex;

    gap: 8px;

    align-items: baseline;
}

.dsm-customer-advertisement-card__metadata dt {
    color:
        var(--dsm-color-text-muted);

    font-size:
        0.8rem;

    font-weight: 600;
}

.dsm-customer-advertisement-card__metadata dd {
    margin: 0;

    font-size:
        0.8rem;

    font-weight: 700;
}


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

.dsm-customer-advertisement-card__actions {
    grid-column: 2;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    padding:
        0
        var(--dsm-space-5)
        var(--dsm-space-5);
}

.dsm-customer-advertisement-action-form {
    display: contents;
}

.dsm-customer-advertisement-card__actions
.dsm-button {
    min-height: 40px;

    padding:
        8px
        14px;

    border-radius:
        10px;

    font-size:
        var(--dsm-font-size-sm);
}

.dsm-customer-advertisement-card__no-actions {
    color:
        var(--dsm-color-text-muted);

    font-size:
        var(--dsm-font-size-sm);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 760px) {

    .dsm-customer-advertisements {
        width:
            min(
                100% - 24px,
                1180px
            );

        padding-block:
            var(--dsm-space-5);
    }

    .dsm-customer-advertisements
    .dsm-account-section-header {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            var(--dsm-space-4);
    }

    .dsm-customer-advertisements
    .dsm-account-section-header__actions,
    .dsm-customer-advertisements
    .dsm-account-section-header__actions
    .dsm-button {
        width: 100%;
    }

    .dsm-customer-advertisements
    .dsm-account-section-header__actions
    .dsm-button {
        justify-content: center;
    }

    .dsm-customer-advertisements__filters {
        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 4px;

        scrollbar-width: thin;
    }

    .dsm-customer-advertisements
    .dsm-account-filter {
        flex: 0 0 auto;
    }

    .dsm-customer-advertisement-card {
        grid-template-columns:
            1fr;

        grid-template-rows:
            auto;
    }

    .dsm-customer-advertisement-card__image {
        grid-row: auto;

        aspect-ratio:
            4 / 3;

        min-height: 0;
    }

    .dsm-customer-advertisement-card__image img,
    .dsm-customer-advertisement-card__placeholder {
        min-height: 0;

        height: 100%;
    }

    .dsm-customer-advertisement-card__actions {
        grid-column: 1;

        padding-top:
            0;
    }

    .dsm-customer-advertisement-card__actions
    .dsm-button,
    .dsm-customer-advertisement-card__actions
    .dsm-customer-advertisement-action-form {
        width: 100%;
    }

    .dsm-customer-advertisement-card__actions
    .dsm-button {
        justify-content: center;
    }

}


/* ==========================================================
   PUBLICAR / EDITAR ANUNCIO
   ========================================================== */

.dsm-advertisement-form-page {
    width: min(
        960px,
        calc(100% - 32px)
    );

    margin-inline: auto;

    padding-block:
        var(--dsm-space-7);
}


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

.dsm-advertisement-form-header {
    margin-bottom:
        var(--dsm-space-6);
}

.dsm-advertisement-form-header h1 {
    margin:
        0
        0
        var(--dsm-space-2);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    line-height:
        1.1;
}

.dsm-advertisement-form-header p {
    max-width:
        680px;

    margin: 0;

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

    line-height:
        1.55;
}


/* ==========================================================
   DISPONIBILIDAD
   ========================================================== */

.dsm-advertisement-form-availability {
    margin-bottom:
        var(--dsm-space-5);

    padding:
        12px
        15px;

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

    border-radius:
        12px;

    background:
        var(--dsm-color-surface);

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

    font-size:
        var(--dsm-font-size-sm);
}


/* ==========================================================
   FORMULARIO GENERAL
   ========================================================== */

.dsm-advertisement-form {
    display: grid;

    gap:
        var(--dsm-space-5);
}


/* ==========================================================
   SECCIONES
   ========================================================== */

.dsm-advertisement-form-section {
    padding:
        clamp(
            22px,
            4vw,
            34px
        );

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

    border-radius:
        20px;

    background:
        var(--dsm-color-surface);

    box-shadow:
        0 5px 22px
        rgba(0, 0, 0, 0.035);
}


/* ==========================================================
   CABECERA DE SECCIÓN
   ========================================================== */

.dsm-advertisement-form-section__header {
    display: flex;

    align-items:
        flex-start;

    gap:
        16px;

    margin-bottom:
        var(--dsm-space-5);

    padding-bottom:
        var(--dsm-space-4);

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

.dsm-advertisement-form-section__number {
    display: inline-flex;

    flex:
        0 0 42px;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    border-radius:
        50%;

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

    color:
        var(--dsm-color-text-inverse);

    font-size:
        1rem;

    font-weight:
        800;
}

.dsm-advertisement-form-section__header
> div {
    min-width: 0;
}

.dsm-advertisement-form-section__header h2 {
    margin:
        0
        0
        5px;

    font-size:
        1.35rem;

    line-height:
        1.25;
}

.dsm-advertisement-form-section__header p {
    margin: 0;

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

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

    line-height:
        1.5;
}


/* ==========================================================
   GRID
   ========================================================== */

.dsm-advertisement-form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        20px;
}

.dsm-advertisement-form-grid
.dsm-form-field--full {
    grid-column:
        1 / -1;
}


/* ==========================================================
   CAMPOS
   ========================================================== */

.dsm-advertisement-form-page
.dsm-form-field {
    min-width: 0;
}

.dsm-advertisement-form-page
.dsm-form-field label {
    display: block;

    margin-bottom:
        7px;

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

    font-size:
        0.9rem;

    font-weight:
        700;
}

.dsm-advertisement-form-page
.dsm-form-field label
span[aria-hidden="true"] {
    color:
        #b42318;
}


/* Inputs */
.dsm-advertisement-form-page
.dsm-form-field input[type="text"],
.dsm-advertisement-form-page
.dsm-form-field input[type="number"],
.dsm-advertisement-form-page
.dsm-form-field input[type="date"],
.dsm-advertisement-form-page
.dsm-form-field select,
.dsm-advertisement-form-page
.dsm-form-field textarea {
    display: block;

    width: 100%;

    min-width: 0;

    margin: 0;

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

    border-radius:
        10px;

    background:
        var(--dsm-color-surface);

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

    font: inherit;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.dsm-advertisement-form-page
.dsm-form-field input[type="text"],
.dsm-advertisement-form-page
.dsm-form-field input[type="number"],
.dsm-advertisement-form-page
.dsm-form-field input[type="date"],
.dsm-advertisement-form-page
.dsm-form-field select {
    min-height:
        48px;

    padding:
        10px
        13px;
}

.dsm-advertisement-form-page
.dsm-form-field textarea {
    min-height:
        170px;

    padding:
        13px;

    resize:
        vertical;

    line-height:
        1.55;
}


/* Focus */
.dsm-advertisement-form-page
.dsm-form-field input:focus,
.dsm-advertisement-form-page
.dsm-form-field select:focus,
.dsm-advertisement-form-page
.dsm-form-field textarea:focus {
    outline: none;

    border-color:
        var(--dsm-color-primary);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--dsm-color-primary) 12%,
            transparent
        );
}


/* Placeholder */
.dsm-advertisement-form-page
.dsm-form-field input::placeholder,
.dsm-advertisement-form-page
.dsm-form-field textarea::placeholder {
    color:
        var(--dsm-color-text-muted);

    opacity:
        0.72;
}


/* Ayuda */
.dsm-advertisement-form-page
.dsm-form-field small,
.dsm-form-help {
    display: block;

    margin-top:
        7px;

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

    font-size:
        0.78rem;

    line-height:
        1.45;
}


/* ==========================================================
   PRECIO
   ========================================================== */

.dsm-advertisement-form-page
.dsm-price-input {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    overflow: hidden;

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

    border-radius:
        10px;

    background:
        var(--dsm-color-surface);
}

.dsm-advertisement-form-page
.dsm-price-input:focus-within {
    border-color:
        var(--dsm-color-primary);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--dsm-color-primary) 12%,
            transparent
        );
}

.dsm-advertisement-form-page
.dsm-price-input input[type="number"] {
    width: 100%;

    min-height:
        48px;

    padding:
        10px
        13px;

    border: 0;

    border-radius: 0;

    box-shadow:
        none;
}

.dsm-advertisement-form-page
.dsm-price-input input[type="number"]:focus {
    box-shadow:
        none;
}

.dsm-advertisement-form-page
.dsm-price-input > span {
    padding:
        0
        14px;

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

    font-weight:
        800;
}


/* ==========================================================
   UBICACIÓN
   ========================================================== */

.dsm-advertisement-form-section
[data-dsm-advertisement-location] {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}


/* ==========================================================
   IMÁGENES EXISTENTES
   ========================================================== */

.dsm-advertisement-form-images {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        14px;

    margin-bottom:
        var(--dsm-space-5);
}

.dsm-advertisement-form-image {
    overflow: hidden;

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

    border-radius:
        12px;

    background:
        var(--dsm-color-surface);
}

.dsm-advertisement-form-image img {
    display: block;

    width: 100%;

    aspect-ratio:
        1 / 1;

    object-fit:
        cover;

    background:
        var(--dsm-color-surface-muted);
}

.dsm-advertisement-form-image label {
    display: flex;

    align-items:
        center;

    gap:
        7px;

    margin: 0;

    padding:
        9px
        10px;

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

    font-size:
        0.8rem;

    cursor:
        pointer;
}


/* ==========================================================
   INPUT DE IMÁGENES
   ========================================================== */

.dsm-advertisement-form-page
input[type="file"] {
    display: block;

    width: 100%;

    padding:
        14px;

    border:
        1px dashed
        var(--dsm-color-border);

    border-radius:
        12px;

    background:
        var(--dsm-color-surface-muted);

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

    font: inherit;
}

.dsm-advertisement-form-page
input[type="file"]::file-selector-button {
    min-height:
        40px;

    margin-right:
        12px;

    padding:
        8px
        14px;

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

    border-radius:
        9px;

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

    color:
        var(--dsm-color-text-inverse);

    font-weight:
        700;

    cursor:
        pointer;
}


/* ==========================================================
   PREVISUALIZACIÓN DE IMÁGENES
   ========================================================== */

.dsm-advertisement-image-preview {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        12px;

    margin-top:
        var(--dsm-space-4);
}


/* ==========================================================
   RESUMEN / CONTACTO
   ========================================================== */

.dsm-advertisement-form-summary {
    padding:
        18px;

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

    border-radius:
        12px;

    background:
        var(--dsm-color-surface-muted);
}

.dsm-advertisement-form-summary p {
    margin:
        0
        0
        10px;
}

.dsm-advertisement-form-summary ul {
    display: grid;

    gap:
        7px;

    margin:
        0;

    padding-left:
        20px;

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

    font-size:
        var(--dsm-font-size-sm);
}


/* ==========================================================
   BOTONES FINALES
   ========================================================== */

.dsm-advertisement-form-actions {
    display: flex;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;

    gap:
        10px;

    margin-top:
        var(--dsm-space-5);

    padding-top:
        var(--dsm-space-5);

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

.dsm-advertisement-form-actions
.dsm-button {
    min-height:
        46px;

    padding-inline:
        18px;

    border-radius:
        11px;
}


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

@media (max-width: 820px) {

    .dsm-advertisement-form-page {
        width:
            min(
                100% - 24px,
                960px
            );

        padding-block:
            var(--dsm-space-5);
    }

    .dsm-advertisement-form-section
    [data-dsm-advertisement-location] {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .dsm-advertisement-form-images,
    .dsm-advertisement-image-preview {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


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

@media (max-width: 600px) {

    .dsm-advertisement-form-page {
        width:
            min(
                100% - 20px,
                960px
            );
    }

    .dsm-advertisement-form-header h1 {
        font-size:
            2rem;
    }

    .dsm-advertisement-form-section {
        padding:
            18px;

        border-radius:
            16px;
    }

    .dsm-advertisement-form-section__header {
        gap:
            12px;
    }

    .dsm-advertisement-form-section__number {
        flex-basis:
            36px;

        width:
            36px;

        height:
            36px;
    }

    .dsm-advertisement-form-grid,
    .dsm-advertisement-form-section
    [data-dsm-advertisement-location] {
        grid-template-columns:
            1fr;
    }

    .dsm-advertisement-form-images,
    .dsm-advertisement-image-preview {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .dsm-advertisement-form-actions {
        flex-direction:
            column-reverse;
    }

    .dsm-advertisement-form-actions
    .dsm-button {
        width:
            100%;

        justify-content:
            center;
    }

}


/* ==========================================================
   MIS PROMOCIONES
   ========================================================== */

.dsm-customer-promotions {
    width:
        min(
            100% - 40px,
            1180px
        );

    margin-inline:
        auto;

    padding-block:
        48px 72px;
}


/* ----------------------------------------------------------
   CABECERA
   ---------------------------------------------------------- */

.dsm-customer-promotions
.dsm-account-section-header {
    margin-bottom:
        48px;
}


/* ----------------------------------------------------------
   BLOQUES
   ---------------------------------------------------------- */

.dsm-promotion-section {
    margin-top:
        48px;
}

.dsm-promotion-section:first-of-type {
    margin-top:
        0;
}

.dsm-promotion-section__header {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        22px;
}

.dsm-promotion-section__title-row {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}

.dsm-promotion-section__title-row h2 {
    margin:
        0;

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

    font-size:
        1.45rem;

    line-height:
        1.2;
}

.dsm-promotion-section__count {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        30px;

    height:
        30px;

    padding-inline:
        9px;

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

    border-radius:
        999px;

    background:
        var(--dsm-color-surface);

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

    font-size:
        0.82rem;

    font-weight:
        700;
}

.dsm-promotion-section__header p {
    margin:
        7px 0 0;

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

    font-size:
        0.95rem;
}


/* ----------------------------------------------------------
   ESTADO VACÍO
   ---------------------------------------------------------- */

.dsm-promotion-empty {
    padding:
        28px 30px;

    border:
        1px dashed var(--dsm-color-border);

    border-radius:
        18px;

    background:
        var(--dsm-color-surface);
}

.dsm-promotion-empty strong {
    display:
        block;

    margin-bottom:
        5px;

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

    font-size:
        1rem;
}

.dsm-promotion-empty p {
    margin:
        0;

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

    font-size:
        0.92rem;
}


/* ----------------------------------------------------------
   CARRUSEL
   ---------------------------------------------------------- */

.dsm-promotion-carousel {
    position:
        relative;
}

.dsm-promotion-carousel__viewport {
    display:
        grid;

    grid-auto-flow:
        column;

    grid-auto-columns:
        calc(
            (100% - 40px)
            / 3
        );

    gap:
        20px;

    overflow-x:
        auto;

    padding:
        4px 2px 12px;

    scroll-behavior:
        smooth;

    scroll-snap-type:
        x mandatory;

    scrollbar-width:
        none;

    overscroll-behavior-inline:
        contain;
}

.dsm-promotion-carousel__viewport::-webkit-scrollbar {
    display:
        none;
}

.dsm-promotion-carousel__viewport
.dsm-promotion-card {
    scroll-snap-align:
        start;
}


/* ----------------------------------------------------------
   FLECHAS DEL CARRUSEL
   ---------------------------------------------------------- */

.dsm-promotion-carousel__arrow {
    position:
        absolute;

    z-index:
        5;

    top:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

    padding:
        0;

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

    border-radius:
        50%;

    background:
        var(--dsm-color-surface);

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

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.10);

    font-family:
        inherit;

    font-size:
        2rem;

    font-weight:
        400;

    line-height:
        1;

    cursor:
        pointer;

    transform:
        translateY(-50%);

    transition:
        opacity 160ms ease,
        transform 160ms ease,
        background-color 160ms ease;
}

.dsm-promotion-carousel__arrow:hover:not(:disabled) {
    transform:
        translateY(-50%)
        scale(1.06);
}

.dsm-promotion-carousel__arrow--previous {
    left:
        -22px;
}

.dsm-promotion-carousel__arrow--next {
    right:
        -22px;
}

.dsm-promotion-carousel__arrow:disabled {
    opacity:
        0;

    pointer-events:
        none;
}


/* ----------------------------------------------------------
   TARJETAS
   ---------------------------------------------------------- */

.dsm-promotion-card {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    min-height:
        355px;

    padding:
        24px;

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

    border-radius:
        20px;

    background:
        var(--dsm-color-surface);

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.045);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.dsm-promotion-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.075);
}

.dsm-promotion-card__top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        30px;

    margin-bottom:
        17px;
}


/* ----------------------------------------------------------
   ESTADOS
   ---------------------------------------------------------- */

.dsm-promotion-status {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    width:
        fit-content;

    padding:
        6px 10px;

    border-radius:
        999px;

    background:
        rgba(0, 0, 0, 0.055);

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

    font-size:
        0.74rem;

    font-weight:
        750;

    letter-spacing:
        0.025em;

    text-transform:
        uppercase;
}

.dsm-promotion-status--active,
.dsm-promotion-status--available {
    background:
        rgba(30, 73, 53, 0.09);

    color:
        var(--dsm-color-primary);
}

.dsm-promotion-status--stopped {
    background:
        rgba(0, 0, 0, 0.06);

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

.dsm-promotion-status--exhausted {
    background:
        rgba(145, 95, 25, 0.10);

    color:
        #76501e;
}

.dsm-promotion-status__dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        currentColor;
}


/* ----------------------------------------------------------
   CONTENIDO DE TARJETA
   ---------------------------------------------------------- */

.dsm-promotion-card__title {
    margin:
        0 0 22px;

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

    font-size:
        1.15rem;

    font-weight:
        750;

    line-height:
        1.3;
}

.dsm-promotion-card__highlight {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    margin-bottom:
        22px;

    padding-bottom:
        20px;

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

.dsm-promotion-card__eyebrow {
    color:
        var(--dsm-color-text-muted);

    font-size:
        0.78rem;

    font-weight:
        650;

    letter-spacing:
        0.02em;
}

.dsm-promotion-card__highlight strong {
    color:
        var(--dsm-color-text);

    font-size:
        1.55rem;

    font-weight:
        800;

    line-height:
        1.15;
}


/* ----------------------------------------------------------
   DETALLES
   ---------------------------------------------------------- */

.dsm-promotion-card__details {
    display:
        grid;

    gap:
        11px;

    margin:
        0 0 24px;
}

.dsm-promotion-card__details > div {
    display:
        flex;

    align-items:
        baseline;

    justify-content:
        space-between;

    gap:
        16px;
}

.dsm-promotion-card__details dt,
.dsm-promotion-card__details dd {
    margin:
        0;
}

.dsm-promotion-card__details dt {
    color:
        var(--dsm-color-text-muted);

    font-size:
        0.82rem;
}

.dsm-promotion-card__details dd {
    color:
        var(--dsm-color-text);

    font-size:
        0.85rem;

    font-weight:
        650;

    text-align:
        right;
}


/* ----------------------------------------------------------
   ACCIONES
   ---------------------------------------------------------- */

.dsm-promotion-card__actions {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        auto;
}

.dsm-promotion-card__actions form {
    margin:
        0;
}

.dsm-promotion-card__actions
.dsm-button {
    min-height:
        42px;

    padding-inline:
        15px;

    font-size:
        0.84rem;
}


/* ----------------------------------------------------------
   HISTORIAL
   ---------------------------------------------------------- */

.dsm-promotion-section--history {
    padding-top:
        8px;
}

.dsm-promotion-history-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        20px;
}

.dsm-promotion-card--history {
    min-height:
        320px;
}


/* ----------------------------------------------------------
   PAGINACIÓN
   ---------------------------------------------------------- */

.dsm-promotion-pagination {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        32px;
}

.dsm-promotion-pagination__page,
.dsm-promotion-pagination__arrow {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        40px;

    height:
        40px;

    padding-inline:
        10px;

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

    border-radius:
        10px;

    background:
        var(--dsm-color-surface);

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

    font-size:
        0.88rem;

    font-weight:
        700;

    line-height:
        1;

    text-decoration:
        none;
}

.dsm-promotion-pagination__arrow {
    font-size:
        1.5rem;
}

.dsm-promotion-pagination__page:hover,
.dsm-promotion-pagination__arrow:hover {
    border-color:
        var(--dsm-color-primary);
}

.dsm-promotion-pagination__page.is-current {
    border-color:
        var(--dsm-color-primary);

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

    color:
        #fff;
}


/* ==========================================================
   MIS PROMOCIONES - TABLET
   ========================================================== */

@media (max-width: 900px) {

    .dsm-promotion-carousel__viewport {
        grid-auto-columns:
            calc(
                (100% - 18px)
                / 2
            );

        gap:
            18px;
    }

    .dsm-promotion-history-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            18px;
    }

}


/* ==========================================================
   MIS PROMOCIONES - MÓVIL
   ========================================================== */

@media (max-width: 600px) {

    .dsm-customer-promotions {
        width:
            min(
                100% - 20px,
                1180px
            );

        padding-block:
            28px 48px;
    }

    .dsm-customer-promotions
    .dsm-account-section-header {
        margin-bottom:
            34px;
    }

    .dsm-promotion-section {
        margin-top:
            38px;
    }

    .dsm-promotion-section__title-row {
        gap:
            9px;
    }

    .dsm-promotion-section__title-row h2 {
        font-size:
            1.25rem;
    }

    .dsm-promotion-section__header p {
        font-size:
            0.88rem;
    }

    .dsm-promotion-carousel__viewport {
        grid-auto-columns:
            88%;

        gap:
            14px;

        padding-inline:
            1px;
    }

    .dsm-promotion-carousel__arrow {
        display:
            none;
    }

    .dsm-promotion-card {
        min-height:
            340px;

        padding:
            20px;

        border-radius:
            17px;
    }

    .dsm-promotion-card__highlight strong {
        font-size:
            1.4rem;
    }

    .dsm-promotion-card__actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .dsm-promotion-card__actions form,
    .dsm-promotion-card__actions .dsm-button,
    .dsm-promotion-card__actions form .dsm-button {
        width:
            100%;
    }

    .dsm-promotion-history-grid {
        grid-template-columns:
            1fr;

        gap:
            14px;
    }

    .dsm-promotion-card--history {
        min-height:
            0;
    }

    .dsm-promotion-empty {
        padding:
            22px 20px;
    }

}


/* ==========================================================
   MI TIENDA - RESUMEN ERP
   ========================================================== */

.dsm-store-dashboard {
    margin-top:
        24px;
}

.dsm-store-dashboard > h2 {
    margin:
        0 0 24px;
}

.dsm-store-dashboard__grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );

    gap:
        16px;
}

.dsm-store-dashboard__card {
    display:
        flex;

    flex-direction:
        column;

    min-height:
        168px;

    padding:
        22px;

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

    border-radius:
        18px;

    background:
        var(--dsm-color-surface);

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

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.04);

    text-decoration:
        none;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}

.dsm-store-dashboard__card:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--dsm-color-primary);

    box-shadow:
        0 9px 24px rgba(0, 0, 0, 0.08);

    color:
        var(--dsm-color-text);
}

.dsm-store-dashboard__card:focus-visible {
    outline:
        3px solid var(--dsm-color-focus);

    outline-offset:
        3px;
}

.dsm-store-dashboard__label {
    color:
        var(--dsm-color-text-muted);

    font-size:
        0.86rem;

    font-weight:
        650;
}

.dsm-store-dashboard__value {
    margin-top:
        10px;

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

    font-size:
        2rem;

    font-weight:
        800;

    line-height:
        1;
}

.dsm-store-dashboard__link {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-top:
        auto;

    padding-top:
        20px;

    color:
        var(--dsm-color-primary);

    font-size:
        0.82rem;

    font-weight:
        750;
}

.dsm-store-dashboard__link span {
    font-size:
        1.1rem;

    transition:
        transform 160ms ease;
}

.dsm-store-dashboard__card:hover
.dsm-store-dashboard__link span {
    transform:
        translateX(3px);
}


/* ==========================================================
   MI TIENDA - RESUMEN ERP RESPONSIVE
   ========================================================== */

@media (max-width: 820px) {

    .dsm-store-dashboard__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}

@media (max-width: 520px) {

    .dsm-store-dashboard__grid {
        grid-template-columns:
            1fr;
    }

    .dsm-store-dashboard__card {
        min-height:
            145px;
    }

}


/* ==========================================================
   MI TIENDA - NAVEGACIÓN ERP
   ========================================================== */

.dsm-multistore-erp-nav {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        20px;
}

.dsm-multistore-erp-nav__item {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        42px;

    padding:
        9px 18px;

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

    border-radius:
        11px;

    background:
        var(--dsm-color-surface-muted);

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

    font-size:
        0.9rem;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.dsm-multistore-erp-nav__item:hover {
    border-color:
        var(--dsm-color-primary);

    color:
        var(--dsm-color-primary);

    transform:
        translateY(-1px);
}

.dsm-multistore-erp-nav__item.is-active {
    border-color:
        var(--dsm-color-primary);

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

    color:
        #fff;
}

.dsm-multistore-erp-nav__item.is-active:hover {
    color:
        #fff;
}


/* ==========================================================
   MI TIENDA - DATOS DE LA TIENDA
   ========================================================== */

.dsm-store-profile {
    margin-top:
        24px;

    padding:
        34px;
}

.dsm-store-profile__header {
    width:
        min(
            100%,
            820px
        );

    margin:
        0 auto 30px;
}

.dsm-store-profile__header h2 {
    margin:
        0 0 7px;
}

.dsm-store-profile__header p {
    margin:
        0;

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

    font-size:
        0.92rem;
}

.dsm-store-profile__form {
    width:
        min(
            100%,
            820px
        );

    margin-inline:
        auto;
}

.dsm-store-profile__grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        24px 22px;
}

.dsm-store-profile__field {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    gap:
        8px;
}

.dsm-store-profile__field--full {
    grid-column:
        1 / -1;
}

.dsm-store-profile__field > label:first-child {
    color:
        var(--dsm-color-text);

    font-size:
        0.88rem;

    font-weight:
        750;
}

.dsm-store-profile__field
input[type="text"],
.dsm-store-profile__field
textarea {
    box-sizing:
        border-box;

    width:
        100%;

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

    border-radius:
        11px;

    background:
        var(--dsm-color-surface);

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

    font:
        inherit;

    outline:
        none;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.dsm-store-profile__field
input[type="text"] {
    min-height:
        46px;

    padding:
        10px 13px;
}

.dsm-store-profile__field
textarea {
    min-height:
        155px;

    padding:
        13px;

    line-height:
        1.5;

    resize:
        vertical;
}

.dsm-store-profile__field
input[type="text"]:focus,
.dsm-store-profile__field
textarea:focus {
    border-color:
        var(--dsm-color-focus);

    box-shadow:
        0 0 0 3px rgba(79, 125, 91, 0.12);
}


/* ----------------------------------------------------------
   LOGO
   ---------------------------------------------------------- */

.dsm-store-profile__upload {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        8px;

    padding:
        18px;

    border:
        1px dashed var(--dsm-color-border);

    border-radius:
        12px;

    background:
        var(--dsm-color-surface-muted);
}

.dsm-store-profile__upload
input[type="file"] {
    max-width:
        100%;
}

.dsm-store-profile__upload small {
    color:
        var(--dsm-color-text-muted);
}

.dsm-store-profile__remove-logo {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    width:
        fit-content;

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

    font-size:
        0.86rem;

    cursor:
        pointer;
}


/* ----------------------------------------------------------
   GUARDAR
   ---------------------------------------------------------- */

.dsm-store-profile__actions {
    display:
        flex;

    justify-content:
        flex-end;

    margin-top:
        30px;

    padding-top:
        22px;

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

.dsm-store-profile__actions
.dsm-button {
    min-width:
        170px;

    justify-content:
        center;
}


/* ==========================================================
   MI TIENDA - RESPONSIVE
   ========================================================== */

@media (max-width: 700px) {

    .dsm-store-profile {
        padding:
            22px 18px;
    }

    .dsm-store-profile__grid {
        grid-template-columns:
            1fr;

        gap:
            20px;
    }

    .dsm-store-profile__field--full {
        grid-column:
            auto;
    }

    .dsm-store-profile__actions {
        justify-content:
            stretch;
    }

    .dsm-store-profile__actions
    .dsm-button {
        width:
            100%;
    }

    .dsm-multistore-erp-nav {
        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .dsm-multistore-erp-nav__item {
        width:
            100%;
    }

}

@media (max-width: 420px) {

    .dsm-multistore-erp-nav {
        grid-template-columns:
            1fr;
    }

}


/* ==========================================================
   MI TIENDA - CONTENEDOR GENERAL
   ========================================================== */

.dsm-multistore-account {
    width:
        min(
            100% - 40px,
            1180px
        );

    margin-inline:
        auto;

    padding-block:
        48px 72px;
}


/* ----------------------------------------------------------
   CABECERA MI TIENDA
   ---------------------------------------------------------- */

.dsm-multistore-account
.dsm-account-header {
    margin-bottom:
        32px;
}

.dsm-multistore-account
.dsm-account-header h1 {
    margin:
        0 0 12px;

    font-size:
        2.2rem;

    line-height:
        1.15;
}

.dsm-multistore-account
.dsm-account-header p {
    margin:
        0;

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


/* ----------------------------------------------------------
   BLOQUES PRINCIPALES
   ---------------------------------------------------------- */

.dsm-multistore-account
> .dsm-card {
    margin-top:
        22px;
}


/* ==========================================================
   MI TIENDA - MÓVIL
   ========================================================== */

@media (max-width: 600px) {

    .dsm-multistore-account {
        width:
            min(
                100% - 20px,
                1180px
            );

        padding-block:
            28px 48px;
    }

    .dsm-multistore-account
    .dsm-account-header h1 {
        font-size:
            2rem;
    }

}


/* ==========================================================
   MI TIENDA - GESTIÓN DE PRODUCTOS
   ========================================================== */

.dsm-store-products__toolbar {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    margin:
        26px 0 16px;
}

.dsm-store-products__search {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    flex:
        1;
}

.dsm-store-products__search
input[type="search"] {
    box-sizing:
        border-box;

    width:
        min(
            100%,
            460px
        );

    min-height:
        44px;

    padding:
        10px 14px;

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

    border-radius:
        11px;

    background:
        var(--dsm-color-surface);

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

    font:
        inherit;
}

.dsm-store-products__search
input[type="search"]:focus {
    border-color:
        var(--dsm-color-focus);

    outline:
        none;

    box-shadow:
        0 0 0 3px rgba(79, 125, 91, 0.12);
}

.dsm-store-products__clear {
    color:
        var(--dsm-color-text-muted);

    font-size:
        0.86rem;
}

.dsm-store-products__summary {
    margin:
        0 0 20px;

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

    font-size:
        0.9rem;
}

.dsm-store-products__summary strong {
    color:
        var(--dsm-color-text);
}


/* ----------------------------------------------------------
   PAGINACIÓN
   ---------------------------------------------------------- */

.dsm-store-products__pagination {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        28px;
}

.dsm-store-products__pagination a {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        40px;

    height:
        40px;

    padding-inline:
        10px;

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

    border-radius:
        10px;

    background:
        var(--dsm-color-surface);

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

    font-weight:
        700;

    text-decoration:
        none;
}

.dsm-store-products__pagination a:hover {
    border-color:
        var(--dsm-color-primary);
}

.dsm-store-products__pagination
a.is-current {
    border-color:
        var(--dsm-color-primary);

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

    color:
        #fff;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .dsm-store-products__toolbar {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .dsm-store-products__search {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .dsm-store-products__search
    input[type="search"] {
        width:
            100%;
    }

    .dsm-store-products__toolbar
    > .dsm-button,
    .dsm-store-products__search
    .dsm-button {
        width:
            100%;

        justify-content:
            center;
    }

}


/* ==========================================================
   MI TIENDA - INVENTARIO
   ========================================================== */

.dsm-store-inventory__header {
    margin-bottom: 24px;
}

.dsm-store-inventory__header h2 {
    margin: 0 0 8px;
}

.dsm-store-inventory__header p {
    margin: 0;
    color: var(--dsm-color-text-muted);
}


/* FILTROS */

.dsm-store-inventory__filters {
    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        minmax(170px, 210px)
        auto
        auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.dsm-store-inventory__search,
.dsm-store-inventory__status {
    min-width: 0;
}

.dsm-store-inventory__search input,
.dsm-store-inventory__status select {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;

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

    border-radius: 10px;

    background:
        var(--dsm-color-surface);

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

    font: inherit;
}

.dsm-store-inventory__search input:focus,
.dsm-store-inventory__status select:focus {
    outline: none;

    border-color:
        var(--dsm-color-primary);

    box-shadow:
        0 0 0 3px
        rgba(79, 125, 91, 0.12);
}

.dsm-store-inventory__clear {
    color:
        var(--dsm-color-text-muted);

    font-size: 0.88rem;
    white-space: nowrap;
}


/* RESUMEN */

.dsm-store-inventory__summary {
    min-height: 22px;
    margin-bottom: 16px;

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

    font-size: 0.9rem;
}

.dsm-store-inventory__summary strong {
    color:
        var(--dsm-color-text);
}


/* TABLA */

.dsm-store-inventory__table-scroll {
    width: 100%;
    overflow-x: auto;

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

    border-radius: 12px;
}

.dsm-store-inventory__table {
    width: 100%;
    min-width: 940px;

    border-collapse:
        collapse;

    background:
        var(--dsm-color-surface);
}

.dsm-store-inventory__table th {
    padding: 12px 13px;

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

    background: #f7f8f7;

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

    font-size: 0.78rem;
    font-weight: 700;

    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.dsm-store-inventory__table td {
    padding: 13px;

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

    vertical-align: middle;
}

.dsm-store-inventory__table
tbody tr:last-child td {
    border-bottom: 0;
}

.dsm-store-inventory__table
tbody tr:hover {
    background:
        rgba(0, 0, 0, 0.018);
}

.dsm-store-inventory__table
.is-number {
    text-align: center;
}

.dsm-store-inventory__table
.is-action {
    text-align: right;
}

.dsm-store-inventory__product strong {
    display: block;
}

.dsm-store-inventory__product small {
    display: block;

    margin-top: 3px;

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

.dsm-store-inventory__available {
    font-size: 1rem;
}


/* ESTADOS */

.dsm-store-inventory__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 28px;
    padding: 4px 9px;

    border-radius: 999px;

    font-size: 0.78rem;
    font-weight: 700;

    white-space: nowrap;
}

.dsm-store-inventory__badge--available {
    background: #e8f3eb;
    color: #285f39;
}

.dsm-store-inventory__badge--low-stock {
    background: #fff3d6;
    color: #805b00;
}

.dsm-store-inventory__badge--out-of-stock {
    background: #fbe9e9;
    color: #8b3030;
}

.dsm-store-inventory__badge--inactive {
    background: #ececec;
    color: #555;
}

.dsm-store-inventory__badge--no-variants {
    background: #eef1f3;
    color: #5b6268;
}


/* BOTÓN GESTIONAR */

.dsm-store-inventory__manage {
    min-height: 36px;
    padding: 7px 12px;

    font-size: 0.82rem;

    white-space: nowrap;
}


/* PAGINACIÓN */

.dsm-store-inventory__pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 26px;
}

.dsm-store-inventory__pagination a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 40px;
    height: 40px;

    padding-inline: 10px;

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

    border-radius: 10px;

    background:
        var(--dsm-color-surface);

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

    font-weight: 700;
    text-decoration: none;
}

.dsm-store-inventory__pagination
a:hover {
    border-color:
        var(--dsm-color-primary);
}

.dsm-store-inventory__pagination
a.is-current {
    border-color:
        var(--dsm-color-primary);

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

    color: #fff;
}


/* RESPONSIVE */

@media (max-width: 800px) {

    .dsm-store-inventory__filters {
        grid-template-columns:
            1fr 1fr;
    }

    .dsm-store-inventory__search {
        grid-column:
            1 / -1;
    }

}

@media (max-width: 560px) {

    .dsm-store-inventory__filters {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .dsm-store-inventory__filters
    .dsm-button {
        width: 100%;
        justify-content: center;
    }

}


/* ==========================================================
   MI TIENDA - EDITOR DE PRODUCTO
   ========================================================== */

.dsm-product-editor-info,
.dsm-product-editor-images,
.dsm-product-variants-manager {
    margin-top: 22px;
}


/* ----------------------------------------------------------
   INFORMACIÓN + PORTADA
   ---------------------------------------------------------- */

.dsm-product-editor-info__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(220px, 320px);

    gap: 44px;

    align-items: start;

    margin-top: 24px;
}

.dsm-product-editor-info__form {
    max-width: 620px;
}

.dsm-product-editor-field {
    margin-bottom: 18px;
}

.dsm-product-editor-field label {
    display: block;

    margin-bottom: 7px;

    font-weight: 700;
}

.dsm-product-editor-field input,
.dsm-product-editor-field textarea,
.dsm-product-editor-field select {
    box-sizing: border-box;

    width: 100%;

    min-height: 44px;

    padding: 10px 12px;

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

    border-radius: 9px;

    background:
        var(--dsm-color-surface);

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

    font: inherit;
}

.dsm-product-editor-field textarea {
    resize: vertical;
}

.dsm-product-editor-info__actions {
    margin-top: 6px;
}


/* PORTADA */

.dsm-product-editor-cover {
    min-width: 0;
}

.dsm-product-editor-cover__title {
    display: block;

    margin-bottom: 9px;

    font-weight: 700;
}

.dsm-product-editor-cover img,
.dsm-product-editor-cover__empty {
    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

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

    border-radius: 14px;
}

.dsm-product-editor-cover img {
    object-fit: cover;
}

.dsm-product-editor-cover__empty {
    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background: #f7f8f7;

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

    text-align: center;
}


/* ----------------------------------------------------------
   CABECERA DE SECCIONES
   ---------------------------------------------------------- */

.dsm-product-editor-section-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}

.dsm-product-editor-section-header h2 {
    margin: 0 0 7px;
}

.dsm-product-editor-section-header p {
    margin: 0;

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


/* ----------------------------------------------------------
   GALERÍA
   ---------------------------------------------------------- */

.dsm-product-editor-gallery {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(150px, 1fr)
        );

    gap: 16px;

    margin-bottom: 28px;
}

.dsm-product-editor-gallery__item {
    position: relative;

    padding: 10px;

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

    border-radius: 12px;

    background:
        var(--dsm-color-surface);
}

.dsm-product-editor-gallery__item.is-cover {
    border-color:
        var(--dsm-color-primary);
}

.dsm-product-editor-gallery__item img {
    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    margin-bottom: 10px;

    border-radius: 8px;

    object-fit: cover;
}

.dsm-product-editor-gallery__cover {
    display: inline-flex;

    margin-bottom: 10px;

    padding: 5px 9px;

    border-radius: 999px;

    background: #e8f3eb;
    color: #285f39;

    font-size: 0.78rem;
    font-weight: 700;
}

.dsm-product-editor-gallery__item form {
    margin-top: 7px;
}

.dsm-product-editor-gallery__button {
    width: 100%;

    justify-content: center;

    font-size: 0.78rem;
}

.dsm-product-editor-upload {
    display: grid;

    gap: 10px;

    max-width: 520px;

    padding-top: 22px;

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

.dsm-product-editor-upload label {
    font-weight: 700;
}

.dsm-product-editor-upload small {
    color:
        var(--dsm-color-text-muted);
}


/* ----------------------------------------------------------
   NUEVA VARIANTE
   ---------------------------------------------------------- */

.dsm-new-variant {
    flex: 0 0 auto;
}

.dsm-new-variant > summary {
    cursor: pointer;

    list-style: none;
}

.dsm-new-variant > summary::-webkit-details-marker {
    display: none;
}

.dsm-new-variant__panel {
    margin-top: 18px;

    padding: 22px;

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

    border-radius: 14px;

    background: #fafbfa;
}

.dsm-product-editor-section-header
.dsm-new-variant[open] {
    width: 100%;
}

.dsm-product-editor-section-header:has(
    .dsm-new-variant[open]
) {
    flex-wrap: wrap;
}

.dsm-new-variant__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0 18px;
}

.dsm-new-variant__inventory {
    margin: 6px 0 22px;

    padding-top: 20px;

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

.dsm-new-variant__inventory h4 {
    margin-top: 0;
}

.dsm-new-variant__default {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 20px;
}


/* ----------------------------------------------------------
   FILTROS DE VARIANTES
   ---------------------------------------------------------- */

.dsm-variant-filter {
    display: grid;

    grid-template-columns:
        minmax(150px, 190px)
        minmax(150px, 190px)
        minmax(200px, 1fr)
        auto;

    align-items: end;

    gap: 12px;

    margin-bottom: 24px;

    padding: 18px;

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

    border-radius: 12px;

    background: #f8f9f8;
}

.dsm-variant-filter label {
    display: block;

    margin-bottom: 6px;

    font-size: 0.84rem;
    font-weight: 700;
}

.dsm-variant-filter select,
.dsm-variant-filter input {
    box-sizing: border-box;

    width: 100%;

    min-height: 42px;

    padding: 9px 11px;

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

    border-radius: 9px;

    background: #fff;

    font: inherit;
}

.dsm-variant-filter__actions {
    display: flex;

    align-items: center;

    gap: 10px;
}


/* ----------------------------------------------------------
   VARIANTE SELECCIONADA
   ---------------------------------------------------------- */

.dsm-selected-variant {
    padding: 24px;

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

    border-radius: 14px;

    background:
        var(--dsm-color-surface);
}

.dsm-selected-variant__heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}

.dsm-selected-variant__heading h3 {
    margin: 0 0 6px;

    font-size: 1.25rem;
}

.dsm-selected-variant__heading p {
    margin: 0;

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

.dsm-selected-variant__status {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 30px;

    padding: 5px 11px;

    border-radius: 999px;

    font-size: 0.78rem;
    font-weight: 800;

    white-space: nowrap;
}

.dsm-selected-variant__status--available {
    background: #e8f3eb;
    color: #285f39;
}

.dsm-selected-variant__status--low-stock {
    background: #fff3d6;
    color: #805b00;
}

.dsm-selected-variant__status--out-of-stock {
    background: #fbe9e9;
    color: #8b3030;
}

.dsm-selected-variant__status--inactive {
    background: #ececec;
    color: #555;
}


/* DATOS DE STOCK */

.dsm-selected-variant__stock {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 24px;
}

.dsm-selected-variant__stock > div {
    padding: 15px;

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

    border-radius: 11px;

    background: #f8f9f8;
}

.dsm-selected-variant__stock span {
    display: block;

    margin-bottom: 5px;

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

    font-size: 0.8rem;
}

.dsm-selected-variant__stock strong {
    display: block;

    font-size: 1.35rem;
}


/* ----------------------------------------------------------
   ACCIONES DE STOCK
   ---------------------------------------------------------- */

.dsm-stock-actions {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding-top: 22px;

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

.dsm-stock-action > summary {
    cursor: pointer;

    list-style: none;
}

.dsm-stock-action > summary::-webkit-details-marker {
    display: none;
}

.dsm-stock-action[open] {
    flex: 1 1 320px;
}

.dsm-stock-action[open] > summary {
    margin-bottom: 12px;
}

.dsm-stock-action form {
    max-width: 420px;

    padding: 18px;

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

    border-radius: 12px;

    background: #fafbfa;
}

.dsm-stock-action form h4 {
    margin: 0 0 5px;
}

.dsm-stock-action__help {
    margin: 0 0 16px;

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

    font-size: 0.86rem;
}


/* ----------------------------------------------------------
   VOLVER
   ---------------------------------------------------------- */

.dsm-product-editor-back {
    margin: 22px 0 0;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 850px) {

    .dsm-product-editor-info__layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(180px, 240px);

        gap: 24px;
    }

    .dsm-variant-filter {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dsm-variant-filter__sku {
        grid-column:
            1 / -1;
    }

    .dsm-selected-variant__stock {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 620px) {

    .dsm-product-editor-info__layout {
        grid-template-columns: 1fr;
    }

    .dsm-product-editor-cover {
        max-width: 320px;
    }

    .dsm-product-editor-section-header {
        flex-direction: column;
    }

    .dsm-new-variant {
        width: 100%;
    }

    .dsm-new-variant > summary {
        width: 100%;

        justify-content: center;
    }

    .dsm-new-variant__grid {
        grid-template-columns: 1fr;
    }

    .dsm-variant-filter {
        display: flex;

        flex-direction: column;

        align-items: stretch;
    }

    .dsm-variant-filter__actions {
        flex-wrap: wrap;
    }

    .dsm-selected-variant__heading {
        flex-direction: column;
    }

    .dsm-selected-variant__stock {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dsm-stock-actions {
        flex-direction: column;
    }

    .dsm-stock-action {
        width: 100%;
    }

    .dsm-stock-action > summary {
        width: 100%;

        justify-content: center;
    }

    .dsm-stock-action form {
        max-width: none;
    }

}


/* ==========================================================
   MI TIENDA - NAVEGADOR / CARRUSEL DE VARIANTES
   ========================================================== */

.dsm-variant-browser {
    margin-bottom: 26px;
}


/* ----------------------------------------------------------
   FILTROS
   ---------------------------------------------------------- */

.dsm-variant-browser__filters {
    display: grid;

    grid-template-columns:
        minmax(150px, 190px)
        minmax(150px, 190px)
        minmax(220px, 1fr)
        auto;

    align-items: end;

    gap: 12px;

    margin-bottom: 14px;

    padding: 18px;

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

    border-radius: 12px;

    background: #f8f9f8;
}

.dsm-variant-browser__filters label {
    display: block;

    margin-bottom: 6px;

    font-size: 0.84rem;
    font-weight: 700;
}

.dsm-variant-browser__filters select,
.dsm-variant-browser__filters input {
    box-sizing: border-box;

    width: 100%;

    min-height: 42px;

    padding: 9px 11px;

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

    border-radius: 9px;

    background: #fff;

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

    font: inherit;
}

.dsm-variant-browser__reset-wrap {
    display: flex;

    align-items: flex-end;
}

.dsm-variant-browser__reset {
    min-height: 42px;
}


/* ----------------------------------------------------------
   CONTADOR
   ---------------------------------------------------------- */

.dsm-variant-browser__summary {
    display: flex;

    align-items: baseline;

    gap: 5px;

    margin: 0 0 13px;

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

    font-size: 0.88rem;
}

.dsm-variant-browser__summary strong {
    color:
        var(--dsm-color-text);

    font-size: 1rem;
}


/* ----------------------------------------------------------
   CARRUSEL
   ---------------------------------------------------------- */

.dsm-variant-carousel {
    position: relative;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        42px;

    align-items: center;

    gap: 10px;
}

.dsm-variant-carousel__viewport {
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x proximity;

    scrollbar-width: thin;

    padding: 2px;
}

.dsm-variant-carousel__track {
    display: flex;

    align-items: stretch;

    gap: 14px;
}


/* ----------------------------------------------------------
   TARJETA
   ---------------------------------------------------------- */

.dsm-variant-card {
    box-sizing: border-box;

    flex:
        0 0
        calc(
            (100% - 28px)
            / 3
        );

    min-width: 0;

    padding: 18px;

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

    border-radius: 14px;

    background: #fff;

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

    text-decoration: none;

    scroll-snap-align: start;

    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}

.dsm-variant-card:hover {
    border-color: #aaa;

    box-shadow:
        0 5px 18px
        rgba(0, 0, 0, 0.07);

    transform:
        translateY(-2px);

    color:
        var(--dsm-color-text);
}

.dsm-variant-card.is-selected {
    border-width: 2px;

    border-color:
        var(--dsm-color-primary);

    box-shadow:
        0 0 0 3px
        rgba(0, 0, 0, 0.035);
}

.dsm-variant-card[hidden] {
    display: none !important;
}


/* CABECERA */

.dsm-variant-card__heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 8px;

    min-height: 27px;

    margin-bottom: 7px;
}

.dsm-variant-card__heading > strong {
    font-size: 1.02rem;
}

.dsm-variant-card__selected {
    flex: 0 0 auto;

    font-size: 0.7rem;
    font-weight: 800;
}


/* SKU */

.dsm-variant-card__sku {
    min-height: 22px;

    margin-bottom: 16px;

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

    font-size: 0.78rem;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* STOCK */

.dsm-variant-card__stock {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 6px;

    margin: 0 0 15px;
}

.dsm-variant-card__stock > div {
    min-width: 0;

    padding: 8px 6px;

    border-radius: 8px;

    background: #f7f8f7;

    text-align: center;
}

.dsm-variant-card__stock dt {
    margin: 0 0 3px;

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

    font-size: 0.67rem;
}

.dsm-variant-card__stock dd {
    margin: 0;

    font-size: 1rem;
    font-weight: 800;
}


/* ESTADO */

.dsm-variant-card__status {
    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding: 4px 9px;

    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 800;
}

.dsm-variant-card__status--available {
    background: #e8f3eb;
    color: #285f39;
}

.dsm-variant-card__status--low-stock {
    background: #fff3d6;
    color: #805b00;
}

.dsm-variant-card__status--out-of-stock {
    background: #fbe9e9;
    color: #8b3030;
}

.dsm-variant-card__status--inactive {
    background: #ececec;
    color: #555;
}


/* ----------------------------------------------------------
   FLECHAS
   ---------------------------------------------------------- */

.dsm-variant-carousel__arrow {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

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

    border-radius: 50%;

    background: #fff;

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

    cursor: pointer;

    font-size: 1.7rem;
    line-height: 1;
}

.dsm-variant-carousel__arrow:hover:not(:disabled) {
    border-color: #999;
}

.dsm-variant-carousel__arrow:disabled {
    opacity: 0.3;

    cursor: default;
}

.dsm-variant-carousel__arrow[hidden] {
    visibility: hidden;
}


/* ----------------------------------------------------------
   SIN RESULTADOS
   ---------------------------------------------------------- */

.dsm-variant-browser__empty {
    padding: 22px;

    border:
        1px dashed
        var(--dsm-color-border);

    border-radius: 12px;

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

    text-align: center;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 920px) {

    .dsm-variant-browser__filters {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .dsm-variant-browser__sku {
        grid-column:
            1 / -1;
    }

    .dsm-variant-browser__reset-wrap {
        grid-column:
            1 / -1;
    }

    .dsm-variant-card {
        flex:
            0 0
            calc(
                (100% - 14px)
                / 2
            );
    }

}


@media (max-width: 620px) {

    .dsm-variant-browser__filters {
        display: flex;

        flex-direction: column;

        align-items: stretch;
    }

    .dsm-variant-browser__reset-wrap {
        display: block;
    }

    .dsm-variant-browser__reset {
        width: 100%;

        justify-content: center;
    }

    .dsm-variant-carousel {
        display: block;
    }

    .dsm-variant-carousel__arrow {
        display: none;
    }

    .dsm-variant-carousel__viewport {
        padding-right: 16px;
    }

    .dsm-variant-card {
        flex:
            0 0
            88%;

        scroll-snap-align: center;
    }

}


/* ==========================================================
   MI TIENDA - RESERVAS
   ========================================================== */

.dsm-store-reservations {
    display: grid;
    gap: 22px;
}

.dsm-store-reservations__header h2 {
    margin:
        0
        0
        5px;
}

.dsm-store-reservations__header p {
    margin: 0;

    color:
        var(
            --dsm-color-text-muted,
            #69726d
        );
}


/* ----------------------------------------------------------
   BLOQUES
   ---------------------------------------------------------- */

.dsm-reservation-panel {
    overflow: hidden;
}

.dsm-reservation-panel__header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}

.dsm-reservation-panel__header h3 {
    margin:
        0
        0
        5px;

    font-size: 1.18rem;
}

.dsm-reservation-panel__header p {
    margin: 0;

    color:
        var(
            --dsm-color-text-muted,
            #69726d
        );

    font-size: 0.9rem;
}

.dsm-reservation-panel__counter {
    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    padding:
        7px
        11px;

    border-radius: 999px;

    background: #f0f3f1;

    font-size: 0.78rem;
    font-weight: 700;

    white-space: nowrap;
}


/* ----------------------------------------------------------
   TABLA
   ---------------------------------------------------------- */

.dsm-reservation-table-scroll {
    width: 100%;

    overflow-x: auto;
}

.dsm-reservation-table {
    width: 100%;

    min-width: 900px;

    border-collapse: separate;
    border-spacing: 0;

    font-size: 0.88rem;
}

.dsm-reservation-table th {
    padding:
        12px
        14px;

    border-bottom:
        1px solid #dfe4e1;

    color: #4f5953;

    font-size: 0.75rem;
    font-weight: 800;

    text-align: left;

    white-space: nowrap;
}

.dsm-reservation-table td {
    padding:
        16px
        14px;

    border-bottom:
        1px solid #edf0ee;

    vertical-align: middle;
}

.dsm-reservation-table tbody tr:last-child td {
    border-bottom: 0;
}

.dsm-reservation-table tbody tr:hover td {
    background: #fafbfa;
}

.dsm-reservation-table tbody tr.is-focused td {
    background: #f5f8f6;
}

.dsm-reservation-table tbody tr.is-focused td:first-child {
    box-shadow:
        inset 3px 0 0 #294c38;
}

.dsm-reservation-table .is-centered {
    text-align: center;
}


/* Anchuras orientativas */

.dsm-reservation-table__id {
    width: 70px;
}

.dsm-reservation-table__product {
    min-width: 150px;
}

.dsm-reservation-table__variant {
    min-width: 130px;
}

.dsm-reservation-table__customer {
    min-width: 190px;
}

.dsm-reservation-table__date {
    min-width: 125px;

    white-space: nowrap;
}

.dsm-reservation-table__quantity {
    width: 80px;
}


/* Cliente */

.dsm-reservation-table__customer strong,
.dsm-reservation-table__customer small {
    display: block;
}

.dsm-reservation-table__customer strong {
    margin-bottom: 3px;

    font-size: 0.88rem;
}

.dsm-reservation-table__customer small {
    max-width: 220px;

    overflow: hidden;

    color:
        var(
            --dsm-color-text-muted,
            #69726d
        );

    font-size: 0.74rem;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ----------------------------------------------------------
   ESTADOS
   ---------------------------------------------------------- */

.dsm-reservation-status {
    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding:
        4px
        9px;

    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 800;

    white-space: nowrap;
}

.dsm-reservation-status--active {
    background: #e7f2ea;
    color: #285e39;
}

.dsm-reservation-status--completed {
    background: #e6f0eb;
    color: #234f34;
}

.dsm-reservation-status--released {
    background: #f0f2f1;
    color: #59615d;
}

.dsm-reservation-status--cancelled,
.dsm-reservation-status--expired,
.dsm-reservation-status--inactive {
    background: #f3eeee;
    color: #745353;
}


/* ----------------------------------------------------------
   ACCIONES
   ---------------------------------------------------------- */

.dsm-reservation-actions {
    display: flex;

    align-items: center;

    gap: 7px;

    min-width: 230px;
}

.dsm-reservation-actions form {
    margin: 0;
}

.dsm-reservation-action {
    appearance: none;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding:
        7px
        12px;

    border:
        1px solid #d5dcd7;

    border-radius: 9px;

    background: #e7eee9;

    color: #173c28;

    cursor: pointer;

    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;

    line-height: 1.15;

    white-space: nowrap;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.dsm-reservation-action:hover {
    transform:
        translateY(-1px);
}

.dsm-reservation-action--complete {
    background: #dfeae3;

    border-color: #cedbd2;

    color: #173c28;
}

.dsm-reservation-action--complete:hover {
    background: #d4e3d9;
}

.dsm-reservation-action--release {
    background: #f2f4f3;

    border-color: #dce1de;

    color: #445049;
}

.dsm-reservation-action--release:hover {
    background: #e8ece9;
}


/* ----------------------------------------------------------
   FILTROS HISTORICO
   ---------------------------------------------------------- */

.dsm-reservation-history-filter {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 18px;

    padding-bottom: 17px;

    border-bottom:
        1px solid #edf0ee;
}

.dsm-reservation-history-filter__item {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding:
        7px
        13px;

    border:
        1px solid #d9dfdb;

    border-radius: 9px;

    background: #f3f5f4;

    color: #26332b;

    font-size: 0.78rem;
    font-weight: 700;

    text-decoration: none;
}

.dsm-reservation-history-filter__item:hover {
    background: #e9eeeb;

    color: #26332b;
}

.dsm-reservation-history-filter__item.is-active {
    border-color: #294c38;

    background: #294c38;

    color: #fff;
}


/* ----------------------------------------------------------
   PAGINACION
   ---------------------------------------------------------- */

.dsm-reservation-pagination {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 22px;
}

.dsm-reservation-pagination a,
.dsm-reservation-pagination span {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 36px;
    height: 36px;

    padding:
        0
        8px;

    border:
        1px solid #dce1de;

    border-radius: 8px;

    background: #fff;

    color: #2f3b34;

    font-size: 0.8rem;
    font-weight: 700;

    text-decoration: none;
}

.dsm-reservation-pagination a:hover {
    background: #f0f3f1;

    color: #2f3b34;
}

.dsm-reservation-pagination .is-current {
    border-color: #294c38;

    background: #294c38;

    color: #fff;
}


/* ----------------------------------------------------------
   VACIO
   ---------------------------------------------------------- */

.dsm-reservation-empty {
    display: flex;

    flex-direction: column;

    gap: 4px;

    padding:
        24px
        20px;

    border:
        1px dashed #d9dfdb;

    border-radius: 11px;

    background: #fafbfa;

    text-align: center;
}

.dsm-reservation-empty span {
    color:
        var(
            --dsm-color-text-muted,
            #69726d
        );

    font-size: 0.85rem;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 720px) {

    .dsm-reservation-panel__header {
        flex-direction: column;

        gap: 10px;
    }

    .dsm-reservation-actions {
        flex-direction: column;

        align-items: stretch;

        min-width: 150px;
    }

    .dsm-reservation-action {
        width: 100%;
    }

}


/* ==========================================================
   MI TIENDA - MOVIMIENTOS DE STOCK
   ========================================================== */

.dsm-movement-panel {
    overflow: hidden;
}


/* CABECERA */

.dsm-movement-panel__header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}

.dsm-movement-panel__header h2 {
    margin:
        0
        0
        5px;
}

.dsm-movement-panel__header p {
    margin: 0;

    color:
        var(
            --dsm-color-text-muted,
            #69726d
        );
}

.dsm-movement-panel__counter {
    flex: 0 0 auto;

    display: inline-flex;

    padding:
        7px
        11px;

    border-radius: 999px;

    background: #f0f3f1;

    font-size: 0.78rem;
    font-weight: 700;

    white-space: nowrap;
}


/* ----------------------------------------------------------
   FILTROS
   ---------------------------------------------------------- */

.dsm-movement-filters {
    display: grid;

    grid-template-columns:
        minmax(280px, 1fr)
        minmax(180px, 230px)
        auto;

    align-items: end;

    gap: 12px;

    margin-bottom: 14px;

    padding: 18px;

    border:
        1px solid #e0e5e2;

    border-radius: 12px;

    background: #f8f9f8;
}

.dsm-movement-filters label {
    display: block;

    margin-bottom: 6px;

    font-size: 0.8rem;
    font-weight: 700;
}

.dsm-movement-filters input,
.dsm-movement-filters select {
    box-sizing: border-box;

    width: 100%;

    min-height: 42px;

    padding:
        8px
        11px;

    border:
        1px solid #d8dedb;

    border-radius: 9px;

    background: #fff;

    font: inherit;
}

.dsm-movement-filters__actions {
    display: flex;

    align-items: center;

    gap: 10px;
}

.dsm-movement-filters__clear {
    color: #59645e;

    font-size: 0.8rem;
    font-weight: 700;

    text-decoration: none;
}


/* ----------------------------------------------------------
   RESUMEN
   ---------------------------------------------------------- */

.dsm-movement-summary {
    margin:
        0
        0
        14px;

    color: #69726d;

    font-size: 0.82rem;
}

.dsm-movement-summary strong {
    color: #26322b;
}


/* ----------------------------------------------------------
   TABLA
   ---------------------------------------------------------- */

.dsm-movement-table-scroll {
    width: 100%;

    overflow-x: auto;
}

.dsm-movement-table {
    width: 100%;

    min-width: 1240px;

    border-collapse: separate;
    border-spacing: 0;

    font-size: 0.82rem;
}

.dsm-movement-table th {
    padding:
        12px
        13px;

    border-bottom:
        1px solid #dfe4e1;

    color: #4f5953;

    font-size: 0.72rem;
    font-weight: 800;

    text-align: left;

    white-space: nowrap;
}

.dsm-movement-table td {
    padding:
        15px
        13px;

    border-bottom:
        1px solid #edf0ee;

    vertical-align: middle;
}

.dsm-movement-table tbody tr:last-child td {
    border-bottom: 0;
}

.dsm-movement-table tbody tr:hover td {
    background: #fafbfa;
}

.dsm-movement-table .is-centered {
    text-align: center;
}


/* COLUMNAS */

.dsm-movement-table__date {
    min-width: 115px;

    white-space: nowrap;
}

.dsm-movement-table__product {
    min-width: 140px;
}

.dsm-movement-table__variant {
    min-width: 120px;
}

.dsm-movement-table__reference {
    min-width: 100px;
}

.dsm-movement-table__notes {
    min-width: 220px;

    max-width: 300px;

    color: #566159;

    line-height: 1.4;
}


/* ----------------------------------------------------------
   CAMBIOS DE STOCK
   ---------------------------------------------------------- */

.dsm-movement-table__change {
    min-width: 78px;

    white-space: nowrap;
}

.dsm-movement-table__change span,
.dsm-movement-table__change strong,
.dsm-movement-table__change b {
    display: inline-block;
}

.dsm-movement-table__change b {
    margin:
        0
        4px;

    color: #9aa29d;

    font-weight: 400;
}


/* ----------------------------------------------------------
   DELTAS
   ---------------------------------------------------------- */

.dsm-movement-delta {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 40px;

    padding:
        4px
        7px;

    border-radius: 7px;

    font-weight: 800;
}

.dsm-movement-delta.is-positive {
    background: #e8f3eb;
    color: #285f39;
}

.dsm-movement-delta.is-negative {
    background: #fbe9e9;
    color: #8b3030;
}

.dsm-movement-delta.is-zero {
    background: #f2f4f3;
    color: #67716b;
}


/* ----------------------------------------------------------
   TIPO DE MOVIMIENTO
   ---------------------------------------------------------- */

.dsm-movement-type {
    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding:
        4px
        9px;

    border-radius: 999px;

    font-size: 0.7rem;
    font-weight: 800;

    white-space: nowrap;
}

.dsm-movement-type--initial {
    background: #edf0f6;
    color: #46536d;
}

.dsm-movement-type--replenishment,
.dsm-movement-type--return {
    background: #e8f3eb;
    color: #285f39;
}

.dsm-movement-type--adjustment {
    background: #fff3d6;
    color: #805b00;
}

.dsm-movement-type--reservation {
    background: #e9eff7;
    color: #365879;
}

.dsm-movement-type--reservation_release {
    background: #f0f2f1;
    color: #59615d;
}

.dsm-movement-type--sale {
    background: #e5eee8;
    color: #234f34;
}

.dsm-movement-type--cancellation,
.dsm-movement-type--expiration {
    background: #f3eeee;
    color: #745353;
}


/* ----------------------------------------------------------
   REFERENCIA
   ---------------------------------------------------------- */

.dsm-movement-table__reference span,
.dsm-movement-table__reference strong {
    display: block;
}

.dsm-movement-table__reference span {
    margin-bottom: 2px;

    color: #6c756f;

    font-size: 0.72rem;
}

.dsm-movement-table__reference strong {
    font-size: 0.8rem;
}

.dsm-movement-table__reference .is-empty {
    color: #9aa29d;
}


/* ----------------------------------------------------------
   PAGINACION
   ---------------------------------------------------------- */

.dsm-movement-pagination {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 22px;
}

.dsm-movement-pagination a,
.dsm-movement-pagination span {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 36px;
    height: 36px;

    padding:
        0
        8px;

    border:
        1px solid #dce1de;

    border-radius: 8px;

    background: #fff;

    color: #2f3b34;

    font-size: 0.8rem;
    font-weight: 700;

    text-decoration: none;
}

.dsm-movement-pagination a:hover {
    background: #f0f3f1;

    color: #2f3b34;
}

.dsm-movement-pagination .is-current {
    border-color: #294c38;

    background: #294c38;

    color: #fff;
}


/* ----------------------------------------------------------
   SIN RESULTADOS
   ---------------------------------------------------------- */

.dsm-movement-empty {
    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 26px;

    border:
        1px dashed #d9dfdb;

    border-radius: 11px;

    background: #fafbfa;

    text-align: center;
}

.dsm-movement-empty span {
    color: #69726d;

    font-size: 0.84rem;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 800px) {

    .dsm-movement-panel__header {
        flex-direction: column;

        gap: 10px;
    }

    .dsm-movement-filters {
        grid-template-columns:
            1fr;
    }

    .dsm-movement-filters__actions {
        flex-wrap: wrap;
    }

}


/* ==========================================================
   MI TIENDA - VOLVER DESDE EDITOR DE PRODUCTO
   ========================================================== */

.dsm-product-editor-back {
    margin:
        18px
        0
        0;
}

.dsm-product-editor-back__button {
    display: inline-flex;

    width: auto;

    text-decoration: none;
}


/* ==========================================================
   PROMOCIONAR ANUNCIO
   ========================================================== */

.dsm-promote-advertisement {
    width: min(
        1180px,
        calc(100% - 32px)
    );

    margin-inline: auto;

    padding-block:
        var(--dsm-space-7);
}

.dsm-promote-advertisement .dsm-account-header {
    max-width: 760px;

    margin-bottom:
        var(--dsm-space-6);
}

.dsm-promote-advertisement .dsm-account-header h1 {
    margin:
        0
        0
        var(--dsm-space-2);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );
}

.dsm-promote-advertisement .dsm-account-header p {
    margin: 0;

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

    font-size:
        var(--dsm-font-size-base);
}


/* ==========================================================
   SECCIONES
   ========================================================== */

.dsm-promotion-section {
    margin-top:
        var(--dsm-space-7);
}

.dsm-promotion-section:first-of-type {
    margin-top:
        var(--dsm-space-6);
}

.dsm-promotion-section__header {
    max-width: 760px;

    margin-bottom:
        var(--dsm-space-5);
}

.dsm-promotion-section__header h2 {
    margin:
        0
        0
        var(--dsm-space-2);

    font-size:
        1.55rem;
}

.dsm-promotion-section__header p {
    margin: 0;

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

    line-height:
        1.55;
}


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

.dsm-promotion-empty {
    padding:
        var(--dsm-space-5);

    border:
        1px dashed
        var(--dsm-color-border);

    border-radius:
        18px;

    background:
        var(--dsm-color-surface);
}

.dsm-promotion-empty strong {
    display: block;

    margin-bottom:
        var(--dsm-space-2);
}

.dsm-promotion-empty p {
    margin: 0;

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

    line-height:
        1.5;
}


/* ==========================================================
   GRID DE PLANES DE PROMOCIÓN
   ========================================================== */

.dsm-promotion-plans__grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        var(--dsm-space-5);

    align-items: stretch;
}


/* ==========================================================
   TARJETA DE PLAN
   ========================================================== */

.dsm-promotion-plans__grid > .dsm-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 100%;

    padding:
        clamp(
            var(--dsm-space-5),
            2vw,
            var(--dsm-space-6)
        );

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

    border-radius:
        22px;

    background:
        var(--dsm-color-surface);

    box-shadow:
        0 8px 28px
        rgba(0, 0, 0, 0.05);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.dsm-promotion-plans__grid > .dsm-card:hover {
    transform:
        translateY(-4px);

    border-color:
        var(--dsm-color-primary);

    box-shadow:
        0 16px 38px
        rgba(0, 0, 0, 0.09);
}


/* ==========================================================
   NOMBRE / DESCRIPCIÓN
   ========================================================== */

.dsm-promotion-plans__grid > .dsm-card h2 {
    margin:
        0
        0
        var(--dsm-space-3);

    font-size:
        1.35rem;
}

.dsm-promotion-plans__grid > .dsm-card > p:not(
    .dsm-promotion-plan__price
) {
    margin:
        0
        0
        var(--dsm-space-5);

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

    line-height:
        1.55;
}


/* ==========================================================
   PRECIO
   ========================================================== */

.dsm-promotion-plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap:
        6px;

    margin:
        0
        0
        var(--dsm-space-5);
}

.dsm-promotion-plan__price strong {
    font-size:
        clamp(
            1.8rem,
            3vw,
            2.35rem
        );

    line-height: 1;

    letter-spacing:
        -0.03em;
}


/* ==========================================================
   BENEFICIOS
   ========================================================== */

.dsm-promotion-plans__grid > .dsm-card ul {
    display: grid;

    gap:
        var(--dsm-space-3);

    margin:
        0
        0
        var(--dsm-space-6);

    padding: 0;

    list-style: none;
}

.dsm-promotion-plans__grid > .dsm-card li {
    position: relative;

    padding-left:
        28px;

    line-height:
        1.45;
}

.dsm-promotion-plans__grid > .dsm-card li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    border-radius:
        999px;

    color:
        var(--dsm-color-primary);

    background:
        color-mix(
            in srgb,
            var(--dsm-color-primary) 10%,
            transparent
        );

    font-size:
        0.75rem;

    font-weight:
        900;
}


/* ==========================================================
   BOTÓN DE COMPRA
   ========================================================== */

.dsm-promotion-plans__grid > .dsm-card form {
    width: 100%;

    margin-top:
        auto;
}

.dsm-promotion-plans__grid > .dsm-card form .dsm-button {
    width: 100%;

    min-height:
        48px;

    justify-content:
        center;

    border-radius:
        12px;
}


/* ==========================================================
   SALDOS REUTILIZABLES
   ========================================================== */

.dsm-promotion-wallets {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        var(--dsm-space-4);
}

.dsm-promotion-wallet {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        var(--dsm-space-5);

    padding:
        var(--dsm-space-5);

    border-radius:
        18px;
}

.dsm-promotion-wallet__label {
    display: block;

    margin-bottom:
        4px;

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

    font-size:
        var(--dsm-font-size-sm);
}

.dsm-promotion-wallet__time {
    display: block;

    font-size:
        1.45rem;
}

.dsm-promotion-wallet__origin {
    display: block;

    margin-top:
        var(--dsm-space-2);

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

    font-size:
        var(--dsm-font-size-sm);
}

.dsm-promotion-wallet form {
    flex: 0 0 auto;
}


/* ==========================================================
   PROMOCIÓN ACTIVA
   ========================================================== */

.dsm-promotion-active-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        var(--dsm-space-6);

    padding:
        var(--dsm-space-6);

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

    border-radius:
        22px;
}

.dsm-promotion-active-card__content {
    display: flex;
    flex-wrap: wrap;

    gap:
        var(--dsm-space-7);
}

.dsm-promotion-active-card__content > div {
    display: grid;

    gap:
        4px;
}

.dsm-promotion-active-card__label {
    color:
        var(--dsm-color-text-muted);

    font-size:
        var(--dsm-font-size-sm);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {

    .dsm-promotion-plans__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .dsm-promotion-wallets {
        grid-template-columns:
            1fr;
    }

}

@media (max-width: 650px) {

    .dsm-promote-advertisement {
        width:
            min(
                100% - 24px,
                1180px
            );

        padding-block:
            var(--dsm-space-5);
    }

    .dsm-promotion-section {
        margin-top:
            var(--dsm-space-6);
    }

    .dsm-promotion-plans__grid {
        grid-template-columns:
            1fr;

        gap:
            var(--dsm-space-4);
    }

    .dsm-promotion-plans__grid > .dsm-card {
        border-radius:
            16px;
    }

    .dsm-promotion-plan__price strong {
        font-size:
            2rem;
    }

    .dsm-promotion-wallet,
    .dsm-promotion-active-card {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .dsm-promotion-wallet form,
    .dsm-promotion-wallet .dsm-button,
    .dsm-promotion-active-card form,
    .dsm-promotion-active-card .dsm-button {
        width:
            100%;
    }

    .dsm-promotion-active-card__content {
        gap:
            var(--dsm-space-4);
    }

}




/* ==========================================================
   AJUSTE CABECERAS DE SECCIONES DE PROMOCIÓN
   ========================================================== */

.dsm-promotion-section__header {
    display: block;
}

.dsm-promotion-section__header h2 {
    display: block;
    width: 100%;
}

.dsm-promotion-section__header p {
    display: block;
    width: 100%;
    margin-top:
        var(--dsm-space-2);
}


/* ==========================================================
   PUBLICAR ANUNCIO - ESTADOS DE BOTONES
   ========================================================== */

.dsm-advertisement-form-actions
.dsm-button--secondary {
    color:
        var(--dsm-color-primary);

    background:
        var(--dsm-color-secondary);

    border-color:
        var(--dsm-color-border);
}

.dsm-advertisement-form-actions
.dsm-button--secondary:hover,
.dsm-advertisement-form-actions
.dsm-button--secondary:focus-visible {
    color:
        var(--dsm-color-text-inverse);

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

    border-color:
        var(--dsm-color-primary);
}

.dsm-advertisement-form-actions
.dsm-button--primary {
    color:
        var(--dsm-color-text-inverse);

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

    border-color:
        var(--dsm-color-primary);
}

.dsm-advertisement-form-actions
.dsm-button--primary:hover,
.dsm-advertisement-form-actions
.dsm-button--primary:focus-visible {
    color:
        var(--dsm-color-text-inverse);

    background:
        var(--dsm-color-primary-hover);

    border-color:
        var(--dsm-color-primary-hover);
}


/* ==========================================================
   MIS FAVORITOS - ORIGEN DEL ARTÍCULO
   ========================================================== */

.dsm-customer-favorite__source {
    margin:
        -4px
        0
        10px;

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

    font-size:
        var(--dsm-font-size-sm);
}


/* ==========================================================
   CHECKOUT DE PAGOS
   ========================================================== */

.dsm-payment-checkout {
    width:
        min(
            1180px,
            calc(100% - 32px)
        );

    margin-inline:
        auto;

    padding-block:
        var(--dsm-space-7);
}


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

.dsm-payment-checkout
.dsm-account-section-header {
    margin-bottom:
        var(--dsm-space-6);
}

.dsm-payment-checkout
.dsm-account-section-header__content {
    max-width:
        760px;
}

.dsm-payment-checkout
.dsm-account-section-header h1 {
    margin:
        0
        0
        var(--dsm-space-2);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    line-height:
        1.08;
}

.dsm-payment-checkout
.dsm-account-section-header p {
    margin:
        0;

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

    font-size:
        var(--dsm-font-size-base);
}


/* ==========================================================
   TARJETA PRINCIPAL
   ========================================================== */

.dsm-payment-checkout > .dsm-card {
    padding:
        clamp(
            var(--dsm-space-5),
            3vw,
            var(--dsm-space-7)
        );

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

    border-radius:
        22px;

    background:
        var(--dsm-color-surface);

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.06);
}

.dsm-payment-checkout > .dsm-card > h2 {
    margin:
        0
        0
        var(--dsm-space-5);

    font-size:
        1.45rem;
}


/* ==========================================================
   RESUMEN DEL PAGO
   ========================================================== */

.dsm-payment-checkout
.dsm-definition-list {
    margin:
        0;

    padding:
        0;
}

.dsm-payment-checkout
.dsm-definition-list > div {
    display:
        grid;

    grid-template-columns:
        minmax(140px, 0.45fr)
        minmax(0, 1fr);

    gap:
        var(--dsm-space-4);

    align-items:
        center;

    padding:
        16px
        0;

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

.dsm-payment-checkout
.dsm-definition-list > div:first-child {
    border-top:
        1px solid
        var(--dsm-color-border);
}

.dsm-payment-checkout
.dsm-definition-list dt {
    color:
        var(--dsm-color-text-muted);

    font-weight:
        600;
}

.dsm-payment-checkout
.dsm-definition-list dd {
    margin:
        0;

    font-weight:
        700;
}


/* ==========================================================
   AVISO SIN MÉTODOS DE PAGO
   ========================================================== */

.dsm-payment-checkout
.dsm-account-notice {
    margin-top:
        var(--dsm-space-5);

    padding:
        16px
        18px;

    border-radius:
        var(--dsm-radius-md);
}


/* ==========================================================
   MÉTODOS DE PAGO
   ========================================================== */

.dsm-payment-methods {
    margin-top:
        var(--dsm-space-7);

    padding-top:
        var(--dsm-space-6);

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

.dsm-payment-methods > h2 {
    margin:
        0
        0
        var(--dsm-space-5);

    font-size:
        1.4rem;
}

.dsm-payment-methods > .dsm-card {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    column-gap:
        var(--dsm-space-6);

    align-items:
        center;

    margin-bottom:
        var(--dsm-space-4);

    padding:
        var(--dsm-space-5);

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

    border-radius:
        var(--dsm-radius-lg);

    background:
        var(--dsm-color-surface);
}

.dsm-payment-methods > .dsm-card h3 {
    margin:
        0
        0
        var(--dsm-space-2);
}

.dsm-payment-methods > .dsm-card p {
    margin:
        0;

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

.dsm-payment-methods > .dsm-card form {
    grid-column:
        2;

    grid-row:
        1 / span 2;

    min-width:
        190px;
}

.dsm-payment-methods
.dsm-button {
    width:
        100%;

    min-height:
        48px;

    border-radius:
        var(--dsm-radius-md);
}


/* ==========================================================
   BOTÓN VOLVER
   ========================================================== */

.dsm-payment-checkout
.dsm-button {
    border-radius:
        var(--dsm-radius-md);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 760px) {

    .dsm-payment-checkout {
        width:
            min(
                100% - 24px,
                1180px
            );

        padding-block:
            var(--dsm-space-5);
    }

    .dsm-payment-checkout > .dsm-card {
        padding:
            var(--dsm-space-5);

        border-radius:
            16px;
    }

    .dsm-payment-checkout
    .dsm-definition-list > div {
        grid-template-columns:
            1fr;

        gap:
            5px;
    }

    .dsm-payment-methods > .dsm-card {
        grid-template-columns:
            1fr;
    }

    .dsm-payment-methods > .dsm-card form {
        grid-column:
            1;

        grid-row:
            auto;

        width:
            100%;

        margin-top:
            var(--dsm-space-4);
    }

}


/* ==========================================================
   DSM DIRECTOS - INTEGRACIÓN ANUNCIOS / INVENTARIO
   ========================================================== */

.dsm-directos-toggle-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.dsm-directos-toggle-form .dsm-button {
    margin: 0;
}

.dsm-directos-inventory-toggle {
    min-width: 0;
    width: auto;
    white-space: nowrap;
}


/* ==========================================================
   DSM DIRECTOS - ACCIONES MI DIRECTO
   ========================================================== */

.dsm-direct-dashboard-actions {
    display: flex;
    flex-direction: column;
    gap: var(--dsm-space-2);
    margin-top: var(--dsm-space-3);
}

.dsm-direct-dashboard-actions__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dsm-space-2);
}


/* ==========================================================
   DSM DIRECTOS - SEPARACIÓN VERTICAL DE ACCIONES
   ========================================================== */

.dsm-direct-dashboard-actions {
    row-gap: 14px;
}


/* ==========================================================
   DSM DIRECTOS - ESPACIADO ENTRE FILAS DE ACCIONES
   ========================================================== */

.dsm-direct-dashboard-actions__row
+ .dsm-direct-dashboard-actions__row {
    margin-top: 12px;
}


/* ==========================================================
   DSM DIRECTOS - PANEL PRINCIPAL
   ========================================================== */

.dsm-customer-directs {
    width: 100%;
}

.dsm-customer-directs
> .dsm-account-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--dsm-space-4);
    margin-bottom: var(--dsm-space-4);
}

.dsm-customer-directs
> .dsm-account-section-header
h1 {
    margin: 0 0 var(--dsm-space-2);
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.1;
}

.dsm-customer-directs
> .dsm-account-section-header
p {
    margin: 0;
    color: var(--dsm-color-text-muted, #66736d);
}


/* Tarjetas principales */

.dsm-customer-directs
> .dsm-card {
    margin-top: var(--dsm-space-4);
    padding: clamp(
        20px,
        3vw,
        30px
    );
    border: 1px solid
        var(
            --dsm-color-border,
            #d7dfda
        );
    border-radius: 20px;
    background: #fff;
    box-shadow:
        0 8px 24px
        rgba(20, 45, 34, 0.04);
}

.dsm-customer-directs
> .dsm-card:first-of-type {
    margin-top: 0;
}

.dsm-customer-directs
> .dsm-card h2 {
    margin:
        0
        0
        var(--dsm-space-3);
    font-size: 1.55rem;
    line-height: 1.2;
}


/* Estado del directo */

.dsm-customer-directs
.dsm-direct-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--dsm-space-3);
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    background: #eef2ef;
}

.dsm-customer-directs
.dsm-direct-status--live {
    background: #e5f6ea;
}


/* Plataforma */

.dsm-customer-directs
.dsm-direct-platform {
    margin:
        0
        0
        var(--dsm-space-4);
}


/* Acciones */

.dsm-direct-dashboard-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 24px;
}

.dsm-direct-dashboard-actions__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dsm-space-2);
}

.dsm-direct-dashboard-actions__row
+ .dsm-direct-dashboard-actions__row {
    margin-top: 16px;
}


/* Fuentes */

.dsm-customer-directs
.dsm-direct-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}

.dsm-customer-directs
.dsm-direct-source {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border-radius: 999px;
    background: #edf4ef;
    font-weight: 600;
}


/* Responsive */

@media (max-width: 640px) {

    .dsm-customer-directs
    > .dsm-account-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dsm-direct-dashboard-actions__row {
        display: grid;
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .dsm-direct-dashboard-actions__row
    .dsm-button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}


/* ==========================================================
   DSM DIRECTOS - DISEÑO DEFINITIVO CUENTA
   ========================================================== */

.dsm-customer-directs {
    width: min(
        1180px,
        calc(100% - 32px)
    );
    margin: 0 auto;
    padding:
        clamp(32px, 5vw, 56px)
        0
        clamp(48px, 6vw, 72px);
}


/* ----------------------------------------------------------
   CABECERA PRINCIPAL
   ---------------------------------------------------------- */

.dsm-customer-directs
> .dsm-account-section-header {
    margin-bottom: 28px;
}

.dsm-customer-directs
> .dsm-account-section-header
h1 {
    margin: 0;
    font-size: clamp(
        2.35rem,
        5vw,
        3.2rem
    );
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.dsm-customer-directs
> .dsm-account-section-header
p {
    margin: 12px 0 0;
    color: #637068;
    font-size: 1rem;
}


/* ----------------------------------------------------------
   TARJETAS
   ---------------------------------------------------------- */

.dsm-customer-directs
.dsm-card {
    margin: 0 0 20px;
    padding: clamp(
        24px,
        3vw,
        32px
    );
    border: 1px solid #d8e0db;
    border-radius: 20px;
    background: #fff;
    box-shadow:
        0 8px 24px
        rgba(18, 45, 33, 0.045);
}

.dsm-customer-directs
.dsm-card h2 {
    margin: 0 0 18px;
    font-size: clamp(
        1.45rem,
        3vw,
        1.75rem
    );
}


/* ----------------------------------------------------------
   PANEL MI DIRECTO
   ---------------------------------------------------------- */

.dsm-customer-directs
.dsm-direct-platform {
    margin:
        14px
        0
        22px;
}

.dsm-customer-directs
.dsm-direct-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0 0 4px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #eef2ef;
    color: #33463d;
    font-size: 0.88rem;
    font-weight: 700;
}

.dsm-customer-directs
.dsm-direct-status--live {
    background: #e4f5e9;
    color: #13652e;
}


/* Acciones en dos filas */

.dsm-direct-dashboard-actions {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
}

.dsm-direct-dashboard-actions__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dsm-direct-dashboard-actions__row
+ .dsm-direct-dashboard-actions__row {
    margin-top: 16px;
}


/* ----------------------------------------------------------
   FUENTES DISPONIBLES
   ---------------------------------------------------------- */

.dsm-customer-directs
.dsm-direct-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.dsm-customer-directs
.dsm-direct-source {
    display: inline-flex;
    align-items: center;
    padding: 9px 13px;
    border-radius: 999px;
    background: #edf4ef;
    font-weight: 600;
}


/* ----------------------------------------------------------
   CONFIGURAR MI DIRECTO
   ---------------------------------------------------------- */

.dsm-customer-directs
.dsm-account-form {
    display: grid;
    gap: 22px;
    max-width: 760px;
}

.dsm-customer-directs
.dsm-account-form__field {
    display: grid;
    gap: 8px;
}

.dsm-customer-directs
.dsm-account-form__field
> label {
    font-weight: 700;
    color: #14271e;
}

.dsm-customer-directs
.dsm-account-form
input[type="text"],
.dsm-customer-directs
.dsm-account-form
input[type="url"],
.dsm-customer-directs
.dsm-account-form
select,
.dsm-customer-directs
.dsm-account-form
textarea {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid #cfd9d3;
    border-radius: 10px;
    background: #fff;
    color: #16271f;
    font: inherit;
    box-sizing: border-box;
}

.dsm-customer-directs
.dsm-account-form
textarea {
    min-height: 130px;
    resize: vertical;
}

.dsm-customer-directs
.dsm-account-form
input:focus,
.dsm-customer-directs
.dsm-account-form
select:focus,
.dsm-customer-directs
.dsm-account-form
textarea:focus {
    outline: 2px solid
        rgba(31, 67, 50, 0.18);
    outline-offset: 1px;
    border-color: #527161;
}

.dsm-customer-directs
.dsm-account-form__field
small {
    color: #69766f;
    line-height: 1.45;
}

.dsm-customer-directs
.dsm-account-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}


/* ----------------------------------------------------------
   BOTÓN VOLVER A MI DIRECTO
   ---------------------------------------------------------- */

.dsm-directos-back-button {
    white-space: nowrap;
}


/* Cabecera Inventario */

.dsm-store-inventory__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.dsm-store-inventory__header-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .dsm-customer-directs {
        width: min(
            100% - 20px,
            1180px
        );
        padding-top: 24px;
    }

    .dsm-customer-directs
    .dsm-card {
        padding: 20px;
        border-radius: 16px;
    }

    .dsm-direct-dashboard-actions__row {
        display: grid;
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .dsm-direct-dashboard-actions__row
    .dsm-button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .dsm-store-inventory__header {
        flex-direction: column;
    }
}

@media (max-width: 440px) {

    .dsm-direct-dashboard-actions__row {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   MIS ANUNCIOS - SEPARACIÓN BOTONES CABECERA EN MÓVIL
   ========================================================== */

@media (max-width: 700px) {

    .dsm-customer-advertisements
    .dsm-account-section-header__actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .dsm-customer-advertisements
    .dsm-account-section-header__actions
    .dsm-button {
        margin: 0;
    }
}


/* ==========================================================
   DSM OFERTAS - OFERTA EN TARJETA DE SUSCRIPCIÓN
   ========================================================== */

.dsm-subscription-offer {
    display: grid;
    gap: 5px;
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px solid currentColor;
    border-radius: 8px;
}

.dsm-subscription-offer__headline {
    font-size: 1rem;
    line-height: 1.3;
}

.dsm-subscription-offer__description {
    font-size: .92rem;
    line-height: 1.45;
    opacity: .8;
}