/* Tema "Missões Urbanas" do site da SEMADCR (semadcr-sparkle): teal e ardósia, cantos retos,
   bordas grossas e sombra sólida deslocada, Oswald em maiúsculas nos títulos e Montserrat no texto. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap;
             src: url("fontes/montserrat.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500 700; font-display: swap;
             src: url("fontes/oswald.woff2") format("woff2"); }

:root {
  --teal: #308c75; --teal-escuro: #23705d; --teal-claro: #e3f1ed;
  --ardosia: #204444; --branco: #ffffff;
  --fundo: #eff4f4; --muted: #e3eaea; --linha: #d3dcdc; --cinza: #557070;
  --erro: #c0262d; --erro-claro: #fbe9e9;
  --sombra: 6px 6px 0 var(--ardosia); --sombra-teal: 6px 6px 0 var(--teal); --sombra-p: 4px 4px 0 var(--ardosia);
  --display: "Oswald", "Arial Narrow", sans-serif;
  --texto: "Montserrat", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fundo); color: var(--ardosia); font: 15px/1.6 var(--texto); }
a { color: var(--teal-escuro); }
h1, h2, h3 { font-family: var(--display); text-transform: uppercase; line-height: 1.1; margin: 0; letter-spacing: .01em; }
h1 { font-size: 30px; }
h2 { font-size: 18px; margin-bottom: 14px; }
small { color: var(--cinza); font-weight: 500; text-transform: none; }

/* ---------------------------------------------------------------- topo */
.topo { background: var(--ardosia); color: var(--branco); position: sticky; top: 0; z-index: 10;
        box-shadow: 0 6px 0 var(--teal); }
.topo-dentro { max-width: 1160px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 10px; background: var(--branco); border: 2px solid var(--ardosia);
         box-shadow: 4px 4px 0 var(--teal); padding: 4px 12px 4px 6px; text-decoration: none; color: var(--ardosia);
         transition: transform .15s; }
.marca:hover { transform: translateY(-2px); }
.marca img { height: 42px; width: auto; display: block; }
.marca-divisor { width: 1px; height: 32px; background: rgba(32, 68, 68, .25); }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-texto b { font-family: var(--display); text-transform: uppercase; font-size: 20px; letter-spacing: .04em; }
.marca-texto small { font-family: var(--display); text-transform: uppercase; letter-spacing: .18em; font-size: 10px; color: var(--teal); margin-top: 3px; }
nav { display: flex; gap: 8px; flex: 1; }
nav a { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; text-decoration: none;
        color: var(--branco); border: 2px solid var(--branco); padding: 5px 14px; transition: background .15s, color .15s; }
nav a:hover, nav a.ativo { background: var(--branco); color: var(--ardosia); }
.pilula { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); text-transform: uppercase;
          letter-spacing: .08em; font-size: 13px; padding: 5px 12px; text-decoration: none; white-space: nowrap;
          background: var(--branco); color: var(--ardosia); border: 2px solid var(--ardosia); box-shadow: 3px 3px 0 var(--teal); }
.ponto { width: 9px; height: 9px; background: var(--cinza); display: inline-block; }
.pilula-ok .ponto { background: var(--teal); }
.pilula-erro { color: var(--erro); } .pilula-erro .ponto { background: var(--erro); }
.pilula-alerta .ponto { background: var(--ardosia); animation: piscar 1s infinite; }
@keyframes piscar { 50% { opacity: .2; } }

/* ---------------------------------------------------------------- faixa de abertura */
.heroi { position: relative; overflow: hidden; color: var(--branco); padding: 30px 16px 54px;
         background: linear-gradient(160deg, var(--teal), var(--ardosia));
         clip-path: polygon(0 0, 100% 0, 100% 92%, 96% 97%, 92% 93%, 88% 98%, 84% 94%, 80% 99%, 76% 94%, 72% 98%, 68% 93%,
           64% 98%, 60% 94%, 56% 99%, 52% 94%, 48% 98%, 44% 93%, 40% 98%, 36% 94%, 32% 99%, 28% 94%, 24% 98%, 20% 93%,
           16% 98%, 12% 94%, 8% 99%, 4% 94%, 0 97%); }
.heroi::before { content: ""; position: absolute; inset: 0; opacity: .08;
                 background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 22px 22px; }
