/* =====================================================================
   Dutra Quantum — porta de entrada. Folha herdada do PISO de proposito:
   um unico login para quatro produtos so funciona se parecer um lugar so.

   CLARO E O PADRAO. O ciano e ACENTO, nao cor de fundo: aparece no "I" da
   marca, no chip ativo, no foco, na barra de progresso e em marcadores
   pequenos. Nada de bloco grande em ciano — o peso visual vem do texto.

   Os tokens cobrem os TRES estados de tema: :root e o claro completo;
   prefers-color-scheme:dark redefine so os tokens (protegido por
   :not([data-theme="light"]) para a escolha explicita do usuario vencer);
   e [data-theme="dark"] redefine de novo para o alternador manual.
   ===================================================================== */
:root{
  /* neutros com leve viés frio, puxando para o acento — cinza puro lê como
     não-escolhido */
  --bg:#F3F6F7; --bg-2:#EAEFF1; --surf:#FFFFFF; --surf-2:#F7FAFB;
  --line:#DCE4E8; --line-2:#C6D2D8;
  --fg:#101820; --fg-2:#46545F; --fg-3:#5E6C74;   /* 5,4:1 no branco */

  --cy:#0A7E96; --cy-forte:#086478; --cy-dim:#BDE3EC; --cy-soft:rgba(10,126,150,.07);
  --am:#9A5B06; --am-dim:#F0DCBC;
  --vd:#15803D; --vd-dim:#C6E6D2;
  --vm:#B3261E; --vm-dim:#F2CFCC;

  --tinta:#101820;            /* fundo de botao primario */
  --tinta-fg:#FFFFFF;
  --r:4px;
  --sombra:0 1px 2px rgba(16,24,32,.05), 0 10px 26px -16px rgba(16,24,32,.28);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0D11; --bg-2:#101519; --surf:#151B21; --surf-2:#1A222A;
    --line:#232C34; --line-2:#2E3945;
    --fg:#EAEFF3; --fg-2:#A9B6C1; --fg-3:#76838F;
    --cy:#48CFE6; --cy-forte:#7BDFF0; --cy-dim:#10323B; --cy-soft:rgba(72,207,230,.08);
    --am:#E9A63C; --am-dim:#3A2B12;
    --vd:#4ADE80; --vd-dim:#10301E;
    --vm:#F87171; --vm-dim:#3A1616;
    --tinta:#48CFE6; --tinta-fg:#04171C;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#0A0D11; --bg-2:#101519; --surf:#151B21; --surf-2:#1A222A;
  --line:#232C34; --line-2:#2E3945;
  --fg:#EAEFF3; --fg-2:#A9B6C1; --fg-3:#76838F;
  --cy:#48CFE6; --cy-forte:#7BDFF0; --cy-dim:#10323B; --cy-soft:rgba(72,207,230,.08);
  --am:#E9A63C; --am-dim:#3A2B12;
  --vd:#4ADE80; --vd-dim:#10301E;
  --vm:#F87171; --vm-dim:#3A1616;
  --tinta:#48CFE6; --tinta-fg:#04171C;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--fg);
  font:400 15.5px/1.55 "IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:"Archivo","Arial Narrow",sans-serif;letter-spacing:-.02em;line-height:1.05}
a{color:var(--cy)}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
.oculto{display:none !important}

.rotulo{
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);
}
.marca{font-family:"Archivo",sans-serif;font-weight:800;font-size:21px;letter-spacing:.14em;color:var(--fg)}
.marca i{font-style:normal;color:var(--cy)}   /* o acento canonico */

/* ---------------------------------------------------------- botoes */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--tinta);color:var(--tinta-fg);font-weight:600;font-size:14.5px;
  padding:12px 22px;border:0;border-radius:var(--r);cursor:pointer;
  font-family:inherit;text-decoration:none;
  transition:transform .12s, box-shadow .12s, opacity .12s;
}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--sombra)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.fantasma{background:transparent;color:var(--fg);border:1px solid var(--line-2)}
.btn.fantasma:hover{border-color:var(--cy);color:var(--cy);box-shadow:none}
.btn.pequeno{padding:8px 14px;font-size:13px}

