/* Formação MedCare dentro do app (Components/FormacaoAviso.razor e FormacaoProgressoCard.razor).
   A página pública /curso tem a folha própria (curso.css). */

/* aviso da tela inicial: canto inferior direito, ACIMA da fileira de FABs (IA · Suporte · Chat em bottom 24px) */
.mc-formacao-aviso {
  position: fixed; right: 24px; bottom: 96px; z-index: 1059; width: min(380px, calc(100vw - 32px));
  display: flex; gap: 12px; padding: 16px 16px 18px; border-radius: 16px; overflow: hidden;
  background: var(--custom-white, #fff); color: var(--default-text-color, #0f2229);
  border: 1px solid rgba(13, 136, 140, .35); box-shadow: 0 12px 36px rgba(5, 15, 18, .22);
  animation: mc-formacao-entra .35s ease-out;
}
@keyframes mc-formacao-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.mc-formacao-ico { flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 24px;
  background: linear-gradient(135deg, #07484b, #0d888c); }
.mc-formacao-txt { flex: 1; min-width: 0; padding-right: 14px; }
.mc-formacao-tag { display: inline-block; margin-bottom: 2px; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #0d888c; }
.mc-formacao-txt b { display: block; font-size: 15px; }
.mc-formacao-txt p { margin: 4px 0 8px; font-size: 13px; line-height: 1.45; opacity: .85; }
.mc-formacao-txt .mc-formacao-prog { font-weight: 600; color: #0d888c; opacity: 1; }
.mc-formacao-txt a { font-weight: 700; color: #0d888c; text-decoration: none; font-size: 13.5px; }
.mc-formacao-txt a:hover { text-decoration: underline; }
.mc-formacao-x { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent;
  font-size: 20px; line-height: 1; color: inherit; opacity: .55; cursor: pointer; }
.mc-formacao-x:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
/* barra dos 10 s */
.mc-formacao-tempo { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #0d888c; transform-origin: left;
  animation: mc-formacao-tempo 10s linear forwards; }
@keyframes mc-formacao-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 576px) { .mc-formacao-aviso { right: 16px; left: 16px; width: auto; bottom: 92px; } }
[data-theme-mode="dark"] .mc-formacao-aviso { background: #16262c; color: #e6f0f2; border-color: rgba(43, 179, 183, .4); }

/* card do Meu Perfil */
.mc-formacao-geral { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; margin-bottom: 14px; }
.mc-formacao-geral small { display: block; opacity: .7; }
.mc-formacao-geral .mc-formacao-barra { grid-column: 1 / -1; height: 10px; }
.mc-formacao-pct { font-size: 26px; font-weight: 800; color: #0d888c; }
.mc-formacao-barra { height: 6px; border-radius: 999px; background: rgba(130, 152, 159, .22); overflow: hidden; }
.mc-formacao-barra i { display: block; height: 100%; background: #16a34a; border-radius: inherit; }
.mc-formacao-lista { list-style: none; margin: 0; padding: 0; }
.mc-formacao-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(130, 152, 159, .2); }
.mc-formacao-cor { flex: 0 0 10px; align-self: stretch; border-radius: 6px; background: linear-gradient(180deg, var(--mc-c1), var(--mc-c3)); }
.mc-formacao-nome { flex: 1; min-width: 0; }
.mc-formacao-nome b { display: block; }
.mc-formacao-nome small { display: block; opacity: .7; margin-bottom: 4px; }