/* ==========================================================================
   INV-2026 · Componentes
   ========================================================================== */

/* --- Botones -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 36px; padding: 0 var(--s4);
  border-radius: var(--r-md); border: 1px solid transparent;
  font-size: var(--fs-body); font-weight: 600; white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--brand); color: var(--text-on-brand); }
.btn--primary:hover { background: var(--brand-hover); }
.btn--outline { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn--outline:hover { background: var(--surface-raised); border-color: var(--text-faint); }
.btn--ghost { color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface-sunken); color: var(--text); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.icon-btn {
  position: relative; width: 36px; height: 36px; border-radius: var(--r-md);
  display: grid; place-items: center; color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn__badge {
  position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: var(--r-full);
  background: var(--brand); color: var(--text-on-brand);
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  border: 2px solid var(--surface);
}

.avatar {
  width: 34px; height: 34px; border-radius: var(--r-full);
  background: var(--brand); color: var(--text-on-brand);
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 700;
}

.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.seg button { width: 36px; height: 36px; display: grid; place-items: center; color: var(--text-muted); border-right: 1px solid var(--border); }
.seg button:last-child { border-right: 0; }
.seg button svg { width: 16px; height: 16px; }
.seg button:hover { background: var(--surface-raised); }
.seg button.is-active { background: var(--brand); color: var(--text-on-brand); }

/* --- Tira de estados ------------------------------------------------------ */
.statstrip { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; margin-bottom: var(--s4); }
.stat {
  display: inline-flex; align-items: baseline; gap: var(--s2);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-md); border: 1px solid transparent;
  font-size: var(--fs-body); color: var(--text-muted);
  transition: background var(--transition), border-color var(--transition);
}
.stat:hover { background: var(--surface); }
.stat.is-active { background: var(--surface); border-color: var(--border-strong); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.stat__count { font-weight: 700; font-variant-numeric: tabular-nums; }
.stat__count[data-tone="info"]    { color: var(--info); }
.stat__count[data-tone="success"] { color: var(--success); }
.stat__count[data-tone="warning"] { color: var(--warning); }
.stat__count[data-tone="danger"]  { color: var(--danger); }
.stat__count[data-tone="purple"]  { color: var(--purple); }
.stat__count[data-tone="neutral"] { color: var(--text-faint); }

/* --- Barra de filtros ----------------------------------------------------- */
.filters {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0;
}
.chip-input {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  min-width: 250px; min-height: 36px; padding: var(--s1) var(--s3);
  background: var(--surface-sunken); border: 1px solid transparent; border-radius: var(--r-md);
}
.chip-input:focus-within { background: var(--surface); border-color: var(--brand); }
.chip-input input { flex: 1; min-width: 110px; border: 0; background: none; outline: none; font-size: var(--fs-sm); }
.chip-input input::placeholder { color: var(--text-faint); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 2px var(--s2); border-radius: var(--r-sm);
  background: var(--brand-soft); color: var(--brand);
  font-size: var(--fs-xs); font-weight: 600;
}
.chip button { color: inherit; opacity: .65; display: grid; place-items: center; }
.chip button:hover { opacity: 1; }
.chip svg { width: 11px; height: 11px; }

.select {
  height: 36px; padding: 0 28px 0 var(--s3);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23646B76' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center / 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--text);
  appearance: none; cursor: pointer;
}
.select:hover { border-color: var(--text-faint); }
.select.has-value { border-color: var(--brand); color: var(--brand); font-weight: 600; }

.search-inline { position: relative; margin-left: auto; }
.search-inline svg { position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-faint); }
.search-inline input {
  width: 220px; height: 36px; padding: 0 var(--s3) 0 var(--s8);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); font-size: var(--fs-sm); outline: none;
}
.search-inline input:focus { border-color: var(--brand); }

/* --- Tabla ---------------------------------------------------------------- */
.table-card { background: var(--surface); border: 1px solid var(--border); border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; }
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; min-width: 1240px; table-layout: auto; }
.data td, .data th { white-space: nowrap; }
.data td:nth-child(3) { max-width: 230px; white-space: normal; }

.data thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-raised);
  padding: var(--s3) var(--s4);
  text-align: left; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
.data th.sortable { cursor: pointer; user-select: none; }
.data th.sortable:hover { color: var(--text); }
.data th .sort { display: inline-flex; align-items: center; gap: var(--s1); }
.data th .sort svg { width: 12px; height: 12px; opacity: .45; }
.data th.is-sorted .sort svg { opacity: 1; color: var(--brand); }

.data tbody td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.data tbody tr { transition: background var(--transition); }
.data tbody tr:hover { background: var(--surface-raised); }
.data tbody tr.is-selected { background: var(--row-selected); }
.data tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.data tbody tr:last-child td { border-bottom: 0; }
.data.is-compact tbody td { padding: var(--s2) var(--s4); }

