/* =====================================================================
   Interfaz del kiosco.

   El lenguaje visual sale del propio producto, no de una plantilla: el
   esmalte de los electrodomésticos, el acero cepillado, el ojo de buey de
   la lavadora, el mando de programas con su piloto, y el cartel de precio
   que se imprime en la tienda.

   Una sola apuesta fuerte: el asistente vive dentro del ojo de buey. Todo
   lo demás se calla para que eso se vea.
   ===================================================================== */

/* Chivo servida desde el propio servidor (pantalla/fuentes, licencia OFL):
   la tienda puede estar sin internet y con Google Fonts el kiosco salía
   con otra letra. */
@font-face{ font-family:"Chivo"; font-weight:300; font-display:swap; src:url("/fuentes/chivo-latin-300-normal.woff2") format("woff2"); }
@font-face{ font-family:"Chivo"; font-weight:400; font-display:swap; src:url("/fuentes/chivo-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Chivo"; font-weight:700; font-display:swap; src:url("/fuentes/chivo-latin-700-normal.woff2") format("woff2"); }
@font-face{ font-family:"Chivo"; font-weight:900; font-display:swap; src:url("/fuentes/chivo-latin-900-normal.woff2") format("woff2"); }

:root{
  --esmalte:  #EFF0EC;   /* la chapa blanca de los electrodomésticos */
  --esmalte2: #E3E5DE;   /* su sombra */
  --acero:    #B9BEB7;   /* aro cepillado */
  --acero-os: #8E948C;   /* su canto */
  --grafito:  #22251F;   /* goma de la puerta, texto */
  --goma:     #15170F;
  --piloto:   #E8A317;   /* el único color que se enciende */
  --precio:   #C3341C;   /* la tinta del cartel */
  --papel:    #FBFAF6;   /* cartón del cartel */
  --tipo: 'Chivo', system-ui, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}

body{
  font-family:var(--tipo);
  color:var(--grafito);
  background:
    linear-gradient(180deg,#2A2E26 0%, #1B1E17 60%, #15170F 100%);
  display:flex;align-items:stretch;justify-content:center;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  cursor:none;user-select:none;-webkit-user-select:none;
}
body.con-raton{cursor:auto}
:focus-visible{outline:3px solid var(--piloto);outline-offset:3px}

/* La escena: el frontal de la máquina a la izquierda, los carteles a la
   derecha. Asimétrica a propósito: un panel de mandos no está centrado. */
.escena{
  width:100%;max-width:1680px;position:relative;
  display:grid;grid-template-columns:minmax(420px,46%) 1fr;
  transition:grid-template-columns .45s cubic-bezier(.3,.7,.3,1);
}
.escena.sin-fichas{grid-template-columns:1fr 0}

/* ---------------- Frontal de la máquina ----------------
   La columna izquierda es el retrato. No hay marco, ni círculo, ni tarjeta:
   una cara funciona mejor sin nada alrededor que compita con ella. Abajo,
   una banda de chapa con el nombre y el mando. */
.vendedor{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--fondo-retrato,var(--esmalte)) 0%,
                                   var(--fondo-retrato,var(--esmalte)) 62%,
                                   var(--esmalte2) 100%);
  display:flex;align-items:flex-end;
  box-shadow:inset -1px 0 0 #0003, 6px 0 18px #0000002e;
}
.avatar-caja{
  position:absolute;inset:0;bottom:0;
  display:flex;align-items:flex-end;justify-content:center;
}
.avatar-caja svg,
.avatar-caja .avatar-fotos{width:100%;height:100%}
/* La foto llega cuadrada y la columna no lo es: sin esto queda un marco de
   chapa alrededor del retrato, que es justo lo que quitamos al eliminar el
   ojo de buey. */
/* La foto es cuadrada. Si se estira a una columna muy ancha, el recorte
   vertical deja un primerísimo plano de la cara. Se limita a su proporción
   natural y se centra: el resto es chapa. */
