/* ==========================================================================
   16 · REVISIÓN CON LA CAJA

   Va de último en la cascada, después de `08-cajon.css`. No pisa nada de lo
   anterior: todo lo de acá empieza por `.pos-`, salvo dos añadidos declarados a
   propósito (`.marcador--btn` y `.buscador--cajon`).

   La idea visual: cada pendiente es una BALANZA. A la izquierda lo nuestro, a
   la derecha lo de la caja, y en el medio una flecha que dice hacia dónde va la
   verdad. Los dos lados se ven distintos —el de la caja tiene fondo y borde
   propios— para que no haya que leer los rótulos para saber cuál es cuál.
   ========================================================================== */

/* --- El acceso desde la barra de la carta ---------------------------------
   Es un `.marcador` que además se puede pulsar. Hereda el color: verde cuando
   está al día, rojo cuando hay algo que rompe un pedido. */
.marcador--btn {
  border: 1px solid rgba(21, 122, 71, .16);
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.marcador--btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(33,22,16,.10); }
.marcador--btn:active { transform: none; }

/* --- Mientras carga ------------------------------------------------------- */
.pos-cargando {
  display: grid; place-items: center; gap: .8rem;
  padding: 4rem 1rem; color: var(--tinta-3);
}
.pos-cargando .ico { opacity: .5; animation: pos-late 1.4s ease-in-out infinite; }
@keyframes pos-late { 50% { opacity: .95; transform: scale(1.06); } }

/* --- Resumen -------------------------------------------------------------- */
.pos-resumen {
  background: var(--surface); border: 1px solid var(--linea-sutil);
  border-radius: var(--radio-g); padding: 1.3rem 1.5rem; margin-bottom: 1.2rem;
}
.pos-resumen__cifra { display: flex; align-items: baseline; gap: .5rem; }
.pos-resumen__cifra b {
  font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--tinta);
}
.pos-resumen__cifra span { color: var(--tinta-3); font-weight: 500; }

.pos-barra {
  height: 8px; border-radius: 99px; background: var(--crema-2);
  margin: .9rem 0 .8rem; overflow: hidden;
}
.pos-barra i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--verde), var(--verde-cl));
  /* La barra crece al entrar: en una pantalla que se trata de avanzar, ver el
     avance moverse dice más que el número. */
  animation: pos-crece .9s var(--ease) both;
}
@keyframes pos-crece { from { width: 0 !important; } }

.pos-resumen__pie {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  font-size: .85rem; color: var(--tinta-3);
}
.pos-resumen__pie span { display: inline-flex; align-items: center; gap: .4em; }
.pos-resumen__pie .ico { opacity: .6; }

/* --- La banda de deshacer -------------------------------------------------
   Arriba de todo y mientras haya algo que deshacer. El botón del aviso dura
   nueve segundos y resuelve el arrepentimiento inmediato; esto es la red de
   abajo, para quien conectó 112 platos y se echa atrás dos minutos después.

   En ámbar y no en rojo a propósito: no es un error, es una salida. */
