/* Grupo b: boxes, box_detail, edit_box, docs_sin_caja, movements, retrievals. Solo tokens de styles.css. */

/* ---- Campo "Unidad" destacado y neutro (movements, retrievals) ---- */
.gb-unit-field {
  display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5);
  background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: var(--radius-12);
}
.gb-unit-field > label { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--navy); }
.gb-unit-field select { max-width: 360px; }
.gb-unit-field:focus-within { border-color: var(--primary); }

/* ---- Formularios de registro ---- */
.gb-form { display: grid; gap: var(--space-4); max-width: 700px; }
.gb-form-narrow { max-width: 500px; }
.gb-section { margin: 0 0 var(--space-12); }
.gb-section > h2 { margin: 0 0 var(--space-4); }
.gb-error { display: none; }
.gb-narrow { max-width: 520px; }
.gb-inline-actions { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.gb-inline-actions input { max-width: 140px; }
.gb-w-sm { max-width: 120px; }
.gb-w-md { max-width: 180px; }
.gb-w-lg { max-width: 240px; }
.gb-filter-spacer { flex: 1; }

/* ---- Selector de cajas (movements) ---- */
.gb-chip-box {
  max-height: 160px; overflow-y: auto; margin-top: var(--space-1); padding: var(--space-3);
  background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-10);
}
.gb-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-caja { font-family: var(--font-mono); }
.chip-caja.is-selected { background: var(--blue-50); color: var(--blue-ink); border-color: var(--blue-200); }
.gb-chip-note { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--text-2); }
.gb-chip-skel { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gb-chip-skel .skeleton { width: 64px; height: 32px; border-radius: var(--radius-full); }
.gb-cart { border: 1px solid var(--border); border-radius: var(--radius-12); overflow: hidden; }
.gb-cart table { width: 100%; min-width: 0; }
.gb-cart .notas-input { width: 100%; }
.gb-remove { background: transparent; border: 0; color: var(--text-2); cursor: pointer; width: 32px; height: 32px; border-radius: var(--radius-8); font-size: var(--fs-h2); line-height: 1; padding: 0; }
.gb-remove:hover { background: var(--red-50); color: var(--danger); }
.gb-remove:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }

/* ---- Resumen dentro de modales de confirmacion ---- */
.gb-summary { display: grid; gap: var(--space-3); }
.gb-summary-row { display: flex; gap: var(--space-3); font-size: var(--fs-body); }
.gb-summary-row dt, .gb-summary-label { color: var(--text-2); min-width: 96px; }
.gb-summary-table { width: 100%; min-width: 0; font-size: var(--fs-small); }
.gb-summary-count { margin: var(--space-3) 0 0; color: var(--text-2); font-size: var(--fs-small); }

/* ---- Ficha de caja ---- */
.gb-docs-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.gb-docs-toolbar .filter-bar { margin: 0; flex: 1 1 360px; }
.gb-docs-toolbar .result-count { margin: 0; }
.gb-docs-end { display: flex; align-items: center; gap: var(--space-3); }
.gb-bulk-filter { margin-bottom: var(--space-3); }
.gb-col-check { width: 44px; }
.gb-col-name { width: 20%; }
.gb-col-actions { width: 1%; }
.gb-row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

#bulkBar {
  position: sticky; bottom: var(--space-4); z-index: 20;
  align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-12); box-shadow: var(--shadow-hover);
}
#bulkBar #bulkCount { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--text); font-variant-numeric: tabular-nums; margin-right: auto; }
.gb-section-head { display: flex; align-items: baseline; gap: var(--space-3); }
.gb-section-head .muted { font-size: var(--fs-small); }
.gb-event-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.gb-event-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); color: var(--text); }
.gb-event-detail { margin: var(--space-1) 0 0; color: var(--text-2); font-size: var(--fs-body); }
.gb-event-user { margin: var(--space-1) 0 0; color: var(--text-2); font-size: var(--fs-xs); }
.gb-event-movement::before { background: var(--primary); border-color: var(--primary); }
.gb-event-retrieval::before { border-color: var(--success); }

/* ---- Paginacion propia de box_detail ---- */
.gb-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); font-size: var(--fs-small); color: var(--text-2); }

/* ---- Edicion de caja ---- */
.gb-edit-form { max-width: 520px; }

/* ---- Asignacion de caja (docs_sin_caja) ---- */
.gb-assign {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-12);
}
.gb-assign label { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--text-3); }
.gb-assign input[name="box_code"] { width: 200px; max-width: 100%; }
.gb-assign #selCount { margin-left: auto; font-variant-numeric: tabular-nums; }
.gb-inline-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
.gb-inline-filter input { width: 140px; max-width: 100%; }

/* ---- Estado de carga en selects ---- */
select.is-loading-field { color: var(--text-2); background-color: var(--surface-2); }

@media (max-width: 760px) {
  .gb-unit-field { padding: var(--space-3) var(--space-4); }
  .gb-unit-field select, .gb-inline-filter input, .gb-assign input[name="box_code"] { max-width: none; width: 100%; }
  .gb-assign #selCount { margin-left: 0; }
  #bulkBar { bottom: var(--space-2); }
  .gb-row-actions .btn { min-height: 44px; }
  .gb-remove { width: 44px; height: 44px; }
}