/* ===== Identidade visual MAFSOFT ===== */
:root{
  --mff-graf:#2b3643; --mff-graf2:#1f2831; --mff-orange:#E07B26; --mff-orange2:#f39a4d;
  --mff-bg:#f6f7f9; --mff-card:#ffffff; --mff-line:#e3e7ec; --mff-txt:#2a333c; --mff-muted:#6b7683;
}
body{ font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--mff-txt); background:var(--mff-bg); margin:0; }
.mff-wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
.mff-orange{ color:var(--mff-orange); }

/* Hero */
.mff-hero{ background:linear-gradient(135deg,var(--mff-graf) 0%,var(--mff-graf2) 100%); color:#fff; padding:64px 0; }
.mff-hero-grid{ display:grid; grid-template-columns:1.4fr .9fr; gap:40px; align-items:center; }
.mff-hero h1{ font-size:40px; line-height:1.12; margin:14px 0 16px; }
.mff-badge{ display:inline-block; background:rgba(224,123,38,.18); color:var(--mff-orange2); border:1px solid var(--mff-orange); padding:5px 14px; border-radius:20px; font-size:13px; font-weight:600; letter-spacing:.5px; }
.mff-lead{ color:#c7d0da; font-size:18px; max-width:560px; }
.mff-note{ color:#9aa6b2; font-size:13px; margin-top:14px; }
.mff-cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }
.mff-btn{ display:inline-block; padding:13px 24px; border-radius:10px; font-weight:600; text-decoration:none; transition:.15s; }
.mff-btn-primary{ background:var(--mff-orange); color:#fff; }
.mff-btn-primary:hover{ background:var(--mff-orange2); }
.mff-btn-ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }
.mff-btn-ghost:hover{ border-color:#fff; }
.mff-hero-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:26px; text-align:center; }
.mff-hero-card strong{ display:block; font-size:26px; letter-spacing:2px; margin-top:8px; }
.mff-hero-card span{ color:#aeb8c2; font-size:13px; }
.mff-hero-mods{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:16px; }
.mff-pill{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:3px 10px; font-size:12px; }

/* Seções */
.mff-section{ padding:56px 0; }
.mff-alt{ background:#fff; }
.mff-section h2{ color:var(--mff-graf); font-size:28px; margin:0 0 6px; }
.mff-sub{ color:var(--mff-muted); margin:0 0 28px; font-size:16px; }
.mff-cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mff-cards-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.mff-card{ background:var(--mff-card); border:1px solid var(--mff-line); border-radius:14px; padding:22px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.mff-alt .mff-card{ background:var(--mff-bg); }
.mff-card h3{ color:var(--mff-graf); margin:0 0 8px; font-size:17px; }
.mff-card p{ color:var(--mff-muted); margin:0; font-size:14px; }
.mff-card ul{ margin:0; padding-left:18px; }
.mff-card li{ font-size:13.5px; margin:5px 0; color:var(--mff-txt); }
.mff-card-hi{ border:2px solid var(--mff-orange); }
.mff-tag{ display:inline-block; margin-top:12px; font-size:12px; font-weight:600; padding:3px 12px; border-radius:14px; }
.mff-tag.on{ background:#e7f5ec; color:#2e7d32; }
.mff-tag.soon{ background:#fff3e6; color:var(--mff-orange); }

/* Contato */
.mff-contato{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.mff-contato-links{ display:flex; flex-direction:column; gap:8px; }
.mff-contato-links a{ color:var(--mff-graf); font-weight:600; text-decoration:none; }
.mff-contato-links a:hover{ color:var(--mff-orange); }

@media (max-width:860px){
  .mff-hero-grid{ grid-template-columns:1fr; }
  .mff-cards-3,.mff-cards-4{ grid-template-columns:1fr 1fr; }
  .mff-hero h1{ font-size:31px; }
}
@media (max-width:560px){
  .mff-cards-3,.mff-cards-4{ grid-template-columns:1fr; }
}

/* ===== Caixa de erro do Blazor: escondida por padrao, so aparece em erro real ===== */
#blazor-error-ui{ color-scheme:light only; background:lightyellow; bottom:0; box-shadow:0 -1px 2px rgba(0,0,0,.2); box-sizing:border-box; display:none; left:0; padding:.6rem 1.25rem .7rem 1.25rem; position:fixed; width:100%; z-index:1000; }
#blazor-error-ui .dismiss{ cursor:pointer; position:absolute; right:.75rem; top:.5rem; }

/* ===== Login: botão do topo + modal ===== */
.mff-nav-login{ background:#fff; color:#2b3643; border:1px solid #e3e7ec; padding:8px 16px; border-radius:8px; cursor:pointer; font-size:15px; font-weight:600; }
.mff-nav-login:hover{ border-color:#2b3643; }
.mff-overlay{ position:fixed; inset:0; background:rgba(20,26,32,.55); display:flex; align-items:center; justify-content:center; z-index:1000; }
.mff-modal{ background:#fff; width:410px; max-width:92vw; border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.35); padding:30px; position:relative; }
.mff-modal-x{ position:absolute; top:12px; right:15px; color:#9aa6b2; font-size:22px; cursor:pointer; background:none; border:none; }
.mff-modal-logo{ display:flex; justify-content:center; margin-bottom:4px; }
.mff-modal-title{ text-align:center; margin:6px 0 2px; color:#2b3643; font-size:22px; }
.mff-modal-sub{ text-align:center; color:#6b7683; font-size:14px; margin:0 0 20px; }
.mff-lbl{ display:block; font-size:13px; color:#2b3643; font-weight:600; margin:12px 0 5px; }
.mff-input{ width:100%; padding:11px 13px; border:1px solid #e3e7ec; border-radius:9px; font-size:15px; outline:none; }
.mff-input:focus{ border-color:#E07B26; }
.mff-row-links{ display:flex; justify-content:flex-end; margin-top:10px; font-size:13px; }
.mff-row-links a{ color:#E07B26; text-decoration:none; }
.mff-entrar{ width:100%; margin-top:16px; background:#E07B26; color:#fff; border:none; padding:12px; border-radius:9px; font-size:15px; font-weight:600; cursor:pointer; }
.mff-entrar:hover{ background:#f39a4d; }
.mff-divider{ display:flex; align-items:center; gap:12px; color:#6b7683; font-size:13px; margin:20px 0; }
.mff-divider::before,.mff-divider::after{ content:""; flex:1; height:1px; background:#e3e7ec; }
.mff-social{ display:flex; flex-direction:column; gap:10px; }
.mff-sbtn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px; border:1px solid #e3e7ec; border-radius:9px; background:#fff; font-size:14.5px; font-weight:600; color:#2a333c; cursor:pointer; text-decoration:none; }
.mff-sbtn:hover{ background:#f6f7f9; }
.mff-modal-foot{ text-align:center; margin-top:20px; font-size:13.5px; color:#6b7683; border-top:1px solid #e3e7ec; padding-top:16px; }
.mff-modal-foot a{ color:#E07B26; text-decoration:none; font-weight:700; }
.mff-modal-foot .mff-small{ display:block; margin-top:8px; font-size:12.5px; }
.mff-modal-foot .mff-small a{ font-weight:600; }

/* ===== Tela "Preparando o sistema" (barra de progresso) ===== */
.mff-prep{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#2b3643,#1f2831); }
.mff-prep-card{ background:#fff; border-radius:16px; padding:40px; width:430px; max-width:92vw; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.mff-prep-card h2{ color:#2b3643; margin:16px 0 6px; font-size:22px; }
.mff-prep-card p{ color:#6b7683; font-size:14px; margin:0; }
.mff-prep-bar{ height:8px; background:#eef1f4; border-radius:6px; overflow:hidden; margin:24px 0 10px; position:relative; }
.mff-prep-fill{ position:absolute; height:100%; width:40%; background:#E07B26; border-radius:6px; animation:mffprep 1.1s ease-in-out infinite; }
@keyframes mffprep{ 0%{ left:-40%; } 100%{ left:100%; } }
.mff-prep-msg{ margin-top:10px !important; font-size:13px !important; color:#E07B26 !important; font-weight:600; }

/* ===== Páginas de autenticação (cadastro / entrar) ===== */
.mff-authpage{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:#f6f7f9; padding:24px; }
.mff-authcard{ box-shadow:0 10px 40px rgba(0,0,0,.10); }
.mff-alert{ background:#fdf3f3; border:1px solid #f0cccc; color:#c0392b; border-radius:9px; padding:10px 14px; font-size:13.5px; margin-bottom:8px; }

/* ===== Logo em imagem (topo e hero) ===== */
.mff-brand-img{ width:34px; height:34px; object-fit:contain; display:block; }
.mff-herocard-img{ width:88px; height:88px; object-fit:contain; border-radius:14px; }

/* ===== Área Exclusiva (painel do cliente) ===== */
.mff-dash-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.mff-btn-ghost2{ display:inline-block; background:#fff; border:1px solid #e3e7ec; color:#2b3643; padding:9px 18px; border-radius:8px; cursor:pointer; font-weight:600; font-size:14px; text-decoration:none; }
.mff-btn-ghost2:hover{ border-color:#2b3643; }
.mff-dash{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:22px; }
.mff-dash-card{ display:block; background:#fff; border:1px solid #e3e7ec; border-radius:14px; padding:22px; text-decoration:none; box-shadow:0 1px 4px rgba(0,0,0,.04); transition:.15s; }
.mff-dash-card:hover{ border-color:#E07B26; transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.mff-dash-ico{ font-size:30px; margin-bottom:10px; }
.mff-dash-card h3{ color:#2b3643; margin:0 0 6px; font-size:17px; }
.mff-dash-card p{ color:#6b7683; margin:0; font-size:14px; }

/* logout no header */
.mff-nav-logoutform{ display:inline; margin:0; }

/* ===== Menu de conta (header logado) ===== */
.mff-account{ position:relative; }
.mff-account-btn{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #e3e7ec; border-radius:24px; padding:4px 12px 4px 4px; cursor:pointer; font-weight:600; color:#2b3643; font-size:14px; }
.mff-account-btn:hover{ border-color:#2b3643; }
.mff-avatar{ width:30px; height:30px; border-radius:50%; background:#2b3643; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex:0 0 auto; }
.mff-caret{ color:#6b7683; font-size:11px; }
.mff-account-menu{ position:absolute; right:0; top:calc(100% + 10px); width:280px; max-width:calc(100vw - 32px); background:#fff; border:1px solid #e3e7ec; border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.18); padding:10px; z-index:1200; }
.mff-account-head{ display:flex; align-items:center; gap:12px; padding:6px 10px 14px; border-bottom:1px solid #eef1f4; margin-bottom:8px; }
.mff-avatar-lg{ width:44px; height:44px; font-size:17px; }
.mff-account-id strong{ display:block; color:#2b3643; font-size:15px; }
.mff-account-id span{ display:block; color:#6b7683; font-size:12.5px; word-break:break-all; }
.mff-account-menu a{ display:block; padding:9px 12px; border-radius:8px; text-decoration:none; color:#2a333c; font-size:14px; font-weight:500; }
.mff-account-menu a:hover{ background:#f6f7f9; }
.mff-account-sep{ height:1px; background:#eef1f4; margin:8px 0; }
.mff-account-sair{ width:100%; text-align:left; background:none; border:none; padding:9px 12px; border-radius:8px; color:#c0392b; font-size:14px; font-weight:600; cursor:pointer; }
.mff-account-sair:hover{ background:#fdf3f3; }

/* alerta de sucesso (perfil salvo) */
.mff-ok{ background:#e7f5ec; border:1px solid #bfe3cc; color:#2e7d32; border-radius:9px; padding:10px 14px; font-size:14px; margin-bottom:14px; }

/* foto de perfil / avatar imagem */
.mff-avatar-img{ object-fit:cover; }
.mff-photo{ display:flex; align-items:center; gap:16px; margin-bottom:6px; }
.mff-photo-img{ width:88px; height:88px; border-radius:50%; object-fit:cover; border:1px solid #e3e7ec; background:#2b3643; }

/* ===== Modal Certificado Digital ===== */
.mff-cert-list{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.mff-cert-item{ display:flex; flex-direction:column; border:1px solid var(--mff-line); border-radius:10px; padding:12px 14px; }
.mff-cert-item strong{ color:#2b3643; font-size:15px; }
.mff-cert-item span{ color:#6b7683; font-size:13px; margin-top:2px; }

/* ===== Modal de emissao (iframe mascarado) ===== */
.mff-emit-box{ background:#fff; width:1000px; max-width:96vw; height:88vh; border-radius:14px; overflow:hidden; position:relative; box-shadow:0 24px 60px rgba(0,0,0,.4); display:flex; flex-direction:column; }
.mff-emit-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--mff-line); background:#fff; }
.mff-emit-head strong{ color:#2b3643; font-size:15px; }
.mff-emit-actions{ display:flex; gap:14px; align-items:center; }
.mff-emit-actions a{ font-size:13px; color:#6b7683; text-decoration:none; font-weight:600; }
.mff-emit-actions a:hover{ color:#E07B26; }
.mff-emit-x{ background:none; border:none; color:#9aa6b2; font-size:24px; line-height:1; cursor:pointer; }
.mff-emit-body{ position:relative; flex:1; background:#f6f7f9; }
.mff-emit-frame{ position:absolute; inset:0; border:0; width:100%; height:100%; }
.mff-emit-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#6b7683; font-size:14px; }

/* Aviso do modal de certificado (opcao A) */
.mff-cert-hint{ font-size:12.5px; color:#6b7683; text-align:center; margin:16px 0 0; line-height:1.45; }

/* ===== Cadastro completo (busca CNPJ/CEP) ===== */
.mff-inline{ display:flex; gap:8px; align-items:stretch; }
.mff-inline .mff-input{ flex:1; }
.mff-btn-busca{ white-space:nowrap; background:#2b3643; color:#fff; border:none; border-radius:9px; padding:0 16px; font-weight:600; cursor:pointer; font-size:14px; }
.mff-btn-busca:hover{ background:#1f2831; }
.mff-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.mff-photo{ display:flex; align-items:center; gap:16px; margin-bottom:8px; }
.mff-photo-img{ width:84px; height:84px; border-radius:50%; object-fit:cover; border:1px solid var(--mff-line); background:#f6f7f9; }
@media (max-width:560px){ .mff-grid2{ grid-template-columns:1fr; } }