/* ==========================================================================
   19 · PUNTOS — piezas prestadas a otras pestañas

   Va DESPUÉS de 10-clientes.css porque reutiliza sus piezas —`.crm-huesos`—.
   El orden de los <link> es la cascada; mover este archivo cambia qué gana.

   Este archivo tiene dos mitades y la frontera importa:

   · ESTA, con el prefijo `pts-` y el `.interruptor`: son piezas que nacieron
     en Puntos y que hoy usan otras pantallas —Reseñas arma sus secciones con
     `.pts-caja` y su embudo con `.pts-via`; la ficha del cliente escribe los
     códigos con `.pts-codigo`; medio panel usa `.btn--min`—. No se renombran
     ni se «limpian» aunque la pestaña de Puntos ya no las use todas.

   · La de abajo, `spt-`, es la pestaña de Puntos rehecha el 23 de septiembre
     de 2026. Solo la usa 14-puntos.js.
   ========================================================================== */

/* --- La cinta de secciones y el aviso de arriba (Reseñas) ----------------- */
.pts-cinta {
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.pts-apagado {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .9rem 1.1rem; margin-bottom: 1.1rem;
  border-radius: var(--radio); background: var(--ambar-sua);
  border: 1.5px solid rgba(240, 144, 30, .38);
  font-size: .92rem; line-height: 1.5; color: var(--tinta-2);
}
.pts-apagado .ico { flex: none; color: var(--naranja); font-size: 1.3em; margin-top: .12em; }
.pts-apagado--prueba {
  background: rgba(240,144,30,.12);
  border-color: rgba(240,144,30,.45);
  color: var(--tinta-2);
}
.pts-apagado--prueba .ico { color: var(--naranja); }

/* --- Las cajas (Reseñas) --------------------------------------------------- */
.pts-caja {
  padding: 1.2rem; border-radius: var(--radio-g);
  background: var(--surface); border: 1.5px solid var(--linea-sutil);
  margin-bottom: 1rem;
}
.pts-caja__cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-bottom: .35rem;
}
.pts-caja__t {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-size: 1.08rem; font-weight: 700; color: var(--tinta);
  margin-bottom: .35rem;
}
.pts-caja__cab .pts-caja__t { margin-bottom: 0; }
.pts-caja__t .ico { color: var(--rojo); font-size: 1.1em; }
.pts-caja__d {
  font-size: .87rem; line-height: 1.55; color: var(--tinta-2); margin-bottom: 1rem;
  max-width: 62ch;
}
.pts-caja__d b { color: var(--tinta); font-weight: 600; }

.pts-nota {
  font-size: .85rem; line-height: 1.5; color: var(--tinta-3);
  padding: .7rem .85rem; border-radius: 11px; background: var(--crema);
  border: 1px solid var(--linea-sutil); margin-top: .8rem;
}
.pts-nota--mal {
  background: var(--rojo-sua); border-color: rgba(176, 30, 36, .3); color: var(--rojo-osc);
}

/* El código de canje va en letra de máquina y espaciado: la cajera lo copia
   letra por letra de la pantalla del celular del cliente, y en una fuente
   proporcional una M y una N se funden. */
.pts-codigo { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; }

/* Guardar al pie, pegado al borde de abajo mientras se baja (Reseñas). */
.pts-guardar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .9rem 0;
  background: linear-gradient(var(--crema-2, transparent) 0%, var(--crema) 45%);
}
.pts-guardar span { font-size: .84rem; color: var(--naranja); font-weight: 600; }

/* Un botón pequeño, para los que van dentro de una fila o al lado de un campo. */
.btn--min { padding: .42rem .75rem; font-size: .82rem; }

/* El interruptor. Es un <button role="switch">, no una casilla: lo que
   comunica es «encendido / apagado», no «marcado». */
.interruptor {
  width: 3.1rem; height: 1.75rem; border-radius: 999px; padding: 0;
  background: var(--crema-3); border: 1.5px solid var(--linea);
  cursor: pointer; position: relative; flex: none;
  transition: background var(--d-rapido) var(--ease), border-color var(--d-rapido) var(--ease);
}
.interruptor span {
  position: absolute; top: 50%; left: .18rem; translate: 0 -50%;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 4px rgba(33, 22, 16, .28);
  transition: translate var(--d-rapido) var(--resorte);
}
.interruptor--on { background: var(--verde); border-color: var(--verde); }
.interruptor--on span { translate: 1.32rem -50%; }
.interruptor:disabled { opacity: .5; cursor: not-allowed; }
.interruptor:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }

/* Dos campos del cajón, uno al lado del otro. */
.pts-par { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.pts-par > div { min-width: 0; }

/* --------------------------------------------------------------------------
   Por dónde entra algo — Puntos y el embudo de Reseñas

   Tres filas, cada una con su cifra a la derecha y una barra debajo. No es un
   gráfico de torta y no debería serlo: cada una lleva su propia advertencia,
   algo que una torta no puede mostrar. La barra va DEBAJO y a todo el ancho:
   al lado del número se lee como una tabla de progreso de tareas.
   -------------------------------------------------------------------------- */
.pts-vias { display: grid; gap: 0; }
.pts-via {
  display: grid; align-items: center; gap: .1rem .9rem;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "i t n" ". b b" ". o o";
  padding: .95rem 0;
  border-top: 1px solid var(--linea-sutil);
}
.pts-via:first-of-type { border-top: 0; }

.pts-via__i {
  grid-area: i;
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 12px; background: var(--crema-2); color: var(--tinta-2);
}
.pts-via__i .ico { width: 19px; height: 19px; }

.pts-via__t { grid-area: t; min-width: 0; }
.pts-via__t b { display: block; font-size: .95rem; color: var(--tinta); }
.pts-via__t span { display: block; margin-top: .1rem; font-size: .81rem;
                   color: var(--tinta-3); text-wrap: pretty; }

.pts-via__n { grid-area: n; text-align: right; }
.pts-via__n strong {
  display: block; font-family: var(--display); font-size: 1.5rem;
  line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums;
}
.pts-via__n small { font-size: .78rem; color: var(--tinta-3); }

.pts-via__barra {
  grid-area: b; height: 5px; margin-top: .55rem;
  border-radius: 3px; background: var(--crema-2); overflow: hidden;
}
.pts-via__barra i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--rojo), var(--naranja));
  transition: width .5s var(--ease);
}

/* En cero se apaga todo menos el título: una fila a media tinta dice «acá no
   ha pasado nada» sin escribirlo, y deja que la vista caiga en las que sí. */
.pts-via--vacio .pts-via__i { background: var(--crema-2); color: var(--tinta-3); opacity: .6; }
.pts-via--vacio .pts-via__n strong { color: var(--tinta-3); }
.pts-via--vacio .pts-via__barra i { background: var(--crema-3); }

/* La advertencia de que ese camino está desconectado. Va dentro de la fila y
   no en un aviso general arriba: lo que está apagado es ESTE camino. */
