/* ============================================================ */
/* BBJ Flow — Estilos da Aba Faixas (Graduações) — v2           */
/* Timeline com SVG + animações staggered + tema Jiu-Jitsu      */
/* ============================================================ */

/* ------------------------------------------------------------ */
/* Cores das faixas (variáveis CSS)                             */
/* ------------------------------------------------------------ */
:root {
  --color-belt-branca: #F5F5F5;
  --color-belt-cinza: #9E9E9E;
  --color-belt-amarela: #FDD835;
  --color-belt-laranja: #FF9800;
  --color-belt-verde: #4CAF50;
  --color-belt-azul: #1976D2;
  --color-belt-roxa: #7B1FA2;
  --color-belt-marrom: #5D4037;
  --color-belt-preta: #212121;
  --color-belt-coral: #E53935;
  --color-belt-vermelha: #B71C1C;
}

/* ------------------------------------------------------------ */
/* Timeline wrapper — scroll horizontal                         */
/* ------------------------------------------------------------ */
.faixas-timeline-wrapper {
  overflow-x: auto;
  padding: var(--space-sm) var(--space-md) var(--space-lg);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}

.faixas-timeline-wrapper::-webkit-scrollbar {
  height: 6px;
}

.faixas-timeline-wrapper::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: 3px;
}

/* ------------------------------------------------------------ */
/* Timeline flex container — alinha as entradas em linha        */
/* ------------------------------------------------------------ */
.faixas-timeline {
  display: flex;
  align-items: center;
  min-width: max-content;
  padding: var(--space-md) var(--space-lg);
  gap: 0;
}

/* ------------------------------------------------------------ */
/* Entry wrapper: connector SVG + item                          */
/* ------------------------------------------------------------ */
.faixas-timeline-entry {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ------------------------------------------------------------ */
/* SVG CONNECTOR — trilha de tatame entre nós                   */
/* ------------------------------------------------------------ */
.faixas-connector-svg {
  flex-shrink: 0;
  width: 64px;
  height: 40px;
  overflow: visible;
}

/* Path animation: desenha a linha da esquerda para a direita */
.connector-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawPath 0.55s ease-out calc(var(--anim-delay, 0s)) both;
}

/* ------------------------------------------------------------ */
/* ITEM — coluna: data → nó → faixa → grau → delete             */
/* ------------------------------------------------------------ */
.faixas-timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  position: relative;
  min-width: 80px;
  padding: 0 4px;
}

/* ------------------------------------------------------------ */
/* Date (acima do nó)                                           */
/* ------------------------------------------------------------ */
.faixas-item-date {
  font-size: 11px;
  color: var(--color-gray-400);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  animation: labelFadeIn 0.35s ease-out calc(var(--anim-delay, 0s) + 0.07s) both;
}

/* ------------------------------------------------------------ */
/* NODE — círculo colorido da faixa                             */
/* ------------------------------------------------------------ */
.faixas-node {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
  cursor: default;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  opacity: 0;
  transform: scale(0);
  animation: nodeAppear 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) var(--anim-delay, 0s) both;
}

.faixas-node:hover {
  transform: scale(1.25) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}

/* Nó atual (último) — maior + borda dourada + pulsação */
.faixas-node--atual {
  width: 26px !important;
  height: 26px !important;
  border: 3px solid #D4AF37 !important;
  box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6);
  z-index: 3;
  animation:
    nodeAppear 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) var(--anim-delay, 0s) both,
    nodePulse 2.2s ease-in-out calc(var(--anim-delay, 0s) + 0.6s) infinite;
}

/* Tooltip custom via ::after (sobrescreve o title nativo visualmente) */
.faixas-node[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-gray-800);
  color: #ffffff;
  font-size: 11px;
  font-weight: 400;
  padding: 5px 12px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 20;
  pointer-events: none;
  animation: tooltipAppear 0.2s ease both;
}

/* ------------------------------------------------------------ */
/* Labels abaixo do nó                                          */
/* ------------------------------------------------------------ */

/* Nome da faixa */
.faixas-item-faixa {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-gray-800);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  animation: labelFadeIn 0.35s ease-out calc(var(--anim-delay, 0s) + 0.14s) both;
}

/* Grau */
.faixas-item-grau {
  font-size: 11px;
  color: var(--color-gray-500);
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  animation: labelFadeIn 0.35s ease-out calc(var(--anim-delay, 0s) + 0.18s) both;
}

/* ------------------------------------------------------------ */
/* Botão de excluir (abaixo dos labels)                         */
/* ------------------------------------------------------------ */
.faixas-item-delete {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 8px;
  margin-top: 2px;
  border-radius: 4px;
  color: var(--color-gray-400);
  transition: color 0.15s ease, background 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: labelFadeIn 0.35s ease-out calc(var(--anim-delay, 0s) + 0.22s) both;
}

.faixas-item-delete:hover {
  color: var(--color-farol-red, #E53935);
  background: rgba(229, 57, 53, 0.08);
}

.faixas-item-delete .material-symbols-outlined {
  font-size: 16px;
}

/* ------------------------------------------------------------ */
/* KEYFRAMES                                                    */
/* ------------------------------------------------------------ */

/* Node aparece com bounce (efeito de graduação) */
@keyframes nodeAppear {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.25);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Nó atual pulsa com glow dourado */
@keyframes nodePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
  }
}

/* Linha SVG sendo desenhada (efeito "trilha") */
@keyframes drawPath {
  to {
    stroke-dashoffset: 0;
  }
}

/* Labels sobem suavemente */
@keyframes labelFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tooltip aparece sem transição brusca */
@keyframes tooltipAppear {
  from {
    opacity: 0;
    transform: translate(-50%, 4px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ------------------------------------------------------------ */
/* RESPONSIVO — Mobile                                          */
/* ------------------------------------------------------------ */
@media (max-width: 768px) {
  .faixas-node {
    width: 16px;
    height: 16px;
  }

  .faixas-node--atual {
    width: 22px !important;
    height: 22px !important;
  }

  .faixas-connector-svg {
    width: 44px;
    height: 32px;
  }

  .faixas-timeline-item {
    min-width: 64px;
    gap: 2px;
  }

  .faixas-item-date {
    font-size: 10px;
  }

  .faixas-item-faixa {
    font-size: 11px;
  }

  .faixas-item-grau {
    font-size: 10px;
  }

  .faixas-item-delete .material-symbols-outlined {
    font-size: 14px;
  }
}

/* ------------------------------------------------------------ */
/* SUB-MODAL DE REGISTRO (mantido)                              */
/* ------------------------------------------------------------ */
.faixas-registro-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: faixasFadeIn 0.2s ease;
}

.faixas-registro-card {
  background: white;
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-lg, 24px);
  max-width: 420px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: faixasScaleIn 0.2s ease;
  max-height: 90vh;
  overflow-y: auto;
}

@keyframes faixasFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes faixasScaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 768px) {
  .faixas-registro-card {
    width: 95%;
    padding: var(--space-md);
  }
}