/* =========================================================
   DOLCI HANDS
   ACCOUNT.CSS
   PARTE 1/8
   BASE + DASHBOARD DESKTOP
   ========================================================= */


/* =========================================================
   RESET / BASE
   ========================================================= */

html,
body {

    margin: 0;
    padding: 0;

    max-width: 100%;

    overflow-x: hidden;

    background: #f8f1e8;

}


/* =========================================================
   PÁGINA DE CUENTA
   ========================================================= */

.account-page {

    width:
        min(1180px, 92%);

    margin:
        0 auto;

    padding:
        55px 0 80px;

    color:
        #5b4034;

}


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

.account-header {

    max-width:
        850px;

    margin:
        0 0 40px;

}


.account-eyebrow {

    display:
        block;

    margin:
        0 0 9px;

    color:
        #b86f55;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .18em;

    line-height:
        1.3;

    text-transform:
        uppercase;

}


.account-header h1 {

    margin:
        0;

    color:
        #3f2b24;

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

    font-size:
        clamp(42px, 5vw, 64px);

    font-weight:
        500;

    line-height:
        .98;

    letter-spacing:
        -.045em;

}


.account-name {

    color:
        #b86f55;

}


.account-intro {

    max-width:
        580px;

    margin:
        16px 0 0;

    color:
        #725b50;

    font-size:
        15px;

    line-height:
        1.65;

}


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

.account-content {

    display:
        grid;

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

    gap:
        22px;

    align-items:
        start;

}


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

.account-summary {

    padding:
        30px;

    background:
        rgba(255, 253, 249, .72);

    border:
        1px solid
        rgba(91, 64, 52, .10);

    border-radius:
        26px;

    box-shadow:
        0 12px 35px
        rgba(76, 51, 40, .045);

}


.account-section-header {

    margin:
        0 0 24px;

}


.account-section-header h2 {

    margin:
        0;

    color:
        #3f2b24;

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

    font-size:
        27px;

    font-weight:
        500;

    line-height:
        1.2;

    letter-spacing:
        -.025em;

}


.account-section-header > p:last-child {

    margin:
        7px 0 0;

    color:
        #80695d;

    font-size:
        14px;

    line-height:
        1.6;

}


/* =========================================================
   TARJETAS DEL DASHBOARD
   ========================================================= */

.account-cards {

    display:
        grid;

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

    gap:
        13px;

}


.account-card {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    min-height:
        185px;

    padding:
        21px;

    box-sizing:
        border-box;

    background:
        #f5ece2;

    border:
        1px solid
        rgba(91, 64, 52, .07);

    border-radius:
        20px;

    text-decoration:
        none;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


.account-card:hover {

    transform:
        translateY(-3px);

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

    box-shadow:
        0 12px 25px
        rgba(91, 64, 52, .07);

}


/* =========================================================
   ICONO DE TARJETA
   ========================================================= */

.account-card-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

    margin:
        0 0 19px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        #f0dfcd;

    color:
        #8f6554;

    font-size:
        19px;

    line-height:
        1;

}


.account-card-icon img {

    display:
        block;

    width:
        26px;

    height:
        26px;

    object-fit:
        contain;

}


/* =========================================================
   TÍTULO DE TARJETA
   ========================================================= */

.account-card h3 {

    margin:
        0;

    color:
        #3f2b24;

    font-size:
        17px;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        -.015em;

}


/* =========================================================
   TEXTO DE TARJETA
   ========================================================= */

.account-card p {

    max-width:
        190px;

    margin:
        10px 0 0;

    color:
        #80695d;

    font-size:
        12px;

    line-height:
        1.55;

}


.account-card strong {

    color:
        #5b4034;

}


/* =========================================================
   ENLACE DE TARJETA
   ========================================================= */

.account-card a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    width:
        fit-content;

    margin-top:
        auto;

    padding-top:
        20px;

    color:
        #a8664f;

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1.2;

    text-decoration:
        none;

}


.account-card a span {

    display:
        inline-block;

    transition:
        transform .2s ease;

}


.account-card a:hover span {

    transform:
        translateX(4px);

}


/* =========================================================
   ACTIVIDAD
   ========================================================= */

.account-activity {

    position:
        sticky;

    top:
        30px;

    padding:
        28px;

    box-sizing:
        border-box;

    background:
        rgba(255, 253, 249, .72);

    border:
        1px solid
        rgba(91, 64, 52, .10);

    border-radius:
        26px;

    box-shadow:
        0 12px 35px
        rgba(76, 51, 40, .045);

}


.account-activity .account-section-header {

    margin-bottom:
        23px;

}


.account-activity .account-section-header h2 {

    font-size:
        25px;

}


/* =========================================================
   ELEMENTO DE ACTIVIDAD
   ========================================================= */

.activity-item {

    position:
        relative;

    padding:
        0 0 19px 16px;

    margin:
        0 0 19px;

    border-left:
        1px solid
        rgba(184, 120, 93, .28);

}


.activity-item::before {

    content:
        "";

    position:
        absolute;

    top:
        3px;

    left:
        -4px;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #b8785d;

}


.activity-item:last-child {

    margin-bottom:
        0;

    padding-bottom:
        0;

}


/* =========================================================
   ETIQUETA "NUEVA"
   ========================================================= */

.activity-new {

    display:
        inline-block;

    margin:
        0 0 8px;

    padding:
        3px 7px;

    border-radius:
        999px;

    background:
        #f3e3d7;

    color:
        #a8664f;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .08em;

    line-height:
        1;

    text-transform:
        uppercase;

}


/* =========================================================
   TÍTULO DE ACTIVIDAD
   ========================================================= */

.activity-item h3 {

    margin:
        0;

    color:
        #3f2b24;

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1.4;

}


.activity-item p {

    margin:
        7px 0 0;

    color:
        #80695d;

    font-size:
        12px;

    line-height:
        1.6;

}


.activity-item small {

    display:
        block;

    margin:
        8px 0 0;

    color:
        rgba(91, 64, 52, .5);

    font-size:
        9px;

}


/* =========================================================
   ENLACE DE ACTIVIDAD
   ========================================================= */

.activity-item a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    margin-top:
        10px;

    color:
        #b8785d;

    font-size:
        11px;

    font-weight:
        700;

    text-decoration:
        none;

}


.activity-item a span,
.activity-all span {

    display:
        inline-block;

    transition:
        transform .2s ease;

}


.activity-item a:hover span,
.activity-all:hover span {

    transform:
        translateX(4px);

}


/* =========================================================
   VER TODA LA ACTIVIDAD
   ========================================================= */

.activity-all {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        22px;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(91, 64, 52, .12);

    color:
        #b8785d;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

}


.activity-empty {

    color:
        #80695d;

    font-size:
        13px;

    line-height:
        1.6;

}


/* =========================================================
   FOOTER DE CUENTA
   ========================================================= */

.account-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    margin-top:
        22px;

    padding:
        20px 25px;

    box-sizing:
        border-box;

    background:
        rgba(243, 235, 226, .75);

    border:
        1px solid
        rgba(91, 64, 52, .08);

    border-radius:
        20px;

}


.account-email p {

    margin:
        0 0 4px;

    color:
        #917a6d;

    font-size:
        10px;

}


.account-email strong {

    color:
        #3f2b24;

    font-size:
        13px;

}


.account-footer-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

}


.account-footer-actions a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #b8785d;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

}


.account-footer-actions .account-logout {

    color:
        #80695d;

}


/* =========================================================
   RESPONSIVE — DASHBOARD
   ========================================================= */

@media (max-width: 1050px) {

    .account-content {

        grid-template-columns:
            1fr;

    }


    .account-activity {

        position:
            static;

    }

}


@media (max-width: 820px) {

    .account-cards {

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

    }

}


@media (max-width: 560px) {

    .account-page {

        width:
            92%;

        padding:
            35px 0 120px;

    }


    .account-header {

        margin-bottom:
            32px;

    }


    .account-header h1 {

        font-size:
            38px;

    }


    .account-summary,
    .account-activity {

        padding:
            22px;

        border-radius:
            22px;

    }


    .account-cards {

        grid-template-columns:
            1fr;

    }


    .account-card {

        min-height:
            180px;

    }


    .account-footer {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .account-footer-actions {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            12px;

    }

}


/* =========================================================
   DOLCI HANDS
   ACCOUNT.CSS
   PARTE 2/8
   NOTIFICACIONES
   ========================================================= */


/* =========================================================
   SEPARADOR DE NAVBAR
   ========================================================= */

.account-navbar-divider {

    width:
        100%;

    height:
        1px;

    margin:
        0;

    padding:
        0;

    background:
        rgba(76, 43, 34, .12);

}


/* =========================================================
   PÁGINA DE NOTIFICACIONES
   ========================================================= */

.account-notifications-page {

    width:
        min(
            1050px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
        55px 0 80px;

}


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

.account-page-header {

    margin:
        0 0 40px;

}


.account-page-header .account-eyebrow {

    margin-bottom:
        10px;

}


.account-page-header h1 {

    margin:
        0 0 12px;

    color:
        #2f211d;

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

    font-size:
        clamp(
            42px,
            5vw,
            64px
        );

    font-weight:
        500;

    line-height:
        1.05;

    letter-spacing:
        -.035em;

}


.account-page-header p {

    max-width:
        620px;

    margin:
        0;

    color:
        #765d52;

    font-size:
        15px;

    line-height:
        1.7;

}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.notifications-container {

    display:
        flex;

    flex-direction:
        column;

    gap:
        28px;

}


/* =========================================================
   SECCIÓN DE NOTIFICACIONES
   ========================================================= */

.notifications-section {

    padding:
        30px;

    background:
        rgba(
            255,
            253,
            249,
            .72
        );

    border:
        1px solid
        rgba(
            91,
            64,
            52,
            .10
        );

    border-radius:
        26px;

    box-shadow:
        0 12px 35px
        rgba(
            76,
            51,
            40,
            .045
        );

}


.notifications-history-section {

    background:
        rgba(
            255,
            253,
            249,
            .55
        );

}


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

.notifications-section-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        25px;

    margin:
        0 0 24px;

}


.notifications-section-header > div {

    min-width:
        0;

}


.notifications-section-header h2 {

    margin:
        0 0 7px;

    color:
        #35241f;

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

    font-size:
        28px;

    font-weight:
        500;

    line-height:
        1.15;

}


.notifications-section-header p {

    margin:
        0;

    color:
        #80685d;

    font-size:
        13px;

    line-height:
        1.6;

}


/* =========================================================
   PESTAÑAS
   ========================================================= */

.notifications-tabs {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        0 0 25px;

    padding:
        0 0 10px;

    border-bottom:
        1px solid
        rgba(
            76,
            43,
            34,
            .12
        );

}


.notification-tab {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        38px;

    padding:
        8px 16px;

    border:
        0;

    border-radius:
        999px;

    background:
        transparent;

    color:
        #80695d;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background .2s ease,
        color .2s ease;

}


.notification-tab:hover {

    background:
        #f3e8de;

    color:
        #5b4034;

}


.notification-tab.active {

    background:
        #5b4034;

    color:
        #fffdfa;

}


/* =========================================================
   PANELES
   ========================================================= */

.notification-panel {

    display:
        none;

}


.notification-panel.active {

    display:
        block;

}


/* =========================================================
   CABECERA DEL PANEL
   ========================================================= */

.notifications-panel-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        25px;

    margin:
        0 0 22px;

}


.notifications-panel-header h2 {

    margin:
        0 0 6px;

    color:
        #3f2b24;

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

    font-size:
        27px;

    font-weight:
        500;

    line-height:
        1.15;

}


.notifications-panel-header p {

    margin:
        0;

    color:
        #80695d;

    font-size:
        12px;

    line-height:
        1.5;

}


/* =========================================================
   FILTRO
   ========================================================= */

.notification-filter {

    display:
        flex;

    flex-direction:
        column;

    flex:
        0 0 auto;

    gap:
        5px;

}


.notification-filter label {

    display:
        block;

    margin:
        0;

    color:
        #91796c;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    line-height:
        1.2;

    text-transform:
        uppercase;

}


.notification-filter select {

    min-width:
        145px;

    padding:
        9px 12px;

    border:
        1px solid
        #dfd0c4;

    border-radius:
        10px;

    outline:
        none;

    background:
        #fffdfa;

    color:
        #5b4034;

    font-family:
        inherit;

    font-size:
        12px;

    cursor:
        pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.notification-filter select:focus {

    border-color:
        #bd7258;

    box-shadow:
        0 0 0 3px
        rgba(
            189,
            114,
            88,
            .10
        );

}


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

.notifications-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


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

.notification-card {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        16px;

    min-width:
        0;

    padding:
        18px 19px;

    background:
        #fffdfa;

    border:
        1px solid
        rgba(
            91,
            64,
            52,
            .10
        );

    border-radius:
        18px;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease,
        background-color .2s ease;

}


.notification-card:hover {

    transform:
        translateY(-2px);

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

    box-shadow:
        0 10px 25px
        rgba(
            76,
            51,
            40,
            .06
        );

}


.notification-card-hover-read {

    background:
        #f8eee7;

}


/* =========================================================
   ICONO
   ========================================================= */

.notification-card-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 44px;

    width:
        44px;

    height:
        44px;

    border-radius:
        50%;

    background:
        #f4e8dd;

    color:
        #ad6c54;

    font-size:
        17px;

    line-height:
        1;

}


.notification-card-icon img {

    display:
        block;

    width:
        24px;

    height:
        24px;

    object-fit:
        contain;

}


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

.notification-card-content {

    min-width:
        0;

    flex:
        1;

}


.notification-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin:
        0 0 5px;

}


.notification-card-top small {

    flex-shrink:
        0;

    color:
        #a18a7d;

    font-size:
        10px;

    white-space:
        nowrap;

}


.notification-card h3 {

    margin:
        0 0 6px;

    color:
        #3f2b24;

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

    font-size:
        17px;

    font-weight:
        500;

    line-height:
        1.3;

}


.notification-card p {

    max-width:
        700px;

    margin:
        0;

    color:
        #80695d;

    font-size:
        12px;

    line-height:
        1.6;

}


/* =========================================================
   ESTADO — NUEVA
   ========================================================= */

.notification-status-new {

    display:
        inline-flex;

    align-items:
        center;

    flex-shrink:
        0;

    padding:
        3px 8px;

    border-radius:
        999px;

    background:
        #f2ded3;

    color:
        #ad5f47;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    line-height:
        1;

    text-transform:
        uppercase;

}


/* =========================================================
   ESTADO — LEÍDA
   ========================================================= */

.notification-status-read {

    display:
        inline-flex;

    align-items:
        center;

    flex-shrink:
        0;

    padding:
        3px 8px;

    border-radius:
        999px;

    background:
        #eee8e2;

    color:
        #968278;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    line-height:
        1;

    text-transform:
        uppercase;

}


/* =========================================================
   TARJETA LEÍDA
   ========================================================= */

.notification-card-read {

    background:
        #fffdfa;

}


.notification-card-read .notification-card-icon {

    background:
        #f4ede7;

    color:
        #a88e80;

}


.notification-card-read h3 {

    color:
        #59453d;

}


/* =========================================================
   ACCIÓN
   ========================================================= */

.notification-card-action {

    margin:
        12px 0 0;

}


.notification-card-action a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    color:
        #b96549;

    font-size:
        11px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        gap .2s ease,
        color .2s ease;

}


.notification-card-action a:hover {

    gap:
        10px;

    color:
        #8f4934;

}


.notification-card-action span {

    font-size:
        14px;

    line-height:
        1;

}


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

.notifications-empty {

    display:
        none;

    padding:
        45px 20px;

    text-align:
        center;

}


.notifications-empty.is-visible {

    display:
        block;

}


.notifications-empty-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

    margin:
        0 auto 13px;

    border-radius:
        50%;

    background:
        #f3e8de;

    color:
        #b06d54;

    font-size:
        18px;

}


.notifications-empty h3 {

    margin:
        0 0 6px;

    color:
        #49352c;

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

    font-size:
        20px;

    font-weight:
        500;

}


.notifications-empty p {

    max-width:
        420px;

    margin:
        0 auto;

    color:
        #8a7266;

    font-size:
        12px;

    line-height:
        1.6;

}


/* =========================================================
   PIE
   ========================================================= */

.account-page-footer {

    margin:
        25px 0 0;

}


.account-back-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #a95e45;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

}


.account-back-link:hover {

    color:
        #7f4231;

}


/* =========================================================
   RESPONSIVE — NOTIFICACIONES
   ========================================================= */

@media (max-width: 700px) {

    .account-notifications-page {

        width:
            calc(100% - 28px);

        padding:
            32px 0 110px;

    }


    .account-page-header {

        margin-bottom:
            28px;

    }


    .account-page-header h1 {

        font-size:
            38px;

    }


    .account-page-header p {

        font-size:
            13px;

    }


    .notifications-container {

        gap:
            18px;

    }


    .notifications-section {

        padding:
            20px;

        border-radius:
            21px;

    }


    .notifications-section-header {

        flex-direction:
            column;

        gap:
            18px;

        margin-bottom:
            20px;

    }


    .notifications-section-header h2 {

        font-size:
            23px;

    }


    .notifications-tabs {

        width:
            100%;

        gap:
            5px;

        overflow-x:
            auto;

        scrollbar-width:
            none;

    }


    .notifications-tabs::-webkit-scrollbar {

        display:
            none;

    }


    .notification-tab {

        flex:
            0 0 auto;

        min-height:
            36px;

        padding:
            8px 13px;

        font-size:
            11px;

    }


    .notifications-panel-header {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            15px;

        margin-bottom:
            18px;

    }


    .notifications-panel-header h2 {

        font-size:
            23px;

    }


    .notification-filter {

        width:
            100%;

    }


    .notification-filter select {

        width:
            100%;

    }


    .notification-card {

        gap:
            12px;

        padding:
            15px;

        border-radius:
            16px;

    }


    .notification-card-icon {

        flex:
            0 0 40px;

        width:
            40px;

        height:
            40px;

    }


    .notification-card-icon img {

        width:
            22px;

        height:
            22px;

    }


    .notification-card-top {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            6px;

    }


    .notification-card-top small {

        white-space:
            normal;

    }


    .notification-card h3 {

        font-size:
            15px;

    }


    .notification-card p {

        font-size:
            11px;

        line-height:
            1.55;

    }


    .notification-card-action a {

        font-size:
            11px;

    }


    .notifications-empty {

        padding:
            35px 15px;

    }

}