.heroi-dentro { position: relative; max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.heroi h1 { font-size: clamp(32px, 4.6vw, 52px); margin: 12px 0 10px; text-shadow: 4px 4px 0 var(--ardosia); }
.heroi p { margin: 0 0 20px; max-width: 520px; font-size: 16px; color: #e8f3f0; }
.heroi-tela { position: relative; flex: 0 0 118px; aspect-ratio: 9 / 16; border: 3px solid var(--branco); background: var(--ardosia);
              box-shadow: 8px 8px 0 var(--ardosia); overflow: hidden; display: grid; place-items: center; text-decoration: none;
              transform: rotate(2deg); transition: transform .2s; }
.heroi-tela:hover { transform: rotate(0deg) translateY(-3px); }
.heroi-tela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.heroi-tela .sem-arte { color: var(--branco); }
.heroi-tela .sem-arte small { color: #cfe5df; }
.heroi-tela-selo { position: absolute; left: 8px; bottom: 8px; font-size: 11px; }

/* ---------------------------------------------------------------- página */
.pagina { max-width: 1160px; margin: 0 auto; padding: 28px 16px 48px; }
.cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.cabecalho h1 { text-shadow: 3px 3px 0 var(--teal-claro); }
.acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.acoes form { margin: 0; }
.bloco { background: var(--branco); border: 3px solid var(--ardosia); box-shadow: var(--sombra); padding: 20px; margin-bottom: 26px; }
.secao { margin-bottom: 28px; }
.titulo-secao { font-size: 22px; display: inline-block; margin-bottom: 16px; padding-bottom: 4px; border-bottom: 4px solid var(--teal); }
.contagem { display: inline-block; font-size: 13px; background: var(--ardosia); color: var(--branco); padding: 1px 8px; margin-left: 6px; vertical-align: middle; letter-spacing: .1em; }
.dica { color: var(--cinza); font-size: 13px; margin: 6px 0 14px; }
.vazio { color: var(--cinza); margin: 0; }
.link-forte { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; text-decoration: none; }
.faixa { padding: 12px 16px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
         border: 2px solid var(--ardosia); box-shadow: var(--sombra-p); background: var(--branco); font-weight: 500; }
.faixa form { margin: 0; }
.faixa-ok { border-left: 10px solid var(--teal); }
.faixa-erro { border-left: 10px solid var(--erro); color: var(--erro); }
.faixa-alerta { border-left: 10px solid var(--ardosia); background: var(--muted); }
.rodape { text-align: center; padding: 18px 16px 28px; font-family: var(--display); text-transform: uppercase; letter-spacing: .14em;
          font-size: 12px; color: var(--cinza); }

/* ---------------------------------------------------------------- selos e etiquetas */
.selo { display: inline-block; font-family: var(--display); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; padding: 3px 10px; }
.selo-escuro { background: var(--ardosia); color: var(--branco); }
.selo-claro { background: var(--branco); color: var(--teal-escuro); box-shadow: 3px 3px 0 var(--ardosia); }
.etiqueta { display: inline-block; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 11px;
            padding: 1px 8px; border: 2px solid rgba(32, 68, 68, .4); color: var(--cinza); white-space: nowrap; }
.etiqueta-ok { border-color: var(--teal); background: var(--teal); color: var(--branco); }
.etiqueta-erro, .etiqueta-perdida { border-color: var(--erro); color: var(--erro); }
.etiqueta-pulada, .etiqueta-postando { border-color: var(--ardosia); color: var(--ardosia); }

/* ---------------------------------------------------------------- botões */
.botao { display: inline-block; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 15px; font-weight: 600;
         background: var(--teal); color: var(--branco); border: 2px solid var(--ardosia); box-shadow: var(--sombra-p);
         padding: 9px 18px; cursor: pointer; text-decoration: none; text-align: center; transition: transform .1s, box-shadow .1s; }
.botao:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ardosia); }
.botao:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ardosia); }
.botao:disabled { opacity: .45; cursor: default; transform: none; box-shadow: var(--sombra-p); }
.botao-secundario { background: var(--branco); color: var(--ardosia); }
.botao-perigo { background: var(--branco); color: var(--erro); border-color: var(--erro); box-shadow: 4px 4px 0 var(--erro); }
.botao-perigo:hover { box-shadow: 6px 6px 0 var(--erro); }
.botao-claro { background: var(--branco); color: var(--ardosia); }
.botao-contorno { background: transparent; color: var(--branco); border-color: var(--branco); box-shadow: 4px 4px 0 var(--ardosia); }
.botao-pequeno { padding: 4px 12px; font-size: 13px; }
.largura-toda { width: 100%; margin-top: 12px; }

