/* ============================================================
   Vila Rica · App Fotos. Design system do CRM novo (24/09/2026).
   Fonte: o canvas "Painel Cérebro - CRM Vila Rica", linha "Nosso desenho 23/09" (telas Hoje,
   Funil, Cérebro). Barra branca com abas sublinhadas em azul royal, fundo #F6F8FC, cartões
   brancos de canto 14 e borda #DFE7F3, Montserrat nos títulos, números e botões, Poppins no
   texto. Campos e botões com 44px de altura; filtro ligado vira pílula azul-marinho.
   Os NOMES das variáveis continuam os antigos deste app (--bg, --surface, --ink...), então as
   telas herdam o visual sem reescrever cada uma.
   Regra da marca: sobre azul, texto e logos SEMPRE brancos; a coroa é o arquivo oficial.
   ============================================================ */

/* ---------- fontes (arquivos locais em /assets/fonts) ---------- */
@font-face { font-family:'Poppins'; src:url('/assets/fonts/Poppins-Regular.ttf'); font-weight:400; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/assets/fonts/Poppins-Medium.ttf'); font-weight:500; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/assets/fonts/Poppins-SemiBold.ttf'); font-weight:600; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/assets/fonts/Poppins-Bold.ttf'); font-weight:700; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('/assets/fonts/Montserrat-SemiBold.ttf'); font-weight:600; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('/assets/fonts/Montserrat-Bold.ttf'); font-weight:700; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('/assets/fonts/Montserrat-800.woff2') format('woff2'); font-weight:800; font-display:swap; }

/* ---------- tokens ---------- */
:root{
  /* marca */
  --brand:#004AAD; --brand-2:#003C8C; --brand-3:#438AFE; --navy:#002E6C;
  /* superfícies */
  --bg:#F6F8FC; --surface:#FFFFFF; --surface-2:#EEF2F8;
  /* texto */
  --ink:#002E6C; --text:#1E2A44; --muted:#5B6B82; --faint:#8A97AB; --line:#DFE7F3; --line-2:#EEF2F8;
  /* interação */
  --brand-weak:#EAF1FF; --brand-line:#C9D6EA; --brand-ink:#002E6C; --ac:#004AAD;
  /* status */
  --green:#1E6A43; --green-weak:#E3F2E9;
  --red:#C62828;   --red-weak:#FDECEA; --red-line:#F5C2BD;
  --amber:#8A4B08; --amber-weak:#FBEFD9; --amber-bg:#FBEFD9; --amber-line:#EED7AE;
  --zap:#1ea85c;
  /* forma */
  --radius:14px; --radius-sm:10px; --ctl:44px;
  --shadow:0 1px 2px rgba(0,46,108,.06); --shadow-pop:0 18px 50px rgba(0,46,108,.18);
  /* barra do topo */
  --topbar:#FFFFFF; --topbar-ink:#002E6C; --topbar-line:#DFE7F3;
  /* fontes */
  --sans:'Poppins', system-ui, 'Segoe UI', sans-serif;
  --head:'Montserrat', system-ui, 'Segoe UI', sans-serif;
  /* aliases legados (páginas antigas usam var(--azul) etc.) */
  --azul:var(--brand); --vermelho:var(--red); --amarelo:var(--amber); --verde:var(--green); --cinza:var(--bg);
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#07121F; --surface:#0C1B2E; --surface-2:#12253D;
  --ink:#E8EFFB; --text:#C9D4E6; --muted:#8FA0BA; --faint:#66788F; --line:#1F3350; --line-2:#172A43;
  --brand:#3F7FE8; --brand-2:#5B93F0; --brand-3:#7EAEFF; --navy:#DCE6F7;
  --brand-weak:#13305A; --brand-line:#28497A; --brand-ink:#CFE0FF; --ac:#3F7FE8;
  --green:#4CC38A; --green-weak:rgba(76,195,138,.16);
  --red:#F07068;   --red-weak:rgba(240,112,104,.16); --red-line:rgba(240,112,104,.35);
  --amber:#F0B45A; --amber-weak:rgba(240,180,90,.14); --amber-bg:#231B0C; --amber-line:#5B4A2B;
  --shadow:0 1px 3px rgba(0,0,0,.35); --shadow-pop:0 18px 50px rgba(0,0,0,.5);
  --topbar:#0C1B2E; --topbar-ink:#E8EFFB; --topbar-line:#1F3350;
  color-scheme:dark;
}

