/* Infinity Leads · mesa de crédito
   papel mineral frio, tinta azul-petróleo, verde-cofre nas ações,
   ocre reservado ao selo de prioridade A. */
:root {
  --papel: #f0f3f2;
  --cartao: #fbfcfc;
  --tinta: #12222e;
  --grafite: #586874;
  --linha: #d3dad9;
  --cofre: #1f5c4a;
  --cofre-claro: #e2ece8;
  --ocre: #a8641c;
  --perigo: #9b2c2c;
  --seg1: #1f5c4a; --seg2: #3f7f8c; --seg3: #7a9aa3; --seg4: #b9a074; --seg5: #c9d2d0;
  --sombra: 0 1px 0 rgba(18, 34, 46, .06);
  --ui: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #0f1a21; --cartao: #15232c; --tinta: #e3eaec; --grafite: #94a5ae;
    --linha: #2a3a44; --cofre: #5fb394; --cofre-claro: #1b3530; --ocre: #d9963f; --perigo: #e07a7a;
    --seg1: #5fb394; --seg2: #4c9aa8; --seg3: #6f8b94; --seg4: #b49a6a; --seg5: #3b4c55;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 15px/1.5 var(--ui); font-variation-settings: "wdth" 92;
}
a { color: var(--cofre); text-underline-offset: 3px; }
h1, h2 { font-variation-settings: "wdth" 75; letter-spacing: -.01em; line-height: 1.15; }
h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 750; margin: .2rem 0 .3rem; }
h2 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--grafite); margin: 0 0 .9rem; }
:focus-visible { outline: 2px solid var(--cofre); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.doc { font-family: var(--mono); font-size: .8em; color: var(--grafite); font-variation-settings: normal; }
.doc.grande { font-size: .95rem; margin: 0; }
.mudo { color: var(--grafite); }
.pe { font-size: .85rem; margin: .8rem 0 0; }

/* ---------- topo ---------- */
.topo {
  display: flex; align-items: center; gap: 2rem; padding: .7rem 1.5rem;
  border-bottom: 1px solid var(--linha); background: var(--cartao); position: sticky; top: 0; z-index: 2;
}
.marca { font-weight: 800; font-variation-settings: "wdth" 75; font-size: 1.15rem; color: var(--tinta); text-decoration: none; letter-spacing: -.02em; }
.marca span { font-weight: 400; color: var(--cofre); }
.marca.grande { font-size: 2.2rem; margin: 0; }
.topo nav { display: flex; gap: 1.2rem; flex: 1; }
.topo nav a { color: var(--grafite); text-decoration: none; font-weight: 600; padding: .3rem 0; border-bottom: 2px solid transparent; }
.topo nav a[aria-current] { color: var(--tinta); border-color: var(--cofre); }
.quem { display: flex; gap: 1rem; align-items: center; font-size: .9rem; }
.quem a { color: var(--tinta); }
.quem form { margin: 0; }

main { max-width: 1320px; margin: 0 auto; padding: 1.4rem 1.5rem 4rem; }

/* ---------- formulários ---------- */
label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; font-weight: 600; color: var(--grafite); }
input, select, textarea {
  font: 400 .95rem var(--ui); font-variation-settings: "wdth" 92; color: var(--tinta);
  background: var(--cartao); border: 1px solid var(--linha); border-radius: 6px; padding: .5rem .6rem; width: 100%;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--cofre); outline: none; box-shadow: 0 0 0 3px var(--cofre-claro); }
