/**
 * Módulo `cuenta` — contexto de mesa en el header de la caja.
 *
 * Solo el chip: todo lo demás (icon-chip, tonos, tipografía) sale del DS. Colores por
 * TOKEN semántico, cero hex sueltos.
 */

/* El `display: flex` se pone aquí y NO con `.d-flex` a propósito: las utilities del DS
   son `!important`, así que con `.d-flex` puesto en el markup el chip no se podría
   ocultar con `[hidden]` ni a la fuerza (ver la regla de abajo). */
.cuenta_chip {
  display: flex;
  align-items: center;
  gap: 8px;

  /* 5 en redondo: ahora el chip EMPIEZA con la flecha (un icon-chip) y termina en el
     acumulado o en "liberar", así que no hay ningún lado que pida el hueco de un texto. */
  padding: 5px;
  border: 1px solid var(--border-default);
  border-radius: 99px;
  background: var(--surface-page);
}

/* El chip se esconde mientras el salón está abierto: viendo la reja, todo lo que resume
   —qué mesa, qué mesero, cuánto lleva— está a la vista y en grande, y el acumulado de UNA
   mesa flotando sobre las demás es de las cosas que se leen mal (un mesero atiende varias,
   y a veces en el monitor de otro). Lo pone y lo quita el JS del módulo `mesas`, que solo
   conoce el `data-pos-mesas-hide` del markup. */
.cuenta_chip[hidden] {
  display: none;
}

.cuenta_chip__mesa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* Quién atiende: dato secundario, se lee después de la mesa. */
.cuenta_chip__waiter {
  padding-left: 10px;
  border-left: 1px solid var(--border-light);
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* El acumulado es el número que el mesero busca de un vistazo: va en negritas y con el
   papel hundido para separarlo del resto del chip. */
.cuenta_chip__total {
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--surface-sunken);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.cuenta_chip__total .woocommerce-Price-amount { color: inherit; }

/* Sin cuenta: el chip se convierte en el motivo. Es un estado que el mesero TIENE que
   ver — si se pintara el chip normal creería que está vendiendo a la mesa. */
.cuenta_chip--error {
  border-color: var(--feed-error-default);
  background: var(--feed-error-soft);
  color: var(--feed-error-text-on-soft);
  /* Este sí termina en TEXTO (el motivo), que necesita aire contra el borde. */
  padding-right: 15px;
}

.cuenta_chip__error-text {
  font-size: 12px;
  font-weight: 700;
  color: inherit;
}

/* ---- Lightbox "Cuenta" ----------------------------------------------------
   Todo lo enviado a cocina, por ronda, con su estado y su salida para
   cancelar. Es una LISTA de decisiones, no una tabla de datos: cada renglón
   tiene que leerse de un vistazo y su acción quedar al alcance del pulgar. */

.cuenta_group + .cuenta_group {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--border-light);
}

.cuenta_group__title {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.cuenta_line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.cuenta_line__qty {
  flex: 0 0 auto;
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 13px;
}

.cuenta_line__name {
  flex: 1 1 auto;
  font-size: 14px;
  color: var(--text-primary);
}

.cuenta_line__name small {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
}

.cuenta_line__total {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* El motivo se despliega bajo su propia línea, hundido, para que se lea como
   parte de ELLA y no como un formulario suelto del lightbox. */
.cuenta_cancel {
  padding: 12px 15px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken-light);
}

.cuenta_foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
  font-size: 14px;
  color: var(--text-secondary);
}

.cuenta_foot b { font-size: 17px; color: var(--text-primary); }

/* El acumulado del header ES el acceso a la cuenta: hay que verlo clickable. */
.cuenta_chip__total.is-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

/* El chip va en el CENTRO del header, no pegado a la izquierda: es el dato que dice a qué
   mesa se está vendiendo, y a la izquierda competía con los chips de la SESIÓN (sucursal,
   bloqueo, cierre), que son de otra cosa. Centrado de verdad respecto al header —no dentro
   de su hueco— porque el bloque del usuario, a la derecha, desplazaría el centro. */
.page-pos #dashboard_header {
  position: relative;
}

.page-pos .cuenta_chip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Estrecho, el centro absoluto se solaparía con los chips de sesión: vuelve al flujo,
   empujado a la derecha de ellos. */
@media (max-width: 1400px) {
  .page-pos .cuenta_chip {
    position: static;
    transform: none;
    margin-left: auto;
  }
}

/* El nombre de la mesa es INFORMATIVO: no es el disparador del salón. Lo fue un rato y se
   revirtió — un mismo texto que a veces es dato y a veces es botón se toca por error, y la
   vuelta al salón ya tiene su control propio (la flecha, y es lo primero que se lee). */