/* Versão 2. Brandbook AC V1.0: paleta fechada (navy, blue, cinza, preto, branco e seus tons), Instrument Sans.
   Linguagem: grade de cartões grandes, 1 cartão escuro, 1 cartão de cor, números grandes, controles em pílula. */
:root {
  --navy: #091A35;
  --navy90: #17294A;
  --navy75: #465368;
  --navy10: #E4E8EE;
  --blue: #7AA8D4;
  --blue45: #C3D8EC;
  --blue15: #EBF2F9;
  --cinza: #828282;
  --cinza20: #E3E5E8;
  --preto: #1D1D1F;
  --branco: #FFFFFF;
  --fundo: #EDF0F4;
  --e1: 4px; --e2: 8px; --e3: 16px; --e4: 24px; --e5: 32px;
  --raio: 24px;
  --raio-m: 16px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fundo); color: var(--preto); font: 400 15px/1.5 "Instrument Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
button, select, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.regua { display: block; width: 28px; height: 2px; background: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Entrada */
.entrada { min-height: 100%; display: grid; place-items: center; background: var(--navy); padding: var(--e3); }
.entrada-caixa { width: min(440px, 100%); background: var(--branco); border-radius: var(--raio); padding: var(--e5); display: grid; gap: var(--e3); }
.entrada h1 { font-size: 28px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
.entrada p { color: var(--navy75); font-size: 14px; }
.entrada form { display: grid; gap: var(--e2); }
.entrada label { font-size: 13px; font-weight: 600; color: var(--navy); }
.entrada input { border: 1px solid var(--cinza); border-radius: 999px; padding: var(--e2) var(--e4); min-height: 48px; }
.botao { background: var(--navy); color: var(--branco); border: 0; border-radius: 999px; padding: var(--e2) var(--e4); min-height: 48px; cursor: pointer; font-weight: 600; }
.erro { color: var(--preto); font-weight: 500; border-left: 2px solid var(--preto); padding-left: var(--e2); }

/* Barra do topo */
.casca { min-height: 100%; }
.barra-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; padding: var(--e3) var(--e5); max-width: 1320px; margin: 0 auto; }
.marca { display: grid; gap: 6px; }
.marca strong { font-size: 17px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.pilulas { display: inline-flex; background: var(--branco); border-radius: 999px; padding: var(--e1); gap: 2px; }
.pilulas button { background: none; border: 0; border-radius: 999px; padding: 6px var(--e3); min-height: 36px; cursor: pointer; color: var(--navy75); font-weight: 500; }
.pilulas button:hover { color: var(--navy); }
.pilulas button[aria-pressed="true"] { background: var(--navy); color: var(--branco); font-weight: 600; }
.controles { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.pilula-select { display: inline-flex; align-items: center; gap: var(--e2); background: var(--branco); border-radius: 999px; padding: 0 var(--e3) 0 var(--e3); min-height: 44px; font-size: 13px; color: var(--navy75); }
.pilula-select select { border: 0; background: none; color: var(--navy); font-weight: 600; font-size: 14px; min-height: 36px; max-width: 170px; cursor: pointer; }
.pilula-marcar { display: inline-flex; align-items: center; gap: var(--e2); background: var(--branco); border-radius: 999px; padding: 0 var(--e3); min-height: 44px; font-size: 14px; color: var(--navy75); cursor: pointer; }
.pilula-marcar input { accent-color: var(--navy); width: 16px; height: 16px; }
.pilula-botao { background: none; border: 1px solid var(--navy75); color: var(--navy); border-radius: 999px; padding: 0 var(--e3); min-height: 44px; cursor: pointer; font-weight: 500; }
.pilula-botao:hover { background: var(--navy); color: var(--branco); border-color: var(--navy); }

main { max-width: 1320px; margin: 0 auto; padding: var(--e2) var(--e5) var(--e5); display: grid; gap: var(--e4); }
.saudacao { display: flex; justify-content: space-between; align-items: end; gap: var(--e3); flex-wrap: wrap; }
.saudacao h1 { font-size: 44px; font-weight: 600; color: var(--navy); letter-spacing: -0.03em; line-height: 1.05; }
.saudacao p, .situacao { color: var(--navy75); font-size: 14px; }
h2 { font-size: 20px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }

/* Grade de resumo */
.bento { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--e3); }
.cartao { border-radius: var(--raio); padding: var(--e4); background: var(--branco); display: grid; gap: var(--e3); align-content: start; min-width: 0; }
.cartao-topo { display: flex; justify-content: space-between; align-items: start; gap: var(--e3); }
.cartao-titulo { font-size: 15px; font-weight: 600; }
.cartao-sub { font-size: 13px; opacity: 0.75; }
.escuro { background: var(--navy); color: var(--branco); }
.azul { background: var(--blue); color: var(--navy); }
.numero-grande { font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.area-progresso { grid-template-columns: minmax(0, 1fr); }
.medidor { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--e4); align-items: center; }
.arco { width: 100%; height: auto; display: block; }
.arco .valor { font: 600 44px "Instrument Sans", sans-serif; fill: var(--branco); letter-spacing: -0.03em; }
.arco .rotulo { font: 500 12px "Instrument Sans", sans-serif; fill: var(--blue45); }
.chaves { display: grid; gap: 10px; font-size: 14px; }
.chaves div { display: flex; justify-content: space-between; gap: var(--e3); align-items: center; color: var(--blue45); }
.chaves b { color: var(--branco); font-weight: 600; font-variant-numeric: tabular-nums; }
.chaves i, .legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: var(--e2); vertical-align: -1px; }
.vazio-pequeno { font-size: 14px; opacity: 0.8; padding: var(--e4) 0; }

.pontos { width: 100%; height: auto; display: block; }
.pontos text { font: 500 11px "Instrument Sans", sans-serif; fill: var(--navy); opacity: 0.7; }
.legenda { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); font-size: 13px; color: var(--navy75); }
.azul .legenda { color: var(--navy); }

