:root {
    /* Paleta clara aquecida (2026-09-07, referencia visual Organic/typeui.sh
       — so referencia, sem copiar codigo/arquivo de terceiro, ver
       CLAUDE.md/plano) — mesmo fundo/acento de antes, tom mais cremoso. */
    --diario-bg-1: #f6f3ec;
    --diario-bg-2: #fffdf8;
    --diario-bg-3: #ede7d8;
    --diario-card: #fffdf8;
    --diario-line: rgba(43, 33, 14, 0.12);
    --diario-brand: #0a3c73;
    --diario-brand-soft: #dceaf9;
    /* Azul escuro no lugar do laranja (2026-09-16, pedido do Anderson —
       identidade GeoPJ e azul, nao laranja; mesmo tom de --diario-brand,
       reaproveitado em vez de inventar cor nova). */
    --diario-accent: #0a3c73;
    --diario-accent-soft: rgba(10, 60, 115, 0.14);
    --diario-accent-contrast: #fdfdfd;
    /* Fixo (nao muda com o tema claro/escuro do dashboard) — usado só nos
       elementos dentro do cabecalho/subrow/drawer mobile, que sao SEMPRE
       escuros (#0b0f16) independente do tema da pagina (ver .diario-header).
       Sem isso, --diario-accent viraria azul-marinho no tema claro e ficaria
       quase invisível sobre o cabecalho, que nunca clareia junto. */
    --diario-header-accent: #7ec8ff;
    --diario-header-accent-soft: rgba(126, 200, 255, 0.18);
    --diario-header-accent-contrast: #082033;
    --diario-text: #201c12;
    --diario-muted: #6b6250;
    --diario-success: #1f8c4e;
    --diario-danger: #c43f3f;
    --diario-radius-lg: 20px;
    --diario-radius-md: 16px;
    --diario-radius-pill: 999px;
    --diario-font-display: 'Lora', Georgia, 'Times New Roman', serif;
}

[data-diario-theme='dark'] {
    /* Preto de verdade (2026-09-08, pedido do Anderson comparando com a
       referencia Mosa AI — o charcoal-azulado de antes ainda lia como
       "dashboard", nao como landing). Vale tanto pra pagina publica
       (sempre escura, sem toggle) quanto pro dashboard logado quando o
       usuario escolhe escuro no toggle — mesmo token, os dois se
       beneficiam. */
    --diario-bg-1: #07080a;
    --diario-bg-2: #14161d;
    --diario-bg-3: #0a0b10;
    /* Card precisa ser MAIS claro que o fundo (2026-09-08: cards perderam
       a borda nesta rodada — sem contraste de fundo, ficariam invisiveis
       contra a pagina, ja que antes --diario-card era igual a --diario-bg-2). */
    --diario-card: #1a1d26;
    --diario-line: rgba(197, 214, 239, 0.10);
    --diario-brand: #99c8ff;
    --diario-brand-soft: rgba(63, 116, 184, 0.25);
    /* Azul claro no lugar do laranja (2026-09-16) — mesmo azul do "Palido
       Ponto Azul"/.diario-header-strip (#7ec8ff), nunca uma cor nova. */
    --diario-accent: #7ec8ff;
    --diario-accent-soft: rgba(126, 200, 255, 0.18);
    --diario-accent-contrast: #082033;
    --diario-text: #ecf3ff;
    --diario-muted: #b9c6dc;
    --diario-success: #67ce95;
    --diario-danger: #ff8f8f;
}