/* ---------- base ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--bg); color:var(--text);
  font:14px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--navy); }
b,strong{ font-weight:600; color:inherit; }
h1,h2,h3,h4{ font-family:var(--head); color:var(--ink); }
::selection{ background:rgba(0,74,173,.2); }
.hidden{ display:none !important; }

/* ---------- barra do topo com abas ---------- */
.appbar{ display:flex; align-items:center; gap:28px; background:var(--topbar); color:var(--topbar-ink);
  border-bottom:1px solid var(--topbar-line); padding:0 32px; height:64px; position:sticky; top:0; z-index:30; }
.appbar .logo{ display:flex; align-items:center; gap:10px; font-family:var(--head); font-weight:800;
  font-size:15px; letter-spacing:.04em; color:var(--ink); white-space:nowrap; }
.appbar .logo img{ width:34px; height:auto; display:block; }
.appbar .logo span{ font-weight:600; color:var(--muted); }
.appbar .tabs{ display:flex; gap:4px; height:100%; overflow-x:auto; scrollbar-width:none; }
.appbar .tab{ display:flex; align-items:center; padding:0 14px; color:var(--muted); font-family:var(--head);
  font-size:14px; font-weight:600; border-bottom:3px solid transparent; border-top:3px solid transparent;
  white-space:nowrap; }
.appbar .tab{ gap:8px; }
.appbar .tab .ic{ opacity:.8; }
.appbar .tab:hover{ color:var(--ink); }
.appbar .tab.on{ color:var(--ink); font-weight:700; border-bottom-color:var(--brand); }
.appbar .right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.appbar .giro-tag{ font-size:12px; color:var(--green); font-weight:600; white-space:nowrap; }
.tema-btn{ display:inline-grid; place-items:center; width:40px; height:40px; padding:0;
  background:var(--surface); color:var(--muted); border:1px solid var(--line); border-radius:10px;
  cursor:pointer; font-size:15px; line-height:1; }
.tema-btn:hover:not(:disabled){ color:var(--ink); background:var(--surface-2); }
.t-claro{ display:none; }
html[data-theme="dark"] .t-escuro{ display:none; }
html[data-theme="dark"] .t-claro{ display:inline; }
.sair-link{ display:inline-flex; align-items:center; height:40px; padding:0 14px; font-family:var(--head);
  font-size:13px; font-weight:700; color:var(--muted); border:1px solid var(--line); background:var(--surface);
  border-radius:10px; }
.sair-link:hover{ color:var(--red); border-color:var(--red-line); }

/* ---------- container e cabeçalho da página ---------- */
main{ max-width:1280px; margin:0 auto; padding:28px 32px 72px; }
.pagehead{ max-width:1280px; margin:0 auto; padding:28px 32px 0; }
.pagehead + main{ padding-top:20px; }
.pagehead h1{ margin:0; font-weight:800; font-size:30px; line-height:1.15; }
.pagehead h1 .ic{ color:var(--brand); width:.85em; height:.85em; margin-right:12px; vertical-align:-.06em; }
.pagehead .lead{ margin:6px 0 0; color:var(--muted); font-size:14px; max-width:820px; line-height:1.55; }
.pagehead .lead b{ color:var(--ink); }

