/* ============================================================
   AVANTYS · Estilos para artículos de la base de conocimiento
   Añadir al final del custom.css de la plantilla de WHMCS.
   Todo va acotado bajo .av-doc: no toca nada de la plantilla.
   Tokens fuente: apps/refresh/src/styles/global.css
   ============================================================ */

.av-doc {
  --navy: #002040;
  --navy-light: #003366;
  --cyan: #00b8c4;
  --bone: #f5f1ea;
  --paper: #ffffff;
  --ash: #4a4a4a;
  --shadow-brutal: 6px 6px 0 0 #002040;
  --shadow-brutal-cyan: 6px 6px 0 0 #00b8c4;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --font-display: 'Cabinet Grotesk', 'Archivo Black', system-ui, sans-serif;

  background: var(--bone);
  color: var(--navy);
  font-family: var(--font-sans);
  line-height: 1.6;
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  font-size: 17px;
}

.av-doc *,
.av-doc *::before,
.av-doc *::after { box-sizing: border-box; }

.av-doc ::selection { background: var(--cyan); color: var(--navy); }

/* Etiqueta mono en mayúsculas */
.av-doc .av-kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--navy);
  border: 2px solid var(--navy);
  background: var(--cyan);
  display: inline-block;
  padding: 0.35rem 0.7rem;
  margin-bottom: 1.25rem;
}

/* Titulares display */
.av-doc h1,
.av-doc h2,
.av-doc h3 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
  color: var(--navy);
}
.av-doc h1 { font-size: clamp(2.1rem, 6.5vw, 3.4rem); line-height: 0.88; }
.av-doc h2 {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  margin-top: 3rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--navy);
}
.av-doc h3 { font-size: clamp(1.1rem, 3vw, 1.35rem); margin-top: 2rem; }

.av-doc p { margin: 0 0 1rem; }
.av-doc strong { font-weight: 700; }

.av-doc .av-lead {
  font-size: 1.15rem;
  border-left: 6px solid var(--cyan);
  padding-left: 1rem;
  margin-bottom: 2rem;
}

.av-doc ul,
.av-doc ol { margin: 0 0 1.25rem; padding-left: 1.3rem; }
.av-doc li { margin-bottom: 0.5rem; }

/* Tarjetas brutalistas */
.av-doc .av-card {
  border: 2px solid var(--navy);
  background: var(--paper);
  box-shadow: var(--shadow-brutal);
  padding: 1.4rem 1.5rem;
  margin: 1.75rem 0;
}
.av-doc .av-card.is-accent { box-shadow: var(--shadow-brutal-cyan); }
.av-doc .av-card.is-warn { background: var(--bone); }
.av-doc .av-card > :first-child { margin-top: 0; }
.av-doc .av-card > :last-child { margin-bottom: 0; }

.av-doc .av-card-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  font-weight: 700;
  display: block;
  margin-bottom: 0.6rem;
  color: var(--navy-light);
}

/* Código */
.av-doc pre {
  font-family: var(--font-mono);
  background: var(--navy);
  color: var(--bone);
  border: 2px solid var(--navy);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 0 0 1.25rem;
}
.av-doc code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--paper);
  border: 1px solid var(--navy);
  padding: 0.1em 0.35em;
}
.av-doc pre code { background: none; border: none; padding: 0; color: inherit; }

/* Tablas */
.av-doc .av-table-wrap { overflow-x: auto; margin: 0 0 1.5rem; }
.av-doc table { border-collapse: collapse; width: 100%; min-width: 480px; }
.av-doc th,
.av-doc td {
  border: 2px solid var(--navy);
  padding: 0.7rem 0.8rem;
  text-align: left;
  vertical-align: top;
  font-size: 0.95rem;
}
.av-doc th {
  background: var(--navy);
  color: var(--bone);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 700;
}
.av-doc td { background: var(--paper); }

