/* =========================================================
   Center — página de Suporte (/suporte/)
   Complementa /style.css (tokens, header, botões, footer).
   As "telas" são ilustrações em HTML das janelas reais do
   CenterRemoto.exe e do CenterDiag.exe (textos copiados do código).
   ========================================================= */

/* ---------- Topo da página ---------- */
.page-hero { background: var(--grey-800); color: var(--white); padding: 72px 0 80px; }
.page-hero .container { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; }
.page-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 20px; }
.page-hero .hero-lead { margin-bottom: 0; }

.aviso-seguranca {
    background: var(--grey-700); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius-card);
    padding: 28px;
}
.aviso-seguranca h2 { font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.aviso-seguranca h2 .icon { color: var(--red); font-size: 1.4rem; }
.aviso-seguranca ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.aviso-seguranca li { display: flex; gap: 12px; color: var(--grey-300); font-size: .98rem; }
.aviso-seguranca li .icon { color: var(--red); font-size: 1.15rem; margin-top: 3px; }
.aviso-seguranca strong { color: var(--white); font-weight: 500; }

/* ---------- Escolha do programa (abas) ---------- */
.escolha-head { max-width: 720px; margin-bottom: 32px; }
.escolha-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: 8px; }
.escolha-head p { color: var(--grey-600); font-size: 1.05rem; }

.escolha { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.escolha-card {
    position: relative; text-align: left; font: inherit; color: inherit; cursor: pointer;
    background: var(--white); border: 2px solid var(--grey-200); border-radius: var(--radius-card);
    padding: 28px; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: start;
    box-shadow: var(--shadow-card); transition: border-color var(--ease), box-shadow var(--ease), background-color var(--ease);
}
.escolha-card:hover { border-color: var(--grey-300); box-shadow: var(--shadow-card-hover); }
.escolha-card[aria-selected="true"] { border-color: var(--red); background: #fffafa; }
.escolha-card:focus-visible, .btn:focus-visible, .faq summary:focus-visible, .nav a:focus-visible {
    outline: 3px solid var(--red); outline-offset: 3px;
}
.escolha-icone {
    grid-row: span 3; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--red-light);
    display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--grey-900);
}
.escolha-card[aria-selected="true"] .escolha-icone { background: var(--red); color: var(--white); }
.escolha-titulo { font-family: var(--font-title); font-weight: 600; font-size: 1.2rem; line-height: 1.3; }
.escolha-arquivo { font-size: .9rem; color: var(--grey-600); }
.escolha-desc { font-size: .98rem; color: var(--grey-600); margin-top: 6px; }
.escolha-marca {
    position: absolute; top: 16px; right: 16px; font-size: .8rem; font-weight: 500; color: var(--red-dark);
    display: none; align-items: center; gap: 6px;
}
.escolha-card[aria-selected="true"] .escolha-marca { display: inline-flex; }

