/* ============================================================
   CHROME DE LA HERRAMIENTA
   Identidad propia, distinta de las landings que produce, para
   que nunca se confunda la herramienta con el resultado.
   Portado del prototipo.
   ============================================================ */
:root{
  --grafito:#14171D;
  --grafito-2:#1C212A;
  --grafito-3:#262D38;
  --linea:#333B49;
  --papel:#EDEEF0;
  --texto:#E6E9EE;
  --texto-2:#8A94A6;
  --senal:#FF2D78;        /* acento de acción */
  --senal-2:#00D3A7;      /* acento de confirmación */
  --ui:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--ui);background:var(--grafito);color:var(--texto);
  height:100vh;display:flex;flex-direction:column;overflow:hidden;
}
#app{flex:1;display:flex;flex-direction:column;min-height:0}

/* ---------- Cabecera ---------- */
header{
  flex:none;background:var(--grafito-2);border-bottom:1px solid var(--linea);
  display:flex;align-items:center;gap:18px;padding:0 16px;height:58px;
}
.marca{font-weight:700;font-size:15px;letter-spacing:-.3px;white-space:nowrap}
.marca b{color:var(--senal)}
.marca span{font-family:var(--mono);font-size:10px;color:var(--texto-2);
  display:block;letter-spacing:1px;font-weight:400}
.marca a{color:inherit;text-decoration:none}

.kits{display:flex;gap:10px;flex:1;flex-wrap:wrap}
.kit{display:flex;align-items:center;gap:6px}
.kit label{font-family:var(--mono);font-size:9.5px;color:var(--texto-2);
  letter-spacing:1px;text-transform:uppercase}
.kit select{
  background:var(--grafito-3);color:var(--texto);border:1px solid var(--linea);
  border-radius:7px;padding:7px 10px;font-family:var(--ui);font-size:12.5px;
  font-weight:600;cursor:pointer}
.kit select:focus{outline:2px solid var(--senal);outline-offset:1px}

.acciones{display:flex;gap:8px;flex:none;align-items:center}
.btn{
  font-family:var(--ui);font-size:12.5px;font-weight:700;cursor:pointer;
  border:1px solid var(--linea);background:var(--grafito-3);color:var(--texto);
  padding:9px 14px;border-radius:8px;transition:background .12s ease}
