/* ZERO · Escaner y resultado
   css/escaner.css

   La camara y la pantalla de resultado con su medidor de nota.

   Salio de index.html, que tenia 5302 lineas. Es 1 de 8 pedazos y se
   carga en un orden fijo desde index.html: NO lo reacomodes ahi. */

/* ===== escáner: cámara primero ===== */
/* TODO SUBE. El disparador quedaba justo detrás del botón de la Z de la barra
   de abajo —el mismo botón que trae a esta pantalla, tapando el botón para el
   que se vino—. Y arriba sobraba aire: el titular de esta pantalla no necesita
   el respiro de las demás, porque debajo no hay una lectura larga sino una
   cámara encendida esperando. Se recorta arriba y el disparador sale de debajo
   de la Z sin encoger nada. */
#view-scan .hero{padding:max(30px,calc(14px + env(safe-area-inset-top,0px))) 22px 10px}
#view-scan .hero h1{font-size:clamp(30px,8.2vw,38px)}
/* LA INSTRUCCIÓN DEL PASO: grande, centrada y con lo que importa en dorado.
   Es lo único que hay que leer en esta pantalla, y se lee de reojo con el bote
   en una mano y el teléfono en la otra. Por eso crece y se centra encima del
   visor, en vez de ser un renglón gris debajo del titular.

   TRES RENGLONES DE ALTO, SIEMPRE. El texto cambia con el paso —dos renglones
   en uno, tres en otro— y con eso la cámara entera daba un salto cada vez. Un
   visor que sube y baja mientras apuntas es de las cosas que más se notan y
   menos se perdonan. Reservado el alto del más largo, nada se mueve. */
#view-scan .hero p{margin:8px 0 2px;font-size:16px;line-height:1.4;
  text-align:center;min-height:4.2em;color:var(--ink)}
/* La parte que dice QUÉ fotografiar. En mayúsculas y en el dorado de la marca:
   se encuentra sin leer la frase entera. Nada de cursiva — <em> aquí es "esto
   es lo que importa", no un tono de voz. */
#view-scan .hero p em{font-style:normal;font-weight:600;color:var(--sand);
  letter-spacing:.02em}
/* EL AIRE ALREDEDOR DEL DISPARADOR, y por qué es una cuenta y no un número.
   -------------------------------------------------------------------
   En un teléfono grande sobraban unos 55 puntos de nada entre "Subir una foto"
   y la barra de abajo: todo se veía apelotonado arriba y el botón de tomar la
   foto —que es EL botón de esta pantalla— iba pegado a lo de al lado. Pero ese
   aire no existe en un teléfono chico: en un iPhone SE el disparador ya llega
   justo, y sumarle 30 puntos lo metía debajo del botón de la Z.

   Así que el respiro se reparte según lo alta que sea la pantalla: 10 puntos en
   una de 667 (no cambia nada de lo que ya cabía) y 30 en una de 932 (se come
   casi todo el hueco muerto). La recta que une esos dos puntos es esta. */
#camWrap{--aire:clamp(10px,calc(6.6vh - 34px),30px);padding:2px 22px 4px}

/* LA COLUMNA DE LA CÁMARA SE ESTIRA HASTA ABAJO.
   -------------------------------------------------------------------
   El problema no era que faltara aire, era dónde estaba: en un teléfono de 932
   puntos quedaban 137 de nada entre "Subir una foto" y el botón de la Z, y todo
   lo de arriba se veía apelotonado contra el techo. Con paddings fijos eso no
   se arregla — el sobrante depende de lo alta que sea la pantalla, y cada
   teléfono tiene otro.

   Así que el bloque de la cámara toma TODA la altura que sobra y se pega abajo.
   El visor crece hasta el tope con lo que le quede, y lo que aún sobre se va
   arriba, como respiro debajo del titular. En un teléfono chico ocurre al revés
   y por eso mismo funciona: el visor se encoge lo justo para que el disparador
   nunca acabe debajo del botón de la Z, que era el otro problema de siempre.

   El 100% es la altura visible de <main> menos su colchón de abajo (140px, el
   sitio de la barra flotante): main tiene altura definida, así que el
   porcentaje resuelve. Si algún navegador no lo resolviera, se queda en auto y
   todo vuelve a apilarse como antes — se degrada, no se rompe. */
#view-scan.active{display:flex;flex-direction:column;min-height:100%}
#camWrap{flex:1;display:flex;flex-direction:column;justify-content:flex-end}
/* El tope de alto es lo que salva a los teléfonos chicos. Con solo la
   proporción, en una pantalla de 667 puntos (un iPhone SE) el visor crecía
   hasta empujar el disparador 26 puntos por DEBAJO del botón de la Z. Con el
   tope, el visor se encoge un poco en esas pantallas y no se toca nada más:
   el video va con `cover` y el marco va en porcentajes, así que los dos se
   acomodan solos. */
.viewfinder{position:relative;border-radius:26px;overflow:hidden;background:#000;
  /* EL TOPE DE ALTO, ahora en forma de resta y no de porcentaje.
     Debajo del visor va SIEMPRE lo mismo: el aviso del código, el disparador,
     los dos atajos y el sitio reservado para la barra flotante. Todo junto mide
     unos 455 puntos, y la cuenta dice lo obvio: el visor puede ocupar lo que
     queda de la pantalla y ni un punto más. Con un porcentaje (42vh, 46vh…) eso
     salía bien en un teléfono y mal en el siguiente — en uno de 667 el visor
     empujaba los atajos justo encima del botón de la Z.
     El techo de 440 es para que en una tableta el visor no se vuelva un mural. */
  /* AQUÍ SE RESTABA EL ALTO DEL CARRETE DE FOTOS, para que cupiera entero sin
     deslizar. Duró medio día: en el teléfono, ver la cámara encogerse a la
     mitad al tomar la primera foto se lee como si la app se hubiera roto. El
     carrete asoma por abajo y se desliza, como cualquier galería. */
  aspect-ratio:3/3.15;max-height:min(calc(100dvh - 455px),440px);
  /* Crece con el hueco que sobre y se encoge cuando falta. El `min-height` es
     el suelo: en una pantalla absurdamente baja el visor sigue siendo un visor
     y no una rendija, aunque para eso la pantalla tenga que deslizarse. */
  flex:1 1 auto;min-height:200px}
.viewfinder video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ===== LOS DOS MODOS, FLOTANDO SOBRE EL VISOR =====
   Van encima de la imagen y no debajo del titular a propósito: el pulgar está
   en el disparador y los ojos en el visor, así que el interruptor de lo que la
   cámara hace tiene que estar donde se está mirando. Es el mismo sitio donde lo
   ponen todas las apps que leen códigos, y eso también cuenta: nadie tiene que
   aprender dónde está. */
