/* view_invoices.css — Estilos específicos para la vista de facturas de compra */
/* Nota: Los estilos de .unified-filters, .preset-chip, .date-range, etc.
   se heredan de sold_products.css que se importa en el HTML */

/* === KPI Cards (layout columnar, diferente del row de sold_products) === */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.card-grid .kpi-card {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    border: 1px solid #f1f5f9;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.card-grid .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); }
.card-grid .kpi-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; margin-bottom: 0.75rem;
}
.card-grid .kpi-title { font-size: 0.8rem; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.25rem; }
.card-grid .kpi-value { font-size: 1.5rem; font-weight: 700; color: #1e293b; margin: 0; }
.card-grid .kpi-sub { font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem; }

/* === Badges de estado === */
.invoice-header-badge { font-size: .75rem; background: #0d6efd; color: #fff; padding: 2px 6px; border-radius: 4px; margin-left: 6px; }
.usage-badge { padding: 2px 8px; border-radius: 12px; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; display: inline-block; }
.usage-venta { background: #198754; color: #fff; }
.usage-interno { background: #0d6efd; color: #fff; }
.usage-servicio { background: #ffc107; color: #000; }

/* === Stock badges === */
.stock-low { background: #dc3545 !important; color: #fff !important; }
.stock-medium { background: #ffc107 !important; color: #000 !important; }
.stock-ok { background: #198754 !important; color: #fff !important; }
.badge-stock { padding: 2px 6px; border-radius: 4px; font-size: .7rem; font-weight: 600; }

/* === Tabla === */
.purchases-table thead th { vertical-align: middle; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; color: #475569; }
.purchases-table tbody td { vertical-align: middle; font-size: 0.85rem; }
.purchases-table tfoot td { border-top: 2px solid #e9ecef; }
.description-trunc { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }

/* === Seriales y MACs === */
.serial-list, .mac-list { margin: 0; padding-left: 1rem; font-size: .65rem; line-height: 1.05rem; }
.serial-list li, .mac-list li { list-style: disc; }

/* === Acordeón === */
.accordion-button { gap: .75rem; flex-wrap: wrap; }
.summary-pill { background: #f8f9fa; border: 1px solid #dee2e6; padding: 4px 10px; border-radius: 20px; font-size: .7rem; }
.btn-outline-light.btn-icon { padding: 2px 6px; }

/* === Header de página === */
.vi-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.vi-page-header h1 { margin: 0; font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
.vi-page-header .header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.vi-page-header .btn-dashboard {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
}