/* ============================================================
   TiendaIQ — la app que envuelve el motor.
   Look de panel de admin: gris, sobrio, denso. No es la landing.
   ============================================================ */

/* ============================================================
   DESIGN SYSTEM — la única fuente de verdad visual.

   Identidad derivada del logo: bolsa con gradiente verde→azul (marca)
   y tile índigo de analytics (color IA). 90% blanco, 8% gris, 2% color;
   el color solo comunica significado.

   Escala de espaciado (única): 4 8 12 16 20 24 32 40 48.
   Tipografía (3 niveles): 20/700 página · 14/600 sección · 13 cuerpo.
   ============================================================ */
:root {
  /* texto */
  --negro: #1a1a1a;
  --texto: #303030;
  --suave: #6b7280;

  /* superficies y bordes */
  --fondo: #f6f6f7;
  --superficie: #ffffff;
  --borde: #e6e6ea;
  --borde-suave: #f0f0f2;

  /* marca (del logo) */
  --marca-verde: #45c26a;
  --marca-azul: #1e8fd5;
  --gradiente-marca: linear-gradient(135deg, #45c26a 0%, #1e8fd5 100%);

  /* IA (tile índigo del logo). --acento es el alias histórico. */
  --ia: #4f46e5;
  --ia-fondo: #eef2ff;
  --ia-borde: #dfe3f8;
  --acento: #4f46e5;

  /* estado */
  --ok: #16a34a;
  --ok-fondo: #e7f8ee;
  --aviso: #b45309;
  --aviso-fondo: #fdf1dc;
  --peligro: #dc2626;
  --peligro-fondo: #fdeaea;
  --info: #1e8fd5;

  /* radios */
  --radio-s: 8px;   /* botones, inputs, elementos chicos */
  --radio: 12px;    /* cards, todas */
  --radio-l: 16px;  /* contenedores destacados */
  --radio-ui: 8px;  /* alias */

  /* sombras — tres niveles, muy suaves, estilo Shopify */
  --sombra-s: 0 1px 2px rgba(23, 24, 28, .04);
  --sombra-m: 0 2px 8px rgba(23, 24, 28, .06);
  --sombra-l: 0 8px 24px rgba(23, 24, 28, .10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* Cada pantalla aparece con un fade mínimo (150ms, ease-out). Nada llamativo. */
@keyframes aparecer { from { opacity: 0; transform: translateY(3px); } }
#vista > * { animation: aparecer .15s ease-out both; }

::selection { background: var(--ia-fondo); color: var(--negro); }

/* ---------- barra ---------- */

/* Header claro: marca a la izquierda, pasos a la derecha, cero ruido. */
.barra {
  background: #fff;
  color: var(--negro);
  border-bottom: 1px solid var(--borde);
  padding: 0 32px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.barra__marca { font-weight: 600; font-size: 14px; color: var(--negro); display: flex; align-items: center; gap: 10px; }
/* La marca: tile con el gradiente del logo y la T en blanco. */
.barra__logo {
  width: 26px; height: 26px; border-radius: var(--radio-s);
  background: var(--gradiente-marca); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; letter-spacing: 0;
  box-shadow: var(--sombra-s);
}

.pasos { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.paso { color: var(--suave); display: flex; align-items: center; gap: 7px; font-weight: 500; }
.paso__n {
  width: 20px; height: 20px; border-radius: 50%;
  background: #ececf0; color: var(--suave);
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
}
.paso--activo { color: var(--negro); }
.paso--activo .paso__n { background: var(--negro); color: #fff; }
.paso--hecho .paso__n { background: var(--ok); color: #fff; }
.paso__sep { color: #d1d1d6; }

/* ---------- layout ---------- */

main { max-width: 1240px; margin: 0 auto; padding: 36px 32px 80px; }

.cabecera { margin-bottom: 28px; }
.cabecera h1 { font-size: 20px; color: var(--negro); font-weight: 700; letter-spacing: -.2px; }
.cabecera p { color: var(--suave); margin-top: 4px; }

.volver {
  background: none; border: none; color: var(--suave);
  font-size: 13px; padding: 0 0 14px; display: inline-flex; gap: 6px;
}
.volver:hover { color: var(--negro); }

/* Card de sección: el contenedor grande; adentro viven las cards chicas.
   Borde suave, sin sombras fuertes, radio único. */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--sombra-s);
}
.tarjeta__titulo { font-size: 14px; font-weight: 600; color: var(--negro); margin-bottom: 16px; }

/* ---------- botones: un solo sistema ----------
   Primario negro / secundario blanco. Misma altura, mismo radio, mismo
   padding, mismo peso. Nada suelto. */

.btn {
  background: var(--negro); color: #fff; border: none;
  border-radius: var(--radio-s);
  height: 36px; padding: 0 16px;
  font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .15s ease-out, border-color .15s ease-out,
              box-shadow .15s ease-out, transform .15s ease-out;
}
.btn:hover:not(:disabled) { background: #2e2e33; }
.btn:active:not(:disabled) { transform: scale(.985); }
.btn:focus-visible { outline: 2px solid var(--ia); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--fantasma { background: var(--superficie); color: var(--negro); border: 1px solid var(--borde); }
.btn--fantasma:hover:not(:disabled) { background: var(--fondo); border-color: #d6d6dc; }
.btn--acento { background: var(--ia); }
.btn--acento:hover:not(:disabled) { background: #4338ca; }
.btn--grande { height: 44px; padding: 0 24px; font-size: 14px; }
.btn--chico { height: 30px; padding: 0 12px; font-size: 12.5px; }

/* ---------- 1. lista de productos ---------- */

.buscador {
  width: 100%; padding: 10px 14px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--borde); border-radius: var(--radio-s); background: var(--superficie);
  margin-bottom: 16px;
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.buscador:focus { outline: none; border-color: var(--ia); box-shadow: 0 0 0 3px var(--ia-fondo); }

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.producto {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; text-align: left; padding: 0;
  transition: border-color .15s ease-out, transform .15s ease-out, box-shadow .15s ease-out;
}
.producto:hover { border-color: #d6d6dc; transform: translateY(-2px); box-shadow: var(--sombra-m); }
.producto:focus-visible { outline: 2px solid var(--ia); outline-offset: 2px; }
.producto__foto {
  aspect-ratio: 1; background: var(--fondo);
  display: grid; place-items: center; color: #c3c3c3; font-size: 24px;
}
.producto__foto img { width: 100%; height: 100%; object-fit: cover; }
.producto__cuerpo { padding: 10px 12px 12px; }
.producto__titulo {
  font-size: 13px; color: var(--negro); font-weight: 500; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.etiqueta {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; margin-top: 7px;
  text-transform: uppercase; letter-spacing: .3px;
}
.etiqueta--borrador { background: var(--aviso-fondo); color: var(--aviso); }
.etiqueta--publicada { background: var(--ok-fondo); color: #157f3d; }

/* ---------- 2. información del producto ---------- */

.dos-columnas { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: start; }

.campo { margin-bottom: 16px; }
.campo:last-child { margin-bottom: 0; }
.campo label { display: block; font-size: 13px; font-weight: 500; color: var(--negro); margin-bottom: 5px; }
.campo .ayuda { font-size: 12px; color: var(--suave); margin-top: 5px; }
/* Sistema de inputs: mismo borde, mismo radio, mismo focus ring en todos. */
.campo input[type="text"], .campo input[type="number"], .campo select, .campo textarea {
  width: 100%; padding: 9px 12px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--borde); border-radius: var(--radio-s);
  background: var(--superficie); color: var(--texto);
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.campo textarea { resize: vertical; line-height: 1.45; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--ia); box-shadow: 0 0 0 3px var(--ia-fondo);
}

.medios { display: flex; gap: 8px; flex-wrap: wrap; }
.medio {
  width: 62px; height: 62px; border-radius: 7px; overflow: hidden;
  border: 1px solid var(--borde); background: var(--fondo);
}
.medio img { width: 100%; height: 100%; object-fit: cover; }

.ficha__titulo { font-size: 15px; font-weight: 600; color: var(--negro); margin-bottom: 2px; }
.ficha__meta { font-size: 12.5px; color: var(--suave); }
.ficha__descripcion {
  font-size: 12.5px; color: var(--suave); background: var(--fondo);
  border-radius: 7px; padding: 10px; margin-top: 12px;
  max-height: 130px; overflow: auto; line-height: 1.45;
}

.nota {
  font-size: 12.5px; color: var(--suave);
  background: var(--fondo); border-radius: 7px; padding: 10px 12px; margin-top: 12px;
}

/* ---------- generando ---------- */

.generando { text-align: center; padding: 90px 20px; }
.giro {
  width: 34px; height: 34px; margin: 0 auto 18px;
  border: 3px solid var(--borde); border-top-color: var(--acento);
  border-radius: 50%; animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.generando h2 { font-size: 16px; color: var(--negro); font-weight: 600; }
.generando p { color: var(--suave); margin-top: 5px; }
.generando .reloj { font-variant-numeric: tabular-nums; color: var(--acento); font-weight: 600; }

/* ---------- 3. preview ---------- */

.preview-barra {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px 16px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 14px;
}
.preview-barra__info { flex: 1; min-width: 0; }
.preview-barra__titulo { font-size: 14px; font-weight: 600; color: var(--negro); }
.preview-barra__sub { font-size: 12.5px; color: var(--suave); }

.marco {
  border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; background: #fff; height: 74vh;
}
.marco iframe { width: 100%; height: 100%; border: none; display: block; }

.avisos {
  background: var(--aviso-fondo); border: 1px solid #f3dfb9; border-radius: var(--radio);
  padding: 12px 16px; margin-bottom: 16px; font-size: 12.5px; color: var(--aviso);
}
.avisos strong { display: block; margin-bottom: 5px; }
.avisos ul { margin: 0; padding-left: 18px; }

.exito {
  background: var(--ok-fondo); border: 1px solid #c4ecd2; border-radius: var(--radio);
  padding: 14px 16px; margin-bottom: 16px;
}
.exito__titulo { font-weight: 600; color: var(--ok); font-size: 13.5px; margin-bottom: 3px; }
.exito a { color: var(--ok); font-size: 12.5px; word-break: break-all; }

.error {
  background: var(--peligro-fondo); border: 1px solid #f6c9c9; border-radius: var(--radio);
  padding: 12px 16px; margin-bottom: 16px; color: #b91c1c; font-size: 13px;
}

.vacio { text-align: center; padding: 70px 20px; color: var(--suave); }

/* ---------- 0. inicio (panel principal) ---------- */

.inicio-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 28px;
}
.inicio-cabecera h1 { font-size: 20px; color: var(--negro); font-weight: 700; letter-spacing: -.2px; }
.inicio-cabecera__acciones { display: flex; gap: 10px; flex-wrap: wrap; }

/* Banner de suscripción: tarjeta blanca con el ícono rojo, como PagePilot
   (no un cartel rojo entero). */
.banner-plan {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 14px 20px; margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  color: var(--texto); font-size: 13px;
  box-shadow: var(--sombra-s);
}
.banner-plan__icono {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--peligro); color: #fff; font-weight: 800; font-size: 14px;
  display: grid; place-items: center;
}
.banner-plan__texto { flex: 1; }
.banner-plan__texto strong { text-decoration: underline; }

.panel__cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
/* El subtítulo va PEGADO al título de sección (2-3px), como PagePilot. */
.tarjeta__titulo + .panel__sub { margin: -14px 0 20px; }
.panel__sub { font-size: 13px; color: var(--suave); }

.progreso { text-align: right; font-size: 12px; color: var(--suave); min-width: 160px; }
.progreso__barra {
  height: 5px; border-radius: 999px; background: var(--borde-suave); margin-top: 8px; overflow: hidden;
}
.progreso__barra div {
  height: 100%; background: var(--gradiente-marca); border-radius: 999px;
  transition: width .2s ease-out;
}

.pasos-grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.paso-card {
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie);
  padding: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 0;
}
/* Círculo punteado = paso pendiente; negro sólido = hecho. Igual que la
   referencia: el estado se lee de un vistazo por el ícono. */
.paso-card__icono {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.3px dashed #cfcfd4; background: var(--superficie); color: var(--negro);
  display: grid; place-items: center; margin-bottom: 12px; flex-shrink: 0;
}
.paso-card__icono svg { width: 13px; height: 13px; display: block; }
.paso-card__icono--hecho { background: var(--negro); border: none; color: #fff; }
.paso-card__titulo { font-size: 13px; font-weight: 600; color: var(--negro); line-height: 1.4; }
.paso-card__texto {
  font-size: 12.5px; color: var(--suave); line-height: 1.45;
  margin: 3px 0 12px; flex: 1;
}

/* Badges: un solo lenguaje para todos los estados. Altura fija de 24px. */
.chip-estado {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 500;
  height: 24px; padding: 0 10px; border-radius: 999px; line-height: 1;
}
.chip-estado--ok { background: var(--ok-fondo); color: #157f3d; }
.chip-estado--pronto { background: var(--fondo); color: var(--suave); border: 1px dashed #d6d6dc; }
.chip-estado--ia { background: var(--ia-fondo); color: var(--ia); }

/* Tiles de métrica al estilo PagePilot: fila ícono+label, valor grande
   debajo alineado con el label; primer tile violeta, segundo verde. */
/* Métricas: el número es el protagonista, el ícono acompaña en gris. */
.metricas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.metrica {
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie);
  padding: 16px 18px;
  transition: box-shadow .15s ease-out;
}
.metrica:hover { box-shadow: var(--sombra-m); }
.metrica--violeta { background: var(--ia-fondo); border-color: var(--ia-borde); }
.metrica--verde { background: var(--ok-fondo); border-color: #d5f5df; }
.metrica__fila { display: flex; align-items: center; gap: 9px; }
.metrica__icono { width: 17px; height: 17px; flex-shrink: 0; color: var(--suave); }
.metrica--violeta .metrica__icono { color: var(--ia); }
.metrica--verde .metrica__icono { color: var(--ok); }
.metrica__icono svg { width: 100%; height: 100%; display: block; }
.metrica__nombre { font-size: 13px; color: var(--texto); font-weight: 500; }
.metrica__valor { font-size: 22px; font-weight: 700; color: var(--negro); line-height: 1.2; margin: 8px 0 0 26px; letter-spacing: -.3px; }
.metrica--violeta .metrica__valor { color: var(--ia); }

/* Herramientas: título, texto, botón y una vista en miniatura decorativa,
   como las tarjetas con captura de PagePilot. */
.herramientas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.herramienta {
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px;
  background: var(--superficie);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  transition: box-shadow .15s ease-out;
}
.herramienta:hover { box-shadow: var(--sombra-m); }
.herramienta__nombre { font-size: 13px; font-weight: 600; color: var(--negro); }
.herramienta p { font-size: 13px; color: var(--suave); margin-bottom: 4px; }
/* Mini assets: capturas estilizadas del propio software, no ilustraciones.
   Todos comparten lenguaje: mucho blanco, fondos suaves derivados del logo,
   sombra media, elementos flotando. Placeholders listos para reemplazarse
   por renders finales sin tocar el layout. */
.herramienta__preview {
  position: relative;
  width: 100%; height: 150px; border-radius: var(--radio-s); margin-top: 12px;
  display: grid; place-items: center; overflow: hidden;
}
.herramienta__preview--paginas { background: linear-gradient(135deg, #e9f8ee 0%, #e7f2fc 100%); }
.herramienta__preview--tienda { background: linear-gradient(135deg, #e7f2fc 0%, #e9f8ee 100%); }

/* Portadas como imagen: full width, aspecto natural, sin recorte */
.herramienta__preview--img { height: auto; overflow: visible; background: none; }
.herramienta__preview--img img { width: 100%; height: auto; display: block; border-radius: var(--radio-s); }

.mini-app {
  width: 240px; background: var(--superficie); border-radius: 10px;
  box-shadow: var(--sombra-l); overflow: hidden;
  transform: translateY(6px);
}
.mini-app__barra {
  display: flex; gap: 4px; align-items: center;
  padding: 6px 8px; border-bottom: 1px solid var(--borde-suave);
}
.mini-app__barra span { width: 5px; height: 5px; border-radius: 50%; background: #dcdce1; }
.mini-app__cuerpo { display: flex; gap: 8px; padding: 9px; }
.mini-app__media {
  width: 78px; height: 78px; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(135deg, #d9f0e0, #d4e8f8);
}
.mini-app__col { flex: 1; padding-top: 2px; }
.mini-linea { height: 5px; border-radius: 999px; background: #ececef; margin-bottom: 5px; width: 70%; }
.mini-linea--titulo { width: 90%; height: 6px; background: #dcdce1; }
.mini-linea--corta { width: 45%; }
.mini-cta { height: 13px; border-radius: 4px; background: var(--negro); margin-top: 8px; width: 80%; }

.mini-hero { height: 42px; background: linear-gradient(135deg, #d9f0e0, #d4e8f8); margin: 0; }
.mini-grid { display: flex; gap: 6px; padding: 8px; }
.mini-grid span { flex: 1; height: 34px; border-radius: 5px; background: var(--fondo); border: 1px solid var(--borde-suave); }

/* La chapita IA flota sobre el asset con el gradiente de marca. */
.mini-chip-ia {
  position: absolute; top: 10px; right: 10px;
  background: var(--gradiente-marca); color: #fff;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2px;
  padding: 3px 9px; border-radius: 999px;
  box-shadow: var(--sombra-m);
}

/* ---------- resumen de rendimiento ---------- */

.resumen-grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.resumen-card {
  border: 1px solid var(--borde); border-radius: var(--radio); background: #fff;
  padding: 20px;
}
.resumen-card__titulo { font-size: 13px; font-weight: 600; color: var(--negro); }
.resumen-card__sub { font-size: 13px; color: var(--suave); margin: 1px 0 16px; }

.mini-barra { height: 4px; border-radius: 999px; background: var(--borde-suave); overflow: hidden; }
.mini-barra div { height: 100%; background: var(--gradiente-marca); border-radius: 999px; transition: width .2s ease-out; }

.embudo-fila { margin-bottom: 14px; }
.embudo-fila:last-child { margin-bottom: 0; }
.embudo-fila__cab {
  display: flex; justify-content: space-between; align-items: flex-start;
  font-size: 13px; color: var(--texto);
}
.embudo-fila__pct { text-align: right; font-weight: 600; color: var(--negro); }
.embudo-fila__pct small { display: block; font-weight: 400; font-size: 11.5px; color: var(--suave); }
.embudo-fila__valor { font-size: 15px; font-weight: 700; color: var(--negro); margin: 2px 0 6px; }

.hito-fila { margin-bottom: 14px; }
.hito-fila:last-child { margin-bottom: 0; }
.hito-fila__cab {
  display: flex; justify-content: space-between; font-size: 13px;
  color: var(--texto); margin-bottom: 6px;
}
.hito-fila__cab span:last-child { font-weight: 600; color: var(--negro); }

.pagina-mini { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.pagina-mini__foto {
  width: 34px; height: 34px; border-radius: 7px; overflow: hidden; flex-shrink: 0;
  background: var(--fondo); border: 1px solid var(--borde);
  display: grid; place-items: center; font-size: 14px;
}
.pagina-mini__foto img { width: 100%; height: 100%; object-fit: cover; }
.pagina-mini__titulo {
  flex: 1; font-size: 13px; color: var(--negro); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pagina-mini a { font-size: 12.5px; color: var(--suave); text-decoration: none; }
.pagina-mini a:hover { color: var(--negro); text-decoration: underline; }

.resumen-vacio { text-align: center; padding: 18px 8px; }
.resumen-vacio__icono {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 10px;
  background: var(--fondo); display: grid; place-items: center;
  font-size: 18px; color: var(--suave);
}
.resumen-vacio__titulo { font-size: 13px; font-weight: 600; color: var(--negro); margin-bottom: 4px; }
.resumen-vacio p { font-size: 13px; color: var(--suave); margin-bottom: 14px; }

/* ---------- tabla de páginas ---------- */

.volver-flecha {
  background: none; border: none; font-size: 18px; color: var(--negro);
  cursor: pointer; padding: 0 6px 0 0; vertical-align: middle;
}
.volver-flecha:hover { color: var(--suave); }

.pagina-tabla { border-top: 1px solid var(--borde); }
.pagina-tabla__cabecera,
.pagina-fila {
  display: grid;
  grid-template-columns: 48px 1fr 110px 130px 150px;
  align-items: center; gap: 14px;
}
.pagina-tabla__cabecera {
  font-size: 12px; color: var(--suave); font-weight: 500;
  padding: 10px 0; border-bottom: 1px solid var(--borde);
}
.pagina-fila {
  padding: 12px 8px; margin: 0 -8px; border-radius: var(--radio-s);
  border-bottom: 1px solid var(--borde-suave);
  transition: background .15s ease-out;
}
.pagina-fila:hover { background: #fafafb; }
.pagina-fila:last-child { border-bottom: none; }
.pagina-fila__foto {
  width: 44px; height: 44px; border-radius: 8px; overflow: hidden;
  background: var(--fondo); border: 1px solid var(--borde);
  display: grid; place-items: center; font-size: 16px;
}
.pagina-fila__foto img { width: 100%; height: 100%; object-fit: cover; }
.pagina-fila__titulo { font-size: 13px; font-weight: 500; color: var(--negro); }
.pagina-fila__fecha { font-size: 12px; color: var(--suave); margin-top: 1px; }
.pagina-fila .etiqueta { margin-top: 0; justify-self: start; }
.pagina-fila__link { font-size: 12.5px; color: var(--suave); text-decoration: none; }
.pagina-fila__link:hover { color: var(--negro); text-decoration: underline; }
.pagina-fila > .btn { justify-self: end; }

@media (max-width: 860px) {
  .pasos-grilla { grid-template-columns: 1fr; }
  .metricas { grid-template-columns: repeat(2, 1fr); }
  .herramientas { grid-template-columns: 1fr; }
  .resumen-grilla { grid-template-columns: 1fr; }
  .pagina-tabla__cabecera { display: none; }
  .pagina-fila { grid-template-columns: 48px 1fr auto; grid-auto-flow: dense; }
  .pagina-fila__link { display: none; }
  .pagina-fila > .btn { grid-column: 2 / -1; justify-self: start; }
}

/* ---------- editor (formulario al lado del preview) ---------- */

.taller { display: grid; grid-template-columns: 380px 1fr; gap: 14px; align-items: start; }

.editor {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  height: 74vh; overflow-y: auto; padding: 14px;
}
.editor__titulo { font-size: 14px; font-weight: 600; color: var(--negro); }
.editor__ayuda { font-size: 12px; color: var(--suave); margin: 3px 0 12px; }
.editor__nota {
  font-size: 12px; color: var(--suave); background: var(--fondo);
  border-radius: 7px; padding: 8px 10px; margin-bottom: 10px;
}

.seccion { border: 1px solid var(--borde); border-radius: 8px; margin-bottom: 8px; }
.seccion summary {
  cursor: pointer; padding: 10px 12px; font-size: 13px; font-weight: 600;
  color: var(--negro); list-style: none; display: flex; align-items: center; user-select: none;
}
.seccion summary::-webkit-details-marker { display: none; }
.seccion summary::before { content: "▸"; margin-right: 8px; color: var(--suave); transition: transform .12s; }
.seccion[open] summary::before { transform: rotate(90deg); }
.seccion__cuerpo { padding: 4px 12px 12px; border-top: 1px solid var(--fondo); }

.campo--editor { margin-bottom: 10px; }
.campo--editor label { font-size: 12px; }
.campo--editor input, .campo--editor textarea, .campo--editor select { font-size: 13px; padding: 8px 10px; }

.fila-doble { display: grid; grid-template-columns: 1fr 116px; gap: 8px; margin-bottom: 8px; }
.fila-triple { display: grid; grid-template-columns: 52px 1fr; gap: 8px; margin-bottom: 8px; }
.fila-doble input, .fila-doble select, .fila-triple input {
  width: 100%; padding: 8px 10px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--borde); border-radius: 8px; background: #fff; color: var(--texto);
}
.fila-doble input:focus, .fila-doble select:focus, .fila-triple input:focus {
  outline: 2px solid var(--acento); outline-offset: -1px;
}

.resena-edit {
  border: 1px solid var(--borde); border-radius: 8px;
  padding: 10px; margin-bottom: 10px;
}
.resena-edit--guia { border-style: dashed; background: #fafafa; }
.resena-edit legend { font-size: 11.5px; color: var(--suave); padding: 0 4px; }
.resena-edit textarea {
  width: 100%; padding: 8px 10px; font-size: 13px; font-family: inherit; resize: vertical;
  border: 1px solid var(--borde); border-radius: 8px; background: #fff; color: var(--texto); line-height: 1.45;
}
.resena-edit textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; }

.cargador {
  background: var(--fondo); border-radius: 8px; padding: 10px; margin-bottom: 12px;
}
.cargador label { display: block; font-size: 12px; font-weight: 600; color: var(--negro); margin-bottom: 6px; }
.cargador textarea {
  width: 100%; padding: 8px 10px; font-size: 12.5px; font-family: inherit; resize: vertical;
  border: 1px solid var(--borde); border-radius: 8px; background: #fff; color: var(--texto); line-height: 1.45;
}
.cargador textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
.cargador .btn { margin-top: 8px; }
.cargador .ayuda { font-size: 11.5px; color: var(--suave); margin-top: 6px; }

.aviso-republicar {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radio);
  padding: 10px 16px; margin-bottom: 14px; font-size: 12.5px; color: var(--aviso);
}

@media (max-width: 1000px) {
  .taller { grid-template-columns: 1fr; }
  .editor { height: auto; max-height: 46vh; }
}

@media (max-width: 860px) {
  .dos-columnas { grid-template-columns: 1fr; }
  .pasos { display: none; }
}

/* ============================================================
   EMBEBIDA — adentro del iframe del admin de Shopify.
   Shopify ya pone su header, su sidebar y su fondo: los nuestros sobran
   y el ancho lo decide el iframe, no nosotros.
   ============================================================ */

/* Fondo gris admin también embebida: sin él, las cards blancas flotan
   sobre blanco y pierden toda la definición del borde + sombra. */
.embebida { background: var(--fondo); }
.embebida main { padding: 8px 28px 64px; max-width: 1440px; margin: 0 auto; }

/* La barra negra y el logo sobran (Shopify ya los pone), pero los pasos no:
   son la orientación del flujo. Queda solo eso, sin fondo. */
.embebida .barra {
  background: transparent;
  border-bottom: none;
  height: auto;
  padding: 14px 28px 0;
  position: static;
}
.embebida .barra__marca { display: none; }
.embebida .paso { color: var(--suave); }
.embebida .paso--activo { color: var(--negro); }
.embebida .paso__n { background: #e3e3e3; color: var(--suave); }
.embebida .paso--activo .paso__n { background: var(--acento); color: #fff; }
.embebida .paso--hecho .paso__n { background: var(--ok); color: #fff; }
.embebida .paso__sep { color: #c9c9c9; }

/* El preview adentro de un iframe adentro de otro iframe queda muy chato:
   se le da más aire porque el alto del admin ya viene recortado. */
.embebida .marco { height: 78vh; }
.embebida .editor { height: 78vh; }

/* ============================================================
   Pantalla COD — configuración del formulario contra reembolso
   ============================================================ */

.cod-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--radio);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}
.cod-banner .btn { margin-left: auto; flex: 0 0 auto; }
.cod-banner--ok { background: var(--ok-fondo); color: var(--ok); }
.cod-banner--ok strong { color: inherit; }
.cod-banner--aviso { background: var(--aviso-fondo); color: var(--aviso); }

.cod-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.cod-tab {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--borde);
  border-radius: 99px;
  background: var(--superficie);
  color: var(--texto);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.cod-tab:hover { background: var(--fondo); }
.cod-tab--activa {
  background: var(--negro);
  border-color: var(--negro);
  color: #fff;
}

.cod-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) { .cod-layout { grid-template-columns: 1fr; } }

.fila-doble-cod { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.cod-color__fila { display: flex; align-items: center; gap: 10px; }
.cod-color__fila input[type="color"] {
  width: 44px; height: 32px;
  padding: 2px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--superficie);
  cursor: pointer;
}
.cod-color__fila code { font-size: 12px; color: var(--suave); }

.cod-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--negro);
  cursor: pointer;
  margin: 10px 0;
}
.cod-check input { width: 16px; height: 16px; accent-color: var(--acento); }
.cod-check--activo {
  margin: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  padding: 0 14px;
  height: 36px;
  background: var(--superficie);
  font-weight: 500;
}

.cod-separador { border-top: 1px solid var(--borde-suave); margin: 16px 0; }

.cod-campo-fila {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--borde-suave);
  font-size: 13px;
}
.cod-campo-fila input[type="text"] {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  font-size: 13px;
  font-family: inherit;
}
.cod-campo-fila label { display: flex; align-items: center; gap: 6px; color: var(--suave); cursor: pointer; }
.cod-campo-fila input[type="checkbox"] { accent-color: var(--acento); }

.cod-tarifa-fila, .cod-tier-fila {
  display: grid;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.cod-tarifa-fila { grid-template-columns: 1fr 130px auto; }
.cod-tier-fila { grid-template-columns: 74px 74px 1fr auto; }
.cod-tarifa-fila input, .cod-tier-fila input {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  font-size: 13px;
  font-family: inherit;
}

/* preview */
.cod-preview { position: sticky; top: 20px; }
.cod-preview__marco {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
  background: #fff;
}
.cod-preview__prod { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cod-preview__foto {
  width: 52px; height: 52px;
  border-radius: 10px;
  background: var(--fondo);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.cod-preview__nombre { font-size: 14px; font-weight: 600; color: var(--negro); }
.cod-preview__precio { font-size: 13px; color: var(--suave); }
.cod-preview__addto {
  height: 42px;
  border: 1px solid var(--negro);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--negro);
}

/* mini-preview de la herramienta COD en el inicio */
.herramienta__preview--cod { background: linear-gradient(135deg, #ecfdf3 0%, #e0f2fe 100%); }
.mini-cta--cod { background: var(--negro); }

/* vista previa inline editable (pestaña "Vista previa" del COD) */
.cod-layout--vista { grid-template-columns: 1fr; }
.cod-vista-inline #tiq-cod-modal {
  position: static;
  inset: auto;
  padding: 0;
  background: transparent;
  overflow: visible;
  display: block;
}
.cod-vista-inline .tiq-cod-caja {
  max-width: 100%;
  box-shadow: none;
  border: 1px solid var(--borde);
  animation: none;
}
.cod-editable { cursor: text; border-radius: 4px; transition: box-shadow .1s; }
.cod-editable:hover { box-shadow: 0 0 0 1.5px var(--acento); }
.cod-editable:focus { outline: none; box-shadow: 0 0 0 2px var(--acento); background: var(--ia-fondo); }

/* responsive de la pantalla COD */
@media (max-width: 700px) {
  .cod-banner { flex-wrap: wrap; }
  .cod-banner .btn { margin-left: 0; }
  .cod-campo-fila { grid-template-columns: 1fr; gap: 6px; }
  .cod-tarifa-fila { grid-template-columns: 1fr 90px auto; }
  .cod-tier-fila { grid-template-columns: 60px 60px 1fr auto; }
  .fila-doble-cod { grid-template-columns: 1fr; }
}
.cod-layout > * { min-width: 0; }
.fila-doble-cod > * { min-width: 0; }

/* ============================================================
   Inicio radiante — chips de color e íconos con gradiente
   ============================================================ */



.paso-card { transition: box-shadow .15s ease, transform .15s ease; }
.paso-card:hover { box-shadow: var(--sombra-m); transform: translateY(-1px); }


/* interruptor maestro del COD */
.cod-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.cod-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cod-switch__pista {
  width: 40px; height: 22px; border-radius: 999px;
  background: #d3d3d9; position: relative; flex-shrink: 0;
  transition: background .15s ease;
}
.cod-switch__pista::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: left .15s ease;
}
.cod-switch input:checked + .cod-switch__pista { background: var(--ok); }
.cod-switch input:checked + .cod-switch__pista::after { left: 20px; }
.cod-switch__texto { font-size: 13.5px; font-weight: 600; color: var(--negro); }

/* ============================================================
   Editor sobre el preview (estilo PagePilot): preview a pantalla
   completa + modal por bloque + selector de imágenes
   ============================================================ */

.editor-hint {
  font-size: 13px;
  color: var(--suave);
  background: var(--ia-fondo);
  border: 1px solid var(--ia-borde);
  border-radius: var(--radio-s);
  padding: 9px 14px;
  margin-bottom: 12px;
}
.editor-hint strong { color: var(--ia); }

.marco--full { width: 100%; }
.marco--full iframe {
  width: 100%;
  height: 78vh;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: #fff;
}

/* modal de edición por bloque, como el "Editar" de PagePilot */
.editor-modal {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(15, 17, 20, .45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px;
  overflow-y: auto;
}
.editor-modal__caja {
  width: 100%;
  max-width: 860px;
  background: var(--superficie);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-l);
  animation: modal-entrada .16s ease;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
}
@keyframes modal-entrada { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.editor-modal__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--borde-suave);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--negro);
  background: var(--fondo);
  border-radius: var(--radio-l) var(--radio-l) 0 0;
}
.editor-modal__x {
  background: none; border: 0;
  font-size: 22px; line-height: 1;
  color: var(--suave); cursor: pointer;
  padding: 2px 6px;
}
.editor-modal__x:hover { color: var(--negro); }
.editor-modal__cuerpo { padding: 20px 22px; overflow-y: auto; }
.editor-modal__pie {
  display: flex;
  justify-content: flex-end;
  padding: 14px 22px;
  border-top: 1px solid var(--borde-suave);
}

/* selector de imágenes del pool */
.galeria-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.galeria-picker--chica { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.galeria-picker__img {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid var(--borde);
  border-radius: 10px;
  background: var(--fondo);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  transition: border-color .12s ease, transform .12s ease;
}
.galeria-picker__img:hover { border-color: #b9b9c2; transform: scale(1.02); }
.galeria-picker__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria-picker__img.elegida { border-color: var(--ia); box-shadow: 0 0 0 2px var(--ia-fondo); }
.galeria-picker__orden {
  position: absolute;
  top: 6px; left: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ia);
  color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* tiles de subir / quitar en el selector de imágenes */
.galeria-picker__subir {
  flex-direction: column;
  gap: 2px;
  border-style: dashed;
  color: var(--suave);
  font-size: 12px;
  cursor: pointer;
}
.galeria-picker__subir-mas { font-size: 22px; line-height: 1; color: var(--ia); }
.galeria-picker__subir:hover { border-color: var(--ia); color: var(--ia); }
.galeria-picker__subir--ocupado { opacity: .55; pointer-events: none; }
.galeria-picker__quitar {
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--suave);
}
.galeria-picker__quitar.elegida { border-color: var(--ia); color: var(--ia); }
.resena-edit__foto { margin-top: 8px; }
.resena-edit__foto summary { font-size: 12.5px; color: var(--suave); cursor: pointer; user-select: none; }
.resena-edit__foto[open] summary { margin-bottom: 8px; }

/* ============================================================
   Móvil integral — que TODO lo del escritorio se pueda hacer
   cómodo a 375px. min-width:0 en hijos de grid (el clásico) +
   ajustes por pantalla.
   ============================================================ */

.pasos-grilla > *, .resumen-grilla > *, .metricas > *, .herramientas > *,
.dos-columnas > *, .grilla > * { min-width: 0; }

@media (max-width: 700px) {
  main { padding: 20px 14px 60px; }

  /* cabeceras: título arriba, acciones abajo a lo ancho */
  .inicio-cabecera { flex-direction: column; align-items: stretch; gap: 12px; }
  .inicio-cabecera__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
  .inicio-cabecera__acciones .btn { flex: 1 1 auto; }

  .metricas { grid-template-columns: 1fr 1fr; gap: 10px; }
  .panel__cabecera { flex-direction: column; align-items: stretch; gap: 10px; }
  .progreso { text-align: left; min-width: 0; }

  /* tabla de páginas: la fila envuelve, el link pasa abajo */
  .pagina-fila { grid-template-columns: 44px 1fr; gap: 8px 10px; }
  .pagina-fila > .etiqueta { justify-self: start; }
  .pagina-fila .btn { grid-column: 1 / -1; }

  /* información del producto: una columna */
  .dos-columnas { grid-template-columns: 1fr; }

  /* preview: la barra apila y los botones ocupan el ancho */
  .preview-barra { flex-wrap: wrap; gap: 8px; }
  .preview-barra__info { flex: 1 1 100%; }
  .preview-barra .btn { flex: 1 1 auto; }
  .marco--full iframe { height: 68vh; }

  /* modal de edición: hoja completa */
  .editor-modal { padding: 0; }
  .editor-modal__caja { max-height: 100vh; min-height: 100vh; border-radius: 0; }
  .editor-modal__cab { border-radius: 0; position: sticky; top: 0; z-index: 2; }
  .editor-modal__pie { position: sticky; bottom: 0; background: var(--superficie); }
  .galeria-picker { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .galeria-picker--chica { grid-template-columns: repeat(4, 1fr); }

  /* buscador y grilla de productos */
  .grilla { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ============================================================
   Refinamiento visual (brief a11y/minimal): pasteles ultra
   suaves con borde a juego, CTA esmeralda, focus rings,
   paso deshabilitado, alturas del resumen
   ============================================================ */



/* accesibilidad: anillo de foco visible en TODO lo interactivo */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [contenteditable]:focus-visible,
summary:focus-visible, label:focus-visible {
  outline: 2px solid var(--ia);
  outline-offset: 2px;
  border-radius: 4px;
}

/* paso "Próximamente": deshabilitado visual, sin interacción implícita */
.paso-card--off { opacity: .55; }
.paso-card--off:hover { box-shadow: none; transform: none; }

/* resumen: aire garantizado para los gráficos */
.resumen-card { min-height: 200px; }

/* ============================================================
   Disciplina PagePilot: neutro, denso y sobrio. El color se usa
   una sola vez y pálido; todo lo demás es negro, gris y borde fino.
   ============================================================ */

/* cabecera sin adornos; el CTA primario es negro, como todo el sistema */
.inicio-cabecera h1 { font-size: 21px; letter-spacing: -.2px; }
.btn--marca { background: var(--negro); }
.btn--marca:hover:not(:disabled) { background: #2e2e33; }

/* pasos: chip cuadrado chico — negro sólido hecho, punteado pendiente */
.paso-card { padding: 16px; gap: 0; }
.paso-card__icono {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1.3px dashed #cfcfd4;
  background: var(--superficie);
  color: var(--negro);
}
.paso-card__icono svg { width: 14px; height: 14px; }
.paso-card__icono--hecho { background: var(--negro); border: none; color: #fff; box-shadow: none; }
.paso-card:hover { box-shadow: none; transform: none; }
.paso-card--off:hover { box-shadow: none; }

/* barra de progreso sobria */
.progreso__barra div { background: var(--negro); }

/* métricas compactas: color SOLO en las dos primeras, y apenas */
.metrica { padding: 14px 16px; }
.metrica__valor { font-size: 21px; margin-top: 6px; color: var(--negro); }
.metrica--violeta { background: #f8f7ff; border-color: #e9e6fb; }
.metrica--verde   { background: #f2fbf5; border-color: #dcf1e3; }
.metrica--violeta .metrica__valor { color: #4f46e5; }
.metrica--verde   .metrica__valor { color: #1a8a48; }
.metrica--violeta .metrica__icono { color: #4f46e5; }
.metrica--verde   .metrica__icono { color: #1a8a48; }

/* ============================================================
   COD: agregar elementos + modo edición + ofertas rediseñadas
   ============================================================ */

.cod-vista-barra { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cod-agregar { position: relative; flex: 0 0 auto; }
.cod-agregar__menu {
  position: absolute;
  right: 0; top: calc(100% + 6px);
  z-index: 50;
  width: 240px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-l);
  padding: 6px;
}
.cod-agregar__grupo {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--suave);
  padding: 8px 10px 4px;
}
.cod-agregar__menu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  border: 0; background: none;
  padding: 8px 10px;
  font-size: 13px; font-family: inherit;
  color: var(--negro);
  border-radius: var(--radio-s);
  cursor: pointer;
  text-align: left;
}
.cod-agregar__menu button:hover { background: var(--fondo); }

/* modo edición: preview + panel de propiedades */
.cod-modo-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) { .cod-modo-layout { grid-template-columns: 1fr; } }
.cod-modo-layout > * { min-width: 0; }

.cod-mov { cursor: pointer; border-radius: 6px; transition: box-shadow .1s ease; }
.cod-mov:hover { box-shadow: 0 0 0 1.5px #b9b9c2; }
.cod-mov--sel { box-shadow: 0 0 0 2px var(--ia) !important; }

.cod-props {
  position: sticky; top: 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  padding: 14px;
}
.cod-props__cab { font-size: 13.5px; font-weight: 600; color: var(--negro); margin-bottom: 10px; }
.cod-props__acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cod-props__borrar { color: var(--peligro); }
.cod-props__vacio { font-size: 13px; color: var(--suave); padding: 10px 4px; }

.cod-engranaje {
  position: absolute;
  top: 4px; right: 4px;
  width: 26px; height: 26px;
  border: 1px solid var(--borde);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  box-shadow: var(--sombra-s);
}
.cod-engranaje:hover { background: var(--fondo); }

/* diseñador de ofertas con cabeceras */
.cod-tier-cab, .cod-tier-fila { grid-template-columns: 72px 72px 1fr 56px 150px auto; }
.cod-tier-cab {
  display: grid;
  gap: 10px;
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--suave);
  padding: 0 0 6px;
}
.cod-tier-pop { display: flex; align-items: center; justify-content: center; }
.cod-tier-pop input { width: 16px; height: 16px; accent-color: var(--negro); cursor: pointer; }
.cod-tier-calc { font-size: 12px; color: var(--suave); white-space: nowrap; }
.cod-tier-calc strong { color: var(--negro); }
@media (max-width: 700px) {
  .cod-tier-cab { display: none; }
  .cod-tier-fila { grid-template-columns: 60px 60px 1fr auto; }
  .cod-tier-calc, .cod-tier-pop { display: none; }
  .cod-vista-barra { flex-direction: column; align-items: stretch; }
}
@media (max-width: 700px) {
  .cod-tier-fila, .cod-tarifa-fila { gap: 8px; }
  .cod-tier-fila { grid-template-columns: 52px 52px 1fr auto; }
  .cod-tier-fila > *, .cod-tarifa-fila > * { min-width: 0; }
  .cod-tier-fila input, .cod-tarifa-fila input { width: 100%; padding: 0 8px; }
}

/* ============================================================
   Constructor de página: panel de Sections + drag & drop
   ============================================================ */
.constructor { display: grid; grid-template-columns: 244px 1fr; gap: 16px; align-items: start; }
.constructor > * { min-width: 0; }

.panel-sections {
  position: sticky; top: 12px;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); padding: 14px;
}
.panel-sections__titulo { font-size: 14px; font-weight: 600; color: var(--negro); }
.panel-sections__ayuda { font-size: 12px; color: var(--suave); margin: 2px 0 12px; }

.section-card {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--superficie); padding: 10px;
  margin-bottom: 10px; cursor: grab; user-select: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  touch-action: none;
}
.section-card:hover { border-color: #c9c9d2; box-shadow: var(--sombra-s); }
.section-card--arrastrando { opacity: .4; }
.section-card--ghost {
  position: fixed; z-index: 99999; width: 220px; pointer-events: none;
  box-shadow: var(--sombra-l); opacity: .95; margin: 0; transform: rotate(-1deg);
}
.section-card__txt { flex: 1; min-width: 0; }
.section-card__nombre { font-size: 13px; font-weight: 600; color: var(--negro); }
.section-card__desc { font-size: 11.5px; color: var(--suave); line-height: 1.35; margin-top: 1px; }
.section-card__grip { color: #c2c2cc; font-size: 15px; }

.section-card__mini {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 8px;
  background: var(--fondo); border: 1px solid var(--borde-suave);
  display: flex; align-items: center; justify-content: center; gap: 3px;
}
.section-card__mini--videos span {
  width: 8px; height: 22px; border-radius: 2px;
  background: linear-gradient(160deg, #6366f1, #8b5cf6);
}
.section-card__mini--videos span:nth-child(2) { height: 28px; opacity: .8; }
.section-card__mini--imgs span {
  width: 9px; height: 9px; border-radius: 2px; background: #93c5fd;
}
.section-card__mini--imgs { flex-wrap: wrap; width: 44px; padding: 8px; }
.section-card__mini--imgs span:nth-child(odd) { background: #60a5fa; }

/* items dentro del modal de una section */
.sec-item {
  border: 1px solid var(--borde); border-radius: 10px;
  padding: 12px; margin-bottom: 12px;
}
.sec-item legend {
  font-size: 12px; font-weight: 600; color: var(--negro);
  padding: 0 6px; display: flex; align-items: center; gap: 8px;
}
.sec-item__manijas { display: inline-flex; gap: 2px; }
.sec-item__manijas button {
  width: 24px; height: 24px; border: 1px solid var(--borde);
  background: var(--superficie); border-radius: 6px; cursor: pointer;
  font-size: 12px; color: var(--negro); line-height: 1;
}
.sec-item__manijas button:hover:not(:disabled) { background: var(--fondo); }
.sec-item__manijas button:disabled { opacity: .4; cursor: default; }
.sec-borrar { color: var(--peligro); }

@media (max-width: 860px) {
  .constructor { grid-template-columns: 1fr; }
  .panel-sections { position: static; }
  .panel-sections .section-card { display: inline-flex; width: calc(50% - 6px); vertical-align: top; }
}

/* ============================================================
   BUNDLES — dashboard + editor. Reusa cod-tabs, cod-layout, cod-preview,
   cod-switch, campo--editor, cod-check, cod-banner (ya definidos arriba).
   ============================================================ */

/* --- métricas --- */
.bdl-metricas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.bdl-metrica {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  box-shadow: var(--sombra-s);
}
.bdl-metrica__t { font-size: 12px; color: var(--suave); font-weight: 500; display: flex; align-items: center; gap: 5px; }
.bdl-metrica__i { cursor: help; opacity: .5; font-size: 11px; }
.bdl-metrica__v { font-size: 22px; font-weight: 700; color: var(--negro); margin-top: 6px; letter-spacing: -.5px; }

@media (max-width: 900px) { .bdl-metricas { grid-template-columns: repeat(2, 1fr); } }

/* --- lista de bundles --- */
.bdl-lista { display: flex; flex-direction: column; }
.bdl-fila {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 6px;
  border-bottom: 1px solid var(--borde-suave);
  cursor: pointer;
  transition: background .12s ease;
  border-radius: 8px;
}
.bdl-fila:last-child { border-bottom: none; }
.bdl-fila:hover { background: var(--fondo); }
.bdl-fila__ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
  background: var(--fondo); display: grid; place-items: center; font-size: 20px;
}
.bdl-fila__main { flex: 1 1 auto; min-width: 0; }
.bdl-fila__nombre { font-weight: 650; color: var(--negro); display: flex; align-items: center; gap: 8px; }
.bdl-fila__sub { font-size: 13px; color: var(--suave); margin-top: 2px; }
.bdl-fila__del {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  font-size: 16px; opacity: .4; padding: 6px; border-radius: 6px; transition: opacity .12s, background .12s;
}
.bdl-fila__del:hover { opacity: 1; background: var(--peligro-fondo); }

.bdl-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.bdl-chip--off { background: var(--aviso-fondo); color: var(--aviso); }

/* --- estado vacío --- */
.bdl-vacio { text-align: center; padding: 56px 24px; }
.bdl-vacio__ico {
  width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--fondo); display: grid; place-items: center; font-size: 26px;
}
.bdl-vacio__t { font-size: 17px; font-weight: 700; color: var(--negro); }
.bdl-vacio__s { color: var(--suave); max-width: 420px; margin: 6px auto 20px; font-size: 14px; }

/* --- editor: ofertas --- */
.bdl-ofertas { display: flex; flex-direction: column; gap: 14px; margin: 14px 0; }
.bdl-oferta {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px;
  background: var(--fondo);
}
.bdl-oferta__cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.bdl-oferta__cab strong { font-size: 13px; color: var(--negro); }
.bdl-oferta__del {
  background: none; border: none; cursor: pointer; color: var(--suave);
  font-size: 15px; line-height: 1; padding: 4px 7px; border-radius: 6px;
}
.bdl-oferta__del:hover { background: var(--peligro-fondo); color: var(--peligro); }

.bdl-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bdl-checks { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.bdl-seccion {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--suave); margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--borde-suave);
}

/* --- presets de color --- */
.bdl-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.bdl-preset {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--borde); background: var(--superficie);
  border-radius: 999px; padding: 6px 13px 6px 10px; font-size: 13px; font-weight: 500;
  cursor: pointer; color: var(--texto); transition: border-color .12s;
}
.bdl-preset:hover { border-color: var(--suave); }
.bdl-preset.is-sel { border-color: var(--negro); background: var(--fondo); font-weight: 600; }
.bdl-preset__dot { width: 14px; height: 14px; border-radius: 50%; }

/* --- selector de productos --- */
.bdl-prodsel {
  border: 1px solid var(--borde); border-radius: var(--radio);
  max-height: 240px; overflow-y: auto; margin: 4px 0 14px; background: var(--superficie);
}
.bdl-prodsel--cargando { padding: 18px; color: var(--suave); font-size: 13px; text-align: center; }
.bdl-prod {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--borde-suave); cursor: pointer; font-size: 13px;
}
.bdl-prod:last-child { border-bottom: none; }
.bdl-prod:hover { background: var(--fondo); }
.bdl-prod input { flex: 0 0 auto; }
.bdl-prod__foto {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 6px; overflow: hidden;
  background: var(--fondo); display: grid; place-items: center; font-size: 14px;
}
.bdl-prod__foto img { width: 100%; height: 100%; object-fit: cover; }
.bdl-prod__t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- preview: marco de "página de producto" --- */
.bdl-preview__marco {
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 18px; background: var(--superficie); margin-top: 12px;
}
.bdl-preview__prod { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.bdl-preview__foto {
  width: 52px; height: 52px; border-radius: 10px; background: var(--fondo);
  display: grid; place-items: center; font-size: 24px;
}
.bdl-preview__nombre { font-weight: 650; color: var(--negro); }
.bdl-preview__precio { color: var(--suave); font-size: 14px; margin-top: 2px; }

/* --- menú "Crear bundle" (elegir tipo) --- */
.bdl-tipomenu {
  position: absolute; z-index: 50; width: 300px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra-l); padding: 6px; overflow: hidden;
}
.bdl-tipomenu button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 11px 12px; border-radius: 8px; cursor: pointer; transition: background .12s;
}
.bdl-tipomenu button:hover { background: var(--fondo); }
.bdl-tipomenu button strong { display: block; color: var(--negro); font-size: 14px; }
.bdl-tipomenu button span { display: block; color: var(--suave); font-size: 12px; margin-top: 2px; }

/* --- nota informativa (BXGY) --- */
.bdl-nota {
  background: var(--ia-fondo); border: 1px solid var(--ia-borde); color: var(--texto);
  border-radius: var(--radio-s); padding: 10px 12px; font-size: 13px; line-height: 1.45; margin-top: 6px;
}

/* --- barra "producto de prueba" en el preview de COD --- */
.cod-prodbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 10px 14px; margin-bottom: 16px;
}
.cod-prodbar label { font-size: 13px; font-weight: 600; color: var(--negro); white-space: nowrap; }
.cod-prodbar select { flex: 1 1 auto; max-width: 360px; }

/* imagen real en la tarjeta del preview */
.cod-preview__foto img, .bdl-preview__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* --- preview del widget real de bundles dentro de la tarjeta de Herramientas.
       El widget usa medidas en em, así que alcanza con bajar el font-size. --- */
.herramienta__preview--bdl {
  height: auto; overflow: visible; background: none;
  font-size: 11px; padding: 10px 4px 2px;
  justify-items: stretch; /* el contenedor es grid y centra: que ocupe el ancho */
}
.herramienta__preview--bdl .tiq-bdl { margin: 0; width: 100%; }
.herramienta__preview--bdl .tiq-bdl__card { padding: 9px 11px; cursor: default; }
.herramienta__preview--bdl .tiq-bdl__card:hover { border-color: rgba(0,0,0,.12); }