/* ============================================================
   COF-HIGIENE V3 · TEMA HTML INTERATIVO — derivado do
   modelo_padrao.html (master template do usuário, 17/07/2026)
   Regra da casa: HTML interativo = este tema (raios suaves,
   sombras leves, .brand/.card) · PDF = manual 3 faixas (cof-export).
   Fontes: link assets/cof-fonts.css (Archivo · IBM Plex, offline).
   ============================================================ */

/* ============================================================
   COFERMETA — MODELO PADRÃO DE DOCUMENTO (master template)
   Fontes embutidas (offline) + tokens colors_and_type.css
   + logo SVG vetorial oficial
   ============================================================ */
:root{
  /* 1. BRAND PALETTE (oficial — extraída do logo SVG) */
  --cof-blue:#009FE3; --cof-blue-600:#0086C2; --cof-blue-700:#0072A8; --cof-blue-800:#00567E;
  --cof-blue-050:#E6F6FD; --cof-blue-100:#C2E9FA;
  --cof-ink:#1D1D1B; --cof-graphite:#706F6F;
  --n-0:#FFFFFF; --n-25:#FAFAFA; --n-50:#F4F5F6; --n-100:#ECEDEE; --n-150:#E0E1E3;
  --n-200:#D2D3D5; --n-300:#B9BABC; --n-400:#9A9B9C; --n-500:#706F6F;
  --n-600:#565655; --n-700:#3D3D3C; --n-800:#2A2A29; --n-900:#1D1D1B;
  /* 2. ACCENTS */
  --cof-yellow:#FFD200; --cof-yellow-700:#C99F00;
  --price-red:#E2001A; --price-red-700:#B3000F;
  --stock-green:#1E9E57; --stock-green-700:#157A42;
  /* 3. SEMANTIC */
  --bg:var(--n-0); --bg-subtle:var(--n-50); --surface:var(--n-0); --surface-2:var(--n-25);
  --fg1:var(--cof-ink); --fg2:var(--n-600); --fg3:var(--n-400);
  --fg-on-blue:#FFF; --fg-on-dark:#FFF;
  --border:var(--n-150); --border-strong:var(--n-300); --border-focus:var(--cof-blue);
  --link:var(--cof-blue-700); --link-hover:var(--cof-blue-800);
  --success:var(--stock-green); --danger:var(--price-red); --warning:var(--cof-yellow); --info:var(--cof-blue);
  /* 4. TYPE */
  --font-display:'Archivo','Arial Narrow',system-ui,sans-serif;
  --font-sans:'IBM Plex Sans',system-ui,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --fs-h1:2.441rem; --fs-h2:1.953rem; --fs-h3:1.563rem; --fs-h4:1.25rem;
  --fs-lg:1.125rem; --fs-base:1rem; --fs-sm:.875rem; --fs-xs:.75rem;
  --lh-tight:1.05; --lh-snug:1.2; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-tight:-.01em; --ls-label:.06em; --ls-wide:.12em;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;
  /* 5. SPACING / RADII / SHADOW */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r-xs:2px; --r-sm:4px; --r-md:6px; --r-lg:10px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(29,29,27,.06),0 1px 1px rgba(29,29,27,.04);
  --shadow-md:0 2px 8px rgba(29,29,27,.08),0 1px 2px rgba(29,29,27,.05);
  --shadow-blue:0 4px 14px rgba(0,159,227,.30);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-sans);background:var(--bg-subtle);color:var(--fg1);
  padding:var(--sp-5);font-size:var(--fs-base);line-height:var(--lh-normal)}
.wrap{max-width:1040px;margin:0 auto}

/* ===== HEADER / MARCA (padrão .brand) ===== */
.brand{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-md);margin-bottom:var(--sp-5);overflow:hidden}
.brand .logo{padding:var(--sp-4) var(--sp-5);border-right:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:center;gap:6px;background:var(--surface)}
.brand .logo svg{height:48px;width:auto;display:block}
.brand .logo .sub{background:var(--cof-graphite);color:var(--fg-on-dark);
  font-weight:var(--fw-bold);font-size:10px;letter-spacing:var(--ls-wide);padding:3px 6px;
  text-align:center;text-transform:uppercase;border-radius:var(--r-xs)}
