/* ============================================================
   Proalmacén — Hoja de estilos
   Estilo Sortly: violeta, tarjetas redondeadas, fotos grandes y
   todo pensado primero para el teléfono.
   ============================================================ */

:root {
  --violeta:        #6c4df6;
  --violeta-oscuro: #5638d6;
  --violeta-suave:  #f0ecff;
  --violeta-borde:  #ddd4ff;

  --ok:     #12b886;
  --bajo:   #f08c00;
  --malo:   #e03131;
  --info:   #1c7ed6;

  --fondo:   #f5f6fa;
  --tarjeta: #ffffff;
  --texto:   #1b1b2f;
  --tenue:   #6b6b80;
  --borde:   #e6e6ef;

  --sombra:    0 1px 3px rgba(20,20,50,.06), 0 1px 2px rgba(20,20,50,.04);
  --sombra-md: 0 4px 16px rgba(20,20,50,.10);
  --sombra-lg: 0 12px 40px rgba(20,20,50,.16);

  --r:    14px;
  --r-sm: 10px;
  --r-lg: 20px;

  --barra: 64px;   /* alto de la barra inferior en móvil */
  --menu:  248px;  /* ancho del menú lateral en escritorio */
}

@media (prefers-color-scheme: dark) {
  :root {
    --violeta-suave: #221c44;
    --violeta-borde: #3b2f7a;
    --fondo:   #131320;
    --tarjeta: #1c1c2e;
    --texto:   #ececf4;
    --tenue:   #9a9ab4;
    --borde:   #2c2c44;
    --sombra:    0 1px 3px rgba(0,0,0,.4);
    --sombra-md: 0 4px 16px rgba(0,0,0,.45);
    --sombra-lg: 0 12px 40px rgba(0,0,0,.55);
  }
}

* { box-sizing: border-box; }

/* Sin zoom por doble toque. `manipulation` deja el desplazamiento y el
   pellizco del navegador, pero quita el retardo y el zoom del doble golpe,
   que en un almacén se dispara solo al ir tocando botones con prisa. */
* { touch-action: manipulation; }

/* Y que iOS no agrande la letra al girar el teléfono. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html, body {
  margin: 0; padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--violeta); text-decoration: none; }

/* height:auto es obligatorio: las imágenes llevan width/height en el HTML
   (para que el navegador reserve el sitio y la página no salte al cargar),
   y sin esto ese alto fijo gana sobre el CSS y la imagen sale estirada. */
img { max-width: 100%; height: auto; display: block; }

h1 { font-size: 1.5rem; margin: 0 0 .25rem; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; font-weight: 650; }
h3 { font-size: 1rem; margin: 0 0 .5rem; font-weight: 650; }

/* ============================================================
   ESTRUCTURA
   ============================================================ */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem;
  background: color-mix(in srgb, var(--tarjeta) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
.topbar .marca { display: flex; align-items: center; gap: .5rem; font-weight: 750; letter-spacing: -.02em; }
/* La marca del producto en la barra: el logo de verdad y el nombre en dos
   renglones, que "Pro-Almacén Management" en una sola línea no cabe en un
   teléfono junto al botón de "+ Artículo". */
.topbar .marca-app { gap: .55rem; }
.topbar .logo-img { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.topbar .marca-app .nombre { display: flex; flex-direction: column; line-height: 1.05; }
.topbar .marca-app .nombre b { font-size: 1rem; letter-spacing: -.02em; }
.topbar .marca-app .nombre small {
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tenue); font-weight: 600;
}

/* El logo en las pantallas de entrar y registrarse. */
.logo-entrada {
  width: 84px; height: 84px; border-radius: 22px;
  margin: 0 auto .8rem; box-shadow: var(--sombra-md);
}

.topbar .marca .logo {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--violeta), #9b7bff);
  display: grid; place-items: center; color: #fff; font-size: 1.05rem;
}
.topbar .crece { flex: 1; }

.contenido { flex: 1; padding: 1rem; padding-bottom: calc(var(--barra) + 1.5rem); max-width: 1200px; width: 100%; margin: 0 auto; }

/* Barra inferior (móvil) — el patrón de Sortly: lo más usado a un toque */
.barra-inf {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-around;
  height: var(--barra);
  background: var(--tarjeta);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-inf a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--tenue); font-size: .68rem; font-weight: 600; padding: .4rem 0;
}
/* El activo lleva una pastilla detrás del icono, como en las apps nativas */
.barra-inf a .ic {
  font-size: 1.3rem; line-height: 1;
  padding: 3px 14px; border-radius: 999px;
  transition: background .18s ease;
}
.barra-inf a.activo { color: var(--violeta); }
.barra-inf a.activo .ic { background: var(--violeta-suave); }