.area-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.bloco-numero { background: var(--branco); border-radius: var(--raio); padding: var(--e3) var(--e3) var(--e3) 20px; display: grid; align-content: space-between; gap: var(--e2); min-height: 112px; }
.bloco-numero span { font-size: 13px; color: var(--navy75); line-height: 1.3; }
.bloco-numero strong { font-size: 40px; font-weight: 600; color: var(--navy); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bloco-numero.vivo strong::after { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); margin-left: var(--e2); vertical-align: 12px; }
.bloco-numero.alerta { background: var(--preto); }
.bloco-numero.alerta span { color: var(--cinza20); }
.bloco-numero.alerta strong { color: var(--branco); }

/* Cores dos estados */
.c-concluido { background: var(--navy); }
.c-revisao { background: var(--blue); }
.c-executando { background: var(--blue45); }
.c-bloqueado { background: var(--preto); background-image: repeating-linear-gradient(45deg, transparent 0 3px, var(--cinza) 3px 5px); }
.c-fila { background: var(--cinza20); }
.escuro .c-concluido { background: var(--branco); }
.escuro .c-fila { background: rgba(255, 255, 255, 0.18); }
.escuro .c-bloqueado { background: var(--navy); background-image: repeating-linear-gradient(45deg, transparent 0 3px, var(--branco) 3px 5px); outline: 1px solid rgba(255, 255, 255, 0.5); outline-offset: -1px; }

/* Barra em segmentos */
.segmentos { display: flex; gap: 3px; height: 12px; }
.segmentos span { height: 100%; border-radius: 6px; min-width: 6px; }
.segmentos.vazia { background: var(--cinza20); border-radius: 6px; }