/* ---------- cartões e textos ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px 24px; margin-bottom:18px; }
h2{ font-size:17px; font-weight:800; margin:0 0 10px; line-height:1.3; }
h3{ font-size:15px; font-weight:700; margin:20px 0 8px; }
.hint{ font-size:13px; color:var(--muted); margin:-2px 0 16px; line-height:1.55; max-width:900px; }
.hint b{ color:var(--text); }
.aviso{ background:var(--amber-weak); border:1px solid var(--amber-line); color:var(--amber);
  border-radius:12px; padding:12px 16px; font-size:13px; font-weight:500; margin-bottom:16px; line-height:1.55; }
.aviso b{ color:inherit; }
.aviso.err{ background:var(--red-weak); border-color:var(--red-line); color:var(--red); }
.resumo{ font-size:13px; color:var(--muted); font-weight:500; margin:2px 0 14px; }
.fila{ font-size:13px; color:var(--muted); }
.vazio{ background:var(--surface); border:1px dashed var(--line); border-radius:12px; padding:24px;
  text-align:center; color:var(--muted); font-size:13.5px; line-height:1.6; }

/* ---------- botões ---------- */
button, a.btn{ font-family:var(--head); }
button, a.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:12px; border:1px solid var(--brand);
  background:var(--brand); color:#fff; font-weight:800; font-size:14px; line-height:1.2;
  cursor:pointer; transition:background .12s, border-color .12s, color .12s; white-space:nowrap; }