.app-card {
    border-radius: var(--diario-radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--diario-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.app-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.btn {
    border-radius: var(--diario-radius-pill);
}

.btn-primary {
    background-color: var(--diario-accent);
    border-color: var(--diario-accent);
    color: var(--diario-accent-contrast);
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: color-mix(in srgb, var(--diario-accent) 85%, #fff 15%);
    border-color: color-mix(in srgb, var(--diario-accent) 85%, #fff 15%);
    color: var(--diario-accent-contrast);
}

.btn-light {
    background: var(--diario-card);
    border: 1px solid var(--diario-line);
    color: var(--diario-text);
}

.btn-light:hover,
.btn-light:focus {
    background: var(--diario-bg-3);
    color: var(--diario-text);
}

html,
body {
    background: var(--diario-bg-1);
    color: var(--diario-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    /* Rede de seguranca contra qualquer elemento largo (mapa, tabela)
       empurrando a pagina inteira pro lado no mobile — o conteudo que
       precisa rolar (tabela) ja tem seu proprio overflow-x:auto. */
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--diario-font-display);
    letter-spacing: -0.01em;
}

#diario-app {
    min-height: 100vh;
    color: var(--diario-text);
}

.diario-content {
    max-width: 1320px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

/* ── Cabecalho proprio, fixo no topo ─────────────────────────────────── */
.diario-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #0b0f16;
    border-bottom: 1px solid rgba(153, 200, 255, 0.14);
}

.diario-header-row {
    /* Mesmo teto fluido do dashboard logado (.diario-app-shell) — na
       landing publica (max-width:1320px em .diario-content) so sobra uma
       margem levemente maior nos monitores bem largos, sem problema. */
    max-width: min(1600px, 96vw);
    margin: 0 auto;
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.diario-header-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #ecf3ff;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 1.15rem;
}

.diario-header-brand i {
    color: var(--diario-accent);
}

/* Logo completa (2026-09-16, geopj.com.br) — 800x212 no arquivo fonte,
   altura fixa e largura automatica preserva a proporcao. */
.diario-header-brand img {
    height: 34px;
    width: auto;
    display: block;
}

.diario-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: relative;
    /* Sempre encostado na borda direita, com ou sem hamburguer/busca antes
       dele (2 filhos deslogado, 4 logado) — mais robusto que
       justify-content:space-between no pai pra um numero variavel de itens. */
    margin-left: auto;
}

/* Selo "Versão de pré-lançamento" no cabeçalho (2026-09-16, pedido do
   Anderson) — sempre no cabeçalho, que é sempre escuro, por isso usa os
   tokens fixos --diario-header-accent* (não o --diario-accent reativo). */
.diario-prelaunch-badge {
    /* inline-block, não inline-flex: o badge mistura um <span> aninhado
       (prefixo escondido no mobile) com texto solto como irmão — dentro de
       um flex container isso vira DOIS flex items e quebra em duas linhas
       (achado testando de verdade, não só lendo o CSS). */
    display: inline-block;
    white-space: nowrap;
    border-radius: var(--diario-radius-pill);
    padding: 0.3rem 0.7rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--diario-header-accent);
    background: var(--diario-header-accent-soft);
    border: 1px solid rgba(126, 200, 255, 0.28);
}

/* Variante clicável do mesmo selo — link "Notícias" no cabeçalho
   (2026-09-17), sempre antes do "Versão de pré-lançamento". */
.diario-nav-badge-link {
    text-decoration: none;
    transition: background 0.2s ease;
}

.diario-nav-badge-link:hover {
    background: rgba(126, 200, 255, 0.32);
}

.diario-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(153, 200, 255, 0.25);
    background: rgba(153, 200, 255, 0.08);
    color: #ecf3ff;
}

.diario-theme-toggle:hover {
    background: rgba(153, 200, 255, 0.16);
}

.diario-header-user {
    color: #ecf3ff;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Chip de usuario (avatar + nome), estilo "Grace Osei" da referencia
   Application — substitui o texto solto "Ola, {nome}" do cabecalho. */
.diario-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    border-radius: var(--diario-radius-pill);
    background: rgba(153, 200, 255, 0.1);
    border: 1px solid rgba(153, 200, 255, 0.22);
}

.diario-user-avatar {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: var(--diario-radius-pill);
    background: var(--diario-header-accent);
    color: var(--diario-header-accent-contrast);
    font-weight: 800;
    font-size: 0.8rem;
}