.modo-cam{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:4;
  display:flex;gap:3px;padding:3px;border-radius:22px;
  background:rgba(11,11,14,.55);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modo-b{display:flex;align-items:center;gap:6px;border:0;border-radius:20px;cursor:pointer;
  padding:8px 14px;font-family:inherit;font-size:12.5px;font-weight:600;
  background:transparent;color:rgba(255,255,255,.72);white-space:nowrap;
  transition:background 160ms var(--ease),color 160ms var(--ease)}
.modo-b svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.modo-b.on{background:#fff;color:#15121a}
.modo-b:active{transform:scale(.97)}
/* EL MARCO DE ENCUADRE.
   -------------------------------------------------------------------
   Lo que se ve aquí dentro es lo ÚNICO que se lee: capturePhoto() recorta la
   foto a este rectángulo. Antes se leía el cuadro entero y por eso entraban
   las instrucciones, el párrafo del reciclaje y la dirección de la marca.

   Y hace un segundo trabajo, callado: para que la lista llene el marco hay que
   acercar el bote. Una etiqueta de letra chica fotografiada de lejos no la lee
   nadie, y pedir "acércate" con palabras no funciona; con un marco, sí. */
.vf-marco{position:absolute;left:6%;right:6%;top:17%;bottom:17%;z-index:2;border-radius:16px;
  border:1px solid rgba(255,255,255,.42);
  /* La sombra gigante oscurece TODO lo de fuera del marco. Es la manera de
     decir "esto no cuenta" sin escribirlo. */
  box-shadow:0 0 0 9999px rgba(0,0,0,.45)}
.vf-marco::after{content:attr(data-pista);position:absolute;left:-6%;right:-6%;bottom:-27px;
  text-align:center;font-size:11.5px;letter-spacing:.01em;color:rgba(255,255,255,.78)}
.vfc{position:absolute;width:26px;height:26px;border:0 solid rgba(255,255,255,.92)}
.vfc.tl{top:-1px;left:-1px;border-top-width:2.5px;border-left-width:2.5px;border-top-left-radius:13px}
.vfc.tr{top:-1px;right:-1px;border-top-width:2.5px;border-right-width:2.5px;border-top-right-radius:13px}
.vfc.bl{bottom:-1px;left:-1px;border-bottom-width:2.5px;border-left-width:2.5px;border-bottom-left-radius:13px}
.vfc.br{bottom:-1px;right:-1px;border-bottom-width:2.5px;border-right-width:2.5px;border-bottom-right-radius:13px}

/* G: iOS pinta su propio botón de reproducir encima de un video que todavía no
   arranca — la flecha que aparecía al abrir la cámara. No es un control de la
   app y no lleva a ningún lado: se esconde. */
.viewfinder video::-webkit-media-controls,
.viewfinder video::-webkit-media-controls-start-playback-button,
.viewfinder video::-webkit-media-controls-play-button,
.viewfinder video::-webkit-media-controls-panel{display:none!important;-webkit-appearance:none}

.vf-line{position:absolute;left:4%;right:4%;top:4%;height:2px;border-radius:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--sand),transparent);box-shadow:0 0 16px var(--sand);
  animation:scanline 3s ease-in-out infinite alternate}
@keyframes scanline{to{top:93%}}
/* La linterna vive a la izquierda del disparador, sin empujarlo del centro: el
   botón de tomar la foto se queda donde el pulgar ya sabe que está. */
.cap-row{position:relative;display:flex;align-items:center;justify-content:center;
  padding:var(--aire,12px) 0 2px}
.flash-btn{position:absolute;left:24px;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(11,11,14,.55);border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  transition:background 160ms var(--ease),border-color 160ms var(--ease)}
.flash-btn[hidden]{display:none!important}
.flash-btn svg{width:20px;height:20px;fill:rgba(255,255,255,.85);stroke:none}
.flash-btn.on{background:var(--sand);border-color:var(--sand)}
.flash-btn.on svg{fill:#2b2214}
.flash-btn:active{transform:translateY(-50%) scale(.9)}
/* En espejo con la linterna: el catálogo de lo ya analizado. Mismo tamaño y
   misma distancia al borde, para que el disparador se quede en el centro
   exacto y el pulgar no tenga que buscarlo. */
.todo-btn{position:absolute;right:24px;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(11,11,14,.55);border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center}
.todo-btn svg{width:19px;height:19px;fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.7}
.todo-btn:active{transform:translateY(-50%) scale(.9)}
.cap-btn{width:70px;height:70px;border-radius:50%;border:3px solid #fff;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform 140ms var(--ease)}
.cap-btn span{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--rose))}
.cap-btn:active{transform:scale(.9)}
/* Los dos atajos NO van pegados al disparador: son la salida de emergencia
   —para cuando la cámara no puede con la etiqueta—, no la acción principal, y
   pegados a 4 puntos competían con ella. Se separan con el mismo aire que crece
   con la pantalla, un poco menos para que sigan leyéndose como parte de la
   misma zona y no como otra sección. */
.cam-alt{display:flex;gap:10px;justify-content:center;
  padding:calc(var(--aire,4px) * .8) 0 2px}
.chipbtn{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:20px;padding:11px 16px;cursor:pointer;
  font-family:inherit;transition:transform 160ms var(--ease)}
