@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=Playfair+Display:wght@600;700;800&display=swap');

:root {
  /* navy noturno + champagne — salão de advocacia, não sala de servidores */
  --ouro: #c8a961;
  --ouro-2: #dcc38b;
  --ouro-3: #f3e7c6;

  --fundo: #0a0f1f;
  --vidro: rgba(244, 236, 220, 0.038);
  --vidro-forte: rgba(244, 236, 220, 0.065);
  --borda: rgba(234, 222, 198, 0.09);
  --borda-forte: rgba(234, 222, 198, 0.17);

  --tx: #ece7db;
  --tx2: rgba(236, 231, 219, 0.6);
  --tx3: rgba(236, 231, 219, 0.34);

  --verde: #2fa07c;
  --ambar: #d4a539;
  --azul: #6b8fc9;
  --vinho: #cd5f63;

  --f-head: 'Archivo', sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-display: 'Playfair Display', Georgia, serif;
  --sobre-ouro: #17110a;
  --anel-trilha: rgba(236, 231, 219, 0.1);
  --painel-solido: #10162b;
  --tom-verde: #4fd3a3;
  --tom-ambar: #f0c657;
  --tom-vinho: #ff8f97;
  --tom-azul: #7cb0f0;
  --raio: 15px;
  --mola: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  background: linear-gradient(180deg, #0e152b 0%, var(--fundo) 38%, #070b17 100%) fixed;
  color: var(--tx);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- cenário: luz, grão, moldura ---------- */

.cenario-luz {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(95% 65% at 50% -12%, rgba(200, 169, 97, 0.13), transparent 62%),
    radial-gradient(42% 30% at 88% -4%, rgba(200, 169, 97, 0.05), transparent);
  animation: luz-respira 16s ease-in-out infinite;
}
@keyframes luz-respira { 50% { opacity: 0.72; } }

.cenario-grao {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.97 0 0 0 0 0.9 0 0 0 0.028 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.cenario-moldura {
  position: fixed; inset: 10px; z-index: 150; pointer-events: none;
  border: 1px solid rgba(200, 169, 97, 0.17);
}
.cenario-moldura::after {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid rgba(200, 169, 97, 0.06);
}
@media (max-width: 880px) { .cenario-moldura { display: none; } }

::selection { background: rgba(212, 178, 106, 0.3); }

/* ---------- topo ---------- */

header {
  position: sticky; top: 0; z-index: 60;
  height: 62px; padding: 0 26px;
  display: flex; align-items: center; gap: 30px;
  background: rgba(7, 15, 36, 0.72);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--borda);
}
header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 178, 106, 0.5), transparent);
}

.marca {
  font-family: var(--f-head); font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.19em; text-transform: uppercase;
}
.marca span { color: var(--ouro-2); font-weight: 500; }

nav { display: flex; gap: 5px; margin-left: auto; }

nav button {
  background: transparent; border: 1px solid transparent; color: var(--tx2);
  font-family: var(--f-body); font-size: 13px; font-weight: 500;
  padding: 8px 17px; border-radius: 10px; cursor: pointer;
  transition: 0.22s var(--mola);
}
nav button:hover { color: var(--tx); background: var(--vidro); }
nav button.on {
  color: var(--sobre-ouro); font-weight: 700;
  background: linear-gradient(135deg, var(--ouro-3), var(--ouro-2));
  box-shadow: 0 3px 16px rgba(212, 178, 106, 0.28);
}
nav button.nova {
  color: var(--ouro-2); border-color: rgba(212, 178, 106, 0.35); margin-left: 8px;
}
nav button.nova:hover { background: rgba(212, 178, 106, 0.13); color: var(--ouro-3); }

main { max-width: 1240px; margin: 0 auto; padding: 26px 26px 70px; }

/* ---------- entrada dos elementos ---------- */

@keyframes sobe {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}
.anima { animation: sobe 0.5s var(--mola) backwards; }

/* ---------- captura ---------- */

.captura { margin-bottom: 20px; position: relative; }

.captura input {
  width: 100%; font-family: var(--f-body); font-size: 14.5px;
  padding: 15px 19px; color: var(--tx);
  background: var(--vidro); backdrop-filter: blur(14px);
  border: 1px solid var(--borda); border-radius: 14px;
  transition: 0.25s var(--mola);
}
.captura input::placeholder { color: var(--tx3); }
.captura input:focus {
  outline: none;
  border-color: rgba(212, 178, 106, 0.55);
  background: var(--vidro-forte);
  box-shadow: 0 0 0 4px rgba(212, 178, 106, 0.09), 0 8px 30px rgba(0, 0, 0, 0.3);
}

.cap-eco {
  font-size: 13px; color: var(--tx2);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: 0.28s var(--mola); padding-left: 4px;
}
.cap-eco.ok, .cap-eco.erro { max-height: 46px; opacity: 1; margin-top: 9px; }
.cap-eco.ok b { color: var(--ouro-2); font-weight: 600; }
.cap-eco.erro { color: var(--vinho); }
.cap-eco .dica { color: var(--tx3); font-size: 12px; margin-left: 8px; }

/* ---------- cards do topo ---------- */

.topo-cards { display: grid; grid-template-columns: 1fr 208px; gap: 12px; margin-bottom: 22px; }

.card-grande {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(30, 60, 128, 0.5), rgba(12, 26, 60, 0.42));
  backdrop-filter: blur(16px);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 18px 22px; display: flex; align-items: center; gap: 24px;
}
.card-grande::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 160% at 8% 0%, rgba(212, 178, 106, 0.14), transparent 55%);
  pointer-events: none;
}

.cg-cabeca {
  position: relative; background: none; border: none; cursor: pointer;
  padding: 0 24px 0 0; border-right: 1px solid var(--borda);
  text-align: left; font-family: inherit; flex-shrink: 0;
}
.cg-cabeca b {
  font-family: var(--f-head); font-size: 40px; font-weight: 800; line-height: 1;
  display: block;
  background: linear-gradient(135deg, var(--ouro-3), var(--ouro));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cg-cabeca small { display: block; font-size: 11.5px; color: var(--tx2); margin-top: 5px; letter-spacing: 0.03em; }

.cg-quebra { display: flex; gap: 5px; flex: 1; flex-wrap: wrap; position: relative; }

.quebra {
  flex: 1; min-width: 84px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid transparent;
  border-radius: 11px; padding: 10px 14px; cursor: pointer;
  font-family: inherit; text-align: left; transition: 0.22s var(--mola);
}
.quebra:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }
.quebra b { font-family: var(--f-head); font-size: 21px; font-weight: 700; color: var(--tx); display: block; line-height: 1.1; }
.quebra span { font-size: 11px; color: var(--tx3); display: block; margin-top: 1px; }
.quebra.on {
  background: linear-gradient(135deg, var(--ouro-3), var(--ouro-2));
  box-shadow: 0 4px 18px rgba(212, 178, 106, 0.25);
}
.quebra.on b { color: var(--sobre-ouro); }
.quebra.on span { color: rgba(7, 15, 36, 0.72); }

.lado { display: grid; gap: 12px; }