/* Faixa estreita de transicao entre o cabecalho escuro e o conteudo. */
.diario-header-strip {
    height: 4px;
    background: linear-gradient(90deg, rgba(126, 200, 255, 0.15), #7ec8ff 45%, #bfe3ff 55%, rgba(126, 200, 255, 0.15));
    box-shadow: 0 0 14px rgba(126, 200, 255, 0.55);
}

/* ── Navbar do dashboard logado (2026-09-08, substitui a sidebar —
   referencia visual Organic "Application": hamburguer+busca+acoes na
   linha 1, abas horizontais+"···" na linha 2). O cabecalho e sempre
   escuro (#0b0f16/#ecf3ff), independente do tema claro/escuro do
   dashboard — mesma convencao que o header ja tinha antes desta rodada. */
.diario-header-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    border: none;
    background: rgba(153, 200, 255, 0.08);
    color: #ecf3ff;
}

.diario-header-hamburger:hover {
    background: rgba(153, 200, 255, 0.16);
}

.diario-header-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1 1 auto;
    max-width: 420px;
    padding: 0.5rem 0.9rem;
    border-radius: var(--diario-radius-pill);
    background: rgba(153, 200, 255, 0.08);
    border: 1px solid rgba(153, 200, 255, 0.16);
    color: #b9c6dc;
}

.diario-header-search i {
    font-size: 0.85rem;
}

.diario-header-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    color: #ecf3ff;
    font-size: 0.88rem;
}

.diario-header-search input::placeholder {
    color: rgba(236, 243, 255, 0.45);
}

/* Fora — largura cheia, so a linha divisoria + fundo. Dentro
   (.diario-header-subrow-inner) — largura centralizada, mesmo teto de
   .diario-header-row. */
.diario-header-subrow {
    border-top: 1px solid rgba(153, 200, 255, 0.1);
}

.diario-header-subrow-inner {
    max-width: min(1600px, 96vw);
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.diario-nav-tabs {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.diario-nav-tabs::-webkit-scrollbar {
    display: none;
}

.diario-nav-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.85rem 0.1rem;
    color: rgba(236, 243, 255, 0.62);
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.diario-nav-tab:hover {
    color: #ecf3ff;
}

.diario-nav-tab.active {
    color: var(--diario-header-accent);
    border-bottom-color: var(--diario-header-accent);
}

.diario-nav-more {
    position: relative;
    flex-shrink: 0;
}

.diario-nav-more-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: rgba(236, 243, 255, 0.62);
}

.diario-nav-more-trigger:hover,
.diario-nav-more-trigger.active {
    background: rgba(153, 200, 255, 0.12);
    color: #ecf3ff;
}

.diario-nav-more-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 200px;
    background: var(--diario-card);
    border-radius: var(--diario-radius-md);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    padding: 0.4rem;
    z-index: 50;
}

.diario-nav-more-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--diario-text);
    font-size: 0.88rem;
}

.diario-nav-more-item:hover,
.diario-nav-more-item.active {
    background: var(--diario-accent-soft);
    color: var(--diario-accent);
}

/* Drawer do hamburguer — mainViews+advancedViews juntos, so mobile. Fundo
   sempre escuro (mesma convencao do resto do header), entao os
   .diario-nav-btn de dentro precisam de override de cor. */
.diario-mobile-nav-drawer {
    padding: 0.5rem 1.25rem 1rem;
    background: #0b0f16;
    border-top: 1px solid rgba(153, 200, 255, 0.12);
}

.diario-mobile-nav-drawer .diario-nav-btn {
    color: #ecf3ff;
}

.diario-mobile-nav-drawer .diario-nav-btn.active,
.diario-mobile-nav-drawer .diario-nav-btn:hover {
    background: var(--diario-header-accent-soft);
    color: var(--diario-header-accent);
}

.diario-mobile-nav-sep {
    height: 1px;
    background: rgba(153, 200, 255, 0.14);
    margin: 0.5rem 0;
}

