/* Catálogo (núcleo): campo de foto del producto e importación desde Excel. Solo tokens de la base. */
.cat-foto { display: grid; gap: 6px; }
.cat-foto-zona { position: relative; display: grid; place-items: center; gap: 6px; aspect-ratio: 4 / 3; overflow: hidden; border: 2px dashed var(--linea-2); border-radius: var(--r2);
  background: var(--capa-2); color: var(--tinta-2); font-size: 13.5px; font-weight: 600; text-align: center; cursor: pointer; transition: border-color var(--t); }
.cat-foto-zona:hover, .cat-foto-zona:has(input:focus-visible) { border-color: var(--acento); }
.cat-foto-zona > .ico { width: 32px; height: 32px; }
/* Con foto: el producto sobre gris claro, igual que en las tarjetas (las fotos de fondo blanco se funden con el gris) */
.cat-foto-zona:has(img) { border-style: solid; background: var(--fondo-foto, #ececec); }
.cat-foto-zona img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cat-foto-zona input, .cat-elegir input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cat-foto .link { justify-self: start; }
.cat-imp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }   /* con muchas columnas, la tabla se desliza y la ventana no crece */
.cat-imp h2 { display: flex; align-items: center; gap: 10px; }
.cat-elegir { position: relative; cursor: pointer; }
.modal-caja.ancha.cat-ancha { width: min(980px, 100%); }
.cat-tabla { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--r); }
.cat-tabla table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cat-tabla th { position: sticky; top: 0; height: 34px; padding: 0 10px; background: var(--capa-2); color: var(--tinta-3); font-size: 12px; text-align: left; white-space: nowrap; }
.cat-tabla td { height: 36px; padding: 0 10px; border-top: 1px solid var(--linea); white-space: nowrap; }
.cat-tabla td .ico { color: var(--bien); }
.cat-tabla tr.mal td .ico { color: var(--alerta, var(--acento)); }
.cat-tabla tr.mal-txt td { height: auto; padding-bottom: 8px; border-top: 0; color: var(--alerta, var(--acento)); font-weight: 600; white-space: normal; }
/* Escáner de códigos (escaner.js): la cámara con una mira al centro */
.escaner { position: relative; overflow: hidden; margin: 12px 0; border-radius: var(--r2); background: #000; aspect-ratio: 4 / 3; }
.escaner video { width: 100%; height: 100%; object-fit: cover; }
.escaner-mira { position: absolute; inset: 30% 12%; border: 3px solid var(--acento); border-radius: var(--r2); box-shadow: 0 0 0 999px rgb(0 0 0 / .35); }
.escaner-estado { min-height: 20px; font-weight: 600; color: var(--acento-texto); }
/* Editor de categorías (categorias.js) */
.cated-lista { display: grid; gap: 6px; margin: 14px 0 10px; }
.cated-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) 96px auto; align-items: center; gap: 10px; }
.cated-fila input, .cated-nueva input { height: 40px; padding: 0 12px; border: 1px solid var(--linea); border-bottom-color: var(--linea-2); border-radius: var(--r); background: var(--capa); color: var(--tinta); font: inherit; }
.cated-orden { display: flex; gap: 2px; }
.modal-caja .cated-orden .redondo, .cated-orden .redondo { display: grid; min-width: 32px; min-height: 32px; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--linea); border-radius: var(--r); background: var(--capa); color: var(--tinta); }
.cated-orden .redondo:disabled { opacity: .35; }
.cated-n { color: var(--tinta-3); font-size: 13px; text-align: right; }
.cated-pasan { margin-top: 8px; }
.cated-nueva { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; }