/* ================================
   VIX KB (WP Twenty Twenty-One + WHMCS 9.x)
   CSS consolidado (sin duplicados)
================================== */

/* Variables (union de todos los :root) */
:root{
  --vix-primary:#0052cc;
  --vix-primary-ink:#002e73;

  --vix-soft:#eef2f7;
  --vix-muted-bg:#f8f9fa;
  --vix-border:#e7e7e7;

  --vix-shadow:0 2px 4px rgba(0,0,0,.06);
  --vix-radius:12px;

  --vix-success:#28a745;
  --vix-success-bg:#d4edda;
  --vix-success-border:#28a745;
  --vix-success-ink:#155724;

  --vix-warning-bg:#fff3cd;
  --vix-warning-border:#ffeeba; /* en algunas secciones se usaba #ffc107 como borde “fuerte” */
  --vix-warning-ink:#856404;

  --vix-danger:#d9534f;

  --vix-info-bg:#d1ecf1;
  --vix-info-border:#17a2b8;
  --vix-info-ink:#0c5460;
}

/* ================================
   BASE SCOPE (WP + WHMCS)
================================== */
#main-body .vix-kb,
.vix-kb{
  font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color:#444;
  line-height:1.8;
  width:100%;
  max-width:980px; /* en tu CSS final predominaba 980 */
  box-sizing:border-box;

  /* Anti-recorte global */
  overflow-wrap:anywhere;
  word-break:break-word;
}

#main-body .vix-kb *,
.vix-kb *{
  box-sizing:border-box;
}

/* Ajustes de títulos dentro del artículo (sin pelearse con el tema) */
.vix-kb h2{ margin:0 0 12px; }
.vix-kb h4{ margin:18px 0 10px; }

/* Links consistentes */
#main-body .vix-kb a,
.vix-kb a{
  color:var(--vix-primary);
  font-weight:800;
  text-decoration:underline;
}

/* ================================
   HERO / INTRO
================================== */
#main-body .vix-kb__hero,
.vix-kb__hero{
  background:var(--vix-soft);
  border-left:5px solid var(--vix-primary);
  padding:18px;
  border-radius:0 var(--vix-radius) var(--vix-radius) 0;
  margin:0 0 18px;
}

/* ================================
   H2 “estilizado” (cuando usas clase .vix-kb__h2)
================================== */
#main-body .vix-kb__h2,
.vix-kb__h2{
  color:var(--vix-primary);
  border-bottom:2px solid #eee;
  padding-bottom:10px;
  margin-bottom:14px;
}

/* ================================
   CARDS / SECTIONS
================================== */
#main-body .vix-kb__card,
.vix-kb__card{
  background:#fff;
  border:1px solid var(--vix-border);
  border-radius:var(--vix-radius);
  padding:18px;
  margin:16px 0;
  box-shadow:var(--vix-shadow);
}

#main-body .vix-kb__section,
.vix-kb__section{
  background:#fff;
  border:1px solid var(--vix-border);
  border-radius:var(--vix-radius);
  padding:16px;
  margin:16px 0;
  box-shadow:var(--vix-shadow);
}

/* Variantes */
.vix-kb__card--warningTop{ border-top:4px solid #ffc107; } /* venía del primer bloque */
#main-body .vix-kb__card--success,
.vix-kb__card--success{ border-top:4px solid var(--vix-success-border); }

/* ================================
   BADGES
================================== */
#main-body .vix-kb__badge,
.vix-kb__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
  margin-bottom:10px;
  background:var(--vix-primary);
  color:#fff;
}