/* =========================================================
   DOLCI HANDS
   ACCOUNT.CSS
   PARTE 3/8
   MIS PEDIDOS
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

.orders-page {

    width:
        min(
            1100px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
        70px 0 90px;

}


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

.orders-header {

    margin:
        0 0 38px;

}


.orders-eyebrow {

    display:
        block;

    margin:
        0 0 12px;

    color:
        var(--accent, #b96f55);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.orders-header h1 {

    margin:
        0 0 12px;

    color:
        var(--text-dark, #2f211d);

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

    font-size:
        clamp(
            42px,
            5vw,
            64px
        );

    font-weight:
        500;

    line-height:
        .95;

}


.orders-header p {

    margin:
        0;

    color:
        #755f56;

    font-size:
        15px;

    line-height:
        1.6;

}


/* =========================================================
   PESTAÑAS
   ========================================================= */

.orders-tabs {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        0 0 28px;

    padding:
        0 0 12px;

    border-bottom:
        1px solid
        #ded2c8;

}


.orders-tab {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    padding:
        10px 20px;

    border-radius:
        999px;

    color:
        #795e53;

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1;

    text-decoration:
        none;

    transition:
        background .2s ease,
        color .2s ease;

}


.orders-tab:hover {

    background:
        #eee2d7;

}


.orders-tab.active {

    background:
        #604236;

    color:
        #fff;

}


/* =========================================================
   FILTROS
   ========================================================= */

.orders-filters {

    margin:
        0 0 45px;

    padding:
        26px;

    border:
        1px solid
        #e2d6cc;

    border-radius:
        24px;

    background:
        rgba(
            255,
            253,
            250,
            .75
        );

}


.orders-filter-grid {

    display:
        grid;

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

    gap:
        18px;

}


.orders-filter-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.orders-filter-search {

    grid-column:
        span 3;

}


.orders-filter-field label {

    color:
        #80665b;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


.orders-filter-field input,
.orders-filter-field select {

    width:
        100%;

    min-height:
        43px;

    box-sizing:
        border-box;

    padding:
        10px 13px;

    border:
        1px solid
        #dfd1c6;

    border-radius:
        10px;

    outline:
        none;

    background:
        #fffdfb;

    color:
        #3b2924;

    font:
        inherit;

}


.orders-filter-field input:focus,
.orders-filter-field select:focus {

    border-color:
        #bd765b;

    box-shadow:
        0 0 0 3px
        rgba(
            189,
            118,
            91,
            .12
        );

}


.orders-filter-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    margin-top:
        22px;

}


.orders-filter-button {

    padding:
        12px 24px;

    border:
        0;

    border-radius:
        999px;

    background:
        #604236;

    color:
        #fff;

    font-weight:
        700;

    cursor:
        pointer;

}


.orders-filter-button:hover {

    background:
        #4d332a;

}


.orders-clear-button {

    color:
        #a45f49;

    font-size:
        13px;

    text-decoration:
        none;

}


/* =========================================================
   RESULTADOS
   ========================================================= */

.orders-results-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin:
        0 0 22px;

}


.orders-results-header h2 {

    margin:
        0;

    color:
        #33231f;

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

    font-size:
        34px;

    font-weight:
        500;

    line-height:
        1.1;

}


.orders-count {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        32px;

    padding:
        7px 13px;

    border-radius:
        999px;

    background:
        #eee1d6;

    color:
        #795b50;

    font-size:
        12px;

    font-weight:
        700;

}


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

.orders-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

}


/* =========================================================
   TARJETA DE PEDIDO
   ========================================================= */

.order-card {

    padding:
        27px 30px;

    border:
        1px solid
        #e4d9d0;

    border-radius:
        22px;

    background:
        #fffdfb;

    box-shadow:
        0 12px 35px
        rgba(
            71,
            48,
            39,
            .055
        );

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.order-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 16px 40px
        rgba(
            71,
            48,
            39,
            .09
        );

}


/* =========================================================
   CABECERA DE TARJETA
   ========================================================= */

.order-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        0 0 22px;

    border-bottom:
        1px solid
        #eee4dc;

}


.order-label {

    display:
        block;

    margin:
        0 0 6px;

    color:
        #a96750;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

}


.order-card h3 {

    margin:
        0;

    color:
        #35231e;

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

    font-size:
        22px;

    font-weight:
        500;

}


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

.order-status {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    min-height:
        32px;

    padding:
        8px 13px;

    border-radius:
        999px;

    background:
        #f2e5db;

    color:
        #8c5543;

    font-size:
        11px;

    font-weight:
        700;

    white-space:
        nowrap;

}


.order-status-preparing {

    background:
        #f3e9d6;

    color:
        #96703d;

}


.order-status-ready {

    background:
        #e7eee2;

    color:
        #55724d;

}


.order-status-waiting_for_courier {

    background:
        #eee6dc;

    color:
        #745c4e;

}


.order-status-delivered {

    background:
        #e3eee5;

    color:
        #4d7056;

}


/* =========================================================
   INFORMACIÓN
   ========================================================= */

.order-card-info {

    display:
        grid;

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

    gap:
        20px;

    padding:
        24px 0;

}


.order-info-item {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    min-width:
        0;

}


.order-info-item span,
.order-card-bottom span {

    color:
        #96786c;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


.order-info-item strong {

    color:
        #4a352e;

    font-size:
        14px;

    font-weight:
        600;

}


/* =========================================================
   PARTE INFERIOR
   ========================================================= */

.order-card-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        20px 0 0;

    border-top:
        1px solid
        #eee4dc;

}


.order-card-bottom > div {

    display:
        flex;

    align-items:
        baseline;

    gap:
        14px;

}


.order-card-bottom strong {

    color:
        #33231f;

    font-size:
        21px;

}


/* =========================================================
   BOTÓN VER PEDIDO
   ========================================================= */

.order-view-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-height:
        40px;

    padding:
        10px 18px;

    border:
        1px solid
        #bd765b;

    border-radius:
        999px;

    color:
        #a45f49;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

    white-space:
        nowrap;

    transition:
        background .2s ease,
        color .2s ease;

}


.order-view-button:hover {

    background:
        #604236;

    color:
        #fff;

}


.order-view-button span {

    color:
        inherit;

}


/* =========================================================
   SIN RESULTADOS
   ========================================================= */

.orders-empty {

    padding:
        65px 25px;

    border:
        1px solid
        #e4d9d0;

    border-radius:
        24px;

    background:
        #fffdfb;

    text-align:
        center;

}


.orders-empty-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        52px;

    height:
        52px;

    margin:
        0 auto 18px;

    border-radius:
        50%;

    background:
        #f1e5db;

    color:
        #b96f55;

    font-size:
        22px;

}


.orders-empty h3 {

    margin:
        0 0 8px;

    color:
        #35231e;

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

    font-size:
        25px;

    font-weight:
        500;

}


.orders-empty p {

    max-width:
        500px;

    margin:
        0 auto;

    color:
        #806960;

    font-size:
        13px;

}


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

.orders-footer {

    margin:
        35px 0 0;

}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 800px) {

    .orders-page {

        width:
            calc(100% - 28px);

        padding:
            45px 0 110px;

    }


    .orders-filter-grid {

        grid-template-columns:
            1fr;

    }


    .orders-filter-search {

        grid-column:
            auto;

    }


    .order-card-info {

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

    }

}


/* =========================================================
   RESPONSIVE — MÓVIL
   ========================================================= */

@media (max-width: 560px) {

    .orders-page {

        width:
            calc(100% - 28px);

        padding:
            32px 0 110px;

    }


    .orders-header {

        margin-bottom:
            28px;

    }


    .orders-header h1 {

        font-size:
            40px;

    }


    .orders-header p {

        font-size:
            13px;

    }


    .orders-tabs {

        gap:
            5px;

        margin-bottom:
            22px;

        overflow-x:
            auto;

        scrollbar-width:
            none;

    }


    .orders-tabs::-webkit-scrollbar {

        display:
            none;

    }


    .orders-tab {

        flex:
            0 0 auto;

        min-height:
            38px;

        padding:
            9px 14px;

        font-size:
            11px;

    }


    .orders-filters {

        margin-bottom:
            32px;

        padding:
            18px;

        border-radius:
            19px;

    }


    .orders-filter-actions {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            10px;

    }


    .orders-filter-button {

        width:
            100%;

    }


    .orders-clear-button {

        text-align:
            center;

    }


    .orders-results-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;

        margin-bottom:
            18px;

    }


    .orders-results-header h2 {

        font-size:
            27px;

    }


    .order-card {

        padding:
            20px 17px;

        border-radius:
            19px;

    }


    .order-card-top {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;

        padding-bottom:
            17px;

    }


    .order-card h3 {

        font-size:
            19px;

    }


    .order-status {

        align-self:
            flex-start;

        font-size:
            10px;

    }


    .order-card-info {

        grid-template-columns:
            1fr;

        gap:
            15px;

        padding:
            20px 0;

    }


    .order-card-bottom {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            17px;

    }


    .order-card-bottom > div {

        justify-content:
            space-between;

        width:
            100%;

    }


    .order-view-button {

        width:
            100%;

        box-sizing:
            border-box;

    }

}


/* =========================================================
   DOLCI HANDS
   ACCOUNT.CSS
   PARTE 4/8
   PERFIL / CONFIGURACIÓN
   ========================================================= */


/* =========================================================
   PÁGINA DE PERFIL
   ========================================================= */

.profile-page {

    width:
        min(
            1050px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
        65px 0 85px;

}


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

.profile-header {

    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    margin:
        0 0 45px;

}


.profile-avatar {

    width:
        72px;

    height:
        72px;

    flex:
        0 0 72px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #ead9cc;

    color:
        #674538;

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

    font-size:
        30px;

}


/* =========================================================
   EYEBROW DEL PERFIL
   ========================================================= */

.profile-eyebrow {

    display:
        block;

    margin:
        0 0 8px;

    color:
        #ae6b53;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .13em;

    line-height:
        1.3;

}


/* =========================================================
   TÍTULO
   ========================================================= */

.profile-header h1 {

    margin:
        0 0 9px;

    color:
        #34231e;

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

    font-size:
        clamp(
            38px,
            5vw,
            52px
        );

    font-weight:
        500;

    line-height:
        1;

}


.profile-header p {

    margin:
        0;

    color:
        #80695d;

    font-size:
        13px;

    line-height:
        1.6;

}


/* =========================================================
   SECCIÓN DE INFORMACIÓN
   ========================================================= */

.profile-section {

    margin:
        0 0 20px;

    padding:
        27px;

    background:
        #fffdfa;

    border:
        1px solid
        #e3d7ce;

    border-radius:
        22px;

}


.profile-section-heading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin:
        0 0 22px;

}


.profile-section-heading h2 {

    margin:
        0;

    color:
        #49352c;

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

    font-size:
        25px;

    font-weight:
        500;

    line-height:
        1.2;

}


/* =========================================================
   INFORMACIÓN PERSONAL
   ========================================================= */

.profile-info-grid {

    display:
        grid;

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

    gap:
        12px;

}


.profile-info-card {

    min-width:
        0;

    padding:
        17px;

    background:
        #faf4ee;

    border:
        1px solid
        #eee1d8;

    border-radius:
        15px;

}


.profile-info-card span {

    display:
        block;

    margin:
        0 0 7px;

    color:
        #a58a7d;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .12em;

    line-height:
        1.3;

}


.profile-info-card strong {

    display:
        block;

    min-width:
        0;

    color:
        #49352c;

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.4;

    overflow-wrap:
        anywhere;

}


/* =========================================================
   SEGURIDAD / PREFERENCIAS
   ========================================================= */

.profile-settings-grid {

    display:
        grid;

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

    gap:
        20px;

    margin:
        0 0 20px;

}


.profile-setting-card {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    padding:
        27px;

    background:
        #fffdfa;

    border:
        1px solid
        #e3d7ce;

    border-radius:
        22px;

}


.profile-setting-icon {

    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 0 20px;

    border-radius:
        50%;

    background:
        #f2e5db;

    color:
        #93614f;

    font-size:
        20px;

}


.profile-setting-icon img {

    width:
        26px;

    height:
        26px;

    object-fit:
        contain;

}


.profile-setting-card h2 {

    margin:
        0 0 10px;

    color:
        #49352c;

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

    font-size:
        23px;

    font-weight:
        500;

    line-height:
        1.25;

}


.profile-setting-card p {

    margin:
        0 0 22px;

    color:
        #80695d;

    font-size:
        12px;

    line-height:
        1.6;

}


/* =========================================================
   BOTÓN DE CONFIGURACIÓN
   ========================================================= */

.profile-setting-button {

    align-self:
        flex-start;

    margin-top:
        auto;

    padding:
        10px 15px;

    border:
        1px solid
        #dbc9bc;

    border-radius:
        999px;

    background:
        #f5ebe3;

    color:
        #997467;

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1;

}


/* =========================================================
   FORMULARIO DE CONTRASEÑA
   ========================================================= */

.profile-password-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

    margin:
        5px 0 0;

}


.profile-password-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

}


.profile-password-field label {

    color:
        #80695d;

    font-size:
        10px;

    font-weight:
        700;

}


.profile-password-field input {

    width:
        100%;

    min-height:
        43px;

    padding:
        10px 13px;

    box-sizing:
        border-box;

    border:
        1px solid
        #dfd1c6;

    border-radius:
        11px;

    outline:
        none;

    background:
        #fffdfb;

    color:
        #49352c;

    font:
        inherit;

    font-size:
        12px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.profile-password-field input:focus {

    border-color:
        #bd765b;

    box-shadow:
        0 0 0 3px
        rgba(
            189,
            118,
            91,
            .11
        );

}


.profile-password-submit {

    align-self:
        flex-start;

    min-height:
        40px;

    margin:
        3px 0 0;

    padding:
        10px 18px;

    border:
        0;

    border-radius:
        999px;

    background:
        #604236;

    color:
        #fff;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform .2s ease,
        background .2s ease;

}


.profile-password-submit:hover {

    background:
        #4d332a;

    transform:
        translateY(-1px);

}


/* =========================================================
   ACTIVIDAD DEL PERFIL
   ========================================================= */

.profile-activity-section {

    margin:
        0 0 20px;

    padding:
        27px;

    background:
        #fffdfa;

    border:
        1px solid
        #e3d7ce;

    border-radius:
        22px;

}


.profile-activity-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0;

}


.profile-activity-item {

    display:
        grid;

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

    gap:
        12px;

    padding:
        16px 0;

    border-bottom:
        1px solid
        #eee4dc;

}


.profile-activity-item:last-child {

    border-bottom:
        0;

}


.profile-activity-dot {

    width:
        8px;

    height:
        8px;

    margin-top:
        6px;

    border-radius:
        50%;

    background:
        #bd765b;

}


.profile-activity-content {

    min-width:
        0;

}


.profile-activity-content h3 {

    margin:
        0 0 5px;

    color:
        #49352c;

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

    font-size:
        15px;

    font-weight:
        500;

    line-height:
        1.35;

}


.profile-activity-content p {

    margin:
        0 0 7px;

    color:
        #80695d;

    font-size:
        11px;

    line-height:
        1.5;

}


.profile-activity-content small {

    display:
        block;

    margin:
        0 0 7px;

    color:
        #ad968b;

    font-size:
        9px;

}


.profile-activity-content a {

    color:
        #a45f49;

    font-size:
        10px;

    font-weight:
        700;

    text-decoration:
        none;

}


/* =========================================================
   SIN ACTIVIDAD
   ========================================================= */

.profile-empty-activity {

    padding:
        35px 20px;

    text-align:
        center;

}


.profile-empty-activity > div {

    width:
        45px;

    height:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 12px;

    border-radius:
        50%;

    background:
        #f2e5db;

    color:
        #ae6b53;

    font-size:
        18px;

}


.profile-empty-activity h3 {

    margin:
        0 0 6px;

    color:
        #49352c;

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

    font-size:
        21px;

    font-weight:
        500;

}


.profile-empty-activity p {

    margin:
        0;

    color:
        #80695d;

    font-size:
        11px;

    line-height:
        1.6;

}


/* =========================================================
   FOOTER DEL PERFIL
   ========================================================= */

.profile-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin:
        28px 0 0;

}


.profile-footer a {

    color:
        #a45f49;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

}


/* =========================================================
   RESPONSIVE — PERFIL
   ========================================================= */