/* Listas sí / no */
.av-doc .av-yes,
.av-doc .av-no { list-style: none; padding-left: 0; }
.av-doc .av-yes li,
.av-doc .av-no li { padding-left: 1.9rem; position: relative; }
.av-doc .av-yes li::before {
  content: "SÍ";
  position: absolute; left: 0; top: 0.1em;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
  color: var(--navy); background: var(--cyan);
  border: 1px solid var(--navy); padding: 0 0.25em;
}
.av-doc .av-no li::before {
  content: "NO";
  position: absolute; left: 0; top: 0.1em;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
  color: var(--bone); background: var(--navy);
  border: 1px solid var(--navy); padding: 0 0.25em;
}

/* CTA final */
.av-doc .av-cta {
  border: 2px solid var(--navy);
  background: var(--navy);
  color: var(--bone);
  box-shadow: var(--shadow-brutal-cyan);
  padding: 1.75rem 1.6rem;
  margin-top: 3rem;
}
.av-doc .av-cta h2 {
  color: var(--bone);
  border-bottom: none;
  margin-top: 0;
  padding-bottom: 0;
}
.av-doc .av-cta a {
  display: inline-block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--cyan);
  color: var(--navy);
  border: 2px solid var(--bone);
  padding: 0.7rem 1.2rem;
  text-decoration: none;
  margin-top: 0.75rem;
}
.av-doc .av-cta a:hover { background: var(--bone); }

.av-doc a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.av-doc a:focus-visible,
.av-doc .av-cta a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

.av-doc .av-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ash);
  border-top: 2px solid var(--navy);
  padding-top: 1rem;
  margin-top: 3rem;
}

/* ============================================================
   Arreglo de la tira de etiquetas del artículo
   ------------------------------------------------------------
   WHMCS mete TODAS las etiquetas dentro de un único
   <span class="badge badge-pill badge-info">, y Bootstrap le
   aplica white-space: nowrap. Con más de 4 o 5 etiquetas la
   tira no cabe, no hace salto de línea y provoca scroll
   horizontal en TODA la página.
   Esto la deja fluir en varias líneas y con el look brutalista.
   ============================================================ */

.list-inline .badge-info {
  white-space: normal !important;
  display: inline-block;
  max-width: 100%;
  text-align: left;
  line-height: 1.5;
  background: #00b8c4;
  color: #002040;
  border: 2px solid #002040;
  border-radius: 0;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.45rem 0.7rem;
}

/* La lista que contiene etiquetas y votos: que nunca desborde */
.list-inline {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* NOTA: la nube de etiquetas del lateral se pliega por defecto, pero NO se hace
   desde aquí. Plegarla con CSS rompía el botón de desplegar: el JS del tema no
   mira si el panel está visible, mira la clase `minimised`, así que el primer
   clic no hacía nada. Se hace con el mismo patrón que usa el tema para móviles
   (ocultar + añadir la clase), en las plantillas knowledgebase*.tpl. */

/* ============================================================
   Titular de la ficha (H1 de la plantilla de WHMCS)
   ------------------------------------------------------------
   La plantilla ya pinta <h1>{$kbarticle.title}</h1>. Por eso los
   artículos NO llevan <h1> propio: si lo llevan salen DOS H1 con
   el mismo texto, se ve el título repetido y penaliza en buscadores.
   Aquí se le da al H1 de la plantilla el mismo aspecto brutalista.
   El selector se acota con :has(> article), que solo se cumple en
   la ficha de un artículo. No toca ninguna otra página.
   Los tokens van literales: las variables viven en .av-doc y este
   H1 está fuera de ese contenedor.
   ============================================================ */
.card-body:has(> article) > h1 {
  font-family: 'Cabinet Grotesk', 'Archivo Black', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.88;
  text-transform: uppercase;
  color: #002040;
  font-size: clamp(2.1rem, 6.5vw, 3.4rem);
  margin: 0 0 1.25rem;
}

/* Sin H1 dentro, el kicker es lo primero del artículo y no necesita
   el aire de arriba que traía cuando iba pegado al titular. */
.av-doc > .av-kicker:first-child { margin-top: 0; }