/* ----------------------------------------------------------- login */
.entrada{min-height:100dvh;display:grid;place-items:center;padding:24px}
.cartao-entrada{
  width:100%;max-width:400px;background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r);padding:36px 32px;box-shadow:var(--sombra);
}
.cartao-entrada .marca{display:block;margin-bottom:6px}
.cartao-entrada p.sub{color:var(--fg-3);font-size:13.5px;margin-bottom:28px}
.campo{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.campo label{font-size:12.5px;color:var(--fg-2);font-weight:500}
.campo input{
  background:var(--surf);border:1px solid var(--line-2);border-radius:var(--r);
  padding:11px 13px;color:var(--fg);font:inherit;font-size:14.5px;width:100%;
}
.campo input:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 3px var(--cy-soft)}
.aviso{
  margin-top:16px;padding:11px 13px;border-radius:var(--r);font-size:13.5px;
  border:1px solid var(--vm-dim);background:rgba(179,38,30,.06);color:var(--vm);
}
.aviso.ok{border-color:var(--cy-dim);background:var(--cy-soft);color:var(--cy-forte)}

.ou{display:flex;align-items:center;gap:12px;margin:18px 0;
  color:var(--fg-3);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--line)}
.rodape-entrada{margin-top:18px;text-align:center;font-size:13px}
.rodape-entrada a{color:var(--fg-3);text-decoration:none}
.rodape-entrada a:hover{color:var(--cy);text-decoration:underline}