@media (max-width: 700px) {

    .profile-page {

        width:
            calc(100% - 28px);

        padding:
            35px 0 110px;

    }


    .profile-header {

        align-items:
            flex-start;

        gap:
            15px;

        margin-bottom:
            30px;

    }


    .profile-avatar {

        width:
            54px;

        height:
            54px;

        flex-basis:
            54px;

        font-size:
            22px;

    }


    .profile-header h1 {

        font-size:
            35px;

    }


    .profile-header p {

        font-size:
            11px;

    }


    .profile-section {

        padding:
            20px;

        border-radius:
            19px;

    }


    .profile-info-grid {

        grid-template-columns:
            1fr;

    }


    .profile-settings-grid {

        grid-template-columns:
            1fr;

        gap:
            14px;

    }


    .profile-setting-card {

        padding:
            20px;

        border-radius:
            19px;

    }


    .profile-setting-icon {

        width:
            44px;

        height:
            44px;

        flex-basis:
            44px;

        margin-bottom:
            15px;

    }


    .profile-setting-card h2 {

        font-size:
            20px;

    }


    .profile-password-form {

        gap:
            12px;

    }


    .profile-password-submit {

        width:
            100%;

    }


    .profile-activity-section {

        padding:
            20px;

        border-radius:
            19px;

    }


    .profile-section-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            7px;

    }


    .profile-footer {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;

    }

}


/* =========================================================
   DOLCI HANDS
   ACCOUNT.CSS
   PARTE 5/8
   DETALLE DE PEDIDO
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

.order-detail-page {

    width:
        min(
            1050px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
        65px 0 90px;

}


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

.order-detail-header {

    margin:
        0 0 35px;

}


.order-detail-back {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin:
        0 0 20px;

    color:
        #a45f49;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

}


.order-detail-back:hover {

    color:
        #7f4938;

}


.order-detail-eyebrow {

    display:
        block;

    margin:
        0 0 9px;

    color:
        #ae6b53;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


.order-detail-header h1 {

    margin:
        0 0 10px;

    color:
        #34231e;

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

    font-size:
        clamp(
            40px,
            5vw,
            58px
        );

    font-weight:
        500;

    line-height:
        1;

}


.order-detail-header p {

    margin:
        0;

    color:
        #80695d;

    font-size:
        13px;

    line-height:
        1.6;

}


/* =========================================================
   LAYOUT
   ========================================================= */

.order-detail-content {

    display:
        grid;

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

    gap:
        20px;

    align-items:
        start;

}


/* =========================================================
   BLOQUES
   ========================================================= */

.order-detail-section {

    margin:
        0 0 20px;

    padding:
        27px;

    background:
        #fffdfa;

    border:
        1px solid
        #e3d7ce;

    border-radius:
        22px;

}


.order-detail-section:last-child {

    margin-bottom:
        0;

}


.order-detail-section h2 {

    margin:
        0 0 20px;

    color:
        #49352c;

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

    font-size:
        24px;

    font-weight:
        500;

    line-height:
        1.2;

}


/* =========================================================
   RESUMEN DEL PEDIDO
   ========================================================= */

.order-detail-summary {

    display:
        grid;

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

    gap:
        12px;

}


.order-detail-summary-item {

    padding:
        15px;

    background:
        #faf4ee;

    border:
        1px solid
        #eee1d8;

    border-radius:
        14px;

}


.order-detail-summary-item span {

    display:
        block;

    margin:
        0 0 6px;

    color:
        #a58a7d;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;

}


.order-detail-summary-item strong {

    display:
        block;

    color:
        #49352c;

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.4;

    overflow-wrap:
        anywhere;

}


/* =========================================================
   ESTADO DEL PEDIDO
   ========================================================= */

.order-detail-status {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin:
        0 0 22px;

    padding:
        18px;

    background:
        #f6ebe3;

    border:
        1px solid
        #ead9cc;

    border-radius:
        16px;

}


.order-detail-status-copy {

    min-width:
        0;

}


.order-detail-status-copy span {

    display:
        block;

    margin:
        0 0 5px;

    color:
        #9c7768;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

}


.order-detail-status-copy strong {

    color:
        #4e352c;

    font-size:
        15px;

}


.order-detail-status-badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    min-height:
        31px;

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        #604236;

    color:
        #fff;

    font-size:
        10px;

    font-weight:
        700;

}


/* =========================================================
   PRODUCTOS
   ========================================================= */

.order-detail-products {

    display:
        flex;

    flex-direction:
        column;

}


.order-detail-product {

    display:
        grid;

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

    gap:
        14px;

    align-items:
        center;

    padding:
        15px 0;

    border-bottom:
        1px solid
        #eee4dc;

}


.order-detail-product:first-child {

    padding-top:
        0;

}


.order-detail-product:last-child {

    padding-bottom:
        0;

    border-bottom:
        0;

}


.order-detail-product-image {

    width:
        58px;

    height:
        58px;

    overflow:
        hidden;

    border-radius:
        13px;

    background:
        #f1e5db;

}


.order-detail-product-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.order-detail-product-info {

    min-width:
        0;

}


.order-detail-product-info h3 {

    margin:
        0 0 4px;

    color:
        #49352c;

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1.35;

}


.order-detail-product-info p {

    margin:
        0;

    color:
        #91776b;

    font-size:
        10px;

    line-height:
        1.5;

}


.order-detail-product-quantity {

    color:
        #80695d;

    font-size:
        11px;

    font-weight:
        700;

}


.order-detail-product-price {

    color:
        #49352c;

    font-size:
        13px;

    font-weight:
        700;

    white-space:
        nowrap;

}


/* =========================================================
   TOTAL
   ========================================================= */

.order-detail-total {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin:
        20px 0 0;

    padding:
        18px 0 0;

    border-top:
        1px solid
        #ded2c8;

}


.order-detail-total span {

    color:
        #80695d;

    font-size:
        12px;

    font-weight:
        700;

}


.order-detail-total strong {

    color:
        #34231e;

    font-size:
        22px;

}


/* =========================================================
   INFORMACIÓN DE ENTREGA
   ========================================================= */

.order-detail-delivery {

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

}


.order-detail-delivery-row {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    padding:
        13px 0;

    border-bottom:
        1px solid
        #eee4dc;

}


.order-detail-delivery-row:last-child {

    padding-bottom:
        0;

    border-bottom:
        0;

}


.order-detail-delivery-row span {

    color:
        #a58a7d;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

}


.order-detail-delivery-row strong {

    color:
        #49352c;

    font-size:
        12px;

    line-height:
        1.5;

}


/* =========================================================
   PANEL LATERAL
   ========================================================= */

.order-detail-sidebar {

    position:
        sticky;

    top:
        30px;

}


.order-detail-sidebar .order-detail-section {

    padding:
        23px;

}


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

.order-detail-actions {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

}


.order-detail-action {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        42px;

    padding:
        10px 15px;

    border:
        1px solid
        #d9c8bb;

    border-radius:
        999px;

    background:
        #f8eee7;

    color:
        #8e5947;

    font-size:
        11px;

    font-weight:
        700;

    text-decoration:
        none;

    text-align:
        center;

    transition:
        background .2s ease,
        color .2s ease;

}


.order-detail-action:hover {

    background:
        #604236;

    color:
        #fff;

}


.order-detail-action-primary {

    background:
        #604236;

    border-color:
        #604236;

    color:
        #fff;

}


.order-detail-action-primary:hover {

    background:
        #493128;

}


/* =========================================================
   MENSAJES
   ========================================================= */

.order-detail-message {

    margin:
        0 0 20px;

    padding:
        14px 16px;

    border:
        1px solid
        #e2d2c7;

    border-radius:
        13px;

    background:
        #f8eee7;

    color:
        #74584d;

    font-size:
        12px;

    line-height:
        1.55;

}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 800px) {

    .order-detail-page {

        width:
            calc(100% - 28px);

        padding:
            45px 0 110px;

    }


    .order-detail-content {

        grid-template-columns:
            1fr;

    }


    .order-detail-sidebar {

        position:
            static;

    }

}


/* =========================================================
   RESPONSIVE — MÓVIL
   ========================================================= */

@media (max-width: 560px) {

    .order-detail-page {

        width:
            calc(100% - 28px);

        padding:
            32px 0 110px;

    }


    .order-detail-header {

        margin-bottom:
            27px;

    }


    .order-detail-header h1 {

        font-size:
            37px;

    }


    .order-detail-header p {

        font-size:
            11px;

    }


    .order-detail-section {

        padding:
            19px;

        border-radius:
            19px;

    }


    .order-detail-section h2 {

        margin-bottom:
            17px;

        font-size:
            21px;

    }


    .order-detail-summary {

        grid-template-columns:
            1fr;

    }


    .order-detail-status {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            15px;

    }


    .order-detail-product {

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

        gap:
            11px;

    }


    .order-detail-product-image {

        width:
            48px;

        height:
            48px;

    }


    .order-detail-product-price {

        grid-column:
            2;

        margin-top:
            -5px;

        font-size:
            12px;

    }


    .order-detail-product-quantity {

        grid-column:
            2;

        margin-top:
            -7px;

    }


    .order-detail-total {

        margin-top:
            17px;

        padding-top:
            16px;

    }


    .order-detail-total strong {

        font-size:
            19px;

    }


    .order-detail-sidebar .order-detail-section {

        padding:
            19px;

    }

}


/* =========================================================
   DOLCI HANDS
   ACCOUNT.CSS
   PARTE 6/8
   DASHBOARD MOBILE
   ========================================================= */


/* =========================================================
   DASHBOARD MOBILE
   ========================================================= */

@media (max-width: 700px) {


    /* =====================================================
       PÁGINA
    ===================================================== */

    .account-page {

        width:
            calc(100% - 28px);

        max-width:
            100%;

        margin:
            0 auto;

        padding:
            28px 0 105px;

    }


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

    .account-header {

        margin:
            0 0 24px;

        text-align:
            left;

    }


    .account-header .account-eyebrow {

        margin:
            0 0 7px;

        font-size:
            9px;

        letter-spacing:
            .13em;

    }


    .account-header h1 {

        margin:
            0 0 8px;

        font-size:
            clamp(
                30px,
                8vw,
                38px
            );

        line-height:
            1;

    }


    .account-intro {

        max-width:
            330px;

        margin:
            0;

        font-size:
            11px;

        line-height:
            1.55;

    }


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

    .account-content {

        display:
            flex;

        flex-direction:
            column;

        gap:
            15px;

        width:
            100%;

    }


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

    .account-summary {

        width:
            100%;

        padding:
            18px;

        border-radius:
            21px;

        box-sizing:
            border-box;

    }


    .account-summary .account-section-header {

        margin:
            0 0 16px;

    }


    .account-summary .account-section-header h2 {

        font-size:
            23px;

    }


    .account-summary .account-section-header > p:last-child {

        margin-top:
            5px;

        font-size:
            10px;

    }


    /* =====================================================
       TARJETAS DEL RESUMEN
    ===================================================== */

    .account-cards {

        display:
            grid;

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

        gap:
            7px;

        width:
            100%;

    }


    .account-card {

        min-width:
            0;

        min-height:
            155px;

        padding:
            13px 9px;

        border-radius:
            15px;

        box-shadow:
            none;

    }


    .account-card:hover {

        transform:
            none;

        box-shadow:
            none;

    }


    /* =====================================================
       ICONOS DEL RESUMEN
    ===================================================== */

    .account-card-icon {

        width:
            39px;

        height:
            39px;

        margin:
            0 0 12px;

        border-radius:
            50%;

        font-size:
            17px;

    }


    .account-card-icon img {

        width:
            22px;

        height:
            22px;

    }


    /* =====================================================
       TÍTULOS
    ===================================================== */

    .account-card h3 {

        font-size:
            11px;

        line-height:
            1.25;

    }


    /* =====================================================
       TEXTO
    ===================================================== */

    .account-card p {

        max-width:
            100%;

        margin:
            6px 0 0;

        font-size:
            9px;

        line-height:
            1.4;

    }


    /* =====================================================
       ENLACES DEL RESUMEN
    ===================================================== */

    .account-card a {

        gap:
            4px;

        margin-top:
            auto;

        padding-top:
            10px;

        color:
            #a45f49;

        font-size:
            9px;

        font-weight:
            800;

        line-height:
            1.15;

        white-space:
            nowrap;

    }


    .account-card a span {

        font-size:
            11px;

    }


    /* =====================================================
       ACTIVIDAD
    ===================================================== */

    .account-activity {

        position:
            static;

        width:
            100%;

        padding:
            18px;

        border-radius:
            21px;

        box-sizing:
            border-box;

    }


    .account-activity .account-section-header {

        margin:
            0 0 15px;

    }


    .account-activity .account-section-header h2 {

        font-size:
            23px;

    }


    .activity-list {

        display:
            flex;

        flex-direction:
            column;

        gap:
            0;

    }


    /* =====================================================
       ACTIVIDAD INDIVIDUAL
    ===================================================== */

    .activity-item {

        position:
            relative;

        padding:
            13px 0 13px 14px;

        border-left:
            1px solid
            rgba(
                184,
                120,
                93,
                .25
            );

        border-bottom:
            1px solid
            rgba(
                91,
                64,
                52,
                .09
            );

    }


    .activity-item:last-child {

        border-bottom:
            0;

    }


    .activity-item::before {

        content:
            "";

        position:
            absolute;

        top:
            16px;

        left:
            -4px;

        width:
            7px;

        height:
            7px;

        border-radius:
            50%;

        background:
            #b8785d;

    }


    .activity-new {

        margin:
            0 0 5px;

        padding:
            3px 6px;

        font-size:
            7px;

    }


    .activity-item h3 {

        margin:
            0 0 4px;

        font-size:
            12px;

        line-height:
            1.35;

    }


    .activity-item p {

        margin:
            0;

        font-size:
            10px;

        line-height:
            1.5;

    }


    .activity-item small {

        margin:
            6px 0 0;

        font-size:
            8px;

    }


    .activity-item a {

        margin-top:
            7px;

        font-size:
            9px;

    }


    .activity-all {

        margin-top:
            15px;

        padding-top:
            14px;

        font-size:
            10px;

    }


    .activity-empty {

        margin:
            0;

        font-size:
            10px;

        line-height:
            1.5;

    }


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

    .account-footer {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            13px;

        margin-top:
            15px;

        padding:
            17px;

        border-radius:
            18px;

    }


    .account-footer-actions {

        flex-wrap:
            wrap;

        gap:
            12px;

    }


    .account-footer-actions a {

        font-size:
            10px;

    }

}


/* =========================================================
   MÓVILES MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 380px) {


    .account-page {

        width:
            calc(100% - 22px);

    }


    .account-summary {

        padding:
            15px;

    }


    .account-cards {

        gap:
            5px;

    }


    .account-card {

        min-height:
            148px;

        padding:
            11px 7px;

    }


    .account-card-icon {

        width:
            35px;

        height:
            35px;

        margin-bottom:
            10px;

        font-size:
            15px;

    }


    .account-card-icon img {

        width:
            20px;

        height:
            20px;

    }


    .account-card h3 {

        font-size:
            10px;

    }


    .account-card p {

        font-size:
            8px;

    }


    .account-card a {

        font-size:
            8px;

    }


    .account-activity {

        padding:
            15px;

    }

}


/* =========================================================
   DOLCI HANDS
   ACCOUNT.CSS
   PARTE 7/8
   NAVEGACIÓN INFERIOR MÓVIL
   ========================================================= */


/* =========================================================
   POR DEFECTO
   ========================================================= */

.mobile-bottom-navigation {

    display:
        none;

}


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

@media (max-width: 700px) {


    /* =====================================================
       BARRA
    ===================================================== */

    .mobile-bottom-navigation {

        position:
            fixed;

        left:
            0;

        right:
            0;

        bottom:
            0;

        z-index:
            9999;

        display:
            grid;

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

        align-items:
            stretch;

        width:
            100%;

        height:
            78px;

        padding:
            8px 10px
            calc(
                8px
                + env(
                    safe-area-inset-bottom
                )
            );

        box-sizing:
            border-box;

        background:
            rgba(
                255,
                253,
                250,
                .97
            );

        border-top:
            1px solid
            rgba(
                91,
                64,
                52,
                .12
            );

        box-shadow:
            0 -8px 25px
            rgba(
                66,
                43,
                34,
                .08
            );

        backdrop-filter:
            blur(14px);

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

    }


    /* =====================================================
       ENLACE
    ===================================================== */

    .mobile-bottom-link {

        position:
            relative;

        display:
            flex;

        align-items:
            center;

        justify-content:
            flex-start;

        flex-direction:
            column;

        min-width:
            0;

        min-height:
            60px;

        padding:
            2px 3px;

        border:
            0;

        background:
            transparent;

        color:
            #9a8176;

        font-size:
            9px;

        font-weight:
            700;

        line-height:
            1.1;

        text-align:
            center;

        text-decoration:
            none;

        transition:
            color .2s ease;

    }


    /* =====================================================
       CONTENEDOR DEL ICONO
    ===================================================== */

    .mobile-bottom-icon {

        position:
            relative;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            48px;

        height:
            48px;

        margin:
            0 0 4px;

        flex:
            0 0 48px;

        border-radius:
            50%;

        background:
            transparent;

        color:
            #80695d;

        line-height:
            1;

        transition:
            background .2s ease,
            color .2s ease,
            transform .2s ease;

    }


    /* =====================================================
       IMAGEN DEL ICONO
    ===================================================== */

    .mobile-bottom-icon img {

        display:
            block;

        width:
            27px;

        height:
            27px;

        max-width:
            none;

        object-fit:
            contain;

        opacity:
            .78;

        transition:
            opacity .2s ease,
            transform .2s ease;

    }


    /* =====================================================
       ICONO ACTIVO
    ===================================================== */

    .mobile-bottom-link.active {

        color:
            #8f5947;

    }


    .mobile-bottom-link.active .mobile-bottom-icon {

        background:
            #ead9cc;

        color:
            #8f5947;

        transform:
            translateY(-1px);

    }


    .mobile-bottom-link.active .mobile-bottom-icon img {

        width:
            29px;

        height:
            29px;

        opacity:
            1;

    }


    /* =====================================================
       HOVER / ACTIVE VISUAL
    ===================================================== */

    .mobile-bottom-link:active .mobile-bottom-icon {

        transform:
            scale(.94);

    }


    /* =====================================================
       BADGE
    ===================================================== */

    .mobile-bottom-badge {

        position:
            absolute;

        top:
            0;

        right:
            calc(
                50% - 25px
            );

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        min-width:
            17px;

        height:
            17px;

        padding:
            0 4px;

        box-sizing:
            border-box;

        border:
            2px solid
            #fffdfa;

        border-radius:
            999px;

        background:
            #b75d46;

        color:
            #fff;

        font-size:
            7px;

        font-weight:
            800;

        line-height:
            1;

    }


    /* =====================================================
       SEPARACIÓN DE LA PÁGINA
       PARA QUE LA BARRA NO TAPE CONTENIDO
    ===================================================== */

    .account-page,
    .profile-page,
    .orders-page,
    .account-notifications-page,
    .order-detail-page {

        padding-bottom:
            120px;

    }

}


