.txt-loop { display: none; }

.button-large {
  background: var(--color-white);
  /* box-shadow: var(--box-shadow-1); */
  border: 1px solid var(--color-light-blue);
  cursor: pointer;
  color: #2E47A7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.125rem;
  font-weight: 400;
  padding: 16px 24px;
  position: relative;
  width: 100%;
}
/* .button-large.active { margin-bottom: 1.5rem; } */

.button-large::after { 
  content: "";
  transition: .6s ease-in-out;
  background-image: url("https://3790458.fs1.hubspotusercontent-na1.net/hubfs/3790458/2023/Icons/arrow-down.svg");
  background-repeat: no-repeat;
  background-position-y: center;
  width: 20px;
  height: 20px;
  
}
.button-large.active::after { transform: rotate(180deg); }

@media only screen and (min-width: 767px) {
  .button-large { font-size: 1.5rem; }
}

.button-large .text-questions { width: 90%; }
@media only screen and (min-width: 767px) {
  .button-large .text-questions { width: 97%; }
}

.panel-info { transition: .6s ease-in-out; max-height: 0px; overflow: hidden; opacity: 0; color: var(--wb-font-color-1) !important; }
.panel-info.show { max-height: 3000px; overflow: visible; opacity: 1; }

.panel-info li::before{content: url(https://3790458.fs1.hubspotusercontent-na1.net/hubfs/3790458/2023/Buk-ui-kit/encuestas/Flecha.svg); left: -30px; position: absolute; width: 22px;}
.panel-info li {font-size: 1.125rem; /*padding-left: 30px;*/ position: relative; margin-left: 30px;}
.panel-info li:not(:last-of-type){margin-bottom: 1.125rem;  margin-left: 30px;}

.text-questions { font-family: var(--font-family-title); font-size: 1rem; }

/* esto dibuja los numeros del texto enriquecido  */
.panel-info ol { list-style: none; counter-reset: lista-contador;  padding-left: 0; }
.panel-info ol li { counter-increment: lista-contador; display: flex; align-items: start; margin-bottom: 10px; font-size: 16px;/* Color del texto */ }
.panel-info ol li::before { content: counter(lista-contador); background-color: #73A0DB; color: white; font-weight: 600; font-size: 14px;
        min-width: 22px; min-height: 22px; display: flex; align-items: center; justify-content: center;
        border-radius: 50%;margin-right: 16px; white-space: nowrap; }

/* ===== CONTENIDO GENERAL ===== */

/* ===== TABLAS BLOQUE DE TEXTO ===== */

table{
  border-collapse: collapse !important;
}

td{
  border: 1.33333px solid #2b3b6a !important;
  padding: 16px !important;
  font-family: 'Source Sans Pro';
}

/* -----------------------------------------------------------
   KIT DE USO GRÁFICO — TABLAS DE RESEARCH (formato 08 del kit)
   Paleta oficial del kit (usar siempre el hex exacto, sin
   aproximaciones):
     Navy primario .......... #243A6D
     Sky secundario ......... #759CD2
     Lavanda terciario ...... #B8C5E4
     Header pálido de tabla . #D3DBEE
   Se aplica con la clase modificadora .buk-table-research para
   no pisar el estilo genérico de <table>/<td> definido arriba,
   que sigue aplicando al resto del contenido del sitio.
   ----------------------------------------------------------- */

.buk-table-research {
  border-collapse: collapse;
  width: 100%;
  font-family: 'Source Sans Pro', var(--font-family-title);
  font-size: 0.85rem; /* tamaño menor al de los gráficos: prioriza densidad de info */
  color: #1A2441;
}

/* Encabezado de columnas: fondo azul pálido, texto navy en negrita,
   con línea navy más gruesa marcando el cierre del header */
.buk-table-research thead th,
.buk-table-research .buk-table-header {
  background-color: #D3DBEE;
  color: #243A6D;
  font-weight: 700;
  text-align: center;
  padding: 12px 16px;
  border-bottom: 3px solid #243A6D;
}

/* Segunda fila de encabezado con el tamaño muestral ("N = …") */
.buk-table-research thead tr.buk-table-header-n th {
  font-weight: 400;
  font-size: 0.75rem;
  border-bottom: 3px solid #243A6D;
}

/* Columna de agrupación (dimensión temática): mismo fondo pálido y
   negrita del header; pensada para usar rowspan y combinar
   verticalmente las sub-filas que agrupa */
.buk-table-research td.buk-table-group,
.buk-table-research th.buk-table-group {
  background-color: #D3DBEE;
  color: #243A6D;
  font-weight: 700;
  vertical-align: middle;
  text-align: left;
  padding: 12px 16px;
  border-right: 1px solid #243A6D;
}

/* Sub-etiquetas de fila (ej. "Mujeres", "Hombres") en peso regular */
.buk-table-research td.buk-table-sublabel {
  font-weight: 400;
  text-align: left;
  padding: 8px 16px;
  border-bottom: 1px solid #a1a2aa;
}

/* Celdas de dato: fondo blanco, texto gris oscuro (NO navy), centradas,
   sin negrita salvo en la fila "Total" */
.buk-table-research td.buk-table-data {
  background-color: #fff;
  color: #333333;
  text-align: center;
  padding: 8px 16px;
  border-bottom: 1px solid #a1a2aa;
  font-weight: 400;
}

/* Fila "Total": resumen en negrita, separada por una línea navy media */
.buk-table-research tr.buk-table-total td {
  font-weight: 700;
  border-top: 1.5px solid #6c7a99;
}

/* Columna de cierre (valor de síntesis, ej. "Porcentaje Regional"):
   negrita en todas sus filas */
.buk-table-research td.buk-table-closing {
  font-weight: 700;
  text-align: center;
  padding: 8px 16px;
  border-left: 1px solid #6c7a99;
  border-bottom: 1px solid #a1a2aa;
}

/* Línea navy media entre bloques temáticos distintos dentro de la tabla */
.buk-table-research tbody tr.buk-table-block-start td {
  border-top: 1.5px solid #6c7a99;
}

/* ===== LISTAS Y H's ===== */

ul.footer__list {
  padding-left: 0 !important;
}

p b, p strong, strong {
  font-weight: 700 !important;
}

.content h1, 
.content h2,
.content h3,
.content h4, 
.content p,
.content li {
  color: #2B3C6A !important;
  font-family: var(--font-family-title);
}

.content li {
  margin-top: 8px;
}

.content ul li {
  list-style: disc;
}

ul {
  padding-left: 2rem;
}

.txt-dark {
  color: #1A2441 !important;
}

.bg-light-modules {
  background-color: var(--wb-bg-modules);
}

/* ===== BLOQUES DE CONTENIDO ===== */
.bloque-texto-completo,
.bloque-texto-imagen {
  margin-bottom: 3.5rem;
}

.bloque-texto-completo h2,
.bloque-texto-imagen h2 {
  margin-bottom: 1.5rem;
  scroll-margin-top: 220px;
}

.bloque-texto-completo h3,
.bloque-texto-imagen h3 {
  margin-bottom: 1.5rem;
  margin-top: 2rem; /*quitar cuando se implemente la version 2.0*/
  scroll-margin-top: 220px;
}

.bloque-imagen-wrapper {
  margin-top: 1.5rem;
}

.bloque-imagen-wrapper img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-16);
}