.folio { color: var(--brand); font-weight: 700; font-size: var(--fs-sm); letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.folio:hover { text-decoration: underline; }

.pers { display: flex; align-items: center; gap: var(--s3); }
.pers__swatch { width: 26px; height: 26px; border-radius: var(--r-sm); flex-shrink: 0; border: 1px solid var(--border); }
.pers__text { min-width: 0; }
.pers__name { display: block; font-weight: 600; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pers__meta { display: block; font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.badge {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 3px var(--s2); border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }
.badge[data-tone="info"]    { background: var(--info-soft);    color: var(--info); }
.badge[data-tone="success"] { background: var(--success-soft); color: var(--success); }
.badge[data-tone="warning"] { background: var(--warning-soft); color: var(--warning); }
.badge[data-tone="danger"]  { background: var(--danger-soft);  color: var(--danger); }
.badge[data-tone="neutral"] { background: var(--neutral-soft); color: var(--neutral); }
.badge[data-tone="purple"]  { background: var(--purple-soft);  color: var(--purple); }

.dash { color: var(--text-faint); }
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }

input[type="checkbox"] { width: 16px; height: 16px; border-radius: 4px; accent-color: var(--brand); cursor: pointer; }

.empty { padding: var(--s12) var(--s6); text-align: center; color: var(--text-muted); }
.empty svg { width: 40px; height: 40px; margin: 0 auto var(--s4); color: var(--text-faint); }
.empty h3 { font-size: var(--fs-h2); font-weight: 600; color: var(--text); margin-bottom: var(--s2); }

.table-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s4); border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text-muted); flex-wrap: wrap;
  min-height: 56px;
}
.table-foot__left  { display: flex; align-items: center; gap: var(--s3); min-width: 0; flex-wrap: wrap; }
.table-foot__right { display: flex; align-items: center; gap: var(--s4); margin-left: auto; flex-wrap: wrap; }

/* Métrica de fila: dato de operación, no de la tabla. Se apaga al seleccionar. */
.eta { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.eta svg { width: 15px; height: 15px; color: var(--text-faint); }
.eta strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* Barra de acciones masivas. Aparece solo cuando hay selección: si hay
   casillas que no llevan a ninguna acción, la casilla sobra. */
.bulkbar {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s1) var(--s2) var(--s1) var(--s3);
  background: var(--brand-soft); border: 1px solid var(--brand);
  border-radius: var(--r-md);
}
.bulkbar__count { font-weight: 700; color: var(--brand); white-space: nowrap; }
.bulkbar__sep { width: 1px; height: 18px; background: var(--brand); opacity: .3; }
.bulkbar .btn { height: 28px; padding: 0 var(--s3); font-size: var(--fs-xs); }
.bulkbar .btn svg { width: 13px; height: 13px; }

.pagesize { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.pagesize .select { height: 30px; font-size: var(--fs-xs); padding: 0 24px 0 var(--s2); }

.pager { display: inline-flex; align-items: center; gap: var(--s1); }
.pager button {
  min-width: 30px; height: 30px; padding: 0 var(--s2);
  display: grid; place-items: center;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-muted);
  font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pager button:hover:not([disabled]):not(.is-current) { background: var(--surface-raised); color: var(--text); }
.pager button.is-current { background: var(--brand); border-color: var(--brand); color: var(--text-on-brand); }
.pager button[disabled] { opacity: .4; cursor: not-allowed; }
.pager button svg { width: 14px; height: 14px; }
.pager__gap { padding: 0 var(--s1); color: var(--text-faint); }
.pager__range { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- Panel lateral de detalle --------------------------------------------- */
.drawer-backdrop {
  position: fixed; inset: 0; background: var(--backdrop);
  opacity: 0; pointer-events: none; transition: opacity var(--transition); z-index: 40;
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 92vw);
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg); z-index: 41;
  transform: translateX(100%); transition: transform var(--transition);
  display: flex; flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--s5); }
.drawer__foot { padding: var(--s4) var(--s5); border-top: 1px solid var(--border); display: flex; gap: var(--s2); flex-shrink: 0; }

.jersey-preview { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4); margin-bottom: var(--s5); }
.jersey-preview svg { width: 100%; height: auto; max-height: 230px; }
.jersey-foto { position: relative; width: 100%; max-width: 250px; margin: 0 auto var(--s5);
               border-radius: var(--r-md); overflow: hidden; background: var(--lienzo-foto);
               border: 1px solid var(--border); }
.jersey-foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
.jersey-foto svg { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; }

.kv { display: grid; grid-template-columns: 118px 1fr; gap: var(--s3) var(--s4); font-size: var(--fs-sm); }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; font-weight: 500; }

.section-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin: var(--s6) 0 var(--s3); }

.consumo { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.consumo__row { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.consumo__row:last-child { border-bottom: 0; }
.consumo__row.is-total { background: var(--surface-raised); font-weight: 700; }
.consumo__glyph { width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--surface-sunken); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-xs); flex-shrink: 0; }
.consumo__row.is-missing .consumo__glyph { background: var(--danger-soft); color: var(--danger); }