/* =========================================================
   MÓVILES MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 380px) {

    .mobile-bottom-navigation {

        height:
            74px;

        padding-left:
            7px;

        padding-right:
            7px;

    }


    .mobile-bottom-link {

        font-size:
            8px;

    }


    .mobile-bottom-icon {

        width:
            44px;

        height:
            44px;

        flex-basis:
            44px;

    }


    .mobile-bottom-icon img {

        width:
            25px;

        height:
            25px;

    }


    .mobile-bottom-link.active
    .mobile-bottom-icon img {

        width:
            27px;

        height:
            27px;

    }

}


/* =========================================================
   DOLCI HANDS
   ACCOUNT.CSS
   PARTE 8/8
   RESPONSIVE FINAL + PROTECCIÓN
   ========================================================= */


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 701px) {

    /*
       La navegación inferior pertenece únicamente
       a la versión móvil.
    */

    .mobile-bottom-navigation {

        display:
            none !important;

    }


    /*
       El dashboard conserva su estructura de escritorio.
    */

    .account-page {

        width:
            min(
                1180px,
                92%
            );

        margin:
            0 auto;

    }


    .account-content {

        display:
            grid;

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

        gap:
            22px;

    }


    .account-cards {

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

    }


    .account-card {

        min-height:
            185px;

    }


    .account-activity {

        position:
            sticky;

        top:
            30px;

    }

}


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

@media (
    min-width: 701px
) and (
    max-width: 1050px
) {

    .account-content {

        grid-template-columns:
            1fr;

    }


    .account-activity {

        position:
            static;

    }


    .account-cards {

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

    }


    .profile-settings-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .order-detail-content {

        grid-template-columns:
            1fr;

    }


    .order-detail-sidebar {

        position:
            static;

    }

}


/* =========================================================
   MÓVIL — ESTRUCTURA GENERAL
   ========================================================= */

@media (max-width: 700px) {


    /*
       Evita que cualquier componente horizontal
       provoque scroll lateral.
    */

    .account-page,
    .profile-page,
    .orders-page,
    .account-notifications-page,
    .order-detail-page {

        max-width:
            100%;

        box-sizing:
            border-box;

    }


    /*
       Las tarjetas nunca deben superar
       el ancho disponible.
    */

    .account-card,
    .notification-card,
    .order-card,
    .profile-section,
    .profile-setting-card,
    .profile-activity-section,
    .notifications-section,
    .order-detail-section {

        max-width:
            100%;

        box-sizing:
            border-box;

    }


    /*
       Textos largos no deben romper
       la estructura.
    */

    .account-card h3,
    .account-card p,
    .notification-card h3,
    .notification-card p,
    .order-card h3,
    .profile-info-card strong {

        overflow-wrap:
            anywhere;

    }


    /*
       Imágenes nunca salen de su contenedor.
    */

    .account-card img,
    .notification-card img,
    .order-card img,
    .profile-page img,
    .order-detail-page img {

        max-width:
            100%;

    }


    /* =====================================================
       DASHBOARD
    ===================================================== */

    .account-content {

        width:
            100%;

        max-width:
            100%;

    }


    /*
       MUY IMPORTANTE:
       tres tarjetas compactas en móvil.
    */

    .account-cards {

        display:
            grid;

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

    }


    /*
       No permitir que una tarjeta
       vuelva a ocupar toda la fila.
    */

    .account-card {

        width:
            100%;

    }


    /* =====================================================
       ACTIVIDAD
    ===================================================== */

    .account-activity {

        width:
            100%;

        max-width:
            100%;

        position:
            static;

    }


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

    .mobile-bottom-navigation {

        display:
            grid !important;

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

    }


    .mobile-bottom-link {

        display:
            flex !important;

        align-items:
            center;

        justify-content:
            center;

        flex-direction:
            column;

    }


    /*
       Círculos grandes.
    */

    .mobile-bottom-icon {

        width:
            48px !important;

        height:
            48px !important;

        min-width:
            48px;

        min-height:
            48px;

        flex:
            0 0 48px;

    }


    .mobile-bottom-icon img {

        width:
            27px !important;

        height:
            27px !important;

    }


    /*
       El contenido nunca queda debajo
       de la navegación.
    */

    .account-page,
    .profile-page,
    .orders-page,
    .account-notifications-page,
    .order-detail-page {

        padding-bottom:
            120px;

    }

}


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

@media (max-width: 380px) {


    .account-cards {

        gap:
            5px;

    }


    .account-card {

        min-height:
            148px;

    }


    .mobile-bottom-navigation {

        height:
            74px;

    }


    .mobile-bottom-icon {

        width:
            44px !important;

        height:
            44px !important;

        min-width:
            44px;

        min-height:
            44px;

        flex-basis:
            44px;

    }


    .mobile-bottom-icon img {

        width:
            25px !important;

        height:
            25px !important;

    }

}


/* =========================================================
   SEGURIDAD FINAL
   ========================================================= */

@media (max-width: 700px) {

    html,
    body {

        width:
            100%;

        max-width:
            100%;

        overflow-x:
            hidden;

    }


    /*
       La navegación debe quedar por encima
       de cualquier contenido.
    */

    .mobile-bottom-navigation {

        z-index:
            99999;

    }

}



/* =========================================================
   DOLCI HANDS
   CORRECCIÓN FINAL
   ICONOS MOBILE OUTLINE / FILLED
   ========================================================= */

@media (max-width: 700px) {


    /* ================================================
       CONTENEDOR
    ================================================ */

    .mobile-bottom-icon {

        position:
            relative;

        width:
            48px !important;

        height:
            48px !important;

        min-width:
            48px !important;

        min-height:
            48px !important;

        display:
            flex !important;

        align-items:
            center;

        justify-content:
            center;

        overflow:
            hidden;

    }


    /* ================================================
       TODAS LAS IMÁGENES
    ================================================ */

    .mobile-bottom-icon img {

        width:
            30px !important;

        height:
            30px !important;

        max-width:
            none !important;

        object-fit:
            contain;

    }


    /* ================================================
       NORMAL
       SOLO OUTLINE
    ================================================ */

    .mobile-bottom-link
    .mobile-icon-outline {

        display:
            block !important;

    }


    .mobile-bottom-link
    .mobile-icon-filled {

        display:
            none !important;

    }


    /* ================================================
       ACTIVO
       SOLO FILLED
    ================================================ */

    .mobile-bottom-link.active
    .mobile-icon-outline {

        display:
            none !important;

    }


    .mobile-bottom-link.active
    .mobile-icon-filled {

        display:
            block !important;

    }


    /* ================================================
       CÍRCULO ACTIVO
    ================================================ */

    .mobile-bottom-link.active
    .mobile-bottom-icon {

        border-radius:
            50%;

        background:
            #ead9cc;

    }

}



    /* =====================================================
       BARRA INFERIOR
    ===================================================== */

    .mobile-bottom-navigation {

        height:
            88px !important;

        padding:
            8px 10px
            calc(
                8px +
                env(
                    safe-area-inset-bottom
                )
            ) !important;

    }


    /* =====================================================
       CADA OPCIÓN
    ===================================================== */

    .mobile-bottom-link {

        min-height:
            70px !important;

        padding:
            0 4px !important;

        justify-content:
            center !important;

    }


    /* =====================================================
       CÍRCULO DEL ICONO
       
       ESTE ES EL TAMAÑO DE LA REFERENCIA
    ===================================================== */

    .mobile-bottom-icon {

        width:
            60px !important;

        height:
            60px !important;

        min-width:
            60px !important;

        min-height:
            60px !important;

        flex:
            0 0 60px !important;

        margin:
            0 0 4px !important;

        display:
            flex !important;

        align-items:
            center;

        justify-content:
            center;

        border-radius:
            50%;

        background:
            transparent;

    }


    /* =====================================================
       ICONO INTERIOR
    ===================================================== */

    .mobile-bottom-icon img {

        width:
            36px !important;

        height:
            36px !important;

        min-width:
            36px !important;

        min-height:
            36px !important;

        max-width:
            36px !important;

        max-height:
            36px !important;

        object-fit:
            contain;

    }


    /* =====================================================
       ICONO OUTLINE
       NORMAL
    ===================================================== */

    .mobile-bottom-link
    .mobile-icon-outline {

        display:
            block !important;

    }


    /* =====================================================
       ICONO FILLED
       NORMAL OCULTO
    ===================================================== */

    .mobile-bottom-link
    .mobile-icon-filled {

        display:
            none !important;

    }


    /* =====================================================
       ACTIVO
       OCULTAR OUTLINE
    ===================================================== */

    .mobile-bottom-link.active
    .mobile-icon-outline {

        display:
            none !important;

    }


    /* =====================================================
       ACTIVO
       MOSTRAR FILLED
    ===================================================== */

    .mobile-bottom-link.active
    .mobile-icon-filled {

        display:
            block !important;

    }


    /* =====================================================
       CÍRCULO ACTIVO
    ===================================================== */

    .mobile-bottom-link.active
    .mobile-bottom-icon {

        background:
            #ead9cc;

        transform:
            none !important;

    }


    /* =====================================================
       TEXTO
    ===================================================== */

    .mobile-bottom-link > span:last-child {

        font-size:
            10px !important;

        line-height:
            1.1;

    }


    /* =====================================================
       BADGE
    ===================================================== */

    .mobile-bottom-badge {

        top:
            1px !important;

        right:
            calc(
                50% - 30px
            ) !important;

    }


    /* =========================================================
   DOLCI HANDS
   MOBILE BOTTOM NAVIGATION
   TAMAÑO FINAL DE ICONOS
   ========================================================= */

@media (max-width: 700px) {

    /* =====================================================
       BARRA
    ===================================================== */

    .mobile-bottom-navigation {

        height:
            82px !important;

        padding:
            7px 10px
            calc(
                7px +
                env(
                    safe-area-inset-bottom
                )
            ) !important;

    }


    /* =====================================================
       OPCIONES
    ===================================================== */

    .mobile-bottom-link {

        min-height:
            68px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            flex-start !important;

        flex-direction:
            column !important;

        gap:
            3px;

    }


    /* =====================================================
       CÍRCULO
       
       TODOS LOS BOTONES TIENEN EL MISMO TAMAÑO
    ===================================================== */

    .mobile-bottom-icon {

        width:
            60px !important;

        height:
            60px !important;

        min-width:
            60px !important;

        min-height:
            60px !important;

        flex:
            0 0 60px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        background:
            transparent !important;

        border-radius:
            50%;

    }


    /* =====================================================
       PNG
       
       EL PNG YA CONTIENE EL CÍRCULO.
       POR ESO LO HACEMOS DEL MISMO TAMAÑO.
    ===================================================== */

    .mobile-bottom-icon img {

        width:
            60px !important;

        height:
            60px !important;

        min-width:
            60px !important;

        min-height:
            60px !important;

        max-width:
            60px !important;

        max-height:
            60px !important;

        object-fit:
            contain;

        display:
            block;

    }


    /* =====================================================
       OUTLINE
    ===================================================== */

    .mobile-bottom-link
    .mobile-icon-outline {

        display:
            block !important;

    }


    /* =====================================================
       FILLED
    ===================================================== */

    .mobile-bottom-link
    .mobile-icon-filled {

        display:
            none !important;

    }


    /* =====================================================
       ACTIVO
    ===================================================== */

    .mobile-bottom-link.active
    .mobile-icon-outline {

        display:
            none !important;

    }


    .mobile-bottom-link.active
    .mobile-icon-filled {

        display:
            block !important;

    }


    /* =====================================================
       IMPORTANTE:
       NO AGREGAR OTRO CÍRCULO AL ACTIVO
    ===================================================== */

    .mobile-bottom-link.active
    .mobile-bottom-icon {

        background:
            transparent !important;

        transform:
            none !important;

    }


    /* =====================================================
       TEXTO
    ===================================================== */

    .mobile-bottom-link > span:last-child {

        font-size:
            10px !important;

        line-height:
            1.1;

        white-space:
            nowrap;

    }


    /* =====================================================
       BADGE
    ===================================================== */

    .mobile-bottom-badge {

        top:
            1px !important;

        right:
            calc(
                50% - 27px
            ) !important;

    }

}


@media (max-width: 700px) {

    .mobile-bottom-link {

        gap:
            0 !important;

    }


    .mobile-bottom-link > span:last-child {

        margin-top:
            -2px !important;

    }

}


/* =========================================================
   DOLCI HANDS
   MOBILE ACCOUNT V2
   RECUPERACIÓN DEL DISEÑO ORIGINAL
   NO AFECTA DESKTOP
========================================================= */

.account-page-mobile {

    display:
        none;

}


@media (max-width: 850px) {


    /* =====================================================
       OCULTAR DASHBOARD DESKTOP
    ===================================================== */

    .account-page-desktop {

        display:
            none !important;

    }


    /* =====================================================
       MOSTRAR DASHBOARD MOBILE
    ===================================================== */

    .account-page-mobile {

        display:
            block;

        width:
            100%;

        padding:
            22px 16px 105px;

        box-sizing:
            border-box;

        color:
            #49352c;

    }


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

    .mobile-account-header {

        margin:
            4px 0 25px;

    }


    .mobile-account-eyebrow {

        margin:
            0 0 6px;

        color:
            #a45f49;

        font-size:
            9px;

        font-weight:
            700;

        letter-spacing:
            .14em;

        text-transform:
            uppercase;

    }


    .mobile-account-header h1 {

        margin:
            0;

        color:
            #49352c;

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

        font-size:
            clamp(
                28px,
                8vw,
                35px
            );

        font-weight:
            500;

        line-height:
            1.08;

    }


    .mobile-account-welcome {

        margin:
            7px 0 0;

        color:
            #80695d;

        font-size:
            13px;

        line-height:
            1.4;

    }


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

    .mobile-account-summary {

        width:
            100%;

        margin-bottom:
            27px;

    }


    .mobile-account-section-title {

        margin-bottom:
            11px;

    }


    .mobile-account-section-title h2 {

        margin:
            0;

        color:
            #49352c;

        font-size:
            14px;

        font-weight:
            700;

    }


    /* =====================================================
       3 TARJETAS
    ===================================================== */

    .mobile-summary-cards {

        display:
            grid;

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

        gap:
            8px;

        width:
            100%;

    }


    .mobile-summary-card {

        min-width:
            0;

        min-height:
            164px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            12px 10px;

        box-sizing:
            border-box;

        border:
            1px solid
            rgba(
                73,
                53,
                44,
                .07
            );

        border-radius:
            16px;

        background:
            rgba(
                255,
                253,
                250,
                .92
            );

        box-shadow:
            0 5px 18px
            rgba(
                73,
                53,
                44,
                .07
            );

        color:
            #49352c;

        text-decoration:
            none;

    }


    .mobile-summary-card:active {

        transform:
            scale(
                .98
            );

    }


    /* =====================================================
       ICONOS DEL RESUMEN
    ===================================================== */

    .mobile-summary-icon {

        width:
            36px;

        height:
            36px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        margin-bottom:
            10px;

        border-radius:
            12px;

        overflow:
            hidden;

    }


    .mobile-summary-icon-orders {

        background:
            #f6e3d8;

    }


    .mobile-summary-icon-notifications {

        background:
            #f9e6d9;

    }


    .mobile-summary-icon-activity {

        background:
            #eee9ef;

    }


.mobile-summary-icon img {

    width:
        60px;

    height:
        60px;

    object-fit:
        contain;

    display:
        block;

}


    /* =====================================================
       TEXTOS
    ===================================================== */

    .mobile-summary-label {

        min-height:
            28px;

        color:
            #80695d;

        font-size:
            9px;

        font-weight:
            600;

        line-height:
            1.3;

    }


    .mobile-summary-number {

        display:
            block;

        margin:
            3px 0 auto;

        color:
            #49352c;

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

        font-size:
            25px;

        font-weight:
            500;

        line-height:
            1;

    }


    .mobile-summary-link {

        display:
            flex;

        align-items:
            center;

        gap:
            4px;

        margin-top:
            10px;

        color:
            #a45f49;

        font-size:
            9px;

        font-weight:
            700;

        line-height:
            1;

    }


    /* =====================================================
       ACTIVIDAD
    ===================================================== */

    .mobile-account-activity {

        width:
            100%;

    }


    .mobile-activity-header {

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            12px;

        margin-bottom:
            14px;

    }


    .mobile-activity-header h2 {

        margin:
            0;

        color:
            #49352c;

        font-size:
            14px;

        font-weight:
            700;

    }


    .mobile-activity-header a {

        flex-shrink:
            0;

        color:
            #a45f49;

        font-size:
            10px;

        font-weight:
            700;

        text-decoration:
            none;

    }


    /* =====================================================
       TIMELINE
    ===================================================== */

    .mobile-activity-timeline {

        position:
            relative;

        padding-left:
            28px;

    }


    .mobile-activity-timeline::before {

        content:
            "";

        position:
            absolute;

        top:
            7px;

        bottom:
            9px;

        left:
            7px;

        width:
            1px;

        background:
            #dfcfc5;

    }


    .mobile-activity-item {

        position:
            relative;

        display:
            flex;

        min-width:
            0;

        padding:
            0 0 20px;

    }


    .mobile-activity-item:last-child {

        padding-bottom:
            0;

    }


    /* =====================================================
       MARCADOR
    ===================================================== */

    .mobile-activity-marker {

        position:
            absolute;

        left:
            -28px;

        top:
            4px;

        width:
            15px;

        height:
            15px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        background:
            #f8f1e8;

    }


    .mobile-activity-marker span {

        width:
            8px;

        height:
            8px;

        border-radius:
            50%;

        background:
            #bd765b;

    }


    .mobile-activity-item:not(:first-child)
    .mobile-activity-marker span {

        background:
            #c8a99b;

    }


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

    .mobile-activity-content {

        min-width:
            0;

    }


    .mobile-activity-badge {

        display:
            inline-flex;

        margin-bottom:
            4px;

        padding:
            3px 7px;

        border-radius:
            999px;

        background:
            #f3dfd4;

        color:
            #a45f49;

        font-size:
            7px;

        font-weight:
            700;

        letter-spacing:
            .04em;

        text-transform:
            uppercase;

    }


    .mobile-activity-content h3 {

        margin:
            0 0 4px;

        color:
            #49352c;

        font-size:
            14px;

        font-weight:
            700;

        line-height:
            1.3;

    }


    .mobile-activity-content p {

        margin:
            0 0 5px;

        color:
            #80695d;

        font-size:
            11px;

        line-height:
            1.45;

    }


    .mobile-activity-content small {

        display:
            block;

        color:
            #ad968b;

        font-size:
            9px;

    }


    .mobile-activity-content a {

        display:
            inline-flex;

        align-items:
            center;

        gap:
            4px;

        margin-top:
            6px;

        color:
            #a45f49;

        font-size:
            10px;

        font-weight:
            700;

        text-decoration:
            none;

    }


    /* =====================================================
       SIN ACTIVIDAD
    ===================================================== */

    .mobile-activity-empty {

        padding:
            25px 10px;

        text-align:
            center;

    }


    .mobile-activity-empty span {

        display:
            block;

        margin-bottom:
            8px;

        font-size:
            24px;

    }


    .mobile-activity-empty p {

        margin:
            0;

        color:
            #80695d;

        font-size:
            12px;

    }

}


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

