/* ===========================================================
   X-Treme Labs — Panel de marketing
   Se carga DESPUÉS de admin.css: reusa todo su layout y solo
   cambia el color de acento (para distinguir de un vistazo en
   qué panel se está trabajando) y suma componentes propios.
   =========================================================== */

:root {
  --gold: #4fb6e0;
  --gold-light: #a5e3ff;
  --gold-glow: rgba(79, 182, 224, 0.32);
  --border: rgba(79, 182, 224, 0.24);
  --ok: #2ecc71;
  --warn: #e8b339;
  --bad: #e05c6e;
}

.btn-primary { color: #04202b; }

/* —— Estado de una tarea / configuración —— */
.status-line {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.status-line + .status-line { margin-top: 0.6rem; }
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.45rem;
  background: var(--muted);
}
.status-dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.18); }
.status-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(232, 179, 57, 0.18); }
.status-dot.bad { background: var(--bad); box-shadow: 0 0 0 3px rgba(224, 92, 110, 0.18); }
.status-body { flex: 1; min-width: 0; }
.status-body strong { display: block; font-size: 0.9rem; }
.status-body small { display: block; color: var(--muted); font-size: 0.78rem; line-height: 1.45; }
.status-line .row-actions { flex-shrink: 0; }

/* —— Vista previa de resultado de Google —— */
.serp-preview {
  background: #fff;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  color: #202124;
  font-family: Arial, sans-serif;
  max-width: 600px;
}
.serp-preview .serp-site { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.serp-preview .serp-favicon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #0c0c0e;
  display: grid; place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.serp-preview .serp-favicon img { width: 18px; height: 18px; object-fit: contain; }
.serp-preview .serp-domain { font-size: 14px; line-height: 1.2; color: #202124; }
.serp-preview .serp-url { font-size: 12px; color: #4d5156; word-break: break-all; }
.serp-preview .serp-title {
  color: #1a0dab;
  font-size: 20px;
  line-height: 1.3;
  margin: 0.1rem 0 0.25rem;
  font-weight: 400;
}
.serp-preview .serp-desc { color: #4d5156; font-size: 14px; line-height: 1.58; }

/* —— Vista previa de compartido (WhatsApp / redes) —— */
.social-preview {
  max-width: 420px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
  background: #111b21;
}
.social-preview .social-img {
  aspect-ratio: 1.91 / 1;
  background: #000 center/cover no-repeat;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.8rem;
}
.social-preview .social-body { padding: 0.7rem 0.85rem 0.85rem; }
.social-preview .social-host { font-size: 0.7rem; color: #8696a0; text-transform: lowercase; }
.social-preview .social-title { font-size: 0.92rem; font-weight: 600; margin: 0.15rem 0 0.2rem; color: #e9edef; }
.social-preview .social-desc { font-size: 0.8rem; color: #8696a0; line-height: 1.4; }

.preview-cols { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .preview-cols { grid-template-columns: 1fr 420px; } }

/* —— Contador de caracteres —— */
.char-count { font-size: 0.72rem; color: var(--muted); text-align: right; margin-top: 0.25rem; }
.char-count.warn { color: var(--warn); }
.char-count.bad { color: var(--bad); }

/* —— Gráficos en CSS puro —— */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 180px;
  padding-top: 0.5rem;
}
.chart-col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.chart-bar {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: filter 0.15s;
}
.chart-col:hover .chart-bar { filter: brightness(1.25); }
.chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.4rem;
  border-top: 1px solid var(--border-soft);
  padding-top: 0.4rem;
}

.bar-list { display: flex; flex-direction: column; gap: 0.6rem; }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 0.75rem; align-items: center; }
.bar-row .bar-label { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .bar-value { font-size: 0.85rem; color: var(--gold-light); font-weight: 600; }
.bar-row .bar-track {
  grid-column: 1 / -1;
  height: 7px;
  background: var(--panel-2);
  border-radius: 999px;
  overflow: hidden;
}
.bar-row .bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

/* —— Embudo de conversión —— */
.funnel { display: flex; flex-direction: column; gap: 0.5rem; }
.funnel-step {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(90deg, rgba(79, 182, 224, 0.16), transparent);
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
}
.funnel-step .funnel-n { font-family: "Cormorant Garamond", serif; font-size: 1.6rem; color: var(--gold-light); line-height: 1; }
.funnel-step .funnel-l { flex: 1; font-size: 0.85rem; }
.funnel-step .funnel-pct { font-size: 0.78rem; color: var(--muted); }

/* —— Checklist de lanzamiento —— */
.checklist { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  font-size: 0.88rem;
}
.checklist li .mark { flex-shrink: 0; font-size: 1rem; line-height: 1.35; }
.checklist li.done { opacity: 0.65; }
.checklist li small { display: block; color: var(--muted); font-size: 0.76rem; margin-top: 0.15rem; line-height: 1.45; }

/* —— Bloques de código / salida —— */
.code-block {
  background: #08080a;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #c8d6dd;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 340px;
  overflow: auto;
}

/* —— Filas de la lista de SEO del catálogo —— */
.seo-row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.seo-row + .seo-row { margin-top: 0.55rem; }
.seo-row .thumb { width: 46px; height: 46px; }
.seo-row .seo-info { min-width: 0; }
.seo-row .seo-info strong { display: block; font-size: 0.9rem; }
.seo-row .seo-info small { display: block; color: var(--muted); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tag-inline {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}
.tag-inline.ok { background: rgba(46, 204, 113, 0.16); color: #6ff0a8; }
.tag-inline.warn { background: rgba(232, 179, 57, 0.16); color: #f2d488; }

.help-steps { counter-reset: paso; list-style: none; display: flex; flex-direction: column; gap: 0.85rem; }
.help-steps > li {
  counter-increment: paso;
  position: relative;
  padding-left: 2.4rem;
  font-size: 0.88rem;
  line-height: 1.6;
}
.help-steps > li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 182, 224, 0.15);
  color: var(--gold-light);
  font-size: 0.8rem;
  font-weight: 700;
}
.help-steps strong { color: var(--text); }