/* ═══════════════════════════════════════════════════════════════
   D-06 entrega 3 — «Inventario», «Compras» y «Caja» fuera de Petshop (InventoryApi: /api/inventory y /api/billing/pos).
   Solo tokens del tema (claro y oscuro; el oscuro, azul medianoche y dorado, es el predeterminado): ningún color fijo aquí.
   Móvil primero: todo se apila por debajo de 768 px y las tablas se desplazan dentro de su tarjeta (sin desplazamiento de la página).
   ═══════════════════════════════════════════════════════════════ */

.inv-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin: var(--space-4) 0 var(--space-3); }
.inv-h3 { margin: var(--space-4) 0 var(--space-2); font-size: 15px; color: var(--ds-color-text, var(--blue-900)); }
.inv-card {
    background: var(--ds-color-surface, var(--white)); border: 1px solid var(--ds-color-border, var(--gray-100));
    border-radius: var(--r-md); padding: var(--space-3); overflow-x: auto; max-width: 100%;
}
.inv-card + .inv-card { margin-top: var(--space-3); }
.inv-muted { color: var(--ds-color-text-muted, var(--gray-500)); font-size: 13px; }
.inv-empty {
    padding: var(--space-5); text-align: center; color: var(--ds-color-text-muted, var(--gray-500)); font-size: 14px;
    background: var(--ds-color-surface, var(--white)); border: 1px dashed var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md);
}
.inv-note {
    margin-top: var(--space-3); padding: var(--space-2) var(--space-3); font-size: 13px; border-radius: var(--r-sm);
    background: var(--ds-color-surface-2, var(--gray-50)); border: 1px solid var(--ds-color-border, var(--gray-200)); color: var(--ds-color-text, var(--gray-700));
}
.inv-error {
    margin-top: var(--space-3); padding: var(--space-2) var(--space-3); font-size: 13px; border-radius: var(--r-sm);
    background: var(--red-100); border: 1px solid var(--red-border); color: var(--red-500);
}
.inv-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.inv-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2) var(--space-3); margin: 0; }
.inv-facts dt { font-size: 12px; font-weight: 600; color: var(--ds-color-text-muted, var(--gray-500)); }
.inv-facts dd { margin: 0; color: var(--ds-color-text, var(--gray-900)); overflow-wrap: anywhere; }
.inv-total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; color: var(--ds-color-text, var(--blue-900)); }
.inv-pick { border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-sm); max-height: 220px; overflow-y: auto; margin-top: var(--space-1); }
.inv-pick__row {
    display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); cursor: pointer; width: 100%; text-align: left;
    background: transparent; border: 0; border-bottom: 1px solid var(--ds-color-border, var(--gray-100)); color: var(--ds-color-text, var(--gray-900));
}
.inv-pick__row:hover, .inv-pick__row:focus-visible { background: var(--ds-color-surface-2, var(--gray-50)); }
.inv-pick__sub { font-size: 11px; color: var(--ds-color-text-muted, var(--gray-500)); }
.inv-chosen {
    display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-sm);
    background: var(--ds-color-surface-2, var(--blue-50)); border: 1px solid var(--ds-color-border, var(--blue-200));
}
.inv-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

@media (max-width: 768px) {
    .inv-grid { grid-template-columns: minmax(0, 1fr); }
    .inv-toolbar > * { flex: 1 1 100%; max-width: none !important; }
}