/* ===== ESTILOS ESPECIALES FORMULARIO ===== */
.formulario input[type=submit] {
  background: transparent !important;
  border: 1px solid var(--Color-outline-outline-blue-dark, #2B3C6A) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #2B3C6A !important;
}

/* ===== TABLA DE CONTENIDO - LAYOUT ===== */
#toc-container-wrapper {
  position: relative;
  padding-top: 0 !important;
}

#tabla-contenido-sticky {
  background: transparent; /* ← Cambiar a transparente */
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 8px; /* ← Agregar espacio para la sombra */
}

@media (min-width: 1020px) {

  /* ===== SCROLL EN LA TABLA DE CONTENIDO ===== */

  #lista-contenido {
    scroll-behavior: smooth;
  }

  #tabla-contenido-sticky {
    position: sticky;
    top: 180px;
    max-height: calc(100vh - 200px); /* Altura máxima = viewport - espacio superior */
    overflow-y: auto; /* Activar scroll vertical */
    overflow-x: hidden; /* Evitar scroll horizontal */
    margin-right: 3.5rem;
  }

  /* Opcional: Padding bottom para que el último item no quede pegado al borde */
  .toc-content {
    padding-bottom: 1rem;
  }
}

/* ===== SCROLL SUAVE ===== */
#tabla-contenido-sticky {
  scroll-behavior: smooth;
}