/* --- Avisos --------------------------------------------------------------- */
.toasts { position: fixed; right: var(--s6); bottom: var(--s6); display: flex; flex-direction: column; gap: var(--s3); z-index: 50; }
.toast {
  display: flex; align-items: flex-start; gap: var(--s3);
  width: 340px; padding: var(--s3) var(--s4);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  animation: toast-in 240ms cubic-bezier(.16,1,.3,1);
}
.toast[data-tone="danger"]  { border-left-color: var(--danger); }
.toast[data-tone="success"] { border-left-color: var(--success); }
.toast[data-tone="warning"] { border-left-color: var(--warning); }
.toast__icon { width: 30px; height: 30px; border-radius: var(--r-full); background: var(--info-soft); color: var(--info); display: grid; place-items: center; flex-shrink: 0; }
.toast[data-tone="danger"]  .toast__icon { background: var(--danger-soft);  color: var(--danger); }
.toast[data-tone="success"] .toast__icon { background: var(--success-soft); color: var(--success); }
.toast[data-tone="warning"] .toast__icon { background: var(--warning-soft); color: var(--warning); }
.toast__icon svg { width: 15px; height: 15px; }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-size: var(--fs-sm); font-weight: 700; margin-bottom: 2px; }
.toast__text { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; }
.toast__link { display: inline-flex; align-items: center; gap: var(--s1); margin-top: var(--s2); font-size: var(--fs-xs); font-weight: 600; color: var(--brand); }
.toast__link svg { width: 12px; height: 12px; }
.toast__close { color: var(--text-faint); padding: 2px; }
.toast__close:hover { color: var(--text); }
.toast__close svg { width: 14px; height: 14px; }

@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Panel de inventario
   ========================================================================== */

/* --- Franja de indicadores ------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); margin-bottom: var(--s5); }
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s4);
}
.kpi__label {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--s2);
}
.kpi__valor {
  font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kpi__unidad { font-size: var(--fs-body); font-weight: 600; color: var(--text-muted); margin-left: 3px; }
.kpi__pie { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--s2); display: flex; align-items: center; gap: var(--s1); }
.kpi__pie svg { width: 13px; height: 13px; }
.kpi--alerta { border-color: var(--danger); }
.kpi--alerta .kpi__valor { color: var(--danger); }

/* Barra de merma: una sola pregunta, cuánto del consumo se fue en merma */
.merma-bar { height: 6px; border-radius: var(--r-full); background: var(--surface-sunken); overflow: hidden; margin-top: var(--s3); }
.merma-bar__fill { display: block; height: 100%; background: var(--warning); border-radius: var(--r-full); }

/* --- Panel de alertas ------------------------------------------------------ */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: var(--s5); overflow: hidden; }
.panel__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}
.panel__titulo { font-size: var(--fs-h2); font-weight: 700; }
.panel__acciones { margin-left: auto; display: flex; gap: var(--s2); }