.pos-deshacer {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .7rem .5rem .7rem 1rem; margin-bottom: 1rem;
  background: var(--ambar-sua); border: 1px solid rgba(240,144,30,.28);
  border-radius: var(--radio);
  animation: pos-deshacer-entra .35s var(--ease) both;
}
@keyframes pos-deshacer-entra { from { opacity: 0; transform: translateY(-6px); } }
.pos-deshacer__i { display: grid; place-items: center; color: #8a5209; flex: none; }
.pos-deshacer__t { flex: 1; min-width: 12rem; font-size: .88rem; color: var(--tinta-2); }
.pos-deshacer__t b { color: var(--tinta); }
.pos-deshacer .btn { flex: none; }

/* --- Avisos --------------------------------------------------------------- */
.pos-aviso {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .95rem 1.15rem; border-radius: var(--radio); margin-bottom: 1rem;
  background: var(--ambar-sua); border: 1px solid rgba(240,144,30,.22);
}
.pos-aviso--mal { background: var(--rojo-sua); border-color: rgba(176,30,36,.2); }
.pos-aviso .ico { flex: none; margin-top: .1rem; color: var(--rojo); }
.pos-aviso b { display: block; }
.pos-aviso span { color: var(--tinta-2); font-size: .9rem; }
.pos-aviso code {
  font-size: .85em; background: rgba(33,22,16,.07); padding: .1em .4em; border-radius: 5px;
}

/* --- Cuando no hay nada que hacer ----------------------------------------- */
.pos-listo {
  text-align: center; padding: 2.6rem 1rem; border-radius: var(--radio-g);
  background: var(--verde-sua); border: 1px solid rgba(21,122,71,.16);
}
.pos-listo__i { color: var(--verde); }
.pos-listo h3 { font-family: var(--display); margin: .5rem 0 .3rem; color: var(--verde); }
.pos-listo p { color: var(--tinta-2); margin: 0; }

/* --- Secciones plegables --------------------------------------------------
   El filo de color de la izquierda es lo que ordena la pantalla de un vistazo:
   rojo lo que rompe un pedido, ámbar lo que cuesta plata, y sin color lo
   informativo. */
.pos-grupo {
  background: var(--surface); border: 1px solid var(--linea-sutil);
  border-left: 4px solid var(--arena);
  border-radius: var(--radio); margin-bottom: .9rem; overflow: hidden;
}
.pos-grupo--mal  { border-left-color: var(--rojo); }
.pos-grupo--ojo  { border-left-color: var(--naranja); }
.pos-grupo--info { border-left-color: var(--verde-cl); }

.pos-grupo__cab {
  display: flex; align-items: center; gap: .9rem; width: 100%;
  padding: 1rem 1.2rem; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.pos-grupo__cab:hover { background: var(--crema); }
.pos-grupo__i { display: grid; place-items: center; color: var(--tinta-3); flex: none; }
.pos-grupo--mal .pos-grupo__i { color: var(--rojo); }
.pos-grupo--ojo .pos-grupo__i { color: var(--naranja); }

.pos-grupo__t { flex: 1; min-width: 0; }
.pos-grupo__t b { display: block; font-size: 1rem; }
.pos-grupo__t span { display: block; font-size: .85rem; color: var(--tinta-3); }
.pos-grupo__n {
  flex: none; min-width: 2rem; text-align: center;
  padding: .2rem .6rem; border-radius: 99px; font-weight: 700; font-size: .9rem;
  background: var(--crema-2); color: var(--tinta-2);
}
.pos-grupo--mal .pos-grupo__n { background: var(--rojo-sua); color: var(--rojo); }
.pos-grupo--ojo .pos-grupo__n { background: var(--ambar-sua); color: #8a5209; }

.pos-grupo__v { flex: none; transition: transform .25s var(--ease); color: var(--tinta-3); }
.pos-grupo--on .pos-grupo__v { transform: rotate(180deg); }

/* Plegado con rejilla y no con `display:none` para que la apertura se anime.
   `min-height:0` en el hijo es lo que deja que la fila de 0fr recorte.

   El contenido tiene que ser UN SOLO hijo (`.pos-grupo__caja`): `0fr` colapsa
   la primera fila de la rejilla y nada más. Con los hijos sueltos, del segundo
   en adelante caían en filas implícitas `auto` y seguían midiendo — la sección
   se veía cerrada y ocupaba 3.900 px de página. */
.pos-grupo__cuerpo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.pos-grupo--on .pos-grupo__cuerpo { grid-template-rows: 1fr; }
.pos-grupo__caja { min-height: 0; overflow: hidden; }

/* --- Una fila: la balanza -------------------------------------------------- */
/* Las dos últimas columnas van con medida FIJA, no `auto`.

   Cada fila es su propia rejilla —son hermanas, no comparten columnas—, así que
   con `auto` cada una medía su columna de acciones por separado: 372 px donde
   el aviso de precio ocupa dos renglones, 455 px donde el texto de confianza va
   en uno solo. Como el resto lo reparten dos `1fr`, esa diferencia corría la
   flecha y la tarjeta de la caja hasta 41 px de una fila a otra, y en pantalla
   ancha se veía como una columna torcida.

   `minmax(20rem, 24rem)` se resuelve al máximo mientras quepa y baja al mínimo
   cuando el ancho aprieta: la misma medida en todas las filas, sin número
   mágico que se rompa en pantallas chicas. La otra salida era `subgrid`, pero
   obligaba a reestructurar las filas de choque, que llevan otro reparto. */
.pos-fila {
  display: grid; align-items: center; gap: .7rem 1.1rem;
  grid-template-columns: minmax(0,1fr) 1.25rem minmax(0,1fr) minmax(20rem, 24rem);
  padding: 1rem 1.2rem; border-top: 1px solid var(--linea-sutil);
  /* La primera vez esta lista tiene 135 filas. Igual que en `.platos`, el
     navegador se salta el trazado de lo que no está en pantalla. */
  content-visibility: auto;
  contain-intrinsic-size: auto 86px;
}
.pos-fila:first-child { border-top: 0; }

.pos-lado { min-width: 0; }
.pos-lado__d {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-3); font-weight: 600;
}
.pos-lado__d .ico { font-size: .95em; opacity: .7; }
.pos-lado__n {
  display: block; font-size: 1rem; line-height: 1.25; margin: .15rem 0;
  overflow-wrap: anywhere;
}
.pos-lado__m { display: block; font-size: .85rem; color: var(--tinta-3); }

/* El lado de la caja se ve como un recibo: fondo propio y borde punteado. */
.pos-lado--caja {
  background: var(--crema); border: 1px dashed var(--crema-3);
  border-radius: 10px; padding: .6rem .8rem;
}
.pos-lado--muerto {
  background: var(--rojo-sua); border: 1px dashed rgba(176,30,36,.3);
  border-radius: 10px; padding: .6rem .8rem;
}
.pos-lado--muerto .pos-lado__n { text-decoration: line-through; opacity: .75; }
.pos-lado--nada { color: var(--tinta-3); }
.pos-lado--nada .pos-lado__n { font-weight: 500; opacity: .8; }

.pos-flecha { display: grid; place-items: center; color: var(--arena); }
.pos-flecha--rota { color: var(--rojo); }

.pos-acc { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.pos-acc .btn { white-space: nowrap; }

/* Cuánta confianza hay en la propuesta, en palabras y en color. Ocupa lo que
   sobre de la columna y envuelve: los botones mandan sobre el ancho. */
.pos-conf {
  flex: 1; min-width: 0; text-align: right;
  font-size: .78rem; color: var(--tinta-3); line-height: 1.35;
}
.pos-conf--seguro { color: var(--verde); font-weight: 600; }

/* La diferencia de precio. En rojo solo cuando la caja cobra MÁS que la web:
   ahí el cliente vio un precio y paga otro, que es un reclamo. Al revés el
   negocio pierde plata, que duele pero no enoja a nadie. */
.pos-dif {
  flex: 1; min-width: 0; text-align: right;
  font-size: .8rem; color: var(--tinta-3); line-height: 1.35;
}
.pos-dif--mal { color: var(--rojo); font-weight: 600; }

/* --- Choque ---------------------------------------------------------------- */
.pos-fila--choque { grid-template-columns: minmax(0,1fr) 1.25rem minmax(0,1.4fr); }
.pos-choque__platos { display: grid; gap: .5rem; }
.pos-choque__p {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  background: var(--crema); border-radius: 10px; padding: .5rem .5rem .5rem .8rem;
}

/* --- El lote de seguros ----------------------------------------------------
   Tarjeta suelta, por encima de la lista plegable: es la acción que resuelve
   la mayoría de un golpe y no puede quedar escondida dentro de lo que se
   pliega. */
.pos-lote {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 0 0 .9rem; padding: .9rem 1.1rem;
  background: var(--verde-sua); border: 1px solid rgba(21,122,71,.18);
  border-radius: var(--radio);
}
.pos-lote > div { flex: 1; min-width: 14rem; }
.pos-lote span { display: block; font-size: .85rem; color: var(--tinta-2); }

/* --- Productos de la caja sin plato --------------------------------------- */
.pos-cat { border-top: 1px solid var(--linea-sutil); }
.pos-cat__cab {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem 1.2rem; background: var(--crema);
}
.pos-cat__cab b { font-size: .9rem; }
.pos-cat__cab > span {
  padding: .1rem .5rem; border-radius: 99px; background: var(--crema-3);
  font-size: .78rem; font-weight: 700; color: var(--tinta-2);
}
.pos-cat__cab .btn { margin-left: auto; font-size: .82rem; padding: .35rem .7rem; }

.pos-prod {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem 1.2rem; border-top: 1px solid var(--linea-sutil); font-size: .92rem;
}
.pos-prod b { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.pos-prod > span { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.pos-prod .btn { font-size: .8rem; padding: .3rem .65rem; }

.pos-archivados {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .8rem 1.2rem; border-top: 1px solid var(--linea-sutil);
  font-size: .88rem; color: var(--tinta-3);
}

/* --- El buscador de productos, dentro del cajón --------------------------- */
.buscador--cajon { width: 100%; margin-bottom: .8rem; }

.pos-cuenta {
  font-size: .82rem; font-weight: 600; color: var(--verde);
  padding: .3rem 0 .5rem;
}

.pos-ops {
  display: grid; gap: .3rem;
  max-height: 46vh; overflow-y: auto;
  /* Que el desplazamiento de la lista no arrastre el cajón entero cuando llega
     al final: en el celular, sin esto, seguir deslizando cierra el formulario. */
  overscroll-behavior: contain;
}
.pos-op {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .55rem .7rem; border: 1px solid var(--linea-sutil); border-radius: 10px;
  background: var(--surface); cursor: pointer; font: inherit; color: inherit;
  text-align: left;
}
.pos-op:hover { background: var(--crema); }
.pos-op--on { background: var(--verde-sua); border-color: rgba(21,122,71,.3); }
.pos-op__v { flex: none; display: grid; place-items: center; color: var(--arena); }
.pos-op--on .pos-op__v { color: var(--verde); }
.pos-op__t { flex: 1; min-width: 0; }
.pos-op__t b { display: block; font-weight: 500; overflow-wrap: anywhere; }
.pos-op__t span { font-size: .8rem; color: var(--tinta-3); }
.pos-op__p { flex: none; font-variant-numeric: tabular-nums; color: var(--tinta-2); }

/* ==========================================================================
   Pantalla angosta

   La balanza en columna: nuestro plato arriba, el de la caja abajo, y la flecha
   girada 90° entre los dos. En dos columnas de 160 px los nombres se parten en
   cinco renglones y deja de leerse cuál es cuál.
   ========================================================================== */
@media (max-width: 760px) {
  .pos-fila, .pos-fila--choque { grid-template-columns: 1fr; gap: .5rem; }
  .pos-flecha { justify-self: start; transform: rotate(90deg); }
  .pos-flecha--rota { transform: none; }
  .pos-acc { justify-content: stretch; }
  .pos-acc .btn { flex: 1; justify-content: center; }
  /* En columna, el texto va en su propio renglón y a la izquierda: si compite
     por ancho con los botones quedan los tres apretados y no se lee ninguno. */
  .pos-dif, .pos-conf { flex-basis: 100%; text-align: left; }
  .pos-resumen { padding: 1.1rem; }
  .pos-resumen__cifra b { font-size: 2rem; }
  .pos-prod { flex-wrap: wrap; }
  .pos-prod b { flex-basis: 100%; }
  .pos-ops { max-height: 40vh; }
}