:root {
  --if-primary: #0c3b4c;
  --if-primary-strong: #082833;
  --if-accent: #1d8a73;
  --if-accent-2: #d4a054;
  --if-bg: #f3f6f8;
  --if-surface: #ffffff;
  --if-surface-soft: #e7eef2;
  --if-text: #12242d;
  --if-text-muted: #5d717b;
  --if-border: #d5e0e6;
  --if-danger: #9d2c3a;
  --if-success: #1d7a4d;
  --if-warning: #8a5a12;
  --if-shadow: 0 12px 32px rgba(12, 36, 48, 0.08);
  --if-radius: 8px;
  color-scheme: light;
}

[data-theme="dark"] {
  --if-primary: #8fd0c4;
  --if-primary-strong: #d5ebe6;
  --if-accent: #3dbea4;
  --if-accent-2: #e2b56a;
  --if-bg: #0c1418;
  --if-surface: #152026;
  --if-surface-soft: #1d2c33;
  --if-text: #e7eef2;
  --if-text-muted: #a9bcc6;
  --if-border: #2c414b;
  --if-danger: #ff8d9a;
  --if-success: #7ddeaf;
  --if-warning: #f0c27a;
  --if-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --rz-text-color: var(--if-text);
  --rz-text-secondary-color: var(--if-text-muted);
  --rz-base-background-color: var(--if-surface);
  --rz-body-background-color: var(--if-bg);
  --rz-border-color: var(--if-border);
  color-scheme: dark;
}

.slot { display: contents; }

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: Inter, "Segoe UI", Roboto, sans-serif;
  background: var(--if-bg);
  color: var(--if-text);
}

a { color: var(--if-accent); }

h1, h2, h3 { font-weight: 650; letter-spacing: -0.02em; }

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.theme-toggle, .text-button {
  border: 1px solid var(--if-border);
  background: var(--if-surface);
  color: var(--if-text);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  font: inherit;
}

.site-header, .site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 6vw;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--if-surface) 92%, transparent);
  border-bottom: 1px solid var(--if-border);
  backdrop-filter: blur(10px);
}

.marca {
  color: var(--if-text);
  text-decoration: none;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.marca span { color: var(--if-accent); }

.site-nav, .site-acoes { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }

.site-nav a, .site-acoes a {
  color: var(--if-text);
  text-decoration: none;
  font-weight: 600;
}

.site-nav a.ativo { color: var(--if-accent); }

.site-main { min-height: calc(100vh - 9rem); }

.pagina-publica { width: min(1120px, calc(100% - 8vw)); margin: 0 auto; padding: 2rem 0 3rem; }

.pagina-cabeca h1 { font-size: clamp(2rem, 4vw, 3.2rem); margin: 0 0 0.4rem; }

.pagina-cabeca p { color: var(--if-text-muted); font-size: 1.1rem; max-width: 42rem; }

.conteudo-texto { font-size: 1.05rem; line-height: 1.7; }

.conteudo-texto h2 { margin-top: 0; }

.figura-conteudo, .bloco-codigo { margin: 1.5rem 0; }

.figura-conteudo img, .banner-faixa img, .slide-publico img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: var(--if-radius);
}

.figura-conteudo img { max-height: 520px; }

.figura-conteudo figcaption, .bloco-codigo figcaption { color: var(--if-text-muted); margin-top: 0.4rem; }

.bloco-codigo {
  background: var(--if-primary-strong);
  color: #f4f8f7;
  border-radius: var(--if-radius);
  overflow: hidden;
}

.bloco-codigo figcaption {
  display: flex;
  justify-content: space-between;
  padding: 0.7rem 1rem 0;
  color: #d5ebe6;
}

.bloco-codigo pre {
  margin: 0;
  padding: 1rem;
  overflow: auto;
  font-family: "Cascadia Code", "Segoe UI Mono", ui-monospace, monospace;
  font-size: 0.95rem;
}

.slide-publico { position: relative; height: 100%; display: block; color: white; text-decoration: none; }

.slide-publico img { height: 100%; border-radius: 0; }

.slide-legenda {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.5rem 1.4rem;
  background: linear-gradient(transparent, rgba(8, 24, 32, 0.82));
}

.slide-legenda h2, .slide-legenda p { margin: 0; color: white; }

.banner-faixa {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1rem;
  align-items: center;
  margin: 0.5rem 6vw 0.5rem;
  padding: 0.6rem;
  background: var(--if-surface);
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius);
  color: var(--if-text);
  text-decoration: none;
  box-shadow: var(--if-shadow);
}

.banner-faixa strong, .banner-faixa small { display: block; }

.banner-faixa small { color: var(--if-text-muted); }

.site-footer {
  border-top: 1px solid var(--if-border);
  color: var(--if-text-muted);
}

.vazio-publico, .login-card, .panel-card, .painel-card {
  background: var(--if-surface);
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius);
  box-shadow: var(--if-shadow);
}

.vazio-publico { padding: 2rem; }

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--if-accent) 25%, transparent), transparent 30%),
    var(--if-bg);
}

.login-card { width: min(420px, 100%); padding: 1.5rem; display: grid; gap: 0.8rem; }

.login-card h1 { margin: 0; }

.admin-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.standard-page { display: grid; gap: 0.8rem; padding: 0.5rem 0.2rem 1.5rem; }

.page-heading h1 { margin: 0; font-size: 1.6rem; }

.page-heading p { margin: 0; color: var(--if-text-muted); }

.panel-card { padding: 0.9rem; }

.standard-filter-toolbar, .form-grid { display: flex; gap: 0.7rem; align-items: end; flex-wrap: wrap; }

.form-grid.four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  align-items: start;
}

.field { display: grid; gap: 0.3rem; min-width: 0; }

.field span, .standard-search-field span { font-size: 0.86rem; color: var(--if-text-muted); }

.field b { color: var(--if-danger); }

.span-2 { grid-column: span 2; }
.span-4 { grid-column: span 4; }

.form-alert {
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-radius: var(--if-radius);
  background: color-mix(in srgb, var(--if-danger) 12%, var(--if-surface));
  color: var(--if-danger);
}

.grid-footnote { color: var(--if-text-muted); font-size: 0.85rem; margin: 0.5rem 0 0; }

.child-crud { display: grid; gap: 0.7rem; margin-top: 0.4rem; }

.lookup-control { display: flex; gap: 0.6rem; align-items: center; }

.lookup-control img { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--if-border); }

.print-preview table { width: 100%; border-collapse: collapse; }

.print-preview th, .print-preview td { text-align: left; padding: 0.45rem; border-bottom: 1px solid var(--if-border); }

.painel-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }

.painel-card { padding: 1rem; color: inherit; text-decoration: none; display: grid; gap: 0.2rem; }

.painel-card strong { font-size: 1.8rem; }

.html-leitura {
  min-height: 8rem;
  padding: 0.8rem;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius);
  background: var(--if-surface-soft);
}

.codigo-leitura, .form-input, textarea.form-input {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--if-surface);
  border: 1px solid var(--if-border);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
}

.codigo-leitura { font-family: ui-monospace, monospace; min-height: 12rem; }

@media (max-width: 960px) {
  .form-grid.four, .painel-grade { grid-template-columns: 1fr 1fr; }
  .span-4 { grid-column: span 2; }
  .banner-faixa { grid-template-columns: 1fr; margin-inline: 1rem; }
}

@media (max-width: 640px) {
  .form-grid.four, .painel-grade, .site-header { grid-template-columns: 1fr; }
  .span-2, .span-4 { grid-column: auto; }
  .site-header { display: grid; }
}