.alerta-fila {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.alerta-fila:last-child { border-bottom: 0; }
.alerta-fila:hover { background: var(--surface-raised); }
.alerta-fila__icono { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0; }
.alerta-fila__icono svg { width: 15px; height: 15px; }
.alerta-fila[data-sev="CRITICA"] .alerta-fila__icono { background: var(--danger-soft); color: var(--danger); }
.alerta-fila[data-sev="ALTA"]    .alerta-fila__icono { background: var(--warning-soft); color: var(--warning); }
.alerta-fila[data-sev="MEDIA"]   .alerta-fila__icono { background: var(--info-soft); color: var(--info); }
.alerta-fila__cuerpo { display: block; flex: 1; min-width: 0; }
.alerta-fila__titulo { display: block; font-weight: 600; }
.alerta-fila__meta   { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
.alerta-fila__accion { flex-shrink: 0; }

/* --- Semáforo de nivel ------------------------------------------------------ */
.nivel { display: flex; align-items: center; gap: var(--s2); min-width: 140px; }
/* display explícito: son <span>, y sin esto width/height no aplican */
.nivel__barra { display: block; flex: 1; height: 6px; border-radius: var(--r-full); background: var(--surface-sunken); overflow: hidden; }
.nivel__fill  { display: block; height: 100%; border-radius: var(--r-full); }
.nivel__fill[data-estado="SANO"]         { background: var(--success); }
.nivel__fill[data-estado="BAJO"]         { background: var(--warning); }
.nivel__fill[data-estado="AGOTADO"]      { background: var(--danger); }
.nivel__fill[data-estado="SIN_ROTACION"] { background: var(--info); }
.nivel__txt { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Cifra negativa: signo y color, nunca solo color */
.neg { color: var(--danger); font-weight: 600; }

/* Primera columna fija: la sucursal no se pierde al desplazar a lo ancho */
.data th.sticky-col, .data td.sticky-col {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface); border-right: 1px solid var(--border);
}
.data thead th.sticky-col { z-index: 3; background: var(--surface-raised); }
.data tbody tr:hover td.sticky-col { background: var(--surface-raised); }

/* ==========================================================================
   Controles del cabezal: menús, confirmación y elementos fuera de alcance
   ========================================================================== */

.menu-wrap { position: relative; }
.menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 260px; max-width: 340px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  overflow: hidden;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; }
.menu--izq { right: auto; left: 0; }
.menu--arriba { top: auto; bottom: calc(100% + 8px); }

.menu__cabeza {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
}
.menu__cabeza .badge { margin-left: auto; }
.menu__cuerpo { max-height: 320px; overflow-y: auto; }
.menu__pie { padding: var(--s2); border-top: 1px solid var(--border); }

.menu__item {
  display: flex; align-items: flex-start; gap: var(--s3); width: 100%;
  padding: var(--s3) var(--s4); text-align: left;
  font-size: var(--fs-sm); color: var(--text);
  transition: background var(--transition);
}
.menu__item:hover { background: var(--surface-raised); }
.menu__item svg { width: 16px; height: 16px; color: var(--text-faint); margin-top: 2px; }
.menu__item.is-activo { background: var(--row-selected); font-weight: 600; }
.menu__item.is-activo svg { color: var(--brand); }
.menu__item small { display: block; color: var(--text-muted); font-size: var(--fs-xs); margin-top: 2px; line-height: 1.4; }
.menu__sep { height: 1px; background: var(--border); margin: var(--s1) 0; }
.menu__vacio { padding: var(--s4); font-size: var(--fs-sm); color: var(--text-muted); }

/* Desplegable del buscador global: se ancla al ancho del campo, no a la
   derecha de la barra, porque cuelga de la caja de texto que lo abre. */
.menu--buscador { right: 0; left: 0; min-width: 0; max-width: none; }
.menu--buscador .menu__cuerpo { max-height: 360px; }
/* Un <span> es inline por omisión: sin esto el título y el subtítulo del
   resultado salen pegados en la misma línea. */
.busca__t { display: block; font-weight: 600; font-size: var(--fs-sm); }
.busca__t mark { background: var(--brand-soft); color: inherit; border-radius: var(--r-sm); padding: 0 1px; }
.menu--buscador .menu__item { align-items: flex-start; }
.menu--buscador .menu__item > span { min-width: 0; flex: 1; }
.menu--buscador .menu__item small {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.menu__aviso { display: flex; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); }
.menu__aviso:last-child { border-bottom: 0; }
.menu__aviso:hover { background: var(--surface-raised); }
.menu__aviso__punto { width: 8px; height: 8px; border-radius: var(--r-full); flex-shrink: 0; margin-top: 6px; }
.menu__aviso[data-tone="danger"]  .menu__aviso__punto { background: var(--danger); }
.menu__aviso[data-tone="warning"] .menu__aviso__punto { background: var(--warning); }
.menu__aviso[data-tone="info"]    .menu__aviso__punto { background: var(--info); }
.menu__aviso__t { display: block; font-size: var(--fs-sm); font-weight: 600; }
.menu__aviso__d { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; line-height: 1.45; }

.menu__perfil { display: flex; gap: var(--s3); align-items: center; padding: var(--s4); border-bottom: 1px solid var(--border); }
.menu__perfil__n { display: block; font-weight: 700; }
.menu__perfil__r { display: block; font-size: var(--fs-xs); color: var(--text-muted); }

/* Confirmación de acciones irreversibles */
.confirmar {
  position: absolute; z-index: 70; width: 250px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--s4);
  animation: toast-in 160ms cubic-bezier(.16,1,.3,1);
}
.confirmar p { font-size: var(--fs-sm); line-height: 1.45; margin-bottom: var(--s4); }
.confirmar__acciones { display: flex; gap: var(--s2); }
.confirmar__acciones .btn { flex: 1; height: 32px; font-size: var(--fs-xs); padding: 0 var(--s2); }

/* Lo que no entra en esta iteración se señala, no se finge */
.nav-item.is-pendiente .nav-item__label { opacity: .62; }
.nav-item.is-pendiente::after {
  content: ''; width: 5px; height: 5px; border-radius: var(--r-full);
  background: var(--sidebar-muted); opacity: .8; flex-shrink: 0;
}
.shell.is-collapsed .nav-item.is-pendiente::after { display: none; }

/* Logotipo en el menú oscuro */
.sidebar__logo-img { height: 20px; width: auto; display: block; }
.shell.is-collapsed .sidebar__logo-img { display: none; }

/* ==========================================================================
   Formulario de configuración
   ========================================================================== */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s5); align-items: start; }