button:hover:not(:disabled), a.btn:hover{ background:var(--brand-2); border-color:var(--brand-2); color:#fff; }
button:disabled{ opacity:.45; cursor:not-allowed; }
button.sec, a.btn.sec{ background:var(--surface); color:var(--ink); border-color:var(--line); font-weight:700; }
button.sec:hover:not(:disabled), a.btn.sec:hover{ background:var(--surface-2); border-color:var(--line); color:var(--ink); }
/* altura fixa de 44 só nos botões "de verdade"; botão miúdo de linha (✓ é, ✕ não é) segue o da tela */
button:not([class]), button.sec, button.buscar, a.btn:not(.mini){ min-height:var(--ctl); padding-top:0; padding-bottom:0; }
button.cta{ min-height:52px; padding:0 32px; font-size:15px; }
button.perigo, button.del{ background:var(--red-weak); color:var(--red); border-color:var(--red-line); }
button.perigo:hover:not(:disabled), button.del:hover:not(:disabled){ background:var(--red); color:#fff; border-color:var(--red); }
button.mini, .mini button{ padding:8px 12px; font-size:12.5px; border-radius:10px; }

/* ---------- formulários ---------- */
label{ font-size:13px; color:var(--text); font-weight:600; }
input, select, textarea{ font-family:var(--sans); font-size:14px; color:var(--text);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:0 12px; outline:none; transition:border-color .12s, box-shadow .12s; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select:not([multiple]){ height:var(--ctl); }
select:not([multiple]){ padding-right:34px; appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235B6B82' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; text-overflow:ellipsis; }
select[multiple]{ padding:6px; }
select[multiple] option{ padding:6px 8px; border-radius:6px; }
select[multiple] option:checked{ background:var(--brand-weak); color:var(--ink); }
textarea{ padding:10px 12px; resize:vertical; min-height:88px; line-height:1.5; }
input:hover, select:hover, textarea:hover{ border-color:var(--brand-line); }
input:focus, select:focus, textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-weak); }
input::placeholder, textarea::placeholder{ color:var(--faint); }
input[type=checkbox], input[type=radio]{ width:18px; height:18px; margin:0; accent-color:var(--brand); flex:none; cursor:pointer; }
input[type=date]{ padding-right:8px; }
/* campo com rótulo em cima: o rótulo numa linha, a observação miúda embaixo dele e o
   campo sempre encostado no pé, então campos lado a lado ficam alinhados */
.cf{ display:flex; flex-direction:column; justify-content:flex-end; gap:6px; font-size:13px;
  color:var(--text); font-weight:600; min-width:0; }
.cf small{ display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:-4px; }
.cf > input, .cf > select, .cf > textarea{ width:100%; }
/* caixa de marcar: sempre a caixa + o texto na mesma linha */
.ck{ display:inline-flex; align-items:center; gap:10px; min-height:var(--ctl); font-size:14px; font-weight:500;
  color:var(--text); cursor:pointer; }
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* ---------- filtro de múltipla escolha (o do Atendimento, usado em todas as telas) ----------
   A tela que tem <select multiple> ganha este filtro sozinha (assets/filtro.js). */
.msel { position:relative; }
.mseltrigger { display:flex; align-items:center; justify-content:space-between; gap:8px; height:var(--ctl); padding:0 12px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); font-size:14px; font-weight:400;
  color:var(--text); cursor:pointer; }
.mseltrigger:hover { border-color:var(--brand-line); }
.mseltrigger > span:last-child { font-size:0; width:12px; height:8px; flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235B6B82' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat center; }
.mseltrigger .mlbl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mselpanel { position:absolute; z-index:30; top:calc(100% + 4px); left:0; min-width:210px; max-height:300px; overflow:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-pop); padding:6px; }
.mseltop { display:flex; justify-content:space-between; align-items:center; padding:2px 6px 8px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.mseltop b { font-size:12px; font-weight:600; color:var(--muted); }
.mseltop button, .mseltop button:hover:not(:disabled) { min-height:0; background:none; color:var(--brand); font-size:12px; font-weight:700; padding:2px 6px; border:0; }
.mselpanel label.mopt { display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:7px; font-size:13.5px; color:var(--ink); font-weight:500; cursor:pointer; }
.mselpanel label.mopt:hover { background:var(--surface-2); }
.mselpanel input[type=checkbox] { width:16px; height:16px; accent-color:var(--brand); }
.mselhdr { position:sticky; top:0; background:var(--surface); z-index:1; padding-bottom:2px; }
.mselbusca { width:100%; font-size:13px; padding:7px 10px; margin-bottom:4px; }
.mselnada { padding:10px; font-size:12.5px; color:var(--faint); text-align:center; }
select.filtro-fonte{ display:none !important; }

/* ---------- pílulas de filtro ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:18px;
  border:1px solid var(--line); font-family:var(--sans); font-size:13px; font-weight:600;
  background:var(--surface); color:var(--ink); cursor:pointer; user-select:none; white-space:nowrap; }
.chip:hover{ background:var(--surface-2); }
.chip.on, .chip.mar{ background:var(--navy); color:#fff; border-color:var(--navy); }
html[data-theme="dark"] .chip.on, html[data-theme="dark"] .chip.mar{ background:var(--brand); border-color:var(--brand); }
.chip .n{ opacity:.75; font-size:12px; font-weight:500; }

/* ---------- selos ---------- */
.badge{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:600; border-radius:10px;
  padding:2px 9px; white-space:nowrap; }
.b-ok{ background:var(--green-weak); color:var(--green); } .b-warn{ background:var(--amber-weak); color:var(--amber); }
.b-off{ background:var(--surface-2); color:var(--muted); } .b-crit{ background:var(--red-weak); color:var(--red); }
.b-info{ background:var(--brand-weak); color:var(--navy); }

/* ---------- tabela ---------- */
.tabela{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto; }
.tabela table{ border-collapse:collapse; width:100%; }
.tabela thead th{ text-align:left; font-family:var(--head); font-size:12.5px; font-weight:700; color:var(--muted);
  padding:12px 16px; border-bottom:1px solid var(--line); }
.tabela tbody td{ padding:12px 16px; border-bottom:1px solid var(--line-2); font-size:13.5px; vertical-align:middle; }
.tabela tbody tr:last-child td{ border:none; }

/* ---------- zona de upload (arrastar e soltar) ---------- */
#drop{ border:2px dashed var(--line); border-radius:var(--radius); padding:34px; text-align:center;
  color:var(--muted); cursor:pointer; transition:.15s; background:var(--surface); }
#drop:hover{ border-color:var(--brand-line); }
#drop.hover{ border-color:var(--brand); background:var(--brand-weak); color:var(--ink); }
#drop strong{ display:block; font-family:var(--head); font-size:16px; font-weight:800; color:var(--ink); margin-bottom:6px; }
#drop small{ color:var(--faint); }

/* miniaturas de upload */
.thumbs, .thumbwrap{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.thumb{ position:relative; width:96px; height:96px; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); background:var(--surface); }
.thumb img{ width:100%; height:100%; object-fit:contain; }
.thumb .rm{ position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,46,108,.7); color:#fff; font-weight:700; font-size:14px; line-height:22px;
  text-align:center; cursor:pointer; }

