/* ============================================================
   MOBILE / _pedidos.css — Mis pedidos y detalle de pedido
   Afecta: /o (mis pedidos), /pedido/{folio}
   Archivos desktop relacionados: perfil-figma.css,
   pedido-detalle-figma.css
   ============================================================ */

/* ── Ocultar tabla desktop, mostrar cards en móvil ──────────── */
@media (max-width: 768px) {

    /* Tabla desktop: completamente oculta */
    .pedidos-tabla-desktop,
    table.pedidos-tabla-desktop,
    table.pedidos-tabla-desktop thead,
    table.pedidos-tabla-desktop tbody,
    table.pedidos-tabla-desktop tfoot,
    table.pedidos-tabla-desktop tr,
    table.pedidos-tabla-desktop th,
    table.pedidos-tabla-desktop td {
        display: none;
        visibility: hidden;
        width: 0;
        height: 0;
        overflow: hidden;
        position: absolute;
        left: -9999px;
    }

    /* Cards de pedidos: visibles */
    .pedidos-cards-mobile {
        display: block;
        width: 100%;
    }
}

/* ── Cards de pedidos ───────────────────────────────────────── */
@media (max-width: 768px) {

    .pedido-card-mobile {
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 10px;
        padding: 16px;
        margin-bottom: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .pedido-card-mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
        gap: 8px;
    }

    .pedido-card-mobile-folio {
        font-size: 0.85em;
        font-weight: 700;
        color: #111;
    }

    .pedido-card-mobile-fecha {
        font-size: 0.78em;
        color: #888;
        margin-top: 3px;
    }

    .pedido-card-mobile-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }

    .pedido-card-mobile-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .pedido-card-mobile-label {
        font-size: 0.72em;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .pedido-card-mobile-value {
        font-size: 0.9em;
        color: #111;
        font-weight: 600;
    }

    .pedido-card-mobile-footer {
        display: flex;
        justify-content: flex-end;
        padding-top: 12px;
        border-top: 1px solid #f0f0f0;
    }
}

/* ── Detalle de pedido ──────────────────────────────────────── */
@media (max-width: 639px) {

    .pedido-detalle-figma-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 20px;
    }

    .pedido-detalle-item-row {
        gap: 12px;
    }

    .pedido-detalle-item-img {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }

    .pedido-detalle-item-price-qty {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}