/* Tema Tinta: branco puro e preto puro, contraste máximo (tela fixa/quiosque). D-10 */
:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-border: #000000;
  --color-rule: #000000;
  --color-text: #000000;
  --color-text-muted: #333333;
  --color-fill: #bdbdbd;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-label: 0.75rem;
  --text-sm: 0.9rem;
  --text-base: 1.05rem;
  --text-lg: 1.3rem;
  --text-xl: 1.85rem;
  --text-2xl: 2.6rem;
  --text-hero: clamp(4.8rem, 17vw, 9.5rem);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --rule: 2px;
  --rule-strong: 4px;
  --radius: 0;
}

/* Base: grade de instrumentos (C) + tabela de horas (A) */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
}
a { color: inherit; }
.frame {
  container-type: inline-size;
  background: var(--color-bg);
  margin: 0 auto;
  min-height: 100dvh;
  font-variant-numeric: tabular-nums;
  --gutter: 84px; /* coluna de rótulos da tabela; gráficos alinham por ela */
}
.pagina { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); min-height: inherit; }
@container (min-width: 760px) { .pagina { padding: var(--space-6) var(--space-8); gap: var(--space-6); } }

/* vocabulário comum */
.rotulo { font-size: var(--text-label); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; }
.forte { font-weight: 800; }
.mudo { color: var(--color-text-muted); }
.seta, .icone { vertical-align: middle; }
.regua { border: 0; border-top: var(--rule) solid var(--color-rule); margin: 0; }
.rel { font-size: var(--text-label); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.rel-terral { background: var(--color-text); color: var(--color-bg); padding: 1px 5px; }
.rel-lateral { border: var(--rule) solid var(--color-border); padding: 0 4px; }
.rel-maral { text-decoration: line-through; }

/* cabeçalho, rodapé, próximos dias */
.cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; border-bottom: var(--rule-strong) solid var(--color-border); padding-bottom: var(--space-2); }
.cabeca h1 { margin: 0; font-size: var(--text-xl); font-weight: 900; letter-spacing: -.01em; }
.cabeca .sub { font-size: var(--text-sm); color: var(--color-text-muted); }
.cabeca-dir { text-align: right; }
.rodape { margin-top: auto; border-top: var(--rule) solid var(--color-rule); padding-top: var(--space-2); font-size: var(--text-label); color: var(--color-text-muted); display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.dias { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.dia { border-top: var(--rule) solid var(--color-rule); padding-top: var(--space-2); font-size: var(--text-sm); }
.dia b { display: block; font-size: var(--text-label); text-transform: uppercase; letter-spacing: .06em; }
.dias .rotulo-sec { margin-bottom: 6px; }
.dia .onda-dia { font-size: var(--text-lg); }
.agora-hora { font-size: var(--text-lg); }

/* bloco "agora": grade de instrumentos */
.c-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@container (min-width: 760px) { .c-grade { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.c-tile { border: var(--rule) solid var(--color-border); padding: var(--space-3); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.c-tile .c-det { align-self: stretch; }
.c-tile.onda { grid-column: 1 / -1; border-width: var(--rule-strong); }
@container (min-width: 760px) { .c-tile.onda { grid-column: auto; } }
@container (max-width: 759px) {
  /* celular: Água | Maré | Sol em 3 colunas, rótulo em cima do valor */
  .c-tile.agua { grid-column: 1 / -1; display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; row-gap: 4px; }
  .c-tile.agua .rotulo { margin-top: 0 !important; }
}
.c-num { font-size: var(--text-hero); font-weight: 900; line-height: .85; letter-spacing: -.04em; }
.c-num small { font-size: .35em; font-weight: 700; letter-spacing: 0; }
.c-mid { font-size: var(--text-2xl); font-weight: 900; line-height: 1; }
.c-mid small { font-size: .45em; font-weight: 700; }
.c-det { font-size: var(--text-sm); font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.c-det.grande-det { font-size: var(--text-lg); }
.c-det.leve { font-weight: 400; }
.c-vento { display: flex; align-items: center; gap: var(--space-3); }

/* linha de horas: tabela */
.tabela-wrap { overflow-x: auto; }
table.horas { border-collapse: collapse; width: 100%; font-size: var(--text-sm); table-layout: fixed; }
table.horas th, table.horas td { padding: 6px 4px; text-align: center; border-bottom: var(--rule) solid var(--color-rule); white-space: nowrap; overflow: hidden; }
table.horas th[scope=row] { width: var(--gutter); text-align: left; font-size: var(--text-label); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); font-weight: 600; white-space: normal; }
table.horas thead th { font-size: var(--text-base); font-weight: 800; border-bottom: var(--rule-strong) solid var(--color-border); }
table.horas .col-agora { background: var(--color-fill); }
table.horas .alt { font-size: var(--text-lg); font-weight: 900; }
table.horas .alt small { font-size: .6em; font-weight: 700; }
@container (max-width: 520px) {
  table.horas { font-size: var(--text-label); }
  table.horas .alt { font-size: var(--text-base); }
  table.horas .p-card { display: none; } /* no celular a seta basta; esconde o "SE" */
  table.horas .rel { letter-spacing: 0; font-size: .6rem; padding-left: 2px; padding-right: 2px; }
}

/* Quadros do bloco "agora" (sketch 003, variante D) */
.grade3 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.grade3 .onda, .grade3 .clima { grid-column: 1 / -1; }
@container (min-width: 760px) {
  .grade3 { grid-template-columns: 1.3fr 1fr 1fr 0.9fr; }
  .grade3 .onda, .grade3 .clima { grid-column: auto; }
}
.grade3 .c-tile { position: relative; overflow: hidden; }
.grade3 .c-tile > * { position: relative; z-index: 1; }
.clima-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); width: 100%; }
@container (max-width: 759px) { .clima-grid { grid-template-columns: repeat(3, 1fr); } }
.mare-estado { font-size: var(--text-lg); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }

.mini { align-self: stretch; margin-top: auto; }
.mini svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mini text { font-family: var(--font-sans); fill: var(--color-text); font-size: 10px; font-weight: 700; }
.legenda-mini { font-size: var(--text-label); color: var(--color-text-muted); align-self: stretch; }
.legenda-mini b { color: var(--color-text); }
/* miniaturas (02-06) */
.legenda-mini { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legenda-mini.legenda-mare { white-space: normal; overflow: visible; }
.mini .area { fill: var(--color-fill); }
.mini .linha { fill: none; stroke: currentColor; stroke-width: 1.5; }
.mini .barra-terral { fill: currentColor; }
.mini .barra-lateral { fill: var(--color-fill); }
.mini rect { stroke: currentColor; stroke-width: .8; }
.mini .agora { stroke: currentColor; stroke-dasharray: 2 2; }
.mini-mare { aspect-ratio: 3 / 1; }
.mini-mare svg { height: auto; }
.mini .ext { fill: currentColor; }
.mini .agora-pt { fill: var(--color-bg); stroke: currentColor; stroke-width: 1.5; }
.mini-mare .linha { stroke-width: 2; }
.rodape-mare { flex-basis: 100%; white-space: normal; }
.grade3 .c-tile > .mini-fundo { position: absolute; z-index: 0; left: 0; right: 0; bottom: 30px; height: 40%; margin: 0; opacity: .55; }
.grade3 .c-tile > .mini-fundo ~ .legenda-mini { margin-top: auto; }
.espaco-fundo { height: 40px; }

/* Estados de dados (selos e painel) */
.selo { display: inline-block; margin-top: 4px; padding: 2px 8px; font-size: var(--text-sm); font-weight: 800; border: var(--rule) solid var(--color-border); }
.selo.forte { background: var(--color-text); color: var(--color-bg); }
.rodape.forte { color: var(--color-text); font-weight: 700; }
.painel-expirado { border: var(--rule) dashed var(--color-border); padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.painel-expirado .grande { font-size: var(--text-2xl); font-weight: 900; line-height: 1.05; }

/* Lista de praias */
.lista-praias { list-style: none; padding: 0; font-size: var(--text-lg); line-height: 1.8; }
.mare-solo { display: grid; grid-template-columns: minmax(0, 420px); margin-top: var(--space-4); }