/* ===== SCROLLBAR PERSONALIZADO (OPCIONAL) ===== */
#tabla-contenido-sticky::-webkit-scrollbar {
  width: 6px;
}

#tabla-contenido-sticky::-webkit-scrollbar-track {
  background: #2B3C6A;
  border-radius: 10px;
  margin: 8px 0; /* Espacio arriba y abajo */
}

#tabla-contenido-sticky::-webkit-scrollbar-thumb {
  background: #2B3C6A;
  border-radius: 10px;
}

#tabla-contenido-sticky::-webkit-scrollbar-thumb:hover {
  background: #1A2441;
}

.toc-content {
  border-radius: var(--radius-16);
  box-shadow: var(--box-shadow-1);
}

#tabla-contenido-sticky {
  position: sticky;
  top: 180px;
  overflow-y: auto;
}
}

/* ===== TABLA DE CONTENIDO - HEADER ===== */
#tabla-contenido-sticky .toc-header {
  padding: 1.5rem;
  background: var(--color-white);
  font-weight: 700;
}

.toc-header-collapsible {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 24px 37px;
  cursor: pointer;
  background-color: #FFFFFF;
  border-radius: 16px 16px 0 0;
  transition: all 0.3s ease;
}


.toc-header-text {
  font-weight: 600;
}

.toc-header-icon {
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
}

.toc-header-icon svg {
  width: 16px;
  height: 10px;
}

#tabla-contenido-sticky:not(.toc-collapsed) .toc-header-icon {
  transform: rotate(180deg);
}

/* ===== TABLA DE CONTENIDO - LISTA ===== */
#tabla-contenido-sticky ol {
  background: #ffff;
  padding: 0 1.5rem 1rem;
  margin: 0;
  list-style: none;
  counter-reset: item;
}

#tabla-contenido-sticky ol li {
  counter-increment: item;
  position: relative;
  margin-bottom: 12px;
}

#tabla-contenido-sticky ol li:last-child {
  margin-bottom: 12px;
}

#tabla-contenido-sticky ol li a {
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
  text-decoration: none !important;
  transition: all ease 0.1s;
  display: block;
  color: var(--wb-font-color-1);
}

#tabla-contenido-sticky ol li a:hover {
  font-weight: 700;
}

#tabla-contenido-sticky ol li.active a {
  font-weight: 700 !important;
}

/* ===== ITEMS H2 ===== */
#lista-contenido li.toc-h2 a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #1A2441;
  font-family: Inter;
  font-size: 18px !important;
  font-weight: 400;
}

#lista-contenido li.toc-h2[data-has-children="true"] a {
  cursor: pointer;
}

#lista-contenido li.toc-h2[data-has-children="true"] a:hover {
  padding: 4px 8px;
  margin: -4px -8px;
}

#lista-contenido li.toc-h2 .toc-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease;
  flex-shrink: 0;
  order: -1;
  width: 12px;
  height: 12px;
}

#lista-contenido li.toc-h2:not(.expanded) .toc-chevron {
  transform: rotate(0deg);
}

#lista-contenido li.toc-h2.expanded .toc-chevron {
  transform: rotate(90deg);
}

#lista-contenido li.toc-h2 .toc-text {
  flex: 1;
}

/* ===== ITEMS H3 ===== */
.toc-h3-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  margin: 0;
  padding: 0;
}

#lista-contenido li.toc-h2.expanded + .toc-h3-container {
  max-height: 1100px;
}

