/* ===== Paleta & tokens ===== */
:root{
  --bg:#fbfdff; 
  --fg:#0b2a3a; 
  --muted:#5f7a86;

  /* azuis “mar” */
  --sea-50:#f3f9ff; 
  --sea-100:#eaf5ff; 
  --sea-200:#d8eefc;
  --sea-300:#bfe7fb;

  /* cards / chips / bordas */
  --chip:#ffffff; 
  --chip-b:#e5e7eb; 
  --card-b:#e6eef5;

  --ring:#bfe7fb; 
  --shadow:0 10px 28px rgba(14,165,233,.12);
}

/* ===== Reset & tipografia ===== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--fg); background:
    linear-gradient(180deg, #f7fbff 0%, #fff 320px);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01" 1, "liga" 1, "calt" 1;
}
.container{ max-width:1080px; margin:0 auto; padding:16px }

/* ===== Header ===== */
.site-header{
  background: linear-gradient(180deg, var(--sea-200) 0%, var(--sea-100) 100%);
  border-bottom:1px solid #cfe3f1;
}
.header-inner{ display:flex; align-items:center; gap:16px; justify-content:space-between }
.logo{ text-decoration:none }
.brand-svg{ display:block; max-height:64px }
.brand-backplate{
  display:inline-block; padding:6px 10px; border-radius:14px;
  background: rgba(255,255,255,0.58);
  border:1px solid rgba(11,42,58,0.08);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* ===== Busca ===== */
.search{
  position:relative; display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid #cfe3f1; border-radius:12px; padding:6px 10px;
  width:100%; max-width:460px;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.search-ic{ font-size:20px; color:#7a94a1 }
.search input{
  flex:1 1 auto; border:0; padding:6px 2px; font:inherit; outline:none; background:transparent;
}
.search:focus-within{
  border-color: var(--ring);
  box-shadow: 0 0 0 4px rgba(191,231,251,.35);
}

/* ===== Hero ===== */
.hero{ padding:28px 0 18px }
.hero h1{
  margin:0 0 6px; font-weight:800; letter-spacing:.2px;
  font-size:clamp(1.6rem,1.6vw + 1.1rem,2.35rem);
}
.hero p{ margin:0; color:var(--muted) }
.hero .actions{ margin-top:12px }

/* Divisor suave */
.section-divider{
  height:14px; border:0; margin:10px 0 0;
  background: linear-gradient(180deg, #e8f5ff 0%, rgba(232,245,255,0) 100%);
  pointer-events:none;
}

/* ===== Botões / badges ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border:1px solid #d0dbe4; border-radius:12px;
  text-decoration:none; color:var(--fg); background:#fff;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow) }
.btn-primary{ border-color:#bfe7fb; background:linear-gradient(180deg,#eef8ff,#e6f5fe) }
.btn-soft{
  border-color:#e7eef6; background:#fff;
}
.btn .material-symbols-rounded{ font-size:20px; line-height:0 }

.badge{
  display:inline-block; padding:2px 10px; border-radius:999px; font-size:.86rem;
  border:1px solid #dbe7f1; margin-right:6px; background:#fff; font-weight:600;
}
.badge.high{ background:#eef7ff } 
.badge.low{ background:#f8ffef }

/* ===== Cards / headings ===== */
.card{
  background:#fff; border:1px solid var(--card-b); border-radius:18px;
  padding:16px; margin:16px 0; box-shadow:0 2px 10px rgba(0,0,0,.04)
}
.card--emphasis{
  background:linear-gradient(180deg, var(--sea-50), #fff);
}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px
}
.card-title{ display:flex; align-items:center; gap:8px }
.card-title .material-symbols-rounded{ font-size:22px; color:#0ea5e9 }

.subhead{
  margin:.25rem 0 .35rem; font-weight:700; font-size:1.02rem; letter-spacing:.2px;
}

/* ===== Grids ===== */
.grid-two{ display:grid; grid-template-columns:1fr; gap:16px }
@media(min-width:900px){ .grid-two{ grid-template-columns:1.3fr .7fr } }

/* ===== Chips ===== */
.grid-chips{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
@media(min-width:900px){ .grid-chips{ grid-template-columns:repeat(5,minmax(0,1fr)) } }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:.65rem .9rem; border:1px solid var(--chip-b);
  border-radius:999px; background:var(--chip); text-align:center;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.chip .material-symbols-rounded{ font-size:18px; color:#0ea5e9 }
.chip:hover{ transform: translateY(-1px); box-shadow:var(--shadow); border-color:#dbe7f1 }

/* ===== Lista de links (coluna) ===== */
.list-links{ list-style:none; padding:0; margin:0 }
.list-links li + li{ margin-top:6px }
.list-links a{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:inherit;
  border-bottom:1px dashed #e6eef5; padding-bottom:2px
}
.list-links a:hover{ border-color:#bfe7fb }

/* ===== UF grade (fallback de noscript) ===== */
.uf-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px }
@media(max-width:900px){ .uf-list{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
@media(max-width:520px){ .uf-list{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.uf-list a{
  display:block; text-align:center; padding:.6rem .8rem; border-radius:999px;
  background:#fff; border:1px solid #e5e7eb; color:inherit; text-decoration:none;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.uf-list a:hover{ transform:translateY(-1px); box-shadow:var(--shadow); border-color:#dbe7f1 }

/* ===== Tabela & Ads ===== */
.table-responsive{ overflow:auto }
table{ width:100%; border-collapse:collapse }
th,td{ border-bottom:1px solid #eef2f7; padding:10px; text-align:left }
.ads{
  min-height:100px; display:flex; align-items:center; justify-content:center;
  border:1px dashed #d9e6f2; border-radius:12px; margin:16px 0; background:#fcfeff
}

/* ===== Footer ===== */
.site-footer{ border-top:1px solid #e6eef5; background:#fafcff; color:var(--muted) }
.breadcrumb{ color:var(--muted); margin:6px 0 12px 0; font-size:.9rem }

/* ===== Eventos ===== */
.events{ list-style:none; padding:0; margin:0 }
.events li{ padding:7px 0; display:flex; align-items:center; gap:8px }

/* ===== Seletor de data (se usar) ===== */
.date-nav{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.datepick{ display:flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid #dbe7f1; border-radius:12px; background:#fff }
.datepick input{ border:0; padding:4px; font:inherit; outline:none }

/* ===== Calendar “pills” (caso use futuramente) ===== */
.pills{ display:flex; flex-wrap:wrap; gap:8px }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:.5rem .75rem; border-radius:999px; background:#fff; border:1px solid #e7eef6;
  font-weight:600; font-size:.92rem; color:#244b5d;
  transition: transform .08s ease, border-color .08s ease, box-shadow .08s ease;
}
.pill .material-symbols-rounded{ font-size:18px }
.pill:hover{ transform:translateY(-1px); border-color:#cfe3f1; box-shadow:var(--shadow) }
.pill.is-active{ background:linear-gradient(180deg,#eef8ff,#e6f5fe); border-color:#bfe7fb; color:#0b2a3a }

/* ===== Canvas do gráfico ===== */
#tideChart{
  border-radius:14px; background:linear-gradient(180deg, var(--sea-50), transparent);
  border:1px solid #e8f2f8;
}

/* ===== Mapa do Brasil ===== */
.brmap-wrap{
  border:1px solid var(--card-b);
  border-radius:18px;
  padding:16px;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.03)
}
brazil-component{ display:block; width:100%; max-width:720px; margin:0 auto; }
brazil-component{
  --brazil-stroke-color: #cfe3f1;
  --brazil-stroke-hover-color: #0b2a3a;
  --brazil-bg-color: #eef2f7;
  --brazil-bg-hover-color: #e8f5ff;
  --brazil-acronym-color: #6b7280;
  --brazil-acronym-hover-color: #0b2a3a;
}
brazil-component.has-disabled-inland svg [data-acronym="AC"],
brazil-component.has-disabled-inland svg [data-acronym="AM"],
brazil-component.has-disabled-inland svg [data-acronym="RO"],
brazil-component.has-disabled-inland svg [data-acronym="RR"],
brazil-component.has-disabled-inland svg [data-acronym="MT"],
brazil-component.has-disabled-inland svg [data-acronym="MS"],
brazil-component.has-disabled-inland svg [data-acronym="GO"],
brazil-component.has-disabled-inland svg [data-acronym="TO"],
brazil-component.has-disabled-inland svg [data-acronym="DF"],
brazil-component.has-disabled-inland svg [data-acronym="MG"]{
  fill:#f3f4f6 !important;
  stroke:#e5e7eb !important;
  opacity:.75;
  pointer-events:none;
}

/* ===== Utilitários ===== */
.h2{ font-weight:800; font-size:clamp(1.14rem,1vw+1rem,1.38rem); letter-spacing:.2px }
.mb-2{ margin-bottom:.5rem } .mt-1{ margin-top:.25rem } .mt-6{ margin-top:1.5rem }
.muted{ color:var(--muted); margin:.15rem 0 .6rem; font-size:.95rem }

/* responsivo extra */
@media (max-width:560px){
  .tile { width:40px; height:40px; font-size:.85rem }
}