.tarjeta {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
}
.tarjeta__cabeza {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4); border-bottom: 1px solid var(--border); background: var(--surface-raised);
}
.tarjeta__cabeza svg { width: 18px; height: 18px; color: var(--brand); margin-top: 2px; }
.tarjeta__t { font-size: var(--fs-h2); font-weight: 700; }
.tarjeta__d { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.tarjeta__cuerpo { padding: var(--s4); display: grid; gap: var(--s4); }

.campo-form { display: grid; gap: var(--s2); }
.campo-form > label { font-size: var(--fs-sm); font-weight: 600; }
.campo-form__ayuda { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; }
.campo-form input[type="number"], .campo-form input[type="text"], .campo-form select {
  height: 38px; padding: 0 var(--s3);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); color: var(--text); width: 100%;
  font-variant-numeric: tabular-nums;
}
.campo-form input:focus, .campo-form select:focus { outline: none; border-color: var(--brand); }
.campo-form__fila { display: flex; gap: var(--s3); align-items: center; }
.campo-form__fila input { max-width: 110px; }
.campo-form__sufijo { font-size: var(--fs-sm); color: var(--text-muted); }

/* Interruptor: el estado se lee por posición y por etiqueta, no solo por color */
.switch { display: flex; align-items: center; gap: var(--s3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__pista {
  width: 40px; height: 22px; border-radius: var(--r-full);
  background: var(--border-strong); position: relative; flex-shrink: 0;
  transition: background var(--transition);
}
.switch__pista::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: var(--r-full); background: var(--switch-perilla);
  transition: transform var(--transition);
}
.switch input:checked + .switch__pista { background: var(--success); }
.switch input:checked + .switch__pista::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__pista { box-shadow: var(--ring); }
.switch__txt { font-size: var(--fs-sm); }
.switch__estado { font-size: var(--fs-xs); color: var(--text-muted); margin-left: auto; font-weight: 600; }

.barra-guardar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s6); padding: var(--s3) var(--s4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.barra-guardar__txt { font-size: var(--fs-sm); color: var(--text-muted); }
.barra-guardar__txt strong { color: var(--warning); }
.barra-guardar .btn { margin-left: auto; }
/* Sin cambios se atenúa el texto, nunca la barra: bajarle la opacidad
   dejaba ver el formulario a través de ella. */
.barra-guardar.is-limpia .barra-guardar__txt { color: var(--text-faint); }


/* ==========================================================================
   Guarda contra un defecto que reincidió cinco veces en este prototipo:
   un <span> es 'inline', así que width, height y los márgenes verticales no
   le aplican y dos spans hermanos se renderizan pegados en la misma línea.
   Estas clases apilan texto o dibujan cajas, y por eso declaran su display.
   ========================================================================== */
.menu__aviso__t, .menu__aviso__d,
.menu__perfil__n, .menu__perfil__r,
.pers__name, .pers__meta,
.tenant__name, .tenant__sub,
.alerta-fila__titulo, .alerta-fila__meta,
.doc__t, .doc__d { display: block; }

/* ==========================================================================
   Modal de formulario
   A diferencia del panel lateral, exige una decisión: bloquea el fondo,
   atrapa el foco y devuelve el foco al elemento que lo abrió.
   ========================================================================== */
.modal-back {
  position: fixed; inset: 0; z-index: 80;
  background: var(--backdrop);
  display: grid; place-items: center; padding: var(--s5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.modal-back.is-open { opacity: 1; visibility: visible; }

.modal {
  width: 100%; max-width: 620px; max-height: calc(100vh - var(--s10));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateY(12px) scale(.98);
  transition: transform var(--transition);
}
.modal-back.is-open .modal { transform: none; }

.modal__cabeza {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.modal__titulo { font-size: var(--fs-h2); font-weight: 700; }
.modal__sub { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.modal__cuerpo { flex: 1; overflow-y: auto; padding: var(--s5); display: grid; gap: var(--s5); }
.modal__pie {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s4) var(--s5); border-top: 1px solid var(--border); flex-shrink: 0;
}
.modal__aviso { flex: 1; font-size: var(--fs-xs); line-height: 1.4; }
.modal__aviso[data-tono="error"] { color: var(--danger); }
.modal__aviso[data-tono="ok"]    { color: var(--success); }
.modal__aviso[data-tono="info"]  { color: var(--text-muted); }

/* Dos campos lado a lado; se apilan en pantalla angosta */
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.fila-2--flecha { grid-template-columns: 1fr 28px 1fr; align-items: end; }
.fila-2__flecha { display: grid; place-items: center; height: 38px; color: var(--text-faint); }
@media (max-width: 560px) {
  .fila-2, .fila-2--flecha { grid-template-columns: 1fr; }
  .fila-2__flecha { display: none; }
}

/* Líneas de un traspaso o conteo */
.lineas { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.lineas__cabeza {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3); background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint);
}
.lineas__cabeza span:first-child { flex: 1; }
.linea {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3); border-bottom: 1px solid var(--border);
}
.linea:last-child { border-bottom: 0; }
.linea__mat { flex: 1; min-width: 0; }
.linea__mat strong { display: block; font-size: var(--fs-sm); }
.linea__mat span { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.linea__cant { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.linea__u { font-size: var(--fs-xs); color: var(--text-muted); width: 22px; }
.linea.is-error { background: var(--danger-soft); }
.linea.is-error .linea__mat span { color: var(--danger); font-weight: 600; }
.lineas__vacio { padding: var(--s5); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
.lineas__pie {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3); background: var(--surface-raised); border-top: 1px solid var(--border);
}
/* Estas reglas compiten con las de .campo-form, que fija width:100% en todo
   input y select. Se escriben con la misma especificidad y después, para que
   el selector de material se lleve el espacio y la cantidad quede angosta. */
.lineas__pie select#selMaterial { flex: 1 1 auto; width: auto; min-width: 0; }
.lineas__pie input#inCantidad {
  flex: 0 0 88px; width: 88px; height: 38px; text-align: right;
  padding: 0 var(--s2); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font-variant-numeric: tabular-nums;
}
.lineas__pie input#inCantidad:focus { outline: none; border-color: var(--brand); }
.lineas__pie .btn { flex: 0 0 auto; }
.lineas__pie select:disabled, .lineas__pie input:disabled { opacity: .5; cursor: not-allowed; }

/* Resumen de disponibilidad en el origen */
.disp-chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 2px var(--s2); border-radius: var(--r-sm);
  background: var(--surface-sunken); font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.disp-chip[data-tone="danger"]  { background: var(--danger-soft);  color: var(--danger); }
.disp-chip[data-tone="warning"] { background: var(--warning-soft); color: var(--warning); }
.disp-chip[data-tone="success"] { background: var(--success-soft); color: var(--success); }

/* Documento imprimible: acuses de traspaso y conteo */
.acuse { font-size: var(--fs-sm); }
.acuse__cabeza { display: flex; align-items: flex-start; gap: var(--s4); padding-bottom: var(--s4); border-bottom: 2px solid var(--text); margin-bottom: var(--s4); }
.acuse__logo { height: 20px; width: auto; }
.acuse__folio { margin-left: auto; text-align: right; }
.acuse__folio strong { display: block; font-size: var(--fs-h2); font-variant-numeric: tabular-nums; }
.acuse__folio span { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.acuse__firma { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); margin-top: var(--s10); }
.acuse__firma div { border-top: 1px solid var(--text-faint); padding-top: var(--s2); text-align: center; font-size: var(--fs-xs); color: var(--text-muted); }

/* ==========================================================================
   Gráficas
   Marcas finas, rejilla recesiva y texto en tinta —nunca en el color de la
   serie—. La identidad la lleva la marca de color al lado, no la letra.
   ========================================================================== */
.viz { width: 100%; height: auto; display: block; overflow: visible; }
.viz-rejilla { stroke: var(--viz-rejilla); stroke-width: 1; }
.viz-eje { fill: var(--viz-eje); font-size: 10px; font-variant-numeric: tabular-nums; }
.viz-cruz { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.viz-foco { stroke: var(--surface); stroke-width: 2; }
.viz-captura { cursor: crosshair; }
.viz-arco { cursor: pointer; transition: opacity var(--transition); }
.viz-arco:hover { opacity: .8; }

.viz-tip {
  position: fixed; z-index: 90; display: none; pointer-events: none;
  background: var(--viz-tip-bg); color: var(--viz-tip-ink);
  padding: var(--s2) var(--s3); border-radius: var(--r-md);
  font-size: var(--fs-xs); line-height: 1.5; box-shadow: var(--shadow-md);
  max-width: 240px;
}
.viz-tip strong { display: block; font-size: var(--fs-sm); margin-bottom: 2px; }
.viz-tip__fila { display: flex; align-items: center; gap: var(--s2); }
.viz-tip .viz-punto { width: 7px; height: 7px; }

.viz-punto { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }

.viz-leyenda { display: grid; gap: var(--s2); }
.viz-leyenda li { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); }
.viz-leyenda__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-leyenda__v { font-weight: 700; font-variant-numeric: tabular-nums; }
.viz-leyenda__p { width: 46px; text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.viz-leyenda--fila { display: flex; gap: var(--s4); margin-bottom: var(--s2); }
.viz-leyenda--fila li { font-size: var(--fs-xs); color: var(--text-muted); }

/* Donut */
.viz-donut { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.viz-donut__grafico { position: relative; width: 160px; flex-shrink: 0; }
.viz-donut__grafico .viz { width: 160px; height: 160px; }
.viz-donut__centro {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; pointer-events: none;
}
.viz-donut__centro strong { display: block; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.viz-donut__centro span { display: block; font-size: var(--fs-label); color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.viz-donut .viz-leyenda { flex: 1; min-width: 180px; }

/* Barras horizontales */
.viz-barras { display: grid; gap: var(--s3); }
.viz-barra { display: flex; align-items: center; gap: var(--s3); cursor: default; }
.viz-barra__t { width: 118px; flex-shrink: 0; font-size: var(--fs-sm); font-weight: 500; }
.viz-barra__t span { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.viz-barra__pista { flex: 1; height: 10px; background: var(--surface-sunken); border-radius: var(--r-full); overflow: hidden; }
.viz-barra__fill { display: block; height: 100%; border-radius: var(--r-full); transition: width var(--transition); }
.viz-barra__v { width: 62px; text-align: right; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Sparkline */
.viz-spark { width: 120px; height: 34px; }

/* Mapa de calor */
.viz-heat { display: grid; gap: 2px; align-items: center; }
.viz-heat__h { font-size: 10px; color: var(--viz-eje); text-align: center; font-variant-numeric: tabular-nums; }
.viz-heat__d { font-size: var(--fs-xs); color: var(--text-muted); }
.viz-heat__c { height: 22px; border-radius: 3px; cursor: pointer; transition: outline-color var(--transition); outline: 2px solid transparent; }
.viz-heat__c:hover { outline-color: var(--text); }
.viz-escala { display: flex; align-items: center; gap: 3px; margin-top: var(--s3); font-size: var(--fs-xs); color: var(--text-muted); }
.viz-escala i { width: 16px; height: 8px; border-radius: 2px; }

/* Anillo */
.viz-anillo { width: 56px; height: 56px; flex-shrink: 0; }
.viz-anillo__t { fill: var(--text); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Tarjetas del panel --------------------------------------------------- */
/* Seis KPIs: 6 en una fila cuando cabe, 3 en pantalla media, 2 en angosta.
   Dejarlo a auto-fit partía la fila en 5 + 1, que se lee como un huérfano. */
.kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s3); margin-bottom: var(--s5); }
@media (max-width: 1500px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .kpi-grid { grid-template-columns: 1fr; } }
.kpi-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s4);
  display: flex; flex-direction: column; gap: var(--s2);
}
.kpi-card__top { display: flex; align-items: center; gap: var(--s3); }
.kpi-card__icono {
  width: 34px; height: 34px; border-radius: var(--r-md); flex-shrink: 0;
  display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-muted);
}
.kpi-card__icono svg { width: 17px; height: 17px; }
.kpi-card__label {
  flex: 1; font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint); line-height: 1.35;
}
.kpi-card__valor { font-size: 26px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-card__valor small { font-size: var(--fs-body); font-weight: 600; color: var(--text-muted); margin-left: 3px; }
.kpi-card__pie { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-muted); margin-top: auto; }

/* Delta: flecha + signo + color. Nunca solo color. */
.delta { display: inline-flex; align-items: center; gap: 3px; padding: 1px var(--s2);
         border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 700;
         font-variant-numeric: tabular-nums; }
.delta svg { width: 11px; height: 11px; }
.delta[data-tone="good"]    { background: var(--success-soft); color: var(--success); }
.delta[data-tone="bad"]     { background: var(--danger-soft);  color: var(--danger); }
.delta[data-tone="neutral"] { background: var(--neutral-soft); color: var(--neutral); }

.viz-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.viz-card__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4); border-bottom: 1px solid var(--border);
}
.viz-card__t { font-size: var(--fs-h2); font-weight: 700; }
.viz-card__d { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.viz-card__acciones { margin-left: auto; display: flex; gap: var(--s2); flex-shrink: 0; }
.viz-card__cuerpo { padding: var(--s4); }

.dash-grid { display: grid; gap: var(--s5); margin-bottom: var(--s5); }
.dash-grid--2 { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
.dash-grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (max-width: 1100px) { .dash-grid--2 { grid-template-columns: 1fr; } }

/* Mini tarjetas de tendencia */
.trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); }
.trend {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s4); display: flex; align-items: center; gap: var(--s3);
}
.trend__izq { flex: 1; min-width: 0; }
.trend__label { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 2px; }
.trend__valor { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Fila de meta contra real */
.meta-fila { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-xs); color: var(--text-muted); }
.meta-fila__pista { flex: 1; height: 5px; background: var(--surface-sunken); border-radius: var(--r-full); position: relative; overflow: hidden; }
.meta-fila__fill { display: block; height: 100%; border-radius: var(--r-full); }
.meta-fila__marca { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text-faint); }