@media (max-width: 900px) {
    .diario-header-hamburger {
        display: inline-flex;
    }

    .diario-header-search,
    .diario-header-subrow {
        display: none;
    }
}

/* Cabecalho logado ficava apertado <520px (2026-09-08, achado no teste
   visual: "Sair" cortado na borda) — hamburguer+logo+toggle+chip+sair e
   gente demais pra uma linha só nesse tamanho. Corta o texto que repete
   informação (nome do produto já esta no favicon/título da aba; nome do
   usuário já esta escrito por extenso dentro do drawer). */
@media (max-width: 520px) {
    .diario-header-row {
        gap: 0.5rem;
    }

    .diario-header-brand span {
        display: none;
    }

    .diario-header-user {
        display: none;
    }

    .diario-user-chip {
        padding: 0.25rem;
    }

    .diario-prelaunch-badge-full {
        display: none;
    }

    .diario-prelaunch-badge {
        padding: 0.3rem 0.55rem;
    }

    /* "Notícias" vira só o ícone aqui (2026-09-17) — com o link novo ao
       lado do selo de pré-lançamento, texto nos dois já não cabe com o
       Entrar numa tela de 390px (achado testando, "Entrar" saía cortado). */
    .diario-header-actions {
        gap: 0.4rem;
    }

    .diario-nav-badge-text {
        display: none;
    }
}

/* ── Painel de login, ancorado no botao "Entrar" do cabecalho ───────── */
.diario-login-panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    width: min(360px, 92vw);
    background: var(--diario-card);
    border-radius: var(--diario-radius-md);
    padding: 1rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* Container do dashboard logado (2026-09-08, substitui .diario-shell) —
   sem grid nenhum, so um teto de largura mais generoso e fluido que a
   landing publica (max-width:1320px em .diario-content), pra aproveitar
   tela grande agora que nao ha mais coluna de sidebar. Especificidade de
   duas classes (.diario-content.diario-app-shell) vence a regra de
   .diario-content sozinha, sem precisar de !important. */
.diario-content.diario-app-shell {
    max-width: min(1600px, 96vw);
}

.diario-main {
    min-width: 0;
}

.diario-nav-btn {
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    border-radius: var(--diario-radius-pill);
    padding: 0.65rem 1rem;
    background: transparent;
    color: var(--diario-text);
    margin-bottom: 0.5rem;
    transition: all 0.25s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.diario-nav-btn.active,
.diario-nav-btn:hover {
    background: var(--diario-accent-soft);
    border-color: var(--diario-line);
    color: var(--diario-accent);
}

.diario-nav-btn.active {
    font-weight: 700;
}

.diario-badge {
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    padding: 0 0.4rem;
    background: var(--diario-header-accent);
    color: var(--diario-header-accent-contrast);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
}

.diario-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
}

