:root{
  --ground:#EEF1F6; --surface:#FFFFFF; --raised:#F7F9FC;
  --ink:#14243A; --ink-2:#4A5A72; --ink-3:#7C8AA0;
  --line:#DCE3EC; --line-2:#C6D0DE;
  --brand:#16304A; --brand-soft:#E3E9F1;
  --gold:#B98F42; --gold-soft:#F6EEDE;
  --alerta:#B4342C; --alerta-soft:#FBE7E5;
  --ok:#1F7A55; --ok-soft:#DFF1E8;
  --aviso:#96601B; --aviso-soft:#FBEEDA;
  --radius:10px;
  --sombra:0 1px 2px rgba(20,36,58,.06), 0 4px 12px rgba(20,36,58,.05);
  --display:"Bitter", Georgia, serif;
  --corpo:"Public Sans", -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0E1826; --surface:#152234; --raised:#1B2B41;
    --ink:#E7EDF6; --ink-2:#A9B8CC; --ink-3:#7C8DA6;
    --line:#26374F; --line-2:#33475F;
    --brand:#8FB4DC; --brand-soft:#1D2E45;
    --gold:#D8AE62; --gold-soft:#2C2415;
    --alerta:#F0837A; --alerta-soft:#3A1D1B;
    --ok:#63C79B; --ok-soft:#15301F;
    --aviso:#E0A85C; --aviso-soft:#332413;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --ground:#0E1826; --surface:#152234; --raised:#1B2B41;
  --ink:#E7EDF6; --ink-2:#A9B8CC; --ink-3:#7C8DA6;
  --line:#26374F; --line-2:#33475F;
  --brand:#8FB4DC; --brand-soft:#1D2E45;
  --gold:#D8AE62; --gold-soft:#2C2415;
  --alerta:#F0837A; --alerta-soft:#3A1D1B;
  --ok:#63C79B; --ok-soft:#15301F;
  --aviso:#E0A85C; --aviso-soft:#332413;
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--corpo); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:4px}
[hidden]{display:none !important}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important}}

.topo{background:var(--brand-soft); border-bottom:1px solid var(--line); padding:14px 20px 0}
.topo-linha{max-width:1180px; margin:0 auto; display:flex; align-items:baseline;
  justify-content:space-between; gap:16px; flex-wrap:wrap}