@media (max-width: 370px) {

    .account-page-mobile {

        padding-left:
            12px;

        padding-right:
            12px;

    }


    .mobile-summary-cards {

        gap:
            6px;

    }


    .mobile-summary-card {

        min-height:
            150px;

        padding:
            10px 8px;

    }

}


/* =========================================================
   DOLCI HANDS
   DETALLE DE PEDIDO — MOBILE FINAL
   NO AFECTA DESKTOP
========================================================= */

@media (max-width: 700px) {


    /* =====================================================
       PÁGINA
    ===================================================== */

    .order-detail-page {

        width:
            calc(100% - 28px);

        max-width:
            100%;

        margin:
            0 auto;

        padding:
            30px 0 105px;

        box-sizing:
            border-box;

    }


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

    .order-detail-header {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            10px;

        margin:
            0 0 24px;

    }


    .order-detail-header h1 {

        margin:
            0 0 8px;

        font-size:
            36px;

        line-height:
            1.02;

        overflow-wrap:
            anywhere;

    }


    .order-detail-header p {

        margin:
            0;

        max-width:
            330px;

        font-size:
            11px;

        line-height:
            1.5;

    }


    .order-detail-back {

        order:
            3;

        margin:
            2px 0 0;

        font-size:
            12px;

    }


    /* =====================================================
       ESTADO DEL PEDIDO
    ===================================================== */

    .order-status-card {

        width:
            100%;

        display:
            flex;

        align-items:
            center;

        gap:
            14px;

        margin:
            0 0 18px;

        padding:
            16px;

        box-sizing:
            border-box;

        border-radius:
            18px;

    }


    .order-status-icon {

        width:
            58px !important;

        height:
            58px !important;

        min-width:
            58px;

        max-width:
            58px;

        flex:
            0 0 58px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        overflow:
            hidden;

        border-radius:
            50%;

    }


    .order-status-icon img {

        width:
            38px !important;

        height:
            38px !important;

        max-width:
            38px !important;

        max-height:
            38px !important;

        object-fit:
            contain;

    }


    .order-status-content {

        min-width:
            0;

    }


    .order-status-content span {

        font-size:
            8px;

    }


    .order-status-content h2 {

        margin:
            4px 0 0;

        font-size:
            19px;

        line-height:
            1.2;

    }


    /* =====================================================
       INFORMACIÓN — PAGO / RESUMEN
    ===================================================== */

    .order-detail-grid {

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            14px;

        margin-bottom:
            18px;

    }


    .order-detail-card {

        width:
            100%;

        padding:
            19px;

        box-sizing:
            border-box;

        border-radius:
            18px;

    }


    .order-detail-card h2 {

        margin:
            0 0 15px;

        font-size:
            21px;

        line-height:
            1.2;

    }


    .order-info-row {

        gap:
            12px;

        padding-top:
            14px;

    }


    .order-info-row span {

        font-size:
            10px;

    }


    .order-info-row strong {

        font-size:
            11px;

        text-align:
            right;

    }


    .order-summary-total strong {

        font-size:
            26px;

    }


    /* =====================================================
       ALERTAS
    ===================================================== */

    .order-alert {

        width:
            100%;

        box-sizing:
            border-box;

        padding:
            19px;

        margin-bottom:
            16px;

        border-radius:
            18px;

    }


    .order-alert h2 {

        font-size:
            20px;

    }


    .order-alert p {

        font-size:
            11px;

        line-height:
            1.5;

    }


    /* =====================================================
       FORMULARIOS DE COMPROBANTE
    ===================================================== */

    .order-receipt-form {

        width:
            100%;

    }


    .order-receipt-form input[type="file"] {

        width:
            100%;

        box-sizing:
            border-box;

        font-size:
            11px;

    }


    .order-primary-button {

        width:
            100%;

        min-height:
            44px;

        box-sizing:
            border-box;

    }


    /* =====================================================
       PRODUCTOS
    ===================================================== */

    .order-products-section {

        width:
            100%;

        padding:
            19px;

        box-sizing:
            border-box;

        border:
            1px solid
            rgba(
                91,
                64,
                52,
                .10
            );

        border-radius:
            18px;

        background:
            #fffdfa;

    }


    .order-products-header {

        margin-bottom:
            8px;

    }


    .order-products-header h2 {

        margin:
            0;

        font-size:
            22px;

    }


    .order-product-card {

        display:
            grid;

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

        align-items:
            center;

        gap:
            12px;

        padding:
            14px 0;

    }


    .order-product-icon {

        width:
            52px;

        height:
            52px;

        flex:
            0 0 52px;

        border-radius:
            13px;

        overflow:
            hidden;

    }


    .order-product-icon img {

        width:
            100%;

        height:
            100%;

        object-fit:
            cover;

    }


    .order-product-info {

        min-width:
            0;

    }


    .order-product-info h3 {

        margin:
            0 0 3px;

        font-size:
            13px;

        line-height:
            1.3;

    }


    .order-product-info span {

        font-size:
            10px;

    }


    .order-product-price {

        align-items:
            flex-end;

        gap:
            3px;

    }


    .order-product-price span {

        font-size:
            9px;

    }


    .order-product-price strong {

        font-size:
            12px;

    }


    /* =====================================================
       PIE
    ===================================================== */

    .account-page-footer {

        padding-bottom:
            10px;

    }


    .account-back-link {

        font-size:
            12px;

    }

}


/* =========================================================
   DOLCI HANDS
   ORDER DETAIL — V3
   DISEÑO BASADO EN REFERENCIA VISUAL
   ========================================================= */


/* =========================================================
   VARIABLES LOCALES
   ========================================================= */

.order-detail-page {

    --order-bg:
        #fffaf6;

    --order-card:
        #fffdfb;

    --order-card-soft:
        #fcf4ee;

    --order-border:
        #eaded5;

    --order-border-soft:
        #f0e5de;

    --order-brown:
        #3f2b24;

    --order-brown-soft:
        #65493d;

    --order-text:
        #49352c;

    --order-muted:
        #80695d;

    --order-light-muted:
        #a58a7d;

    --order-accent:
        #b85f3f;

    --order-accent-dark:
        #98482e;

    --order-accent-soft:
        #f8e5d9;

    --order-shadow:
        0 8px 28px
        rgba(
            76,
            51,
            40,
            .055
        );

}



/* =========================================================
   PÁGINA
   ========================================================= */

.order-detail-page {

    width:
        min(
            1050px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
        58px 0 90px;

    box-sizing:
        border-box;

}



/* =========================================================
   ETIQUETAS SUPERIORES
   ========================================================= */

.order-detail-page .account-eyebrow {

    display:
        block;

    margin:
        0 0 8px;

    color:
        var(--order-accent);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .12em;

    line-height:
        1.2;

    text-transform:
        uppercase;

}



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

.order-detail-header {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        0;

    margin:
        0 0 35px;
}


.order-detail-header > div {

    min-width:
        0;

}


.order-detail-header h1 {

    margin:
        0 0 10px;

    color:
        var(--order-brown);

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

    font-size:
        clamp(
            36px,
            5vw,
            52px
        );

    font-weight:
        500;

    line-height:
        1.02;

    letter-spacing:
        -.025em;

}


.order-detail-header p {

    max-width:
        520px;

    margin:
        0;

    color:
        var(--order-muted);

    font-size:
        13px;

    line-height:
        1.65;

}


.order-detail-back {

    display:
        inline-flex;

    align-items:
        center;

    flex-shrink:
        0;

    color:
        var(--order-accent);

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        color .2s ease,
        transform .2s ease;

}


.order-detail-back:hover {

    color:
        var(--order-accent-dark);

    transform:
        translateX(-2px);

}



/* =========================================================
   TARJETA — ESTADO DEL PEDIDO
   ========================================================= */

.order-status-card {

    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    width:
        100%;

    margin:
        0 0 22px;

    padding:
        24px;

    box-sizing:
        border-box;

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

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            #fffefd 0%,
            #fff8f3 100%
        );

    box-shadow:
        var(--order-shadow);

}


.order-status-icon {

    width:
        86px;

    height:
        86px;

    min-width:
        86px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #f5e1d4;

    overflow:
        hidden;

}


.order-status-icon img {

    display:
        block;

    width:
        58px;

    height:
        58px;

    object-fit:
        contain;

}


.order-status-content {

    min-width:
        0;

}


.order-status-content span {

    display:
        block;

    margin:
        0 0 6px;

    color:
        var(--order-accent);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;

}


.order-status-content h2 {

    margin:
        0;

    color:
        var(--order-text);

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

    font-size:
        28px;

    font-weight:
        500;

    line-height:
        1.1;

}



/* =========================================================
   GRID — PAGO / RESUMEN
   ========================================================= */

.order-detail-grid {

    display:
        grid;

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

    gap:
        18px;

    width:
        100%;

    margin:
        0 0 22px;

}



/* =========================================================
   TARJETAS PRINCIPALES
   ========================================================= */

.order-detail-card {

    min-width:
        0;

    padding:
        23px;

    box-sizing:
        border-box;

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

    border-radius:
        21px;

    background:
        var(--order-card);

    box-shadow:
        var(--order-shadow);

}


.order-detail-card h2 {

    margin:
        0 0 18px;

    color:
        var(--order-text);

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

    font-size:
        23px;

    font-weight:
        500;

    line-height:
        1.15;

}



/* =========================================================
   ESTADO DEL PAGO
   ========================================================= */

.order-payment-status {

    margin:
        0 0 21px;

}


.order-status-badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        34px;

    padding:
        8px 13px;

    box-sizing:
        border-box;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1.2;

    white-space:
        nowrap;

}



/* =========================================================
   PAGO — PENDIENTE
   ========================================================= */

.order-status-badge.pending {

    border:
        1px solid
        #f3d9aa;

    background:
        #fff0d3;

    color:
        #c36b16;

}



/* =========================================================
   PAGO — COMPROBANTE EN REVISIÓN
========================================================= */

.order-status-badge.review {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        34px;

    padding:
        8px 13px 8px 34px;

    box-sizing:
        border-box;

    border:
        1px solid
        #cfdceb;

    border-radius:
        999px;

    background:
        #f1f6fb;

    color:
        #52708f;

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1.2;

    white-space:
        nowrap;
}



/* =========================================================
   ICONO — COMPROBANTE EN REVISIÓN
========================================================= */

.order-status-badge.review img {

    position:
        absolute;

    left:
        10px;

    width:
        16px;

    height:
        16px;

    object-fit:
        contain;

    display:
        block;
}



/* =========================================================
   PAGO — RECHAZADO
   ========================================================= */

.order-status-badge.danger {

    border:
        1px solid
        #efc6bf;

    background:
        #fde4e0;

    color:
        #c73c31;

}



/* =========================================================
   PAGO — CONFIRMADO
   ========================================================= */

.order-status-badge.success {

    border:
        1px solid
        #cce0bf;

    background:
        #e8f3df;

    color:
        #4d8139;

}



/* =========================================================
   INFORMACIÓN DE PAGO
   ========================================================= */

.order-info-row {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        6px;

    margin:
        0;

    padding:
        16px 0 0;

    border-top:
        1px solid
        var(--order-border-soft);

}


.order-info-row span {

    color:
        var(--order-muted);

    font-size:
        11px;

    line-height:
        1.3;

}


.order-info-row strong {

    color:
        var(--order-text);

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.4;

}



/* =========================================================
   RESUMEN DEL PEDIDO
   ========================================================= */

.order-summary-total {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.order-summary-total span {

    color:
        var(--order-muted);

    font-size:
        11px;

    line-height:
        1.3;

}


.order-summary-total strong {

    color:
        var(--order-brown);

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

    font-size:
        29px;

    font-weight:
        500;

    line-height:
        1.1;

}



/* =========================================================
   ALERTA — BASE
   ========================================================= */

.order-alert {

    width:
        100%;

    margin:
        0 0 18px;

    padding:
        20px;

    box-sizing:
        border-box;

    border-radius:
        20px;

}


.order-alert h2 {

    margin:
        0 0 10px;

    color:
        var(--order-text);

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

    font-size:
        22px;

    font-weight:
        500;

    line-height:
        1.15;

}


.order-alert p {

    margin:
        0 0 16px;

    color:
        var(--order-muted);

    font-size:
        11px;

    line-height:
        1.55;

}



/* =========================================================
   ALERTA — COMPROBANTE RECHAZADO
   ========================================================= */

.order-alert-danger {

    border:
        1px solid
        #efcdc6;

    background:
        #fff4f1;

}


.order-alert-danger p {

    color:
        #85534a;

}



/* =========================================================
   ALERTA — PENDIENTE
   ========================================================= */

.order-alert-pending {

    border:
        1px solid
        #ead8c7;

    background:
        #fff8ef;

}



/* =========================================================
   FORMULARIO DE COMPROBANTE
   ========================================================= */

.order-receipt-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.order-receipt-form label {

    color:
        var(--order-brown-soft);

    font-size:
        10px;

    font-weight:
        700;

}


.order-receipt-form input[type="file"] {

    width:
        100%;

    min-height:
        43px;

    padding:
        10px;

    box-sizing:
        border-box;

    border:
        1px dashed
        #d7bcae;

    border-radius:
        11px;

    background:
        rgba(
            255,
            255,
            255,
            .65
        );

    color:
        var(--order-muted);

    font-family:
        inherit;

    font-size:
        10px;

}


.order-primary-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        44px;

    margin-top:
        2px;

    padding:
        11px 16px;

    border:
        0;

    border-radius:
        11px;

    background:
        var(--order-accent);

    color:
        #fff;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.order-primary-button:hover {

    background:
        var(--order-accent-dark);

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(
            184,
            95,
            63,
            .18
        );

}



/* =========================================================
   PRODUCTOS
   ========================================================= */

.order-products-section {

    width:
        100%;

    margin:
        0;

    padding:
        25px;

    box-sizing:
        border-box;

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

    border-radius:
        22px;

    background:
        var(--order-card);

    box-shadow:
        var(--order-shadow);

}


.order-products-header {

    margin:
        0 0 13px;

}


.order-products-header h2 {

    margin:
        0;

    color:
        var(--order-text);

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

    font-size:
        27px;

    font-weight:
        500;

    line-height:
        1.15;

}



/* =========================================================
   LISTA DE PRODUCTOS
   ========================================================= */

.order-products-list {

    display:
        flex;

    flex-direction:
        column;

}


.order-product-card {

    display:
        grid;

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

    align-items:
        center;

    gap:
        16px;

    padding:
        15px 0;

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

}


.order-product-card:first-child {

    padding-top:
        10px;

}


.order-product-card:last-child {

    padding-bottom:
        5px;

    border-bottom:
        0;

}



/* =========================================================
   IMAGEN DEL PRODUCTO
   ========================================================= */

.order-product-icon {

    width:
        72px;

    height:
        72px;

    min-width:
        72px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border:
        1px solid
        #eee0d7;

    border-radius:
        13px;

    background:
        #f7ece4;

}


.order-product-icon img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}



