/* contasuma — la caja.
 *
 * Dos columnas: catálogo a la izquierda, ticket a la derecha, como el mockup
 * del sitio. En móvil el ticket se va abajo y queda pegado, porque el total es
 * lo que el cajero mira y lo que el cliente pregunta.
 *
 * Los objetivos de toque son grandes a propósito: esto se usa con una mano,
 * de pie y con prisa.
 */

.caja{
  display:grid;
  grid-template-columns:1fr minmax(320px,380px);
  gap:18px;
  align-items:start;
  max-width:1200px;
}

/* ── catálogo ── */
.caja-catalogo{display:flex;flex-direction:column;gap:14px;min-width:0}

.buscador input{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-2);
  background:var(--card);font-size:1rem;
}
.buscador input:focus-visible{border-color:var(--emerald);outline-offset:0}

.rejilla{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:8px;
  align-content:start;
}
.producto{
  display:flex;flex-direction:column;gap:4px;text-align:left;
  padding:11px 12px;min-height:82px;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-2);
  cursor:pointer;transition:border-color var(--t-toque) var(--sal),transform var(--t-toque) var(--sal),
              box-shadow var(--t-toque) var(--sal);
}
.producto:not([disabled]):active{transform:scale(.97)}
.producto[disabled]{opacity:.5;cursor:not-allowed}
.p-nombre{font-weight:600;font-size:.92rem;line-height:1.25}
.p-precio{font-size:1rem;font-weight:600;color:var(--emerald-dark);margin-top:auto}
/* El numero de existencia salia solo: un "20" debajo de "$ 3,90" se lee
   como un segundo precio. La palabra cuesta cuatro caracteres y quita la
   duda. */
.p-stock{font-size:.72rem;color:var(--ink-soft)}
.p-stock::after{content:" en existencia";opacity:.75}
.p-stock.agotado::after,.p-stock.por_agotarse::after{content:""}
.p-stock.por_agotarse{color:var(--alerta);font-weight:600}
.p-stock.agotado{color:var(--peligro);font-weight:600}

/* ── ticket ── */
.caja-ticket{
  position:sticky;top:76px;
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-3);
  overflow:hidden;
}
.ticket-cabeza{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--line);
}
.ticket-cabeza h2{font-size:1rem}
.ticket-cabeza select{
  max-width:170px;padding:6px 8px;border:1.5px solid var(--line);
  border-radius:var(--r-1);background:var(--card);font-size:.82rem;
}

.ticket-lineas{max-height:min(42vh,340px);overflow-y:auto;padding:6px 0}
.ticket-vacio{padding:26px 16px;text-align:center;color:var(--ink-soft);font-size:.88rem}

.linea{
  display:grid;grid-template-columns:1fr auto auto 28px;align-items:center;gap:8px;
  padding:9px 16px;border-bottom:1px dashed var(--line);
}
.linea:last-child{border-bottom:none}
.l-nombre{font-size:.88rem;min-width:0;overflow-wrap:anywhere}
.l-cantidad{display:flex;align-items:center;gap:6px}
.l-cantidad button{
  width:28px;height:28px;border:1.5px solid var(--line);border-radius:var(--r-1);
  background:var(--card);cursor:pointer;font-size:1rem;line-height:1;
}
.l-cantidad span{min-width:22px;text-align:center;font-size:.9rem}
.l-importe{font-size:.9rem;font-weight:600;white-space:nowrap}
.l-quitar{
  width:26px;height:26px;border:none;background:none;cursor:pointer;
  color:var(--ink-soft);font-size:1.1rem;line-height:1;border-radius:var(--r-1);
}

.ticket-totales{padding:14px 16px;border-top:1px solid var(--line);background:#F7FBF9}
.total-fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.total-fila span{font-size:.8rem;color:var(--ink-soft)}
.total-principal strong{font-size:1.6rem;font-weight:700}
.total-bs{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.total-bs strong{font-size:1.05rem;font-weight:600}
.total-bs .sin-tasa{color:var(--alerta)}

.metodos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  padding:12px 16px;border-top:1px solid var(--line);
}
.metodo{
  padding:8px 4px;border:1.5px solid var(--line);border-radius:var(--r-1);
  background:var(--card);cursor:pointer;font-size:.74rem;font-weight:600;
  transition:border-color var(--t-toque) var(--sal),background var(--t-toque) var(--sal),
              color var(--t-toque) var(--sal);
}
.metodo.elegido{background:var(--emerald-dark);border-color:var(--emerald-dark);color:#fff}

.ticket-acciones{display:flex;gap:8px;padding:0 16px 14px}
.ticket-acciones .btn-primario{flex:1}
.ticket-nota{padding:0 16px 14px;font-size:.78rem;color:var(--alerta);min-height:1em}

/* ── móvil: el ticket abajo y anclado ── */
@media(max-width:900px){
  .caja{grid-template-columns:1fr;gap:14px}
  .caja-ticket{position:static}
  .ticket-lineas{max-height:none}
  .metodos{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:560px){
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .metodos{grid-template-columns:repeat(2,1fr)}
  .ticket-cabeza select{max-width:130px}
}


/* Los estados de hover solo donde hay un raton de verdad.
   En un telefono, tocar dispara :hover y el estilo se queda pegado
   hasta que se toca otra cosa: botones resaltados sin razon en la
   pantalla que mas se usa. */
@media (hover: hover) and (pointer: fine){
  .producto:hover:not([disabled]){border-color:var(--emerald);box-shadow:0 6px 18px rgba(3,37,28,.07)}
  .l-cantidad button:hover{border-color:var(--ink)}
  .l-quitar:hover{background:#FDE8E6;color:var(--peligro)}
  .metodo:hover{border-color:var(--ink)}
}