/* ════════════════════════════════════════════════════════════════
   RMF — Material 3 componentes compartilhados (.m3-*)
   Extraído de privacidade.html.

   DEPENDE de m3-tokens.css (paleta --md-sys-color-*). Carregue ambos:
     <link rel="stylesheet" href="/res/assets/css/m3-tokens.css">
     <link rel="stylesheet" href="/res/assets/css/m3.css">
   Requer também a fonte Inter (res/fonts/fonts.css) e Font Awesome.

   Páginas com app-bar de altura diferente sobrescrevem --md-rmf-appbar-height.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Altura padrão da app-bar (sobrescreva por página se necessário) */
  --md-rmf-appbar-height: 4rem;
}

html, body {
  margin: 0;
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  -webkit-font-smoothing: antialiased;
}

/* ─── Logo RMF ─────────────────────────────────────────────── */
.rmf-logo {
  width:30px; height:30px; display:inline-block;
  background-image: url("/res/iconblue.png");
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
@media (prefers-color-scheme: dark){
  .rmf-logo { background-image: url("/res/icon.png"); }
}

/* ─── Safe areas (usam a altura da app-bar) ──────────────── */
.safe-pt { padding-top: calc(var(--md-rmf-appbar-height) + env(safe-area-inset-top)); }
.safe-pb { padding-bottom: calc(3rem + env(safe-area-inset-bottom)); }

/* ─── Modo "app" (InAppWebView do Flutter / ?embed=1) ────── */
html.app-mode header           { display: none; }
html.app-mode .safe-pt         { padding-top: env(safe-area-inset-top); }
html.app-mode #header-spacer   { display: none; }
html.app-mode #page-transition { display: none; }

/* ─── M3 Top App Bar (mesma estrutura do header das páginas de cidade) ─── */
.m3-appbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1100;
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  padding-top: calc(8px + env(safe-area-inset-top));
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  transition: background-color 200ms ease;
}
/* Estado elevado: conteúdo rolando por baixo (toggle via m3-appbar-scroll.js) */
.m3-appbar.is-scrolled { background: var(--md-rmf-appbar-scrolled); }

.m3-appbar__back {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  padding: 0; border: none; background: transparent; cursor: pointer;
  color: var(--md-sys-color-on-surface-variant); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: background .15s;
}
.m3-appbar__back:hover { background: var(--md-sys-color-surface-container-high); }
.m3-appbar__brand {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--md-sys-color-on-surface);
}
.m3-appbar__title {
  font-family: var(--md-ref-typeface-brand);
  font-size: 22px; font-weight: 500;
  color: var(--md-sys-color-on-surface); user-select: none;
}
.m3-appbar__spacer { flex: 1; }
@media (max-width: 420px) { .m3-appbar__title { display: none; } }

/* ─── M3 cards ─────────────────────────────────────────────── */
.m3-card {
  position: relative;
  border-radius: 12px;
  padding: 20px;
}
.m3-card-surface {
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}

/* ─── M3 icon container ──────────────────────────────────── */
.m3-icon-circle {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  width: 56px; height: 56px;
  border-radius: 16px;
}

/* ─── Ícone de seção (menor, dentro do card) ─────────────── */
.m3-section-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-size: 16px;
}

/* ─── Callout (bloco de destaque dentro de card) ─────────── */
.m3-callout {
  border-radius: 12px;
  padding: 12px 16px;
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 16px;
}
.m3-callout-success {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}
.m3-callout-surface {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
}

/* ─── M3 typography ──────────────────────────────────────── */
.m3-headline-small { font-family: var(--md-ref-typeface-brand); font-size: 24px; font-weight: 400; line-height: 32px; letter-spacing: 0; }
.m3-title-medium   { font-family: var(--md-ref-typeface-plain); font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: 0.15px; }
.m3-body-medium    { font-family: var(--md-ref-typeface-plain); font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0.25px; color: var(--md-sys-color-on-surface-variant); }
.m3-body-small     { font-family: var(--md-ref-typeface-plain); font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0.4px; color: var(--md-sys-color-on-surface-variant); }

/* Texto de leitura (parágrafos de conteúdo) */
.m3-prose {
  font-family: var(--md-ref-typeface-plain);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.25px;
  color: var(--md-sys-color-on-surface-variant);
  margin: 0;
}
.m3-prose + .m3-prose { margin-top: 12px; }
.m3-prose strong {
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
}
.m3-prose a {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
}
.m3-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  padding: 1px 5px;
  border-radius: 5px;
}

/* ─── Page transition ─────────────────────────────────────── */
#page-transition {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--md-sys-color-background);
  transition: opacity 300ms;
  pointer-events: none;
  opacity: 1;
}
#page-transition.gone { opacity: 0; }

/* ─── Icons inside md-* buttons ──────────────────────────── */
md-icon-button i { font-size: 20px; }