/* =========================================================
   INFORMACIÓN DEL PRODUCTO
   ========================================================= */

.order-product-info {

    min-width:
        0;

}


.order-product-info h3 {

    margin:
        0 0 6px;

    color:
        var(--order-text);

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.35;

    overflow-wrap:
        anywhere;

}


.order-product-info span {

    color:
        var(--order-muted);

    font-size:
        10px;

    line-height:
        1.4;

}



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

.order-product-price {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        5px;

    white-space:
        nowrap;

}


.order-product-price span {

    color:
        var(--order-muted);

    font-size:
        10px;

}


.order-product-price strong {

    color:
        var(--order-text);

    font-size:
        13px;

    font-weight:
        700;

}



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

.order-detail-page .account-page-footer {

    margin:
        25px 0 0;

}


.order-detail-page .account-back-link {

    color:
        var(--order-accent);

    font-size:
        12px;

    text-decoration:
        none;

}



/* =========================================================
   PROTECCIÓN GENERAL
   ========================================================= */

.order-detail-page,
.order-detail-page * {

    box-sizing:
        border-box;

}


.order-detail-page img {

    max-width:
        100%;

}



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

@media (max-width: 800px) {

    .order-detail-page {

        width:
            calc(100% - 30px);

        padding:
            42px 0 110px;

    }


    .order-detail-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;

    }


    .order-detail-header h1 {

        font-size:
            clamp(
                34px,
                7vw,
                46px
            );

    }


    .order-status-card {

        padding:
            21px;

    }


    .order-status-content h2 {

        font-size:
            25px;

    }


    .order-product-card {

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

        gap:
            14px;

    }


    .order-product-icon {

        width:
            64px;

        height:
            64px;

        min-width:
            64px;

    }

}



/* =========================================================
   MÓVIL — IGUAL A LA REFERENCIA
   ========================================================= */

@media (max-width: 600px) {

    .order-detail-page {

        width:
            calc(100% - 28px);

        padding:
            32px 0 115px;

    }



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

    .order-detail-header {

        margin-bottom:
            27px;

    }


    .order-detail-header h1 {

        margin-bottom:
            11px;

        font-size:
            clamp(
                34px,
                9vw,
                43px
            );

        line-height:
            1.03;

    }


    .order-detail-header p {

        max-width:
            360px;

        font-size:
            12px;

        line-height:
            1.6;

    }


    .order-detail-back {

        order:
            -1;

        font-size:
            13px;

    }



    /* -----------------------------------------------------
       ESTADO
       ----------------------------------------------------- */

    .order-status-card {

        gap:
            18px;

        margin-bottom:
            22px;

        padding:
            21px;

        border-radius:
            20px;

    }


    .order-status-icon {

        width:
            78px;

        height:
            78px;

        min-width:
            78px;

    }


    .order-status-icon img {

        width:
            53px;

        height:
            53px;

    }


    .order-status-content span {

        font-size:
            8px;

    }


    .order-status-content h2 {

        font-size:
            23px;

    }



    /* -----------------------------------------------------
       PAGO + RESUMEN
       ----------------------------------------------------- */

    .order-detail-grid {

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

        gap:
            15px;

    }


    .order-detail-card {

        min-height:
            250px;

        padding:
            19px;

        border-radius:
            19px;

    }


    .order-detail-card h2 {

        margin-bottom:
            16px;

        font-size:
            21px;

    }


    .order-status-badge {

        max-width:
            100%;

        min-height:
            31px;

        padding:
            7px 10px;

        font-size:
            9px;

        white-space:
            normal;

        text-align:
            center;

    }


    /* =========================================================
   ICONOS DENTRO DE LOS ESTADOS DE PAGO
========================================================= */

.order-status-badge img {

    width: 16px !important;

    height: 16px !important;

    min-width: 16px !important;

    min-height: 16px !important;

    max-width: 16px !important;

    max-height: 16px !important;

    object-fit: contain !important;

    display: block !important;

    flex-shrink: 0 !important;

    margin-right: 6px !important;

}


    .order-payment-status {

        margin-bottom:
            20px;

    }


    .order-info-row {

        gap:
            5px;

        padding-top:
            15px;

    }


    .order-info-row span {

        font-size:
            10px;

    }


    .order-info-row strong {

        font-size:
            11px;

        line-height:
            1.4;

    }


    .order-summary-total {

        gap:
            7px;

    }


    .order-summary-total span {

        font-size:
            10px;

    }


    .order-summary-total strong {

        font-size:
            24px;

        line-height:
            1.1;

    }



    /* -----------------------------------------------------
       ALERTAS
       ----------------------------------------------------- */

    .order-alert {

        padding:
            18px;

        border-radius:
            18px;

    }


    .order-alert h2 {

        font-size:
            20px;

    }



    /* -----------------------------------------------------
       PRODUCTOS
       ----------------------------------------------------- */

    .order-products-section {

        margin-top:
            0;

        padding:
            20px;

        border-radius:
            20px;

    }


    .order-products-header {

        margin-bottom:
            10px;

    }


    .order-products-header h2 {

        font-size:
            24px;

    }


    .order-product-card {

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

        gap:
            13px;

        padding:
            13px 0;

    }


    .order-product-card:first-child {

        padding-top:
            8px;

    }


    .order-product-icon {

        width:
            64px;

        height:
            64px;

        min-width:
            64px;

        border-radius:
            12px;

    }


    .order-product-info h3 {

        margin-bottom:
            5px;

        font-size:
            12px;

    }


    .order-product-info span {

        font-size:
            9px;

    }


    .order-product-price {

        gap:
            4px;

    }


    .order-product-price span {

        font-size:
            8px;

    }


    .order-product-price strong {

        font-size:
            11px;

    }

}



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

@media (max-width: 420px) {

    .order-detail-page {

        width:
            calc(100% - 24px);

    }


    .order-status-card {

        gap:
            14px;

        padding:
            17px;

    }


    .order-status-icon {

        width:
            68px;

        height:
            68px;

        min-width:
            68px;

    }


    .order-status-icon img {

        width:
            46px;

        height:
            46px;

    }


    .order-status-content h2 {

        font-size:
            20px;

    }


    .order-detail-grid {

        gap:
            10px;

    }


    .order-detail-card {

        min-height:
            235px;

        padding:
            16px;

    }


    .order-detail-card h2 {

        font-size:
            19px;

    }


    .order-status-badge {

        font-size:
            8px;

        padding:
            7px 8px;

    }


    .order-summary-total strong {

        font-size:
            21px;

    }


    .order-products-section {

        padding:
            17px;

    }


    .order-product-card {

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

        gap:
            11px;

    }


    .order-product-icon {

        width:
            54px;

        height:
            54px;

        min-width:
            54px;

    }


    .order-product-price {

        grid-column:
            2;

        align-items:
            flex-start;

        margin-top:
            -4px;

    }

}



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

@media (max-width: 360px) {

    .order-detail-grid {

        grid-template-columns:
            1fr;

    }


    .order-detail-card {

        min-height:
            auto;

    }


    .order-status-card {

        align-items:
            flex-start;

    }

}


/* =========================================================
   DOLCI HANDS
   ORDER DETAIL — MOBILE V5
   REFERENCIA FINAL
   ========================================================= */


/* =========================================================
   ELIMINAR ICONO GRANDE DEL ESTADO DEL PEDIDO
   ========================================================= */

@media (max-width: 600px) {

    .order-status-icon {

        display:
            none !important;

    }


    .order-status-card {

        display:
            block;

        padding:
            0;

        margin:
            0 0 18px;

        border:
            none;

        background:
            transparent;

        box-shadow:
            none;

    }


    .order-status-content {

        width:
            100%;

    }

}



/* =========================================================
   GRID PAGO + RESUMEN
========================================================= */

@media (max-width: 600px) {

    .order-detail-grid {

        display:
            grid;

        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(0, .92fr);

        gap:
            10px;

        width:
            100%;

        align-items:
            start;

    }


    .order-detail-card {

        min-width:
            0;

        width:
            100%;

        box-sizing:
            border-box;

        padding:
            15px;

        border-radius:
            20px;

    }

}



/* =========================================================
   TITULO PAGO
========================================================= */

@media (max-width: 600px) {

    .order-detail-card h2 {

        margin:
            0 0 12px;

        font-size:
            20px;

        line-height:
            1.15;

    }

}



/* =========================================================
   ESTADO DEL PAGO
========================================================= */

@media (max-width: 600px) {

    .order-payment-status {

        display:
            block;

        margin:
            0 0 11px;

        padding:
            0;

    }


    .order-status-badge {

        display:
            inline-flex;

        align-items:
            center;

        position:
            relative;

        box-sizing:
            border-box;

        min-height:
            30px;

        padding:
            7px 10px 7px 29px;

        border-radius:
            999px;

        font-size:
            8px;

        font-weight:
            800;

        line-height:
            1.2;

    }

}



/* =========================================================
   ICONO PEQUEÑO — PENDIENTE
========================================================= */

@media (max-width: 600px) {

    .order-status-badge.pending {

        padding-left:
            15px;

        background:
            #fff0d3;

        border:
            1px solid
            #f0d39d;

        color:
            #c36b16;

    }


    .order-status-badge.pending::before {

        content:
            "";

        position:
            absolute;

        left:
            8px;

        top:
            50%;

        width:
            13px;

        height:
            13px;

        transform:
            translateY(-50%);

        background-image:
            url(
                "/static/images/icons/payment-receipt-pending.png"
            );

        background-position:
            center;

        background-repeat:
            no-repeat;

        background-size:
            contain;

    }

}



/* =========================================================
   ICONO PEQUEÑO — COMPROBANTE EN REVISIÓN
========================================================= */

@media (max-width: 600px) {

.order-status-badge.pending:has(
+ *
    ) {

        /* reservado */

    }

}



/* =========================================================
   PAGO CONFIRMADO
========================================================= */

@media (max-width: 600px) {

    .order-status-badge.success {

        padding-left:
            15px;

        background:
            #e8f3df;

        border:
            1px solid
            #cce0bf;

        color:
            #4d8139;

    }


    .order-status-badge.success::before {

        content:
            "";

        position:
            absolute;

        left:
            8px;

        top:
            50%;

        width:
            13px;

        height:
            13px;

        transform:
            translateY(-50%);

        background-image:
            url(
                "/static/images/icons/payment-confirmed.png"
            );

        background-position:
            center;

        background-repeat:
            no-repeat;

        background-size:
            contain;

    }

}



/* =========================================================
   PAGO RECHAZADO
========================================================= */

@media (max-width: 600px) {

    .order-status-badge.danger {

        padding-left:
            15px;

        background:
            #fde4e0;

        border:
            1px solid
            #efc6bf;

        color:
            #c73c31;
    }



    .order-status-badge.danger::before {

        content:
            "";

        position:
            absolute;

        left:
            5px;

        top:
            50%;

        width:
            13px;

        height:
            13px;

        transform:
            translateY(-50%);

        background-image:
            url(
                "/static/images/icons/payment-receipt-rejected.png"
            );

        background-position:
            center;

        background-repeat:
            no-repeat;

        background-size:
            contain;
    }

}



/* =========================================================
   FORMA DE PAGO
========================================================= */

@media (max-width: 600px) {

    .order-info-row {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            flex-start;

        gap:
            3px;

        margin:
            0;

        padding:
            11px 0 0;

        border-top:
            1px solid
            #eee1d8;

    }


    .order-info-row span {

        color:
            #92776a;

        font-size:
            8px;

        line-height:
            1.3;

    }


    .order-info-row strong {

        color:
            #49352c;

        font-size:
            10px;

        font-weight:
            700;

        line-height:
            1.35;

    }

}



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

@media (max-width: 600px) {

    .order-detail-grid
    .order-detail-card:last-child {

        padding:
            15px;

    }


    .order-detail-grid
    .order-detail-card:last-child h2 {

        margin:
            0 0 13px;

        font-size:
            19px;

    }


    .order-summary-total {

        display:
            flex;

        flex-direction:
            column;

        gap:
            5px;

    }


    .order-summary-total span {

        color:
            #92776a;

        font-size:
            8px;

    }


    .order-summary-total strong {

        color:
            #49352c;

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

        font-size:
            21px;

        font-weight:
            500;

        line-height:
            1.1;

    }

}



/* =========================================================
   ELIMINAR ESPACIOS EXCESIVOS DEL MENSAJE
   DE TRANSFERENCIA
========================================================= */

@media (max-width: 600px) {

    .order-alert-pending {

        margin:
            12px 0 18px;

        padding:
            16px;

        border-radius:
            18px;

    }


    .order-alert-pending h2 {

        margin:
            0 0 8px;

        font-size:
            19px;

        line-height:
            1.2;

    }


    .order-alert-pending p {

        margin:
            0 0 12px;

        font-size:
            11px;

        line-height:
            1.45;

    }

}



/* =========================================================
   FORMULARIO DE COMPROBANTE
========================================================= */

@media (max-width: 600px) {

    .order-receipt-form {

        gap:
            8px;

    }


    .order-receipt-form label {

        font-size:
            9px;

    }


    .order-receipt-form input[type="file"] {

        width:
            100%;

        padding:
            9px;

        font-size:
            9px;

        border-radius:
            11px;

    }


    .order-primary-button {

        width:
            100%;

        margin-top:
            3px;

        padding:
            12px 14px;

        border-radius:
            11px;

        font-size:
            10px;

    }

}



/* =========================================================
   PANTALLAS MUY PEQUEÑAS
========================================================= */

@media (max-width: 380px) {

    .order-detail-grid {

        gap:
            8px;

    }


    .order-detail-card {

        padding:
            13px;

        border-radius:
            18px;

    }


    .order-detail-card h2 {

        font-size:
            18px;

    }


    .order-status-badge {

        font-size:
            7.5px;

    }


    .order-info-row strong {

        font-size:
            9px;

    }


    .order-summary-total strong {

        font-size:
            19px;

    }

}


/* =========================================================
   ORDER DETAIL — MOBILE
   OCULTAR ICONOS GRANDES DE ESTADO
   ========================================================= */

@media (max-width: 600px) {

    /* Bolsa grande del estado del pedido */
    .order-status-icon {

        display:
            none !important;

    }


    /* Iconos grandes del estado del pago */
    .order-payment-state-icon {

        display:
            none !important;

    }

}



/* =========================================================
   DOLCI HANDS
   ORDER DETAIL
   MODAL — COMPROBANTE DE PAGO
   ========================================================= */


/* =========================================================
   BLOQUEAR SCROLL DEL FONDO
   ========================================================= */

/* =========================================================
   BLOQUEAR COMPLETAMENTE EL SCROLL DE LA PÁGINA
   CUANDO EL MODAL ESTÁ ABIERTO
   ========================================================= */

html:has(
    body.receipt-modal-open
) {

    overflow:
        hidden;

}


body.receipt-modal-open {

    overflow:
        hidden;

    position:
        fixed;

    width:
        100%;

    height:
        100%;

}



/* =========================================================
   CONTENEDOR DEL MODAL
   ========================================================= */

.receipt-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        99999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    box-sizing:
        border-box;

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

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

}



/* =========================================================
   MODAL ABIERTO
   ========================================================= */

.receipt-modal[aria-hidden="false"] {

    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;

}



/* =========================================================
   FONDO
   ========================================================= */

.receipt-modal-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            45,
            31,
            25,
            .48
        );

    backdrop-filter:
        blur(
            7px
        );

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

}



/* =========================================================
   VENTANA
   ========================================================= */

.receipt-modal-window {

    position:
        relative;

    z-index:
        1;

    width:
        min(
            460px,
            100%
        );

    max-height:
        min(
            720px,
            calc(
                100vh - 40px
            )
        );

    overflow:
        auto;

    padding:
        24px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(
            73,
            53,
            44,
            .08
        );

    border-radius:
        26px;

    background:
        #fffaf5;

    box-shadow:
        0 24px 70px
        rgba(
            73,
            53,
            44,
            .22
        );

}



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

.receipt-modal-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        18px;

}



.receipt-modal-header .account-eyebrow {

    display:
        block;

    margin:
        0 0 5px;

    color:
        #a45f49;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}



.receipt-modal-header h2 {

    margin:
        0;

    color:
        #49352c;

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

    font-size:
        25px;

    font-weight:
        500;

    line-height:
        1.1;

}



/* =========================================================
   BOTÓN CERRAR
   ========================================================= */

.receipt-modal-close {

    flex:
        0 0 auto;

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        1px solid
        rgba(
            73,
            53,
            44,
            .08
        );

    border-radius:
        50%;

    background:
        #f7eee7;

    color:
        #80695d;

    font-size:
        21px;

    font-weight:
        400;

    line-height:
        1;

    cursor:
        pointer;

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

}



.receipt-modal-close:hover {

    transform:
        scale(
            1.05
        );

    background:
        #f1e4db;

}



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

.receipt-modal-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;

}



/* =========================================================
   PREVISUALIZACIÓN
   ========================================================= */

.receipt-preview {

    width:
        100%;

    min-height:
        300px;

    max-height:
        430px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    box-sizing:
        border-box;

    border:
        1px dashed
        #d9c5b9;

    border-radius:
        20px;

    background:
        #f8f0e9;

}



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

.receipt-preview-empty {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    padding:
        30px;

    text-align:
        center;

}



.receipt-preview-empty span {

    color:
        #80695d;

    font-size:
        12px;

    font-weight:
        700;

}



.receipt-preview-empty small {

    color:
        #ad968b;

    font-size:
        9px;

}



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

.receipt-preview-image {

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-height:
        430px;

    object-fit:
        contain;

}



/* =========================================================
   NOMBRE DEL ARCHIVO
   ========================================================= */

