/* Recepta · Inventario: tarjetas de resumen, ficha lateral, gráficos, reposición, comparador, etiquetas y gestión masiva. */
.plus { margin-left: auto; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: linear-gradient(135deg, var(--cobalto), #6a3dff); color: #fff; flex: none; }
.lateral .sub a { display: flex; align-items: center; gap: 6px; }
.subtitulo-sub { font-size: 0.66rem; font-weight: 800; color: var(--pizarra); text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 12px 2px 20px; }
.chico-texto { font-size: 0.8rem; }
.derecha { text-align: right; }
.check { display: flex; gap: 8px; align-items: center; font-weight: 600; margin: 0; }
.check input { width: auto; }
.grilla-form { display: grid; gap: 14px; }
.grilla-form .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
td .codigo { display: block; font-size: 0.8rem; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpis.dos-kpis { grid-template-columns: 1fr 1fr; margin: 14px 0 8px; }
.kpi { background: var(--hoja); border: 1px solid var(--perla); border-radius: 16px; padding: 16px; box-shadow: var(--sombra); min-width: 0; }
.kpi span { display: block; color: var(--pizarra); font-size: 0.8rem; font-weight: 700; }
.kpi b { display: block; font-size: 1.4rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi small { color: var(--pizarra); font-weight: 600; }
.kpi .sube { color: var(--error); } .kpi .baja { color: var(--menta-texto); }
.kpi.destacado { background: linear-gradient(135deg, var(--cobalto), #4d2bff); color: #fff; border: 0; }
.kpi.destacado span, .kpi.destacado small { color: rgba(255, 255, 255, 0.82); }

.grilla-2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
.grilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.grilla-etiquetas { display: grid; grid-template-columns: 330px 1fr; gap: 16px; align-items: start; }
.panel h2 small { font-weight: 600; color: var(--pizarra); font-size: 0.8rem; margin-left: 6px; }

/* Salud del inventario */
.salud { display: flex; gap: 22px; align-items: center; }
.anillo { position: relative; width: 132px; height: 132px; flex: none; }
.anillo svg { transform: rotate(-90deg); }
.anillo .valor { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.anillo .valor b { font-size: 2.1rem; letter-spacing: -0.04em; line-height: 1; display: block; }
.anillo .valor span { font-size: 0.72rem; font-weight: 700; color: var(--pizarra); }
.barras-salud { flex: 1; display: grid; gap: 10px; min-width: 0; }
.barra-salud > div:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: 0.84rem; font-weight: 600; }
.pista { height: 7px; background: var(--perla-suave); border-radius: 99px; overflow: hidden; margin-top: 4px; }
.pista i { display: block; height: 100%; border-radius: 99px; background: var(--menta); }
.pista i.medio { background: var(--ambar); } .pista i.bajo { background: var(--error); }

.tareas-hoy { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tareas-hoy li a { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--perla); border-radius: 14px; color: var(--tinta); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.tareas-hoy li a:hover { text-decoration: none; border-color: #cdd6ff; transform: translateY(-1px); box-shadow: var(--sombra); }
.tareas-hoy .ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.05rem; flex: none; }
.tareas-hoy b { display: block; font-size: 0.93rem; }
.tareas-hoy span.tenue { font-size: 0.82rem; }
.tareas-hoy .ir { margin-left: auto; color: var(--cobalto); font-weight: 800; }
.ico.rojo { background: var(--error-suave); color: var(--error); } .ico.ambar { background: var(--ambar-suave); color: var(--ambar-texto); }
.ico.menta { background: var(--menta-suave); color: var(--menta-texto); } .ico.azul { background: var(--cobalto-suave); color: var(--cobalto); }

/* Stock */
.stock { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--menta); }
.stock.bajo::before { background: var(--ambar); } .stock.sin::before { background: var(--error); } .stock.nd::before { background: var(--perla); }
.stock.bajo { color: var(--ambar-texto); } .stock.sin { color: var(--error); } .stock.nd { color: var(--pizarra); font-weight: 600; }
.por-deposito { display: block; font-size: 0.74rem; color: var(--pizarra); font-weight: 600; }
.var { font-weight: 800; font-variant-numeric: tabular-nums; }
.var.sube { color: var(--error); } .var.baja { color: var(--menta-texto); }
.dif-pos { color: var(--menta-texto); font-weight: 800; } .dif-neg { color: var(--error); font-weight: 800; }

/* Ficha lateral del producto */
.cajon-fondo { position: fixed; inset: 0; background: rgba(20, 26, 51, 0.3); z-index: 55; opacity: 0; transition: opacity 0.2s; }
.cajon-fondo.abierto { opacity: 1; }
.cajon { position: fixed; top: 0; right: 0; bottom: 0; width: min(540px, 100%); background: var(--hoja); z-index: 56; box-shadow: -20px 0 50px rgba(20, 26, 51, 0.18); transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column; }
.cajon.abierto { transform: none; }
.cajon > header { padding: 16px 20px; border-bottom: 1px solid var(--perla); display: flex; gap: 12px; align-items: flex-start; }
.cajon > header h2 { font-size: 1.08rem; }
.cajon .cerrar { margin-left: auto; border: 0; background: none; font-size: 1.1rem; padding: 4px 8px; color: var(--pizarra); flex: none; }
.cajon .cuerpo { padding: 18px 20px 28px; overflow-y: auto; display: grid; gap: 20px; }
.cajon h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pizarra); margin-bottom: 8px; }
.cajon .campos { grid-template-columns: 1fr 1fr; }
.mini-grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-grilla div { background: var(--niebla); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.mini-grilla span { display: block; font-size: 0.74rem; color: var(--pizarra); font-weight: 700; }
.mini-grilla b { font-variant-numeric: tabular-nums; }
.depositos-producto { display: grid; gap: 8px; }
.depositos-producto > div { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--perla); border-radius: 12px; }
.depositos-producto input { width: 90px; text-align: right; padding: 6px 8px; }
.depositos-producto b { flex: 1; }
.codigo-barras svg { max-width: 100%; height: 70px; }
.fila-codigo { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.fila-codigo input { flex: 1; min-width: 160px; }
.aviso-mejor { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--menta-suave); color: var(--menta-texto); font-weight: 700; font-size: 0.9rem; }
.aviso-mejor a { margin-left: auto; }
.movimientos { list-style: none; margin: 0; padding: 0; }
.movimientos li { display: grid; grid-template-columns: 112px 1fr auto; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--perla-suave); font-size: 0.86rem; }

/* Gráficos */
.grafico { width: 100%; height: auto; display: block; }
.grafico text { font-family: Manrope, sans-serif; font-size: 11px; fill: var(--pizarra); font-weight: 600; }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 0.84rem; font-weight: 700; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.leyenda span.apagado { opacity: 0.35; }
.leyenda i { width: 12px; height: 12px; border-radius: 4px; }
.barras-h { display: grid; gap: 10px; }
.barra-h { display: grid; grid-template-columns: 120px 1fr 120px; gap: 10px; align-items: center; font-size: 0.88rem; font-weight: 700; }
.barra-h > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-h .pista { height: 12px; margin: 0; }
.barra-h b { text-align: right; font-variant-numeric: tabular-nums; }

.cabecera-grafico { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cabecera-grafico h2 { margin-bottom: 0; }
.aviso-tendencia { background: var(--cobalto-suave); color: var(--cobalto-hondo); border-radius: 12px; padding: 10px 14px; font-size: 0.88rem; font-weight: 600; max-width: none; }
.leyenda span b { font-weight: 800; }

/* Reposición */
.grupo-pedido { border: 1px solid var(--perla); border-radius: 16px; overflow: hidden; background: var(--hoja); box-shadow: var(--sombra); }
.grupo-pedido + .grupo-pedido { margin-top: 16px; }
.grupo-pedido > header { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--perla); flex-wrap: wrap; }
.grupo-pedido > header h2 { margin: 0; }
.grupo-pedido > header .acciones { margin-left: auto; }
.cant-pedido { width: 86px; text-align: right; padding: 6px 8px; }
.pie-pedido { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--niebla); font-weight: 700; flex-wrap: wrap; gap: 10px; }
.mensaje-wa { background: #e7ffdb; border-radius: 14px 14px 14px 4px; padding: 12px 14px; white-space: pre-wrap; font-size: 0.9rem; border: 1px solid #c9eeb5; max-height: 340px; overflow: auto; }
button.wa { background: #25d366; border-color: #25d366; color: #fff; font-weight: 800; }
button.wa:hover { background: #1fb457; border-color: #1fb457; }

/* Comparador */
.comparacion { border: 1px solid var(--perla); border-radius: 16px; background: var(--hoja); box-shadow: var(--sombra); padding: 16px; }
.comparacion + .comparacion { margin-top: 14px; }
.comparacion > header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ofertas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.oferta { border: 1.5px solid var(--perla); border-radius: 14px; padding: 14px 12px 12px; position: relative; display: grid; gap: 2px; }
/* Cada oferta se puede tocar para elegir a quién comprárselo */
button.oferta { font: inherit; color: inherit; text-align: left; background: var(--hoja); cursor: pointer; align-content: start; padding-right: 38px; transition: border-color .15s, box-shadow .15s, background .15s; }
.ofertas button.oferta:hover { border-color: var(--cobalto); }
.ofertas button.oferta.elegida, .ofertas button.oferta.elegida:hover { border-color: var(--cobalto); box-shadow: 0 0 0 2px var(--cobalto), 0 8px 22px rgba(43, 75, 255, 0.22); background: var(--cobalto-suave); }
.ofertas button.oferta.mejor:not(.elegida) { background: var(--menta-suave); }
button.oferta.mejor.elegida { border-color: var(--cobalto); }
.oferta .marca-elegida { position: absolute; bottom: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--perla); background: var(--hoja); }
.oferta.elegida .marca-elegida { border-color: var(--cobalto); background: var(--cobalto); box-shadow: inset 0 0 0 3px var(--hoja); }
.oferta.mejor { border-color: var(--menta); background: var(--menta-suave); }
.oferta.actual::after { content: 'Lo comprás'; position: absolute; top: -9px; left: 10px; font-size: 0.66rem; font-weight: 800; background: var(--cobalto); color: #fff; padding: 2px 7px; border-radius: 6px; }
.oferta.mejor::before { content: 'Más barato'; position: absolute; top: -9px; right: 10px; font-size: 0.66rem; font-weight: 800; background: var(--menta); color: #fff; padding: 2px 7px; border-radius: 6px; }
.oferta b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.oferta .tenue { font-size: 0.78rem; }
.ahorro { color: var(--menta-texto); font-weight: 800; }

/* Etiquetas y escáner */
.etiquetas-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.etiqueta-gondola { border: 1.5px dashed #c7cedd; border-radius: 12px; padding: 12px 14px; background: #fff; display: grid; gap: 4px; break-inside: avoid; position: relative; }
/* Tacho para sacar una etiqueta de la selección: aparece al pasar el mouse (en el celular, siempre) */
.etiqueta-gondola .quitar-etq { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 8px;
  border: 1px solid var(--perla); background: #fff; color: var(--error); opacity: 0; transition: opacity 0.15s, background 0.15s; cursor: pointer; }
.etiqueta-gondola .quitar-etq svg { width: 16px; height: 16px; }
.etiqueta-gondola:hover .quitar-etq, .etiqueta-gondola .quitar-etq:focus-visible { opacity: 1; }
.etiqueta-gondola .quitar-etq:hover { background: var(--error-suave); border-color: var(--error); }
@media (hover: none) { .etiqueta-gondola .quitar-etq { opacity: 1; } }
.etiqueta-gondola .prov { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pizarra); }
.etiqueta-gondola .nom { font-weight: 800; line-height: 1.2; font-size: 0.95rem; }
.etiqueta-gondola .pre { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.04em; color: var(--tinta); line-height: 1.1; }
.etiqueta-gondola .pre small { font-size: 0.9rem; vertical-align: top; }
.etiqueta-gondola .extra { font-weight: 700; font-size: 0.85rem; }
.etiqueta-gondola svg { width: 100%; height: 46px; }
.etiqueta-gondola.chica { padding: 8px 10px; } .etiqueta-gondola.chica .pre { font-size: 1.35rem; } .etiqueta-gondola.chica svg { height: 32px; }
.etiquetas-grilla:has(.chica) { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.lista-elegir { max-height: 460px; overflow: auto; border: 1px solid var(--perla); border-radius: 12px; }
.lista-elegir label { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--perla-suave); margin: 0; font-weight: 600; cursor: pointer; font-size: 0.88rem; }
.lista-elegir label .tenue { margin-left: auto; font-size: 0.78rem; }
.lista-elegir label:hover { background: var(--niebla); }
.lista-elegir input { width: auto; flex: none; }
.escaner { aspect-ratio: 4/3; background: #0d1120; border-radius: 16px; position: relative; overflow: hidden; display: grid; place-items: center; color: #fff; font-weight: 600; text-align: center; padding: 12px; }
.escaner::after { content: ''; position: absolute; left: 12%; right: 12%; height: 2px; background: var(--menta); box-shadow: 0 0 12px var(--menta); animation: barrido 1.6s ease-in-out infinite alternate; z-index: 2; }
.escaner video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* Buscador de productos en ventanas */
.buscador { position: relative; }
.sugerencias { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; background: var(--hoja); border: 1px solid var(--perla); border-radius: 12px; box-shadow: 0 12px 30px rgba(20, 26, 51, 0.12); overflow: hidden; }
.sugerencias button { display: grid; justify-items: start; width: 100%; text-align: left; border: 0; border-radius: 0; border-bottom: 1px solid var(--perla-suave); padding: 9px 12px; background: none; font-weight: 400; }
.sugerencias button:hover { background: var(--cobalto-suave); }
.sugerencias .tenue { font-size: 0.78rem; }

/* Ajustes e historial */
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li { display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--perla-suave); align-items: center; }
.linea-tiempo li:last-child { border-bottom: 0; }
.linea-tiempo .cuando { font-size: 0.8rem; color: var(--pizarra); font-weight: 700; }
.linea-tiempo .derecha button { margin-top: 4px; }
.flecha-precio { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }

/* Gestión masiva */
.pasos { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.paso { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--perla-suave); color: var(--pizarra); font-weight: 700; font-size: 0.88rem; }
.paso i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--hoja); font-size: 0.78rem; }
.paso.activo { background: var(--cobalto); color: #fff; } .paso.activo i { color: var(--cobalto); }
.paso.hecho { background: var(--menta-suave); color: var(--menta-texto); }
.opciones-accion { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.opcion-accion { border: 1.5px solid var(--perla); border-radius: 14px; padding: 14px; text-align: left; display: grid; gap: 4px; background: var(--hoja); font-weight: 400; align-content: start; }
.opcion-accion b { font-size: 0.95rem; }
.opcion-accion.elegida { border-color: var(--cobalto); background: var(--cobalto-suave); box-shadow: 0 0 0 3px rgba(43, 75, 255, 0.12); }

/* Tarjetas (depósitos, listas, categorías) */
.tarjeta { background: var(--hoja); border: 1px solid var(--perla); border-radius: 16px; padding: 16px; box-shadow: var(--sombra); display: grid; gap: 10px; align-content: start; min-width: 0; }
.tarjeta.apagada { opacity: 0.6; }
.tarjeta header { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tarjeta header > div { min-width: 0; }
.tarjeta header h2 { margin: 0; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; flex: none; }
.tarjeta .filas div { display: flex; justify-content: space-between; gap: 8px; font-size: 0.88rem; padding: 4px 0; }
.tarjeta .filas b { font-variant-numeric: tabular-nums; text-align: right; }
.tarjeta.nueva { border-style: dashed; place-items: center; color: var(--cobalto); font-weight: 800; cursor: pointer; min-height: 150px; background: var(--cobalto-suave); font-size: 1rem; }
.chips-atrib { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-atrib > span { padding: 4px 10px; border-radius: 999px; background: var(--perla-suave); font-size: 0.82rem; font-weight: 700; }
.familia { padding: 12px 0; border-bottom: 1px solid var(--perla-suave); display: grid; gap: 8px; justify-items: start; }
.variantes { display: flex; gap: 6px; flex-wrap: wrap; }
.variantes span { border: 1px solid var(--perla); border-radius: 10px; padding: 6px 10px; font-size: 0.82rem; font-weight: 700; }
.variantes span small { display: block; color: var(--pizarra); font-weight: 600; }

@media (max-width: 1000px) { .grilla-2, .grilla-etiquetas { grid-template-columns: 1fr; } .grilla-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .kpis { grid-template-columns: 1fr 1fr; } .grilla-3 { grid-template-columns: 1fr; }
  .salud { flex-direction: column; align-items: stretch; } .anillo { margin: 0 auto; }
  .barra-h { grid-template-columns: 84px 1fr 96px; }
  .linea-tiempo li { grid-template-columns: 1fr auto; } .linea-tiempo .cuando { grid-column: 1 / -1; }
  .mini-grilla { grid-template-columns: 1fr 1fr; }
  .cajon .campos, .grilla-form .dos { grid-template-columns: 1fr; }
  .movimientos li { grid-template-columns: 1fr auto; } .movimientos li .tenue { grid-column: 1 / -1; }
  .grupo-pedido > header .acciones { margin-left: 0; }
}
@media print {
  body.imprimiendo-etiquetas * { visibility: hidden !important; }
  body.imprimiendo-etiquetas #imprimir, body.imprimiendo-etiquetas #imprimir * { visibility: visible !important; }
  body.imprimiendo-etiquetas #imprimir { position: absolute; inset: 0; gap: 6px; }
  body.imprimiendo-etiquetas .etiqueta-gondola { border: 1px solid #999; }
  body.imprimiendo-etiquetas #imprimir .quitar-etq { display: none !important; }
}

/* ---- Menú ⋯ de cada producto (favorito, archivar, eliminar) ---- */
.col-menu { width: 44px; padding-left: 0 !important; padding-right: 8px !important; text-align: right; }
.menu-puntos {
  width: 32px; height: 32px; padding: 0; border-radius: 8px; border-color: transparent; background: none;
  display: inline-grid; place-items: center; color: var(--pizarra);
  opacity: 0; transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.menu-puntos svg { width: 18px; height: 18px; }
tr:hover .menu-puntos, tr:focus-within .menu-puntos, tr.menu-abierto .menu-puntos, .menu-puntos:focus-visible { opacity: 1; }
.menu-puntos:hover, tr.menu-abierto .menu-puntos { color: var(--tinta); background: var(--perla-suave); border-color: var(--perla); }
/* En pantallas táctiles no hay "pasar el mouse": los ⋯ se ven siempre, más tenues */
@media (hover: none) { .menu-puntos { opacity: 0.7; } }

.menu-producto {
  position: fixed; z-index: 60; min-width: 210px; padding: 6px;
  background: var(--hoja); border: 1px solid var(--perla); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 26, 51, 0.16), 0 2px 6px rgba(20, 26, 51, 0.06);
  opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: top right;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.menu-producto.abierto { opacity: 1; transform: none; }
.menu-producto button {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 8px; background: none; text-align: left; font-weight: 600; color: var(--tinta);
}
.menu-producto button svg { width: 18px; height: 18px; flex: none; color: var(--pizarra); }
.menu-producto button:hover, .menu-producto button:focus-visible { background: var(--perla-suave); box-shadow: none; }
.menu-producto button.marcado svg { color: var(--ambar); fill: var(--ambar); }
.menu-producto button.peligro, .menu-producto button.peligro svg { color: var(--error); }
.menu-producto button.peligro:hover, .menu-producto button.peligro:focus-visible { background: var(--error-suave); }
.menu-producto hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--perla); }
:root[data-tema='oscuro'] .menu-producto { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }

.estrella { color: var(--ambar); margin-right: 6px; font-size: 0.95em; }
tr.archivado td:not(.col-menu) { opacity: 0.6; }
tr.saliendo { opacity: 0; transform: translateX(12px); transition: opacity 0.25s ease, transform 0.25s ease; }

.no-preguntar { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 600; cursor: pointer; }
.no-preguntar input { width: 16px; height: 16px; accent-color: var(--cobalto); }
.nota-sin-preguntar { margin: 10px 16px 0; font-size: 0.85rem; }
button.enlace { border: 0; padding: 0; background: none; color: var(--cobalto); font-weight: 600; font-size: inherit; }
button.enlace:hover { text-decoration: underline; background: none; }
tr.no-compro td.col-menu { opacity: 1; text-decoration: none; }

/* ---- Selección de varios productos ---- */
.col-elegir { width: 40px; padding-right: 0 !important; cursor: default; }
.col-elegir input { width: 17px; height: 17px; margin: 0; accent-color: var(--cobalto); cursor: pointer; vertical-align: middle; }
tbody tr.elegida, tbody tr.elegida:hover { background: var(--cobalto-suave); }
.barra-seleccion {
  position: sticky; top: 0; z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 0 12px 10px; padding: 8px 10px 8px 14px; border-radius: 12px;
  background: var(--cobalto-suave); border: 1px solid var(--cobalto);
  animation: barra-entra 0.16s ease;
}
.barra-seleccion[hidden], .barra-seleccion [hidden] { display: none; }
.barra-seleccion > b { color: var(--cobalto-hondo); }
.barra-seleccion .acciones { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.barra-seleccion button.chico { display: inline-flex; align-items: center; gap: 6px; background: var(--hoja); }
.barra-seleccion button svg { width: 16px; height: 16px; }
.barra-seleccion button.marcado svg { color: var(--ambar); fill: var(--ambar); }
.lista-a-eliminar { margin: 0 0 12px; padding-left: 18px; }
.lista-a-eliminar li { margin: 2px 0; }
@keyframes barra-entra { from { opacity: 0; transform: translateY(-4px); } }

/* ---- Interruptor deslizable (simulador de márgenes: sin IVA / con IVA) ---- */
.interruptor-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; font-weight: 700; }
.interruptor { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--perla-suave); border: 1px solid var(--perla); min-width: 220px; }
.interruptor::before {
  content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
  background: var(--cobalto); box-shadow: 0 2px 8px rgba(43, 75, 255, 0.35); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.interruptor[data-valor='con']::before { transform: translateX(100%); }
.interruptor button { position: relative; z-index: 1; border: 0; background: none; padding: 8px 16px; border-radius: 999px; font-weight: 800; color: var(--pizarra); transition: color 0.2s; }
.interruptor button:hover { background: none; color: var(--tinta); }
.interruptor button[aria-checked='true'], .interruptor button[aria-checked='true']:hover { color: #fff; }
.kpi small[id] { display: block; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .interruptor::before { transition: none; } }

/* ---- Editor de margen por marca y por producto (Inventario > Márgenes) ---- */
.editor-margenes { margin-bottom: 18px; }
.cabeza-editor { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.cabeza-editor p { margin: 4px 0 0; }
.filtros-editor { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.filtros-editor input[type=search] { flex: 1 1 240px; }
.filtros-editor select { flex: 0 1 220px; }
.lista-margenes { list-style: none; margin: 0; padding: 0; }
.fila-margen {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto 118px; align-items: center; gap: 6px 14px;
  padding: 10px 6px; border-bottom: 1px solid var(--perla-suave); border-radius: 10px; transition: background 0.3s ease;
}
.fila-margen:last-child { border-bottom: 0; }
/* Títulos de la lista: Marca/Producto a la izquierda, Margen sobre la casilla */
.fila-margen.cabecera-margenes { padding-top: 4px; padding-bottom: 8px; font-size: 0.78rem; font-weight: 700; color: var(--pizarra); text-transform: uppercase; letter-spacing: 0.04em; }
.cabecera-margenes span:first-child { grid-column: 1 / -2; }
.cabecera-margenes span:last-child { grid-column: -2 / -1; text-align: center; }
.fila-margen:not([data-marca]) { grid-template-columns: minmax(0, 1fr) auto 118px; }
.fila-margen .quien { display: grid; min-width: 0; }
.fila-margen .quien b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-margen .quien span { font-size: 0.82rem; }
.fila-margen .mini { width: 64px; height: 40px; }
.fila-margen .mini img { max-width: 56px; max-height: 30px; }
.estado-margen { display: grid; justify-items: end; text-align: right; font-size: 0.82rem; }
.estado-margen .venta { font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.casilla-margen input { width: 100%; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; padding: 8px 4px 8px 10px; }
.casilla-margen input::placeholder { font-weight: 600; color: var(--pizarra); opacity: 0.6; }
.casilla-margen span { padding: 8px 10px; border-right: 0; border-left: 1px solid var(--perla); }
.fila-margen.guardando { opacity: 0.6; }
.fila-margen.guardado { background: var(--menta-suave); }
.fila-margen.guardado .casilla-margen { border-color: var(--menta); }
@media (max-width: 560px) {
  .fila-margen, .fila-margen:not([data-marca]) { grid-template-columns: minmax(0, 1fr) 104px; }
  .fila-margen .mini { display: none; }
  .fila-margen .quien b { white-space: normal; }
  .estado-margen { grid-column: 1; grid-row: 2; justify-items: start; text-align: left; }
  .fila-margen .casilla-margen { grid-column: 2; grid-row: 1 / span 2; }
}

/* Costo de compra en la tabla de Productos: más tenue que el precio de venta */
.costo-compra { color: var(--pizarra); }
.costo-compra .tenue { font-size: 0.74rem; }

/* ---- Llave "Costo: Sin IVA / Con IVA" (Productos y Listas de precios) ---- */
.fila-llaves { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.llave-iva .segmentos button { padding: 8px 14px; }
.herramientas .llave-iva { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.herramientas .llave-iva .etiqueta-campo { margin: 0; }
.costo-compra .tenue { font-size: 0.72rem; white-space: nowrap; }

/* ---- Pestañas Todos / Favoritos / Archivados en Productos ---- */
.pestanas-lista { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px 0; }
.pestanas-lista button { display: inline-flex; align-items: center; gap: 8px; border-radius: 99px; padding: 6px 14px; background: var(--hoja); color: var(--pizarra); }
.pestanas-lista button:hover { color: var(--tinta); }
.pestanas-lista button.activo { background: var(--cobalto-suave); border-color: var(--cobalto); color: var(--cobalto); }
.pestanas-lista .cuenta { font-size: 0.75rem; font-weight: 800; padding: 0 7px; border-radius: 99px; background: var(--perla-suave); color: var(--pizarra); font-variant-numeric: tabular-nums; }
.pestanas-lista button.activo .cuenta { background: var(--cobalto); color: #fff; }
/* Arrastrando un producto: las pestañas que lo pueden recibir se marcan con borde punteado,
   cada una con su color de siempre (Todos azul, Favoritos ámbar, Archivados gris, como el tinte de la pantalla) */
/* Mismos colores que la píldora de cada pestaña (deslizador.css) */
.pestanas-lista button { --color-pestana: var(--cobalto); --texto-pestana: #fff; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.pestanas-lista button[data-lista='favoritos'] { --color-pestana: #f5b82e; --texto-pestana: #3d2a00; }
.pestanas-lista button[data-lista='archivados'] { --color-pestana: #7a8296; }
:root[data-tema='oscuro'] .pestanas-lista button[data-lista='favoritos'] { --color-pestana: #f2b53a; --texto-pestana: #2a1d00; }
:root[data-tema='oscuro'] .pestanas-lista button[data-lista='archivados'] { --color-pestana: #5d6478; }
.pestanas-lista.recibiendo > button.acepta.acepta { border-style: dashed; border-color: var(--color-pestana); color: var(--color-pestana); }
.pestanas-lista.recibiendo > button:not(.acepta) { opacity: 0.45; }
.pestanas-lista.recibiendo > button.destino.destino { background: var(--color-pestana); border-style: solid; border-color: var(--color-pestana); color: var(--texto-pestana); transform: scale(1.06); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-pestana) 25%, transparent); }
.pestanas-lista.recibiendo > button.destino.destino .cuenta { background: color-mix(in srgb, var(--texto-pestana) 18%, transparent); color: var(--texto-pestana); }
tr.arrastrando { opacity: 0.4; }
.fantasma-producto {
  position: fixed; top: -200px; left: 0; max-width: 280px; padding: 8px 14px; border-radius: 99px;
  background: var(--cobalto); color: #fff; font-weight: 700; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aviso-base { margin: 14px 16px 0; padding: 10px 14px; border-radius: 12px; background: var(--ambar-suave); color: var(--ambar-texto); font-size: 0.88rem; max-width: none; }
.aviso-base code { font-size: 0.82rem; }

/* Explicación de la llave "margen con o sin IVA" del negocio: los dos textos ocupan el mismo lugar (con la
   altura del más largo) y se cruzan con un fundido, así la llave no se mueve al cambiar */
.textos-negocio { display: grid; margin: 2px 0 0; }
.textos-negocio > span { grid-area: 1 / 1; transition: opacity 0.25s ease, visibility 0.25s; }
.textos-negocio[data-ver='sin'] > [data-modo='con'], .textos-negocio[data-ver='con'] > [data-modo='sin'] { opacity: 0; visibility: hidden; }

/* Recibir mercadería: foto del remito, lectura y revisión de lo que entra al stock */
.recibir .camara-remito { display: grid; place-items: center; text-align: center; gap: 8px; padding: 40px 18px; border: 2px dashed #c9d2f5; border-radius: 16px; background: var(--niebla); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.recibir .camara-remito:hover, .recibir .camara-remito:focus-visible { border-color: var(--cobalto); background: var(--cobalto-suave); outline: none; }
.recibir .camara-remito b { font-size: 1.08rem; }
.recibir .camara-remito .tenue { font-size: 0.88rem; line-height: 1.5; }
.ico-camara { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: var(--cobalto); color: #fff; box-shadow: 0 10px 24px rgba(43, 75, 255, 0.3); }
.rc-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.rc-enviar { margin-top: 14px; justify-content: flex-end; }
.rc-enviar[hidden] { display: none; }
.fotos-remito { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.fotos-remito li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--perla); border-radius: 12px; }
.fotos-remito li > span:nth-child(2) { flex: 1; min-width: 0; font-weight: 700; }
.fotos-remito li .tenue { display: block; font-size: 0.78rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.miniatura { width: 42px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--perla-suave); display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; color: var(--pizarra); flex: none; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.entradas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.entradas a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--perla); border-radius: 12px; color: var(--tinta); font-size: 0.9rem; }
.entradas a:hover { text-decoration: none; border-color: #cdd6ff; }
.entradas a > span:first-child { min-width: 0; }
.entradas .tenue { display: block; font-size: 0.8rem; }
.entradas .etiqueta { flex: none; }

.leyendo-remito { text-align: center; padding: 40px 18px; }
.hoja-escaneo { width: 170px; height: 220px; margin: 0 auto 20px; border-radius: 12px; background: var(--hoja); border: 1px solid var(--perla); position: relative; overflow: hidden; box-shadow: var(--sombra); padding: 18px 14px; }
.hoja-escaneo i { display: block; height: 7px; border-radius: 4px; background: var(--perla); margin-bottom: 9px; width: 92%; }
.hoja-escaneo i:nth-child(odd) { width: 74%; } .hoja-escaneo i:first-child { width: 50%; height: 12px; }
.hoja-escaneo::after { content: ''; position: absolute; left: 0; right: 0; height: 42px; top: -42px; background: linear-gradient(transparent, rgba(43, 75, 255, 0.28), transparent); animation: escanear-remito 1.6s linear infinite; }
@keyframes escanear-remito { to { top: 100%; } }
.etapas-remito { list-style: none; padding: 0; margin: 14px auto 18px; max-width: 280px; text-align: left; display: grid; gap: 8px; color: var(--pizarra); }
.etapas-remito li::before { content: '○ '; } .etapas-remito li.hecha { color: var(--menta-texto); font-weight: 700; } .etapas-remito li.hecha::before { content: '✓ '; }

.cabeza-remito { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cabeza-remito h2 { margin: 0 0 2px; }
.rc-selectores { display: flex; gap: 10px; flex-wrap: wrap; }
.rc-selectores > div { min-width: 150px; }
.rc-selectores label { font-size: 0.78rem; }
.tabla-remito td { vertical-align: middle; }
.tabla-remito tr.sin-producto td { background: var(--ambar-suave); }
.tabla-remito tr.excluida td { opacity: 0.55; }
.elegir-producto { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.elegir-producto.discreto { margin-top: 2px; }
.elegir-producto .enlace { border: 0; background: none; padding: 0; color: var(--cobalto); font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.paso-cant { display: inline-flex; align-items: center; border: 1px solid var(--perla); border-radius: 10px; overflow: hidden; background: var(--hoja); }
.paso-cant button { border: 0; border-radius: 0; background: var(--perla-suave); width: 30px; height: 34px; padding: 0; font-weight: 800; color: var(--pizarra); box-shadow: none; }
.paso-cant button:hover { color: var(--cobalto); }
.paso-cant input { width: 54px; border: 0; border-radius: 0; text-align: center; font-weight: 800; padding: 6px 2px; background: transparent; }
.no-llego { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--ambar-suave); color: var(--ambar-texto); font-size: 0.88rem; }
.pie-remito { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.listo-remito { text-align: center; padding: 44px 18px; }
.listo-remito h2 { margin: 0 0 6px; }
.tilde-remito { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 16px; background: var(--menta); color: #fff; display: grid; place-items: center; font-size: 2.1rem; box-shadow: 0 10px 26px rgba(20, 199, 154, 0.35); animation: latir-remito 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes latir-remito { from { transform: scale(0.4); opacity: 0; } }
.tabla-remito td:first-child { min-width: 220px; }
@media (max-width: 760px) { .rc-campos { grid-template-columns: 1fr; } }
@media (max-width: 1100px) {
  .tabla-remito td:first-child { min-width: 0; }
  .tabla-remito tr { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .tabla-remito td[data-t='Producto'], .tabla-remito td:last-child { grid-column: 1 / -1; }
  .tabla-remito thead { display: none; }
  .tabla-remito, .tabla-remito tbody, .tabla-remito tr, .tabla-remito td { display: block; }
  .tabla-remito tr { padding: 10px 0; border-bottom: 1px solid var(--perla); }
  .tabla-remito td { border: 0; padding: 3px 0; text-align: left; }
  .tabla-remito td[data-t]:not([data-t='Producto'])::before { content: attr(data-t) ': '; color: var(--pizarra); font-size: 0.8rem; font-weight: 600; }
  .rc-selectores > div { flex: 1 1 140px; }
  .tabla-remito tr.sin-producto { background: var(--ambar-suave); border-radius: 12px; padding: 10px 12px; }
  .tabla-remito tr.sin-producto td { background: none; }
}
@media (prefers-reduced-motion: reduce) { .hoja-escaneo::after, .tilde-remito { animation: none; } }

/* ---- Ficha del producto: datos editables y costo según la llave de IVA ---- */
.cajon .campos .ancho { grid-column: 1 / -1; }
.etiqueta-form { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--tinta); }
#ficha-datos .segmentos button { padding: 8px 14px; }
#ficha-datos .acciones { margin-top: 10px; }

/* ---- Ventana Editar marcas ---- */
.lista-marcas { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.lista-marcas li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--perla); border-radius: 12px; }
.lista-marcas .mini { width: 64px; height: 40px; }
.lista-marcas .mini img { max-width: 56px; max-height: 30px; }
.lista-marcas .quien { display: grid; gap: 4px; min-width: 0; }
.lista-marcas .quien span { font-size: 0.8rem; }
.lista-marcas input { padding: 8px 10px; font-weight: 700; }
@media (max-width: 560px) { .lista-marcas li { grid-template-columns: minmax(0, 1fr) auto; } .lista-marcas .mini { display: none; } }

/* Código de barras nuevo: lo que se sabe del producto (nombre y foto de Open Food Facts) */
.producto-sabido { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--perla); border-radius: var(--radio); background: var(--niebla); color: var(--tinta); margin-bottom: 4px; }
.producto-sabido img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: #fff; flex: none; }

/* Escanear productos: lo último que se leyó y la lista de códigos por completar */
.escaner-leido { position: absolute; left: 50%; bottom: 14px; white-space: nowrap; transform: translateX(-50%); z-index: 3; background: var(--menta); color: #fff; padding: 6px 14px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.esc-ultimos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.esc-ultimos li { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--radio-chico); background: var(--niebla); }
.esc-ultimos li.ok { background: var(--menta-suave); }
.esc-ultimos li.nuevo { background: var(--ambar-suave); }
.esc-ultimos .codigo, .esc-pendientes .codigo { font-variant-numeric: tabular-nums; font-weight: 700; }
.esc-pendientes { list-style: none; margin: 0; padding: 0; display: grid; }
.esc-pendientes li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--perla); }
.esc-pendientes li:first-child { border-top: 0; }
.esc-foto { width: 52px; height: 52px; border-radius: var(--radio-chico); background: var(--niebla); display: grid; place-items: center; color: var(--pizarra); overflow: hidden; }
.esc-foto img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.esc-foto svg { width: 26px; height: 26px; }
.esc-datos { display: grid; gap: 4px; min-width: 0; }
.esc-acciones { display: flex; gap: 6px; }
@media (max-width: 600px) { .esc-pendientes li { grid-template-columns: 44px minmax(0, 1fr); } .esc-foto { width: 44px; height: 44px; } .esc-acciones { grid-column: 2; } }

/* Foto del producto en "Nuevo producto" (la IA completa los datos), en la ficha y en el POS */
.foto-producto { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px dashed var(--perla); border-radius: var(--radio); background: var(--niebla); }
.foto-producto-vista { width: 72px; height: 72px; flex: none; border-radius: var(--radio-chico); background: var(--hoja); display: grid; place-items: center; color: var(--pizarra); overflow: hidden; }
.foto-producto-vista img { width: 100%; height: 100%; object-fit: cover; }
.foto-producto-vista svg { width: 30px; height: 30px; }
.foto-producto-texto { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.foto-producto.leyendo .foto-producto-vista { animation: latido-foto 1.2s ease-in-out infinite; }
@keyframes latido-foto { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .foto-producto.leyendo .foto-producto-vista { animation: none; } }
.ficha-foto { width: 44px; height: 44px; border-radius: var(--radio-chico); object-fit: cover; flex: none; background: #fff; }
.pos-foto { float: right; width: 88px; height: 88px; object-fit: contain; border-radius: var(--radio-chico); background: #fff; margin: 0 0 8px 12px; }
.lista-foto { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; background: #fff; float: left; margin: 0 10px 0 0; border: 1px solid var(--perla); }
.mini-grilla small { display: block; font-size: 0.7rem; font-variant-numeric: tabular-nums; }

/* ---- Margen de ganancia junto al margen sobre el costo (Márgenes) ---- */
.casilla-con-ganancia { display: grid; gap: 2px; }
.ganancia-equiv { font-size: 0.72rem; color: var(--menta-texto); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; min-height: 1em; }
.kpis.dos-kpis .kpi:nth-child(3) { grid-column: 1 / -1; }
.mini-grilla small { white-space: nowrap; }
/* Que las dos columnas de Márgenes no empujen la página: la tabla se desplaza dentro de su recuadro */
#editor-margenes ~ .grilla-2 .tabla-envoltura { overflow-x: auto; }
#editor-margenes ~ .grilla-2 .tabla-envoltura th { white-space: normal; }
#editor-margenes ~ .grilla-2 .tabla-envoltura th, #editor-margenes ~ .grilla-2 .tabla-envoltura td { padding-left: 8px; padding-right: 8px; }
#editor-margenes ~ .grilla-2 .tabla-envoltura .ganancia-equiv { display: block; }
#editor-margenes ~ .grilla-2 .tabla-envoltura table { font-size: 0.86rem; }
#editor-margenes ~ .grilla-2 > * { min-width: 0; }
@media (min-width: 1001px) { #editor-margenes ~ .grilla-2 { grid-template-columns: minmax(min-content, 1.3fr) minmax(0, 1fr); } }

/* Cámara: recuadro donde va el código, botones (2x, linterna, cambiar cámara), datos de la cámara y tocar para enfocar */
.escaner.con-marco { cursor: crosshair; }
.camara-marco {
  position: absolute; left: 8%; right: 8%; top: 25%; bottom: 25%; z-index: 1; pointer-events: none;
  border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(8, 11, 22, 0.42); border: 2px solid rgba(255, 255, 255, 0.85);
}
.camara-botones { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 70%; }
.camara-botones button {
  padding: 6px 11px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: #fff; box-shadow: none;
  background: rgba(10, 14, 28, 0.62); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(6px);
}
.camara-botones button.activo { background: #fff; color: #0d1120; border-color: #fff; }
.camara-info {
  position: absolute; left: 10px; top: 12px; z-index: 3; max-width: 45%; text-align: left; font-size: 0.68rem; font-weight: 600; line-height: 1.3;
  color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); overflow-wrap: anywhere;
}
.camara-enfoque {
  position: absolute; z-index: 3; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none;
  border: 2px solid #ffd54a; border-radius: 12px; animation: camara-enfoca 0.9s ease forwards;
}
@keyframes camara-enfoca { from { transform: scale(1.5); opacity: 0; } 25% { transform: scale(1); opacity: 1; } to { opacity: 0; } }
.escaner.con-marco::after { left: 12%; right: 12%; }
@keyframes barrido { from { top: 27%; } to { top: 73%; } }
.camara-botones button[hidden], .camara-info[hidden] { display: none; }

/* ---- Imagen grande en la ficha del producto ---- */
.ficha-imagen { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 16px; }
.fi-foto { position: relative; width: 168px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--perla); display: grid; place-items: center; }
.fi-foto img { width: 100%; height: 100%; object-fit: contain; }
.fi-foto.vacia { background: var(--niebla); border-style: dashed; }
.fi-vacia { color: var(--pizarra); font-size: 0.85rem; font-weight: 600; text-align: center; padding: 10px; display: grid; justify-items: center; gap: 8px; }
.fi-chip { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(20, 26, 51, 0.72); color: #fff; font-size: 0.68rem; font-weight: 700; text-align: center; }
.fi-lado { display: grid; gap: 6px; min-width: 0; }
.fi-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fi-gira { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--cobalto); border-right-color: transparent; display: inline-block; animation: fi-gira 0.8s linear infinite; vertical-align: middle; }
@keyframes fi-gira { to { transform: rotate(360deg); } }
.fi-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.fi-opciones > p { grid-column: 1 / -1; margin: 0; }
.fi-opcion { display: grid; gap: 4px; padding: 6px; border-radius: 12px; border: 1px solid var(--perla); background: #fff; font-weight: 400; }
.fi-opcion:hover { border-color: var(--cobalto); box-shadow: 0 0 0 3px rgba(43, 75, 255, 0.15); }
.fi-opcion img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: #fff; }
.fi-opcion span { font-size: 0.72rem; color: var(--pizarra); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .ficha-imagen { grid-template-columns: 120px minmax(0, 1fr); } .fi-foto { width: 120px; } }
.fi-chip.lista { background: rgba(18, 163, 126, 0.85); }

/* Lupa: la foto del producto, más grande al costado (zoom-foto.js) */
.zoom-foto {
  position: fixed; z-index: 3000; width: 340px; height: 340px; padding: 10px; pointer-events: none;
  background: #fff; border: 1px solid var(--perla); border-radius: 18px; box-shadow: 0 24px 60px -12px rgba(20, 26, 51, 0.35);
  opacity: 0; transform: translateX(-8px) scale(0.96); transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.zoom-foto.desde-izquierda { transform: translateX(8px) scale(0.96); }
.zoom-foto.visible { opacity: 1; transform: none; }
.zoom-foto img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.ficha-foto, .fi-foto img { cursor: zoom-in; }
@media (prefers-reduced-motion: reduce) { .zoom-foto { transition: none; } }