/* buscar/pegar da base de fotos */
.basesearch{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2); }
.basesearch .lbl2{ display:block; font-size:14px; color:var(--ink); font-weight:700; margin-bottom:9px; font-family:var(--head); }
.basesearch input.ref, .ref{ flex:1; min-width:160px; }
.basegrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; margin-top:12px; }
.basecard{ border:1px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer;
  background:var(--surface); transition:.12s; }
.basecard:hover{ border-color:var(--brand); }
.basecard.sel{ border-color:var(--brand); box-shadow:0 0 0 2px var(--brand); }
.basecard img{ width:100%; height:104px; object-fit:contain; background:var(--bg); display:block; }
.basecard span{ display:block; font-size:11px; color:var(--muted); padding:5px 7px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seclbl, .lbl{ display:block; font-family:var(--head); font-size:14px; color:var(--ink); font-weight:700; margin:2px 0 10px; }

/* ---------- caixa de prévia (imagens de páginas geradas) ---------- */
.previewbox{ max-height:720px; overflow-y:auto; background:var(--bg); border:1px solid var(--line);
  border-radius:12px; padding:14px; display:flex; flex-direction:column; align-items:center;
  gap:12px; margin-top:8px; }
.previewPg{ width:100%; max-width:760px; aspect-ratio:210/297; background:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.18); border-radius:2px; object-fit:contain; }
.pvPlaceholder{ background:var(--surface); display:flex; align-items:center; justify-content:center;
  color:var(--faint); font-size:13px; }
.pvLoad{ padding:16px; color:var(--muted); font-size:13px; }

/* ---------- login ---------- */
.login-body{ display:grid; place-items:center; min-height:100vh; padding:20px; background:var(--bg); }
.login-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px;
  width:min(380px,94vw); padding:34px 30px 30px; box-shadow:var(--shadow-pop);
  display:flex; flex-direction:column; }
.login-logo{ display:flex; justify-content:center; padding:2px 0 6px; }
.login-logo img{ width:auto; max-width:100%; }
.login-logo .logo-azul{ height:58px; }
.login-logo .logo-branca{ height:76px; display:none; }
html[data-theme="dark"] .login-logo .logo-azul{ display:none; }
html[data-theme="dark"] .login-logo .logo-branca{ display:block; }
.login-sub{ text-align:center; color:var(--muted); font-size:13px; margin:2px 0 20px; }
.login-card label{ display:block; font-size:13px; color:var(--text); font-weight:600; margin:14px 0 6px; }
.login-card input{ width:100%; }
.login-card button{ width:100%; margin-top:22px; min-height:48px; font-size:15px; }
.login-erro{ margin-top:14px; background:var(--red-weak); color:var(--red); border:1px solid var(--red-line);
  border-radius:10px; padding:10px 12px; font-size:13px; text-align:center; display:none; }
.login-erro.on{ display:block; }

/* ---------- legado: barra antiga (só o catálogo público ainda usa) ---------- */
.topbar{ display:flex; align-items:center; gap:14px 18px; flex-wrap:wrap; background:var(--topbar);
  color:var(--topbar-ink); border-bottom:1px solid var(--topbar-line); padding:11px 22px;
  position:sticky; top:0; z-index:20; }
.topbar .brand{ display:flex; align-items:center; gap:11px; color:var(--topbar-ink); }
.topbar .brand-mark{ width:34px; height:34px; border-radius:9px; flex:none; display:block; }
.topbar .brand-name{ font-family:var(--head); font-weight:800; font-size:17px; line-height:1.05; color:var(--brand); }
html[data-theme="dark"] .topbar .brand-name{ color:var(--topbar-ink); }
.topbar .brand-name small{ display:block; font-family:var(--sans); font-weight:500; font-size:11px; color:var(--muted); margin-top:2px; }
.topbar-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }

/* ---------- ícones (linha 2px) nos botões: <button data-ic="busca"> ---------- */
[data-ic]:not(.ic)::before{ content:''; width:16px; height:16px; flex:none; background:currentColor;
  -webkit-mask:var(--ic) no-repeat center / contain; mask:var(--ic) no-repeat center / contain; }
