/* Tábua de Marés Maragogi — Frontend
   Usa div + CSS Grid (não <table>) para evitar override de temas WordPress */

.tm-wrap { font-family: system-ui,-apple-system,sans-serif; max-width:960px; margin:0 auto; }
.tm-title { font-size:1.3rem; font-weight:700; color:#0c4a6e; margin-bottom:.85rem; }

/* Nav */
.tm-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:.85rem; gap:.5rem; }
.tm-nav-btn { background:#e0f2fe; color:#0369a1; padding:.38rem .85rem; border-radius:6px; text-decoration:none; font-size:.87rem; font-weight:600; white-space:nowrap; }
.tm-nav-btn:hover { background:#bae6fd; }
.tm-nav-current { color:#0c4a6e; font-size:.92rem; font-weight:700; text-align:center; }

/* Grid principal — 5 colunas: dia + 4 marés */
.tm-grid-wrap {
  border:1px solid #e2e8f0;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:.85rem;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}

.tm-grid-header,
.tm-grid-row {
  display:grid !important;
  grid-template-columns: 70px repeat(4,1fr) !important;
  border-bottom:1px solid #f1f5f9;
}
.tm-grid-header { background:#f0f9ff !important; border-bottom:2px solid #bae6fd !important; }
.tm-grid-row:last-child { border-bottom:none; }
.tm-grid-row:hover { background:#f8fafc; }
.tm-grid-today { background:#eff6ff !important; }

.tm-grid-cell {
  padding:.45rem .6rem !important;
  display:flex !important;
  align-items:center !important;
  box-sizing:border-box !important;
}
.tm-grid-header .tm-grid-cell {
  font-size:.68rem !important;
  font-weight:700 !important;
  color:#475569 !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
}

/* Coluna dia */
.tm-grid-day-col { flex-wrap:wrap; gap:.2rem; align-content:center; }
.tm-day-num { font-weight:700; font-size:.95rem; color:#1e293b; }
.tm-day-dow { font-size:.68rem; color:#94a3b8; margin-left:.25rem; }
.tm-today-badge { background:#3b82f6; color:#fff; font-size:.58rem; font-weight:700; border-radius:3px; padding:.1rem .3rem; margin-left:.2rem; }

/* Pills de maré */
.tm-tide-pill {
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  padding:.22rem .5rem !important;
  border-radius:6px !important;
  line-height:1.35 !important;
  width:100% !important;
  box-sizing:border-box !important;
}
.tm-tide-low  { background:#fef9c3 !important; }
.tm-tide-high { background:#dbeafe !important; }
.tm-time { font-variant-numeric:tabular-nums; font-weight:600; color:#1e293b; font-size:.82rem; }
.tm-ht   { font-weight:700; font-size:.74rem; }
.tm-tide-low  .tm-ht { color:#854d0e !important; }
.tm-tide-high .tm-ht { color:#1e40af !important; }
.tm-dash { color:#cbd5e1; font-size:.8rem; }

/* Legenda */
.tm-legend { display:flex; gap:1.25rem; flex-wrap:wrap; margin-bottom:.75rem; font-size:.8rem; color:#475569; align-items:center; }
.tm-legend-item { display:flex; align-items:center; gap:.4rem; }

/* Fonte */
.tm-source { font-size:.7rem; color:#94a3b8; text-align:right; }
.tm-empty,.tm-notice { background:#f1f5f9; border-radius:8px; padding:1.5rem; text-align:center; color:#64748b; font-size:.88rem; }

/* Mobile — diminui colunas mas NUNCA esconde */
@media (max-width:600px) {
  .tm-grid-header,
  .tm-grid-row {
    grid-template-columns: 52px repeat(4,1fr) !important;
  }
  .tm-grid-cell { padding:.35rem .3rem !important; }
  .tm-time { font-size:.72rem !important; }
  .tm-ht   { font-size:.66rem !important; }
  .tm-tide-pill { padding:.18rem .3rem !important; }
  .tm-day-num { font-size:.85rem !important; }
  .tm-day-dow { display:none; }
  .tm-nav-current { font-size:.82rem; }
}