.card-lado {
  background: var(--vidro); backdrop-filter: blur(14px);
  border: 1px solid var(--borda); border-radius: 14px;
  padding: 13px 18px; cursor: pointer; font-family: inherit; text-align: left;
  transition: 0.22s var(--mola);
}
.card-lado:hover { background: var(--vidro-forte); border-color: var(--borda-forte); transform: translateY(-1px); }
.card-lado b { font-family: var(--f-head); font-size: 25px; font-weight: 700; display: block; line-height: 1.1; }
.card-lado small { font-size: 11px; color: var(--tx3); display: block; margin-top: 2px; }
.card-lado.alerta { border-color: rgba(224, 82, 92, 0.4); }
.card-lado.alerta b { color: var(--vinho); }
.card-lado.alerta:not(.zerado) { animation: respira 3.4s ease-in-out infinite; }
.card-lado.alerta.zerado { border-color: var(--borda); }
.card-lado.alerta.zerado b { color: var(--tx3); }
.card-lado.on {
  background: linear-gradient(135deg, rgba(212, 178, 106, 0.22), rgba(212, 178, 106, 0.09));
  border-color: rgba(212, 178, 106, 0.5);
}
.card-lado.on b { color: var(--ouro-3); }

@keyframes respira {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 82, 92, 0); }
  50% { box-shadow: 0 0 22px 0 rgba(224, 82, 92, 0.18); }
}

.filtro-ativo {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--tx2); margin-bottom: 13px;
}
.filtro-ativo b { font-family: var(--f-head); font-weight: 700; color: var(--tx); }
.filtro-ativo button {
  background: none; border: none; font-family: var(--f-body); font-size: 12.5px;
  color: var(--ouro-2); cursor: pointer; font-weight: 600; padding: 0;
}
.filtro-ativo button:hover { color: var(--ouro-3); text-decoration: underline; }

/* ---------- tabela ---------- */

.painel {
  background: var(--vidro); backdrop-filter: blur(16px);
  border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden;
}

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left; font-family: var(--f-head);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--tx3); padding: 13px 16px; white-space: nowrap;
  border-bottom: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.022);
}
th.n, td.n { text-align: right; }
th.c, td.c { width: 34px; padding-right: 0; text-align: center; }
th.prog, td.prog { width: 140px; }

td { padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }

tr.linha { cursor: pointer; transition: background 0.18s; }
tr.linha:hover { background: rgba(255, 255, 255, 0.045); }
tr.linha.aberta { background: rgba(212, 178, 106, 0.06); }
tr.linha.aberta td { border-bottom-color: transparent; }

.td-nome b { display: block; font-family: var(--f-head); font-weight: 600; font-size: 14px; line-height: 1.25; }
.td-nome small { display: block; color: var(--tx3); font-size: 11px; margin-top: 1px; }

.mini-barra {
  display: inline-block; width: 84px; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.09); overflow: hidden; vertical-align: middle;
}
.mini-barra i {
  display: block; height: 100%; border-radius: 3px;
  box-shadow: 0 0 10px currentColor;
  animation: preenche 0.75s var(--mola) backwards;
}
@keyframes preenche { from { width: 0 !important; } }
.mini-pct { font-family: var(--f-head); font-size: 12px; font-weight: 700; color: var(--tx2); margin-left: 9px; vertical-align: middle; }
.sob-medida { font-size: 11.5px; color: var(--tx3); font-style: italic; }

.badge {
  display: inline-block; min-width: 23px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); color: var(--tx);
  font-family: var(--f-head); font-size: 11.5px; font-weight: 700; text-align: center;
}
.badge.urg { background: rgba(224, 82, 92, 0.22); color: var(--tom-vinho); box-shadow: 0 0 14px rgba(224, 82, 92, 0.2); }
.zero { color: var(--tx3); }
td.etapa { font-size: 12.5px; color: var(--tx2); }

/* ---------- semáforo ---------- */

.sinal {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0;
  position: relative;
}
.sinal::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  background: inherit; opacity: 0.25; filter: blur(4px);
}
.s-verde { background: var(--verde); }
.s-amarelo { background: var(--ambar); }
.s-vermelho { background: var(--vinho); animation: pisca 1.9s ease-in-out infinite; }
.s-cinza { background: rgba(255, 255, 255, 0.22); }
.s-cinza::after { opacity: 0; }

@keyframes pisca { 0%, 100% { opacity: 1; } 50% { opacity: 0.42; } }

/* ---------- chips ---------- */

.chip {
  font-size: 10px; font-weight: 700; padding: 3px 9px 3px 7px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
  text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
  border: 1px solid transparent;
}
.chip i { width: 5px; height: 5px; border-radius: 50%; display: inline-block; font-style: normal; flex-shrink: 0; }

.chip.trafego { background: rgba(35, 168, 120, 0.13); color: var(--tom-verde); border-color: rgba(35, 168, 120, 0.25); }
.chip.trafego i { background: var(--tom-verde); box-shadow: 0 0 6px var(--tom-verde); }
.chip.config { background: rgba(223, 174, 46, 0.13); color: var(--tom-ambar); border-color: rgba(223, 174, 46, 0.25); }
.chip.config i { background: var(--tom-ambar); }
.chip.pronto { background: rgba(74, 138, 224, 0.14); color: var(--tom-azul); border-color: rgba(74, 138, 224, 0.26); }
.chip.pronto i { background: var(--tom-azul); }
.chip.pausado { background: rgba(224, 82, 92, 0.14); color: var(--tom-vinho); border-color: rgba(224, 82, 92, 0.28); }
.chip.pausado i { background: var(--tom-vinho); }
.chip.neutro { background: rgba(255, 255, 255, 0.07); color: var(--tx2); border-color: var(--borda); }
.chip.neutro i { background: var(--tx3); }
.chip.encerrado { background: rgba(255, 255, 255, 0.05); color: var(--tx3); border-color: var(--borda); }
.chip.encerrado i { background: var(--tx3); }
.chip.ouro { background: rgba(212, 178, 106, 0.14); color: var(--ouro-2); border-color: rgba(212, 178, 106, 0.3); }
.chip.ouro i { background: var(--ouro-2); box-shadow: 0 0 6px var(--ouro-2); }

.tag-pers {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ouro-2); background: rgba(212, 178, 106, 0.13);
  padding: 1px 6px; border-radius: 999px; margin-left: 4px;
}

/* ---------- linha expandida ---------- */

tr.detalhe td { padding: 0 12px 12px; background: rgba(212, 178, 106, 0.035); }

.detalhe-caixa {
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--borda);
  border-radius: 12px; padding: 15px 17px;
  animation: sobe 0.32s var(--mola);
}

.det-linha {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid var(--borda);
}
.det-conta { display: flex; align-items: center; gap: 9px; font-size: 13px; flex: 1; flex-wrap: wrap; }
.det-sec { color: var(--tx3); font-size: 12px; }
.det-alerta { color: var(--tom-vinho); font-weight: 600; }
.det-botoes { display: flex; gap: 6px; }
.det-botoes button {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--borda); border-radius: 9px;
  font-family: var(--f-body); font-size: 12px; font-weight: 600; color: var(--tx2);
  cursor: pointer; padding: 6px 13px; transition: 0.2s var(--mola);
}
.det-botoes button:hover { border-color: rgba(212, 178, 106, 0.5); color: var(--ouro-2); background: rgba(212, 178, 106, 0.08); }
.det-botoes .bt-escopo.on {
  background: linear-gradient(135deg, var(--ouro-3), var(--ouro-2));
  border-color: transparent; color: var(--sobre-ouro);
}