/* Botón central de escanear: el más grande porque es el más usado */
.barra-inf .escanear {
  flex: 0 0 auto; margin-top: -24px;
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violeta), #9b7bff);
  border: 4px solid var(--tarjeta);
  color: #fff; font-size: 1.55rem;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(108,77,246,.45);
  transition: transform .12s ease;
}
.barra-inf .escanear:active { transform: scale(.92); }
.barra-inf .escanear.activo { color: #fff; }

/* Menú lateral (escritorio) */
.lateral { display: none; }

@media (min-width: 900px) {
  .app { flex-direction: row; }
  .lateral {
    display: flex; flex-direction: column; gap: .15rem;
    width: var(--menu); flex: 0 0 var(--menu);
    padding: 1rem .75rem;
    background: var(--tarjeta);
    border-right: 1px solid var(--borde);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
  }
  .lateral .marca { display: flex; align-items: center; gap: .6rem; font-weight: 750; font-size: 1.1rem; padding: .5rem .6rem 1.1rem; }
  .lateral .marca .logo { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--violeta), #9b7bff); display: grid; place-items: center; color: #fff; }
  .lateral a {
    display: flex; align-items: center; gap: .7rem;
    padding: .62rem .7rem; border-radius: var(--r-sm);
    color: var(--texto); font-weight: 550; font-size: .93rem;
  }
  .lateral a .ic { font-size: 1.15rem; width: 1.4rem; text-align: center; }
  .lateral a:hover { background: var(--fondo); }
  .lateral a.activo { background: var(--violeta-suave); color: var(--violeta); font-weight: 650; }
  .lateral .separa { height: 1px; background: var(--borde); margin: .6rem .4rem; }

  .barra-inf { display: none; }
  .principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .contenido { padding: 1.5rem 2rem; padding-bottom: 3rem; }
  .topbar { padding: .85rem 2rem; }
  .topbar .marca { display: none; }
}

/* ============================================================
   TARJETAS Y BLOQUES
   ============================================================ */
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 1rem;
  box-shadow: var(--sombra);
}
.tarjeta + .tarjeta { margin-top: 1rem; }
.tarjeta .cab { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.tarjeta .cab h2, .tarjeta .cab h3 { margin: 0; flex: 1; }

/* Cifras del panel de inicio */
.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1rem; }
@media (min-width: 720px) { .cifras { grid-template-columns: repeat(4, 1fr); } }

