/* ============================================================
   Modo cliente — pantalla de enlace del iPad (Puerta 1).
   Versión mínima: solo las clases que esta pantalla usa hoy. El
   catálogo/nav del iPad trae su propio CSS con esa tarea — no se
   adelanta aquí. Sigue el mismo patrón de tarjeta centrada que
   `.auth`/`.auth__card` (components.css) usa para el login de HQ.
   ============================================================ */

body.tablet {
  min-height: 100dvh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: var(--color-bg-2);
  color: var(--color-ink);
}

/* --- Bloque .enlace: la tarjeta de dos pasos (pedir PIN → capturarlo) --- */
.enlace {
  width: min(480px, 100%);
  padding: var(--space-6) var(--space-5);
  background: var(--color-bg);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop);
}

.enlace__titulo {
  margin: 0 0 var(--space-5);
  font-size: var(--text-2xl);
  color: var(--color-brand-navy);
}

.enlace__ayuda {
  margin: 0 0 var(--space-5);
  color: var(--color-ink-2);
  font-size: var(--text-m);
  line-height: 1.5;
}

.enlace__forma {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
/* El botón ya trae --tap de .btn; aquí solo lo hacemos de ancho completo,
   como conviene a un formulario de un solo paso en un iPad de pie. */
.enlace__forma .btn { width: 100%; }

.enlace__otro {
  display: block;
  margin-top: var(--space-5);
  color: var(--color-brand);
  font-size: var(--text-s);
  text-align: center;
}

/* --- .campo: un par label+input, la unidad mínima de un formulario --- */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.campo .label { margin-bottom: 0; }

/* --- .aviso: los flash de esta pantalla (independientes del .flash de
   HQ: el modo cliente es su propia superficie, sin la barra de HQ) --- */
.aviso {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-s);
  font-size: var(--text-s);
}
.aviso--alert { color: var(--color-danger); background: var(--color-danger-soft); }
.aviso--notice { color: var(--color-ok); background: var(--color-ok-soft); }

/* --- Bloque .entrada: Puerta 2 — "¿quién eres?" y "estrena tu NIP" ---
   Tarjeta más ancha que .enlace porque aquí vive una CUADRÍCULA de personas,
   no un solo formulario. Cada vendedor es su propia tarjeta tocable, pensada
   para un dedo y un iPad de pie (por eso el avatar y el input crecen). */
.entrada {
  width: min(720px, 100%);
  padding: var(--space-6) var(--space-5);
  background: var(--color-bg);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop);
}

.entrada__lugar {
  margin: 0 0 var(--space-6);
  color: var(--color-ink-2);
  font-size: var(--text-m);
  line-height: 1.5;
}

.entrada__gente {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

.entrada__persona form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  background: var(--color-bg-2);
  border-radius: var(--radius-m);
  text-align: center;
}
.entrada__persona .btn { width: 100%; }

.entrada__avatar {
  display: grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--color-brand-soft);
  color: var(--color-brand-navy);
  font-size: var(--text-l);
  font-weight: var(--weight-medium);
}