.pts-via__off {
  grid-area: o; display: flex; align-items: flex-start; gap: .45rem;
  margin: .6rem 0 0; padding: .55rem .7rem; border-radius: var(--radio);
  background: var(--rojo-sua); border: 1px solid rgba(176,30,36,.28);
  font-size: .82rem; line-height: 1.4; color: var(--tinta-2); text-wrap: pretty;
}
.pts-via__off .ico { flex: none; width: 16px; height: 16px; margin-top: .1rem;
                     color: var(--rojo); }
.pts-via--off { padding-left: .8rem; border-left: 3px solid var(--rojo); }
.pts-via--off .pts-via__i { background: var(--rojo-sua); color: var(--rojo); opacity: 1; }

/* El periodo va a la derecha del título; en el celular baja debajo. */
.pts-cam__cab { display: flex; flex-wrap: wrap; align-items: flex-start;
                justify-content: space-between; gap: .7rem 1rem; }
.pts-cam__grupo {
  margin: 1.1rem 0 .1rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-3);
}

/* El botón de la página del pedido: tres cifras y dos semanas de barras. La
   clara es quien lo tocó, la llena quien sumó; la distancia entre las dos es
   lo que se pierde en el formulario. */
.pts-boton {
  display: grid; gap: 1rem; margin: .8rem 0 .2rem; padding: 1rem;
  border-radius: var(--radio); background: var(--crema-2);
}
.pts-boton__cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.pts-boton__cifras strong {
  display: block; font-family: var(--display); font-size: 1.6rem; line-height: 1;
  color: var(--tinta); font-variant-numeric: tabular-nums;
}
.pts-boton__cifras span { display: block; margin-top: .25rem; font-size: .78rem;
                          color: var(--tinta-3); text-wrap: pretty; }
.pts-dias { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; align-items: end; }
.pts-dias__d { display: grid; gap: .3rem; justify-items: center; min-width: 0; }
.pts-dias__col { position: relative; width: 100%; max-width: 22px; height: 64px; }
.pts-dias__col i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 3px 3px 0 0;
                   min-height: 2px; }
.pts-dias__t { background: var(--crema-3); }
.pts-dias__b { background: linear-gradient(0deg, var(--rojo), var(--naranja)); }
.pts-dias__d small { font-size: .68rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }


/* ==========================================================================
   19b · SUSHIPUNTOS

   Lo que la hace sentir liviana es lo que NO tiene: una sola superficie por
   bloque, casi sin bordes de color, un acento —el rojo— para lo que hay que
   mirar, y el oscuro de nori reservado para dos cosas que no pueden pasar
   desapercibidas: el paso de VectorPOS después de entregar y la frase de
   Reglas que dice lo que se está firmando.

   Todo lo que se anima es `transform`, `opacity` o `clip-path`, igual que en
   el Resumen del negocio: el computador de la caja no es un computador nuevo.
   ========================================================================== */
@keyframes spt-entra  { from { opacity: 0; transform: translateY(12px); } }
@keyframes spt-sube   { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes spt-pop    { 0% { transform: scale(.82); } 60% { transform: scale(1.06); } }
@keyframes spt-caret  { 50% { opacity: 0; } }
@keyframes spt-sacude { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes spt-traza  { to { stroke-dashoffset: 0; } }
@keyframes spt-crece-x { from { transform: scaleX(0); } }
@keyframes spt-latido-carga { to { background-position: -120% 0; } }
@keyframes spt-brilla {
  0%   { box-shadow: 0 0 0 0 rgba(240,144,30,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(240,144,30,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,144,30,0); }
}
@keyframes spt-onda {
  from { transform: scale(1); opacity: .45; }
  70%, to { transform: scale(3.2); opacity: 0; }
}

/* --------------------------------------------------------------------------
   La cabecera
-------------------------------------------------------------------------- */
.spt-cab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
  margin: .2rem 0 1.4rem;
  animation: spt-entra .6s var(--ease) both;
}
.spt-cab__i { min-width: 0; }
.spt-cab__marca { display: flex; gap: .45rem; flex-wrap: wrap; margin: 0; }
.spt-estado {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .22rem .6rem .22rem .5rem; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--linea-sutil);
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3);
}
.spt-estado i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--arena); }
.spt-estado--on { color: var(--verde); }
.spt-estado--on i { background: var(--verde-cl); }
.spt-estado--on i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--verde-cl);
  animation: spt-onda 2.8s var(--ease-suave) infinite;
}
.spt-estado--off { color: var(--rojo); background: var(--rojo-sua); border-color: transparent; }
.spt-estado--off i { background: var(--rojo); }
.spt-estado--prueba { color: #A8650E; background: var(--ambar-sua); border-color: transparent; }

.spt-cab__t {
  margin-top: .45rem;
  font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.4rem); font-weight: 700; letter-spacing: -.03em;
}
.spt-cab__t span { color: var(--rojo); }
.spt-cab__frase {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .55rem;
  margin: .45rem 0 0; font-size: .92rem; color: var(--tinta-3); text-wrap: pretty;
}
.spt-cab__frase b { color: var(--tinta); font-weight: 600; }
.spt-sep { font-style: normal; color: var(--crema-3); }

.spt-cab__herr { display: flex; gap: .5rem; flex-wrap: wrap; }
.spt-herr {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem .95rem; border-radius: 13px;
  background: var(--surface); border: 1px solid var(--linea-sutil);
  font-size: .85rem; font-weight: 600; color: var(--tinta-2); text-decoration: none;
  box-shadow: 0 1px 2px rgba(33,22,16,.04);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease);
}
.spt-herr .ico { color: var(--rojo); font-size: 1.05rem; }
.spt-herr:hover {
  color: var(--tinta); border-color: var(--linea); transform: translateY(-1px);
  box-shadow: 0 8px 22px -12px rgba(33,22,16,.35);
}

/* Los avisos de arriba: prueba y pausa. */
.spt-banda {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .75rem 1rem; margin-bottom: 1rem; border-radius: 14px;
  background: var(--ambar-sua); border: 1px solid rgba(240,144,30,.32);
  font-size: .86rem; line-height: 1.5; color: var(--tinta-2);
  animation: spt-entra .5s var(--ease) both;
}
.spt-banda > .ico { flex: none; font-size: 1.15rem; margin-top: .1rem; color: var(--naranja); }
.spt-banda p { margin: 0; flex: 1; text-wrap: pretty; }
.spt-banda b { color: var(--tinta); }
.spt-banda .btn { flex: none; align-self: center; }
.spt-banda--mal { background: var(--rojo-sua); border-color: rgba(176,30,36,.25); }
.spt-banda--mal > .ico { color: var(--rojo); }

/* Guardar Reglas repinta la cabecera sin volver a animarla. */
.spt--quieto .spt-cab, .spt--quieto .spt-banda { animation: none; }

.spt-mando { margin-bottom: 1.4rem; }
.spt-mando .tbl-seg--linea { display: flex; }

/* --------------------------------------------------------------------------
   El cuerpo: entra escalonado al cambiar de sección, quieto al repintar
-------------------------------------------------------------------------- */
.spt-cuerpo > * { animation: spt-entra .5s var(--ease) both; }
.spt-cuerpo > :nth-child(2) { animation-delay: 60ms; }
.spt-cuerpo > :nth-child(3) { animation-delay: 120ms; }
.spt-cuerpo > :nth-child(n+4) { animation-delay: 170ms; }
.spt-quieto > *, .spt-quieto .spt-premio { animation: none; }

