/* ══════════════════════════════════════════════════════════════════════════
   GESTÃO DE CONTRATOS — a folha do painel
   ══════════════════════════════════════════════════════════════════════════
   Arquivo próprio, como `estoque.css`: o painel é grande e o `main.css` já
   tem 588 KB. A linguagem visual é a mesma do resto do MyDesk — fundo
   escuro, cantos de 12 a 16px, indigo como acento, selo de status com a cor
   vinda do dado por `--st`. Nada aqui inventa identidade nova.

   AS QUATRO FAIXAS (CHECKLIST 4.1): nenhuma tela é a padrão. As medidas
   abaixo foram escolhidas para 390, 768, 1180 e 1900px, e o painel NÃO tem
   `max-width` — teto de largura serve a texto corrido, não a grade de
   indicadores e tabela, que só melhoram com espaço.
   ══════════════════════════════════════════════════════════════════════════ */

/* A tela só existe no modelo dela, como `#est-view` e `#cli-view`. */
#ctr-view{display:none;}
/* A faixa sangra até a borda, então o padding lateral do painel vive no
   CORPO e não na tela — como em `#est-view`. */
#crm-view.ctr-modelo #ctr-view{display:block;padding:0 0 40px;}
.ctr-corpo{padding:0 26px;}
/* O painel antigo sai de cena — a mesma decisão que Clientes e Estoque já
   tomaram, pelo mesmo motivo: esta tela não cabe na moldura do financeiro.

   SÃO QUATRO BLOCOS, e não um. O painel financeiro é montado em pedaços
   irmãos: `#crm-dashboard` (herói e cartões), `#crm-charts-row` (Faturamento
   e Recebimentos) e `#crm-board` (a barra e a tabela de clientes). Esconder
   só o primeiro deixa os outros dois de pé, e o painel novo aparece EMBAIXO
   deles — foi assim que a Gestão de Contratos foi ao ar: gráfico de
   faturamento e tabela de seis clientes por cima, e "Gestão de Contratos" a
   uma rolagem de distância, parecendo apêndice do financeiro em vez de
   painel próprio.

   `est-modelo` já listava os quatro. A lista aqui nasceu com três, e a que
   faltava é justamente a que ocupa mais tela. */
#crm-view.ctr-modelo #crm-dashboard,
#crm-view.ctr-modelo #crm-charts-row,
#crm-view.ctr-modelo #crm-board,
#crm-view.ctr-modelo #cli-view,
#crm-view.ctr-modelo #est-view{display:none !important;}

/* ── A FAIXA ─────────────────────────────────────────────────────────────
   Os outros painéis abrem com uma faixa de largura total e o título em Syne
   branco sobre ela. Sem isso, Contratos abria com um título solto no escuro e
   não se reconhecia como parte do MyDesk.

   INDIGO, e não âmbar. A primeira versão foi âmbar pela ideia de "cada painel
   tem a sua cor" — e o resultado na tela foi um marrom/mostarda que não se
   parecia com nada do produto. A semelhança entre os painéis vale mais que a
   distinção entre eles: o indigo é o acento do MyDesk inteiro, é o que o
   herói do financeiro usa, e é por ele que a faixa passa a ser reconhecida
   como do mesmo sistema.

   Quem diz QUAL painel é o selo com o ícone e o título — não a cor de
   fundo. */