.chipbtn:active{transform:scale(.95)}
.chipbtn svg{width:16px;height:16px;stroke:var(--sand);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.linkbtn{background:none;border:none;color:var(--ink-dim);font-family:inherit;font-size:12.5px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.cam-msg{font-size:13px;color:var(--ink-dim);line-height:1.6;padding:0 4px 6px}
.scan-opts{padding:14px 22px;display:grid;gap:12px}
.opt{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:18px;cursor:pointer;transition:transform 160ms var(--ease)}
.opt:active{transform:scale(.98)}
.opt-ico{flex:0 0 48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.opt-ico svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.opt b{font-size:15px;font-weight:600;display:block}
.opt span{font-size:12px;color:var(--ink-dim)}
textarea{width:100%;background:var(--card);border:1px solid var(--line);border-radius:18px;color:var(--ink);
  padding:16px;font-family:inherit;font-size:16px;min-height:130px;resize:vertical;outline:none}
textarea:focus{border-color:var(--sand)}
.btn{display:block;width:100%;border:none;border-radius:18px;padding:16px;font-size:15px;font-weight:600;
  font-family:inherit;cursor:pointer;background:linear-gradient(120deg,var(--coral),var(--rose));color:#fff;
  transition:transform 160ms var(--ease)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn:disabled{opacity:.5}
[hidden]{display:none!important}
/* La barra y el renglón del OCR vivían aquí, al pie del escáner. Se fueron a la
   pantalla de "analizando" (#analizando, en css/marca.css): el momento en que la
   app trabaja de verdad pasó a ocupar la pantalla entera en vez de una barrita
   debajo del teclado. */

/* El aviso de que la cámara también está mirando el código de barras. Tono de
   pista, no de instrucción: quien no tenga código no tiene que hacer nada. */
/* De UN renglón. Dos renglones de letra chica aquí empujaban el disparador
   hacia abajo, justo encima del botón de la Z. Por eso el texto es corto y por
   eso `line-height:1`: con el interlineado normal el icono quedaba colgando
   por debajo de la línea de las letras en vez de a su altura. */
.pista-codigo{display:flex;align-items:center;justify-content:center;gap:6px;
  margin:8px 18px 0;font-size:11px;line-height:1;color:var(--ink-dim);text-align:center}
.pista-codigo svg{flex:0 0 auto;width:13px;height:13px;fill:none;stroke:var(--sand);
  stroke-width:1.8;stroke-linecap:round;opacity:.85}
/* Cuando el código SÍ se leyó pero el producto no existe en ningún catálogo,
   deja de ser una pista y pasa a ser una respuesta: se enmarca para que se lea
   como algo que ya pasó, no como una sugerencia.
   Y aquí SÍ se le dejan dos o tres renglones, aunque el estado normal siga
   siendo de uno solo: este mensaje pide algo —tomar la foto de la lista— y
   pedirlo a medias, para ahorrar un renglón, es no pedirlo. El píldora se
   alinea arriba con su icono para que el texto no se descuadre al crecer. */
.pista-codigo.leido{width:fit-content;max-width:calc(100% - 32px);margin-inline:auto;
  padding:9px 14px;border-radius:16px;align-items:flex-start;line-height:1.45;
  border:1px solid color-mix(in srgb,var(--sand) 34%,transparent);
  background:color-mix(in srgb,var(--sand) 10%,transparent);color:var(--ink)}
.pista-codigo.leido svg{opacity:1;margin-top:1px}
.pista-codigo.leido b{color:var(--sand)}

/* ===== ¿leí bien la etiqueta? ===== */

/* ===== EL PRODUCTO QUE SE RECONOCIÓ POR SU CÓDIGO =====
   -------------------------------------------------------------------
   Antes, un producto encontrado por su código de barras salía anunciado en un
   renglón de once píxeles en dorado, debajo del subtítulo: "OGX · Coconut
   Coffee Scrub & Wash — lista de Open Beauty Facts". Era la información MÁS
   importante de la pantalla —el nombre exacto del bote que la app cree tener
   enfrente— escrita más chica que todo lo demás, y debajo venían veintiún
   ingredientes que no hacía falta revisar.

   Aquí manda lo que hay que mirar: la foto del bote y su nombre, grandes y en
   el centro. La comprobación deja de ser "lee estas veintiuna palabras" y pasa
   a ser "¿es este?", que se contesta de un vistazo y sin equivocarse.

   Va en columna y centrado a propósito: un nombre de producto puede tener seis
   palabras, y en una fila junto a la foto se parte en cinco renglones de tres
   centímetros. A lo ancho respira. */
.prod-hallado{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:4px;padding:20px 18px 22px;margin:2px 0 16px;
  background:var(--card);border:1px solid var(--line);border-radius:26px}
/* El `width:100%` NO es de adorno. En una columna centrada, cada renglón se
   encoge a lo que mide su texto… y si el texto mide más que la tarjeta, se sale
   por los lados en vez de partirse: "OGX Brazilian Keratin Smooth & Sleek
   Shampoo" salía en UNA línea que se iba fuera de la pantalla. Con el ancho
   puesto, parte donde tiene que partir. */
.ph-marca,.ph-nombre,.ph-fuente{width:100%}
/* La foto del catálogo casi siempre viene sobre fondo blanco de estudio, así
   que la baldosa es clara: recortarla a un cuadro oscuro dejaba un rectángulo
   blanco flotando con las esquinas mal cortadas. Con `contain` el bote se ve
   entero —que es el punto: reconocerlo—, nunca recortado. */
.ph-foto{width:132px;height:150px;border-radius:20px;overflow:hidden;position:relative;
  background:var(--card2);border:1px solid var(--line);margin-bottom:12px}
.ph-foto.con-foto{background:#fbfaf7}
.ph-foto img,.ph-foto svg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:8px}
/* El dibujo de respaldo (prodVisual, en js/tienda.js) trae su propio fondo y
   llena la baldosa: ahí sí manda `cover`. */
.ph-foto.dibujo svg,.ph-foto.dibujo img{padding:0;object-fit:cover}
.ph-marca{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sand);font-weight:600}
/* EL NOMBRE, que es la pieza. En display y del tamaño de un titular: si esta
   pantalla pregunta "¿es este tu producto?", el nombre tiene que ser lo primero
   que se lee, no una nota al pie. */
/* Con `.section h2` delante porque en css/descubre.css los h2 de sección son
   rótulos de 15px en versalitas grises, y esa regla es más específica que una
   clase sola: sin esto el nombre del producto salía del tamaño de un rótulo.
   Mismo truco que usa h2.mega ahí mismo. */
.section h2.ph-nombre{font-size:clamp(23px,6.4vw,29px);font-weight:400;line-height:1.18;
  letter-spacing:-.01em;margin:0;color:var(--ink);text-transform:none;text-wrap:balance}
.ph-fuente{font-size:11px;line-height:1.45;color:var(--ink-dim);margin-top:9px}
/* La lista doblada. De enlace y no de botón con marco: es una salida para quien
   sospeche, no un paso del camino. */
.ver-ings{display:block;margin:2px 0 12px}

/* De qué catálogo salió la lista cuando no la leyó la cámara. */
.confirm-origen{position:relative;z-index:2;margin-top:8px;font-size:12px;line-height:1.45;
  color:var(--sand);max-width:300px}
/* El renglón que explica la marca de "no lo leí seguro". Va en el naranja de
   aviso —el mismo del subrayado— para que se vea de dónde habla, y pegado a la
   lista, no arriba con el subtítulo: es una instrucción sobre lo que viene
   justo debajo. */
.confirm-dudas{margin:0 0 10px;font-size:12px;line-height:1.45;
  color:color-mix(in srgb,var(--warn) 78%,var(--ink));max-width:340px}
/* La capa de subrayados va encima de la foto con coordenadas en PORCENTAJE, así
   que la foto puede dibujarse del ancho que sea y las marcas le quedan encima
   sin recalcular nada al girar el teléfono. */
/* DOS FOTOS POR RENGLÓN. Una foto de etiqueta a ancho completo empujaba todo lo
   demás fuera de la pantalla y no se ganaba nada: aquí no se lee la letra
   chiquita, se comprueba de un vistazo cuántas tomas hay y cuál es cuál. Para
   leer de verdad está el zoom, que abre la foto a pantalla completa. */
#fotosWrap{display:grid;gap:10px;grid-template-columns:1fr 1fr}
#fotosWrap.una{grid-template-columns:1fr}
.foto-wrap{position:relative;border-radius:20px;overflow:hidden;background:var(--card2);
  border:1px solid var(--line)}
/* El número solo aparece cuando hay más de una: con una sola no hay nada que
   numerar y sería ruido. */
.foto-num{position:absolute;z-index:3;top:10px;left:10px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
  background:rgba(11,11,14,.72);backdrop-filter:blur(6px);color:var(--sand)}
.otra-foto{display:flex;justify-content:center;margin-top:12px}
.foto-wrap img{display:block;width:100%;height:auto}
.marcas{position:absolute;inset:0}
.marca{position:absolute;border:none;padding:0;cursor:default;border-radius:3px;
  transition:background 160ms var(--ease),box-shadow 160ms var(--ease)}
/* Lo que SÍ se va a analizar: resaltado, como un marcatextos. */
.marca.si{background:color-mix(in srgb,var(--sand) 42%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--sand) 55%,transparent)}
/* LO QUE LA CÁMARA LEYÓ DUDANDO, TAMBIÉN EN LA FOTO.
   El marcatextos pasa de dorado a naranja: es el mismo naranja del subrayado
   ondulado de la burbuja, así que la palabra marcada en la lista y su renglón
   en la etiqueta se encuentran de un vistazo, sin ir comparando nombres.
   Un poco más pálido que el dorado a propósito: sigue siendo un resaltado que
   deja leer las letras de abajo, no una tachadura. */
.marca.si.dudosa{background:color-mix(in srgb,var(--warn) 34%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 62%,transparent)}
/* Lo que quedó fuera no se pinta: la foto se lee sola y llenarla de cajas de
   "esto no" convierte la comprobación en un rompecabezas. Solo aparece cuando
   se entra a editar, y ahí sí hace falta ver qué se puede rescatar. */
.marca.no{background:transparent}
.marcas.tocando .marca{cursor:pointer}
.marcas.tocando .marca.no{background:rgba(255,255,255,.10);box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.marcas.tocando .marca.si{box-shadow:0 0 0 2px var(--sand)}
.marcas.tocando .marca.si.dudosa{box-shadow:0 0 0 2px var(--warn)}
.marcas.tocando .marca:active{transform:scale(.96)}
/* El dedo necesita más de lo que la palabra ocupa: en una foto de teléfono un
   renglón de ingredientes mide unos nueve píxeles de alto, y eso no se toca.
   Esto agranda SOLO la zona sensible, hacia arriba y hacia abajo —nunca a los
   lados, donde chocaría con la palabra de junto— y deja el subrayado del
   tamaño real del texto. */
.marcas.tocando .marca::after{content:"";position:absolute;left:0;right:0;top:-3px;bottom:-3px}

/* El nombre del producto, arriba del todo: es lo primero que se sabe del bote
   —se lee en la etiqueta de delante— y lo primero que va a ver quien revise.
   Mismo campo que el de "¿falta uno?" para que se lean como la misma cosa. */
.nombre-row{margin:0 0 14px}
.nombre-row[hidden]{display:none}
.nombre-row input{width:100%;background:var(--card);border:1px solid var(--line);border-radius:16px;
  color:var(--ink);padding:13px 15px;font-family:inherit;font-size:16px;outline:none}
.nombre-row input:focus{border-color:var(--sand)}
.add-row{display:flex;gap:8px;align-items:center;margin:10px 0 4px}
.add-row input{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:16px;
  color:var(--ink);padding:13px 15px;font-family:inherit;font-size:16px;outline:none}
.add-row input:focus{border-color:var(--sand)}
.add-row .chipbtn{flex:0 0 auto}
/* LA LISTA. Es la pieza principal de la pantalla, así que se lee cómoda: 13px
   y bastante aire. Cada uno con su ✕, porque quitar es lo que más se va a hacer
   —el lector mete de más más seguido de lo que se le escapa algo. */
/* Pegadas al subtítulo que las anuncia. Los 4px de arriba eran el respiro que
   dejaba el renglón de "corregí N nombres"; sin ese renglón, el hueco quedaba
   colgando y la lista empezaba media pantalla más abajo de lo necesario. */
.ing-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ing-chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.3;
  background:color-mix(in srgb,var(--sand) 15%,transparent);color:var(--ink);
  border:1px solid color-mix(in srgb,var(--sand) 38%,transparent);
  border-radius:18px;padding:8px 8px 8px 14px}
/* Los que se escribieron a mano se distinguen: si la nota sale rara, hay que
   poder ver de un vistazo qué puso el lector y qué pusiste tú. */
.ing-chip.a-mano{background:color-mix(in srgb,var(--teal) 13%,transparent);
  border-color:color-mix(in srgb,var(--teal) 36%,transparent)}
/* El nombre es un botón (se toca para corregirlo) pero tiene que LEERSE como
   texto: nada de subrayado ni color de enlace dentro de una lista de catorce.
   El subrayado punteado es la única pista, y con eso basta. */
.ing-chip .chip-txt{background:none;border:none;padding:0;font:inherit;color:inherit;
  cursor:text;text-align:left;text-decoration:underline dotted;
  text-decoration-color:color-mix(in srgb,var(--ink) 28%,transparent);text-underline-offset:3px}
.ing-chip .chip-x{background:none;border:none;color:var(--ink-dim);font-size:14px;
  cursor:pointer;padding:0 4px;font-family:inherit;line-height:1}
.ing-chip .chip-x:active{color:var(--bad)}
.ing-chip .chip-edit{background:var(--card2);border:1px solid var(--sand);border-radius:10px;
  color:var(--ink);font:inherit;padding:2px 8px;outline:none;min-width:120px;max-width:60vw}
/* Corregido a mano encima de lo que leyó la cámara. */
.ing-chip.corregido{border-style:dashed}
/* LO QUE EL LECTOR LEYÓ DUDANDO.
   -------------------------------------------------------------------
   El subrayado ondulado es el signo que todo el mundo ya conoce de un
   corrector de textos: "esta palabra puede estar mal, míratela". Dice
   exactamente lo que hay que decir, y no hace falta explicar el color.

   Se marca la PALABRA, no la burbuja entera: pintar el fondo de cuatro
   burbujas de catorce las convertiría en un error —en rojo, en una lista que
   habla de riesgos— y no lo son. Lo único que pasa es que hay que mirarlas.
   Por eso el borde apenas se tiñe y el fondo se queda como está. */
.ing-chip.dudoso{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.ing-chip.dudoso .chip-txt{text-decoration:underline wavy;
  text-decoration-color:var(--warn);text-underline-offset:4px}
/* Lo que el catálogo PROPONE, cuando el parecido no da para cambiarlo solo.
   Va dentro del mismo chip y en el dorado de la marca: es una pregunta, y se
   contesta con un toque. */
.ing-chip .chip-sug{background:none;border:none;padding:0 2px;font:inherit;font-size:12px;
  color:var(--sand);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  max-width:45vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* MOVER UN INGREDIENTE DE SITIO: ARRASTRANDO.
   -------------------------------------------------------------------
   Aquí había dos flechitas por burbuja y un comentario defendiéndolas: que
   arrastrar dentro de una lista que se acomoda en varios renglones es difícil
   de acertar con el dedo. Es difícil de PROGRAMAR. De usar es al revés: un
   ingrediente que hay que subir seis lugares eran seis toques en un blanco de
   doce píxeles, y nadie hace eso seis veces.

   El temblor es el de la pantalla de inicio de iOS, y se copia a propósito: es
   la manera que ya conoce todo el mundo de decir "esto se puede mover". Cada
   burbuja lleva su propio desfase y su propia duración —si todas se movieran
   al mismo tiempo sería un parpadeo, no un temblor. */
.orden-row{display:flex;justify-content:flex-end;margin:-4px 0 8px}
.orden-row .chipbtn{padding:8px 13px;font-size:11.5px}
.orden-row .chipbtn.on{border-color:var(--sand);background:color-mix(in srgb,var(--sand) 14%,transparent)}

@keyframes zero-tiembla{
  0%  {transform:rotate(-.9deg) translateY(-.4px)}
  50% {transform:rotate(.9deg)  translateY(.4px)}
  100%{transform:rotate(-.9deg) translateY(-.4px)}
}
.ing-chips.ordenando .ing-chip{animation:zero-tiembla .22s linear infinite;
  transform-origin:50% 50%;cursor:grab;
  /* Sin esto, arrastrar en un teléfono desliza la página en vez de mover la
     burbuja: el navegador se queda con el gesto antes de que llegue aquí. */
  touch-action:none;-webkit-user-select:none;user-select:none}
/* Desfases para que no vayan todas al mismo compás. Cinco variantes bastan:
   con más, nadie nota la diferencia; con menos, se ve el patrón. */
.ing-chips.ordenando .ing-chip:nth-child(5n+2){animation-duration:.26s;animation-delay:-.05s}
.ing-chips.ordenando .ing-chip:nth-child(5n+3){animation-duration:.2s; animation-delay:-.11s}
.ing-chips.ordenando .ing-chip:nth-child(5n+4){animation-duration:.24s;animation-delay:-.16s}
.ing-chips.ordenando .ing-chip:nth-child(5n+5){animation-duration:.28s;animation-delay:-.08s}
/* El hueco: la burbuja original se queda en su sitio, apagada, mientras el clon
   vuela con el dedo. Deja de temblar porque ya no es lo que se está moviendo. */
.ing-chips.ordenando .ing-chip.hueco{animation:none;opacity:.28}
/* El clon que sigue al dedo. `pointer-events:none` es lo que permite preguntar
   qué burbuja hay debajo sin que se conteste a sí mismo. */
.ing-chip.volando{position:fixed;z-index:200;pointer-events:none;animation:none;
  transform:scale(1.06);box-shadow:0 12px 30px rgba(0,0,0,.45);
  background:color-mix(in srgb,var(--sand) 26%,var(--card));border-color:var(--sand)}
/* Mientras se ordena, el nombre no es un botón: es el asa. Sin subrayado
   punteado, que ahí prometía "tócame y me corriges". */
.ing-chip .chip-txt.asa{text-decoration:none;cursor:inherit}
.ing-chip .chip-asa{display:flex;align-items:center;padding:0 3px;color:var(--sand);opacity:.75}
.ing-chip .chip-asa svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* Quien pidió menos movimiento en su teléfono no tiene por qué ver catorce
   burbujas vibrando. El modo sigue funcionando: se distingue por el asa, el
   botón encendido y la palomita. */
@media (prefers-reduced-motion:reduce){
  .ing-chips.ordenando .ing-chip{animation:none}
}

/* La lista pegada al texto que la anuncia. El aire de siempre entre el titular
   y la sección sirve cuando abajo empieza otro tema; aquí no: el subtítulo dice
   "6 ingredientes entre las 2 fotos" y lo siguiente SON esos seis. Separarlos
   los volvía dos cosas distintas. */
#view-confirm .hero{padding-bottom:6px}
#view-confirm .section{padding-top:8px}

/* La foto se toca para abrirla en grande. */
.foto-wrap{cursor:zoom-in}
.fz-lupa{position:absolute;z-index:3;right:8px;bottom:8px;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:rgba(11,11,14,.72);backdrop-filter:blur(6px);color:var(--sand);font-size:14px}

/* ===== LA FOTO EN GRANDE =====
   Un renglón de ingredientes en la foto de un bote mide unos nueve píxeles de
   alto. Sobre la miniatura no se distingue qué dice ni se acierta a tocarlo con
   el dedo, y de ahí venía que al señalar "esto sí es un ingrediente" saliera
   otra cosa. Aquí la foto se acerca hasta que la palabra se lee, y solo
   entonces se toca. */
.foto-zoom{position:absolute;inset:0;z-index:120;background:#07070a;display:flex;flex-direction:column;
  touch-action:none;overscroll-behavior:contain}
.fz-barra{display:flex;align-items:center;gap:8px;
  padding:max(12px,calc(6px + env(safe-area-inset-top,0px))) 14px 10px}
.fz-barra .fz-pista{flex:1;min-width:0;font-size:11.5px;line-height:1.35;color:var(--ink-dim)}
/* SOLO los botones de la barra de arriba. Sin `.fz-barra` delante, esta regla
   alcanzaba también a los subrayados de la foto —que también son botones— y les
   ponía `border-radius:50%` y un borde: por eso en el zoom salían ovalados y
   todos iguales, sin poder distinguir lo que estaba tomado por ingrediente de
   lo que no. Un selector demasiado ancho, y una pantalla entera mal. */
.fz-barra button{background:var(--card2);border:1px solid var(--line);color:var(--ink);
  width:38px;height:38px;border-radius:50%;font-size:17px;font-family:inherit;cursor:pointer;
  flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.fz-barra button:active{transform:scale(.94)}
.fz-lienzo{flex:1;position:relative;overflow:hidden}
.fz-mueve{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.fz-mueve img{display:block;width:100%;height:auto}
/* Dentro del zoom SIEMPRE se está señalando: no se entra aquí a mirar bonito,
   se entra a arreglar lo que el lector no leyó. */
/* Los dos estados tienen que distinguirse de un vistazo: lo tomado por
   ingrediente va relleno de color, lo que solo se OFRECE va vacío y con la
   línea punteada. Rectángulos, nunca redondeados: un subrayado imita al
   marcatextos sobre un renglón, y un óvalo no se parece a eso. */
.fz-mueve .marcas .marca{border-radius:3px}
.fz-mueve .marcas .marca.no{background:rgba(255,255,255,.07);box-shadow:none;
  outline:1px dashed rgba(255,255,255,.42);outline-offset:0}
.fz-mueve .marcas .marca.si{box-shadow:0 0 0 2px var(--sand)}
.fz-mueve .marcas .marca.si.dudosa{box-shadow:0 0 0 2px var(--warn)}
.fz-mueve .marcas .marca{cursor:pointer}
/* El botón de "seleccionar todo" flota sobre la foto, abajo y centrado: es
   donde no tapa la etiqueta y donde el pulgar llega sin recolocar la mano. */
.fz-todo{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));
  display:flex;justify-content:center;pointer-events:none;z-index:5}
.fz-todo[hidden]{display:none}
.fz-todo .chipbtn{pointer-events:auto;background:rgba(11,11,14,.72);
  border-color:rgba(255,255,255,.24);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* La lista de productos ya analizados. */
.demo-list{display:grid;gap:10px;max-height:52vh;overflow-y:auto;margin-bottom:18px}
.demo-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  background:var(--card2);border:1px solid var(--line);border-radius:18px;padding:10px 14px 10px 10px;
  font-family:inherit;color:var(--ink);transition:transform 160ms var(--ease)}
.demo-row:active{transform:scale(.98)}
.demo-row .fp-img{flex:0 0 48px;width:48px;height:48px;border-radius:13px;overflow:hidden;position:relative}
.demo-tx{flex:1;min-width:0}
.demo-tx b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.demo-tx span{font-size:11.5px;color:var(--ink-dim)}
.demo-nota{flex:0 0 auto;text-align:right;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.demo-nota small{display:block;font-size:10px;font-weight:500;letter-spacing:.04em;opacity:.85}

/* AQUÍ VIVÍAN .pregunta-foto y .chipbtn.destacado — la tarjeta de "¿Se ven
   todos los ingredientes?". Se quitaron con ella el 27 ago 2026: el mismo botón
   ya vive al pie de la pantalla, junto a la foto. */

/* ===== LOS DOS BOTONES DEL FINAL, Y EL SIGNO DE INTERROGACIÓN =====
   "Registrar y analizar" es del mismo tamaño y del mismo diseño que "Confirmar
   y ver la nota" a propósito: no es la opción de segunda, es la otra respuesta
   a la misma pregunta, y hacerla más chica o gris diría que es peor.
   La "?" va ENCIMA del botón, no dentro: en HTML un botón no puede contener
   otro botón. Se le da un blanco generoso (44px, la medida mínima de un dedo)
   aunque el signo se vea pequeño. */
.btn-con-q{position:relative;margin-top:10px}
.btn-con-q .btn{padding-right:52px}
.btn-q{position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;line-height:1;
  color:#fff;opacity:.72;transition:opacity 140ms var(--ease)}
.btn-q::before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;
  border:1.4px solid currentColor}
.btn-q:active{opacity:1}
/* La hoja que explica la diferencia. */
.dos-botones{display:grid;gap:16px;margin:4px 0 20px;text-align:left}
.dos-botones b{display:block;font-size:14px;font-weight:600;margin-bottom:4px}
.dos-botones p{font-size:12.5px;line-height:1.6;color:var(--ink-dim);margin:0}
/* La promesa de las fotos vale para los dos caminos, así que va fuera de los
   dos recuadros y con una raya que la separa de ellos: dentro de uno se leería
   como si el otro no la cumpliera. */
.dos-botones-nota{font-size:11.5px;line-height:1.6;color:var(--ink-dim);
  text-align:left;margin:0 0 18px;padding-top:14px;border-top:1px solid var(--line)}

#btnTocarFoto{flex:0 0 auto}
#btnTocarFoto.on{background:color-mix(in srgb,var(--sand) 22%,var(--card));border-color:var(--sand)}

/* El encabezado de la foto, con su atajo a la derecha. */
.foto-cabeza{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:28px 0 8px}
.foto-cabeza h2{margin:0!important}


/* ===== resultado / medidor ===== */
/* El "+ env(safe-area-inset-top)" es lo que baja el "← Volver" para que no se
   meta debajo del reloj y la señal. La página lleva viewport-fit=cover, o sea
   que se dibuja de orilla a orilla —incluida la franja del reloj—, y esta tarjeta
   está pegada arriba del todo (top:0), así que era justo la que se comía.
   En una compu, env() vale 0 y no cambia nada. */
.meter-card{position:sticky;top:0;z-index:20;background:rgba(11,11,14,.9);backdrop-filter:blur(16px);
  padding:calc(18px + env(safe-area-inset-top,0px)) 22px 20px;border-bottom:1px solid var(--line)}
.meter-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
#scoreNum{font-size:52px;line-height:1;font-weight:400}
#scoreNum small{font-size:18px;color:var(--ink-dim)}
#scoreLabel{font-size:13px;font-weight:600;padding:5px 13px;border-radius:20px}
.meter-bar{position:relative;height:12px;border-radius:10px;margin-top:12px;
  background:linear-gradient(90deg,#ff4d6d,#ff9d6b 35%,#e8c9a0 60%,#7fd8c9 100%)}
#meterMask{position:absolute;top:0;right:0;bottom:0;border-radius:0 10px 10px 0;background:rgba(11,11,14,.82);transition:width 1s cubic-bezier(.2,.8,.2,1)}
#meterDot{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--bg);
  transform:translate(-50%,-50%);transition:left 1s cubic-bezier(.2,.8,.2,1);box-shadow:0 2px 10px rgba(0,0,0,.5)}
.meter-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-dim);margin-top:8px}
#prodTitle{font-size:15px;font-weight:600;outline:none;border-bottom:1px dashed transparent}
#prodTitle:focus{border-color:var(--ink-dim)}
/* Sin nombre, el renglón pide el que falta en vez de rellenarse con "Producto
   escaneado". Es texto de adorno, no contenido: `pointer-events:none` para que
   el dedo caiga en el campo y no en la pista. */
#prodTitle:empty::before{content:attr(data-vacio);color:var(--ink-dim);font-weight:400;pointer-events:none}
#prodTitle:focus:empty::before{opacity:.45}

/* MANDAR A REVISIÓN.
   Vive dentro de la tarjeta pegajosa, debajo de la nota, porque es lo que se
   puede hacer con este producto además de guardarlo: ofrecérselo al catálogo.
   De contorno y no de relleno — el botón lleno de esta pantalla es el "+". */
.btn-revision{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:14px;padding:11px;border-radius:16px;cursor:pointer;
  background:none;border:1px solid color-mix(in srgb,var(--sand) 42%,transparent);
  color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:600;
  transition:transform 140ms var(--ease)}
.btn-revision:active:not(:disabled){transform:scale(.98)}
.btn-revision svg{width:15px;height:15px;stroke:var(--sand);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
/* Ya mandado: se queda a la vista y apagado. Quitarlo dejaría a alguien
   dudando de si llegó a tocarlo; volver a decir "Mandar" invita a mandarlo dos
   veces. */
.btn-revision.enviado{border-color:var(--line);color:var(--ink-dim);cursor:default}
.btn-revision.enviado svg{stroke:var(--good)}
.btn-revision:disabled{opacity:.85}
.revision-pista{font-size:10.5px;color:var(--ink-dim);line-height:1.5;margin-top:8px;text-align:center}
/* El retrato del producto va JUNTO a la nota, como una medalla al lado de su
   calificación: se ve qué calificamos y cuánto sacó de una sola mirada, sin
   tener que confiar en que el nombre escrito a mano diga la verdad. */
.meter-id{display:flex;align-items:center;gap:14px;margin-top:12px}
.prod-medal{flex:0 0 62px;width:62px;height:62px;border-radius:50%;overflow:hidden;position:relative;
  background:var(--card2);border:1px solid var(--line)}
.prod-medal svg,.prod-medal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Con la foto de un catálogo cambian las reglas. El dibujo se hizo para llenar
   su cuadro y por eso va recortado; una foto de estudio de un bote es alta y
   angosta sobre fondo blanco, y recortarla a un círculo de 62 puntos deja a la
   vista la barriga del envase y nada más. Entera y sobre claro, se reconoce. */
.prod-medal.con-foto{background:#fbfaf7}
.prod-medal.con-foto img{object-fit:contain;padding:5px}
.meter-right{flex:1;min-width:0}
/* El + vive en la tarjeta clara, que es PEGAJOSA: se queda arriba mientras
   bajas por la lista de ingredientes. Guardar es lo único que puedes querer
   hacer en cualquier momento de esa lectura, así que no puede irse con el
   scroll. Y aquí no compite con las etiquetas de conteo, que son de una a
   cinco y se acomodan en varios renglones sin empujarlo. */
.prod-row{display:flex;align-items:center;gap:12px}
.prod-row #prodTitle{flex:1;min-width:0}
.prod-add{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--coral),var(--rose));
  box-shadow:0 6px 20px color-mix(in srgb,var(--rose) 45%,transparent);
  transition:transform 140ms var(--ease)}
.prod-add:active{transform:scale(.9)}
.prod-add svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2.1;stroke-linecap:round}
/* "Ver opiniones" ocupa el hueco que dejaba el conteo a su derecha. Va de
   contorno, no de relleno: es una puerta, no la acción principal. */
.count-row{display:flex;align-items:center;gap:12px;padding:14px 22px 0}
.count-row .meter-sub{flex:1;min-width:0}
.seeops{background:none;border:1px solid var(--line);border-radius:20px;padding:7px 14px;white-space:nowrap;
  color:var(--ink);font-family:inherit;font-size:11.5px;cursor:pointer;transition:transform 140ms var(--ease)}
.seeops b{font-weight:600;color:var(--sand);margin-left:3px}
.seeops:active{transform:scale(.96)}
.ops-list{display:grid;gap:14px;margin-bottom:18px;max-height:46vh;overflow-y:auto}
/* En su propia pantalla la lista NO tiene tope ni scroll propio: el tope de
   46vh es de la hoja, donde tiene que caber encima de otra cosa. Dejarlo aquí
   ponía una lista con su barrita dentro de una página que ya se desliza —dos
   scrolls encajados, que es de las peores cosas que se pueden hacer en un
   teléfono. */
#view-opinions .ops-list{max-height:none;overflow:visible}
/* LA OPINIÓN, EN DOS PISOS.
   Antes era un solo renglón: retrato a la izquierda y todo lo demás a la
   derecha, colgando. Ahora quien opinó es su propia fila —y esa fila es un
   BOTÓN que lleva a su perfil—, y debajo va lo que dijo.

   Se parten así justamente para que el botón no se coma el comentario: si la
   tarjeta entera navegara, no se podría ni seleccionar una frase para
   copiarla. Arriba se toca; abajo se lee. */
.op-row{display:flex;flex-direction:column;gap:7px}
.op-quien{display:flex;align-items:center;gap:11px;background:none;border:none;padding:0;
  font-family:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;
  border-radius:12px;transition:transform 140ms var(--ease)}
button.op-quien:active{transform:scale(.985);opacity:.75}
.op-row .avatar-xs{width:34px;height:34px;flex:0 0 34px}
.op-quien b{font-size:13px;font-weight:600}
.op-bd{min-width:0;padding-left:45px}
.op-when{font-size:10.5px;color:var(--ink-dim);margin-left:7px}
.op-bd p{font-size:12.5px;color:var(--ink-dim);line-height:1.5;margin-top:5px}
.col-pick button.nuevacol{border-style:dashed}
/* La flecha hacia abajo dice a dónde se va la hoja al cerrarse: baja. Una X
   diría "descartar", que no es lo que pasa aquí. */
/* "Conoce más" dentro de la ficha de un ingrediente. Se pinta en el color de la
   marca y subrayado: dentro de una ficha llena de texto, un enlace que no se ve
   como enlace no lo toca nadie. */
.ing-more{margin-top:6px;font-size:12px;line-height:1.55}

/* "Leer más": el resto del párrafo, ahí mismo. Va PEGADO al texto y en su mismo
   tamaño, como una palabra más de la frase — porque eso es: la continuación.
   Un botón con marco aquí abajo prometería otra pantalla. */
.leer-mas{background:none;border:none;padding:0;font:inherit;color:var(--sand);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* "Ver regulaciones": esto SÍ es otra pantalla, y por eso sí lleva marco.
   Es la salida del detalle legal que antes se apilaba dentro de la ficha. */
.ver-regs{display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  background:none;border:1px solid var(--line);border-radius:20px;padding:7px 13px;
  color:var(--ink);font-family:inherit;font-size:11.5px;cursor:pointer;
  transition:transform 140ms var(--ease)}
.ver-regs:active{transform:scale(.96)}
.ver-regs svg{width:14px;height:14px;stroke:var(--sand);fill:none;stroke-width:2;stroke-linecap:round}

/* ===== EL CARRETE DEL REGISTRO GUIADO =====
   Las tomas que llevas, debajo de los dos atajos. Tres por fila: con dos se ven
   grandes y ocupan media pantalla —y esta pantalla es la de la cámara, no la de
   las fotos—; con cuatro dejan de reconocerse, que es lo único que se les pide
   (¿esta salió movida? ¿esta era la de atrás?). */
.tomas{padding:8px 0 4px}
.tomas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.toma{position:relative;margin:0}
/* 4/3 y no cuadradas: una fila de cuadradas se come 105 puntos de alto en un
   teléfono, y esos puntos salen del visor, que es lo que hay que mirar para
   tomar la foto siguiente. A 4/3 se reconocen igual —para lo único que sirven
   es para saber si esa toma salió movida— y cuestan 79. */
.toma img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;
  border:1px solid var(--line);display:block;background:#000}
.toma figcaption{font-size:10.5px;color:var(--ink-dim);text-align:center;margin-top:4px;
  letter-spacing:.02em}
/* La ✕ va ENCIMA de la foto y no debajo del rótulo: borrar una toma movida es
   lo que más se va a hacer aquí, y el blanco tiene que estar donde está la
   foto que se quiere borrar. */
.toma-x{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;
  background:rgba(11,11,14,.72);border:1px solid rgba(255,255,255,.28);color:#fff;
  font-size:11px;line-height:1;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center}
.toma-x:active{transform:scale(.9)}
/* La promesa, donde se toman las fotos. No al final ni en un enlace legal: aquí,
   pegada a las imágenes de las que habla. */
.tomas-aviso{font-size:11px;line-height:1.5;color:var(--ink-dim);
  margin:10px 0 8px;text-align:center}
.tomas .btn{margin:0}
/* El segundo "Listo", arriba a la derecha, para quien ya sabe que acabó. */
/* A la altura del titular, no del borde: el hero arranca con un colchón que
   depende del notch del teléfono, y pegarlo a 0 lo metía debajo del reloj. Es
   el mismo cálculo que el padding de #view-scan .hero, tres puntos más arriba
   para que la línea de la mayúscula y la del botón se lean iguales. */
.listo-arriba{position:absolute;top:max(27px,calc(11px + env(safe-area-inset-top,0px)));
  right:22px;z-index:3;
  background:var(--card);border:1px solid color-mix(in srgb,var(--sand) 45%,transparent);
  color:var(--ink);font-family:inherit;font-size:13px;font-weight:600;
  border-radius:20px;padding:9px 18px;cursor:pointer}
.listo-arriba[hidden]{display:none!important}
.listo-arriba:active{transform:scale(.95)}

/* ===== UNA TOMA DEL CARRETE, EN GRANDE =====
   Sin gestos ni recortes: es una foto que se mira para decidir si sirve. La ✕
   arriba a la derecha dice dónde se cierra; tocar el fondo también cierra. */
.toma-zoom{position:fixed;inset:0;z-index:130;background:rgba(7,7,10,.94);
  display:flex;align-items:center;justify-content:center;padding:22px;
  animation:fade .2s var(--ease) both}
.toma-zoom[hidden]{display:none}
.toma-zoom img{max-width:100%;max-height:100%;border-radius:16px;display:block;
  box-shadow:0 24px 60px rgba(0,0,0,.55)}
.toma-zoom-x{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));right:18px;
  width:32px;height:32px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-size:13px;line-height:1;font-family:inherit;
  display:flex;align-items:center;justify-content:center}
.toma-zoom-x:active{transform:scale(.9)}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* La miniatura se toca: que se note. */
.toma img{cursor:zoom-in}

/* ===== la pantalla de Regulaciones ===== */
/* Agrupadas por TERRITORIO, no por organismo: nadie busca "a ver qué dice
   ECHA", se busca "¿esto está permitido dónde?". El nombre del país manda, y
   por eso encabeza. */
.reg-pais{margin-bottom:22px}
.reg-pais h2{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--sand);font-weight:500;margin-bottom:10px}
.reg-card{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:15px 17px;margin-bottom:9px}
/* CERRADA SE VE SOLO EL TÍTULO Y LA FLECHA. El texto de una regla es lenguaje
   legal de tres o cuatro renglones; con dos o tres reglas abiertas de golpe la
   pantalla es un muro. Cerradas, lo que se lee de un vistazo es QUÉ le pasa a
   este ingrediente, que es la pregunta con la que se entra. Mismo mecanismo
   que las fichas de ingrediente de la nota, para que se abran igual. */
.reg-head{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:0;
  color:inherit;font-family:inherit;text-align:left;cursor:pointer}
.reg-head b{flex:1;min-width:0}
.reg-body{display:none}
.reg-card.open .reg-body{display:block;margin-top:10px}
.reg-card.open .ing-chev{transform:rotate(180deg)}
.reg-card b{font-size:13.5px;font-weight:600;display:inline}
.reg-clase{display:inline-block;font-size:10.5px;margin-left:8px;padding:3px 9px;border-radius:14px;
  color:var(--ink-dim);background:var(--card2)}
.reg-card p{font-size:12.5px;color:var(--ink-dim);line-height:1.6;margin-top:8px}
/* "Esta regla está escrita sobre X": cuando el organismo nombra la sustancia de
   otra manera —o nombra dos a la vez—, decirlo es lo que hace entendible un
   límite que habla de plata en la ficha de un ácido de limón. */
.reg-sobre{font-size:11.5px!important;color:var(--ink-dim)!important;
  border-left:2px solid color-mix(in srgb,var(--sand) 45%,transparent);
  padding-left:10px;margin-top:10px!important}
.reg-sobre b{font-weight:600;color:var(--ink)}
.reg-quien{font-size:11px!important;color:var(--teal)!important;margin-top:8px!important}
/* Los dos enlaces, uno debajo del otro y con blanco de sobra para el dedo: el
   del ingrediente es el que se va a tocar, y el de la regla el que hace falta
   una vez en la vida. */
.reg-ligas{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px!important}
.reg-ligas a{font-size:11.5px;color:var(--sand);text-decoration:underline;
  text-underline-offset:3px;padding:2px 0}
.reg-quien a{color:var(--sand)}

/* ===== todo lo que has escaneado ===== */
.hist-item{margin-bottom:9px}
.hist-item b{display:block;font-size:13.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-meta{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:10.5px;color:var(--ink-dim)}
/* La colección en la que quedó, pintada de su propio color: es la misma señal
   que identifica esa colección en el perfil, así que se reconoce sin leerla. */
.hist-col{padding:2px 8px;border-radius:12px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45vw}
.hist-suelto{opacity:.6}
.hist-sinnota{color:var(--ink-dim);background:var(--card2)}
.hist-vacio{display:flex;justify-content:center;margin-top:4px}

#opsSheet .sheet{position:relative}
/* LA FLECHA DE CERRAR, UNA EN CADA HOJA.
   Antes cada hoja acababa con un botón de "Cancelar" o "Cerrar" a lo ancho, y
   dos de ellas tenían además una ✕ arriba. Tres maneras de decir lo mismo, y la
   de abajo ocupaba el sitio del botón que sí hace algo. La flecha hacia abajo
   dice lo que la hoja hace al cerrarse —se va hacia abajo, por donde vino— y
   está donde el pulgar ya la busca.
   Tocar fuera de la hoja también cierra, y eso no cambió. */
.sheet-x{position:absolute;top:24px;right:22px;width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:var(--card2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  transition:transform 140ms var(--ease)}
.sheet-x:active{transform:scale(.9)}
.sheet-x svg{width:18px;height:18px;stroke:var(--ink-dim);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rec-nota{font-size:12px;color:var(--sand);margin-bottom:12px}
/* El conteo baja FUERA de la tarjeta pegajosa: es el rótulo de la lista que
   sigue, no un pie del número. Encabeza lo que cuenta. */
.meter-sub{font-size:11px;color:var(--ink-dim)}
.count-row .meter-sub{font-size:11px;color:var(--ink-dim)}

.ing-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 15px;margin-bottom:8px}
.ing-head{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:0;
  color:inherit;font-family:inherit;text-align:left;cursor:pointer}
.dot{flex:0 0 10px;height:10px;border-radius:50%}
.ing-head b{font-size:14px;font-weight:600;flex:1;min-width:0}
.lvl-chip{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap}
.ing-chev{display:flex;flex:0 0 16px;transition:transform .25s ease}
.ing-chev svg{width:16px;height:16px;stroke:var(--ink-dim);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ing-card.open .ing-chev{transform:rotate(180deg)}
/* Cerrada, la ficha deja asomar el principio del "¿Qué es?" y lo desvanece.
   El desvanecido se hace con máscara sobre EL TEXTO, no con una franja de
   color encima: estas tarjetas son vidrio y se les ve el fondo, así que una
   franja no taparía nada — tiene que ser la letra misma la que se apague. */
.ing-body{margin-top:8px;max-height:34px;overflow:hidden;
  transition:max-height .32s cubic-bezier(.2,.8,.2,1);
  -webkit-mask-image:linear-gradient(180deg,#000 25%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 25%,transparent 100%)}
.ing-card.open .ing-body{max-height:640px;-webkit-mask-image:none;mask-image:none}
.ing-card p{font-size:12.5px;color:var(--ink-dim);line-height:1.55;margin-top:8px}
.ing-body p:first-child{margin-top:0}
.ing-card p b{color:var(--ink);font-weight:600}
.result-actions{padding:10px 22px 26px;display:grid;gap:10px}
.summary-chips{display:flex;gap:8px;padding:16px 22px 0;flex-wrap:wrap}
.schip{font-size:11.5px;padding:6px 12px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.schip b{font-weight:600}