/* ==========================================================================
   ANDO SONHANDO — CSS puro
   Tons: branco, preto, cinza e azul escuro. Cantos pouco arredondados.
   ========================================================================== */

:root {
  --branco: #ffffff;
  --quase-branco: #f7f8fa;
  --cinza-claro: #e6e8ec;
  --cinza: #9aa0a8;
  --cinza-escuro: #4a4f57;
  --preto: #14161a;
  --azul-escuro: #14233f;
  --azul-escuro-2: #1d3357;
  --azul-link: #24487f;
  --borda: #d9dce1;
  --raio: 3px;
  --largura: 1140px;
  --sombra: 0 1px 3px rgba(20, 22, 26, .08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--preto);
  background: var(--branco);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--azul-link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.25; color: var(--azul-escuro); font-weight: 700; }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.6rem; margin: 1.8rem 0 .8rem; }
h3 { font-size: 1.25rem; margin: 1.4rem 0 .6rem; }

p { margin: 0 0 1rem; }

.container { max-width: var(--largura); margin: 0 auto; padding: 0 20px; }

/* ===================== HEADER ===================== */
.site-header {
  background: var(--azul-escuro);
  border-bottom: 3px solid var(--azul-escuro-2);
}
.header-inner {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.logo img { display: block; height:50px; }
.nav-desktop {
  display: flex;
  gap: 20px;
  flex: 1;
  flex-wrap: wrap;
}
.nav-desktop a {
  color: var(--branco);
  font-size: .95rem;
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nav-desktop a:hover {
  text-decoration: none;
  border-bottom-color: var(--cinza);
}
.busca-header {
  display: flex;
  border: 1px solid var(--azul-escuro-2);
  background: var(--branco);
  border-radius: var(--raio);
  overflow: hidden;
}
.busca-header input {
  border: 0;
  padding: 7px 10px;
  font-size: .9rem;
  width: 150px;
  outline: none;
}
.busca-header button,
.busca-sidebar button {
  border: 0;
  background: var(--azul-escuro-2);
  color: var(--branco);
  padding: 7px 14px;
  cursor: pointer;
  font-size: .85rem;
}
.busca-header button:hover,
.busca-sidebar button:hover { background: var(--azul-link); }

.menu-toggle {
  display: none;
  background: var(--azul-escuro-2);
  color: var(--branco);
  border: 0;
  padding: 9px 16px;
  font-size: .95rem;
  cursor: pointer;
  border-radius: var(--raio);
}

/* ===================== SIDEBAR MOBILE ===================== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 26, .55);
  z-index: 998;
}
.sidebar-overlay.ativo { display: block; }
.sidebar-mobile {
  position: fixed;
  top: 0;
  left: -320px;
  width: 300px;
  height: 100%;
  background: var(--azul-escuro);
  z-index: 999;
  transition: left .25s ease;
  padding: 20px;
  overflow-y: auto;
}
.sidebar-mobile.aberta { left: 0; }
.sidebar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.sidebar-titulo { color: var(--branco); font-weight: 700; font-size: 1.1rem; }
.sidebar-close {
  background: var(--azul-escuro-2);
  color: var(--branco);
  border: 0;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: var(--raio);
}
.busca-sidebar {
  display: flex;
  margin-bottom: 20px;
  border-radius: var(--raio);
  overflow: hidden;
}
.busca-sidebar input {
  flex: 1;
  border: 0;
  padding: 9px 10px;
  outline: none;
}
.nav-mobile { display: flex; flex-direction: column; }
.nav-mobile a {
  color: var(--branco);
  padding: 12px 0;
  border-bottom: 1px solid var(--azul-escuro-2);
}
.nav-mobile a:hover { text-decoration: none; color: var(--cinza-claro); }

/* ===================== MAIN ===================== */
.site-main {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 40px 20px;
  min-height: 60vh;
}

/* ===================== HOME / HERO ===================== */
.hero {
  background: linear-gradient(135deg, var(--azul-escuro), var(--azul-escuro-2));
  color: var(--branco);
  padding: 70px 20px;
  text-align: center;
  border-radius: var(--raio);
  margin-bottom: 50px;
}
.hero h1 { color: var(--branco); font-size: 2.6rem; margin-bottom: 16px; }
.hero p { font-size: 1.15rem; max-width: 680px; margin: 0 auto 26px; color: var(--cinza-claro); }
.hero .btn-hero {
  display: inline-block;
  background: var(--branco);
  color: var(--azul-escuro);
  padding: 12px 28px;
  font-weight: 700;
  border-radius: var(--raio);
}
.hero .btn-hero:hover { text-decoration: none; background: var(--cinza-claro); }

.secao-titulo {
  font-size: 1.7rem;
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--cinza-claro);
}

/* ===================== GRID DE POSTS ===================== */
.grid-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.card-post {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--branco);
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card-post:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.card-post .thumb {
  aspect-ratio: 16 / 9;
  background: var(--quase-branco);
  overflow: hidden;
}
.card-post .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-corpo { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.card-categoria {
  display: inline-block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--azul-link);
  font-weight: 700;
  margin-bottom: 8px;
}
.card-post h3 { color: var(--azul-escuro); font-size: 1.12rem; margin: 0 0 10px; }
.card-post h3 a { color: inherit; }
.card-post p { color: var(--cinza-escuro); font-size: .92rem; flex: 1; }
.card-meta {
  margin-top: 14px;
  font-size: .8rem;
  color: var(--cinza);
  border-top: 1px solid var(--cinza-claro);
  padding-top: 10px;
}

/* ===================== PAGINAÇÃO ===================== */
.paginacao {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 44px;
  flex-wrap: wrap;
}
.paginacao a, .paginacao span {
  padding: 9px 15px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--azul-escuro);
  font-size: .9rem;
}
.paginacao a:hover { background: var(--quase-branco); text-decoration: none; }
.paginacao .atual {
  background: var(--azul-escuro);
  color: var(--branco);
  border-color: var(--azul-escuro);
}
.paginacao .desabilitado { color: var(--cinza); border-color: var(--cinza-claro); }

