/* ============================================================================
   Etiquetas PROETI

   La estética es la del programa de las máquinas (proeti_interfaz): mismos
   tokens, misma Roboto, mismo naranja sobre negro. Quien usa el equipo en el
   laboratorio y esto en el almacén debe reconocer que son la misma casa.

   Los tokens --proeti-* se copian del sistema ya establecido, con sus mismos
   nombres, para que un cambio de marca se aplique igual en los dos sitios.

   Encima de eso, la única capa propia: esto se usa en un MÓVIL EN VERTICAL,
   en el almacén, con guantes y prisa. De ahí las reglas que no se negocian:

   · Un campo por fila. Nada de dos columnas en vertical.
   · 56 px de alto en los campos, 60 en los botones principales.
   · Fuente de 17 px o más: por debajo, iOS hace zoom al enfocar.
   · La etiqueta del campo va ENCIMA y se queda ahí. Un placeholder que hace
     de etiqueta desaparece al escribir y deja al operario sin saber qué
     estaba rellenando.
   ========================================================================= */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/roboto-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/roboto-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Tokens de marca, idénticos a proeti_interfaz -------------------- */
  --proeti-font: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
  --proeti-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Consolas, monospace;

  --proeti-black:  #191718;
  --proeti-orange: #d05d27;
  --proeti-accent: #ff7700;
  --proeti-gray:   #f2f2f2;
  --proeti-white:  #ffffff;
  --proeti-ok:     #1e9e4a;
  --proeti-ko:     #d33a2c;

  --proeti-orange-dark: #a3441a;
  --proeti-orange-tint: #fdf3ee;

  --proeti-panel:     #292522;   /* paneles oscuros: cabecera, login, lector */
  --proeti-line:      #d6d6d6;   /* borde de panel/tarjeta */
  --proeti-line-soft: #e6e6e6;   /* filete entre filas de tabla */
  --proeti-field:     #b9b9b9;   /* borde de campo de formulario */

  --proeti-ink-2: #4a4a4a;       /* texto de apoyo */
  --proeti-ink-3: #6b6b6b;       /* rótulos, notas */
  --proeti-ink-4: #8a8a8a;       /* dato atenuado, "sin definir" */

  --proeti-warn:      #f2b705;
  --proeti-fault:     #c0392b;
  --proeti-fault-ink: #ff6b5a;

  /* --- Superficies de esta aplicación --------------------------------- */
  --fondo:     var(--proeti-white);
  --fondo-alt: #fafafa;
  --texto:     var(--proeti-black);

  /* Fondos de aviso: el mismo tono del acento, muy rebajado */
  --ok-fondo:    #eaf6ee;
  --aviso-fondo: #fdf6e0;
  --error-fondo: #fbeceb;
  /* Tinta de aviso legible sobre fondo claro (el ámbar puro no lo es) */
  --aviso-ink:   #8a6100;

  --radio: 4px;                  /* industrial: esquina viva, no redondeada */
  --sombra: 0 1px 2px rgba(25,23,24,.08);

  --alto-campo: 56px;
  --alto-boton: 60px;
}

/* El almacén tiene luz mala y muchos móviles van en oscuro. El panel oscuro
   de PROETI (#292522) es el punto de partida natural. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo:     #1c1a18;
    --fondo-alt: var(--proeti-panel);
    --texto:     #f2efec;

    --proeti-line:      #46403b;
    --proeti-line-soft: #3a352f;
    --proeti-field:     #5a534c;
    --proeti-gray:      #262320;

    --proeti-ink-2: #cfc9c3;
    --proeti-ink-3: #a8a09a;
    --proeti-ink-4: #857d77;

    --proeti-orange:      #e57340;
    --proeti-orange-tint: #2c211b;

    --ok-fondo:    #14301f;
    --aviso-fondo: #33280a;
    --error-fondo: #351917;
    --aviso-ink:   var(--proeti-warn);
    --proeti-ok:   #4cc27a;
    --proeti-ko:   var(--proeti-fault-ink);

    --sombra: 0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  --fondo: #1c1a18; --fondo-alt: #292522; --texto: #f2efec;
  --proeti-line: #46403b; --proeti-line-soft: #3a352f; --proeti-field: #5a534c;
  --proeti-gray: #262320;
  --proeti-ink-2: #cfc9c3; --proeti-ink-3: #a8a09a; --proeti-ink-4: #857d77;
  --proeti-orange: #e57340; --proeti-orange-tint: #2c211b;
  --ok-fondo: #14301f; --aviso-fondo: #33280a; --error-fondo: #351917;
  --aviso-ink: #f2b705; --proeti-ok: #4cc27a; --proeti-ko: #ff6b5a;
  --sombra: 0 1px 2px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--proeti-font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------- barra */

.barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--proeti-panel); color: var(--proeti-white);
  /* El filete naranja bajo la cabecera es la firma visual del equipo */
  border-bottom: 3px solid var(--proeti-orange);
}
.barra .logo-proeti { height: 30px; width: auto; display: block; }
.barra .seccion {
  font-size: 14px; font-weight: 500; color: #d9d3ce;
  letter-spacing: .04em; text-transform: uppercase;
  padding-left: 14px; border-left: 1px solid #4a423c;
}
.barra .quien {
  margin-left: auto; font-size: 14px; color: #cdc7c4;
  display: flex; align-items: center; gap: 12px;
}
.barra a { color: #cdc7c4; text-decoration: none; }
.barra a:hover, .barra a:focus-visible { color: var(--proeti-white); text-decoration: underline; }

/* -------------------------------------------------------------- pestañas */

.pestanas {
  display: flex; background: var(--proeti-black);
  position: sticky; top: 53px; z-index: 29;
}
.pestanas a {
  flex: 1; text-align: center; padding: 13px 8px;
  color: var(--proeti-ink-4); text-decoration: none;
  font-size: 14px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 3px solid transparent;
}
.pestanas a[aria-current="page"] {
  color: var(--proeti-white); border-bottom-color: var(--proeti-orange);
  background: rgba(208,93,39,.12);
}

/* ------------------------------------------------------------- al tacto */

/* Que se note el dedo: sin esto, en el móvil una fila pulsada no responde
   hasta que carga la página siguiente y parece que no se ha pulsado. */
.pestanas a, .tarjeta, .boton, .camara, .previa, .boton-escanear, .escaner-control {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;          /* sin la espera de 300 ms del doble toque */
}
.pestanas a:active { background: rgba(208,93,39,.22); }
.tarjeta:active    { background: var(--proeti-orange-tint); transform: scale(.985); }
.boton:active, .camara:active { transform: scale(.99); }
.tarjeta, .boton, .camara { transition: transform .08s ease, background .12s ease; }

/* El deslizamiento entre pantallas entra por el lado que toca. Sólo donde el
   navegador lo soporta; si no, cambia de página sin más. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: salir .18s ease both; }
  ::view-transition-new(root) { animation: entrar .18s ease both; }
  :root[data-sentido="derecha"] ::view-transition-old(root) { animation-name: salir-derecha; }
  :root[data-sentido="derecha"] ::view-transition-new(root) { animation-name: entrar-derecha; }
}
@keyframes salir         { to   { transform: translateX(-18%); opacity: 0; } }
@keyframes entrar        { from { transform: translateX(18%);  opacity: 0; } }
@keyframes salir-derecha { to   { transform: translateX(18%);  opacity: 0; } }
@keyframes entrar-derecha{ from { transform: translateX(-18%); opacity: 0; } }

/* ------------------------------------------------------------ contenedor */

.envoltorio { max-width: 620px; margin: 0 auto; padding: 16px; }
.envoltorio.ancho { max-width: 1100px; }

/* ---------------------------------------------------------------- cámara */

.camara {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 100%; min-height: 190px;
  margin-bottom: 22px; padding: 24px;
  background: var(--fondo-alt);
  border: 2px dashed var(--proeti-field); border-radius: var(--radio);
  color: var(--texto); font-size: 18px; font-weight: 500;
  cursor: pointer; text-align: center;
}
.camara:active { background: var(--proeti-orange-tint); border-color: var(--proeti-orange); }
.camara svg { width: 52px; height: 52px; stroke: var(--proeti-orange); }
.camara small { font-weight: 400; color: var(--proeti-ink-3); font-size: 14px; }
.camara input[type="file"] { display: none; }

.previas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }

/* Las dos cámaras, lado a lado: etiqueta del proveedor y etiqueta PROETI.
   Juntas se leen como lo que son, una pareja de fotos del mismo equipo. */