.vix-kb__badge--primary{ background:var(--vix-primary); color:#fff; }
.vix-kb__badge--neutral{ background:#6c757d; color:#fff; }

/* ================================
   ALERTAS
================================== */
.vix-kb__alert{
  padding:14px;
  border-radius:10px;
  margin:12px 0 14px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  border-left:5px solid transparent;
}
.vix-kb__alert strong{ display:block; margin-bottom:2px; }
.vix-kb__alertIcon{ line-height:1; font-size:18px; margin-top:1px; }

.vix-kb__alert--success{
  background:var(--vix-success-bg);
  color:var(--vix-success-ink);
  border-left-color:var(--vix-success-border);
}
.vix-kb__alert--warning{
  background:var(--vix-warning-bg);
  color:var(--vix-warning-ink);
  border-left-color:#ffc107;
}

/* ================================
   CAJA NAMESERVERS
================================== */
.vix-kb__nsBox{
  background:#f1f5ff;
  border:1px dashed var(--vix-primary);
  padding:14px;
  border-radius:10px;
  margin:12px 0;
  box-shadow:inset 0 0 0 1px rgba(0,82,204,.06);
}
.vix-kb__nsTitle{
  display:block;
  font-weight:800;
  margin-bottom:8px;
  color:var(--vix-primary-ink);
}
.vix-kb__code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:15px;
  color:var(--vix-primary-ink);
  overflow-x:auto;
  white-space:pre;
  margin:0;
}

/* Code inline (WHMCS/WP) */
#main-body .vix-kb code,
.vix-kb code{
  display:inline-block;
  max-width:100%;
  padding:2px 6px;
  border-radius:6px;
  background:#f6f8fa;
  border:1px solid #eef1f4;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  overflow-x:auto;
  word-break:break-word;
}

/* ================================
   HIGHLIGHTS
================================== */
#main-body .vix-kb__highlight,
.vix-kb__highlight{
  color:var(--vix-primary);
  font-weight:800;
}
/* (en un bloque lo usabas rojo) */
.vix-kb__highlight--danger,
#main-body .vix-kb__highlight--danger{
  color:var(--vix-danger);
  font-weight:800;
}

/* ================================
   TIME BOX (FLEX) – anti-recorte
================================== */
#main-body .vix-kb__timeBox,
.vix-kb__timeBox{
  display:flex;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
  background:var(--vix-warning-bg);
  border:1px solid var(--vix-warning-border);
  padding:16px;
  border-radius:10px;
  margin:20px 0;
}
#main-body .vix-kb__timeIcon,
.vix-kb__timeIcon{
  font-size:28px;
  line-height:1;
  flex:0 0 auto;
}
#main-body .vix-kb__timeContent,
.vix-kb__timeContent{
  min-width:0;
  flex:1 1 240px;
}

/* ================================
   EJEMPLOS / ITEMS / FLOW
================================== */
#main-body .vix-kb__example,
.vix-kb__example{
  background:#fff;
  border:1px solid var(--vix-border);
  border-radius:var(--vix-radius);
  padding:16px;
  margin:18px 0;
  box-shadow:var(--vix-shadow);
}

#main-body .vix-kb__exampleTitle,
.vix-kb__exampleTitle{
  display:inline-block;
  background:var(--vix-primary);
  color:#fff;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.3px;
  margin-bottom:10px;
}

#main-body .vix-kb__item,
.vix-kb__item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  padding:12px;
  border-radius:10px;
  margin:10px 0;
}
#main-body .vix-kb__item--main,
.vix-kb__item--main{ background:var(--vix-muted-bg); }

#main-body .vix-kb__item--addon,
.vix-kb__item--addon{
  background:#f1f5ff;
  border:1px solid rgba(0,82,204,.12);
}

#main-body .vix-kb__icon,
.vix-kb__icon{
  font-size:20px;
  line-height:1;
  flex:0 0 auto;
}
#main-body .vix-kb__text,
.vix-kb__text{
  min-width:0;
  flex:1 1 240px;
}

/* Flow */
#main-body .vix-kb__flow,
.vix-kb__flow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding:12px;
  background:var(--vix-muted-bg);
  border-radius:10px;
  border:1px solid #f0f0f0;
  margin-top:10px;
}
#main-body .vix-kb__pill,
.vix-kb__pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--vix-border);
  font-weight:800;
  min-width:0;
}
#main-body .vix-kb__arrow,
.vix-kb__arrow{
  font-weight:900;
  color:var(--vix-primary);
}

/* ================================
   LISTAS / STEPS
================================== */
#main-body .vix-kb__steps,
.vix-kb__steps{
  margin:0;
  padding-left:18px;
}
#main-body .vix-kb__steps li,
.vix-kb__steps li{ margin:8px 0; }

