:root {
  --fundo: #F3F4F7;
  --superficie: #FFFFFF;
  --tinta: #1B2430;
  --tinta-suave: #5B6472;
  --linha: #E2E5EB;
  --acento: #1B2430;
  --raio: 10px;
  --sombra: 0 1px 3px rgba(20, 28, 42, .08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, .topo-logo { font-family: 'Archivo', 'Inter', sans-serif; }
h1 { font-size: 22px; font-weight: 700; margin: 0; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
a { color: inherit; }

/* ===== Topo ===== */
.topo {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #151B29; color: #EDEFF4;
  padding: 10px 18px;
  position: sticky; top: 0; z-index: 50;
}
.topo-marca { display: flex; align-items: center; gap: 10px; }
.topo-logo { font-weight: 700; font-size: 17px; letter-spacing: .2px; }
.topo-pontos { display: flex; gap: 4px; }
.topo-pontos i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.topo-nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.topo-nav a {
  text-decoration: none; padding: 7px 12px; border-radius: 8px;
  color: #B9C0CD; font-weight: 500; font-size: 14px;
}
.topo-nav a.ativo, .topo-nav a:hover { background: rgba(255,255,255,.10); color: #fff; }
.topo-usuario { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #B9C0CD; }
.topo-usuario .sair { color: #EDEFF4; text-decoration: none; border: 1px solid rgba(255,255,255,.25); padding: 4px 10px; border-radius: 8px; }

.conteudo { padding: 18px; max-width: 1280px; margin: 0 auto; }

/* ===== Componentes ===== */
.botao {
  display: inline-block; background: var(--acento); color: #fff;
  border: 0; border-radius: var(--raio); padding: 10px 16px;
  font: inherit; font-weight: 600; font-size: 14px;
  text-decoration: none; cursor: pointer;
}
.botao:hover { opacity: .92; }
.botao.suave { background: #fff; color: var(--tinta); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.botao.perigo { background: #B42318; }
.mini {
  font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 7px;
  border: 1px solid var(--linha); background: #fff; cursor: pointer; color: var(--tinta-suave);
}
.mini.perigo { color: #B42318; border-color: #F1C1BD; }
.mini:hover { border-color: var(--tinta-suave); }

.cartao {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 16px; margin-bottom: 16px;
}

.aviso { padding: 10px 14px; border-radius: var(--raio); font-size: 14px; }
.aviso.ok { background: #E8F6EC; color: #14532D; }
.aviso.erro { background: #FCEBEA; color: #7F1D1D; }
.aviso.alerta { background: #FEF4E5; color: #7C4A03; }
.dica { color: var(--tinta-suave); font-size: 13px; margin: 6px 0; }

.barra-pagina {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.barra-acoes { display: flex; gap: 10px; align-items: center; }
.nav-mes { display: flex; align-items: center; gap: 10px; }
.nav-mes .botao { padding: 6px 13px; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
select, input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=search], textarea {
  font: inherit; padding: 9px 11px; border: 1px solid var(--linha);
  border-radius: 8px; background: #fff; color: var(--tinta); max-width: 100%;
}
textarea { width: 100%; resize: vertical; line-height: 1.5; }
select:focus, input:focus, textarea:focus { outline: 2px solid #8A93A6; outline-offset: 1px; }

/* ===== Calendário ===== */
.rolagem-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.calendario {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 6px; min-width: 700px;
}
.cal-cabecalho { font-size: 12px; font-weight: 600; color: var(--tinta-suave); text-align: center; padding: 4px 0; text-transform: uppercase; letter-spacing: .4px; }
.cal-dia {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px;
  min-height: 96px; padding: 6px; display: flex; flex-direction: column; gap: 4px;
}
.cal-dia.vazio { background: transparent; border-color: transparent; }
.cal-dia.hoje { border-color: var(--tinta); border-width: 2px; }
.cal-num {
  font-size: 12px; font-weight: 600; color: var(--tinta-suave);
  text-decoration: none; align-self: flex-end;
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px;
}
.cal-num:hover { background: var(--fundo); color: var(--tinta); }
.pilula {
  display: block; font-size: 12px; line-height: 1.25; text-decoration: none;
  background: color-mix(in srgb, var(--cor) 12%, white);
  border-left: 3px solid var(--cor);
  border-radius: 5px; padding: 4px 6px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.pilula b { color: var(--cor); margin-right: 3px; font-weight: 600; }
.pilula.postado { opacity: .55; text-decoration: line-through; }
.legenda-marcas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--tinta-suave); }
.legenda-marcas i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 5px; }

/* ===== Kanban ===== */
.kanban {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.coluna h2 { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.contagem { background: var(--linha); border-radius: 99px; font-size: 11px; padding: 1px 8px; color: var(--tinta-suave); }
.coluna-corpo {
  background: #EBEDF2; border-radius: var(--raio);
  padding: 8px; min-height: 220px; display: flex; flex-direction: column; gap: 8px;
}
.coluna-corpo.sobre { outline: 2px dashed var(--tinta-suave); outline-offset: -4px; }
.card {
  background: #fff; border: 1px solid var(--linha); border-left: 4px solid var(--cor);
  border-radius: 8px; padding: 10px; box-shadow: var(--sombra); cursor: grab;
}
.card.arrastando { opacity: .45; }
.card-marca { font-size: 11px; font-weight: 600; color: var(--cor); text-transform: uppercase; letter-spacing: .4px; }
.card-titulo { display: block; font-weight: 600; text-decoration: none; margin: 3px 0 5px; }
.card-titulo:hover { text-decoration: underline; }
.card-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--tinta-suave); }
.card-status { margin-top: 8px; width: 100%; font-size: 12px; padding: 5px 8px; display: none; }

/* ===== Formulário do post ===== */
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.formulario label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.formulario label input, .formulario label select { display: block; width: 100%; margin-top: 5px; }
.formulario label textarea { margin-top: 5px; }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.linha-marca { grid-template-columns: 1fr auto auto; align-items: end; }
.redes { border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 12px 6px; margin: 0 0 14px; }
.redes legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.chip { display: inline-flex; align-items: center; margin: 0 6px 8px 0 !important; cursor: pointer; }
.chip input { position: absolute; opacity: 0; }
.chip span {
  border: 1px solid var(--linha); border-radius: 99px; padding: 5px 12px;
  font-size: 13px; font-weight: 500; color: var(--tinta-suave); background: #fff;
}
.chip input:checked + span { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.chip input:focus-visible + span { outline: 2px solid #8A93A6; }

/* ===== Upload e arquivos ===== */
.area-upload {
  border: 2px dashed var(--linha); border-radius: var(--raio);
  padding: 16px; text-align: center; margin-bottom: 12px;
}
.area-upload.sobre { border-color: var(--tinta); background: var(--fundo); }
.envio-item { margin-bottom: 8px; font-size: 13px; }
.envio-barra { height: 6px; background: var(--linha); border-radius: 99px; overflow: hidden; margin-top: 4px; }
.envio-barra i { display: block; height: 100%; width: 0; background: #16A34A; transition: width .2s; }
.lista-arquivos { list-style: none; margin: 0; padding: 0; }
.lista-arquivos li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--linha);
}
.mini-imagem { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.mini-icone { width: 44px; height: 44px; display: grid; place-items: center; background: var(--fundo); border-radius: 6px; flex-shrink: 0; }
.arquivo-info { flex: 1; min-width: 0; }
.arquivo-info strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arquivo-info small { color: var(--tinta-suave); font-size: 12px; }
.historico { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.historico li { padding: 7px 0; border-top: 1px solid var(--linha); }
.historico small { color: var(--tinta-suave); }

/* ===== Biblioteca ===== */
.grade-arquivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.arquivo-cartao { padding: 0; overflow: hidden; margin: 0; border-top: 4px solid var(--cor); }
.arquivo-cartao img { width: 100%; height: 140px; object-fit: cover; display: block; }
.arquivo-video { height: 140px; display: grid; place-items: center; font-size: 34px; background: var(--fundo); }
.arquivo-cartao-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.arquivo-cartao-info strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arquivo-cartao-info small { color: var(--tinta-suave); }
.arquivo-cartao-info .botao { margin-top: 6px; text-align: center; padding: 7px 10px; }

/* ===== Tabela ===== */
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--tinta-suave); padding: 8px 10px; }
.tabela td { padding: 10px; border-top: 1px solid var(--linha); }
.acoes-tabela { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form-senha { display: flex; gap: 6px; }
.form-senha input { padding: 5px 8px; font-size: 12px; width: 110px; }

/* ===== Login ===== */
.tela-login {
  min-height: 100vh; display: grid; place-items: center;
  background: #151B29; padding: 20px;
}
.cartao-login {
  background: #fff; border-radius: 14px; padding: 30px 28px;
  width: 100%; max-width: 400px;
}
.cartao-login h1 { font-size: 22px; margin: 0 0 4px; }
.sub-login { color: var(--tinta-suave); font-size: 13px; margin: 0 0 18px; }
.cartao-login label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.cartao-login input { display: block; width: 100%; margin-top: 5px; }
.cartao-login .botao { width: 100%; }
.cartao-login .aviso { margin-bottom: 14px; }

/* ===== Celular ===== */
@media (max-width: 860px) {
  .conteudo { padding: 12px; }
  .duas-colunas { grid-template-columns: 1fr; }
  .kanban {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 10px; padding-bottom: 8px;
  }
  .coluna { flex: 0 0 82%; scroll-snap-align: start; }
  .card { cursor: default; }
  .card-status { display: block; }
  .topo { gap: 10px; padding: 10px 12px; }
  .topo-nav { order: 3; width: 100%; }
  .topo-usuario span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}