.camaras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
/* Las dos cajas, siempre de la misma altura aunque un texto ocupe dos líneas */
.camaras > div { display: flex; flex-direction: column; }
.camaras > div > .camara { flex: 1 0 auto; }
.camaras .camara {
  min-height: 150px; margin-bottom: 10px; padding: 16px 10px;
  font-size: 16px; line-height: 1.25;
}
.camaras .camara svg { width: 40px; height: 40px; }
.camaras .camara small { font-size: 13px; }
.camaras .previas { margin-bottom: 14px; }
.camaras .previa { width: 72px; height: 72px; }
@media (max-width: 340px) { .camaras { grid-template-columns: 1fr; } }

.titulo-fotos {
  margin: 0 0 8px; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--proeti-ink-3);
}
.titulo-fotos span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.previa { position: relative; width: 92px; height: 92px; }
.previa img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radio); border: 1px solid var(--proeti-line);
}
.previa button {
  position: absolute; top: -8px; right: -8px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--fondo); background: var(--proeti-fault); color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0;
}

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

.campo { margin-bottom: 22px; }

.campo > label {
  display: block; margin-bottom: 7px;
  font-size: 14px; font-weight: 700; color: var(--texto);
  text-transform: uppercase; letter-spacing: .04em;
}
.campo .pista {
  display: block; margin-bottom: 7px;
  font-size: 13.5px; color: var(--proeti-ink-3);
  font-weight: 400; text-transform: none; letter-spacing: 0;
}

.campo input[type="text"],
.campo input[type="date"],
.campo input[type="number"],
.campo input[type="password"],
.campo select,
.campo textarea {
  width: 100%; min-height: var(--alto-campo);
  padding: 14px 15px;
  font-size: 17px;              /* 17 y no 16: iOS deja de hacer zoom */
  font-family: inherit; color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--proeti-field); border-radius: var(--radio);
  -webkit-appearance: none; appearance: none;
}
.campo textarea { min-height: 96px; resize: vertical; line-height: 1.45; }

.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--proeti-orange);
  box-shadow: 0 0 0 3px rgba(208,93,39,.2);
}

/* Los números de serie en monoespaciada: distingue la O del 0 */
.campo input.referencia {
  font-family: var(--proeti-mono);
  font-size: 17px; letter-spacing: .02em;
}

.campo select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6b6b' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  background-size: 13px; padding-right: 44px;
}

/* --------------------------------------------------- casilla «no lo tengo» */

/* La pieza más importante de la pantalla: es lo que impide que un hueco
   quede sin explicación, como pasaba en el cuaderno. */
.sin-dato {
  display: flex; align-items: center; gap: 12px;
  margin-top: 9px; padding: 12px 14px;
  background: var(--fondo-alt);
  border: 1px solid var(--proeti-line); border-radius: var(--radio);
  cursor: pointer; user-select: none;
  min-height: 52px;
}
.sin-dato input[type="checkbox"] {
  width: 26px; height: 26px; margin: 0; flex-shrink: 0;
  accent-color: var(--proeti-orange); cursor: pointer;
}
.sin-dato span { font-size: 15.5px; color: var(--proeti-ink-3); }
.sin-dato:has(input:checked) {
  background: var(--aviso-fondo);
  border-color: var(--proeti-warn); border-left: 4px solid var(--proeti-warn);
}
.sin-dato:has(input:checked) span { color: var(--aviso-ink); font-weight: 500; }

/* Al marcarla, el campo se apaga: ya no hay nada que escribir ahí */
.campo:has(.sin-dato input:checked) input[type="text"],
.campo:has(.sin-dato input:checked) input[type="date"],
.campo:has(.sin-dato input:checked) select {
  opacity: .45; background: var(--proeti-gray);
}

.motivo { margin-top: 9px; }
.motivo input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font-size: 16px; font-family: inherit; color: var(--texto);
  background: var(--fondo);
  border: 1px dashed var(--proeti-field); border-radius: var(--radio);
}

/* ---------------------------------------------------------------- errores */

.campo.con-error input, .campo.con-error select { border-color: var(--proeti-fault); }
.error-campo {
  display: flex; gap: 8px; margin-top: 8px;
  font-size: 15px; color: var(--proeti-ko); font-weight: 500;
}
.error-campo::before { content: "!"; font-weight: 700; }

