:root {
  --tinta: #1f1626;
  --tinta-suave: #7a6f82;
  --hueso: #fdf8fb;
  --hueso-card: #ffffff;
  --linea: #f1dde9;

  --fucsia: #8b1550;
  --fucsia-alto: #6d0f3f;
  --fucsia-suave: #fbeaf2;
  --rosa: #c9487f;

  --original: #b23a55;
  --original-suave: #fbe9ee;
  --encontrado: #6a3b8f;
  --encontrado-suave: #f1e9f6;

  --ok: #1f8a5f;
  --ok-suave: #e5f5ee;
  --no: #d64545;
  --no-suave: #fdeaea;
  --azul-marca: #1c3d6b;

  /* Sección "Modificación de productos" (precio de oferta, etc.) — a
     propósito con otra identidad de color (turquesa oscuro) para que se
     distinga de un vistazo del resto de la app (scraping/publicación),
     que es en fucsia. */
  --turquesa: #0f6b64;
  --turquesa-alto: #0a4844;
  --turquesa-suave: #e2f3f1;
  --gradiente-turquesa: linear-gradient(120deg, #138d83 0%, #0f6b64 55%, #0a4844 100%);

  --gradiente: linear-gradient(120deg, #b23a63 0%, #8b1550 60%, #6d0f3f 100%);
  --radio: 16px;
  --radio-chico: 10px;
  --sombra: 0 14px 34px -14px rgba(139, 21, 80, .18);
  --sombra-chica: 0 2px 10px rgba(139, 21, 80, .07);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Exo", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--hueso);
  color: var(--tinta);
}

h1, h2, .marca strong, .marca-login span, .rotulo-etapa, .etiqueta-bloque {
  font-family: "Exo", sans-serif;
}

.hidden { display: none !important; }

/* --- Login --- */
.pantalla-login {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  background: var(--hueso);
}

.fondo-login {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 15% 20%, rgba(201, 72, 127, .28), transparent 45%),
    radial-gradient(circle at 85% 25%, rgba(139, 21, 80, .22), transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(106, 59, 143, .18), transparent 55%);
  filter: blur(10px);
}

.tarjeta-login {
  position: relative;
  background: #fff;
  border: 1px solid var(--linea);
  padding: 40px;
  border-radius: 20px;
  box-shadow: var(--sombra);
  width: 100%;
  max-width: 380px;
  text-align: center;
  color: var(--tinta);
}

.marca-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 19px;
  font-weight: 700;
  color: var(--fucsia-alto);
}

.marca-icono { width: 32px; height: 32px; border-radius: 9px; }

.subtitulo { color: var(--tinta-suave); margin: 0 0 22px; font-size: 14px; }

.tarjeta-login input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  font-size: 15px;
  margin-bottom: 14px;
  background: var(--hueso);
  color: var(--tinta);
  font-family: inherit;
}
.tarjeta-login input::placeholder { color: #b6a7bd; }
.tarjeta-login input:focus { outline: none; border-color: var(--fucsia); background: #fff; }

.campo-password { position: relative; }
.campo-password input { padding-right: 44px; }
.btn-ver-password {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(calc(-50% - 7px));
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--tinta-suave);
  display: flex;
}
.btn-ver-password:hover { color: var(--fucsia); }

.tarjeta-login .btn-entrar {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 999px;
  background: var(--gradiente);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: filter .15s, transform .15s;
}
.tarjeta-login .btn-entrar:hover { filter: brightness(1.08); transform: translateY(-1px); }
.error { color: var(--no); font-size: 13px; margin-top: 10px; }

/* --- Layout general --- */
.app {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

/* --- Barra lateral --- */
.barra-lateral {
  background: #fff;
  color: var(--tinta);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--linea);
}

.marca { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; font-size: 14px; }
.marca-texto strong { font-size: 15px; color: var(--fucsia-alto); }
.marca-texto span { color: var(--tinta-suave); font-size: 12px; }

.nav-etapas { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.nav-titulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #b6a7bd;
  padding: 0 10px;
  margin-bottom: 4px;
}

/* Grupos desplegables del menú lateral: encabezado oscuro (identidad de
   color de la sección) que despliega/colapsa un contenido claro con los
   accesos de esa sección. */
.nav-grupo-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radio-chico);
  background: var(--fucsia-alto);
  color: #fff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 8px -2px rgba(109, 15, 63, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.nav-grupo-header:hover { filter: brightness(1.1); }
.nav-grupo-header:active { box-shadow: 0 1px 3px -1px rgba(109, 15, 63, .45), inset 0 1px 0 rgba(255, 255, 255, .12); }
.nav-grupo-flecha { font-size: 10px; transition: transform .15s ease; }
.nav-grupo:not(.nav-grupo-abierto) .nav-grupo-flecha { transform: rotate(-90deg); }

.nav-grupo-contenido {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--fucsia-suave);
  border-radius: var(--radio-chico);
  padding: 8px;
  margin-top: 6px;
}
.nav-grupo:not(.nav-grupo-abierto) .nav-grupo-contenido { display: none; }