.escopo-aviso {
  background: rgba(212, 178, 106, 0.1); border: 1px solid rgba(212, 178, 106, 0.22);
  border-radius: 9px; padding: 9px 13px; font-size: 12px; color: var(--ouro-2); margin-bottom: 13px;
}

.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
.check-fase {
  font-size: 10px; font-weight: 700; color: var(--ouro-2);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px;
}
.check-item {
  display: flex; align-items: center; gap: 8px; padding: 3.5px 0;
  font-size: 12.5px; color: var(--tx2); cursor: pointer; transition: color 0.15s;
}
.check-item:hover { color: var(--tx); }
.box-mini {
  width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--borda-forte);
  flex-shrink: 0; position: relative; transition: 0.2s var(--mola);
}
.box-mini.on {
  background: var(--verde); border-color: var(--verde);
  box-shadow: 0 0 10px rgba(35, 168, 120, 0.4);
}
.box-mini.on::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 3.5px; height: 7.5px;
  border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg);
}
.box-mini.na { border-style: dashed; opacity: 0.4; }
.check-item:hover .box-mini { border-color: var(--verde); }
.check-item.feito span { color: var(--tx3); }
.check-item.fora-escopo { opacity: 0.3; cursor: default; }
.check-item.fora-escopo span { text-decoration: line-through; }
.check-item.escopo .box-mini.on { background: var(--ouro); border-color: var(--ouro); box-shadow: 0 0 10px rgba(184, 146, 79, 0.4); }
.check-item.escopo:hover .box-mini { border-color: var(--ouro-2); }
.check-item.escopo.fora { opacity: 0.42; }

/* ---------- seções e tarefas ---------- */

.secao { margin-bottom: 26px; }
.secao-topo {
  display: flex; align-items: baseline; gap: 10px;
  padding-left: 12px; border-left: 3px solid var(--ouro); margin-bottom: 13px;
}
.secao-topo h2 { font-family: var(--f-head); font-size: 14.5px; font-weight: 700; }
.secao-topo .conta { font-size: 12px; color: var(--tx3); font-weight: 600; }

.tarefas { display: flex; flex-direction: column; gap: 7px; }
.tarefas.dentro { margin-top: 13px; }

.tarefa {
  background: var(--vidro); backdrop-filter: blur(10px);
  border: 1px solid var(--borda); border-radius: 12px;
  padding: 12px 15px; display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; transition: 0.2s var(--mola);
}
.tarefa:hover { background: var(--vidro-forte); border-color: var(--borda-forte); }
.tarefa.urg { border-left: 3px solid var(--vinho); }
.tarefa-txt { flex: 1; line-height: 1.35; }
.tarefa-txt small {
  display: block; color: var(--ouro-2); font-size: 11.5px; font-weight: 600;
  margin-top: 2px; cursor: pointer;
}
.tarefa-txt small:hover { color: var(--ouro-3); text-decoration: underline; }

.tick {
  width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--borda-forte);
  background: none; cursor: pointer; flex-shrink: 0; padding: 0; transition: 0.2s var(--mola);
}
.tick:hover { border-color: var(--verde); background: rgba(35, 168, 120, 0.15); box-shadow: 0 0 12px rgba(35, 168, 120, 0.25); }

.apagar {
  background: none; border: none; color: var(--tx3); font-size: 19px;
  cursor: pointer; padding: 0 3px; line-height: 1; transition: 0.18s;
}
.apagar:hover { color: var(--vinho); }

.tarefa.feita { opacity: 0.45; }
.tarefa.feita span { text-decoration: line-through; }

.add-tarefa {
  width: 100%; font-family: var(--f-body); font-size: 13.5px; color: var(--tx);
  padding: 11px 14px; border: 1px dashed var(--borda-forte); border-radius: 10px;
  background: transparent; transition: 0.2s var(--mola);
}
.add-tarefa:focus { outline: none; border-color: var(--ouro-2); border-style: solid; background: var(--vidro); }
.add-tarefa::placeholder { color: var(--tx3); }

.nada { color: var(--tx3); font-size: 13px; padding: 14px 2px 2px; font-style: italic; }

details.feitas { margin-top: 13px; }
details.feitas summary {
  cursor: pointer; font-size: 12.5px; color: var(--tx3); font-weight: 600;
  padding: 5px 0; list-style: none;
}
details.feitas summary::-webkit-details-marker { display: none; }
details.feitas summary::before { content: '▸ '; }
details.feitas[open] summary::before { content: '▾ '; }
details.feitas .tarefa { margin-top: 6px; }

/* ---------- ficha ---------- */

.voltar {
  background: none; border: none; font-family: var(--f-body); font-size: 13px;
  font-weight: 500; color: var(--tx3); cursor: pointer; padding: 0; margin-bottom: 16px;
  transition: 0.18s;
}
.voltar:hover { color: var(--ouro-2); }

.ficha-topo {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(30, 60, 128, 0.34), rgba(12, 26, 60, 0.3));
  backdrop-filter: blur(16px);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 24px 26px; margin-bottom: 15px;
}
.ficha-topo::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(110% 150% at 6% 0%, rgba(212, 178, 106, 0.13), transparent 52%);
  pointer-events: none;
}
.ficha-topo h1 { font-family: var(--f-head); font-size: 23px; font-weight: 700; line-height: 1.2; position: relative; }
.ficha-sub { color: var(--tx3); font-size: 13.5px; margin-top: 3px; position: relative; }
.ficha-chips { margin-top: 14px; display: flex; gap: 6px; flex-wrap: wrap; position: relative; }

.resumo { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--borda); display: grid; gap: 12px; position: relative; }
.resumo-item { display: grid; grid-template-columns: 118px 1fr; gap: 14px; align-items: baseline; }
.resumo-rot { font-size: 10.5px; color: var(--tx3); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.resumo-val { font-size: 14px; line-height: 1.5; }

.colunas { display: grid; grid-template-columns: 1.1fr 1fr; gap: 15px; align-items: start; }

.bloco {
  background: var(--vidro); backdrop-filter: blur(14px);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 20px 22px; margin-bottom: 15px;
}
.bloco h3 {
  font-family: var(--f-head); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--tx3); margin-bottom: 15px;
}
.h3-sec { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--tx3); }

.fase { margin-bottom: 16px; }
.fase:last-child { margin-bottom: 0; }
.fase-nome {
  font-size: 10.5px; font-weight: 700; color: var(--ouro-2);
  margin-bottom: 6px; letter-spacing: 0.08em; text-transform: uppercase;
}