.marca{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.01em}
.marca em{font-style:normal; color:var(--gold)}
.sub{font-size:12.5px; color:var(--ink-2)}
.topo-acoes{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

.faixa{max-width:1180px; margin:12px auto 0; display:flex; gap:10px; flex-wrap:wrap}
.pastilha{display:flex; align-items:baseline; gap:8px; padding:8px 13px;
  border-radius:999px; border:1px solid var(--line); font-size:13px; cursor:pointer;
  background:var(--surface); color:var(--ink-2)}
.pastilha b{font-variant-numeric:tabular-nums; font-size:15px; color:var(--ink)}
.pastilha.risco{background:var(--alerta-soft); border-color:transparent; color:var(--alerta)}
.pastilha.risco b{color:var(--alerta)}
.pastilha.hoje{background:var(--gold-soft); border-color:transparent; color:var(--aviso)}
.pastilha.hoje b{color:var(--aviso)}
.pastilha:hover{border-color:var(--line-2)}

.entrada-wrap{max-width:1180px; margin:14px auto 0; padding:0 20px}
.entrada{display:flex; gap:8px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:8px; box-shadow:var(--sombra); flex-wrap:wrap}
.entrada input[type=text]{flex:1 1 320px; min-width:0; border:none; background:transparent;
  padding:8px 10px; font-size:15.5px}
.entrada input[type=text]::placeholder{color:var(--ink-3)}
.busca-linha{display:flex; gap:8px; align-items:center; margin-top:8px}
.busca-linha input{flex:1; min-width:0; border:1px solid var(--line); border-radius:var(--radius);
  padding:9px 12px; background:var(--surface); font-size:14.5px; box-shadow:var(--sombra)}
.busca-linha input::placeholder{color:var(--ink-3)}
.dica{max-width:1180px; margin:6px auto 0; padding:0 20px; font-size:12px; color:var(--ink-3)}
.dica code{font-family:var(--corpo); background:var(--raised); border:1px solid var(--line);
  border-radius:4px; padding:0 5px; color:var(--ink-2)}

.btn{border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  padding:7px 13px; border-radius:8px; cursor:pointer; font-size:13.5px; font-weight:500}
.btn:hover{background:var(--raised)}
.btn-forte{background:var(--brand); border-color:var(--brand); color:#fff}
:root[data-theme="dark"] .btn-forte, :root:not([data-theme="light"]) .btn-forte{color:#0E1826}
.btn-forte:hover{opacity:.9; background:var(--brand)}
.btn-min{border:none; background:none; color:var(--ink-3); cursor:pointer;
  font-size:12.5px; padding:2px 4px}
.btn-min:hover{color:var(--brand); text-decoration:underline}
.btn-min.perigo:hover{color:var(--alerta)}

.corpo{max-width:1180px; margin:18px auto 60px; padding:0 20px;
  display:grid; grid-template-columns:238px 1fr; gap:22px; align-items:start}
@media (max-width:820px){ .corpo{grid-template-columns:1fr; gap:14px} }

.rail{display:flex; flex-direction:column; gap:2px; position:sticky; top:14px}
@media (max-width:820px){ .rail{position:static; flex-direction:row; overflow-x:auto; padding-bottom:4px} }
.rail h3{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3);
  margin:14px 8px 5px; font-weight:600; font-family:var(--corpo)}
@media (max-width:820px){ .rail h3{display:none} }
.rail-item{display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:7px 10px; border-radius:7px; cursor:pointer; border:none;
  background:none; color:var(--ink-2); font-size:14px; text-align:left; white-space:nowrap}
.rail-item:hover{background:var(--surface)}
.rail-item[aria-current="true"]{background:var(--brand); color:#fff; font-weight:600}
:root[data-theme="dark"] .rail-item[aria-current="true"],
:root:not([data-theme="light"]) .rail-item[aria-current="true"]{color:#0E1826}
.rail-item span{font-size:12px; font-variant-numeric:tabular-nums; opacity:.75}
.rail h3{display:flex; align-items:center; gap:6px}
.rail h3 button{border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  border-radius:5px; width:18px; height:18px; line-height:1; cursor:pointer;
  font-size:13px; padding:0; display:flex; align-items:center; justify-content:center}
.rail h3 button:hover{background:var(--brand-soft); color:var(--brand)}

.g-linha{display:flex; align-items:center; gap:1px; border-radius:7px}
.g-linha:hover{background:var(--surface)}
.g-linha .rail-item{flex:1; min-width:0; overflow:hidden}
.g-linha .rail-item span{margin-left:auto}
.g-linha .g-nome{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:14px; opacity:1}
.g-linha .g-cont{flex:0 0 auto; padding-left:6px}
.g-acoes{display:flex; gap:0; flex:0 0 auto; opacity:.45}
.g-linha:hover .g-acoes{opacity:1}
.g-acoes button{border:none; background:none; cursor:pointer; color:var(--ink-3);
  font-size:11px; padding:2px 1px; line-height:1; width:15px}
.g-acoes button:hover{color:var(--brand)}
.g-acoes button.perigo:hover{color:var(--alerta)}
@media (max-width:820px){ .g-acoes{display:none} }

.col-linha{display:flex; align-items:center; gap:6px; margin-bottom:6px}
.col-linha input{flex:1; min-width:0; border:1px solid var(--line-2); border-radius:7px;
  padding:6px 9px; background:var(--surface); font-size:14px}
.col-linha button{border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  border-radius:6px; padding:4px 8px; cursor:pointer; font-size:12px; line-height:1.2}
.col-linha button:hover:not(:disabled){background:var(--brand-soft); color:var(--brand)}
.col-linha button:disabled{opacity:.3; cursor:default}
.col-linha button.perigo:hover{background:var(--alerta-soft); color:var(--alerta)}
.col-fim{font-size:11px; color:var(--ok); font-weight:600; white-space:nowrap}

.menu-op{width:100%; text-align:left; padding:11px 14px; font-size:14.5px}
.menu-op.perigo{color:var(--alerta)}
.menu-op.perigo:hover{background:var(--alerta-soft)}
.mais{border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  border-radius:6px; padding:1px 7px; cursor:pointer; font-size:14px; line-height:1.3}
.mais:hover{background:var(--brand-soft); color:var(--brand)}
.sub-mini{display:flex; align-items:center; gap:7px; margin-top:6px; padding:5px 7px;
  background:var(--raised); border:1px solid var(--line); border-radius:6px; font-size:12.5px}
.sub-mini .marcar{width:15px; height:15px; flex:0 0 15px; margin-top:0; font-size:9px}
.sub-mini .titulo{font-size:12.5px; flex:1; min-width:0}
.sub-mini.feita .titulo{text-decoration:line-through; opacity:.6}

#dlg-pedir .dlg-corpo input, #dlg-pedir .dlg-corpo select{width:100%;
  border:1px solid var(--line-2); border-radius:8px; padding:9px 11px;
  background:var(--surface); font-size:15px}
.rail-busca{width:100%; border:1px solid var(--line-2); border-radius:7px;
  padding:5px 9px; background:var(--surface); font-size:13px; margin:0 0 4px}
.rail-busca::placeholder{color:var(--ink-3)}

.painel-topo{display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  flex-wrap:wrap; margin-bottom:12px}
.painel-topo h2{font-family:var(--display); font-size:19px; margin:0; font-weight:600}
.painel-topo .conta{font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums}

.grupo{margin-bottom:20px}
.grupo-nome{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); padding:0 2px 6px; display:flex; align-items:center; gap:8px}
.grupo-nome::after{content:""; flex:1; height:1px; background:var(--line)}

.linha{display:flex; gap:11px; align-items:flex-start; padding:10px 12px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); margin-bottom:5px}
.linha.atrasada{border-left:3px solid var(--alerta); padding-left:10px}
.linha.eh-hoje{border-left:3px solid var(--gold); padding-left:10px}
.linha.feita{opacity:.55}
.linha.filha{margin-left:26px; background:var(--raised)}
.novo{box-shadow:0 0 0 2px var(--gold); border-color:var(--gold)}

.marcar{width:19px; height:19px; flex:0 0 19px; margin-top:2px; border-radius:50%;
  border:2px solid var(--line-2); background:none; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; font-size:11px; line-height:1}
.marcar.p1{border-color:var(--alerta)}
.marcar.p2{border-color:var(--gold)}
.marcar:hover{background:var(--brand-soft)}
.marcar.ok{background:var(--ok); border-color:var(--ok); color:#fff}

.meio{flex:1; min-width:0}
.titulo{font-size:14.5px; word-break:break-word; cursor:pointer}
.titulo:hover{color:var(--brand); text-decoration:underline}
.linha.feita .titulo{text-decoration:line-through}
.meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:5px}
.selo{font-size:11.5px; padding:1px 7px; border-radius:5px; background:var(--raised);
  color:var(--ink-2); border:1px solid var(--line); font-variant-numeric:tabular-nums}
.selo.cliente{background:var(--brand-soft); color:var(--brand); border-color:transparent; font-weight:600}
.selo.venc-atraso{background:var(--alerta-soft); color:var(--alerta); border-color:transparent; font-weight:600}
.selo.venc-hoje{background:var(--gold-soft); color:var(--aviso); border-color:transparent; font-weight:600}
.selo.id{color:var(--ink-3)}
.acoes{display:flex; gap:9px; align-items:center; flex:0 0 auto; padding-top:2px}

.vazio{border:1px dashed var(--line-2); border-radius:var(--radius); padding:34px 20px;
  text-align:center; color:var(--ink-3); font-size:14px; background:var(--surface)}

.quadro{display:flex; gap:12px; overflow-x:auto; padding-bottom:10px; align-items:flex-start}
.coluna{flex:0 0 268px; background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:10px; display:flex; flex-direction:column; gap:7px}
.coluna-topo{display:flex; justify-content:space-between; align-items:center;
  font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-2); padding:0 2px 2px}