.entrada__nombre {
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

/* El NIP se teclea de pie: dígitos grandes y separados, como un candado. */
.entrada__nip {
  text-align: center;
  letter-spacing: 0.4em;
  font-size: var(--text-l);
}

/* ============================================================
   Catálogo, ficha de producto y menú lateral (Tarea 3).
   Layout del iPad: sin header de dashboard, lateral colapsable, controles
   flotantes abajo. Todo en tokens — cero números mágicos.
   ============================================================ */

/* El shell del catálogo va A SANGRE (spec, "Interfaz"): sin el centrado ni
   el padding que `body.tablet` (Tarea 1) usa para las tarjetas de
   .enlace/.entrada. El layout pone `tablet--shell` en el body SOLO cuando
   hay `current_seller`; dos clases en el mismo elemento (0,2,1) le ganan en
   especificidad a `body.tablet` sola (0,1,1) sin depender del orden de las
   reglas en el archivo. La regla anterior, `.tablet { background }`, nunca
   se aplicaba: perdía ese empate contra `body.tablet` (0,1,0 contra 0,1,1) y
   quedó agregada en vez de reemplazar nada — hallazgo I-5 de la revisión. */
body.tablet.tablet--shell {
  display: block;
  padding: 0;
  place-items: unset;
  background: var(--color-bg);
}

/* Horizontal: el lateral EMPUJA (columna real de la rejilla). */
.shell { min-height: 100dvh; display: grid; grid-template-columns: var(--lateral) 1fr;
         transition: grid-template-columns var(--motion-lateral);

         /* LA LÍNEA ÓPTICA de la primera fila del shell. Tres cosas tienen que
            leerse a la misma altura ahí: el título, la identidad de la derecha
            y la hamburguesa. Las tres arrancan en el mismo borde superior del
            contenido, pero NO miden lo mismo: el título ocupa su interlínea
            (--leading-title x --text-2xl = 36.8 px) y los otros dos miden --tap
            (44 px). Este valor es la mitad de esa diferencia —negativo, porque
            el título es más bajo— y es lo que hay que sumarle a los de 44 px
            para que sus centros caigan sobre el centro del título.
            Calculado, no a ojo: si alguien cambia --text-2xl o --leading-title,
            los tres se vuelven a alinear solos. */
         --linea-optica: calc((var(--leading-title) * var(--text-2xl) - var(--tap)) / 2); }
.shell--cerrado { grid-template-columns: 0 1fr; }

.lateral { overflow: hidden auto; background: var(--color-bg-2);
           border-right: 1px solid var(--color-line);
           /* Aire arriba: la app va sin barra nativa, así que el margen contra
              el reloj lo pone la web — fijo, más el del sistema si existe.
              Desde que la hamburguesa se mudó ARRIBA a la izquierda, ese aire
              tiene que dejar pasar el botón entero: la primera categoría
              empieza DEBAJO de él, no a medias. Es el mismo desglose que usa
              `.burger` (--space-4 de inset + --fab de botón) más --space-3 de
              respiro. */
           padding: calc(var(--space-7) + var(--linea-optica) + var(--tap) +
                         var(--space-3) + env(safe-area-inset-top, 0px)) 0
                    calc(var(--fab) + var(--space-6));
           transition: transform var(--motion-lateral); }
.lateral__lista { list-style: none; margin: 0; padding: 0; }
.lateral__item { display: flex; align-items: center; min-height: var(--tap);
                 padding: var(--space-3) var(--space-5); color: var(--color-ink-2);
                 text-decoration: none; font-size: var(--text-l); }
.lateral__item--on { color: var(--color-brand); background: var(--color-brand-soft);
                     font-weight: var(--weight-medium); }
.velo { display: none; }

.shell__cuerpo { min-width: 0;
                 padding: calc(var(--space-7) + env(safe-area-inset-top, 0px))
                          var(--space-4) calc(var(--tap-xl) + var(--space-7)); }
.shell__titulo { font-size: var(--text-2xl); margin: 0 0 var(--space-4); }
/* Con el menú CERRADO la hamburguesa cae sobre la esquina del contenido: el
   título se recorre a la derecha justo lo que ocupa el botón (--tap) más un
   respiro (--space-3). Abierto no hace falta: el botón se va al borde del
   lateral y el lateral empuja el contenido más allá — por eso la regla cuelga
   de `.shell--cerrado` y no del título a secas. */
.shell--cerrado .shell__titulo { padding-left: calc(var(--tap) + var(--space-3)); }

/* Identidad: texto sobre el contenido, sin barra de fondo. Es un <details>,
   mismo patrón sin JavaScript que el perfil de HQ (.profile en components.css).
   `position: relative` para colgarle el desplegable debajo-derecha. */
/* `margin-top` negativo por `--linea-optica`: la identidad mide --tap (la
   alto del avatar) y el título es más bajo; sin este ajuste su centro cae
   3.6 px por debajo del centro del título. Misma expresión que usa el `top` de
   la hamburguesa, para que las tres cosas se muevan juntas. */
.quien { float: right; position: relative; margin-left: var(--space-4);
         margin-top: var(--linea-optica); }
.quien__resumen { display: flex; align-items: center; gap: var(--space-2);
                  list-style: none; cursor: pointer; }
.quien__resumen::-webkit-details-marker { display: none; }
.quien__lugar { text-align: right; font-size: var(--text-s); color: var(--color-ink-3);
                line-height: 1.35; }
.quien__lugar b { display: block; color: var(--color-ink-2); font-weight: var(--weight-medium); }
.quien__av { width: var(--tap); height: var(--tap); border: 0; border-radius: var(--radius-pill);
             background: var(--color-brand-navy); color: #fff; cursor: pointer;
             display: flex; align-items: center; justify-content: center;
             flex: none;
             font: var(--weight-medium) var(--text-s) var(--font-sans); }

/* El desplegable: debajo y alineado a la derecha del avatar. Por encima de la
   barra y de la hamburguesa (z-index 40) y del velo del lateral (44), que en
   vertical se dibuja sobre el contenido. */
.quien__menu { position: absolute; right: 0; top: calc(100% + var(--space-2));
               width: 280px; padding: var(--space-2); display: grid; gap: var(--space-1);
               background: var(--color-bg); border: 1px solid var(--color-line);
               border-radius: var(--radius-m); box-shadow: var(--shadow-pop);
               z-index: 50; }
/* Cada opción es un blanco táctil completo: --tap de alto, ancho del menú. */
.quien__op { display: flex; align-items: center; gap: var(--space-3);
             min-height: var(--tap); width: 100%; padding: 0 var(--space-3);
             border: 0; border-radius: var(--radius-s); background: none;
             color: var(--color-ink); text-align: left; text-decoration: none;
             cursor: pointer;
             font: var(--weight-regular) var(--text-m) var(--font-sans); }
.quien__op:active { background: var(--color-bg-2); }
/* Ayuda: visible, pero todavía no lleva a ningún lado. */
.quien__op--off { color: var(--color-ink-3); cursor: default; }
.quien__op--off:active { background: none; }
.quien__op--peligro { color: var(--color-danger); }
.quien__op--peligro:active { background: var(--color-danger-soft); }
.quien__sep { height: 1px; margin: var(--space-1) var(--space-2);
              background: var(--color-line); }

/* Hamburguesa: fija ARRIBA a la izquierda (31 ago: el dueño usó la app en el
   iPad y la busca ahí; el uso real le gana al mockup, que la puso flotando
   abajo). SIN círculo: tres líneas sobre el fondo, nada más — ni disco, ni
   borde, ni sombra. El blanco táctil sigue siendo --tap aunque el dibujo mida
   --icono-ancho: se toca el botón, se ve el icono.

   LA REGLA NUEVA (reemplaza a "se vuelve X en el mismo punto"): LA X VIAJA AL
   BORDE DEL MENÚ. Cerrado, el botón vive junto al título; abierto, se desliza
   hasta el borde derecho del lateral y ahí se vuelve X. Las dos cosas —el
   viaje y el morph— corren con `--motion-lateral`, la MISMA duración y curva
   con la que el lateral abre: se ve un solo gesto, el icono cruzando a la
   derecha mientras se convierte en X, y al cerrar el viaje inverso.

   `top` sale de la línea óptica del shell (ver `--linea-optica` arriba), no de
   un número a ojo: el centro del botón cae sobre el centro del título y sobre
   el de la identidad de la derecha.

   z-index 46 y no 40: en VERTICAL el lateral se superpone (45) sobre su velo
   (44), y el botón abierto vive ENCIMA de ese panel. Sigue por debajo del menú
   del perfil (50). */
.burger { position: fixed; left: var(--space-4);
          top: calc(var(--space-7) + var(--linea-optica) +
                    env(safe-area-inset-top, 0px));
          width: var(--tap); height: var(--tap);
          padding: 0; border: 0; background: none; box-shadow: none;
          cursor: pointer; z-index: 46; color: var(--color-ink-2);
          display: flex; flex-direction: column;
          align-items: center; justify-content: center; gap: var(--space-1);
          transition: left var(--motion-lateral); }

.burger__linea { display: block; width: var(--icono-ancho); height: var(--icono-trazo);
                 border-radius: var(--radius-pill); background: currentColor;
                 transition: transform var(--motion-lateral),
                             opacity var(--motion-lateral); }

/* Abierto: el botón se va al borde derecho del lateral (mismo --lateral en
   horizontal y en vertical, así que este `left` vale en las dos: en horizontal
   el panel es columna de la rejilla, en vertical es un panel fijo superpuesto,
   pero mide lo mismo) y las líneas se cruzan en X. El desplazamiento de las
   dos que rotan es exactamente lo que las separa del centro: el hueco del flex
   (--space-1) más su propio grosor (--icono-trazo). */
.shell:not(.shell--cerrado) .burger {
  left: calc(var(--lateral) - var(--tap) - var(--space-3)); }
.shell:not(.shell--cerrado) .burger__linea:nth-child(1) {
  transform: translateY(calc(var(--space-1) + var(--icono-trazo))) rotate(45deg); }
.shell:not(.shell--cerrado) .burger__linea:nth-child(2) { opacity: 0; }
.shell:not(.shell--cerrado) .burger__linea:nth-child(3) {
  transform: translateY(calc(-1 * (var(--space-1) + var(--icono-trazo)))) rotate(-45deg); }

.parrilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.producto { border-radius: var(--radius-m); overflow: hidden; background: var(--color-bg-2);
            border: 1px solid var(--color-line); text-decoration: none; color: inherit; }
.producto__foto { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
                  background: var(--color-line-2); }
.producto__txt { display: block; padding: var(--space-2) var(--space-3); }
.producto__txt small { color: var(--color-ink-3); font-size: var(--text-xs); }

.ficha { display: flex; gap: var(--space-4); }
.ficha__preview { width: 56%; }
.ficha__lienzo { aspect-ratio: 16/10; border-radius: var(--radius-m); overflow: hidden;
                 background: var(--color-ink); display: grid; place-items: center; }
.ficha__lienzo img,
.ficha__lienzo video { width: 100%; height: 100%; object-fit: contain; }
.ficha__pie { display: flex; justify-content: space-between; align-items: baseline;
              padding: var(--space-2) var(--space-1); color: var(--color-ink-3);
              font-size: var(--text-s); }
.ficha__piezas { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr);
                 gap: var(--space-3); align-content: start; }