.step { display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; font-size: 13.5px; color: var(--tx2); transition: color 0.15s; }
.step:hover { color: var(--tx); }
.step .box {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--borda-forte);
  flex-shrink: 0; position: relative; transition: 0.2s var(--mola);
}
.step.feito .box { background: var(--verde); border-color: var(--verde); box-shadow: 0 0 12px rgba(35, 168, 120, 0.35); }
.step.feito .box::after {
  content: ''; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8.5px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.step.feito span { color: var(--tx3); }
.step:hover .box { border-color: var(--verde); }

.dado { display: grid; grid-template-columns: 102px 1fr; gap: 12px; padding: 7px 0; font-size: 13.5px; align-items: baseline; }
.dado-rot { color: var(--tx3); font-size: 12px; }
.dado-val { word-break: break-word; }
.dado-val.editavel {
  border: 1px dashed var(--borda-forte); border-radius: 8px; padding: 4px 10px;
  cursor: pointer; transition: 0.2s var(--mola); display: inline-block;
}
.dado-val.editavel:hover { border-color: var(--ouro-2); border-style: solid; color: var(--ouro-2); }
.dado-val.vazio { color: var(--tx3); font-style: italic; }

.pessoa { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 13.5px; }
.pessoa:last-child { border-bottom: none; }
.pessoa b { font-weight: 600; }
.pessoa small { display: block; color: var(--tx3); font-size: 12px; margin-top: 1px; }

.notas { font-size: 13.5px; line-height: 1.65; color: var(--tx2); white-space: pre-wrap; }

/* ---------- tráfego ---------- */

.periodos { display: flex; gap: 5px; margin-bottom: 20px; flex-wrap: wrap; }
.periodos button {
  background: var(--vidro); backdrop-filter: blur(10px);
  border: 1px solid var(--borda); border-radius: 10px;
  font-family: var(--f-body); font-size: 13px; font-weight: 500; color: var(--tx2);
  padding: 8px 17px; cursor: pointer; transition: 0.22s var(--mola);
}
.periodos button:hover { border-color: var(--borda-forte); color: var(--tx); }
.periodos button.on {
  background: linear-gradient(135deg, var(--ouro-3), var(--ouro-2));
  border-color: transparent; color: var(--sobre-ouro); font-weight: 700;
  box-shadow: 0 3px 16px rgba(212, 178, 106, 0.25);
}
.periodos .atualizar { margin-left: auto; }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }

.num {
  background: var(--vidro); backdrop-filter: blur(14px);
  border: 1px solid var(--borda); border-radius: 14px; padding: 16px 18px;
  transition: 0.22s var(--mola);
}
.num:hover { border-color: var(--borda-forte); }
.num b {
  font-family: var(--f-head); display: block; font-weight: 800; line-height: 1.15;
  /* encolhe sozinho em card estreito para valor grande não vazar */
  font-size: clamp(17px, 2.1vw, 25px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.num small { display: block; font-size: 11px; color: var(--tx3); margin-top: 4px; }
.num.destaque {
  background: linear-gradient(135deg, rgba(30, 60, 128, 0.45), rgba(12, 26, 60, 0.4));
  border-color: rgba(212, 178, 106, 0.28);
}
.num.destaque b {
  background: linear-gradient(135deg, var(--ouro-3), var(--ouro));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

tfoot td {
  font-weight: 700; font-family: var(--f-head);
  background: rgba(255, 255, 255, 0.035); border-top: 1px solid var(--borda);
}
tbody tr[data-id] { cursor: pointer; }

/* ---------- resultados ---------- */

.faixa-aviso {
  background: rgba(212, 178, 106, 0.09);
  border: 1px solid rgba(212, 178, 106, 0.24);
  border-left: 3px solid var(--ouro);
  border-radius: 12px; padding: 13px 17px; margin-bottom: 18px;
  font-size: 12.5px; color: var(--tx2); line-height: 1.55;
}
.faixa-aviso b { color: var(--ouro-2); font-weight: 700; }

tr.grupo th {
  padding: 8px 16px 5px; border-bottom: none;
  font-size: 9.5px; letter-spacing: 0.12em; text-align: center;
}
tr.grupo th.g-meta { color: var(--tx2); border-bottom: 2px solid rgba(74, 138, 224, 0.4); }
tr.grupo th.g-tintim { color: var(--tx3); border-bottom: 2px solid rgba(212, 178, 106, 0.32); }

.vazio-tintim { color: rgba(233, 237, 247, 0.16); }
.num.aguardando { border-style: dashed; opacity: 0.62; }
.num.aguardando b { color: var(--tx3); }

tr.conjunto td { background: rgba(0, 0, 0, 0.16); font-size: 13px; padding-top: 9px; padding-bottom: 9px; }
.td-conj { padding-left: 34px !important; color: var(--tx2); position: relative; }
.td-conj::before {
  content: ''; position: absolute; left: 18px; top: 50%;
  width: 8px; height: 1px; background: var(--borda-forte);
}

/* gráfico de barras diário */
.barras {
  display: flex; align-items: flex-end; gap: 3px; height: 112px;
  padding-top: 6px;
}
.barra-dia { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; cursor: default; }
.barra-dia i {
  display: block; width: 100%; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--ouro-2), rgba(184, 146, 79, 0.35));
  transition: 0.2s var(--mola);
  animation: cresce 0.6s var(--mola) backwards;
}
.barra-dia:hover i { background: linear-gradient(180deg, var(--ouro-3), var(--ouro)); }
.barra-dia span {
  font-size: 8.5px; color: var(--tx3); text-align: center;
  margin-top: 4px; font-variant-numeric: tabular-nums;
}
@keyframes cresce { from { height: 0 !important; } }

/* ---------- modal ---------- */

.modal-fundo {
  position: fixed; inset: 0; z-index: 200; padding: 24px;
  background: rgba(4, 9, 24, 0.72); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: aparece 0.2s ease;
}
@keyframes aparece { from { opacity: 0; } }

.modal {
  width: 100%; max-width: 520px; padding: 28px 30px;
  background: linear-gradient(160deg, rgba(26, 48, 100, 0.9), rgba(10, 20, 46, 0.94));
  backdrop-filter: blur(20px);
  border: 1px solid var(--borda-forte); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  animation: sobe 0.34s var(--mola);
}
.modal h2 { font-family: var(--f-head); font-size: 19px; font-weight: 700; margin-bottom: 20px; }

.campo { display: block; margin-bottom: 18px; }
.campo > span {
  display: block; font-size: 10.5px; font-weight: 600; color: var(--tx3);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px;
}
.campo input {
  width: 100%; font-family: var(--f-body); font-size: 14.5px; color: var(--tx);
  padding: 12px 15px; background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--borda); border-radius: 10px; transition: 0.2s;
}
.campo input:focus { outline: none; border-color: var(--ouro-2); box-shadow: 0 0 0 3px rgba(212, 178, 106, 0.13); }

.tipos { display: grid; gap: 8px; }
.tipo {
  background: rgba(255, 255, 255, 0.04); border: 1.5px solid var(--borda);
  border-radius: 12px; padding: 13px 16px; cursor: pointer;
  text-align: left; font-family: inherit; transition: 0.22s var(--mola); color: var(--tx);
}
.tipo:hover { border-color: var(--borda-forte); background: rgba(255, 255, 255, 0.07); }
.tipo.on { border-color: var(--ouro-2); background: rgba(212, 178, 106, 0.12); }
.tipo b { font-family: var(--f-head); font-size: 14px; font-weight: 700; display: block; }
.tipo small { display: block; font-size: 12px; color: var(--tx2); margin-top: 3px; line-height: 1.45; }

.modal-bt { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; }
.modal-bt button {
  font-family: var(--f-body); font-size: 13.5px; font-weight: 600;
  padding: 11px 22px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--borda); background: rgba(255, 255, 255, 0.05);
  color: var(--tx2); transition: 0.22s var(--mola);
}
.modal-bt .mb-cancelar:hover { border-color: var(--borda-forte); color: var(--tx); }
.modal-bt .mb-criar {
  background: linear-gradient(135deg, var(--ouro-3), var(--ouro-2));
  border-color: transparent; color: var(--sobre-ouro); font-weight: 700;
}
.modal-bt .mb-criar:hover { box-shadow: 0 5px 22px rgba(212, 178, 106, 0.32); }

/* ---------- rodapé ---------- */