/* ---------------------------------------------------------------- avisos */

/* Franja de color a la izquierda: el estado se reconoce sin leer */
.aviso {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 16px; margin-bottom: 20px;
  border-radius: var(--radio); font-size: 15.5px; line-height: 1.45;
  border: 1px solid var(--proeti-line); border-left-width: 4px;
}
.aviso.ok   { background: var(--ok-fondo);    color: var(--proeti-ok);  border-left-color: var(--proeti-ok); }
.aviso.malo { background: var(--error-fondo); color: var(--proeti-ko);  border-left-color: var(--proeti-fault); }
.aviso.ojo  { background: var(--aviso-fondo); color: var(--aviso-ink);  border-left-color: var(--proeti-warn); }
.aviso a { color: inherit; }

/* --------------------------------------------------------------- botones */

/* El botón de PROETI: fondo oscuro, borde naranja, y naranja al pulsar. */
.boton {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: var(--alto-boton); padding: 16px;
  font-size: 17px; font-weight: 500; font-family: inherit;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--proeti-white); background: var(--proeti-black);
  border: 1px solid var(--proeti-orange); border-radius: var(--radio);
  cursor: pointer; box-shadow: var(--sombra);
}
.boton:hover { background: var(--proeti-orange); border-color: var(--proeti-orange-dark); }
.boton:active { background: var(--proeti-orange-dark); border-color: var(--proeti-orange-dark); }
.boton:disabled {
  cursor: not-allowed;
  color: var(--proeti-ink-4); background: #ebebeb;
  border-color: #cfcfcf; box-shadow: none;
}
.boton.secundario {
  background: var(--fondo); color: var(--texto);
  border-color: var(--proeti-field); box-shadow: none;
}
.boton.secundario:hover { border-color: var(--proeti-orange); background: var(--proeti-orange-tint); }
.boton.peligro { background: var(--proeti-fault); border-color: var(--proeti-fault); }
.boton.peligro:hover { background: #a82c21; border-color: #a82c21; }
.boton + .boton { margin-top: 11px; }

.acciones {
  position: sticky; bottom: 0;
  padding: 14px 0 max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--fondo) 22%);
}

/* ------------------------------------------------------------ resultados */

.resumen {
  padding: 12px 0 14px; font-size: 14px; color: var(--proeti-ink-3);
  border-bottom: 2px solid var(--proeti-black); margin-bottom: 2px;
  text-transform: uppercase; letter-spacing: .04em;
}
.resumen strong {
  color: var(--texto); font-variant-numeric: tabular-nums; font-size: 16px;
}
.resumen a { color: var(--proeti-orange); }

.tarjeta {
  display: block; padding: 15px 0;
  border-bottom: 1px solid var(--proeti-line-soft);
  text-decoration: none; color: inherit;
}
.tarjeta:hover { background: var(--proeti-orange-tint); }

.tarjeta .serie {
  font-family: var(--proeti-mono);
  font-size: 16.5px; font-weight: 500; color: var(--texto);
  word-break: break-all;
}
.tarjeta .linea2 { margin-top: 5px; font-size: 15px; color: var(--proeti-ink-2); }
.tarjeta .linea3 {
  margin-top: 8px; font-size: 13px; color: var(--proeti-ink-3);
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
}

/* Chapas rectangulares, no píldoras: la lectura industrial es angulosa */
.chapa {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 2px;
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--proeti-gray); color: var(--proeti-ink-2);
}
.chapa.codigo {
  background: var(--proeti-black); color: var(--proeti-white);
  font-family: var(--proeti-mono); letter-spacing: .02em;
}
.chapa.dudosa      { background: var(--aviso-fondo); color: var(--aviso-ink);  border-left: 3px solid var(--proeti-warn); }
.chapa.duplicada   { background: var(--error-fondo); color: var(--proeti-ko);  border-left: 3px solid var(--proeti-fault); }
.chapa.sin-revisar { background: transparent; color: var(--proeti-ink-4); border: 1px solid var(--proeti-line); }

/* --------------------------------------------------------------- ficha */

.dato { padding: 13px 0; border-bottom: 1px solid var(--proeti-line-soft); }
.dato dt {
  font-size: 12.5px; font-weight: 700; color: var(--proeti-ink-3);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;
}
.dato dd { margin: 0; font-size: 17px; color: var(--texto); word-break: break-word; }
.dato dd.referencia { font-family: var(--proeti-mono); }

