/* =========================================================
   PROMOCOMBO CLIENTE — MIS PEDIDOS RC31.78
========================================================= */

.pedidosClienteEncabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;
    margin-bottom: 16px;
}

.pedidosClienteEncabezado > div {
    min-width: 0;
}

.pedidosClienteEncabezado span {
    display: block;

    margin-bottom: 5px;

    color: #e30613;

    font-size: 10px;
    line-height: 1;
    font-weight: 950;

    letter-spacing: .16em;
}

.pedidosClienteEncabezado h3 {
    margin: 0;

    color: #17191d;

    font-size: 22px;
    line-height: 1.08;
    font-weight: 950;
}

.pedidosClienteEncabezado p {
    margin: 6px 0 0;

    color: #737780;

    font-size: 13px;
    line-height: 1.35;
    font-weight: 650;
}

.pedidosClienteActualizar {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    background: #ffffff;
    color: #34373d;

    font-size: 19px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 7px 18px
        rgba(22, 24, 28, .07);
}

.pedidosClienteFiltros {
    display: grid;

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

    gap: 6px;

    margin-bottom: 16px;
    padding: 5px;

    border: 1px solid #e8e9ec;
    border-radius: 14px;

    background: #f2f3f5;
}

.pedidosClienteFiltros button {
    min-height: 38px;

    border: 0;
    border-radius: 10px;

    background: transparent;
    color: #74777e;

    font-size: 12px;
    font-weight: 900;

    cursor: pointer;
}

.pedidosClienteFiltros button.activo {
    background: #ffffff;
    color: #17191d;

    box-shadow:
        0 5px 13px
        rgba(20, 22, 26, .08);
}

.pedidosClienteLista {
    display: grid;
    gap: 14px;
}

.pedidoClienteTarjeta {
    overflow: hidden;

    border: 1px solid #e7e8eb;
    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fcfcfd 100%
        );

    box-shadow:
        0 14px 36px
        rgba(20, 22, 26, .08);
}

.pedidoClienteTarjetaCabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        14px
        15px
        12px;

    border-bottom: 1px solid #f0f1f3;
}

.pedidoClienteIdentidad {
    display: flex;
    align-items: center;

    min-width: 0;
    gap: 10px;
}

.pedidoClienteFecha {
    display: grid;
    place-items: center;

    width: 42px;
    min-width: 42px;
    height: 42px;

    margin: 0;

    border-radius: 13px;

    background: #f3f4f6;
    color: #42464d;

    font-size: 9px;
    line-height: 1.05;
    font-weight: 950;

    letter-spacing: .03em;
    text-align: center;
}