.pieza { position: relative; border-radius: var(--radius-s); overflow: hidden;
         border: 1px solid var(--color-line); text-decoration: none; color: inherit; }
.pieza--on { outline: 2px solid var(--color-brand); outline-offset: 1px; }
.pieza__mini { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover;
               background: var(--color-line-2); }
.pieza__pie { display: block; padding: var(--space-2); font-size: var(--text-s); }

/* Vertical: la parrilla baja a 2 columnas y el lateral SE SUPERPONE con velo,
   como iPadOS. */
@media (orientation: portrait) {
  .shell { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: var(--lateral); z-index: 45;
             transform: translateX(0); }
  .shell--cerrado .lateral { transform: translateX(-100%); }
  .velo { display: block; position: fixed; inset: 0; z-index: 44;
          background: rgba(0, 0, 0, 0.4); }
  .shell--cerrado .velo { display: none; }
  .parrilla { grid-template-columns: repeat(2, 1fr); }
  .ficha { flex-direction: column; }
  .ficha__preview { width: 100%; }
}

/* ============================================================
   Barra de transmisión y listón EN EL AIRE (Tarea 4).
   ============================================================ */

/* Controles abajo a la derecha, en píldora de --tap-xl (el mínimo de Apple es
   --tap; aquí se usa de pie y a un brazo de distancia). */
