/* Sistema Denys Sorvetes — paleta do logo oficial
   navy #0C1E3C · vermelho #E72E34 · amarelo #FCB229 · creme #EEE5CF */
:root{
  --navy:#0C1E3C; --navy-2:#1B3560; --navy-3:#2C4160;
  --red:#C42128; --red-vivo:#E72E34; --red-soft:#F7DFDC;
  --gold:#FCB229; --gold-ink:#8A5B06; --gold-soft:#FBEBCB;
  --mint:#2C7357; --mint-soft:#DDEBE1;
  --creme:#EEE5CF; --ground:#F3ECDD; --surface:#FFFCF5; --surface-2:#EDE3CC;
  --ink:#0C1E3C; --ink-2:#3F5170; --muted:#7A88A0;
  --line:#DDD0B2; --line-2:#C9B994;
  --shadow:0 1px 2px rgba(12,30,60,.05), 0 8px 22px -16px rgba(12,30,60,.4);
  --radius:3px;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--ground); color:var(--ink);
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:15.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--red); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{margin:0; line-height:1.2; letter-spacing:-.01em;}
h1{font-size:26px; font-weight:800;}
h2{font-size:19px; font-weight:700;}
h3{font-size:16px; font-weight:700;}
p{margin:0;}
:focus-visible{outline:2px solid var(--red); outline-offset:2px;}

