/*
 * Índice Inteligente — estilos do componente.
 *
 * TODA cor é uma variável CSS controlada pelo widget (aba Estilo do Elementor).
 * O valor padrão de cada variável aponta para a paleta GLOBAL do Elementor
 * (var(--e-global-color-*)), com um hex da Velt apenas como fallback.
 * Consequência: alterar a paleta global no Elementor repinta o índice sozinho.
 * Especificidade elevada para vencer os estilos globais do Elementor kit.
 */

.indice-smart {
  --indice-width: 250px;
  --indice-offset: 100px;

  /* Texto e navegação */
  --indice-color-normal: var(--e-global-color-58ae47e, #59636B);   /* Texto secundario */
  --indice-color-hover: var(--e-global-color-accent, #2F7D5B);     /* Accent */
  --indice-color-active: var(--e-global-color-primary, #0B1F33);   /* Primary */
  --indice-color-indicator: var(--e-global-color-accent, #2F7D5B); /* Accent */
  --indice-title-color: var(--e-global-color-primary, #0B1F33);    /* Primary */
  --indice-item-spacing: 6px;

  /* Superfícies */
  --indice-acc-bg: var(--e-global-color-df0e843, #FFFFFF);         /* Branco */
  --indice-acc-border: var(--e-global-color-6c603d1, #D2D9DD);     /* Linha */
  --indice-acc-radius: 12px;
  --indice-acc-panel-bg: var(--e-global-color-df0e843, #FFFFFF);   /* Branco */

  /* Detalhes (antes hardcoded — agora controláveis) */
  --indice-active-bg: rgba(11, 31, 51, .06);                        /* neutro: tinta leve da cor do texto ativo (refinado abaixo) */
  --indice-active-weight: 600;
  --indice-chevron-color: var(--e-global-color-58ae47e, #59636B);  /* Texto secundario */
  --indice-divider: var(--e-global-color-6c603d1, #D2D9DD);        /* Linha */

  /* Derivados do indicador — fallback sólido, refinado abaixo por color-mix */
  --indice-tint-hover: rgba(47, 125, 91, .06);
  --indice-count-bg: rgba(47, 125, 91, .12);
  --indice-focus-ring: rgba(47, 125, 91, .45);
  --indice-scrollbar: rgba(89, 99, 107, .45);
  --indice-shadow: rgba(11, 31, 51, .07);

  box-sizing: border-box;
  width: 100%;
  font-family: var(--e-global-typography-text-font-family, var(--e-global-typography-primary-font-family, inherit));
  -webkit-font-smoothing: antialiased;
}

/*
 * Onde houver suporte, os tons suaves passam a derivar da própria cor do
 * indicador: trocar o indicador (ou a paleta global) reajusta hover, contador
 * e foco automaticamente, sem precisar editar cada tom à mão.
 */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .indice-smart {
    --indice-tint-hover: color-mix(in srgb, var(--indice-color-indicator) 6%, transparent);
    --indice-count-bg: color-mix(in srgb, var(--indice-color-indicator) 12%, transparent);
    --indice-focus-ring: color-mix(in srgb, var(--indice-color-indicator) 45%, transparent);
    --indice-active-bg: color-mix(in srgb, var(--indice-color-active) 7%, transparent);
    --indice-scrollbar: color-mix(in srgb, var(--indice-color-normal) 45%, transparent);
  }
}

.indice-smart *,
.indice-smart *::before,
.indice-smart *::after {
  box-sizing: border-box;
}

/* ═══════════ MODO LATERAL (desktop — sempre expandido) ═══════════ */
.indice-smart--mode-sticky {
  position: sticky;
  top: var(--indice-offset);
  width: 100%;
  max-width: var(--indice-width);
  max-height: calc(100vh - var(--indice-offset) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent; /* thumb invisível por padrão */
}

.indice-smart--mode-sticky:hover {
  scrollbar-color: var(--indice-scrollbar) transparent; /* thumb aparece no hover */
}

.indice-smart--mode-sticky::-webkit-scrollbar { width: 4px; }
.indice-smart--mode-sticky::-webkit-scrollbar-track { background: transparent; }
.indice-smart--mode-sticky::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  transition: background-color .2s ease;
}
.indice-smart--mode-sticky:hover::-webkit-scrollbar-thumb {
  background: var(--indice-scrollbar);
}

.indice-smart.indice-smart--mode-sticky .indice-smart__toggle {
  pointer-events: none;
  border: 0;
  padding: 0 0 10px;
  background: transparent;
  box-shadow: none;
}

.indice-smart--mode-sticky .indice-smart__chevron,
.indice-smart.indice-smart--mode-sticky .indice-smart__count {
  display: none;
}

.indice-smart.indice-smart--mode-sticky .indice-smart__nav {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
}

.indice-smart.indice-smart--mode-sticky .indice-smart__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ═══════════ CABEÇALHO / TÍTULO ═══════════ */
.indice-smart .indice-smart__toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--indice-acc-border);
  border-radius: var(--indice-acc-radius);
  background: var(--indice-acc-bg);
  color: var(--indice-title-color);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
  -webkit-tap-highlight-color: transparent;
}

.indice-smart .indice-smart__toggle:hover {
  border-color: var(--indice-focus-ring);
}

.indice-smart .indice-smart__toggle:focus-visible {
  outline: 2px solid var(--indice-color-indicator);
  outline-offset: 2px;
}

.indice-smart .indice-smart__toggle-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  color: inherit;
}

.indice-smart .indice-smart__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--indice-count-bg);
  color: var(--indice-color-indicator);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}

.indice-smart .indice-smart__chevron {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--indice-chevron-color);
  transition: transform .22s ease, color .22s ease;
}

.indice-smart.is-open .indice-smart__chevron {
  transform: rotate(180deg);
  color: var(--indice-color-indicator);
}

/* ═══════════ PAINEL (sanfona) ═══════════ */
.indice-smart .indice-smart__nav {
  display: block;
  max-height: 0;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--indice-acc-radius);
  background: var(--indice-acc-panel-bg);
  transition: max-height .32s cubic-bezier(.2, .8, .2, 1),
              border-color .2s ease, padding .3s cubic-bezier(.2, .8, .2, 1);
}

.indice-smart.is-open .indice-smart__nav {
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-color: var(--indice-acc-border);
}

.indice-smart .indice-smart__list {
  min-height: 0;
  margin: 0;
  padding: 8px;
  list-style: none;
}

/* ═══════════ ITENS ═══════════ */
.indice-smart .indice-smart__item {
  margin: 0;
  padding: 0;
}

.indice-smart .indice-smart__link {
  position: relative;
  display: block;
  margin: 0;
  padding: var(--indice-item-spacing) 8px var(--indice-item-spacing) 12px;
  border-left: 2px solid transparent;
  color: var(--indice-color-normal);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
  overflow-wrap: anywhere;
  border-radius: 0 8px 8px 0;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.indice-smart .indice-smart__link:focus-visible {
  outline: 2px solid var(--indice-color-indicator);
  outline-offset: -1px;
  border-radius: 8px;
}

/* Hierarquia: indentação por nível */
.indice-smart.indice-smart--hierarchy .indice-smart__item--lvl-3 .indice-smart__link { padding-left: 26px; }
.indice-smart.indice-smart--hierarchy .indice-smart__item--lvl-4 .indice-smart__link { padding-left: 40px; }
.indice-smart.indice-smart--hierarchy .indice-smart__item--lvl-5 .indice-smart__link { padding-left: 54px; }
.indice-smart.indice-smart--hierarchy .indice-smart__item--lvl-6 .indice-smart__link { padding-left: 68px; }

/* ═══════════ OTIMIZAÇÃO MOBILE / TABLET (sanfona) ═══════════ */
.indice-smart--mode-accordion .indice-smart__toggle {
  box-shadow: 0 1px 2px var(--indice-shadow);
}

.indice-smart--mode-accordion .indice-smart__toggle:active {
  background: var(--indice-tint-hover);
}

.indice-smart--mode-accordion.is-open .indice-smart__nav {
  scrollbar-width: thin;
  scrollbar-color: var(--indice-scrollbar) transparent;
  box-shadow: 0 8px 24px var(--indice-shadow);
}

.indice-smart--mode-accordion.is-open .indice-smart__nav::-webkit-scrollbar { width: 5px; }
.indice-smart--mode-accordion.is-open .indice-smart__nav::-webkit-scrollbar-thumb {
  background: var(--indice-scrollbar);
  border-radius: 999px;
}

.indice-smart--mode-accordion.is-open .indice-smart__list {
  padding: 10px 8px;
}

.indice-smart--mode-accordion .indice-smart__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-top: 9px;
  padding-bottom: 9px;
}

/* ═══════════ ACESSIBILIDADE DE MOVIMENTO ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .indice-smart,
  .indice-smart * {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════ REDE DE SEGURANÇA MOBILE (mesmo com JS antigo/modo errado) ═══════════ */
/* Em telas pequenas ou dispositivos touch, a apresentação é sempre sanfona,
   independente da classe de modo aplicada pelo JS. */
@media (max-width: 1024px), (hover: none) {
  .indice-smart--mode-sticky {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .indice-smart.indice-smart--mode-sticky .indice-smart__toggle {
    pointer-events: auto;
    border: 1px solid var(--indice-acc-border);
    padding: 14px 16px;
    background: var(--indice-acc-bg);
    box-shadow: 0 1px 2px var(--indice-shadow);
  }

  .indice-smart.indice-smart--mode-sticky .indice-smart__count {
    display: inline-flex;
  }

  .indice-smart.indice-smart--mode-sticky .indice-smart__chevron {
    display: inline-block;
  }

  .indice-smart.indice-smart--mode-sticky .indice-smart__nav {
    max-height: 0 !important;
    overflow: hidden;
  }

  .indice-smart.is-open.indice-smart--mode-sticky .indice-smart__nav {
    max-height: min(70vh, 560px) !important;
    overflow-y: auto;
  }
}

/* ═══════════ PREMIUM: organização editorial e ativo inconfundível ═══════════ */

/* separadores editoriais finos entre itens */
.indice-smart .indice-smart__item + .indice-smart__item {
  border-top: 1px solid var(--indice-divider);
}

/* hover com tinta sutil da marca */
.indice-smart .indice-smart__link:hover {
  color: var(--indice-color-hover);
  background: var(--indice-tint-hover);
  border-radius: 8px;
  text-decoration: none;
}

/* rótulo do índice em small-caps premium (modo lateral) */
.indice-smart--mode-sticky .indice-smart__toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* estado ativo: fundo neutro em pilula, sem barra lateral (padrao).
   A barra e as divisorias em volta sao opcoes do widget (aba Estilo). */
.indice-smart .indice-smart__link[aria-current="true"] {
  color: var(--indice-color-active);
  font-weight: var(--indice-active-weight, 600);
  background: var(--indice-active-bg);
  border-left-color: transparent;
  border-radius: 8px;
}

/* opcao: barra lateral na cor do indicador */
.indice-smart.indice-smart--active-bar .indice-smart__link[aria-current="true"] {
  border-left-color: var(--indice-color-indicator);
  border-radius: 0 8px 8px 0;
}

/* opcao (padrao ligada): as divisorias coladas ao item ativo somem,
   para a pilula nao ficar "riscada" em cima e embaixo. O JS marca
   o <li> ativo (.is-active) e o seguinte (.is-after-active). */
.indice-smart.indice-smart--clean-dividers .indice-smart__item.is-active,
.indice-smart.indice-smart--clean-dividers .indice-smart__item.is-after-active {
  border-top-color: transparent;
}