/* ---------------------------------------------------------------- próximos dias */
.linha-do-tempo { list-style: none; margin: 0; padding: 0; }
.linha-do-tempo li { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 2px dashed var(--linha); flex-wrap: wrap; }
.linha-do-tempo li:last-child { border-bottom: 0; }
.quando { min-width: 140px; text-align: center; font-variant-numeric: tabular-nums; }
.linha-do-tempo a { color: var(--ardosia); text-decoration: none; font-weight: 700; }
.linha-do-tempo a:hover { color: var(--teal); }

/* ---------------------------------------------------------------- cartões */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.cartao { display: flex; gap: 12px; padding: 10px; background: var(--branco); border: 3px solid var(--ardosia); box-shadow: var(--sombra-teal);
          transition: transform .15s; }
.cartao:hover { transform: translateY(-3px); }
.cartao-inativo { opacity: .55; box-shadow: var(--sombra-p); }
.miniatura { position: relative; flex: 0 0 66px; aspect-ratio: 9 / 16; overflow: hidden; background: var(--muted); border: 2px solid var(--ardosia);
             display: grid; place-items: center; text-decoration: none; }
.miniatura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.miniatura-fundo, .tela-fundo { position: absolute; inset: -12px; background-size: cover; background-position: center; filter: blur(8px); }
.sem-arte { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--erro);
            text-align: center; padding: 4px; position: relative; line-height: 1.2; }
.cartao-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; align-items: flex-start; }
.cartao-nome { font-family: var(--display); text-transform: uppercase; font-size: 17px; line-height: 1.15; color: var(--ardosia); text-decoration: none; }
.cartao-nome:hover { color: var(--teal); }
.cartao-agenda { font-size: 13px; color: var(--cinza); font-weight: 500; }
.cartao-proxima { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--teal-escuro); }
.grade-compacta { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.grade-compacta .cartao { box-shadow: var(--sombra-p); }
.grade-compacta .miniatura { flex-basis: 40px; }
.grade-compacta .cartao-nome { font-size: 15px; }

/* ---------------------------------------------------------------- postagens */
.postagens { list-style: none; margin: 0 0 10px; padding: 0; }
.postagens li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 2px dashed var(--linha); }
.postagens li:last-child { border-bottom: 0; }
.postagem-mini { flex: 0 0 36px; aspect-ratio: 9 / 16; background: var(--muted) center / cover; border: 2px solid var(--ardosia); }
.postagem-mini-apagada { opacity: .4; filter: grayscale(.6); }
.postagem-texto { display: flex; flex-direction: column; gap: 2px; }
.postagem-texto b { font-family: var(--display); text-transform: uppercase; font-weight: 600; letter-spacing: .02em; }
.detalhe { font-size: 13px; color: var(--cinza); }

/* ---------------------------------------------------------------- formulários */
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; align-items: start; }
.formulario { display: flex; flex-direction: column; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; }
.campo > span, legend { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; padding: 0; }
input[type=text], input:not([type]), input[type=date], input[type=time], input[type=number], input[type=password] {
  font: 500 15px var(--texto); color: var(--ardosia); padding: 9px 11px; border: 2px solid var(--ardosia); border-radius: 0; background: var(--branco); width: 100%; }
input:focus { outline: none; box-shadow: 4px 4px 0 var(--teal); }
fieldset.campo { gap: 12px; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; border: 2px solid var(--ardosia);
         padding: 5px 14px; cursor: pointer; background: var(--branco); }
.opcao:has(input:checked) { background: var(--ardosia); color: var(--branco); box-shadow: 3px 3px 0 var(--teal); }
.opcao input { display: none; }
.dias { display: flex; gap: 8px; flex-wrap: wrap; }
.dia input { display: none; }
.dia span { display: inline-block; min-width: 50px; text-align: center; padding: 7px 6px; border: 2px solid var(--ardosia); cursor: pointer;
            font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; background: var(--branco); }