.coluna-topo .col-nome{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis}
.coluna-topo .col-n{background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:0 7px; font-variant-numeric:tabular-nums; flex:0 0 auto}
.col-acoes{display:flex; gap:0; flex:0 0 auto; opacity:.45}
.coluna:hover .col-acoes{opacity:1}
.col-acoes button{border:none; background:none; cursor:pointer; color:var(--ink-2);
  font-size:11px; padding:2px 1px; width:15px; line-height:1}
.col-acoes button:hover:not(:disabled){color:var(--brand)}
.col-acoes button:disabled{opacity:.25; cursor:default}
.col-acoes button.perigo:hover{color:var(--alerta)}
.cartao{background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:9px 10px; box-shadow:var(--sombra); cursor:grab}
.cartao.arrastando{opacity:.4; cursor:grabbing}
.coluna.alvo{background:var(--brand-soft); border-color:var(--brand); border-style:dashed}
.coluna-nova{flex:0 0 150px; border:1px dashed var(--line-2); background:transparent;
  border-radius:var(--radius); padding:14px 10px; color:var(--ink-3);
  cursor:pointer; font-size:13px; text-align:center}
.coluna-nova:hover{background:var(--surface); color:var(--brand); border-color:var(--brand)}
.cartao .titulo{font-size:13.5px}
.col-nova{display:flex; gap:5px; margin-top:2px}
.col-nova input{flex:1; min-width:0; border:1px dashed var(--line-2); border-radius:7px;
  padding:6px 8px; background:var(--surface); font-size:13px}