#lista-contenido .toc-h3-container[style*="display: block"] {
  margin-top: 8px;
  margin-bottom: 8px;
}

.toc-h3-container li.toc-h3 {
  list-style: none;
  padding-left: 52px;
  margin-bottom: 16px;
  opacity: 1;
}

.toc-h3-container li.toc-h3:last-child {
  margin-bottom: 0;
}

#lista-contenido li.toc-h3 a {
  color: #1A2441;
  font-family: Inter;
  font-size: 14px !important;
  font-weight: 400;
}

/* ===== SEPARADOR Y REDES SOCIALES ===== */

.toc-social-icon img:hover {
  opacity: 0.6;
  transition: 0.3s;
}

.toc-separator {
  height: 1px; 
  background-color: #D9E3FC; 
  width: 80%;
  margin-left: 32px;
}

/* ===== BOTÓN PDF ===== */
button#btn-form-modal.btn.btn--pdf.btn-form-modal:hover {
  border-radius: 69px;
  border: 1px solid #2B3C6A;
  background: #fff;
  color: #2B3C6A;
  font-size: 20px;
  font-weight: 700;
  width: 250px !important;

}

button#btn-form-modal.btn.btn--pdf.btn-form-modal {
  border-radius: 69px;
  border: 1px solid #2B3C6A;
  background: #2B3C6A;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  width: 250px !important;
}

/* ===== SCROLLBAR ===== */
#tabla-contenido-sticky::-webkit-scrollbar {
  width: 6px;
}

#tabla-contenido-sticky::-webkit-scrollbar-track {
  background: var(--color-light-blue);
  border-radius: 10px;
}

#tabla-contenido-sticky::-webkit-scrollbar-thumb {
  background: var(--color-blue-buk);
  border-radius: 10px;
}

#tabla-contenido-sticky::-webkit-scrollbar-thumb:hover {
  background: var(--color-dark-blue);
}

/* ============================================================
   DESIGN SYSTEM — GRÁFICOS (barras, líneas, apiladas y donuts)
   Integrado con el "Kit de Uso Gráfico · Glosario de Diseño".

   Paleta oficial del kit (hex exacto, sin aproximaciones):
     --buk-color-navy       #243A6D  Serie principal / línea base / header
     --buk-color-sky        #759CD2  Segunda serie de comparación
     --buk-color-lavender   #B8C5E4  Tercera serie / tracks de donut
     --buk-color-navy-dark  #2B3D6B  Fondo de tarjetas KPI y half-donuts
     --buk-color-gold       #FABA0D  Acento de línea (solo 4ª/5ª serie)
     --buk-color-royal      #354E9C  Acento de línea (solo 4ª/5ª serie)
     --buk-color-gauge      #8CA8D4  Arco de progreso en gauges

   NOTA DE MIGRACIÓN: la paleta previa de este bloque (#2b3b6a,
   #f59121, #6c7a99, #a1a2aa) chocaba con la paleta oficial del kit,
   así que las clases de color de barras/líneas/leyenda se
   actualizaron a los hex de arriba. La grilla, los ejes auxiliares
   y el layout base (que no chocan con el kit) se mantienen igual.

   Orden de aplicación transversal: navy → sky → lavanda. Los
   acentos (dorado, azul rey) solo se usan como 4ª/5ª serie en
   líneas, nunca como primera o segunda serie.
   ============================================================ */

.buk-chart {
  margin-top: 16px;
  margin-bottom: 40px;
  --buk-color-navy: #243A6D;
  --buk-color-sky: #759CD2;
  --buk-color-lavender: #B8C5E4;
  --buk-color-navy-dark: #2B3D6B;
  --buk-color-gold: #FABA0D;
  --buk-color-royal: #354E9C;
  --buk-color-gauge: #8CA8D4;
  --buk-color-table-header: #D3DBEE;
  --buk-color-donut-track-1: #CCD6ED;
  --buk-color-donut-track-2: #D3DBEE;
  --buk-color-grid: #a1a2aa;
  --buk-color-sig: #555555;
}

