/* Salsas en tarritos (3-oct-2026): lo comparten la carta v1 (/) y la v2 (/2). Ver salsas.js. */

.sx-bandeja {
  display: grid; grid-template-columns: repeat(var(--puestos, 3), minmax(0, 1fr)); gap: 8px;
  margin: 6px 0 14px; padding: 12px; border-radius: 22px;
  background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(243, 241, 234, .10);
  transition: background-color .2s, box-shadow .2s;
}
.sx-puesto { display: grid; place-items: center; height: 100px; min-width: 0; }
.sx-vacio {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  border: 2px dashed rgba(243, 241, 234, .22); color: rgba(243, 241, 234, .42); font-weight: 800; font-size: .9rem;
}
.sx-lleno {
  position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%;
  min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.sx-lleno .sx-n { max-width: 100%; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-weight: 700; }
.sx-lleno .sx-x {
  position: absolute; top: -4px; right: -6px; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: #F3F1EA; color: #121514; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.sx-lleno.entra { animation: sx-cae .5s cubic-bezier(.34, 1.5, .5, 1); }
@keyframes sx-cae { from { transform: translateY(-30px) scale(.5); opacity: 0; } }

.sx-fam {
  display: flex; align-items: center; gap: 6px; margin: 16px 0 8px;
  color: rgba(243, 241, 234, .62); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.sx-fam svg { width: 15px; height: 15px; color: #FFC53A; }
.sx-fam.sx-picantes svg { color: #E2554A; }
.sx-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.sx-tile { position: relative; display: block; }
.sx-tile input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sx-tile input:disabled { pointer-events: none; }
.sx-cara {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 116px;
  padding: 12px 6px 10px; border-radius: 16px; text-align: center;
  background: rgba(243, 241, 234, .045); border: 1.5px solid rgba(243, 241, 234, .10);
  transition: border-color .15s, background-color .15s, opacity .15s;
}
.sx-tarro { position: relative; display: block; }
.sx-svg { display: block; overflow: visible; }
.sx-nombre { font-size: .84rem; font-weight: 700; line-height: 1.15; }
.sx-pica { display: flex; gap: 1px; }
.sx-pica svg { width: 11px; height: 11px; }
.sx-pica svg.off { opacity: .22; filter: grayscale(1); }
.sx-orden {
  position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: #FFC53A; color: #231806; font-size: .75rem; font-weight: 900;
  transform: scale(0); transition: transform .3s cubic-bezier(.34, 1.6, .5, 1);
}
.sx-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sx-tile input:checked + .sx-cara { border-color: #FFC53A; background: rgba(255, 197, 58, .12); }
.sx-tile input:checked + .sx-cara .sx-orden { transform: scale(1); }
.sx-tile input:checked + .sx-cara .sx-tarro { animation: sx-salto .42s ease-out; }
.sx-tile input:checked + .sx-cara .sx-tarro::after {
  content: ''; position: absolute; left: 50%; top: 38%; width: 48px; height: 20px; margin: -10px 0 0 -24px;
  border: 2px solid #FFC53A; border-radius: 50%; opacity: 0; animation: sx-onda .55s ease-out;
}
@keyframes sx-salto { 40% { transform: translateY(-7px) rotate(-5deg); } }
@keyframes sx-onda { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.sx-tile input:disabled + .sx-cara { opacity: .4; }
.sx-tile input:focus-visible + .sx-cara { outline: 3px solid #FFC53A; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .sx-lleno.entra, .sx-tile input:checked + .sx-cara .sx-tarro, .sx-tile input:checked + .sx-cara .sx-tarro::after { animation: none; }
  .sx-orden { transition: none; }
}