:root { --ink:#141414; --navy:#1D2F34; --tide:#36565F; --sky:#78AFC8; --sky2:#A9CBDA; --paper:#F5FAFA; --mist:#E2F0F0; --linha:#D3E2E4; --verde:#2F7D5B; --ambar:#A9650E; --verm:#B23A3A; }
* { box-sizing:border-box; }
html,body { margin:0; }
body { background:var(--paper); color:var(--ink); font:500 16px/1.45 Urbanist,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
button,input,select,textarea { font:inherit; color:inherit; }
h1,h2,h3 { font-weight:800; line-height:1.1; margin:0; letter-spacing:-.01em; }
button { cursor:pointer; }
:focus-visible { outline:3px solid var(--sky); outline-offset:2px; }

#entrada { min-height:100dvh; display:grid; place-items:center; padding:24px; background:var(--mist); }
#f-login { background:#fff; padding:40px; border-radius:24px; width:min(420px,100%); display:grid; gap:18px; }
#f-login h1 { font-size:26px; }
label { display:grid; gap:6px; font-size:14px; font-weight:600; color:var(--tide); }
input,select,textarea { width:100%; padding:11px 14px; border:1px solid var(--linha); border-radius:12px; background:#fff; color:var(--ink); }
textarea { resize:vertical; line-height:1.5; }
.erro { color:var(--verm); margin:0; min-height:1.2em; font-size:14px; }

.b-principal { background:var(--ink); color:#fff; border:0; padding:12px 22px; border-radius:99px; font-weight:800; }
.b-principal:hover { background:var(--navy); }
.b-principal:disabled { opacity:.5; cursor:wait; }
.b-sec { background:#fff; color:var(--ink); border:1px solid var(--linha); padding:10px 18px; border-radius:99px; font-weight:600; }
.b-sec:hover { border-color:var(--ink); }
.b-ligacao { background:none; border:0; color:inherit; text-decoration:underline; padding:4px; }

header { background:var(--ink); color:#fff; display:flex; align-items:center; gap:28px; padding:14px 28px; position:sticky; top:0; z-index:5; }
#nav { display:flex; gap:4px; flex:1; overflow-x:auto; scrollbar-width:none; }
#nav button { background:none; border:0; color:#fff; opacity:.68; padding:9px 15px; border-radius:99px; font-weight:600; white-space:nowrap; }
#nav button:hover { opacity:1; }
#nav button.ativo { background:var(--sky); color:var(--ink); opacity:1; font-weight:800; }

main { max-width:1360px; margin:0 auto; padding:34px 28px 60px; min-height:70dvh; }
footer { text-align:center; padding:26px; font-size:14px; color:var(--tide); }
.credito { font-weight:800; background:linear-gradient(90deg,var(--tide),var(--sky) 45%,var(--tide) 70%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:brilho 4s linear infinite; }
@keyframes brilho { to { background-position:-250% 0; } }
@media (prefers-reduced-motion:reduce) { .credito { animation:none; } }

.cab { display:flex; justify-content:space-between; align-items:end; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
.cab h1 { font-size:36px; }
.cab p { margin:6px 0 0; color:var(--tide); max-width:66ch; }
.filtros { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.filtros select { width:auto; min-width:150px; }

.grelha { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.cartao { background:#fff; border:1px solid var(--linha); border-radius:16px; overflow:hidden; text-align:left; padding:0; display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s; }
.cartao:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(29,47,52,.13); }
.cartao .th { aspect-ratio:4/5; background:var(--mist); display:flex; justify-content:center; overflow:hidden; }
.cartao canvas { height:100%; width:auto; max-width:100%; object-fit:contain; display:block; }
.cartao .inf { padding:11px 13px 13px; display:grid; gap:5px; }
.cartao .tit { font-weight:800; font-size:15px; line-height:1.22; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.44em; }
.linha-meta { display:flex; justify-content:space-between; gap:6px; font-size:13px; color:var(--tide); align-items:center; flex-wrap:wrap; }
.et { font-size:12px; font-weight:800; padding:2px 9px; border-radius:99px; background:var(--mist); color:var(--tide); white-space:nowrap; }
.et.publicado { background:#DDF1E7; color:var(--verde); }
.et.rascunho { background:#EEF1F2; color:#555; }
.et.rever { background:#FBEBD3; color:var(--ambar); }
.et.atraso { background:#F8DFDF; color:var(--verm); }

.hoje-g { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:28px; align-items:start; }
.bloco { background:#fff; border:1px solid var(--linha); border-radius:20px; padding:24px; }
.bloco h2 { font-size:20px; margin-bottom:14px; }
.numeros { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.numeros div { background:#fff; border:1px solid var(--linha); border-radius:16px; padding:15px; }
.numeros b { font-size:30px; font-weight:800; display:block; line-height:1; }
.numeros span { font-size:13px; color:var(--tide); }
.proxima { display:grid; grid-template-columns:200px minmax(0,1fr); gap:22px; align-items:start; }
.proxima canvas { width:100%; height:auto; border-radius:12px; display:block; }
.proxima p { white-space:pre-line; margin:8px 0 14px; color:#333; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.acoes { display:flex; flex-wrap:wrap; gap:8px; }
.lista-c { display:grid; gap:9px; }
.lista-c button.l { display:flex; justify-content:space-between; gap:10px; background:var(--paper); border:1px solid transparent; border-radius:12px; padding:11px 14px; text-align:left; align-items:center; }
.lista-c button.l:hover { border-color:var(--sky); }
.l b { display:block; font-size:15px; font-weight:800; }
.l small { color:var(--tide); font-size:13px; }

.cal-top { display:flex; align-items:center; gap:10px; }
.cal-top h2 { font-size:22px; min-width:190px; text-align:center; text-transform:capitalize; }
.cal { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.cal .sem { font-size:12px; font-weight:800; color:var(--tide); text-align:center; padding:4px; text-transform:uppercase; letter-spacing:.08em; }
.dia { background:#fff; border:1px solid var(--linha); border-radius:10px; min-height:112px; padding:6px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.dia.fora { opacity:.38; }
.dia.hj { border:2px solid var(--sky); }
.dia .n { font-size:13px; font-weight:800; color:var(--tide); }
.ev { font-size:12px; line-height:1.2; padding:4px 6px; background:var(--mist); border:0; border-radius:6px; text-align:left; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%; }
.ev:hover { background:var(--sky2); }
.ev.story { background:#EAE9F3; }
.ev.publicado { background:#DDF1E7; color:var(--verde); text-decoration:line-through; }
.ev.rever { background:#FBEBD3; }

dialog#editor { border:0; border-radius:22px; padding:0; width:min(1180px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); }
dialog::backdrop { background:rgba(20,20,20,.62); }
.ed { display:grid; grid-template-columns:minmax(0,430px) minmax(0,1fr); max-height:calc(100dvh - 32px); }
.ed-vis { background:var(--mist); padding:22px; display:flex; flex-direction:column; align-items:center; gap:12px; justify-content:center; }
.ed-vis canvas { max-width:100%; max-height:calc(100dvh - 180px); width:auto; height:auto; border-radius:10px; box-shadow:0 8px 28px rgba(29,47,52,.2); display:block; }
.pag { display:flex; gap:10px; align-items:center; font-weight:800; font-size:14px; }
.ed-cmp { padding:22px 26px; overflow:auto; display:grid; grid-template-columns:minmax(0,1fr); gap:13px; align-content:start; }
.ed-cmp > *, .dois > * { min-width:0; }
.ed-top { display:flex; justify-content:space-between; gap:14px; align-items:start; }
.ed-top h2 { font-size:21px; }
.dois { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.fotos { display:flex; gap:7px; overflow-x:auto; padding-bottom:5px; }
.fotos button { flex:none; width:64px; height:64px; padding:0; border:2px solid transparent; border-radius:9px; overflow:hidden; background:var(--mist); }
.fotos button.sel { border-color:var(--ink); }
.fotos img { width:100%; height:100%; object-fit:cover; display:block; }
.fotos .mais { display:grid; place-items:center; font-size:28px; font-weight:800; border:2px dashed var(--sky); }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chips button { background:var(--mist); border:0; border-radius:99px; padding:6px 13px; font-size:14px; font-weight:600; }
.chips button:hover { background:var(--sky2); }
.chips button:disabled { opacity:.5; cursor:wait; }
.alerta { background:#FBEBD3; color:#6E4209; border-radius:12px; padding:10px 14px; font-size:14px; }
.rodape-ed { display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; padding-top:4px; }
.ajuda { font-size:13px; color:var(--tide); margin:0; }

.criar-g { display:grid; grid-template-columns:minmax(280px,380px) minmax(0,1fr); gap:24px; align-items:start; }
.form { display:grid; gap:13px; }
.op-g { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.op { background:#fff; border:1px solid var(--linha); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.op canvas { width:100%; height:auto; display:block; }
.op .tx { padding:13px; display:grid; gap:9px; flex:1; align-content:space-between; }
.op p { margin:0; font-size:14px; white-space:pre-line; max-height:170px; overflow:auto; }
.vazio { text-align:center; color:var(--tide); padding:50px 20px; background:#fff; border:1px dashed var(--linha); border-radius:16px; }

.chat { display:flex; flex-direction:column; height:min(66dvh,720px); max-width:880px; margin:0 auto; background:#fff; border:1px solid var(--linha); border-radius:20px; overflow:hidden; }
.msgs { flex:1; overflow:auto; padding:20px; display:flex; flex-direction:column; gap:11px; }
.m { max-width:82%; padding:11px 15px; border-radius:16px; white-space:pre-wrap; overflow-wrap:anywhere; }
.m.user { align-self:end; background:var(--ink); color:#fff; border-bottom-right-radius:4px; }
.m.assistant { align-self:start; background:var(--mist); border-bottom-left-radius:4px; }
.pp { align-self:start; background:#fff; border:1px solid var(--sky); border-radius:14px; padding:12px; width:min(82%,520px); display:grid; gap:7px; }
.pp p { margin:0; font-size:14px; white-space:pre-line; }
.ent-chat { display:flex; gap:9px; padding:13px; border-top:1px solid var(--linha); }
.ent-chat textarea { flex:1; min-height:46px; max-height:130px; }
.sug { max-width:880px; margin:0 auto 13px; }

#aviso { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:11px 20px; border-radius:99px; z-index:100; font-weight:600; max-width:calc(100vw - 32px); }

@media (max-width:900px) {
  header { padding:11px 16px; gap:12px; flex-wrap:wrap; }
  header img { width:100px; }
  #nav { order:3; flex:0 0 100%; }
  main { padding:22px 16px 44px; }
  .cab h1 { font-size:28px; }
  .hoje-g,.criar-g { grid-template-columns:minmax(0,1fr); }
  .ed { grid-template-columns:minmax(0,1fr); overflow:auto; }
  .ed-cmp { overflow:visible; padding:18px; }
  .ed-vis canvas { max-height:46dvh; }
  .grelha { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .proxima { grid-template-columns:110px minmax(0,1fr); gap:13px; }
  .dia { min-height:70px; padding:3px; }
  .ev { font-size:0; height:9px; padding:0; }
  .dois { grid-template-columns:minmax(0,1fr); }
  .filtros select { flex:1 1 40%; min-width:0; }
}