/* Las piezas de texto que se repiten. */
.spt-h {
  font-family: var(--display); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
}
.spt-h2 {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-size: 1.06rem; font-weight: 700; letter-spacing: -.012em;
}
.spt-d {
  margin: .35rem 0 0; max-width: 62ch;
  font-size: .87rem; line-height: 1.55; color: var(--tinta-3); text-wrap: pretty;
}
.spt-n {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 .4rem;
  border-radius: 99px; background: var(--rojo); color: #fff;
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.spt-n--gris { background: var(--crema-2); color: var(--tinta-3); }

.spt-bloque {
  padding: 1.15rem 1.25rem; margin-bottom: 1rem; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--linea-sutil);
}
.spt-bloque__cab { margin-bottom: .4rem; }

.spt-vacio {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem;
  padding: 1.8rem 1rem 1.4rem; color: var(--tinta-3);
}
.spt-vacio > .ico { font-size: 2.1rem; color: var(--crema-3); margin-bottom: .35rem; }
.spt-vacio b { color: var(--tinta-2); font-size: .98rem; }
.spt-vacio p { margin: 0; font-size: .85rem; line-height: 1.5; max-width: 42ch; text-wrap: pretty; }

/* Lo plegable: historial, premios apagados, grupos de reglas. */
.spt-plegable > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  list-style: none; cursor: pointer; user-select: none;
}
.spt-plegable > summary::-webkit-details-marker { display: none; }
.spt-plegable > summary > .ico,
.spt-grupo > summary > .ico,
.spt-mas > summary > .ico:last-child {
  flex: none; color: var(--tinta-3); transition: transform .35s var(--ease);
}
.spt-plegable[open] > summary > .ico,
.spt-grupo[open] > summary > .ico,
.spt-mas[open] > summary > .ico:last-child { transform: rotate(180deg); }
.spt-plegable[open] > summary { margin-bottom: .4rem; }
.spt-plegable--suelto { margin-top: 1.6rem; }
.spt-plegable--suelto > summary { padding: .4rem .1rem; }
.spt-plegable--suelto[open] > summary { margin-bottom: 1rem; }