.rodape-check {
  margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--borda);
  font-size: 12px; color: var(--tx3); display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.rodape-check code { background: rgba(255, 255, 255, 0.07); padding: 2px 7px; border-radius: 5px; }
.rodape-check button {
  background: var(--vidro); border: 1px solid var(--borda); border-radius: 9px;
  font-family: var(--f-body); font-size: 12px; font-weight: 500; color: var(--tx2);
  padding: 7px 15px; cursor: pointer; margin-left: auto; transition: 0.22s var(--mola);
}
.rodape-check button:hover { border-color: rgba(212, 178, 106, 0.5); color: var(--ouro-2); }
.rodape-check button:disabled { opacity: 0.5; cursor: default; }

.vazio-msg {
  color: var(--tx3); font-size: 13.5px; padding: 30px; text-align: center;
  background: var(--vidro); border: 1px dashed var(--borda); border-radius: var(--raio);
}

/* ---------- cards de resultado ---------- */

.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }

.res-card {
  background: var(--vidro); backdrop-filter: blur(14px);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 15px 18px; cursor: pointer; transition: 0.22s var(--mola);
}
.res-card:hover { background: var(--vidro-forte); border-color: rgba(212, 178, 106, 0.45); transform: translateY(-2px); }

.res-topo { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 12px; }
.res-topo .sinal { margin-top: 5px; }
.res-topo b { font-family: var(--f-head); font-size: 14px; font-weight: 600; display: block; line-height: 1.25; }
.res-topo small { color: var(--tx3); font-size: 11px; }

.res-nums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.rn small {
  display: block; font-size: 8.5px; color: var(--tx3);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; white-space: nowrap;
}
.rn b { font-family: var(--f-head); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.rn.g b { color: var(--ouro-2); }
.rn.tintim b { color: rgba(233, 237, 247, 0.18); }

/* balões de métrica do gráfico */
.bloco-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.bloco-topo h3 { margin-bottom: 0; }
.baloes { display: flex; gap: 6px; flex-wrap: wrap; }
.balao {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--borda); border-radius: 999px;
  color: var(--tx2); font-family: var(--f-body); font-size: 12px; font-weight: 500;
  padding: 6px 14px; cursor: pointer; transition: 0.2s var(--mola);
}
.balao:hover { border-color: var(--borda-forte); color: var(--tx); }
.balao.on {
  background: linear-gradient(135deg, var(--ouro-3), var(--ouro-2));
  border-color: transparent; color: var(--sobre-ouro); font-weight: 700;
}
.balao.trava { opacity: 0.42; cursor: default; }
.balao.trava:hover { border-color: var(--borda); color: var(--tx2); }

/* atalho "Mês" na visão geral */
.link-res {
  background: rgba(212, 178, 106, 0.1); border: 1px solid rgba(212, 178, 106, 0.25);
  border-radius: 8px; color: var(--ouro-2);
  font-family: var(--f-head); font-size: 12px; font-weight: 600;
  padding: 4px 10px; cursor: pointer; transition: 0.18s; white-space: nowrap;
}
.link-res:hover { background: rgba(212, 178, 106, 0.2); color: var(--ouro-3); }

/* ---------- otimização ---------- */

.sub-abas { display: flex; gap: 5px; margin-top: 15px; position: relative; }
.sub-abas button {
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--borda); border-radius: 9px;
  color: var(--tx2); font-family: var(--f-body); font-size: 12.5px; font-weight: 500;
  padding: 7px 16px; cursor: pointer; transition: 0.2s var(--mola);
}
.sub-abas button:hover { color: var(--tx); background: rgba(255, 255, 255, 0.1); }
.sub-abas button.on {
  background: linear-gradient(135deg, var(--ouro-3), var(--ouro-2));
  border-color: transparent; color: var(--sobre-ouro); font-weight: 700;
}

/* barra da sessão de otimização */
.sessao-barra {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--vidro); backdrop-filter: blur(12px);
  border: 1px solid var(--borda); border-left: 3px solid var(--tx3);
  border-radius: 13px; padding: 12px 18px; margin-bottom: 12px;
}
.sessao-barra.aberta { border-left-color: var(--ambar); background: rgba(223, 174, 46, 0.06); }
.sessao-barra.ok { border-left-color: var(--verde); background: rgba(35, 168, 120, 0.06); }
.sessao-txt { flex: 1; min-width: 260px; }
.sessao-txt b { font-family: var(--f-head); font-size: 13.5px; font-weight: 700; display: block; }
.sessao-txt span { font-size: 12px; color: var(--tx2); }
.sessao-txt em { color: var(--tom-ambar); font-style: normal; font-weight: 600; }
.sessao-bts { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sessao-idade { font-size: 11px; color: var(--tx3); }
.sessao-bts button {
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--borda); border-radius: 9px;
  font-family: var(--f-body); font-size: 12px; font-weight: 600; color: var(--tx2);
  padding: 7px 14px; cursor: pointer; transition: 0.2s var(--mola);
}
.sessao-bts button:hover:not(:disabled) { border-color: var(--ouro-2); color: var(--ouro-2); background: rgba(212, 178, 106, 0.1); }
.sessao-bts button:disabled { opacity: 0.45; cursor: default; }
.sessao-bts .bt-nova:hover { border-color: var(--vinho); color: var(--tom-vinho); background: rgba(224, 82, 92, 0.1); }

.sit {
  font-size: 8.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.05em; margin-left: 8px; white-space: nowrap;
}
.sit.aplicado { background: rgba(35, 168, 120, 0.16); color: var(--tom-verde); }
.sit.pendente { background: rgba(223, 174, 46, 0.16); color: var(--tom-ambar); }