.btn:hover{background:#303948}
.btn.pri{background:var(--senal);border-color:var(--senal);color:#fff}
.btn.pri:hover{background:#E01F68}
.btn.ok{background:var(--senal-2);border-color:var(--senal-2);color:#04241D}

/* ---------- Estado de guardado ---------- */
.estado{
  font-family:var(--mono);font-size:10px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--texto-2);display:flex;align-items:center;gap:6px;white-space:nowrap;
  min-width:104px;justify-content:flex-end}
.estado::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--texto-2);flex:none}
.estado.guardando::before{background:#F5A310;animation:latido 1s ease infinite}
.estado.guardado::before{background:var(--senal-2)}
.estado.error{color:var(--senal)}
.estado.error::before{background:var(--senal)}
@keyframes latido{50%{opacity:.25}}

/* ---------- Franja del linter de políticas ---------- */
.franja{
  flex:none;background:var(--grafito-2);border-bottom:1px solid var(--linea);
  padding:10px 16px;max-height:34vh;overflow-y:auto}
.franja[hidden]{display:none}
.franja.grave{border-bottom-color:var(--senal);box-shadow:inset 0 2px 0 var(--senal)}
.franja.aviso{border-bottom-color:#F5A310;box-shadow:inset 0 2px 0 #F5A310}
.franja.limpia{border-bottom-color:var(--senal-2);box-shadow:inset 0 2px 0 var(--senal-2);
  display:flex;align-items:center;gap:12px}
.franja-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.franja-tit{font-size:13px;font-weight:700;letter-spacing:-.2px}
.franja.limpia .franja-tit{color:var(--senal-2)}
.franja-nota{font-family:var(--mono);font-size:9.5px;color:var(--texto-2);letter-spacing:.6px}
.franja .ico{margin-left:auto;flex:none}
.franja-lista{display:grid;gap:6px}

.adv{
  background:var(--grafito-3);border-left:3px solid var(--linea);
  border-radius:0 8px 8px 0;padding:8px 11px}
.adv.alta{border-left-color:var(--senal)}
.adv.media{border-left-color:#F5A310}
.adv.baja{border-left-color:var(--texto-2)}
.adv-cab{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:3px}
.franja-ruta{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.5px;color:var(--senal);
  background:rgba(255,45,120,.13);border:none;border-radius:5px;padding:3px 7px;
  cursor:pointer;flex:none}
button.franja-ruta:hover{background:rgba(255,45,120,.26)}
.adv-frag{font-size:12.5px;font-weight:600}
.adv-motivo{font-size:12px;color:var(--texto-2);line-height:1.45}
.adv-sug{font-size:12px;color:var(--senal-2);line-height:1.45;margin-top:3px}

/* ---------- Cuerpo ---------- */
main{flex:1;display:grid;grid-template-columns:380px 1fr;min-height:0}

/* ---------- Panel editor ---------- */
.editor{
  background:var(--grafito-2);border-right:1px solid var(--linea);
  overflow-y:auto;padding:12px}
.editor::-webkit-scrollbar{width:8px}
.editor::-webkit-scrollbar-thumb{background:var(--linea);border-radius:4px}

.bloque-sep{
  font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;
  color:var(--texto-2);padding:12px 4px 6px;text-transform:uppercase}

.sec{
  background:var(--grafito-3);border:1px solid var(--linea);
  border-radius:10px;margin-bottom:8px;overflow:hidden}
.sec.oculta{opacity:.42}
/* Sección que está siendo reescrita por la IA */
.sec.ocupada{border-color:var(--senal);position:relative;overflow:hidden}
.sec.ocupada::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,45,120,.14),transparent);
  animation:barrido 1.1s linear infinite}
@keyframes barrido{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.sec.ocupada::after{animation:none}}
.ico:disabled{opacity:.3;cursor:default}
.ico:disabled:hover{background:transparent;color:var(--texto-2)}
.btn:disabled{opacity:.5;cursor:default}
.estado{max-width:260px;overflow:hidden;text-overflow:ellipsis}
.sec-cab{
  display:flex;align-items:center;gap:8px;padding:10px 11px;cursor:pointer;
  user-select:none}
.sec-cod{
  font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--senal);
  background:rgba(255,45,120,.13);padding:3px 6px;border-radius:5px;flex:none}
.sec-nom{font-size:13px;font-weight:600;flex:1;letter-spacing:-.2px}
.sec-ctrl{display:flex;gap:3px;flex:none}
.ico{
  width:26px;height:26px;border-radius:6px;border:none;cursor:pointer;
  background:transparent;color:var(--texto-2);font-size:13px;line-height:1;
  display:grid;place-items:center;transition:background .12s ease,color .12s ease}
.ico:hover{background:var(--linea);color:var(--texto)}
.ico:focus-visible{outline:2px solid var(--senal);outline-offset:1px}

.sec-cuerpo{display:none;padding:0 11px 11px;border-top:1px solid var(--linea)}
.sec.abierta .sec-cuerpo{display:block}

.campo{margin-top:10px}
.campo label{
  font-family:var(--mono);font-size:9px;letter-spacing:.8px;
  color:var(--texto-2);text-transform:uppercase;display:block;margin-bottom:4px}
.campo input,.campo textarea{
  width:100%;background:var(--grafito);border:1px solid var(--linea);
  border-radius:7px;padding:8px 10px;color:var(--texto);
  font-family:var(--ui);font-size:12.5px;line-height:1.45;resize:vertical}
.campo input:focus,.campo textarea:focus{
  outline:none;border-color:var(--senal);box-shadow:0 0 0 3px rgba(255,45,120,.16)}
.campo.tocado label::after{
  content:" ✎ editado";color:var(--senal-2);letter-spacing:0;text-transform:none}
.grupo{
  border-left:2px solid var(--linea);padding-left:9px;margin-top:10px}
.grupo-tit{font-family:var(--mono);font-size:9px;color:var(--texto-2);
  letter-spacing:.8px}