/* ------------------------------------------------------------ topo */
.topo{
  position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.topo .interno{
  max-width:1360px;margin:0 auto;padding:0 24px;height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.topo .quem{font-size:13px;color:var(--fg-3);display:flex;align-items:center;gap:14px}

.painel{max-width:1360px;margin:0 auto;padding:30px 24px 72px}
.cabeca{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.cabeca h1{font-size:clamp(26px,3.4vw,36px);font-weight:800}
.cabeca .quando{font-size:13px;color:var(--fg-3);margin-top:7px}

/* ------------------------------------------------------- indicadores */
.indicadores{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-bottom:26px;
}
.indicador{background:var(--surf);padding:18px 20px}
.indicador .v{font-family:"IBM Plex Mono",monospace;font-weight:600;
  font-size:26px;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums;color:var(--fg)}
.indicador .k{font-size:12.5px;color:var(--fg-3);margin-top:7px;line-height:1.35}
/* so o que exige acao ganha cor */
.indicador .v.am{color:var(--am)}
/* o ciano entra como marcador fino, nao como cor do numero */
.indicador .v.cy{position:relative;padding-left:11px}
.indicador .v.cy::before{
  content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:3px;
  background:var(--cy);border-radius:2px;
}

/* ---------------------------------------------------------- filtros */
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.chip{
  background:var(--surf);border:1px solid var(--line-2);color:var(--fg-2);
  padding:7px 14px;border-radius:99px;font-size:13px;cursor:pointer;
  font-family:inherit;transition:border-color .12s,color .12s,background .12s;
}
.chip:hover{border-color:var(--fg-3);color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--cy-soft);border-color:var(--cy);color:var(--cy-forte);font-weight:600}
.busca{
  flex:1;min-width:190px;background:var(--surf);border:1px solid var(--line-2);
  border-radius:99px;padding:8px 16px;color:var(--fg);font:inherit;font-size:13.5px;
}
.busca:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 3px var(--cy-soft)}

/* ------------------------------------------------------ oportunidade */
.lista{display:flex;flex-direction:column;gap:10px}
.oportunidade{
  background:var(--surf);border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:var(--r);padding:18px 20px;display:grid;gap:14px;
  grid-template-columns:1fr auto;align-items:start;
  transition:border-color .14s, transform .14s, box-shadow .14s;
}
.oportunidade:hover{border-color:var(--line-2);transform:translateX(2px);box-shadow:var(--sombra)}
/* a faixa lateral e o unico lugar onde a urgencia vira cor cheia */
.oportunidade[data-urgencia="critico"]{border-left-color:var(--vm)}
.oportunidade[data-urgencia="atencao"]{border-left-color:var(--am)}
.oportunidade[data-urgencia="confortavel"]{border-left-color:var(--cy)}
.oportunidade[data-urgencia="encerrado"]{opacity:.55;border-left-color:var(--line-2)}

.op-cabeca{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.op-orgao{font-weight:600;font-size:15.5px;letter-spacing:-.005em;color:var(--fg)}
.op-local{font-size:12.5px;color:var(--fg-3)}
.op-objeto{color:var(--fg-2);font-size:14px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.op-rodape{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px;font-size:12.5px;color:var(--fg-3)}
.op-rodape b{color:var(--fg-2);font-weight:600}

.op-numeros{text-align:right;display:flex;flex-direction:column;gap:3px;min-width:150px}
/* o numero principal e TINTA, nao ciano: peso vem do tipo */
.op-ve{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:19px;
  color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.op-ve-rot{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cy);font-weight:600}
.op-contrato{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--fg-3);margin-top:7px}

.etiqueta{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:2px;
  border:1px solid;white-space:nowrap;
}
.etiqueta.critico{color:var(--vm);border-color:var(--vm-dim);background:rgba(179,38,30,.06)}
.etiqueta.atencao{color:var(--am);border-color:var(--am-dim);background:rgba(154,91,6,.06)}
.etiqueta.confortavel{color:var(--fg-3);border-color:var(--line-2)}
.etiqueta.encerrado{color:var(--fg-3);border-color:var(--line-2)}
.etiqueta.sem_prazo{color:var(--fg-3);border-color:var(--line-2)}
.etiqueta.sigiloso{color:var(--am);border-color:var(--am-dim)}

.barra-cap{height:3px;background:var(--bg-2);border-radius:2px;margin-top:9px;overflow:hidden}
.barra-cap i{display:block;height:100%;background:var(--cy);border-radius:2px}
.barra-cap.baixa i{background:var(--am)}

.vazio{text-align:center;padding:64px 20px;color:var(--fg-3);
  border:1px dashed var(--line-2);border-radius:var(--r);background:var(--surf)}

/* ============================================================
   SEQUENCIA DE APURACAO — a abertura do painel.
   Cada etapa corresponde a trabalho real; o tempo minimo existe
   so para a etapa ser legivel, nunca para simular processamento.
   ============================================================ */
.sequencia{
  position:fixed;inset:0;z-index:90;background:var(--bg);
  display:grid;place-items:center;padding:24px;
  transition:opacity .5s ease, visibility .5s;
}
.sequencia.saindo{opacity:0;visibility:hidden}
.terminal{width:100%;max-width:520px}
.terminal .marca{display:block;margin-bottom:4px}
.terminal .sub{color:var(--fg-3);font-size:12.5px;margin-bottom:26px}
.etapas{display:flex;flex-direction:column;gap:2px;
  font-family:"IBM Plex Mono",monospace;font-size:13.5px}
.etapa{
  display:grid;grid-template-columns:20px 1fr auto;gap:11px;align-items:center;
  padding:9px 0;color:var(--fg-3);opacity:.38;
  transition:opacity .35s ease, color .35s ease;
}
.etapa.ativa{opacity:1;color:var(--cy)}
.etapa.pronta{opacity:1;color:var(--fg-2)}
.etapa .sinal{text-align:center;font-weight:600}
.etapa.ativa .sinal{color:var(--cy);animation:pulsa 1s ease-in-out infinite}
.etapa.pronta .sinal{color:var(--vd)}
.etapa .detalhe{font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.25}}

.progresso{height:2px;background:var(--line);margin-top:26px;border-radius:2px;overflow:hidden}
.progresso i{display:block;height:100%;width:0;background:var(--cy);
  transition:width .45s cubic-bezier(.3,.8,.4,1)}
.assinatura{margin-top:16px;font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.1em;color:var(--fg-3);text-transform:uppercase}

@media (prefers-reduced-motion: reduce){
  .sequencia,.etapa,.progresso i,.oportunidade{transition:none}
  .etapa.ativa .sinal{animation:none}
}
@media (max-width:640px){
  .oportunidade{grid-template-columns:1fr}
  /* numeros viram uma linha que QUEBRA: sem o wrap o "contrato R$ ..."
     empurrava a pagina alguns pixels para fora no celular. */
  .op-numeros{
    text-align:left;flex-direction:row;flex-wrap:wrap;align-items:baseline;
    gap:6px 10px;min-width:0;width:100%;
  }
  .op-ve-rot{width:100%}
  .op-contrato{margin-top:0}
}


/* ============ redefinicao de senha ============ */
.carregando{
  display:flex;align-items:center;gap:10px;color:var(--fg-3);
  font-family:"IBM Plex Mono",monospace;font-size:13.5px;padding:8px 0;
}
.carregando .sinal{color:var(--cy);animation:pulsa 1s ease-in-out infinite}
#tela-erro .aviso,#tela-pronto .aviso{margin-top:0}