/*
 * La hoja de estilos de los configuradores.
 *
 * Una para los cuatro -ventas, posventa, híbrido y formularios- porque cada uno
 * tenía la suya copiada y pegada, y se separaron: dos medían 1560 y dos 1400,
 * uno tenía pestañas pegajosas y otro no. Alvaro, viendo el de formularios:
 * «esto está muy mal, mejora todo el chatbot de configuración». Con una sola
 * hoja, arreglar una cosa la arregla en los cuatro.
 *
 * EL PATRÓN ES EL DE UN EDITOR: a la izquierda qué se toca, en el centro los
 * campos, a la derecha lo que sale -la vista previa, fija, a tamaño real y a
 * toda la altura-. Es como funcionan los editores de temas y de correos que ya
 * conoce cualquiera, y por eso no hay que explicarlo.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --tinta: #141a26;
  --tinta-media: #5c6678;
  --tinta-suave: #8a94a6;
  --fondo: #eef1f6;
  --papel: #ffffff;
  --papel-hundido: #f6f8fb;
  --linea: #e1e6ee;
  --linea-fuerte: #c9d1de;
  --marca: #14213d;
  --marca-tinta: #ffffff;
  --marca-suave: #e8ecf5;
  --activo: #fcbe09;
  --bien: #1f7a4d;
  --bien-suave: #e4f4ea;
  --mal: #c0392b;
  --mal-suave: #fbe9e7;
  --aviso-fondo: #fff7df;
  --aviso-borde: #f3dc94;
  --aviso-tinta: #6b4f00;

  --radio: 10px;
  --radio-grande: 14px;
  --sombra: 0 1px 2px rgba(20, 33, 61, .06), 0 4px 14px rgba(20, 33, 61, .06);
  --sombra-alta: 0 10px 30px rgba(20, 33, 61, .14);

  --alto-cabecera: 56px;
  --alto-productos: 44px;
  --alto-barra: 60px;
  --ancho-nav: 224px;
  --ancho-campos: 640px;
  --ancho-max: 1700px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Cabecera ──────────────────────────────────────────────────────────── */

header.cab {
  height: var(--alto-cabecera);
  background: var(--marca);
  color: var(--marca-tinta);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 max(20px, calc((100% - var(--ancho-max)) / 2 + 20px));
}

header.cab h1 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}

header.cab small {
  color: rgba(255, 255, 255, .62);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

header.cab .salir {
  margin-left: auto;
  color: #fff;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  padding: 6px 12px;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}

header.cab .salir:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }

/* ── El editor: nav | campos | vista previa ─────────────────────────────── */

.editor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 18px 20px calc(var(--alto-barra) + 18px);
  display: grid;
  grid-template-columns: var(--ancho-nav) minmax(0, var(--ancho-campos)) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/*
 * Lo que va fijo -la nav y la vista previa- se pega bajo las dos barras de
 * arriba y llega hasta la barra de guardar. Es la única altura que tiene
 * sentido: la ventana menos lo que ya está ocupado.
 */
.editor > .secciones,
.editor > .previa {
  position: sticky;
  top: calc(var(--alto-cabecera) + var(--alto-productos) + 18px);
  max-height: calc(100vh - var(--alto-cabecera) - var(--alto-productos) - var(--alto-barra) - 36px);
}

/* ── Nav de secciones ──────────────────────────────────────────────────── */

.secciones {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: auto;
  scrollbar-width: thin;
}

.secciones button {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  border-radius: var(--radio);
  padding: 9px 12px 9px 14px;
  cursor: pointer;
  font-family: inherit;
  color: var(--tinta-media);
  position: relative;
  transition: background .15s ease, color .15s ease;
}

.secciones button b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tinta);
  letter-spacing: -.005em;
}

.secciones button span {
  display: block;
  font-size: 11.5px;
  color: var(--tinta-suave);
  margin-top: 1px;
}

.secciones button:hover { background: rgba(20, 33, 61, .05); }

.secciones button.activa {
  background: var(--papel);
  box-shadow: var(--sombra);
}

.secciones button.activa::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--activo);
}

.secciones button:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* ── Tarjetas y campos ─────────────────────────────────────────────────── */

.campos { min-width: 0; display: grid; gap: 16px; }

.card {
  background: var(--papel);
  border-radius: var(--radio-grande);
  padding: 20px 22px 22px;
  box-shadow: var(--sombra);
}

.card.tab-oculta { display: none; }

.card h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--tinta);
}

.card > h2 + .hint { margin: 0 0 14px; }

label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta);
  margin: 14px 0 5px;
}

label small {
  font-weight: 400;
  color: var(--tinta-suave);
  font-size: 11.5px;
}

label code, .hint code {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 11px;
  background: var(--papel-hundido);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 0 4px;
}

input[type=text], input[type=url], input[type=number], input[type=email], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--tinta);
  background: var(--papel);
  transition: border-color .15s ease, box-shadow .15s ease;
}

input::placeholder, textarea::placeholder { color: var(--tinta-suave); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(20, 33, 61, .12);
}

textarea { min-height: 84px; resize: vertical; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; }