.avatar-caja .avatar-fotos{
  width:min(100%, 92vh);height:100%;margin:0 auto;
  /* Los bordes de la foto se funden con la chapa. Sin esto se ve el canto
     del rectángulo, porque el gris del estudio nunca coincide exactamente
     con el esmalte del panel. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0, #000 7%, #000 93%, transparent 100%);
}
.avatar-caja .avatar-fotos img{object-position:center 18%}
.avatar-caja svg{height:100%;width:auto;max-width:100%}

/* ---------------- El aro ----------------
   El asistente sin cara. A diferencia del retrato, esto NO va a sangre: un
   aro de inducción es una pieza embutida en la chapa, y para que se lea como
   tal necesita esmalte alrededor. Por eso se centra y se le deja aire.

   Se coloca por encima del centro óptico de la columna, no en el centro
   geométrico: la banda de abajo pesa visualmente y un aro centrado de verdad
   parece caído. */
.avatar-caja.aro-caja{
  align-items:center;
  padding:0 0 clamp(70px,11vh,120px);
}
/* El tamaño se ata a la MENOR de las dos dimensiones y se acota por arriba.
   Sin el tope, en una pantalla apaisada sin fichas el aro crece hasta ocupar
   la pantalla entera y deja de leerse como una pieza embutida en la chapa:
   se convierte en un agujero negro. Un asistente ocupa el sitio de una cara,
   no el de una puerta. */
/* El lienzo es bastante mayor que el disco: dentro hay un aura que tiene que
   apagarse sola antes de llegar al borde. Si se recorta, se ve el canto. */
.avatar-caja .aro{
  width:clamp(380px, min(74vw, 66vh), 980px);
  height:clamp(380px, min(74vw, 66vh), 980px);
  display:block;
  /* Sin drop-shadow: el filtro sigue el contorno de TODO lo pintado, aura
     incluida, y le dibujaría un halo gris alrededor del resplandor. La
     sombra de asiento se pinta dentro del lienzo. */
}
/* Con carteles de precio delante, el aro cede el sitio: la decisión de
   compra está en la ficha, no en la luz. */
.escena:not(.sin-fichas) .avatar-caja.aro-caja{
  padding-bottom:clamp(50px,8vh,90px);
}
.escena:not(.sin-fichas) .avatar-caja .aro{
  width:clamp(270px, min(54vw, 47vh), 620px);
  height:clamp(270px, min(54vw, 47vh), 620px);
}

/* La banda inferior: chapa sólida, no un velo translúcido sobre la cara */
.banda{
  position:relative;z-index:2;width:100%;
  display:flex;align-items:center;gap:clamp(14px,2vw,26px);
  padding:clamp(14px,2.2vh,22px) clamp(20px,2.6vw,34px)
          calc(clamp(40px,5.4vh,58px) + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,#EFF0EC00 0%, var(--esmalte) 14%, var(--esmalte2) 100%);
}
.placa{flex:1;min-width:0}
.placa h1{
  font-size:clamp(23px,3.4vh,34px);font-weight:900;letter-spacing:-.025em;
  margin:0;line-height:1;
}
.placa p{
  font-size:clamp(13px,1.8vh,16px);font-weight:400;color:#22251FAD;
  margin:5px 0 0;line-height:1.3;
}

/* El mando de programas. Es el único elemento que se enciende. */
.mando{
  position:relative;flex:0 0 auto;
  width:clamp(84px,12vh,116px);height:clamp(84px,12vh,116px);
  border-radius:50%;border:0;cursor:pointer;padding:0;
  background:
    repeating-conic-gradient(from 0deg, #C6CBC3 0deg 3deg, #A9AFA7 3deg 6deg);
  box-shadow:0 3px 0 var(--acero-os), 0 8px 16px #00000042;
  display:grid;place-items:center;
  transition:transform .12s, box-shadow .12s;
}
.mando::before{                                     /* la cara lisa del mando */
  content:"";position:absolute;inset:13%;border-radius:50%;
  background:linear-gradient(162deg,#E6E9E3 0%, #CDD2CA 52%, #AEB4AC 100%);
  box-shadow:inset 0 2px 3px #ffffffcc, inset 0 -3px 6px #00000038, 0 1px 2px #00000026;
}
.mando:active{transform:translateY(2px);box-shadow:inset 0 2px 6px #00000055, 0 1px 0 var(--acero-os)}
.mando .muesca{
  position:absolute;top:17%;left:50%;transform:translateX(-50%);z-index:2;
  width:4px;height:15%;background:var(--grafito);border-radius:2px;
}
.mando .lampara{
  position:relative;z-index:2;
  width:24%;height:24%;border-radius:50%;
  background:#9AA096;box-shadow:inset 0 1px 2px #00000070;
  transition:background .2s, box-shadow .2s;
}
.mando.escuchando .lampara{
  background:var(--piloto);
  box-shadow:inset 0 1px 2px #00000040, 0 0 16px 4px #E8A31780;
  animation:pulso 1.3s ease-in-out infinite;
}
.mando.pensando .lampara{background:#D8DCD4;animation:parpadeo 1s steps(2,end) infinite}
@keyframes pulso{50%{box-shadow:inset 0 1px 2px #00000040, 0 0 26px 9px #E8A31759}}
@keyframes parpadeo{50%{background:#9AA096}}

.estado{
  font-size:clamp(12px,1.6vh,15px);font-weight:700;letter-spacing:-.01em;
  min-height:1.3em;color:#22251FC4;margin-top:6px;
}

/* Banda inferior: el aviso va grabado en la chapa, como una serigrafía */
/* Por encima de la banda (z-index 2): si no, su degradado lo tapa y el aviso
   de IA, que es obligatorio, no se ve. Por debajo de la caja de escribir. */
.serigrafia{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:9px 18px calc(9px + env(safe-area-inset-bottom,0px));
  background:var(--esmalte2);border-top:1px solid #00000014;
  font-size:clamp(11px,1.5vh,13px);font-weight:400;color:#22251F8A;
  text-align:center;
}

/* ---------------- Carteles de precio ---------------- */
.fichas{
  padding:clamp(14px,3vh,40px) clamp(18px,3vw,46px);
  display:flex;flex-direction:column;
  /* «safe center» centra mientras quepa y, cuando no cabe, deja de centrar
     en vez de recortar por arriba. Con «center» a secas, el primer cartel
     se sale por el borde superior y no hay forma de llegar a él. */
  justify-content:safe center;
  gap:clamp(10px,1.8vh,20px);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#FBFAF63D transparent;
}
.fichas::-webkit-scrollbar{width:6px}
.fichas::-webkit-scrollbar-thumb{background:#FBFAF63D}

/* Tres carteles a la vez necesitan menos cuerpo que uno solo: si no, en un
   portátil el tercero queda fuera de la pantalla. */
.fichas.n3 .ficha{padding-top:clamp(12px,1.7vh,18px);padding-bottom:clamp(12px,1.7vh,18px)}
.fichas.n3 .nombre{font-size:clamp(17px,2.4vh,24px)}
.fichas.n3 .euros{font-size:clamp(30px,4.8vh,52px)}
.fichas.n3 .spec{font-size:clamp(12px,1.6vh,15px)}
.fichas.n3 .nota{padding-top:7px}

/* Cartón, perforación y pinza: así se ve un precio en una tienda */
.ficha{
  position:relative;background:var(--papel);
  padding:clamp(16px,2.4vh,24px) clamp(20px,2.4vw,30px) clamp(16px,2.4vh,24px) clamp(58px,5vw,78px);
  border-left:7px solid var(--precio);
  box-shadow:3px 3px 0 #00000026;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:9px 20px;
}
.ficha::before{                                      /* el troquel del cartel */
  content:"";position:absolute;left:clamp(21px,2.1vw,30px);
  top:clamp(18px,2.6vh,26px);
  width:11px;height:11px;border-radius:50%;
  background:#1B1E17;
  box-shadow:inset 0 2px 2px #000, 0 1px 0 #ffffffc4;
}
.ficha .texto{min-width:0}
/* La foto del producto, a la izquierda del texto. Fondo blanco porque las
   fotos de catálogo vienen recortadas sobre blanco y en el cartón se notaba
   el rectángulo. */
.ficha.con-foto{grid-template-columns:auto minmax(0,1fr) auto}
.ficha .foto{
  width:clamp(64px,10vh,120px);aspect-ratio:1;object-fit:contain;
  background:#fff;border-radius:4px;align-self:center;
}
.fichas.n3 .ficha .foto{width:clamp(56px,8vh,96px)}
.ficha .marca{font-size:clamp(12px,1.7vh,15px);font-weight:700;color:#22251F8F;margin-bottom:2px}
.ficha .nombre{
  font-size:clamp(19px,2.9vh,28px);font-weight:900;letter-spacing:-.03em;
  line-height:1.05;margin:0 0 7px;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ficha .spec{
  font-size:clamp(13px,1.8vh,16px);font-weight:300;color:#22251FC2;line-height:1.45;
  margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ficha .euros{
  font-size:clamp(34px,6vh,62px);font-weight:900;letter-spacing:-.045em;
  color:var(--precio);line-height:.85;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.ficha .euros span{font-size:.44em;font-weight:700;letter-spacing:-.02em;vertical-align:.55em;margin-left:3px}
/* Sin precio del proveedor: la ficha lo dice en palabras, sin cifra que imitar */
.ficha .euros.mostrador{font-size:clamp(18px,2.6vh,28px);line-height:1.2;max-width:9em}
.ficha .nota{
  grid-column:1/-1;border-top:1px dotted #22251F3D;padding-top:9px;
  font-size:clamp(12px,1.6vh,14px);font-weight:400;color:#22251F9E;
}
.ficha .nota.ultimas{color:var(--precio);font-weight:700}

/* ---------------- Modo atracción ---------------- */
.atraccion{
  position:absolute;inset:0;z-index:7;display:grid;align-content:center;
  /* Opaco del todo: translúcido dejaba ver la máquina detrás en fantasma,
     que es ruido, no profundidad. */
  background:linear-gradient(168deg,#2E322A 0%, #1B1E17 58%, #121409 100%);
  opacity:0;pointer-events:none;transition:opacity .45s;
  padding:clamp(40px,9vh,110px) clamp(32px,7vw,110px);
}
.atraccion.on{opacity:1;pointer-events:auto;cursor:pointer}
.atraccion .dentro{max-width:min(960px,86vw);color:var(--esmalte)}
.atraccion h2{
  font-size:clamp(34px,8.2vh,86px);font-weight:900;letter-spacing:-.045em;
  line-height:.96;margin:0 0 clamp(14px,2.4vh,26px);
  max-width:14ch;                      /* la medida la fija el titular, no la caja */
  text-wrap:balance;
}
.atraccion p{
  font-size:clamp(16px,2.5vh,24px);font-weight:300;color:#EFF0ECC2;margin:0;
  line-height:1.4;max-width:34ch;
}
.atraccion .toque{
  margin-top:clamp(28px,5vh,52px);display:flex;align-items:center;gap:13px;
  font-size:clamp(14px,2vh,18px);font-weight:700;color:var(--piloto);
}
.atraccion .toque i{
  width:13px;height:13px;border-radius:50%;background:var(--piloto);
  box-shadow:0 0 14px 4px #E8A31766;animation:pulso 1.9s ease-in-out infinite;
}
.atraccion .pie{
  position:absolute;left:0;right:0;bottom:0;padding:16px;text-align:center;
  font-size:clamp(11px,1.6vh,14px);color:#EFF0EC73;font-weight:400;
}

/* ---------------- Teclado de rescate ---------------- */
.escribir{
  position:absolute;right:clamp(22px,3vw,46px);bottom:clamp(20px,3vh,38px);
  z-index:4;display:flex;gap:9px;align-items:center;
}
.escribir input{
  display:none;width:min(480px,46vw);font-family:var(--tipo);font-size:17px;font-weight:400;
  padding:14px 16px;border:2px solid var(--grafito);background:var(--papel);color:var(--grafito);
}
.escribir.abierto input{display:block}
.btn-teclar{
  font-family:var(--tipo);font-size:14px;font-weight:700;cursor:pointer;
  padding:12px 17px;border:2px solid #EFF0EC4D;background:transparent;color:#EFF0ECC4;
  transition:border-color .15s,color .15s;
}
.btn-teclar:hover{border-color:var(--piloto);color:var(--piloto)}

/* ---------------- Estrecho ---------------- */
/* Pantallas bajas (portátiles de 768 px, televisores a 720p) */
@media (max-height:820px) and (min-width:921px){
  .vendedor{gap:clamp(12px,2vh,20px);padding:clamp(18px,3vh,32px) clamp(20px,3vw,40px) clamp(34px,5vh,46px)}
  .portilla{width:min(330px,44vh)}
  .fichas{padding-top:clamp(12px,2vh,20px);padding-bottom:clamp(12px,2vh,20px)}
}

@media (max-width:920px){
  .escena{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .escena.sin-fichas{grid-template-rows:1fr 0}

  .escena.sin-fichas .vendedor{align-items:flex-end}

  /* Con carteles en pantalla, la máquina se reduce a su panel superior */
  /* Con carteles delante, el retrato se reduce a una miniatura y la banda
     pasa a ser la cabecera */
  .escena:not(.sin-fichas) .vendedor{overflow:visible}
  .escena:not(.sin-fichas) .avatar-caja{
    position:relative;inset:auto;width:74px;height:74px;flex:0 0 74px;
    overflow:hidden;align-self:center;
  }
  .escena:not(.sin-fichas) .avatar-caja .avatar-fotos{height:100%}
  .escena:not(.sin-fichas) .vendedor{
    flex-direction:row;align-items:center;gap:13px;
    padding:11px 15px;box-shadow:inset 0 -1px 0 #0003;
  }
  .escena:not(.sin-fichas) .banda{
    flex:1;padding:0;background:none;gap:12px;
  }
  .escena:not(.sin-fichas) .placa h1{font-size:18px}
  .escena:not(.sin-fichas) .placa p{display:none}
  .escena:not(.sin-fichas) .estado{font-size:11px;margin-top:2px}
  .escena:not(.sin-fichas) .mando{width:54px;height:54px}
  /* Con carteles, la cabecera es una fila: el aviso de IA baja a una línea
     propia debajo, a todo lo ancho. Ocultarlo aquí no es opción. */
  .escena:not(.sin-fichas) .vendedor{flex-wrap:wrap}
  .escena:not(.sin-fichas) .serigrafia{
    position:static;flex:0 0 calc(100% + 30px);margin:0 -15px -11px;
    padding:5px 15px;
  }

  .fichas{overflow-y:auto;justify-content:flex-start;padding:14px}
  .ficha{grid-template-columns:1fr;padding-left:40px}
  .ficha .euros{text-align:left}
  /* Con foto: foto a la izquierda, texto y precio apilados a su derecha */
  .ficha.con-foto{grid-template-columns:auto minmax(0,1fr)}
  .ficha.con-foto .foto{grid-row:span 2}
  .ficha.con-foto .euros{grid-column:2}
  .escribir{right:14px;bottom:14px}
  .escribir input{width:min(300px,56vw)}
  /* Sobre los carteles blancos, el botón en contorno desaparecía */
  .btn-teclar{background:var(--grafito);color:var(--esmalte);border-color:var(--grafito);padding:11px 15px}
}

/* ---------------- El ticket del mostrador ----------------
   Papel de caja de verdad: estrecho, monoespaciado, con sus rayas de puntos
   y los bordes dentados por donde se corta el rollo. Nadie necesita que le
   expliquen qué es.

   La tipografía monoespaciada no es un capricho de estilo: es lo que alinea
   los importes en columna, y una columna de importes desalineada es lo
   primero que delata que un ticket está dibujado. */
.ticket{
  position:absolute;z-index:6;
  left:50%;top:clamp(14px,3vh,40px);transform:translateX(-50%);
  width:min(340px,84vw);
  filter:drop-shadow(0 clamp(10px,2vh,22px) clamp(18px,3vh,34px) #00000040);
  animation:sale-ticket .5s cubic-bezier(.2,.9,.3,1);
  transition:opacity 1s ease, transform 1s ease;
}
.ticket.fuera{opacity:0;transform:translateX(-50%) translateY(-22px)}

/* El papel, con el borde dentado arriba y abajo. Los dientes se hacen con
   una máscara de triángulos repetidos: así el recorte es del papel mismo y
   no un adorno pegado encima que se vería al moverlo. */
.ticket .t-papel{
  background:var(--papel);color:#1A1D17;
  padding:clamp(20px,2.6vh,26px) clamp(16px,2.2vw,22px) clamp(22px,3vh,30px);
  font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,"Courier New",monospace;
  font-size:clamp(11.5px,1.45vh,13.5px);line-height:1.5;
  -webkit-mask:
     linear-gradient(#000 0 0) 0 7px/100% calc(100% - 14px) no-repeat,
     repeating-conic-gradient(from -45deg at 50% 0, #000 0 25%, #0000 0 50%) 0 0/14px 14px repeat-x,
     repeating-conic-gradient(from 135deg at 50% 100%, #000 0 25%, #0000 0 50%) 0 100%/14px 14px repeat-x;
  mask:
     linear-gradient(#000 0 0) 0 7px/100% calc(100% - 14px) no-repeat,
     repeating-conic-gradient(from -45deg at 50% 0, #000 0 25%, #0000 0 50%) 0 0/14px 14px repeat-x,
     repeating-conic-gradient(from 135deg at 50% 100%, #000 0 25%, #0000 0 50%) 0 100%/14px 14px repeat-x;
}

.ticket .t-casa{
  margin:0;text-align:center;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-size:clamp(13px,1.7vh,15px);
}
.ticket .t-sub2{
  margin:1px 0 0;text-align:center;font-size:clamp(10px,1.25vh,11.5px);
  letter-spacing:.1em;text-transform:uppercase;color:#6A7066;
}
/* Raya de puntos, como la que imprime una térmica */
.ticket .t-raya{
  border-top:1px dashed #A7ADA2;margin:9px 0;
}
.ticket .t-meta{
  display:flex;justify-content:space-between;gap:10px;
  font-size:clamp(10px,1.25vh,11.5px);color:#555B51;
}

/* Las líneas: unidades a la izquierda, importe a la derecha, el nombre en
   medio y partido si hace falta. Los importes en su columna, siempre. */
.ticket .t-linea{
  display:grid;grid-template-columns:1.6em 1fr auto;gap:8px;
  align-items:baseline;margin:3px 0;
}
.ticket .t-uds{color:#555B51}
.ticket .t-que{word-break:break-word}
.ticket .t-imp{font-variant-numeric:tabular-nums;white-space:nowrap}
.ticket .t-sub{
  margin:-2px 0 5px 2.3em;font-size:clamp(9.5px,1.15vh,11px);color:#6A7066;
}

.ticket .t-total{
  display:flex;justify-content:space-between;gap:12px;
  font-weight:700;font-size:clamp(15px,2vh,18px);
  font-variant-numeric:tabular-nums;
}
.ticket .t-iva{margin:1px 0 0;text-align:right;font-size:clamp(9.5px,1.15vh,11px);color:#6A7066}

.ticket .t-para{
  margin:0;font-size:clamp(9.5px,1.2vh,11px);letter-spacing:.1em;
  text-transform:uppercase;color:#6A7066;
}
.ticket .t-nombre{
  margin:0;font-family:var(--tipo);font-weight:900;line-height:1.05;
  font-size:clamp(26px,3.6vh,40px);
}

/* El aviso. Va en rojo de tinta de cartel y no se quita: un papel que parece
   una factura y no lo es puede acabar guardado como justificante de un pago
   que nadie ha hecho. */
.ticket .t-aviso{
  margin:12px 0 0;padding-top:9px;border-top:1px dashed #A7ADA2;
  text-align:center;font-size:clamp(9.5px,1.2vh,11px);line-height:1.45;
  font-weight:700;color:var(--precio);letter-spacing:.02em;
}

.ticket .t-aviso2{
  display:inline-block;margin-top:3px;font-weight:400;color:#555B51;
  letter-spacing:.06em;
}

@keyframes sale-ticket{
  from{opacity:0;transform:translateX(-50%) translateY(-70px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}
@media (prefers-reduced-motion:reduce){ .ticket{animation:none} }

/* ---------------- Movil ----------------
   La pantalla de kiosco esta pensada para un panel vertical de tienda de un
   metro. En un telefono no vale con encogerla: el lienzo del aro tenia un
   minimo de 380 px que en un movil de 360 se salia por la izquierda, y la
   caja de escribir, colocada por esquinas, se montaba encima del nombre.

   Aqui el pie pasa a ser una columna —placa, mando y escribir apilados— y el
   aro ocupa lo que queda, centrado. */
@media (max-width:620px){
  .avatar-caja.aro-caja{padding:0 0 clamp(16px,3vh,32px)}
  .avatar-caja .aro,
  .escena:not(.sin-fichas) .avatar-caja .aro{
    width:min(88vw, 42vh);
    height:min(88vw, 42vh);
  }

  .banda{
    gap:12px;
    padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));
  }
  .placa h1{font-size:25px}
  .placa p{font-size:13px}
  .estado{font-size:12px}
  .mando{width:60px;height:60px;flex:0 0 60px}
  .serigrafia{font-size:10px}

  /* La caja de escribir cuelga de la rejilla, no de la banda, asi que
     ponerla en el flujo no la mueve de sitio: se queda encima del nombre.
     Lo que funciona es al reves — la banda se hace mas alta y le reserva el
     hueco abajo, y la caja ocupa ese hueco a todo lo ancho. Ademas es donde
     el pulgar llega sin estirarse. */
  .banda{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .escribir{
    left:12px;right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
    gap:8px;
  }
  .escribir input{flex:1;width:auto;min-width:0;font-size:16px;padding:12px 14px}
  .btn-teclar{padding:11px 14px;font-size:13px;white-space:nowrap}

  .escena:not(.sin-fichas) .avatar-caja{
    position:relative;inset:auto;flex:0 0 auto;
    width:auto;height:auto;overflow:visible;padding:0;
  }
  .escena:not(.sin-fichas) .vendedor{flex-direction:column;padding:10px 0 0}
  .escena:not(.sin-fichas) .avatar-caja .aro{width:min(42vw,18vh);height:min(42vw,18vh)}
}

/* Movil tumbado: queda muy poca altura y el aro se come la banda */
@media (max-width:920px) and (max-height:520px){
  .avatar-caja .aro,
  .escena:not(.sin-fichas) .avatar-caja .aro{width:min(40vw,62vh);height:min(40vw,62vh)}
  .avatar-caja.aro-caja{padding:0 0 clamp(8px,2vh,18px)}
  /* Tumbado hay sitio de sobra a lo ancho: la caja de escribir vuelve a la
     esquina y la banda no necesita reservarle alto, que aqui es lo escaso. */
  .banda{padding:8px 14px calc(10px + env(safe-area-inset-bottom,0px))}
  .escribir{
    left:auto;right:14px;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
  }
  .escribir input{flex:0 0 auto;width:min(320px,42vw)}
  .placa h1{font-size:20px}
  .mando{width:48px;height:48px;flex:0 0 48px}
}

/* Sin carteles, el aviso de IA ocupa el pie de la pantalla: la caja de
   escribir sube su alto (≈34 px) para no taparlo, sea cual sea su «bottom». */
.escena.sin-fichas .escribir{margin-bottom:34px}
/* Puesto sin micrófono (?sinmicro=1): el mando de hablar no hace nada */
.sin-micro .mando{display:none}
/* En estrecho la caja va debajo del mando, no a su lado: la banda le guarda
   el hueco de la caja más el del aviso, o la caja se monta sobre el mando. */
@media (max-width:920px) and (min-height:521px){
  .escena.sin-fichas .banda{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}