/* ---------- Escenario / preview ---------- */
.escenario{
  background:var(--papel);display:flex;flex-direction:column;
  align-items:center;overflow-y:auto;padding:22px 0 40px;
  background-image:radial-gradient(circle at 1px 1px,#D6D8DC 1px,transparent 0);
  background-size:22px 22px}

/* flex:none es obligatorio. `.escenario` es un flex en columna y sus
   hijos se encogen por defecto: sin esto la landing se comprime a la
   altura de la ventana y, como aqui hay overflow:hidden por las
   esquinas redondeadas, el resto queda recortado y no hay forma de
   bajar a verlo. */
.telefono{
  flex:none;
  width:520px;max-width:calc(100% - 40px);background:#fff;
  border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(20,23,29,.22);position:relative}

/* SEÑA DE LA HERRAMIENTA: la costura donde Funnelish inyecta el formulario */
.costura{
  background:repeating-linear-gradient(45deg,#F6F7F8,#F6F7F8 9px,#ECEEF1 9px,#ECEEF1 18px);
  border-top:2px dashed var(--senal);border-bottom:2px dashed var(--senal);
  padding:26px 18px;text-align:center;font-family:var(--mono);
  font-size:10.5px;letter-spacing:1.2px;color:#8A94A6;text-transform:uppercase}
.costura b{display:block;color:var(--senal);font-size:12px;margin-bottom:5px;letter-spacing:.6px}

iframe{width:100%;border:none;display:block}

.etiqueta-bloque{
  position:sticky;top:0;z-index:5;
  font-family:var(--mono);font-size:9px;letter-spacing:1.4px;
  background:var(--grafito);color:#fff;padding:5px 10px;text-transform:uppercase}

/* ---------- Salida de código ---------- */
.salida{
  position:fixed;inset:0;background:rgba(10,12,16,.82);z-index:100;
  display:none;align-items:center;justify-content:center;padding:30px}
.salida.visible{display:flex}
.salida-caja{
  background:var(--grafito-2);border:1px solid var(--linea);border-radius:14px;
  width:min(900px,100%);max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
.salida-cab{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--linea)}
.salida-cab h2{font-size:15px;font-weight:700;flex:1}
.salida pre{
  flex:1;overflow:auto;margin:0;padding:16px;background:var(--grafito);
  font-family:var(--mono);font-size:11px;line-height:1.6;color:#B9C4D6;
  white-space:pre-wrap;word-break:break-all}

/* ---------- Páginas de lista (Productos, Producto) ---------- */
.pagina{flex:1;overflow-y:auto;padding:20px 22px 60px}

/* La cabecera del editor reparte el espacio con los selectores de kit;
   estas no tienen selectores, así que el nombre se queda con el hueco
   y los botones se van a la derecha. */
header.simple .marca{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px}
header.simple .marca .nombre{
  display:inline;font-size:15px;font-weight:700;letter-spacing:-.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52ch}
.marca .sub{display:inline;font-family:var(--mono);font-size:10px;color:var(--texto-2);
  letter-spacing:1px;white-space:nowrap;flex:none}
.marca .volver{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;
  background:var(--grafito-3);border:1px solid var(--linea);flex:none;
  font-size:14px;text-decoration:none;color:var(--texto);align-self:center}
.marca .volver:hover{background:#303948}
.cuenta{font-family:var(--mono);font-size:10px;color:var(--texto-2);letter-spacing:1px}

/* Alta de producto por URL */
.alta{display:flex;gap:8px;margin-bottom:14px}
/* `display:flex` gana sobre el [hidden] del navegador: hay que decirlo */
.alta[hidden]{display:none}
.alta input{
  flex:1;background:var(--grafito-2);border:1px solid var(--linea);border-radius:9px;
  padding:11px 13px;color:var(--texto);font-family:var(--ui);font-size:13px}
.alta input:focus{outline:none;border-color:var(--senal);box-shadow:0 0 0 3px rgba(255,45,120,.16)}
.alta input::placeholder{color:var(--texto-2)}

/* Pestañas de alta de producto */
.pestanas{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid var(--linea)}
.pestana{
  background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;
  color:var(--texto-2);font-family:var(--ui);font-size:12.5px;font-weight:600;
  padding:9px 13px;cursor:pointer}
.pestana:hover{color:var(--texto)}
.pestana.activa{color:var(--texto);border-bottom-color:var(--senal)}

/* Formulario manual */
.alta-manual{
  background:var(--grafito-2);border:1px solid var(--linea);border-radius:12px;
  padding:16px;margin-bottom:14px;display:grid;gap:14px}
.alta-manual[hidden]{display:none}
.alta-manual .campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.alta-manual .campo{margin:0}
.alta-manual input,.alta-manual textarea{
  width:100%;background:var(--grafito);border:1px solid var(--linea);border-radius:8px;
  padding:9px 11px;color:var(--texto);font-family:var(--ui);font-size:12.5px;
  line-height:1.5;resize:vertical}
.alta-manual input:focus,.alta-manual textarea:focus{
  outline:none;border-color:var(--senal);box-shadow:0 0 0 3px rgba(255,45,120,.16)}
.alta-manual .btn{justify-self:start}

/* Zona para soltar fotos */
.soltar{
  border:1.5px dashed var(--linea);border-radius:10px;padding:20px 16px;text-align:center;
  transition:border-color .12s ease,background .12s ease}
.soltar.encima{border-color:var(--senal);background:rgba(255,45,120,.06)}
.soltar.ocupada{opacity:.6;pointer-events:none}
.soltar p{font-size:12.5px;margin-bottom:4px}
.soltar .tenue{font-family:var(--ui);font-size:11.5px;color:var(--texto-2);letter-spacing:0}
.enlace{
  background:none;border:none;padding:0;color:var(--senal);font:inherit;
  cursor:pointer;text-decoration:underline}

.miniaturas{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.miniaturas:empty{display:none}
.mini{position:relative;width:84px}
.mini img{
  width:84px;height:84px;object-fit:cover;border-radius:8px;display:block;
  border:1px solid var(--linea);background:var(--grafito-3)}
.mini-quitar{
  position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--linea);background:var(--grafito-3);color:var(--texto);
  font-size:11px;cursor:pointer;display:grid;place-items:center}
.mini-quitar:hover{background:var(--senal);border-color:var(--senal);color:#fff}
.mini-peso{
  display:block;font-family:var(--mono);font-size:9px;color:var(--texto-2);
  text-align:center;margin-top:3px}

.aviso-linea{
  border-radius:9px;padding:10px 13px;font-size:12.5px;margin-bottom:14px;
  background:var(--grafito-2);border:1px solid var(--linea)}
.aviso-linea.ok{border-color:var(--senal-2);color:var(--senal-2)}
.aviso-linea.error{border-color:var(--senal);color:#FF7AA8}
.aviso-linea[hidden]{display:none}

/* Grilla de productos */
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:14px}
.tarjeta{
  background:var(--grafito-2);border:1px solid var(--linea);border-radius:12px;
  overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:border-color .12s ease,transform .12s ease}
.tarjeta:hover{border-color:var(--senal);transform:translateY(-2px)}
.tarjeta-foto{aspect-ratio:1;background:var(--grafito-3);overflow:hidden}
.tarjeta-foto img{width:100%;height:100%;object-fit:cover;display:block}
.sin-foto{
  width:100%;height:100%;display:grid;place-items:center;font-family:var(--mono);
  font-size:10px;color:var(--texto-2);letter-spacing:1px;text-transform:uppercase}
.sin-foto.grande{aspect-ratio:1;background:var(--grafito-3);border-radius:10px}
.tarjeta-cuerpo{padding:11px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.tarjeta-cuerpo h3{
  font-size:13px;font-weight:600;line-height:1.3;letter-spacing:-.2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tarjeta-precio{font-size:15px;font-weight:700;color:var(--senal-2)}
.tarjeta-pie{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:auto}

.pastilla{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;
  background:rgba(255,45,120,.13);color:var(--senal);padding:3px 7px;border-radius:5px;
  white-space:nowrap}
.pastilla.vacia{background:var(--grafito-3);color:var(--texto-2)}
.pastilla.ok{background:rgba(0,211,167,.14);color:var(--senal-2)}
.pastilla.aviso{background:rgba(245,163,16,.15);color:#F5A310}
.tenue{font-family:var(--mono);font-size:9.5px;color:var(--texto-2);letter-spacing:.5px}

/* Ficha del producto */
.ficha{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:20px;margin-bottom:26px}
.ficha-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:start}
.ficha-fotos img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block;
  background:var(--grafito-3);border:1px solid var(--linea)}
.ficha-datos{display:flex;flex-direction:column;gap:1px}
.dato{display:flex;gap:14px;padding:8px 0;border-bottom:1px solid var(--linea);font-size:13px}
.dato-k{
  flex:none;width:100px;font-family:var(--mono);font-size:9.5px;color:var(--texto-2);
  letter-spacing:.8px;text-transform:uppercase;padding-top:3px}
.dato-v{flex:1;min-width:0;word-break:break-word}
.dato-v a{color:var(--senal);text-decoration:none}
.dato-v a:hover{text-decoration:underline}
.dato-v s{color:var(--texto-2);margin-left:6px;font-size:12px}
.falta{color:var(--texto-2);font-style:italic}

.titulo-seccion{
  font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--texto-2);margin-bottom:10px;font-weight:400}

/* Lista de variantes */
.variantes{display:flex;flex-direction:column;gap:8px}
.variante{
  display:flex;align-items:stretch;gap:0;background:var(--grafito-2);
  border:1px solid var(--linea);border-radius:11px;overflow:hidden;
  transition:border-color .12s ease}
.variante:hover{border-color:var(--senal)}
.variante-abrir{flex:1;display:flex;gap:12px;padding:10px;text-decoration:none;color:inherit;min-width:0}
.variante-mini{flex:none;width:58px;height:58px;border-radius:8px;overflow:hidden;background:var(--grafito-3)}
.variante-mini img{width:100%;height:100%;object-fit:cover;display:block}
.variante-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;justify-content:center}
.variante-cuerpo h3{font-size:13.5px;font-weight:600;letter-spacing:-.2px}
.variante-titular{
  font-size:12px;color:var(--texto-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.variante-pie{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.btn.duplicar{border:none;border-left:1px solid var(--linea);border-radius:0;background:transparent;
  color:var(--texto-2);font-size:11.5px;padding:0 14px;flex:none}
.btn.duplicar:hover{background:var(--grafito-3);color:var(--texto)}

@media(max-width:760px){
  .ficha{grid-template-columns:1fr}
}

/* ---------- Avisos y vistas pendientes ---------- */
.aviso{
  margin:auto;max-width:520px;text-align:center;padding:40px 20px;color:var(--texto-2)}
.aviso h1{font-size:19px;color:var(--texto);margin-bottom:10px;letter-spacing:-.3px}
.aviso p{font-size:14px;line-height:1.6;margin-bottom:8px}
.aviso code{font-family:var(--mono);font-size:12.5px;color:var(--senal)}
.aviso .btn{margin-top:16px;display:inline-block}

@media(max-width:900px){
  main{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .editor{max-height:44vh;border-right:none;border-bottom:1px solid var(--linea)}
}

/* ---------- Selector de formato de variante ---------- */
.formatos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;
  margin-bottom:16px}
.formatos[hidden]{display:none}
.formato{
  text-align:left;background:var(--grafito-2);border:1px solid var(--linea);
  border-radius:12px;padding:13px 14px;cursor:pointer;color:inherit;
  display:grid;gap:5px;transition:border-color .12s ease,transform .12s ease}
.formato:hover{border-color:var(--senal);transform:translateY(-2px)}
.formato.pri{border-color:var(--senal-2)}
.formato.pri:hover{border-color:var(--senal-2)}
.formato-tit{font-family:var(--ui);font-size:13.5px;font-weight:700;letter-spacing:-.2px}
.formato.pri .formato-tit{color:var(--senal-2)}
.formato-desc{font-size:11.5px;color:var(--texto-2);line-height:1.45}
.pastilla.grafica{background:rgba(0,211,167,.14);color:var(--senal-2)}

/* ---------- Piezas gráficas ----------
   La sección gráfica no se edita como un formulario: se mira la
   imagen y se corrige el texto que lleva impreso. */
.pieza{
  display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start;
  padding:12px;margin-bottom:12px;
  background:var(--grafito);border:1px solid var(--linea);border-radius:10px}
.pieza-vista img{
  width:100%;display:block;border-radius:7px;border:1px solid var(--linea)}
.pieza-hueco{
  display:grid;place-items:center;height:150px;border-radius:7px;
  border:1px dashed var(--linea);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.8px;text-transform:uppercase;color:var(--texto-2)}
.pieza-lado{display:grid;gap:8px;justify-items:start}
.pieza-nota{font-size:11px;color:var(--texto-2);line-height:1.45;margin:0}
.pieza.vacia .pieza-lado .btn{background:var(--senal);border-color:var(--senal);color:#fff}

/* ---------- Barra de avance ---------- */
.progreso{
  flex:none;padding:10px 16px;background:var(--grafito-2);
  border-bottom:1px solid var(--linea);box-shadow:inset 0 2px 0 var(--senal-2)}
.progreso[hidden]{display:none}
.progreso.aviso{box-shadow:inset 0 2px 0 #F5A310}
.progreso.grave{box-shadow:inset 0 2px 0 var(--senal)}
.progreso-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.progreso-tit{font-size:13px;font-weight:700;letter-spacing:-.2px}
.progreso-paso{font-family:var(--mono);font-size:9.5px;color:var(--texto-2);letter-spacing:.6px}
.progreso .ico{margin-left:auto;flex:none}
.progreso-barra{
  height:4px;margin-top:8px;border-radius:3px;background:var(--grafito-3);overflow:hidden}
.progreso-barra i{
  display:block;height:100%;background:var(--senal-2);transition:width .3s ease}
.progreso-err{
  font-size:11.5px;color:var(--senal);margin-top:6px;line-height:1.45}

/* ---------- Elegir formato al crear un producto ---------- */
.arranque{
  margin:0 0 18px;padding:16px;border-radius:12px;
  background:var(--grafito-2);border:1px solid var(--senal-2)}
.arranque[hidden]{display:none}
.arranque-tit{font-size:14px;font-weight:700;letter-spacing:-.2px}
.arranque-tit b{color:var(--senal-2)}
.arranque-sub{font-size:12px;color:var(--texto-2);margin:4px 0 12px}
.arranque .formatos{margin:0 0 10px}
.arranque .formato:disabled{opacity:.5;cursor:progress}


/* ---------- Fotos de combo para Funnelish ---------- */
.panel-combos{
  margin:0 0 18px;padding:16px;border-radius:12px;
  background:var(--grafito-2);border:1px solid var(--linea)}
.panel-combos[hidden]{display:none}
.combos{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0}
.combo{
  display:grid;gap:7px;justify-items:center;padding:10px;
  background:var(--grafito);border:1px solid var(--linea);border-radius:10px}
.combo.vacia{border-style:dashed}
.combo-vista{width:100%;aspect-ratio:1;background:#fff;border-radius:7px;overflow:hidden}
.combo-vista img{width:100%;height:100%;object-fit:contain;display:block}
.combo-hueco{
  display:grid;place-items:center;height:100%;
  font-family:var(--mono);font-size:9px;letter-spacing:.7px;
  text-transform:uppercase;color:#9AA3B2}
.combo-tit{font-family:var(--mono);font-size:9.5px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--texto-2)}
.combo-acc{display:flex;gap:6px}
.combo-acc .ico{text-decoration:none;display:grid;place-items:center}
.combos-pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.combos-pie .tenue{font-family:var(--mono);font-size:9.5px;letter-spacing:.6px}
.panel-combos .progreso{
  margin-top:12px;border-radius:8px;border-bottom:0;background:var(--grafito)}
.pastilla.mixta{background:rgba(255,45,120,.14);color:var(--senal)}

/* ---------- Progreso por pasos ----------
   Los dos pasos siempre visibles, aunque solo corra uno: saber qué
   falta es la mitad de la información. */
.progreso .pg-cab{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:13px}
.progreso .pg-cab .ico{margin-left:auto}
.pg-paso{display:flex;gap:12px;align-items:flex-start;padding:7px 0}
.pg-num{
  flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:700;
  background:var(--grafito-3);color:var(--texto-2);
  border:1px solid var(--linea);transition:all .2s}
.pg-cuerpo{flex:1;min-width:0}
.pg-tit{font-size:13px;font-weight:700;color:var(--texto-2);
  display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.pg-tit small{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.5px;
  color:var(--texto-2);text-transform:none}
.pg-ultima{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.5px;
  color:var(--senal-2);margin-top:5px}

/* El paso que corre ahora late, para que se note dónde está */
.pg-paso.yendo .pg-num{
  background:var(--senal);border-color:var(--senal);color:#fff;
  animation:pg-late 1.1s ease-in-out infinite}
.pg-paso.yendo .pg-tit{color:var(--texto)}
@keyframes pg-late{50%{box-shadow:0 0 0 6px rgba(255,45,120,.20)}}
@media(prefers-reduced-motion:reduce){.pg-paso.yendo .pg-num{animation:none}}

.pg-paso.listo .pg-num{
  background:var(--senal-2);border-color:var(--senal-2);color:#04241D}
.pg-paso.listo .pg-tit{color:var(--texto)}
.pg-paso.falla .pg-num{background:var(--senal);border-color:var(--senal);color:#fff}
.pg-paso .progreso-barra{margin-top:7px}

/* Barra indeterminada: para un paso que no se puede medir. No finge
   un porcentaje; solo dice "esto sigue vivo". */
.progreso-barra.indef{overflow:hidden;position:relative}
.progreso-barra.indef i{
  position:absolute;width:38%;left:0;background:var(--senal);
  animation:pg-corre 1.4s ease-in-out infinite}
@keyframes pg-corre{
  0%{left:-38%} 100%{left:100%}}
@media(prefers-reduced-motion:reduce){
  .progreso-barra.indef i{animation:none;width:100%;opacity:.4}}

/* ---------- Cabecera del editor, más apretada ----------
   Con nueve botones y cuatro selectores se desbordaba y todo quedaba
   pegado. Se deja envolver en varias líneas en vez de comprimirse. */
header{flex-wrap:wrap;row-gap:8px;padding-top:10px;padding-bottom:10px}
header .marca{flex:1 1 190px;min-width:0}
header .marca .nombre,header .marca a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header .kits{flex:0 1 auto;gap:8px}
header .kits[hidden]{display:none}
header .acciones{flex:1 1 auto;justify-content:flex-end;gap:7px;flex-wrap:wrap}
header .acciones .btn{padding:8px 11px;font-size:12px}
@media(max-width:1100px){
  header .kit label{display:none}
  header .kits select{padding:6px 8px;font-size:12px}
}

/* ---------- Modal de nota al regenerar ---------- */
.modal{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(10,12,16,.68);backdrop-filter:blur(2px);padding:20px}
.modal-caja{
  width:min(480px,100%);background:var(--grafito-2);border:1px solid var(--linea);
  border-radius:16px;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.modal-caja h3{margin:0 0 6px;font-size:16px;letter-spacing:-.2px}
.modal-sub{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:var(--texto-2)}
.modal-caja textarea{
  width:100%;background:var(--grafito);color:var(--texto);border:1px solid var(--linea);
  border-radius:10px;padding:11px 12px;font-family:var(--ui);font-size:13.5px;
  line-height:1.5;resize:vertical}
.modal-caja textarea:focus{outline:2px solid var(--senal);outline-offset:1px}
.modal-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.modal-chips button{
  background:var(--grafito-3);color:var(--texto-2);border:1px solid var(--linea);
  border-radius:999px;padding:6px 11px;font-family:var(--ui);font-size:11.5px;
  font-weight:600;cursor:pointer}
.modal-chips button:hover{border-color:var(--senal);color:var(--texto)}
.modal-pie{display:flex;align-items:center;gap:10px;margin-top:16px}
.modal-pie .tenue{
  margin-right:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.6px}