.dia input:checked + span { background: var(--teal); color: var(--branco); box-shadow: 3px 3px 0 var(--ardosia); }
.caixa { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.caixa input { accent-color: var(--teal); width: 18px; height: 18px; }
.soltar { display: block; border: 3px dashed var(--ardosia); padding: 20px; text-align: center; cursor: pointer; color: var(--cinza);
          font-weight: 500; background: var(--fundo); transition: background .15s; }
.soltar:hover, .soltar.arrastando { border-color: var(--teal); color: var(--teal-escuro); background: var(--teal-claro); }
.soltar input { display: none; }
.rodape-form { display: flex; gap: 10px; }
.linha-form { display: flex; gap: 10px; }
.lateral h2 { margin-top: 2px; }
.lateral form { margin: 0; }
.lateral form + h2 { margin-top: 24px; }
.tela { position: relative; width: 200px; aspect-ratio: 9 / 16; margin: 0 auto; overflow: hidden; background: var(--muted);
        border: 3px solid var(--ardosia); box-shadow: var(--sombra-teal); display: grid; place-items: center; }
.tela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.situacao { font-size: 15px; padding: 10px 14px; border: 2px solid var(--ardosia); font-weight: 500; }
.situacao-ok { border-left: 10px solid var(--teal); }
.situacao-erro { border-left: 10px solid var(--erro); color: var(--erro); }
.situacao-alerta { border-left: 10px solid var(--ardosia); background: var(--muted); }

/* ---------------------------------------------------------------- entrar */
.centro { min-height: 100vh; display: grid; place-items: center; padding: 16px;
          background: linear-gradient(160deg, var(--teal), var(--ardosia)); }
.entrar { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.entrar-logo { width: 96px; margin: 0 auto; }
.entrar .campo { text-align: left; }

@media (max-width: 760px) {
  .duas-colunas { grid-template-columns: 1fr; }
  nav { order: 3; flex-basis: 100%; }
  nav a { flex: 1; text-align: center; padding: 5px 6px; }
  .pilula { margin-left: auto; }
  .marca img { height: 34px; }
  .heroi { padding: 28px 16px 48px; }
  .heroi-tela { flex-basis: 96px; }
  .quando { min-width: 0; }
  h1 { font-size: 26px; }
}

/* ---------------------------------------------------------------- WhatsApp */
.qr { display: block; width: 260px; max-width: 100%; margin: 12px auto; border: 3px solid var(--ardosia); box-shadow: var(--sombra-teal); background: #fff; }
.cabeca-grupos { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cabeca-grupos h2 { margin: 0; }
.tabela-grupos { border: 2px solid var(--ardosia); }
.linha-grupo { display: grid; grid-template-columns: minmax(0, 1fr) 96px 64px; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px dashed var(--linha); }
.linha-grupo:last-child { border-bottom: 0; }
.linha-grupo.cabeca { background: var(--ardosia); color: var(--branco); font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.linha-grupo.cabeca span:not(:first-child) { text-align: center; }
.nome-grupo { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.nome-grupo small { display: block; font-weight: 500; }
.marcador { display: grid; place-items: center; cursor: pointer; }
.marcador input { width: 22px; height: 22px; accent-color: var(--teal); cursor: pointer; }
.marcador i { display: none; }
.lista-dica { padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
code { font-size: 13px; background: var(--muted); padding: 1px 5px; }

.contatos { list-style: none; margin: 0 0 12px; padding: 0; }
.contatos li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--linha); }
.contatos li span { display: flex; flex-direction: column; }
.contatos form { margin: 0; }
.contatos .botao-pequeno { font-size: 20px; line-height: 1; padding: 4px 12px; }
.linha-contato input { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- festividades */
.festa-cobrando { box-shadow: 6px 6px 0 var(--erro); }
.festa-corpo { display: flex; gap: 14px; align-items: flex-start; }
.festa-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.festa-info p { margin: 0; }
.festa-info .escala-pessoas { margin: 4px 0; }
.festa-arte { width: 84px; aspect-ratio: 9 / 16; object-fit: cover; border: 2px solid var(--ardosia); flex: none; display: block; }
.festa-sem-arte { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--muted);
                  border-style: dashed; font-size: 12px; font-weight: 600; color: var(--cinza); }
.festa-dia { font-weight: 600; font-size: 14px; }
.festa-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.festa-botoes label.botao { cursor: pointer; }
.festa-passadas { cursor: pointer; font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 13px;
                  color: var(--teal-escuro); }
.festa-editar { max-width: 560px; }

/* ---------------------------------------------------------------- escala da mídia */
.escala-hoje { box-shadow: var(--sombra-teal); }
.escala-dia-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.escala-dia-topo h2 { margin: 0; }
.escala-dia-topo h2 small { font-family: var(--texto); font-size: 14px; letter-spacing: 0; margin-left: 4px; }
.aviso-status { font-size: 13px; font-weight: 600; color: var(--cinza); }
.aviso-ok { color: var(--teal-escuro); }
.aviso-erro { color: var(--erro); }
.escala-item { border: 2px solid var(--ardosia); padding: 10px 12px; margin-top: 12px; background: var(--branco); }
.escala-item-topo { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.escala-hora { font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: .04em; background: var(--ardosia);
               color: var(--branco); padding: 1px 8px; }
.escala-nome { font-family: var(--display); text-transform: uppercase; font-size: 18px; line-height: 1.15; color: var(--ardosia); text-decoration: none; }
.escala-nome:hover { color: var(--teal); }
.etiqueta-troca { border-color: var(--teal); color: var(--teal-escuro); }
.escala-pessoas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { display: inline-block; padding: 2px 10px; border: 2px solid var(--teal); background: var(--teal-claro); font-weight: 600; font-size: 14px; }
.escala-sorteio { font-size: 14px; font-weight: 500; }
.escala-cancelada { border-style: dashed; background: var(--fundo); }
.escala-cancelada .escala-pessoas, .escala-cancelada .escala-nome { opacity: .55; text-decoration: line-through; }
.escala-mudar summary, .escala-previa summary { cursor: pointer; font-family: var(--display); text-transform: uppercase;
                                                letter-spacing: .08em; font-size: 13px; color: var(--teal-escuro); margin-top: 10px; }
.escala-mudar form { margin-top: 10px; gap: 12px; }
.escala-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao-desligada { opacity: .35; cursor: default; }
.previa-aviso { white-space: pre-wrap; font: 500 14px/1.5 var(--texto); background: var(--teal-claro); border: 2px solid var(--ardosia);
                padding: 10px 12px; margin: 10px 0 0; overflow-wrap: anywhere; }
.escala-avisar { margin-top: 14px; }
.escalas { list-style: none; margin: 0 0 4px; padding: 0; }
.escalas li { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px dashed var(--linha); font-size: 14px; }
.escalas a { font-family: var(--display); text-transform: uppercase; text-decoration: none; color: var(--ardosia); font-size: 16px; line-height: 1.2; }
.escalas a:hover { color: var(--teal); }
.escala-pausada { opacity: .55; }
.lateral .espaco-acima { margin-top: 26px; }

/* ---------------------------------------------------------------- semana (como o Google Agenda) */
.cal-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-topo h2 { margin: 0; font-size: 22px; }
.botao-desligado { opacity: .4; pointer-events: none; }
.cal-rolagem { overflow: auto; height: 640px; border: 3px solid var(--ardosia); background: var(--branco); position: relative;
               overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cal-quadro { min-width: 760px; }
.cal-cabeca, .cal-grade { display: grid; grid-template-columns: 54px repeat(7, minmax(0, 1fr)); }
.cal-cabeca { border-bottom: 3px solid var(--ardosia); background: var(--branco); position: sticky; top: 0; z-index: 6; }
.cal-canto { position: sticky; left: 0; background: var(--branco); z-index: 7; }
.cal-dia { text-align: center; padding: 6px 0 8px; border-left: 1px solid var(--linha); }
.cal-dia span { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--cinza); }
.cal-dia b { display: inline-grid; place-items: center; width: 36px; height: 36px; font-family: var(--display); font-size: 22px; font-weight: 600; }
.cal-hoje span { color: var(--teal-escuro); }
.cal-hoje b { background: var(--teal); color: var(--branco); box-shadow: 3px 3px 0 var(--ardosia); }
.cal-corpo { position: relative; }
.cal-grade { height: 1440px; position: relative; }
.cal-horas { position: sticky; left: 0; z-index: 5; background: var(--branco); border-right: 1px solid var(--linha); }
.cal-horas span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11px; font-weight: 600; color: var(--cinza); font-variant-numeric: tabular-nums; }
.cal-coluna { position: relative; border-left: 1px solid var(--linha); cursor: cell;
              background-image: repeating-linear-gradient(to bottom, var(--linha) 0 1px, transparent 1px 30px, #eef2f2 30px 31px, transparent 31px 60px); }
.cal-coluna-passada { background-color: #f6f8f8; }
.cal-coluna-hoje { background-color: #f3faf8; }
.cal-agora { position: absolute; left: -1px; right: 0; height: 2px; background: var(--erro); z-index: 3; pointer-events: none; }
.cal-agora::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; background: var(--erro); border-radius: 50%; }
.cal-fantasma { position: absolute; left: 2px; right: 2px; height: 28px; border: 2px dashed var(--teal); background: rgba(48, 140, 117, .1);
                color: var(--teal-escuro); font-family: var(--display); font-size: 12px; letter-spacing: .06em; padding: 2px 6px;
                pointer-events: none; z-index: 1; }
.cal-bloco { position: absolute; z-index: 2; display: flex; gap: 6px; align-items: flex-start; padding: 4px; overflow: hidden; text-align: left;
             font: 500 12px/1.25 var(--texto); cursor: pointer; border: 2px solid var(--ardosia); box-shadow: 3px 3px 0 var(--ardosia);
             background: var(--teal); color: var(--branco); transition: transform .1s; }
.cal-bloco:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ardosia); z-index: 4; }
.cal-mini { flex: 0 0 22px; height: 39px; background: var(--muted) center / cover; border: 1px solid rgba(255, 255, 255, .7); }
.cal-texto { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cal-texto b { font-family: var(--display); font-weight: 600; letter-spacing: .04em; margin-right: 4px; }
.cal-bloco.status-ok { background: var(--ardosia); }
.cal-bloco.status-ok .cal-texto b::after { content: " ✓"; color: #7fd3bd; }
.cal-bloco.status-cancelada { background: var(--branco); color: var(--cinza); border-style: dashed; box-shadow: none; text-decoration: line-through; }
.cal-bloco.status-perdida, .cal-bloco.status-erro { background: var(--branco); color: var(--erro); border-color: var(--erro); box-shadow: 3px 3px 0 var(--erro); }
.cal-bloco.status-pulada, .cal-bloco.status-sem-registro { background: var(--muted); color: var(--cinza); border-color: var(--cinza); box-shadow: none; }
.cal-bloco.status-postando { background: var(--teal-escuro); }
.cal-bloco.cal-sem-arte { background: var(--branco); color: var(--erro); border: 2px dashed var(--erro); box-shadow: none; }
.cal-bloco.cal-manual { border-style: dotted; }
.cal-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--cinza); }
.cal-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legenda i { width: 14px; height: 14px; border: 2px solid var(--ardosia); background: var(--teal); display: inline-block; }
.cal-legenda i.status-ok { background: var(--ardosia); }
.cal-legenda i.status-cancelada { background: var(--branco); border-style: dashed; }
.cal-legenda i.status-perdida { background: var(--branco); border-color: var(--erro); }
.cal-legenda i.cal-sem-arte { background: var(--branco); border: 2px dashed var(--erro); }

/* ---------------------------------------------------------------- quadros (clique num story ou num horário) */
.janela { border: 3px solid var(--ardosia); box-shadow: 8px 8px 0 var(--teal); padding: 22px; max-width: 640px; width: calc(100% - 32px);
          color: var(--ardosia); background: var(--branco); }
.janela::backdrop { background: rgba(32, 68, 68, .55); }
.janela-fechar { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--ardosia); }
.janela-corpo { display: flex; gap: 20px; align-items: flex-start; }
.janela-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.janela-info.formulario { align-items: stretch; gap: 12px; }
.janela-info.formulario .selo { align-self: flex-start; }
.janela h3 { font-size: 24px; margin: 4px 0 0; }
.janela p { margin: 0; }
.janela-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.janela-acoes form { margin: 0; }
.tela-pequena { width: 150px; flex: 0 0 150px; margin: 0; }
select { font: 500 15px var(--texto); color: var(--ardosia); padding: 9px 11px; border: 2px solid var(--ardosia); border-radius: 0; background: var(--branco); width: 100%; }
select:focus { outline: none; box-shadow: 4px 4px 0 var(--teal); }

@media (max-width: 640px) {
  .janela { padding: 18px 16px; max-height: calc(100vh - 24px); overflow-y: auto; }
  .janela-corpo { flex-direction: column; align-items: center; gap: 14px; }
  .janela-info { align-items: stretch; width: 100%; }
  .janela-acoes { flex-direction: column; }
  .janela-acoes .botao { width: 100%; }
  .tela-pequena { width: 110px; flex-basis: auto; }
  .bloco { padding: 14px; }
  .pagina { padding: 20px 12px 40px; }
  .cal-rolagem { height: 70vh; }
  .cal-quadro { min-width: calc(54px + 7 * 138px); }  /* ~2 dias e meio na tela, nome inteiro no bloco */
  .cal-topo h2 { font-size: 19px; }
  /* cabeçalho do painel: compacto e solto, para a tela ficar com a agenda */
  .topo { position: static; }
  .topo-dentro { gap: 10px; padding: 8px 12px; }
  .marca { padding: 3px 10px 3px 4px; }
  .marca-texto b { font-size: 17px; }
  .pilula { font-size: 11px; padding: 4px 8px; max-width: 52vw; overflow: hidden; text-overflow: ellipsis; }
  nav { gap: 5px; flex-wrap: wrap; }
  nav a { font-size: 12px; letter-spacing: .04em; padding: 4px 3px; }  /* 6 abas: quebram em duas linhas em 360 px */
  .heroi p { font-size: 15px; }
  .acoes .botao { padding: 8px 14px; }
}

/* ---------------------------------------------------------------- departamentos (página inicial) */
.heroi-curto { padding-bottom: 46px; }
.heroi-curto h1 { margin-bottom: 6px; }
.departamentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.departamento { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 22px; text-decoration: none;
                color: var(--ardosia); background: var(--branco); border: 3px solid var(--ardosia); box-shadow: var(--sombra-teal);
                transition: transform .15s, box-shadow .15s; }
.departamento:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--teal); }
.departamento h2 { font-size: 34px; margin: 0; }
.departamento p { margin: 0; color: var(--cinza); font-weight: 500; }
.departamento ul { margin: 4px 0 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.departamento-ir { margin-top: auto; padding-top: 8px; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--teal-escuro); }

/* ---------------------------------------------------------------- secretaria */
.resumo { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.resumo-item { display: flex; flex-direction: column; min-width: 92px; padding: 8px 12px; text-decoration: none; color: var(--ardosia);
               background: var(--branco); border: 2px solid var(--ardosia); box-shadow: var(--sombra-p); transition: transform .1s; }
.resumo-item:hover { transform: translate(-2px, -2px); }
.resumo-item b { font-family: var(--display); font-size: 24px; line-height: 1.1; font-weight: 600; }
.resumo-item span { font-size: 12px; font-weight: 600; color: var(--cinza); }
.resumo-ativo { background: var(--ardosia); color: var(--branco); box-shadow: 4px 4px 0 var(--teal); }
.resumo-ativo span { color: #cfe5df; }
/* 23/10: os números são só informação (sem cara de botão); os filtros são as fichas logo abaixo */
.numeros { margin-bottom: 16px; }
.numeros-titulo { font-size: 15px; margin: 0 0 8px; }
.numeros-titulo small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--cinza); font-size: 12px; }
.numeros-linha { display: flex; flex-wrap: wrap; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.numero { display: flex; flex-direction: column; padding: 8px 18px 8px 0; margin-right: 18px; border-right: 1px solid var(--linha); }
.numero:last-child { border-right: 0; }
.numero b { font-family: var(--display); font-size: 26px; line-height: 1.1; font-weight: 600; color: var(--ardosia); }
.numero span { font-size: 12px; color: var(--cinza); max-width: 150px; }
.numero-alerta b { color: var(--erro); }
.numero-ok b { color: var(--teal-escuro); }
.numeros-idade { font-size: 12px; color: var(--cinza); margin: 6px 0 0; }
.filtros-principais { display: flex; flex-direction: column; gap: 10px; }
.grupo-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.grupo-titulo { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--ardosia); min-width: 74px; }
.chip { display: inline-block; padding: 6px 14px; border: 2px solid var(--ardosia); border-radius: 999px; background: var(--branco);
        color: var(--ardosia); text-decoration: none; font-weight: 600; font-size: 14px; }
.chip:hover { background: var(--teal-claro); }
.chip-ativo, .chip-ativo:hover { background: var(--ardosia); color: var(--branco); }
.mais-filtros summary { cursor: pointer; font-weight: 600; color: var(--teal-escuro); margin: 4px 0; }
.mais-filtros .filtros { margin-top: 10px; }
.limpar-filtros { font-size: 13px; font-weight: 600; align-self: flex-start; }
.apelido { font-weight: 500; color: var(--cinza); font-size: 13px; }
.filtros { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(120px, 1fr)) auto; gap: 12px; align-items: end; }
.filtro-botoes { display: flex; gap: 8px; }
.lista-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: -6px 0 14px; }
.lista-topo p { margin: 0; }
.tabela-membros { border: 3px solid var(--ardosia); background: var(--branco); box-shadow: var(--sombra); margin-bottom: 26px; }
.linha-membro { display: grid; grid-template-columns: minmax(0, 2.4fr) 130px minmax(0, 1fr) 150px minmax(0, 2fr) 70px; gap: 10px;
                align-items: center; padding: 9px 12px; border-bottom: 1px dashed var(--linha); font-size: 14px; }
.linha-membro:last-child { border-bottom: 0; }
.linha-membro.cabeca { background: var(--ardosia); color: var(--branco); font-family: var(--display); text-transform: uppercase;
                       letter-spacing: .08em; font-size: 12px; border-bottom: 0; }
.membro-nome { display: flex; flex-direction: column; min-width: 0; }
.membro-nome a { font-weight: 700; color: var(--ardosia); text-decoration: none; overflow-wrap: anywhere; }
.membro-nome a:hover { color: var(--teal); }
.membro-saiu { opacity: .55; }
.faixa-idade { display: inline-block; font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 11px;
               padding: 1px 7px; border: 2px solid var(--ardosia); background: var(--branco); white-space: nowrap; }
.faixa-crianca { background: #fde9b8; }
.faixa-jovem { background: var(--teal-claro); border-color: var(--teal); }
.faixa-adulto { background: var(--ardosia); color: var(--branco); }
.faixa-sem-idade { border-style: dashed; color: var(--cinza); border-color: var(--cinza); }
.faltas { display: flex; flex-wrap: wrap; gap: 4px; }
.faltas i { font-style: normal; font-size: 11px; font-weight: 600; padding: 0 6px; border: 1px solid var(--erro); color: var(--erro); background: var(--erro-claro); white-space: nowrap; }
.linha-membro .nada { font-style: normal; }
.faltas i.falta-secundaria { border-color: var(--cinza); color: var(--cinza); background: var(--fundo); }
.faltas-titulo { margin: 10px 0 4px; font-weight: 600; }
.faltas em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--teal-escuro); }
.faixas-idade .linha-form { align-items: flex-end; flex-wrap: wrap; }
.faixas-idade .campo { max-width: 180px; }
.grade-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grade-endereco { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-endereco .campo-largo { grid-column: span 3; }
.formulario h2 { margin: 6px 0 -4px; }
textarea { font: 500 15px var(--texto); color: var(--ardosia); padding: 9px 11px; border: 2px solid var(--ardosia); border-radius: 0; background: var(--branco); width: 100%; resize: vertical; }
textarea:focus { outline: none; box-shadow: 4px 4px 0 var(--teal); }

@media (max-width: 900px) {
  .filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtro-busca { grid-column: 1 / -1; }
  /* tabela vira cartões */
  .linha-membro.cabeca { display: none; }
  .linha-membro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .linha-membro > span:nth-child(1) { flex: 1 1 calc(100% - 100px); order: 1; }
  .linha-membro > span:nth-child(6) { order: 2; }
  .linha-membro > span:nth-child(2) { order: 3; }
  .linha-membro > span:nth-child(3), .linha-membro > span:nth-child(4) { order: 4; font-size: 13px; color: var(--cinza); }
  .linha-membro > span:nth-child(5) { order: 5; flex-basis: 100%; }
  .linha-membro .nada { display: none; }
}
@media (max-width: 640px) {
  .grade-campos, .grade-endereco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-endereco .campo-largo { grid-column: 1 / -1; }
  .departamento h2 { font-size: 28px; }
  .resumo-item { min-width: 0; flex: 1 1 calc(25% - 10px); padding: 6px 8px; }
  .resumo-item b { font-size: 20px; }
}

/* ---------------------------------------------------------------- acessos (login por pessoa) */
.acesso { padding: 14px 0; border-bottom: 2px dashed var(--linha); gap: 10px; }
.acesso:first-of-type { padding-top: 0; }
.acesso:last-child { border-bottom: 0; }
.acesso-inativo { opacity: .6; }
.acesso-topo small { display: block; margin: 2px 0 0; }
.acesso-marcas { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.acesso-marcas label { display: inline-flex; align-items: center; gap: 6px; }
.acesso-marcas input { width: 18px; height: 18px; accent-color: var(--teal); }
.acesso-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.topo-sair { margin: 0; }