.barra { position: fixed; right: var(--space-4); bottom: var(--space-4);
         display: flex; align-items: stretch; gap: var(--space-2); z-index: 40; }
/* La zona de botones que depende de la ficha necesita un id propio para que el
   Turbo Stream la reponga al navegar (C-1). `display: contents` la deja fuera
   del layout: los botones siguen siendo hijos del flex de .barra. */
.barra__zona { display: contents; }
.barra__cta, .barra__pantalla, .barra__cliente {
  height: var(--tap-xl); border: 0; border-radius: var(--radius-pill);
  padding: 0 var(--space-5); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: var(--weight-medium) var(--text-m) var(--font-sans);
  box-shadow: var(--shadow-pop);
}
.barra__cta { background: var(--color-brand); color: #fff; }
.barra__cta--live { background: var(--color-ok); }
.barra__cta--parar { background: var(--color-ink-2); padding: 0 var(--space-4); }
.barra__punto { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill);
                background: #fff; animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { opacity: 0.25; } }
.barra__pantalla { background: var(--color-bg); color: var(--color-ink-2);
                   border: 1px solid var(--color-line); }
.barra__cliente { background: var(--color-bg); color: var(--color-brand);
                  border: 2px solid var(--color-brand); }
/* La píldora "Cliente" en la vista previa de HQ: se dibuja para que el marco se
   vea como el iPad, pero no manda nada (C-1, revisión T9). */
.barra__cliente--off { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* Listón sobre la miniatura que está proyectada AHORA, que puede no ser la que
   el vendedor trae en el preview. */
.pieza__aire { position: absolute; top: var(--space-2); left: var(--space-2);
               padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill);
               background: var(--color-ok); color: #fff;
               font-size: var(--text-xs); font-weight: var(--weight-medium);
               letter-spacing: 0.06em; }

/* ============================================================
   El cuestionario del cliente y su resultado (Tarea 5).
   Es otra app y se debe notar: fondo de marca en vez de blanco, una sola
   pregunta por pantalla, tarjetas grandes (spec, "Modo cliente").
   ============================================================ */

.quiz { min-height: 100dvh;
        padding: calc(var(--space-6) + env(safe-area-inset-top, 0px)) var(--space-7) var(--space-6);
        background: var(--color-brand-navy); color: #fff;
        display: flex; flex-direction: column; gap: var(--space-5); }
.quiz__alto { display: flex; align-items: center; justify-content: space-between; }
.quiz__marca { font-weight: var(--weight-medium); letter-spacing: 0.22em; }
.quiz__progreso { display: flex; gap: var(--space-2); }
.quiz__progreso i { width: var(--space-6); height: var(--space-1);
                    border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.25); }