.receipt-file-name {

    min-height:
        15px;

    overflow:
        hidden;

    color:
        #92776a;

    font-size:
        9px;

    font-weight:
        600;

    line-height:
        1.3;

    text-align:
        center;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}



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

.receipt-modal-actions {

    display:
        grid;

    grid-template-columns:
        1fr 1.2fr;

    gap:
        9px;

}



/* =========================================================
   BOTÓN SECUNDARIO
   ========================================================= */

.receipt-secondary-button {

    min-height:
        44px;

    padding:
        10px 12px;

    border:
        1px solid
        #decac0;

    border-radius:
        13px;

    background:
        #fffaf5;

    color:
        #80695d;

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1.2;

    cursor:
        pointer;

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

}



.receipt-secondary-button:hover {

    background:
        #f8eee7;

}



.receipt-secondary-button:active {

    transform:
        scale(
            .98
        );

}



/* =========================================================
   BOTÓN PRINCIPAL
   ========================================================= */

.receipt-primary-button {

    min-height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    padding:
        10px 14px;

    border:
        0;

    border-radius:
        13px;

    background:
        #bd765b;

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1.2;

    cursor:
        pointer;

    transition:
        transform 160ms ease,
        opacity 160ms ease;

}



.receipt-primary-button:hover {

    transform:
        translateY(
            -1px
        );

}



.receipt-primary-button:disabled {

    opacity:
        .45;

    cursor:
        not-allowed;

    transform:
        none;

}



/* =========================================================
   ESTADO DE ENVÍO
   ========================================================= */

.receipt-primary-button.is-loading {

    opacity:
        .7;

    cursor:
        wait;

}



/* =========================================================
   RESPONSIVE — MÓVIL
   ========================================================= */

@media (max-width: 600px) {

    .receipt-modal {

        align-items:
            flex-end;

        padding:
            0;

    }


    .receipt-modal-window {

        width:
            100%;

        max-height:
            calc(
                100vh - 18px
            );

        padding:
            20px 16px;

        border-radius:
            26px 26px 0 0;

    }


    .receipt-modal-header {

        margin-bottom:
            14px;

    }


    .receipt-modal-header h2 {

        font-size:
            22px;

    }


    .receipt-preview {

        min-height:
            250px;

        max-height:
            52vh;

        border-radius:
            18px;

    }


    .receipt-preview-image {

        max-height:
            52vh;

    }


    .receipt-modal-actions {

        grid-template-columns:
            1fr;

        gap:
            8px;

    }


    .receipt-secondary-button,
    .receipt-primary-button {

        min-height:
            46px;

        font-size:
            10px;

    }

}



/* =========================================================
   MÓVILES MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 380px) {

    .receipt-modal-window {

        padding:
            17px 13px;

    }


    .receipt-modal-header h2 {

        font-size:
            20px;

    }


    .receipt-preview {

        min-height:
            220px;

    }

}


/* =========================================================
   DOLCI HANDS
   ORDER DETAIL
   RECEIPT FLOW V2
   ========================================================= */


/* =========================================================
   BLOQUEAR PÁGINA
========================================================= */

html:has(
    body.receipt-modal-open
) {

    overflow:
        hidden;

}


body.receipt-modal-open {

    overflow:
        hidden;

    position:
        fixed;

    width:
        100%;

    height:
        100%;

}



/* =========================================================
   BARRA INFERIOR
========================================================= */

body.receipt-modal-open
.mobile-bottom-navigation {

    transform:
        translateY(
            110%
        );

    opacity:
        0;

    pointer-events:
        none;

}



/* =========================================================
   MODAL PRINCIPAL
========================================================= */

.receipt-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        99999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    box-sizing:
        border-box;

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

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

}



/* =========================================================
   MODAL ABIERTO
========================================================= */

.receipt-modal[aria-hidden="false"] {

    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;

}



/* =========================================================
   FONDO MODAL
========================================================= */

.receipt-modal-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            45,
            31,
            25,
            .48
        );

    backdrop-filter:
        blur(
            7px
        );

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

}



/* =========================================================
   VENTANA
========================================================= */

.receipt-modal-window {

    position:
        relative;

    z-index:
        1;

    width:
        min(
            460px,
            100%
        );

    max-height:
        calc(
            100dvh - 40px
        );

    overflow:
        hidden;

    padding:
        24px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(
            73,
            53,
            44,
            .08
        );

    border-radius:
        26px;

    background:
        #fffaf5;

    box-shadow:
        0 24px 70px
        rgba(
            73,
            53,
            44,
            .22
        );

    transform:
        translateY(
            0
        );

    transition:
        transform 240ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );

}



/* =========================================================
   MODAL BAJANDO
========================================================= */

.receipt-modal.is-viewing-image
.receipt-modal-window {

    transform:
        translateY(
            110%
        );

}



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

.receipt-modal-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        16px;

}



.receipt-modal-header .account-eyebrow {

    display:
        block;

    margin:
        0 0 5px;

    color:
        #a45f49;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}



.receipt-modal-header h2 {

    margin:
        0;

    color:
        #49352c;

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

    font-size:
        25px;

    font-weight:
        500;

    line-height:
        1.1;

}



/* =========================================================
   CERRAR MODAL
========================================================= */

.receipt-modal-close {

    width:
        34px;

    height:
        34px;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        1px solid
        rgba(
            73,
            53,
            44,
            .08
        );

    border-radius:
        50%;

    background:
        #f7eee7;

    color:
        #80695d;

    font-size:
        21px;

    line-height:
        1;

    cursor:
        pointer;

}



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

.receipt-modal-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}



/* =========================================================
   PREVIEW COMPACTO
========================================================= */

.receipt-preview {

    width:
        100%;

    height:
        190px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    box-sizing:
        border-box;

    border:
        1px dashed
        #d9c5b9;

    border-radius:
        18px;

    background:
        #f8f0e9;

}



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

.receipt-preview-image {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        contain;

}



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

.receipt-preview-empty {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    color:
        #80695d;

    text-align:
        center;

}



.receipt-preview-empty span {

    font-size:
        11px;

    font-weight:
        700;

}



.receipt-preview-empty small {

    color:
        #ad968b;

    font-size:
        9px;

}



/* =========================================================
   BOTÓN VER IMAGEN
========================================================= */

.receipt-view-image-button {

    width:
        100%;

    min-height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    padding:
        9px 12px;

    border:
        1px solid
        #decac0;

    border-radius:
        12px;

    background:
        #fffaf5;

    color:
        #a45f49;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

}



.receipt-view-image-button:disabled {

    opacity:
        .35;

    cursor:
        not-allowed;

}



/* =========================================================
   ARCHIVO
========================================================= */

.receipt-file-name {

    min-height:
        14px;

    overflow:
        hidden;

    color:
        #92776a;

    font-size:
        9px;

    text-align:
        center;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}



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

.receipt-modal-actions {

    display:
        grid;

    grid-template-columns:
        1fr 1.2fr;

    gap:
        8px;

}



.receipt-secondary-button,
.receipt-primary-button {

    min-height:
        44px;

    border-radius:
        13px;

    font-size:
        9px;

    font-weight:
        800;

    cursor:
        pointer;

}



.receipt-secondary-button {

    padding:
        9px 12px;

    border:
        1px solid
        #decac0;

    background:
        #fffaf5;

    color:
        #80695d;

}



.receipt-primary-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    padding:
        9px 12px;

    border:
        0;

    background:
        #bd765b;

    color:
        #ffffff;

}



.receipt-primary-button:disabled {

    opacity:
        .4;

    cursor:
        not-allowed;

}



/* =========================================================
   VISOR DE IMAGEN
========================================================= */

.receipt-image-viewer {

    position:
        fixed;

    inset:
        0;

    z-index:
        100000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        16px;

    box-sizing:
        border-box;

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

    background:
        #49352c;

    transform:
        translateY(
            100%
        );

    transition:
        transform 220ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        ),
        opacity 180ms ease,
        visibility 180ms ease;

}



/* =========================================================
   VISOR ABIERTO
========================================================= */

.receipt-image-viewer[aria-hidden="false"] {

    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;

    transform:
        translateY(
            0
        );

}



/* =========================================================
   FONDO DEL VISOR
========================================================= */

.receipt-image-viewer-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            35,
            24,
            20,
            .96
        );

}



/* =========================================================
   VENTANA DEL VISOR
========================================================= */

.receipt-image-viewer-window {

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

}



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

.receipt-image-viewer-header {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        8px 4px 14px;

    color:
        #fffaf5;

    font-size:
        12px;

    font-weight:
        700;

}



.receipt-image-viewer-close {

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .15
        );

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    color:
        #ffffff;

    font-size:
        21px;

    line-height:
        1;

    cursor:
        pointer;

}



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

.receipt-image-viewer-content {

    flex:
        1 1 auto;

    min-height:
        0;

    overflow:
        auto;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        center;

    padding:
        10px 0 20px;

    box-sizing:
        border-box;

    overscroll-behavior:
        contain;

    -webkit-overflow-scrolling:
        touch;

}



.receipt-image-viewer-content img {

    display:
        block;

    width:
        auto;

    max-width:
        100%;

    height:
        auto;

    max-height:
        none;

    object-fit:
        contain;

}



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

@media (max-width: 600px) {


    .receipt-modal {

        align-items:
            flex-end;

        padding:
            0;

    }


    .receipt-modal-window {

        width:
            100%;

        max-height:
            calc(
                100dvh - 18px
            );

        padding:
            20px 16px;

        border-radius:
            26px 26px 0 0;

    }


    .receipt-preview {

        height:
            170px;

    }


    .receipt-modal-actions {

        grid-template-columns:
            1fr;

    }


    .receipt-secondary-button,
    .receipt-primary-button {

        min-height:
            46px;

        font-size:
            10px;

    }


    .receipt-image-viewer {

        padding:
            10px;

    }


    .receipt-image-viewer-content {

        justify-content:
            center;

    }

}



/* =========================================================
   MÓVILES MUY PEQUEÑOS
========================================================= */

@media (max-width: 380px) {


    .receipt-modal-window {

        padding:
            17px 13px;

    }


    .receipt-modal-header h2 {

        font-size:
            21px;

    }


    .receipt-preview {

        height:
            150px;

    }

}


/* =========================================================
   ANIMACIÓN DE LA BARRA INFERIOR
========================================================= */

.mobile-bottom-navigation {

    transition:
        transform 350ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        ),
        opacity 350ms ease;

}



/* =========================================================
   ORDER DETAIL — CABECERA MOBILE V2
========================================================= */

@media (max-width: 800px) {


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

    .order-detail-header {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        margin:
            0 0 28px;

    }



    /* =====================================================
       VOLVER A MIS PEDIDOS
    ===================================================== */

    .order-detail-back {

        display:
            inline-flex;

        align-items:
            center;

        align-self:
            flex-start;

        gap:
            5px;

        margin:
            0 0 24px;

        padding:
            0;

        color:
            #a45f49;

        font-size:
            11px;

        font-weight:
            700;

        line-height:
            1;

        text-decoration:
            none;

    }


    .order-detail-back span {

        font-size:
            14px;

        line-height:
            1;

    }



    /* =====================================================
       BLOQUE IDENTIDAD DEL PEDIDO
    ===================================================== */

    .order-detail-heading {

        position:
            relative;

        padding-left:
            14px;

        border-left:
            2px solid
            #bd765b;

    }



    /* =====================================================
       EYEBROW
    ===================================================== */

    .order-detail-heading
    .account-eyebrow {

        display:
            block;

        margin:
            0 0 7px;

        color:
            #a45f49;

        font-size:
            9px;

        font-weight:
            800;

        letter-spacing:
            .15em;

        line-height:
            1.2;

        text-transform:
            uppercase;

    }



    /* =====================================================
       TÍTULO
    ===================================================== */

    .order-detail-heading h1 {

        display:
            flex;

        flex-direction:
            column;

        gap:
            1px;

        margin:
            0;

        color:
            #49352c;

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

        font-size:
            clamp(
                30px,
                8.5vw,
                38px
            );

        font-weight:
            500;

        line-height:
            1.02;

    }



    .order-detail-heading-label {

        color:
            #49352c;

        font-size:
            .58em;

        font-weight:
            600;

        letter-spacing:
            .01em;

        line-height:
            1;

    }



    .order-detail-heading-number {

        color:
            #49352c;

        white-space:
            nowrap;

    }



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

    .order-detail-heading p {

        max-width:
            330px;

        margin:
            10px 0 0;

        color:
            #80695d;

        font-size:
            11px;

        line-height:
            1.5;

    }



    /* =====================================================
       BOTÓN COMPROBANTE
    ===================================================== */

/* =====================================================
   BOTÓN COMPROBANTE
===================================================== */

.order-receipt-trigger {

    width:
        100%;

    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    box-sizing:
        border-box;

    margin-top:
        10px;

    padding:
        9px 14px;

    border:
        none;

    border-radius:
        11px;

    background:
        #bd765b;

    color:
        #fffaf5;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1;

    cursor:
        pointer;

    box-shadow:
        0 4px 12px
        rgba(
            189,
            118,
            91,
            .16
        );

    transition:
        transform 160ms ease,
        box-shadow 160ms ease;

}



    .order-receipt-trigger:active {

        transform:
            scale(
                .98
            );

        box-shadow:
            0 3px 9px
            rgba(
                189,
                118,
                91,
                .15
            );

    }



    /* =====================================================
       ICONO DEL BOTÓN
    ===================================================== */

    .order-receipt-trigger-icon {

        width:
            30px;

        height:
            30px;

        flex:
            0 0 17px;

        display:
            block;

        object-fit:
            contain;

    }



    /* =====================================================
       TARJETAS PAGO + RESUMEN
    ===================================================== */

    .order-detail-grid {

        align-items:
            stretch;

        gap:
            12px;

    }



    .order-detail-card {

        border-radius:
            18px;

    }



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

    .order-summary-card {

        min-width:
            0;

    }



    .order-summary-card h2 {

        margin-bottom:
            18px;

    }



    .order-summary-total strong {

        display:
            block;

        margin-top:
            5px;

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

        font-size:
            25px;

        font-weight:
            500;

        line-height:
            1.05;

    }



}



/* =========================================================
   PEDIDOS MUY PEQUEÑOS
========================================================= */

@media (max-width: 380px) {


    .order-detail-heading {

        padding-left:
            11px;

    }


    .order-detail-heading h1 {

        font-size:
            29px;

    }


    .order-detail-heading p {

        font-size:
            10px;

    }


}


@media (max-width: 800px) {

    .order-payment-state-icon {

        width:
            82px;

        height:
            82px;

        margin:
            8px auto 10px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        border-radius:
            50%;

    }


    .order-payment-state-icon img {

        width:
            58px;

        height:
            58px;

        object-fit:
            contain;

    }

}



/* =========================================================
   AJUSTE DEFINITIVO — ICONO DEL ESTADO DE PAGO
========================================================= */

.order-detail-page .order-payment-state-icon {

    width: 150px !important;
    height: 150px !important;

    min-width: 150px !important;
    min-height: 150px !important;

    max-width: 150px !important;
    max-height: 150px !important;

    margin: 10px auto 12px !important;

    padding: 0 !important;

    display: flex !important;

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

    box-sizing: border-box !important;

    border-radius: 50% !important;

    overflow: hidden !important;

}


/* =========================================================
   IMAGEN DEL RELOJ
========================================================= */

.order-detail-page
.order-payment-state-icon
img {

    width: 90px !important;
    height: 90px !important;

    max-width: 90px !important;
    max-height: 90px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    object-fit: contain !important;

    display: block !important;

}


/* =========================================================
   SOLO MOBILE
========================================================= */

@media (max-width: 800px) {

    .order-detail-page .order-payment-state-icon {

        width: 125px !important;
        height: 125px !important;

        min-width: 125px !important;
        min-height: 125px !important;

        max-width: 125px !important;
        max-height: 125px !important;

    }


    .order-detail-page
    .order-payment-state-icon
    img {

        width: 75px !important;
        height: 75px !important;

        max-width: 75px !important;
        max-height: 75px !important;

    }

}



/* =========================================================
   ESTADO PENDIENTE — UN SOLO ICONO
========================================================= */

.order-status-badge.pending::before,
.order-status-badge.pending::after {

    content: none !important;

    display: none !important;

}

.order-status-badge.pending img {

    width: 16px !important;
    height: 16px !important;

    min-width: 16px !important;
    min-height: 16px !important;

    max-width: 16px !important;
    max-height: 16px !important;

    display: block !important;

    object-fit: contain !important;

    flex-shrink: 0 !important;

    margin: 0 6px 0 0 !important;

}


/* =========================================================
   DOLCI HANDS
   RESUMEN — DISEÑO COMPACTO
   ========================================================= */

.order-summary-card {

    display:
        flex;

    flex-direction:
        column;

    box-sizing:
        border-box;

}


/* ---------------------------------------------------------
   TÍTULO
--------------------------------------------------------- */

.order-summary-card h2 {

    margin:
        6px 0 24px;

    color:
        #3f2b24;

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

    font-size:
        27px;

    font-weight:
        500;

    line-height:
        1.15;

}


/* ---------------------------------------------------------
   TOTAL
--------------------------------------------------------- */

.order-summary-total {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    margin:
        0;

    padding:
        0;

}


.order-summary-total span {

    color:
        #92776a;

    font-size:
        10px;

    font-weight:
        500;

    line-height:
        1.4;

}


.order-summary-total strong {

    display:
        block;

    margin:
        0;

    color:
        #49352c;

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

    font-size:
        28px;

    font-weight:
        500;

    line-height:
        1.1;

    letter-spacing:
        -.02em;

}


