/* assets/fm-ui.css — estados de interface compartilhados (T194, 16/08/2026)
   Skeleton, botão carregando, toast, campo com erro, passos, cartão de resumo,
   aviso. Usa só os tokens que já existem nas páginas (--teal, --accent/--coral,
   --borda, --creme-card). Carregado em /conta/, /painel/, /precos/checkout/,
   /obrigado/. Nada aqui muda o visual sozinho: só age quando a classe é usada. */
:root{--fm-teal:var(--teal,#0E4F4F);--fm-coral:var(--accent,var(--coral,#E86A4A));--fm-borda:var(--borda,rgba(14,79,79,.12));--fm-card:var(--creme-card,#FFFDF6);--fm-tint:#F1ECDF;--fm-coral-tint:#FDECDD}

/* Skeleton */
.fm-skel{display:inline-block;background:linear-gradient(90deg,var(--fm-tint) 25%,#FFFDF6 37%,var(--fm-tint) 63%);background-size:400% 100%;animation:fmSk 1.4s ease infinite;border-radius:8px;min-height:12px;min-width:40px;vertical-align:middle;color:transparent!important}
.fm-skel-linha{display:block;height:14px;margin:6px 0}
@keyframes fmSk{0%{background-position:100% 0}100%{background-position:0 0}}

/* Botão carregando (funciona em .btn-primary, .btn-google, button qualquer) */
.fm-carregando{position:relative;pointer-events:none;color:transparent!important;text-shadow:none!important}
.fm-carregando::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:fmGira .7s linear infinite}
.fm-carregando.fm-escuro::after{border-color:rgba(14,79,79,.25);border-top-color:var(--fm-teal)}
@keyframes fmGira{to{transform:rotate(360deg)}}

/* Toast */
.fm-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);z-index:999;background:var(--fm-teal);color:#FFF6E8;font:700 14px/1.4 'Nunito',sans-serif;padding:12px 18px;border-radius:14px;box-shadow:0 16px 40px rgba(14,79,79,.28);opacity:0;transition:opacity .25s,transform .25s cubic-bezier(.2,.8,.2,1);max-width:min(92vw,420px);text-align:center;pointer-events:none}
.fm-toast.on{opacity:1;transform:translate(-50%,0)}
.fm-toast.ok{background:#1f6b45}.fm-toast.erro{background:#B23A2A}

/* Campo com erro / ajuda */
.fm-campo-erro input,.fm-campo-erro select{border-color:#D95B3B!important;box-shadow:0 0 0 3px rgba(232,106,74,.16)!important}
.fm-msg-erro{color:#B23A2A;font-size:12.5px;font-weight:700;margin-top:6px}

/* Passos 1-2-3 */
.fm-passos{display:flex;align-items:center;gap:0;list-style:none;margin:0 0 18px;padding:0;counter-reset:fmp}
.fm-passos li{flex:1;display:flex;align-items:center;gap:8px;font:800 12px/1.2 'Nunito',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:rgba(14,79,79,.45);position:relative}
.fm-passos li::before{counter-increment:fmp;content:counter(fmp);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:800 13px 'Baloo 2',sans-serif;background:var(--fm-tint);color:rgba(14,79,79,.55);flex:none}
.fm-passos li:not(:last-child)::after{content:"";flex:1;height:2px;background:var(--fm-tint);margin:0 10px}
.fm-passos li.feito{color:var(--fm-teal)}
.fm-passos li.feito::before{background:var(--fm-teal);color:#FFF6E8}
.fm-passos li.feito::after{background:var(--fm-teal)}
.fm-passos li.atual{color:var(--fm-coral)}
.fm-passos li.atual::before{background:var(--fm-coral);color:#fff;box-shadow:0 6px 16px rgba(232,106,74,.35)}
@media(max-width:520px){.fm-passos li span{display:none}.fm-passos li.atual span{display:inline}}

/* Cartão de resumo (checkout / obrigado) */
.fm-resumo{background:var(--fm-card);border:1.5px solid var(--fm-borda);border-radius:18px;padding:16px 18px;box-shadow:0 1px 3px rgba(14,79,79,.05),0 10px 26px rgba(14,79,79,.05)}
.fm-resumo .fr-top{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px dashed var(--fm-borda)}
.fm-resumo .fr-top img{width:44px;height:auto;flex:none}
.fm-resumo .fr-nome{font:800 17px 'Baloo 2',sans-serif;color:var(--fm-teal);line-height:1.15}
.fm-resumo .fr-min{font-size:13px;font-weight:700;color:rgba(14,79,79,.62)}
.fm-resumo .fr-preco{margin-left:auto;font:800 24px 'Baloo 2',sans-serif;color:var(--fm-teal);white-space:nowrap}
.fm-resumo ol{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.fm-resumo ol li{display:flex;gap:10px;font-size:13.5px;font-weight:600;color:var(--fm-teal);line-height:1.4}
.fm-resumo ol li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fm-coral);margin-top:6px;flex:none}

/* Aviso / banner */
.fm-aviso{display:flex;gap:12px;align-items:flex-start;background:var(--fm-coral-tint);border:1.5px solid rgba(232,106,74,.28);border-radius:14px;padding:12px 14px;font-size:14px;font-weight:700;color:var(--fm-teal);line-height:1.45}
.fm-aviso img{width:34px;height:auto;flex:none}
.fm-aviso.teal{background:var(--fm-tint);border-color:var(--fm-borda)}

/* Entrada suave de blocos que aparecem depois de carregar dados */
.fm-entra{animation:fmEntra .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes fmEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.fm-skel,.fm-carregando::after,.fm-entra{animation:none!important}}