/* faixa de orçamento */
.orc-barra {
  background: var(--vidro); backdrop-filter: blur(14px);
  border: 1px solid var(--borda); border-left: 3px solid var(--ouro);
  border-radius: 14px; padding: 14px 20px; margin-bottom: 18px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.orc-lado { display: flex; align-items: center; gap: 16px; }
.orc-item small { display: block; font-size: 9.5px; color: var(--tx3); text-transform: uppercase; letter-spacing: 0.06em; }
.orc-item b { font-family: var(--f-head); font-size: 20px; font-weight: 800; }
.orc-item b.novo { color: var(--ouro-2); }
.orc-seta { color: var(--tx3); font-size: 18px; }
.orc-delta {
  font-family: var(--f-head); font-size: 13px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--tx2);
}
.orc-delta.sobe { background: rgba(35, 168, 120, 0.15); color: var(--tom-verde); }
.orc-delta.desce { background: rgba(224, 82, 92, 0.15); color: var(--tom-vinho); }
.orc-delta span { opacity: 0.7; margin-left: 5px; font-weight: 500; }
.orc-dist { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.orc-vazio { font-size: 12px; color: var(--tx3); font-style: italic; }

.dec-chip {
  font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
  border: 1px solid transparent;
}
.dec-chip.escalar { background: rgba(35, 168, 120, 0.14); color: var(--tom-verde); border-color: rgba(35, 168, 120, 0.3); }
.dec-chip.manter { background: rgba(74, 138, 224, 0.14); color: var(--tom-azul); border-color: rgba(74, 138, 224, 0.3); }
.dec-chip.diminuir { background: rgba(223, 174, 46, 0.14); color: var(--tom-ambar); border-color: rgba(223, 174, 46, 0.3); }
.dec-chip.desativar { background: rgba(224, 82, 92, 0.14); color: var(--tom-vinho); border-color: rgba(224, 82, 92, 0.3); }
.dec-chip.desligado { background: rgba(255, 255, 255, 0.06); color: var(--tx3); border-color: var(--borda); }

/* campanha expansível, no espírito do gerenciador */
.camp-lista { display: flex; flex-direction: column; gap: 9px; }

.camp-bloco {
  background: var(--vidro); backdrop-filter: blur(14px);
  border: 1px solid var(--borda); border-left: 3px solid rgba(212, 178, 106, 0.5);
  border-radius: 13px; overflow: hidden; transition: 0.2s var(--mola);
}
.camp-bloco:hover { border-color: var(--borda-forte); border-left-color: var(--ouro-2); }
.camp-bloco.aberta { border-left-color: var(--ouro-2); background: rgba(255, 255, 255, 0.06); }

.camp-cabeca {
  display: flex; align-items: center; gap: 16px; padding: 13px 18px;
  cursor: pointer; flex-wrap: wrap;
}
.camp-nome { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 230px; }
.camp-seta { color: var(--ouro-2); font-size: 11px; margin-top: 3px; }
.camp-nome b { font-family: var(--f-head); font-size: 13.5px; font-weight: 600; display: block; line-height: 1.3; }
.camp-nome small { font-size: 11px; color: var(--tx3); }
.camp-nome small em { color: var(--ouro-2); font-style: normal; font-weight: 600; }

.camp-nums { display: flex; gap: 20px; }
.camp-nums div { text-align: right; min-width: 62px; }
.camp-nums small { display: block; font-size: 9px; color: var(--tx3); text-transform: uppercase; letter-spacing: 0.06em; }
.camp-nums b { font-family: var(--f-head); font-size: 14px; font-weight: 700; }
.camp-nums b.ap { color: rgba(233, 237, 247, 0.18); }

.conj-tabela { width: 100%; border-collapse: collapse; background: rgba(0, 0, 0, 0.18); }
.conj-tabela th {
  font-size: 9px; padding: 8px 12px; background: transparent;
  border-bottom: 1px solid var(--borda); border-top: 1px solid var(--borda);
}
.conj-tabela td { padding: 7px 12px; font-size: 12.5px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.conj-tabela tr:last-child td { border-bottom: none; }
.conj-tabela tr.off { opacity: 0.55; }
.td-conj-nome { color: var(--tx2); max-width: 250px; }
.conj-tabela .forte { font-weight: 600; }
.conj-tabela .apagado { color: var(--tx3); }

.st-conj {
  font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.st-conj.on { background: rgba(35, 168, 120, 0.16); color: var(--tom-verde); }
.st-conj.off { background: rgba(255, 255, 255, 0.07); color: var(--tx3); }

.inp-orc {
  width: 68px; text-align: right; font-family: var(--f-head); font-size: 12.5px; font-weight: 600;
  padding: 5px 8px; border-radius: 7px; border: 1px solid var(--borda);
  background: rgba(0, 0, 0, 0.25); color: var(--ouro-2); transition: 0.18s;
}
.inp-orc:focus { outline: none; border-color: var(--ouro-2); background: rgba(0, 0, 0, 0.4); }
.inp-orc::-webkit-outer-spin-button, .inp-orc::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sel-decisao {
  font-family: var(--f-body); font-size: 11.5px; font-weight: 600;
  padding: 5px 9px; border-radius: 7px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); color: var(--tx2);
  border: 1px solid var(--borda); min-width: 148px; transition: 0.18s;
}
.sel-decisao option { background: #0f1c3a; color: var(--tx); }
.sel-decisao.escalar { background: rgba(35, 168, 120, 0.18); color: var(--tom-verde); border-color: rgba(35, 168, 120, 0.45); }
.sel-decisao.manter { background: rgba(74, 138, 224, 0.18); color: var(--tom-azul); border-color: rgba(74, 138, 224, 0.45); }
.sel-decisao.diminuir { background: rgba(223, 174, 46, 0.18); color: var(--tom-ambar); border-color: rgba(223, 174, 46, 0.45); }
.sel-decisao.desativar { background: rgba(224, 82, 92, 0.18); color: var(--tom-vinho); border-color: rgba(224, 82, 92, 0.45); }
.sel-decisao.desligado { background: rgba(255, 255, 255, 0.05); color: var(--tx3); }

/* ---------- densidade da visão geral (todos numa tela) ---------- */

main { padding: 18px 26px 60px; }
.captura { margin-bottom: 14px; }
.captura input { padding: 12px 16px; font-size: 14px; }
.topo-cards { margin-bottom: 16px; }
.card-grande { padding: 14px 18px; gap: 18px; }
.cg-cabeca { padding-right: 18px; }
.cg-cabeca b { font-size: 33px; }
.cg-cabeca small { font-size: 11px; margin-top: 3px; }
.quebra { padding: 8px 12px; min-width: 76px; }
.quebra b { font-size: 18px; }
.card-lado { padding: 10px 16px; }
.card-lado b { font-size: 20px; }
table.geral th { padding: 9px 12px; }
table.geral td { padding: 7px 12px; }
table.geral .td-nome b { font-size: 13px; }
table.geral .td-nome small { font-size: 10.5px; }
.mini-barra { width: 68px; }
table.geral td.etapa { font-size: 11.5px; }
table.geral .chip { font-size: 9px; padding: 2px 8px 2px 6px; }

@media (max-width: 880px) {
  .colunas { grid-template-columns: 1fr; }
  .topo-cards { grid-template-columns: 1fr; }
  .lado { grid-template-columns: 1fr 1fr; }
  main { padding: 18px; }
  header { padding: 0 16px; gap: 12px; }
  .card-grande { flex-direction: column; align-items: stretch; gap: 16px; }
  .cg-cabeca { border-right: none; border-bottom: 1px solid var(--borda); padding: 0 0 14px; }
  .resumo-item { grid-template-columns: 1fr; gap: 3px; }
}

/* ================================================================
   REDESIGN FABLE — o briefing, a serifa e o aquecimento geral
   ================================================================ */

/* ---------- hero: o briefing do dia ---------- */

.brief {
  position: relative;
  background: linear-gradient(165deg, rgba(244, 236, 220, 0.055), rgba(244, 236, 220, 0.018) 55%);
  border: 1px solid var(--borda);
  border-radius: 20px;
  padding: 30px 34px 0;
  margin-bottom: 18px;
  overflow: hidden;
}
.brief::before {
  content: '';
  position: absolute; top: 0; left: 34px; right: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 195, 139, 0.55), transparent);
}
.brief::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 120% at 12% -20%, rgba(200, 169, 97, 0.08), transparent 55%);
}

.brief-data {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ouro-2);
}
.brief h1 {
  font-family: var(--f-display);
  font-size: 34px; font-weight: 700; line-height: 1.12;
  letter-spacing: 0.005em; margin-top: 6px;
}
.brief .frase {
  color: var(--tx2); font-size: 14.5px; margin-top: 7px; max-width: 72ch; line-height: 1.6;
}

.avisos { margin-top: 18px; display: flex; flex-direction: column; gap: 7px; position: relative; }