.ctr-faixa{position:relative;padding:0 0 20px;margin:0 0 18px;
  background:
    radial-gradient(900px 380px at 14% 0%,rgba(99,102,241,.16),transparent 58%),
    radial-gradient(760px 320px at 82% -10%,rgba(139,92,246,.10),transparent 60%),
    linear-gradient(180deg,#131233 0%,#0d0d20 62%,#0a0a0c 100%);
  border-bottom:1px solid rgba(255,255,255,.045);}

/* ── Cabeçalho ───────────────────────────────────────────────────────── */
.ctr-cab{display:flex;align-items:center;gap:18px;padding:24px 26px 4px;flex-wrap:wrap;}
.ctr-cab-txt{flex:1;min-width:260px;}
.ctr-cab h1{margin:0 0 5px;font-family:'Syne',sans-serif;font-size:1.72rem;
  font-weight:800;color:#fff;letter-spacing:-.6px;}
.ctr-cab p{margin:0;font-size:.8rem;color:rgba(240,240,240,.52);line-height:1.55;}
.ctr-cab-vazio{color:rgba(240,240,240,.3);}
.ctr-cab-alerta{color:#fbbf24;font-weight:600;}
.ctr-cab-acoes{display:flex;gap:9px;flex-wrap:wrap;}

.ctr-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border:1px solid var(--clr-border);border-radius:10px;
  background:rgba(255,255,255,.03);color:rgba(240,240,240,.75);cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.8rem;font-weight:500;
  white-space:nowrap;text-decoration:none;
  transition:background .16s,border-color .16s,color .16s,transform .16s;}
.ctr-btn:hover{background:rgba(99,102,241,.14);border-color:var(--clr-indigo-40);
  color:#c7d2fe;transform:translateY(-1px);}
.ctr-btn:active{transform:translateY(0) scale(.98);}
.ctr-btn svg{width:15px;height:15px;flex-shrink:0;}
.ctr-btn-forte{background:linear-gradient(135deg,var(--clr-indigo),var(--clr-indigo-dark));
  border-color:transparent;color:#fff;font-weight:600;
  box-shadow:0 4px 16px var(--clr-indigo-30);}
.ctr-btn-forte:hover{color:#fff;opacity:.92;box-shadow:0 6px 22px rgba(99,102,241,.45);}
/* A porta de volta para os outros painéis, no mesmo tom do `est-btn-modelo`:
   indigo apagado, para ler como navegação e não competir com "Novo contrato",
   que é a ação da tela. */
.ctr-btn-modelo{gap:6px;border-color:rgba(99,102,241,.28);
  background:rgba(99,102,241,.1);color:#a5b4fc;}
.ctr-btn-modelo:hover{background:rgba(99,102,241,.18);color:#c7d2fe;}
/* O botão ocupado: perde o hover e o cursor, e pulsa de leve para dizer que
   está trabalhando. `disabled` sozinho parece botão desligado — e desligado
   sem motivo é tão confuso quanto botão que não responde. */
.ctr-btn.ctr-ocupado{opacity:.72;cursor:progress;pointer-events:none;
  animation:ctr-pulsa 1.1s ease-in-out infinite;}
@keyframes ctr-pulsa{0%,100%{opacity:.72;}50%{opacity:.95;}}
.ctr-link{background:none;border-color:transparent;color:var(--clr-indigo-light);
  padding:7px 10px;}
.ctr-link:hover{background:rgba(99,102,241,.12);}
.ctr-perigo:hover{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.35);
  color:#fca5a5;}
.ctr-ok:hover{background:rgba(16,185,129,.16);border-color:rgba(16,185,129,.4);
  color:#6ee7b7;}
.ctr-btn-perigo{background:linear-gradient(135deg,#b91c1c,#7f1d1d) !important;}

/* ── Abas de topo ────────────────────────────────────────────────────── */
/* Dentro da faixa, com margem lateral própria — como a `.est-nav`. */
.ctr-abas-topo{display:flex;gap:4px;padding:4px;border-radius:12px;margin:0 26px;
  background:rgba(0,0,0,.28);border:1px solid var(--clr-border-faint);
  width:fit-content;max-width:calc(100% - 52px);overflow-x:auto;}
.ctr-aba-topo{padding:9px 18px;border:none;border-radius:9px;cursor:pointer;
  background:none;font-family:'Inter',sans-serif;font-size:.8rem;font-weight:500;
  color:rgba(240,240,240,.45);white-space:nowrap;transition:background .16s,color .16s;}
.ctr-aba-topo:hover{color:rgba(240,240,240,.8);background:rgba(255,255,255,.04);}
.ctr-aba-topo.on{background:rgba(99,102,241,.2);color:#fff;font-weight:600;}

/* ── Indicadores ─────────────────────────────────────────────────────────
   São BOTÕES, e não caixas: cada um filtra a lista. Um número que não leva
   a lugar nenhum obriga a pessoa a refazer o filtro à mão. */
.ctr-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;margin-bottom:24px;}
.ctr-kpi{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:16px 18px;border-radius:14px;cursor:pointer;text-align:left;
  background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid var(--clr-border-faint);
  transition:border-color .18s,background .18s,transform .18s,box-shadow .18s;}
.ctr-kpi:hover{border-color:rgba(255,255,255,.16);transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.4);}
.ctr-kpi-rot{font-size:.62rem;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:rgba(240,240,240,.36);}
.ctr-kpi-num{font-family:'Inter',sans-serif;font-size:1.9rem;font-weight:800;
  line-height:1.05;color:#fff;letter-spacing:-1.2px;font-variant-numeric:tabular-nums;}
.ctr-kpi-sub{font-size:.7rem;color:rgba(240,240,240,.38);}
.ctr-kpi.k-verde .ctr-kpi-num{color:#34d399;}
.ctr-kpi.k-ambar .ctr-kpi-num{color:#fbbf24;}
.ctr-kpi.k-vermelho .ctr-kpi-num{color:#f87171;}
.ctr-kpi.k-azul .ctr-kpi-num{color:#38bdf8;}
.ctr-kpi.k-indigo .ctr-kpi-num{color:#a5b4fc;}
.ctr-kpi.k-teal .ctr-kpi-num{color:#2dd4bf;}
/* Em elaboração: o roxo do status "Em análise", para o cartão e o selo da
   lista dizerem a mesma coisa com a mesma cor. */
.ctr-kpi.k-roxo .ctr-kpi-num{color:#a78bfa;}

/* ══════════════════════════════════════════════════════════════════════════
   A FAIXA HERÓI — um número grande e um anel
   ══════════════════════════════════════════════════════════════════════════
   Oito cartões iguais não dizem qual olhar primeiro. Quanto foi contratado e
   quanto disso entrou são as duas perguntas de quem abre este painel, e agora
   têm tamanho de resposta.
   ══════════════════════════════════════════════════════════════════════════ */
.ctr-heroi{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding:20px 24px;margin-bottom:16px;border-radius:16px;
  background:
    radial-gradient(620px 220px at 8% 0%,rgba(99,102,241,.14),transparent 62%),
    linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid var(--clr-border-faint);}
.ctr-heroi-num{flex:1;min-width:240px;}
.ctr-heroi-rot{display:block;font-size:.63rem;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;color:rgba(240,240,240,.42);margin-bottom:6px;}
/* Inter, e não Syne: os algarismos do Syne são decorativos e ficam ilegíveis
   em corpo grande — foi o que aconteceu com o "72%" das notas fiscais. */
.ctr-heroi-val{display:block;font-family:'Inter',sans-serif;font-size:2.3rem;
  font-weight:800;color:#fff;letter-spacing:-1.4px;line-height:1.05;
  word-break:break-word;}
.ctr-heroi-sub{display:block;margin-top:6px;font-size:.78rem;
  color:rgba(240,240,240,.45);}

.ctr-anel{display:flex;align-items:center;gap:14px;
  animation:ctr-entra .5s cubic-bezier(.2,.7,.3,1) both;}
.ctr-anel svg{flex-shrink:0;}
.ctr-anel-n{fill:#fff;font-family:'Inter',sans-serif;font-size:19px;font-weight:800;}
.ctr-anel-txt b{display:block;font-size:.8rem;color:rgba(240,240,240,.82);font-weight:600;}
.ctr-anel-txt span{display:block;margin-top:3px;font-size:.72rem;
  color:rgba(240,240,240,.42);}
@keyframes ctr-entra{from{opacity:0;transform:scale(.9) rotate(-8deg);}
  to{opacity:1;transform:none;}}

/* ── Gráfico de barras: receita dos próximos 12 meses ──────────────────── */
.ctr-graf-topo{display:flex;align-items:baseline;gap:8px;margin-bottom:14px;}
.ctr-graf-topo b{font-family:'Inter',sans-serif;font-size:1.35rem;font-weight:800;
  color:#fff;letter-spacing:-.6px;}
.ctr-graf-topo span{font-size:.72rem;color:rgba(240,240,240,.4);}
.ctr-gbarras{display:flex;align-items:flex-end;gap:5px;height:150px;}
.ctr-gbar{flex:1;min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;height:100%;gap:5px;cursor:default;}
.ctr-gbar i{display:block;width:100%;border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,#818cf8,#4f46e5);
  transition:filter .16s,transform .16s;transform-origin:bottom;
  animation:ctr-sobe .55s cubic-bezier(.2,.8,.3,1) both;}
.ctr-gbar.vazia i{background:rgba(255,255,255,.05);}
.ctr-gbar:hover i{filter:brightness(1.18);transform:scaleX(1.08);}
.ctr-gbar-v{font-size:.6rem;color:rgba(240,240,240,.5);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.ctr-gbar-m{font-size:.63rem;color:rgba(240,240,240,.35);text-transform:capitalize;}
@keyframes ctr-sobe{from{transform:scaleY(0);}to{transform:scaleY(1);}}

/* ── Rosca por tipo ────────────────────────────────────────────────────── */
.ctr-rosca{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.ctr-rosca svg{flex-shrink:0;}
.ctr-rosca svg circle{transition:stroke-width .16s;}
.ctr-rosca-leg{flex:1;min-width:170px;list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:7px;}
.ctr-rosca-leg li{display:flex;align-items:center;gap:9px;font-size:.735rem;
  color:rgba(240,240,240,.62);}
.ctr-rosca-leg i{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
.ctr-rosca-leg span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.ctr-rosca-leg em{font-style:normal;color:rgba(240,240,240,.4);font-size:.7rem;}
.ctr-rosca-leg b{color:rgba(240,240,240,.85);font-weight:600;white-space:nowrap;}

/* ── O funil: do rascunho ao ativo ─────────────────────────────────────── */
.ctr-funil{display:flex;flex-direction:column;gap:8px;}
.ctr-funil-et{display:grid;grid-template-columns:150px 1fr 88px;align-items:center;
  gap:14px;padding:8px 10px;border:1px solid transparent;border-radius:10px;
  background:none;cursor:pointer;text-align:left;font-family:'Inter',sans-serif;
  transition:background .16s,border-color .16s;}
.ctr-funil-et:hover{background:rgba(255,255,255,.035);
  border-color:var(--clr-border-faint);}
.ctr-funil-rot{font-size:.76rem;color:rgba(240,240,240,.6);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.ctr-funil-tr{display:flex;align-items:center;gap:10px;min-width:0;}
/* `min-width` só para barra que existe: com o mínimo aplicado a todas, uma
   etapa vazia ganhava um traço colorido ao lado do zero. */
.ctr-funil-tr i{display:block;height:22px;border-radius:6px;min-width:0;
  background:linear-gradient(90deg,var(--st),color-mix(in srgb,var(--st) 55%,transparent));
  animation:ctr-cresce .5s cubic-bezier(.2,.8,.3,1) both;transform-origin:left;}
.ctr-funil-tr b{font-family:'Inter',sans-serif;font-size:.85rem;font-weight:700;
  color:#fff;}
.ctr-funil-val{font-size:.72rem;color:rgba(240,240,240,.42);text-align:right;
  white-space:nowrap;}
@keyframes ctr-cresce{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* ── Blocos e seções ─────────────────────────────────────────────────── */
.ctr-duas{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;}
/* O gráfico de barras precisa de mais largura que a rosca: 3fr/2fr em vez de
   metade e metade, senão as doze colunas viram tiras de dois pixels. */
@media (min-width:1180px){
  .ctr-duas-graf{grid-template-columns:1.55fr 1fr;}
}
.ctr-bloco{padding:18px 20px;border-radius:14px;
  background:rgba(255,255,255,.02);border:1px solid var(--clr-border-faint);}
.ctr-sec{display:flex;align-items:center;gap:9px;margin:0 0 12px;
  font-size:.63rem;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:rgba(240,240,240,.42);}
/* O subtítulo explica o que o gráfico está somando. Um gráfico sem isso
   obriga a adivinhar se "receita" é a recebida ou a contratada. */
.ctr-sec-sub{text-transform:none;letter-spacing:0;font-weight:400;font-size:.68rem;
  color:rgba(240,240,240,.3);}
.ctr-sec::after{content:'';flex:1;height:1px;order:3;
  background:linear-gradient(90deg,var(--clr-border),transparent);}
.ctr-sec i{font-style:normal;padding:2px 8px;border-radius:20px;letter-spacing:0;
  background:rgba(255,255,255,.07);color:rgba(240,240,240,.55);font-size:.66rem;order:2;}
.ctr-sec-linha{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px;}
.ctr-sec-linha .ctr-sec{margin:0;flex:1;min-width:160px;}
.ctr-ajuda{font-size:.72rem;line-height:1.6;color:rgba(240,240,240,.34);
  margin:0 0 16px;max-width:640px;}
.ctr-ajuda a{color:var(--clr-indigo-light);}

/* ── Selo de status ──────────────────────────────────────────────────── */
.ctr-selo{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border-radius:20px;font-size:.62rem;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;white-space:nowrap;justify-self:start;color:var(--st);
  background:color-mix(in srgb, var(--st) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--st) 30%, transparent);}
.ctr-selo i{width:5px;height:5px;border-radius:50%;background:var(--st);
  flex-shrink:0;box-shadow:0 0 6px var(--st);}

/* ── Barra de busca e filtros ────────────────────────────────────────── */
.ctr-barra{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
.ctr-busca{display:flex;align-items:center;gap:9px;flex:1;min-width:240px;
  padding:0 13px;border-radius:11px;background:rgba(255,255,255,.03);
  border:1px solid var(--clr-border);transition:border-color .18s;}
.ctr-busca:focus-within{border-color:var(--clr-indigo-40);
  background:rgba(99,102,241,.05);}
.ctr-busca svg{width:15px;height:15px;color:rgba(240,240,240,.3);flex-shrink:0;}
.ctr-busca input{flex:1;min-width:0;background:none;border:none;outline:none;
  padding:11px 0;font-family:'Inter',sans-serif;font-size:.82rem;color:var(--clr-text);}
.ctr-busca input::placeholder{color:rgba(240,240,240,.24);}
.ctr-sel{padding:10px 13px;border-radius:10px;background:rgba(255,255,255,.03);
  border:1px solid var(--clr-border);color:rgba(240,240,240,.72);
  font-family:'Inter',sans-serif;font-size:.78rem;cursor:pointer;
  /* `appearance:none` porque `color-scheme` sozinho não garante o fundo do
     controle — armadilha registrada na seção 10 do CHECKLIST. */
  appearance:none;-webkit-appearance:none;color-scheme:dark;
  background-image:linear-gradient(45deg,transparent 50%,rgba(240,240,240,.4) 50%),
    linear-gradient(135deg,rgba(240,240,240,.4) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat;padding-right:32px;}
.ctr-sel:focus{outline:2px solid var(--clr-indigo-40);outline-offset:1px;}
.ctr-ordens{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.ctr-ord{padding:6px 12px;border-radius:20px;border:1px solid var(--clr-border-faint);
  background:none;color:rgba(240,240,240,.4);cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.72rem;transition:all .15s;}
.ctr-ord:hover{color:rgba(240,240,240,.75);border-color:var(--clr-border);}
.ctr-ord.on{background:rgba(99,102,241,.16);border-color:var(--clr-indigo-40);
  color:#c7d2fe;font-weight:600;}
.ctr-conta{font-size:.72rem;color:rgba(240,240,240,.32);margin-bottom:10px;}

/* ── A lista: TABELA, como Clientes, Financeiro e Estoque ─────────────────
   A primeira versão era uma pilha de cartões de largura total. Num monitor de
   1900px o título ficava colado à esquerda, o valor colado à direita e um vão
   morto no meio — e nada se alinhava de uma linha para a outra, que é
   justamente o que faz uma lista ser lida em coluna.

   O `overflow-x` fica no INVÓLUCRO, e não na página: tabela larga rola dentro
   de si mesma, e o corpo do painel nunca rola na horizontal. */
.ctr-tab-wrap{overflow-x:auto;border-radius:12px;
  border:1px solid var(--clr-border-faint);background:rgba(255,255,255,.015);}
.ctr-tab{width:100%;border-collapse:collapse;min-width:760px;}
.ctr-tab thead th{position:sticky;top:0;z-index:1;text-align:left;
  padding:11px 16px;background:rgba(20,20,26,.96);
  font-size:.6rem;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:rgba(240,240,240,.4);border-bottom:1px solid var(--clr-border-faint);
  white-space:nowrap;}
.ctr-tab thead th.num{text-align:right;}
.ctr-tab tbody tr{cursor:pointer;transition:background .15s;}
.ctr-tab tbody tr+tr{border-top:1px solid rgba(255,255,255,.045);}
.ctr-tab tbody tr:hover{background:rgba(99,102,241,.07);}
.ctr-tab tbody tr:focus-visible{outline:2px solid var(--clr-indigo-40);
  outline-offset:-2px;}
.ctr-tab td{padding:13px 16px;font-size:.8rem;color:rgba(240,240,240,.62);
  vertical-align:middle;}
.ctr-tab td.num{text-align:right;white-space:nowrap;}
.ctr-td-nome b{display:block;font-size:.85rem;font-weight:600;
  color:rgba(255,255,255,.93);}
.ctr-td-parte,.ctr-td-tipo{max-width:240px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.ctr-td-fim{white-space:nowrap;}
.ctr-td-fim b,.ctr-tab td.num b{font-size:.83rem;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.2px;}
.ctr-td-sub{display:block;margin-top:2px;font-size:.69rem;
  color:rgba(240,240,240,.34);}
.ctr-td-sub.atrasado{color:#f87171;}
.ctr-num{display:inline-block;margin-top:2px;padding:1px 7px;border-radius:20px;
  background:rgba(255,255,255,.06);color:rgba(240,240,240,.45);
  font-size:.64rem;font-variant-numeric:tabular-nums;}
.ctr-sem{color:rgba(240,240,240,.25);font-size:.78rem;}

/* ── Lista compacta (visão geral e vencimentos) ──────────────────────── */
.ctr-mini-lista{display:flex;flex-direction:column;gap:7px;}
.ctr-mini{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;
  border-radius:10px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.025);border:1px solid var(--clr-border-faint);
  transition:background .15s,border-color .15s;}
.ctr-mini:hover{background:rgba(255,255,255,.05);border-color:var(--clr-border);}
.ctr-mini-nome{flex:1;min-width:0;font-size:.79rem;color:rgba(255,255,255,.88);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ctr-mini-dias{font-size:.71rem;color:rgba(240,240,240,.4);white-space:nowrap;}

.ctr-faixas{display:flex;flex-direction:column;gap:22px;}
.ctr-faixa.f-vencidos .ctr-sec{color:#f87171;}
.ctr-faixa.f-hoje .ctr-sec{color:#fbbf24;}

/* ── Feed ────────────────────────────────────────────────────────────── */
.ctr-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.ctr-feed li{display:flex;align-items:flex-start;gap:9px;font-size:.76rem;
  color:rgba(240,240,240,.62);line-height:1.5;}
.ctr-feed-pt{width:6px;height:6px;border-radius:50%;background:var(--clr-indigo);
  flex-shrink:0;margin-top:6px;}
.ctr-feed time{margin-left:auto;font-size:.68rem;color:rgba(240,240,240,.28);
  white-space:nowrap;}

/* ── Detalhe ─────────────────────────────────────────────────────────── */
.ctr-voltar{margin:4px 0 14px;padding-left:0;}
.ctr-det-cab{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--clr-border-faint);}
.ctr-det-cab > div:first-child{flex:1;min-width:260px;}
.ctr-det-cab h2{margin:9px 0 4px;font-family:'Syne',sans-serif;font-size:1.35rem;
  font-weight:800;color:var(--clr-text);letter-spacing:-.5px;line-height:1.2;}
.ctr-det-cab p{margin:0;font-size:.76rem;color:rgba(240,240,240,.38);}
.ctr-det-acoes{display:flex;gap:9px;align-items:center;flex-wrap:wrap;}

.ctr-abas{display:flex;gap:3px;overflow-x:auto;margin-bottom:20px;
  border-bottom:1px solid var(--clr-border-faint);}
.ctr-aba{padding:10px 15px;border:none;background:none;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.78rem;font-weight:500;white-space:nowrap;
  color:rgba(240,240,240,.42);border-bottom:2px solid transparent;
  display:inline-flex;align-items:center;gap:7px;transition:color .16s,border-color .16s;}
.ctr-aba:hover{color:rgba(240,240,240,.8);}
.ctr-aba.on{color:#fff;border-bottom-color:var(--clr-indigo);font-weight:600;}
.ctr-aba i{font-style:normal;font-size:.64rem;padding:1px 6px;border-radius:20px;
  background:rgba(255,255,255,.08);color:inherit;opacity:.8;}

.ctr-proximo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:14px 17px;border-radius:12px;margin-bottom:18px;
  background:linear-gradient(100deg,rgba(99,102,241,.13),rgba(99,102,241,.02));
  border:1px solid rgba(99,102,241,.24);}
.ctr-proximo span{font-size:.62rem;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:rgba(199,210,254,.7);}
.ctr-proximo b{font-size:1.05rem;color:#fff;font-variant-numeric:tabular-nums;}
.ctr-proximo i{font-style:normal;font-size:.74rem;color:rgba(240,240,240,.42);
  margin-left:auto;}

.ctr-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:2px;margin-bottom:20px;border-radius:12px;overflow:hidden;
  border:1px solid var(--clr-border-faint);background:var(--clr-border-faint);}
.ctr-info{display:flex;flex-direction:column;gap:4px;padding:13px 16px;
  background:#0e0e12;}
.ctr-info span{font-size:.62rem;font-weight:600;letter-spacing:.9px;
  text-transform:uppercase;color:rgba(240,240,240,.32);}
.ctr-info b{font-size:.84rem;color:rgba(255,255,255,.9);font-weight:600;}
.ctr-info b.verde{color:#34d399;}
.ctr-info b.ambar{color:#fbbf24;}

.ctr-texto{margin-bottom:18px;}
.ctr-texto h3{margin:0 0 6px;font-size:.62rem;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:rgba(240,240,240,.35);}
.ctr-texto p{margin:0;font-size:.83rem;line-height:1.65;color:rgba(240,240,240,.7);
  white-space:pre-wrap;}
.ctr-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
.ctr-tags span{padding:3px 10px;border-radius:20px;font-size:.7rem;
  background:rgba(99,102,241,.14);color:#c7d2fe;}
.ctr-acoes-fim{display:flex;gap:9px;flex-wrap:wrap;padding-top:18px;
  border-top:1px solid var(--clr-border-faint);}

/* ── Aviso de pendência ──────────────────────────────────────────────── */
.ctr-aviso{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;
  border-radius:11px;margin-bottom:18px;font-size:.78rem;line-height:1.6;
  color:rgba(240,240,240,.6);
  border:1px solid rgba(245,158,11,.18);border-left:3px solid #f59e0b;
  background:linear-gradient(100deg,rgba(245,158,11,.09),rgba(245,158,11,.015));}
.ctr-aviso svg{width:17px;height:17px;color:#fbbf24;flex-shrink:0;margin-top:2px;}
.ctr-aviso b{display:block;color:#fcd34d;font-weight:600;margin-bottom:2px;}

/* ── Financeiro ──────────────────────────────────────────────────────── */
.ctr-progresso{padding:18px 20px;border-radius:14px;margin-bottom:22px;
  background:rgba(255,255,255,.022);border:1px solid var(--clr-border-faint);}
.ctr-prog-topo{display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:10px;}
.ctr-prog-topo span{font-size:.62rem;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:rgba(240,240,240,.36);}
.ctr-prog-topo b{font-family:'Inter',sans-serif;font-size:1.5rem;font-weight:800;
  color:#34d399;font-variant-numeric:tabular-nums;letter-spacing:-1px;}
.ctr-prog-barra{height:8px;border-radius:5px;background:rgba(0,0,0,.35);
  overflow:hidden;margin-bottom:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;}
.ctr-prog-barra i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,#10b981,#34d399);
  box-shadow:0 0 12px rgba(16,185,129,.4);transition:width .5s cubic-bezier(.16,1,.3,1);}
.ctr-prog-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:2px;border-radius:10px;overflow:hidden;background:var(--clr-border-faint);}

.ctr-parcelas{display:flex;flex-direction:column;gap:5px;}
.ctr-parcela{display:grid;grid-template-columns:64px 1fr 120px 120px;gap:12px;
  align-items:center;padding:10px 14px;border-radius:9px;font-size:.77rem;
  background:rgba(255,255,255,.02);border:1px solid var(--clr-border-faint);}
.ctr-parcela.tem{border-color:rgba(16,185,129,.22);
  background:linear-gradient(90deg,rgba(16,185,129,.06),rgba(255,255,255,.02));}
.ctr-pc-n{font-variant-numeric:tabular-nums;color:rgba(240,240,240,.4);font-size:.72rem;}
.ctr-pc-data{color:rgba(255,255,255,.85);}
.ctr-pc-val{text-align:right;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;}
.ctr-pc-st{text-align:right;font-size:.71rem;color:rgba(240,240,240,.42);}

/* ── Fluxo de aprovação ──────────────────────────────────────────────── */
.ctr-fluxo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.ctr-etapa{position:relative;padding:14px 16px 14px 19px;border-radius:12px;
  background:rgba(255,255,255,.022);border:1px solid var(--clr-border-faint);
  overflow:hidden;}
.ctr-etapa::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--st);}
.ctr-etapa.agora{border-color:color-mix(in srgb, var(--st) 32%, transparent);
  background:linear-gradient(90deg,color-mix(in srgb, var(--st) 8%, transparent),
    rgba(255,255,255,.02));}
.ctr-etapa-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.ctr-etapa-cab b{font-size:.85rem;color:rgba(255,255,255,.92);}
.ctr-etapa-cab span{font-size:.73rem;color:rgba(240,240,240,.4);}
.ctr-etapa-cab em{margin-left:auto;font-style:normal;font-size:.68rem;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:var(--st);}
.ctr-etapa p{margin:7px 0 0;font-size:.77rem;color:rgba(240,240,240,.55);line-height:1.55;}
.ctr-etapa-acoes{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;}

/* ── Assinaturas ─────────────────────────────────────────────────────── */
.ctr-assinaturas{display:flex;flex-direction:column;gap:8px;}
.ctr-assina{display:grid;grid-template-columns:minmax(0,1fr) 110px 130px 150px;
  gap:12px;align-items:center;padding:12px 14px 12px 17px;border-radius:11px;
  position:relative;overflow:hidden;font-size:.79rem;
  background:rgba(255,255,255,.022);border:1px solid var(--clr-border-faint);}
.ctr-assina::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--st);}
.ctr-assina-quem b{display:block;color:rgba(255,255,255,.9);font-size:.83rem;}
.ctr-assina-quem span{font-size:.7rem;color:rgba(240,240,240,.4);margin-right:7px;}
.ctr-assina-quem em{font-style:normal;font-size:.7rem;color:rgba(240,240,240,.3);}
.ctr-assina-st{font-size:.71rem;font-weight:600;color:var(--st);}
.ctr-assina-data{font-size:.71rem;color:rgba(240,240,240,.32);}

/* ── Aditivos e histórico ────────────────────────────────────────────── */
.ctr-aditivos{display:flex;flex-direction:column;gap:10px;}
.ctr-aditivo{padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.022);border:1px solid var(--clr-border-faint);}
.ctr-adt-cab{display:flex;align-items:baseline;gap:12px;}
.ctr-adt-cab b{font-size:.85rem;color:rgba(255,255,255,.92);flex:1;}
.ctr-adt-cab time{font-size:.71rem;color:rgba(240,240,240,.35);
  font-variant-numeric:tabular-nums;}
.ctr-aditivo p{margin:7px 0 0;font-size:.78rem;line-height:1.6;
  color:rgba(240,240,240,.58);white-space:pre-wrap;}
.ctr-adt-mudou{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;
  font-size:.74rem;color:rgba(240,240,240,.45);}
.ctr-adt-mudou b{color:#fff;}
.ctr-adt-por{margin-left:auto;color:rgba(240,240,240,.3);}

.ctr-historico{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.ctr-historico li{display:flex;gap:13px;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.045);}
.ctr-historico li:last-child{border-bottom:none;}
.ctr-historico i{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:6px;
  background:rgba(99,102,241,.6);}
.ctr-historico div{flex:1;min-width:0;}
.ctr-historico b{display:block;font-size:.78rem;font-weight:500;
  color:rgba(240,240,240,.75);line-height:1.5;}
.ctr-historico time{font-size:.68rem;color:rgba(240,240,240,.28);}

.ctr-arquivos{display:flex;flex-direction:column;gap:6px;}
.ctr-arq{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:9px;
  font-size:.78rem;background:rgba(255,255,255,.02);
  border:1px solid var(--clr-border-faint);}
.ctr-arq span,.ctr-arq>a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:rgba(255,255,255,.85);}
/* O nome é o botão de baixar quando há conteúdo: é onde a mão vai. */
.ctr-arq>a{text-decoration:none;}
.ctr-arq>a:hover{color:#c7d2fe;text-decoration:underline;}
.ctr-arq .ctr-perigo{padding:4px 9px;font-size:.8rem;line-height:1;}
.ctr-arq em,.ctr-arq time{font-style:normal;font-size:.7rem;color:rgba(240,240,240,.32);}

/* ── Estados: carregando, vazio, sem resultado ──────────────────────────
   Nenhum deles é uma área em branco. "Ainda não sei" e "não há" são
   respostas diferentes, e a tela diz qual das duas é. */
.ctr-carregando{display:flex;flex-direction:column;gap:10px;padding:10px 0;}
.ctr-skel{height:72px;border-radius:12px;
  background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.06),
    rgba(255,255,255,.03));background-size:200% 100%;
  animation:ctrBrilho 1.3s ease-in-out infinite;}
@keyframes ctrBrilho{from{background-position:200% 0;}to{background-position:-200% 0;}}

.ctr-vazio{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:60px 24px;}
.ctr-vazio-ico{width:58px;height:58px;border-radius:16px;display:flex;
  align-items:center;justify-content:center;margin-bottom:18px;
  background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.24);}
.ctr-vazio-ico svg{width:26px;height:26px;color:#a5b4fc;}
.ctr-vazio h2{margin:0 0 9px;font-family:'Syne',sans-serif;font-size:1.15rem;
  font-weight:800;color:var(--clr-text);}
.ctr-vazio p{margin:0 0 22px;max-width:520px;font-size:.83rem;line-height:1.7;
  color:rgba(240,240,240,.42);}
.ctr-vazio-acoes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.ctr-vazio-min{padding:22px 4px;font-size:.79rem;color:rgba(240,240,240,.36);
  text-align:center;}
.ctr-sem-resultado{display:flex;flex-direction:column;align-items:center;gap:8px;}
.ctr-tudo-certo{padding:50px 20px;}

/* ── Formulário ──────────────────────────────────────────────────────── */
.ctr-form{width:min(620px,95vw);}
.ctr-form-min{width:min(460px,94vw);}
.ctr-grupo{display:flex;align-items:center;gap:9px;margin:22px 0 12px;
  font-size:.6rem;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--clr-indigo-light);}
.ctr-grupo::after{content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--clr-indigo-20),transparent);}
.ctr-grupo:first-of-type{margin-top:14px;}
.ctr-dupla{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ctr-dupla .m-inp{width:100%;margin-bottom:11px;}
.ctr-form textarea.m-inp{resize:vertical;min-height:64px;}
.ctr-check{display:flex;align-items:center;gap:10px;margin:4px 0 15px;cursor:pointer;
  font-size:.82rem;color:rgba(240,240,240,.72);}
.ctr-check input{width:17px;height:17px;flex-shrink:0;
  accent-color:var(--clr-indigo);cursor:pointer;}
.ctr-bloco-dobra{border:1px solid var(--clr-border);border-radius:12px;padding:0 15px;
  margin:8px 0 18px;background:rgba(255,255,255,.018);transition:border-color .18s;}
.ctr-bloco-dobra:hover{border-color:rgba(255,255,255,.13);}
.ctr-bloco-dobra[open]{padding-bottom:8px;background:rgba(255,255,255,.028);}
.ctr-bloco-dobra summary{cursor:pointer;padding:13px 0;font-size:.73rem;font-weight:600;
  color:rgba(240,240,240,.78);display:flex;align-items:center;gap:10px;
  list-style:none;user-select:none;}
.ctr-bloco-dobra summary::-webkit-details-marker{display:none;}
.ctr-bloco-dobra summary::before{content:'';width:6px;height:6px;flex-shrink:0;
  border-right:1.6px solid var(--clr-text-faint);
  border-bottom:1.6px solid var(--clr-text-faint);
  transform:rotate(-45deg);transition:transform .2s;margin-left:2px;}
.ctr-bloco-dobra[open] summary::before{transform:rotate(45deg);}
.ctr-bloco-dobra summary i{font-style:normal;font-size:.64rem;font-weight:500;
  color:var(--clr-text-faint);margin-left:auto;}

/* ══════════════════════════════════════════════════════════════════════════
   AS FAIXAS
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  #crm-view.ctr-modelo #ctr-view{padding:0 18px 36px;}
  .ctr-item{grid-template-columns:120px minmax(0,1fr) 130px;}
  .ctr-item-fim{grid-column:2/-1;flex-direction:row;gap:8px;text-align:left;
    align-items:baseline;}
  .ctr-assina{grid-template-columns:minmax(0,1fr) 110px 140px;}
  .ctr-assina-data{display:none;}
}
@media (max-width:768px){
  #crm-view.ctr-modelo #ctr-view{padding:0 14px 30px;}
  .ctr-cab{padding:18px 0 14px;}
  .ctr-cab h1{font-size:1.3rem;}
  /* Alvo de toque de 40px MEDIDOS: só padding dá 38, e a diferença de dois
     pixels não aparece no código, só na régua. */
  .ctr-btn,.ctr-aba-topo,.ctr-ord{min-height:40px;}
  .ctr-sel{min-height:40px;}
  .ctr-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;}
  .ctr-kpi{padding:13px 14px;}
  .ctr-kpi-num{font-size:1.5rem;}
  .ctr-parcela{grid-template-columns:54px 1fr 100px;}
  .ctr-pc-st{grid-column:2/-1;text-align:left;}
}
@media (max-width:640px){
  .ctr-item{grid-template-columns:minmax(0,1fr) auto;grid-auto-rows:auto;row-gap:9px;}
  .ctr-item .ctr-selo{grid-column:1/-1;}
  .ctr-item-nome{grid-column:1/-1;}
  .ctr-item-val{text-align:left;flex-direction:row;gap:8px;align-items:baseline;}
  .ctr-dupla{grid-template-columns:1fr;gap:0;}
  .ctr-assina{grid-template-columns:1fr;row-gap:8px;}
  .ctr-det-cab h2{font-size:1.15rem;}
  .ctr-abas-topo{width:100%;}
  .ctr-aba-topo{flex:1;text-align:center;padding:9px 10px;}
}
/* Quem pediu menos movimento recebe a tela pronta.
   Repare no ESCOPO: nenhuma regra aqui força `opacity:1` num seletor sem
   classe de estado — é a Regra 13, e o painel de Amigos já pagou por ela. */
@media (prefers-reduced-motion:reduce){
  .ctr-skel{animation:none;background:rgba(255,255,255,.04);}
  .ctr-prog-barra i{transition:none;}
  .ctr-kpi:hover,.ctr-item:hover,.ctr-btn:hover{transform:none;}
}

/* ── Os contratos na ficha do cliente ────────────────────────────────────
   Vive nesta folha, e nao no main.css, porque e o painel de Contratos
   aparecendo la — quem mexer no visual do contrato acha as duas pontas no
   mesmo arquivo. */
.cli-contratos{margin-top:16px;padding-top:14px;
  border-top:1px solid var(--clr-border-faint);}
.cli-contratos-tit{font-size:.6rem;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:rgba(240,240,240,.32);margin-bottom:9px;}
.cli-contrato{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;
  margin-bottom:5px;border-radius:9px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.025);border:1px solid var(--clr-border-faint);
  transition:background .15s,border-color .15s;}
.cli-contrato:hover{background:rgba(99,102,241,.1);border-color:var(--clr-indigo-40);}
.cli-contrato-selo{flex-shrink:0;padding:2px 8px;border-radius:20px;
  font-size:.58rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--st);background:color-mix(in srgb, var(--st) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--st) 30%, transparent);}
.cli-contrato-nome{flex:1;min-width:0;font-size:.75rem;color:rgba(255,255,255,.85);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cli-contrato-fim{flex-shrink:0;font-size:.68rem;color:rgba(240,240,240,.35);
  font-variant-numeric:tabular-nums;}
@media (max-width:768px){
  .cli-contrato{min-height:40px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   IMPORTAR CONTRATO — a tela de conferência
   ══════════════════════════════════════════════════════════════════════════
   Regra D do REGRAS-DOCUMENTOS.md: todo campo achado mostra a LINHA de onde
   saiu. É o que permite conferir sem abrir o PDF ao lado, e é por isso que a
   origem tem lugar próprio no desenho em vez de virar `title`.
   ══════════════════════════════════════════════════════════════════════════ */
.ctr-lido-corpo{max-height:min(60vh,60dvh);overflow-y:auto;margin:6px 0 4px;}
.ctr-lido{padding:9px 12px;border-radius:9px;margin-bottom:7px;
  background:rgba(255,255,255,.025);border:1px solid var(--clr-border-faint);}
.ctr-lido-rot{display:block;font-size:.6rem;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:rgba(240,240,240,.36);}
.ctr-lido-val{display:block;margin-top:2px;font-size:.86rem;font-weight:600;
  color:rgba(255,255,255,.92);word-break:break-word;}
/* A linha de origem, em corpo menor: ela é prova, não conteúdo. */
.ctr-lido-org{display:block;margin-top:5px;padding-left:9px;font-size:.68rem;
  line-height:1.45;color:rgba(240,240,240,.32);
  border-left:2px solid rgba(99,102,241,.35);}
.ctr-lido-partes{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;}
.ctr-lido-parte{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;
  border-radius:10px;cursor:pointer;background:rgba(255,255,255,.025);
  border:1px solid var(--clr-border-faint);transition:border-color .15s,background .15s;}
.ctr-lido-parte:hover{background:rgba(99,102,241,.08);
  border-color:var(--clr-indigo-40);}
.ctr-lido-parte input{margin-top:3px;accent-color:var(--clr-indigo);flex-shrink:0;}
.ctr-lido-parte b{display:block;font-size:.83rem;color:rgba(255,255,255,.92);}
.ctr-lido-parte em{display:block;margin-top:2px;font-style:normal;font-size:.68rem;
  letter-spacing:.6px;color:rgba(240,240,240,.4);}
/* O que faltou é resposta, e não erro: âmbar, não vermelho. */
.ctr-faltou{color:#fbbf24;}
.ctr-modal-mini{padding:22px 26px;text-align:center;}
.ctr-lendo{margin:0;font-size:.86rem;color:rgba(240,240,240,.75);}
/* O documento que não passa na conferência: âmbar, e não vermelho. Não é erro
   do sistema nem da pessoa — é o que o documento afirma, e ela decide. */
.ctr-suspeito{display:block;margin-top:3px;color:#fbbf24;font-size:.66rem;}
/* O responsável: quem cuida do contrato. Em @, como no resto do produto, e
   apagado — é referência, não a informação principal da linha. */
.ctr-td-resp{white-space:nowrap;color:rgba(240,240,240,.55);font-size:.76rem;}

/* ══════════════════════════════════════════════════════════════════════════
   ANÁLISE DE PERFORMANCE — a nota, e o que ela sente
   ══════════════════════════════════════════════════════════════════════════
   A cor sai da FAIXA, e a faixa sai do mesmo corte que o prompt usa: abaixo
   de 40 é ruim, acima de 75 é bom. Se a cor usasse outro corte, ela
   contradiria o texto ao lado dela — e quem lê acredita na cor.
   ══════════════════════════════════════════════════════════════════════════ */
.ctr-btn-ia{border-color:rgba(168,85,247,.32);background:rgba(168,85,247,.12);
  color:#d8b4fe;}
.ctr-btn-ia:hover{background:rgba(168,85,247,.2);color:#e9d5ff;
  border-color:rgba(168,85,247,.5);}
.ctr-ia-modal{max-width:640px;}

.ctr-ia-nota{position:relative;padding:20px 22px 18px;border-radius:14px;
  margin:6px 0 14px;text-align:center;overflow:hidden;
  border:1px solid var(--clr-border-faint);background:rgba(255,255,255,.02);}
.ctr-ia-num{font-family:'Inter',sans-serif;font-size:3.2rem;font-weight:800;
  letter-spacing:-2px;line-height:1;font-variant-numeric:tabular-nums;}
.ctr-ia-de{font-size:.9rem;color:rgba(240,240,240,.35);margin-left:4px;}
.ctr-ia-barra{height:8px;border-radius:6px;margin:14px 0 0;overflow:hidden;
  background:rgba(255,255,255,.06);}
/* A largura é escrita pelo JS; a transição é daqui. Se o JS não rodar, a
   barra fica em 0 e o NÚMERO continua certo — ele é a fonte da verdade. */
.ctr-ia-barra i{display:block;height:100%;border-radius:6px;
  transition:width 1s cubic-bezier(.2,.8,.3,1);}
.ctr-ia-vered{margin:12px 0 0;font-size:.84rem;line-height:1.5;
  color:rgba(240,240,240,.7);}

/* BOM: verde, e a moldura respira uma vez. */
.ctr-ia-nota.faixa-bom{border-color:rgba(16,185,129,.35);
  background:radial-gradient(420px 160px at 50% 0%,rgba(16,185,129,.14),transparent 70%);
  animation:ctr-ia-bom .9s cubic-bezier(.2,.8,.3,1) both;}
.ctr-ia-nota.faixa-bom .ctr-ia-num{color:#34d399;}
.ctr-ia-nota.faixa-bom .ctr-ia-barra i{background:linear-gradient(90deg,#34d399,#10b981);}
@keyframes ctr-ia-bom{0%{transform:scale(.96);opacity:0;}
  60%{transform:scale(1.015);}100%{transform:scale(1);opacity:1;}}

/* RUIM: vermelho, e um tremor curto — o desfecho se sente antes de ler. */
.ctr-ia-nota.faixa-ruim{border-color:rgba(239,68,68,.4);
  background:radial-gradient(420px 160px at 50% 0%,rgba(239,68,68,.15),transparent 70%);
  animation:ctr-ia-ruim .5s ease-out both;}
.ctr-ia-nota.faixa-ruim .ctr-ia-num{color:#f87171;}
.ctr-ia-nota.faixa-ruim .ctr-ia-barra i{background:linear-gradient(90deg,#f87171,#dc2626);}
@keyframes ctr-ia-ruim{0%{transform:translateX(0);opacity:0;}
  20%{transform:translateX(-6px);opacity:1;}40%{transform:translateX(5px);}
  60%{transform:translateX(-3px);}80%{transform:translateX(2px);}
  100%{transform:translateX(0);}}

/* MEIO: âmbar, sem festa nem susto — é o que a nota diz. */
.ctr-ia-nota.faixa-meio{border-color:rgba(245,158,11,.3);
  background:radial-gradient(420px 160px at 50% 0%,rgba(245,158,11,.1),transparent 70%);}
.ctr-ia-nota.faixa-meio .ctr-ia-num{color:#fbbf24;}
.ctr-ia-nota.faixa-meio .ctr-ia-barra i{background:linear-gradient(90deg,#fbbf24,#f59e0b);}

.ctr-ia-lista{list-style:none;margin:0 0 14px;padding:0;
  display:flex;flex-direction:column;gap:6px;}
.ctr-ia-lista li{position:relative;padding:8px 12px 8px 30px;border-radius:9px;
  font-size:.8rem;line-height:1.5;color:rgba(240,240,240,.72);
  background:rgba(255,255,255,.025);border:1px solid var(--clr-border-faint);}
.ctr-ia-lista li::before{position:absolute;left:11px;top:8px;font-size:.8rem;}
.ctr-ia-lista.bom li::before{content:'+';color:#34d399;font-weight:700;}
.ctr-ia-lista.ruim li::before{content:'−';color:#f87171;font-weight:700;}
.ctr-ia-lista.risco li::before{content:'!';color:#fbbf24;font-weight:700;}
.ctr-ia-lista.falta li::before{content:'?';color:rgba(240,240,240,.4);font-weight:700;}
.ctr-ia-lista.outro li::before{content:'→';color:#a5b4fc;}

/* Regra 13: em movimento reduzido as animações somem, e nada fica preso num
   estado intermediário — o `opacity` volta ao normal em vez de ser forçado. */
@media (prefers-reduced-motion:reduce){
  .ctr-ia-nota.faixa-bom,.ctr-ia-nota.faixa-ruim{animation:none;}
  .ctr-ia-barra i{transition:none;}
}

/* O ✕ da linha: discreto até a linha ser apontada. Botão de excluir gritando
   em oito linhas transforma a lista num campo minado. */
.ctr-td-x{width:38px;text-align:right;padding-right:12px;}
.ctr-x{border:none;background:none;cursor:pointer;padding:4px 7px;border-radius:7px;
  font-size:.78rem;line-height:1;color:rgba(240,240,240,.18);
  transition:color .15s,background .15s;}
.ctr-tab tbody tr:hover .ctr-x{color:rgba(240,240,240,.45);}
.ctr-x:hover{background:rgba(239,68,68,.16);color:#fca5a5;}
.ctr-x:focus-visible{outline:2px solid rgba(239,68,68,.5);outline-offset:1px;}
/* A contagem divide a linha com a ação de excluir a lista. */
.ctr-conta{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;}