:root{
  --azul:#1a73e8; --azul-escuro:#0f4fa8;
  --vermelho:#ea4335; --amarelo:#fbbc05; --verde:#34a853;
  --tinta:#16233c; --tinta-suave:#5a6780; --linha:#dde3ec;
  --fundo:#f4f6fa; --carta:#ffffff;
  --raio:10px;
  --sombra:0 1px 2px rgba(22,35,60,.06), 0 8px 24px rgba(22,35,60,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fundo); color:var(--tinta);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
       "Helvetica Neue",Arial,sans-serif;
}
a{color:var(--azul)}
h1,h2,h3{line-height:1.2; letter-spacing:-.02em; margin:0 0 .5rem}
h1{font-size:1.5rem; font-weight:700}
h2{font-size:1.15rem; font-weight:650}
h3{font-size:1rem; font-weight:650}
.eyebrow{
  font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta-suave); margin:0 0 .35rem;
}

/* estrutura */
header.topo{
  background:var(--tinta); color:#fff; padding:.65rem 1rem;
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}
header.topo .marca{font-weight:700; letter-spacing:-.02em; margin-right:auto}
header.topo .marca span{color:var(--amarelo)}
header.topo a{color:#c8d4e8; text-decoration:none; font-size:.9rem}
nav.menu{
  background:var(--carta); border-bottom:1px solid var(--linha);
  padding:0 .5rem; display:flex; gap:.15rem; overflow-x:auto;
  position:sticky; top:0; z-index:5;
}
nav.menu a{
  padding:.7rem .7rem; text-decoration:none; color:var(--tinta-suave);
  font-size:.9rem; white-space:nowrap; border-bottom:2px solid transparent;
}
nav.menu a.on{color:var(--azul); border-bottom-color:var(--azul); font-weight:600}
main{padding:1rem; max-width:1000px; margin:0 auto}

/* cartoes */
.carta{
  background:var(--carta); border:1px solid var(--linha);
  border-radius:var(--raio); padding:1rem; margin-bottom:1rem;
  box-shadow:var(--sombra);
}
.carta.aviso{border-left:4px solid var(--amarelo)}
.carta.falha{border-left:4px solid var(--vermelho)}

/* numeros do inicio */
.painel{display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem;
        margin-bottom:1rem}
.numero{
  background:var(--carta); border:1px solid var(--linha);
  border-radius:var(--raio); padding:.8rem; text-decoration:none;
  color:inherit; display:block;
}
.numero b{display:block; font-size:1.7rem; letter-spacing:-.03em; line-height:1}
.numero small{color:var(--tinta-suave); font-size:.78rem}

/* pre-visualizacao do post: a peca central do painel */
.post{
  display:grid; grid-template-columns:1fr; gap:.9rem;
  border-top:1px solid var(--linha); padding-top:1rem; margin-top:1rem;
}
.post:first-of-type{border-top:0; padding-top:0; margin-top:0}
.moldura{
  position:relative; aspect-ratio:1/1; background:#eef1f6;
  border-radius:var(--raio); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.moldura img{width:100%; height:100%; object-fit:cover; display:block}
.moldura .vazia{
  color:var(--tinta-suave); font-size:.82rem; text-align:center; padding:1rem;
}
.legenda{white-space:pre-wrap; font-size:.95rem}

/* formularios */
label{display:block; font-size:.85rem; font-weight:600; margin:.9rem 0 .25rem}
label .dica{display:block; font-weight:400; color:var(--tinta-suave);
            font-size:.8rem; margin-top:.1rem}
input[type=text],input[type=password],input[type=number],
input[type=datetime-local],select,textarea{
  width:100%; padding:.6rem .7rem; font:inherit; font-size:.95rem;
  color:var(--tinta); background:#fff;
  border:1px solid var(--linha); border-radius:8px;
}
textarea{min-height:5.5rem; resize:vertical}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{
  outline:2px solid var(--azul); outline-offset:2px;
}
.linha{display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end}
.linha>*{flex:1 1 10rem}
.caixas{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.3rem}
.caixas label{display:flex; align-items:center; gap:.35rem; margin:0;
              font-weight:400; font-size:.9rem}
.caixas input{width:auto}

/* botoes */
button,.botao{
  font:inherit; font-size:.92rem; font-weight:600; cursor:pointer;
  padding:.55rem .95rem; border-radius:8px; border:1px solid var(--linha);
  background:#fff; color:var(--tinta); text-decoration:none;
  display:inline-flex; align-items:center; gap:.35rem;
}
button:hover,.botao:hover{border-color:#c3ccda}
button.principal{background:var(--azul); border-color:var(--azul); color:#fff}
button.principal:hover{background:var(--azul-escuro)}
button.perigo{color:var(--vermelho)}
.acoes{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.8rem}

/* estados */
.selo{
  display:inline-block; font-size:.72rem; font-weight:700; padding:.15rem .5rem;
  border-radius:99px; letter-spacing:.02em; text-transform:uppercase;
}
.selo.rascunho{background:#eef1f6; color:var(--tinta-suave)}
.selo.agendado{background:#fff4d1; color:#7a5b00}
.selo.publicado{background:#e3f6e9; color:#1a6b36}
.selo.erro{background:#fde8e6; color:#a72218}

/* mensagens */
.recado{
  padding:.7rem .9rem; border-radius:8px; margin-bottom:.6rem;
  font-size:.92rem; border-left:4px solid;
}
.recado.ok{background:#e9f7ee; border-color:var(--verde)}
.recado.erro{background:#fdeceb; border-color:var(--vermelho)}
.recado.aviso{background:#fff8e1; border-color:var(--amarelo)}

/* grelha de fotos */
.galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
         gap:.6rem}
.galeria figure{margin:0}
.galeria img{width:100%; aspect-ratio:1/1; object-fit:cover;
             border-radius:8px; display:block; border:1px solid var(--linha)}
.galeria figcaption{font-size:.72rem; color:var(--tinta-suave); margin-top:.25rem}

/* tabelas / registo */
table{width:100%; border-collapse:collapse; font-size:.86rem}
th,td{text-align:left; padding:.45rem .4rem; border-bottom:1px solid var(--linha);
      vertical-align:top}
th{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
   color:var(--tinta-suave)}
td.erro{color:var(--vermelho)}
.rolar{overflow-x:auto}

.discreto{color:var(--tinta-suave); font-size:.86rem}
.vazio{text-align:center; padding:2rem 1rem; color:var(--tinta-suave)}
.vazio p{margin:.3rem 0 1rem}

/* login */
.entrada{max-width:22rem; margin:12vh auto; padding:0 1rem}

@media (min-width:720px){
  main{padding:1.5rem}
  h1{font-size:1.8rem}
  .painel{grid-template-columns:repeat(4,1fr)}
  .post{grid-template-columns:230px 1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* video */
.moldura video{width:100%; height:100%; object-fit:contain; display:block;
               background:#000}
.moldura.vertical{aspect-ratio:9/16}
.video-capa{position:relative}
.video-capa img{width:100%; aspect-ratio:1/1; object-fit:cover;
                border-radius:8px; display:block; border:1px solid var(--linha)}
.video-capa.sem-capa{aspect-ratio:1/1; background:#eef1f6; border-radius:8px;
  border:1px solid var(--linha); display:flex; align-items:center;
  justify-content:center}
.marca-video{
  position:absolute; bottom:.35rem; right:.35rem; background:rgba(0,0,0,.72);
  color:#fff; font-size:.7rem; font-weight:700; padding:.1rem .35rem;
  border-radius:4px;
}
.video-capa.sem-capa .marca-video{position:static; background:none;
  color:var(--tinta-suave); font-weight:400}
.selo.a_processar{background:#e7effb; color:#0f4fa8}