/* ==========================================================================
   BodegaFlex POS — Franja del cliente en Caja (C3, 31-oct-2026). Claude.
   Solo actúa cuando js/franja-cliente.js pone data-franja en .pos-step-client.
   Colores del estilo B (variables --b-* de css/estilo-b.css) con respaldo para el estilo viejo.
   ========================================================================== */

#panel-ventas .pos-step-client[data-franja] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px !important;
}

/* La franja va primero aunque en el DOM esté al final */
.pos-step-client[data-franja] > .franja-cliente { order: -1; }

/* Cerrada: solo la franja. Abierta: la franja y el buscador de siempre (sin la fila vieja ni el distintivo) */
.pos-step-client[data-franja="cerrada"] > :not(.franja-cliente),
.pos-step-client[data-franja="abierta"] > div:first-child:not(.franja-cliente),
.pos-step-client[data-franja] #pos-selected-client-badge { display: none !important; }

.franja-cliente {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.franja-cliente-principal {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--b-borde, #e2e8f0);
  border-radius: 12px;
  background: var(--b-fondo, #f8fafc);
  color: var(--b-texto, #111827);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  position: relative;
  padding-right: 30px;
}
.franja-cliente-principal:focus-visible,
.franja-cliente-quitar:focus-visible { outline: 2px solid var(--b-accion, #0066db); outline-offset: 2px; }

.franja-cliente-nombre { font-weight: 700; overflow-wrap: anywhere; }
.franja-cliente-dato { font-size: 13px; color: var(--b-texto-2, #5b6472); white-space: nowrap; }
.franja-cliente-dato::before { content: "·"; margin-right: 8px; color: var(--b-texto-2, #5b6472); }
.franja-cliente-debe { color: var(--b-aviso, #b45309); font-weight: 700; }
/* Con cliente: nombre arriba y «C.I. … · Debe/Solvente» abajo */
.franja-cliente-principal.con-cliente .franja-cliente-nombre { flex-basis: 100%; }
.franja-cliente-principal.con-cliente .franja-cliente-nombre + .franja-cliente-dato::before { content: none; }
.franja-cliente-solvente { color: var(--b-exito, #0f7b4f); font-weight: 700; }
.franja-cliente-accion { color: var(--b-accion, #0066db); font-weight: 700; }
.franja-cliente-accion::before { content: "·"; margin-right: 8px; color: var(--b-texto-2, #5b6472); font-weight: 400; }

.franja-cliente-flecha {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  color: var(--b-texto-2, #5b6472);
  transition: transform 0.15s ease;
}
.franja-cliente-principal[aria-expanded="true"] .franja-cliente-flecha { transform: translateY(-50%) rotate(90deg); }

.franja-cliente-quitar {
  flex: 0 0 auto;
  min-height: 48px;
  min-width: 48px;
  padding: 8px 12px;
  border: 1px solid var(--b-borde, #e2e8f0);
  border-radius: 12px;
  background: var(--b-tarjeta, #ffffff);
  color: var(--b-peligro, #c62828);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.franja-cliente-quitar[hidden] { display: none; }