/* La firma de «no lo tengo». Se ve distinta de un dato normal, porque no es
   un dato: es alguien afirmando que no existe. */
.declarado {
  display: block; margin-top: 3px;
  font-size: 14.5px; color: var(--aviso-ink); font-style: italic;
}
.declarado .motivo-txt {
  display: block; margin-top: 2px; font-style: normal;
  color: var(--proeti-ink-3); font-size: 14px;
}

/* --------------------------------------------------------------- login */

.entrada { max-width: 400px; margin: 7vh auto; padding: 24px; }
.entrada .logo-proeti {
  display: block; width: 100%; max-width: 300px; height: auto;
  margin: 0 auto 12px;
}
/* Logo transparente según el tema: tinta oscura en claro, blanco en oscuro.
   Mismos selectores que los tokens de color, para que sigan siempre juntos. */
.entrada .logo-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .entrada .logo-claro  { display: none; }
  :root:not([data-theme="light"]) .entrada .logo-oscuro { display: block; }
}
:root[data-theme="dark"] .entrada .logo-claro  { display: none; }
:root[data-theme="dark"] .entrada .logo-oscuro { display: block; }
.entrada .subtitulo {
  text-align: center; margin: 0 0 28px;
  font-size: 13px; color: var(--proeti-ink-3);
  text-transform: uppercase; letter-spacing: .1em;
}

/* --------------------------------------------------------------- tablas */

.tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.datos { width: 100%; border-collapse: collapse; font-size: 15px; }
table.datos th, table.datos td {
  padding: 11px 13px; text-align: left;
  border-bottom: 1px solid var(--proeti-line-soft); white-space: nowrap;
}
table.datos th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--proeti-white); background: var(--proeti-black);
  position: sticky; top: 0;
}
table.datos tr:hover td { background: var(--proeti-orange-tint); }
table.datos td.referencia {
  font-family: var(--proeti-mono); font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- otros */

h2, h3 { font-weight: 700; letter-spacing: -.01em; }

.vacio { padding: 48px 24px; text-align: center; color: var(--proeti-ink-3); }
.vacio p { margin: 0 0 6px; font-size: 17px; }
.vacio small { font-size: 14.5px; }

.filtros { display: grid; gap: 14px; margin-bottom: 20px; }
@media (min-width: 700px) {
  .filtros { grid-template-columns: repeat(3, 1fr); }
  .filtros .ancho-total { grid-column: 1 / -1; }
  .filtros .campo { margin-bottom: 0; }
}

.interruptores { display: flex; flex-wrap: wrap; gap: 10px; }
.interruptor {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; min-height: 46px;
  background: var(--fondo); border: 1px solid var(--proeti-field);
  border-radius: var(--radio); font-size: 15px; cursor: pointer;
}
.interruptor input { width: 20px; height: 20px; margin: 0; accent-color: var(--proeti-orange); }
.interruptor:has(input:checked) {
  border-color: var(--proeti-orange); background: var(--proeti-orange-tint);
  font-weight: 500;
}

summary { color: var(--texto); }
a { color: var(--proeti-orange); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, label:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--proeti-orange); outline-offset: 2px;
}

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

.cargando { opacity: .6; pointer-events: none; }

/* ------------------------------------------------------ lector de códigos */

/* Ocupa la pantalla entera sobre el panel oscuro de PROETI: en el almacén,
   con una mano sujetando la etiqueta, no se puede pedir puntería. */
.escaner {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  background: var(--proeti-panel); color: var(--proeti-white);
}
.escaner-marco {
  position: relative; width: 100%; max-width: 560px;
  aspect-ratio: 4 / 3; border-radius: var(--radio); overflow: hidden;
  background: #000; border: 1px solid #4a423c;
}
.escaner-marco video { width: 100%; height: 100%; object-fit: cover; }

/* La franja donde hay que encuadrar el código */
.escaner-guia {
  position: absolute; left: 8%; right: 8%; top: 50%;
  height: 22%; transform: translateY(-50%);
  border: 2px solid var(--proeti-accent); border-radius: 2px;
  box-shadow: 0 0 0 2000px rgba(0,0,0,.45);
}