/* ---------- topo ---------- */
.topo{background:var(--navy); color:var(--creme); border-bottom:4px solid var(--gold);}
.topo-in{max-width:1180px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.logo{display:flex; align-items:center; gap:9px; font-weight:800; font-size:16px; letter-spacing:.01em; color:var(--creme);}
.logo:hover{text-decoration:none;}
.logo .bolas{display:flex; gap:4px;}
.logo .bolas i{width:9px; height:9px; border-radius:50%; display:block;}
.logo .bolas i:nth-child(1){background:var(--red-vivo);}
.logo .bolas i:nth-child(2){background:var(--gold);}
.logo .bolas i:nth-child(3){background:var(--creme);}
.menu{display:flex; gap:2px; flex-wrap:wrap; margin-left:auto;}
.menu a{
  color:#C8D2E4; padding:7px 12px; border-radius:var(--radius); font-size:14px; font-weight:600;
}
.menu a:hover{background:var(--navy-2); color:#fff; text-decoration:none;}
.menu a.on{background:var(--gold); color:var(--navy);}
.eu{font-size:13px; color:#9FB0CB; display:flex; align-items:center; gap:10px;}
.eu a{color:#9FB0CB;}

/* ---------- layout ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:26px 20px 70px;}
.cabeca{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:22px;}
.cabeca .sub{color:var(--muted); font-size:14.5px; margin-top:5px; max-width:70ch;}
.cabeca .acoes{margin-left:auto; display:flex; gap:8px;}
.secao{margin-top:30px;}
.secao > h2{margin-bottom:12px;}

/* ---------- cartões ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
.card-p{padding:20px 22px;}
.grade{display:grid; gap:14px;}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}

.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);}
.kpi b{display:block; font-size:32px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums;}
.kpi span{display:block; margin-top:7px; font-size:12.5px; color:var(--muted); line-height:1.35;}
.kpi.k-red b{color:var(--red);} .kpi.k-gold b{color:var(--gold-ink);}
.kpi.k-mint b{color:var(--mint);} .kpi.k-navy b{color:var(--navy);}

/* ---------- barra de progresso ---------- */
.barra{height:8px; background:var(--surface-2); border-radius:20px; overflow:hidden;}
.barra i{display:block; height:100%; background:var(--mint); border-radius:20px;}
.barra.b-gold i{background:var(--gold);}
.barra.b-red i{background:var(--red);}

/* ---------- ondas / tarefas ---------- */
.onda{margin-top:26px;}
.onda-topo{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding-bottom:10px; border-bottom:3px solid var(--navy);}
.onda-topo h2{font-size:19px;}
.onda-topo .quando{font-size:12.5px; color:var(--red); font-weight:600;}
.onda-topo .meta{font-size:13.5px; color:var(--muted); font-style:italic; margin-left:auto;}
.onda-prog{display:flex; align-items:center; gap:10px; margin-top:10px; font-size:12.5px; color:var(--muted);}
.onda-prog .barra{flex:1; max-width:280px;}

.tarefa{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--line-2);
  border-radius:var(--radius); padding:14px 16px; margin-top:10px;
  display:grid; grid-template-columns:1fr auto; gap:8px 16px; align-items:start; box-shadow:var(--shadow);
}
.tarefa.t-feito{border-left-color:var(--mint); opacity:.72;}
.tarefa.t-fazendo{border-left-color:var(--gold);}
.tarefa.t-travado{border-left-color:var(--red);}
.tarefa.t-atrasada{border-left-color:var(--red); background:#FFF8F3;}
.tarefa .tit{font-weight:600; font-size:15.5px;}
.tarefa.t-feito .tit{text-decoration:line-through; text-decoration-color:var(--muted);}
.tarefa .por{grid-column:1; font-size:13.5px; color:var(--ink-2); line-height:1.45;}
.tarefa .meta-linha{grid-column:1; display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:3px;}
.tarefa .tit a{color:var(--ink);}
.tarefa .tit a:hover{color:var(--red);}
.tarefa .lado{grid-column:2; grid-row:1/4; display:flex; flex-direction:column; gap:6px; align-items:flex-end;}

.pill{font-size:11px; font-weight:700; letter-spacing:.03em; padding:3px 8px; border-radius:20px; white-space:nowrap;}
.pill.p-dono{background:var(--surface-2); color:var(--ink-2);}
.pill.p-prazo{background:var(--surface-2); color:var(--ink-2);}
.pill.p-atraso{background:var(--red-soft); color:var(--red);}
.pill.p-urgente{background:var(--gold-soft); color:var(--gold-ink);}
.pill.p-fora{background:var(--red-soft); color:var(--red);}
.pill.p-casa{background:var(--gold-soft); color:var(--gold-ink);}
.pill.p-longo{background:var(--mint-soft); color:var(--mint);}
.pill.p-num{background:var(--navy); color:var(--creme);}

.selo{font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:var(--radius); white-space:nowrap;}
.selo.s-a_fazer{background:var(--surface-2); color:var(--ink-2);}
.selo.s-fazendo{background:var(--gold-soft); color:var(--gold-ink);}
.selo.s-feito{background:var(--mint-soft); color:var(--mint);}
.selo.s-travado{background:var(--red-soft); color:var(--red);}
.selo.s-avancado{background:var(--mint-soft); color:var(--mint);}
.selo.s-parcial{background:var(--gold-soft); color:var(--gold-ink);}
.selo.s-zero{background:var(--red-soft); color:var(--red);}
.selo.s-andamento{background:var(--gold-soft); color:var(--gold-ink);}
.selo.s-aberto{background:var(--red-soft); color:var(--red);}
.selo.s-controlado{background:var(--gold-soft); color:var(--gold-ink);}
.selo.s-fechado{background:var(--mint-soft); color:var(--mint);}

/* ---------- formulários ---------- */
label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:5px;}
input[type=text],input[type=password],input[type=date],select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line-2); border-radius:var(--radius);
  background:var(--surface); color:var(--ink); font-family:inherit; font-size:15px;
}
textarea{min-height:90px; resize:vertical; line-height:1.5;}
.campo{margin-bottom:15px;}
.campos{display:grid; gap:0 16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}

.btn{
  display:inline-block; border:1px solid transparent; border-radius:var(--radius);
  padding:9px 16px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit;
  background:var(--navy); color:var(--creme);
}
.btn:hover{background:var(--navy-2); text-decoration:none; color:#fff;}
.btn.b-red{background:var(--red);} .btn.b-red:hover{background:var(--red-vivo);}
.btn.b-gold{background:var(--gold); color:var(--navy);} .btn.b-gold:hover{background:#f0a412;}
.btn.b-linha{background:transparent; color:var(--ink-2); border-color:var(--line-2);}
.btn.b-linha:hover{background:var(--surface-2); color:var(--ink);}
.btn.b-mini{padding:5px 10px; font-size:12.5px;}

.troca{display:flex; gap:4px; flex-wrap:wrap;}
.troca button{
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:var(--radius);
  cursor:pointer; font-family:inherit;
}
.troca button:hover{background:var(--surface-2);}
.troca button.on{background:var(--navy); color:var(--creme); border-color:var(--navy);}

/* ---------- avisos ---------- */
.aviso{padding:11px 15px; border-radius:var(--radius); margin-bottom:16px; font-size:14.5px; font-weight:600;}
.aviso.ok{background:var(--mint-soft); color:var(--mint); border:1px solid #BBD6C4;}
.aviso.erro{background:var(--red-soft); color:var(--red); border:1px solid #E8C4BE;}

.vazio{color:var(--muted); font-size:14.5px; padding:16px 0;}

/* ---------- listas ---------- */
.lista{list-style:none; margin:0; padding:0;}
.lista li{padding:13px 0; border-bottom:1px solid var(--line);}
.lista li:last-child{border-bottom:none;}
.linha-flex{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.mini{font-size:12.5px; color:var(--muted);}

.tabela{width:100%; border-collapse:collapse; font-size:14.5px;}
.tabela th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line);}
.tabela td{padding:10px; border-bottom:1px solid var(--line); vertical-align:top;}

.rodape{max-width:1180px; margin:0 auto; padding:0 20px 40px; color:var(--muted); font-size:12.5px;}

@media (max-width:700px){
  .tarefa{grid-template-columns:1fr;}
  .tarefa .lado{grid-column:1; grid-row:auto; flex-direction:row; align-items:center; flex-wrap:wrap;}
  .onda-topo .meta{margin-left:0; width:100%;}
  .cabeca .acoes{margin-left:0; width:100%;}
  .menu{width:100%; margin-left:0;}
}