.diario-card {
    background: var(--diario-card);
    border-radius: var(--diario-radius-lg);
    padding: 1.35rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.diario-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.diario-card h4 {
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.diario-price {
    font-family: var(--diario-font-display);
    font-weight: 700;
    color: var(--diario-accent);
    font-size: 1.6rem;
    letter-spacing: -0.01em;
}

/* Preco com "de/por" (pre-lancamento) — PrecoComDesconto, app.jsx */
.diario-preco-bloco {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.diario-preco-de {
    color: var(--diario-muted);
    text-decoration: line-through;
    font-size: 0.85rem;
}

.diario-tag {
    display: inline-block;
    border: 1px solid var(--diario-line);
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
    color: var(--diario-brand);
    font-size: 0.8rem;
    background: color-mix(in srgb, var(--diario-brand-soft) 72%, transparent 28%);
}

/* Grade de cards da listagem /noticias (2026-09-17). */
.diario-noticias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.1rem;
}

.diario-noticia-card {
    display: block;
    text-decoration: none;
    color: var(--diario-text);
}

.diario-noticia-card-titulo {
    font-size: 1.05rem;
    margin: 0.5rem 0 0.35rem;
}

.diario-noticia-card-resumo {
    color: var(--diario-muted);
    font-size: 0.92rem;
    margin: 0 0 0.5rem;
}

.diario-noticias-paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.diario-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.diario-form-grid.single {
    grid-template-columns: 1fr;
}

.diario-map {
    width: 100%;
    height: 360px;
    border-radius: var(--diario-radius-md);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.diario-map-full {
    height: 620px;
}

.diario-map-layout {
    display: grid;
    /* minmax(0, 1fr), nao só 1fr — sem o minmax a coluna nao encolhe
       abaixo do tamanho intrinseco do conteudo (SVG do mapa), e isso
       estoura a largura da pagina inteira no mobile ("grid blowout"). */
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 0.8rem;
}

.diario-sobre-mapa {
    min-width: 0;
}

.diario-sobre-mapa svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Barra compacta de coordenada + camadas, acima do mapa geral. */
.diario-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
    padding: 0.6rem 0.8rem;
    background: var(--diario-card);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.diario-map-toolbar .form-control-sm {
    width: 150px;
}

.diario-map-toolbar-sep {
    width: 1px;
    align-self: stretch;
    background: var(--diario-line);
    margin: 0 0.2rem;
}

.diario-map-toolbar-opacity {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--diario-muted);
}

.diario-map-toolbar-opacity input[type='range'] {
    width: 90px;
}

.diario-layer-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--diario-line);
    background: transparent;
    color: var(--diario-muted);
    font-size: 0.85rem;
    line-height: 1.2;
    white-space: nowrap;
}

.diario-layer-chip:hover {
    border-color: var(--diario-accent);
}

.diario-layer-chip.is-active {
    background: var(--diario-accent-soft);
    border-color: var(--diario-accent);
    color: var(--diario-accent);
    font-weight: 700;
}

.diario-layers-panel {
    background: var(--diario-card);
    border-radius: var(--diario-radius-md);
    padding: 0.9rem;
    height: fit-content;
    min-width: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.diario-layer-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--diario-line);
}

.diario-layer-row:last-child {
    border-bottom: none;
}

.diario-layer-row input[type='checkbox'] {
    margin-top: 0.2rem;
}

.diario-layer-name {
    font-size: 0.88rem;
    font-weight: 600;
}

.diario-layer-source {
    font-size: 0.76rem;
    color: var(--diario-muted);
}

/* "Como funciona" na landing — trio de paineis arredondados com
   icone+titulo+frase (2026-09-08, referencia visual Mosa AI — trocou a
   lista numerada/timeline por painel de destaque, no mesmo espirito de
   "Time Unfolded / Words That Flow / A Silent Guide" do print). */
.diario-feature-trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 1rem 0;
}

.diario-feature-card {
    background: linear-gradient(160deg, var(--diario-bg-2), var(--diario-bg-3));
    border-radius: var(--diario-radius-lg);
    padding: 1.75rem 1.5rem;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.diario-feature-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--diario-accent-soft);
    color: var(--diario-accent);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.diario-feature-card h4 {
    font-family: var(--diario-font-display);
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
}

.diario-feature-card p {
    color: var(--diario-muted);
    font-size: 0.92rem;
    margin: 0;
}

@media (max-width: 900px) {
    .diario-map-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Mapa menor no mobile (pedido do Anderson) — sem isso ele esticava
       pra largura inteira do card, ficando grande demais pro que mostra. */
    .diario-sobre-mapa svg {
        max-width: 260px;
        margin: 0 auto;
    }
}

.diario-table-wrap {
    overflow-x: auto;
}

/* Tabela vira lista de cards no mobile (2026-09-07, achado ao vivo: 4-5
   colunas cabendo só com scroll lateral, texto cortado na borda parecia
   bug, não affordance de "arraste pra ver mais") — cada <td> precisa de
   data-label (ver SobrePage em app.jsx) pro rótulo aparecer via ::before. */