/* ===================== POST SINGULAR ===================== */
.post-singular { max-width: 820px; margin: 0 auto; }
.post-header { margin-bottom: 30px; }
.post-header .categoria {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--azul-link);
}
.post-header h1 { margin: 12px 0; font-size: 2.3rem; }
.post-meta-topo {
  color: var(--cinza-escuro);
  font-size: .9rem;
  border-bottom: 1px solid var(--cinza-claro);
  padding-bottom: 18px;
}
.post-conteudo { font-size: 1.06rem; }
.post-conteudo p { margin-bottom: 1.2rem; }
.post-conteudo h2 { border-left: 4px solid var(--azul-escuro); padding-left: 12px; }
.post-img { margin: 28px 0; }
.post-img img {
  width: 100%;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
}
.post-tags {
  margin: 30px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.post-tags .tag {
  background: var(--quase-branco);
  border: 1px solid var(--borda);
  padding: 5px 12px;
  font-size: .82rem;
  color: var(--cinza-escuro);
  border-radius: var(--raio);
}

/* Compartilhamento */
.compartilhar {
  margin: 30px 0;
  padding: 20px;
  background: var(--quase-branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.compartilhar h3 { font-size: 1.05rem; margin-bottom: 14px; }
.compartilhar-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.compartilhar-botoes a,
.compartilhar-botoes button {
  border: 1px solid var(--azul-escuro);
  background: var(--azul-escuro);
  color: var(--branco);
  padding: 9px 16px;
  font-size: .88rem;
  cursor: pointer;
  border-radius: var(--raio);
  font-family: inherit;
}
.compartilhar-botoes a:hover,
.compartilhar-botoes button:hover { background: var(--azul-link); text-decoration: none; }

/* Navegação anterior/próximo */
.nav-post {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 36px 0;
  flex-wrap: wrap;
}
.nav-post a {
  flex: 1;
  min-width: 200px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  background: var(--branco);
}
.nav-post a:hover { background: var(--quase-branco); text-decoration: none; }
.nav-post .rotulo { font-size: .75rem; color: var(--cinza); text-transform: uppercase; letter-spacing: .05em; }
.nav-post .titulo-nav { color: var(--azul-escuro); font-weight: 600; display: block; margin-top: 4px; }
.nav-post .proximo { text-align: right; }

/* Relacionados */
.relacionados { margin-top: 50px; }
.relacionados h2 { margin-bottom: 24px; }

/* Autor */
.autor-box {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px;
  background: var(--azul-escuro);
  color: var(--branco);
  border-radius: var(--raio);
  margin: 30px 0;
}
.autor-box .autor-nome { font-weight: 700; font-size: 1.05rem; }
.autor-box p { margin: 4px 0 0; color: var(--cinza-claro); font-size: .92rem; }

/* ===================== PÁGINAS ESTÁTICAS ===================== */
.pagina-conteudo { max-width: 820px; margin: 0 auto; }
.pagina-conteudo h1 { margin-bottom: 24px; }
.pagina-conteudo ul { margin: 0 0 1rem 1.4rem; }

/* Contato */
.contato-info {
  background: var(--quase-branco);
  border: 1px solid var(--borda);
  padding: 24px;
  border-radius: var(--raio);
  margin-top: 20px;
}

/* Busca */
.busca-form-pagina {
  display: flex;
  gap: 10px;
  margin: 20px 0 40px;
  max-width: 600px;
}
.busca-form-pagina input {
  flex: 1;
  border: 1px solid var(--borda);
  padding: 12px 14px;
  font-size: 1rem;
  border-radius: var(--raio);
}
.busca-form-pagina button {
  border: 0;
  background: var(--azul-escuro);
  color: var(--branco);
  padding: 12px 24px;
  cursor: pointer;
  border-radius: var(--raio);
}

/* ===================== FOOTER ===================== */
.site-footer {
  background: var(--azul-escuro);
  color: var(--cinza-claro);
  margin-top: 60px;
}
.footer-inner {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 50px 20px 30px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 36px;
}
.footer-col h3 {
  color: var(--branco);
  font-size: 1rem;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--cinza-claro); font-size: .92rem; }
.footer-col a:hover { color: var(--branco); }
.footer-desc { font-size: .92rem; margin-top: 12px; color: var(--cinza-claro); }
.footer-logo { margin-bottom: 4px; }
.footer-logo { height: 90px; }
.footer-bottom {
  border-top: 1px solid var(--azul-escuro-2);
  padding: 20px;
  max-width: var(--largura);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .85rem;
}
.voltar-topo {
  background: var(--azul-escuro-2);
  color: var(--branco);
  border: 0;
  padding: 9px 18px;
  cursor: pointer;
  border-radius: var(--raio);
  font-size: .85rem;
}
.voltar-topo:hover { background: var(--azul-link); }

/* ===================== COOKIE BANNER ===================== */
.cookie-banner {
  display: none;
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 720px;
  margin: 0 auto;
  background: var(--preto);
  color: var(--branco);
  padding: 18px 22px;
  border-radius: var(--raio);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  z-index: 1000;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.cookie-banner.visivel { display: flex; }
.cookie-banner p { margin: 0; font-size: .9rem; flex: 1; min-width: 240px; }
.cookie-banner a { color: var(--cinza-claro); text-decoration: underline; }
.cookie-acoes { display: flex; gap: 10px; }
.cookie-acoes button {
  border: 0;
  background: var(--branco);
  color: var(--preto);
  padding: 9px 20px;
  cursor: pointer;
  border-radius: var(--raio);
  font-weight: 600;
  font-size: .85rem;
}
.cookie-acoes .btn-secundario {
  background: transparent;
  color: var(--branco);
  border: 1px solid var(--cinza);
}

/* ===================== MENSAGENS ===================== */
.aviso {
  background: var(--quase-branco);
  border: 1px solid var(--borda);
  padding: 30px;
  text-align: center;
  border-radius: var(--raio);
  color: var(--cinza-escuro);
}

/* ===================== RESPONSIVO ===================== */
@media (max-width: 900px) {
  .grid-posts { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav-desktop, .busca-header { display: none; }
  .menu-toggle { display: block; }
  .header-inner { justify-content: space-between; }
  h1 { font-size: 1.8rem; }
  .hero h1 { font-size: 2rem; }
  .hero { padding: 50px 18px; }
}
@media (max-width: 560px) {
  .grid-posts { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .post-header h1 { font-size: 1.7rem; }
}

/* ===================== IMPRESSÃO ===================== */
@media print {
  .site-header, .site-footer, .cookie-banner, .compartilhar,
  .nav-post, .relacionados, .menu-toggle, .sidebar-mobile, .sidebar-overlay { display: none !important; }
  body { font-size: 12pt; }
  .post-singular { max-width: 100%; }
}

/* ===================== ADMIN ===================== */
.admin-wrap { max-width: 760px; margin: 40px auto; padding: 0 20px; }
.admin-box {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 30px;
  background: var(--branco);
}
.admin-box h1 { margin-bottom: 20px; }
.admin-box label { display: block; font-weight: 600; margin: 16px 0 6px; color: var(--azul-escuro); }
.admin-box input[type=text],
.admin-box input[type=password],
.admin-box textarea {
  width: 100%;
  border: 1px solid var(--borda);
  padding: 10px 12px;
  font-size: .95rem;
  border-radius: var(--raio);
  font-family: inherit;
}
.admin-box textarea { min-height: 280px; font-family: monospace; font-size: .85rem; }
.admin-box button {
  margin-top: 20px;
  background: var(--azul-escuro);
  color: var(--branco);
  border: 0;
  padding: 12px 26px;
  cursor: pointer;
  border-radius: var(--raio);
  font-size: .95rem;
}
.admin-box button:hover { background: var(--azul-link); }
.admin-msg { padding: 14px; border-radius: var(--raio); margin-bottom: 20px; }
.admin-msg.ok { background: #e7f3e7; border: 1px solid #b6d7b6; color: #2d5e2d; }
.admin-msg.erro { background: #fae7e7; border: 1px solid #e0b6b6; color: #7a2d2d; }
.admin-nav { margin-bottom: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.admin-nav a {
  border: 1px solid var(--borda);
  padding: 8px 16px;
  border-radius: var(--raio);
  color: var(--azul-escuro);
}
.admin-img-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 16px; }
.admin-img-grid .item { border: 1px solid var(--borda); padding: 10px; border-radius: var(--raio); font-size: .8rem; text-align: center; }
.admin-img-grid .gerada { background: #e7f3e7; }
.admin-img-grid .faltando { background: #faf3e7; }

.post-conteudo ul {margin-left:45px;}

/* ==========================================================================
   TABELAS DO POST — tema azul, responsivo, largura total, scroll no mobile
   ========================================================================== */

.tabela-scroll {
  --tbl-azul:        #1e6fd9;
  --tbl-azul-escuro: #0f3d7a;
  --tbl-azul-claro:  #eef4fc;
  --tbl-azul-borda:  #d4e3f7;

  width: 100%;
  margin: 2rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  box-shadow: 0 6px 24px -12px rgba(15, 61, 122, .35);
  scrollbar-width: thin;
  scrollbar-color: var(--tbl-azul) var(--tbl-azul-claro);
}
.tabela-scroll::-webkit-scrollbar { height: 8px; }
.tabela-scroll::-webkit-scrollbar-track {
  background: var(--tbl-azul-claro);
}
.tabela-scroll::-webkit-scrollbar-thumb {
  background: var(--tbl-azul);
  border-radius: 8px;
}

.tabela-scroll table {
  width: 100%;                 /* preenche todo o espaço */
  border-collapse: separate;
  border-spacing: 0;
  font-size: .95rem;
  color: #1c2b3a;
  background: #fff;
  border: 1px solid var(--tbl-azul-borda);
  border-radius: 12px;
  overflow: hidden;
}

.tabela-scroll thead th {
  background: linear-gradient(135deg, var(--tbl-azul) 0%, var(--tbl-azul-escuro) 100%);
  color: #fff;
  font-weight: 600;
  text-align: left;
  letter-spacing: .02em;
  padding: 14px 18px;
  border-bottom: 2px solid var(--tbl-azul-escuro);
}

.tabela-scroll tbody td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--tbl-azul-borda);
  vertical-align: top;
}

.tabela-scroll tbody tr:nth-child(even) td { background: var(--tbl-azul-claro); }
.tabela-scroll tbody tr:hover td {
  background: #dcebfb;
  transition: background .18s ease;
}
.tabela-scroll tbody tr:last-child td { border-bottom: none; }

.tabela-scroll tbody td:first-child {
  font-weight: 600;
  color: var(--tbl-azul-escuro);
}

@media (max-width: 600px) {
  .tabela-scroll thead th,
  .tabela-scroll tbody td {
    padding: 11px 14px;
    white-space: nowrap;       /* força scroll quando não cabe */
  }
  .tabela-scroll table { font-size: .9rem; }
}

.site-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.site-nome {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  text-decoration: none;
}
.site-nome:hover { color: #1e6fd9; }

@media (max-width: 768px) {
  .site-nome { font-size: 1.2rem; }
  /* o nome fica à esquerda e o hambúrguer à direita, na mesma linha */
}