812 lines
65 KiB
HTML
812 lines
65 KiB
HTML
<title>Manual do Portal De Paula</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
:root {
|
|
--bg-canvas: #121017;
|
|
--bg-sidebar: #16131c;
|
|
--bg-toolbar: #1a1721;
|
|
--card-bg: #241f2e;
|
|
--card-bg-hover: #2c2638;
|
|
--border-subtle: #2c2836;
|
|
--text-primary: #f5f3f8;
|
|
--text-secondary: #a9a3b8;
|
|
--text-muted: #726c81;
|
|
--accent: #7c4dff;
|
|
--accent-rgb: 124, 77, 255;
|
|
--danger: #e5484d;
|
|
}
|
|
html, body {
|
|
margin: 0;
|
|
background: var(--bg-canvas);
|
|
color: var(--text-primary);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
a { color: var(--accent); text-decoration: none; }
|
|
button { font-family: inherit; cursor: pointer; }
|
|
svg { display: block; flex-shrink: 0; }
|
|
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
|
|
/* ---------- Barra do visualizador (chrome do artifact, não faz parte do mockup) ---------- */
|
|
.viewer-bar {
|
|
position: sticky; top: 0; z-index: 40;
|
|
display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
|
|
padding: 14px 24px; background: var(--bg-toolbar); border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
.viewer-bar__id { display: flex; flex-direction: column; gap: 2px; margin-right: 8px; }
|
|
.viewer-bar__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
|
|
.viewer-bar__title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
|
|
.tabs { display: flex; gap: 4px; background: var(--bg-canvas); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 3px; }
|
|
.tab-btn {
|
|
border: none; background: none; padding: 7px 16px; border-radius: 999px;
|
|
font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
|
|
}
|
|
.tab-btn.is-active { background: var(--accent); color: #fff; }
|
|
.swatches { display: flex; align-items: center; gap: 8px; margin-left: auto; }
|
|
.swatches__label { font-size: 11.5px; color: var(--text-muted); margin-right: 2px; }
|
|
.swatch {
|
|
width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; padding: 0;
|
|
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
|
|
}
|
|
.swatch.is-active { border-color: var(--text-primary); }
|
|
|
|
/* ---------- Mockup: casca do Manual, portal paralelo ao Portal principal ---------- */
|
|
.screen { display: none; }
|
|
.screen.is-active { display: flex; }
|
|
.sidebar { width: 264px; flex-shrink: 0; background: var(--bg-sidebar); border-right: 1px solid var(--border-subtle); padding: 24px 12px; display: flex; flex-direction: column; }
|
|
.brand { display: flex; align-items: center; justify-content: center; height: 68px; padding: 4px 0; }
|
|
.brand-context { display: flex; justify-content: center; margin: 0 0 16px; }
|
|
.brand-context span {
|
|
display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
|
|
background: rgba(var(--accent-rgb), 0.14); color: var(--accent); font-size: 11px; font-weight: 700;
|
|
letter-spacing: 0.08em; text-transform: uppercase;
|
|
}
|
|
.back-portal {
|
|
display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border-radius: 8px;
|
|
border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 12.8px; font-weight: 600;
|
|
}
|
|
.back-portal svg { color: var(--text-muted); }
|
|
.sidebar-search { position: relative; margin-bottom: 16px; }
|
|
.sidebar-search input {
|
|
width: 100%; padding: 9px 12px 9px 34px; border-radius: 8px; border: 1px solid var(--border-subtle);
|
|
background: var(--bg-canvas); color: var(--text-primary); font-size: 12.5px; outline: none; font-family: inherit;
|
|
}
|
|
.sidebar-search input::placeholder { color: var(--text-muted); }
|
|
.sidebar-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
|
|
.nav-groups { display: flex; flex-direction: column; gap: 2px; }
|
|
.nav-group__toggle {
|
|
display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 8px;
|
|
color: var(--text-secondary); font-size: 13.2px; font-weight: 500; background: none; border: none; text-align: left;
|
|
}
|
|
.nav-group__toggle .nav-icon { color: var(--text-muted); }
|
|
.nav-group__toggle span.nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.nav-group__toggle .chevron { color: var(--text-muted); transition: transform 150ms ease; flex-shrink: 0; }
|
|
.nav-group.is-open > .nav-group__toggle { color: var(--text-primary); }
|
|
.nav-group.is-open > .nav-group__toggle .chevron { transform: rotate(90deg); }
|
|
.nav-group__list { display: none; flex-direction: column; gap: 1px; padding: 2px 0 8px 44px; }
|
|
.nav-group.is-open > .nav-group__list { display: flex; }
|
|
.nav-subitem { display: block; padding: 7px 10px; border-radius: 6px; font-size: 12.2px; color: var(--text-muted); }
|
|
.nav-subitem.is-active { color: var(--accent); font-weight: 700; background: rgba(var(--accent-rgb), 0.14); }
|
|
|
|
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
|
.topbar { height: 64px; flex-shrink: 0; background: var(--bg-sidebar); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 16px; padding: 0 24px; }
|
|
.icon-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; color: var(--text-secondary); flex-shrink: 0; }
|
|
.topbar__title { font-size: 16px; font-weight: 700; letter-spacing: 0.03em; margin: 0; }
|
|
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
|
|
.notif-wrap { position: relative; }
|
|
.notif-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
|
|
.persona { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border-subtle); font-size: 12.8px; font-weight: 600; }
|
|
.persona svg { color: var(--accent); }
|
|
.page { padding: 24px; max-width: 1600px; margin: 0 auto; width: 100%; }
|
|
|
|
/* ---------- Home do Manual ---------- */
|
|
.hero { text-align: center; padding: 56px 24px 40px; }
|
|
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 12px; text-transform: uppercase; }
|
|
.hero h1 { font-size: 38px; font-weight: 700; margin: 0 0 14px; text-wrap: balance; }
|
|
.subtitle { font-size: 16px; color: var(--text-secondary); max-width: 640px; margin: 0 auto 32px; line-height: 1.6; }
|
|
.search { position: relative; max-width: 640px; margin: 0 auto 20px; }
|
|
.search input { width: 100%; padding: 18px 56px 18px 24px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-toolbar); color: var(--text-primary); font-size: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); outline: none; font-family: inherit; }
|
|
.search input::placeholder { color: var(--text-muted); }
|
|
.search svg { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
|
|
.quick-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
|
|
.pill { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 13px; font-weight: 600; }
|
|
|
|
.block { margin-top: 48px; }
|
|
.block-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
|
|
.block-header h2 { font-size: 22px; font-weight: 700; margin: 0; }
|
|
.block-header p { font-size: 13px; color: var(--text-muted); margin: 0; }
|
|
.see-all { font-size: 13px; font-weight: 600; }
|
|
|
|
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
|
.cat-card { background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: background 150ms ease, transform 150ms ease; }
|
|
.cat-card:hover { background: var(--card-bg-hover); transform: translateY(-2px); }
|
|
.cat-card__icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(var(--accent-rgb), 0.14); display: flex; align-items: center; justify-content: center; color: var(--accent); }
|
|
.cat-card__icon svg { width: 20px; height: 20px; }
|
|
.cat-card h3 { font-size: 15.5px; font-weight: 700; margin: 4px 0 0; }
|
|
.cat-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0; flex: 1; }
|
|
.cat-card__count { font-size: 12px; color: var(--text-muted); font-weight: 600; }
|
|
|
|
.article-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
|
|
.article-card { background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 8px; transition: background 150ms ease, transform 150ms ease; }
|
|
.article-card:hover { background: var(--card-bg-hover); transform: translateY(-2px); }
|
|
.article-tag { display: inline-flex; align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
|
|
.article-card h3 { font-size: 15.5px; font-weight: 700; margin: 2px 0 0; line-height: 1.4; }
|
|
.article-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0; }
|
|
.article-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
|
|
|
|
/* ---------- Categoria ---------- */
|
|
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 20px; flex-wrap: wrap; }
|
|
.crumbs a { color: var(--text-secondary); }
|
|
.crumbs .current { color: var(--text-primary); font-weight: 600; }
|
|
.cat-head { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; }
|
|
.cat-head__icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(var(--accent-rgb), 0.14); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
|
|
.cat-head__icon svg { width: 28px; height: 28px; }
|
|
.cat-head h1 { font-size: 26px; font-weight: 700; margin: 0 0 4px; }
|
|
.cat-head p { font-size: 13.5px; color: var(--text-secondary); margin: 0; }
|
|
.list { display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
|
|
.list-item { display: flex; align-items: flex-start; gap: 16px; background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 18px 20px; }
|
|
.list-item__icon { width: 36px; height: 36px; border-radius: 9px; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
.list-item__icon svg { width: 18px; height: 18px; }
|
|
.list-item__body { flex: 1; min-width: 0; }
|
|
.list-item__body h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
|
|
.list-item__body p { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.5; }
|
|
.list-item__tag { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
|
|
|
|
/* ---------- Artigo ---------- */
|
|
.art-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
|
|
.tag { display: inline-flex; padding: 4px 12px; border-radius: 999px; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 14px; }
|
|
.art-title { font-size: 30px; font-weight: 700; margin: 0 0 12px; line-height: 1.25; text-wrap: balance; }
|
|
.art-meta { font-size: 13px; color: var(--text-muted); margin: 0 0 28px; }
|
|
.art-meta a { color: var(--text-secondary); }
|
|
.divider { height: 1px; background: var(--border-subtle); margin: 0 0 28px; }
|
|
.intro { font-size: 15.5px; color: var(--text-secondary); line-height: 1.7; margin: 0 0 40px; max-width: 62ch; }
|
|
.steps { position: relative; margin-bottom: 36px; }
|
|
.steps-line { position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--border-subtle); }
|
|
.step { position: relative; display: flex; gap: 20px; margin-bottom: 32px; }
|
|
.step:last-child { margin-bottom: 0; }
|
|
.step-circle { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
|
|
.step-body { flex: 1; min-width: 0; padding-top: 4px; }
|
|
.step-body h3 { font-size: 16.5px; font-weight: 700; margin: 0 0 8px; }
|
|
.step-body p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.65; margin: 0; max-width: 62ch; }
|
|
.step-body strong { color: var(--text-primary); }
|
|
.shot { margin-top: 14px; height: 190px; border-radius: 12px; border: 1px dashed var(--border-subtle); background: var(--bg-toolbar); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); font-size: 12.5px; }
|
|
.tip { display: flex; gap: 14px; padding: 18px 20px; border-radius: 12px; background: rgba(var(--accent-rgb), 0.10); border: 1px solid rgba(var(--accent-rgb), 0.35); margin-bottom: 40px; max-width: 62ch; }
|
|
.tip__icon { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
|
|
.tip p { font-size: 13.5px; color: var(--text-primary); line-height: 1.6; margin: 0; }
|
|
.feedback { display: flex; align-items: center; gap: 16px; padding-top: 28px; margin-top: 8px; border-top: 1px solid var(--border-subtle); }
|
|
.feedback span { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
|
|
.feedback-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 13px; font-weight: 600; background: transparent; }
|
|
.feedback-btn:hover { border-color: var(--accent); color: var(--text-primary); }
|
|
.aside-card { background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
|
|
.aside-card h4 { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0 0 14px; }
|
|
.toc-list { display: flex; flex-direction: column; gap: 10px; }
|
|
.toc-list a { font-size: 13.5px; color: var(--text-secondary); }
|
|
.toc-list a.is-active { color: var(--accent); font-weight: 700; }
|
|
.related-list { display: flex; flex-direction: column; gap: 16px; }
|
|
.related-item { display: flex; flex-direction: column; gap: 4px; }
|
|
.related-item a { font-size: 13.5px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
|
|
.related-item span { font-size: 11.5px; color: var(--text-muted); }
|
|
|
|
@media (max-width: 960px) {
|
|
.cat-grid, .article-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.art-layout { grid-template-columns: 1fr; }
|
|
}
|
|
@media (max-width: 640px) {
|
|
.cat-grid, .article-grid { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
|
|
<div class="viewer-bar">
|
|
<div class="viewer-bar__id">
|
|
<span class="viewer-bar__kicker">Idealização visual</span>
|
|
<span class="viewer-bar__title">Manual do Portal De Paula</span>
|
|
</div>
|
|
<div class="tabs">
|
|
<button type="button" class="tab-btn is-active" data-tab="home" onclick="pidShowScreen('home')">Home do Manual</button>
|
|
<button type="button" class="tab-btn" data-tab="categoria" onclick="pidShowScreen('categoria')">Categoria</button>
|
|
<button type="button" class="tab-btn" data-tab="artigo" onclick="pidShowScreen('artigo')">Artigo</button>
|
|
</div>
|
|
<div class="swatches">
|
|
<span class="swatches__label">Cor do tema:</span>
|
|
<button type="button" class="swatch is-active" data-hex="#7c4dff" style="background:#7c4dff" onclick="pidSetAccent('#7c4dff','124, 77, 255',this)" aria-label="Roxo"></button>
|
|
<button type="button" class="swatch" data-hex="#3b82f6" style="background:#3b82f6" onclick="pidSetAccent('#3b82f6','59, 130, 246',this)" aria-label="Azul"></button>
|
|
<button type="button" class="swatch" data-hex="#22c55e" style="background:#22c55e" onclick="pidSetAccent('#22c55e','34, 197, 94',this)" aria-label="Verde"></button>
|
|
<button type="button" class="swatch" data-hex="#f59e0b" style="background:#f59e0b" onclick="pidSetAccent('#f59e0b','245, 158, 11',this)" aria-label="Âmbar"></button>
|
|
<button type="button" class="swatch" data-hex="#ec4899" style="background:#ec4899" onclick="pidSetAccent('#ec4899','236, 72, 153',this)" aria-label="Rosa"></button>
|
|
<button type="button" class="swatch" data-hex="#ef4444" style="background:#ef4444" onclick="pidSetAccent('#ef4444','239, 68, 68',this)" aria-label="Vermelho"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================= HOME DO MANUAL ================= -->
|
|
<div class="screen is-active" data-screen="home">
|
|
<aside class="sidebar">
|
|
<div class="brand">
|
|
<svg width="150" height="40" viewBox="0 0 300 80" aria-hidden="true">
|
|
<g transform="translate(8,8) scale(1)">
|
|
<path d="M10 4 h34 l14 14 v40 a2 2 0 0 1 -2 2 H8 a2 2 0 0 1 -2 -2 V6 a2 2 0 0 1 2 -2 z" fill="#7B5BA8"></path>
|
|
<rect x="22" y="4" width="20" height="16" fill="#C6A24A"></rect>
|
|
<rect x="34" y="7" width="5" height="10" fill="#7B5BA8"></rect>
|
|
<rect x="12" y="26" width="40" height="30" rx="2" fill="#241C33"></rect>
|
|
<circle cx="24" cy="38" r="5" fill="#F2EDE3"></circle>
|
|
<circle cx="26" cy="36.2" r="1.6" fill="#241C33"></circle>
|
|
<circle cx="40" cy="38" r="5" fill="#F2EDE3"></circle>
|
|
<circle cx="42" cy="36.2" r="1.6" fill="#241C33"></circle>
|
|
<path d="M25 47 q7 6 14 0" stroke="#C6A24A" stroke-width="3" fill="none" stroke-linecap="round"></path>
|
|
</g>
|
|
<text x="86" y="42" font-family="'Space Grotesk',Helvetica,Arial,sans-serif" font-size="34" font-weight="700" letter-spacing="1.4" fill="#F2EDE3">P.I.D.</text>
|
|
<text x="88" y="61" font-family="'DM Mono',ui-monospace,monospace" font-size="9.5" letter-spacing="2.6" fill="#C6A24A">PORTAL INTERNO DA DE PAULA</text>
|
|
</svg>
|
|
</div>
|
|
<div class="brand-context"><span>Manual</span></div>
|
|
<a class="back-portal" href="#">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 19l-7-7 7-7M4 12h16" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
Voltar ao Portal
|
|
</a>
|
|
<div class="sidebar-search">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3" stroke-linecap="round"/></svg>
|
|
<input type="text" placeholder="Buscar no manual..." />
|
|
</div>
|
|
<nav class="nav-groups">
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4" stroke-linecap="round"/><path d="M9 15l2 2 4-4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Calendário Individual e Widgets</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4c0 9 7 16 16 16l3-4-6-3-2 2c-3-1.5-5-3.5-6-6l2-2-3-6z" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Ramais</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg>
|
|
<span class="nav-label">Links & Ferramentas</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Acessos Gerais</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 16a8 8 0 1 1 16 0" stroke-linecap="round"/><path d="M12 16l4-5" stroke-linecap="round"/><circle cx="12" cy="16" r="1.3" fill="currentColor" stroke="none"/></svg>
|
|
<span class="nav-label">Indicador de Desempenho</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3h9l3 3v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v4h4" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Simulação de Custo de Contratação</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 7l3 3-8 8-4 1 1-4z" stroke-linejoin="round"/><path d="M12 9l3 3" stroke-linecap="round"/></svg>
|
|
<span class="nav-label">Importação de Plano de Saúde</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
<div class="nav-group__list">
|
|
<a class="nav-subitem" href="#">Primeiros passos</a>
|
|
<a class="nav-subitem" href="#">Cadastro de Regras</a>
|
|
<a class="nav-subitem" href="#">Nova Importação</a>
|
|
<a class="nav-subitem" href="#">Revisão e Auditoria</a>
|
|
<a class="nav-subitem" href="#">Vínculos de nome (DE/PARA)</a>
|
|
<a class="nav-subitem" href="#">Operadoras suportadas</a>
|
|
</div>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Perfis de Acesso e Usuários</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3l2.6 5.6 6.1.8-4.5 4.3 1.2 6.1L12 17l-5.4 2.8 1.2-6.1-4.5-4.3 6.1-.8L12 3z" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Favoritos e Solicitações</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
<div class="main-col">
|
|
<header class="topbar">
|
|
<div class="icon-btn"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round"/></svg></div>
|
|
<h1 class="topbar__title">Manual</h1>
|
|
<div class="topbar__actions">
|
|
<div class="icon-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" stroke-linecap="round"/></svg></div>
|
|
<div class="notif-wrap"><div class="icon-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 8a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6" stroke-linejoin="round"/><path d="M9.5 20a2.5 2.5 0 0 0 5 0"/></svg></div><span class="notif-badge">2</span></div>
|
|
<div class="persona"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="7" r="4"/></svg><span>Gabriel</span></div>
|
|
</div>
|
|
</header>
|
|
<main class="page">
|
|
<section class="hero">
|
|
<p class="eyebrow">Manual do Portal</p>
|
|
<h1>Como podemos ajudar?</h1>
|
|
<p class="subtitle">Tutoriais, passo a passos e referências de cada aplicação do Portal — da Importação de Plano de Saúde ao Indicador de Desempenho.</p>
|
|
<div class="search">
|
|
<input type="text" placeholder="Pesquise por um artigo, aplicação ou palavra-chave..." />
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3" stroke-linecap="round"/></svg>
|
|
</div>
|
|
<div class="quick-links">
|
|
<a class="pill" href="#">Importação de Plano de Saúde</a>
|
|
<a class="pill" href="#">Calendário Individual</a>
|
|
<a class="pill" href="#">Ramais</a>
|
|
<a class="pill" href="#">Indicador de Desempenho</a>
|
|
<a class="pill" href="#">Perfis de Acesso</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="block">
|
|
<div class="block-header"><h2>Categorias</h2><p>9 aplicações documentadas</p></div>
|
|
<div class="cat-grid">
|
|
<div class="cat-card">
|
|
<div class="cat-card__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4" stroke-linecap="round"/><path d="M9 15l2 2 4-4" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
|
<h3>Calendário Individual e Widgets</h3>
|
|
<p>Agenda pessoal, compromissos, eventos corporativos e os widgets da tela Principal.</p>
|
|
<span class="cat-card__count">8 artigos</span>
|
|
</div>
|
|
<div class="cat-card">
|
|
<div class="cat-card__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4c0 9 7 16 16 16l3-4-6-3-2 2c-3-1.5-5-3.5-6-6l2-2-3-6z" stroke-linejoin="round"/></svg></div>
|
|
<h3>Ramais</h3>
|
|
<p>Diretório de ramais, telefones externos, funções de telefonia e controle de ausência.</p>
|
|
<span class="cat-card__count">6 artigos</span>
|
|
</div>
|
|
<div class="cat-card">
|
|
<div class="cat-card__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg></div>
|
|
<h3>Links & Ferramentas</h3>
|
|
<p>Cartões de atalho para ferramentas externas usadas no dia a dia do escritório.</p>
|
|
<span class="cat-card__count">5 artigos</span>
|
|
</div>
|
|
<div class="cat-card">
|
|
<div class="cat-card__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
|
<h3>Acessos Gerais</h3>
|
|
<p>Cadastro de logins e acessos compartilhados da equipe, organizados por seção.</p>
|
|
<span class="cat-card__count">4 artigos</span>
|
|
</div>
|
|
<div class="cat-card">
|
|
<div class="cat-card__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 16a8 8 0 1 1 16 0" stroke-linecap="round"/><path d="M12 16l4-5" stroke-linecap="round"/><circle cx="12" cy="16" r="1.3" fill="currentColor" stroke="none"/></svg></div>
|
|
<h3>Indicador de Desempenho</h3>
|
|
<p>Apuração mensal do indicador do Fiscontábil e geração de recibos em PDF.</p>
|
|
<span class="cat-card__count">7 artigos</span>
|
|
</div>
|
|
<div class="cat-card">
|
|
<div class="cat-card__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3h9l3 3v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v4h4" stroke-linejoin="round"/></svg></div>
|
|
<h3>Simulação de Custo de Contratação</h3>
|
|
<p>Cálculo do custo de contratar um Empregado CLT, com tabelas fiscais editáveis.</p>
|
|
<span class="cat-card__count">3 artigos</span>
|
|
</div>
|
|
<div class="cat-card">
|
|
<div class="cat-card__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 7l3 3-8 8-4 1 1-4z" stroke-linejoin="round"/><path d="M12 9l3 3" stroke-linecap="round"/></svg></div>
|
|
<h3>Importação de Plano de Saúde</h3>
|
|
<p>Leitura do faturamento da operadora e geração do lançamento no Questor.</p>
|
|
<span class="cat-card__count">9 artigos</span>
|
|
</div>
|
|
<div class="cat-card">
|
|
<div class="cat-card__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" stroke-linejoin="round"/></svg></div>
|
|
<h3>Perfis de Acesso e Usuários</h3>
|
|
<p>Cadastro de contas, perfis de acesso e o vínculo de liderança entre usuários.</p>
|
|
<span class="cat-card__count">6 artigos</span>
|
|
</div>
|
|
<div class="cat-card">
|
|
<div class="cat-card__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3l2.6 5.6 6.1.8-4.5 4.3 1.2 6.1L12 17l-5.4 2.8 1.2-6.1-4.5-4.3 6.1-.8L12 3z" stroke-linejoin="round"/></svg></div>
|
|
<h3>Favoritos e Solicitações</h3>
|
|
<p>Como favoritar aplicações na tela Principal e abrir as Solicitações do escritório.</p>
|
|
<span class="cat-card__count">4 artigos</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="block">
|
|
<div class="block-header"><h2>Artigos populares</h2><a class="see-all" href="#">Ver todos →</a></div>
|
|
<div class="article-grid">
|
|
<div class="article-card">
|
|
<span class="article-tag">Passo a passo</span>
|
|
<h3>Como criar um Evento Corporativo no Calendário Individual</h3>
|
|
<p>Marque um compromisso como evento e ele aparece automaticamente na agenda de todos os colaboradores.</p>
|
|
<span class="article-meta">Calendário Individual e Widgets · 3 min de leitura</span>
|
|
</div>
|
|
<div class="article-card">
|
|
<span class="article-tag">Passo a passo</span>
|
|
<h3>Cadastrando uma ausência de colaborador em Ramais</h3>
|
|
<p>Registre férias ou licenças para que o diretório mostre "ausente agora" automaticamente.</p>
|
|
<span class="article-meta">Ramais · 2 min de leitura</span>
|
|
</div>
|
|
<div class="article-card">
|
|
<span class="article-tag">Passo a passo</span>
|
|
<h3>Adicionando um novo acesso em Acessos Gerais</h3>
|
|
<p>Cadastre um login compartilhado dentro de uma seção existente ou crie uma seção nova.</p>
|
|
<span class="article-meta">Acessos Gerais · 2 min de leitura</span>
|
|
</div>
|
|
<div class="article-card">
|
|
<span class="article-tag">Conceito</span>
|
|
<h3>Entendendo os percentuais do Indicador de Desempenho</h3>
|
|
<p>Como o percentual Individual, de Grupo e de Departamento se combinam no valor final.</p>
|
|
<span class="article-meta">Indicador de Desempenho · 4 min de leitura</span>
|
|
</div>
|
|
<div class="article-card">
|
|
<span class="article-tag">Passo a passo</span>
|
|
<h3>Importando o faturamento da Unimed em Plano de Saúde</h3>
|
|
<p>Anexe o relatório da operadora e revise as linhas antes de gerar o arquivo do Questor.</p>
|
|
<span class="article-meta">Importação de Plano de Saúde · 5 min de leitura</span>
|
|
</div>
|
|
<div class="article-card">
|
|
<span class="article-tag">Passo a passo</span>
|
|
<h3>Vinculando um colaborador à sua liderança</h3>
|
|
<p>Como um gerente ou coordenador adiciona liderados diretamente pelo próprio menu de conta.</p>
|
|
<span class="article-meta">Perfis de Acesso e Usuários · 2 min de leitura</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================= CATEGORIA ================= -->
|
|
<div class="screen" data-screen="categoria">
|
|
<aside class="sidebar">
|
|
<div class="brand">
|
|
<svg width="150" height="40" viewBox="0 0 300 80" aria-hidden="true">
|
|
<g transform="translate(8,8) scale(1)">
|
|
<path d="M10 4 h34 l14 14 v40 a2 2 0 0 1 -2 2 H8 a2 2 0 0 1 -2 -2 V6 a2 2 0 0 1 2 -2 z" fill="#7B5BA8"></path>
|
|
<rect x="22" y="4" width="20" height="16" fill="#C6A24A"></rect>
|
|
<rect x="34" y="7" width="5" height="10" fill="#7B5BA8"></rect>
|
|
<rect x="12" y="26" width="40" height="30" rx="2" fill="#241C33"></rect>
|
|
<circle cx="24" cy="38" r="5" fill="#F2EDE3"></circle>
|
|
<circle cx="26" cy="36.2" r="1.6" fill="#241C33"></circle>
|
|
<circle cx="40" cy="38" r="5" fill="#F2EDE3"></circle>
|
|
<circle cx="42" cy="36.2" r="1.6" fill="#241C33"></circle>
|
|
<path d="M25 47 q7 6 14 0" stroke="#C6A24A" stroke-width="3" fill="none" stroke-linecap="round"></path>
|
|
</g>
|
|
<text x="86" y="42" font-family="'Space Grotesk',Helvetica,Arial,sans-serif" font-size="34" font-weight="700" letter-spacing="1.4" fill="#F2EDE3">P.I.D.</text>
|
|
<text x="88" y="61" font-family="'DM Mono',ui-monospace,monospace" font-size="9.5" letter-spacing="2.6" fill="#C6A24A">PORTAL INTERNO DA DE PAULA</text>
|
|
</svg>
|
|
</div>
|
|
<div class="brand-context"><span>Manual</span></div>
|
|
<a class="back-portal" href="#">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 19l-7-7 7-7M4 12h16" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
Voltar ao Portal
|
|
</a>
|
|
<div class="sidebar-search">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3" stroke-linecap="round"/></svg>
|
|
<input type="text" placeholder="Buscar no manual..." />
|
|
</div>
|
|
<nav class="nav-groups">
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4" stroke-linecap="round"/><path d="M9 15l2 2 4-4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Calendário Individual e Widgets</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4c0 9 7 16 16 16l3-4-6-3-2 2c-3-1.5-5-3.5-6-6l2-2-3-6z" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Ramais</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg>
|
|
<span class="nav-label">Links & Ferramentas</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Acessos Gerais</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 16a8 8 0 1 1 16 0" stroke-linecap="round"/><path d="M12 16l4-5" stroke-linecap="round"/><circle cx="12" cy="16" r="1.3" fill="currentColor" stroke="none"/></svg>
|
|
<span class="nav-label">Indicador de Desempenho</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3h9l3 3v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v4h4" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Simulação de Custo de Contratação</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group is-open">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 7l3 3-8 8-4 1 1-4z" stroke-linejoin="round"/><path d="M12 9l3 3" stroke-linecap="round"/></svg>
|
|
<span class="nav-label">Importação de Plano de Saúde</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
<div class="nav-group__list">
|
|
<a class="nav-subitem" href="#">Primeiros passos</a>
|
|
<a class="nav-subitem" href="#">Cadastro de Regras</a>
|
|
<a class="nav-subitem is-active" href="#">Nova Importação</a>
|
|
<a class="nav-subitem" href="#">Revisão e Auditoria</a>
|
|
<a class="nav-subitem" href="#">Vínculos de nome (DE/PARA)</a>
|
|
<a class="nav-subitem" href="#">Operadoras suportadas</a>
|
|
</div>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Perfis de Acesso e Usuários</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3l2.6 5.6 6.1.8-4.5 4.3 1.2 6.1L12 17l-5.4 2.8 1.2-6.1-4.5-4.3 6.1-.8L12 3z" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Favoritos e Solicitações</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
<div class="main-col">
|
|
<header class="topbar">
|
|
<div class="icon-btn"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round"/></svg></div>
|
|
<h1 class="topbar__title">Manual</h1>
|
|
<div class="topbar__actions">
|
|
<div class="icon-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" stroke-linecap="round"/></svg></div>
|
|
<div class="notif-wrap"><div class="icon-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 8a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6" stroke-linejoin="round"/><path d="M9.5 20a2.5 2.5 0 0 0 5 0"/></svg></div><span class="notif-badge">2</span></div>
|
|
<div class="persona"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="7" r="4"/></svg><span>Gabriel</span></div>
|
|
</div>
|
|
</header>
|
|
<main class="page">
|
|
<nav class="crumbs"><a href="#">Manual</a><span>/</span><span class="current">Importação de Plano de Saúde</span></nav>
|
|
<div class="cat-head">
|
|
<div class="cat-head__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 7l3 3-8 8-4 1 1-4z" stroke-linejoin="round"/><path d="M12 9l3 3" stroke-linecap="round"/></svg></div>
|
|
<div><h1>Importação de Plano de Saúde</h1><p>9 artigos nesta categoria</p></div>
|
|
</div>
|
|
<div class="list">
|
|
<div class="list-item">
|
|
<div class="list-item__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14" stroke-linecap="round"/></svg></div>
|
|
<div class="list-item__body"><h3>Como criar uma nova importação</h3><p>Passo a passo para gerar uma importação a partir de uma regra de custeio já cadastrada.</p></div>
|
|
<span class="list-item__tag">Passo a passo</span>
|
|
</div>
|
|
<div class="list-item">
|
|
<div class="list-item__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
|
<div class="list-item__body"><h3>Planilha padrão: buscar do Questor ou anexar manualmente</h3><p>Quando usar a busca automática pela competência e quando anexar um arquivo exportado à mão.</p></div>
|
|
<span class="list-item__tag">Conceito</span>
|
|
</div>
|
|
<div class="list-item">
|
|
<div class="list-item__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14" stroke-linecap="round"/></svg></div>
|
|
<div class="list-item__body"><h3>Anexando o arquivo da operadora</h3><p>Como anexar um ou mais arquivos quando mensalidade e coparticipação vêm separadas.</p></div>
|
|
<span class="list-item__tag">Passo a passo</span>
|
|
</div>
|
|
<div class="list-item">
|
|
<div class="list-item__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
|
<div class="list-item__body"><h3>O que significa "em revisão" e "concluída"</h3><p>Entenda em que momento uma importação trava para edição e como reabri-la.</p></div>
|
|
<span class="list-item__tag">Conceito</span>
|
|
</div>
|
|
<div class="list-item">
|
|
<div class="list-item__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14" stroke-linecap="round"/></svg></div>
|
|
<div class="list-item__body"><h3>Gerando o arquivo de lançamento (CSV ou ZIP)</h3><p>Como gerar o arquivo final a partir das linhas já revisadas na tela.</p></div>
|
|
<span class="list-item__tag">Passo a passo</span>
|
|
</div>
|
|
<div class="list-item">
|
|
<div class="list-item__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14" stroke-linecap="round"/></svg></div>
|
|
<div class="list-item__body"><h3>Reabrindo uma importação já concluída</h3><p>O botão "Editar" volta a importação para revisão, liberando os campos de novo.</p></div>
|
|
<span class="list-item__tag">Passo a passo</span>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================= ARTIGO ================= -->
|
|
<div class="screen" data-screen="artigo">
|
|
<aside class="sidebar">
|
|
<div class="brand">
|
|
<svg width="150" height="40" viewBox="0 0 300 80" aria-hidden="true">
|
|
<g transform="translate(8,8) scale(1)">
|
|
<path d="M10 4 h34 l14 14 v40 a2 2 0 0 1 -2 2 H8 a2 2 0 0 1 -2 -2 V6 a2 2 0 0 1 2 -2 z" fill="#7B5BA8"></path>
|
|
<rect x="22" y="4" width="20" height="16" fill="#C6A24A"></rect>
|
|
<rect x="34" y="7" width="5" height="10" fill="#7B5BA8"></rect>
|
|
<rect x="12" y="26" width="40" height="30" rx="2" fill="#241C33"></rect>
|
|
<circle cx="24" cy="38" r="5" fill="#F2EDE3"></circle>
|
|
<circle cx="26" cy="36.2" r="1.6" fill="#241C33"></circle>
|
|
<circle cx="40" cy="38" r="5" fill="#F2EDE3"></circle>
|
|
<circle cx="42" cy="36.2" r="1.6" fill="#241C33"></circle>
|
|
<path d="M25 47 q7 6 14 0" stroke="#C6A24A" stroke-width="3" fill="none" stroke-linecap="round"></path>
|
|
</g>
|
|
<text x="86" y="42" font-family="'Space Grotesk',Helvetica,Arial,sans-serif" font-size="34" font-weight="700" letter-spacing="1.4" fill="#F2EDE3">P.I.D.</text>
|
|
<text x="88" y="61" font-family="'DM Mono',ui-monospace,monospace" font-size="9.5" letter-spacing="2.6" fill="#C6A24A">PORTAL INTERNO DA DE PAULA</text>
|
|
</svg>
|
|
</div>
|
|
<div class="brand-context"><span>Manual</span></div>
|
|
<a class="back-portal" href="#">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 19l-7-7 7-7M4 12h16" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
Voltar ao Portal
|
|
</a>
|
|
<div class="sidebar-search">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3" stroke-linecap="round"/></svg>
|
|
<input type="text" placeholder="Buscar no manual..." />
|
|
</div>
|
|
<nav class="nav-groups">
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4" stroke-linecap="round"/><path d="M9 15l2 2 4-4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Calendário Individual e Widgets</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4c0 9 7 16 16 16l3-4-6-3-2 2c-3-1.5-5-3.5-6-6l2-2-3-6z" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Ramais</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg>
|
|
<span class="nav-label">Links & Ferramentas</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Acessos Gerais</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 16a8 8 0 1 1 16 0" stroke-linecap="round"/><path d="M12 16l4-5" stroke-linecap="round"/><circle cx="12" cy="16" r="1.3" fill="currentColor" stroke="none"/></svg>
|
|
<span class="nav-label">Indicador de Desempenho</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3h9l3 3v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v4h4" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Simulação de Custo de Contratação</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group is-open">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 7l3 3-8 8-4 1 1-4z" stroke-linejoin="round"/><path d="M12 9l3 3" stroke-linecap="round"/></svg>
|
|
<span class="nav-label">Importação de Plano de Saúde</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
<div class="nav-group__list">
|
|
<a class="nav-subitem" href="#">Primeiros passos</a>
|
|
<a class="nav-subitem" href="#">Cadastro de Regras</a>
|
|
<a class="nav-subitem is-active" href="#">Nova Importação</a>
|
|
<a class="nav-subitem" href="#">Revisão e Auditoria</a>
|
|
<a class="nav-subitem" href="#">Vínculos de nome (DE/PARA)</a>
|
|
<a class="nav-subitem" href="#">Operadoras suportadas</a>
|
|
</div>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Perfis de Acesso e Usuários</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="nav-group">
|
|
<button type="button" class="nav-group__toggle">
|
|
<svg class="nav-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3l2.6 5.6 6.1.8-4.5 4.3 1.2 6.1L12 17l-5.4 2.8 1.2-6.1-4.5-4.3 6.1-.8L12 3z" stroke-linejoin="round"/></svg>
|
|
<span class="nav-label">Favoritos e Solicitações</span>
|
|
<svg class="chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
<div class="main-col">
|
|
<header class="topbar">
|
|
<div class="icon-btn"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round"/></svg></div>
|
|
<h1 class="topbar__title">Manual</h1>
|
|
<div class="topbar__actions">
|
|
<div class="icon-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" stroke-linecap="round"/></svg></div>
|
|
<div class="notif-wrap"><div class="icon-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 8a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6" stroke-linejoin="round"/><path d="M9.5 20a2.5 2.5 0 0 0 5 0"/></svg></div><span class="notif-badge">2</span></div>
|
|
<div class="persona"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="7" r="4"/></svg><span>Gabriel</span></div>
|
|
</div>
|
|
</header>
|
|
<main class="page">
|
|
<nav class="crumbs"><a href="#">Manual</a><span>/</span><a href="#">Importação de Plano de Saúde</a><span>/</span><span class="current">Como criar uma nova importação</span></nav>
|
|
<div class="art-layout">
|
|
<div>
|
|
<span class="tag">Passo a passo</span>
|
|
<h1 class="art-title">Como criar uma nova importação de plano de saúde</h1>
|
|
<p class="art-meta"><a href="#">Importação de Plano de Saúde</a> · Atualizado em 27/08/2026 · 4 min de leitura</p>
|
|
<div class="divider"></div>
|
|
<p class="intro">Toda importação parte de uma regra de custeio já cadastrada para a empresa e a operadora — é ela que decide quem paga o quê antes mesmo do arquivo ser processado. Veja como criar uma nova importação a partir do histórico da ferramenta.</p>
|
|
<div class="steps">
|
|
<div class="steps-line"></div>
|
|
<div class="step">
|
|
<div class="step-circle">1</div>
|
|
<div class="step-body">
|
|
<h3>Escolha a empresa e a operadora</h3>
|
|
<p>No histórico, clique em <strong>+ Nova Importação</strong>. Ao selecionar a empresa e a operadora, a única regra de custeio já cadastrada para essa combinação é aplicada automaticamente — não há nada para configurar aqui.</p>
|
|
<div class="shot"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M3 7l9-4 9 4" stroke-linejoin="round"/><circle cx="12" cy="13" r="3"/></svg>Captura de tela — seleção de empresa e operadora</div>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-circle">2</div>
|
|
<div class="step-body">
|
|
<h3>Defina a origem da planilha padrão</h3>
|
|
<p>Marque <strong>Buscar automaticamente do Questor</strong> e informe a competência (MM/AAAA), ou escolha <strong>Anexar manualmente</strong> se preferir subir um arquivo já exportado.</p>
|
|
<div class="shot"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M3 7l9-4 9 4" stroke-linejoin="round"/><circle cx="12" cy="13" r="3"/></svg>Captura de tela — origem da planilha padrão</div>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-circle">3</div>
|
|
<div class="step-body">
|
|
<h3>Anexe o arquivo da operadora e processe</h3>
|
|
<p>Selecione um ou mais arquivos do relatório da operadora (algumas mandam mensalidade e coparticipação em arquivos separados) e clique em <strong>Processar</strong>. Cada arquivo é validado assim que anexado, antes do envio.</p>
|
|
<div class="shot"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M3 7l9-4 9 4" stroke-linejoin="round"/><circle cx="12" cy="13" r="3"/></svg>Captura de tela — arquivo(s) da operadora anexados</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tip">
|
|
<div class="tip__icon">i</div>
|
|
<p><strong>Dica:</strong> se a empresa que você precisa ainda não aparece na lista, cadastre a regra de custeio dela primeiro em <strong>Cadastro de Regras</strong> — Nova Importação só mostra combinações de empresa e operadora já cadastradas.</p>
|
|
</div>
|
|
<div class="feedback">
|
|
<span>Esse artigo foi útil?</span>
|
|
<button type="button" class="feedback-btn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 22V11M2 13v7a2 2 0 0 0 2 2h12.5a2 2 0 0 0 2-1.6l1.4-7A2 2 0 0 0 18 11h-5V4a2 2 0 0 0-2-2L7 11" stroke-linecap="round" stroke-linejoin="round"/></svg>Sim</button>
|
|
<button type="button" class="feedback-btn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 2v11M22 11V4a2 2 0 0 0-2-2H7.5a2 2 0 0 0-2 1.6l-1.4 7A2 2 0 0 0 6 13h5v7a2 2 0 0 0 2 2l5-9" stroke-linecap="round" stroke-linejoin="round"/></svg>Não</button>
|
|
</div>
|
|
</div>
|
|
<aside>
|
|
<div class="aside-card">
|
|
<h4>Nesta página</h4>
|
|
<nav class="toc-list">
|
|
<a href="#" class="is-active">Introdução</a>
|
|
<a href="#">Passo 1 — Empresa e operadora</a>
|
|
<a href="#">Passo 2 — Planilha padrão</a>
|
|
<a href="#">Passo 3 — Arquivo da operadora</a>
|
|
<a href="#">Dica</a>
|
|
</nav>
|
|
</div>
|
|
<div class="aside-card">
|
|
<h4>Artigos relacionados</h4>
|
|
<div class="related-list">
|
|
<div class="related-item"><a href="#">Planilha padrão: buscar do Questor ou anexar manualmente</a><span>Importação de Plano de Saúde</span></div>
|
|
<div class="related-item"><a href="#">Gerando o arquivo de lançamento (CSV ou ZIP)</a><span>Importação de Plano de Saúde</span></div>
|
|
<div class="related-item"><a href="#">O que significa "em revisão" e "concluída"</a><span>Importação de Plano de Saúde</span></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function pidShowScreen(name) {
|
|
document.querySelectorAll('.screen').forEach(function (el) {
|
|
el.classList.toggle('is-active', el.dataset.screen === name);
|
|
});
|
|
document.querySelectorAll('.tab-btn').forEach(function (el) {
|
|
el.classList.toggle('is-active', el.dataset.tab === name);
|
|
});
|
|
window.scrollTo({ top: 0, behavior: 'instant' });
|
|
}
|
|
function pidSetAccent(hex, rgb, btn) {
|
|
document.documentElement.style.setProperty('--accent', hex);
|
|
document.documentElement.style.setProperty('--accent-rgb', rgb);
|
|
document.querySelectorAll('.swatch').forEach(function (el) {
|
|
el.classList.toggle('is-active', el === btn);
|
|
});
|
|
}
|
|
</script>
|