/* Separación general para que NADA se pegue a los bordes del teléfono */
.wc-block-order-confirmation-status,
.wc-block-order-confirmation-summary,
.wc-block-order-confirmation-totals-wrapper,
.wc-block-order-confirmation-address-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
    max-width: 100%;
}

/* Reglas específicas para pantallas móviles (celulares y tablets pequeñas) */
@media (max-width: 768px) {
    
    /* Convertir la lista de resumen (Número de orden, fecha, etc) de horizontal a vertical */
    ul.wc-block-order-confirmation-summary-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
        padding: 20px !important;
        background: #f9f9f9;
        border-radius: 8px;
        border: 1px dashed #e0e0e0;
        margin-bottom: 30px;
    }
    
    ul.wc-block-order-confirmation-summary-list li.wc-block-order-confirmation-summary-list-item {
        border-right: none !important; 
        border-bottom: 1px solid #eee;
        padding: 0 0 10px 0 !important;
        margin: 0 !important;
        width: 100%;
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    ul.wc-block-order-confirmation-summary-list li.wc-block-order-confirmation-summary-list-item:last-child {
        border-bottom: none;
        padding-bottom: 0 !important;
    }

    /* Asegurar que el contenedor de la tabla pueda hacer scroll horizontal si es necesario */
    .wc-block-order-confirmation-totals {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table.wc-block-order-confirmation-totals__table {
        min-width: 100%;
    }
}