.aviso {
  display: flex; align-items: center; gap: 12px;
  background: rgba(5, 8, 18, 0.35);
  border: 1px solid var(--borda);
  border-left: 2px solid var(--tx3);
  border-radius: 11px;
  padding: 10px 12px 10px 16px;
  font-size: 13px; color: var(--tx2); line-height: 1.45;
  cursor: pointer; transition: 0.2s var(--mola);
}
.aviso:hover { background: rgba(5, 8, 18, 0.55); border-color: var(--borda-forte); }
.aviso.alto { border-left-color: var(--vinho); }
.aviso.medio { border-left-color: var(--ambar); }
.aviso b { color: var(--tx); font-weight: 600; }
.aviso .fechar {
  margin-left: auto; flex-shrink: 0;
  background: none; border: none; color: var(--tx3);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 3px 7px;
  border-radius: 6px; transition: 0.18s;
}
.aviso .fechar:hover { color: var(--vinho); background: rgba(205, 95, 99, 0.12); }

.avisos-mais {
  background: none; border: none; font-family: var(--f-body);
  font-size: 12px; font-weight: 600; color: var(--ouro-2);
  cursor: pointer; padding: 2px 4px; text-align: left;
}
.avisos-mais:hover { color: var(--ouro-3); }

.brief-strip {
  display: flex; margin: 22px -34px 0;
  border-top: 1px solid var(--borda);
  position: relative; flex-wrap: wrap;
}
.stat {
  flex: 1; min-width: 92px;
  background: none; border: none; border-right: 1px solid var(--borda);
  padding: 15px 8px 17px; cursor: pointer; font-family: inherit;
  text-align: center; transition: 0.22s var(--mola);
}
.stat:last-child { border-right: none; }
.stat b {
  font-family: var(--f-display);
  font-size: 27px; font-weight: 700; line-height: 1;
  display: block; color: var(--tx);
}
.stat span {
  display: block; margin-top: 6px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tx3);
}
.stat:hover { background: rgba(244, 236, 220, 0.045); }
.stat.on { background: rgba(200, 169, 97, 0.1); box-shadow: inset 0 2px 0 var(--ouro); }
.stat.on b { color: var(--ouro-3); }
.stat.on span { color: var(--ouro-2); }
.stat.total b { color: var(--ouro-2); }
.stat.risco b { color: var(--vinho); }
.stat.risco.zerada b { color: var(--tx3); }

/* ---------- a serifa nos lugares de honra ---------- */

.ficha-topo h1 { font-family: var(--f-display); font-size: 28px; font-weight: 700; letter-spacing: 0.005em; }
.num b { font-family: var(--f-display); font-weight: 700; font-size: 25px; }
.orc-item b { font-family: var(--f-display); font-weight: 700; font-size: 21px; }
.modal h2 { font-family: var(--f-display); font-size: 23px; font-weight: 700; }

/* ---------- aquecimento do restante ---------- */

header {
  background: rgba(8, 12, 24, 0.78);
  border-bottom-color: rgba(234, 222, 198, 0.08);
}
.marca { font-size: 12.5px; letter-spacing: 0.24em; }

nav button.on { box-shadow: 0 3px 18px rgba(200, 169, 97, 0.22); }

.painel { background: rgba(244, 236, 220, 0.03); }
th { letter-spacing: 0.13em; background: rgba(244, 236, 220, 0.02); }
tbody tr:hover, tr.linha:hover { background: rgba(200, 169, 97, 0.045); }

.captura input { border-radius: 13px; background: rgba(244, 236, 220, 0.04); }

.sinal::after { opacity: 0.2; }

::selection { background: rgba(200, 169, 97, 0.32); }

@media (max-width: 880px) {
  .brief { padding: 22px 22px 0; }
  .brief-strip { margin: 18px -22px 0; }
  .brief h1 { font-size: 29px; }
  .stat { min-width: 33%; border-bottom: 1px solid var(--borda); }
}

/* ================================================================
   HERO EM DUAS COLUNAS + CARDS COM ANEL + TEMA CLARO
   ================================================================ */

/* ---------- hero: saudação à esquerda, atenção à direita ---------- */

.brief-corpo {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 30px; align-items: start;
}
.brief-esq { padding-bottom: 4px; }

.avisos { margin-top: 2px; display: flex; flex-direction: column; gap: 6px; }
.avisos-tit {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--tx3); margin-bottom: 3px;
}
.aviso {
  padding: 8px 10px 8px 14px; font-size: 12.5px; border-radius: 10px;
}
.aviso > span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 980px) {
  .brief-corpo { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- cards de estruturação com anel ---------- */

.est-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 12px;
}

.est-card {
  background: var(--vidro); backdrop-filter: blur(14px);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 15px 16px 13px;
  cursor: pointer; transition: 0.22s var(--mola);
}
.est-card:hover { background: var(--vidro-forte); border-color: var(--borda-forte); transform: translateY(-2px); }
.est-card.aberta {
  grid-column: 1 / -1; transform: none; cursor: default;
  border-color: rgba(200, 169, 97, 0.4);
  background: var(--vidro-forte);
}

.est-topo { display: flex; align-items: flex-start; gap: 13px; }

.anel {
  width: 52px; height: 52px; border-radius: 50%;
  flex-shrink: 0; position: relative;
}
.anel i {
  position: absolute; inset: 5px; border-radius: 50%;
  background: var(--painel-solido);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-head); font-size: 12px; font-weight: 700; font-style: normal;
  color: var(--tx);
}
.anel.sob { background: transparent; border: 2px dashed var(--borda-forte); }
.anel.sob i { inset: 3px; color: var(--tx3); }

