/* Contenedor base (ya lo tenías) */
.cfs-toc {
  --cfs-gap: .5rem;
  --cfs-radius: .75rem;
  --cfs-bg: #fff;
  --cfs-fg: #111;
  --cfs-border:#e5e7eb;
  --cfs-muted:#6b7280;

  position:relative;
  border:1px solid var(--cfs-border);
  border-radius:var(--cfs-radius);
  padding: 1rem 1.25rem; /* 👈 más padding, sobre todo izquierda */
  background: var(--cfs-bg);
  color: var(--cfs-fg);
	
	margin-bottom: 1.5rem; /* 👈 espacio extra debajo */
}
.cfs-toc.is-sticky { position: sticky; top: 1rem; }

/* Título/botón */
.cfs-toc__toggle, .cfs-toc__title { display:block; width:100%; font-weight:600; margin-bottom:.5rem; }
.cfs-toc__toggle { appearance:none; border:0; background:transparent; text-align:left; cursor:pointer; padding:.25rem 0; }

/* Lista y elementos */
.cfs-toc__list { margin:0; padding-left:1rem; }
.cfs-toc__item { margin:.25rem 0; }
.cfs-toc__link { text-decoration:none; }
.cfs-toc__link:focus { outline: 2px solid; outline-offset: 2px; }

/* Ocultar lista cuando aria-expanded="false" en el botón anterior */
.cfs-toc__toggle[aria-expanded="false"] + .cfs-toc__list { display:none; }

/* Numeración automática */
.cfs-toc.has-numbering .cfs-toc__list { counter-reset: item; }
.cfs-toc.has-numbering .cfs-toc__item { counter-increment: item; }
.cfs-toc.has-numbering .cfs-toc__item > .cfs-toc__link::before {
  content: counters(item, ".") ". ";
  margin-right: .25rem;
}
.cfs-toc.has-numbering .cfs-toc__item .cfs-toc__list { counter-reset: item; }

/* Enlace activo (scrollspy) */
.cfs-toc .cfs-toc__link.is-active { font-weight: 600; text-decoration: underline; }

/* Temas existentes */
.cfs-toc--underline .cfs-toc__link { text-decoration: underline; }
.cfs-toc--card { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.cfs-toc--dark { --cfs-bg:#111827; --cfs-fg:#F9FAFB; --cfs-border:#374151; --cfs-muted:#9CA3AF; }

/* NUEVOS TEMAS */
.cfs-toc--gray { --cfs-bg:#f3f4f6; --cfs-fg:#111827; --cfs-border:#d1d5db; }      /* gris claro */
.cfs-toc--orange { --cfs-bg:#fff7ed; --cfs-fg:#7c2d12; --cfs-border:#fed7aa; }   /* naranja claro */
/* Quita la numeración nativa del navegador */
.cfs-toc__list { list-style: none; }

/* Numeración automática: solo con la clase .has-numbering en el contenedor */
.cfs-toc.has-numbering .cfs-toc__list { counter-reset: item; }
.cfs-toc.has-numbering .cfs-toc__item { counter-increment: item; }
.cfs-toc.has-numbering .cfs-toc__item > .cfs-toc__link::before {
  content: counters(item, ".") ". ";
  margin-right: .25rem;
}
.cfs-toc.has-numbering .cfs-toc__item .cfs-toc__list { counter-reset: item; }

/* Variante con kettlebell decorativa en el fondo */
.cfs-toc--kbell { 
  padding-right: 8rem;              /* deja aire para la imagen */
  overflow: hidden;                 /* esconde desbordes de la imagen */
}

.cfs-toc--kbell::after {
  content: "";
  position: absolute;
  right: 1rem;                      /* separación del borde derecho */
  bottom: 0rem;                    /* separación del borde inferior */
  width: 140px;                     /* tamaño base de la kettlebell */
  height: 140px;
  background-image: url("../images/kettlebell.png"); /* ruta relativa al CSS */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.7;                     /* sutil para no “gritar” */
  pointer-events: none;             /* no bloquea clics en enlaces del TOC */
  z-index: 0;
}

/* En móviles: reduce tamaño y padding para no comer espacio */
@media (max-width: 640px) {
  .cfs-toc--kbell { padding-right: 1.25rem; }
  .cfs-toc--kbell::after { width: 90px; height: 90px; right: .5rem; bottom: 0rem; opacity: 0.7; }
}