.col-nova input::placeholder{color:var(--ink-3)}
.col-nova button{border:1px solid var(--line-2); background:var(--surface); border-radius:7px;
  padding:0 10px; cursor:pointer; font-size:15px; line-height:1; color:var(--ink-2)}
.col-nova button:hover{background:var(--brand-soft); color:var(--brand)}

.mic{border:1px solid var(--line-2); background:var(--surface); border-radius:8px;
  padding:6px 11px; cursor:pointer; font-size:15px; line-height:1.35}
.mic:hover{background:var(--raised)}
.mic.gravando{background:var(--alerta); border-color:var(--alerta); color:#fff; animation:pulsa 1.1s infinite}
@keyframes pulsa{50%{opacity:.55}}
.mic-min{border:none; background:none; cursor:pointer; font-size:14px; padding:0 4px; color:var(--ink-3)}
.mic-min:hover{color:var(--brand)}
.mic-min.gravando{color:var(--alerta); animation:pulsa 1.1s infinite}

dialog{border:1px solid var(--line); border-radius:12px; background:var(--surface);
  color:var(--ink); padding:0; max-width:660px; width:calc(100% - 32px);
  box-shadow:0 20px 60px rgba(20,36,58,.28)}
dialog::backdrop{background:rgba(14,24,38,.55)}
.dlg-topo{padding:16px 20px 12px; border-bottom:1px solid var(--line)}
.dlg-topo h3{margin:0; font-family:var(--display); font-size:17px}
.dlg-topo p{margin:5px 0 0; font-size:13px; color:var(--ink-2)}
.dlg-corpo{padding:16px 20px; display:flex; flex-direction:column; gap:14px; max-height:62vh; overflow-y:auto}
.dlg-corpo textarea#txt-agenda{width:100%; min-height:190px; border:1px solid var(--line-2);
  border-radius:8px; padding:10px; background:var(--raised);
  font-family:ui-monospace,"Cascadia Mono",monospace; font-size:12.5px; line-height:1.55; resize:vertical}
.dlg-pe{padding:12px 20px 16px; display:flex; gap:8px; justify-content:flex-end;
  flex-wrap:wrap; border-top:1px solid var(--line)}

.nota-titulo{width:100%; border:1px solid transparent; border-radius:7px; padding:6px 8px;
  background:transparent; font-family:var(--display); font-size:18px; font-weight:600}
.nota-titulo:hover{border-color:var(--line)}
.nota-titulo:focus{border-color:var(--line-2); background:var(--raised)}
.campos{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.campo{display:flex; flex-direction:column; gap:3px}
.campo label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:600}
.campo input,.campo select{border:1px solid var(--line-2); border-radius:7px; padding:6px 8px;
  background:var(--surface); font-size:14px; width:100%}
.sec h4{margin:0 0 7px; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--gold); font-weight:700; display:flex; align-items:center; gap:8px}
.sec h4::after{content:""; flex:1; height:1px; background:var(--line)}
#nota-texto{width:100%; min-height:120px; border:1px solid var(--line-2); border-radius:8px;
  padding:10px; background:var(--raised); font-size:14px; line-height:1.6; resize:vertical}
.sub-linha{display:flex; align-items:center; gap:9px; padding:6px 8px; background:var(--raised);
  border:1px solid var(--line); border-radius:7px; margin-bottom:5px; font-size:14px}
.sub-linha.feita span{text-decoration:line-through; opacity:.6}
.sub-linha span{flex:1; min-width:0; word-break:break-word}
.linha-form{display:flex; gap:7px; margin-top:6px}
.linha-form input{flex:1; border:1px solid var(--line-2); border-radius:7px; padding:6px 9px;
  background:var(--surface); font-size:14px; min-width:0}
