/* Tótem MLXP26, pensado para la pantalla vertical de 1080 × 1920 (1u = 1 px ahí). En otra resolución todo
   escala con --u; en horizontal el encabezado va a la izquierda y el panel a la derecha.

   Reglas (docs/marca.md, secciones 1 a 5 y 9):
   - Solo la paleta de la guía: amarillo (domina, ~70% de cada pantalla), azul y negro, blanco; el celeste
     únicamente dentro del degradé azul. Todo plano: ni sombras, ni brillos, ni transparencias.
   - Composición de la guía (mailing vertical, pág. 16, y stories, pág. 15): arriba, sobre amarillo plano,
     el logo de Mercado Libre con su área segura, el título y el subtítulo, encerrados por un contorno fino
     blanco que baja por la derecha y dobla con una curva amplia; abajo, separado por un canal amarillo, un
     panel con la esquina superior izquierda muy redondeada (radio ≈ 15% del ancho) que mide lo que su
     contenido y se apoya en el borde de abajo. A la izquierda el contorno acompaña esa esquina, concéntrico
     y a un canal de distancia, y sale por el borde: el escalón en "S" de la guía (págs. 9, 16 y 22). El
     panel es blanco en formularios y confirmaciones; en 01, B1 y B3 (cajas sobre el panel) lleva el degradé
     amarillo → blanco en diagonal, como el panel de las cajas del mailing, y la pantalla sigue siendo
     mayormente amarilla. El título no se mueve cuando el panel crece (un aviso, los horarios).
   - Opciones como las cajas del mailing: blancas con contorno azul y el ícono de la guía (círculo azul con
     un pictograma blanco simple). Botones de acción azules con texto blanco, en pill. Zonas táctiles de
     80 px o más.
   - La guía no tiene rojo: errores y avisos en negro (contorno grueso negro y '!' blanco sobre negro).
   Colores y tipografía salen de las variables de comun/base.css. */

:root {
  --u: min(calc(100vw / 1080), calc(100vh / 1920));
  --margen: calc(88 * var(--u));            /* costados: ~8% del ancho, como la story */
  --panel-x: calc(40 * var(--u));           /* el panel deja ver el amarillo a la izquierda */
  --canal: calc(40 * var(--u));             /* canal amarillo entre el contorno y el panel (~4% del ancho) */
  --radio-grande: calc(160 * var(--u));     /* esquina del panel: ~15% del ancho (guía, pág. 16) */
  --radio: calc(28 * var(--u));             /* cajas, campos y horarios (--radio-caja, cajas del mailing) */
  --trazo: max(2px, calc(3 * var(--u)));    /* contorno fino */
  --borde: max(2px, calc(3 * var(--u)));    /* contorno de cajas y campos */
  --tactil: max(var(--tactil-min), calc(120 * var(--u)));
  --logo-alto: calc(104 * var(--u));        /* logo de Mercado Libre: 96 a 120 px */
  --tecla-alto: calc(100 * var(--u));
  --hueco: calc(28 * var(--u));
  /* Zona táctil mínima: 80 px de la pantalla del tótem (1080 × 1920). En unidades de la pantalla y no en
     px de CSS, así se mantiene aunque Windows escale la pantalla (125%, 150%) y el diseño no desborda. */
  --tactil-min: calc(80 * var(--u));
}

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