.est-id { flex: 1; min-width: 0; }
.est-id b {
  display: block; font-family: var(--f-head);
  font-size: 14px; font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.est-card.aberta .est-id b { white-space: normal; }
.est-id small {
  display: block; color: var(--tx3); font-size: 11px; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.est-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }

.est-topo .sinal { margin-top: 4px; }

.est-rod {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--borda);
}
.est-etapa {
  font-size: 11.5px; color: var(--tx2); line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.est-extra { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

.est-detalhe { margin-top: 14px; cursor: default; }

/* ---------- tema claro: papel de algodão e dourado de tinta ---------- */

[data-modo="claro"] {
  --ouro: #9a7a35;
  --ouro-2: #7e6222;
  --ouro-3: #634c14;

  --fundo: #f4f0e6;
  --vidro: rgba(255, 255, 255, 0.55);
  --vidro-forte: rgba(255, 255, 255, 0.8);
  --borda: rgba(60, 48, 25, 0.13);
  --borda-forte: rgba(60, 48, 25, 0.24);

  --tx: #241f14;
  --tx2: rgba(36, 31, 20, 0.64);
  --tx3: rgba(36, 31, 20, 0.4);

  --verde: #1d7a5c;
  --ambar: #96701a;
  --azul: #3d6cb0;
  --vinho: #b23f45;

  --sobre-ouro: #faf6ea;
  --anel-trilha: rgba(36, 31, 20, 0.1);
  --painel-solido: #fbf8f1;
  --tom-verde: #156a4e;
  --tom-ambar: #8a6614;
  --tom-vinho: #a33a40;
  --tom-azul: #2f5a99;
}

[data-modo="claro"] body {
  background: linear-gradient(180deg, #faf7ef 0%, #f4f0e6 42%, #ece6d6 100%) fixed;
}

[data-modo="claro"] .cenario-luz {
  background:
    radial-gradient(95% 60% at 50% -12%, rgba(154, 122, 53, 0.12), transparent 60%),
    radial-gradient(42% 30% at 88% -4%, rgba(154, 122, 53, 0.05), transparent);
}
[data-modo="claro"] .cenario-grao { opacity: 0.3; }
[data-modo="claro"] .cenario-moldura { border-color: rgba(126, 98, 34, 0.28); }
[data-modo="claro"] .cenario-moldura::after { border-color: rgba(126, 98, 34, 0.1); }

[data-modo="claro"] header {
  background: rgba(250, 247, 239, 0.82);
  border-bottom-color: rgba(60, 48, 25, 0.12);
}
[data-modo="claro"] nav button.on { box-shadow: 0 3px 14px rgba(126, 98, 34, 0.3); }

[data-modo="claro"] .brief {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.45) 60%);
}
[data-modo="claro"] .aviso { background: rgba(36, 31, 20, 0.045); }
[data-modo="claro"] .aviso:hover { background: rgba(36, 31, 20, 0.08); }
[data-modo="claro"] .stat:hover { background: rgba(36, 31, 20, 0.04); }
[data-modo="claro"] .stat.on { background: rgba(154, 122, 53, 0.12); }

[data-modo="claro"] .captura input { background: rgba(255, 255, 255, 0.75); }
[data-modo="claro"] .captura input:focus { box-shadow: 0 0 0 4px rgba(154, 122, 53, 0.12), 0 8px 24px rgba(60, 48, 25, 0.08); }

[data-modo="claro"] .painel { background: rgba(255, 255, 255, 0.6); }
[data-modo="claro"] th { background: rgba(36, 31, 20, 0.035); }
[data-modo="claro"] tbody tr:hover, [data-modo="claro"] tr.linha:hover { background: rgba(154, 122, 53, 0.07); }

[data-modo="claro"] .num.destaque {
  background: linear-gradient(135deg, rgba(154, 122, 53, 0.13), rgba(255, 255, 255, 0.5));
  border-color: rgba(126, 98, 34, 0.3);
}
[data-modo="claro"] .ficha-topo {
  background: linear-gradient(135deg, rgba(154, 122, 53, 0.09), rgba(255, 255, 255, 0.55));
}
[data-modo="claro"] .modal {
  background: linear-gradient(160deg, #fdfbf5, #f2edde);
  box-shadow: 0 30px 80px rgba(60, 48, 25, 0.25);
}
[data-modo="claro"] .campo input { background: rgba(255, 255, 255, 0.85); color: var(--tx); }
[data-modo="claro"] .tipo { background: rgba(255, 255, 255, 0.6); color: var(--tx); }
[data-modo="claro"] .sel-decisao option { background: #fffdf8; color: #241f14; }
[data-modo="claro"] .inp-orc { background: rgba(255, 255, 255, 0.85); color: var(--ouro); }
[data-modo="claro"] tr.conjunto td { background: rgba(36, 31, 20, 0.045); }
[data-modo="claro"] .conj-tabela { background: rgba(36, 31, 20, 0.03); }
[data-modo="claro"] .mini-barra { background: rgba(36, 31, 20, 0.12); }
[data-modo="claro"] .badge { background: #241f14; color: #faf6ea; }
[data-modo="claro"] .badge.urg { background: rgba(178, 63, 69, 0.16); color: #a33a40; box-shadow: none; }
[data-modo="claro"] .vazio-tintim { color: rgba(36, 31, 20, 0.18); }
[data-modo="claro"] .rn.tintim b, [data-modo="claro"] .camp-nums b.ap { color: rgba(36, 31, 20, 0.2); }
[data-modo="claro"] .chip.trafego i, [data-modo="claro"] .chip.ouro i { box-shadow: none; }
[data-modo="claro"] .box-mini.on, [data-modo="claro"] .step.feito .box { box-shadow: none; }
[data-modo="claro"] .mini-barra i { box-shadow: none; }
[data-modo="claro"] .tarefa, [data-modo="claro"] .sessao-barra, [data-modo="claro"] .orc-barra,
[data-modo="claro"] .camp-bloco, [data-modo="claro"] .res-card, [data-modo="claro"] .bloco,
[data-modo="claro"] .est-card, [data-modo="claro"] .num, [data-modo="claro"] .detalhe-caixa {
  backdrop-filter: none;
}
[data-modo="claro"] .detalhe-caixa { background: rgba(255, 255, 255, 0.65); }
[data-modo="claro"] .orc-delta { background: rgba(36, 31, 20, 0.07); }
[data-modo="claro"] .sessao-barra.aberta { background: rgba(150, 112, 26, 0.07); }
[data-modo="claro"] .sessao-barra.ok { background: rgba(29, 122, 92, 0.07); }
[data-modo="claro"] .barra-dia i { background: linear-gradient(180deg, #9a7a35, rgba(154, 122, 53, 0.4)); }
[data-modo="claro"] .barra-dia:hover i { background: linear-gradient(180deg, #7e6222, #9a7a35); }
[data-modo="claro"] .faixa-aviso { background: rgba(154, 122, 53, 0.08); border-color: rgba(126, 98, 34, 0.25); color: #6b5417; }
[data-modo="claro"] .faixa-aviso b { color: #634c14; }
[data-modo="claro"] .escopo-aviso { background: rgba(154, 122, 53, 0.1); border-color: rgba(126, 98, 34, 0.25); color: #6b5417; }
[data-modo="claro"] ::selection { background: rgba(154, 122, 53, 0.28); }

/* botão de tema no header */
nav button.modo { color: var(--tx3); border-color: var(--borda); }
nav button.modo:hover { color: var(--ouro-2); border-color: rgba(200, 169, 97, 0.4); }

/* ---------- campos de edição na ficha ---------- */

.sel-campo {
  font-family: var(--f-body); font-size: 13px; font-weight: 500;
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); color: var(--tx);
  border: 1px solid var(--borda); transition: 0.18s;
  max-width: 100%;
}
.sel-campo:hover { border-color: var(--ouro-2); }
.sel-campo option { background: var(--painel-solido); color: var(--tx); }
[data-modo="claro"] .sel-campo { background: rgba(255, 255, 255, 0.8); }
[data-modo="claro"] .sel-campo option { background: #fffdf8; color: #241f14; }

.bt-toggle {
  font-family: var(--f-body); font-size: 12px; font-weight: 600;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); color: var(--tx3);
  border: 1px solid var(--borda); transition: 0.2s var(--mola);
  text-align: left;
}
.bt-toggle:hover:not(:disabled) { border-color: var(--borda-forte); color: var(--tx2); }
.bt-toggle.on {
  background: rgba(47, 160, 124, 0.15); color: var(--tom-verde);
  border-color: rgba(47, 160, 124, 0.4);
}
.bt-toggle.grande { padding: 8px 15px; font-size: 12.5px; }
.bt-toggle.grande:not(.on) {
  border-color: rgba(200, 169, 97, 0.4); color: var(--ouro-2);
  background: rgba(200, 169, 97, 0.08);
}
.bt-toggle:disabled { opacity: 0.45; cursor: default; }
[data-modo="claro"] .bt-toggle { background: rgba(36, 31, 20, 0.05); }

/* quem está logado / sair */
nav button.quem {
  color: var(--ouro-2); border: 1px solid var(--borda);
  margin-left: 6px; font-weight: 600; letter-spacing: 0.02em;
}
nav button.quem:hover { background: rgba(205, 95, 99, 0.12); color: var(--vinho); border-color: rgba(205, 95, 99, 0.35); }