/**
 * Archivo: assets/css/shared/orders.css
 * Sistema: Allage - Estilos de Gestión de Pedidos
 * Versión: 1.0.0
 * Fecha: 2026-03-13
 *
 * Componentes:
 * - .ltn-orders-table — Tabla de listado de pedidos
 * - .ltn-order-status-* — Badges de estado de pedido
 * - .ltn-order-detail — Panel de detalle de pedido
 * - .ltn-order-timeline — Timeline de estados
 */

/* ===========================================
   BARRA DE FILTROS Y HERRAMIENTAS
   =========================================== */

.ltn-orders-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ltn-spacing-sm);
    margin-bottom: var(--ltn-spacing-md);
}

.ltn-orders-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ltn-spacing-sm);
}

.ltn-orders-search {
    display: flex;
    gap: var(--ltn-spacing-xs);
}

.ltn-orders-search .ltn-form-input {
    min-width: 200px;
}

/* ===========================================
   ESTADO DE PEDIDO — BADGES SEMÁNTICOS
   Uso: <span class="ltn-order-status pending">Pendiente</span>
   =========================================== */

.ltn-order-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: var(--ltn-font-size-xs);
    font-weight: 600;
    white-space: nowrap;
}

/* Pendiente */
.ltn-order-status.pending {
    background: var(--ltn-warning-bg);
    color: var(--ltn-warning-text);
    border: 1px solid var(--ltn-warning-border);
}

/* En proceso */
.ltn-order-status.processing {
    background: var(--ltn-info-bg);
    color: var(--ltn-info-text);
    border: 1px solid var(--ltn-info-border);
}

/* Completado */
.ltn-order-status.completed {
    background: var(--ltn-success-bg);
    color: var(--ltn-success-text);
    border: 1px solid var(--ltn-success-border);
}

/* Cancelado */
.ltn-order-status.cancelled,
.ltn-order-status.refunded,
.ltn-order-status.failed {
    background: var(--ltn-error-bg);
    color: var(--ltn-error-text);
    border: 1px solid var(--ltn-error-border);
}

/* En espera */
.ltn-order-status.on-hold {
    background: var(--ltn-neutral-bg);
    color: var(--ltn-neutral-text);
    border: 1px solid var(--ltn-neutral-border);
}

/* ===========================================
   TABLA DE PEDIDOS
   =========================================== */

.ltn-orders-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ltn-gray-200);
    border-radius: var(--ltn-border-radius);
    background: var(--ltn-white);
}

.ltn-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ltn-font-size-sm);
}

.ltn-orders-table th {
    background: var(--ltn-gray-100);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--ltn-gray-600);
    font-size: var(--ltn-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--ltn-gray-200);
    white-space: nowrap;
}

.ltn-orders-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ltn-gray-100);
    vertical-align: middle;
    color: var(--ltn-gray-700);
}

.ltn-orders-table tbody tr:last-child td {
    border-bottom: none;
}

.ltn-orders-table tbody tr:hover td {
    background: var(--ltn-gray-50);
}

/* Enlace de número de pedido */
.ltn-order-number-link {
    color: var(--ltn-green-primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
}

.ltn-order-number-link:hover {
    color: var(--ltn-terra);
    text-decoration: underline;
}

/* Lista compacta de productos */
.ltn-order-products-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ltn-font-size-xs);
    color: var(--ltn-gray-600);
}

.ltn-order-products-list li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Datos de cliente */
.ltn-order-customer {
    line-height: 1.4;
}

.ltn-order-customer-name {
    font-weight: 600;
    color: var(--ltn-gray-800);
    display: block;
}

.ltn-order-customer-email {
    font-size: var(--ltn-font-size-xs);
    color: var(--ltn-gray-400);
}

/* ===========================================
   PAGINACIÓN
   =========================================== */

.ltn-orders-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ltn-spacing-xs);
    padding: var(--ltn-spacing-md);
    border-top: 1px solid var(--ltn-gray-200);
}

/* ===========================================
   PANEL DE DETALLE DEL PEDIDO (modal AJAX)
   =========================================== */

.ltn-order-detail-overlay {
    position: fixed;
    inset: 0;
    background: var(--ltn-overlay-dark);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ltn-spacing-md);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--ltn-transition), visibility var(--ltn-transition);
}

.ltn-order-detail-overlay.active {
    visibility: visible;
    opacity: 1;
}

.ltn-order-detail-panel {
    background: var(--ltn-white);
    border-radius: var(--ltn-border-radius);
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform var(--ltn-transition);
    overflow: hidden;
}

.ltn-order-detail-overlay.active .ltn-order-detail-panel {
    transform: scale(1);
}

.ltn-order-detail-header {
    background: linear-gradient(135deg, var(--ltn-green-primary) 0%, var(--ltn-green-dark) 100%);
    color: var(--ltn-white);
    padding: var(--ltn-spacing-md) var(--ltn-spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.ltn-order-detail-title {
    font-size: var(--ltn-font-size-lg);
    font-weight: 700;
    margin: 0;
    color: var(--ltn-white);
}

.ltn-order-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--ltn-spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--ltn-spacing-lg);
}

.ltn-order-detail-footer {
    padding: var(--ltn-spacing-md) var(--ltn-spacing-lg);
    border-top: 1px solid var(--ltn-gray-200);
    display: flex;
    align-items: center;
    gap: var(--ltn-spacing-sm);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Sección de ítems */
.ltn-order-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ltn-font-size-sm);
}

.ltn-order-items-table th {
    background: var(--ltn-gray-100);
    padding: 6px 8px;
    text-align: left;
    font-size: var(--ltn-font-size-xs);
    font-weight: 600;
    color: var(--ltn-gray-600);
    text-transform: uppercase;
    border-bottom: 1px solid var(--ltn-gray-200);
}

.ltn-order-items-table td {
    padding: 8px;
    border-bottom: 1px solid var(--ltn-gray-100);
    vertical-align: middle;
}

.ltn-order-item-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--ltn-border-radius-sm);
    border: 1px solid var(--ltn-gray-200);
}

/* Timeline de estados */
.ltn-order-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--ltn-spacing-sm);
}

.ltn-order-timeline-item {
    display: flex;
    gap: var(--ltn-spacing-sm);
    font-size: var(--ltn-font-size-sm);
}

.ltn-order-timeline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ltn-green-light);
    margin-top: 5px;
    flex-shrink: 0;
}

.ltn-order-timeline-item.customer .ltn-order-timeline-dot {
    background: var(--ltn-info);
}

.ltn-order-timeline-date {
    font-size: var(--ltn-font-size-xs);
    color: var(--ltn-gray-400);
    white-space: nowrap;
    min-width: 120px;
}

.ltn-order-timeline-note {
    color: var(--ltn-gray-700);
    flex: 1;
}

.ltn-order-timeline-author {
    font-size: var(--ltn-font-size-xs);
    color: var(--ltn-gray-500);
    font-style: italic;
}

/* Selector de estado en el detalle */
.ltn-order-status-selector {
    display: flex;
    align-items: center;
    gap: var(--ltn-spacing-sm);
    flex-wrap: wrap;
}

.ltn-order-status-selector label {
    font-size: var(--ltn-font-size-sm);
    font-weight: 600;
    color: var(--ltn-gray-700);
    white-space: nowrap;
}