hbox-docs/docs/tableros/inventario.css
Leopoldo Rodríguez 02521e14f4 Inventario por sitio: pestañas, envíos en camino y kit por instalación
Una pestaña por sitio (ICAVE, TIMSA, EIT, LCT, Querétaro): lo que hay, lo que va en camino
y lo que falta del kit para instalar. Movimientos con sitio, envío/recepción, origen «fuera».
Lote 2026-10-23_inventario-sitios.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016X4CAujMuib2tDqt9JRg6X
2026-10-23 13:33:51 -06:00

64 lines
4.7 KiB
CSS

/* Inventario por sitio (23-oct-2026). Lo común (tabla .t, .acciones, .pill, diálogos) viene de tablero.css. */
/* ---- Pestañas de sitio (mismas que Instalaciones) ------------------------- */
.tb-inv .inv-tabs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px; margin: 0 0 14px;
border: 1px solid var(--hg-linea-2); border-radius: 10px; background: var(--hg-plano-2); }
.tb-inv .inv-tabs button { background: transparent; border: 0; color: var(--hg-texto-2); font-size: 13.5px; font-weight: 500;
padding: 5px 11px; border-radius: 7px; gap: 7px; }
.tb-inv .inv-tabs button[aria-pressed="true"] { background: var(--hg-elevado); color: var(--hg-texto-fuerte); font-weight: 600;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hg-curso) 45%, transparent); }
.tb-inv .inv-tabs button:hover:not(:disabled) { filter: none; color: var(--hg-texto-fuerte); }
.tb-inv .inv-tabs .n { font-weight: 400; color: var(--hg-aviso); font-variant-numeric: tabular-nums; }
/* ---- «Dónde está» en la vista Todo y en los movimientos -------------------- */
.tb-inv .inv-donde { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.tb-inv .inv-donde .chip { font-size: 12px; padding: 1px 7px; border-radius: 6px; background: var(--hg-plano-2);
border: 1px solid var(--hg-linea); color: var(--hg-texto-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-inv .inv-donde .chip b { font-weight: 600; color: var(--hg-texto-fuerte); }
.tb-inv .inv-donde .chip.camino { background: var(--hg-aviso-bg); color: var(--hg-aviso); border-color: transparent; }
.tb-inv .inv-donde .chip.neg { background: var(--hg-bloqueado-bg); color: var(--hg-bloqueado); border-color: transparent; }
.tb-inv .inv-donde .mini { flex-basis: 100%; }
.tb-inv dialog .inv-donde { margin: -2px 0 10px; }
/* ---- Cabeza de un sitio --------------------------------------------------- */
.tb-inv .inv-cab { margin: 2px 0 14px; }
.md-typeset .tb-inv .inv-cab h2 { margin: 0 0 6px; font-size: 20px; }
.tb-inv .inv-n { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; color: var(--hg-texto-2); }
.tb-inv .inv-n label { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--hg-texto-2); }
.tb-inv .inv-n input[type="number"] { width: 4.2em; padding: 4px 6px; text-align: center; }
.tb-inv .inv-res { font-weight: 600; }
.tb-inv .inv-res.mal { color: var(--hg-bloqueado); }
.tb-inv .inv-res.casi { color: var(--hg-aviso); }
.tb-inv .inv-res.bien { color: var(--hg-hecho); }
.tb-inv .inv-sin-kit { margin: 0 0 10px; }
.tb-inv .inv-vacio p { margin: 0 0 6px; }
/* ---- Envíos en camino ----------------------------------------------------- */
.tb-inv .inv-camino { border: 1px solid color-mix(in srgb, var(--hg-aviso) 45%, var(--hg-linea)); background: var(--hg-aviso-bg);
border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; }
.tb-inv .inv-camino.sale { border-color: var(--hg-linea); background: var(--hg-plano-2); }
.md-typeset .tb-inv .inv-camino h3 { margin: 0 0 6px; font-size: 14px; color: var(--hg-texto-fuerte); }
.tb-inv .inv-camino .fila { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px dashed var(--hg-linea); font-size: 13.5px; }
.tb-inv .inv-camino h3 + .fila { border-top: 0; }
.tb-inv .inv-camino .cant { font-weight: 700; min-width: 4.5em; font-variant-numeric: tabular-nums; color: var(--hg-texto-fuerte); }
.tb-inv .inv-camino .que { flex: 1; min-width: 0; }
.tb-inv .inv-camino .que .mini { display: block; }
.tb-inv .inv-camino button { padding: 5px 12px; font-size: 13px; }
/* ---- Tabla de un sitio ---------------------------------------------------- */
.tb-inv table.inv-sitio tr.falta td.num.stock { color: var(--hg-bloqueado); font-weight: 700; }
.tb-inv table.inv-sitio .desc-m { display: none; }
.tb-inv .mov-fila { grid-template-columns: 118px 150px 82px 1fr; }
@media (max-width: 640px) {
.tb-inv .inv-tabs { display: flex; }
.tb-inv .inv-tabs button { flex: 1 1 auto; justify-content: center; }
.tb-inv .inv-camino .fila { flex-wrap: wrap; }
.tb-inv .mov-fila { grid-template-columns: 1fr 1fr; }
/* teléfono: la descripción va bajo el código y se quitan las columnas de cálculo; el estado del kit ya dice cuánto falta */
.tb-inv table.inv-sitio .c-desc, .tb-inv table.inv-sitio .c-op, .tb-inv table.inv-sitio .c-acc { display: none; }
.tb.tb-inv #cont table.inv-sitio { min-width: 0; } /* tablero.css fuerza 780 px a las tablas anchas; esta ya cabe */
.tb-inv table.inv-sitio .desc-m { display: block; font-size: 12.5px; color: var(--hg-texto-2); margin-top: 2px; max-width: 13em; }
.tb-inv table.inv-sitio .cod { font-size: 13px; }
.tb-inv table.inv-sitio th { white-space: nowrap; }
}