/**
 * Historial de pedidos compacto para tablet.
 * Mantiene intactos el escritorio tradicional y el diseño móvil <= 680 px.
 */

@media (min-width: 681px) and (max-width: 1024px),
       (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) and (min-height: 500px) {
    html body #pvf-shell #pv-hist-pedidos-card #pv-hist-pedidos {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-table-row.pv-historial-header {
        display: none !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-data-row {
        position: relative !important;
        display: grid !important;
        grid-template-columns:
            minmax(150px, 1.1fr)
            minmax(155px, 1.25fr)
            minmax(86px, .7fr)
            124px !important;
        grid-template-areas:
            "pedido cliente total acciones"
            "pedido estado pago acciones" !important;
        align-items: center !important;
        column-gap: 8px !important;
        row-gap: 5px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 80px !important;
        margin-bottom: 8px !important;
        padding: 10px 12px 10px 16px !important;
        overflow: visible !important;
        border: 1px solid #E1E6EF !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, #FFFFFF 72%, #FBF9FF 100%) !important;
        box-shadow: 0 7px 20px rgba(16, 24, 40, .05) !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-data-row > div {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-order-cell {
        grid-area: pedido !important;
        align-self: center !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-client-cell {
        grid-area: cliente !important;
        align-self: end !important;
        justify-content: flex-end !important;
        gap: 2px !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-client-cell strong {
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-total-cell {
        grid-area: total !important;
        align-self: end !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        gap: 2px !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-data-row > div[data-label="Estado"],
    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-paid-cell {
        align-self: start !important;
        justify-self: start !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-data-row > div[data-label="Estado"] {
        grid-area: estado !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-paid-cell {
        grid-area: pago !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-paid {
        min-height: 22px !important;
        padding: 0 !important;
        background: transparent !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-actions {
        grid-area: acciones !important;
        align-self: center !important;
        justify-self: end !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        height: 34px !important;
        width: 124px !important;
        min-width: 124px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-actions > .pv-hp-detail-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        flex: 0 0 84px !important;
        width: 84px !important;
        min-width: 84px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 6px !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-actions > .pv-hp-more-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-actions-menu > .pv-hp-mobile-refund-menu {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-actions-menu > .pv-hp-mobile-refund-menu > .pv-hp-menu-action {
        width: 100% !important;
        margin: 0 !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-row {
        box-sizing: border-box !important;
        width: 100% !important;
        padding: 0 0 8px !important;
        background: transparent !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-panel {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1.45fr) minmax(220px, .75fr) !important;
        align-items: stretch !important;
        gap: 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        padding: 10px !important;
        overflow: hidden !important;
        border: 1px solid #DCD5F8 !important;
        border-radius: 14px !important;
        background: linear-gradient(125deg, #F8F6FF 0%, #FFF9FC 100%) !important;
        box-shadow: 0 7px 20px rgba(55, 39, 116, .07) !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-panel::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 0 auto !important;
        height: 3px !important;
        background: linear-gradient(90deg, #7042ED 0%, #D71979 72%, #F5013C 100%) !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-items,
    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-summary {
        box-sizing: border-box !important;
        min-width: 0 !important;
        padding: 10px 11px !important;
        border: 1px solid #E6E2F2 !important;
        border-radius: 11px !important;
        background: rgba(255, 255, 255, .88) !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-panel h3 {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 0 6px !important;
        color: #222B3F !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-panel h3::before {
        content: "" !important;
        flex: 0 0 7px !important;
        width: 7px !important;
        height: 7px !important;
        border-radius: 999px !important;
        background: #7042ED !important;
        box-shadow: 0 0 0 3px rgba(112, 66, 237, .11) !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        min-height: 31px !important;
        padding: 5px 0 !important;
        border-bottom: 1px solid #ECEAF3 !important;
        font-size: 10px !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-item:last-of-type {
        border-bottom: 0 !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-item > span {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-item strong {
        max-width: 100% !important;
        overflow: hidden !important;
        color: #222B3F !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-item small {
        margin-top: 2px !important;
        color: #8792A6 !important;
        font-size: 8.5px !important;
        line-height: 1.1 !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-item b {
        flex: 0 0 auto !important;
        color: #7042ED !important;
        font-size: 9.5px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-summary {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: start !important;
        gap: 0 !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-summary > div {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 9px !important;
        min-height: 25px !important;
        padding: 4px 0 !important;
        border-bottom: 1px solid #ECEAF3 !important;
        font-size: 9.5px !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-summary > div > span {
        color: #8792A6 !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-summary > div > strong {
        max-width: 150px !important;
        overflow: hidden !important;
        color: #222B3F !important;
        font-size: 9.5px !important;
        font-weight: 850 !important;
        text-align: right !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-summary > .pv-hp-detail-total {
        min-height: 32px !important;
        margin: 6px 0 0 !important;
        padding: 7px 8px !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: linear-gradient(100deg, #F0EBFF 0%, #FFF0F7 100%) !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-summary > .pv-hp-detail-total > span {
        color: #5D6577 !important;
        font-weight: 800 !important;
    }

    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-detail-summary > .pv-hp-detail-total > strong {
        color: #7042ED !important;
        font-size: 11px !important;
        font-weight: 950 !important;
    }
}

@media (min-width: 681px) and (max-width: 820px) {
    html body #pvf-shell #pv-hist-pedidos-card .pv-hp-actions-menu:not([hidden]) {
        top: auto !important;
        bottom: 90px !important;
        max-height: calc(100dvh - 115px) !important;
        overflow-y: auto !important;
    }
}