/* CotaFix — iconografia.
 * Desenhos técnicos (peças):  <svg class="cf-draw" viewBox="0 0 200 120" role="img" aria-label="Desenho técnico: porca flangeada DIN 6923"><use href="/assets/img/cf/drawings.svg#d-nut-flange"/></svg>
 * Ícones de linha (conceitos): <svg class="cf-ico" aria-hidden="true"><use href="/assets/img/cf/icons.svg#i-truck"/></svg>
 * Usa os tokens --cf-* do cf.css quando presentes; os valores após a vírgula são o fallback. */

/* ---------- Ícones de linha (24×24, Lucide + próprios) ---------- */
.cf-ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.14em;
  overflow: visible;
  color: inherit;
  --ico-sw: 1.5;
}
.cf-ico--xs { width: .75em; height: .75em; }
.cf-ico--sm { width: .875em; height: .875em; }
.cf-ico--lg { width: 1.25em; height: 1.25em; vertical-align: -0.25em; }
.cf-ico--xl { width: 1.5em; height: 1.5em; vertical-align: -0.32em; }
.cf-ico--2x { width: 2em; height: 2em; vertical-align: middle; }
.cf-ico--3x { width: 3em; height: 3em; vertical-align: middle; }
.cf-ico--thin { --ico-sw: 1.25; }
.cf-ico--bold { --ico-sw: 1.85; }
.cf-ico--muted { color: var(--cf-label, #6E6961); }
.cf-ico--brass { color: var(--cf-brass, #A0703C); }
.cf-ico--ok { color: var(--cf-green-ink, #2F6E43); }
.cf-ico--no { color: var(--cf-red-ink, #8E3B22); }

/* Ícone em ladrilho (listas de diferenciais, cartões de conceito) */
.cf-ico-tile {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--cf-line, #DCD6CC);
  border-radius: 10px;
  background: var(--cf-sheet, #FBFAF7);
  color: var(--cf-ink, #1B1A18);
}
.cf-ico-tile > .cf-ico { width: 22px; height: 22px; --ico-sw: 1.4; }
.cf-ico-tile--lg { width: 56px; height: 56px; border-radius: 12px; }
.cf-ico-tile--lg > .cf-ico { width: 26px; height: 26px; }
.cf-ico-tile--dark { background: var(--cf-dark, #141312); border-color: var(--cf-dark-line, #34312D); color: var(--cf-on-dark, #EEEBE5); }

/* Ícone + texto alinhados (rótulos, linhas de contato) */
.cf-ico-label { display: inline-flex; align-items: center; gap: .5em; }

/* ---------- Desenhos técnicos (200×120) ---------- */
.cf-draw {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 120;
  overflow: visible;
  color: var(--cf-ink, #1B1A18);
  stroke-width: 1.25;
  --thin: .6px;
  --cl-op: .5;
  --draw-accent: var(--cf-brass, #A0703C);
  --draw-bg: var(--cf-paper, #F4F1EC);
  --draw-font: var(--cf-mono, 'Geist Mono', ui-monospace, monospace);
}
/* fundo da peça = fundo do cartão onde ela está (para a oclusão das roscas) */
.cf-draw--on-sheet { --draw-bg: var(--cf-sheet, #FBFAF7); }
.cf-draw--on-white { --draw-bg: #FFFFFF; }
.cf-draw--dark {
  color: var(--cf-on-dark, #EEEBE5);
  --draw-bg: var(--cf-dark, #141312);
  --draw-accent: #C9A36A;
  --cl-op: .45;
}
/* tamanhos de uso frequente */
.cf-draw--xs { width: 64px; }
.cf-draw--sm { width: 96px; }
.cf-draw--md { width: 160px; }
.cf-draw--lg { width: 280px; }
.cf-draw--fine { stroke-width: 1; --thin: .5px; }
/* pequeno, alinhado ao texto (substitui emoji de peça no meio da frase ou num título) */
.cf-draw--inline {
  display: inline-block;
  width: 2.6em;
  height: 1.56em;
  vertical-align: -0.38em;
  stroke-width: 1;
  --thin: .45px;
  --cl-op: 0;
}

/* Prancha: desenho em moldura com legenda mono (cartões de catálogo) */
.cf-plate {
  display: grid;
  gap: 10px;
  padding: 18px 18px 14px;
  border: 1px solid var(--cf-line, #DCD6CC);
  background: var(--cf-paper, #F4F1EC);
}
.cf-plate .cf-draw { --draw-bg: var(--cf-paper, #F4F1EC); }
.cf-plate__cap {
  font: 500 10.5px/1.3 var(--cf-mono, 'Geist Mono', ui-monospace, monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cf-label, #6E6961);
}

/* ---------- Listas de verificação (sem emoji) ---------- */
.cf-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.cf-checks > li { position: relative; padding-left: 1.75em; }
.cf-checks > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .22em;
  width: 1.1em;
  height: 1.1em;
  background-color: var(--cf-check, var(--cf-green-ink, #2F6E43));
  -webkit-mask: var(--cf-mark) no-repeat center / contain;
  mask: var(--cf-mark) no-repeat center / contain;
  --cf-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.cf-checks--x > li::before {
  --cf-check: var(--cf-red-ink, #8E3B22);
  --cf-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.cf-checks--warn > li::before {
  --cf-check: var(--cf-brass-ink, #855A2C);
  --cf-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
.cf-checks--dash > li::before {
  --cf-check: var(--cf-label, #6E6961);
  --cf-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
.cf-checks--dark > li::before { --cf-check: var(--cf-sage, #A9C09E); }

/* Marcador avulso no meio do texto (troca de ✅ ✓ ❌ ⚠ fora de listas) */
.cf-mark { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; --ico-sw: 1.8; }
.cf-mark--ok { color: var(--cf-green-ink, #2F6E43); }
.cf-mark--no { color: var(--cf-red-ink, #8E3B22); }
.cf-mark--warn { color: var(--cf-brass-ink, #855A2C); }

/* Avaliação em estrelas sem emoji (★ ⭐): <span class="cf-stars" style="--v:5" aria-label="5 de 5"></span> */
.cf-stars {
  display: inline-block;
  width: calc(5 * 1em);
  height: 1em;
  vertical-align: -0.12em;
  background: linear-gradient(90deg, var(--cf-brass, #A0703C) calc(var(--v, 5) * 20%), var(--cf-line, #DCD6CC) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.5 2.3a.6.6 0 0 1 1 0l2.8 5.7 6.3.9a.6.6 0 0 1 .3 1l-4.5 4.4 1 6.3a.6.6 0 0 1-.8.6L12 18.2l-5.6 3a.6.6 0 0 1-.8-.6l1-6.3L2.1 9.9a.6.6 0 0 1 .3-1l6.3-.9z'/%3E%3C/svg%3E") repeat-x left center / 1em 1em;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.5 2.3a.6.6 0 0 1 1 0l2.8 5.7 6.3.9a.6.6 0 0 1 .3 1l-4.5 4.4 1 6.3a.6.6 0 0 1-.8.6L12 18.2l-5.6 3a.6.6 0 0 1-.8-.6l1-6.3L2.1 9.9a.6.6 0 0 1 .3-1l6.3-.9z'/%3E%3C/svg%3E") repeat-x left center / 1em 1em;
}

@media (forced-colors: active) {
  .cf-checks > li::before, .cf-stars { background: CanvasText; }
}

/* ---------- Monograma (avatar de autor/pessoa; substitui 👨‍🔬 👨‍🔧) ----------
 * <span class="cf-monogram" aria-hidden="true">CS</span>  ·  .cf-monogram--lg  ·  .cf-monogram--dark */
.cf-monogram {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--cf-line-2, #CBC4B8);
  background: var(--cf-sheet, #FBFAF7);
  color: var(--cf-ink, #1B1A18);
  font: 400 17px/1 var(--cf-serif, 'Newsreader', Georgia, serif);
  letter-spacing: .02em;
  font-feature-settings: 'lnum';
  user-select: none;
}
.cf-monogram--sm { width: 32px; height: 32px; font-size: 13px; }
.cf-monogram--lg { width: 72px; height: 72px; font-size: 26px; }
.cf-monogram--dark { background: var(--cf-dark, #141312); border-color: var(--cf-dark-line, #34312D); color: var(--cf-on-dark, #EEEBE5); }