.buk-chart-title { }
.buk-chart-subtitle { margin: 0.25rem 0 1.5rem; }
.buk-chart-note { margin-top: 1rem; font-size: 0.8rem; color: var(--buk-color-grid); }


/* ============================================================
   LEYENDA — horizontal, con dot del color de la serie.
   Va SIEMPRE arriba del gráfico. La variable de corte se escribe
   en negrita seguida de dos puntos (ej. "Género:") en el texto,
   antes de esta lista.
   ============================================================ */
.buk-chart-legend {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.buk-chart-legend li {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  line-height: 1.2;
}
.buk-chart-legend li::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.5rem;
  background-color: currentColor;   /* fallback si el ítem no trae clase de color */
}
/* Orden oficial del kit: 1 navy, 2 sky, 3 lavanda, 4 dorado (acento), 5 azul rey (acento) */
.buk-chart-legend-item--1::before { background-color: #243A6D !important; }
.buk-chart-legend-item--2::before { background-color: #759CD2 !important; }
.buk-chart-legend-item--3::before { background-color: #B8C5E4 !important; }
.buk-chart-legend-item--4::before { background-color: #FABA0D !important; }
.buk-chart-legend-item--5::before { background-color: #354E9C !important; }


/* ============================================================
   MARCAS DE SIGNIFICANCIA ESTADÍSTICA (ns / * / ** / ***)
   Van sobre el par comparado, en gris oscuro, en un tamaño menor
   al de las etiquetas de dato. Aplica a barras verticales y
   horizontales.
   ============================================================ */
.buk-chart-sig {
  color: var(--buk-color-sig);
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}


/* ============================================================
   GRÁFICO DE BARRAS (verticales — formato 01 del kit)
   El área .buk-chart-bars mide EXACTAMENTE 260px de alto = escala 0–100.
   Barras, ticks y grilla se anclan con "bottom" desde el eje X (fondo del área).
   Los labels se dibujan FUERA del área (top:100%) y no afectan la altura.
   ============================================================ */
.buk-chart--bar .buk-chart-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  height: 260px;
  padding-left: 2.5rem;   /* espacio para los números de la escala */
  margin-bottom: 3.5rem;  /* espacio externo para los labels bajo el eje X */
  box-sizing: border-box;
}

/* Eje X (baseline): línea sólida en navy, según el kit */
.buk-chart--bar .buk-chart-bars::after {
  content: "";
  position: absolute;
  left: 2.5rem; right: 0; bottom: 0;
  border-bottom: 2px solid #243A6D;
}

/* Eje Y: el kit pide "sin línea de eje vertical" en barras y líneas,
   así que se deja sin borde; se conserva el contenedor porque ancla
   los ticks de escala. */
.buk-chart-y-axis {
  position: absolute;
  left: 2.5rem; top: 0; bottom: 0;
  border-left: none;
}

/* Marcas de escala: bottom inline = valor * 2.6px desde el eje X.
   Grilla en intervalos redondos (ej. cada 25 unidades). */
.buk-chart-y-tick {
  position: absolute;
  left: 0; width: 2rem;
  text-align: right;
  transform: translateY(50%);
  font-size: 0.75rem; line-height: 1;
  color: var(--buk-color-grid);
}

/* Grilla horizontal clara (mismo origen que los ticks) */
.buk-chart-gridline {
  position: absolute;
  left: 2.5rem; right: 0;
  border-top: 1px solid var(--buk-color-grid);
  opacity: 0.35; pointer-events: none;
}

/* Item: ancla para barra/value/label/significancia. Ocupa todo el alto del área. */
.buk-chart-bar-item {
  position: relative;
  flex: 1; min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Clúster de barras (2-3 series de un mismo grupo): casi sin separación
   interna, con separación amplia respecto al siguiente clúster (se logra
   con el "gap: 1rem" de .buk-chart-bars entre .buk-chart-cluster) */
.buk-chart-cluster {
  display: flex;
  align-items: flex-end;
  gap: 2px; /* gap interno del clúster ≈ 4-8% del ancho de barra */
  height: 100%;
  flex: 1;
  justify-content: center;
}

/* La categoría "Total" se separa del resto con una línea vertical punteada */
.buk-chart-cluster--total {
  border-left: 1px dashed var(--buk-color-grid);
  padding-left: 1rem;
  margin-left: 0.5rem;
}

/* Barra: altura = variable inline (heredada del item). Ancho acotado.
   Colores oficiales del kit, de más oscuro a más claro: navy → sky → lavanda */
.buk-chart-bar {
  width: 100%;
  max-width: 48px;
  height: var(--bar-value);
  border-radius: 4px 4px 0 0;
}
.buk-chart-bar--1 { background-color: #243A6D; } /* serie 1: navy */
.buk-chart-bar--2 { background-color: #759CD2; } /* serie 2: sky */
.buk-chart-bar--3 { background-color: #B8C5E4; } /* serie 3: lavanda */

/* Valor (%) flotando sobre la barra, sin afectar su altura.
   El color de la etiqueta replica el de su barra. */
.buk-chart-bar-value {
  position: absolute;
  left: 50%; bottom: var(--bar-value);
  transform: translate(-50%, -4px);
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
}
.buk-chart-bar-value--1 { color: #243A6D; }
.buk-chart-bar-value--2 { color: #759CD2; }
.buk-chart-bar-value--3 { color: #B8C5E4; }

/* Etiqueta debajo del eje X, fuera del área de 260px */
.buk-chart-bar-label {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  width: 100%; margin-top: 0.5rem;
  text-align: center;
  font-size: 14px;
  line-height: 1.1;
  color: #555;
}


/* ============================================================
   BARRAS HORIZONTALES (formato 02) — misma lógica rotada 90°,
   para etiquetas de categoría largas (roles, cargos, afirmaciones).
   ============================================================ */
.buk-chart--bar-h .buk-chart-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 14px;
}

.buk-chart--bar-h .buk-chart-row--total {
  border-top: 1px dashed var(--buk-color-grid);
  padding-top: 14px;
  margin-top: 4px;
}

.buk-chart-row-label {
  flex: 0 0 auto;
  width: 30%;
  text-align: left;
  font-size: 14px;
  color: #1A2441;
}

.buk-chart-row-track {
  position: relative;
  flex: 1;
  height: 24px;
  background: transparent;
}

/* Barra horizontal: mismos colores de serie que la vertical */
.buk-chart-bar-h {
  height: 100%;
  border-radius: 0 4px 4px 0;
}
.buk-chart-bar-h--1 { background-color: #243A6D; }
.buk-chart-bar-h--2 { background-color: #759CD2; }

/* Etiqueta de dato: fuera de la barra, al final, en el color de la serie */
.buk-chart-bar-h-value {
  margin-left: 8px;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
}
.buk-chart-bar-h-value--1 { color: #243A6D; }
.buk-chart-bar-h-value--2 { color: #759CD2; }


/* ============================================================
   BARRAS APILADAS — horizontales (formato 03) y verticales
   (formato 04, inferido: validar contra un caso real antes de
   llevarlo a Figma). Distribución tipo Likert colapsada a 3
   categorías: izquierda (sky) · centro (navy) · derecha (lavanda).
   ============================================================ */
.buk-chart-stack-h {
  display: flex;
  width: 100%;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 14px; /* espacio entre filas ≈ 40-50% de la altura de la barra */
}

.buk-chart-stack-v {
  display: flex;
  flex-direction: column-reverse; /* de abajo hacia arriba: sky → navy → lavanda */
  width: 100%;
  max-width: 64px;
  height: 260px;
  border-radius: 4px;
  overflow: hidden;
}

.buk-chart-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}
.buk-chart-segment--negative { background-color: #759CD2; } /* polo negativo: sky */
.buk-chart-segment--neutral  { background-color: #243A6D; } /* centro: navy */
.buk-chart-segment--positive { background-color: #B8C5E4; } /* polo positivo: lavanda */


/* ============================================================
   ANILLO / DONUT — pequeño múltiplo (formato 05)
   ============================================================ */
.buk-chart-donuts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
}

.buk-chart-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.buk-chart-donut-ring {
  /* Grosor del anillo ≈ 20-22% del radio total; se resuelve vía
     conic-gradient + máscara en el markup del componente. */
  --donut-track: #CCD6ED;
  --donut-progress: #243A6D;
  border-radius: 50%;
}

.buk-chart-donut-value {
  font-weight: bold;
  color: #243A6D;
}

.buk-chart-donut-label {
  font-weight: 400;
  color: #243A6D;
  text-align: center;
}


/* ============================================================
   MEDIO ANILLO / DONUT (gauge) — formato 06
   Tarjeta de fondo navy oscuro, arco en azul claro. Se agrupan
   3-4 en una fila; la última puede representar el "Total".
   ============================================================ */
.buk-chart-gauge-card {
  background-color: #2B3D6B;
  border-radius: var(--radius-16, 16px);
  border: none;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.buk-chart-gauge-arc {
  --gauge-track: #ffffff;
  --gauge-progress: #8CA8D4;
}

.buk-chart-gauge-value {
  font-weight: bold;
  color: #ffffff;
  font-size: 1.5rem;
}

.buk-chart-gauge-label {
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}


/* ============================================================
   GRÁFICO DE LÍNEAS (SVG) — formato 07
   Orden de color para 2-3 series: navy → sky → lavanda, igual que
   el resto de los formatos. El dorado y el azul rey del kit son
   acentos que SOLO se usan como 4ª y 5ª serie.
   ============================================================ */

/* Contenedor con scroll horizontal en mobile (el SVG se envuelve aquí) */
.buk-chart-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.buk-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;   /* evita el recorte de puntos/labels en los bordes */
}

/* En mobile: ancho mínimo para que no se comprima; aparece scroll */
@media (max-width: 640px) {
  .buk-chart-svg { min-width: 560px; }
}

.buk-chart-line { fill: none; stroke-width: 3; }
.buk-chart-line--1 { stroke: #243A6D; } /* serie 1: navy */
.buk-chart-line--2 { stroke: #759CD2; } /* serie 2: sky */
.buk-chart-line--3 { stroke: #B8C5E4; } /* serie 3: lavanda */
.buk-chart-line--4 { stroke: #FABA0D; } /* acento 4ª serie: dorado */
.buk-chart-line--5 { stroke: #354E9C; } /* acento 5ª serie: azul rey */

.buk-chart-point--1 { fill: #243A6D; }
.buk-chart-point--2 { fill: #759CD2; }
.buk-chart-point--3 { fill: #B8C5E4; }
.buk-chart-point--4 { fill: #FABA0D; }
.buk-chart-point--5 { fill: #354E9C; }

/* Separación de las etiquetas del eje X respecto a la línea base */
.buk-chart-x-label { transform: translateY(10px); }

/* Etiqueta de valor en "píldora": borde y texto del color de su línea,
   fondo blanco/translúcido, junto al punto. El halo blanco (paint-order)
   asegura legibilidad aunque otra línea pase por detrás. */
.buk-chart-value-label {
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
  font-weight: bold;
}
.buk-chart-value-label--1 { fill: #243A6D; }
.buk-chart-value-label--2 { fill: #759CD2; }
.buk-chart-value-label--3 { fill: #B8C5E4; }
.buk-chart-value-label--4 { fill: #FABA0D; }
.buk-chart-value-label--5 { fill: #354E9C; }

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 1019px) {
  #toc-container-wrapper {
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);
  }

  #tabla-contenido-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    margin: 0;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .toc-header-collapsible {
    display: flex;
  }

  .toc-content > .toc-header {
    display: none;
  }

  .toc-content {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.4s ease;

    border-radius: none;
    box-shadow: none;
  }


  #tabla-contenido-sticky.toc-collapsed .toc-content {
    max-height: 0;
  }

  /* ===== BOTÓN PDF ===== */
  button#btn-form-modal.btn.btn--pdf.btn-form-modal:hover {
    width: 354px !important;
  }

  button#btn-form-modal.btn.btn--pdf.btn-form-modal {
    width: 354px !important;
  }
}