/* Projetos */
.lista-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e2); }
.lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); align-items: start; }
.vazio { grid-column: 1 / -1; background: var(--branco); border-radius: var(--raio); padding: var(--e5); color: var(--navy75); text-align: center; }
.projeto { background: var(--branco); border-radius: var(--raio); min-width: 0; }
.projeto.aberto { grid-column: 1 / -1; }
.linha-topo { display: grid; gap: var(--e3); width: 100%; text-align: left; background: none; border: 0; padding: var(--e4); cursor: pointer; border-radius: var(--raio); }
.linha-topo:hover .seta { background: var(--navy); color: var(--branco); }
.proj-topo { display: flex; justify-content: space-between; align-items: start; gap: var(--e3); }
.proj-nome { display: grid; gap: 6px; min-width: 0; }
.nome { font-size: 18px; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; letter-spacing: -0.01em; line-height: 1.25; }
.selo { justify-self: start; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--navy10); color: var(--navy); }
.selo.forte { background: var(--navy); color: var(--branco); }
.selo.vivo { background: var(--blue15); color: var(--navy); }
.selo.vivo::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); margin-right: 6px; vertical-align: 1px; }
.selo.alerta { background: var(--preto); color: var(--branco); }
.selo.suave { background: none; box-shadow: inset 0 0 0 1px var(--cinza); color: var(--navy75); }
.seta { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--fundo); color: var(--navy); display: grid; place-items: center; transition: transform 0.15s, background 0.15s; }
.seta svg { width: 16px; height: 16px; }
.aberto .seta { transform: rotate(90deg); background: var(--navy); color: var(--branco); }
.proj-meio { display: flex; justify-content: space-between; align-items: end; gap: var(--e3); }
.pct { font-size: 40px; font-weight: 600; color: var(--navy); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pct small { font-size: 14px; font-weight: 500; color: var(--navy75); letter-spacing: 0; margin-left: 6px; }
.pct.sem { font-size: 15px; font-weight: 500; color: var(--navy75); letter-spacing: 0; line-height: 1.4; }
.custo-proj { text-align: right; display: grid; gap: 2px; }
.custo-proj b { font-size: 16px; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.custo-proj span { font-size: 13px; color: var(--navy75); white-space: nowrap; }
.meta { font-size: 13px; color: var(--navy75); overflow-wrap: anywhere; }

.detalhe { padding: 0 var(--e4) var(--e4); display: grid; gap: var(--e4); }
.aviso { font-size: 14px; color: var(--navy); background: var(--blue15); border-radius: var(--raio-m); padding: var(--e3); }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--e2); }
.numero { background: var(--fundo); border-radius: var(--raio-m); padding: var(--e3); }
.numero span { display: block; font-size: 12px; color: var(--navy75); }
.numero b { font-size: 20px; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e4); }
.bloco h3 { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: var(--e2); }
.bloco.largo { grid-column: 1 / -1; }
table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--e2) var(--e3) var(--e2) 0; border-bottom: 1px solid var(--cinza20); color: var(--preto); overflow-wrap: anywhere; }
th { font-weight: 500; color: var(--navy75); white-space: nowrap; }
td:not(:first-child) { white-space: nowrap; overflow-wrap: normal; }
td.num, th.num { text-align: right; padding: var(--e2) 0 var(--e2) var(--e3); }
tr:last-child td { border-bottom: 0; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.acoes select { border: 1px solid var(--cinza); border-radius: 999px; padding: 0 var(--e3); min-height: 40px; background: var(--branco); max-width: 240px; }
.botao-claro { background: var(--branco); color: var(--navy); border: 1px solid var(--navy); border-radius: 999px; padding: 0 var(--e3); min-height: 40px; cursor: pointer; font-weight: 500; }
.botao-claro:hover { background: var(--navy); color: var(--branco); }
.rodape { font-size: 13px; color: var(--navy75); }

@media (max-width: 1100px) {
  .bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .area-numeros { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .barra-topo, main { padding-left: var(--e3); padding-right: var(--e3); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .area-numeros { grid-template-columns: 1fr 1fr; }
  .lista { grid-template-columns: minmax(0, 1fr); }
  .saudacao h1 { font-size: 32px; }
  .numero-grande { font-size: 36px; }
  .medidor { grid-template-columns: minmax(0, 1fr); }
  .pilulas { width: 100%; }
  .pilulas button { flex: 1; padding: 6px var(--e2); }
  .cartao, .linha-topo { padding: 20px; }
  .detalhe { padding: 0 20px 20px; }
  .pct { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }