/* ═══════════════════════════════════════════════════════════════════════════
   prancheta.css — A FOLHA DE ESTILO COMUM DO PRANCHETA (v3.127.0, Fase 1)

   Veio do pacote do Claude Design (26/09/2026, "Redesign do Prancheta"):
   os tokens (cores, tipografia, espaço, raios, sombras, movimento) e as
   classes de componente `cpl-*`, juntados num arquivo só, nesta ordem:
   fonts · colors · typography · spacing · base · components.

   O que mudou em relação ao pacote:
   • FONTES: Ethnocentric e Conthrax apontam para os arquivos que a Central
     já serve desde sempre (/fonts/*.otf). A Arial Nova NÃO vai para o
     servidor: é fonte da Microsoft e a licença para publicar não está
     confirmada. As pilhas continuam dizendo "Arial Nova", Arial — quem tem
     a Arial Nova instalada no computador vê ela; quem não tem, vê Arial,
     que é a substituta autorizada pelo manual.
   • BASE: ficaram só as classes de apoio (.cpl-eyebrow, .cpl-kpi…) e o foco
     visível. As regras de elemento (body, h1, p, a) do pacote foram para a
     ponte, uma a uma, conferidas tela por tela — `p{margin:0}` sozinho
     apagava o espaço entre parágrafos de doze telas.

   Este arquivo NÃO desenha nada sozinho, a não ser o foco: ele dá os nomes.
   Quem veste as telas de hoje com eles é a /css/prancheta-ponte.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── fonts ───────────────────────────────────────────────────────────────── */
@font-face{font-family:"Ethnocentric";src:url("/fonts/ethnocentric.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Conthrax";src:url("/fonts/conthrax.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}

/* ── colors ──────────────────────────────────────────────────────────────── */
:root{
/* ── Marca (manual CPL-MIV-01) ── */
--esmeralda:#009E81;--teal:#048B9C;--petroleo:#106B78;--ardosia:#294851;
/* ── Neutros do manual ── */
--papel:#FFFFFF;--nevoa:#EFF4F4;--linha:#D5E0E0;--ink:#0E1A1D;
/* ── Rampas derivadas (redesign: tons intermediários para superfícies e estados) ── */
--petroleo-900:#0A4A53;--petroleo-700:#0D5B66;--petroleo-600:#106B78;--petroleo-100:#DCEBEC;--petroleo-50:#EAF3F3;
--esmeralda-700:#007A64;--esmeralda-100:#D3F0E9;--esmeralda-50:#E8F7F3;
--teal-100:#D6EEF1;
--nevoa-2:#E4EDED;--nevoa-3:#D9E5E5;
--ink-2:#1B2B2F;--ink-3:#243A40;
--suave:#5C7378;   /* texto suave (legenda) — 4,9:1 sobre papel */
--suave-2:#8AA0A6; /* desabilitado / placeholder */
/* ── Da Central v3.118 (index.html :root) ── */
--bg-central:#F4F7F8;--line-central:#DCE5E8;--line-forte:#C3D2D6;
--nav-fundo:#0E272E;--nav:#12333B;--nav-texto:#A9C6CC;--nav-grupo:#5E8189;
--login-bg:radial-gradient(120% 120% at 15% 0%,#17505C 0%,#0F3D48 45%,#0A2A33 100%);
--grad-marca:linear-gradient(90deg,#106B78,#009E81);/* @kind color */ /* só em botão/barra de progresso, como no login */
/* ── Legenda das parcelas (financeiro.html medChip) ── */
--leg-cancel:#B4120A;--leg-comnfse:#2E75B6;--leg-fazer:#FFC000;--leg-aguarda:#FF99CC;--leg-pago:#097A3B;--leg-semnfse:#7A4A2A;--leg-apagar:#7030A0;--leg-prio:#FF8D2F;
/* ── Estados (vêm do código: bandeiras de cobrança, alertas) ── */
--urgente:#B4432F;--urgente-50:#FBE7E3;
--atencao:#E0A800;--atencao-ink:#8A6100;--atencao-50:#FFF3D1;--alerta:#B0813A;
--ok:#009E81;--ok-50:#E8F7F3;
--neutro:#B8C7CB;
/* ── Colunas do Quadro (quadro.js) ── */
--col-pista-livre:#009E81;--col-revisao-senior:#B44FD0;--col-deep-work:#6C4FE0;--col-aguardando-documento:#6B7280;--col-aguardando-cliente:#C08A2E;--col-arquivadas:#93A6AC;
/* ── Etapas do Comercial (comercial.js) ── */
--etapa-entrada:#048B9C;--etapa-entendimento:#6C4FE0;--etapa-proposta:#B44FD0;--etapa-enviada:#C08A2E;--etapa-negociacao:#B4432F;--etapa-formalizacao:#009E81;

/* ── Aliases semânticos ── */
--bg-app:var(--nevoa);
--bg-wash:linear-gradient(180deg,#F4F8F8 0%,#E6EFEF 45%,#CFE0E0 100%);
--bg-wash-dark:linear-gradient(180deg,#123A41 0%,#0E1A1D 100%);
--surface-card:var(--papel);
--surface-sunken:var(--nevoa);
--surface-hover:var(--nevoa-2);
--surface-selected:var(--papel);
--surface-inverse:var(--ink);
--surface-brand:var(--petroleo);
--text-strong:var(--ink);
--text-body:var(--ardosia);
--text-muted:var(--suave);
--text-disabled:var(--suave-2);
--text-brand:var(--petroleo);
--text-on-brand:#FFFFFF;
--text-on-accent:var(--ink);
--text-on-dark-accent:var(--esmeralda);
--border-subtle:var(--linha);
--border-strong:#BCCDCE;
--border-focus:var(--teal);
--accent:var(--esmeralda);
--action-primary:var(--petroleo);
--action-primary-hover:var(--petroleo-700);
--action-primary-press:var(--petroleo-900);
--link:var(--petroleo);
--grid-line:rgba(16,107,120,.07);
}

/* ── typography ──────────────────────────────────────────────────────────── */
:root{
--font-display:"Ethnocentric","Arial Nova",Arial,sans-serif; /* eyebrows, rótulos, números de destaque — sempre caixa-alta */
--font-title:"Conthrax","Arial Nova",Arial,sans-serif;       /* h1–h4 */
--font-body:"Arial Nova",Arial,sans-serif;                   /* texto, tabelas, legendas */
--font-cond:"Arial Nova Cond","Arial Nova",Arial,sans-serif;  /* tabelas densas, códigos */
--font-safe:"Arial Nova",Arial,sans-serif;                   /* servidor sem licença: toda a hierarquia */

--track-display:.14em;/* @kind font */--track-display-wide:.16em;/* @kind font */--track-title:-.01em;/* @kind font */--track-body:0;/* @kind font */
--lh-body:1.6;/* @kind font */--lh-loose:1.75;/* @kind font */--lh-title:1.2;/* @kind font */--lh-tight:1.05;/* @kind font */

/* escala de tela (px) */
--fs-eyebrow:10px;--fs-caption:12px;--fs-small:13px;--fs-body:14px;--fs-body-lg:16px;
--fs-h4:14px;--fs-h3:17px;--fs-h2:22px;--fs-h1:30px;--fs-hero:44px;
--fs-kpi:28px;--fs-kpi-lg:40px;
/* escala de impressão (pt) — manual */
--pt-eyebrow:7pt;/* @kind font */--pt-section:15pt;/* @kind font */--pt-section-lg:23pt;/* @kind font */--pt-subtitle:10pt;/* @kind font */--pt-body:9pt;/* @kind font */--pt-caption:7pt;/* @kind font */--pt-letter:10pt;/* @kind font */
}

/* ── spacing, raios, sombras, movimento ──────────────────────────────────── */
:root{
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;
--radius-xs:6px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:22px;--radius-pill:999px;
--shadow-0:0 0 0 1px var(--linha);
--shadow-1:0 1px 2px rgba(14,26,29,.05),0 0 0 1px rgba(14,26,29,.04);
--shadow-2:0 4px 14px -4px rgba(14,26,29,.10),0 1px 2px rgba(14,26,29,.05);
--shadow-3:0 18px 40px -12px rgba(14,26,29,.22),0 2px 6px rgba(14,26,29,.06);
--shadow-focus:0 0 0 3px rgba(4,139,156,.28);
--ease-out:cubic-bezier(.22,.61,.36,1);/* @kind other */--ease-inout:cubic-bezier(.65,0,.35,1);/* @kind other */
--dur-fast:120ms;/* @kind other */--dur-base:200ms;/* @kind other */--dur-slow:320ms;/* @kind other */
--sidebar-w:244px;--chanfro:18px;/* @kind other */
--clip-chanfro:polygon(var(--chanfro) 0,100% 0,100% calc(100% - var(--chanfro)),calc(100% - var(--chanfro)) 100%,0 100%,0 var(--chanfro));/* @kind other */
--topbar-h:64px;--content-max:1280px;
}

/* ── base: só as classes de apoio e o foco ───────────────────────────────── */
.cpl-eyebrow{font-family:var(--font-display);font-size:var(--fs-eyebrow);letter-spacing:var(--track-display-wide);text-transform:uppercase;color:var(--teal)}
.cpl-kpi{font-family:var(--font-display);font-size:var(--fs-kpi);letter-spacing:.04em;color:var(--text-strong);line-height:1}
.cpl-grid-bg{background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:24px 24px}
:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* ── components (as classes cpl-*, para as fases seguintes) ──────────────── */
/* Classes dos componentes React — carregadas pelo styles.css para que hover/press/focus funcionem sem JS. */
.cpl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--radius-pill);font-family:var(--font-body);font-weight:700;cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast),transform var(--dur-fast),color var(--dur-fast)}
.cpl-btn:active{transform:scale(.98)}
.cpl-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.cpl-btn--sm{height:32px;padding:0 14px;font-size:13px}.cpl-btn--md{height:40px;padding:0 18px;font-size:14px}.cpl-btn--lg{height:48px;padding:0 24px;font-size:15px}
.cpl-btn--primary{background:var(--petroleo);color:#fff}.cpl-btn--primary:hover:not([disabled]){background:var(--petroleo-700)}.cpl-btn--primary:active{background:var(--petroleo-900)}
.cpl-btn--accent{background:var(--esmeralda);color:var(--ink)}.cpl-btn--accent:hover:not([disabled]){background:#12B393}
.cpl-btn--dark{background:var(--ink);color:#fff}.cpl-btn--dark:hover:not([disabled]){background:var(--ink-3)}
.cpl-btn--secondary{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--linha)}.cpl-btn--secondary:hover:not([disabled]){background:var(--nevoa);box-shadow:inset 0 0 0 1px var(--border-strong)}
.cpl-btn--ghost{background:transparent;color:var(--ardosia)}.cpl-btn--ghost:hover:not([disabled]){background:var(--nevoa-2);color:var(--ink)}
.cpl-btn--danger{background:var(--urgente);color:#fff}.cpl-btn--danger:hover:not([disabled]){background:#A51F15}
.cpl-iconbtn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ardosia);cursor:pointer;transition:background var(--dur-fast)}
.cpl-iconbtn:hover{background:var(--nevoa-2);color:var(--ink)}.cpl-iconbtn--outline{background:#fff;box-shadow:inset 0 0 0 1px var(--linha)}.cpl-iconbtn--outline:hover{background:var(--nevoa)}
.cpl-field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-body)}
.cpl-field__label{font-size:12px;font-weight:700;color:var(--ink)}
.cpl-field__hint{font-size:12px;color:var(--suave)}.cpl-field__hint--error{color:var(--urgente)}
.cpl-input{height:40px;border-radius:var(--radius-md);border:1px solid var(--linha);background:#fff;padding:0 12px;font:inherit;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.cpl-input:hover{border-color:var(--border-strong)}.cpl-input:focus-within{border-color:var(--teal);box-shadow:var(--shadow-focus)}
.cpl-input input,.cpl-input select{border:0;outline:0;background:transparent;font:inherit;color:inherit;flex:1;min-width:0;height:100%;appearance:none}
.cpl-input input::placeholder{color:var(--suave-2)}
.cpl-input--error{border-color:var(--urgente)}.cpl-input--disabled{background:var(--nevoa);color:var(--suave-2)}
.cpl-check{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);cursor:pointer;user-select:none}
.cpl-check__box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border-strong);background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:all var(--dur-fast)}
.cpl-check--on .cpl-check__box{background:var(--petroleo);border-color:var(--petroleo)}
.cpl-switch{width:36px;height:20px;border-radius:999px;background:var(--border-strong);position:relative;transition:background var(--dur-base) var(--ease-out);flex:none}
.cpl-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform var(--dur-base) var(--ease-out)}
.cpl-check--on .cpl-switch{background:var(--esmeralda)}.cpl-check--on .cpl-switch::after{transform:translateX(16px)}
.cpl-seg{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius-pill);background:#fff;box-shadow:inset 0 0 0 1px var(--linha)}
.cpl-seg button{border:0;background:transparent;height:28px;padding:0 12px;border-radius:999px;font:inherit;font-size:12px;font-weight:700;color:var(--ardosia);cursor:pointer;transition:all var(--dur-fast)}
.cpl-seg button:hover{background:var(--nevoa)}.cpl-seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.cpl-tabs{display:flex;gap:24px;border-bottom:1px solid var(--linha)}
.cpl-tabs button{border:0;background:none;padding:10px 0;font:inherit;font-size:14px;color:var(--suave);cursor:pointer;position:relative}
.cpl-tabs button:hover{color:var(--ink)}.cpl-tabs button[aria-selected="true"]{color:var(--ink);font-weight:700}
.cpl-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--esmeralda);border-radius:2px}
.cpl-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--radius-sm);background:var(--nevoa);color:var(--ardosia);font-size:12px;border:1px solid transparent;cursor:default;transition:all var(--dur-fast)}
.cpl-chip--button{cursor:pointer}.cpl-chip--button:hover{border-color:var(--linha);background:#fff}
.cpl-chip--selected{background:var(--petroleo-100);color:var(--petroleo-900);border-color:rgba(16,107,120,.25)}
.cpl-nav{display:flex;flex-direction:column;gap:2px}
.cpl-nav__item{display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;border-radius:10px;color:var(--ardosia);font-size:14px;cursor:pointer;border:0;background:none;font-family:inherit;text-align:left;width:100%;transition:background var(--dur-fast)}
.cpl-nav__item:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.cpl-nav__item[aria-current="page"]{background:#fff;color:var(--ink);font-weight:700;box-shadow:var(--shadow-1)}
.cpl-nav__group{font-family:var(--font-display);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--suave);padding:16px 12px 6px}
.cpl-row:hover{background:var(--nevoa)}
@keyframes cpl-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes cpl-fade{from{opacity:0}to{opacity:1}}
.cpl-chanfro{clip-path:var(--clip-chanfro)}
.cpl-nav--dark .cpl-nav__item{color:var(--nav-texto)}
.cpl-nav--dark .cpl-nav__item:hover{background:rgba(255,255,255,.06);color:#fff}
.cpl-nav--dark .cpl-nav__item[aria-current="page"]{background:rgba(255,255,255,.09);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.cpl-nav--dark .cpl-nav__item[aria-current="page"] .cpl-nav__ico{color:var(--esmeralda)}
.cpl-nav--dark .cpl-nav__group{color:var(--nav-grupo)}
.cpl-nav__group{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;cursor:pointer;text-align:left}
.cpl-nav__ico{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;flex:none;background:var(--nevoa-2);color:var(--ardosia);transition:background var(--dur-fast),color var(--dur-fast)}
.cpl-nav--dark .cpl-nav__ico{background:rgba(255,255,255,.05);color:var(--nav-texto)}
.cpl-nav--dark .cpl-nav__item:hover .cpl-nav__ico{background:rgba(255,255,255,.09);color:#fff}
.cpl-nav__item[aria-current="page"] .cpl-nav__ico,.cpl-nav--dark .cpl-nav__item[aria-current="page"] .cpl-nav__ico{background:var(--esmeralda);color:var(--ink)}
.cpl-nav__item{height:38px;padding:0 8px}
.cpl-nav__item--rail{width:48px;height:44px;padding:0;justify-content:center;margin:1px auto}
.cpl-nav__item--rail .cpl-nav__ico{width:40px;height:40px;border-radius:12px;background:transparent}
.cpl-nav--dark .cpl-nav__item--rail:hover,.cpl-nav--dark .cpl-nav__item--rail[aria-current="page"]{background:transparent;box-shadow:none}
.cpl-nav--dark .cpl-nav__item--rail:hover .cpl-nav__ico{background:rgba(255,255,255,.08)}
.cpl-nav__dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 2px var(--nav-fundo)}
.cpl-nav__count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.cpl-nav__toggle{width:32px;height:32px;border-radius:9px;border:0;background:transparent;color:var(--suave);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur-fast),color var(--dur-fast)}
.cpl-nav__toggle:hover{background:var(--nevoa-2);color:var(--ink)}
.cpl-nav--dark .cpl-nav__toggle{color:var(--nav-grupo)}.cpl-nav--dark .cpl-nav__toggle:hover{background:rgba(255,255,255,.08);color:#fff}