/* Barras pareadas: dos proporciones sobre las mismas categorías.
   Las dos barras de una fila comparten escala 0–100%, así que su diferencia
   de largo es directamente legible sin un segundo eje. */
.pares { display: grid; gap: var(--s4); }
.par { display: grid; gap: 5px; }
.par__t { font-size: var(--fs-sm); font-weight: 600; }
.par__linea { display: flex; align-items: center; gap: var(--s3); }
.par__pista { flex: 1; height: 9px; background: var(--surface-sunken); border-radius: var(--r-full); overflow: hidden; }
.par__fill { display: block; height: 100%; border-radius: var(--r-full); transition: width var(--transition); }
.par__v { width: 84px; text-align: right; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.par__p { width: 46px; text-align: right; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.par__pie { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; margin-top: var(--s4);
            padding-top: var(--s3); border-top: 1px solid var(--border); }
.par__pie strong { color: var(--text); }

/* Lo que el mapa de calor implica para los turnos.
   Ocupa el espacio que quedaba bajo el mapa y, sobre todo, entrega la
   decisión que el mapa insinúa: cuánta gente poner y cuándo. */
.turnos { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--border); }
.turnos__t {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--s4);
}
.turnos__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s4); }
.turnos__c { display: grid; gap: 2px; }
.turnos__v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.turnos__v small { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.turnos__l { font-size: var(--fs-xs); color: var(--text); }
.turnos__p { font-size: var(--fs-xs); color: var(--text-muted); }

.turnos__dias { display: flex; align-items: flex-end; gap: var(--s2); height: 128px; margin-top: var(--s5); }
.turnos__num { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.turnos__dia { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s2); height: 100%; }
.turnos__barra { flex: 1; width: 100%; display: flex; align-items: flex-end;
                 background: var(--surface-sunken); border-radius: var(--r-sm); overflow: hidden; }
.turnos__barra span { display: block; width: 100%; background: var(--serie-1); border-radius: var(--r-sm); }
/* El día más y el menos cargado se marcan con color Y con el borde del rótulo:
   el color no es el único portador. */
.turnos__dia.is-max .turnos__barra span { background: var(--serie-2); }
.turnos__dia.is-max .turnos__etq { color: var(--serie-2); font-weight: 700; }
.turnos__dia.is-max .turnos__num { color: var(--serie-2); }
.turnos__dia.is-min .turnos__barra span { opacity: .45; }
.turnos__dia.is-min .turnos__etq { color: var(--text-faint); }
.turnos__etq { font-size: var(--fs-xs); color: var(--text-muted); }

/* ==========================================================================
   Barra de selección flotante
   Antes vivía en el pie de la tabla: al marcar una fila de arriba en una tabla
   larga, la acción quedaba fuera de pantalla. Ahora flota sobre el viewport
   mientras hay selección, así el grid se administra sin bajar el scroll.
   ========================================================================== */
.barra-sel {
  position: fixed; left: 50%; bottom: var(--s6); z-index: 55;
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  max-width: calc(100vw - var(--s8));
  padding: var(--s2) var(--s3);
  background: var(--surface); border: 1px solid var(--brand);
  border-radius: var(--r-full); box-shadow: var(--shadow-lg);
  transform: translate(-50%, calc(100% + var(--s8)));
  opacity: 0; visibility: hidden;
  transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
}
.barra-sel.is-visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.barra-sel__n {
  padding-left: var(--s3); font-size: var(--fs-sm); font-weight: 700;
  color: var(--brand); white-space: nowrap;
}
.barra-sel__sep { width: 1px; height: 20px; background: var(--border); }
.barra-sel .btn { height: 32px; padding: 0 var(--s3); font-size: var(--fs-sm); border-radius: var(--r-full); }
.barra-sel .btn svg { width: 15px; height: 15px; }

/* Los avisos suben para no chocar con la barra */
body.con-seleccion .toasts { bottom: calc(var(--s6) + 60px); }

@media (max-width: 720px) {
  .barra-sel { left: var(--s4); right: var(--s4); transform: translate(0, calc(100% + var(--s8)));
               justify-content: center; }
  .barra-sel.is-visible { transform: translate(0, 0); }
}


/* Opción seleccionable (lista tipo radio) ---------------------------------
   Compartida: captura del cliente y elección de origen en traspasos. */
.opciones { display: grid; gap: var(--s2); }
.opcion {
  display: flex; align-items: flex-start; gap: var(--s3);
  width: 100%; padding: var(--s3) var(--s4);
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-md); text-align: left;
  transition: border-color var(--transition), background var(--transition);
}
.opcion:hover { border-color: var(--border-strong); }
.opcion.is-active { border-color: var(--brand); background: var(--row-selected); }
.opcion__radio {
  width: 20px; height: 20px; border-radius: var(--r-full); flex-shrink: 0;
  border: 2px solid var(--border-strong); margin-top: 2px;
  display: grid; place-items: center;
}
.opcion.is-active .opcion__radio { border-color: var(--brand); }
.opcion.is-active .opcion__radio::after {
  content: ''; width: 10px; height: 10px; border-radius: var(--r-full); background: var(--brand);
}
.opcion__cuerpo { display: block; flex: 1; min-width: 0; }
.opcion__titulo { display: flex; align-items: baseline; gap: var(--s2); font-weight: 600; }
.opcion__precio { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.opcion__desc { display: block; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; margin-top: 2px; }
.opcion[disabled] { opacity: .45; cursor: not-allowed; }