body.totem {
  background: var(--amarillo);
  color: var(--negro);
  /* Kiosco táctil: sin zoom (ni pellizco ni doble toque), sin selección ni menú por toque largo. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
body.totem img, body.totem video { -webkit-user-drag: none; }
/* Sin gestos del navegador sobre lo que se toca: un dedo que se corre un poco igual cuenta como toque. */
.pantalla-reposo, .opcion, .boton, .tecla, .horario, .campo-caja, .campo-sugerencia { touch-action: none; }
[hidden] { display: none !important; }
body.totem-cargando .totem { visibility: hidden; }
button:focus-visible { outline: 4px solid var(--negro); outline-offset: 4px; }

.totem {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* Los contornos y paneles se salen de la pantalla: se cortan en el borde, como en las piezas. */
  overflow: hidden;
}

/* ---------------------------------------------------------------- marca */

/* Logo de Mercado Libre a color, siempre sobre amarillo plano (guía del logo, págs. 4 y 10: "módulo
   amarillo en la parte superior de la pieza"). Área segura = alto de la "d" (0,433 del alto): el margen de
   arriba y de los costados y la separación con el título nunca bajan de eso. */
.cabecera {
  position: relative;
  z-index: 2;
  flex: none;
  padding: calc(56 * var(--u)) var(--margen) 0;
}
.marca {
  --x: calc(var(--logo-alto) * var(--logo-ml-resguardo));
  display: flex;
  align-items: center;
  gap: var(--x);
  min-height: var(--logo-alto);
}
.marca-logo { display: block; flex: none; height: var(--logo-alto); width: auto; }
/* Lockup con el sello (guía del logo, págs. 7 y 8): línea negra que sobresale medio x arriba y medio x
   abajo del logo (medido en el ejemplo de la pág. 7: logo + 0,9 x), separada x de cada lado; los dos de
   tamaño equilibrado. Aparece solo cuando existe el sello principal en español (medios.selloPrincipal). */
.marca-linea { flex: none; width: var(--trazo); height: calc(var(--logo-alto) + var(--x)); background: var(--negro); }
.marca-sello { display: block; min-width: 0; height: var(--logo-alto); width: auto; max-width: calc(420 * var(--u)); object-fit: contain; object-position: left center; }
.marca:has(.marca-sello[hidden]) .marca-linea { display: none; }

/* ---------------------------------------------------------------- estructura de cada pantalla */

.pantalla {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Zona amarilla de arriba: ocupa lo que el panel deja libre. El título y el subtítulo se apoyan abajo,
   justo sobre el panel que presentan; el amarillo que sobra queda como aire entre el logo y el título
   (como en las stories, pág. 15). */
.encabezado {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(20 * var(--u));
  padding: calc(52 * var(--u)) var(--margen) calc(56 * var(--u));
}
/* Contorno fino blanco que cierra la zona de arriba (guía, págs. 9, 16 y 22): baja por la derecha desde el
   borde superior, dobla con una curva amplia y corre por arriba del panel, a un canal de distancia. Donde
   empieza la esquina del panel (::after termina ahí) sigue el ::before: una curva concéntrica con esa
   esquina (radio R + canal) que baja y sale por el borde izquierdo. Queda abierto, como en el mailing. */
.encabezado::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(-3000 * var(--u));
  bottom: 0;
  left: calc(var(--panel-x) + var(--radio-grande) - var(--trazo));
  right: calc(48 * var(--u));
  border: var(--trazo) solid var(--blanco);
  border-top: 0;
  border-left: 0;
  border-bottom-right-radius: var(--radio-grande);
  pointer-events: none;
}
.encabezado::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(100% - var(--trazo));
  left: calc(var(--panel-x) - var(--canal) - var(--trazo));
  width: calc(var(--radio-grande) + var(--canal) + 2 * var(--trazo));
  height: calc(var(--radio-grande) + var(--canal) + 2 * var(--trazo));
  border-top: var(--trazo) solid var(--blanco);
  border-left: var(--trazo) solid var(--blanco);
  border-top-left-radius: calc(var(--radio-grande) + var(--canal) + var(--trazo));
  pointer-events: none;
}