@media (max-width: 640px) {
    .diario-table-wrap {
        overflow-x: visible;
    }

    .diario-table,
    .diario-table tbody,
    .diario-table tr,
    .diario-table td {
        display: block;
        width: 100%;
    }

    .diario-table thead {
        display: none;
    }

    .diario-table tr {
        border: 1px solid var(--diario-line);
        border-radius: var(--diario-radius-md);
        padding: 0.7rem 0.85rem;
        margin-bottom: 0.6rem;
    }

    .diario-table td {
        border-bottom: none;
        padding: 0.3rem 0;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.75rem;
        text-align: right;
    }

    .diario-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--diario-muted);
        text-align: left;
        flex-shrink: 0;
    }
}

.diario-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.diario-table th {
    border-bottom: 1px solid var(--diario-line);
    padding: 0.7rem;
    text-align: left;
    vertical-align: top;
    color: var(--diario-muted);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.diario-table td {
    /* Sem borda em toda celula (2026-09-08) — zebra sutil no lugar da
       grade, pra nao competir com o resto da landing agora mais espacosa. */
    border-bottom: none;
    padding: 0.7rem;
    text-align: left;
    vertical-align: top;
}

.diario-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--diario-bg-3) 55%, transparent 45%);
}

.diario-note {
    color: var(--diario-muted);
    font-size: 0.9rem;
}

.diario-json {
    white-space: pre-wrap;
    background: color-mix(in srgb, var(--diario-bg-3) 80%, transparent 20%);
    border: 1px solid var(--diario-line);
    border-radius: 10px;
    padding: 0.8rem;
    margin: 0;
}

.diario-status-ok {
    color: var(--diario-success);
    font-weight: 600;
}

.diario-status-pendente {
    color: var(--diario-accent);
    font-weight: 600;
}

.diario-status-erro {
    color: var(--diario-danger);
    font-weight: 600;
}

/* Animação "gerando o PDF" (2026-09-08) — mapa geral, relatório em PDF
   pode levar 1-2min consultando várias fontes em série no backend; o
   spinner + texto girando (PDF_ETAPAS em app.jsx) dá feedback de que algo
   está acontecendo, sem inventar barra de progresso que o backend não tem. */
.diario-pdf-loading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--diario-muted);
    font-size: 0.9rem;
}

.diario-spinner {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 3px solid var(--diario-line);
    border-top-color: var(--diario-accent);
    animation: diario-spin 0.8s linear infinite;
}

@keyframes diario-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Prévia em tela das sobreposições do "Mapa geral" (2026-09-08) — uma
   camada por bloco, um cartão por registro encontrado, com TODAS as
   propriedades da feição (sem curadoria de campo, ao contrário do resumo
   de 3 campos do PDF). */
.diario-overlap-camada {
    padding: 1rem 0;
    border-bottom: 1px solid var(--diario-line);
}

.diario-overlap-camada:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.diario-exemplo-card {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.4rem 1.2rem;
    background: var(--diario-bg-3);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.6rem;
}

.diario-exemplo-prop {
    display: flex;
    flex-direction: column;
    font-size: 0.82rem;
    min-width: 0;
    overflow-wrap: break-word;
}