/* List genérica en secciones (welcome/otros) */
.vix-kb__section ul{ padding-left:18px; }
.vix-kb__section li{ margin:6px 0; }
#main-body .vix-kb__list li,
.vix-kb__list li{ margin:6px 0; }

/* ================================
   IMG SLOT + IMÁGENES (centradas y responsivas)
================================== */
#main-body .vix-kb__imgSlot,
.vix-kb__imgSlot{
  margin:14px 0 18px;
  padding:14px;
  border-radius:12px;
  border:2px dashed rgba(0,82,204,.35);
  background:#f7f9ff;
  text-align:center;
}

#main-body .vix-kb__imgLabel,
.vix-kb__imgLabel{
  display:block;
  font-weight:800;
  color:var(--vix-primary);
  margin-bottom:6px;
}

#main-body .vix-kb__imgHint,
.vix-kb__imgHint{
  margin:0;
  font-size:14px;
  color:#556;
}

/* Cualquier <img> dentro de .vix-kb */
#main-body .vix-kb img,
.vix-kb img{
  display:block;
  max-width:100%;
  height:auto;
  margin:12px auto;
  border-radius:12px;
  border:1px solid var(--vix-border);
  box-shadow:var(--vix-shadow);
}

/* Si la imagen está dentro del slot, la centramos (ya lo hace margin auto) */
#main-body .vix-kb__imgSlot img,
.vix-kb__imgSlot img{
  margin:10px auto 0;
}

/* ================================
   NOTAS
================================== */
/* Nota simple (primer bloque la quería italics) */
.vix-kb__note{
  margin-top:10px;
  color:#555;
  font-style:italic;
}

/* Nota tipo “warning” (la mayoría de tutoriales) */
#main-body .vix-kb__note,
.vix-kb__note{
  background:var(--vix-warning-bg);
  border:1px solid var(--vix-warning-border);
  border-radius:12px;
  padding:14px 16px;
  margin-top:12px;
  font-style:normal; /* mantiene el look de los tutoriales */
  color:inherit;
}

/* Nota informativa (Addon Domain) */
#main-body .vix-kb__note--info,
.vix-kb__note--info{
  background:var(--vix-info-bg);
  border-left:5px solid var(--vix-info-border);
  color:var(--vix-info-ink);
  padding:14px 16px;
  border-radius:10px;
  margin-top:18px;
  border-top:0;
  border-right:0;
  border-bottom:0;
}

/* Bloque ejemplo “success” (Parked Domain) */
#main-body .vix-kb__example--success,
.vix-kb__example--success{
  border-left:4px solid var(--vix-success);
  background:var(--vix-success-bg);
  color:var(--vix-success-ink);
  padding:14px 16px;
  border-radius:10px;
  margin:14px 0;
}

/* ================================
   CTA + BOTÓN
================================== */
#main-body .vix-kb__cta,
.vix-kb__cta{
  text-align:center;
  margin-top:22px;
}

#main-body .vix-kb__cta em,
.vix-kb__cta em{
  display:inline-block;
  max-width:100%;
}

#main-body .vix-kb__btn,
.vix-kb__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 20px;
  background:var(--vix-primary);
  color:#fff !important;
  text-decoration:none !important;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  box-shadow:var(--vix-shadow);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
  margin-top:8px;
}
#main-body .vix-kb__btn:hover,
#main-body .vix-kb__btn:focus,
.vix-kb__btn:hover,
.vix-kb__btn:focus{
  filter:brightness(.95);
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}

/* CTA “bloque” del primer set */
.vix-kb__cta--boxed{
  background:var(--vix-muted-bg);
  border:1px solid var(--vix-border);
  padding:18px;
  border-radius:var(--vix-radius);
  margin-top:22px;
  text-align:center;
}

/* ================================
   Responsive
================================== */
@media (max-width: 520px){
  #main-body .vix-kb__hero, .vix-kb__hero{ padding:16px; }
  #main-body .vix-kb__card, .vix-kb__card{ padding:16px; }
  #main-body .vix-kb__section, .vix-kb__section{ padding:16px; }
}

@media (max-width: 480px){
  .vix-kb__alert{ padding:12px; }
  .vix-kb__code{ font-size:14px; }
}