/* Las filas de las listas: canjes y facturas. */
.spt-filas { list-style: none; margin: .6rem 0 0; padding: 0; }
.spt-fila {
  display: grid; align-items: center; gap: .25rem 1rem;
  grid-template-columns: auto minmax(0, 1fr) auto 2.2rem;
  padding: .8rem .15rem; border-top: 1px solid var(--linea-sutil);
}
.spt-fila:first-child { border-top: 0; }
.spt-fila__t { min-width: 0; display: flex; flex-direction: column; }
.spt-fila__t b { font-size: .93rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spt-fila__t span { font-size: .8rem; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spt-fila__e { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; text-align: right; }
.spt-fila__e small { font-size: .75rem; color: var(--tinta-3); white-space: nowrap; }
.spt-fila--apagada .spt-fila__t b, .spt-fila--apagada .spt-fila__cod { color: var(--tinta-3); }
.spt-fila__cod {
  padding: .3rem .55rem; border-radius: 9px; background: var(--crema);
  font-size: .92rem; color: var(--tinta);
}
.spt-icono {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  color: var(--tinta-3);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.spt-icono:hover { background: var(--rojo-sua); color: var(--rojo); }

/* Una línea que corre mientras llega una lista nueva. */
.spt-cargando { position: relative; opacity: .55; transition: opacity .2s var(--ease) .12s; pointer-events: none; }

/* --------------------------------------------------------------------------
   La sección 1: Entregar un premio
-------------------------------------------------------------------------- */
.spt-entrega {
  display: grid; gap: 1.4rem 2.2rem; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  padding: clamp(1.2rem, 3vw, 2rem); margin-bottom: 1rem; border-radius: 26px;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(240,144,30,.11), transparent 55%),
    var(--surface);
  border: 1px solid var(--linea-sutil);
  box-shadow: 0 1px 2px rgba(33,22,16,.04), 0 18px 40px -28px rgba(33,22,16,.3);
}
.spt-entrega__form { display: flex; flex-direction: column; min-width: 0; }

/* Las seis casillas. El <input> de verdad las cubre, invisible. */
.spt-celdas { position: relative; margin: 1.3rem 0 1rem; }
.spt-celdas__in {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; cursor: text;
  font-size: 16px;               /* por debajo de 16 el iPhone acerca la página */
  text-transform: uppercase;
}
.spt-celdas__v { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.spt-celdas__v i {
  display: grid; place-items: center; height: clamp(3.4rem, 2.6rem + 2.4vw, 4.4rem);
  border-radius: 14px; background: var(--crema); border: 1.5px solid var(--linea);
  font-style: normal; font-weight: 700; color: var(--tinta);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem);
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.spt-celdas__v i.lleno {
  background: var(--surface); border-color: rgba(33,22,16,.3);
  animation: spt-pop .3s var(--resorte);
}
.spt-celdas__v i.aqui { border-color: var(--naranja); box-shadow: 0 0 0 4px var(--ambar-sua); }
.spt-celdas__v i.aqui:empty::after {
  content: ""; width: 2px; height: 42%; border-radius: 2px; background: var(--naranja);
  animation: spt-caret 1.05s steps(1) infinite;
}
.spt-celdas--mal .spt-celdas__v { animation: spt-sacude .42s var(--ease-io); }
.spt-celdas--mal .spt-celdas__v i.lleno { border-color: var(--rojo); background: var(--rojo-sua); }
.spt-celdas--ok .spt-celdas__v i.lleno { border-color: rgba(21,122,71,.5); background: var(--verde-sua); }
/* Un código viejo, de más de seis: el campo se destapa tal cual. */
.spt-celdas--largo .spt-celdas__v { visibility: hidden; }
.spt-celdas--largo .spt-celdas__in {
  opacity: 1; padding: 0 1rem; border-radius: 14px;
  background: var(--surface); border: 1.5px solid var(--naranja);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 1.4rem; letter-spacing: .14em; color: var(--tinta);
}
.spt-celdas--largo .spt-celdas__in:focus { outline: none; box-shadow: 0 0 0 4px var(--ambar-sua); }

.spt-entrega__pie { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.spt-donde {
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .84rem; color: var(--tinta-3);
}
.spt-donde > .ico { color: var(--rojo); }

/* El lado del resultado. Vacío, es un marco que dice qué va a aparecer. */
.spt-ficha { min-width: 0; display: flex; flex-direction: column; }
.spt-ficha:empty {
  min-height: 14rem; border-radius: 20px; border: 1.5px dashed var(--crema-3);
  background:
    repeating-linear-gradient(116deg, rgba(33,22,16,.02) 0 12px, transparent 12px 24px);
  align-items: center; justify-content: center;
}
.spt-ficha:empty::before {
  content: "El premio aparece acá"; font-size: .84rem; color: var(--arena); font-weight: 500;
}
.spt-ficha__buscando {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 14rem; border-radius: 20px; background: var(--crema);
  font-size: .9rem; color: var(--tinta-3);
}
.spt-ficha__buscando span {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--crema-3); border-top-color: var(--rojo);
  animation: spt-gira .8s linear infinite;
}
@keyframes spt-gira { to { transform: rotate(360deg); } }

.spt-canje {
  flex: 1; display: flex; flex-direction: column; gap: .55rem;
  padding: 1.25rem 1.35rem; border-radius: 20px;
  background: var(--crema); border: 1.5px solid var(--linea-sutil);
  animation: spt-sube .42s var(--ease) both;
}
.spt-canje--vivo {
  background: var(--surface); border-color: rgba(21,122,71,.32);
  box-shadow: 0 0 0 5px var(--verde-sua);
}
.spt-canje--mal { align-items: flex-start; }
.spt-canje__ico { font-size: 1.8rem; color: var(--rojo); }
.spt-canje__cab { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.spt-canje__cab .pts-codigo { font-size: 1.05rem; color: var(--tinta-2); }
.spt-canje__premio {
  font-family: var(--display); font-weight: 700; line-height: 1.12; letter-spacing: -.022em;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); color: var(--tinta);
}
.spt-canje__quien { margin: -.15rem 0 0; font-size: .88rem; color: var(--tinta-3); }
.spt-canje__nota { margin: .2rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }
.spt-canje__datos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: .35rem 0 .15rem;
}
.spt-canje__datos div { padding: .55rem .7rem; border-radius: 12px; background: var(--crema); min-width: 0; }
.spt-canje__datos dt {
  font-size: .64rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-3);
}
.spt-canje__datos dd {
  margin: .1rem 0 0; font-weight: 700; font-size: .95rem; color: var(--tinta);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spt-canje__b { justify-content: center; margin-top: .35rem; }
.spt-canje__despues {
  display: flex; gap: .45rem; margin: .1rem 0 0;
  font-size: .8rem; line-height: 1.45; color: var(--tinta-3);
}
.spt-canje__despues .ico { flex: none; margin-top: .15rem; }
.spt-canje__alto {
  display: flex; gap: .5rem; align-items: flex-start; margin: 0;
  padding: .65rem .8rem; border-radius: 12px; background: var(--rojo-sua);
  font-size: .86rem; color: var(--rojo-osc); font-weight: 500;
}

/* El timbrazo: no es un error, pero es el único paso que no se salta. */
.spt-timbrazo {
  display: flex; gap: .7rem; align-items: flex-start; margin: .2rem 0 0; cursor: pointer;
  padding: .8rem .9rem; border-radius: 14px;
  background: var(--rojo-sua); border: 1.5px solid rgba(176,30,36,.3);
  font-size: .87rem; font-weight: 500; line-height: 1.45; color: var(--tinta-2);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.spt-timbrazo input { flex: none; width: 20px; height: 20px; margin-top: .05rem; accent-color: var(--verde); }
.spt-timbrazo b { color: var(--rojo-osc); }
.spt-timbrazo small { display: block; margin-top: .15rem; color: var(--tinta-3); font-weight: 400; }
.spt-timbrazo:has(input:checked) { background: var(--verde-sua); border-color: rgba(21,122,71,.35); }
.spt-timbrazo:has(input:checked) b { color: var(--verde); }
.spt-sacude { animation: spt-sacude .42s var(--ease-io); }

/* Entregado: el visto se dibuja, y el paso de VectorPOS va en oscuro porque es
   el que se olvida. */
.spt-canje--hecho { background: var(--surface); border-color: var(--linea-sutil); gap: .9rem; }
.spt-hecho { display: flex; align-items: center; gap: 1rem; }
.spt-hecho__v { width: 54px; height: 54px; flex: none; overflow: visible; }
.spt-hecho__v circle {
  fill: var(--verde); transform-origin: center; transform-box: fill-box;
  animation: spt-pop .5s var(--resorte) both;
}
.spt-hecho__v path {
  fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 36; stroke-dashoffset: 36;
  animation: spt-traza .42s .22s var(--ease) forwards;
}
.spt-hecho__e {
  margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--verde);
}
.spt-vpos {
  padding: 1rem 1.1rem; border-radius: 16px; background: var(--nori); color: rgba(253,244,231,.85);
  font-size: .9rem; line-height: 1.5;
}
.spt-vpos p { margin: .3rem 0 0; }
.spt-vpos__e {
  font-size: .66rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--naranja-cl);
}
.spt-canje__otro { align-self: flex-start; }

/* --------------------------------------------------------------------------
   La sección 2: Premios
-------------------------------------------------------------------------- */
.spt-seccab {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem;
  flex-wrap: wrap; margin-bottom: 1.2rem;
}
.spt-seccab > div { min-width: 0; flex: 1 1 22rem; }

.spt-galeria {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
.spt-premio {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: 22px; overflow: hidden; text-align: left;
  background: var(--surface); border: 1px solid var(--linea-sutil);
  box-shadow: 0 1px 2px rgba(33,22,16,.04);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  animation: spt-entra .5s var(--ease) both;
  animation-delay: min(calc(var(--i, 0) * 45ms), 360ms);
}
.spt-premio:hover {
  transform: translateY(-3px); border-color: var(--linea);
  box-shadow: 0 22px 40px -26px rgba(33,22,16,.5);
}
.spt-premio__foto {
  position: relative; aspect-ratio: 16 / 11; overflow: hidden;
  display: grid; place-items: center;
  background: var(--crema-2) var(--foto) center / cover no-repeat;
  transition: filter .4s var(--ease);
}
/* Un velo abajo para que la pastilla de puntos se lea sobre cualquier foto. */
.spt-premio__foto::after {
  content: ""; position: absolute; inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(22,16,13,.42));
  pointer-events: none;
}
.spt-premio__foto--sin {
  background:
    repeating-linear-gradient(116deg, rgba(176,30,36,.05) 0 12px, transparent 12px 24px),
    var(--crema-2);
  color: var(--crema-3); font-size: 2.8rem;
}
.spt-premio__foto--sin::after { display: none; }
.spt-premio__pts {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 1;
  display: inline-flex; align-items: baseline; gap: .25rem;
  padding: .32rem .7rem .3rem; border-radius: 99px;
  background: rgba(22,16,13,.72); color: rgba(255,255,255,.8);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .72rem; font-weight: 600;
}
.spt-premio__pts b {
  font-family: var(--display); font-size: 1.12rem; font-weight: 700; color: #fff;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.spt-premio__estado {
  position: absolute; top: .7rem; left: .7rem; z-index: 1;
  padding: .22rem .6rem; border-radius: 99px;
  background: var(--surface); color: var(--tinta-2);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.spt-premio__cuerpo {
  flex: 1; display: flex; flex-direction: column; gap: .3rem;
  padding: .95rem 1.05rem 1rem;
}
.spt-premio h4 {
  font-size: 1.08rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2;
  overflow-wrap: anywhere;
}
.spt-premio__gasto { margin: 0; font-size: .84rem; line-height: 1.45; color: var(--tinta-2); }
.spt-premio__gasto b { color: var(--tinta); font-weight: 700; }
.spt-premio__gasto span { color: var(--tinta-3); }
.spt-premio__cond { margin: 0; font-size: .77rem; line-height: 1.45; color: var(--tinta-3); }
.spt-premio__pie {
  margin-top: auto; padding-top: .75rem;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  border-top: 1px dashed var(--linea); font-size: .76rem; color: var(--tinta-3);
}
.spt-premio__pie > span { padding-top: .1rem; }
/* La ficha entera abre el cajón; el interruptor va por encima y no lo abre. */
.spt-premio__abrir { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.spt-premio__abrir:focus-visible { outline: 2.5px solid var(--naranja); outline-offset: -3px; }
.spt-premio .interruptor { z-index: 2; }

.interruptor--min { width: 2.55rem; height: 1.45rem; }
.interruptor--min span { width: 1rem; height: 1rem; left: .16rem; }
.interruptor--min.interruptor--on span { translate: 1.08rem -50%; }

.spt-premio--off .spt-premio__foto { filter: grayscale(1) opacity(.62); }
.spt-premio--off h4 { color: var(--tinta-2); }
.spt-premio--recien { animation: spt-brilla 1.6s var(--ease) 1 both; }

/* La ficha de «nuevo»: el mismo tamaño que un premio, para que se lea como
   el siguiente de la fila y no como un botón suelto. */
.spt-premio--nuevo {
  align-items: center; justify-content: center; gap: .35rem; min-height: 17rem;
  padding: 1.4rem; text-align: center;
  background: transparent; border: 1.5px dashed var(--crema-3); box-shadow: none;
  color: var(--tinta-3);
}
.spt-premio--nuevo b { font-size: 1rem; color: var(--tinta-2); transition: color .3s var(--ease); }
.spt-premio--nuevo small { font-size: .8rem; line-height: 1.45; max-width: 22ch; }
.spt-premio__mas {
  width: 58px; height: 58px; margin-bottom: .5rem; border-radius: 19px;
  display: grid; place-items: center; font-size: 1.5rem; color: var(--rojo);
  background: var(--surface); box-shadow: 0 10px 24px -14px rgba(33,22,16,.45);
  transition: transform .45s var(--resorte), background .3s var(--ease), color .3s var(--ease);
}
.spt-premio--nuevo:hover { border-color: var(--rojo); background: var(--rojo-sua); transform: none; box-shadow: none; }
.spt-premio--nuevo:hover b { color: var(--rojo); }
.spt-premio--nuevo:hover .spt-premio__mas { transform: rotate(90deg) scale(1.06); background: var(--rojo); color: #fff; }

.spt-premio--hueso {
  min-height: 17rem; border: 0;
  background: linear-gradient(100deg, var(--crema-2) 30%, var(--crema) 50%, var(--crema-2) 70%);
  background-size: 220% 100%;
  animation: spt-latido-carga 1.3s var(--ease-suave) infinite;
}

/* --- El cajón de un premio -------------------------------------------------- */
.spt-paso {
  display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  background: var(--rojo); color: #fff; font-size: .64rem; letter-spacing: 0;
}
.spt-ed__resto { margin-top: 1.6rem; transition: opacity .35s var(--ease), filter .35s var(--ease); }
.spt-ed__resto--off { opacity: .38; filter: saturate(.2); pointer-events: none; }
.spt-ed__pista:empty { display: none; }
.spt-ed__pista { margin: .5rem 0 0; }

.spt-busca { position: relative; display: block; margin: 0; }
.spt-busca > .ico {
  position: absolute; left: .9rem; top: 50%; translate: 0 -50%; z-index: 1;
  color: var(--tinta-3); pointer-events: none;
}
.spt-busca .campo { padding-left: 2.45rem; }

.spt-platos {
  list-style: none; margin: .6rem 0 0; padding: .35rem;
  max-height: 20rem; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 16px; background: var(--crema); border: 1.5px solid var(--linea-sutil);
}
.spt-plato {
  width: 100%; display: flex; align-items: center; gap: .75rem;
  padding: .45rem .55rem; border-radius: 12px; text-align: left;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.spt-plato:hover { background: var(--surface); box-shadow: 0 1px 3px rgba(33,22,16,.08); }
.spt-plato--on { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--rojo); }
.spt-plato__f, .spt-elegido__f {
  flex: none; display: grid; place-items: center;
  background: var(--crema-2) center / cover no-repeat; color: var(--arena);
}
.spt-plato__f { width: 46px; height: 46px; border-radius: 12px; }
.spt-plato__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.spt-plato__t b { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spt-plato__t small { font-size: .76rem; color: var(--tinta-3); }
.spt-plato .eti { flex: none; }
.spt-platos__nada { padding: 1rem; text-align: center; font-size: .85rem; color: var(--tinta-3); }
.spt-platos__volver { margin-top: .5rem; }

.spt-elegido {
  display: flex; align-items: center; gap: .9rem; padding: .7rem .75rem;
  border-radius: 18px; background: var(--crema); border: 1.5px solid var(--linea-sutil);
  animation: spt-sube .35s var(--ease) both;
}
.spt-elegido__f { width: 64px; height: 64px; border-radius: 15px; font-size: 1.3rem; }
.spt-elegido__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.spt-elegido__t b { font-family: var(--display); font-size: 1.1rem; letter-spacing: -.012em; }
.spt-elegido__t small { font-size: .8rem; color: var(--tinta-3); }

.spt-pts-campo { position: relative; }
.spt-pts-campo .campo {
  padding: .75rem 6.2rem .75rem 1rem;
  font-family: var(--display); font-weight: 700; font-size: 1.9rem; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.spt-pts-campo span {
  position: absolute; right: 1.1rem; top: 50%; translate: 0 -50%;
  font-size: .9rem; font-weight: 600; color: var(--tinta-3); pointer-events: none;
}
.spt-sugiere { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: .45rem; margin-top: .75rem; }
.spt-sugiere:empty { display: none; }
.spt-sugiere__e { grid-column: 1 / -1; font-size: .76rem; font-weight: 600; color: var(--tinta-3); }
/* Se reparten el ancho: cuatro en fila, y en el celular dos y dos —nunca tres
   y uno suelto—. */
.spt-chip {
  min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: .05rem;
  padding: .5rem .7rem; border-radius: 13px;
  background: var(--crema); border: 1.5px solid var(--linea-sutil);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.spt-chip b { font-family: var(--display); font-size: 1rem; color: var(--tinta); font-variant-numeric: tabular-nums; }
.spt-chip small { font-size: .71rem; color: var(--tinta-3); }
.spt-chip:hover { border-color: var(--naranja); transform: translateY(-1px); }
.spt-chip--on { border-color: var(--rojo); background: var(--rojo-sua); }
.spt-chip--on b { color: var(--rojo); }

/* La cuenta en vivo va en oscuro: es la respuesta a «¿esto es alcanzable?». */
.spt-cuenta {
  margin-top: .9rem; padding: .95rem 1.05rem; border-radius: 16px;
  background: var(--nori); color: rgba(253,244,231,.78);
  font-size: .88rem; line-height: 1.55;
  animation: spt-sube .3s var(--ease) both;
}
.spt-cuenta:empty { display: none; }
.spt-cuenta b { color: #fff; }
.spt-cuenta__ojo {
  display: flex; gap: .45rem; align-items: flex-start; margin-top: .55rem;
  font-size: .82rem; color: var(--naranja-cl);
}
.spt-cuenta__ojo .ico { flex: none; margin-top: .15rem; }

.spt-mas {
  margin-top: 1.5rem; border-radius: 16px; border: 1.5px solid var(--linea-sutil);
  background: var(--surface);
}
.spt-mas > summary {
  display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem;
  list-style: none; cursor: pointer; user-select: none;
}
.spt-mas > summary::-webkit-details-marker { display: none; }
.spt-mas > summary > .ico:first-child { flex: none; color: var(--rojo); font-size: 1.1rem; }
.spt-mas > summary > span { flex: 1; display: flex; flex-direction: column; font-weight: 600; font-size: .92rem; }
.spt-mas > summary small { font-weight: 400; font-size: .78rem; color: var(--tinta-3); }
.spt-mas__c { padding: 0 1rem 1.1rem; border-top: 1px solid var(--linea-sutil); }
.spt-mas + .marca-opcion { margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   La sección 3: Cómo va
-------------------------------------------------------------------------- */
/* Cuatro en fila o dos y dos, nunca tres y una suelta debajo. */
.spt-kpis {
  display: grid; gap: .75rem; margin-bottom: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .spt-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spt-kpi {
  display: flex; flex-direction: column; gap: .2rem; min-width: 0;
  padding: 1.05rem 1.15rem; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--linea-sutil);
}
.spt-kpi__e {
  font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tinta-3);
}
.spt-kpi__n {
  font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -.03em;
  font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.35rem); color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.spt-kpi__n small { font-size: .55em; margin-left: .08em; color: var(--tinta-3); letter-spacing: 0; }
.spt-kpi__p { font-size: .8rem; line-height: 1.4; color: var(--tinta-3); }
.spt-kpi__barra {
  display: block; height: 5px; margin-top: .55rem; overflow: hidden;
  border-radius: 3px; background: var(--crema-2);
}
.spt-kpi__barra i {
  display: block; height: 100%; border-radius: 3px; background: var(--tinta-3);
  transform-origin: left; animation: spt-crece-x .9s .15s var(--ease) both;
}
.spt-kpi--bien  .spt-kpi__barra i { background: var(--verde-cl); }
.spt-kpi--flojo .spt-kpi__barra i { background: var(--naranja); }

.spt-doble {
  display: grid; gap: 1rem; align-items: start;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
.spt-doble .spt-bloque { margin-bottom: 0; }
.spt-caminos .pts-via:first-of-type { border-top: 0; }

.spt-atajos { display: flex; flex-direction: column; gap: .6rem; }
.spt-atajo {
  display: flex; align-items: center; gap: .9rem; width: 100%;
  padding: 1rem 1.1rem; border-radius: 18px; text-align: left;
  background: var(--surface); border: 1px solid var(--linea-sutil);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.spt-atajo:hover { transform: translateY(-2px); border-color: var(--linea); box-shadow: 0 16px 32px -24px rgba(33,22,16,.5); }
.spt-atajo__i {
  width: 40px; height: 40px; flex: none; border-radius: 13px;
  display: grid; place-items: center; background: var(--crema-2); color: var(--tinta-2); font-size: 1.1rem;
}
.spt-atajo--ojo .spt-atajo__i { background: var(--rojo); color: #fff; }
.spt-atajo__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.spt-atajo__t b { font-size: .93rem; }
.spt-atajo__t small { font-size: .79rem; color: var(--tinta-3); }
.spt-atajo > .ico:last-child { flex: none; color: var(--tinta-3); transition: transform .35s var(--ease), color .35s var(--ease); }
.spt-atajo:hover > .ico:last-child { transform: translateX(3px); color: var(--rojo); }

/* --------------------------------------------------------------------------
   La sección 4: Facturas
-------------------------------------------------------------------------- */
.spt-espejo {
  display: flex; align-items: center; gap: .6rem 1.2rem; flex-wrap: wrap;
  padding: .85rem 1rem; margin-bottom: .9rem; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--linea-sutil);
  font-size: .84rem; color: var(--tinta-3);
}
.spt-espejo__t { margin: 0; display: flex; flex-direction: column; }
.spt-espejo__t b { color: var(--tinta); font-weight: 600; }
.spt-espejo__t small { font-size: .78rem; color: var(--rojo); }
.spt-espejo__sedes { display: flex; gap: .3rem 1.1rem; flex-wrap: wrap; }
.spt-espejo__sedes b { color: var(--tinta-2); font-weight: 600; }
.spt-espejo__sedes em { font-style: normal; color: var(--rojo); }
.spt-espejo .btn { margin-left: auto; }
.spt-latido {
  position: relative; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--rojo);
}
.spt-latido--vivo { background: var(--verde-cl); }
.spt-latido--vivo::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--verde-cl);
  animation: spt-onda 2.8s var(--ease-suave) infinite;
}

.spt-filtros { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.spt-filtros .spt-busca { flex: 1 1 16rem; }
.spt-filtros .campo { background: var(--surface); }

.spt-filas--fac {
  margin: 0; padding: .35rem 1.1rem; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--linea-sutil);
}
.spt-fila--fac { grid-template-columns: 8.5rem minmax(0, 1fr) auto 9.5rem; }
.spt-fac__n { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .92rem; letter-spacing: .03em; }
.spt-fac__m { min-width: 0; font-size: .83rem; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spt-fac__total { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.spt-fila--fac.spt-fila--apagada .spt-fac__total { color: var(--tinta-3); text-decoration: line-through; }
#fac-lista > .spt-vacio {
  border-radius: 20px; background: var(--surface); border: 1px solid var(--linea-sutil);
}

/* --------------------------------------------------------------------------
   La sección 5: Reglas
-------------------------------------------------------------------------- */
.spt-reglas { position: relative; }

/* La frase del programa, en oscuro. Lo que se cambió se pinta en naranja:
   se ve qué se va a firmar antes de firmarlo. */
.spt-asi {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(1.3rem, 3vw, 1.9rem); margin-bottom: 1rem; border-radius: 26px;
  background: linear-gradient(135deg, var(--nori-3), var(--nori) 70%); color: var(--crema);
}
.spt-asi::after {
  content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(116deg, rgba(255,255,255,.035) 0 2px, transparent 2px 15px);
}
.spt-asi__e {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--naranja-cl);
}
.spt-asi__p {
  margin: .55rem 0 0; max-width: 46ch;
  font-family: var(--display); font-weight: 500; line-height: 1.38; letter-spacing: -.012em;
  font-size: clamp(1.15rem, 1rem + .75vw, 1.5rem); color: rgba(253,244,231,.72); text-wrap: pretty;
}
.spt-asi__p b { color: #fff; font-weight: 700; transition: color .3s var(--ease); }
.spt-asi__p b.spt-cambio { color: var(--naranja-cl); }
.spt-maestro {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid rgba(253,244,231,.12);
}
.spt-maestro div { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.spt-maestro b { font-size: .98rem; color: #fff; }
.spt-maestro small { font-size: .8rem; line-height: 1.45; color: rgba(253,244,231,.6); max-width: 60ch; }
.spt-maestro .interruptor { background: rgba(253,244,231,.16); border-color: rgba(253,244,231,.22); }
.spt-maestro .interruptor--on { background: var(--verde-cl); border-color: var(--verde-cl); }
.spt-maestro.spt-regla--sucia b::after { background: var(--naranja-cl); }

.spt-grupo {
  margin-bottom: .6rem; border-radius: 18px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--linea-sutil);
  transition: box-shadow .35s var(--ease);
}
.spt-grupo[open] { box-shadow: 0 16px 34px -28px rgba(33,22,16,.45); }
.spt-grupo > summary {
  display: grid; align-items: center; gap: .9rem;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: .95rem 1.15rem; list-style: none; cursor: pointer; user-select: none;
  transition: background .25s var(--ease);
}
.spt-grupo > summary::-webkit-details-marker { display: none; }
.spt-grupo > summary:hover { background: var(--crema); }
.spt-grupo[open] > summary { border-bottom: 1px solid var(--linea-sutil); }
.spt-grupo__i {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--crema-2); color: var(--rojo); font-size: 1.05rem;
}
.spt-grupo__t { min-width: 0; display: flex; flex-direction: column; }
.spt-grupo__t b { font-size: .98rem; }
.spt-grupo__t small {
  font-size: .8rem; color: var(--tinta-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spt-grupo__c { padding: .2rem 1.15rem .6rem; }
.spt-grupo__aviso {
  margin: .9rem 0 .3rem; padding: .75rem .9rem; border-radius: 13px; background: var(--crema);
  font-size: .84rem; line-height: 1.55; color: var(--tinta-2); text-wrap: pretty;
}

.spt-regla {
  display: flex; align-items: center; gap: 1.2rem;
  padding: .9rem 0; border-top: 1px solid var(--linea-sutil);
}
.spt-grupo__aviso + .spt-regla, .spt-grupo__c > .spt-regla:first-child { border-top: 0; }
.spt-regla__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.spt-regla__txt b { font-size: .94rem; font-weight: 600; color: var(--tinta); }
.spt-regla__txt span { font-size: .81rem; line-height: 1.45; color: var(--tinta-3); text-wrap: pretty; }
.spt-regla__c { flex: 0 0 auto; }
/* El punto naranja de «esto cambió y no se ha guardado». */
.spt-regla--sucia .spt-regla__txt b::after,
.spt-maestro.spt-regla--sucia b::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: .45rem;
  border-radius: 50%; background: var(--naranja); vertical-align: middle;
  animation: spt-pop .3s var(--resorte);
}

/* Un número con su unidad pegada. Estrecho a propósito: un campo de 12rem para
   escribir «3» invita a escribir otra cosa. */
.spt-num { display: inline-flex; align-items: center; gap: .45rem; position: relative; }
.spt-num input, .spt-texto {
  padding: .55rem .7rem; border-radius: 11px;
  background: var(--crema); border: 1.5px solid var(--linea); color: var(--tinta);
  transition: border-color var(--d-rapido) var(--ease), box-shadow var(--d-rapido) var(--ease),
              background var(--d-rapido) var(--ease);
}
.spt-num input {
  width: 5.6rem; text-align: right;
  font-family: var(--display); font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums;
}
.spt-num i { font-style: normal; font-size: .82rem; color: var(--tinta-3); flex: none;
             /* «%» y «puntos» no miden lo mismo: sin ancho fijo cada casilla
                quedaba corrida según su unidad. */
             min-width: 3.1rem; }
/* Lo que va con miles cabe «100.000.000»; la plata lleva además su signo adentro. */
.spt-num--miles input { width: 8.4rem; }
.spt-num--pesos::before {
  content: "$"; position: absolute; left: .7rem; top: 50%; translate: 0 -50%;
  font-family: var(--display); font-weight: 700; color: var(--rojo); pointer-events: none;
}
.spt-num--pesos input { padding-left: 1.5rem; }
/* La plata no lleva unidad detrás; el hueco la alinea con las que sí. */
.spt-num--pesos::after { content: ""; width: 3.1rem; }
.spt-texto { width: min(19rem, 100%); font-size: .92rem; }
.spt-num input:focus, .spt-texto:focus {
  outline: none; border-color: var(--naranja); background: var(--surface); box-shadow: 0 0 0 3px var(--ambar-sua);
}

/* Cuánto da cada categoría: nombre y casilla arriba, y debajo lo que ese
   porcentaje significa en plata. En blanco la fila es discreta: sigue al
   general y no hay nada que mirar. */
.spt-cats {
  display: grid; gap: .45rem; margin: .8rem 0 .4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
.spt-cat {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: .6rem; row-gap: .15rem;
  padding: .55rem .6rem .5rem .8rem; border-radius: 13px;
  background: var(--crema); border: 1.5px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.spt-cat__n {
  margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--tinta-2); cursor: text;
}
.spt-cat__c { display: inline-flex; align-items: center; gap: .3rem; }
.spt-cat__c i { font-style: normal; font-size: .8rem; color: var(--tinta-3); }
.spt-cat__c input {
  width: 3.6rem; padding: .3rem .45rem; border-radius: 9px; text-align: right;
  background: var(--surface); border: 1.5px solid var(--linea); color: var(--tinta);
  font-family: var(--display); font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums;
  transition: border-color var(--d-rapido) var(--ease), box-shadow var(--d-rapido) var(--ease);
}
.spt-cat__c input::placeholder { color: var(--arena); font-weight: 500; }
.spt-cat__c input:focus { outline: none; border-color: var(--naranja); box-shadow: 0 0 0 3px var(--ambar-sua); }
.spt-cat__e {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
  gap: .4rem; min-height: 1.35rem; font-size: .74rem; color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}
.spt-cat__gen {
  display: inline-flex; align-items: center; gap: .2rem; flex: none;
  padding: .1rem .4rem; border-radius: 7px; font-size: .72rem; color: var(--tinta-3);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.spt-cat__gen .ico { width: .8rem; height: .8rem; }
.spt-cat__gen:hover, .spt-cat__gen:focus-visible { color: var(--tinta); background: var(--surface); outline: none; }
/* Las excepciones se ven de un vistazo: si hay que buscar cuál está en cero,
   la lista de veintidós categorías no sirve de nada. */
.spt-cat--general .spt-cat__n { font-weight: 500; }
/* Punteada: la cifra que se ve es la del general, no una escrita aquí. */
.spt-cat--general .spt-cat__c input:not(:focus) { border-style: dashed; background: transparent; }
.spt-cat--propio { background: var(--ambar-sua); }
.spt-cat--mas    { background: var(--verde-sua); }
.spt-cat--mas .spt-cat__e > span:first-child { color: var(--verde); font-weight: 600; }
.spt-cat--cero   { background: var(--rojo-sua); }
.spt-cat--cero .spt-cat__n { text-decoration: line-through; color: var(--tinta-3); }
.spt-cat--cero .spt-cat__e > span:first-child { color: var(--rojo); font-weight: 600; }

/* Guardar: una barra que aparece solo cuando hay algo que guardar. */
.spt-guardar {
  position: sticky; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 5;
  display: flex; align-items: center; gap: .7rem; width: fit-content; max-width: 100%;
  margin: 1.2rem auto 0; padding: .5rem .5rem .5rem 1.15rem; border-radius: 99px;
  background: var(--nori); color: var(--crema);
  box-shadow: 0 22px 44px -16px rgba(22,16,13,.6);
  animation: spt-sube .4s var(--resorte) both;
}
.spt-guardar[hidden] { display: none; }
.spt-guardar > span { font-size: .86rem; font-weight: 600; white-space: nowrap; }
.spt-guardar > span::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: .55rem;
  border-radius: 50%; background: var(--naranja-cl); vertical-align: middle;
}
.spt-guardar .btn--fantasma { --fg: rgba(253,244,231,.75); }
.spt-guardar .btn--fantasma:hover { --bg: rgba(253,244,231,.1); --fg: #fff; }
.spt-guardar .btn--fuerte { border-radius: 99px; }

/* --------------------------------------------------------------------------
   Los carteles con el QR
-------------------------------------------------------------------------- */
.tbl-seg.spt-seg-ancho { display: flex; margin-bottom: 1rem; }   /* 14-tablero.css carga después */
.spt-seg-ancho .tbl-seg__o { flex: 1 1 0; justify-content: center; }
.spt-qr {
  display: grid; place-items: center; padding: 1.2rem; margin-bottom: .7rem;
  border-radius: 20px; background: #fff; border: 1px solid var(--linea-sutil);
}
/* El SVG viene del servidor con su propio tamaño; acá se le manda. */
.spt-qr svg { display: block; width: min(15rem, 100%); height: auto; animation: spt-sube .35s var(--ease) both; }
.spt-qr__hueso {
  width: min(15rem, 100%); aspect-ratio: 1; border-radius: 10px;
  background: linear-gradient(100deg, var(--crema-2) 30%, var(--crema) 50%, var(--crema-2) 70%);
  background-size: 220% 100%;
  animation: spt-latido-carga 1.3s var(--ease-suave) infinite;
}
.spt-qr__enlace { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; }
.spt-qr__enlace code {
  flex: 1; min-width: 0; padding: .55rem .75rem; border-radius: 10px;
  background: var(--crema); border: 1px solid var(--linea-sutil);
  font-size: .8rem; color: var(--tinta-2); overflow-x: auto; white-space: nowrap;
}
.spt-imprimir { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1rem; }
.spt-imprimir__o {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: 1.1rem .9rem 1rem; border-radius: 18px; text-align: center; text-decoration: none;
  background: var(--crema); border: 1.5px solid var(--linea-sutil); color: var(--tinta);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.spt-imprimir__o:hover { transform: translateY(-2px); border-color: var(--rojo); background: var(--surface); }
.spt-imprimir__o b { font-size: .92rem; }
.spt-imprimir__o small { font-size: .76rem; line-height: 1.4; color: var(--tinta-3); }
/* La hoja dibujada: una A4 de pie y una tarjeta de mesa acostada. */
.spt-hoja {
  position: relative; display: grid; place-items: center; margin-bottom: .6rem;
  width: 44px; height: 60px; border-radius: 4px;
  background: var(--surface); border: 1.5px solid var(--tinta-3);
  box-shadow: 3px 4px 0 var(--crema-3);
  transition: transform .45s var(--resorte);
}
.spt-hoja--mesa { width: 60px; height: 42px; margin-top: 18px; }
.spt-hoja i {
  width: 18px; height: 18px; border-radius: 2px;
  background: repeating-conic-gradient(var(--tinta) 0 25%, transparent 0 50%) 0 0 / 6px 6px;
}
.spt-imprimir__o:hover .spt-hoja { transform: rotate(-4deg) translateY(-2px); }


/* ==========================================================================
   20 · Pantalla angosta
   ========================================================================== */
@media (max-width: 900px) {
  .spt-entrega { grid-template-columns: minmax(0, 1fr); }
  .spt-ficha:empty { min-height: 6rem; }
  .spt-doble { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .spt-cab { align-items: flex-start; }
  .spt-cab__herr { width: 100%; }
  .spt-herr { flex: 1 1 0; justify-content: center; }
  .spt-banda { flex-wrap: wrap; }

  .spt-fila, .spt-fila--canje {
    grid-template-columns: auto minmax(0, 1fr) 2.2rem;
    grid-template-areas: "cod t x" "cod e x";
  }
  .spt-fila--canje .spt-fila__cod { grid-area: cod; align-self: start; }
  .spt-fila--canje .spt-fila__t { grid-area: t; }
  .spt-fila--canje .spt-fila__e {
    grid-area: e; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .2rem .5rem;
    min-width: 0; text-align: left;
  }
  .spt-fila__e small { white-space: normal; }
  .spt-fila--canje > :last-child { grid-area: x; }

  .spt-fila--fac {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "n total" "m e";
  }
  .spt-fac__n { grid-area: n; }
  .spt-fac__total { grid-area: total; }
  .spt-fac__m { grid-area: m; }
  .spt-fila--fac .spt-fila__e { grid-area: e; }

  .spt-espejo .btn { margin-left: 0; }
  .spt-filtros .tbl-seg { display: flex; flex: 1 1 100%; }
  .spt-filtros .tbl-seg__o { flex: 1 1 0; justify-content: center; padding-inline: .3rem; }

  /* La regla pasa a dos renglones: el control debajo del texto. En una sola
     fila, un texto de dos líneas junto a un interruptor lo deja flotando. */
  .spt-regla { flex-direction: column; align-items: stretch; gap: .55rem; }
  .spt-regla__c { align-self: flex-start; }
  .spt-grupo > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .spt-grupo > summary > span:nth-child(3):empty { display: none; }
  .spt-grupo > summary > span:nth-child(3):not(:empty) { grid-column: 2; grid-row: 2; justify-self: start; }
  .spt-cats { grid-template-columns: minmax(0, 1fr); }
  .spt-guardar { width: 100%; justify-content: flex-end; }
  .spt-guardar > span { margin-right: auto; }
}

@media (max-width: 30rem) {
  .pts-par { grid-template-columns: 1fr; }
  .spt-canje__datos { grid-template-columns: 1fr 1fr; }
  .spt-canje__datos div:last-child { grid-column: 1 / -1; }
  .spt-celdas__v { gap: .35rem; }
  .spt-imprimir { grid-template-columns: 1fr; }
  .spt-sugiere { grid-template-columns: 1fr 1fr; }
  .spt-galeria { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pts-via__barra i { transition: none; }
  .spt-cab, .spt-banda, .spt-cuerpo > *, .spt-premio, .spt-canje, .spt-elegido, .spt-cuenta,
  .spt-guardar, .spt-qr svg, .spt-celdas__v i.lleno, .spt-kpi__barra i,
  .spt-hecho__v circle, .spt-estado--on i::after, .spt-latido--vivo::after { animation: none; }
  .spt-hecho__v path { animation: none; stroke-dashoffset: 0; }
  .spt-celdas--mal .spt-celdas__v, .spt-sacude { animation: none; }
}