.color-field { display: flex; align-items: center; gap: 8px; }
.color-field input[type=color] {
  width: 40px; height: 38px; padding: 3px; flex: none;
  border: 1px solid var(--linea-fuerte); border-radius: 8px; background: #fff; cursor: pointer;
}
.color-field input[type=text] { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }

.check {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 500; margin: 12px 0 4px; cursor: pointer;
}
.check input { width: 16px; height: 16px; accent-color: var(--marca); margin: 0; }

.hint {
  font-size: 12.5px;
  color: var(--tinta-media);
  margin: 6px 0 0;
  line-height: 1.5;
  max-width: 68ch;
}

.hint b { color: var(--tinta); font-weight: 600; }

.actions {
  display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center;
}

/* ── Botones ───────────────────────────────────────────────────────────── */

.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.btn[disabled] { opacity: .55; cursor: default; }

.btn-primary { background: var(--marca); color: var(--marca-tinta); }
.btn-primary:hover { background: #1c2d52; }

.btn-secondary {
  background: var(--papel);
  color: var(--marca);
  border-color: var(--linea-fuerte);
}
.btn-secondary:hover { border-color: var(--marca); background: var(--marca-suave); }

.btn-ghost { background: transparent; color: var(--tinta-media); }
.btn-ghost:hover { background: rgba(20, 33, 61, .06); color: var(--tinta); }

.btn-small { padding: 6px 11px; font-size: 12.5px; }

/* ── Avisos y estados ──────────────────────────────────────────────────── */

.aviso {
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  border-radius: var(--radio);
  padding: 11px 14px;
  font-size: 13px;
  color: var(--aviso-tinta);
  line-height: 1.5;
}
.aviso b { color: inherit; }

#estado, .estado {
  font-size: 12.5px;
  color: var(--tinta-media);
}

/* ── La vista previa ───────────────────────────────────────────────────── */

.previa {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  background: var(--papel);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.previa-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linea);
}

.previa-cab h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

.previa-cab .previa-nota {
  display: block;
  font-size: 12px;
  color: var(--tinta-suave);
  margin-top: 1px;
}

.previa-cab .actions { margin: 0; }

/*
 * El escenario. Fondo de puntos y un poco hundido, para que se lea como "aquí
 * es donde se pinta" y no como una tarjeta más. El formulario cae en el centro
 * a su tamaño de verdad; si es más alto que el hueco, el escenario hace scroll
 * -no el formulario-.
 */
.vista {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 28px 24px;
  background-color: var(--papel-hundido);
  background-image: radial-gradient(rgba(20, 33, 61, .10) 1px, transparent 1px);
  background-size: 18px 18px;
  scrollbar-width: thin;
}

.vista > * { max-width: 760px; margin: 0 auto; }

.vista.oscura { background-color: #1f2430; background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px); }

/* ── La barra de guardar ───────────────────────────────────────────────── */

.barra-guardar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--alto-barra);
  z-index: 30;
  background: var(--papel);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -6px 20px rgba(20, 33, 61, .08);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 max(20px, calc((100% - var(--ancho-max)) / 2 + 20px));
}

.barra-guardar .estado { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-guardar .btn-primary { padding: 10px 20px; }

/* ── Código y direcciones ──────────────────────────────────────────────── */

pre.snippet, .url-final {
  background: var(--marca);
  color: #dbe4ff;
  border-radius: var(--radio);
  padding: 13px 15px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}
pre.snippet { overflow-x: auto; white-space: pre; }
.url-final { word-break: break-all; }

textarea#snippet {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 12px;
  background: var(--marca);
  color: #dbe4ff;
  border-color: var(--marca);
  min-height: 150px;
}

/* ── Landings ──────────────────────────────────────────────────────────── */

.landings { display: grid; gap: 10px; margin-top: 6px; }

.landing {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 14px;
  align-items: center;
  background: var(--papel);
  transition: border-color .15s ease;
}
.landing:hover { border-color: var(--linea-fuerte); }
.landing.apagada { background: var(--papel-hundido); }
.landing.apagada b { color: var(--tinta-media); }

.landing b { font-size: 14px; font-weight: 600; display: block; letter-spacing: -.005em; }
.landing .url {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 11.5px;
  color: var(--tinta-media);
  word-break: break-all;
  margin-top: 3px;
}

.landing .marca-estado {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 7px;
  margin-right: 8px;
  vertical-align: 2px;
}
.landing .viva { background: var(--bien-suave); color: var(--bien); }
.landing .muerta { background: var(--linea); color: var(--tinta-media); }
.landing .acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ── Móvil y pantallas medianas ────────────────────────────────────────── */

@media (max-width: 1280px) {
  .editor { grid-template-columns: var(--ancho-nav) minmax(0, 1fr); }
  .editor > .previa {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
    min-height: 520px;
  }
}

@media (max-width: 820px) {
  .editor { grid-template-columns: 1fr; padding: 12px 12px calc(var(--alto-barra) + 12px); }
  .editor > .secciones {
    position: static;
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
  }
  .secciones button { flex: none; padding: 8px 12px; }
  .secciones button span { display: none; }
  .secciones button.activa::before { display: none; }
  .secciones button.activa { box-shadow: inset 0 -3px 0 var(--activo); border-radius: 8px 8px 0 0; }
  .row, .row3 { grid-template-columns: 1fr; }
  header.cab small { display: none; }
}