.nav-grupo-turquesa .nav-grupo-header {
  background: var(--turquesa-alto);
  box-shadow: 0 3px 8px -2px rgba(10, 72, 68, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.nav-grupo-turquesa .nav-grupo-header:active { box-shadow: 0 1px 3px -1px rgba(10, 72, 68, .45), inset 0 1px 0 rgba(255, 255, 255, .12); }
.nav-grupo-turquesa .nav-grupo-contenido { background: var(--turquesa-suave); }

.etapa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: var(--radio-chico);
  border: 1px solid transparent;
  background: transparent;
  color: var(--tinta-suave);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.etapa-num {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--fucsia-suave);
  color: var(--fucsia);
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(31, 22, 38, .08), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.etapa-num-chico { font-size: 10px; }

.etapa-info { display: flex; flex-direction: column; line-height: 1.25; flex: 1; }
.etapa-nombre { font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.etapa-detalle { font-size: 11.5px; color: var(--tinta-suave); }

/* Cuántos productos hay parados en cada etapa ahora mismo. */
.etapa-contador {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--linea);
  color: var(--tinta-suave);
}

.etapa-activa {
  background: var(--fucsia-suave);
  border-color: var(--linea);
}
.etapa-activa .etapa-num { background: var(--gradiente); color: #fff; box-shadow: 0 3px 8px -2px rgba(109, 15, 63, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
.etapa-activa .etapa-nombre { color: var(--fucsia-alto); }
.etapa-activa .etapa-contador { background: #fff; color: var(--fucsia-alto); }

.etapa-bloqueada { opacity: .55; cursor: not-allowed; }

/* Etapas en modo de solo lectura (ver SOLO_LECTURA en app.js): se puede
   seguir entrando y viendo, así que no se atenúa como .etapa-bloqueada
   (esa usa opacidad baja + cursor not-allowed porque ahí ni se puede
   entrar) — acá se le saca el color de marca al ícono numerado y al
   nombre (activa o no), se agrega el candado, y se atenúa un poco el
   fondo cuando no está activa, para que se note de un vistazo que es de
   solo lectura sin que parezca deshabilitada del todo. */
.etapa-solo-lectura .etapa-num,
.etapa-solo-lectura.etapa-activa .etapa-num {
  background: var(--linea);
  color: var(--tinta-suave);
  box-shadow: none;
}
.etapa-solo-lectura .etapa-nombre,
.etapa-solo-lectura.etapa-activa .etapa-nombre,
.etapa-solo-lectura.etapa-turquesa.etapa-activa .etapa-nombre {
  color: var(--tinta-suave);
}
.etapa-solo-lectura .etapa-detalle { color: var(--tinta-suave); opacity: .7; }
.etapa-solo-lectura .etapa-nombre::after { content: ' 🔒'; }
.etapa-solo-lectura:not(.etapa-activa) { opacity: .72; }

/* Botones de nav de la sección "Modificación de productos" — mismo patrón
   que .etapa-activa pero en turquesa oscuro en vez de fucsia. */
.etapa-turquesa .etapa-num { background: var(--turquesa-suave); color: var(--turquesa); }
.etapa-turquesa.etapa-activa { background: var(--turquesa-suave); }
.etapa-turquesa.etapa-activa .etapa-num { background: var(--gradiente-turquesa); color: #fff; box-shadow: 0 3px 8px -2px rgba(10, 72, 68, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
.etapa-turquesa.etapa-activa .etapa-nombre { color: var(--turquesa-alto); }
.etapa-turquesa.etapa-activa .etapa-contador { background: #fff; color: var(--turquesa-alto); }

.pie-lateral { display: flex; flex-direction: column; gap: 10px; }

.cliente-actual {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--radio-chico);
  background: var(--fucsia-suave);
}
.cliente-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--fucsia); font-weight: 700; }
.cliente-label.usuario-label { margin-top: 6px; }
.cliente-nombre { font-size: 13px; color: var(--tinta); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn-salir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--hueso);
  border: 1px solid var(--linea);
  color: var(--tinta-suave);
  padding: 10px;
  border-radius: var(--radio-chico);
  cursor: pointer;
  font-size: 13.5px;
  font-family: inherit;
}
.btn-salir:hover { background: var(--fucsia-suave); color: var(--fucsia-alto); }

/* --- Contenido --- */
.contenido { padding: 30px 34px 60px; max-width: 1320px; }

/* Etapa 1 y 2 son grillas de muchas tarjetas chicas (a diferencia de
   Etapa 3 y 4, que son una tarjeta grande por fila) — ahí sí conviene
   aprovechar todo el ancho disponible en vez de quedar topeado en
   1320px: en pantallas anchas o con el zoom del navegador alejado entran
   más columnas solas, porque .lista-productos ya usa
   grid-template-columns: repeat(auto-fill, minmax(...)) más abajo. */
.contenido:has(> .panel-etapa[data-panel="scraping"]:not(.hidden)),
.contenido:has(> .panel-etapa[data-panel="coincidencias"]:not(.hidden)),
.contenido:has(> .panel-etapa[data-panel="fase2"]:not(.hidden)) {
  max-width: none;
}

.encabezado { margin-bottom: 24px; }
.rotulo-etapa {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fucsia);
  background: var(--fucsia-suave);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.titulo-etapa h1 { font-size: 25px; margin: 0 0 4px; font-weight: 700; }
.descripcion-etapa { margin: 0; color: var(--tinta-suave); font-size: 14px; }

/* Cartel de aviso/tip en amarillo clarito — reusable donde haga falta
   destacar una indicación puntual (ej. cómo quitar una oferta) sin que
   se confunda con un error (rojo). */
.aviso-amarillo {
  background: #fdf6da;
  color: #7a5f0a;
  border: 1px solid #f0e0a0;
  border-radius: var(--radio-chico);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}
.aviso-solo-lectura {
  background: var(--fucsia-suave);
  color: var(--fucsia-alto);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
}

/* --- KPIs --- */
.resumen {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.resumen .stat {
  background: linear-gradient(160deg, #ffffff, var(--fucsia-suave));
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 20px 26px;
  min-width: 170px;
  flex: 1;
  box-shadow: var(--sombra-chica);
}
.resumen .stat .num { font-size: 34px; font-weight: 800; font-family: "Exo", sans-serif; color: var(--fucsia-alto); line-height: 1.1; }
.resumen .stat .label { font-size: 13.5px; color: var(--tinta-suave); margin-top: 4px; font-weight: 500; }
.resumen .stat.stat-aprobado .num { color: var(--ok); }
.resumen .stat.stat-rechazado .num { color: var(--no); }
.resumen .stat.stat-etapa3 .num { color: var(--encontrado); }

/* Destaca los productos "acá parado" (etapa actual) y los que ya
   avanzaron a la siguiente, para que se distingan del resto de los KPIs
   de un vistazo. */
.resumen .stat.stat-actual {
  border-left: 4px solid var(--fucsia);
  background: linear-gradient(160deg, #ffffff, var(--fucsia-suave) 160%);
}
.resumen .stat.stat-etapa3 {
  border-left: 4px solid var(--encontrado);
  background: linear-gradient(160deg, #ffffff, var(--encontrado-suave) 160%);
}

.resumen .stat .sub-metrica {
  font-size: 12px;
  color: var(--tinta-suave);
  margin-top: 2px;
  font-weight: 600;
}

.controles {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filtros { display: flex; gap: 6px; flex-wrap: wrap; background: var(--hueso-card); border: 1px solid var(--linea); padding: 4px; border-radius: 24px; }

.filtro {
  background: transparent;
  border: none;
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  color: var(--tinta-suave);
  font-weight: 600;
}
.filtro.activo { background: var(--gradiente); color: #fff; }

.filtro.filtro-destacado {
  background: var(--encontrado-suave);
  color: var(--encontrado);
  font-weight: 800;
}
.filtro.filtro-destacado.activo { background: var(--encontrado); color: #fff; }

.contador-filtro { font-weight: 800; opacity: .7; }
.filtro.activo .contador-filtro,
.filtro.filtro-destacado .contador-filtro { opacity: .85; }

.campo-buscar {
  position: relative;
  display: flex;
  align-items: center;
}
.icono-buscar { position: absolute; left: 13px; color: var(--tinta-suave); pointer-events: none; }

#input-buscar,
#buscar-prepublicacion,
#buscar-publicacion {
  padding: 10px 14px 10px 36px;
  border-radius: var(--radio-chico);
  border: 1px solid var(--linea);
  background: var(--hueso-card);
  min-width: 260px;
  font-size: 14px;
  font-family: inherit;
}
#input-buscar:focus,
#buscar-prepublicacion:focus,
#buscar-publicacion:focus { outline: none; border-color: var(--fucsia); }

.input-score-fase2 {
  width: 80px;
  padding: 6px 10px;
  border-radius: var(--radio-chico);
  border: 1px solid var(--linea);
  background: var(--hueso-card);
  font-size: 13px;
  font-family: inherit;
}
.input-score-fase2:focus { outline: none; border-color: var(--fucsia); }

/* --- Lista y tarjetas --- */
.lista-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.tarjeta-producto {
  background: var(--hueso-card);
  border-radius: var(--radio);
  box-shadow: var(--sombra-chica);
  overflow: hidden;
  border: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s, transform .15s;
}
.tarjeta-producto:hover { box-shadow: var(--sombra); }
.tarjeta-producto.tarjeta-error { border-color: var(--no); transition: border-color .2s; }

.tarjeta-producto .cabecera-tarjeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linea);
}

.sku { font-size: 11px; color: var(--tinta-suave); font-weight: 700; letter-spacing: .03em; }
.sku-original { font-size: 10.5px; color: var(--tinta-suave); margin-left: 4px; }

.chips-cabecera { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.badge-url {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--fucsia-suave);
  color: var(--fucsia);
  white-space: nowrap;
}

.chip-estado {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: var(--linea);
  color: var(--tinta-suave);
}
.tarjeta-producto.estado-APROBADO .chip-estado { background: var(--ok-suave); color: var(--ok); }
.tarjeta-producto.estado-RECHAZADO .chip-estado { background: var(--no-suave); color: var(--no); }

.chip-fabricante,
.chip-score {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: var(--linea);
  color: var(--tinta-suave);
  white-space: nowrap;
}
.chip-fabricante-CORRESPONDE { background: var(--ok-suave); color: var(--ok); }
.chip-fabricante-NO_CORRESPONDE { background: var(--no-suave); color: var(--no); }
.chip-fabricante-NO_ENCONTRADO,
.chip-fabricante-ERROR_RED { background: var(--linea); color: var(--tinta-suave); }

.tarjeta-producto .imagen {
  width: 100%;
  height: 170px;
  background: var(--hueso);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tarjeta-producto .imagen img { max-width: 100%; max-height: 100%; object-fit: contain; }

.tarjeta-producto .cuerpo { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 12px; }

.comparacion { display: flex; flex-direction: column; border-radius: var(--radio-chico); overflow: hidden; border: 1px solid var(--linea); }

.bloque-comp { padding: 10px 12px; font-size: 13px; }
.bloque-comp.original { background: var(--original-suave); }
.bloque-comp.match { background: var(--encontrado-suave); }

.etiqueta-bloque {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 5px;
}
.bloque-comp.original .etiqueta-bloque { color: var(--original); }
.bloque-comp.match .etiqueta-bloque { color: var(--encontrado); }
.etiqueta-bloque .punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.bloque-comp .nombre-prod { font-weight: 600; color: var(--tinta); line-height: 1.3; margin-bottom: 3px; }
.bloque-comp .fila { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--tinta-suave); }
.bloque-comp .fila .valor { text-align: right; font-weight: 700; color: var(--tinta); }

.conector-comp {
  display: flex;
  justify-content: center;
  padding: 3px 0;
  background: var(--hueso-card);
  color: var(--tinta-suave);
  border-top: 1px dashed var(--linea);
  border-bottom: 1px dashed var(--linea);
}
.conector-comp svg { display: block; }

.precio-mismatch { color: var(--no) !important; }

.enlace-ml {
  font-size: 12.5px;
  color: var(--encontrado);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.enlace-ml:hover { text-decoration: underline; }

/* --- URL recomendada --- */
.campo-recomendado {
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: 9px 10px;
  background: var(--hueso);
}
.campo-recomendado .etiqueta-bloque { color: var(--fucsia); }
.fila-recomendado { display: flex; gap: 6px; }
.fila-recomendado input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--linea);
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 12.5px;
  font-family: inherit;
  background: #fff;
}
.fila-recomendado input:focus { outline: none; border-color: var(--fucsia); }
.btn-guardar-enlace {
  border: none;
  border-radius: 7px;
  background: var(--fucsia);
  color: #fff;
  width: 32px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-guardar-enlace:hover { filter: brightness(1.1); }
.btn-guardar-enlace:disabled { opacity: .4; cursor: default; }
.estado-guardado { font-size: 11px; margin-top: 5px; min-height: 14px; }
.estado-guardado.ok { color: var(--ok); }
.estado-guardado.error { color: var(--no); }

.campo-datos-manual {
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: 9px 10px;
  background: var(--hueso);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.campo-datos-manual .etiqueta-bloque { color: var(--fucsia); }
.input-titulo-manual,
.input-descripcion-manual,
.input-imagenes-manual {
  border: 1px solid var(--linea);
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 12.5px;
  font-family: inherit;
  background: #fff;
  resize: vertical;
}
.input-titulo-manual:focus,
.input-descripcion-manual:focus,
.input-imagenes-manual:focus { outline: none; border-color: var(--fucsia); }
.btn-guardar-datos-manual {
  border: none;
  border-radius: 7px;
  background: var(--fucsia);
  color: #fff;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.btn-guardar-datos-manual:hover { filter: brightness(1.1); }
.estado-guardado-manual { font-size: 11px; min-height: 14px; }
.estado-guardado-manual.ok { color: var(--ok); }
.estado-guardado-manual.error { color: var(--no); }

/* Búsqueda manual: un producto por fila (a diferencia de la grilla de
   tarjetas chicas del resto de las pantallas) — hay demasiado para
   cargar a mano (título, descripción, imágenes) como para que entre
   cómodo en una tarjeta angosta. .lista-busqueda-manual pisa la grilla
   de .lista-productos a una sola columna, igual que .lista-prepublicacion. */
.lista-busqueda-manual { grid-template-columns: 1fr; }
.tarjeta-busqueda-manual {
  background: var(--hueso-card);
  border-radius: var(--radio);
  box-shadow: var(--sombra-chica);
  border: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
  align-items: flex-start;
}
.bm-columna-imagen {
  width: 110px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.bm-columna-imagen img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--radio-chico);
  border: 1px solid var(--linea);
  background: #fff;
}
.bm-sin-imagen {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--linea);
  border-radius: var(--radio-chico);
  color: var(--tinta-suave);
  font-size: 11px;
  text-align: center;
  padding: 6px;
}
.bm-columna-info {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bm-links-viejos { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.bm-links-viejos .enlace-ml { font-size: 12px; }
.bm-sin-links { font-size: 11.5px; color: var(--tinta-suave); }
.bm-columna-info .fila { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--tinta-suave); }
.bm-columna-info .fila .valor { font-weight: 700; color: var(--tinta); }
.bm-columna-form {
  flex: 1 1 340px;
  min-width: 280px;
}
.bm-columna-acciones {
  width: 160px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bm-columna-acciones .btn-etapa3 { width: 100%; }

.acciones {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.btn-accion {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  font-size: 13px;
  cursor: pointer;
  font-weight: 700;
  font-family: inherit;
  background: #fff;
  color: var(--tinta-suave);
  touch-action: manipulation;
}
.btn-accion:active { transform: scale(.97); }
.btn-accion:disabled { opacity: .5; cursor: default; }

.btn-aprobar.activo { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn-aprobar:hover { border-color: var(--ok); color: var(--ok); }
.btn-aprobar.activo:hover { color: #fff; }

.btn-rechazar.activo { background: var(--no); color: #fff; border-color: var(--no); }
.btn-rechazar:hover { border-color: var(--no); color: var(--no); }
.btn-rechazar.activo:hover { color: #fff; }

.btn-etapa3 {
  display: inline-block;
  padding: 10px;
  border: 1px solid var(--fucsia);
  border-radius: var(--radio-chico);
  background: #fff;
  color: var(--fucsia-alto);
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}
.btn-etapa3:hover { background: var(--fucsia-suave); }
.btn-etapa3:disabled {
  border: 1px dashed var(--linea);
  background: var(--hueso);
  color: var(--tinta-suave);
  cursor: not-allowed;
}
.btn-etapa3.btn-etapa3-enviado {
  border: 1px solid var(--ok);
  background: var(--ok-suave);
  color: var(--ok);
  cursor: default;
}
.btn-etapa3.btn-destructivo {
  border: 1px solid var(--no);
  color: var(--no);
}
.btn-etapa3.btn-destructivo:hover { background: #fbe7e7; }

.controles-filtros-columna {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 280px;
}

.controles-secundarios {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 14px;
  border-left: 2px solid var(--linea);
}
.etiqueta-filtro-secundario {
  font-size: 11px;
  color: var(--tinta-suave);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.etiqueta-filtro-secundario::before { content: '↳ '; }

.controles-secundarios .filtros {
  background: transparent;
  border: none;
  padding: 0;
}
.controles-secundarios .filtro {
  padding: 6px 12px;
  font-size: 12px;
}
.controles-secundarios .filtro.activo { background: var(--tinta); }

.barra-envio-masivo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--fucsia-suave);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--fucsia-alto);
  font-weight: 600;
}
.btn-enviar-masivo {
  padding: 10px 18px;
  border: none;
  border-radius: var(--radio-chico);
  background: var(--gradiente);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.btn-enviar-masivo:hover { filter: brightness(1.08); }
.btn-enviar-masivo:disabled { opacity: .6; cursor: default; }
.btn-enviar-masivo-secundario {
  background: #fff;
  border: 1px solid var(--fucsia);
  color: var(--fucsia-alto);
}
.btn-enviar-masivo-secundario:hover { filter: none; background: var(--fucsia-suave); }
.btn-enviar-masivo.btn-rechazar-masivo { background: var(--no); }

.cabecera-izq { display: flex; align-items: center; gap: 8px; }
.check-revision,
.check-producto,
.check-fase2, .check-repechaje2, .check-repechaje3, .check-busqueda-manual { width: 15px; height: 15px; cursor: pointer; accent-color: var(--fucsia); }

.contador-seleccion { font-weight: 700; }

.barra-revision-masiva {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--fucsia-suave);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--fucsia-alto);
  font-weight: 600;
}
.check-todos-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.check-todos-label input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--fucsia); }
.acciones-masivas { display: flex; gap: 8px; }
.acciones-masivas .btn-accion { padding: 9px 14px; }

/* --- Scraping por marca --- */
.tarjetas-marca {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.tarjeta-marca {
  background: var(--hueso-card);
  border-radius: var(--radio);
  box-shadow: var(--sombra-chica);
  border: 1px solid var(--linea);
  overflow: hidden;
}

.cabecera-marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--linea);
  background: linear-gradient(160deg, #ffffff, var(--fucsia-suave));
}
.nombre-marca { font-weight: 800; font-size: 14px; letter-spacing: .02em; color: var(--fucsia-alto); }
.conteo-marca { font-size: 12px; color: var(--tinta-suave); font-weight: 600; }

.cuerpo-marca { padding: 16px; display: flex; flex-direction: column; gap: 10px; }

.estado-marca {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-suave);
}
.estado-marca.estado-CORRIENDO { color: var(--fucsia); }
.estado-marca.estado-COMPLETADO { color: var(--ok); }
.estado-marca.estado-ERROR { color: var(--no); }

.barra-progreso {
  height: 8px;
  border-radius: 999px;
  background: var(--linea);
  overflow: hidden;
}
.barra-progreso-fill {
  height: 100%;
  background: var(--gradiente);
  transition: width .3s ease;
}

.detalle-progreso { font-size: 12px; color: var(--tinta-suave); }

.aviso-segundo-plano {
  font-size: 11.5px;
  color: var(--fucsia);
  background: var(--fucsia-suave);
  border-radius: var(--radio-chico);
  padding: 6px 8px;
}

.resultados-marca { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; }
.resultados-marca .res-ok { color: var(--ok); }
.resultados-marca .res-no { color: var(--no); }

.error-marca {
  font-size: 12px;
  color: var(--no);
  background: var(--no-suave);
  border-radius: var(--radio-chico);
  padding: 8px 10px;
}

.btn-scraping {
  margin-top: 4px;
  padding: 11px;
  border: none;
  border-radius: var(--radio-chico);
  background: var(--gradiente);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.btn-scraping:hover { filter: brightness(1.08); }

/* Panel "Precio de oferta" (y cualquier otra herramienta de modificación
   de productos que se sume ahí) — mismo look que el resto de paneles pero
   en turquesa oscuro en vez de fucsia, para que se note que escribe sobre
   productos ya publicados y no es parte del pipeline de scraping. */
.panel-turquesa .rotulo-etapa { color: var(--turquesa); background: var(--turquesa-suave); }
.panel-turquesa .btn-scraping { background: var(--gradiente-turquesa); }
.panel-turquesa .btn-ver-resultados { color: var(--turquesa-alto); }
.panel-turquesa .tabla-precios-oferta th { color: var(--turquesa); }
.panel-turquesa input[type="checkbox"] { accent-color: var(--turquesa); }
.btn-scraping:disabled {
  background: var(--linea);
  color: var(--tinta-suave);
  cursor: default;
}

.acciones-marca { display: flex; gap: 8px; }
.acciones-marca .btn-scraping { flex: 1; margin-top: 0; }

.btn-ver-resultados {
  flex: 1;
  padding: 11px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: #fff;
  color: var(--fucsia-alto);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.btn-ver-resultados:hover { border-color: var(--fucsia); background: var(--fucsia-suave); }

.btn-volver-marcas {
  background: none;
  border: none;
  color: var(--fucsia-alto);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  padding: 8px 0;
}
.btn-volver-marcas:hover { text-decoration: underline; }

.tarjeta-producto.estado-CORRESPONDE .chip-estado { background: var(--ok-suave); color: var(--ok); }
.tarjeta-producto.estado-NO_CORRESPONDE .chip-estado { background: var(--no-suave); color: var(--no); }

.descripcion-fabricante {
  font-size: 12.5px;
  color: var(--tinta-suave);
  line-height: 1.4;
}

.tarjeta-producto .cuerpo > .fila {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--tinta-suave);
}
.tarjeta-producto .cuerpo > .fila .valor { font-weight: 700; color: var(--tinta); }

.mensaje-vacio {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--tinta-suave);
  padding: 50px 0;
}

/* --- Nombre original del catálogo en las cards de Etapa 1 --- */
/* flex-basis: 100% lo empuja a su propia línea dentro del mismo header
   (cabecera-tarjeta ya es flex-wrap), sin agregar un bloque separado. */
.nombre-original-cabecera {
  flex-basis: 100%;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-suave);
}

/* --- Probador manual de un SKU (Etapa 1) --- */
.probador-sku {
  background: linear-gradient(180deg, #ffffff 0%, var(--hueso-card) 100%);
  border-radius: var(--radio);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 12px 26px -16px rgba(139, 21, 80, .28), var(--sombra-chica);
  border: 1px solid var(--linea);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.probador-titulo { font-weight: 800; font-size: 14px; color: var(--fucsia-alto); }
.probador-ayuda { font-size: 12.5px; color: var(--tinta-suave); margin: 4px 0 16px; }
.lista-formato-precios-oferta { font-size: 12.5px; color: var(--tinta-suave); margin: 0 0 12px; padding-left: 18px; }
.lista-formato-precios-oferta li { margin-bottom: 4px; }
.tabla-ejemplo-precios-oferta { max-width: 360px; margin-bottom: 16px; }

.probador-controles {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
}
.probador-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 160px;
}
.probador-campo-sku { flex: 2 1 220px; }
.probador-etiqueta {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-suave);
}
.probador-controles select,
.probador-controles input {
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  color: var(--tinta);
  width: 100%;
}
.probador-controles select:focus,
.probador-controles input:focus { outline: none; border-color: var(--fucsia); }
.probador-controles .btn-scraping {
  flex: 1 1 140px;
  margin-top: 0;
  padding: 11px 18px;
}

@media (max-width: 640px) {
  .probador-controles { flex-direction: column; align-items: stretch; gap: 12px; }
  .probador-campo, .probador-campo-sku, .probador-controles .btn-scraping { flex: 1 1 auto; }
}

.probador-resultado { margin-top: 14px; }
.probador-error {
  font-size: 12.5px;
  color: var(--no);
  background: var(--no-suave);
  border-radius: var(--radio-chico);
  padding: 10px 12px;
}
.probador-vacio {
  font-size: 12.5px;
  color: var(--tinta-suave);
  background: var(--hueso);
  border-radius: var(--radio-chico);
  padding: 10px 12px;
}
.probador-ficha {
  display: flex;
  gap: 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: 12px;
}
.probador-imagen {
  width: 100px;
  height: 100px;
  object-fit: contain;
  background: var(--hueso);
  border-radius: 8px;
  flex: 0 0 auto;
}
.probador-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.probador-datos .nombre-prod { font-weight: 700; color: var(--tinta); }

/* --- Etapa 3: imágenes candidatas --- */
.imagen-candidata {
  position: relative;
  width: 90px;
  border: 2px solid var(--linea);
  border-radius: 10px;
  overflow: hidden;
  opacity: .45;
  cursor: grab;
  background: var(--hueso);
}
.imagen-candidata:active { cursor: grabbing; }
.imagen-candidata.incluida { opacity: 1; border-color: var(--ok); }
.imagen-candidata img { width: 100%; height: 70px; object-fit: contain; display: block; cursor: zoom-in; }
.imagen-candidata.arrastrando { opacity: .35; }
.imagen-candidata.sobre-drop { border-color: var(--azul-marca); box-shadow: 0 0 0 2px var(--azul-marca) inset; }
.check-imagen { accent-color: var(--azul-marca); }
.badge-mejorada-ia {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
.badge-error-cuadrado {
  position: absolute;
  bottom: 22px;
  right: 4px;
  z-index: 1;
  font-size: 13px;
  line-height: 1;
  cursor: help;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

.btn-hacer-principal {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--tinta-suave);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.btn-hacer-principal:hover { color: var(--fucsia); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 10, 16, .85);
}
.lightbox-contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 92vw;
}
.lightbox-titulo-imagen {
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  margin: 0;
  text-align: center;
}
.lightbox-error-cuadrado {
  background: rgba(220, 60, 60, .18);
  border: 1px solid rgba(220, 60, 60, .5);
  color: #ffd8d8;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  max-width: min(80vw, 700px);
  text-align: center;
  margin: 0;
}
.lightbox-imagen-grande {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lightbox-imagen-grande img {
  max-width: min(80vw, 700px);
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--radio-chico);
  background: #fff;
}
.lightbox-flecha {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-flecha:hover { background: rgba(255, 255, 255, .3); }
.lightbox-mejorar-ia {
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  background: #fff;
  color: var(--fucsia-alto);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.lightbox-mejorar-ia:hover { background: var(--fucsia-suave); }
.lightbox-mejorar-ia:disabled { cursor: wait; opacity: .7; }
.lightbox-acciones {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.lightbox-check-incluida {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.lightbox-check-incluida input { accent-color: var(--azul-marca); width: 16px; height: 16px; }
.lightbox-hacer-principal {
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  background: #fff;
  color: var(--tinta);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.lightbox-hacer-principal:hover { background: var(--fucsia-suave); color: var(--fucsia-alto); }
.lightbox-ayuda-orden { color: rgba(255, 255, 255, .65); font-size: 11.5px; margin: -6px 0 0; }
.lightbox-miniaturas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
}
.lightbox-miniaturas img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: .7;
}
.lightbox-miniaturas img:hover { opacity: 1; }
.lightbox-miniaturas img.activa { border-color: var(--fucsia); opacity: 1; }
.lightbox-miniaturas img[draggable="true"] { cursor: grab; }
.lightbox-miniaturas img.arrastrando { opacity: .35; }
.lightbox-miniaturas img.sobre-drop { border-color: var(--azul-marca); box-shadow: 0 0 0 2px var(--azul-marca) inset; }
.lightbox-cerrar {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.lightbox-cerrar:hover { background: rgba(255, 255, 255, .3); }
.imagen-candidata-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 10px;
  padding: 3px 5px;
  color: var(--tinta-suave);
  border-top: 1px solid var(--linea);
}
.imagen-candidata-origen { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imagen-candidata-mover { display: flex; gap: 3px; flex: 0 0 auto; }
.btn-mover-imagen {
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: #fff;
  min-width: 22px;
  min-height: 20px;
  padding: 0;
  font-size: 12px;
  color: var(--tinta-suave);
  cursor: pointer;
}
.btn-mover-imagen:hover { color: var(--fucsia); border-color: var(--fucsia); }
.mensaje-vacio-chico { font-size: 12px; color: var(--tinta-suave); padding: 8px 0; }

/* --- Etapa 3: preview de cómo se ve en la tienda --- */
.lista-prepublicacion { grid-template-columns: 1fr; }

.tarjeta-prepublicacion {
  background: var(--hueso-card);
  border-radius: var(--radio);
  box-shadow: var(--sombra-chica);
  border: 1px solid var(--linea);
  overflow: hidden;
}

/* Etapa 4: misma ficha que Etapa 3, pero con el rosa/fucsia reemplazado
   por gris (no editable) — se pisan las variables de color solo dentro
   de esta tarjeta, así que todo lo que las usa (marca, chips, bordes de
   botón) cambia de color sin tocar cada selector de nuevo. */
.tarjeta-publicacion-enviada {
  --fucsia: #6b6b76;
  --fucsia-alto: #52525b;
  --fucsia-suave: #ececef;
}
.chip-error-publicacion { background: #fbe7e7; color: #a33333; }
.mensaje-error-publicacion {
  width: 100%;
  margin: 0;
  font-size: 12px;
  color: #a33333;
}

.tabla-agrupacion, .tabla-precios-oferta {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
}
.tabla-agrupacion th, .tabla-agrupacion td, .tabla-precios-oferta th, .tabla-precios-oferta td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--linea);
}
.tabla-agrupacion th, .tabla-precios-oferta th { color: var(--tinta-suave); font-weight: 700; font-size: 11.5px; text-transform: uppercase; }
.precios-oferta-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-suave); }

.btn-simular-consolidacion { margin-top: 12px; }
.resultado-simulacion { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--linea); }
.simulacion-seccion { margin-bottom: 18px; }
.bloque-payload {
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: 10px 12px;
  margin: 8px 0;
}
.bloque-payload-titulo { font-size: 12.5px; font-weight: 700; color: var(--tinta); }
.bloque-payload-endpoint { font-family: monospace; font-size: 11.5px; color: var(--fucsia-alto); margin: 2px 0 6px; }
.etiqueta-simulado { color: var(--tinta-suave); font-style: italic; }
.bloque-payload-json {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11.5px;
  overflow-x: auto;
  margin: 0;
}
.detalle-json-crudo { margin-top: 8px; }
.detalle-json-crudo summary { cursor: pointer; font-size: 12.5px; color: var(--fucsia-alto); font-weight: 600; }
.detalle-json-crudo .bloque-payload-json { margin-top: 6px; max-height: 340px; overflow-y: auto; }

.banner-apto {
  font-weight: 700;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: var(--radio-chico);
  margin-bottom: 14px;
}
.banner-apto-si { background: var(--ok-suave); color: var(--ok); }
.banner-apto-no { background: #fbe7e7; color: #a33333; }

.simulacion-ejecucion-real,
.simulacion-checkpoint {
  border: 1px dashed var(--no);
  border-radius: var(--radio-chico);
  padding: 12px;
}

.tarjeta-prepublicacion .cabecera-tarjeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--linea);
}

.chip-etapa4 { background: var(--encontrado-suave); color: var(--encontrado); }
.chip-etapa3-estrella { background: var(--original-suave); color: var(--original); }
.chip-origen-repechaje { background: var(--fucsia-suave); color: var(--fucsia); }
.chip-publicado { background: var(--ok-suave); color: var(--ok); }
.chip-generado-ia {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--fucsia-suave);
  color: var(--fucsia-alto);
  white-space: nowrap;
}

.preview-cuerpo {
  display: flex;
  gap: 24px;
  padding: 18px 20px;
  align-items: flex-start;
}
.preview-cuerpo-edicion { flex-direction: column; align-items: stretch; }
.preview-cuerpo-edicion .preview-galeria { flex: 1 1 auto; width: 100%; }

.preview-galeria { flex: 0 0 260px; display: flex; flex-direction: column; gap: 10px; }
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.preview-galeria .imagen-candidata { width: 100%; }
.preview-galeria .imagen-candidata img { height: 78px; }

.preview-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.preview-marca {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--fucsia);
}
.preview-titulo { margin: 0; font-size: 20px; font-weight: 800; color: var(--tinta); line-height: 1.25; }
.preview-categoria { font-size: 12.5px; color: var(--tinta-suave); margin-bottom: 4px; }
.chips-categorias { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.chip-categoria {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--fucsia-suave);
  color: var(--fucsia-alto);
}

.preview-descripcion-wrap { position: relative; }
.preview-descripcion {
  font-size: 13.5px;
  color: var(--tinta);
  line-height: 1.55;
  padding: 12px 14px;
  background: var(--hueso);
  border-radius: var(--radio-chico);
  max-height: 170px;
  overflow: hidden;
}
.preview-descripcion-wrap.expandida .preview-descripcion { max-height: none; }
.preview-descripcion h3 { font-size: 14px; margin: 10px 0 6px; }
.preview-descripcion ul { margin: 4px 0; padding-left: 20px; }
.preview-descripcion p { margin: 0 0 8px; }
.preview-descripcion p:last-child { margin-bottom: 0; }
.btn-ver-mas-descripcion {
  display: block;
  margin: 6px 0 0;
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  color: var(--fucsia);
  cursor: pointer;
}
.btn-ver-mas-descripcion:hover { text-decoration: underline; }

.preview-variantes { margin-top: 4px; }
.chips-variantes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip-variante {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--encontrado-suave);
  color: var(--encontrado);
}

.preview-specs { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.preview-spec { font-size: 11px; color: var(--tinta-suave); }

.prepublicacion-acciones-fila {
  display: flex;
  gap: 8px;
  padding: 0 20px 18px;
  flex-wrap: wrap;
}
.prepublicacion-acciones-fila .btn-etapa3 { margin-top: 0; width: auto; padding: 10px 18px; }
.prepublicacion-acciones-fila .btn-destacado {
  margin-left: auto;
  border: none;
  background: var(--fucsia);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  padding: 12px 30px;
  box-shadow: 0 6px 16px -6px rgba(139, 21, 80, .55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.2;
}
.prepublicacion-acciones-fila .btn-destacado:hover { background: var(--fucsia-alto); }
.btn-subtexto { font-size: 10px; font-weight: 600; opacity: .85; }

.prepublicacion-edicion { display: flex; flex-direction: column; gap: 18px; }
.campo-edicion { display: flex; flex-direction: column; gap: 4px; }
.campo-edicion input,
.campo-edicion textarea,
.campo-edicion select {
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: var(--tinta);
  resize: vertical;
  box-sizing: border-box;
}
.campo-edicion input:focus,
.campo-edicion textarea:focus,
.campo-edicion select:focus { outline: none; border-color: var(--fucsia); }
.campo-edicion-encabezado { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.btn-toggle-preview-descripcion {
  border: 1px solid var(--linea);
  border-radius: 20px;
  background: #fff;
  color: var(--fucsia-alto);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  cursor: pointer;
}
.btn-toggle-preview-descripcion:hover { background: var(--fucsia-suave); }

.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}
.btn-formato {
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: #fff;
  color: var(--tinta);
  font-size: 12px;
  font-family: inherit;
  min-width: 28px;
  padding: 4px 8px;
  cursor: pointer;
}
.btn-formato:hover { background: var(--hueso); border-color: var(--fucsia); }

.editor-html-descripcion {
  width: 100%;
  min-height: 170px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tinta);
  background: #fff;
  box-sizing: border-box;
  overflow-y: auto;
}
.editor-html-descripcion:focus { outline: none; border-color: var(--fucsia); }
.editor-html-descripcion h3 { font-size: 14px; margin: 10px 0 6px; }
.editor-html-descripcion ul { margin: 4px 0; padding-left: 20px; }
.editor-html-descripcion p { margin: 0 0 8px; }
.editor-html-descripcion p:last-child { margin-bottom: 0; }
.acciones-edicion { display: flex; gap: 8px; margin-top: 4px; }

.campo-categorias-destacado {
  background: var(--fucsia-suave);
  border: 1px solid var(--fucsia);
  border-radius: 10px;
  padding: 12px;
}
.grid-categorias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 10px;
}
.grid-categorias select { margin: 0; }

.campo-shopping-preview {
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 12px;
}
.shopping-preview-datos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--tinta);
}
.shopping-preview-datos strong { font-weight: 700; }

@media (max-width: 860px) {
  .preview-cuerpo { flex-direction: column; }
  .preview-galeria { flex: 1 1 auto; width: 100%; }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .barra-lateral {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
  }
  .nav-etapas { display: none; }
  .contenido { padding: 20px 16px 50px; }
}