.pedidoClienteIdentidad strong {
    display: block;

    overflow: hidden;

    color: #17191d;

    font-size: 13px;
    line-height: 1.15;
    font-weight: 950;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.pedidoClienteIdentidad small {
    display: block;

    margin-top: 3px;

    color: #898c92;

    font-size: 9px;
    line-height: 1.2;
    font-weight: 650;
}

.pedidoClienteEstado {
    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding:
        5px
        9px;

    border-radius: 999px;

    font-size: 9px;
    line-height: 1;
    font-weight: 950;

    white-space: nowrap;
}

.pedidoClienteEstado--RECIBIDO {
    background: #fff3cd;
    color: #7f5800;
}

.pedidoClienteEstado--PREPARACION {
    background: #ffe2c5;
    color: #934208;
}

.pedidoClienteEstado--LISTO {
    background: #dff7e6;
    color: #176734;
}

.pedidoClienteEstado--EN_CAMINO {
    background: #dcecff;
    color: #1958a8;
}

.pedidoClienteEstado--ENTREGADO {
    background: #dcf7e8;
    color: #17663b;
}

.pedidoClienteEstado--CANCELADO {
    background: #ffe1e1;
    color: #9c2626;
}

.pedidoClienteResumen {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 14px;

    padding:
        13px
        15px;
}

.pedidoClienteResumen > div {
    min-width: 0;
}

.pedidoClienteResumen small {
    display: block;

    margin-bottom: 4px;

    color: #93969b;

    font-size: 9px;
    font-weight: 800;
}

.pedidoClienteResumen strong {
    display: block;

    overflow: hidden;

    color: #33363b;

    font-size: 12px;
    line-height: 1.25;
    font-weight: 850;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.pedidoClienteResumen > b {
    flex: 0 0 auto;

    color: #e30613;

    font-size: 16px;
    line-height: 1;
    font-weight: 950;
}

.pedidoClienteSeguimiento {
    display: grid;

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

    padding:
        12px
        12px
        15px;

    border-top: 1px solid #f1f2f4;
    border-bottom: 1px solid #f1f2f4;
}

.pedidoClientePaso {
    position: relative;

    display: grid;
    justify-items: center;

    gap: 6px;

    min-width: 0;
}

.pedidoClientePaso::before {
    content: "";

    position: absolute;
    top: 6px;
    left: -50%;

    width: 100%;
    height: 2px;

    background: #e4e6e9;
}

.pedidoClientePaso:first-child::before {
    display: none;
}

.pedidoClientePaso > span {
    position: relative;
    z-index: 2;

    width: 13px;
    height: 13px;

    border: 3px solid #ffffff;
    border-radius: 999px;

    background: #d7d9dd;

    box-shadow:
        0 0 0 1px
        #d7d9dd;
}

.pedidoClientePaso small {
    overflow: hidden;

    width: 100%;

    color: #a0a3a8;

    font-size: 7px;
    line-height: 1.15;
    font-weight: 800;

    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pedidoClientePaso.completado::before {
    background: #18a85b;
}

.pedidoClientePaso.completado > span {
    background: #18a85b;

    box-shadow:
        0 0 0 1px
        #18a85b;
}

.pedidoClientePaso.completado small {
    color: #548066;
}

.pedidoClientePaso.activo > span {
    box-shadow:
        0 0 0 1px
        #18a85b,
        0 0 0 5px
        rgba(24, 168, 91, .12);
}

.pedidoClienteCancelado {
    display: grid;
    gap: 4px;

    margin:
        0
        15px
        12px;

    padding: 11px;

    border-radius: 12px;

    background: #fff0f0;
    color: #8b2b2b;
}

.pedidoClienteCancelado strong {
    font-size: 11px;
}

.pedidoClienteCancelado span {
    font-size: 9px;
}

.pedidoClienteMeta {
    display: grid;

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

    gap: 8px;

    padding:
        12px
        15px;
}

.pedidoClienteMeta > span {
    display: grid;

    min-width: 0;
    gap: 3px;

    padding: 9px;

    border-radius: 12px;

    background: #f6f7f8;
    color: #73767c;

    font-size: 9px;
    line-height: 1.25;
    font-weight: 650;
}

.pedidoClienteMeta b {
    color: #34373c;

    font-size: 9px;
    font-weight: 900;
}

.pedidoClienteDetalle {
    margin:
        0
        15px
        12px;

    padding: 12px;

    border: 1px solid #eceef1;
    border-radius: 14px;

    background: #fafafb;
}

.pedidoClienteDetalle[hidden] {
    display: none;
}

.pedidoClienteDetalleTitulo {
    margin-bottom: 9px;

    color: #555960;

    font-size: 9px;
    font-weight: 950;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.pedidoClienteDetalle ul {
    display: grid;
    gap: 9px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.pedidoClienteDetalle li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    padding-bottom: 9px;

    border-bottom: 1px solid #eceef1;
}

.pedidoClienteDetalle li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.pedidoClienteDetalle li div {
    min-width: 0;
}

.pedidoClienteDetalle li strong {
    display: block;

    color: #35383e;

    font-size: 10px;
    line-height: 1.25;
    font-weight: 850;
}

.pedidoClienteDetalle li small {
    display: block;

    margin-top: 3px;

    color: #93969c;

    font-size: 8px;
}

.pedidoClienteDetalle li > b {
    flex: 0 0 auto;

    color: #4a4d52;

    font-size: 10px;
}

.pedidoClienteObservaciones {
    margin-top: 10px;
    padding-top: 10px;

    border-top: 1px solid #eceef1;
}

.pedidoClienteObservaciones small {
    display: block;

    color: #999ca1;

    font-size: 8px;
    font-weight: 900;
}

.pedidoClienteObservaciones p {
    margin: 4px 0 0;

    color: #555960;

    font-size: 9px;
    line-height: 1.35;
}

.pedidoClienteAcciones {
    display: grid;

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

    gap: 8px;

    padding:
        0
        15px
        15px;
}

.pedidoClienteBoton {
    min-height: 38px;

    border-radius: 11px;

    font-size: 10px;
    font-weight: 950;

    cursor: pointer;
}

.pedidoClienteBoton--secundario {
    border: 1px solid #e1e3e6;

    background: #ffffff;
    color: #5d6066;
}

.pedidoClienteBoton--principal {
    border: 1px solid #e30613;

    background: #e30613;
    color: #ffffff;

    box-shadow:
        0 8px 18px
        rgba(227, 6, 19, .18);
}

.pedidosClienteVacio {
    display: grid;
    justify-items: center;

    gap: 8px;

    padding:
        30px
        18px;

    border: 1px dashed #dfe1e5;
    border-radius: 18px;

    background: #fafafb;

    text-align: center;
}

.pedidosClienteVacio > span {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 14px;

    background: #f0f1f3;

    font-size: 20px;
}

.pedidosClienteVacio strong {
    color: #34373d;

    font-size: 13px;
    line-height: 1.2;
    font-weight: 950;
}

.pedidosClienteVacio p {
    max-width: 280px;

    margin: 0;

    color: #85888e;

    font-size: 10px;
    line-height: 1.4;
    font-weight: 650;
}

.pedidosClienteCargando {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 90px;

    color: #888b91;

    font-size: 10px;
    font-weight: 800;
}

.pedidosClienteCargando > span {
    width: 15px;
    height: 15px;

    border: 2px solid #dedfe2;
    border-top-color: #e30613;
    border-radius: 999px;

    animation:
        pedidosClienteGiro
        .8s linear
        infinite;
}

@keyframes pedidosClienteGiro {
    to {
        transform:
            rotate(360deg);
    }
}

@media (max-width: 520px) {

    .pedidosClienteEncabezado h3 {
        font-size: 20px;
    }

    .pedidoClienteTarjetaCabecera {
        align-items: flex-start;
    }

    .pedidoClienteMeta {
        grid-template-columns:
            1fr;
    }

    .pedidoClientePaso small {
        font-size: 6.5px;
    }

}

@media (
    prefers-reduced-motion:
    reduce
) {

    .pedidosClienteCargando > span {
        animation: none;
    }

}

/* =========================================================
   RC31.87 — MIS PEDIDOS / REDISEÑO PROFESIONAL
   ========================================================= */
#panelCuentaCliente .pedidosClienteEncabezado{align-items:center;gap:14px;margin:0 0 15px;padding:0 2px}
#panelCuentaCliente .pedidosClienteEncabezado span{display:inline-flex;align-items:center;gap:6px;margin-bottom:7px;color:#e51b2b;font-size:.66rem;letter-spacing:.15em}
#panelCuentaCliente .pedidosClienteEncabezado span::before{content:"";width:18px;height:3px;border-radius:999px;background:#e51b2b}
#panelCuentaCliente .pedidosClienteEncabezado h3{font-size:1.75rem;line-height:1.02;letter-spacing:-.045em}
#panelCuentaCliente .pedidosClienteEncabezado p{margin-top:7px;max-width:500px;font-size:.92rem;line-height:1.42;color:#747984}
#panelCuentaCliente .pedidosClienteActualizar{width:44px;height:44px;border-radius:14px;border:1px solid #dfe2e6;box-shadow:none;background:#fff}
#panelCuentaCliente .pedidosClienteFiltros{gap:4px;margin:0 0 14px;padding:4px;border:1px solid #e1e4e8;border-radius:16px;background:#fff;box-shadow:0 7px 20px rgba(20,22,26,.04)}
#panelCuentaCliente .pedidosClienteFiltros button{min-height:46px;border-radius:12px;font-size:.82rem}
#panelCuentaCliente .pedidosClienteFiltros button.activo{color:#fff;background:#17181c;box-shadow:0 6px 14px rgba(20,22,26,.13)}
#panelCuentaCliente .pedidosClienteVacio{min-height:250px;padding:34px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;border:1px solid #e1e4e8;border-radius:24px;background:radial-gradient(circle at 50% 0%,rgba(229,27,43,.045),transparent 11rem),#fff;box-shadow:0 10px 28px rgba(20,22,26,.04);text-align:center}
#panelCuentaCliente .pedidosClienteVacio>span{display:grid;place-items:center;width:62px;height:62px;margin-bottom:5px;border-radius:20px;background:#f1f2f4;font-size:1.5rem}
#panelCuentaCliente .pedidosClienteVacio>strong{color:#25272c;font-size:1rem;font-weight:900}
#panelCuentaCliente .pedidosClienteVacio>p{max-width:410px;margin:0;color:#8a8f98;font-size:.8rem;line-height:1.45;font-weight:620}
#panelCuentaCliente .pedidosClienteLista{gap:12px}
#panelCuentaCliente .pedidoClienteTarjeta{border:1px solid #e0e3e7;border-radius:24px;background:#fff;box-shadow:0 13px 32px rgba(20,22,26,.06)}
#panelCuentaCliente .pedidoClienteTarjetaCabecera{padding:17px 18px 14px;border-bottom:1px solid #eef0f2}
#panelCuentaCliente .pedidoClienteFecha{width:46px;min-width:46px;height:46px;border-radius:14px;background:#f1f2f4}
#panelCuentaCliente .pedidoClienteIdentidad strong{font-size:.9rem}
#panelCuentaCliente .pedidoClienteIdentidad small{font-size:.68rem}
#panelCuentaCliente .pedidoClienteEstado{min-height:30px;padding:7px 10px;font-size:.66rem}
#panelCuentaCliente .pedidoClienteResumen{padding:15px 18px}
#panelCuentaCliente .pedidoClienteResumen small{font-size:.66rem}
#panelCuentaCliente .pedidoClienteResumen strong{font-size:.83rem}
#panelCuentaCliente .pedidoClienteResumen>b{font-size:1.05rem;color:#17181c}
#panelCuentaCliente .pedidoClienteSeguimiento{margin:0 18px;padding:14px 0 16px;border-top:1px solid #eef0f2;border-bottom:1px solid #eef0f2}
#panelCuentaCliente .pedidoClientePaso small{font-size:.58rem}
#panelCuentaCliente .pedidoClienteMeta{gap:8px;padding:13px 18px}
#panelCuentaCliente .pedidoClienteMeta>span{padding:11px;border-radius:13px;background:#f5f6f8;font-size:.68rem}
#panelCuentaCliente .pedidoClienteMeta b{font-size:.68rem}
#panelCuentaCliente .pedidoClienteAcciones{gap:8px;padding:0 18px 18px}
#panelCuentaCliente .pedidoClienteBoton{min-height:44px;border-radius:13px;font-size:.76rem}
#panelCuentaCliente .pedidoClienteBoton--principal{background:#17181c;color:#fff}
#panelCuentaCliente .pedidoClienteTrackingAcceso{margin:0 18px 14px;padding:15px;border:1px solid #d9e7ff;border-radius:18px;background:linear-gradient(135deg,#f3f8ff,#fff)}
#panelCuentaCliente .pedidoClienteTrackingBoton{min-height:46px;border-radius:13px;font-weight:900}
#panelCuentaCliente .pedidosClienteCargando{min-height:220px;border:1px solid #e1e4e8;border-radius:24px;background:#fff}
@media(max-width:640px){#panelCuentaCliente .pedidosClienteEncabezado h3{font-size:1.6rem}#panelCuentaCliente .pedidosClienteEncabezado p{font-size:.84rem}#panelCuentaCliente .pedidosClienteVacio{min-height:235px;padding:28px 18px;border-radius:22px}#panelCuentaCliente .pedidoClienteTarjeta{border-radius:22px}#panelCuentaCliente .pedidoClienteSeguimiento{margin-left:15px;margin-right:15px}}


/* =========================================================
   RC31.233 — AVISO DELIVERY UNIVERSAL
   Mismo diseño en Inicio, Cuenta y seguimiento. Dura 4 s.
========================================================= */
.promocomboPedidoEstadoToast{position:fixed;z-index:999999;left:50%;top:50%;width:min(91vw,590px);min-height:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 22px;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:linear-gradient(145deg,#111722 0%,#171e2a 100%);color:#fff;box-shadow:0 28px 80px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.06) inset;opacity:0;transform:translate(-50%,calc(-50% + 28px)) scale(.96);transition:opacity .28s ease,transform .28s ease;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;cursor:default}
.promocomboPedidoEstadoToast.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
.promocomboPedidoEstadoToast.is-tracking{cursor:pointer}
.promocomboPedidoEstadoToast::before{content:"";position:absolute;left:22px;right:22px;top:0;height:3px;border-radius:0 0 6px 6px;background:#d92932}
.promocomboPedidoEstadoToast.is-tracking::before{background:#2684d6}
.promocomboPedidoEstadoToast .pcOrderToastIcon{flex:0 0 64px;width:64px;height:64px;display:grid;place-items:center;border-radius:19px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);font-size:33px;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.promocomboPedidoEstadoToast .pcOrderToastCopy{min-width:0;flex:1;display:grid;gap:4px}
.promocomboPedidoEstadoToast .pcOrderToastCopy strong{display:block;margin:0;color:#fff;font-size:clamp(22px,5vw,30px);line-height:1.12;font-weight:800;letter-spacing:-.025em}
.promocomboPedidoEstadoToast .pcOrderToastCopy span{display:block;margin-top:4px;color:#e1e6ed;font-size:clamp(15px,3.7vw,18px);line-height:1.42;font-weight:500}
.promocomboPedidoEstadoToast .pcOrderToastRider{font-weight:800;color:#fff}
.promocomboPedidoEstadoToast .pcOrderToastRider b{font-weight:950;color:#fff}
.promocomboPedidoEstadoToast .pcOrderToastThanks{display:block;margin-top:6px;font-size:13px;font-weight:800;color:#d9e7f8}
.promocomboPedidoEstadoToast .pcOrderToastCopy em{display:block;margin-top:10px;color:#79bdf8;font-size:10px;line-height:1.35;font-style:normal;font-weight:900;letter-spacing:.09em}
@media(max-width:520px){.promocomboPedidoEstadoToast{padding:22px 18px;gap:12px}.promocomboPedidoEstadoToast .pcOrderToastIcon{flex-basis:54px;width:54px;height:54px;border-radius:16px;font-size:29px}}


/* =========================================================
   RC31.245 — AVISO DELIVERY: CTA DE MAPA DESTACADO
   Sólo presentación del aviso; no altera tracking ni estados.
========================================================= */
.promocomboPedidoEstadoToast .pcOrderToastAttention{
    font-weight:500!important;
}
.promocomboPedidoEstadoToast .pcOrderToastMapCta{
    display:block!important;
    width:100%;
    box-sizing:border-box;
    margin:14px 0 0!important;
    padding:10px 12px;
    border:2px solid #4eafff;
    border-radius:12px;
    background:rgba(78,175,255,.08);
    color:#79c3ff!important;
    text-align:center;
    font-size:clamp(10px,2.7vw,12px)!important;
    line-height:1.35!important;
    font-style:normal;
    font-weight:900!important;
    letter-spacing:.075em;
    box-shadow:0 0 0 1px rgba(78,175,255,.10) inset,0 8px 18px rgba(31,116,197,.14);
}
.promocomboPedidoEstadoToast.is-tracking .pcOrderToastMapCta:active{
    background:rgba(78,175,255,.16);
}


/* =========================================================
   RC31.246 — AVISO DELIVERY TOTALMENTE CENTRADO
   Sólo presentación de EN_CAMINO. No altera tracking/estados.
========================================================= */
.promocomboPedidoEstadoToast.is-tracking{
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    text-align:center!important;
}
.promocomboPedidoEstadoToast.is-tracking .pcOrderToastIcon{
    margin:0 auto!important;
}
.promocomboPedidoEstadoToast.is-tracking .pcOrderToastCopy{
    width:100%!important;
    min-width:0!important;
    flex:0 1 auto!important;
    justify-items:center!important;
    text-align:center!important;
}
.promocomboPedidoEstadoToast.is-tracking .pcOrderToastCopy strong,
.promocomboPedidoEstadoToast.is-tracking .pcOrderToastCopy span,
.promocomboPedidoEstadoToast.is-tracking .pcOrderToastCopy em{
    width:100%!important;
    text-align:center!important;
}
.promocomboPedidoEstadoToast.is-tracking .pcOrderToastMapCta{
    max-width:470px!important;
    margin:14px auto 0!important;
}