.cifra {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r); padding: .9rem 1rem; box-shadow: var(--sombra);
  display: flex; align-items: center; gap: .7rem;
}
.cifra .icono {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-size: 1.05rem;
  background: var(--violeta-suave); color: var(--violeta);
}
.cifra .et { font-size: .72rem; color: var(--tenue); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.cifra .val { font-size: 1.45rem; font-weight: 750; letter-spacing: -.03em; margin-top: .1rem; line-height: 1.1; }
.cifra.alerta .val { color: var(--bajo); }
.cifra.alerta .icono { background: color-mix(in srgb, var(--bajo) 14%, transparent); color: var(--bajo); }
.cifra.peligro .val { color: var(--malo); }
.cifra.peligro .icono { background: color-mix(in srgb, var(--malo) 12%, transparent); color: var(--malo); }
.cifra.bien .val { color: var(--ok); }
.cifra.bien .icono { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
/* En pantallas angostas el número no debe partirse en dos líneas */
@media (max-width: 420px) {
  .cifra { gap: .55rem; padding: .8rem .8rem; }
  .cifra .icono { width: 34px; height: 34px; border-radius: 10px; font-size: .95rem; }
  .cifra .val { font-size: 1.15rem; }
}

/* ============================================================
   ENTRADA Y SALIDA — los dos flujos, bien separados
   ------------------------------------------------------------
   Verde entra, rojo sale. El color es lo primero que se ve y evita
   el error más caro del sistema: sumar cuando querías restar.
   ============================================================ */
.acciones-grandes { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }

.accion-grande {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .15rem; padding: 1.1rem .75rem;
  border-radius: var(--r); color: #fff;
  box-shadow: var(--sombra-md);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease;
}
.accion-grande:active { transform: scale(.97); }
@media (hover: hover) { .accion-grande:hover { transform: translateY(-2px); box-shadow: var(--sombra-lg); } }

/* Ojo con los nombres: "entrada" a secas ya la usa la pantalla de login,
   que lleva min-height:100vh. Al reutilizarla aquí los botones se estiraban
   a pantalla completa. Por eso llevan prefijo propio. */
.accion-grande.mov-entrada { background: linear-gradient(135deg, var(--ok) 0%, #38d39f 100%); }
.accion-grande.mov-salida  { background: linear-gradient(135deg, var(--malo) 0%, #f06565 100%); }
.accion-grande .ic {
  width: 46px; height: 46px; border-radius: 50%; font-size: 1.3rem; line-height: 1;
  background: rgba(255,255,255,.22); display: grid; place-items: center;
  margin-bottom: .35rem;
}
.accion-grande .t  { font-weight: 750; font-size: 1.05rem; }
.accion-grande .s  { font-size: .72rem; opacity: .9; line-height: 1.25; }

/* Pastillas de color para los iconos de las listas de acciones */
.mini.sin.chip-verde   { background: color-mix(in srgb, var(--ok) 14%, transparent);   color: var(--ok);      opacity: 1; }
.mini.sin.chip-peligro { background: color-mix(in srgb, var(--malo) 12%, transparent); color: var(--malo);    opacity: 1; }
.mini.sin.chip-claro   { background: var(--violeta-suave);                             color: var(--violeta); opacity: 1; }

/* ============================================================
   INICIO DEL OPERARIO
   ------------------------------------------------------------
   Al que trabaja en el galpón se le muestran las operaciones en
   botones grandes: lo que va a HACER, no cuánto vale el inventario.
   ============================================================ */
.bienvenida { text-align: center; padding: 2rem 1rem 1.5rem; }
.bienvenida p { margin: 0; color: var(--tenue); font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; }
.bienvenida h1 { margin: .2rem 0 0; font-size: 1.9rem; letter-spacing: -.02em; }

.operaciones { display: flex; flex-direction: column; gap: .8rem; max-width: 560px; margin: 0 auto 1.5rem; }

.operacion {
  display: flex; align-items: center; gap: 1rem;
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r); padding: 1.1rem 1.2rem;
  box-shadow: var(--sombra); color: var(--texto);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease;
}
.operacion:active { transform: scale(.98); }
@media (hover: hover) { .operacion:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); } }

.operacion .ic {
  position: relative; flex: none;
  width: 52px; height: 52px; border-radius: 15px;
  display: grid; place-items: center; font-size: 1.35rem;
  background: var(--violeta-suave); color: var(--violeta);
}
.operacion.verde   .ic { background: color-mix(in srgb, var(--ok) 14%, transparent);   color: var(--ok); }
.operacion.rojo    .ic { background: color-mix(in srgb, var(--malo) 12%, transparent); color: var(--malo); }
.operacion.violeta .ic { background: var(--violeta-suave); color: var(--violeta); }
.operacion.claro   .ic { background: var(--fondo); color: var(--tenue); }
.operacion.azul    .ic { background: color-mix(in srgb, var(--info) 13%, transparent); color: var(--info); }

.operacion .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.operacion .txt .t { font-weight: 700; font-size: 1.05rem; }
.operacion .txt .s { font-size: .8rem; color: var(--tenue); line-height: 1.3; }
.operacion .ir { color: var(--tenue); font-size: 1.4rem; flex: none; }

/* ------------------------------------------------------------
   El globito de pendientes. Es el aviso que hace que nadie se
   olvide de que hay pedidos esperando.
   ------------------------------------------------------------ */
.globito {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--malo); color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 1;
}
.operacion .ic .globito,
.accion-grande .ic .globito {
  position: absolute; top: -6px; right: -6px;
  border: 2px solid var(--tarjeta);
}
.lateral a .globito { margin-left: auto; }

/* Puntico en la barra de abajo: en el móvil no cabe el número,
   pero sí basta con avisar que hay algo. */
.barra-inf a .ic { position: relative; }
.barra-inf .punto {
  position: absolute; top: 0; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--malo); border: 2px solid var(--tarjeta);
}

/* Aviso de pedidos en el panel del dueño */
.accion-grande.aviso-pedidos {
  background: linear-gradient(135deg, var(--violeta) 0%, #8567ff 100%);
  margin-bottom: 1rem;
}
.accion-grande.aviso-pedidos .ic { position: relative; }

/* Cabecera de la pantalla según lo que se esté haciendo */
.cinta {
  border-radius: var(--r); padding: 1rem 1.1rem; color: #fff;
  margin-bottom: 1rem; box-shadow: var(--sombra-md);
}
.cinta.mov-entrada { background: linear-gradient(135deg, var(--ok) 0%, #38d39f 100%); }
.cinta.mov-salida  { background: linear-gradient(135deg, var(--malo) 0%, #f06565 100%); }
.cinta.mov-buscar  { background: linear-gradient(135deg, var(--violeta) 0%, #8567ff 100%); }
.cinta h2 { margin: 0 0 .2rem; font-size: 1.2rem; display: flex; align-items: center; gap: .5rem; }
.cinta p  { margin: 0; font-size: .85rem; opacity: .92; }

/* Marcador de lo que llevas en esta sesión */
.marcador {
  display: flex; align-items: center; justify-content: space-around;
  background: rgba(255,255,255,.16); border-radius: var(--r-sm);
  padding: .6rem; margin-top: .85rem;
}
.marcador div { text-align: center; }
.marcador .n { font-size: 1.5rem; font-weight: 750; line-height: 1.1; }
.marcador .e { font-size: .68rem; opacity: .9; text-transform: uppercase; letter-spacing: .04em; }

/* Botón de opción en la ventana de "¿qué vas a hacer?" */
.fila.accion { background: var(--tarjeta); font-family: inherit; }
.fila.accion:hover { border-color: var(--violeta); background: var(--fondo); }

/* ============================================================
   REJILLA DE ARTÍCULOS — el corazón visual (estilo Sortly)
   ============================================================ */
.rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 640px)  { .rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .rejilla { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
@media (min-width: 1300px) { .rejilla { grid-template-columns: repeat(5, 1fr); } }

.art {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--sombra); display: flex; flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease;
}
.art:active { transform: scale(.985); }
@media (hover: hover) { .art:hover { box-shadow: var(--sombra-md); } }

.art .foto {
  position: relative; aspect-ratio: 1/1; background: var(--fondo);
  display: grid; place-items: center; overflow: hidden;
}
.art .foto img { width: 100%; height: 100%; object-fit: cover; }
.art .foto .sin { font-size: 2rem; opacity: .28; }

.art .cuerpo { padding: .6rem .7rem .7rem; display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.art .nom {
  font-weight: 620; font-size: .88rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.art .meta { font-size: .74rem; color: var(--tenue); }
.art .pie { display: flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .4rem; }

/* Insignia de existencia: el semáforo verde / ámbar / rojo */
.pastilla {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .18rem .5rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.pastilla.ok      { background: rgba(18,184,134,.12);  color: var(--ok); }
.pastilla.bajo    { background: rgba(240,140,0,.14);   color: var(--bajo); }
.pastilla.agotado { background: rgba(224,49,49,.12);   color: var(--malo); }
.pastilla.neutra  { background: var(--violeta-suave);  color: var(--violeta); }

/* Etiqueta de carpeta con su color */
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px;
  background: var(--fondo); border: 1px solid var(--borde);
  font-size: .74rem; font-weight: 600; color: var(--tenue);
}
.chip .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--violeta); }

/* Lista compacta (alternativa a la rejilla, mejor en escritorio) */
.lista { display: flex; flex-direction: column; gap: .5rem; }
.fila {
  display: flex; align-items: center; gap: .75rem;
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r-sm); padding: .6rem .75rem; box-shadow: var(--sombra);
}
.fila .mini { width: 46px; height: 46px; border-radius: var(--r-sm); object-fit: cover; background: var(--fondo); flex: 0 0 46px; }
.fila .mini.sin { display: grid; place-items: center; font-size: 1.2rem; opacity: .35; }
.fila .txt { flex: 1; min-width: 0; }
.fila .txt .t { font-weight: 620; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .txt .s { font-size: .76rem; color: var(--tenue); }

/* ============================================================
   BOTONES
   ============================================================ */
/* Botones con forma de pastilla: se ven más amables y el dedo los acierta
   mejor que un rectángulo de esquinas duras. El degradado y la sombra de
   color hacen que el botón principal se note sin gritar. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .7rem 1.25rem; border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--violeta) 0%, #8567ff 100%);
  color: #fff;
  font-size: .93rem; font-weight: 650; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(108,77,246,.28);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease, filter .15s ease;
}
.btn:hover  { box-shadow: 0 6px 18px rgba(108,77,246,.38); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); box-shadow: 0 2px 6px rgba(108,77,246,.3); }
.btn:focus-visible { outline: 3px solid rgba(108,77,246,.4); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.3); }

.btn.claro {
  background: var(--tarjeta); color: var(--texto); border-color: var(--borde);
  box-shadow: var(--sombra);
}
.btn.claro:hover { box-shadow: var(--sombra-md); border-color: var(--violeta-borde); }

.btn.suave {
  background: var(--violeta-suave); color: var(--violeta); box-shadow: none;
}
.btn.suave:hover { background: var(--violeta-borde); box-shadow: none; }

.btn.peligro { background: linear-gradient(135deg, var(--malo) 0%, #f06565 100%); box-shadow: 0 3px 10px rgba(224,49,49,.28); }
.btn.peligro:hover { box-shadow: 0 6px 18px rgba(224,49,49,.38); }
.btn.verde   { background: linear-gradient(135deg, var(--ok) 0%, #38d39f 100%); box-shadow: 0 3px 10px rgba(18,184,134,.28); }
.btn.verde:hover { box-shadow: 0 6px 18px rgba(18,184,134,.38); }

.btn.fantasma { background: transparent; color: var(--tenue); box-shadow: none; }
.btn.fantasma:hover { background: var(--fondo); color: var(--texto); box-shadow: none; transform: none; }

.btn.ancho   { width: 100%; }
.btn.grande  { padding: .95rem 1.6rem; font-size: 1.02rem; }
.btn.chico   { padding: .42rem .85rem; font-size: .82rem; box-shadow: none; }
.btn.chico:hover { transform: none; box-shadow: var(--sombra); }
.btn.redondo { width: 44px; height: 44px; padding: 0; border-radius: 50%; }

/* Botones de sumar y restar del detalle: grandes, para usar con guantes */
.contador { display: flex; align-items: center; gap: .8rem; justify-content: center; }
.contador button {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 1.5rem; font-weight: 700; font-family: inherit;
  display: grid; place-items: center;
}
.contador .menos { background: rgba(224,49,49,.12); color: var(--malo); }
.contador .mas   { background: rgba(18,184,134,.14); color: var(--ok); }
.contador .val   { font-size: 2rem; font-weight: 750; min-width: 4rem; text-align: center; letter-spacing: -.03em; }

/* ============================================================
   FORMULARIOS
   ============================================================ */
.campo { margin-bottom: .9rem; }
.campo label { display: block; font-size: .82rem; font-weight: 650; margin-bottom: .3rem; color: var(--texto); }
.campo .ayuda { font-size: .76rem; color: var(--tenue); margin-top: .25rem; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], select, textarea {
  width: 100%; padding: .65rem .8rem;
  border: 1px solid var(--borde); border-radius: var(--r-sm);
  background: var(--tarjeta); color: var(--texto);
  font-size: 16px;   /* 16px evita que iOS haga zoom al enfocar */
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--violeta);
  box-shadow: 0 0 0 3px rgba(108,77,246,.15);
}
textarea { min-height: 92px; resize: vertical; }

.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 480px) { .fila-campos.apila { grid-template-columns: 1fr; } }

/* Campo de contraseña con el ojo para verla.
   Poder mirar lo que se escribe evita la mitad de los errores de tecleo,
   sobre todo con contraseñas que llevan símbolos. */
.clave { position: relative; }
.clave input { padding-right: 3rem; }
.clave .ojo {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  width: 2.3rem; height: 2.3rem; border: none; background: none;
  cursor: pointer; font-size: 1.1rem; line-height: 1;
  display: grid; place-items: center; border-radius: 50%; color: var(--tenue);
}
.clave .ojo:hover { background: var(--fondo); }

/* Lista de requisitos que se va marcando sola al escribir */
.requisitos { list-style: none; padding: 0; margin: .5rem 0 0; }
.requisitos li {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8rem; color: var(--tenue); padding: .12rem 0;
  transition: color .15s ease;
}
.requisitos li .marca {
  width: 1.05rem; height: 1.05rem; border-radius: 50%; flex: 0 0 1.05rem;
  display: grid; place-items: center; font-size: .62rem; font-weight: 800;
  background: var(--borde); color: var(--tenue);
  transition: background .15s ease, color .15s ease;
}
.requisitos li.listo { color: var(--ok); }
.requisitos li.listo .marca { background: var(--ok); color: #fff; }

/* Aviso bajo un campo: verde si va bien, rojo si no */
.pista { font-size: .78rem; margin-top: .3rem; min-height: 1.1em; }
.pista.bien { color: var(--ok); font-weight: 600; }
.pista.mal  { color: var(--malo); }

.check { display: flex; align-items: center; gap: .55rem; padding: .5rem 0; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--violeta); flex: 0 0 20px; }
.check span { font-size: .9rem; }

/* Buscador con lupa */
.buscador { position: relative; margin-bottom: .9rem; }
.buscador input { padding-left: 2.5rem; }
.buscador .lupa { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); opacity: .45; display: flex; }

/* Filtros en línea que se deslizan */
.filtros { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: .5rem; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtros button {
  flex: 0 0 auto; padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--tenue);
  font-size: .83rem; font-weight: 600; font-family: inherit; cursor: pointer;
}
.filtros button.activo { background: var(--violeta); color: #fff; border-color: var(--violeta); }

/* ============================================================
   VENTANAS EMERGENTES
   ============================================================ */
.velo {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15,15,35,.5); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 640px) { .velo { align-items: center; } }

.modal {
  background: var(--tarjeta); width: 100%; max-width: 520px;
  max-height: 92vh; overflow-y: auto;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 1.1rem; box-shadow: var(--sombra-lg);
  animation: sube .2s ease;
}
@media (min-width: 640px) { .modal { border-radius: var(--r-lg); animation: aparece .18s ease; } }
@keyframes sube    { from { transform: translateY(100%); } }
@keyframes aparece { from { opacity: 0; transform: scale(.96); } }

.modal .cab-modal { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.modal .cab-modal h2 { margin: 0; flex: 1; font-size: 1.15rem; }
.modal .cerrar {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--fondo); color: var(--tenue); font-size: 1.2rem; line-height: 1;
}
.modal .pie-modal { display: flex; gap: .6rem; margin-top: 1.1rem; }
.modal .pie-modal .btn { flex: 1; }

/* Tirador de la hoja deslizante en móvil */
.modal .tirador { width: 40px; height: 4px; border-radius: 2px; background: var(--borde); margin: -.4rem auto .8rem; }
@media (min-width: 640px) { .modal .tirador { display: none; } }

/* ============================================================
   AVISOS
   ============================================================ */
.avisos { position: fixed; bottom: calc(var(--barra) + 1rem); left: 1rem; right: 1rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
@media (min-width: 900px) { .avisos { bottom: 1.5rem; left: auto; right: 1.5rem; width: 340px; } }

.aviso {
  background: var(--texto); color: var(--fondo);
  padding: .75rem 1rem; border-radius: var(--r-sm);
  font-size: .89rem; font-weight: 550; box-shadow: var(--sombra-lg);
  display: flex; align-items: center; gap: .55rem;
  animation: aparece .18s ease;
}
.aviso.bien  { background: var(--ok);   color: #fff; }
.aviso.error { background: var(--malo); color: #fff; }
.aviso.ojo   { background: var(--bajo); color: #fff; }

.alerta {
  padding: .75rem .9rem; border-radius: var(--r-sm);
  font-size: .88rem; margin-bottom: .9rem;
  display: flex; align-items: flex-start; gap: .5rem;
}
.alerta.error { background: rgba(224,49,49,.1);  color: var(--malo); }
.alerta.ojo   { background: rgba(240,140,0,.12); color: #b45309; }
.alerta.info  { background: var(--violeta-suave); color: var(--violeta); }
.alerta.bien  { background: rgba(18,184,134,.12); color: var(--ok); }

/* Barra de conexión: aparece cuando se trabaja sin señal */
.sin-senal {
  position: sticky; top: 0; z-index: 60;
  background: var(--bajo); color: #fff;
  padding: .45rem 1rem; font-size: .82rem; font-weight: 650;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
}
.sin-senal.sincronizando { background: var(--info); }

/* Aviso de que se acaba el plazo del plan o de la prueba. Ámbar, no
   rojo: todavía no pasó nada, solo falta poco. La versión "urgente"
   (ya en prórroga) sí sube el tono. */
.barra-plan {
  position: sticky; top: 0; z-index: 59;
  background: var(--bajo); color: #fff;
  padding: .45rem .75rem; font-size: .82rem; font-weight: 650;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
}
.barra-plan.urgente { background: var(--malo); color: #fff; }
.barra-plan a { color: inherit; text-decoration: underline; white-space: nowrap; }
.barra-plan button {
  background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 1.15rem; line-height: 1; padding: 0 .2rem; opacity: .7;
}
.barra-plan button:hover { opacity: 1; }

/* ============================================================
   VACÍO Y CARGA
   ============================================================ */
.vacio { text-align: center; padding: 2.5rem 1.5rem; color: var(--tenue); }
.vacio .emoji { font-size: 3rem; margin-bottom: .6rem; opacity: .55; }
.vacio .emoji .icx { width: 64px; height: 64px; color: var(--violeta); }

/* Renglón ya preparado: se apaga para que salte a la vista lo que falta. */
.fila.hecha { opacity: .5; }
.fila.hecha .t { text-decoration: line-through; }

/* La nota de entrega solo existe en el papel. */
.solo-imprimir { display: none; }
.vacio .dibujo { width: 100%; max-width: 220px; margin: 0 auto .9rem; display: block; }
.vacio h3 { color: var(--texto); margin-bottom: .35rem; }
.vacio p { margin: 0 0 1.1rem; font-size: .9rem; max-width: 34ch; margin-left: auto; margin-right: auto; }

/* Ilustraciones de las pantallas */
.ilustra { width: 100%; max-width: 260px; margin: 0 auto 1rem; display: block; }
.ilustra.chica { max-width: 190px; }

.esqueleto { background: linear-gradient(90deg, var(--borde) 25%, var(--fondo) 50%, var(--borde) 75%); background-size: 200% 100%; animation: brilla 1.3s infinite; border-radius: var(--r-sm); }
@keyframes brilla { to { background-position: -200% 0; } }
.esqueleto.foto { aspect-ratio: 1/1; border-radius: var(--r); }
.esqueleto.linea { height: 12px; margin-top: .5rem; }

/* ============================================================
   BARRA DE USO DEL PLAN
   ============================================================ */
.uso { margin-top: .5rem; }
.uso .et { display: flex; justify-content: space-between; font-size: .78rem; color: var(--tenue); margin-bottom: .3rem; }
.uso .canal { height: 7px; background: var(--borde); border-radius: 999px; overflow: hidden; }
.uso .lleno { height: 100%; background: var(--violeta); border-radius: 999px; transition: width .3s ease; }
.uso .lleno.ojo  { background: var(--bajo); }
.uso .lleno.tope { background: var(--malo); }

/* ============================================================
   ESCÁNER
   ============================================================ */
.escaner { position: fixed; inset: 0; z-index: 150; background: #000; display: flex; flex-direction: column; }
.escaner video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.escaner .mira {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(72vw, 300px); aspect-ratio: 1/1;
  border: 3px solid rgba(255,255,255,.9); border-radius: var(--r-lg);
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.55);
}
.escaner .mira::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px;
  background: var(--violeta); box-shadow: 0 0 12px var(--violeta);
  animation: barre 2s ease-in-out infinite;
}
@keyframes barre { 0%,100% { top: 12%; } 50% { top: 88%; } }

.escaner .cab-esc { position: relative; z-index: 2; display: flex; align-items: center; gap: .6rem; padding: 1rem; color: #fff; }
.escaner .pie-esc { position: relative; z-index: 2; margin-top: auto; padding: 1.2rem; text-align: center; color: #fff; }
.escaner .pie-esc p { margin: 0 0 .9rem; font-size: .9rem; opacity: .85; }

/* ============================================================
   TABLAS (reportes en escritorio)
   ============================================================ */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--r); background: var(--tarjeta); }
table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th, td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--borde); white-space: nowrap; }
th { background: var(--fondo); font-weight: 650; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--fondo); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   ENTRAR / REGISTRARSE
   ============================================================ */
.entrada {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background: linear-gradient(160deg, var(--violeta) 0%, #4c2fc4 100%);
}
.entrada .caja {
  background: var(--tarjeta); border-radius: var(--r-lg); padding: 1.75rem;
  width: 100%; max-width: 420px; box-shadow: var(--sombra-lg);
}
.entrada .marca { text-align: center; margin-bottom: 1.4rem; }
.entrada .marca .logo { width: 58px; height: 58px; border-radius: 17px; background: linear-gradient(135deg, var(--violeta), #9b7bff); display: grid; place-items: center; margin: 0 auto .7rem; font-size: 1.8rem; }
.entrada .marca h1 { font-size: 1.4rem; margin-bottom: .2rem; }
.entrada .marca p { margin: 0; color: var(--tenue); font-size: .88rem; }
.entrada .abajo { text-align: center; margin-top: 1.1rem; font-size: .88rem; color: var(--tenue); }

/* Ilustración de bienvenida.
   En el teléfono va pequeña arriba del formulario, para que los campos no
   queden empujados fuera de la pantalla. En pantalla ancha se pone al lado,
   grande, que es donde hay sitio de sobra. */
.entrada .presenta { display: none; }
.entrada .caja .dibujo-mini {
  width: 132px; margin: 0 auto .5rem; display: block;
  filter: drop-shadow(0 6px 14px rgba(76,47,196,.18));
}

@media (min-width: 900px) {
  .entrada { padding: 2rem; }
  .entrada .marco {
    display: flex; align-items: center; gap: 3rem;
    max-width: 940px; width: 100%;
  }
  .entrada .presenta { display: block; flex: 1; color: #fff; }
  .entrada .presenta img {
    width: 100%; max-width: 380px; margin-bottom: 1.2rem;
    filter: drop-shadow(0 14px 34px rgba(0,0,0,.28));
  }
  .entrada .presenta h2 { font-size: 1.9rem; line-height: 1.2; margin-bottom: .6rem; }
  .entrada .presenta p { font-size: 1rem; opacity: .9; margin: 0 0 1.2rem; max-width: 36ch; }
  .entrada .presenta ul { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
  .entrada .presenta li { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; opacity: .95; }
  .entrada .caja { flex: 0 0 400px; margin: 0; }
  .entrada .caja .dibujo-mini { display: none; }
}

/* ============================================================
   ETIQUETAS PARA IMPRIMIR
   ============================================================ */
.hoja-etiquetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; }
.etiqueta {
  border: 1px dashed var(--borde); border-radius: 6px; padding: 4mm;
  text-align: center; break-inside: avoid; background: #fff; color: #000;
}
.etiqueta canvas, .etiqueta img { margin: 0 auto; }
.etiqueta .nom { font-size: 9pt; font-weight: 700; margin-top: 2mm; line-height: 1.2; }
.etiqueta .sku { font-size: 7pt; color: #555; }

@media print {
  .topbar, .barra-inf, .lateral, .no-imprimir { display: none !important; }
  .solo-imprimir { display: block !important; }
  .nota-pie .firmas {
    display: flex; gap: 3rem; margin-top: 3.5rem;
    font-size: .85rem; color: #555;
  }
  .nota-pie .firmas > div { flex: 1; border-top: 1px solid #999; padding-top: .4rem; text-align: center; }
  body { background: #fff; }
  .contenido { padding: 0; max-width: none; }
  .hoja-etiquetas { grid-template-columns: repeat(3, 1fr); gap: 4mm; }
  .etiqueta { border: 1px solid #ccc; }
}

/* ============================================================
   VARIOS
   ============================================================ */
.tenue { color: var(--tenue); }
.chico { font-size: .82rem; }
.centro { text-align: center; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.flex { display: flex; align-items: center; gap: .5rem; }
.crece { flex: 1; }
.envuelve { flex-wrap: wrap; }
.oculto { display: none !important; }
.mt { margin-top: 1rem; } .mb { margin-bottom: 1rem; }
.num { font-variant-numeric: tabular-nums; }

/* === ICONOS:INICIO (generado por tools/generar-iconos-css.py — no tocar a mano) === */
/* Un icono es un cuadrado del color del texto recortado con la forma
   del SVG (máscara). Hereda el color de donde esté: blanco en un botón
   de color, violeta en el menú activo, gris en una lista. */
.icx {
  display: inline-block; width: 1.25em; height: 1.25em;
  vertical-align: -0.28em; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icx) no-repeat center / contain;
  mask: var(--icx) no-repeat center / contain;
}
.icx-ajustes { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E"); }
.icx-alerta { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); }
.icx-atras { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E"); }
.icx-brujula { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/%3E%3C/svg%3E"); }
.icx-buscar { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); }
.icx-caja { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E"); }
.icx-camara { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); }
.icx-camion { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13' rx='1'/%3E%3Cpath d='M16 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E"); }
.icx-candado { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.icx-carpeta { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.icx-carrito { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E"); }
.icx-casa { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E"); }
.icx-check { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.icx-credencial { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Ccircle cx='8' cy='10' r='2'/%3E%3Cpath d='M5 16c0-1.7 1.3-3 3-3s3 1.3 3 3'/%3E%3Cline x1='14' y1='9' x2='19' y2='9'/%3E%3Cline x1='14' y1='13' x2='18' y2='13'/%3E%3C/svg%3E"); }
.icx-diana { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }
.icx-dinero { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); }
.icx-edificio { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18'/%3E%3Cline x1='3' y1='22' x2='21' y2='22'/%3E%3Cline x1='10' y1='7' x2='10.01' y2='7'/%3E%3Cline x1='14' y1='7' x2='14.01' y2='7'/%3E%3Cline x1='10' y1='11' x2='10.01' y2='11'/%3E%3Cline x1='14' y1='11' x2='14.01' y2='11'/%3E%3Cpath d='M10 22v-4h4v4'/%3E%3C/svg%3E"); }
.icx-entrada { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E"); }
.icx-equis { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); }
.icx-escaner { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M17 3h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M21 17v2a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Cline x1='7' y1='12' x2='17' y2='12'/%3E%3C/svg%3E"); }
.icx-etiqueta { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E"); }
.icx-flechas { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 1 21 5 17 9'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'/%3E%3Cpolyline points='7 23 3 19 7 15'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E"); }
.icx-foto { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E"); }
.icx-grafico { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E"); }
.icx-guia { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E"); }
.icx-herramienta { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); }
.icx-impresora { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E"); }
.icx-lapiz { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E"); }
.icx-lista { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E"); }
.icx-listo { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"); }
.icx-llave { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4'/%3E%3C/svg%3E"); }
.icx-mas { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); }
.icx-megafono { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E"); }
.icx-nube { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='8 17 12 21 16 17'/%3E%3Cline x1='12' y1='12' x2='12' y2='21'/%3E%3Cpath d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/%3E%3C/svg%3E"); }
.icx-ojo { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.icx-ojono { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E"); }
.icx-papelera { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E"); }
.icx-pin { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.icx-puntos { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E"); }
.icx-qr { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M14 14h3v3h-3z'/%3E%3Cpath d='M18 18h3v3h-3z'/%3E%3C/svg%3E"); }
.icx-rayo { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E"); }
.icx-refrescar { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E"); }
.icx-reloj { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }
.icx-salida { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E"); }
.icx-sinsenal { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3Cpath d='M16.72 11.06A10.94 10.94 0 0 1 19 12.55'/%3E%3Cpath d='M5 12.55a10.94 10.94 0 0 1 5.17-2.39'/%3E%3Cpath d='M10.71 5.05A16 16 0 0 1 22.58 9'/%3E%3Cpath d='M1.42 9a15.91 15.91 0 0 1 4.7-2.88'/%3E%3Cpath d='M8.53 16.11a6 6 0 0 1 6.95 0'/%3E%3Cline x1='12' y1='20' x2='12.01' y2='20'/%3E%3C/svg%3E"); }
.icx-tarjeta { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E"); }
.icx-telefono { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E"); }
.icx-tendencia { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E"); }
.icx-usuario { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.icx-usuarios { --icx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
/* === ICONOS:FIN === */

/* ============================================================
   EDITOR DE FOTOS DE PRODUCTO
   ------------------------------------------------------------
   El lienzo va sobre un tablero de cuadros grises: así se ve al
   instante si el fondo quedó transparente o si sigue estando la
   pared del galpón. Sobre blanco liso no se distinguiría.
   ============================================================ */
.foto-editor { display: flex; flex-direction: column; gap: .75rem; }

.foto-lienzo {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 46vh;
  margin: 0 auto;
  width: 100%;
  max-width: 340px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e9e9ef 25%, transparent 25%, transparent 75%, #e9e9ef 75%),
    linear-gradient(45deg, #e9e9ef 25%, transparent 25%, transparent 75%, #e9e9ef 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
  border: 1px solid var(--linea, #e5e5ee);
}
.foto-lienzo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.foto-cargando { font-size: .9rem; color: var(--tenue, #6b6b7b); }

.foto-tiras {
  display: flex; gap: .5rem; overflow-x: auto;
  padding-bottom: .25rem; scrollbar-width: thin;
}
.foto-tira {
  position: relative; flex: 0 0 auto;
  width: 60px; height: 60px; padding: 0;
  border: 2px solid transparent; border-radius: 10px;
  overflow: hidden; cursor: pointer; background: #fff;
}
.foto-tira.activa { border-color: var(--acento, #6c4df6); }
.foto-tira img { width: 100%; height: 100%; object-fit: cover; display: block; }

.foto-sello {
  position: absolute; right: 2px; bottom: 2px;
  background: var(--acento, #6c4df6); color: #fff;
  font-size: .58rem; font-weight: 700; letter-spacing: .04em;
  padding: 1px 4px; border-radius: 5px;
}

/* Una sola foto: la tira de miniaturas no aporta nada. */
.foto-tiras:has(.foto-tira:only-child) { display: none; }

.alerta.chico { font-size: .85rem; padding: .5rem .7rem; }

/* ============================================================
   CÁMARA DE FOTOS DE PRODUCTO
   ------------------------------------------------------------
   Reusa la capa a pantalla completa del escáner, pero con un
   marco fijo en vez de la mira que barre: aquí no se busca nada,
   se encuadra. Lo que quede dentro del marco es exactamente lo
   que se guarda.
   ============================================================ */
.camara-foto .marco-foto {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(84vw, 380px); aspect-ratio: 1 / 1;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
  pointer-events: none;
}
/* Las cuatro esquinas marcadas: dicen "encaja aquí" sin tapar el producto. */
.camara-foto .marco-foto::before,
.camara-foto .marco-foto::after {
  content: ''; position: absolute; width: 26px; height: 26px;
  border: 3px solid #fff;
}
.camara-foto .marco-foto::before {
  top: -2px; left: -2px; border-right: none; border-bottom: none;
  border-radius: var(--r-lg) 0 0 0;
}
.camara-foto .marco-foto::after {
  bottom: -2px; right: -2px; border-left: none; border-top: none;
  border-radius: 0 0 var(--r-lg) 0;
}

.camara-foto .pie-esc { padding-bottom: max(1.2rem, env(safe-area-inset-bottom)); }

.camara-foto .disparo { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; }

/* Botón de disparo grande: se usa con guantes y sin mirar. */
.camara-foto .obturador {
  width: 68px; height: 68px; flex: 0 0 auto;
  border-radius: 50%; border: 4px solid rgba(255, 255, 255, .85);
  background: #fff; cursor: pointer; padding: 0;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .35);
  transition: transform .08s;
}
.camara-foto .obturador:active { transform: scale(.9); }

.camara-foto .tomas { display: flex; gap: .4rem; overflow-x: auto; padding: .2rem 0; }
.camara-foto .toma { position: relative; flex: 0 0 auto; width: 48px; height: 48px; }
.camara-foto .toma img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 8px; border: 2px solid rgba(255, 255, 255, .8);
}
.camara-foto .toma button {
  position: absolute; top: -5px; right: -5px;
  width: 19px; height: 19px; padding: 0; line-height: 1;
  border: none; border-radius: 50%;
  background: var(--malo); color: #fff; font-size: 13px; cursor: pointer;
}

/* Destello al disparar: confirma que la foto salió. Sin esto la gente
   dispara tres veces lo mismo porque no sabe si funcionó. */
.camara-foto.destello::after {
  content: ''; position: absolute; inset: 0; z-index: 5;
  background: #fff; animation: destello-foto .17s ease-out;
  pointer-events: none;
}
@keyframes destello-foto { from { opacity: .85; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .camara-foto.destello::after { animation: none; opacity: 0; }
  .camara-foto .obturador:active { transform: none; }
}