.brand .ttl{flex:1;display:flex;flex-direction:column;justify-content:center;padding:var(--sp-3) var(--sp-6)}
.brand .ttl h1{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-h3);
  text-transform:uppercase;letter-spacing:var(--ls-tight);line-height:var(--lh-tight)}
.brand .ttl p{font-weight:var(--fw-bold);font-size:var(--fs-xs);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--cof-blue-700);margin-top:6px}
.brand .meta{display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:var(--sp-3) var(--sp-5);border-left:1px solid var(--border);background:var(--surface-2)}
.brand .meta .tag{font-family:var(--font-mono);font-weight:var(--fw-semibold);font-size:var(--fs-xs);
  padding:3px 10px;border-radius:var(--r-sm);text-align:center}
.tag-v{background:var(--cof-yellow);color:var(--cof-ink)}
.tag-conf{background:var(--price-red);color:#fff}
.tag-data{background:var(--cof-blue-050);color:var(--cof-blue-800)}

/* ===== SEÇÕES / CARDS ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);margin-bottom:var(--sp-5);overflow:hidden}
.card>.hd{display:flex;align-items:center;gap:10px;background:var(--cof-blue-800);color:#fff;
  padding:var(--sp-3) var(--sp-5)}
.card>.hd .dot{width:10px;height:10px;border-radius:var(--r-xs)}
.card>.hd h2{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-h4);
  text-transform:uppercase;letter-spacing:var(--ls-tight);flex:1}
.card>.hd .n{font-family:var(--font-mono);font-size:var(--fs-xs);background:rgba(255,255,255,.15);
  padding:2px 10px;border-radius:var(--r-pill)}
.card>.bd{padding:var(--sp-5)}

.eyebrow{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--cof-blue-700);margin-bottom:var(--sp-2)}

/* ===== NOTICE ===== */
.notice{background:var(--cof-blue-050);border:1px solid var(--cof-blue-100);
  border-left:4px solid var(--cof-blue);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-sm);margin-bottom:var(--sp-5)}