.diario-exemplo-prop-label {
    color: var(--diario-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Hero da landing publica — "Palido Ponto Azul" (2026-09-08, pedido
   explicito do Anderson: fundo preto de verdade + o mesmo azul da faixa
   do cabecalho, .diario-header-strip, como motivo geo/cosmico — a
   referencia e a foto da Terra tirada pela Voyager 1 em 1990/citacao de
   Carl Sagan, ligando com a tematica geografica do produto). Preto
   independente de theme token (sempre escuro aqui, a pagina publica nao
   tem toggle de tema) pra garantir o fundo pitch-black mesmo se o
   --diario-bg-1 do tema escuro for recalibrado no futuro. */
.diario-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #07080a;
    border: 1px solid var(--diario-line);
    border-radius: var(--diario-radius-lg);
    padding: 5rem 2.5rem;
    margin-bottom: 1rem;
}

/* Campo de estrelas esparsas (pontinhos de baixa opacidade). */
.diario-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* "Raio de sol" diagonal e sutil atravessando o quadro, ecoando a
       faixa de luz dispersa que aparece na foto original ao lado do
       ponto, mais o campo de estrelas — tudo em uma unica lista de
       camadas (background-image nao acumula, a ultima declaracao vale
       sozinha). */
    background-image:
        linear-gradient(102deg, transparent 38%, color-mix(in srgb, var(--diario-brand) 9%, transparent 91%) 54%, transparent 68%),
        radial-gradient(1px 1px at 12% 24%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
        radial-gradient(1px 1px at 66% 14%, rgba(255, 255, 255, 0.4) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 82% 52%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
        radial-gradient(1px 1px at 38% 68%, rgba(255, 255, 255, 0.35) 50%, transparent 51%),
        radial-gradient(1px 1px at 92% 78%, rgba(255, 255, 255, 0.3) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 8% 82%, rgba(255, 255, 255, 0.45) 50%, transparent 51%),
        radial-gradient(1px 1px at 55% 38%, rgba(255, 255, 255, 0.3) 50%, transparent 51%),
        radial-gradient(1px 1px at 27% 50%, rgba(255, 255, 255, 0.35) 50%, transparent 51%),
        radial-gradient(1px 1px at 74% 88%, rgba(255, 255, 255, 0.28) 50%, transparent 51%);
}

/* O ponto azul palido em si — mesmo azul de .diario-header-strip/
   --diario-brand, nunca uma cor nova. */
.diario-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 32%;
    right: 20%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--diario-brand);
    box-shadow:
        0 0 6px 2px var(--diario-brand),
        0 0 42px 16px color-mix(in srgb, var(--diario-brand) 45%, transparent 55%);
}

.diario-hero > * {
    position: relative;
    z-index: 1;
}

.diario-hero-titulo {
    font-family: var(--diario-font-display);
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    max-width: 18ch;
}

.diario-hero-sub {
    color: var(--diario-muted);
    font-size: 1.1rem;
    max-width: 56ch;
}

.diario-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.diario-chip {
    display: inline-flex;
    border-radius: var(--diario-radius-pill);
    padding: 0.2rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.6rem;
    color: var(--diario-brand);
    background: var(--diario-brand-soft);
}

.diario-chip-lancamento {
    color: var(--diario-accent);
    background: var(--diario-accent-soft);
}

.diario-footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 1.5rem 0.5rem 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--diario-line);
}

.diario-footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
}

.diario-footer-col a {
    color: var(--diario-muted);
}

.diario-footer-col a:hover {
    color: var(--diario-accent);
}

.diario-auth {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.diario-label {
    color: var(--diario-muted);
    font-size: 0.82rem;
    margin-bottom: 0.3rem;
    display: inline-block;
}

.diario-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 38px;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    border: 1px solid var(--diario-line);
    color: var(--diario-muted);
}

.diario-notification-list {
    display: grid;
    gap: 0.75rem;
}

.diario-notification {
    border-radius: 12px;
    padding: 0.85rem;
    background: var(--diario-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.diario-notification.is-unread {
    border-left: 4px solid var(--diario-accent);
}

.diario-notification.is-read {
    opacity: 0.85;
}

.diario-notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

@media (max-width: 1200px) {
    .diario-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .diario-grid,
    .diario-form-grid,
    .diario-auth,
    .diario-feature-trio,
    .diario-footer {
        grid-template-columns: 1fr;
    }

    .diario-hero {
        padding: 2.5rem 1.25rem;
    }

    /* No mobile o hero fica mais baixo/estreito e o ponto (posicionado em
       % fixo) acaba caindo em cima do titulo — reancora no canto inferior,
       fora da área de texto. */
    .diario-hero::after {
        top: auto;
        bottom: 14%;
        right: 10%;
    }

    .diario-map,
    .diario-map-full {
        height: 300px;
    }

    .diario-notification-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .diario-login-panel {
        position: fixed;
        top: 64px;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
    }
}