/* ---------------------------------------------------------
   SEPARACIÓN VISUAL DEL PRECIO
--------------------------------------------------------- */

.order-summary-total::after {

    content:
        "";

    display:
        block;

    width:
        100%;

    height:
        1px;

    margin:
        17px 0 14px;

    background:
        rgba(
            91,
            64,
            52,
            .10
        );

}


/* ---------------------------------------------------------
   VER DESGLOSE
--------------------------------------------------------- */

.order-summary-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    width:
        fit-content;

    margin:
        0;

    color:
        #b96549;

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1.2;

    text-decoration:
        none;

    transition:
        color .2s ease,
        gap .2s ease;

}


.order-summary-link span {

    display:
        inline-block;

    transition:
        transform .2s ease;

}


.order-summary-link:hover {

    color:
        #8f4934;

}


.order-summary-link:hover span {

    transform:
        translateX(3px);

}



/* =========================================================
   DOLCI HANDS
   ORDER DETAIL — RESUMEN
   COMPOSICIÓN VISUAL
========================================================= */


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

.order-detail-page
.order-summary-card {

    display:
        flex;

    flex-direction:
        column;

    box-sizing:
        border-box;

}


/* =========================================================
   TÍTULO
========================================================= */

.order-detail-page
.order-summary-card h2 {

    margin:
        6px 0 28px;

    color:
        #49352c;

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

    font-size:
        27px;

    font-weight:
        500;

    line-height:
        1.15;

}


/* =========================================================
   BLOQUE DEL TOTAL
========================================================= */

.order-detail-page
.order-summary-total {

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

    margin:
        0;

}


/* =========================================================
   ETIQUETA
========================================================= */

.order-detail-page
.order-summary-total span {

    color:
        #92776a;

    font-size:
        10px;

    font-weight:
        500;

    line-height:
        1.4;

}


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

.order-detail-page
.order-summary-total strong {

    display:
        block;

    margin:
        0;

    color:
        #49352c;

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

    font-size:
        29px;

    font-weight:
        500;

    line-height:
        1.08;

    letter-spacing:
        -.02em;

}


/* =========================================================
   LÍNEA DECORATIVA
========================================================= */

.order-detail-page
.order-summary-total::after {

    content:
        "";

    display:
        block;

    width:
        100%;

    height:
        1px;

    margin:
        18px 0 0;

    background:
        rgba(
            91,
            64,
            52,
            .10
        );

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .order-detail-page
    .order-summary-card {

        min-height:
            260px;

    }


    .order-detail-page
    .order-summary-card h2 {

        margin-bottom:
            30px;

        font-size:
            26px;

    }


    .order-detail-page
    .order-summary-total {

        gap:
            6px;

    }


    .order-detail-page
    .order-summary-total span {

        font-size:
            10px;

    }


    .order-detail-page
    .order-summary-total strong {

        font-size:
            27px;

    }

}



/* =========================================================
   DESKTOP — BOTÓN COMPROBANTE
========================================================= */

@media (min-width: 801px) {

    .order-detail-page .order-receipt-trigger {

        width:
            100%;

        min-height:
            42px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            8px;

        box-sizing:
            border-box;

        margin-top:
            10px;

        padding:
            9px 14px;

        border:
            none;

        border-radius:
            11px;

        background:
            #bd765b;

        color:
            #fffaf5;

        font-family:
            inherit;

        font-size:
            10px;

        font-weight:
            800;

        line-height:
            1;

        cursor:
            pointer;

        box-shadow:
            0 4px 12px
            rgba(
                189,
                118,
                91,
                .16
            );

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


    .order-detail-page
    .order-receipt-trigger-icon {

        width:
            25px !important;

        height:
            25px !important;

        min-width:
            25px !important;

        min-height:
            25px !important;

        max-width:
            17px !important;

        max-height:
            17px !important;

        flex:
            0 0 17px !important;

        display:
            block !important;

        object-fit:
            contain !important;
    }


    .order-detail-page
    .order-receipt-trigger:active {

        transform:
            scale(
                .98
            );

        box-shadow:
            0 3px 9px
            rgba(
                189,
                118,
                91,
                .15
            );
    }

}



/* =========================================================
   COMPROBANTE EN REVISIÓN
========================================================= */

.order-payment-review-action {

    width:
        100%;

    margin-top:
        14px;

}


/* =========================================================
   RECHAZO — MOTIVO DEL RECHAZO
========================================================= */

.order-payment-rejection {

    width:
        100%;

    margin:
        14px 0 0;

}


.order-payment-rejection-label {

    display:
        block;

    margin:
        0 0 6px;

    color:
        #80695d;

    font-size:
        10px;

    font-weight:
        600;

    line-height:
        1.3;
}


.order-payment-rejection-box {

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        10px 12px;

    border:
        1px solid
        #efc6bf;

    border-radius:
        9px;

    background:
        #fde4e0;

    color:
        #71483e;

    font-size:
        10px;

    font-weight:
        500;

    line-height:
        1.45;

    overflow-wrap:
        anywhere;
}



@media (max-width: 600px) {

    .order-payment-rejection {

        margin:
            12px 0 0;

    }


    .order-payment-rejection-label {

        margin:
            0 0 5px;

        font-size:
            8px;
    }


    .order-payment-rejection-box {

        padding:
            9px 10px;

        border-radius:
            8px;

        font-size:
            10px;

        line-height:
            1.4;
    }

}


/* =========================================================
   BOTÓN VER COMPROBANTE
========================================================= */

.order-receipt-view-button {

    width:
        100%;

    min-height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    box-sizing:
        border-box;

    padding:
        9px 14px;

    border:
        1px solid
        #c9795c;

    border-radius:
        10px;

    background:
        transparent;

    color:
        #a9573e;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;

}


.order-receipt-view-button:hover {

    background:
        #fff4ee;

}


.order-receipt-view-button:active {

    transform:
        scale(.98);

}


/* =========================================================
   ICONO DEL BOTÓN
========================================================= */

.order-receipt-view-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        25px;

    height:
        25px;

}


.order-receipt-view-icon img {

    width:
        30px;

    height:
        30px;

    object-fit:
        contain;

    display:
        block;

}


/* =========================================================
   MENSAJE
========================================================= */

.order-payment-review-message {

    margin:
        10px 0 0;

    color:
        #80695d;

    font-size:
        10px;

    line-height:
        1.45;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .order-payment-review-action {

        margin-top:
            8px;

    }


    .order-receipt-view-button {

        min-height:
            39px;

        padding:
            9px 12px;

        border-radius:
            15px;

        font-size:
            10px;

    }


    .order-payment-review-message {

        margin-top:
            9px;

        font-size:
            10px;

        line-height:
            1.4;

    }

}


/* =========================================================
   VER COMPROBANTE — TAMAÑO DEFINITIVO
========================================================= */

.order-detail-page .order-receipt-view-button {

    font-size:
        13px !important;

}


.order-detail-page .order-receipt-view-button > span:first-child {

    font-size:
        10px !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

}


/* =========================================================
   DOLCI HANDS
   ESTADOS DE PAGO — ICONOS DESKTOP
   ========================================================= */

.order-detail-page .order-status-badge.danger img {

    width:
        16px !important;

    height:
        16px !important;

    min-width:
        16px !important;

    min-height:
        16px !important;

    max-width:
        16px !important;

    max-height:
        16px !important;

    object-fit:
        contain !important;

    display:
        block !important;

    flex-shrink:
        0 !important;

    margin:
        0 6px 0 0 !important;
}



.order-detail-page .order-status-badge.success img,
.order-detail-page .order-status-badge.review img,
.order-detail-page .order-status-badge.pending img {

    width:
        16px !important;

    height:
        16px !important;

    min-width:
        16px !important;

    min-height:
        16px !important;

    max-width:
        16px !important;

    max-height:
        16px !important;

    object-fit:
        contain !important;

    display:
        block !important;

    flex-shrink:
        0 !important;

    margin:
        0 6px 0 0 !important;
}



/* =========================================================
   DESKTOP — ICONO ADJUNTAR COMPROBANTE
   ========================================================= */

@media (min-width: 801px) {

    .order-detail-page .order-receipt-trigger-icon {

        width:
            17px !important;

        height:
            17px !important;

        min-width:
            17px !important;

        min-height:
            17px !important;

        max-width:
            17px !important;

        max-height:
            17px !important;

        flex:
            0 0 17px !important;

        display:
            block !important;

        object-fit:
            contain !important;

    }

}



/* =========================================================
   PAGO RECHAZADO — UN SOLO ICONO
========================================================= */

@media (max-width: 600px) {

    .order-status-badge.danger::before,
    .order-status-badge.danger::after {

        content:
            none !important;

        display:
            none !important;
    }


    .order-status-badge.danger img {

        display:
            block !important;

        width:
            16px !important;

        height:
            16px !important;

        min-width:
            16px !important;

        min-height:
            16px !important;

        max-width:
            16px !important;

        max-height:
            16px !important;

        object-fit:
            contain !important;

        flex-shrink:
            0 !important;

        margin:
            0 6px 0 0 !important;
    }

}



/* =========================================================
   PAGO CONFIRMADO — UN SOLO ICONO
========================================================= */

@media (max-width: 600px) {

    .order-status-badge.success::before,
    .order-status-badge.success::after {

        content:
            none !important;

        display:
            none !important;
    }


    .order-status-badge.success img {

        display:
            block !important;

        width:
            16px !important;

        height:
            16px !important;

        min-width:
            16px !important;

        min-height:
            16px !important;

        max-width:
            16px !important;

        max-height:
            16px !important;

        object-fit:
            contain !important;

        flex-shrink:
            0 !important;

        margin:
            0 6px 0 0 !important;
    }

}


/* =========================================================
   ORDER DETAIL
   DATOS DE TRANSFERENCIA
   ========================================================= */

.order-transfer-card {

    margin-top: 20px;

    padding: 22px;

    border:
        1px solid
        rgba(
            190,
            118,
            91,
            0.30
        );

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 250, 246, 0.98),
            rgba(249, 239, 232, 0.94)
        );

    box-shadow:
        0 10px 28px
        rgba(
            70,
            45,
            35,
            0.06
        );

}


.order-transfer-card-header {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 12px;

}


.order-transfer-card-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    flex-shrink: 0;

    border-radius: 14px;

    background: #f4e4da;

    font-size: 20px;

}


.order-transfer-card-label {

    display: block;

    margin-bottom: 4px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.13em;

    color: #b26b54;

}


.order-transfer-card-header h3 {

    margin: 0;

    font-size: 19px;

    line-height: 1.25;

    color: #3e2a25;

}


.order-transfer-card-description {

    margin: 0 0 16px;

    font-size: 13px;

    line-height: 1.6;

    color: #765c52;

}


/* =========================================================
   BOTÓN VER DATOS
   ========================================================= */

.order-transfer-details-button {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding: 12px 15px;

    border:
        1px solid
        #d9b8aa;

    border-radius: 12px;

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

    color: #a9573e;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;

}


.order-transfer-details-button:hover {

    border-color: #c9795f;

    background: #fffaf7;

}


.order-transfer-details-button.active {

    border-color: #c9795f;

    background: #f8e9e1;

}


/* =========================================================
   CONTENEDOR DE DATOS
   ========================================================= */

.order-transfer-details {

    margin-top: 18px;

}


.order-transfer-details[hidden] {

    display: none !important;

}


/* =========================================================
   SELECTOR
   ========================================================= */

.order-transfer-details
.transfer-type-selector {

    margin-bottom: 18px;

}


.order-transfer-details
.transfer-type-label {

    display: block;

    margin-bottom: 10px;

    font-size: 12px;

    font-weight: 700;

    color: #4a342d;

}


.order-transfer-details
.transfer-type-options {

    display: grid;

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

    gap: 8px;

}


.order-transfer-details
.transfer-type-option {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 46px;

    padding: 9px;

    border:
        1px solid
        #dfc4b7;

    border-radius: 11px;

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

    color: #4b352d;

    font-family: inherit;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;

}


.order-transfer-details
.transfer-type-option:hover {

    border-color: #c8795f;

    background: #fffaf7;

}


.order-transfer-details
.transfer-type-option.active {

    border-color: #c96f55;

    background: #f8e9e1;

}


/* =========================================================
   PANELES
   ========================================================= */

.order-transfer-panel {

    margin-top: 8px;

}


.order-transfer-panel[hidden] {

    display: none !important;

}


/* =========================================================
   FILAS
   ========================================================= */

.order-transfer-details
.bank-transfer-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 12px 0;

    border-bottom:
        1px solid
        rgba(
            190,
            150,
            135,
            0.22
        );

}


.order-transfer-details
.bank-transfer-row:last-child {

    border-bottom: none;

}


.order-transfer-details
.bank-transfer-row > span {

    font-size: 12px;

    color: #80675d;

}


.order-transfer-details
.bank-transfer-row > strong {

    max-width: 68%;

    text-align: right;

    font-size: 12px;

    line-height: 1.45;

    color: #3d2b25;

    word-break: break-word;

}


/* =========================================================
   COPIAR
   ========================================================= */

.order-transfer-details
.bank-transfer-copy-row > div {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.order-transfer-details
.bank-transfer-copy-row
> div > span {

    font-size: 12px;

    color: #80675d;

}


.order-transfer-details
.bank-transfer-copy-row
> div > strong {

    font-size: 13px;

    color: #3d2b25;

    word-break: break-all;

}


.order-transfer-details
.bank-transfer-copy {

    flex-shrink: 0;

    padding: 7px 11px;

    border:
        1px solid
        #c9795f;

    border-radius: 9px;

    background: transparent;

    color: #a9573e;

    font-family: inherit;

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;

}


.order-transfer-details
.bank-transfer-copy:hover {

    background: #c9795f;

    color: #ffffff;

}


/* =========================================================
   AVISO
   ========================================================= */

.order-transfer-details
.bank-transfer-notice {

    margin-top: 17px;

    padding: 13px 15px;

    border-radius: 11px;

    background:
        rgba(
            242,
            225,
            215,
            0.72
        );

}


.order-transfer-details
.bank-transfer-notice strong {

    display: block;

    margin-bottom: 5px;

    font-size: 11px;

    color: #51372e;

}


.order-transfer-details
.bank-transfer-notice p {

    margin: 0;

    font-size: 11px;

    line-height: 1.5;

    color: #765c52;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .order-transfer-card {

        padding: 17px;

        border-radius: 17px;

    }


    .order-transfer-card-header h3 {

        font-size: 17px;

    }


    .order-transfer-details
    .transfer-type-options {

        grid-template-columns: 1fr;

    }


    .order-transfer-details
    .transfer-type-option {

        justify-content: flex-start;

        padding-left: 14px;

    }


    .order-transfer-details
    .bank-transfer-row {

        align-items: flex-start;

        flex-direction: column;

        gap: 5px;

    }


    .order-transfer-details
    .bank-transfer-row > strong {

        max-width: 100%;

        text-align: left;

    }

}



/* =========================================================
   ORDER DETAIL
   COMPACTAR DATOS DE TRANSFERENCIA
   ========================================================= */

.order-transfer-card {

    padding: 16px;

    margin-top: 14px;

    border-radius: 16px;

}


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

.order-transfer-card-header {

    gap: 10px;

    margin-bottom: 8px;

}


.order-transfer-card-icon {

    width: 36px;

    height: 36px;

    border-radius: 10px;

    font-size: 16px;

}


.order-transfer-card-label {

    margin-bottom: 2px;

    font-size: 9px;

}


.order-transfer-card-header h3 {

    font-size: 16px;

    line-height: 1.2;

}


.order-transfer-card-description {

    margin-bottom: 11px;

    font-size: 11px;

    line-height: 1.4;

}


/* =========================================================
   BOTÓN VER DATOS
   ========================================================= */

.order-transfer-details-button {

    min-height: 38px;

    padding: 9px 12px;

    border-radius: 10px;

    font-size: 10px;

}


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

.order-transfer-details {

    margin-top: 12px;

}


/* =========================================================
   SELECTOR DE TIPO
   ========================================================= */

.order-transfer-details
.transfer-type-selector {

    margin-bottom: 10px;

}


.order-transfer-details
.transfer-type-label {

    margin-bottom: 7px;

    font-size: 10px;

}


.order-transfer-details
.transfer-type-options {

    gap: 6px;

}


.order-transfer-details
.transfer-type-option {

    min-height: 38px;

    padding: 6px 7px;

    gap: 5px;

    border-radius: 9px;

    font-size: 10px;

}


.order-transfer-details
.transfer-type-option span {

    font-size: 13px;

}


.order-transfer-details
.transfer-type-option strong {

    font-size: 10px;

}


/* =========================================================
   DATOS BANCARIOS
   ========================================================= */

.order-transfer-panel {

    margin-top: 5px;

}


.order-transfer-details
.bank-transfer-row {

    gap: 10px;

    padding: 7px 0;

}


.order-transfer-details
.bank-transfer-row > span {

    font-size: 9px;

}


.order-transfer-details
.bank-transfer-row > strong {

    max-width: 70%;

    font-size: 9px;

    line-height: 1.3;

}


/* =========================================================
   BOTONES COPIAR
   ========================================================= */

.order-transfer-details
.bank-transfer-copy {

    padding: 5px 8px;

    border-radius: 7px;

    font-size: 8px;

}


/* =========================================================
   AVISO
   ========================================================= */

.order-transfer-details
.bank-transfer-notice {

    margin-top: 10px;

    padding: 9px 11px;

    border-radius: 9px;

}


.order-transfer-details
.bank-transfer-notice strong {

    margin-bottom: 3px;

    font-size: 9px;

}


.order-transfer-details
.bank-transfer-notice p {

    font-size: 9px;

    line-height: 1.35;

}