/* Versão 1.0.0 */

/*
  Seção "Reconhece essa rotina?" (Home). JS: public/assets/js/rotinas-home.js
  Três abas (rotinas típicas de PME); em cada uma, pares "Hoje" (a dor, na voz do cliente) → "Com um sistema
  sob medida" (a mesma situação resolvida), na mesma linha.
  Sem JS: as abas somem e os três painéis aparecem empilhados, cada um com o seu título.
  Com JS: abas acessíveis (setas, Home/End) e as soluções acendem em sequência ao aparecer ou trocar de aba.
*/

/* Seletor de abas: controle segmentado em Papel Alternativo; aba ativa vira um cartão branco */
.rotinas__abas {
  display: none;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 32px;
  padding: 4px;
  overflow-x: auto;
  background: #F7F7F8;
  border: 1px solid #E4E4E8;
  border-radius: 9999px;
  scrollbar-width: none;
}

.rotinas__abas::-webkit-scrollbar {
  display: none;
}

.rotinas.is-pronto .rotinas__abas {
  display: flex;
}

.rotinas__aba {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 500;
  color: #4A4A57;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rotinas__aba:hover {
  color: #0A0A14;
}

.rotinas__aba[aria-selected="true"] {
  background: #FFFFFF;
  color: #0A0A14;
  box-shadow: 0 1px 2px rgba(10, 10, 20, 0.06), 0 4px 12px -6px rgba(10, 10, 20, 0.12);
}

.rotinas__aba:focus-visible {
  outline: 2px solid oklch(67.3% .182 276.935);
  outline-offset: 2px;
}

.material-icons.rotinas__aba-icone {
  font-size: 20px;
  color: #6B6B78;
  transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rotinas__aba[aria-selected="true"] .rotinas__aba-icone {
  color: oklch(51.1% .262 276.966);
}

/* Painel: cartão branco padrão */
.rotinas__painel {
  padding: 8px 32px 16px;
  background: #FFFFFF;
  border: 1px solid #E4E4E8;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(10, 10, 20, 0.04), 0 8px 24px -12px rgba(10, 10, 20, 0.10);
}

.rotinas__painel + .rotinas__painel {
  margin-top: 24px;
}

.rotinas.is-pronto .rotinas__painel + .rotinas__painel {
  margin-top: 0;
}

.rotinas__painel:focus-visible {
  outline: 2px solid oklch(67.3% .182 276.935);
  outline-offset: 3px;
}

/* Título do painel: só aparece sem JS (com JS, a aba já nomeia o painel) */
.rotinas__titulo-painel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: #0A0A14;
}

.rotinas.is-pronto .rotinas__titulo-painel {
  display: none;
}

/* Cabeçalho das colunas e pares */
.rotinas__cabecalho,
.rotinas__par {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
}

.rotinas__cabecalho {
  padding: 20px 0 12px;
  font-size: 14px;
  font-weight: 600;
}

.rotinas__cabecalho-hoje {
  color: #6B6B78;
}

.rotinas__cabecalho-depois {
  grid-column: 3;
  padding-left: 16px;
  color: oklch(45.7% .24 277.023);
}

.rotinas__par {
  padding: 12px 0;
  border-top: 1px solid #E4E4E8;
}

.rotinas__hoje {
  font-size: 16px;
  line-height: 1.55;
  color: #5B5B66;
}

.material-icons.rotinas__seta {
  justify-self: center;
  font-size: 22px;
  color: oklch(58.5% .233 277.117);
}

.rotinas__depois {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #0A0A14;
  background: oklch(96.9% .016 293.756);
  border-radius: 12px;
}

.material-icons.rotinas__check {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 20px;
  color: oklch(54.1% .281 293.009);
}

/* Acender: armado (antes de aparecer) → aceso, em sequência. Estado padrão é aceso. */
.rotinas__par:nth-child(1) { --rotina-atraso: 0ms; }
.rotinas__par:nth-child(2) { --rotina-atraso: 160ms; }
.rotinas__par:nth-child(3) { --rotina-atraso: 320ms; }
.rotinas__par:nth-child(4) { --rotina-atraso: 480ms; }

.rotinas__painel.is-armado .rotinas__depois {
  opacity: 0;
  transform: translateX(-12px);
}

.rotinas__painel.is-armado .rotinas__seta {
  opacity: 0;
  transform: translateX(-6px);
}

.rotinas__painel.is-acendendo .rotinas__depois,
.rotinas__painel.is-acendendo .rotinas__seta {
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1) var(--rotina-atraso),
              transform 500ms cubic-bezier(0.16, 1, 0.3, 1) var(--rotina-atraso);
}

/* Fechamento */
.rotinas__outra {
  max-width: 40rem;
  margin: 24px auto 0;
  text-align: center;
  color: #5B5B66;
  text-wrap: balance;
}

/* Celular: abas quebram em duas linhas (as três sempre visíveis); cada par empilhado, seta para baixo */
@media (max-width: 767px) {
  .rotinas__abas {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    overflow: visible;
    border-radius: 20px;
  }

  .rotinas__aba {
    padding: 8px 14px;
    font-size: 14px;
  }

  .material-icons.rotinas__aba-icone {
    font-size: 18px;
  }

  .rotinas__painel {
    padding: 4px 20px 12px;
  }

  .rotinas__cabecalho {
    display: none;
  }

  .rotinas__par {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
    padding: 16px 0;
  }

  .rotinas__painel .rotinas__par:first-child {
    border-top: 0;
  }

  .material-icons.rotinas__seta {
    justify-self: start;
    margin-left: 12px;
    transform: rotate(90deg);
  }

  .rotinas__painel.is-armado .rotinas__seta {
    transform: rotate(90deg) translateX(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rotinas__aba,
  .rotinas__painel.is-acendendo .rotinas__depois,
  .rotinas__painel.is-acendendo .rotinas__seta {
    transition: none;
  }
}