.notice.warn{background:#FFF8DB;border-color:#F1E4A6;border-left-color:var(--cof-yellow)}
.notice.danger{background:#FDEBED;border-color:#F5C6CB;border-left-color:var(--price-red)}
.notice b{text-transform:uppercase;font-family:var(--font-display);letter-spacing:var(--ls-label)}

/* ===== TABELA DE DADOS ===== */
table.data{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.data th{background:var(--cof-blue-700);color:#fff;font-family:var(--font-display);
  font-weight:var(--fw-bold);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:var(--ls-label);padding:9px 12px;text-align:left}
table.data td{padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:top}
table.data tbody tr:nth-child(even){background:var(--surface-2)}
table.data tbody tr:hover{background:var(--cof-blue-050)}
td.mono,.mono{font-family:var(--font-mono);font-size:var(--fs-sm)}
.cof-price{font-family:var(--font-mono);font-weight:var(--fw-semibold);color:var(--cof-ink)}
td.strong{font-family:var(--font-display);font-weight:var(--fw-bold);text-transform:uppercase;
  color:var(--cof-blue-800);font-size:var(--fs-xs);letter-spacing:.02em}

/* ===== SWATCHES / SPECIMEN ===== */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3)}
.sw{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.sw .chip{height:56px}
.sw .lbl{padding:8px 10px}
.sw .lbl b{display:block;font-family:var(--font-mono);font-size:var(--fs-xs)}
.sw .lbl span{font-size:11px;color:var(--fg2)}
.spec-row{display:flex;align-items:baseline;gap:var(--sp-4);padding:var(--sp-3) 0;border-bottom:1px dashed var(--border)}
.spec-row .who{width:220px;flex-shrink:0;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--fg2)}

/* ===== BOTÕES / TAGS ===== */
.btn{display:inline-block;font-family:var(--font-display);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:var(--ls-label);font-size:var(--fs-sm);
  padding:10px 20px;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--cof-blue);color:#fff;box-shadow:var(--shadow-blue)}
.btn-primary:hover{background:var(--cof-blue-600)}
.btn-outline{background:var(--surface);color:var(--cof-blue-700);border-color:var(--cof-blue-700)}
.btn-ghost{background:var(--n-100);color:var(--fg1)}
.pill{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  padding:3px 12px;border-radius:var(--r-pill)}
.pill-ok{background:#E4F5EC;color:var(--stock-green-700)}
.pill-warn{background:#FFF4C2;color:var(--cof-yellow-700)}
.pill-danger{background:#FDE3E6;color:var(--price-red-700)}
.pill-info{background:var(--cof-blue-100);color:var(--cof-blue-800)}

/* ===== FOOTER ===== */
.footer{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.footer .slogan{background:var(--cof-blue-800);color:#fff;padding:var(--sp-3) var(--sp-5);
  font-family:var(--font-display);font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:var(--ls-label);font-size:var(--fs-sm)}
.footer .dados{background:var(--cof-ink);color:var(--n-300);padding:var(--sp-2) var(--sp-5);
  display:flex;flex-wrap:wrap;gap:6px 24px;font-family:var(--font-mono);font-size:11px}

@media print{
  body{background:#fff;padding:0}
  .brand,.card,.footer{box-shadow:none}
  .card{page-break-inside:avoid}
}


/* ===== PONTE p/ telas legadas (variáveis antigas → tokens) ===== */
:root{--azul:var(--cof-blue);--azul800:var(--cof-blue-800);--b800:var(--cof-blue-800);
--b700:var(--cof-blue-700);--preto:var(--cof-ink);--ink:var(--cof-ink);
--cinza:var(--cof-graphite);--graf:var(--cof-graphite);--bg:var(--n-50);
--amar:var(--cof-yellow);--verm:var(--price-red);--verde:var(--stock-green);
--cof-azul:var(--cof-blue);--cof-azul800:var(--cof-blue-800);--cof-preto:var(--cof-ink);
--cof-cinza:var(--cof-graphite);--cof-bg:var(--n-50);--cof-verm:var(--price-red);
--cof-verde:var(--stock-green);--cof-amar:var(--cof-yellow)}
body{background:var(--n-50)}
h1,h2,h3{font-family:var(--font-display)!important;text-transform:uppercase;letter-spacing:var(--ls-tight)}
button,.btn,[class*="btn-"]{font-family:var(--font-display);font-weight:var(--fw-bold);
text-transform:uppercase;letter-spacing:var(--ls-label);border-radius:var(--r-md)}
table:not(.data) th{background:var(--cof-blue-700);color:#fff;font-family:var(--font-display);
font-weight:var(--fw-bold);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-label)}
table:not(.data) td{border-bottom:1px solid var(--border)}
table:not(.data) tbody tr:nth-child(even),table:not(.data) tr:nth-child(even) td{background:var(--surface-2)}
input,select,textarea{border:1px solid var(--border-strong);border-radius:var(--r-sm);font-family:var(--font-sans)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--border-focus)}
::selection{background:var(--cof-blue);color:#fff}
/* Rodapé oficial HTML (2 andares, como no modelo) */
.cof-rodape{margin-top:var(--sp-6);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);
box-shadow:var(--shadow-sm);background:none;padding:0;display:block}
.cof-rodape span{display:block}
.cof-rodape b{display:block;background:var(--cof-blue-800);color:#fff;padding:var(--sp-3) var(--sp-5);
font-family:var(--font-display);font-weight:var(--fw-bold);text-transform:uppercase;
letter-spacing:var(--ls-label);font-size:var(--fs-sm);font-style:normal}
.cof-rodape span{background:var(--cof-ink);color:var(--n-300);padding:var(--sp-2) var(--sp-5);
font-family:var(--font-mono);font-size:11px}
.cof-rodape span b+br{display:none}