/*
 * Í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 1.3.3: padroes no involucro do widget, para os controles do Elementor vencerem; fora do Elementor, no proprio componente. */
.elementor-widget-indice-smart,
.indice-smart:not(.elementor-widget-indice-smart .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);
}

.indice-smart {
  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-scrollbar: color-mix(in srgb, var(--indice-color-normal) 45%, transparent);
  }
  .elementor-widget-indice-smart,
  .indice-smart:not(.elementor-widget-indice-smart .indice-smart) {
    --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-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;
}

@media (hover: hover) {
  .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 1.3.7: fechada, a sanfona fica invisivel SO DEPOIS de terminar de fechar; o fundo branco continua durante a animacao, senao os itens vazam por cima do texto da pagina. */
/* Indice 1.4.2: vale desde o primeiro desenho da pagina, antes de qualquer JS (o WP Rocket atrasa o JS ate o primeiro toque). */
.indice-smart:not(.is-open):not(.indice-smart--mode-sticky) .indice-smart__nav {
  visibility: hidden;
  transition: max-height .32s cubic-bezier(.2, .8, .2, 1),
              border-color .2s ease, padding .3s cubic-bezier(.2, .8, .2, 1),
              visibility 0s linear .32s;
}

.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 1.3.6: pressionado = tinta POR CIMA do fundo solido (antes o botao ficava transparente e o texto da pagina aparecia atras do indice fixo). */
.indice-smart--mode-accordion .indice-smart__toggle:active {
  background: linear-gradient(var(--indice-tint-hover), var(--indice-tint-hover)), var(--indice-acc-bg);
}

.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.indice-smart--mode-sticky:not(.is-open) .indice-smart__nav {
    visibility: hidden;
    transition: max-height .32s cubic-bezier(.2, .8, .2, 1),
                border-color .2s ease, padding .3s cubic-bezier(.2, .8, .2, 1),
                visibility 0s linear .32s;
  }

  .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;
}

/* Indice 1.3.4: controle "Fixar o indice ao rolar" desligado = o indice nao gruda sozinho (o container do Elementor ja e sticky). */
.indice-smart--mode-sticky.indice-smart--no-sticky {
  position: relative;
  top: 0;
}


/* ═══════════ Indice 1.4.1: COMPORTAMENTO NO CELULAR (controle "No celular" do widget) ═══════════
   Cores neutras por padrao; tudo e variavel CSS ligada a controle da aba Estilo. */

/* modo "some": a barra sai ao descer e volta ao subir. O involucro fixo do Elementor para de capturar toque enquanto ela esta fora. */
.indice-smart--m-some {
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
.indice-smart--m-some.is-m-hidden {
  transform: translateY(-260%);
  opacity: 0;
  pointer-events: none;
}
.indice-smart-host--hidden {
  pointer-events: none;
}

/* modo "fina": barra baixa com "3 de 22 . secao atual" */
.indice-smart--m-fina .indice-smart__toggle {
  min-height: 0;
  height: var(--indice-thin-height, 36px);
  padding-top: 0;
  padding-bottom: 0;
  border-radius: var(--indice-thin-radius, 9px);
}
.indice-smart--m-fina .indice-smart__toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--indice-thin-size, 12.5px);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.indice-smart__onde {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--indice-thin-where, var(--indice-color-active));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.indice-smart__secao {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* modo "botao": botao flutuante + gaveta. Moram no <body>; o JS copia para eles as variaveis do widget. */
.indice-smart-fab.indice-smart-fab,
.indice-smart-fab.indice-smart-fab:hover,
.indice-smart-fab.indice-smart-fab:focus {
  position: fixed;
  z-index: 99970;
  bottom: calc(var(--indice-fab-bottom, 108px) + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  margin: 0;
  padding: 0 16px 0 13px;
  border: 1px solid var(--indice-fab-border, #E5E7EB);
  border-radius: 999px;
  background: var(--indice-fab-bg, #FFFFFF);
  color: var(--indice-fab-color, #111827);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 10px 22px -10px rgba(17, 24, 39, .55);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.indice-smart-fab--right { right: 16px; }
.indice-smart-fab--left { left: 16px; }
.indice-smart-fab.indice-smart-fab.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.indice-smart-fab svg {
  flex: 0 0 auto;
  color: var(--indice-fab-icon, currentColor);
}
.indice-smart-fab:focus-visible,
.indice-smart-sheet__close:focus-visible,
.indice-smart-sheet__list button:focus-visible {
  outline: 2px solid var(--indice-color-active, #111827);
  outline-offset: 2px;
}

.indice-smart-veil {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--indice-sheet-overlay, rgba(17, 24, 39, .42));
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.indice-smart-veil.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}

.indice-smart-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100001;
  display: flex;
  flex-direction: column;
  max-height: 72vh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-radius: 18px 18px 0 0;
  background: var(--indice-sheet-bg, #FFFFFF);
  box-shadow: 0 -18px 40px -18px rgba(17, 24, 39, .5);
  transform: translateY(102%);
  visibility: hidden;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .32s;
}
.indice-smart-sheet.is-open {
  transform: none;
  visibility: visible;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
.indice-smart-sheet__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 16px 10px;
  border-bottom: 1px solid var(--indice-divider, #E5E7EB);
  color: var(--indice-sheet-title, var(--indice-color-active, #111827));
  font-size: 16px;
  font-weight: 700;
}
.indice-smart-sheet__head::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 38px;
  height: 4px;
  margin-left: -19px;
  border-radius: 4px;
  background: #D1D5DB;
}
.indice-smart-sheet .indice-smart-sheet__close,
.indice-smart-sheet .indice-smart-sheet__close:hover,
.indice-smart-sheet .indice-smart-sheet__close:focus {
  width: 32px;
  height: 32px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 24, 39, .06);
  color: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.indice-smart-sheet__list {
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.indice-smart-sheet__list li {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--indice-divider, #E5E7EB);
}
.indice-smart-sheet__list li:first-child { border-top: 0; }
.indice-smart-sheet .indice-smart-sheet__list button,
.indice-smart-sheet .indice-smart-sheet__list button:hover,
.indice-smart-sheet .indice-smart-sheet__list button:focus {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--indice-color-normal, #374151);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  white-space: normal;
  cursor: pointer;
}
.indice-smart-sheet .indice-smart-sheet__list .indice-smart__item--lvl-3 button { padding-left: 22px; font-size: 13.5px; }
.indice-smart-sheet .indice-smart-sheet__list .indice-smart__item--lvl-4 button,
.indice-smart-sheet .indice-smart-sheet__list .indice-smart__item--lvl-5 button,
.indice-smart-sheet .indice-smart-sheet__list .indice-smart__item--lvl-6 button { padding-left: 34px; font-size: 13.5px; }
.indice-smart-sheet .indice-smart-sheet__list button.is-current,
.indice-smart-sheet .indice-smart-sheet__list button.is-current:hover,
.indice-smart-sheet .indice-smart-sheet__list button.is-current:focus {
  background: var(--indice-active-bg, rgba(17, 24, 39, .06));
  color: var(--indice-color-active, #111827);
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .indice-smart--m-some, .indice-smart-fab, .indice-smart-veil, .indice-smart-sheet { transition: none; }
}