/* Calendário de pauta (D245, 23/10/2026): portado do protótipo do designer (seo/PROPOSTA-CALENDARIO-2026-10-23.md). */

@font-face{font-family:"Anybody";font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url("/fontes/anybody.woff2") format("woff2-variations")}
@font-face{font-family:"Literata";font-weight:200 900;font-display:swap;src:url("/fontes/literata.woff2") format("woff2-variations")}
:root{--tinta:#1c242d;--vinho:#633144;--ouro:#da9c37;--ouro-claro:#f6e3c0;--verde:#1f6f5c;--verde-escuro:#175545;--creme:#fdfaf3;--linha:#e4ddd0;--cinza:#5a6470;
--papel:#fffdf8;--display:"Anybody","Arial Narrow",system-ui,sans-serif;--corpo:"Literata",Georgia,"Times New Roman",serif;
--ease:cubic-bezier(.23,1,.32,1)}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:var(--creme);color:var(--tinta);font:17px/1.6 var(--corpo);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:var(--vinho)}
:focus-visible{outline:2px solid var(--tinta);outline-offset:2px;box-shadow:0 0 0 5px var(--ouro-claro);border-radius:6px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html:not(.js) [data-js]{display:none!important}
.nota-proto{background:var(--ouro-claro);color:var(--tinta);font:500 .85rem/1.4 var(--display);padding:8px 16px;text-align:center}
.topo{background:var(--tinta);padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.topo img{display:block;height:28px;width:auto}
.entrar{color:var(--creme);font:700 .9rem var(--display);text-decoration:none;border:1px solid #4a5563;border-radius:999px;padding:10px 16px;min-height:44px;display:inline-flex;align-items:center}
main{max-width:1160px;margin:0 auto;padding:20px 16px 96px}
.trilha{font-size:.85rem;color:var(--cinza);margin:0 0 14px}.trilha a{color:var(--cinza)}
.chapeu{font:700 .78rem/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--vinho);margin:0 0 6px}
h1{font:800 clamp(1.75rem,5.4vw,2.9rem)/1.08 var(--display);font-stretch:92%;margin:0 0 12px;text-wrap:balance}
h2{font:800 1.3rem/1.2 var(--display);margin:0 0 10px}
.linha-fina{font-size:1.08rem;color:#3d4652;margin:0}
.cab{margin:0 0 24px}
.meses-nav{display:flex;gap:8px;justify-content:center;margin:12px 0 4px}.meses-nav a{font:700 .9rem var(--display);text-decoration:none;color:var(--tinta);border:1px solid var(--linha);background:var(--papel);border-radius:10px;padding:10px 14px;min-height:44px;display:inline-flex;align-items:center}

/* principais datas a seguir: faixa clara com filete ouro */
.janela{background:#fff;color:var(--tinta);border:1px solid var(--linha);border-left:4px solid var(--ouro);border-radius:16px;padding:20px 20px 16px;margin:0 0 28px}
.janela h2{color:var(--tinta);margin:0 0 4px}
.janela .sub{font-size:.92rem;color:var(--cinza);margin:0 0 14px;max-width:62ch}
.janela-lista{list-style:none;margin:0;padding:0}
.janela-lista li{border-top:1px solid var(--linha)}
.janela-lista a{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:12px;align-items:center;padding:10px 4px;color:var(--tinta);text-decoration:none;min-height:44px}
.jd{grid-row:1/3;font:600 .72rem/1 var(--display);color:var(--cinza);text-transform:uppercase;letter-spacing:.06em;text-align:center}
.jd b{display:block;font:800 2.1rem/1 var(--display);color:var(--vinho);letter-spacing:0}
.jn{font:700 1.02rem/1.25 var(--display);overflow-wrap:break-word}
.jf{font-size:.85rem;color:var(--cinza)}
@media (min-width:700px){.janela-lista a{grid-template-columns:58px minmax(0,1fr) auto}.jd{grid-row:auto}.jf{text-align:right;padding-left:12px}}
@media (hover:hover) and (pointer:fine){.janela-lista a:hover .jn{text-decoration:underline}}
.depois{font-size:.88rem;color:#d4d8dc;margin:12px 0 0}

/* leiaute: painel lateral fixo no desktop */
.layout{display:block}
@media (min-width:1040px){
 .layout{display:grid;grid-template-columns:320px minmax(0,1fr);column-gap:48px;align-items:start}
 .layout>*{grid-column:2}
 .layout>.painel{grid-column:1;grid-row:1/span 400;position:sticky;top:16px}
}
.painel{margin:0 0 28px}

/* ferramentas */
.ferramentas{background:var(--papel);border:1px solid var(--linha);border-radius:14px;padding:12px;margin:0 0 14px}
.linha1{display:flex;flex-wrap:wrap;gap:8px}
.busca{flex:1 1 220px}.reg{flex:1 1 160px}
@media (max-width:699px){.chips{flex-wrap:nowrap;overflow-x:auto;margin-left:-12px;margin-right:-12px;padding:0 12px 4px;scrollbar-width:none;overscroll-behavior-x:contain}.chips::-webkit-scrollbar{display:none}.chip{flex:none}}
input[type=search],select{width:100%;min-height:44px;border:1px solid #cfc6b6;border-radius:10px;background:#fff;color:var(--tinta);font:16px var(--corpo);padding:8px 12px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:6px 12px;border:1px solid #cfc6b6;border-radius:999px;background:#fff;color:var(--tinta);font:600 .85rem var(--display);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.chip[aria-pressed=true]{background:var(--tinta);border-color:var(--tinta);color:var(--creme)}
.chip[aria-pressed=true] .m-outro{border-color:var(--creme)}
.chip[aria-pressed=true] .m-prazo{background:var(--creme)}
.contagem{font-size:.85rem;color:var(--cinza);margin:10px 2px 0;min-height:1.3em}
@media (pointer:coarse){.chip{min-height:44px}}

/* marca de tipo: cor com papel fixo, sempre ao lado do rótulo em texto */
.marca{display:inline-block;width:10px;height:10px;border-radius:2px;flex:none}
.m-feriado{background:var(--vinho)}.m-saude{background:var(--verde)}.m-prazo{background:var(--tinta)}
.m-local{background:var(--ouro)}.m-outro{border:1.5px solid var(--cinza)}

/* grade do mês */
.sem-dias,.grade{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.sem-dias li{font:700 .72rem var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--cinza);text-align:center;padding:0 0 4px}
.grade li a,.grade li .sem{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1/1;min-height:44px;border-radius:9px;text-decoration:none;color:var(--tinta);transition:background-color .15s ease,opacity .15s ease}
.grade b{font:800 1rem/1 var(--display)}
.grade .qt{font:600 .7rem/1 var(--display);color:#4b5561;margin-top:3px}
.grade .fer{display:none}
.grade .n0 .sem{color:#8b9097}
.grade .n1 a{background:#fbf2df}.grade .n2 a{background:var(--ouro-claro)}.grade .n3 a{background:#ecc988}
.grade .feriado a::after{content:"";position:absolute;left:22%;right:22%;bottom:5px;height:3px;border-radius:2px;background:var(--vinho)}
.grade .feriado b{color:var(--vinho)}
.grade li.apagado a{opacity:.28}
.grade li.atual a{outline:2px solid var(--tinta);outline-offset:-2px}
@media (hover:hover) and (pointer:fine){.grade a:hover{background:var(--tinta);color:var(--creme)}.grade a:hover .qt,.grade a:hover b{color:var(--creme)}}
@media (min-width:480px){.grade li a,.grade li .sem{aspect-ratio:auto;height:54px}}
.legenda{font-size:.8rem;color:var(--cinza);margin:8px 0 0;line-height:1.45}
.legenda .vinho{display:inline-block;width:14px;height:3px;background:var(--vinho);vertical-align:middle;border-radius:2px}

/* lista: agenda com o número do dia na margem */
.mes-inteiro{margin:0 0 28px}
.mes-inteiro h2,.rot{font:800 .82rem/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--vinho);border-top:3px solid var(--ouro);padding-top:8px;display:inline-block;margin:0 0 6px}
.dia{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:14px;border-top:1px solid var(--linha);padding:18px 0 4px;scroll-margin-top:96px}
.dia h2{grid-column:1;margin:0;font:600 .72rem/1.2 var(--display);text-transform:uppercase;letter-spacing:.05em;color:var(--cinza)}
.dia h2 span{display:block}
.dia h2 small{display:block;font:600 .7rem/1.2 var(--display);color:var(--vinho);margin-top:6px;text-transform:none;letter-spacing:0}
.dia .num{display:block;font:800 2.2rem/1 var(--display);color:var(--tinta);letter-spacing:-.01em;margin-bottom:2px}
.dia .datas{grid-column:2}
.datas{list-style:none;margin:0;padding:0}
.data{padding:0 0 14px;margin:0 0 12px;border-bottom:1px dashed var(--linha);scroll-margin-top:16px}
.data:last-child{border-bottom:0;margin-bottom:0}
.rotulo{display:flex;align-items:center;gap:7px;margin:0 0 3px;font:600 .78rem/1.3 var(--display);color:var(--cinza)}
.nome{font:700 1.06rem/1.3 var(--display);margin:0 0 6px;overflow-wrap:break-word}
.forte .nome{font-weight:800;font-size:1.22rem}
.produzir{margin:0 0 6px;max-width:66ch}
.pq{font:700 .74rem var(--display);text-transform:uppercase;letter-spacing:.07em;color:var(--vinho);margin-right:4px}
.meta{font-size:.82rem;color:var(--cinza);margin:0 0 10px}.meta a{color:var(--cinza)}
.data:target .nome{background:var(--ouro-claro);box-shadow:0 0 0 4px var(--ouro-claro);border-radius:3px}

/* ações */
.acoes{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.ac,.agenda summary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border:1px solid #cfc6b6;border-radius:10px;background:#fff;color:var(--tinta);font:600 .85rem var(--display);text-decoration:none;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .16s var(--ease)}
.ac:active,.agenda summary:active{transform:scale(.97)}
.agenda,.mais{padding:0;border:0;background:none}
.agenda summary,.mais summary{list-style:none}.agenda summary::-webkit-details-marker,.mais summary::-webkit-details-marker{display:none}
.mais summary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border:1px solid #cfc6b6;border-radius:10px;background:#fff;color:var(--tinta);font:600 .85rem var(--display);cursor:pointer}
.agenda[open] summary,.mais[open] summary{background:var(--tinta);color:var(--creme);border-color:var(--tinta)}
.agenda-op{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.agenda-op a,.agenda-op button{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:10px;border:1px dashed #b9ae9b;background:var(--papel);color:var(--tinta);font:600 .82rem var(--display);text-decoration:none;cursor:pointer}
.salvar[aria-pressed=true]{background:var(--verde);border-color:var(--verde);color:#fff}
.agenda-op .pauta{color:var(--vinho)}
.acoes details[open]{flex-basis:100%}
.so-dia{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:var(--ouro-claro);border-radius:12px;padding:10px 14px;margin:0 0 16px;position:sticky;top:8px;z-index:5}.so-dia p{margin:0}
.pauta sup,.plano-nota sup{font-size:.7em}
@media (hover:hover) and (pointer:fine){.ac:hover,.agenda summary:hover{border-color:var(--tinta)}.salvar[aria-pressed=false]:hover{background:#eef5f2}}
.copiado{background:var(--ouro-claro)!important}

.vazio-filtro{background:var(--papel);border:1px dashed #cfc6b6;border-radius:14px;padding:18px;margin:0 0 20px}
.botao{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:10px;border:2px solid var(--vinho);background:#fff;color:var(--vinho);font:700 .92rem var(--display);cursor:pointer;text-decoration:none}
.botao.alt{border-color:#cfc6b6;color:var(--tinta)}

/* plano do mês */
.plano{margin:32px 0 0;padding:20px;border-radius:16px;background:#eef3f1;border:1px solid #cfe0da;scroll-margin-top:12px}
.progresso{font:700 1rem var(--display);margin:0 0 8px}
.barra{height:8px;border-radius:99px;background:#d5e5df;overflow:hidden;margin:0 0 14px}
.barra span{display:block;height:100%;width:0;background:var(--verde);transform-origin:left;transition:width .3s var(--ease)}
.plano-lista{list-style:none;margin:0 0 12px;padding:0}
.plano-lista li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:10px 0;border-top:1px solid #cfe0da}
.plano-lista .pn{font:700 .95rem/1.3 var(--display);overflow-wrap:break-word}.plano-lista .pd{display:block;font:500 .8rem var(--display);color:var(--cinza)}
.estado{display:flex;flex-wrap:wrap;gap:4px;grid-column:1/-1}
.estado button{min-height:40px;padding:6px 10px;border-radius:8px;border:1px solid #b8cfc7;background:#fff;color:var(--tinta);font:600 .8rem var(--display);cursor:pointer}
.estado button[aria-pressed=true]{background:var(--verde-escuro);border-color:var(--verde-escuro);color:#fff}
.tirar{min-height:44px;padding:6px 10px;border:0;background:none;color:var(--vinho);font:600 .82rem var(--display);text-decoration:underline;cursor:pointer}
@media (pointer:coarse){.estado button{min-height:44px}}
.plano-acoes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.plano-vazio,.plano-nota{font-size:.9rem;color:#3d4652;margin:0 0 8px}

.assine{text-align:center;margin:32px 0 0;padding:20px;border-radius:14px;background:var(--papel);border:1px solid var(--linha);border-top:4px solid var(--ouro)}
.assine a.cta{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:12px 20px;border-radius:12px;background:var(--verde);color:#fff;font:700 1rem var(--display);text-decoration:none;box-shadow:0 4px 0 var(--verde-escuro)}
.aviso{font-size:.85rem;color:var(--cinza);margin:18px 0 0;max-width:70ch}
footer{max-width:1160px;margin:0 auto;padding:0 16px 32px;font-size:.85rem;color:var(--cinza)}

/* barra fixa do plano */
.barra-plano{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:10px 18px;border-radius:999px;background:var(--tinta);color:var(--creme);font:700 .95rem var(--display);white-space:nowrap;text-decoration:none;box-shadow:0 6px 18px rgba(28,36,45,.25)}
.barra-plano b{color:var(--ouro)}
.barra-plano.pulso{animation:pulso .32s var(--ease)}
@keyframes pulso{50%{transform:translateX(-50%) scale(1.05)}}
@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important}.barra-plano.pulso{animation:none}}

/* D245: pedir pauta desta data (só aparece quando o fluxo de ângulos por data existir) e data selecionada na grade */
.grade li.sel a{outline:2px solid var(--vinho);outline-offset:-2px}
.ac.pedir{background:var(--ouro);border-color:var(--ouro);color:var(--tinta)}
@media (hover:hover) and (pointer:fine){.ac.pedir:hover{background:#c98a26;border-color:#c98a26}}