.titulo {
  margin: 0;
  max-width: calc(880 * var(--u));
  font-size: calc(84 * var(--u));
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* "¡Listo!" y "¡Agenda confirmada!": título de impacto, en Black ("¡Listo!", una palabra, todavía más). */
.titulo-confirmacion { font-size: calc(124 * var(--u)); font-weight: 900; line-height: 1; letter-spacing: -0.025em; }
[data-pantalla="a2"] .titulo-confirmacion { font-size: calc(176 * var(--u)); }
.subtitulo {
  margin: 0;
  max-width: calc(860 * var(--u));
  font-size: calc(36 * var(--u));
  font-weight: 500;
  line-height: 1.3;
  text-wrap: pretty;
}
.subtitulo:empty { display: none; }

/* Panel blanco: esquina superior izquierda de radio grande; a la derecha y abajo se sale de la pantalla.
   Mide lo que su contenido; si la ventana es muy chica, se achica y desplaza (en el tótem todo entra). */
.panel {
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hueco);
  margin: var(--canal) 0 0 var(--panel-x);
  padding: calc(72 * var(--u)) var(--margen) calc(56 * var(--u)) calc(var(--margen) - var(--panel-x));
  border-radius: var(--radio-grande) 0 0 0;
  background: var(--blanco);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
/* Nada de lo que va adentro se aplasta: si no entra, el panel desplaza (nunca se pisan campos y teclado). */
.panel > * { flex-shrink: 0; }
/* 01, B1 y B3 no son formularios: el panel lleva el degradé amarillo → blanco de la guía (las paradas
   oficiales, en diagonal: blanco arriba a la izquierda, amarillo abajo a la derecha), como el panel de las
   cajas del mailing (pág. 16). Así manda el amarillo y las cajas blancas con contorno azul siguen leyéndose. */
[data-pantalla="inicio"] .panel, [data-pantalla="b1"] .panel, .pantalla-horarios .panel {
  background: linear-gradient(300deg, var(--degrade-amarillo-paradas));
}
/* Formularios y confirmaciones: los botones de abajo nunca quedan fuera de la pantalla. Si el panel
   desborda (un aviso largo, un nombre de 60 letras), se quedan pegados abajo y lo demás se desplaza. El
   bottom negativo es el relleno de abajo del panel: Chrome mide el sticky contra el contenido del panel, y
   así, sin desborde, los botones quedan exactamente donde van. */
.pantalla-formulario .panel > .acciones, .pantalla-confirmacion .panel > .acciones {
  position: sticky;
  bottom: calc(-56 * var(--u));
  z-index: 1;
  margin: calc(-16 * var(--u)) 0 calc(-56 * var(--u));
  padding: calc(16 * var(--u)) 0 calc(56 * var(--u));
  background: var(--blanco);
}

/* En los formularios el panel arranca un poco más arriba: B2 tiene tres campos y el teclado de email. */
.pantalla-formulario .panel { padding-top: calc(60 * var(--u)); }
/* B2 casi no deja amarillo libre: el título va arriba y el lugar del teclado mide siempre lo del más alto
   (email), así que pasar de un campo a otro no mueve ni el título ni los campos. */
[data-pantalla="b2"] .encabezado { justify-content: flex-start; padding-bottom: calc(30 * var(--u)); }
[data-pantalla="b2"] .ranura-teclado { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(5 * (var(--tecla-alto) - 10 * var(--u)) + 4 * 12 * var(--u)); }

/* Etiquetas en mayúsculas espaciadas (guía: "RESERVE ESSA DATA", "SÃO PAULO"). */
.etiqueta {
  margin: 0;
  color: var(--azul);
  font-size: calc(26 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Pictogramas simples, del color del texto (máscara SVG: se pintan con currentColor). */
.icono {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}
.icono-flecha { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14M12.5 5.5 19 12l-6.5 6.5'/%3E%3C/svg%3E"); }
.icono-atras { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12h-14M11.5 5.5 5 12l6.5 6.5'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- 01 reposo */

/* En reposo el logo va grande (alto 160-200 px), siempre sobre el amarillo plano de arriba y con su área
   segura libre también abajo (con el video, el módulo amarillo termina ahí). */
body[data-pantalla-actual="reposo"] .totem > .cabecera { padding-top: calc(112 * var(--u)); padding-bottom: calc(176 * var(--u) * var(--logo-ml-resguardo)); }
body[data-pantalla-actual="reposo"] .totem > .cabecera .marca:not(.con-sello) { --logo-alto: calc(176 * var(--u)); }

.pantalla-reposo { cursor: pointer; }
.reposo-encabezado { justify-content: center; padding-top: calc(40 * var(--u)); padding-bottom: calc(40 * var(--u)); }
.reposo-encabezado::after, .reposo-encabezado::before { display: none; }
.reposo-titulo {
  margin: 0;
  max-width: calc(900 * var(--u));
  font-size: calc(136 * var(--u));
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.reposo-titulo:empty { display: none; }

/* Panel en degradé azul → celeste (guía, pág. 3; "não utilizar o degradê azul como principal", pág. 10):
   ocupa ~27% de la pantalla, como los paneles azules de los KV de la pág. 9 (un cuarto a un tercio), y el
   amarillo queda en ~70%. Lleva el pattern blanco de la guía (pág. 12) que se desplaza despacio. La misma
   silueta que el panel de las otras pantallas. El texto va en el tramo azul. */
.pantalla-reposo { --reposo-alto: calc(520 * var(--u)); }
.reposo-panel {
  --reposo-radio: calc(200 * var(--u));     /* ~20% del ancho del panel */
  position: relative;
  flex: none;
  height: var(--reposo-alto);
  margin: var(--canal) 0 0 var(--panel-x);
  border-radius: var(--reposo-radio) 0 0 0;
  background: var(--degrade-azul);
  overflow: hidden;
}
/* Contorno fino blanco concéntrico con la curva del panel, separado por el canal: corre por arriba del
   panel, dobla y sale por el borde izquierdo (queda abierto, como el de las otras pantallas). */
.pantalla-reposo::after {
  content: '';
  position: absolute;
  right: calc(-20 * var(--u));
  bottom: calc(-20 * var(--u));
  left: calc(var(--panel-x) - var(--canal) - 8 * var(--u));
  height: calc(var(--reposo-alto) + var(--canal) + 28 * var(--u));
  border: var(--trazo) solid var(--blanco);
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: calc(200 * var(--u) + var(--canal) + 8 * var(--u));
  pointer-events: none;
}
.reposo-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 320 * var(--u));
  height: calc(100% + 320 * var(--u));
  background: var(--pattern-blanco, none) 0 0 / calc(320 * var(--u)) calc(320 * var(--u)) repeat;
  animation: reposo-pattern 60s linear infinite;
  pointer-events: none;
}
@keyframes reposo-pattern {
  from { transform: translate(0, 0); }
  to { transform: translate(calc(-320 * var(--u)), calc(-320 * var(--u))); }
}
/* "Tocá la pantalla para empezar" no está en la spec: con reposo_toque vacío en evento.json, no va (el toque
   en cualquier lado igual funciona). */
.reposo-toque:has([data-texto]:empty) { display: none; }
.reposo-toque {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(28 * var(--u));
  min-height: var(--tactil);
  margin: calc(120 * var(--u)) 0 0 calc(var(--margen) - var(--panel-x));
  padding: 0 calc(44 * var(--u)) 0 calc(56 * var(--u));
  border: 0;
  border-radius: var(--radio-boton);
  background: var(--blanco);
  color: var(--azul);
  font-size: calc(42 * var(--u));
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
}
.reposo-toque .icono {
  display: grid;
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  border-radius: 50%;
  background: var(--azul);
  -webkit-mask: none;
  mask: none;
  font-size: calc(40 * var(--u));
}
.reposo-toque .icono::before {
  content: '';
  margin: auto;
  width: 1em;
  height: 1em;
  background: var(--blanco);
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
  animation: reposo-flecha 1.8s ease-in-out infinite;
}
@keyframes reposo-flecha {
  0%, 100% { transform: translateX(calc(-4 * var(--u))); }
  50% { transform: translateX(calc(6 * var(--u))); }
}

/* Con el video de Lucero: la cabecera queda como módulo amarillo arriba (guía del logo, pág. 10) y el
   video ocupa el resto; abajo, el título y el botón en un panel blanco. */
.reposo-medio { position: absolute; inset: 0; z-index: 0; background: var(--amarillo); }
.reposo-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pantalla-reposo.con-video::after, .pantalla-reposo.con-video .reposo-pattern { display: none; }
.pantalla-reposo.con-video .reposo-encabezado {
  position: relative;
  z-index: 1;
  order: 2;
  flex: none;
  margin: auto 0 0 var(--panel-x);
  padding: calc(72 * var(--u)) var(--margen) calc(28 * var(--u)) calc(var(--margen) - var(--panel-x));
  border-radius: var(--radio-grande) 0 0 0;
  background: var(--blanco);
}
.pantalla-reposo.con-video .reposo-titulo { font-size: calc(88 * var(--u)); }
.pantalla-reposo.con-video .reposo-panel {
  order: 3;
  height: auto;
  margin: 0 0 0 var(--panel-x);
  padding: 0 var(--margen) calc(72 * var(--u)) calc(var(--margen) - var(--panel-x));
  border-radius: 0;
  background: var(--blanco);
}
.pantalla-reposo.con-video .reposo-toque { margin: 0; background: var(--azul); color: var(--blanco); }
.pantalla-reposo.con-video .reposo-toque .icono { background: var(--blanco); }
.pantalla-reposo.con-video .reposo-toque .icono::before { background: var(--azul); }

/* ---------------------------------------------------------------- opciones (01 y B1) */

.opciones { display: flex; flex-direction: column; gap: calc(32 * var(--u)); }
/* En 01 las tres cajas miden lo mismo (la más alta manda). */
.opciones-inicio { display: grid; grid-auto-rows: 1fr; }

/* Caja de opción, como las del mailing (guía, pág. 16): blanca, contorno azul fino, ícono a la izquierda
   (círculo azul lleno con un pictograma blanco simple) y el texto. En 01 lleva la descripción de la spec. */
.opcion {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--u));
  width: 100%;
  min-height: max(var(--tactil-min), calc(176 * var(--u)));
  padding: calc(36 * var(--u)) calc(48 * var(--u)) calc(36 * var(--u)) calc(44 * var(--u));
  border: var(--borde) solid var(--azul);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--negro);
  text-align: left;
}
.opcion.con-detalle { align-items: flex-start; padding-top: calc(40 * var(--u)); padding-bottom: calc(40 * var(--u)); }
.opcion-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.opcion-titulo { font-size: calc(48 * var(--u)); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.opcion-detalle { font-size: calc(28 * var(--u)); font-weight: 400; line-height: 1.38; text-wrap: pretty; }
/* Círculo azul del alto de la primera línea (en el mailing, ~1,3 veces la línea de texto): 68 px junto a un
   título de 48. En las cajas con descripción va a la altura del título. */
.opcion-icono {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(68 * var(--u));
  height: calc(68 * var(--u));
  border-radius: 50%;
  background: var(--azul);
  color: var(--blanco);
  font-size: calc(38 * var(--u));
}
.opcion.con-detalle .opcion-icono { margin-top: calc(-8 * var(--u)); }
/* Tema sin horarios (B1): como un horario completo, contorno punteado negro y la marca "Sin horarios".
   Se puede tocar: dice que no quedan horarios en vez de pedir los datos. */
.opcion-estado { font-size: calc(24 * var(--u)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.opcion-estado:empty { display: none; }
.opcion.agotada { border-style: dashed; border-color: var(--negro); }
.opcion.agotada .opcion-icono { background: var(--negro); }
.opcion.agotada:active { background: var(--blanco); color: var(--negro); }
.opcion.agotada:active .opcion-icono { background: var(--negro); color: var(--blanco); }
/* Al tocar: fondo azul y texto blanco, sin sombra ni escala. */
.opcion:active { background: var(--azul); color: var(--blanco); }
.opcion:active .opcion-icono { background: var(--blanco); color: var(--azul); }

/* Pictogramas de cada opción (por id de servicio y de tema de evento.json). Uno que no está acá lleva la
   flecha. Trazo simple, sin ilustración (guía, pág. 16: flecha, compartir, persona). */
.opcion .icono {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14M12.5 5.5 19 12l-6.5 6.5'/%3E%3C/svg%3E");
}
.opcion[data-id="comercial"] .icono {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.5v-14M5.5 12 12 5.5l6.5 6.5'/%3E%3C/svg%3E");
}
.opcion[data-id="logistico"] .icono {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 20 7.4v9.2l-8 4.2-8-4.2V7.4z'/%3E%3Cpath d='m4 7.4 8 4.3 8-4.3M12 11.7v9.1M8 5.3l8 4.3'/%3E%3C/svg%3E");
}
/* Persona llena, como el glifo del mailing. */
.opcion[data-accion="cliente"] .icono {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='7.4' r='4.4'/%3E%3Cpath d='M3.6 20.6c.7-4.7 4.1-7.5 8.4-7.5s7.7 2.8 8.4 7.5c.1.5-.3.9-.8.9H4.4c-.5 0-.9-.4-.8-.9z'/%3E%3C/svg%3E");
}
.opcion[data-id="publicaciones"] .icono {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.3V4.6c0-.6.5-1.1 1.1-1.1h7.7l8.4 8.4c.6.6.6 1.6 0 2.2l-6.3 6.3c-.6.6-1.6.6-2.2 0z'/%3E%3Ccircle cx='8.2' cy='8.2' r='1.6'/%3E%3C/svg%3E");
}
.opcion[data-id="facturacion"] .icono {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h12v17l-3-1.8-3 1.8-3-1.8-3 1.8z'/%3E%3Cpath d='M9.3 8.5h5.4M9.3 12h5.4M9.3 15.5h3'/%3E%3C/svg%3E");
}
.opcion[data-id="cuenta"] .icono {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.2'/%3E%3Cpath d='M8.2 10.5V7.8a3.8 3.8 0 0 1 7.6 0v2.7M12 14.6v2'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- botones y avisos */

.acciones { flex: none; display: flex; gap: calc(24 * var(--u)); }
/* En 01 y B1 las opciones van primero y "Volver" queda abajo con aire. */
.opciones + .acciones { margin-top: calc(12 * var(--u)); }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--u));
  min-height: var(--tactil);
  padding: 0 calc(56 * var(--u));
  border: var(--borde) solid var(--azul);
  border-radius: var(--radio-boton);
  font-size: calc(40 * var(--u));
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}
.boton .icono { font-size: calc(42 * var(--u)); }
.boton-principal { flex: 1; padding: 0 calc(36 * var(--u)); background: var(--azul); color: var(--blanco); }
.boton-secundario { background: var(--blanco); color: var(--azul); }
.boton-secundario[data-accion="volver"] { flex: none; gap: calc(14 * var(--u)); padding: 0 calc(40 * var(--u)) 0 calc(30 * var(--u)); }
.boton-principal:active:not(:disabled) { background: var(--negro); border-color: var(--negro); }
.boton-secundario:active:not(:disabled) { background: var(--azul); color: var(--blanco); }
/* Todavía no se puede (por ejemplo "Confirmar agenda" sin horario): blanco con contorno punteado.
   Sin transparencias: el azul semitransparente sobre blanco da un celeste liso que no es de la guía. */
.boton:disabled, .boton[aria-disabled="true"] { background: var(--blanco); border-style: dashed; color: var(--azul); }
.boton.esperando:disabled { background: var(--azul); border-style: solid; color: var(--blanco); }

/* Cuenta regresiva de A2 y B4 dentro del botón "Volver al inicio". */
.boton-cuenta { justify-content: space-between; padding: 0 calc(20 * var(--u)) 0 calc(64 * var(--u)); }
.cuenta {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  border-radius: 50%;
  background: var(--blanco);
  color: var(--azul);
  font-size: calc(38 * var(--u));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cuenta:empty { visibility: hidden; }

.aviso {
  margin: 0;
  padding: calc(24 * var(--u)) calc(32 * var(--u));
  border: max(4px, calc(5 * var(--u))) solid var(--negro);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--negro);
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  /* Dos renglones parejos y no una palabra sola abajo ("…para este / tema."). */
  text-wrap: balance;
}
/* El '!' del aviso, igual que el de los campos: blanco sobre negro. */
.aviso::before, .campo-error:not(:empty)::before {
  content: '!';
  content: '!' / ''; /* el '!' es solo visual: el lector de pantalla lee el mensaje */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--negro);
  color: var(--blanco);
  font-weight: 800;
  vertical-align: 0.05em;
}

/* ---------------------------------------------------------------- campos */

.campos { flex: none; display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.campo { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.campo-etiqueta { font-size: calc(28 * var(--u)); font-weight: 700; line-height: 1.2; }

.campo-caja {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(var(--tactil-min), calc(100 * var(--u)));
  padding: 0 calc(88 * var(--u)) 0 calc(36 * var(--u));
  border: var(--borde) solid var(--azul);
  border-radius: var(--radio);
  background: var(--blanco);
  cursor: text;
}
.campo-entrada {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--negro);
  font-size: calc(46 * var(--u));
  font-weight: 600;
  caret-color: transparent;
  pointer-events: none;
}
/* El ejemplo ("Ej.: 099 123 456") más chico y liviano que un dato cargado: que no se lea como escrito. */
.campo-entrada::placeholder { color: var(--azul); opacity: 1; font-size: calc(34 * var(--u)); font-weight: 400; letter-spacing: 0.04em; }
/* Nombre largo (más de 26 letras): baja de tamaño para que se vea casi entero. */
.campo.largo .campo-entrada { font-size: calc(36 * var(--u)); }
.campo.muy-largo .campo-entrada { font-size: calc(30 * var(--u)); }
/* Cursor simulado (los campos son de solo lectura): al final del texto del campo activo. */
.campo-cursor {
  display: none;
  position: absolute;
  top: 50%;
  left: calc(36 * var(--u) + var(--cursor-x, 0px));
  width: max(2px, calc(4 * var(--u)));
  height: calc(52 * var(--u));
  background: var(--azul);
  transform: translateY(-50%);
  animation: cursor-parpadeo 1.1s steps(1) infinite;
  pointer-events: none;
}
.campo.activo .campo-cursor { display: block; }
.campo.largo .campo-cursor { height: calc(42 * var(--u)); }
.campo.muy-largo .campo-cursor { height: calc(36 * var(--u)); }
@keyframes cursor-parpadeo { 50% { visibility: hidden; } }

/* Campo activo: el contorno azul se engrosa por fuera (el outline no corre nada de lugar) y la etiqueta
   pasa a azul. */
.campo.activo .campo-caja { outline: var(--borde) solid var(--azul); }
.campo.activo .campo-etiqueta { color: var(--azul); }
/* Con error: contorno negro grueso y mensaje en negro. */
.campo.con-error .campo-caja { border-color: var(--negro); outline: max(4px, calc(5 * var(--u))) solid var(--negro); }
.campo.con-error .campo-etiqueta { color: var(--negro); }
/* El activo con error sigue diciendo que es el activo: borde y etiqueta azules dentro del contorno negro. */
.campo.activo.con-error .campo-caja { border-color: var(--azul); }
.campo.activo.con-error .campo-etiqueta { color: var(--azul); }
.campo.valido .campo-caja::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(40 * var(--u));
  width: calc(16 * var(--u));
  height: calc(32 * var(--u));
  border-right: calc(6 * var(--u)) solid var(--azul);
  border-bottom: calc(6 * var(--u)) solid var(--azul);
  transform: translateY(-62%) rotate(45deg);
}

/* El renglón del error queda reservado: que aparezca un mensaje no corre el teclado. */
.campo-error {
  margin: 0;
  min-height: 1.3em;
  font-size: calc(30 * var(--u));
  font-weight: 700;
  line-height: 1.3;
}
.campo-error:not(:empty)::before { margin-right: 0.4em; }
/* Un mensaje que no entra en un renglón (los que marca el servidor son más largos que los del tótem) baja al
   tamaño mínimo de texto en vez de ocupar dos: el renglón reservado no crece y en B2 el teclado no queda
   tapado por los botones de abajo. Lo pone totem.js (ajustarError). */
.campo-error.largo { font-size: calc(24 * var(--u)); }
/* La sugerencia de email ocupa el renglón del error (si hay sugerencia, el email es válido). */
.campo:has(.campo-sugerencia:not([hidden])) .campo-error { display: none; }
[data-campo="b2-email"] .campo-error { min-height: calc(var(--tactil-min) + 4 * var(--u)); }
.campo-sugerencia {
  align-self: flex-start;
  min-height: var(--tactil-min);
  margin-top: calc(4 * var(--u));
  padding: 0 calc(36 * var(--u));
  border: var(--borde) solid var(--azul);
  border-radius: var(--radio-boton);
  background: var(--blanco);
  color: var(--azul);
  font-size: calc(30 * var(--u));
  font-weight: 700;
}
.campo-sugerencia:active { background: var(--azul); color: var(--blanco); }

/* ---------------------------------------------------------------- teclado */

.ranura-teclado:empty { display: none; }

/* Teclas amarillas sobre el panel blanco: el amarillo de la marca, sin cajas con contorno que compitan con
   los campos. La tecla tocada y la tilde pendiente, en azul con texto blanco; "Siguiente" en azul. */
.teclado {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  width: 100%;
  margin: 0 auto;
}
.teclado-fila { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: calc(12 * var(--u)); }
.teclado.modo-numero { max-width: calc(760 * var(--u)); }
.teclado.modo-numero .teclado-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(14 * var(--u)); }