.quiz__progreso i.quiz__paso--on { background: #fff; }

.quiz__nota { display: flex; gap: var(--space-3); align-items: flex-start;
              padding: var(--space-3) var(--space-4); border-radius: var(--radius-m);
              background: rgba(255, 255, 255, 0.1); }
.quiz__nota p { margin: 0; }
.quiz__nota-marca { width: var(--tap); height: var(--tap); flex: none;
                    border-radius: var(--radius-pill); background: #fff;
                    color: var(--color-brand-navy); font-weight: var(--weight-medium);
                    display: flex; align-items: center; justify-content: center; }

.quiz__pregunta { font-size: var(--text-2xl); margin: 0; color: #fff; }
.quiz__ayuda { color: rgba(255, 255, 255, 0.7); margin: 0; }

.quiz__opciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.opcion { min-height: calc(var(--tap-xl) * 2); width: 100%; cursor: pointer;
          padding: var(--space-5); border: 1px solid rgba(255, 255, 255, 0.25);
          border-radius: var(--radius-m); background: rgba(255, 255, 255, 0.08);
          color: #fff; text-align: left; font: var(--weight-regular) var(--text-l) var(--font-sans);
          display: flex; flex-direction: column; gap: var(--space-1); }
.opcion:hover { background: rgba(255, 255, 255, 0.16); }
.opcion__ico { font-size: var(--text-xl); }
.opcion small { color: rgba(255, 255, 255, 0.7); font-size: var(--text-s); }

.quiz--resultado { justify-content: center; }
.quiz__intro { color: rgba(255, 255, 255, 0.7); margin: 0; }
.quiz__producto { font-size: var(--text-stat); margin: 0; color: #fff; }
.quiz__honesto { max-width: 60ch; margin: 0; color: rgba(255, 255, 255, 0.85); }
.quiz__honesto b { font-weight: var(--weight-medium); }
.quiz__cierre { padding: var(--space-5); border-radius: var(--radius-m);
                background: rgba(255, 255, 255, 0.08); }
.quiz__cierre h2 { color: #fff; }
.consentimiento { display: flex; align-items: center; gap: var(--space-2);
                  margin: var(--space-3) 0; font-size: var(--text-s); }
.quiz__no { margin-top: var(--space-3); }

.aviso-privacidad { max-width: 640px; border: 0; border-radius: var(--radius-m);
                    padding: var(--space-6); color: var(--color-ink); }
.aviso-privacidad::backdrop { background: rgba(0, 0, 0, 0.5); }

/* La salida del modo cliente. Sobria pero LEGIBLE: es la única forma de
   recuperar el aparato, y un vendedor que no la encuentra tiene un iPad
   secuestrado con un cliente enfrente. Que el cliente la vea no cuesta nada —
   pide NIP. Blanco sólido sobre el navy del quiz, no un translúcido al 12%. */
.quiz__vendedor { position: fixed; left: var(--space-4); bottom: var(--space-4);
                  min-height: var(--tap); padding: 0 var(--space-5); cursor: pointer;
                  border: 0; border-radius: var(--radius-pill);
                  background: #fff; color: var(--color-brand-navy);
                  box-shadow: var(--shadow-pop);
                  font: var(--weight-medium) var(--text-m) var(--font-sans); }
.salir { max-width: 420px; border: 0; border-radius: var(--radius-m);
         padding: var(--space-6); color: var(--color-ink); }
.salir::backdrop { background: rgba(0, 0, 0, 0.6); }

/* Vista previa desde HQ (Tarea 9): el lienzo del iPad, a escala, dentro de la
   plataforma. Las medidas del aparato son datos del hardware, no del sistema
   de diseño: van como tokens locales del organismo, no sueltas en la
   marcación. Vive aquí y no en un stylesheet propio de HQ porque `:app`
   empaqueta este archivo junto con tokens/base/components para las dos capas
   (layout de HQ y layout del iPad) — ver stylesheet_link_tag :app. */
.preview { --lienzo-ancho: 1180px; --lienzo-alto: 820px; --lienzo-escala: 0.7; }
.preview__marco { width: calc(var(--lienzo-ancho) * var(--lienzo-escala));
                  height: calc(var(--lienzo-alto) * var(--lienzo-escala));
                  border: 1px solid var(--color-line-2); border-radius: var(--radius-m);
                  overflow: hidden; box-shadow: var(--shadow-pop); }
.preview__marco iframe { width: var(--lienzo-ancho); height: var(--lienzo-alto); border: 0;
                         transform: scale(var(--lienzo-escala)); transform-origin: top left; }