/* ---------- Painel do tutorial ---------- */
.tutorial { padding-top: 56px; }
.tutorial[hidden] { display: none; }
.tutorial + .tutorial { border-top: 1px solid var(--grey-200); margin-top: 56px; } /* sem JS os dois aparecem */
.tutorial-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.tutorial-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: 6px; }
.tutorial-head p { color: var(--grey-600); }
.download { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.download-meta { font-size: .88rem; color: var(--grey-600); }

/* Passos: linha do tempo com o texto à esquerda e a tela à direita */
.passos { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.passo {
    position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px;
    padding: 0 0 56px 72px; counter-increment: passo;
}
.passo::before {
    content: counter(passo); position: absolute; left: 0; top: 0;
    width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: var(--white);
    font-family: var(--font-title); font-weight: 700; font-size: 1.15rem;
    display: flex; align-items: center; justify-content: center;
}
.passo::after { content: ""; position: absolute; left: 21px; top: 52px; bottom: 8px; width: 2px; background: var(--grey-200); }
.passo:last-child { padding-bottom: 0; }
.passo:last-child::after { display: none; }
.passo-texto h3 { font-size: 1.25rem; font-weight: 600; margin: 8px 0 12px; }
.passo-texto p { color: var(--grey-600); margin-bottom: 12px; max-width: 34rem; }
.passo-texto p:last-child { margin-bottom: 0; }
.passo-texto strong { color: var(--grey-900); font-weight: 600; }
.nota {
    background: var(--grey-100); border-left: 3px solid var(--grey-300); border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
    padding: 12px 16px; font-size: .93rem; color: var(--grey-600) !important;
}
.nota-alerta { background: var(--red-light); border-left-color: var(--red); color: var(--grey-900) !important; }
.passo-final::before { content: "✓"; background: var(--ok); }

/* ---------- Ilustração das telas do Windows ---------- */
.tela-fig { margin: 0; }
.tela-fig figcaption { font-size: .85rem; color: var(--grey-500); margin-top: 10px; }
.cena {
    background: linear-gradient(135deg, #dfe7f1 0%, #eef1f5 60%, #e6e2ee 100%);
    border-radius: var(--radius-card); padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.tela {
    --w-borda: #c4c4c4; --w-azul: #0067c0; --w-texto: #1b1b1b; --w-sub: #5c5c5c;
    width: 100%; max-width: 460px; background: var(--white); color: var(--w-texto);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 13px; line-height: 1.45;
    border: 1px solid var(--w-borda); border-radius: 8px; overflow: hidden;
    box-shadow: 0 18px 40px rgba(20, 30, 50, .22), 0 2px 6px rgba(20, 30, 50, .12);
}
.tela-barra { display: flex; align-items: center; gap: 8px; height: 32px; padding-left: 10px; font-size: 12px; color: #333; background: #f3f3f3; border-bottom: 1px solid #e5e5e5; }
.tela-barra .app-ico { width: 16px; height: 16px; border-radius: 3px; background: var(--red); position: relative; flex-shrink: 0; }
.tela-barra .app-ico::after { content: ""; position: absolute; inset: 4px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; }
.tela-barra .titulo { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tela-barra .ctrl { display: flex; height: 100%; }
.tela-barra .ctrl span { width: 40px; display: flex; align-items: center; justify-content: center; color: #555; font-size: 13px; }
.tela-corpo { padding: 18px 18px 18px; }
.tela-h { font-size: 17px; font-weight: 600; margin-bottom: 6px; line-height: 1.3; }
.tela-sub { color: var(--w-sub); }
.tela-campo {
    border: 1px solid #8a8a8a; border-bottom-width: 2px; border-bottom-color: var(--w-azul); border-radius: 4px;
    padding: 6px 10px; margin: 12px 0; background: #fff; min-height: 34px;
}
.tela-campo.codigo { text-align: center; font-size: 19px; font-weight: 600; letter-spacing: .08em; }
.tela-caixa { border: 1px solid #d6d6d6; border-radius: 4px; padding: 8px 10px; color: #333; background: #fbfbfb; margin: 10px 0 14px; }
.tela-log {
    font-family: Consolas, "Cascadia Mono", monospace; font-size: 11.5px; line-height: 1.5; color: #333;
    border: 1px solid #b9b9b9; background: #fff; padding: 8px 10px; margin: 12px 0;
}
.tela-progresso { height: 6px; border-radius: 3px; background: #e6e6e6; overflow: hidden; margin-bottom: 14px; position: relative; }
.tela-progresso::after { content: ""; position: absolute; top: 0; bottom: 0; left: 18%; width: 34%; border-radius: 3px; background: #06b025; }
.tela-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.tela-botoes.coluna { flex-direction: column; gap: 8px; }
.w-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-width: 96px; height: 30px; padding: 0 14px; border-radius: 4px; font-size: 13px; white-space: nowrap;
    background: #fdfdfd; border: 1px solid #d0d0d0; border-bottom-color: #b8b8b8; color: var(--w-texto);
}
.tela-botoes.coluna .w-btn { width: 100%; height: 34px; }
.w-btn.padrao { border: 2px solid var(--w-azul); }
.w-rodape { color: var(--w-sub); font-size: 12px; margin-top: 10px; }

/* Destaque: onde o cliente deve clicar */
.alvo { outline: 3px solid var(--red); outline-offset: 3px; z-index: 1; }
.alvo::after, .alvo-link::after {
    content: ""; position: absolute; right: -14px; bottom: -22px; width: 26px; height: 30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M3 2l0 20 5.2-4.6 3.4 7.6 3.3-1.5-3.3-7.4 7-.4z' fill='%23fff' stroke='%23111' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
}
.alvo-link { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 2px; position: relative; }
.alvo-link::after { right: -20px; bottom: -24px; }

/* Caixa de mensagem do Windows (MessageBox) */
.msg { display: flex; gap: 14px; }
.msg-ico { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px; }
.msg-ico.pergunta { background: var(--w-azul); }
.msg-texto p { margin-bottom: 8px; }
.msg-texto ul { margin: 0 0 8px; padding-left: 18px; }
.msg-texto li { margin-bottom: 3px; }
.tela-msg .tela-botoes { background: #f0f0f0; margin: 16px -18px -18px; padding: 12px 18px; border-top: 1px solid #e3e3e3; }

/* SmartScreen */
.tela-smart { background: #0f5ca8; color: #fff; border-color: #0b4c8c; }
.tela-smart .tela-corpo { padding: 22px 24px 18px; }
.tela-smart .fechar { text-align: right; font-size: 14px; opacity: .85; margin: -8px -8px 4px 0; }
.tela-smart h4 { font-family: "Segoe UI", system-ui, sans-serif; font-weight: 300; font-size: 24px; line-height: 1.2; margin-bottom: 12px; }
.tela-smart p { margin-bottom: 10px; color: #e8f1fb; }
.tela-smart .detalhe { margin: 14px 0; color: #fff; }
.tela-smart .detalhe span { display: inline-block; min-width: 88px; color: #cfe2f6; }
.tela-smart .link { text-decoration: underline; color: #fff; }
.tela-smart .tela-botoes { margin-top: 20px; }
.tela-smart .w-btn { background: transparent; color: #fff; border: 2px solid #fff; border-radius: 0; min-width: 150px; }
.tela-smart .w-btn.cinza { background: #fff; color: #0f5ca8; border-color: #fff; }
.smart-pequena { max-width: 460px; width: 100%; }

/* Controle de Conta de Usuário (UAC) */
.tela-uac { max-width: 400px; }
.tela-uac .uac-topo { background: #f3f3f3; padding: 12px 18px; font-size: 12px; border-bottom: 1px solid #e0e0e0; }
.tela-uac .uac-topo strong { display: block; font-size: 17px; font-weight: 600; margin-top: 6px; line-height: 1.3; color: #1b1b1b; }
.tela-uac .uac-app { display: flex; gap: 12px; align-items: center; padding: 16px 18px 6px; }
.tela-uac .uac-app .app-ico-g { width: 40px; height: 40px; border-radius: 8px; background: var(--red); position: relative; }
.tela-uac .uac-app .app-ico-g::after { content: ""; position: absolute; inset: 10px; border: 3px solid #fff; border-right-color: transparent; border-radius: 50%; }
.tela-uac .uac-app strong { font-size: 15px; font-weight: 600; }
.tela-uac .uac-info { padding: 6px 18px 4px; color: var(--w-sub); }
.tela-uac .uac-mais { padding: 4px 18px 0; color: var(--w-azul); }
.tela-uac .tela-botoes { padding: 16px 18px 18px; margin: 0; justify-content: stretch; }
.tela-uac .tela-botoes .w-btn { flex: 1; }
.tela-uac .w-btn.sim { background: var(--w-azul); color: #fff; border-color: var(--w-azul); }

/* Painel de downloads do navegador */
.tela-nav { max-width: 360px; }
.tela-nav .nav-topo { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 8px; font-weight: 600; font-size: 14px; }
.tela-nav .nav-topo span { color: var(--w-sub); font-weight: 400; letter-spacing: .1em; }
.tela-nav .nav-item { display: flex; gap: 12px; padding: 10px 16px 16px; align-items: flex-start; }
.tela-nav .exe-ico { width: 30px; height: 30px; border: 1px solid #c9c9c9; border-radius: 4px; background: #f7f7f7; position: relative; flex-shrink: 0; }
.tela-nav .exe-ico::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 5px; background: var(--w-azul); border-radius: 1px; }
.tela-nav .nav-arquivo strong { display: block; font-weight: 600; }
.tela-nav .nav-arquivo small { color: var(--w-sub); font-size: 12px; }
.tela-nav .nav-arquivo .link { display: inline-block; margin-top: 6px; color: var(--w-azul); text-decoration: underline; }

/* ---------- Dúvidas ---------- */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.faq summary {
    list-style: none; cursor: pointer; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-family: var(--font-title); font-weight: 600; font-size: 1.05rem; border-radius: var(--radius-card);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { font-size: 1.3rem; color: var(--red); transition: transform var(--ease); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq-corpo { padding: 0 24px 22px; color: var(--grey-600); }
.faq-corpo p + p, .faq-corpo p + ol, .faq-corpo ol + p { margin-top: 10px; }
.faq-corpo ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.faq-corpo strong { color: var(--grey-900); font-weight: 600; }

/* ---------- Ajuda (rodapé da página) ---------- */
.ajuda-card { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.ajuda-card h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: 8px; }
.ajuda-card p { color: var(--grey-500); font-size: 1.05rem; max-width: 40rem; }
.ajuda-acoes { display: flex; flex-wrap: wrap; gap: 16px; }
.btn-claro { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .25); }
.btn-claro:hover { border-color: var(--white); }

/* ---------- Responsivo ---------- */
@media (max-width: 1024px) {
    .page-hero .container { grid-template-columns: 1fr; gap: 32px; }
    .passo { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 768px) {
    .page-hero { padding: 56px 0 64px; }
    .escolha { grid-template-columns: 1fr; gap: 16px; }
    .escolha-card { padding: 22px 20px; gap: 4px 16px; }
    .escolha-icone { width: 48px; height: 48px; font-size: 24px; }
    .escolha-marca { position: static; grid-column: 2; margin-top: 6px; }
    .tutorial-head .download, .tutorial-head .download .btn { width: 100%; }
    .passo { padding-left: 56px; padding-bottom: 44px; }
    .passo::before { width: 38px; height: 38px; font-size: 1rem; }
    .passo::after { display: none; }
    .passo-texto h3 { margin-top: 4px; }
    .cena { padding: 18px 14px 26px; margin-left: -56px; }
    .ajuda-acoes, .ajuda-acoes .btn { width: 100%; }
}
@media (max-width: 420px) {
    .tela-smart .tela-botoes { flex-direction: column; }
    .tela-smart .w-btn { width: 100%; }
    .tela-botoes .w-btn { min-width: 0; }
}