.toc-lcs {box-shadow: 0 0 4px rgba(0,0,0,0.30); padding: 10px;}
.toc-lcs .links-toc-lcs a {display:  flex; gap: 10px;}
.toc-lcs .title-toc-lcs {padding-bottom: 12px; font-size: 16px; font-weight: bold; color: var(--wd-title-color);}
.toc-lcs .list-icon {padding: 1px 10px; height: 25px; border-radius: 50%; background-color: var(--btn-accented-bgcolor); color: #fff;}
html {scroll-behavior: smooth;}

/* ---------------------------------------------------------------------------
 * Indice plegable en movil, sin JavaScript.
 * La casilla va oculta; quien abre y cierra es el <label> del titulo.
 * Movil = por debajo de 768px, que es donde se ve la instancia de movil.
 * De 768 para arriba se ve la otra instancia, en la columna pegajosa, y esa
 * tiene que salir siempre desplegada.
 * ------------------------------------------------------------------------- */

.toc-lcs .toc-lcs-check {position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;}

.toc-lcs .title-toc-lcs {display: block; margin: 0; cursor: pointer; -webkit-user-select: none; user-select: none;}
.toc-lcs .title-toc-lcs::after {content: "\25BE"; float: right; margin-left: 10px;}
.toc-lcs .toc-lcs-check:checked ~ .title-toc-lcs::after {content: "\25B4";}

/* Plegado por defecto */
.toc-lcs .links-toc-lcs {display: none;}
.toc-lcs .toc-lcs-check:checked ~ .links-toc-lcs {display: block;}

/* Plegado, el titulo no necesita separacion por debajo */
.toc-lcs .toc-lcs-check:not(:checked) ~ .title-toc-lcs {padding-bottom: 0;}

/* Foco visible al llegar tabulando */
.toc-lcs .toc-lcs-check:focus-visible ~ .title-toc-lcs {outline: 2px solid var(--btn-accented-bgcolor); outline-offset: 2px;}

/* Tablet y escritorio: siempre desplegado, sin flecha y sin cursor de mano */
@media (min-width: 768px) {
  .toc-lcs .links-toc-lcs {display: block;}
  .toc-lcs .title-toc-lcs {cursor: default; padding-bottom: 12px;}
  .toc-lcs .title-toc-lcs::after {content: none;}
}

/* toc-lcs-barra-movil */
@media (max-width: 767px) {
  .toc-lcs .toc-lcs-check:not(:checked) ~ .title-toc-lcs {background: #f7f7f7; padding: 12px 14px; border-radius: 4px;}
  .toc-lcs .toc-lcs-check:checked ~ .title-toc-lcs {background: #f7f7f7; padding: 12px 14px; border-radius: 4px 4px 0 0;}
  .toc-lcs .title-toc-lcs::after {font-size: 1.15em; line-height: 1;}
}

/* toc-lcs-caja-unica */
@media (max-width: 767px) {
  .toc-lcs {padding: 0; box-shadow: none; border: 1px solid #e6e6e6; border-radius: 4px; overflow: hidden;}
  .toc-lcs .toc-lcs-check:not(:checked) ~ .title-toc-lcs,
  .toc-lcs .toc-lcs-check:checked ~ .title-toc-lcs {border-radius: 0;}
  .toc-lcs .links-toc-lcs {padding: 0 14px 14px; background: #fff;}
}