/* ============================================================
   Mis Compras — tabla de pedidos del customer
   ============================================================ */

/* Fix estado "current" en nav — strong dentro de a no debe tener display:block ni padding propio */
.account .block-collapsible-nav-content .nav.items li a strong { display: inline; padding: 0; border: none; }
.account .block-collapsible-nav-content .nav.items li a strong:before { content: none !important; }

.miscompras-wrapper {
    width: 100%;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
}

.miscompras-title {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #4b4b4b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Search */
.miscompras-search-container {
    position: relative;
    margin-bottom: 16px;
}

.miscompras-search-container input {
    width: 100%;
    height: 40px;
    padding: 0 40px 0 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.miscompras-search-container input:focus {
    border-color: #15744b;
}

.miscompras-search-container .search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #919191;
}

/* Table */
.miscompras-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.miscompras-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

.miscompras-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #4b4b4b;
    border-bottom: 2px solid #f0f0f0;
    white-space: nowrap;
}
.miscompras-table thead th:last-child {
    text-align: right;
    min-width: 100px;
}

.miscompras-table tbody tr {
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.15s;
}

.miscompras-table tbody tr:hover {
    background-color: #f9fafb;
}

.miscompras-table tbody td {
    padding: 12px;
    vertical-align: top;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4b4b4b;
}

/* Label "Dueño" inline junto al número de pedido — solo cuando el usuario es el dueño */
.mc-dueno-label {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #4b4b4b;
    margin-left: 8px;
}

/* Status cell */
.miscompras-status {
    white-space: nowrap;
}

.status-bullet {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

.status-label {
    vertical-align: middle;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

/* Pedido cell */
.pedido-number {
    display: inline;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #4b4b4b;
}

.pedido-store,
.pedido-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #919191;
    margin-top: 2px;
    white-space: nowrap;
}

.pedido-store svg,
.pedido-seller svg {
    flex-shrink: 0;
}

.pedido-op-name {
    color: #888;
}

/* Address cells */
.miscompras-shipping,
.miscompras-billing {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #919191;
    line-height: 1.5;
}

/* Total cell */
.miscompras-total {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #4b4b4b;
    white-space: nowrap;
    text-align: right;
    min-width: 100px;
}

/* Loading */
.miscompras-loading {
    text-align: center;
    padding: 32px;
    color: #888;
}

.miscompras-loading-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid #e0e0e0;
    border-top-color: #15744b;
    border-radius: 50%;
    animation: miscompras-spin 0.8s linear infinite;
}

@keyframes miscompras-spin {
    to { transform: rotate(360deg); }
}

/* Empty state */
.miscompras-empty {
    text-align: center;
    padding: 48px 16px;
    color: #888;
    font-size: 15px;
}

/* Pagination */
.miscompras-pager {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 16px 0;
    flex-wrap: wrap;
    font-size: 14px;
    color: #555;
}

.miscompras-pager .pager-item {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1.5px solid #d9d9d9;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s, color 0.15s;
    line-height: 1;
}

.miscompras-pager .pager-item:hover {
    border-color: #15744b;
    color: #15744b;
}

.miscompras-pager .pager-item.active {
    background-color: #15744b !important;
    border-color: #15744b !important;
    color: #fff !important;
    cursor: default;
    font-weight: 700;
}

.miscompras-pager .pager-ellipsis {
    padding: 0 2px;
    color: #888;
    font-size: 14px;
}

.miscompras-pager .pager-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    border: 1.5px solid #d9d9d9;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.miscompras-pager .pager-nav:hover { border-color:#15744b; color:#15744b; }
.miscompras-pager .pager-nav.disabled { opacity:.4; pointer-events:none; }

.miscompras-pager .pager-limit-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 13px;
    color: #555;
}

.miscompras-pager .pager-limit-wrapper select {
    height: 32px;
    border: 1.5px solid #d9d9d9;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 13px;
    cursor: pointer;
    background: #fff;
}

/* Store/seller column */
.miscompras-store-seller { font-size:13px; color:#666; }

/* Paginación Magento — estilo Figma */
.mc-pager { margin-top:16px; border-top:1px solid #f0f0f0; padding-top:14px; }
.mc-pager .pager,
.mc-pager .toolbar-products {
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
/* Ocultar "N artículos" */
.mc-pager .toolbar-amount { display:none; }

/* Páginas numeradas */
.mc-pager .pages { display:flex; align-items:center; }
.mc-pager .pages-items {
    display:flex; list-style:none; margin:0; padding:0; gap:4px; align-items:center;
}
.mc-pager .pages-items .item { display:flex; }
.mc-pager .pages-items .item .page,
.mc-pager .pages-items .item a.page {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:30px; height:30px; padding:0 6px;
    border:1px solid #d9d9d9; border-radius:4px;
    font-size:13px; color:#333; text-decoration:none;
    cursor:pointer; transition:all .15s;
}
.mc-pager .pages-items .item a.page:hover { border-color:#15744b; color:#15744b; }
.mc-pager .pages-items .item.current .page {
    background:#15744b; border-color:#15744b; color:#fff; font-weight:700;
}
.mc-pager .pages-items .item .action {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:30px; height:30px; border:1px solid #d9d9d9; border-radius:4px;
    color:#333; text-decoration:none; font-size:13px;
}
.mc-pager .pages-items .item .action:hover { border-color:#15744b; color:#15744b; }
.mc-pager .pages-items .item .action span.label { display:none; }
.mc-pager .pages-items .item .action.next::after   { content:'›'; font-size:18px; line-height:1; }
.mc-pager .pages-items .item .action.previous::before { content:'‹'; font-size:18px; line-height:1; }

/* Limiter — "mostrar [select] por página" alineado a la derecha */
.mc-pager .limiter {
    display:flex; align-items:center; gap:6px;
    margin-left:auto; font-size:13px; color:#555;
}
.mc-pager .limiter-label { font-size:13px; color:#555; font-weight:normal; }
.mc-pager .limiter-text  { font-size:13px; color:#555; }
.mc-pager .limiter-options {
    height:30px; border:1px solid #d9d9d9; border-radius:4px;
    padding:0 8px; font-size:13px; cursor:pointer;
    background:none; -webkit-appearance:menulist; appearance:menulist;
}

/* Header Fecha: desktop muestra "Fecha", mobile muestra "Fecha / Pedido" */
.mc-th-desktop { display:inline; }
.mc-th-mobile  { display:none; }

/* Número de pedido dentro de celda fecha — solo mobile */
.mc-pedido-mobile {
    display:none;
    font-weight:700;
    color:#027692;
    font-size:13px;
    margin-top:2px;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .miscompras-hide-mobile {
        display: none;
    }

    .miscompras-table thead th.miscompras-hide-mobile {
        display: none;
    }

    .miscompras-table tbody td.miscompras-hide-mobile {
        display: none;
    }

    .miscompras-total {
        text-align: left;
    }

    /* Header Fecha → Fecha / Pedido en mobile */
    .mc-th-desktop { display:none; }
    .mc-th-mobile  { display:inline; }

    /* Número de pedido apilado bajo la fecha */
    .mc-pedido-mobile { display:block; }

    /* Total alineado a la derecha en mobile */
    .miscompras-total { text-align:right; }

    /* Mobile: Date + Pedido stacked */
    .miscompras-date-mobile {
        display: block;
        font-size: 13px;
        color: #888;
        margin-bottom: 2px;
    }
}

@media (max-width: 480px) {
    .miscompras-total { font-size:11px; }
    .miscompras-status .status-label { font-size:11px; }
}