a[data-ic]{ display:inline-flex; align-items:center; gap:8px; }
[data-ic="busca"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M20%2020l-3.5-3.5'/%3E%3C/svg%3E"); }
[data-ic="salvar"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%203h11l3%203v15H5z'/%3E%3Cpath%20d='M8%203v5h8V3M8%2021v-7h8v7'/%3E%3C/svg%3E"); }
[data-ic="olho"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207S2%2012%202%2012z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E"); }
[data-ic="imagem"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='2'/%3E%3Ccircle%20cx='9'%20cy='9'%20r='2'/%3E%3Cpath%20d='M21%2015l-5-5L5%2021'/%3E%3C/svg%3E"); }
[data-ic="pausa"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='6'%20y='4'%20width='4'%20height='16'%20rx='1'/%3E%3Crect%20x='14'%20y='4'%20width='4'%20height='16'%20rx='1'/%3E%3C/svg%3E"); }
[data-ic="play"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%204l13%208-13%208z'/%3E%3C/svg%3E"); }
[data-ic="editar"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020h9'/%3E%3Cpath%20d='M16.5%203.5a2.1%202.1%200%20013%203L7%2019l-4%201%201-4z'/%3E%3C/svg%3E"); }
[data-ic="lixo"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%206h18M8%206V4h8v2M6%206l1%2014h10l1-14'/%3E%3C/svg%3E"); }
[data-ic="mais"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205v14M5%2012h14'/%3E%3C/svg%3E"); }
[data-ic="impressora"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209V3h12v6'/%3E%3Crect%20x='3'%20y='9'%20width='18'%20height='8'%20rx='2'/%3E%3Cpath%20d='M7%2014h10v7H7z'/%3E%3C/svg%3E"); }
[data-ic="atualizar"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012a9%209%200%2011-3-6.7L21%208'/%3E%3Cpath%20d='M21%203v5h-5'/%3E%3C/svg%3E"); }
[data-ic="copiar"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='9'%20width='12'%20height='12'%20rx='2'/%3E%3Cpath%20d='M5%2015V5a2%202%200%20012-2h10'/%3E%3C/svg%3E"); }
[data-ic="link"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10%2013a5%205%200%20007%200l3-3a5%205%200%2000-7-7l-1%201'/%3E%3Cpath%20d='M14%2011a5%205%200%2000-7%200l-3%203a5%205%200%20007%207l1-1'/%3E%3C/svg%3E"); }
[data-ic="enviar"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%202L11%2013'/%3E%3Cpath%20d='M22%202l-7%2020-4-9-9-4z'/%3E%3C/svg%3E"); }
[data-ic="baixar"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203v12M7%2010l5%205%205-5'/%3E%3Cpath%20d='M5%2021h14'/%3E%3C/svg%3E"); }
[data-ic="subir"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2021V9M7%2014l5-5%205%205'/%3E%3Cpath%20d='M5%203h14'/%3E%3C/svg%3E"); }
[data-ic="tag"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.6%2013.4L13.4%2020.6a2%202%200%2001-2.8%200L3%2013V3h10l7.6%207.6a2%202%200%20010%202.8z'/%3E%3Ccircle%20cx='7.5'%20cy='7.5'%20r='1.5'/%3E%3C/svg%3E"); }
[data-ic="brilho"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l1.8%205.2L19%2010l-5.2%201.8L12%2017l-1.8-5.2L5%2010l5.2-1.8z'/%3E%3Cpath%20d='M19%2017l.8%202.2L22%2020l-2.2.8L19%2023l-.8-2.2L16%2020l2.2-.8z'/%3E%3C/svg%3E"); }
[data-ic="camera"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%207h3l2-3h6l2%203h3a1%201%200%20011%201v11a1%201%200%2001-1%201H4a1%201%200%2001-1-1V8a1%201%200%20011-1z'/%3E%3Ccircle%20cx='12'%20cy='13'%20r='4'/%3E%3C/svg%3E"); }
[data-ic="x"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%206L6%2018M6%206l12%2012'/%3E%3C/svg%3E"); }
[data-ic="check"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206L9%2017l-5-5'/%3E%3C/svg%3E"); }
[data-ic="abrir"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%203h7v7M10%2014L21%203'/%3E%3Cpath%20d='M19%2014v6a1%201%200%2001-1%201H4a1%201%200%2001-1-1V6a1%201%200%20011-1h6'/%3E%3C/svg%3E"); }
[data-ic="zap"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012a9%209%200%2001-13.5%207.8L3%2021l1.2-4.5A9%209%200%201121%2012z'/%3E%3C/svg%3E"); }

/* ícone solto no meio do texto (título, rótulo, selo): <i class="ic" data-ic="loja"></i> */
.ic[data-ic]{ display:inline-block; width:1.05em; height:1.05em; vertical-align:-.17em; flex:none;
  background:currentColor; -webkit-mask:var(--ic) no-repeat center / contain; mask:var(--ic) no-repeat center / contain; }
[data-ic="alerta"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l10%2018H2z'/%3E%3Cpath%20d='M12%2010v5M12%2018h.01'/%3E%3C/svg%3E"); }
[data-ic="relogio"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207v5l3%202'/%3E%3C/svg%3E"); }
[data-ic="fogo"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2022c4%200%207-3%207-7%200-4-3-6-4-9-1%202-2%203-3%203%200-2-1-4-3-6-1%204-4%206-4%2012%200%204%203%207%207%207z'/%3E%3C/svg%3E"); }
[data-ic="presente"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='8'%20width='18'%20height='4'%20rx='1'/%3E%3Cpath%20d='M5%2012v9h14v-9M12%208v13'/%3E%3Cpath%20d='M12%208c-2-4-6-4-6-1s6%201%206%201zm0%200c2-4%206-4%206-1s-6%201-6%201z'/%3E%3C/svg%3E"); }
[data-ic="sol"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Cpath%20d='M12%202v2M12%2020v2M4.9%204.9l1.4%201.4M17.7%2017.7l1.4%201.4M2%2012h2M20%2012h2M4.9%2019.1l1.4-1.4M17.7%206.3l1.4-1.4'/%3E%3C/svg%3E"); }
[data-ic="loja"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%209l2-5h14l2%205'/%3E%3Cpath%20d='M4%209v11h16V9'/%3E%3Cpath%20d='M3%209h18M9%2020v-6h6v6'/%3E%3C/svg%3E"); }
[data-ic="local"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2022s7-6.5%207-12a7%207%200%2010-14%200c0%205.5%207%2012%207%2012z'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='2.5'/%3E%3C/svg%3E"); }
[data-ic="pin"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%203h6l-1%206%204%204H6l4-4z'/%3E%3Cpath%20d='M12%2013v8'/%3E%3C/svg%3E"); }
[data-ic="fabrica"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2021V10l6%204V10l6%204V6h6v15z'/%3E%3Cpath%20d='M7%2017h2M12%2017h2M17%2017h2'/%3E%3C/svg%3E"); }
[data-ic="caixa"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%207l9-4%209%204v10l-9%204-9-4z'/%3E%3Cpath%20d='M3%207l9%204%209-4M12%2011v10'/%3E%3C/svg%3E"); }
[data-ic="cartao"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='5'%20width='20'%20height='14'%20rx='2'/%3E%3Cpath%20d='M2%2010h20M6%2015h4'/%3E%3C/svg%3E"); }
[data-ic="placa"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='11'%20rx='1'/%3E%3Cpath%20d='M12%2015v6M8%2021h8'/%3E%3C/svg%3E"); }
[data-ic="grafico"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2020V10M10%2020V4M16%2020v-7M22%2020H2'/%3E%3C/svg%3E"); }
[data-ic="camadas"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l9%205-9%205-9-5z'/%3E%3Cpath%20d='M3%2013l9%205%209-5'/%3E%3C/svg%3E"); }
[data-ic="sacola"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%208h14l-1%2013H6z'/%3E%3Cpath%20d='M9%208V6a3%203%200%20016%200v2'/%3E%3C/svg%3E"); }
[data-ic="pasta"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%206a1%201%200%20011-1h5l2%202h9a1%201%200%20011%201v10a1%201%200%2001-1%201H4a1%201%200%2001-1-1z'/%3E%3C/svg%3E"); }
[data-ic="caneta"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16.5%203.5a2.1%202.1%200%20013%203L7%2019l-4%201%201-4z'/%3E%3C/svg%3E"); }
[data-ic="paleta"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203a9%209%200%20100%2018c1.5%200%202-1%202-2s-1-2%200-3%203%200%204-1%203-2%203-4c0-4.5-4-8-9-8z'/%3E%3Ccircle%20cx='7.5'%20cy='11'%20r='1'/%3E%3Ccircle%20cx='10'%20cy='7'%20r='1'/%3E%3Ccircle%20cx='15'%20cy='7'%20r='1'/%3E%3C/svg%3E"); }
[data-ic="alvo"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='5'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='1'/%3E%3C/svg%3E"); }
[data-ic="pe"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%2021c-2%200-3-2-3-5s1-6%201-8a3%203%200%20016%200c0%203-2%205-2%208s0%205-2%205z'/%3E%3Ccircle%20cx='16'%20cy='5'%20r='1.5'/%3E%3Ccircle%20cx='18'%20cy='9'%20r='1.2'/%3E%3C/svg%3E"); }
[data-ic="mao"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2011V5a1.5%201.5%200%20013%200v5M10%2010V4a1.5%201.5%200%20013%200v6M13%2010V5a1.5%201.5%200%20013%200v7M16%2012V8a1.5%201.5%200%20013%200v6c0%204-3%207-7%207s-5-2-7-5l-2-3a1.5%201.5%200%20012.5-1.5L7%2013'/%3E%3C/svg%3E"); }
[data-ic="casa"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2011l9-7%209%207'/%3E%3Cpath%20d='M5%2010v10h14V10M10%2020v-6h4v6'/%3E%3C/svg%3E"); }
[data-ic="grade"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='7'%20height='7'%20rx='1'/%3E%3Crect%20x='14'%20y='3'%20width='7'%20height='7'%20rx='1'/%3E%3Crect%20x='3'%20y='14'%20width='7'%20height='7'%20rx='1'/%3E%3Crect%20x='14'%20y='14'%20width='7'%20height='7'%20rx='1'/%3E%3C/svg%3E"); }
[data-ic="coroa"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%208l4%204%205-7%205%207%204-4-2%2011H5z'/%3E%3C/svg%3E"); }
[data-ic="celular"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='7'%20y='2'%20width='10'%20height='20'%20rx='2'/%3E%3Cpath%20d='M11%2018h2'/%3E%3C/svg%3E"); }
[data-ic="lampada"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2018h6M10%2021h4'/%3E%3Cpath%20d='M12%203a6%206%200%2000-4%2010.5c.7.7%201%201.5%201%202.5h6c0-1%20.3-1.8%201-2.5A6%206%200%200012%203z'/%3E%3C/svg%3E"); }
[data-ic="cadeado"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='5'%20y='11'%20width='14'%20height='10'%20rx='2'/%3E%3Cpath%20d='M8%2011V7a4%204%200%20018%200v4'/%3E%3C/svg%3E"); }
[data-ic="documento"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%202h9l5%205v15H6z'/%3E%3Cpath%20d='M14%202v6h6M9%2013h6M9%2017h6'/%3E%3C/svg%3E"); }
[data-ic="quadrado"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='4'%20width='16'%20height='16'%20rx='3'/%3E%3C/svg%3E"); }
[data-ic="circulo"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8'/%3E%3C/svg%3E"); }
[data-ic="ponto"]{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3C/svg%3E"); }

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .appbar{ height:auto; flex-wrap:wrap; padding:8px 16px 0; gap:6px 14px; }
  .appbar .tabs{ order:3; flex-basis:100%; height:46px; margin:0 -16px; padding:0 8px; }
  .appbar .tab{ padding:0 12px; font-size:13.5px; }
}
@media (max-width:720px){
  main{ padding:20px 16px 56px; }
  .pagehead{ padding:20px 16px 0; }
  .card{ padding:18px 16px; }
  .pagehead h1{ font-size:24px; }
  .topbar{ padding:10px 14px; }
}