/* ImpulsaFlow Odonto - polimento visual da vertical.
   Escopado em body.vertical-odonto: nao afeta med nem juridico.
   Paleta odonto (verticalBranding): branco, azul claro e verde agua. */

body.vertical-odonto {
  --odonto-deep: #0b3b4a;
  --odonto-teal: #12a594;
  --odonto-aqua: #2ec9a7;
  --odonto-sky: #66d8ff;
  --odonto-wash: #f2fbfb;
}

/* ---------- Modal de boas-vindas / tutorial ---------- */

body.vertical-odonto .welcome-modal {
  background: rgba(240, 251, 251, 0.78);
}

body.vertical-odonto .welcome-card {
  border-color: rgba(18, 165, 148, 0.18);
  box-shadow: 0 28px 80px rgba(11, 59, 74, 0.2);
}

/* Fita superior que dá identidade sem pesar no carregamento */
body.vertical-odonto .welcome-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 26px 26px 0 0;
  background: linear-gradient(90deg, var(--odonto-teal), var(--odonto-aqua) 55%, var(--odonto-sky));
}

/* Rotulo de secao, nao botao: sem pilula nem borda, para ninguem tentar clicar. */
body.vertical-odonto .welcome-kicker {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--odonto-teal);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
}

body.vertical-odonto .welcome-card h2,
body.vertical-odonto .welcome-card h3,
body.vertical-odonto .welcome-steps strong {
  color: var(--odonto-deep);
}

/* Primeiro parágrafo com mais presença: é a promessa da plataforma */
body.vertical-odonto .welcome-card #welcomeIntro {
  color: #133c48;
  font-size: 1.03rem;
  font-weight: 500;
}

body.vertical-odonto .welcome-platforms span {
  color: var(--odonto-deep);
  border-color: rgba(18, 165, 148, 0.24);
  background: var(--odonto-wash);
}

body.vertical-odonto .welcome-steps li {
  border-color: rgba(18, 165, 148, 0.14);
  background: linear-gradient(180deg, #ffffff, var(--odonto-wash));
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

body.vertical-odonto .welcome-steps li:hover {
  transform: translateY(-1px);
  border-color: rgba(18, 165, 148, 0.3);
  box-shadow: 0 10px 24px rgba(11, 59, 74, 0.09);
}

body.vertical-odonto .welcome-steps li::before {
  background: linear-gradient(135deg, var(--odonto-teal), var(--odonto-aqua));
  box-shadow: 0 4px 10px rgba(18, 165, 148, 0.32);
}

body.vertical-odonto .welcome-note {
  border-left: 3px solid var(--odonto-aqua);
  background: var(--odonto-wash);
}

/* ---------- Botão "Como usar" ---------- */

body.vertical-odonto [data-welcome-open] {
  border-color: rgba(18, 165, 148, 0.3);
  color: var(--odonto-deep);
  background: var(--odonto-wash);
}

body.vertical-odonto [data-welcome-open]:hover {
  border-color: rgba(18, 165, 148, 0.5);
  background: #e6f7f6;
}

/* ---------- Botão "Instalar app" ---------- */

body.vertical-odonto .btn-install-app {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: rgba(18, 165, 148, 0.4);
  color: #ffffff;
  background: linear-gradient(135deg, var(--odonto-teal), var(--odonto-aqua));
  box-shadow: 0 6px 16px rgba(18, 165, 148, 0.26);
}

body.vertical-odonto .btn-install-app:hover {
  filter: brightness(1.05);
  box-shadow: 0 8px 20px rgba(18, 165, 148, 0.34);
}

body.vertical-odonto .btn-install-app[hidden] {
  display: none;
}

/* ---------- Sidebar e progresso ---------- */

body.vertical-odonto .progress-track span {
  background: linear-gradient(90deg, var(--odonto-teal), var(--odonto-aqua));
}

body.vertical-odonto .day-nav a.done {
  border-color: rgba(18, 165, 148, 0.28);
}

body.vertical-odonto .specialty-label {
  color: var(--odonto-deep);
}

/* Respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
  body.vertical-odonto .welcome-steps li {
    transition: none;
  }
  body.vertical-odonto .welcome-steps li:hover {
    transform: none;
  }
}

/* A fita superior encosta nas bordas no mobile, onde o raio do card muda */
@media (max-width: 640px) {
  body.vertical-odonto .welcome-card::before {
    border-radius: 20px 20px 0 0;
  }
}