.tecla {
  grid-column: span var(--ancho, 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
  min-width: 0;
  min-height: max(var(--tactil-min), var(--tecla-alto));
  padding: 0 calc(6 * var(--u));
  overflow: hidden;
  border: 0;
  border-radius: calc(22 * var(--u));
  background: var(--amarillo);
  color: var(--negro);
  font-size: calc(42 * var(--u));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.tecla-ayuda { font-size: calc(24 * var(--u)); font-weight: 600; }
.tecla[data-tecla="agudo"] .tecla-texto, .tecla[data-tecla="dieresis"] .tecla-texto { font-size: calc(52 * var(--u)); line-height: 0.55; }
.tecla.tipo-accion { font-size: calc(30 * var(--u)); font-weight: 700; }
.tecla.tipo-rapida { font-size: calc(24 * var(--u)); font-weight: 700; letter-spacing: -0.01em; }
.tecla[data-tecla="siguiente"] { background: var(--azul); color: var(--blanco); }
.tecla.tipo-hueco { visibility: hidden; }
.tecla.activa, .tecla.pulsada { background: var(--azul); color: var(--blanco); }
.tecla[data-tecla="siguiente"].pulsada { background: var(--negro); }
/* Email: una fila más (números), así que las teclas son un poco más bajas. */
.teclado.modo-email .tecla { min-height: max(var(--tactil-min), calc(var(--tecla-alto) - 10 * var(--u))); }
.teclado.modo-numero .tecla { min-height: max(var(--tactil-min), calc(108 * var(--u))); font-size: calc(54 * var(--u)); }
.teclado.modo-numero .tecla.tipo-accion { font-size: calc(32 * var(--u)); }

/* ---------------------------------------------------------------- B3 horarios */

.horarios {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(20 * var(--u));
  align-content: start;
}
.horarios:empty { display: none; }

.horario {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  min-height: max(var(--tactil-min), calc(116 * var(--u)));
  border: var(--borde) solid var(--azul);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--negro);
  font-size: calc(46 * var(--u));
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.horario-detalle { font-size: calc(24 * var(--u)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.horario-detalle:empty { display: none; }
.horario:active:not(:disabled) { background: var(--azul); color: var(--blanco); }
.horario.elegido { background: var(--azul); color: var(--blanco); }
/* Completo: contorno punteado negro y la hora tachada; siempre con la etiqueta "Completo". */
.horario:disabled { border-style: dashed; border-color: var(--negro); color: var(--negro); }
.horario:disabled .horario-hora { font-weight: 500; text-decoration: line-through; text-decoration-thickness: max(2px, calc(3 * var(--u))); }

/* El panel de B3 reserva el lugar de la grilla (18 horarios en 5 filas) y de un aviso de un renglón
   (72 + 660 + 28 + ~104 + 28 + 120 + 56): que lleguen los horarios o que aparezca "se acaba de ocupar" no
   corre el título. "Confirmar agenda" queda abajo. */
.pantalla-horarios .panel { min-height: calc(1068 * var(--u)); }
.pantalla-horarios .acciones { margin-top: auto; }

.estado-horarios {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(28 * var(--u));
  padding: calc(40 * var(--u)) calc(44 * var(--u));
  border: var(--borde) solid var(--azul);
  border-radius: var(--radio);
}
.estado-horarios-texto { margin: 0; font-size: calc(36 * var(--u)); font-weight: 700; line-height: 1.3; text-wrap: balance; }

/* ---------------------------------------------------------------- A2 y B4 */

/* Ficha de datos: caja blanca con contorno azul (como el cuadro del mailing, pág. 16). */
.ficha {
  display: flex;
  flex-direction: column;
  border: var(--borde) solid var(--azul);
  border-radius: var(--radio);
  background: var(--blanco);
}
.ficha p { margin: 0; }

/* A2: "Turno" y el código en azul, Black, lo más grande de la pantalla. */
.ficha-turno { align-items: center; padding: calc(52 * var(--u)) calc(48 * var(--u)) calc(48 * var(--u)); text-align: center; }
.ficha-turno .etiqueta { font-size: calc(30 * var(--u)); letter-spacing: 0.16em; }
.turno-codigo {
  margin-top: calc(8 * var(--u)) !important;
  color: var(--azul);
  font-size: calc(240 * var(--u));
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ficha-persona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--u));
  width: 100%;
  margin-top: calc(44 * var(--u));
  padding-top: calc(36 * var(--u));
  border-top: var(--trazo) solid var(--azul);
}
.ficha-persona:not(:has(p:not(:empty))) { display: none; }
.ficha-nombre { font-size: calc(48 * var(--u)); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.ficha-nombre:empty, .ficha-servicio:empty { display: none; }
.ficha-servicio { font-size: calc(32 * var(--u)); font-weight: 500; line-height: 1.25; }

/* B4: "Tema", "Horario … hs" y "Lugar: Cabina Nº …" (spec de Lucero); hora y cabina en grande. */
.ficha-agenda { padding: calc(44 * var(--u)) calc(48 * var(--u)) calc(40 * var(--u)); }
.ficha-agenda > .ficha-nombre { margin-bottom: calc(28 * var(--u)); }
.ficha-fila { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.ficha-tema { font-size: calc(40 * var(--u)); font-weight: 700; line-height: 1.2; text-wrap: balance; }
.ficha-par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(32 * var(--u));
  margin-top: calc(32 * var(--u));
  padding: calc(32 * var(--u)) 0;
  border-top: var(--trazo) solid var(--azul);
  border-bottom: var(--trazo) solid var(--azul);
}
.ficha-dato { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.ficha-dato + .ficha-dato { padding-left: calc(32 * var(--u)); border-left: var(--trazo) solid var(--azul); }
.dato-valor { display: flex; align-items: baseline; gap: calc(12 * var(--u)); white-space: nowrap; }
.dato-grande { color: var(--azul); font-size: calc(96 * var(--u)); font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dato-unidad { font-size: calc(36 * var(--u)); font-weight: 700; }
.ficha-qr { display: flex; align-items: center; gap: calc(36 * var(--u)); margin-top: calc(32 * var(--u)); }
.ficha-qr:has(.ficha-codigo:empty) { display: none; }
.ficha-qr-imagen { flex: none; width: calc(184 * var(--u)); height: calc(184 * var(--u)); }
.ficha-qr-imagen:empty { display: none; }
.ficha-qr-imagen svg { display: block; width: 100%; height: 100%; }
.ficha-qr > div { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.ficha-codigo { font-size: calc(52 * var(--u)); font-weight: 800; letter-spacing: 0.14em; line-height: 1; }

/* Si la confirmación no entra (nombre de 60 letras más el aviso de impresión), totem.js le pone .compacta:
   el título baja de tamaño y todo queda a la vista sin desplazar. */
.pantalla-confirmacion.compacta .titulo-confirmacion { font-size: calc(92 * var(--u)); }
.pantalla-confirmacion.compacta .encabezado { padding-top: calc(32 * var(--u)); padding-bottom: calc(40 * var(--u)); }
.detalle { margin: 0; font-size: calc(36 * var(--u)); font-weight: 500; line-height: 1.32; text-wrap: pretty; }
.detalle:empty { display: none; }
.detalle-secundario { font-size: calc(30 * var(--u)); }
.pantalla-confirmacion .panel { gap: calc(36 * var(--u)); }

/* ---------------------------------------------------------------- capas */

/* Inactividad y reconexión: tapan todo con la misma composición de las pantallas. */
.capa {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--amarillo);
  touch-action: none;
}
.capa-reconectando { z-index: 60; }
.capa-panel { flex: none; height: calc(760 * var(--u)); align-items: center; justify-content: center; }
/* "¿Seguís ahí?": qué cuenta el número y qué pasa al llegar a cero. */
.capa-etiqueta { font-size: calc(28 * var(--u)); }
.capa-unidad { margin: 0; font-size: calc(36 * var(--u)); font-weight: 700; }
.capa-panel:has(.capa-cuenta) { gap: calc(12 * var(--u)); }
.capa-cuenta {
  margin: 0;
  color: var(--azul);
  font-size: calc(400 * var(--u));
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
/* Reconectando: el mismo panel en degradé azul con el pattern blanco del reposo (es una espera, no un
   error) y un aro blanco con el tramo amarillo que gira. */
.capa-reconectando .capa-panel { position: relative; height: calc(520 * var(--u)); overflow: hidden; background: var(--degrade-azul); }
.capa-reconectando .capa-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pattern-blanco, none) 0 0 / calc(320 * var(--u)) calc(320 * var(--u)) repeat;
  pointer-events: none;
}
.girador {
  position: relative;
  width: calc(200 * var(--u));
  height: calc(200 * var(--u));
  border: calc(18 * var(--u)) solid var(--blanco);
  border-top-color: var(--amarillo);
  border-radius: 50%;
  background: var(--azul);
  animation: girar 1s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Vista del ticket (?imprimir=vista): herramienta de desarrollo, en una esquina. */
.ticket-vista {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 8px;
  border: var(--contorno);
  border-radius: 16px;
  background: var(--blanco);
  user-select: text;
}
.ticket-vista-cerrar {
  min-height: 40px;
  border: var(--contorno);
  border-radius: var(--radio-boton);
  background: var(--blanco);
  color: var(--azul);
  font-size: 14px;
  font-weight: 700;
}

/* ---------------------------------------------------------------- horizontal */

/* Pantalla apaisada (pruebas, o un tótem de mostrador): diseño de 1920 × 1080. El logo, el título y el
   subtítulo van en la columna de la izquierda sobre amarillo; el panel ocupa la derecha de arriba abajo. */
@media (orientation: landscape) {
  :root {
    --u: min(calc(100vw / 1920), calc(100vh / 1080));
    --tactil: max(var(--tactil-min), calc(104 * var(--u)));
    --tecla-alto: calc(84 * var(--u));
    --radio-grande: calc(180 * var(--u));
    --columna: calc(760 * var(--u));
  }
  .totem, .capa {
    display: grid;
    grid-template-columns: var(--columna) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .totem > .cabecera, .capa > .cabecera { grid-column: 1; grid-row: 1; padding-top: calc(56 * var(--u)); }
  .pantalla { display: contents; }
  .pantalla > .encabezado, .capa > .encabezado { grid-column: 1; grid-row: 2; align-self: start; padding-bottom: 0; }
  .pantalla > .panel, .capa > .panel { grid-column: 2; grid-row: 1 / span 2; height: auto; margin: 0; padding: calc(64 * var(--u)) calc(72 * var(--u)) calc(48 * var(--u)); justify-content: center; }
  .encabezado::after, .encabezado::before { display: none; }
  .capa-reconectando .capa-panel { height: auto; }
  .titulo { font-size: calc(76 * var(--u)); }
  .titulo-confirmacion { font-size: calc(108 * var(--u)); }
  .subtitulo { font-size: calc(34 * var(--u)); }

  body[data-pantalla-actual="reposo"] .totem > .cabecera { padding-top: calc(96 * var(--u)); }
  .pantalla-reposo > .reposo-panel { grid-column: 2; grid-row: 1 / span 2; height: auto; margin: 0; display: flex; align-items: flex-end; }
  .pantalla-reposo::after { display: none; }
  .reposo-titulo { font-size: calc(104 * var(--u)); }
  .reposo-toque { margin: 0 0 calc(96 * var(--u)) calc(96 * var(--u)); }
  .reposo-medio { grid-column: 2; grid-row: 1 / span 2; position: relative; }

  .opcion.con-detalle { min-height: calc(220 * var(--u)); }
  .horarios { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .turno-codigo { font-size: calc(200 * var(--u)); }
  .ficha-qr-imagen { width: calc(160 * var(--u)); height: calc(160 * var(--u)); }
}

/* Con "reducir movimiento" (accesibilidad, y las pruebas e2e) el reposo queda quieto. */
@media (prefers-reduced-motion: reduce) {
  body.totem *, body.totem *::before, body.totem *::after { animation: none !important; transition: none !important; }
}