.escaner-pista { margin: 0; font-size: 16px; text-align: center; color: #e6e2e0; }
.escaner-pista.error { color: var(--proeti-fault-ink); }

.escaner-hallado {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 420px;
}
.escaner-hallado .referencia {
  font-family: var(--proeti-mono); text-transform: none;
  letter-spacing: .04em; word-break: break-all;
}
.escaner .boton { max-width: 420px; }
.escaner .boton.secundario {
  background: transparent; color: var(--proeti-white); border-color: #57504a;
}
.escaner .boton.secundario:hover { background: rgba(208,93,39,.18); border-color: var(--proeti-orange); }

/* Selector de cámara: sólo aparece si hay más de una */
.escaner-camaras {
  width: 100%; max-width: 420px; min-height: 50px;
  padding: 12px 15px; font-size: 16px; font-family: inherit;
  color: var(--proeti-white); background: #201d1b;
  border: 1px solid #57504a; border-radius: var(--radio);
  -webkit-appearance: none; appearance: none;
}
.escaner-camaras option:disabled { color: var(--proeti-ink-4); }

/* Controles para enfocar de cerca: sólo aparecen los que la cámara soporta */
.escaner-marco { position: relative; }
.escaner-marco.toca-enfocar { cursor: crosshair; }
.escaner-controles {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  width: 100%; max-width: 420px;
}
.escaner-control {
  min-height: 46px; min-width: 56px; padding: 0 14px;
  border: 1px solid rgba(255,255,255,.35); border-radius: var(--radio);
  background: rgba(255,255,255,.08); color: #fff;
  font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.escaner-control[aria-pressed="true"] {
  background: var(--proeti-orange); border-color: var(--proeti-orange);
}
/* Aro en el punto tocado, para que se vea dónde se ha pedido enfocar */
.escaner-foco {
  position: absolute; width: 70px; height: 70px; margin: -35px 0 0 -35px;
  border: 2px solid var(--proeti-warn); border-radius: 50%;
  pointer-events: none; animation: escaner-foco .75s ease-out forwards;
}
/* «Leer desde una foto», dentro del lector */
.escaner-foto { display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* Código leído en la foto del proveedor, ofrecido encima del nº de serie */
.lectura-foto-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lectura-foto-botones .boton { width: auto; min-height: 48px; padding: 0 16px; }

@keyframes escaner-foco {
  from { transform: scale(1.5); opacity: 1; }
  to   { transform: scale(1);   opacity: 0; }
}

/* Confirmación breve de lo leído */
.chispa {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 110; max-width: 92vw;
  padding: 13px 20px; border-radius: var(--radio);
  background: var(--proeti-black); color: var(--proeti-white);
  border-left: 4px solid var(--proeti-orange);
  font-size: 15.5px; font-weight: 500;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}

/* El botón que abre el lector, pegado a su campo */
.con-escaner { display: flex; gap: 10px; align-items: stretch; }
.con-escaner input { flex: 1; min-width: 0; }
.boton-escanear {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 62px; min-height: var(--alto-campo);
  background: var(--proeti-black); color: var(--proeti-white);
  border: 1px solid var(--proeti-orange); border-radius: var(--radio);
  cursor: pointer; padding: 0;
}
.boton-escanear:hover  { background: var(--proeti-orange); }
.boton-escanear:active { background: var(--proeti-orange-dark); }
.boton-escanear svg { width: 26px; height: 26px; stroke: var(--proeti-orange); }
.boton-escanear:hover svg { stroke: var(--proeti-white); }

/* ------------------------------------------- invitación a instalar la app */

.invitacion {
  position: fixed; left: 12px; right: 12px; z-index: 90;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
  max-width: 460px; margin: 0 auto; padding: 16px;
  background: var(--proeti-panel); color: var(--proeti-white);
  border-radius: var(--radio); border-left: 4px solid var(--proeti-orange);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.invitacion strong { display: block; font-size: 16px; margin-bottom: 3px; }
.invitacion small { font-size: 14px; color: #cdc7c4; line-height: 1.4; }
.invitacion-botones { display: flex; gap: 10px; }
.invitacion-botones .boton { min-height: 48px; font-size: 15px; margin: 0; }
.invitacion-botones .boton.secundario {
  background: transparent; color: var(--proeti-white); border-color: #57504a;
}