.anexo{display:flex; align-items:center; gap:10px; padding:7px 9px; background:var(--raised);
  border:1px solid var(--line); border-radius:7px; margin-bottom:5px}
.anexo .nome{flex:1; min-width:0; font-size:13.5px; word-break:break-all}
.anexo .peso{font-size:11.5px; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums}
.anexo .icone{font-size:16px; line-height:1}
.anexo a{color:var(--brand); text-decoration:none}
.anexo a:hover{text-decoration:underline}
.msg{font-size:12.5px; color:var(--ink-3); margin:0}
.msg.erro{color:var(--alerta); font-weight:600}
.msg.bom{color:var(--ok); font-weight:600}

.estado{max-width:1180px; margin:0 auto; padding:10px 20px 0; font-size:12.5px; color:var(--ink-3)}
.estado b{color:var(--ink-2); font-weight:600}

#portao{position:fixed; inset:0; background:var(--ground); z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:20px}
#portao .caixa{width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:26px; box-shadow:var(--sombra)}
#portao h1{font-family:var(--display); font-size:21px; margin:0 0 4px}
#portao h1 em{font-style:normal; color:var(--gold)}
#portao p.sub{margin:0 0 18px; font-size:13px; color:var(--ink-2)}
#portao label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); font-weight:600; margin:12px 0 4px}
#portao input{width:100%; border:1px solid var(--line-2); border-radius:8px; padding:10px 12px;
  background:var(--surface); font-size:15px}
#portao .btn-forte{width:100%; margin-top:18px; padding:11px}
#portao .linha-baixo{display:flex; justify-content:space-between; margin-top:14px; gap:10px}
#portao .msg{margin-top:12px}
.topo-usuario{font-size:12px; color:var(--ink-2); display:flex; align-items:center; gap:8px}

/* ── Flora, a assistente na tela ───────────────────────── */
#flora{position:fixed; right:16px; bottom:16px; z-index:500;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px; pointer-events:none}
#flora > *{pointer-events:auto}
.flora-balao{max-width:280px; background:var(--surface); border:1px solid var(--line-2);
  border-radius:14px 14px 4px 14px; padding:9px 12px; font-size:13.5px; line-height:1.45;
  box-shadow:0 6px 20px rgba(20,36,58,.22); color:var(--ink); white-space:pre-wrap}
.flora-corpo{border:none; background:none; padding:0; cursor:pointer; display:block;
  filter:drop-shadow(0 8px 14px rgba(20,36,58,.3))}
.flora-sprite{display:block; width:74px; height:150px;
  background:url("https://demandas-zanini.vercel.app/flora.webp") 0 0/148px 150px no-repeat;
  transform-origin:50% 100%; animation:flora-resp 3.6s ease-in-out infinite}
.flora-sprite[data-estado="acenando"], .flora-sprite[data-estado="falando"]{background-position:-74px 0}
.flora-sprite[data-estado="falando"]{animation:flora-fala .55s ease-in-out infinite}
.flora-sprite[data-estado="acenando"]{animation:flora-acena .7s ease-in-out infinite}
.flora-sprite[data-estado="pensando"]{animation:flora-pensa 1.2s ease-in-out infinite}
.flora-sprite[data-estado="ouvindo"]{animation:flora-ouve .9s ease-in-out infinite}
@keyframes flora-resp{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.012)}}
@keyframes flora-fala{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1.5deg)}}
@keyframes flora-acena{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}
@keyframes flora-pensa{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1px) rotate(-3deg)}}
@keyframes flora-ouve{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.flora-barra{display:flex; gap:4px}
.flora-btn{border:1px solid var(--line-2); background:var(--surface); border-radius:8px;
  padding:3px 9px; cursor:pointer; font-size:14px; line-height:1.25; box-shadow:var(--sombra)}
.flora-btn:hover{background:var(--brand-soft)}
@media (max-width:820px){
  #flora{right:10px; bottom:10px}
  .flora-sprite{width:54px; height:110px; background-size:108px 110px}
  .flora-sprite[data-estado="acenando"], .flora-sprite[data-estado="falando"]{background-position:-54px 0}
  .flora-balao{max-width:200px; font-size:12.5px}
}