button {
  font: 600 .9rem var(--ui); cursor: pointer; border-radius: 6px; padding: .55rem 1rem;
  border: 1px solid var(--linha); background: var(--cartao); color: var(--tinta);
}
button:hover { border-color: var(--grafite); }
button.primario { background: var(--cofre); border-color: var(--cofre); color: #fff; }
button.primario:hover { filter: brightness(1.1); }
button.perigoso { background: transparent; border-color: var(--perigo); color: var(--perigo); }
button.link { border: 0; background: none; padding: 0; color: var(--cofre); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.form { display: flex; flex-direction: column; gap: .9rem; align-items: stretch; }
.form > button { align-self: flex-start; }
.lado { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }

/* ---------- avisos ---------- */
.aviso { padding: .7rem 1rem; border-radius: 6px; margin: 0 0 1.2rem; border-left: 4px solid var(--cofre); background: var(--cofre-claro); }
.aviso-erro { border-color: var(--perigo); background: color-mix(in srgb, var(--perigo) 10%, var(--cartao)); }
.aviso-senha { border-color: var(--ocre); background: color-mix(in srgb, var(--ocre) 12%, var(--cartao)); font-family: var(--mono); font-size: .9rem; }

/* ---------- login ---------- */
main.entrada { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.cartao-login { width: min(380px, 100%); background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 2rem; box-shadow: var(--sombra); }
.cartao-login .sub { color: var(--grafite); margin: .2rem 0 1.6rem; }
.cartao-login form { display: flex; flex-direction: column; gap: 1rem; }

/* ---------- filtros e lista ---------- */
.filtros {
  display: grid; grid-template-columns: 2.2fr repeat(6, minmax(0, 1fr)); gap: .8rem;
  padding: 1rem; background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; margin-bottom: 1rem;
}
.contagem { color: var(--grafite); font-size: .9rem; margin: 0 0 .6rem; }
.contagem strong { color: var(--tinta); font-family: var(--mono); font-weight: 500; }
.htmx-request #resultado, #resultado.htmx-request { opacity: .55; transition: opacity .2s; }

.tabela-rolagem { overflow-x: auto; background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grafite); font-weight: 600; padding: .7rem .8rem; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: .65rem .8rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: color-mix(in srgb, var(--cofre) 4%, transparent); }
.tabela .num { text-align: right; font-family: var(--mono); font-size: .82rem; white-space: nowrap; }
.tabela td .doc { display: block; }
.tabela tr.inativo { opacity: .5; }
.col-nome a { font-weight: 650; color: var(--tinta); text-decoration: none; }
.col-nome a:hover { color: var(--cofre); text-decoration: underline; }
.col-score { min-width: 92px; }
.col-score .pts { font-family: var(--mono); font-size: .85rem; display: block; margin-bottom: .2rem; }
.acoes { display: flex; gap: 1rem; white-space: nowrap; }
.acoes form { margin: 0; }

.paginas { display: flex; gap: 1.2rem; justify-content: center; align-items: center; padding: 1.2rem; color: var(--grafite); font-size: .9rem; }

/* ---------- assinatura: selo e barra de score ---------- */
.selo {
  display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 4px;
  font: 800 1rem var(--ui); font-variation-settings: "wdth" 75;
  border: 1.5px solid var(--linha); color: var(--grafite);
}
.selo-a { background: var(--ocre); border-color: var(--ocre); color: #fff; transform: rotate(-4deg); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.selo-b { border-color: var(--tinta); color: var(--tinta); }
.selo-c { border-style: dashed; }
.selo-d { opacity: .55; }

.barra { display: block; width: 100%; height: 14px; border-radius: 3px; overflow: hidden; }
.barra.mini { height: 6px; max-width: 90px; }
.barra .trilho { fill: color-mix(in srgb, var(--linha) 70%, transparent); }
.barra .cheio { fill: var(--cofre); }
.barra .corte { stroke: var(--papel); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.seg-1 { fill: var(--seg1); background: var(--seg1); }
.seg-2 { fill: var(--seg2); background: var(--seg2); }
.seg-3 { fill: var(--seg3); background: var(--seg3); }
.seg-4 { fill: var(--seg4); background: var(--seg4); }
.seg-5 { fill: var(--seg5); background: var(--seg5); }

/* ---------- ficha da empresa ---------- */
.trilha { margin: 0 0 .6rem; font-size: .9rem; }
.ficha-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.ficha-links { display: flex; gap: 1.2rem; font-size: .9rem; }
.ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bloco { background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 1.2rem 1.3rem; }
.bloco.estreito { max-width: 460px; margin-top: 1.5rem; }
.scores { grid-column: 1 / -1; }
.score-linha + .score-linha { margin-top: 1.4rem; }
.score-cab { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.score-cab .papel { font-weight: 700; font-variation-settings: "wdth" 75; font-size: 1.15rem; flex: 1; }
.pts.grande { font-family: var(--mono); font-size: 1.5rem; }
.pts.grande small { font-size: .8rem; color: var(--grafite); }
.legenda { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .82rem; color: var(--grafite); }
.legenda i { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.legenda b { color: var(--tinta); font-family: var(--mono); font-weight: 500; }
.legenda .zero { opacity: .45; }
.dados { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.2rem; margin: 0; font-size: .92rem; }
.dados dt { color: var(--grafite); font-size: .82rem; }
.dados dd { margin: 0; overflow-wrap: anywhere; }
.perigo { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--perigo) 35%, var(--linha)); }
.perigo summary { cursor: pointer; font-weight: 700; color: var(--perigo); }

.etapa { font-size: .82rem; font-weight: 600; }
.etapa-descartado { color: var(--grafite); text-decoration: line-through; }
.etapa-reuniao { color: var(--cofre); }
.estado-ok { color: var(--cofre); font-weight: 600; }
.estado-erro { color: var(--perigo); font-weight: 600; }
.estado-rodando { color: var(--ocre); font-weight: 600; }
pre { white-space: pre-wrap; margin: .4rem 0 0; }

.resumo { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
.resumo li { background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 1rem; display: flex; flex-direction: column; }
.resumo .papel { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grafite); font-weight: 600; }
.resumo b { font-family: var(--mono); font-size: 1.6rem; font-weight: 500; }

.vazio { text-align: center; padding: 3rem 1rem; color: var(--grafite); }
.vazio h1, .vazio h2 { color: var(--tinta); text-transform: none; letter-spacing: 0; font-size: 1.3rem; }

/* ---------- telas menores ---------- */
@media (max-width: 1100px) {
  .filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filtros .busca { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  main { padding: 1rem 1rem 3rem; }
  .topo { flex-wrap: wrap; gap: .6rem 1.2rem; padding: .6rem 1rem; }
  .topo nav { order: 3; flex-basis: 100%; }
  .quem { margin-left: auto; }
  .filtros { grid-template-columns: 1fr 1fr; }
  .ficha, .lado { grid-template-columns: 1fr; }
  .dados { grid-template-columns: 1fr; gap: .1rem; }
  .dados dd { margin-bottom: .5rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }