input::-ms-reveal { display: none; }

/* Selo discreto "todos votaram" no cabeçalho do painel (prop `pronto` do PainelCabecalho) */
.ptelao-cab-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ptelao-cab-pronto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    animation: ptelaoProntoEntrada 0.35s ease;
}
.ptelao-cab-pronto svg { color: var(--cor-sucesso); }
@keyframes ptelaoProntoEntrada {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Modal de compartilhamento de documento (componente CompartilharDocumento) */
.compart-resultados {
    margin-top: var(--espaco-pequeno);
    border: 1px solid #eef1f5;
    border-radius: 10px;
    max-height: 220px;
    overflow-y: auto;
}
.compart-resultado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-pequeno);
    padding: 8px 12px;
    border-bottom: 1px solid #f3f4f6;
}
.compart-resultado:last-child { border-bottom: none; }
.compart-pessoa { display: flex; flex-direction: column; }
.compart-nome { font-size: 14px; font-weight: 600; color: #1f2937; }
.compart-perfil { font-size: 12px; color: #9ca3af; text-transform: capitalize; }
.compart-vazio { font-size: 13px; color: #9ca3af; margin: 8px 0; }
.compart-lista { margin-top: var(--espaco-medio); }
.compart-lista-titulo { font-size: 13px; font-weight: 700; color: #6b7280; margin: 0 0 8px; }
.compart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-pequeno);
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}
.compart-item:last-child { border-bottom: none; }
.compart-item-acoes { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.compart-nivel { display: inline-flex; border: 1px solid #e5e7eb; border-radius: 999px; overflow: hidden; }
.compart-nivel-btn {
    border: none;
    background: #fff;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
}
.compart-nivel-btn.ativo { background: var(--cor-primaria); color: #fff; }
.compart-remover {
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.compart-remover:hover { color: var(--cor-perigo); }
.doc-titulo-cell { display: inline-flex; align-items: center; gap: var(--espaco-pequeno); }

/* Compartilhar (Documentos/Mostrar): ícone-botão no cabeçalho + avatares de acesso nos metadados */
.doc-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid #b0b7c3;
    border-radius: var(--borda-raio);
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.doc-share-btn:hover { background: var(--cor-fundo-secundario); border-color: var(--cor-primaria); color: var(--cor-primaria); }
.doc-share-btn svg { width: 16px; height: 16px; }
.doc-compart-bloco { display: inline-flex; align-items: center; gap: 8px; }
.doc-compart-rotulo { color: #6b7280; }
.doc-compart-avatares { display: inline-flex; align-items: center; gap: 4px; }
.doc-compart-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}
.doc-compart-avatar-mais { background: #eef1f5; color: #6b7280; }

/* Selo "vê / não vê a página" no acordeão de permissões (Perfis/Editar) */
.perfil-visao {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 999px;
    white-space: nowrap;
}
.perfil-visao svg { display: block; }
.perfil-visao-sim { color: var(--cor-sucesso); background: #ecfdf5; border: 1px solid #a7f3d0; }
.perfil-visao-nao { color: #9ca3af; background: #f3f4f6; border: 1px solid #e5e7eb; }
.perfil-visao-neutro { color: #b8bec9; background: transparent; border: 1px dashed #e2e5ea; font-weight: 600; }

/* Botão pulsante — chama atenção para uma ação pronta (ex: Encerrar votação quando todos votaram) */
.botao-pulsar { animation: botaoPulsar 1.6s ease-in-out infinite; }
@keyframes botaoPulsar {
    0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
    70%  { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* Checklist de requisitos de senha (componente RequisitosSenha) */
.requisitos-senha {
    list-style: none;
    margin: var(--espaco-pequeno) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.requisito-item {
    display: flex;
    align-items: center;
    gap: var(--espaco-pequeno);
    font-size: 13px;
    color: var(--cor-neutra);
    transition: color 0.2s ease;
}
.requisito-icone {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #cbd5e1;
    transition: color 0.2s ease;
}
.requisito-icone svg { width: 100%; height: 100%; }
.requisito-ok { color: var(--cor-sucesso); font-weight: 600; }
.requisito-ok .requisito-icone { color: var(--cor-sucesso); }

.tooltip-limpo {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: var(--cor-primaria);
    color: #fff;
    font-family: var(--fonte-principal);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(26, 84, 191, 0.3);
    transform: translateX(-50%);
}

.tooltip-cursor {
    transform: none;
}

.edoc-conteudo .tiptap div[data-caixa-texto],
.edoc-conteudo-readonly div[data-caixa-texto] {
    margin: 12px 0;
    min-height: 40px;
}

:root {
    /* Cores Institucionais */
    --cor-primaria: #1a54bf;
    --cor-primaria-escura: #0d2d6e;
    --cor-primaria-clara: #e8f0fe;
    --cor-sucesso: #16a34a;
    --cor-perigo: #dc2626;
    --cor-alerta: #d97706;
    --cor-neutra: #6b7280;
    --cor-fundo: #ffffff;
    --cor-fundo-secundario: #f3f4f6;

    /* Tipografia — Arial (fonte de sistema, sempre disponível, funciona offline). */
    --fonte-principal: Arial, "Segoe UI", sans-serif;
    --fonte-destaque: Arial, "Segoe UI", sans-serif;
    --texto-base: 16px;
    --texto-pequeno: 12px;
    --texto-medio: 18px;
    --texto-grande: 24px;
    --texto-destaque: 48px;

    /* Espaçamento */
    --espaco-micro: 4px;
    --espaco-pequeno: 8px;
    --espaco-medio: 16px;
    --espaco-grande: 24px;
    --espaco-extra: 32px;
    --espaco-gigante: 48px;

    /* Formas e Efeitos */
    --borda-raio: 6px;
    --borda-pilula: 50px;
    --borda-circulo: 50%;
    --sombra-suave: 0 2px 8px rgba(0, 0, 0, 0.08);
    --sombra-elevada: 0 8px 24px rgba(0, 0, 0, 0.15);
    --transicao: 0.2s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c5cad3; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
* { scrollbar-width: thin; scrollbar-color: #c5cad3 transparent; }

.mt-pequeno { margin-top: var(--espaco-pequeno); }
.mt-medio { margin-top: var(--espaco-medio); }
.mt-grande { margin-top: var(--espaco-grande); }
.mb-pequeno { margin-bottom: var(--espaco-pequeno); }
.mb-medio { margin-bottom: var(--espaco-medio); }
.mb-grande { margin-bottom: var(--espaco-grande); }
.gap-medio { gap: var(--espaco-medio); }
.flex-entre { display: flex; justify-content: space-between; }
.flex-gap { display: flex; gap: var(--espaco-medio); }
.nao-encolhe { flex-shrink: 0; }

.aviso-box {
    background: #fff8e6;
    border: 1px solid #f0c14b;
    border-radius: var(--borda-raio);
    padding: 12px 16px;
    color: #7a5b00;
    font-size: 13px;
    line-height: 1.5;
}
.legislatura-label {
    font-size: 13px;
    color: var(--cor-neutra);
    margin-bottom: 12px;
}
.legislatura-label strong { color: var(--cor-primaria-escura); }
.modal-corpo-padrao { padding: var(--espaco-medio) var(--espaco-grande); }
.coluna-acoes-cabecalho { width: 60px; }
.botao-upload { cursor: pointer; }
.input-oculto { display: none; }
.formulario-grid-topo { align-items: flex-start; }
.permissao-acoes {
    display: flex;
    gap: var(--espaco-medio);
    padding: var(--espaco-pequeno) 0;
    border-bottom: 1px solid #f3f4f6;
}

.permissao-acao {
    font-size: 12px;
    font-weight: 600;
    color: var(--cor-primaria);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    font-family: var(--fonte-principal);
    transition: color var(--transicao);
}

.permissao-acao:hover {
    color: var(--cor-primaria-escura);
    text-decoration: underline;
}

.permissao-lista {
    border-top: 1px solid #f3f4f6;
}

.detalhe-campo {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detalhe-campo-rotulo {
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.detalhe-campo-valor {
    font-size: 14px;
    color: #1F2937;
}

.detalhe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--espaco-grande);
}

.detalhe-campo-longo .detalhe-campo-valor {
    line-height: 1.6;
    white-space: pre-wrap;
}

.grid-formulario {
    display: grid;
    /* As colunas vêm da variável setada no componente (não mais inline), para que o mobile
       consiga trocar por uma coluna só — ver o @media no fim deste arquivo. */
    grid-template-columns: var(--grid-colunas, 1fr 1fr 1fr);
    gap: var(--espaco-medio);
    align-items: end;
    margin-bottom: var(--espaco-grande);
}

.grid-formulario .campo-grupo {
    margin-bottom: 0;
    padding-bottom: 0;
}

.formulario-inline {
    display: flex;
    align-items: center;
    gap: var(--espaco-medio);
    /* Sem isto, a tabela que vem logo abaixo encosta no formulário. Cada página
       remendava com `mb-grande`, e quem esquecia (Tribuna, Expedientes) ficava colado. */
    margin-bottom: var(--espaco-grande);
}

.formulario-inline .campo-grupo {
    margin-bottom: 0;
    padding-bottom: 0;
}

.formulario-inline .botao {
    flex-shrink: 0;
}

.card-container {
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
    padding: var(--espaco-grande);
}

.campo-erro-relativo { position: relative; }
.campo-inline { margin-bottom: 0; padding-bottom: 0; }
.campo-pequeno { max-width: 100px; }
.campo-flex-1 { flex: 1; }
.campo-flex-2 { flex: 2; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--espaco-grande); align-items: start; }

body {
    font-family: var(--fonte-principal);
    font-size: var(--texto-base);
    color: #1f2937;
    background: var(--cor-fundo-secundario);
    min-height: 100vh;
    /* Piso da página: abaixo disto nada mais encolhe — o layout para de se deformar e a
       tela passa a rolar de lado. 320px é a menor largura real de celular em uso.
       O `overflow-x: hidden` que estava aqui fazia o oposto do que parecia: em vez de
       impedir o transbordo, ele o DECEPAVA — o conteúdo que passasse da largura ficava
       inalcançável, sem rolagem para chegar nele. Esconder não é caber. */
    min-width: 320px;
}

/* ============================================
   NAVBAR PRINCIPAL (topo escuro)
   ============================================ */

[x-cloak] { display: none !important; }

.navbar-main {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    height: 80px; background: var(--cor-primaria-escura);
    display: flex; align-items: center; padding: 0 24px;
}

.navbar-logo-link {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none;
}
.navbar-logo-icone { height: 64px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.navbar-logo-texto {
    font-family: var(--fonte-destaque);
    font-size: 32px; font-weight: 300; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.3);
    letter-spacing: 0.12em; text-transform: uppercase;
}

.navbar-spacer { flex: 1; }

.navbar-user { position: relative; height: 100%; display: flex; align-items: stretch; }

.btn-user {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 24px; border-radius: 0;
    background: none; border: none; color: #fff; cursor: pointer;
    font-family: var(--fonte-principal); transition: background var(--transicao);
    height: 100%;
}
.btn-user:hover { background: rgba(255,255,255,0.1); }
.btn-user-info { text-align: right; line-height: 1.25; }
.btn-user-nome { font-size: 13px; font-weight: 600; color: #fff; }
.btn-user-cargo { font-size: 10px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.05em; }
.btn-user-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: #fff;
}

.user-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: #fff; border-radius: var(--borda-raio);
    box-shadow: var(--sombra-elevada); min-width: 220px; z-index: 60;
    border: 1px solid #c5cad3; overflow: hidden;
}
.user-dropdown-header {
    padding: 16px; background: #f8fafc;
    display: flex; align-items: center; gap: 12px;
}
.user-dropdown-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--cor-primaria); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 600; flex-shrink: 0;
}
.user-dropdown-info { line-height: 1.3; }
.user-dropdown-nome { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.user-dropdown-cargo {
    font-size: 10px; color: #6b7280; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.user-dropdown-cpf { font-size: 11px; color: #999; margin-top: 2px; }
.user-dropdown-sep { height: 1px; background: #eee; }
.user-dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; margin: 4px 6px; font-size: 13px; color: #444;
    text-decoration: none; cursor: pointer; transition: background var(--transicao), color var(--transicao);
    border: none; background: none; width: calc(100% - 12px);
    font-family: var(--fonte-principal); text-align: left;
    border-radius: var(--borda-raio);
}
.user-dropdown-item:hover { background: #f3f4f6; color: var(--cor-primaria-escura); }
.user-dropdown-item.perigo:hover { background: #fef2f2; color: var(--cor-perigo); }

/* ============================================
   SUB-BARRA (breadcrumb)
   ============================================ */

.navbar-sub {
    position: fixed; top: 80px; left: 0; right: 0; z-index: 49;
    height: 36px; background: #fff; border-bottom: 1px solid #dde3ed;
    display: flex; align-items: center;
    padding: 0 16px;
}

.breadcrumb a:first-child {
    display: flex; align-items: center; justify-content: center;
    width: 68px; margin-left: -16px; height: 36px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 13px;
    color: #555;
    height: 100%;
}
.breadcrumb a {
    color: var(--cor-primaria-escura);
    text-decoration: none;
    display: flex;
    align-items: center;
    font-weight: 500;
}
.breadcrumb a:hover { color: var(--cor-primaria); }
.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-sep {
    color: #9ca3af;
    margin: 0 8px;
    flex-shrink: 0;
}
.breadcrumb-atual {
    color: var(--cor-neutra);
    font-weight: 400;
}

/* ============================================
   SIDEBAR
   ============================================ */

.nav-sidebar {
    position: fixed; left: 0; top: 116px; bottom: 0;
    width: 68px; background: #fff; border-right: 1px solid #dde3ed;
    /* Acima do conteúdo (paginação z-50 e afins): ao expandir no hover, o menu
       cobre a página em vez de deixá-la furar por cima. Abaixo dos modais/overlays. */
    z-index: 200; overflow: hidden;
    transition: width 0.32s cubic-bezier(.4,0,.2,1), box-shadow 0.32s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
}
.nav-sidebar:hover { width: 260px; box-shadow: 4px 0 16px rgba(0,0,0,0.06); }

.nav-items { overflow: hidden; flex: 1; padding-top: var(--espaco-pequeno); }

.nav-item {
    display: flex; align-items: center; gap: 0;
    padding: 12px 0; font-size: 13px; color: #444;
    text-decoration: none; transition: background var(--transicao);
    white-space: nowrap; justify-content: center; position: relative;
}
.nav-sidebar:hover .nav-item { justify-content: flex-start; padding: 11px 16px; gap: 12px; }
.nav-item:hover { background: #edf1f7; color: var(--cor-primaria-escura); }
.nav-item.ativo { color: var(--cor-primaria-escura); font-weight: 600; }
.nav-item.ativo::after {
    content: ''; position: absolute; right: 0; top: 4px; bottom: 4px;
    width: 3px; background: var(--cor-primaria); border-radius: 2px 0 0 2px;
}

.nav-item-icone {
    width: 100%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: width 0.32s cubic-bezier(.4,0,.2,1); color: #666;
}
.nav-sidebar:hover .nav-item-icone { width: 40px; }
.nav-item.ativo .nav-item-icone,
.nav-grupo-btn.ativo .nav-item-icone { color: var(--cor-primaria); }

.nav-item-label {
    max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap;
    transition: max-width 0.32s cubic-bezier(.4,0,.2,1), opacity 0.24s cubic-bezier(.4,0,.2,1);
}
.nav-sidebar:hover .nav-item-label { max-width: 180px; opacity: 1; }

.nav-grupo-btn {
    display: flex; align-items: center; gap: 0;
    padding: 12px 0; width: 100%;
    background: none; border: none; cursor: pointer;
    font-family: var(--fonte-principal); font-size: 13px; color: #444; font-weight: 500;
    text-align: left; transition: background var(--transicao);
    white-space: nowrap; justify-content: center; position: relative;
}
.nav-sidebar:hover .nav-grupo-btn { justify-content: flex-start; padding: 11px 16px; gap: 12px; }
.nav-grupo-btn:hover { background: #edf1f7; color: var(--cor-primaria-escura); }
.nav-grupo-btn.ativo { color: var(--cor-primaria-escura); font-weight: 600; }
.nav-grupo-btn.ativo::after {
    content: ''; position: absolute; right: 0; top: 4px; bottom: 4px;
    width: 3px; background: var(--cor-primaria); border-radius: 2px 0 0 2px;
}

.nav-grupo-seta {
    margin-left: auto; color: #555;
    max-width: 0; overflow: hidden; opacity: 0;
    transition: transform 0.32s cubic-bezier(.4,0,.2,1), max-width 0.32s cubic-bezier(.4,0,.2,1), opacity 0.24s cubic-bezier(.4,0,.2,1);
}
.nav-sidebar:hover .nav-grupo-seta { max-width: 20px; opacity: 1; }
.nav-grupo-btn.aberto .nav-grupo-seta { transform: rotate(180deg); }

.nav-grupo-filhos {
    background: #f4f7fb;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.32s cubic-bezier(.4,0,.2,1), opacity 0.24s cubic-bezier(.4,0,.2,1);
}
.nav-sidebar:hover .nav-grupo-filhos {
    max-height: 500px; opacity: 1;
}
.nav-subitem {
    display: block; padding: 10px 16px 10px 52px;
    font-size: 13px; color: #555; text-decoration: none;
    transition: background var(--transicao); position: relative;
}
.nav-subitem:hover { background: #edf1f7; color: var(--cor-primaria-escura); }
.nav-subitem.ativo { background: #dce6f5; color: var(--cor-primaria-escura); font-weight: 600; }
.nav-subitem.ativo::before {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0;
    width: 3px; background: var(--cor-primaria); border-radius: 2px 0 0 2px;
}

/* ============================================
   CONTEÚDO PRINCIPAL
   ============================================ */

.conteudo-principal {
    margin-top: 116px;
    margin-left: 68px;
    min-height: calc(100vh - 116px);
    padding: var(--espaco-grande);
}

@media (min-width: 1400px) {
    .conteudo-principal { padding: var(--espaco-grande) var(--espaco-extra); }
}

@media (min-width: 1800px) {
    .conteudo-principal { padding: var(--espaco-grande) var(--espaco-gigante); }
}

/* Botão-sanduíche: só existe no celular, onde a sidebar vira gaveta. */
.navbar-menu-botao {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    margin-right: var(--espaco-pequeno);
    background: none; border: none; border-radius: var(--borda-raio);
    color: #fff; cursor: pointer;
    transition: background var(--transicao);
}
.navbar-menu-botao:hover { background: rgba(255,255,255,0.12); }

/* Escurece a página atrás da gaveta e dá um alvo grande pra fechar. Começa em 116px, no
   pé da barra do topo: com `inset: 0` ele cobriria a própria barra e o botão de fechar
   ficaria embaixo dele, sem clique. */
.nav-gaveta-fundo {
    position: fixed;
    top: 116px; left: 0; right: 0; bottom: 0;
    z-index: 59;
    background: rgba(15, 23, 42, 0.45);
    border: none; padding: 0;
    cursor: pointer;
}

@media (max-width: 768px) {
    .conteudo-principal {
        margin-left: 0;
        padding: var(--espaco-medio);
    }

    .navbar-menu-botao { display: flex; }

    /* A sidebar era `display: none` aqui — o menu sumia e nada entrava no lugar: no
       celular o sistema tinha uma tela só. Agora ela vira gaveta, deslizando da
       esquerda. Sem `display: none`, os links seguem no DOM (leitor de tela e busca
       continuam achando), só saem de vista. */
    .nav-sidebar {
        display: flex;
        width: 260px;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(.4,0,.2,1);
        box-shadow: 4px 0 20px rgba(0,0,0,0.14);
    }
    .nav-sidebar-aberto { transform: translateX(0); }

    /* Em tela de toque NÃO existe hover: a sidebar do desktop abre de 68px pra 260px no
       `:hover`, o que no celular nunca dispararia — sobrariam ícones sem rótulo. Aqui
       ela já nasce expandida, e quem controla é o botão. */
    .nav-sidebar .nav-item,
    .nav-sidebar .nav-grupo-btn { justify-content: flex-start; padding: 11px 16px; gap: 12px; }
    .nav-sidebar .nav-item-icone { width: 40px; }
    .nav-sidebar .nav-item-label { max-width: 180px; opacity: 1; }
    .nav-sidebar .nav-grupo-seta { max-width: 20px; opacity: 1; }
    .nav-sidebar .nav-grupo-filhos { max-height: 500px; opacity: 1; }

    /* Nome + cargo espremiam a barra e quebravam em duas linhas. No celular fica só a
       inicial; o nome completo continua no dropdown, a um toque. */
    .btn-user-info { display: none; }
    .btn-user { padding: 10px 12px; }
    .navbar-logo-texto { font-size: 22px; }
    .navbar-logo-icone { height: 44px; }
    .navbar-main { padding: 0 12px; }
    /* Era `flex-direction: column`, herdando o `align-items: center` da regra base. Numa
       coluna, `center` encolhe cada campo até o conteúdo e o joga pro meio — daí os
       campos estreitos e tortos. E seis filtros um sob o outro viravam meia tela de
       rolagem só pra chegar na tabela.
       Vira grade: duas colunas quando cabem, uma quando não. `end` alinha pelo pé, então
       campo com rótulo e campo sem rótulo encostam na mesma linha. */
    /* Filtros e tabela NÃO ficam aqui: eles são definidos lá pela linha 3765+, e este
       bloco está na 645 — com a mesma especificidade, quem vem depois vence, então a
       regra base engoliria a daqui. As regras móveis deles vivem no fim do arquivo,
       depois das bases. Procure por "AJUSTES MÓVEIS TARDIOS". */
    .formulario-grid { grid-template-columns: 1fr !important; }
    .detalhe-grid { grid-template-columns: 1fr; }
    .cabecalho-pagina { flex-direction: column; align-items: flex-start; }
    .cabecalho-pagina-acoes { width: 100%; }
    .mesa-form-inline { flex-direction: column; }
    .abas-navegacao { overflow-x: auto; }
}

/* ============================================
   PÁGINA INÍCIO
   ============================================ */

.pagina-inicio {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-grande);
    padding-bottom: var(--espaco-extra);
}

.inicio-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-medio);
}

.inicio-saudacao {
    font-family: var(--fonte-destaque);
    font-size: var(--texto-grande);
    font-weight: 700;
    color: var(--cor-primaria-escura);
}

.inicio-camara { font-size: 14px; color: var(--cor-neutra); }
/* Era uma imagem solta no canto: sem moldura e sem alinhamento, parecia adesivo colado
   depois. Ganha a mesma linguagem dos cartões da página (raio 12, borda fina, sombra
   suave) e passa a ser um elemento da tela, não um enfeite flutuando. */
.inicio-brasao {
    width: 48px;
    height: 48px;
    object-fit: contain;
    box-sizing: content-box;
    flex-shrink: 0;
    padding: 7px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: var(--sombra-suave);
}

/* ---- Herói: o estado do plenário agora ---- */

/* Todos os heróis (repouso, sessão, votação) usam o mesmo tratamento claro: fundo
   branco, texto escuro, com a foto entrando como textura à direita — nunca como
   assunto — sob um véu branco. Duas camadas (foto ::before e véu ::after) para que o
   filtro de saturação atinja só a imagem. O conteúdo fica sempre sobre branco sólido. */
.inicio-heroi {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    padding: var(--espaco-extra);
    color: #1f2937;
    background: #fff;
    border: 1px solid #e5e7eb;
    min-height: 220px;
    box-shadow: var(--sombra-suave);
}

.inicio-heroi::before,
.inicio-heroi::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.inicio-heroi::before {
    background: url('/images/fundo/peq760710.webp') center right / cover no-repeat;
    filter: saturate(0.5);
}

.inicio-heroi::after {
    background: linear-gradient(
        100deg,
        #fff 0%,
        #fff 44%,
        rgba(255, 255, 255, 0.84) 62%,
        rgba(255, 255, 255, 0.52) 100%
    );
}

/* O conteúdo sobe acima das duas camadas. */
.inicio-heroi > * {
    position: relative;
    z-index: 1;
}

/* No celular não há coluna livre à direita: o véu desce de cima, e aí a metade
   inferior da foto fica exposta. Como a foto tem palavra escrita em inglês no
   miolo, aqui ela é recortada pela altura — só a faixa da direita (tule e mesa,
   sem texto) entra em cena. */
@media (max-width: 720px) {
    .inicio-heroi::before {
        background-position: center right;
        background-size: auto 140%;
    }

    .inicio-heroi::after {
        background: linear-gradient(
            180deg,
            #fff 0%,
            #fff 64%,
            rgba(255, 255, 255, 0.86) 100%
        );
    }
}

/* `flex-wrap` é a válvula: a pílula tem `nowrap` (frase curta não se parte no meio), então
   ela não encolhe — sem poder quebrar ENTRE os itens, a linha empurrava o cartão inteiro
   pra fora da tela e o texto ao lado era decepado. Quebrar entre pílula e tipo custa uma
   linha; não quebrar custa o layout. */
.heroi-topo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--espaco-pequeno) var(--espaco-medio);
    margin-bottom: var(--espaco-medio);
}

.heroi-selo {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-pequeno);
    padding: 5px 12px;
    border-radius: var(--borda-pilula);
    background: var(--cor-fundo-secundario);
    color: var(--cor-neutra);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ponto-pulsante {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cor-primaria);
    box-shadow: 0 0 0 0 rgba(26, 84, 191, 0.7);
    animation: pulsoVivo 1.8s infinite;
}

@keyframes pulsoVivo {
    70% { box-shadow: 0 0 0 8px rgba(26, 84, 191, 0); }
    100% { box-shadow: 0 0 0 0 rgba(26, 84, 191, 0); }
}

.heroi-sub { font-size: 13px; opacity: 0.8; }

.heroi-titulo {
    font-family: var(--fonte-destaque);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: var(--espaco-medio);
}

.heroi-linha {
    font-size: 15px;
    opacity: 0.92;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px var(--espaco-pequeno);
}

.heroi-percentual {
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--borda-pilula);
    background: var(--cor-fundo-secundario);
    color: var(--cor-neutra);
    font-size: 13px;
}

.heroi-placar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--espaco-medio);
    margin-bottom: var(--espaco-grande);
}

.placar-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--espaco-medio);
    border-radius: var(--borda-raio);
    background: var(--cor-fundo-secundario);
    border: 1px solid #e5e7eb;
    border-left: 3px solid transparent;
}

.placar-item strong { font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.placar-item span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
.placar-sim { border-left-color: #4ade80; }
.placar-nao { border-left-color: #f87171; }
.placar-abs { border-left-color: #cbd5e1; }
.placar-faltam { border-left-color: var(--cor-alerta); }

.heroi-progresso {
    height: 8px;
    border-radius: var(--borda-pilula);
    background: var(--cor-fundo-secundario);
    overflow: hidden;
    margin-top: var(--espaco-medio);
}

/* Cor chapada: degradê aqui é tinta que varia sem que o dado varie. Testamos com degradê
   e ficou pior — a barra ganhava um gradiente que não significava nada. */
.heroi-progresso-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--cor-primaria);
    transition: width 0.6s ease;
}

.heroi-progresso-legenda {
    display: block;
    margin-top: var(--espaco-pequeno);
    font-size: 12px;
    opacity: 0.75;
}

.heroi-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-medio);
    margin-top: var(--espaco-grande);
}

/* ---- Seções da tela inicial ---- */

.inicio-secao {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-medio);
}

/* O brasão da própria câmara, gigante e discreto, atrás dos números dela. Nenhum ícone
   genérico dá isso: aqui não é "um dashboard", é ESTA câmara — e como vem da
   configuração, cada cliente ganha o seu sem eu escolher nada.
   Ancorado à direita e dissolvido pela esquerda, igual ao [[Cabeçalho de Página]]: o texto
   sempre corre sobre a parte limpa.

   NOTA: tentei aqui uma faixa navy com os cartões brancos por cima — ficou pesado e foi
   descartado. A seção continua clara como o resto da página. */
.inicio-secao-institucional {
    position: relative;
    isolation: isolate;
}
.inicio-secao-brasao {
    position: absolute;
    top: -12px;
    right: -8px;
    width: 320px;
    bottom: -12px;
    z-index: -1;
    background-position: center right;
    background-repeat: no-repeat;
    background-size: contain;
    filter: saturate(0.35);
    opacity: 0.05;
    mask-image: linear-gradient(to left, #000 0, #000 40%, transparent 92%);
    -webkit-mask-image: linear-gradient(to left, #000 0, #000 40%, transparent 92%);
    pointer-events: none;
}

@media (max-width: 900px) {
    /* Numa tela estreita ele passaria por baixo do texto em vez de ficar na sobra. */
    .inicio-secao-brasao { display: none; }
}

/* O filete que corre do título até a margem é recurso de documento oficial e de
   editorial: estrutura a página e dá formalidade sem enfeitar. Um título solto sobre
   fundo cinza não separa nada — é só texto maior. */
.inicio-secao-titulo {
    display: flex;
    align-items: center;
    gap: var(--espaco-medio);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cor-primaria-escura);
}
.inicio-secao-titulo::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #cfdaee 0%, rgba(207, 218, 238, 0) 100%);
}

/* ---- Pendências: "o que você precisa fazer agora" ----
   Lido por quem lê pouco. Uma frase, um botão, cor e ícone reforçando o texto. */

.card-pendencia {
    display: flex;
    align-items: center;
    gap: var(--espaco-medio);
    padding: var(--espaco-medio) var(--espaco-grande);
    background: var(--cor-fundo);
    border: 1px solid #e5e7eb;
    border-left: 5px solid var(--cor-neutra);
    border-radius: 12px;
    box-shadow: var(--sombra-suave);
    transition: box-shadow var(--transicao), transform var(--transicao);
}

.card-pendencia:hover {
    box-shadow: var(--sombra-elevada);
    transform: translateY(-1px);
}

.pendencia-icone {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--borda-circulo);
    background: var(--cor-fundo-secundario);
    color: var(--cor-neutra);
}

.pendencia-texto {
    flex: 1 1 auto;
    min-width: 0;
}

.pendencia-titulo {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cor-primaria-escura);
}

.pendencia-descricao {
    margin-top: 2px;
    font-size: 14px;
    color: var(--cor-neutra);
    overflow-wrap: anywhere;
}

.pendencia-acao {
    flex: 0 0 auto;
    text-decoration: none;
}

.card-pendencia-alta { border-left-color: var(--cor-perigo); }
.card-pendencia-alta .pendencia-icone {
    background: #fee2e2;
    color: var(--cor-perigo);
    animation: pulsoPendencia 2.4s infinite;
}

.card-pendencia-media { border-left-color: var(--cor-alerta); }
.card-pendencia-media .pendencia-icone { background: #fef3c7; color: var(--cor-alerta); }

.card-pendencia-baixa { border-left-color: var(--cor-primaria); }
.card-pendencia-baixa .pendencia-icone { background: var(--cor-primaria-clara); color: var(--cor-primaria); }

@keyframes pulsoPendencia {
    0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
    70%  { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .card-pendencia-alta .pendencia-icone { animation: none; }
    .card-pendencia:hover { transform: none; }
}

/* No celular o botão vira a última linha, largo o bastante para o dedo. */
@media (max-width: 720px) {
    .card-pendencia {
        flex-wrap: wrap;
        padding: var(--espaco-medio);
    }
    .pendencia-texto { flex-basis: calc(100% - 52px - var(--espaco-medio)); }
    .pendencia-acao { flex-basis: 100%; }
    .pendencia-acao .botao { width: 100%; }
}

/* ---- Cartões de indicador ---- */

.inicio-metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--espaco-medio);
}

/* Mesma receita do cartão da próxima sessão, que é a régua estética do projeto. Era
   branco chapado, borda cinza neutra, raio 12 e SEM sombra em repouso — daí o ar de
   adesivo colado, não de cartão. O que muda:
   · o fundo não é branco puro, é um degradê quase imperceptível;
   · a borda é cinza AZULADO (#e8ecf3), não neutro — parente do azul da marca;
   · a sombra é azulada e profunda, e existe em repouso: é ela que dá corpo. */
.card-metrica {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--espaco-grande);
    background: linear-gradient(180deg, #ffffff 0%, #fafbfe 100%);
    border: 1px solid #e8ecf3;
    border-radius: 18px;
    /* DUAS camadas: uma curta e escura (o contato com a superfície) e uma longa e difusa
       (a luz do ambiente). Sombra de camada única sempre parece adesivo — é a de contato
       que convence o olho de que o cartão tem espessura.
       Peguei 0.09 emprestado do cartão da próxima sessão, mas lá ele fica sozinho sobre
       fundo claro; aqui, sobre cinza, 9% simplesmente não aparecia. */
    box-shadow:
        0 1px 2px rgba(13, 45, 110, 0.08),
        0 8px 24px rgba(13, 45, 110, 0.10);
    /* Segura a marca-d'água dentro do cartão. */
    overflow: hidden;
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}

/* MARCA-D'ÁGUA. O cartão era informação no topo e um vazio embaixo: correto e sem
   assunto. O próprio ícone, gigante e a 6% de opacidade, ocupa esse vazio e dá presença
   ao cartão PARADO — que é o que faltava; sombra e hover não resolvem isso.
   Mesma técnica do brasão no [[Cabeçalho de Página]] e da foto sob o véu no herói: já é
   o vocabulário da casa, não um enfeite novo. */
.metrica-marca-dagua {
    position: absolute;
    right: -14px;
    bottom: -22px;
    z-index: 0;
    opacity: 0.06;
    pointer-events: none;
    transform: rotate(-8deg);
    transition: opacity var(--transicao), transform var(--transicao);
}
.metrica-marca-dagua svg {
    width: 118px;
    height: 118px;
    /* O traço nasce grosso (feito para 20px); ampliado, viraria um borrão. */
    stroke-width: 1.1;
}
.card-metrica-link:hover .metrica-marca-dagua {
    opacity: 0.1;
    transform: rotate(-8deg) scale(1.05);
}

/* Tudo o que é conteúdo sobe acima da marca-d'água. A seta fica de fora desta lista de
   propósito: ela é `absolute`, e pôr `relative` aqui brigaria com o posicionamento dela —
   o z-index dela está na própria regra. */
.metrica-icone,
.metrica-valor,
.metrica-rotulo,
.metrica-dica,
.metrica-vazio,
.metrica-convite-acao { position: relative; z-index: 1; }

/* Segue a cor do acento do cartão, como o quadradinho do ícone: assim o verde/âmbar/azul
   existe no cartão inteiro, não só num selo de 44px. */
.metrica-marca-dagua-primaria { color: var(--cor-primaria); }
.metrica-marca-dagua-alerta   { color: #b45309; }
.metrica-marca-dagua-sucesso  { color: #15803d; }
.metrica-marca-dagua-neutra   { color: #4b5563; }

.card-metrica-link { text-decoration: none; color: inherit; }

.card-metrica-link:hover {
    transform: translateY(-3px);
    box-shadow:
        0 2px 4px rgba(13, 45, 110, 0.10),
        0 16px 40px rgba(13, 45, 110, 0.18);
    border-color: #c9d6ee;
}

/* O anel (`box-shadow` de spread, sem desfoque) dá um halo da própria cor do acento em
   volta do quadrado: separa o ícone do fundo e faz o acento existir além de um retângulo
   chapado. E o quadradinho cresce de 40 para 44 — ele é a marca do cartão. */
.metrica-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    margin-bottom: var(--espaco-medio);
    transition: box-shadow var(--transicao), transform var(--transicao);
}
.card-metrica-link:hover .metrica-icone { transform: scale(1.06); }

.metrica-icone-primaria { background: var(--cor-primaria-clara); color: var(--cor-primaria); box-shadow: 0 0 0 5px rgba(26, 84, 191, 0.07); }
.metrica-icone-alerta   { background: #fef3c7; color: #92400e; box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.10); }
.metrica-icone-sucesso  { background: #dcfce7; color: #15803d; box-shadow: 0 0 0 5px rgba(21, 128, 61, 0.08); }
.metrica-icone-neutra   { background: #f3f4f6; color: #4b5563; box-shadow: 0 0 0 5px rgba(75, 85, 99, 0.06); }

.metrica-valor {
    font-family: var(--fonte-destaque);
    font-size: 40px;
    font-weight: 700;
    /* O padrão-ouro aperta os números (-0.02em): solto, um numeral grande parece
       espaçado e mole; apertado, vira um bloco só e ganha peso. */
    letter-spacing: -0.02em;
    /* Navy da marca, não preto: o número é o assunto do cartão e deve pertencer à
       paleta. Preto puro num painel azul lê como texto de sistema. */
    color: var(--cor-primaria-escura);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

/* Navy + fonte de destaque, como o título do padrão-ouro: o rótulo é o assunto do
   cartão, não uma legenda cinza qualquer. */
.metrica-rotulo {
    font-family: var(--fonte-destaque);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cor-primaria-escura);
    /* Encolhe até o texto. O cartão é uma coluna flex, então por padrão o rótulo se
       esticaria pela largura toda — e o filete iria junto. É este `flex-start` que faz o
       traço poder medir o TEXTO. */
    align-self: flex-start;
}

/* Filete com a largura do rótulo: separa o número do nome dele. Sem ele, "4" e "Seus
   documentos" ficam colados e o olho lê como uma frase só. `100%` aqui é a largura do
   texto (não do cartão) graças ao `align-self` acima — antes eram 24px cravados, que não
   eram a medida de nada. Herda a cor do acento do cartão. */
/* Fio de 1px, não barra de 3: com 3px e cor cheia ele virava SUBLINHADO DO NÚMERO —
   colado embaixo do "4", parecia marca-texto. O respiro em cima é o que faz o traço
   pertencer ao rótulo abaixo e não ao número acima. */
/* As pontas dissolvem: o fio não "acaba", ele some. Cor chapada dá duas extremidades
   duras que parecem corte; o degradê tira o peso do traço sem tirar o traço.
   A esquerda desvanece só nos primeiros 8% — o suficiente pra amaciar a ponta sem
   desalinhar do começo do texto, que é a régua da coluna. */
.metrica-rotulo::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 12px;
    margin-bottom: 7px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--cor-traco, currentColor) 8%,
        var(--cor-traco, currentColor) 55%,
        transparent 100%
    );
    opacity: 0.45;
}
.metrica-dica { font-size: 12px; color: var(--cor-neutra); }

/* Cartão zerado vira convite usando o MESMO chassi e o MESMO hover dos demais: o que muda
   é o conteúdo, nunca a moldura. Antes ele tinha borda tracejada — convenção de
   placeholder, que lê como "inacabado" justo num cartão que deveria atrair — e trocava
   tracejado por sólido no hover, fazendo a moldura pular. Dois gestos diferentes na mesma
   página é o que faz uma tela parecer remendada. */

/* Ocupa o lugar do número, mas recuado: aqui o assunto é a ação, não a contagem. */
.metrica-vazio {
    font-family: var(--fonte-destaque);
    font-size: 19px;
    font-weight: 600;
    color: #9ca3af;
    line-height: 1.1;
}

/* Pílula da marca: cara de alvo, não de link solto no meio do cartão. */
.metrica-convite-acao {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin-top: var(--espaco-medio);
    padding: 7px 14px;
    border-radius: var(--borda-pilula);
    background: var(--cor-primaria-clara);
    font-size: 13px;
    font-weight: 600;
    color: var(--cor-primaria-escura);
    transition: background var(--transicao), color var(--transicao);
}
.card-metrica-convite:hover .metrica-convite-acao {
    background: var(--cor-primaria);
    color: #fff;
}
.metrica-convite-acao svg { transition: transform var(--transicao); }
.card-metrica-convite:hover .metrica-convite-acao svg { transform: translateX(3px); }

/* Vira um alvo redondo em vez de uma setinha solta no canto: no hover o círculo se tinge
   de azul e a seta embranquece — o cartão inteiro passa a parecer um botão. */
.metrica-seta {
    position: absolute;
    top: var(--espaco-grande);
    right: var(--espaco-grande);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    z-index: 1;
    border-radius: 50%;
    background: #f1f4f9;
    color: #9aa8bd;
    transition: transform var(--transicao), color var(--transicao), background var(--transicao);
}
/* Uma regra só. Havia duas com este mesmo seletor: a de baixo pintava a seta de AZUL e,
   por vir depois, vencia — seta azul dentro do círculo azul, ou seja, invisível. */
.card-metrica-link:hover .metrica-seta {
    background: var(--cor-primaria);
    color: #fff;
    transform: translateX(3px);
}

/* ---- Painéis de gráfico e listas ---- */

/* Colunas fixas, não `auto-fit`. Com `auto-fit` o navegador cria quantas colunas de
   320px couberem (três, num monitor largo) — e o card `.inicio-painel-largo`, que ocupa
   `1 / -1`, impede o colapso da coluna vazia. Sobrava um terço em branco à direita. */
.inicio-graficos {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--espaco-medio);
    align-items: stretch;
}

.inicio-listas {
    display: grid;
    /* Mesma proporção do grid de gráficos acima (1.35fr | 1fr) para a divisória
       das duas linhas coincidir — sem isso os 4 cards ficam "tortos". */
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--espaco-medio);
    align-items: stretch;
}

/* Cartão sozinho numa grade de duas colunas deixa metade da tela em branco. */
.inicio-graficos.inicio-grade-solo,
.inicio-listas.inicio-grade-solo {
    grid-template-columns: minmax(0, 1fr);
}

/* Mesma receita do cartão da próxima sessão (a régua estética) e dos cartões de métrica:
   degradê no lugar do branco chapado, borda cinza-azulada e sombra azulada em repouso.
   Sem isso os painéis eram retângulos brancos sobre fundo cinza — sem corpo, sem
   parentesco com o resto. */
.inicio-painel {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    border-color: #e8ecf3;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfe 100%);
    box-shadow: 0 12px 32px rgba(13, 45, 110, 0.09);
}

/* O painel estica junto com o vizinho mais alto da grade, então o aviso ficava colado no
   topo com um vazio enorme embaixo. Aqui ele toma a sobra e se centraliza nela. */
.inicio-painel .grafico-vazio {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* O reset global zera margin e padding, mas não o marcador da lista. */
.inicio-lista,
.rosca-legenda { list-style: none; }

/* A DIVISÓRIA. Sem ela, título e conteúdo eram só dois textos empilhados e o olho tinha
   de adivinhar onde um acaba e o outro começa. O fio responde isso de graça — e é o
   mesmo recurso de um cabeçalho de documento oficial: o assunto fica acima da linha, a
   matéria abaixo. */
.inicio-painel-cabecalho {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Colada no título (10px), não no meio do cartão: o fio pertence ao cabeçalho, e
       longe demais ele vira uma linha solta que não separa nada.
       E #dbe3f0 no lugar de #e8ecf3 — o anterior era quase o branco do cartão. */
    padding-bottom: 8px;
    margin-bottom: var(--espaco-medio);
    border-bottom: 1px solid #dbe3f0;
}

/* O subtítulo tinha `margin-bottom: 24px` de quando era o último item antes do gráfico.
   Dentro do cabeçalho essa margem sobrava e empurrava o fio pra longe do título — os
   24px dele mais o respiro daqui viravam 34px de vão. */
.inicio-painel-cabecalho .inicio-painel-sub { margin-bottom: 0; }

/* Fonte de destaque, navy e letra apertada — a tipografia do padrão-ouro. Em #111827
   e sem tratamento, o título lia como texto corrido dentro de uma caixa. */
.inicio-painel-titulo {
    font-family: var(--fonte-destaque);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cor-primaria-escura);
}

.inicio-painel-sub {
    font-size: 12px;
    color: var(--cor-neutra);
    margin-bottom: var(--espaco-grande);
}

.grafico-vazio {
    padding: var(--espaco-extra) 0;
    text-align: center;
    color: var(--cor-neutra);
    font-size: 14px;
}

/* ---- Gráfico de barras ---- */

/* A linha de base é o que transforma barras flutuando em GRÁFICO: sem ela, os blocos não
   se apoiam em nada. Fio de 1px, sólido e recuado — grade nunca compete com o dado. */
.grafico-barras {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: var(--espaco-pequeno);
    height: 180px;
    border-bottom: 1px solid #e8ecf3;
}

.grafico-barra-coluna {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    height: 100%;
}

.grafico-barra-valor {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    font-variant-numeric: tabular-nums;
}

/* 24px, não 46: o guia manda limitar a marca e deixar a sobra da faixa virar ar. Barra
   larga lê como bloco; barra fina lê como dado. O trilho é a referência do total
   (quantos vereadores existem), então fica um passo do fundo — nunca compete. */
.grafico-barra-trilho {
    flex: 1;
    width: 100%;
    max-width: 24px;
    display: flex;
    align-items: flex-end;
    background: #f1f4f9;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

/* Ponta arredondada em 4px, base RETA: a barra nasce da linha de base, não flutua. Com
   raio nos quatro cantos ela parecia uma pastilha solta no ar. */
.grafico-barra {
    width: 100%;
    border-radius: 4px 4px 0 0;
    transition: height 0.6s ease;
}

/* Cor chapada, não degradê. O guia é explícito: "blocos grossos e saturados leem alto,
   até infantis" — era exatamente o efeito PowerPoint. Degradê em barra é tinta que não
   é dado: ele varia sem que nada no dado varie. */
.grafico-barra-alerta   { background: var(--cor-alerta); }
.grafico-barra-primaria { background: var(--cor-primaria); }

.grafico-barra-rotulo { font-size: 11px; color: var(--cor-neutra); white-space: nowrap; }

/* ---- Rosca ---- */

/* Anel CENTRALIZADO e sozinho, com o número dentro — o layout da referência. Antes era
   `grid-template-columns: 160px 1fr`: anel espremido à esquerda e legenda ao lado, o que
   fazia o anel virar um detalhe num canto em vez de ser o assunto do painel.
   A legenda desce para baixo dele: sem ela, cor vira a única identidade das fatias, e o
   público desta tela não decifra cor. */
.grafico-rosca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaco-grande);
}

/* O anel só precisa ser `relative` para o número se ancorar nele — não na caixa toda. */
.rosca-figura {
    position: relative;
    flex-shrink: 0;
}

.rosca-svg { display: block; width: 168px; height: 168px; transform: rotate(-90deg); }
.rosca-trilho { fill: none; stroke: #eef2f8; stroke-width: 10; }

/* Ponta arredondada, como na referência: o arco termina em pingo, não em guilhotina.
   A espessura tem que casar com a constante ESPESSURA do GraficoRosca.jsx — é ela que
   entra na conta da folga entre fatias. Mudar aqui sem mudar lá faz as fatias se
   sobreporem ou abrirem um vão grande demais. */
.rosca-fatia {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease;
}

/* `inset: 26%` prende o conteúdo dentro do buraco do anel. O `left: 80px` cravado que
   estava aqui era metade da largura antiga: mudar o tamanho do anel desalinhava o número
   silenciosamente. */
/* `inset: 15%` acompanha o buraco real do anel (~70% do SVG). Estava em 26%, que apertava
   a caixa a ~48% e o `overflow: hidden` cortava o "100%" no meio — virava "00%". O buraco
   comporta o número; não é preciso recortá-lo. */
.rosca-centro {
    position: absolute;
    inset: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    pointer-events: none;
}

.rosca-centro-valor {
    display: block;
    font-family: var(--fonte-destaque);
    font-size: 32px;
    font-weight: 700;
    /* Navy da marca e letra apertada, como os números dos cartões — o miolo é o assunto
       do gráfico, não texto de sistema. */
    letter-spacing: -0.02em;
    color: var(--cor-primaria-escura);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.rosca-centro-rotulo { font-size: 11px; color: var(--cor-neutra); text-transform: uppercase; letter-spacing: 0.05em; }

/* Horizontal, sob o anel: em coluna ao lado ela disputava o espaço com o gráfico. */
.rosca-legenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--espaco-pequeno) var(--espaco-grande);
}
.rosca-legenda li { display: flex; align-items: center; gap: var(--espaco-pequeno); font-size: 13px; }
.rosca-legenda-cor { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.rosca-legenda-rotulo { flex: 1; color: #374151; }
.rosca-legenda-valor { font-weight: 700; color: #111827; font-variant-numeric: tabular-nums; }

/* ---- Listas ---- */

.inicio-lista { display: flex; flex-direction: column; }
.inicio-lista li + li { border-top: 1px solid #f1f5f9; }

.inicio-lista-link {
    display: flex;
    align-items: center;
    gap: var(--espaco-medio);
    padding: 12px 0;
    text-decoration: none;
    color: inherit;
    transition: padding-left var(--transicao);
}

a.inicio-lista-link:hover { padding-left: 6px; }

.inicio-lista-data {
    font-weight: 700;
    color: var(--cor-primaria);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    min-width: 48px;
}

.inicio-lista-titulo {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inicio-lista-placar {
    font-size: 13px;
    font-weight: 700;
    color: var(--cor-neutra);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
    .inicio-graficos,
    .inicio-listas { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .heroi-placar { grid-template-columns: repeat(2, 1fr); }
    /* As regras móveis da rosca ANTIGA moravam aqui (left: 50%; top: 80px) — eram de
       quando o centro era posicionado na mão a partir da grade 160px+legenda. No layout
       novo (anel centralizado, centro por `inset` ancorado na .rosca-figura) elas
       EMPURRAVAM o número pra fora do anel no celular. O layout novo já é responsivo
       por natureza; não precisa de regra móvel nenhuma. */
}

@media (prefers-reduced-motion: reduce) {
    .ponto-pulsante { animation: none; }
    .heroi-progresso-fill,
    .grafico-barra,
    .rosca-fatia { transition: none; }
}

/* ============================================
   TELA DE LOGIN — Split Layout
   ============================================ */

.corpo-login {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.login-split {
    display: flex;
    min-height: 100vh;
}

/* A marca precisa escalar pelo PAINEL, não pela viewport: o formulário ocupa 480px
   fixos, então este painel vale `100vw - 480px`. Medir em `vw` fazia a marca crescer
   mais rápido do que o espaço disponível e ser cortada pelo `overflow: hidden`.
   `container-type: inline-size` transforma o painel na régua — e aí a mesma regra
   serve para o layout lado a lado e para o empilhado do celular.
   As duplicatas em `vw` logo acima de cada `cqw` são o retrato para navegador antigo
   sem container query: quem entende `cqw` usa a segunda e ignora a primeira. */
.login-branding {
    flex: 1;
    min-width: 0;
    container-type: inline-size;
    background: linear-gradient(135deg, var(--cor-primaria-escura) 0%, var(--cor-primaria) 50%, #2e6fd4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.login-branding-conteudo {
    z-index: 2;
    padding: 0 var(--espaco-extra);
    max-width: 100%;
}

/* UMA RÉGUA SÓ. Este `font-size` não pinta texto nenhum: é a unidade do conjunto.
   Título e logo abaixo são medidos em `em` sobre ela, então a proporção entre os dois
   é fixa por construção — some a chance de deformar. Antes cada um tinha seu próprio
   fator (6vw x 16vw), e a razão entre eles mudava conforme a tela: isso era o defeito.

   A conta: o conjunto ocupa ~33em de largura (título ~22.4em + folga + logo 8.9em), e o
   painel tem 64px de respiro. Logo, a unidade que cabe é (largura do painel - 64) / 33. */
.login-marca {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.5em;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    /* O teto era 26px: em tela cheia o painel chega a ~1440px, a régua batia no
       teto e a marca parava de crescer num campo quase o dobro — era ESSE o
       "vazio" das telas grandes. Manter a proporção LINEAR da janela pequena
       pedia 40px, mas aí a marca gritava: a distância do olho não cresce junto
       com o monitor. 32px é o meio-termo calibrado no olho — preenche a tela
       cheia sem dominar; acima disso (ultrawide) segura. */
    font-size: clamp(7px, calc((100vw - 544px) / 33), 32px);
    font-size: clamp(7px, calc((100cqw - 64px) / 33), 32px);
}

/* A coluna tem EXATAMENTE a largura de "PLENÁRIA" — sem número mágico. `min-content`
   pega a menor largura possível de cada filho: como o título é `nowrap`, a dele é o
   texto inteiro; a da descrição é só a maior palavra. Vence o título, e a descrição
   passa a quebrar dentro dessa largura.
   É isso que cola o 360 no nome e faz o traço parar onde o título acaba. Antes eu tentei
   cravar 19.5em: chutei a medida pra menos, o título (nowrap) vazou a coluna e foi parar
   por baixo do logo. O navegador mede melhor que eu. */
.login-marca-texto {
    display: grid;
    grid-template-columns: min-content;
    align-self: center;
    /* NÃO pôr `min-width: 0` aqui: isso autoriza a coluna a encolher abaixo do conteúdo,
       e como o título é `nowrap` ele não encolhe junto — vaza da coluna e vai parar
       debaixo do 360. O mínimo automático é justamente o que segura o texto no lugar. */
    /* Encara o título com o miolo do círculo. Era 35px cravado — um abismo quando a
       logo encolhia. Em `em`, acompanha o conjunto. */
    padding-top: 1.3em;
}

.login-marca-logo {
    align-self: center;
}

.login-titulo {
    font-family: var(--fonte-destaque);
    font-size: 3.3em;
    font-weight: 300;
    color: #fff;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    /* Sem isto o título herda entrelinha ~1.2: sobra um colchão invisível embaixo das
       letras que afastava o traço. Como é caixa alta e uma linha só, 1 cola exato. */
    line-height: 1;
}

/* 8.9em contra 3.3em do título = a mesma proporção (~1:2.7) que a tela de PC já tinha
   e que ficou boa. Agora ela vale em TODOS os tamanhos, não só num ponto. */
.login-icone-branca {
    height: 8.9em;
    width: auto;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.2));
    flex-shrink: 0;
}

/* Espaçamentos em `em` da régua: o conjunto respira proporcional ao próprio tamanho.
   Eram 16px cravados, que no celular viravam um vão enorme perto de um título de 36px. */
.login-separador {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(255,255,255,0.4), rgba(255,255,255,0.05));
    margin-top: 0.45em;
}

/* Acompanha o conjunto (0.62em), mas com piso de legibilidade: isto é texto pra ler, não
   parte do desenho da marca. Sem o piso, num painel estreito cairia para ~7px. */
.login-descricao {
    /* O teto acompanha o da régua (0.62 × 32 ≈ 20): descrição e marca crescem juntas. */
    font-size: clamp(11px, 0.62em, 20px);
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 0.06em;
    line-height: 1.7;
    text-align: center;
    /* Quem limita a largura agora é a coluna (.login-marca-texto), travada no tamanho
       do título; aqui a descrição só preenche e quebra dentro dela. */
    max-width: 100%;
    margin-top: 0.6em;
}

/* "PLENÁRIA" é palavra única e não quebra: lado a lado, o título come ~2/3 da largura e
   sobra pouco pro 360. Abaixo de 460px de painel isso força a marca a um tamanho ridículo
   muito ANTES de deixar de caber — daí subir a logo em vez de insistir na lateral.
   Empilhada, o conjunto precisa só da largura do título, então a régua rende mais (÷20
   em vez de ÷33). O teto de 13px casa com o tamanho que o lado a lado tem em 460px, pra
   não dar um salto na hora da virada. */
@container (max-width: 460px) {
    .login-marca {
        grid-template-columns: auto;
        justify-items: center;
        font-size: clamp(9px, calc((100cqw - 48px) / 20), 13px);
    }
    .login-marca-logo { order: 1; }
    .login-marca-texto { order: 2; padding-top: 0.7em; }
}

/* ============================================
   COMPONENTE GLOBAL — Nevoa
   Vapor tom sobre tom derivando sobre painéis
   de cor sólida (login e capa do portal). Três
   camadas — duas de luz, uma de sombra — cada
   uma com deriva própria, pra nunca repetir a
   cena. Anima SÓ transform: o blur vira camada
   composta na GPU e o custo por quadro é de
   compositor, não repaint — roda liso até em
   PC modesto de câmara.
   ============================================ */

.nevoa {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.nevoa-camada {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(64px);
    will-change: transform;
}

.nevoa-camada-1 {
    width: 58%;
    top: -14%;
    left: -12%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.19), transparent 72%);
    animation: nevoa-deriva-1 38s ease-in-out infinite alternate;
}

.nevoa-camada-2 {
    width: 72%;
    top: 26%;
    right: -22%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.14), transparent 70%);
    animation: nevoa-deriva-2 52s ease-in-out infinite alternate;
}

.nevoa-camada-3 {
    width: 60%;
    bottom: -20%;
    left: 12%;
    background: radial-gradient(closest-side, rgba(9, 27, 64, 0.42), transparent 72%);
    animation: nevoa-deriva-3 45s ease-in-out infinite alternate;
}

@keyframes nevoa-deriva-1 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(14%, 10%) scale(1.14); }
}

@keyframes nevoa-deriva-2 {
    from { transform: translate(0, 0) scale(1.1); }
    to   { transform: translate(-12%, -8%) scale(1); }
}

@keyframes nevoa-deriva-3 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(10%, -9%) scale(1.18); }
}

/* Variante "faixa": banner LARGO e BAIXO (a capa do portal). As bolhas do
   padrão são medidas em % da largura e quadradas — numa faixa baixa elas
   ficam mais altas que ela, transbordam, e o que sobra é uma fatia central
   uniforme: véu chapado, sem estrutura nem movimento perceptível. Aqui são
   elipses menores (altura fixa em % da faixa) que ATRAVESSAM na horizontal,
   que é a dimensão em que uma faixa tem espaço para o olho notar a deriva. */
.nevoa-faixa .nevoa-camada {
    aspect-ratio: auto;
    height: 175%;
    filter: blur(70px);
}

/* Alfas mais densos que os do login: o gradiente do herói é bem mais forte
   que o do painel de acesso, e o véu calibrado lá desaparecia aqui. */
.nevoa-faixa .nevoa-camada-1 {
    width: 32%;
    top: -38%;
    left: 1%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.30), transparent 74%);
    animation: nevoa-faixa-1 34s ease-in-out infinite alternate;
}

.nevoa-faixa .nevoa-camada-2 {
    width: 38%;
    top: -22%;
    left: auto;
    right: 5%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.24), transparent 74%);
    animation: nevoa-faixa-2 46s ease-in-out infinite alternate;
}

.nevoa-faixa .nevoa-camada-3 {
    width: 34%;
    bottom: -48%;
    left: 36%;
    background: radial-gradient(closest-side, rgba(6, 20, 52, 0.52), transparent 74%);
    animation: nevoa-faixa-3 40s ease-in-out infinite alternate;
}

/* Deriva horizontal generosa: metade da própria largura, ~200px de percurso.
   Numa faixa baixa é o eixo X que tem estrada suficiente pra se perceber. */
@keyframes nevoa-faixa-1 {
    from { transform: translateX(0) scale(1); }
    to   { transform: translateX(62%) scale(1.16); }
}

@keyframes nevoa-faixa-2 {
    from { transform: translateX(0) scale(1.12); }
    to   { transform: translateX(-58%) scale(1); }
}

@keyframes nevoa-faixa-3 {
    from { transform: translateX(0) scale(1); }
    to   { transform: translateX(-46%) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
    .nevoa-camada { animation: none; }
}

/* Partículas animadas */
.login-particula {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.login-particula-1 {
    width: 300px; height: 300px;
    border: 2px solid rgba(255,255,255,0.12);
    top: -80px; left: -80px;
    animation: flutuar 20s infinite;
}

.login-particula-2 {
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    bottom: 10%; right: 5%;
    animation: flutuar 25s 3s infinite;
}

.login-particula-3 {
    width: 80px; height: 80px;
    background: rgba(255,255,255,0.08);
    top: 20%; left: 15%;
    animation: subir 18s 1s infinite;
}

.login-particula-4 {
    width: 120px; height: 120px;
    border: 2px solid rgba(255,255,255,0.1);
    bottom: 25%; left: 10%;
    animation: flutuar 22s 5s infinite;
}

.login-particula-5 {
    width: 60px; height: 60px;
    background: rgba(255,255,255,0.07);
    top: 60%; right: 20%;
    animation: subir 15s 2s infinite;
}

.login-particula-6 {
    width: 400px; height: 400px;
    border: 2px solid rgba(255,255,255,0.06);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: pulsar 12s infinite;
}

.login-particula-7 {
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    top: 15%; right: 10%;
    animation: rotacionar 30s 4s infinite linear;
}

.login-particula-8 {
    width: 160px; height: 160px;
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    bottom: 5%; left: 30%;
    animation: rotacionar 35s 2s infinite linear;
}

@keyframes flutuar {
    0%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
    25% { opacity: 1; transform: translate(20px, -30px) scale(1.05); }
    50% { opacity: 0.7; transform: translate(-15px, 20px) scale(0.95); }
    75% { opacity: 1; transform: translate(10px, -10px) scale(1.02); }
}

@keyframes subir {
    0%, 100% { opacity: 0; transform: translateY(0); }
    20% { opacity: 0.8; }
    50% { opacity: 0.5; transform: translateY(-80px); }
    80% { opacity: 0.8; }
}

@keyframes pulsar {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.2); }
}

@keyframes rotacionar {
    0% { opacity: 0.5; transform: rotate(0deg); }
    50% { opacity: 1; }
    100% { opacity: 0.5; transform: rotate(360deg); }
}

/* Duas faixas: o formulário fica na de cima (que come a sobra e o centraliza), o rodapé
   na de baixo. Antes o rodapé era `absolute` em `bottom: 24px`: numa tela curta ele
   entrava na área do conteúdo e sentava em cima do "Conexão segura". Em fluxo normal
   isso não tem como acontecer — a faixa de cima nunca encolhe além do conteúdo. */
.login-formulario-lado {
    /* Era 480px cravado: em tela cheia a coluna branca ficava esmagada perto
       do painel azul gigante. 31vw é a MESMA proporção que 480px tem num
       notebook (~1550px); em telas maiores a coluna cresce junto, até 640px.
       Notebook e menores não mudam: lá o clamp fica no piso de 480px. */
    width: clamp(480px, 31vw, 640px);
    flex-shrink: 0;
    background: var(--cor-fundo);
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    padding: var(--espaco-gigante) var(--espaco-extra);
    position: relative;
}

.login-formulario-container {
    width: 100%;
    /* Cresce junto com a coluna (mesma régua 480→31vw), senão o formulário
       flutuaria pequeno num corredor branco largo. */
    max-width: clamp(340px, 22vw, 420px);
    align-self: center;
}

.login-boas-vindas {
    margin-bottom: var(--espaco-grande);
}

.login-boas-vindas h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--cor-primaria-escura);
    margin-bottom: var(--espaco-micro);
}

.login-boas-vindas p {
    font-size: 14px;
    color: var(--cor-neutra);
}

.login-erro {
    background: #fef2f2;
    border-left: 3px solid var(--cor-perigo);
    border-radius: 0 var(--borda-raio) var(--borda-raio) 0;
    padding: var(--espaco-pequeno) var(--espaco-medio);
    margin-bottom: var(--espaco-medio);
}

.login-erro p {
    color: var(--cor-perigo);
    font-size: var(--texto-pequeno);
    margin: 2px 0;
}

.login-campo {
    margin-bottom: var(--espaco-medio);
    position: relative;
}

.login-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--cor-neutra);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.login-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-icone {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.login-input {
    width: 100%;
    padding: 14px 14px 14px 44px;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
    font-family: var(--fonte-principal);
    font-size: 15px;
    color: #1f2937;
    background: #f9fafb;
    transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
    outline: none;
}

.login-input-erro {
    border-color: var(--cor-perigo) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.login-input:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(26, 84, 191, 0.1);
    background: #fff;
}

.login-input::placeholder {
    color: #c0c4cc;
}

.login-toggle-senha {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color var(--transicao);
}

.login-toggle-senha:hover {
    color: var(--cor-primaria);
}

.login-botao {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--cor-primaria-escura), var(--cor-primaria));
    color: #fff;
    border: none;
    border-radius: var(--borda-raio);
    font-family: var(--fonte-principal);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: box-shadow var(--transicao), transform var(--transicao);
    margin-top: var(--espaco-pequeno);
}

.login-botao:hover {
    box-shadow: 0 4px 14px rgba(13, 45, 110, 0.35);
    transform: translateY(-1px);
}

.login-botao:active {
    transform: translateY(0);
    box-shadow: none;
}

.login-botao-carregando {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.login-primeiro-acesso {
    text-align: center;
    margin-top: var(--espaco-grande);
}

.login-primeiro-acesso a {
    font-size: 13px;
    color: var(--cor-primaria);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transicao);
}

.login-primeiro-acesso a:hover {
    color: var(--cor-primaria-escura);
    text-decoration: underline;
}

.login-info-seguranca {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--espaco-grande);
    color: #b0b5be;
    font-size: 11px;
    letter-spacing: 0.03em;
}

.login-rodape {
    align-self: end;
    padding-top: var(--espaco-grande);
    text-align: center;
    color: #c0c4cc;
    font-size: 11px;
}

@media (max-width: 768px) {
    .login-split {
        flex-direction: column;
    }

    .login-branding {
        padding: var(--espaco-extra) var(--espaco-medio);
        min-height: 260px;
    }

    /* Sem teto próprio de propósito: a régua da regra base já mede pela largura do
       painel, e aqui o painel é `flex: 1` numa coluna — ele CRESCE e toma a sobra
       vertical, então não há altura curta pra proteger. O teto de 11px que existia aqui
       só fazia a marca renderizar na metade do que cabia.
       (A regra original mirava `.login-icone`, classe que não existe no JSX — é
       `login-icone-branca`. Nunca chegou a valer.) */

    .login-formulario-lado {
        width: 100%;
        padding: var(--espaco-extra) var(--espaco-grande);
    }
}

/* ============================================
   MODAL DE EXPIRAÇÃO DE SESSÃO (Art. 12-A)
   ============================================ */

.sessao-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 99999;
}

.sessao-modal {
    background: var(--cor-fundo);
    border-radius: 12px;
    box-shadow: var(--sombra-elevada);
    width: 100%; max-width: 400px;
    padding: var(--espaco-extra);
    text-align: center;
}

.sessao-modal-icone {
    color: var(--cor-alerta);
    margin-bottom: var(--espaco-medio);
}

.sessao-modal-titulo {
    font-size: 18px; font-weight: 700;
    color: #1a1a1a;
    margin-bottom: var(--espaco-pequeno);
}

.sessao-modal-texto {
    font-size: 14px; color: #555;
    line-height: 1.5;
    margin-bottom: var(--espaco-grande);
}

.sessao-modal-contador {
    color: var(--cor-perigo);
    font-size: 16px;
}

.sessao-modal-barra-container {
    width: 100%; height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin-bottom: var(--espaco-grande);
    overflow: hidden;
}

.sessao-modal-barra {
    height: 100%;
    background: linear-gradient(90deg, var(--cor-perigo), var(--cor-alerta));
    border-radius: 2px;
    transition: width 1s linear;
}

.sessao-modal-botao {
    width: 100%; padding: 14px;
    background: var(--cor-primaria-escura);
    color: #fff; border: none;
    border-radius: var(--borda-raio);
    font-family: var(--fonte-principal);
    font-size: 14px; font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transicao);
}

.sessao-modal-botao:hover {
    background: var(--cor-primaria);
}

/* ============================================
   ÁTOMO: BOTÃO (Art. 4º, 5º-I, 6º-A)
   ============================================ */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-pequeno);
    padding: 10px 20px;
    min-height: 44px;
    border: 2px solid transparent;
    border-radius: var(--borda-raio);
    font-family: var(--fonte-principal);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background var(--transicao), box-shadow var(--transicao), transform var(--transicao), border-color var(--transicao);
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
}

.botao-primario {
    background: var(--cor-primaria);
    color: #fff;
    border-color: var(--cor-primaria);
}
.botao-primario:hover {
    background: var(--cor-primaria-escura);
    border-color: var(--cor-primaria-escura);
    box-shadow: 0 2px 8px rgba(26, 84, 191, 0.3);
}

.botao-secundario {
    background: #fff;
    color: #444;
    border-color: #b0b7c3;
}
.botao-secundario:hover {
    background: var(--cor-fundo-secundario);
    border-color: #9ca3af;
}

.botao-sucesso {
    background: var(--cor-primaria);
    color: #fff;
    border-color: var(--cor-primaria);
}
.botao-sucesso:hover {
    background: var(--cor-primaria-escura);
    border-color: var(--cor-primaria-escura);
    box-shadow: 0 2px 8px rgba(26, 84, 191, 0.3);
}

.botao-perigo {
    background: var(--cor-perigo);
    color: #fff;
    border-color: var(--cor-perigo);
}
.botao-perigo:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.botao-alerta {
    background: var(--cor-alerta);
    color: #fff;
    border-color: var(--cor-alerta);
}
.botao-alerta:hover {
    background: #b45309;
    border-color: #b45309;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}

.botao-fantasma {
    background: transparent;
    color: var(--cor-primaria);
    border-color: transparent;
}
.botao-fantasma:hover {
    background: var(--cor-primaria-clara);
}

.botao-contorno {
    background: transparent;
    color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}
.botao-contorno:hover {
    background: var(--cor-primaria);
    color: #fff;
}

.botao-excluir {
    background: transparent;
    color: var(--cor-neutra);
    border-color: transparent;
}
.botao-excluir:hover {
    background: #fef2f2;
    color: var(--cor-perigo);
}

/* No cabeçalho de página o botão fica sobre a marca-d'água do brasão e o texto cinza
   sumia; um fundo branco com borda leve dá superfície limpa (vira um contorno ao lado
   do botão azul). */
.cabecalho-pagina-acoes .botao-excluir {
    background: #fff;
    border-color: #d0d5dd;
    color: #4b5563;
}
.cabecalho-pagina-acoes .botao-excluir:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: var(--cor-perigo);
}

.botao-cancelar {
    background: transparent;
    color: var(--cor-neutra);
    border-color: transparent;
}
.botao-cancelar:hover {
    background: var(--cor-fundo-secundario);
    color: #374151;
}

.botao-pequeno {
    padding: 6px 12px;
    font-size: 12px;
    min-height: 32px;
}

.botao-grande {
    padding: 14px 28px;
    font-size: 16px;
    min-height: 52px;
}

.botao-bloco {
    width: 100%;
}

.botao-desabilitado {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.botao-carregando {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

.botao-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: girar 0.6s linear infinite;
}

.botao-icone {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

/* ============================================
   ÁTOMO: BADGE (Art. 4º, 5º-I, 14-E-VII)
   ============================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--borda-pilula);
    font-family: var(--fonte-principal);
    font-size: var(--texto-pequeno);
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.3;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-retangular {
    border-radius: var(--borda-raio);
}

.badge-pequeno {
    padding: 2px 8px;
    font-size: 10px;
}

.badge-aprovado {
    background: #dcfce7;
    color: #166534;
}

.badge-rejeitado {
    background: #fee2e2;
    color: #991b1b;
}

.badge-em-pauta {
    background: #fef3c7;
    color: #92400e;
}

.badge-arquivado {
    background: #f3f4f6;
    color: #6b7280;
}

.badge-em-votacao {
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
    animation: pulsar-badge 2s ease-in-out infinite;
}

@keyframes pulsar-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.badge-rascunho {
    background: #f3f4f6;
    color: #9ca3af;
    border: 1px dashed #d1d5db;
}

.formulario-senha-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.aviso-senha-provisoria {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: var(--borda-raio);
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}

.senha-forca {
    margin-top: 12px;
}
.senha-forca-topo {
    display: flex;
    align-items: center;
    gap: 12px;
}
.senha-forca-barra {
    flex: 1;
    height: 5px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}
.senha-forca-nivel {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease, background 0.5s ease;
}
.senha-forca-label {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    min-width: 45px;
    text-align: right;
}
.senha-forca-nivel.senha-forca-fraca { background: var(--cor-perigo); }
.senha-forca-nivel.senha-forca-media { background: var(--cor-alerta); }
.senha-forca-nivel.senha-forca-forte { background: var(--cor-sucesso); }
.senha-forca-label.senha-forca-fraca { color: var(--cor-perigo); }
.senha-forca-label.senha-forca-media { color: var(--cor-alerta); }
.senha-forca-label.senha-forca-forte { color: var(--cor-sucesso); }
.senha-forca-falta {
    display: block;
    font-size: 12px;
    color: var(--cor-neutra);
    margin-top: 6px;
}

.badge-info {
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
}

.badge-icone {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ============================================
   ÁTOMO: CAMPO DE TEXTO (Art. 4º, 5º-I, 14-E-V)
   ============================================ */

.campo-grupo {
    margin-bottom: var(--espaco-medio);
}

.campo-rotulo {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.campo-obrigatorio {
    color: var(--cor-perigo);
    margin-left: 4px;
    font-size: 0;
}
.campo-obrigatorio::after {
    content: '✱';
    font-size: 12px;
}

.campo-texto {
    width: 100%;
    padding: 10px 14px;
    min-height: 44px;
    border: 1px solid #b0b7c3;
    border-radius: var(--borda-raio);
    font-family: var(--fonte-principal);
    font-size: 14px;
    color: #1f2937;
    background: #fff;
    transition: border-color var(--transicao), box-shadow var(--transicao);
    outline: none;
}

.campo-texto:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(26, 84, 191, 0.1);
}

.campo-texto::placeholder {
    color: #9ca3af;
}

.campo-texto-compacto {
    padding: 6px 10px;
    min-height: 36px;
    font-size: 13px;
}

.campo-texto-destaque {
    border-width: 2px;
    border-color: var(--cor-primaria-clara);
    background: #fafbff;
}
.campo-texto-destaque:focus {
    border-color: var(--cor-primaria);
    background: #fff;
}

.campo-texto-erro {
    border-color: var(--cor-perigo);
}
.campo-texto-erro:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.campo-texto-desabilitado {
    background: var(--cor-fundo-secundario);
    color: #9ca3af;
    cursor: not-allowed;
}

.campo-erro {
    font-size: 11px;
    color: var(--cor-perigo);
    margin-top: 2px;
    position: absolute;
    left: 0;
}

.campo-grupo {
    position: relative;
    padding-bottom: 4px;
}

.campo-dica {
    font-size: 12px;
    color: var(--cor-neutra);
    margin-top: 4px;
}

/* Dica que ORIENTA sem bloquear: a ação já foi concluída, isto é um
   conselho para melhorar o resultado (ex.: brasão de baixa resolução). */
.campo-dica-atencao {
    margin-top: 10px;
    padding: 9px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--borda-raio);
    color: #92400e;
}

.campo-contador {
    font-size: 12px;
    font-weight: 400;
    color: var(--cor-neutra);
}

.campo-contador-limite {
    color: var(--cor-perigo);
    font-weight: 600;
}

/* ============================================
   ÁTOMO: SELECT CUSTOMIZADO (Art. 4º, 5º-I, 7º-A)
   ============================================ */

.select-custom {
    position: relative;
}

.select-custom-botao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    min-height: 44px;
    border: 1px solid #b0b7c3;
    border-radius: var(--borda-raio);
    font-family: var(--fonte-principal);
    font-size: 14px;
    color: #1f2937;
    background: #fff;
    cursor: pointer;
    transition: border-color var(--transicao), box-shadow var(--transicao);
    outline: none;
    text-align: left;
}
.select-custom-botao:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(26, 84, 191, 0.1);
}

.select-custom-erro .select-custom-botao {
    border-color: var(--cor-perigo);
}
.select-custom-erro .select-custom-botao:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.select-custom-desabilitado .select-custom-botao {
    background: var(--cor-fundo-secundario);
    color: #9ca3af;
    cursor: not-allowed;
}

.select-custom-texto {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-custom-placeholder {
    color: #9ca3af;
}

.select-custom-seta {
    flex-shrink: 0;
    color: #9ca3af;
    transition: transform var(--transicao);
}
.select-custom-seta-fechada {
    transform: rotate(180deg);
}

.select-custom-dropdown {
    position: fixed;
    z-index: 3000;
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
    box-shadow: var(--sombra-elevada);
    overflow: hidden;
}

.select-custom-buscando {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(26, 84, 191, 0.1);
}

.select-custom-input-busca {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--fonte-principal);
    font-size: 14px;
    color: #1f2937;
    background: transparent;
    min-width: 0;
    padding: 0;
    height: auto;
    line-height: inherit;
}
.select-custom-input-busca::placeholder {
    color: #9ca3af;
}

.select-custom-seta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

.select-custom-lista {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    max-height: 220px;
    overflow-y: auto;
}

.select-custom-opcao {
    padding: 10px 14px;
    margin: 0 6px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    border-radius: var(--borda-raio);
    transition: background var(--transicao), color var(--transicao);
}
.select-custom-opcao:hover,
.select-custom-opcao.select-custom-opcao-focada {
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
}
.select-custom-opcao.select-custom-opcao-ativa {
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
    font-weight: 600;
}
.select-custom-opcao.select-custom-opcao-ativa:hover,
.select-custom-opcao.select-custom-opcao-ativa.select-custom-opcao-focada {
    background: #d0e1fd;
    color: var(--cor-primaria-escura);
}

/* "Limpar seleção": desfaz a escolha e volta ao placeholder. Fica discreto e
   separado das opções de verdade — é uma ação, não mais um item da lista. */
.select-custom-limpar {
    color: var(--cor-neutra);
    font-size: 13px;
    font-style: italic;
    border-bottom: 1px solid #eef0f3;
    border-radius: var(--borda-raio) var(--borda-raio) 0 0;
    margin-bottom: 4px;
    padding-bottom: 12px;
}
.select-custom-limpar:hover {
    background: var(--cor-fundo-secundario);
    color: var(--cor-perigo);
}

.select-custom-vazio {
    padding: 16px 14px;
    font-size: 13px;
    color: var(--cor-neutra);
    text-align: center;
}

/* ============================================
   FILTROS ATIVOS (fichinhas do que está filtrando)
   ============================================ */
/* Mora dentro do mesmo cartão da tabela, logo acima dela: a ficha fica colada ao
   resultado que descreve. O `min-height` reserva o espaço da faixa — a ficha tem 28px
   e o texto do estado vazio tem ~18px; sem o piso, ligar um filtro empurraria a tabela
   pra baixo a cada clique. */
.filtros-ativos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espaco-pequeno);
    min-height: 30px;
    margin-bottom: var(--espaco-medio);
    padding-bottom: var(--espaco-medio);
    border-bottom: 1px solid #eef0f3;
}

.filtros-ativos-vazio {
    font-size: 13px;
    color: #9ca3af;
}

.filtros-ativos-titulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--cor-neutra);
}

.filtro-ficha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #c9dcfb;
    border-radius: var(--borda-pilula);
    background: var(--cor-primaria-clara);
    font-family: var(--fonte-principal);
    font-size: 13px;
    color: var(--cor-primaria-escura);
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}

.filtro-ficha-rotulo { opacity: 0.75; }
.filtro-ficha-valor { font-weight: 600; }
.filtro-ficha-x { flex-shrink: 0; opacity: 0.6; }

/* Some com o filtro ao clicar — o vermelho avisa que a ficha é o botão de remover. */
.filtro-ficha:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: var(--cor-perigo);
}
.filtro-ficha:hover .filtro-ficha-x { opacity: 1; }

.filtros-ativos-limpar {
    border: none;
    background: none;
    padding: 5px 6px;
    font-family: var(--fonte-principal);
    font-size: 13px;
    font-weight: 600;
    color: var(--cor-neutra);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transicao);
}
.filtros-ativos-limpar:hover { color: var(--cor-perigo); }

/* Compatibilidade com filtros da listagem */
.sessoes-filtros .select-custom-botao {
    height: 42px;
    padding: 0 14px;
    font-size: 14px;
}

/* ============================================
   ÁTOMO: CAMPO DATA (Art. 4º, 5º-I, 7º-A)
   ============================================ */

.campo-data-wrapper {
    position: relative;
}

.campo-data-wrapper .campo-texto {
    padding-right: 44px;
    cursor: pointer;
}

.campo-data-icone {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 0 var(--borda-raio) var(--borda-raio) 0;
    transition: color var(--transicao);
}
.campo-data-icone:hover { color: var(--cor-primaria); }

.campo-data-calendario {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    background: #fff;
    border-radius: var(--borda-raio);
    border: 1px solid #c5cad3;
    box-shadow: var(--sombra-elevada);
    padding: var(--espaco-medio);
    width: 300px;
    max-width: calc(100vw - 16px);
}

/* O componente vira o calendário para dentro quando ele estouraria a viewport.
   As medidas (300px de largura, ~340px de altura) vivem em CampoData.jsx. */
.campo-data-calendario-direita {
    left: auto;
    right: 0;
}
.campo-data-calendario-acima {
    top: auto;
    bottom: calc(100% + 6px);
}

.calendario-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--espaco-medio);
}

.calendario-mes-ano {
    font-size: 15px;
    font-weight: 700;
    color: var(--cor-primaria-escura);
}

.calendario-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: #6b7280;
    border-radius: var(--borda-raio);
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}
.calendario-nav:hover {
    background: var(--cor-fundo-secundario);
    color: var(--cor-primaria-escura);
}

.calendario-semana {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.calendario-dia-semana {
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    color: #c5cad3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 0;
}

.calendario-dias {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendario-dia {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border: none;
    background: none;
    font-family: var(--fonte-principal);
    font-size: 13px;
    color: #374151;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}
.calendario-dia:hover {
    background: #e8f0fe;
    color: var(--cor-primaria-escura);
}
.calendario-dia.vazio {
    cursor: default;
}
.calendario-dia.vazio:hover {
    background: none;
}
.calendario-dia.fora-mes {
    color: #d1d5db;
    cursor: pointer;
}
.calendario-dia.fora-mes:hover {
    background: #f3f4f6;
    color: #9ca3af;
}
.calendario-dia.hoje {
    font-weight: 700;
    background: #e8f0fe;
    color: var(--cor-primaria);
}
.calendario-dia.selecionado {
    background: var(--cor-primaria);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(26, 84, 191, 0.3);
}
.calendario-dia.selecionado:hover {
    background: var(--cor-primaria-escura);
    color: #fff;
}

.calendario-rodape {
    display: flex;
    justify-content: space-between;
    margin-top: var(--espaco-pequeno);
    padding-top: var(--espaco-pequeno);
    border-top: 1px solid #f3f4f6;
}

.calendario-acao {
    background: none;
    border: none;
    font-family: var(--fonte-principal);
    font-size: 13px;
    font-weight: 600;
    color: var(--cor-neutra);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--borda-raio);
    transition: color var(--transicao), background var(--transicao);
}
.calendario-acao:hover {
    color: var(--cor-primaria-escura);
    background: var(--cor-fundo-secundario);
}
.calendario-acao-hoje {
    color: var(--cor-primaria);
}
.calendario-acao-hoje:hover {
    color: var(--cor-primaria-escura);
}

/* ============================================
   COMPONENTE: SELETOR DE HORA
   ============================================ */

.relogio-picker {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #c5cad3;
    box-shadow: var(--sombra-elevada);
    width: 280px;
    overflow: hidden;
}

.relogio-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: var(--espaco-medio);
    background: var(--cor-primaria-escura);
}

.relogio-display-num {
    font-size: 32px;
    font-weight: 700;
    font-family: var(--fonte-destaque);
    color: rgba(255, 255, 255, 0.5);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--borda-raio);
    transition: color var(--transicao);
}
.relogio-display-ativo {
    color: #fff;
}
.relogio-display-num:hover {
    color: rgba(255, 255, 255, 0.8);
}
.relogio-display-sep {
    font-size: 32px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
}

.relogio-face {
    position: relative !important;
    width: 240px !important;
    height: 240px !important;
    margin: var(--espaco-medio) auto !important;
    border-radius: 50% !important;
    background: var(--cor-fundo-secundario) !important;
    display: block !important;
}

.relogio-centro {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--cor-primaria);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.relogio-ponteiro {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 2px;
    background: var(--cor-primaria);
    transform-origin: bottom center;
    z-index: 1;
    border-radius: 2px;
}

.relogio-num {
    position: absolute !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: none !important;
    border-radius: 50% !important;
    font-family: var(--fonte-principal) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    cursor: pointer !important;
    transform: translate(-50%, -50%) !important;
    transition: all var(--transicao) !important;
    padding: 0 !important;
    z-index: 3 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.relogio-num:hover {
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
}
.relogio-num-ativo {
    background: var(--cor-primaria) !important;
    color: #fff !important;
    font-weight: 700;
}
.relogio-num-interior {
    font-size: 11px;
    color: #9ca3af;
    width: 28px;
    height: 28px;
}

.relogio-rodape {
    display: flex;
    justify-content: space-between;
    padding: var(--espaco-pequeno) var(--espaco-medio);
    border-top: 1px solid #f3f4f6;
}

/* ============================================
   COMPONENTE: CAMPO DE ARQUIVO
   ============================================ */

.campo-arquivo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--espaco-grande);
    border: 2px dashed #b0b7c3;
    border-radius: var(--borda-raio);
    background: #fafbff;
    cursor: pointer;
    transition: border-color var(--transicao), background var(--transicao);
    text-align: center;
}
.campo-arquivo-area:hover {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria-clara);
}
.campo-arquivo-arrastando {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria-clara);
}

.campo-arquivo-icone {
    color: var(--cor-neutra);
    margin-bottom: var(--espaco-pequeno);
}

.campo-arquivo-texto {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.campo-arquivo-dica {
    font-size: 12px;
    color: var(--cor-neutra);
    margin: 4px 0 0;
}

.campo-arquivo-selecionado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid #b0b7c3;
    border-radius: var(--borda-raio);
    background: #fff;
}

.campo-arquivo-info {
    display: flex;
    align-items: center;
    gap: var(--espaco-pequeno);
    color: var(--cor-primaria);
}

.campo-arquivo-nome {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    display: block;
}

.campo-arquivo-tamanho {
    font-size: 12px;
    color: var(--cor-neutra);
}

.campo-arquivo-remover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--cor-perigo);
    cursor: pointer;
    border-radius: var(--borda-raio);
    transition: background var(--transicao);
}
.campo-arquivo-remover:hover {
    background: #fef2f2;
}

/* ============================================
   ÁTOMO: AVATAR (Art. 4º, 5º-I, 14-E-III)
   ============================================ */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    object-fit: cover;
}

.avatar-pequeno {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.avatar-medio {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

.avatar-grande {
    width: 80px;
    height: 80px;
    font-size: 24px;
}

.avatar-circulo {
    border-radius: var(--borda-circulo);
}

.avatar-quadrado {
    border-radius: var(--borda-raio);
}

.avatar-iniciais {
    background: var(--cor-primaria);
    color: #fff;
    font-weight: 600;
    font-family: var(--fonte-principal);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* ============================================
   SPLASH DE ENTRADA (logo animada no login)
   ============================================ */

.overlay-entrada {
    position: fixed;
    inset: 0;
    z-index: 3000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.overlay-entrada-saindo { animation: overlayEntradaSai 0.5s ease forwards; }
@keyframes overlayEntradaSai { to { opacity: 0; visibility: hidden; } }

/* A faixa azul do login cresce da esquerda até cobrir a tela — mesmo gradiente do painel
   de marca do login (.login-branding), dando continuidade entre entrar e ser recebido. */
.overlay-entrada-fundo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: linear-gradient(135deg, var(--cor-primaria-escura) 0%, var(--cor-primaria) 50%, #2e6fd4 100%);
    /* 480px é a largura fixa do formulário de login (.login-formulario-lado): o azul
       começa exatamente na divisa e cresce para a direita até cobrir tudo. */
    clip-path: inset(0 480px 0 0);
    animation: overlayCresce 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
@keyframes overlayCresce { to { clip-path: inset(0 0 0 0); } }

/* No mobile o login empilha (branding em cima, form embaixo): não há divisa lateral,
   então o azul cobre direto. */
@media (max-width: 768px) {
    .overlay-entrada-fundo { clip-path: inset(0 0 0 0); animation: none; }
}

.overlay-entrada-caixa {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaco-medio);
    text-align: center;
}

.overlay-entrada-titulo {
    font-family: var(--fonte-destaque);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
    opacity: 0;
    animation: overlayBemVindo 0.7s ease 1.4s both;
}
.overlay-entrada-sub {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.82);
    opacity: 0;
    animation: overlayBemVindo 0.7s ease 1.6s both;
}
@keyframes overlayBemVindo {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Logo de boas-vindas: desenha, preenche, dá um pop e o brilho varre no final ----
   (baseada na animação fornecida pelo usuário). Branca, como no login. A classe `play`
   no wrapper dispara. */
.overlay-logo { width: 260px; }
.overlay-logo svg { width: 100%; height: auto; display: block; overflow: visible; }

.overlay-logo .p {
    fill: #ffffff !important;
    stroke: #ffffff !important;
    fill-opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.overlay-logo .grp {
    animation: lgSettle 1.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: 56px 55px;
}
@keyframes lgSettle {
    0%   { transform: scale(0.5) rotate(-12deg); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes lgDraw       { to { stroke-dashoffset: 0; } }
@keyframes lgFillin     { 0% { fill-opacity: 0; } 100% { fill-opacity: 1; } }
@keyframes lgPop        { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes lgFadestroke { to { stroke-opacity: 0; } }

.overlay-logo .p {
    animation:
        lgDraw       0.9s  cubic-bezier(0.65, 0, 0.35, 1)    both,
        lgFillin     0.55s ease-out                          both,
        lgPop        0.5s  cubic-bezier(0.34, 1.56, 0.64, 1) both,
        lgFadestroke 0.4s  ease-out                          both;
}

.overlay-logo .p1 { animation-delay: 0s,    0.75s, 0.75s, 1.1s;  }
.overlay-logo .p2 { animation-delay: 0.09s, 0.84s, 0.84s, 1.19s; }
.overlay-logo .p3 { animation-delay: 0.18s, 0.93s, 0.93s, 1.28s; }
.overlay-logo .p4 { animation-delay: 0.27s, 1.02s, 1.02s, 1.37s; }
.overlay-logo .p5 { animation-delay: 0.36s, 1.11s, 1.11s, 1.46s; }
.overlay-logo .p6 { animation-delay: 0.45s, 1.2s,  1.2s,  1.55s; }
.overlay-logo .p7 { animation-delay: 0.54s, 1.29s, 1.29s, 1.64s; }
.overlay-logo .p8 { animation-delay: 0.63s, 1.38s, 1.38s, 1.73s; }
.overlay-logo .p9 { animation-delay: 0.7s,  1.45s, 1.45s, 1.8s;  }

@keyframes lgShine {
    0%   { transform: translateX(-90px) rotate(18deg); }
    100% { transform: translateX(160px) rotate(18deg); }
}
.overlay-logo .shine {
    animation: lgShine 0.9s ease-in-out 2.1s both;
}

/* A regra global de movimento reduzido zera a duração de TODA animação. Este boas-vindas
   é único e breve (uma logo se desenhando, sem loop nem parallax), então reafirmamos as
   durações para ele tocar mesmo assim — senão a logo apareceria estática. */
@media (prefers-reduced-motion: reduce) {
    .overlay-entrada-fundo { animation-duration: 0.6s !important; }
    .overlay-logo .grp { animation-duration: 1.6s !important; }
    .overlay-logo .p { animation-duration: 0.9s, 0.55s, 0.5s, 0.4s !important; }
    .overlay-logo .shine { animation-duration: 0.9s !important; }
    .overlay-entrada-titulo,
    .overlay-entrada-sub { animation-duration: 0.7s !important; }
    .overlay-entrada-saindo { animation-duration: 0.5s !important; }
}

/* ============================================
   OVERLAY DE CARREGAMENTO (loader global)
   Logo "Segmentos" (opção 6 da galeria): cada peça acende em sequência, como o
   spinner do iOS. Loop infinito — serve pra carregamentos de qualquer duração.
   ============================================ */
.overlay-carregando {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: carregandoEntra 0.2s ease;
}

/* Preenche só o container pai (que deve ter position: relative) em vez da tela toda. */
.overlay-carregando-contido {
    position: absolute;
    z-index: 20;
}

/* Fundo mais leve, deixa a tela por baixo mais visível. */
.overlay-carregando-transparente { background: rgba(255, 255, 255, 0.6); }

@keyframes carregandoEntra { from { opacity: 0; } to { opacity: 1; } }

.overlay-carregando-logo { width: 88px; }
.overlay-carregando-logo svg { width: 100%; height: auto; display: block; overflow: visible; }

/* O brilho e o traço só existem para a animação de desenho do boas-vindas; aqui a
   animação é outra, então some com eles. */
.overlay-carregando-logo .shine { display: none; }

/* Variante 6 — Segmentos: cada peça pisca em sequência circular. */
.overlay-carregando-logo .p {
    stroke-opacity: 0;
    fill-opacity: 0.22;
    transform-box: fill-box;
    transform-origin: center;
    animation: carregandoSegmento 1.35s linear infinite;
}
@keyframes carregandoSegmento {
    0%   { fill-opacity: 1; }
    30%  { fill-opacity: 0.22; }
    100% { fill-opacity: 0.22; }
}
.overlay-carregando-logo .p1 { animation-delay: -0s;    }
.overlay-carregando-logo .p2 { animation-delay: -0.15s; }
.overlay-carregando-logo .p3 { animation-delay: -0.3s;  }
.overlay-carregando-logo .p4 { animation-delay: -0.45s; }
.overlay-carregando-logo .p5 { animation-delay: -0.6s;  }
.overlay-carregando-logo .p6 { animation-delay: -0.75s; }
.overlay-carregando-logo .p7 { animation-delay: -0.9s;  }
.overlay-carregando-logo .p8 { animation-delay: -1.05s; }
.overlay-carregando-logo .p9 { animation-delay: -1.2s;  }

.overlay-carregando-texto {
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--cor-neutra);
    animation: carregandoRespira 1.8s ease-in-out infinite;
}
@keyframes carregandoRespira { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* Sem movimento: logo estática, cheia, sem piscar. */
@media (prefers-reduced-motion: reduce) {
    .overlay-carregando-logo .p { animation: none; fill-opacity: 1; }
    .overlay-carregando-texto { animation: none; opacity: 1; }
    .overlay-carregando { animation: none; }
}

/* ============================================
   MOLÉCULA: MODAL (Art. 4º, 5º-II, 14-E)
   ============================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--espaco-grande);
}

.modal {
    background: var(--cor-fundo);
    border-radius: 12px;
    box-shadow: var(--sombra-elevada);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-conteudo {
    background: var(--cor-fundo);
    border-radius: 12px;
    box-shadow: var(--sombra-elevada);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.modal-pequeno { max-width: 400px; }
.modal-medio { max-width: 600px; }
.modal-grande { max-width: 900px; }

.mandato-modal-cabecalho {
    display: flex;
    align-items: center;
    gap: var(--espaco-medio);
    padding: var(--espaco-grande);
    border-bottom: 1px solid #e5e7eb;
}
/* X de fechar. Some quando o modal não pode ser dispensado (troca de senha). */
.modal-fechar {
    margin-left: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--cor-neutra);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.modal-fechar:hover {
    background: #f3f4f6;
    color: #1f2937;
}
.modal-fechar:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
}
.mandato-modal-foto {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    flex-shrink: 0;
    border: 2px solid #e5e7eb;
}
.mandato-modal-icone {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mandato-modal-titulo {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}
.mandato-modal-subtitulo {
    font-size: 13px;
    color: var(--cor-neutra);
    margin-top: 2px;
}
.vereador-afastado {
    opacity: 0.7;
}
.vereador-afastado .avatar-tabela {
    filter: grayscale(100%);
}
.vereador-afastado .vereador-nome-linha {
    color: var(--cor-neutra);
}

.afastamento-opcoes {
    padding: 0;
}
.afastamento-opcao {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: none;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    font-family: var(--fonte-principal);
    font-size: 14px;
    color: #374151;
    text-align: left;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}
.afastamento-opcao:hover {
    background: #fef2f2;
    color: var(--cor-perigo);
}
.afastamento-opcao:last-child {
    border-bottom: none;
}

.mandato-modal-corpo {
    /* O modal trava em 90vh (flex column); sem isto o corpo estourava a altura e o
       conteúdo era cortado na borda da tela, sem rolagem. flex:1 + min-height:0 deixam
       o corpo encolher dentro do modal e rolar internamente; o cabeçalho fica fixo. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--espaco-grande);
}
.modal-corpo-sem-padding {
    padding: 0;
}
.mandato-modal-acoes {
    display: flex;
    justify-content: flex-end;
    gap: var(--espaco-pequeno);
    padding: var(--espaco-medio) var(--espaco-grande);
    border-top: 1px solid #e5e7eb;
    background: var(--cor-fundo-secundario);
    border-radius: 0 0 12px 12px;
}

.modal-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--espaco-medio) var(--espaco-grande);
    border-bottom: 1px solid #e5e7eb;
}

.modal-titulo {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.modal-fechar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #4B5563;
    border-radius: var(--borda-raio);
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    transition: background var(--transicao), color var(--transicao);
}
.modal-fechar:hover {
    background: #e5e7eb;
    color: #1F2937;
    border-color: #d1d5db;
}

.modal-acoes {
    display: flex;
    justify-content: flex-end;
    gap: var(--espaco-medio);
    padding: var(--espaco-medio) var(--espaco-grande);
    border-top: 1px solid var(--cor-borda);
}

.modal-corpo {
    padding: var(--espaco-grande);
    overflow-y: auto;
    flex: 1;
}

.modal-rodape {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--espaco-pequeno);
    padding: var(--espaco-medio) var(--espaco-grande);
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}

.modal-transicao-entrada {
    transition: opacity var(--transicao);
}
.modal-transicao-saida {
    transition: opacity var(--transicao);
}

/* ============================================
   MOLÉCULA: ALERTA (Art. 4º, 5º-II, 14-E-VII)
   ============================================ */


/* ============================================
   MOLÉCULA: TOAST (Art. 4º, 5º-II, 7º-A)
   ============================================ */

.toast-container {
    position: fixed;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--espaco-pequeno);
    pointer-events: none;
    max-width: 420px;
    width: 100%;
}

.toast-topo-direita {
    top: 24px;
    right: 24px;
}

.toast-topo-app {
    top: 128px;
    right: 24px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #fff;
    border-radius: var(--borda-raio);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    border-left: 4px solid;
    pointer-events: auto;
    position: relative;
    overflow: hidden;
}

.toast-sucesso { border-color: var(--cor-sucesso); }
.toast-erro { border-color: var(--cor-perigo); }
.toast-aviso { border-color: var(--cor-alerta); }
.toast-info { border-color: var(--cor-primaria); }

.toast-sucesso .toast-icone { color: var(--cor-sucesso); }
.toast-erro .toast-icone { color: var(--cor-perigo); }
.toast-aviso .toast-icone { color: var(--cor-alerta); }
.toast-info .toast-icone { color: var(--cor-primaria); }

.toast-icone {
    display: flex;
    flex-shrink: 0;
    margin-top: 1px;
}

.toast-conteudo {
    flex: 1;
    min-width: 0;
}

.toast-conteudo {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toast-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
}

.toast-mensagem {
    font-size: 13px;
    color: #555;
    line-height: 1.3;
}

.toast-fechar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: #9ca3af;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: var(--borda-raio);
    transition: color var(--transicao), background var(--transicao);
    font-size: 18px;
}
.toast-fechar:hover {
    color: #374151;
    background: var(--cor-fundo-secundario);
}

.toast-progresso {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    opacity: 0.25;
    animation: toast-progresso 4.5s linear forwards;
    width: 100%;
    border-radius: 0 0 12px 12px;
}

@keyframes toast-progresso {
    from { width: 100%; }
    to { width: 0%; }
}

.toast-entrando {
    animation: toast-entrar var(--transicao) forwards;
}

.toast-saindo {
    animation: toast-sair var(--transicao) forwards;
}

@keyframes toast-entrar {
    0% { opacity: 0; transform: translateX(24px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes toast-sair {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-8px); }
}

/* ============================================
   MOLÉCULA: ABAS (Art. 4º, 5º-II, 7º-A)
   ============================================ */

.abas-navegacao {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e5e7eb;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.abas-item {
    padding: 12px 20px;
    font-family: var(--fonte-principal);
    font-size: 14px;
    font-weight: 500;
    color: var(--cor-neutra);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transicao), border-color var(--transicao);
}
.abas-item:hover {
    color: var(--cor-primaria);
}
.abas-item-ativo {
    color: var(--cor-primaria-escura);
    font-weight: 700;
    border-bottom-color: var(--cor-primaria);
}

.abas-painel {
    padding: var(--espaco-grande) 0;
}

/* ============================================
   MOLÉCULA: CABEÇALHO DE PÁGINA (Art. 4º, 5º-II)
   ============================================ */

.cabecalho-pagina {
    position: relative;
    /* SEM overflow: hidden — ele decapitava o dropdown "Alterar Status", que abre para
       fora do cartão. O hidden só existia para arredondar os cantos da marca-d'água, e
       isso o próprio brasão faz com border-radius: inherit (logo abaixo). */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-grande);
    padding: var(--espaco-grande);
    background: #fff;
    border-radius: var(--borda-raio);
    border: 1px solid #c5cad3;
    margin-bottom: var(--espaco-grande);
    flex-wrap: wrap;
}

/* Brasão da câmara como marca-d'água GIGANTE à direita — mesma ideia da foto do dash:
   preenche a metade direita e o véu branco apaga para a esquerda. O brasão é quase
   quadrado num cabeçalho baixo, então sangra por cima e por baixo (vê-se uma faixa
   grande dele). Fica atrás do conteúdo (o título e os botões ficam por cima). */
.cabecalho-pagina-brasao {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Herda o raio do cartão: sem isto os cantos da marca-d'água ficariam quadrados por
       cima dos cantos arredondados (papel que antes era do overflow: hidden do pai). */
    border-radius: inherit;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: auto 500%;
    filter: saturate(0.5);
    opacity: 0.16;
    /* A imagem é desenhada uma vez (no-repeat) e tem largura fixa (~520px com auto 500%).
       Máscara em PIXELS, alinhada a essa largura, para a imagem dissolver exatamente na
       própria borda esquerda — sem divisa visível, em qualquer largura de tela. */
    -webkit-mask-image: linear-gradient(to left, #000 0, #000 60px, transparent 560px);
    mask-image: linear-gradient(to left, #000 0, #000 60px, transparent 560px);
    pointer-events: none;
}

/* O conteúdo fica acima da marca-d'água. */
.cabecalho-pagina-info,
.cabecalho-pagina-acoes {
    position: relative;
    z-index: 1;
}

.cabecalho-pagina-info {
    display: flex;
    align-items: center;
    gap: var(--espaco-medio);
    min-width: 0;
}

.cabecalho-pagina-voltar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #6B7280;
    transition: background var(--transicao), color var(--transicao);
    flex-shrink: 0;
}

.cabecalho-pagina-voltar:hover {
    background: var(--cor-fundo-secundario);
    color: var(--cor-primaria);
}

.cabecalho-pagina-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura));
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(26, 84, 191, 0.25);
}

.cabecalho-pagina-icone svg {
    width: 26px;
    height: 26px;
}

.cabecalho-pagina-textos {
    min-width: 0;
}

.cabecalho-pagina-titulo {
    font-family: var(--fonte-destaque);
    font-size: var(--texto-grande);
    font-weight: 700;
    color: var(--cor-primaria-escura);
    margin: 0;
    line-height: 1.2;
}

.cabecalho-pagina-subtitulo {
    font-size: 14px;
    color: var(--cor-neutra);
    margin: 4px 0 0;
    line-height: 1.4;
}

.cabecalho-pagina-acoes {
    display: flex;
    align-items: center;
    gap: var(--espaco-pequeno);
    flex-shrink: 0;
    flex-wrap: wrap;
    align-self: center;
}

@media (max-width: 768px) {
    .cabecalho-pagina {
        flex-direction: column;
        align-items: flex-start;
    }

    .cabecalho-pagina-acoes {
        width: 100%;
    }
}

/* ============================================
   PÁGINA: SESSÕES PLENÁRIAS — LISTAGEM
   ============================================ */

.pagina-sessoes,
.pagina-detalhe,
.pagina-formulario {
    max-width: 100%;
}

.sessoes-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--espaco-grande);
    flex-wrap: wrap;
    gap: var(--espaco-medio);
}

.sessoes-filtros {
    display: flex;
    gap: var(--espaco-medio);
    margin-bottom: var(--espaco-grande);
    flex-wrap: wrap;
    align-items: center;
}

.sessoes-filtros .campo-grupo {
    flex: 1;
    min-width: 160px;
    margin-bottom: 0;
}

.sessoes-filtros .campo-texto,
.sessoes-filtros .select {
    height: 42px;
    padding: 0 14px;
    font-size: 14px;
}

/* Era `overflow: hidden`: em tela estreita a tabela ficava mais larga que o cartão e as
   últimas colunas eram DECEPADAS — sem rolagem, ninguém chegava nelas. Agora rola na
   horizontal dentro do próprio cartão, e a página nunca rola de lado. */
.sessoes-tabela-container {
    background: #fff;
    border-radius: var(--borda-raio);
    border: 1px solid #c5cad3;
    overflow-x: auto;
}

/* Sem um piso, o navegador tenta caber espremendo tudo e "Acesso à página" vira três
   linhas de uma palavra. Melhor rolar de lado do que ler em tiras. */
.sessoes-tabela {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 14px;
}

.sessoes-tabela th {
    padding: 14px 16px;
    text-align: center;
    font-weight: 600;
    color: var(--cor-primaria-escura);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f8f9fb;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    border-right: 1px solid #f1f5f9;
}
.sessoes-tabela th:last-child { border-right: none; }

.th-ordenavel {
    cursor: pointer;
    user-select: none;
    transition: background var(--transicao);
}
.th-ordenavel:hover {
    background: #eef1f5;
}

.setas-ordenacao {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    margin-left: 4px;
    gap: -2px;
    line-height: 0;
}

.seta-cima, .seta-baixo {
    color: #9ca3af;
    display: block;
}

.seta-ativa {
    color: var(--cor-primaria);
}

.sessoes-tabela td {
    padding: 18px 16px;
    border-bottom: 1px solid #f1f5f9;
    border-right: 1px solid #f1f5f9;
    color: #1f2937;
    vertical-align: middle;
    text-align: center;
}
.sessoes-tabela td:last-child { border-right: none; }

.sessoes-tabela td:first-child {
    font-weight: 600;
}

.tabela-documentos.sessoes-tabela td:first-child {
    font-weight: 400;
}

/* ============================================
   BUSCA MATÉRIA — Modal de busca
   ============================================ */

.busca-materia-modal {
    max-width: 860px;
    width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.busca-materia-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
    flex-shrink: 0;
}

.busca-materia-titulo {
    font-size: 17px;
    font-weight: 600;
    color: var(--cor-texto);
    margin: 0;
}

.busca-materia-fechar {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--cor-texto-suave);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}
.busca-materia-fechar:hover { background: var(--cor-borda); }

.busca-materia-filtros {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 16px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--cor-borda);
}

.busca-materia-corpo {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.busca-materia-tabela {
    border-radius: 0;
    border: none;
}
.busca-materia-tabela thead th {
    position: sticky;
    top: 0;
    background: var(--cor-fundo);
    z-index: 1;
}

.busca-materia-col-id {
    width: 130px;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    color: var(--cor-primaria);
}

.busca-materia-col-desc { }

.busca-materia-nome {
    font-weight: 600;
    font-size: 13px;
    color: var(--cor-texto);
    margin-bottom: 2px;
}

.busca-materia-ementa {
    font-size: 12px;
    color: var(--cor-texto);
    line-height: 1.4;
    margin-bottom: 2px;
}

.busca-materia-autor {
    font-size: 11px;
    color: var(--cor-texto-suave);
    font-weight: 600;
}

.busca-materia-col-acao {
    width: 60px;
    text-align: center;
}

.busca-materia-btn-add {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 2px solid var(--cor-primaria);
    background: #fff;
    color: var(--cor-primaria);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.busca-materia-btn-add:hover { background: var(--cor-primaria); color: #fff; }
.busca-materia-btn-add.adicionada {
    border-color: var(--cor-sucesso, #16a34a);
    color: var(--cor-sucesso, #16a34a);
    cursor: default;
    font-size: 14px;
}
.busca-materia-btn-add:disabled { opacity: 0.6; cursor: wait; }

.busca-materia-paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    border-top: 1px solid var(--cor-borda);
    flex-shrink: 0;
}

.busca-materia-pag-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--cor-borda);
    background: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    color: var(--cor-texto);
}
.busca-materia-pag-btn:hover { background: var(--cor-fundo-hover, #f5f6fa); }
.busca-materia-pag-btn.ativo {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
}

/* Expediente — tabela melhorada */
.expediente-barra-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.expediente-col-id {
    font-weight: 600;
    font-size: 13px;
    color: var(--cor-primaria);
    white-space: nowrap;
}

.expediente-col-ementa {
    font-size: 13px;
    color: var(--cor-texto-suave);
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sessoes-tabela tbody tr:hover {
    background: #fafbfc;
}

.linha-clicavel {
    cursor: pointer;
}

.sessoes-tabela tbody tr:last-child td {
    border-bottom: none;
}

.vereador-nome-foto {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.avatar-tabela {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    flex-shrink: 0;
    border: 2px solid #e5e7eb;
}

.sessao-dados-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--cor-fundo-secundario);
    border-radius: var(--borda-raio);
    border-left: 4px solid var(--cor-primaria);
}
.sessao-legislatura-info {
    font-size: 14px;
    font-weight: 600;
    color: var(--cor-primaria-escura);
}
/* Grade de cards de leitura — componentes globais GradeDetalhes + DetalheCampo cartao.
   Antes isto era `.sessao-dado-card`, copiado à mão em Sessões e em Matérias. */
.grade-detalhes {
    display: grid;
    gap: var(--espaco-medio);
}
.detalhe-campo-cartao {
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: var(--borda-raio);
    background: #fff;
}
.detalhe-campo-cartao .detalhe-campo-rotulo {
    font-size: 11px;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.detalhe-campo-cartao .detalhe-campo-valor {
    font-size: 16px;
    font-weight: 500;
    color: #1f2937;
}
/* Valor longo (ementa, justificativa, JSON da auditoria) respira e quebra linha. */
.detalhe-campo-cartao.detalhe-campo-longo .detalhe-campo-valor {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Valor comprido (lista de permissões, ementa) toma a linha toda da grade. */
.detalhe-campo-largo { grid-column: 1 / -1; }

/* "Antes" e "Depois" no modal de auditoria. */
.auditoria-secao { margin-top: var(--espaco-grande); }

@media (max-width: 900px) {
    .grade-detalhes { grid-template-columns: 1fr !important; }
}

.vereador-nome-linha {
    font-weight: 600;
    color: var(--cor-primaria-escura);
    font-size: 15px;
}
.vereador-info-linha {
    font-size: 13px;
    color: var(--cor-neutra);
    margin-top: 2px;
}

.avatar-tabela-placeholder {
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coluna-data {
    width: 120px;
    white-space: nowrap;
}

.coluna-sessao {
    font-weight: 500;
    color: var(--cor-primaria-escura);
}

.sessoes-presidente {
    display: flex;
    align-items: center;
    gap: var(--espaco-pequeno);
}

.sessoes-acoes {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.sessoes-vazio {
    text-align: center;
    color: var(--cor-neutra);
    padding: 64px 24px !important;
    font-size: 14px;
    border: none !important;
}

.coluna-checkbox {
    width: 44px;
}

.sessoes-cabecalho-acoes {
    display: flex;
    gap: var(--espaco-pequeno);
    align-items: center;
}

/* ============================================
   MOLÉCULA: CONFIRMAR (Art. 4º, 5º-II)
   ============================================ */

.confirmar-modal {
    max-width: 420px;
}

.confirmar-corpo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--espaco-extra) var(--espaco-grande) var(--espaco-grande);
}

.confirmar-icone-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.08);
    color: var(--cor-perigo);
    margin-bottom: var(--espaco-medio);
}
.confirmar-icone-primario { background: rgba(26, 84, 191, 0.08) !important; color: var(--cor-primaria) !important; }
.confirmar-icone-sucesso { background: rgba(22, 163, 74, 0.08) !important; color: var(--cor-sucesso) !important; }

.confirmar-titulo {
    font-size: 18px;
    font-weight: 700;
    color: #1F2937;
    margin: 0 0 6px;
}

.confirmar-mensagem {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.5;
    margin: 0;
}

.confirmar-acoes {
    display: flex;
    justify-content: center;
    gap: var(--espaco-pequeno);
    padding: var(--espaco-medio) var(--espaco-grande);
    border-top: 1px solid #e5e7eb;
}

/* Modal do pedirTexto() — troca o window.prompt nativo (REGRA 5). Ex.: pôr link
   nos editores de texto e de documento. */
.pedir-texto-modal {
    max-width: 460px;
    padding: var(--espaco-grande);
}
.pedir-texto-titulo {
    font-size: 18px;
    font-weight: 700;
    color: #1F2937;
    margin: 0 0 var(--espaco-medio);
}
.pedir-texto-acoes {
    display: flex;
    justify-content: flex-end;
    gap: var(--espaco-pequeno);
    margin-top: var(--espaco-grande);
}

/* ============================================
   MOLÉCULA: BARRA DE SELEÇÃO (Art. 4º, 5º-II)
   ============================================ */

.barra-selecao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-medio);
    padding: 12px var(--espaco-grande);
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
    margin-bottom: var(--espaco-medio);
}

.barra-selecao-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--cor-primaria);
    cursor: pointer;
}

.barra-selecao-contagem {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    flex: 1;
}

.barra-selecao-acoes {
    display: flex;
    gap: var(--espaco-pequeno);
    align-items: center;
}

.linha-selecionada {
    background: #fef2f2 !important;
}

.sessoes-contagem {
    text-align: right;
    font-size: 12px;
    color: var(--cor-neutra);
    margin-top: var(--espaco-pequeno);
}

.inline-form {
    display: inline;
}

/* ============================================
   PÁGINA: FORMULÁRIO (criar/editar)
   ============================================ */

.pagina-formulario {}

.formulario-card {
    background: #fff;
    border-radius: var(--borda-raio);
    border: 1px solid #c5cad3;
}

.formulario-cabecalho {
    padding: var(--espaco-grande);
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: var(--espaco-medio);
    flex-wrap: wrap;
}

.formulario-corpo {
    padding: var(--espaco-grande);
}

.formulario-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--espaco-grande);
}

@media (min-width: 900px) {
    .formulario-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.formulario-linha-identificacao {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
    gap: 0 var(--espaco-grande);
}

.formulario-linha-tempo {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0 var(--espaco-grande);
}

@media (max-width: 768px) {
    .formulario-linha-identificacao,
    .formulario-linha-tempo {
        grid-template-columns: 1fr;
    }
}

.formulario-campo-largo {
    margin-bottom: var(--espaco-medio);
}

.campo-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.formulario-acoes {
    display: flex;
    justify-content: flex-end;
    gap: var(--espaco-pequeno);
    padding-top: var(--espaco-grande);
    border-top: 1px solid #e5e7eb;
    margin-top: var(--espaco-grande);
}

.formulario-rodape-fixo {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: var(--espaco-pequeno);
    padding: var(--espaco-medio) var(--espaco-grande);
    background: #fff;
    border-top: 1px solid #e5e7eb;
    margin-top: var(--espaco-grande);
    border-radius: var(--borda-raio);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    z-index: 10;
}

@media (max-width: 768px) {
    .formulario-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   PÁGINA: DETALHE DE SESSÃO
   ============================================ */

.pagina-detalhe {}

.detalhe-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--espaco-grande);
    flex-wrap: wrap;
    gap: var(--espaco-medio);
}

.detalhe-titulo-grupo {
    display: flex;
    align-items: center;
    gap: var(--espaco-medio);
}

.detalhe-acoes {
    display: flex;
    gap: var(--espaco-pequeno);
    align-items: center;
    flex-wrap: wrap;
}

.detalhe-card {
    background: #fff;
    border-radius: var(--borda-raio);
    border: 1px solid #c5cad3;
    padding: var(--espaco-grande);
    margin-bottom: var(--espaco-grande);
}

.detalhe-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espaco-grande);
}

.detalhe-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detalhe-rotulo {
    font-size: 12px;
    font-weight: 600;
    color: var(--cor-neutra);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detalhe-valor {
    font-size: 15px;
    color: #1f2937;
}

.detalhe-secao {
    margin-top: var(--espaco-grande);
    padding-top: var(--espaco-grande);
    border-top: 1px solid #f3f4f6;
}

.detalhe-secao-titulo {
    font-size: 16px;
    font-weight: 700;
    color: #374151;
    margin-bottom: var(--espaco-pequeno);
}

.detalhe-texto {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.7;
    white-space: pre-wrap;
}

.dropdown-status {
    position: relative;
}

.dropdown-status-lista {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
    box-shadow: var(--sombra-elevada);
    padding: 4px 0;
    min-width: 160px;
}

.dropdown-status-item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--fonte-principal);
    transition: background var(--transicao);
}
.dropdown-status-item:hover {
    background: var(--cor-fundo-secundario);
}

/* ============================================
   PÁGINA: PERFIS DE ACESSO
   ============================================ */

.perfis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espaco-grande);
    align-items: start;
}

.perfil-card {
    display: flex;
    flex-direction: column;
}

.perfil-card-aba {
    display: inline-flex;
    align-self: flex-start;
    margin-left: 16px;
    padding: 4px 14px 8px;
    border-radius: 6px 6px 0 0;
    border: 1px solid #c5cad3;
    border-bottom: none;
    z-index: 0;
    margin-bottom: -4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.perfil-card-corpo {
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
    padding: var(--espaco-grande);
    display: flex;
    flex-direction: column;
    gap: var(--espaco-medio);
    z-index: 1;
    position: relative;
    box-shadow: 0 -3px 6px rgba(0,0,0,0.1);
}

.perfil-card-editar-inline {
    background: none;
    border: none;
    color: #4B5563;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: color var(--transicao);
}

.perfil-card-editar-inline:hover {
    color: var(--cor-primaria);
}

.perfil-card-editar-label {
    font-size: 11px;
    font-weight: 600;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    transition: max-width var(--transicao), opacity var(--transicao);
}

.perfil-card:hover .perfil-card-editar-label {
    max-width: 50px;
    opacity: 1;
}

.perfil-card-excluir-inline {
    background: none;
    border: none;
    color: #4B5563;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    position: relative;
    transition: color var(--transicao);
}

.perfil-card-excluir-label {
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--transicao);
    pointer-events: none;
}

.perfil-card:hover .perfil-card-excluir-label {
    opacity: 1;
}

.perfil-card-excluir-inline:hover {
    color: var(--cor-perigo);
}


.perfil-card-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.perfil-card-cabecalho-esquerda {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    min-width: 0;
}

.perfil-card-cabecalho-esquerda .badge {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.perfil-card-cadeado {
    color: #4B5563;
    display: flex;
    align-items: center;
    position: relative;
}

.perfil-card-cadeado-label {
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: #4B5563;
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--transicao);
    pointer-events: none;
}

.perfil-card:hover .perfil-card-cadeado-label {
    opacity: 1;
}


/* Alias — usar card-container no lugar */
.perfil-editar-corpo { }

.perfil-campos-topo {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--espaco-medio);
    align-items: end;
    margin-bottom: var(--espaco-grande);
}

.perfil-campos-topo .campo-grupo {
    margin-bottom: 0;
    padding-bottom: 0;
}

.perfil-editar-rodape {
    display: flex;
    justify-content: flex-end;
    gap: var(--espaco-pequeno);
    padding-top: var(--espaco-grande);
    border-top: 1px solid #e5e7eb;
    margin-top: var(--espaco-grande);
}

.perfil-card-contagem {
    font-size: 12px;
    color: #1F2937;
    font-weight: 700;
    flex-shrink: 0;
    margin-left: auto;
}

.perfil-card-descricao {
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
    flex: 1;
    min-height: 40px;
}

/* Permissões por módulo */

.modulos-lista {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-pequeno);
}

.modulo-card {
    border: 1px solid #e5e7eb;
    border-radius: var(--borda-raio);
    overflow: hidden;
    transition: border-color var(--transicao);
}

.modulo-card-aberto {
    border-color: var(--cor-primaria);
    background: #fafbff;
}

.modulo-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--espaco-grande);
    cursor: pointer;
    transition: background var(--transicao);
}

.modulo-cabecalho:hover {
    background: #f9fafb;
}

.modulo-titulo-grupo {
    display: flex;
    align-items: center;
    gap: var(--espaco-pequeno);
}

.modulo-icone {
    display: flex;
    flex-shrink: 0;
    color: var(--cor-primaria);
}

.modulo-titulo {
    font-size: 15px;
    font-weight: 600;
    color: #1F2937;
    margin: 0;
}

.modulo-cabecalho-direita {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modulo-progresso {
    width: 50px;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.modulo-progresso-barra {
    height: 100%;
    background: var(--cor-primaria);
    border-radius: 2px;
    transition: width var(--transicao);
}

.modulo-contagem {
    font-size: 12px;
    font-weight: 700;
    color: #6B7280;
    min-width: 28px;
    text-align: right;
}

.modulo-seta {
    color: #9ca3af;
    flex-shrink: 0;
    transition: transform var(--transicao);
}

.modulo-seta-aberta {
    transform: rotate(180deg);
}

.modulo-corpo {
    border-top: 1px solid #e5e7eb;
}

.modulo-acoes {
    display: flex;
    gap: var(--espaco-medio);
    padding: var(--espaco-pequeno) var(--espaco-grande);
    background: #f9fafb;
    border-bottom: 1px solid #f3f4f6;
}

.modulo-acao {
    font-size: 12px;
    font-weight: 600;
    color: var(--cor-primaria);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    font-family: var(--fonte-principal);
    transition: color var(--transicao);
}

.modulo-acao:hover {
    color: var(--cor-primaria-escura);
    text-decoration: underline;
}

.modulo-permissoes {
    /* container das permissoes */
}

.permissao-item {
    display: flex;
    align-items: center;
    gap: var(--espaco-pequeno);
    padding: 10px var(--espaco-medio);
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    border-left: 3px solid transparent;
    transition: background var(--transicao), border-color var(--transicao);
}
.permissao-item:last-child {
    border-bottom: none;
}
.permissao-item:hover {
    background: var(--cor-fundo-secundario);
}
.permissao-item.permissao-ativa {
    background: var(--cor-fundo-modulo);
    border-left-color: var(--cor-modulo);
}

.permissao-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--cor-primaria);
    cursor: pointer;
    flex-shrink: 0;
}

.permissao-texto {
    font-size: 13px;
    color: #374151;
    flex: 1;
}

.permissao-codigo {
    font-size: 11px;
    color: #aaa;
    font-family: monospace;
}

/* ============================================
   VOTAÇÃO
   ============================================ */

.votacao-card {
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
    padding: var(--espaco-grande);
    margin-bottom: var(--espaco-medio);
}
.votacao-card-aberta {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 1px var(--cor-primaria);
}
.votacao-card-encerrada {
    opacity: 0.85;
}

.votacao-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espaco-medio);
    margin-bottom: var(--espaco-medio);
    flex-wrap: wrap;
}

.votacao-numero {
    font-size: 13px;
    font-weight: 700;
    color: var(--cor-primaria);
    margin-right: var(--espaco-pequeno);
}

.votacao-titulo {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}
.votacao-ementa {
    font-size: 13px;
    color: #555;
    margin-top: 4px;
    max-width: 640px;
}
.votacao-autor {
    font-size: 12px;
    color: var(--cor-neutra);
    margin-top: 4px;
}

/* Botões da matéria votada: abrir o documento e ver o resumo (ementa + justificativa). */
.votacao-materia-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.terminal-materia-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }

.votacao-resumo-secao { margin-bottom: 16px; }
.votacao-resumo-secao:last-child { margin-bottom: 0; }
.votacao-resumo-rotulo {
    margin: 0 0 5px;
    font-size: var(--texto-pequeno);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cor-neutra);
}
.votacao-resumo-texto { margin: 0; line-height: 1.6; color: var(--cor-texto); }
.votacao-resumo-lista { margin: 0; padding-left: 20px; line-height: 1.7; color: var(--cor-texto); }
.votacao-resumo-lista li { margin-bottom: 4px; }

/* Documento (PDF) exibido dentro do modal, sem baixar nem trocar de aba.
   O container é `relative` pro OverlayCarregando `contido` cobrir até o iframe carregar. */
.votacao-doc-container { position: relative; height: 72vh; border-radius: 8px; overflow: hidden; background: var(--cor-fundo-secundario); }
.votacao-doc-iframe { width: 100%; height: 100%; border: none; background: #fff; }

/* Resumo da sessão anterior (deliberação da ata): cabeçalho + lista de decisões. */
.votacao-resumo-ata { text-align: left; }
.votacao-resumo-ata-cab { padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--cor-borda); }
.votacao-resumo-ata-titulo { margin: 0 0 5px; font-size: var(--texto-medio); font-weight: 700; color: var(--cor-primaria); }
.votacao-resumo-ata-linha { margin: 0; font-size: var(--texto-pequeno); color: var(--cor-neutra); }
.votacao-resumo-ata-rotulo {
    font-size: var(--texto-pequeno); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--cor-neutra); margin-bottom: 6px;
}
.votacao-resumo-decisoes { list-style: none; margin: 0; padding: 0; }
.votacao-resumo-decisao {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--cor-borda);
}
.votacao-resumo-decisao:last-child { border-bottom: none; }
.votacao-resumo-decisao-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.votacao-resumo-decisao-nome { font-weight: 600; color: var(--cor-texto); }
.votacao-resumo-decisao-desc { font-size: 0.85rem; color: var(--cor-neutra); line-height: 1.45; }
.votacao-resumo-decisao-meta { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; white-space: nowrap; }
.votacao-resumo-badge { font-size: 0.76rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.votacao-resumo-badge-aprovada { background: #e7f5ec; color: #157347; }
.votacao-resumo-badge-rejeitada { background: #fdecec; color: var(--cor-perigo); }
.votacao-resumo-placar { font-size: 0.82rem; color: var(--cor-neutra); font-variant-numeric: tabular-nums; }

.votacao-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.votacao-contagem {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--cor-fundo-secundario);
    margin-bottom: var(--espaco-pequeno);
}

.votacao-barra-favor {
    background: var(--cor-sucesso);
    transition: width var(--transicao);
}
.votacao-barra-contra {
    background: var(--cor-perigo);
    transition: width var(--transicao);
}
.votacao-barra-abstencao {
    background: var(--cor-neutra);
    transition: width var(--transicao);
}

.votacao-numeros {
    display: flex;
    gap: var(--espaco-grande);
    font-size: 13px;
    color: #555;
    flex-wrap: wrap;
}

.votacao-num-favor strong { color: var(--cor-sucesso); }
.votacao-num-contra strong { color: var(--cor-perigo); }
.votacao-num-abstencao strong { color: var(--cor-neutra); }
.votacao-quorum { margin-left: auto; color: var(--cor-neutra); }

/* Terminal de voto (vereador) */

.terminal-tela {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 24px 40px;
}
.terminal-tela .terminal-card {
    max-width: 900px;
    width: 100%;
}
.terminal-card {
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: 12px;
    padding: var(--espaco-extra);
    max-width: 700px;
    margin: 0 auto;
}

.terminal-ativo {
    border-color: var(--cor-primaria);
    box-shadow: 0 4px 20px rgba(26, 84, 191, 0.1);
}

.terminal-materia {
    text-align: center;
    margin-bottom: var(--espaco-grande);
}

.terminal-numero {
    font-size: 14px;
    font-weight: 700;
    color: var(--cor-primaria);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.terminal-titulo {
    font-size: 22px;
    font-weight: 700;
    color: var(--cor-primaria-escura);
    margin: var(--espaco-pequeno) 0;
}

.terminal-ementa {
    font-size: 15px;
    color: #374151;
    line-height: 1.6;
    margin-top: var(--espaco-medio);
}

.terminal-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-medio);
    margin-bottom: var(--espaco-grande);
}

.terminal-tipo {
    font-size: 13px;
    color: var(--cor-neutra);
    font-weight: 600;
}

.terminal-botoes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espaco-grande);
}

.terminal-botao {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-pequeno);
    padding: var(--espaco-extra);
    border: 2px solid;
    border-radius: 12px;
    font-family: var(--fonte-principal);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--transicao);
    min-height: 140px;
}
.terminal-botao:disabled {
    opacity: 0.5;
    cursor: wait;
}

.terminal-botao-favor {
    background: #dcfce7;
    border-color: #15803d;
    color: #15803d;
}
.terminal-botao-favor:hover:not(:disabled) {
    background: var(--cor-sucesso);
    color: #fff;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.3);
    transform: translateY(-2px);
}

.terminal-botao-contra {
    background: #fee2e2;
    border-color: #b91c1c;
    color: #b91c1c;
}
.terminal-botao-contra:hover:not(:disabled) {
    background: var(--cor-perigo);
    color: #fff;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
    transform: translateY(-2px);
}

.terminal-botao-abstencao {
    background: #f1f5f9;
    border-color: #475569;
    color: #475569;
}
.terminal-botao-abstencao:hover:not(:disabled) {
    background: var(--cor-neutra);
    color: #fff;
    box-shadow: 0 4px 16px rgba(107, 114, 128, 0.3);
    transform: translateY(-2px);
}

.terminal-confirmado {
    text-align: center;
    padding: var(--espaco-extra) 0;
}

.terminal-confirmado-icone {
    color: var(--cor-sucesso);
    margin-bottom: var(--espaco-medio);
}

.terminal-confirmado-titulo {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: var(--espaco-pequeno);
}

.terminal-confirmado-texto {
    font-size: 15px;
    color: #555;
}

.terminal-materia-topo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}
.terminal-tag {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cor-primaria);
    background: var(--cor-primaria-clara);
    padding: 4px 12px;
    border-radius: 20px;
}
.terminal-pergunta {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 var(--espaco-grande);
}
.terminal-botao-icone {
    display: flex;
    margin-bottom: 8px;
}
.terminal-confirmado-voto {
    font-size: 18px;
    color: #374151;
    margin-top: 4px;
}
.terminal-confirmado-voto strong {
    color: #111827;
}
.terminal-confirmado-materia {
    font-size: 14px;
    color: var(--cor-neutra);
    margin-top: 10px;
}
.terminal-confirmado-contra .terminal-confirmado-icone { color: var(--cor-perigo); }
.terminal-confirmado-abstencao .terminal-confirmado-icone { color: var(--cor-neutra); }

.terminal-vazio {
    text-align: center;
    padding: var(--espaco-gigante);
    max-width: 500px;
    margin: 0 auto;
}

.terminal-vazio-icone {
    color: #d1d5db;
    margin-bottom: var(--espaco-grande);
}

.terminal-vazio-titulo {
    font-size: 22px;
    font-weight: 700;
    color: #374151;
    margin-bottom: var(--espaco-pequeno);
}

.terminal-vazio-texto {
    font-size: 15px;
    color: var(--cor-neutra);
}

/* Painel/Telão */

.painel-card {
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: 12px;
    padding: var(--espaco-extra);
}

.painel-materia {
    text-align: center;
    margin-bottom: var(--espaco-grande);
}

.painel-numero {
    font-size: 14px;
    font-weight: 700;
    color: var(--cor-primaria);
    letter-spacing: 0.05em;
}

.painel-titulo {
    font-size: 24px;
    font-weight: 700;
    color: var(--cor-primaria-escura);
    margin: var(--espaco-pequeno) 0;
}

.painel-meta {
    display: flex;
    justify-content: center;
    gap: var(--espaco-pequeno);
}

.painel-resultado {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espaco-grande);
    margin-bottom: var(--espaco-grande);
}

.painel-bloco {
    text-align: center;
    padding: var(--espaco-grande);
    border-radius: 12px;
    border: 2px solid;
}

.painel-bloco-valor {
    display: block;
    font-size: 48px;
    font-weight: 800;
    font-family: var(--fonte-destaque);
    line-height: 1;
}

.painel-bloco-rotulo {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: var(--espaco-pequeno);
    display: block;
}

.painel-favor {
    background: #f0fdf4;
    border-color: var(--cor-sucesso);
    color: var(--cor-sucesso);
}
.painel-contra {
    background: #fef2f2;
    border-color: var(--cor-perigo);
    color: var(--cor-perigo);
}
.painel-abstencao {
    background: #f9fafb;
    border-color: var(--cor-neutra);
    color: var(--cor-neutra);
}

.painel-vereadores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--espaco-pequeno);
}

.painel-vereador {
    display: flex;
    align-items: center;
    gap: var(--espaco-pequeno);
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: var(--borda-raio);
    transition: all var(--transicao);
}

.painel-vereador-nome {
    flex: 1;
    font-size: 14px;
    color: #374151;
}

.painel-vereador-voto {
    font-size: 16px;
    font-weight: 700;
    width: 24px;
    text-align: center;
}

.painel-vereador-votou { border-left: 3px solid; }
.painel-vereador-favor { background: #f0fdf4; border-color: var(--cor-sucesso); }
.painel-vereador-favor .painel-vereador-voto { color: var(--cor-sucesso); }
.painel-vereador-contra { background: #fef2f2; border-color: var(--cor-perigo); }
.painel-vereador-contra .painel-vereador-voto { color: var(--cor-perigo); }
.painel-vereador-abstencao { background: #f9fafb; border-color: var(--cor-neutra); }
.painel-vereador-abstencao .painel-vereador-voto { color: var(--cor-neutra); }

@media (max-width: 768px) {
    .terminal-botoes { grid-template-columns: 1fr; gap: var(--espaco-medio); }
    .painel-resultado { grid-template-columns: 1fr; }

    /* Menos respiro à volta e no cartão: 32px de cada lado num celular de 320px come
       um quinto da tela. */
    .terminal-tela { padding: 3vh 12px 32px; }
    .terminal-card { padding: var(--espaco-grande) var(--espaco-medio); }

    /* Botões de voto viram BARRAS compactas (ícone + rótulo lado a lado) em vez de blocos
       de 140px empilhados. Assim as três opções — SIM, NÃO, ABSTENÇÃO — cabem na tela ao
       mesmo tempo: num voto, ver todas as escolhas sem rolar é essencial, não estético. */
    .terminal-botao {
        flex-direction: row;
        min-height: 60px;
        padding: 0 var(--espaco-grande);
        gap: var(--espaco-medio);
        font-size: 18px;
    }
    .terminal-botao-icone svg { width: 26px; height: 26px; }

    .terminal-titulo { font-size: 19px; }
    .terminal-ementa { font-size: 14px; }
}

.votacao-acoes {
    display: flex;
    gap: var(--espaco-pequeno);
    margin-top: var(--espaco-medio);
    padding-top: var(--espaco-medio);
    border-top: 1px solid #f3f4f6;
}

.pagina-erro-fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #e2e8f0;
    padding: var(--espaco-grande);
}

.erro-card {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    max-width: 820px;
    width: 100%;
    min-height: 460px;
    overflow: hidden;
}

.erro-ilustracao {
    flex-shrink: 0;
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--espaco-extra);
}

.erro-ilustracao::before {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    background: var(--cor-primaria-clara);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.erro-img {
    width: 280px;
    height: auto;
    position: relative;
    z-index: 1;
    filter: invert(12%) sepia(60%) saturate(3000%) hue-rotate(210deg) brightness(70%) contrast(105%);
}

.erro-conteudo {
    padding: var(--espaco-gigante) var(--espaco-gigante) var(--espaco-gigante) 0;
}

.erro-codigo {
    font-size: 100px;
    font-weight: 900;
    font-family: var(--fonte-destaque);
    color: var(--cor-primaria-escura);
    line-height: 1;
    margin-bottom: var(--espaco-medio);
}

.erro-titulo {
    font-size: 24px;
    font-weight: 800;
    color: var(--cor-primaria-escura);
    margin-bottom: var(--espaco-medio);
}

.erro-mensagem {
    font-size: 14px;
    color: #9ca3af;
    line-height: 1.7;
    margin-bottom: var(--espaco-grande);
}

.erro-botao {
    display: inline-flex;
    text-decoration: none;
    border-radius: var(--borda-pilula);
    padding: 14px 36px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--cor-primaria-escura);
    color: #fff;
    border: 2px solid var(--cor-primaria-escura);
    transition: all var(--transicao);
}
.erro-botao:hover {
    background: transparent;
    color: var(--cor-primaria-escura);
}

@media (max-width: 768px) {
    .erro-card {
        flex-direction: column;
        text-align: center;
    }
    .erro-conteudo {
        padding: var(--espaco-grande);
        text-align: center;
    }
    .erro-img { width: 200px; }
}

.estado-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px var(--espaco-grande);
    text-align: center;
}

.estado-vazio-icone {
    color: #c5cad3;
    margin-bottom: var(--espaco-grande);
}

.estado-vazio-titulo {
    font-size: 17px;
    font-weight: 600;
    color: var(--cor-primaria-escura);
    margin-bottom: var(--espaco-pequeno);
}

.estado-vazio-descricao {
    font-size: 14px;
    color: var(--cor-neutra);
    line-height: 1.6;
    max-width: 400px;
    margin-bottom: var(--espaco-grande);
}

.estado-vazio-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--cor-primaria);
    text-decoration: none;
}
.estado-vazio-link:hover {
    text-decoration: underline;
}


.barra-selecao-instrucao {
    display: none;
}

.modo-exclusao-barra {
    display: flex;
    align-items: center;
    gap: var(--espaco-medio);
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #fecaca;
    border-left: 4px solid var(--cor-perigo);
    border-radius: var(--borda-raio);
    margin-bottom: var(--espaco-medio);
}
.modo-exclusao-icone {
    width: 40px;
    height: 40px;
    border-radius: var(--borda-raio);
    background: #fef2f2;
    color: var(--cor-perigo);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.modo-exclusao-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.modo-exclusao-titulo {
    font-size: 14px;
    color: #1f2937;
    font-weight: 600;
}
.modo-exclusao-subtitulo {
    font-size: 12px;
    color: var(--cor-neutra);
}
.modo-exclusao-acoes {
    display: flex;
    gap: var(--espaco-pequeno);
    flex-shrink: 0;
}

.tabela-modo-selecao tbody tr {
    cursor: pointer;
    transition: background var(--transicao);
}
.tabela-modo-selecao tbody tr:hover {
    background: #fef2f2 !important;
}
.tabela-modo-selecao .linha-selecionada {
    background: #fee2e2 !important;
}
.tabela-modo-selecao .linha-selecionada td:first-child {
    box-shadow: inset 3px 0 0 var(--cor-perigo);
}

/* Accordion — modo de exclusão (mesma linguagem visual das tabelas) */
.accordion-modo-selecao .accordion-cabecalho {
    cursor: pointer;
}
.accordion-modo-selecao .accordion-item:not(.accordion-item-bloqueado) .accordion-cabecalho:hover {
    background: #fef2f2;
}
.accordion-item-selecionado .accordion-cabecalho {
    background: #fee2e2;
    box-shadow: inset 3px 0 0 var(--cor-perigo);
}
.accordion-item-bloqueado {
    opacity: 0.5;
}
.accordion-item-bloqueado .accordion-cabecalho {
    cursor: not-allowed;
}
.accordion-selecao {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    color: #fff;
    flex-shrink: 0;
    transition: background var(--transicao), border-color var(--transicao);
}
.accordion-selecao-ativa {
    background: var(--cor-perigo);
    border-color: var(--cor-perigo);
}
.accordion-selecao-bloqueada {
    border-style: dashed;
}

.texto-neutro {
    font-size: 13px;
    color: var(--cor-neutra);
}

.legislatura-card {
    margin-bottom: var(--espaco-grande);
}

.legislatura-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--espaco-medio) 0;
}

.legislatura-info {
    display: flex;
    align-items: center;
    gap: var(--espaco-pequeno);
}

.legislatura-titulo {
    font-size: 18px;
    font-weight: 700;
    color: var(--cor-primaria-escura);
    margin: 0;
}

.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--espaco-medio) var(--espaco-grande);
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
    margin-top: var(--espaco-medio);
    position: relative;
    z-index: 50;
}

.paginacao-dropdown {
    position: relative;
}

.paginacao-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: var(--borda-raio);
    font-family: var(--fonte-principal);
    font-size: 14px;
    font-weight: 600;
    color: #1F2937;
    cursor: pointer;
    transition: border-color var(--transicao);
}

.paginacao-dropdown-btn:hover {
    border-color: #9ca3af;
}

.paginacao-dropdown-lista {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: var(--borda-raio);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    min-width: 60px;
}

.paginacao-dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    font-family: var(--fonte-principal);
    font-size: 14px;
    color: #1F2937;
    cursor: pointer;
    text-align: center;
}

.paginacao-dropdown-item:hover {
    background: #f3f4f6;
}

.paginacao-dropdown-ativo {
    color: var(--cor-primaria);
    font-weight: 700;
    background: rgba(26, 84, 191, 0.06);
}

.paginacao-info {
    font-size: 14px;
    color: #1F2937;
    font-weight: 500;
}

.paginacao-info strong {
    font-weight: 700;
}

.paginacao-mostrar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #1F2937;
    font-weight: 500;
}


.paginacao-controles {
    display: flex;
    align-items: center;
    gap: 8px;
}

.paginacao-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: var(--borda-raio);
    cursor: pointer;
    color: #4B5563;
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.paginacao-btn:hover:not(:disabled) {
    background: var(--cor-fundo-secundario);
    border-color: #9ca3af;
}

.paginacao-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.paginacao-posicao {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #1F2937;
    font-weight: 500;
}

.paginacao-input {
    width: 52px;
    height: 38px;
    text-align: center;
    border: 1px solid #d1d5db;
    border-radius: var(--borda-raio);
    font-size: 15px;
    font-family: var(--fonte-principal);
    color: #1F2937;
    font-weight: 700;
    padding: 0;
    line-height: 38px;
    -moz-appearance: textfield;
}

.paginacao-input::-webkit-outer-spin-button,
.paginacao-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.paginacao-btn {
    width: 38px;
    height: 38px;
}

.paginacao-input:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 2px rgba(26, 84, 191, 0.15);
}

.dropdown {
    position: relative;
}

.dropdown-botao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: var(--borda-raio);
    font-family: var(--fonte-principal);
    font-size: 14px;
    color: #1F2937;
    cursor: pointer;
    transition: border-color var(--transicao);
    text-align: left;
}

.dropdown-botao:hover {
    border-color: #9ca3af;
}

.dropdown-aberto .dropdown-botao {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 2px rgba(26, 84, 191, 0.15);
}

.dropdown-erro .dropdown-botao {
    border-color: var(--cor-perigo);
}

.dropdown-placeholder {
    color: #9ca3af;
}

.dropdown-seta {
    color: #6B7280;
    flex-shrink: 0;
    transition: transform var(--transicao);
}

.dropdown-seta-aberta {
    transform: rotate(180deg);
}

.dropdown-lista {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: var(--borda-raio);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    max-height: 240px;
    overflow-y: auto;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    font-family: var(--fonte-principal);
    font-size: 14px;
    color: #1F2937;
    cursor: pointer;
    text-align: left;
    transition: background var(--transicao);
}

.dropdown-item:hover {
    background: #f3f4f6;
}

.dropdown-item-ativo {
    background: rgba(26, 84, 191, 0.08);
    color: var(--cor-primaria);
    font-weight: 600;
}

.dropdown-item-limpar {
    color: #9ca3af;
    font-size: 13px;
    border-bottom: 1px solid #f3f4f6;
    font-style: italic;
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-pequeno);
}

.accordion-item {
    border: 1px solid #e5e7eb;
    border-radius: var(--borda-raio);
    overflow: hidden;
    transition: border-color var(--transicao);
}

.accordion-item-aberto {
    border-color: var(--cor-primaria);
}

.accordion-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--espaco-medio) var(--espaco-grande);
    cursor: pointer;
    transition: background var(--transicao);
}

.accordion-cabecalho:hover {
    background: #f9fafb;
}

.accordion-info {
    display: flex;
    align-items: center;
    gap: var(--espaco-pequeno);
    flex: 1;
    min-width: 0;
}

.accordion-icone {
    display: flex;
    flex-shrink: 0;
    color: var(--cor-primaria);
}

.accordion-titulo {
    font-size: 16px;
    font-weight: 700;
    color: var(--cor-primaria-escura);
    margin: 0;
}

.accordion-subtitulo {
    font-size: 13px;
    color: #6B7280;
    margin: 3px 0 0;
}

.accordion-direita {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.accordion-progresso {
    width: 50px;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.accordion-progresso-barra {
    height: 100%;
    background: var(--cor-primaria);
    border-radius: 2px;
    transition: width var(--transicao);
}

.accordion-contagem {
    font-size: 12px;
    font-weight: 700;
    color: #6B7280;
    min-width: 28px;
    text-align: right;
}

.accordion-badge {
    font-size: 12px;
    font-weight: 700;
    color: #6B7280;
    min-width: 28px;
    text-align: right;
}

.accordion-acoes {
    display: flex;
    align-items: center;
    gap: 4px;
}

.accordion-seta {
    color: #9ca3af;
    transition: transform var(--transicao);
}

.accordion-seta-aberta {
    transform: rotate(180deg);
}

.accordion-corpo {
    padding: var(--espaco-medio) var(--espaco-grande) var(--espaco-grande);
    border-top: 1px solid #e5e7eb;
}

.config-partido-form {
    display: flex;
    align-items: center;
    gap: var(--espaco-medio);
}

.config-partido-form .campo-grupo {
    margin-bottom: 0;
    padding-bottom: 0;
    flex: 1;
}

.config-partido-form .campo-grupo:first-child {
    max-width: 150px;
}

.config-partido-form .botao {
    flex-shrink: 0;
}

.foto-upload {
    display: flex;
    align-items: center;
    gap: var(--espaco-grande);
}

.foto-upload-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--cor-fundo-secundario);
    border: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    color: #9ca3af;
}

.foto-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.foto-crop-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaco-medio);
    padding: var(--espaco-grande);
    background: var(--cor-fundo-secundario);
    border-radius: var(--borda-raio);
    border: 1px solid #e5e7eb;
}
.foto-crop-area {
    position: relative;
    width: 280px;
    height: 280px;
    border-radius: var(--borda-raio);
    overflow: hidden;
}
.foto-crop-controles {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaco-pequeno);
    width: 280px;
}
.foto-crop-zoom-label {
    font-size: 12px;
    color: var(--cor-neutra);
    font-weight: 500;
}
.foto-crop-zoom {
    width: 100%;
    accent-color: var(--cor-primaria);
}
.foto-crop-acoes {
    display: flex;
    gap: var(--espaco-pequeno);
    margin-top: var(--espaco-pequeno);
}

.editor-container {
    border: 1px solid #d1d5db;
    border-radius: var(--borda-raio);
    overflow: hidden;
}

.editor-lateral {
    display: flex;
}

.editor-toolbar-lateral {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
    width: 44px;
    flex-shrink: 0;
}

.editor-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: 4px;
    cursor: pointer;
    color: #4B5563;
    font-size: 14px;
    font-family: var(--fonte-principal);
    transition: background var(--transicao), color var(--transicao);
}

.editor-btn:hover {
    background: #e5e7eb;
    color: #1F2937;
}

.editor-btn-ativo {
    background: var(--cor-primaria);
    color: #fff;
}

.editor-btn-ativo:hover {
    background: var(--cor-primaria-escura);
    color: #fff;
}

.editor-separador-h {
    width: 24px;
    height: 1px;
    background: #d1d5db;
    margin: 4px 0;
}

.editor-cor-wrapper {
    position: relative;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.editor-cor-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.editor-cor-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    pointer-events: none;
}

.editor-conteudo {
    flex: 1;
}

.editor-conteudo .tiptap,
.editor-conteudo .tiptap * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='20' viewBox='0 0 4 20'%3E%3Cline x1='0.5' y1='0' x2='3.5' y2='0' stroke='%23333' stroke-width='1'/%3E%3Cline x1='2' y1='0' x2='2' y2='20' stroke='%23333' stroke-width='1'/%3E%3Cline x1='0.5' y1='20' x2='3.5' y2='20' stroke='%23333' stroke-width='1'/%3E%3C/svg%3E") 2 10, text !important;
}

.editor-conteudo .tiptap {
    padding: 12px 16px;
    min-height: 250px;
    font-family: var(--fonte-principal);
    font-size: 14px;
    line-height: 1.7;
    outline: none;
}

.editor-conteudo .tiptap p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    color: #9ca3af;
    pointer-events: none;
    height: 0;
}

.editor-conteudo .tiptap h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 16px 0 8px;
}

.editor-conteudo .tiptap h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 12px 0 6px;
}

.editor-conteudo .tiptap ul,
.editor-conteudo .tiptap ol {
    padding-left: 24px;
    margin: 8px 0;
}

.editor-conteudo .tiptap li {
    margin: 4px 0;
}

/* Imagem inserida NO MEIO do texto (Fase 1). Já sobe pro servidor: no editor a
   gente só a exibe com uma medida agradável. */
.editor-conteudo .tiptap img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 12px 0;
    display: block;
}
.editor-conteudo .tiptap img.ProseMirror-selectednode {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
}

/* Imagem COM legenda (Fase 2): a legenda é editável logo embaixo da imagem. */
.editor-conteudo .tiptap figure.pfigura {
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.editor-conteudo .tiptap figure.pfigura img {
    margin: 0 0 6px;
    max-width: 100%;
}
.editor-conteudo .tiptap figure.pfigura figcaption {
    width: 100%;
    min-height: 1.3em;
    font-size: 13px;
    color: #6b7280;
    font-style: italic;
    text-align: center;
    line-height: 1.5;
    outline: none;
}
.editor-conteudo .tiptap figure.pfigura.is-empty figcaption::before,
.editor-conteudo .tiptap figure.pfigura figcaption:empty::before {
    content: 'Escreva a legenda (opcional)';
    color: #9ca3af;
    pointer-events: none;
}

/* ── CampoTags: etiquetas em chips (global, REGRA 1) ───────────────────────── */
.campo-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid #b0b7c3;
    border-radius: var(--borda-raio);
    background: #fff;
    cursor: text;
    transition: border-color .15s, box-shadow .15s;
}
.campo-tags:focus-within {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(26, 84, 191, 0.12);
}
.campo-tags-cheio { background: #f9fafb; }

.campo-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 4px 3px 11px;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.campo-tag-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--cor-primaria-escura);
    border-radius: 50%;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity .15s, background .15s;
}
.campo-tag-x:hover { opacity: 1; background: rgba(13, 45, 110, 0.14); }

.campo-tag-input {
    flex: 1;
    min-width: 150px;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--fonte-principal);
    font-size: 14px;
    color: #1f2937;
    padding: 4px 2px;
}

.campo-tags-sugestoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.campo-tags-sugestoes-rotulo {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
}
.campo-tag-sugestao {
    padding: 3px 10px;
    border: 1px dashed #cbd5e1;
    background: #fff;
    color: #475569;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.campo-tag-sugestao:hover {
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
    background: var(--cor-primaria-clara);
}

.botao-acao {
    display: flex;
    align-items: center;
    color: #6B7280;
    padding: 4px;
    border-radius: 4px;
    border: none;
    background: none;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transicao), background var(--transicao);
}

.botao-acao-padrao:hover {
    color: var(--cor-primaria);
    background: rgba(26, 84, 191, 0.08);
}

.botao-acao-perigo:hover {
    color: var(--cor-perigo);
    background: rgba(220, 38, 38, 0.08);
}

.botao-acao-sucesso:hover {
    color: var(--cor-primaria);
    background: rgba(26, 84, 191, 0.08);
}

.botao-acao-desabilitado {
    opacity: 0.3;
    cursor: not-allowed;
}

.legislatura-dados-grid {
    display: grid;
    grid-template-columns: 80px 1fr 1fr 2fr;
    gap: var(--espaco-medio);
    align-items: start;
    margin-top: var(--espaco-grande);
}

.legislatura-dados-grid .campo-grupo {
    margin-bottom: 0;
    padding-bottom: 0;
}

.legislatura-adicionar-sessao {
    display: flex;
    align-items: center;
    gap: var(--espaco-medio);
    margin: var(--espaco-grande) 0;
    padding-bottom: var(--espaco-grande);
    border-bottom: 1px solid #e5e7eb;
}

.legislatura-adicionar-sessao .campo-grupo {
    margin-bottom: 0;
    padding-bottom: 0;
}

.legislatura-adicionar-sessao .botao {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .detalhe-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   ABA: MESA DIRETORA
   ============================================ */

.mesa-adicionar {
    margin-bottom: var(--espaco-grande);
}

.mesa-form-inline {
    display: flex;
    gap: var(--espaco-medio);
    align-items: flex-end;
    flex-wrap: wrap;
}

.mesa-form-inline .campo-grupo {
    flex: 1;
    min-width: 180px;
    margin-bottom: 0;
}

.coluna-acoes {
    width: 80px;
    text-align: center;
}

/* ============================================
   ABA: PRESENÇA
   ============================================ */

.presenca-acoes {
    display: flex;
    gap: var(--espaco-pequeno);
    align-items: center;
    margin-bottom: var(--espaco-grande);
    flex-wrap: wrap;
}

.presenca-contagem {
    font-size: 13px;
    color: var(--cor-neutra);
    font-weight: 600;
}

.presenca-barra-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--espaco-grande);
}
.presenca-barra {
    flex: 1;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}
.presenca-barra-preenchida {
    height: 100%;
    background: var(--cor-primaria);
    border-radius: 3px;
    transition: width 0.5s ease;
}
.presenca-barra-texto {
    font-size: 13px;
    font-weight: 600;
    color: var(--cor-primaria);
    min-width: 35px;
    text-align: right;
}

.presenca-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--espaco-pequeno);
}

.presenca-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: var(--borda-raio);
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao);
}
.presenca-card:hover {
    background: var(--cor-fundo-secundario);
}
.presenca-card-marcado {
    background: var(--cor-primaria-clara);
    border-color: var(--cor-primaria);
}

.presenca-foto {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    flex-shrink: 0;
}
.presenca-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.presenca-nome {
    font-size: 14px;
    color: #374151;
    flex: 1;
}

.presenca-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transicao), border-color var(--transicao);
}
.presenca-radio-marcado {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
}
.presenca-check-oculto {
    display: none;
}

/* ========== SISTEMA DE MOVIMENTO — Art. 20-A a 20-D ========== */

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--borda-raio);
}

.skeleton-texto { height: 16px; margin-bottom: 8px; }
.skeleton-titulo { height: 24px; width: 60%; margin-bottom: 12px; }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }
.skeleton-card { height: 120px; }

/* ============================================
   PÁGINA: MATÉRIAS LEGISLATIVAS (Art. 4º)
   ============================================ */

.materia-titulo {
    font-weight: 700;
    font-size: 14px;
    color: var(--cor-texto);
    margin-bottom: 2px;
}

.materia-ementa {
    font-size: 13px;
    color: var(--cor-neutra);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.coluna-id-materia {
    white-space: nowrap;
    font-weight: 600;
    font-size: 13px;
    width: 130px;
}

.coluna-tramitando {
    text-align: center;
    width: 100px;
}

.tramitando-sim {
    color: var(--cor-sucesso);
    font-size: 18px;
    font-weight: 700;
}

.tramitando-nao {
    color: var(--cor-perigo);
    font-size: 16px;
    font-weight: 700;
}

.tramitando-elaboracao {
    color: var(--cor-alerta);
    font-size: 16px;
    font-weight: 700;
}

.coluna-centro {
    text-align: center;
}

.autoria-controles {
    display: flex;
    align-items: center;
    gap: var(--espaco-medio);
    padding-bottom: var(--espaco-medio);
    border-bottom: 1px solid var(--cor-borda);
    position: relative;
    z-index: 1;
}

.autoria-select-wrapper {
    min-width: 240px;
    max-width: 340px;
    flex: 1;
}

.autoria-select-wrapper .campo-grupo {
    margin-bottom: 0;
}

.autoria-checkbox-label {
    white-space: nowrap;
    flex-shrink: 0;
}

.autoria-autor-celula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-medio);
}

.autoria-tabela {
    margin-top: var(--espaco-medio);
}

.doc-form-area {
    padding-bottom: var(--espaco-medio);
    border-bottom: 1px solid var(--cor-borda);
    margin-bottom: var(--espaco-medio);
}

.doc-modo-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: var(--espaco-medio);
}

.doc-modo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--borda-raio);
    background: var(--cor-fundo);
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-tamanho-pequeno);
    cursor: pointer;
    transition: all 0.15s;
}

.doc-modo-btn:hover {
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
}

.doc-modo-btn.ativo {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
}

.doc-form-upload {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-medio);
}

/* Título e Tipo identificam o documento — ficam lado a lado, no topo. */
.doc-upload-identificacao {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-medio);
}

.doc-upload-identificacao .campo-grupo {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

/* Largura fixa: um "Tipo..." não merece a mesma largura de um título. */
.doc-upload-tipo {
    flex: 0 0 200px;
}

/* O botão fica no centro óptico da zona de arrastar. */
.doc-upload-row {
    display: flex;
    align-items: center;
    gap: var(--espaco-medio);
}

/* `.campo-grupo` reserva 4px embaixo para a mensagem de erro. Sem zerá-los, o centro
   do invólucro não é o centro da caixa tracejada, e o botão desce 2px. */
.doc-upload-row .campo-grupo {
    margin-bottom: 0;
    padding-bottom: 0;
    flex: 1;
    min-width: 0;
}

/* Linha do modo "vincular". Classe própria: antes reusava `.autoria-controles`, que
   traz border-bottom e desenhava uma segunda linha dentro do .doc-form-area. */
.doc-vinculo-row {
    display: flex;
    align-items: center;
    gap: var(--espaco-medio);
}

.doc-vinculo-row .campo-grupo {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

@media (max-width: 720px) {
    .doc-upload-identificacao,
    .doc-upload-row,
    .doc-vinculo-row {
        flex-direction: column;
        align-items: stretch;
    }
    .doc-upload-tipo { flex: 1 1 auto; }
}

.doc-link-arquivo,
.doc-link-oficial {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cor-primaria);
    text-decoration: none;
}

.doc-link-arquivo:hover,
.doc-link-oficial:hover {
    text-decoration: underline;
}

.tram-form-area {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-pequeno);
    padding-bottom: var(--espaco-medio);
    border-bottom: 1px solid var(--cor-borda);
    margin-bottom: var(--espaco-medio);
}

.tram-form-linha {
    display: flex;
    align-items: flex-end;
    gap: var(--espaco-medio);
}

.tram-form-linha .campo-grupo {
    margin-bottom: 0;
}

.tram-campo-data {
    flex-shrink: 0;
    width: 160px;
}

.tram-campo-flex {
    flex: 1;
}

.tram-situacao-atual {
    display: flex;
    align-items: center;
    gap: var(--espaco-pequeno);
    margin-bottom: var(--espaco-medio);
}

.tram-situacao-rotulo {
    font-size: var(--fonte-tamanho-pequeno);
    color: var(--cor-texto-secundario);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tram-situacao-linha {
    font-size: var(--fonte-tamanho-pequeno);
    color: var(--cor-texto-secundario);
    margin-top: 2px;
}

.tram-edit-campos {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-pequeno);
}

.tram-edit-campos .campo-grupo {
    margin-bottom: 0;
}

.tram-situacao-select {
    display: flex;
    align-items: center;
    gap: var(--espaco-pequeno);
}

.tram-situacao-select .campo-grupo {
    margin-bottom: 0;
    flex: 1;
}

.tram-badge-preview {
    flex-shrink: 0;
}

.tram-aviso-situacoes {
    font-size: var(--fonte-tamanho-pequeno);
    color: var(--cor-texto-secundario);
    padding: var(--espaco-pequeno) 0;
}

.tram-aviso-situacoes a {
    color: var(--cor-primaria);
    text-decoration: none;
}

.tram-aviso-situacoes a:hover {
    text-decoration: underline;
}

.materia-dados-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--espaco-grande);
}

.radio-grupo {
    display: flex;
    gap: var(--espaco-grande);
    align-items: center;
    min-height: 42px;
}

.radio-opcao {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fonte-principal);
    font-size: 14px;
    color: var(--cor-texto);
    cursor: pointer;
}

.radio-opcao input[type="radio"],
.radio-opcao input[type="checkbox"] {
    accent-color: var(--cor-primaria);
    cursor: pointer;
}

.tramitacao-situacao {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: var(--borda-raio);
    padding: 10px 16px;
    font-size: 14px;
    color: #92400e;
    margin-bottom: var(--espaco-medio);
}

.tramitacao-encaminhado {
    font-size: 13px;
    color: var(--cor-neutra);
    margin-top: 4px;
}

.votacao-materia-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--borda-raio);
    padding: var(--espaco-grande);
    margin-bottom: var(--espaco-medio);
}

.votacao-materia-fase {
    font-size: 16px;
    font-weight: 700;
    color: var(--cor-texto);
    margin: 0 0 12px 0;
}

.votacao-materia-sessao {
    font-size: 14px;
    color: var(--cor-texto);
    margin-bottom: 16px;
    line-height: 1.5;
}

.votacao-materia-dados {
    list-style: disc;
    padding-left: 20px;
    font-size: 14px;
    color: var(--cor-texto);
    margin-bottom: 16px;
}

.votacao-materia-dados li {
    margin-bottom: 4px;
}

.votacao-materia-subtitulo {
    font-size: 14px;
    font-weight: 700;
    color: var(--cor-texto);
    margin: 0 0 8px 0;
}

.votacao-materia-votos {
    list-style: disc;
    padding-left: 20px;
    font-size: 14px;
    color: var(--cor-texto);
}

.votacao-materia-votos li {
    margin-bottom: 4px;
}

.materias-selecao-tipo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.materia-tipo-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: var(--borda-raio);
    cursor: pointer;
    font-family: var(--fonte-principal);
    white-space: nowrap;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.materia-tipo-card:hover {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(26, 84, 191, 0.08);
}

.materia-tipo-card-icone {
    font-size: 16px;
    font-weight: 700;
    color: var(--cor-primaria);
}

.materia-tipo-card-nome {
    font-size: 14px;
    font-weight: 500;
    color: var(--cor-texto);
}

.identificacao-projeto-campos {
    display: flex;
    align-items: center;
    gap: 6px;
}

.identificacao-projeto-prefixo {
    width: 80px;
    text-align: center;
    text-transform: uppercase;
}

.identificacao-projeto-numero {
    width: 80px;
    text-align: center;
}

.identificacao-projeto-ano {
    width: 80px;
    text-align: center;
}

.identificacao-projeto-sep {
    font-size: 18px;
    font-weight: 600;
    color: var(--cor-neutra);
}

.formulario-secao {
    border: 1px solid #e5e7eb;
    border-radius: var(--borda-raio);
    padding: var(--espaco-grande);
    margin-bottom: var(--espaco-grande);
}

.formulario-secao-titulo {
    font-family: var(--fonte-principal);
    font-size: 15px;
    font-weight: 600;
    color: var(--cor-texto);
    padding: 0 8px;
}

@media (max-width: 768px) {
    .materia-dados-grid {
        grid-template-columns: 1fr;
    }
    .materias-tipos-botoes {
        flex-direction: column;
    }
}

/* ============================================
   COMPONENTE: EDITOR DE DOCUMENTOS (Art. 4º)
   ============================================ */

.edoc-container {
    display: flex;
    flex-direction: column;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
    background: #f3f4f6;
    min-height: 600px;
}

.edoc-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px 10px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    border-radius: var(--borda-raio) var(--borda-raio) 0 0;
}

.edoc-grupo {
    display: flex;
    align-items: center;
    gap: 1px;
}

.edoc-sep {
    width: 1px;
    height: 24px;
    background: #d1d5db;
    margin: 0 6px;
    flex-shrink: 0;
}

.edoc-fonte-select .campo-grupo {
    margin-bottom: 0;
    padding-bottom: 0;
}

.edoc-fonte-select .select-custom-botao {
    height: 30px;
    min-width: 150px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 5px;
}

.edoc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    font-family: var(--fonte-principal);
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    transition: background 0.15s, color 0.15s;
}

.edoc-btn:hover {
    background: #f3f4f6;
}

.edoc-btn-ativo {
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
}

.edoc-cor-wrapper {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.edoc-cor-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.edoc-cor-preview {
    font-weight: 700;
    font-size: 14px;
    pointer-events: none;
    border-bottom: 3px solid currentColor;
    line-height: 1;
    padding-bottom: 2px;
}

.edoc-pagina-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px;
    overflow-y: auto;
    cursor: default;
}

.edoc-cabecalho-editavel {
    padding: 24px 40px 12px;
    font-family: var(--fonte-principal);
    font-size: 13px;
    line-height: 1.5;
    color: var(--cor-texto);
    outline: none;
    min-height: 40px;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='20' viewBox='0 0 4 20'%3E%3Cline x1='0.5' y1='0' x2='3.5' y2='0' stroke='%23333' stroke-width='1'/%3E%3Cline x1='2' y1='0' x2='2' y2='20' stroke='%23333' stroke-width='1'/%3E%3Cline x1='0.5' y1='20' x2='3.5' y2='20' stroke='%23333' stroke-width='1'/%3E%3C/svg%3E") 2 10, text;
}

.edoc-cabecalho-editavel:empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
}

.edoc-cabecalho-editavel img {
    max-height: 80px;
    margin-bottom: 8px;
}

.edoc-separador-cabecalho {
    margin: 0 40px;
    border-bottom: 1px solid #d1d5db;
}

.edoc-separador-rodape {
    margin: 0 40px;
    margin-top: auto;
    border-top: 1px solid #d1d5db;
}

.edoc-rodape-editavel {
    padding: 12px 40px 24px;
    text-align: center;
    font-family: var(--fonte-principal);
    font-size: 11px;
    line-height: 1.5;
    color: #6b7280;
    outline: none;
    min-height: 30px;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='20' viewBox='0 0 4 20'%3E%3Cline x1='0.5' y1='0' x2='3.5' y2='0' stroke='%23333' stroke-width='1'/%3E%3Cline x1='2' y1='0' x2='2' y2='20' stroke='%23333' stroke-width='1'/%3E%3Cline x1='0.5' y1='20' x2='3.5' y2='20' stroke='%23333' stroke-width='1'/%3E%3C/svg%3E") 2 10, text;
}

.edoc-rodape-editavel:empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
}

.edoc-cabecalho-readonly {
    padding: 24px 40px 12px;
    font-family: var(--fonte-principal);
    font-size: 13px;
    line-height: 1.5;
    color: var(--cor-texto);
}

.edoc-cabecalho-readonly img {
    max-height: 80px;
    margin-bottom: 8px;
}

.edoc-rodape-readonly {
    padding: 12px 40px 24px;
    text-align: center;
    font-family: var(--fonte-principal);
    font-size: 11px;
    line-height: 1.5;
    color: #6b7280;
}

.edoc-pagina {
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    border-radius: var(--borda-raio);
    border: 1px solid #d1d5db;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 32px;
}

.edoc-quebra-pagina-gap {
    width: 210mm;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.edoc-folha-fantasma {
    margin: 24px -40px 0;
    user-select: none;
    background: #fff;
}

.edoc-fantasma-bloco {
    pointer-events: none;
}

.edoc-folha-fantasma-gap {
    background: #e5e7eb;
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edoc-quebra-pagina-texto {
    font-family: var(--fonte-principal);
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: #f87171;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--borda-pilula);
    white-space: nowrap;
}

.edoc-conteudo {
    display: flex;
    flex-direction: column;
    min-height: 297mm;
}

.edoc-conteudo .tiptap,
.edoc-conteudo .tiptap * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='20' viewBox='0 0 4 20'%3E%3Cline x1='0.5' y1='0' x2='3.5' y2='0' stroke='%23333' stroke-width='1'/%3E%3Cline x1='2' y1='0' x2='2' y2='20' stroke='%23333' stroke-width='1'/%3E%3Cline x1='0.5' y1='20' x2='3.5' y2='20' stroke='%23333' stroke-width='1'/%3E%3C/svg%3E") 2 10, text !important;
}

.edoc-conteudo .tiptap {
    padding: 32px 40px;
    flex: 1;
    font-family: var(--fonte-principal);
    font-size: 14px;
    line-height: 1.8;
    color: var(--cor-texto);
    outline: none;
    transform: translateZ(0);
}

.edoc-conteudo .tiptap p.is-editor-empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
    float: left;
    height: 0;
}

.edoc-conteudo .tiptap h1 { font-size: 24px; font-weight: 700; margin: 24px 0 12px; }
.edoc-conteudo .tiptap h2 { font-size: 20px; font-weight: 700; margin: 20px 0 10px; }
.edoc-conteudo .tiptap h3 { font-size: 17px; font-weight: 600; margin: 16px 0 8px; }
.edoc-conteudo .tiptap h4 { font-size: 15px; font-weight: 600; margin: 14px 0 6px; }
.edoc-conteudo .tiptap p { margin: 0 0 8px; }
.edoc-conteudo .tiptap ul,
.edoc-conteudo .tiptap ol { margin: 8px 0; padding-left: 24px; }
.edoc-conteudo .tiptap li { margin-bottom: 4px; }
.edoc-conteudo .tiptap blockquote {
    border-left: 3px solid var(--cor-primaria);
    padding-left: 16px;
    margin: 12px 0;
    color: #6b7280;
    font-style: italic;
}
.edoc-conteudo .tiptap hr {
    border: none;
    border-top: 1px solid #d1d5db;
    margin: 16px 0;
}
.edoc-conteudo .tiptap a {
    color: var(--cor-primaria);
    text-decoration: underline;
    cursor: pointer;
}
.edoc-conteudo .tiptap img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 12px 0;
}
.edoc-conteudo .tiptap mark {
    background-color: #fef08a;
    padding: 1px 2px;
    border-radius: 2px;
}

.edoc-conteudo .tiptap table {
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0;
}
.edoc-conteudo .tiptap table td,
.edoc-conteudo .tiptap table th {
    border: 1px solid #d1d5db;
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
    min-width: 60px;
}
.edoc-conteudo .tiptap table th {
    background: #f3f4f6;
    font-weight: 600;
}
.edoc-conteudo .tiptap table .selectedCell {
    background: rgba(26, 84, 191, 0.08);
}

.pagina-documento {
    max-width: 100%;
}

.documento-meta {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: var(--espaco-medio);
    margin-bottom: var(--espaco-grande);
}

.documento-info-bar {
    display: flex;
    gap: var(--espaco-grande);
    padding: 10px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: var(--borda-raio);
    font-size: 13px;
    color: var(--cor-neutra);
    margin-bottom: var(--espaco-grande);
}

.edoc-conteudo-readonly {
    flex: 1;
    padding: 32px 40px;
    font-family: var(--fonte-principal);
    font-size: 14px;
    line-height: 1.8;
    color: var(--cor-texto);
}

.edoc-conteudo-readonly h1 { font-size: 24px; font-weight: 700; margin: 24px 0 12px; }
.edoc-conteudo-readonly h2 { font-size: 20px; font-weight: 700; margin: 20px 0 10px; }
.edoc-conteudo-readonly h3 { font-size: 17px; font-weight: 600; margin: 16px 0 8px; }
.edoc-conteudo-readonly h4 { font-size: 15px; font-weight: 600; margin: 14px 0 6px; }
.edoc-conteudo-readonly p { margin: 0 0 8px; }
.edoc-conteudo-readonly p:empty { min-height: 1.8em; }
.edoc-cabecalho-readonly p:empty { min-height: 1.5em; }
.edoc-rodape-readonly p:empty { min-height: 1.5em; }
.edoc-conteudo-readonly ul, .edoc-conteudo-readonly ol { margin: 8px 0; padding-left: 24px; }
.edoc-conteudo-readonly li { margin-bottom: 4px; }
.edoc-conteudo-readonly blockquote { border-left: 3px solid var(--cor-primaria); padding-left: 16px; margin: 12px 0; color: #6b7280; font-style: italic; }
.edoc-conteudo-readonly hr { border: none; border-top: 1px solid #d1d5db; margin: 16px 0; }
.edoc-conteudo-readonly a { color: var(--cor-primaria); text-decoration: underline; }
.edoc-conteudo-readonly img { max-width: 100%; height: auto; border-radius: 4px; margin: 12px 0; }
.edoc-conteudo-readonly mark { background-color: #fef08a; padding: 1px 2px; border-radius: 2px; }
.edoc-conteudo-readonly table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.edoc-conteudo-readonly table td, .edoc-conteudo-readonly table th { border: 1px solid #d1d5db; padding: 8px 12px; text-align: left; }
.edoc-conteudo-readonly table th { background: #f3f4f6; font-weight: 600; }

@page {
    size: A4;
    margin: 20mm 18mm;
}

@media print {
    body {
        background: #fff !important;
        min-height: 0 !important;
    }
    .conteudo-principal {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
    }
    body * { visibility: hidden; }
    .edoc-pagina-wrapper,
    .edoc-pagina-wrapper * { visibility: visible; }
    .edoc-pagina-wrapper {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
        overflow: visible;
        align-items: stretch;
    }
    .edoc-pagina {
        display: flex;
        flex-direction: column;
        box-shadow: none;
        border: none;
        width: 100%;
        min-height: 257mm;
        background-image: none !important;
    }
    .edoc-quebra-pagina { display: none !important; }
    .edoc-cabecalho {
        border: none;
    }
    .no-print { display: none !important; }
    .edoc-container {
        background: #fff !important;
        min-height: 0 !important;
        border: none !important;
    }
    .edoc-conteudo, .edoc-conteudo .tiptap, .edoc-conteudo-readonly {
        flex: 1;
        padding: 0;
        min-height: auto;
    }
    .edoc-cabecalho-editavel, .edoc-cabecalho-readonly { padding: 0 0 12px; }
    .edoc-rodape-editavel, .edoc-rodape-readonly { padding: 12px 0 0; }
    .edoc-separador-cabecalho, .edoc-separador-rodape { margin: 0; }
}

.camara-brasao-area {
    display: flex;
    justify-content: center;
    margin-bottom: var(--espaco-medio);
}

.camara-brasao-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.camara-brasao-img {
    max-width: 160px;
    max-height: 160px;
    object-fit: contain;
    border-radius: var(--borda-raio);
    border: 1px solid #e5e7eb;
    padding: 8px;
    background: #fff;
}

.camara-brasao-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px;
    border: 2px dashed #d1d5db;
    border-radius: var(--borda-raio);
    cursor: pointer;
    color: var(--cor-neutra);
    font-size: 14px;
    transition: border-color var(--transicao);
    width: 100%;
    max-width: 300px;
}

.camara-brasao-vazio:hover {
    border-color: var(--cor-primaria);
}

.camara-vis-header {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
    border-radius: var(--borda-raio);
    border-left: 4px solid var(--cor-primaria);
    margin-bottom: var(--espaco-grande);
}

.camara-vis-header .camara-brasao-img {
    flex-shrink: 0;
    border: none;
    padding: 0;
}

.camara-vis-nome {
    font-size: 20px;
    font-weight: 700;
    color: var(--cor-texto);
    margin: 0 0 4px;
}

.camara-vis-local {
    font-size: 14px;
    color: var(--cor-primaria);
    font-weight: 500;
    margin: 0;
}

.camara-vis-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espaco-medio);
    margin-bottom: var(--espaco-grande);
}

.camara-vis-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--borda-raio);
    padding: 14px 18px;
    border-left: 3px solid var(--cor-primaria-clara);
}

.camara-vis-card-rotulo {
    font-size: 11px;
    font-weight: 600;
    color: var(--cor-neutra);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.camara-vis-card-valor {
    font-size: 15px;
    font-weight: 500;
    color: var(--cor-texto);
    word-break: break-all;
}

.camara-vis-secao {
    margin-top: var(--espaco-medio);
    padding: 16px 20px;
    background: #fafbfc;
    border: 1px solid #e5e7eb;
    border-radius: var(--borda-raio);
}

.camara-vis-secao-titulo {
    font-size: 11px;
    font-weight: 600;
    color: var(--cor-neutra);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.camara-vis-html {
    font-size: 13px;
    line-height: 1.6;
    color: var(--cor-texto);
}

.camara-vis-html a {
    color: var(--cor-primaria);
    text-decoration: underline;
}

.estilos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 8px;
}

.estilo-card {
    border: 2px solid #e5e7eb;
    border-radius: var(--borda-raio);
    cursor: pointer;
    transition: border-color var(--transicao), box-shadow var(--transicao);
    overflow: hidden;
}

.estilo-card:hover {
    border-color: #93b4e8;
}

.estilo-card-ativo {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(26, 84, 191, 0.12);
}

.estilo-card-preview {
    background: #fff;
    font-family: var(--fonte-principal);
    pointer-events: none;
    height: 180px;
    overflow: hidden;
    position: relative;
    padding: 12px;
}

.estilo-card-preview > * {
    transform: scale(var(--preview-zoom, 0.65));
    transform-origin: top left;
    width: calc(100% / var(--preview-zoom, 0.65));
}

.estilo-card-nome {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cor-texto);
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.estilo-card-ativo .estilo-card-nome {
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
}

.estilos-atual {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.estilos-atual-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: var(--borda-raio);
}

.estilos-atual-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cor-texto);
    min-width: 80px;
}

.estilos-atual-nome {
    flex: 1;
    font-size: 13px;
    color: var(--cor-neutra);
}

.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.modal-estilos {
    background: #fff;
    border-radius: 12px;
    /* Era `width: 1100px` cravado, sem teto: em qualquer tela menor que isso o modal
       vazava pra fora. O `min()` mantém os 1100 onde cabem e encolhe onde não cabe. */
    width: min(1100px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    padding: 32px;
}

.modal-estilos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.modal-estilos-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--cor-texto);
    margin: 0;
}

.modal-estilos-fechar {
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-texto);
}

.modal-estilos-fechar:hover {
    background: #e5e7eb;
}

@media (min-width: 1441px) {
    .modal-estilos { width: 1200px; }
    .estilos-grid { grid-template-columns: repeat(3, 1fr); }
    .estilo-card-preview { height: 180px; }
}

@media (min-width: 769px) and (max-width: 1440px) {
    .modal-estilos { width: 750px; }
    .estilos-grid { grid-template-columns: repeat(2, 1fr); }
    .estilo-card-preview { height: 160px; }
}

@media (max-width: 768px) {
    .modal-estilos { width: 95%; padding: 16px; }
    .estilos-grid { grid-template-columns: 1fr; }
    .estilo-card-preview { height: 130px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   PAINEL DE VOTAÇÃO — Telão (claro)
   ========================================================================== */
.ptelao {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-medio);
    padding: var(--espaco-medio);
    min-height: calc(100vh - 120px);
    /* Régua para o cabeçalho decidir quando empilhar (ver `@container telao` abaixo).
       Nomeado porque há DUAS réguas aninhadas aqui: esta mede o cartão do cabeçalho
       dentro da página; a de dentro (`cabecalho`) mede o conteúdo dentro do cartão. */
    container: telao / inline-size;
}

/* `container-type` faz o nome da câmara medir por ESTE cartão, não pela janela.
   `flex-wrap` deixa a data/relógio caírem pra linha de baixo quando não couberem ao
   lado — assim o nome ganha a largura toda em vez de ser espremido por eles. */
.ptelao-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--espaco-medio);
    container: cabecalho / inline-size;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 16px;
    padding: 18px 26px;
    box-shadow: 0 4px 22px rgba(15, 23, 42, 0.05);
}
.ptelao-marca {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
/* Segura a data/relógio à direita mesmo quando caem sozinhos na segunda linha (com
   `space-between`, item único numa linha nova iria pra esquerda). */
.ptelao-cab-dir { margin-left: auto; }
.ptelao-brasao {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 10px;
    flex-shrink: 0;
}
.ptelao-brasao-vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
}
/* O nome da câmara NUNCA quebra: é identidade, não parágrafo — "Câmara Municipal de
   Presidente Dutra (1)" partido ao meio parece defeito. Mas `nowrap` sozinho só troca
   quebra por transbordo, então ele encolhe junto: a conta estima o nome em ~21em de
   largura e desconta o que o brasão e o respiro já comem do cartão.
   Vale a pena porque isto é produto: cada câmara terá um nome de tamanho diferente. */
.ptelao-camara-nome {
    margin: 0;
    white-space: nowrap;
    font-size: clamp(12px, calc((100cqw - 104px) / 21), 22px);
    font-weight: 700;
    color: var(--cor-primaria-escura);
    line-height: 1.15;
}
.ptelao-camara-local {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--cor-neutra);
}
.ptelao-tempo {
    display: flex;
    align-items: baseline;
}
.ptelao-data {
    font-size: 15px;
    font-weight: 600;
    color: var(--cor-neutra);
}
.ptelao-data::after {
    content: "—";
    margin: 0 10px;
    font-weight: 400;
}
.ptelao-relogio {
    font-size: 24px;
    font-weight: 700;
    color: var(--cor-primaria);
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

.ptelao-corpo {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--espaco-medio);
    align-items: start;
    flex: 1;
    min-height: 0;
}
.ptelao-grade-area {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-medio);
}

/* A faixa na lateral liga este banner à família de cartões do sistema ([[Card Pendência]],
   as linhas em cartão das listas) — antes era um retângulo branco solto, sem parentesco
   com nada. */
.ptelao-materia {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 16px;
    padding: 20px 26px;
    box-shadow: 0 4px 22px rgba(15, 23, 42, 0.05);
}
.ptelao-materia-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.ptelao-materia-sub {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cor-primaria);
}
.ptelao-materia-tipo {
    font-size: 12px;
    font-weight: 600;
    color: var(--cor-neutra);
    background: #f3f4f6;
    padding: 3px 10px;
    border-radius: 20px;
}
/* Ordem do dia: "Matéria 2 de 5" à direita da faixa. */
.ptelao-materia-ordem {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 4px 12px;
    border-radius: var(--borda-pilula);
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    white-space: nowrap;
}
/* Quórum de instalação na tela de frequência. */
.ptelao-quorum-inst {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 5px 14px;
    border-radius: var(--borda-pilula);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.ptelao-quorum-inst::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.ptelao-quorum-inst-ok { color: var(--cor-sucesso); background: #e7f5ec; }
.ptelao-quorum-inst-falta { color: var(--cor-alerta); background: #fbf0e0; }
.ptelao-materia-titulo {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
}
.ptelao-materia-ementa {
    margin: 6px 0 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ptelao-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--pcard, 140px));
    justify-content: center;
    gap: 12px;
    align-content: start;
}
.ptelao-card {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1.2;
    overflow: hidden;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.ptelao-card-pendente { opacity: 0.9; }
.ptelao-card-sim { border-color: var(--cor-sucesso); background: #f0fdf4; }
/* Votação secreta: votou, sem revelar direção — azul neutro, nunca verde/vermelho. */
.ptelao-card-votou { border-color: var(--cor-primaria); background: var(--cor-primaria-clara); }
.ptelao-card-nao { border-color: var(--cor-perigo); background: #fef2f2; }
.ptelao-card-abs { border-color: var(--cor-neutra); background: #f9fafb; }
.ptelao-card-ausente { opacity: 0.4; }

.ptelao-card-foto {
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: cover;
    display: block;
}
.ptelao-card-foto-vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    font-size: 3rem;
    font-weight: 700;
}
.ptelao-selo {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    z-index: 2;
}
.ptelao-selo-sim { background: var(--cor-sucesso); }
.ptelao-selo-nao { background: var(--cor-perigo); }
.ptelao-selo-abs { background: var(--cor-neutra); }
.ptelao-card-info {
    flex-shrink: 0;
    padding: 6px 6px 7px;
    background: var(--cor-primaria);
    text-align: center;
}
.ptelao-card-sim .ptelao-card-info { background: var(--cor-sucesso); }
.ptelao-card-votou .ptelao-card-info { background: var(--cor-primaria); }
.ptelao-card-nao .ptelao-card-info { background: var(--cor-perigo); }
.ptelao-card-abs .ptelao-card-info { background: var(--cor-neutra); }
.ptelao-card-presente { border-color: var(--cor-primaria); }
.ptelao-card-presente .ptelao-card-info { background: var(--cor-primaria); }
.ptelao-selo-presente { background: var(--cor-primaria); }
.ptelao-card-nome {
    font-size: var(--pnome, 13px);
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ptelao-card-partido {
    font-size: calc(var(--pnome, 13px) * 0.72);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    margin-top: 0;
    line-height: 1.2;
}

.ptelao-lateral {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-medio);
}
.ptelao-placar {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 22px rgba(15, 23, 42, 0.05);
}
.ptelao-placar-bloco {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 11px 22px;
    border-bottom: 1px solid #f1f3f7;
}
.ptelao-placar-bloco:last-child { border-bottom: none; }
.ptelao-placar-num {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -1px;
}
.ptelao-placar-rotulo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}
.ptelao-sim .ptelao-placar-num, .ptelao-sim .ptelao-placar-rotulo { color: var(--cor-sucesso); }
.ptelao-nao .ptelao-placar-num, .ptelao-nao .ptelao-placar-rotulo { color: var(--cor-perigo); }
.ptelao-abs .ptelao-placar-num, .ptelao-abs .ptelao-placar-rotulo { color: var(--cor-neutra); }
.ptelao-total { background: var(--cor-primaria-escura); }
.ptelao-total .ptelao-placar-num, .ptelao-total .ptelao-placar-rotulo { color: #fff; }

.ptelao-infobox {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 4px 22px rgba(15, 23, 42, 0.05);
}
.ptelao-info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ptelao-info-rotulo {
    font-size: 13px;
    color: var(--cor-neutra);
}
.ptelao-info-valor {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    font-variant-numeric: tabular-nums;
}
.ptelao-quorum {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ptelao-quorum-barra {
    height: 8px;
    background: #f3f4f6;
    border-radius: 5px;
    overflow: hidden;
}
.ptelao-quorum-fill {
    height: 100%;
    background: var(--cor-primaria);
    border-radius: 5px;
    transition: width 0.4s ease;
}
.ptelao-quorum-min {
    font-size: 12px;
    color: var(--cor-neutra);
}
.ptelao-resultado {
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 14px;
    border-radius: 10px;
}
.ptelao-resultado-aprovada { background: #dcfce7; color: #166534; }
.ptelao-resultado-rejeitada { background: #fee2e2; color: #991b1b; }
.ptelao-resultado-nula { background: #f3f4f6; color: #6b7280; }

/* ---- Tela de espera do telão ----
   Fica horas projetada na parede do plenário. Não é um "estado vazio": é a identidade
   da câmara em repouso. Sangra até as bordas do conteúdo (padding 24px, topo 116px). */

.ptelao-espera {
    position: relative;
    overflow: hidden;
    margin: calc(-1 * var(--espaco-grande));
    min-height: calc(100vh - 116px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-primaria-escura);
    background: radial-gradient(120% 110% at 50% 0%, #eef3fc 0%, #ffffff 62%);
}

/* Halo suave atrás do brasão, na cor institucional. */
.ptelao-espera-halo {
    position: absolute;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 84, 191, 0.10) 0%, transparent 64%);
    animation: haloRespira 9s ease-in-out infinite;
}

@keyframes haloRespira {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50%      { transform: scale(1.08); opacity: 1; }
}

.ptelao-espera-conteudo {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--espaco-grande);
    padding: var(--espaco-extra);
}

/* O brasão da câmara traz um fundo cinza chapado embutido no próprio arquivo. Em vez de
   flutuar como um adesivo com borda dura, ele vira um MEDALHÃO deliberado: cantos
   arredondados, fio de borda e a mesma sombra do cartão da próxima sessão. */
.ptelao-espera-brasao {
    width: 172px;
}

img.ptelao-espera-brasao {
    height: auto;
    display: block;
    border-radius: 28px;
    border: 1px solid rgba(13, 45, 110, 0.07);
    box-shadow: 0 18px 40px rgba(13, 45, 110, 0.16);
    animation: brasaoFlutua 7s ease-in-out infinite;
}

.ptelao-espera-brasao-vazio {
    height: 172px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    border: 1px solid rgba(13, 45, 110, 0.07);
    background: #fff;
    box-shadow: 0 18px 40px rgba(13, 45, 110, 0.16);
    color: #a9b6cd;
}

@keyframes brasaoFlutua {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.ptelao-espera-nomes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaco-pequeno);
}

/* Nome aberto, sem caixa: sendo bloco centrado numa coluna flex, ele se dimensiona ao
   próprio conteúdo — cabe numa linha grande na largura do telão. clamp mantém proporção
   entre celular e projetor; balance só age no aperto extremo. */
.ptelao-espera-camara {
    font-family: var(--fonte-destaque);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-wrap: balance;
    color: var(--cor-primaria-escura);
}

.ptelao-espera-local {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cor-neutra);
}

/* Fio curto separando a identidade do relógio — a estrutura que a caixa dava, sem a caixa. */
.ptelao-espera-divisor {
    width: 72px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(26, 84, 191, 0.5), transparent);
}

.ptelao-espera-relogio {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* O relógio é o herói funcional: o maior elemento da tela, bem acima do nome. */
.ptelao-espera-hora {
    font-family: var(--fonte-destaque);
    font-size: clamp(64px, 9vw, 112px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--cor-primaria);
}

.ptelao-espera-data {
    margin-top: var(--espaco-pequeno);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cor-neutra);
}

.ptelao-espera-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--espaco-pequeno);
    padding: 10px 20px;
    border-radius: var(--borda-pilula);
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: var(--sombra-suave);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #4b5563;
}

.ptelao-espera-ponto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cor-alerta);
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.6);
    animation: pulsoEspera 2.2s infinite;
}

@keyframes pulsoEspera {
    70%  { box-shadow: 0 0 0 10px rgba(217, 119, 6, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
}

/* ---- Cartão da próxima sessão (tela de espera) ----
   Substitui a pílula de status quando há sessão marcada: dizer "aguardando" acima de
   "próxima sessão" é a mesma informação duas vezes. Composição de passagem aérea —
   trilho de acento, ícone, assunto à esquerda, horário à direita, separados por um fio. */

.ptelao-proxima {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--espaco-grande);
    width: min(680px, 92%);
    padding: var(--espaco-grande) var(--espaco-extra);
    overflow: hidden;
    text-align: left;
    border-radius: 18px;
    border: 1px solid #e8ecf3;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfe 100%);
    box-shadow: 0 12px 32px rgba(13, 45, 110, 0.09);
}

.ptelao-proxima-icone {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
}

.ptelao-proxima-corpo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ptelao-proxima-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cor-neutra);
}

.ptelao-proxima-titulo {
    font-family: var(--fonte-destaque);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--cor-primaria-escura);
    overflow-wrap: anywhere;
}

.ptelao-proxima-contagem {
    font-size: 15px;
    font-weight: 500;
    color: var(--cor-neutra);
}

.ptelao-proxima-quando {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    max-width: 34%;
    padding-left: var(--espaco-grande);
    border-left: 1px solid #eef1f6;
    text-align: right;
}

.ptelao-proxima-dia {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cor-neutra);
}

.ptelao-proxima-hora {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--cor-primaria);
}

/* Sem horário marcado, o lugar dos números recebe texto — que não pode ter o corpo deles. */
.ptelao-proxima-hora-vazia {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--cor-neutra);
}

@media (max-width: 860px) {
    .ptelao-proxima {
        flex-wrap: wrap;
        gap: var(--espaco-medio);
        padding: var(--espaco-medio) var(--espaco-grande);
    }
    .ptelao-proxima-corpo { flex-basis: calc(100% - 60px - var(--espaco-medio)); }
    .ptelao-proxima-quando {
        flex-basis: 100%;
        max-width: none;
        align-items: flex-start;
        padding: var(--espaco-medio) 0 0;
        border-left: 0;
        border-top: 1px solid #eef1f6;
        text-align: left;
    }
    .ptelao-proxima-titulo { font-size: 21px; }
    .ptelao-proxima-hora { font-size: 30px; }
}

@media (max-width: 720px) {
    .ptelao-espera-brasao { width: 120px; }
    .ptelao-espera-brasao-vazio { height: 120px; }
    .ptelao-espera-hora { font-size: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    .ptelao-espera-halo,
    .ptelao-espera-brasao,
    .ptelao-espera-ponto { animation: none; }
}

@media (max-width: 900px) {
    .ptelao-corpo { grid-template-columns: 1fr; }
}

/* Cabeçalho do telão no celular. Em linha ele é [brasão + nome] de um lado e
   [data — relógio] do outro; sem largura, a data (15px) não cabe ao lado do relógio e
   quebra em "16 de / julho de / 2026", deixando o travessão do `::after` órfão numa
   linha só dele. Empilha: marca em cima, data e hora embaixo, à esquerda. */
/* Sem largura para [marca] + [data — relógio] lado a lado, a data caía sozinha numa
   segunda linha, flutuando à direita — pior que a quebra que isso veio resolver. Aqui ela
   vira uma FAIXA de verdade: fio separando "quem é a câmara" de "quando é agora", e a
   linha usada de ponta a ponta em vez de um órfão no canto.

   É `@container` e não `@media` de propósito: quem manda é a largura do CARTÃO, não a da
   janela. O menu lateral come 68px, então a mesma janela produz cartões de larguras
   diferentes — medir a janela erraria o ponto da virada. */
@container telao (max-width: 890px) {
    .ptelao-cabecalho {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 14px 16px;
    }
    .ptelao-marca { gap: 12px; }
    .ptelao-brasao { width: 44px; height: 44px; }
    /* Sem `font-size` do nome aqui de propósito: quem manda é a régua da regra base, que
       encolhe o texto o quanto for preciso pra nunca quebrar. Um tamanho cravado aqui
       venceria a régua e traria a quebra de volta. */
    .ptelao-camara-local { font-size: 12px; }

    .ptelao-cab-dir {
        align-items: stretch;
        width: 100%;
        margin: 12px 0 0;
        padding-top: 10px;
        border-top: 1px solid #eef1f5;
    }

    /* Data numa ponta, relógio na outra: começo e fim de linha, em vez de amontoado. */
    .ptelao-tempo {
        width: 100%;
        justify-content: space-between;
        align-items: baseline;
    }
    /* Nunca partir a data: é uma unidade de leitura, não um parágrafo. */
    .ptelao-data { font-size: 13px; white-space: nowrap; }
    /* O travessão separava data e hora coladas. Nos extremos, ele sobra. */
    .ptelao-data::after { content: none; }
    .ptelao-relogio { font-size: 22px; }
    .ptelao-materia { padding: 14px 16px; }
}

/* Cartão estreito (celular de 320px): aqui vira física, não CSS. "Câmara Municipal de
   Presidente Dutra (1)" tem 40 caracteres; com o brasão ao lado sobram ~200px, e caber
   em uma linha exigiria fonte de ~5px. Nenhuma régua salva isso.
   A saída é dar a largura INTEIRA ao nome: o brasão sobe, o nome fica embaixo com o
   cartão todo à disposição — e aí cabe, sem quebrar e sem encolher ao absurdo.
   Mede o CABEÇALHO (régua de dentro), não a página: o que aperta o nome é a largura do
   cartão, não a da tela. */
@container cabecalho (max-width: 400px) {
    /* Centralizado, não à esquerda: empilhado e alinhado na margem, o brasão vira um selo
       solto num canto, sem nada ao lado pra ancorá-lo. No eixo central ele encabeça o
       bloco e volta a parecer parte da marca. */
    .ptelao-marca {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        width: 100%;
    }
    /* Sem o brasão ao lado, a conta muda: sobra o cartão inteiro menos o respiro. */
    .ptelao-camara-nome {
        font-size: clamp(10px, calc((100cqw - 40px) / 21), 22px);
    }
}

/* Duas coisas quebravam aqui no estreito:

   1. Lado a lado, o rótulo da sessão e a pílula não cabem, e cada um quebra no MEIO da
      própria frase ("FREQUÊNCIA —" / "1ª SESSÃO", "12 de 12" / "presentes"). Frase curta
      é unidade de leitura, não parágrafo: `nowrap` e cada uma na sua linha.

   2. Empilhados na ordem do HTML, a pílula caía ENTRE o rótulo e o título, cortando a
      relação entre os dois — lia-se "FREQUÊNCIA", depois um número solto, e só então o
      assunto. `display: contents` dissolve o agrupador para que rótulo, título e pílula
      virem irmãos e possam ser reordenados: rótulo → assunto → status, que é a ordem em
      que a informação realmente se lê. */
@container telao (max-width: 460px) {
    .ptelao-materia {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .ptelao-materia-topo { display: contents; }

    .ptelao-materia-sub { order: 1; margin-bottom: 3px; }
    .ptelao-materia-titulo { order: 2; font-size: 17px; }
    .ptelao-materia-tipo { order: 3; margin-top: 10px; }
    .ptelao-materia-ementa { order: 4; }

    .ptelao-materia-sub,
    .ptelao-materia-tipo { white-space: nowrap; }
}

/* ============================================
   TRIBUNA AO VIVO — cronômetro do orador + tela do telão + mesa de comando
   ============================================ */

/* ---- Cronômetro do orador (CronometroOrador): relógio regressivo compartilhado
   pelo telão (tamanho 'telao') e pela mesa de comando na aba (tamanho 'compacto').
   Verde enquanto sobra tempo, âmbar no último minuto, vermelho contando o excedente. */
.cron-orador {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}
.cron-orador-tempo {
    font-family: var(--fonte-destaque);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}
.cron-orador-estado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cor-neutra);
}
.cron-orador-pulso {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cor-sucesso);
    animation: cronOradorPulso 1.4s infinite;
}
@keyframes cronOradorPulso {
    0%   { box-shadow: 0 0 0 0 rgba(21, 115, 71, 0.5); }
    70%  { box-shadow: 0 0 0 9px rgba(21, 115, 71, 0); }
    100% { box-shadow: 0 0 0 0 rgba(21, 115, 71, 0); }
}

/* Cor por estado do tempo. */
.cron-orador-ok        .cron-orador-tempo { color: var(--cor-primaria); }
.cron-orador-aviso     .cron-orador-tempo { color: var(--cor-alerta); }
.cron-orador-estourado .cron-orador-tempo { color: var(--cor-perigo); }
.cron-orador-aviso     .cron-orador-pulso { background: var(--cor-alerta); }
.cron-orador-estourado .cron-orador-estado { color: var(--cor-perigo); }
.cron-orador-pausado { opacity: 0.72; }

/* Herói do telão (fundo azul): número dentro de um anel de progresso, em branco. */
.cron-orador-telao { gap: clamp(10px, 1.6vh, 20px); }
.cron-orador-telao .cron-orador-estado { font-size: clamp(13px, 1.4vw, 19px); color: var(--ptrib-texto2, #6b7280); }

.cron-orador-anel {
    position: relative;
    width: clamp(240px, 34vh, 400px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}
.cron-anel-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}
.cron-anel-trilho { fill: none; stroke: var(--ptrib-anel-trilho, #e2e8f2); stroke-width: 4; }
.cron-anel-arco {
    fill: none;
    stroke: var(--ptrib-tempo-ok, #1a54bf);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.95s linear, stroke 0.4s ease;
}
.cron-anel-centro { position: relative; font-size: clamp(46px, 8vh, 104px); }

/* Cores do relógio do telão, por token (branco na TV azul, primária no /painel claro). */
.cron-orador-telao .cron-orador-tempo { color: var(--ptrib-tempo-ok, #1a54bf); }
.cron-orador-telao.cron-orador-aviso .cron-orador-tempo { color: var(--ptrib-aviso, #d97706); }
.cron-orador-telao.cron-orador-aviso .cron-anel-arco { stroke: var(--ptrib-aviso, #d97706); }
.cron-orador-telao.cron-orador-estourado .cron-orador-tempo,
.cron-orador-telao.cron-orador-estourado .cron-orador-estado { color: var(--ptrib-perigo, #dc2626); }
.cron-orador-telao.cron-orador-estourado .cron-anel-arco { stroke: var(--ptrib-perigo, #dc2626); }
.cron-orador-telao .cron-orador-pulso { background: var(--ptrib-pulso, #157347); }

/* Mesa de comando (aba Tribuna): compacto ao lado dos controles. */
.cron-orador-compacto { gap: 4px; }
.cron-orador-compacto .cron-orador-tempo { font-size: 42px; }
.cron-orador-compacto .cron-orador-estado { font-size: 10px; letter-spacing: 0.1em; }

/* ---- Tela do telão quando há orador (PainelTribuna): tela cheia, identidade azul ---- */
/* Dois temas pelo mesmo componente, via tokens CSS: o padrão é CLARO (o /painel dentro
   do sistema, que combina com o app); na TV (/tv, tela cheia) vira AZUL animado. */
.ptribuna {
    /* Tokens — tema CLARO (padrão, /painel interno) */
    --ptrib-fundo:
        radial-gradient(1100px 640px at 78% 52%, rgba(26, 84, 191, 0.06), transparent 70%),
        linear-gradient(160deg, #ffffff 0%, #eef3f9 100%);
    --ptrib-texto: #1f2937;
    --ptrib-texto2: #6b7280;
    --ptrib-divisor: #e4e9f1;
    --ptrib-chip-bg: var(--cor-primaria-clara);
    --ptrib-chip-txt: var(--cor-primaria);
    --ptrib-rotulo-bg: #ffffff;
    --ptrib-rotulo-txt: var(--cor-primaria);
    --ptrib-rotulo-borda: #e4e9f1;
    --ptrib-brasao-bg: #ffffff;
    --ptrib-brasao-borda: #e4e9f1;
    --ptrib-foto-bg: #e8edf4;
    --ptrib-foto-borda: #dfe6ef;
    --ptrib-foto-sombra: 0 16px 40px rgba(15, 23, 42, 0.12);
    --ptrib-foto-inicial: #9aa7b8;
    --ptrib-anel-trilho: #e2e8f2;
    --ptrib-tempo-ok: var(--cor-primaria);
    --ptrib-aviso: var(--cor-alerta);
    --ptrib-perigo: var(--cor-perigo);
    --ptrib-pulso: var(--cor-sucesso);

    position: relative;
    overflow: hidden;
    margin: calc(-1 * var(--espaco-grande));
    min-height: calc(100vh - 116px);
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.4vh, 30px);
    padding: clamp(22px, 3.6vh, 52px) clamp(26px, 5vw, 84px);
    color: var(--ptrib-texto);
    background: var(--ptrib-fundo);
}

/* Tema AZUL — só na TV (tela cheia, público). */
.tv-pagina.tema-azul .ptribuna {
    --ptrib-fundo: linear-gradient(135deg, var(--cor-primaria-escura) 0%, var(--cor-primaria) 50%, #2e6fd4 100%);
    --ptrib-texto: #ffffff;
    --ptrib-texto2: rgba(255, 255, 255, 0.7);
    --ptrib-divisor: rgba(255, 255, 255, 0.22);
    --ptrib-chip-bg: rgba(255, 255, 255, 0.16);
    --ptrib-chip-txt: #ffffff;
    --ptrib-rotulo-bg: rgba(255, 255, 255, 0.14);
    --ptrib-rotulo-txt: #ffffff;
    --ptrib-rotulo-borda: rgba(255, 255, 255, 0.24);
    --ptrib-brasao-bg: rgba(255, 255, 255, 0.92);
    --ptrib-brasao-borda: transparent;
    --ptrib-foto-bg: rgba(255, 255, 255, 0.10);
    --ptrib-foto-borda: rgba(255, 255, 255, 0.85);
    --ptrib-foto-sombra: 0 26px 60px rgba(0, 0, 0, 0.30);
    --ptrib-foto-inicial: rgba(255, 255, 255, 0.9);
    --ptrib-anel-trilho: rgba(255, 255, 255, 0.16);
    --ptrib-tempo-ok: #ffffff;
    --ptrib-aviso: #fcd34d;
    --ptrib-perigo: #fca5a5;
    --ptrib-pulso: #6ee7a0;
}

/* Fundo ANIMADO (partículas da boas-vindas): só na TV azul. */
.ptribuna-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; display: none; }
.tv-pagina.tema-azul .ptribuna-decor { display: block; opacity: 0.6; }
/* Mesmo tratamento da votação: sem o anel central e a bolha radial brigando com o orador. */
.tv-pagina.tema-azul .ptribuna-decor .login-particula-6,
.tv-pagina.tema-azul .ptribuna-decor .login-particula-2 { display: none; }

/* Cabeçalho: identidade da câmara. */
.ptribuna-topo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-grande);
    padding-bottom: clamp(14px, 2vh, 24px);
    border-bottom: 1px solid var(--ptrib-divisor);
}
.ptribuna-marca { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ptribuna-brasao {
    flex: 0 0 auto;
    width: 58px; height: 58px;
    border-radius: 12px;
    object-fit: contain;
    background: var(--ptrib-brasao-bg);
    border: 1px solid var(--ptrib-brasao-borda);
    padding: 5px;
}
.ptribuna-brasao-vazio { color: var(--ptrib-texto2); padding: 0; }
.ptribuna-camara {
    margin: 0;
    font-family: var(--fonte-destaque);
    font-size: clamp(18px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.12;
    color: var(--ptrib-texto);
}
.ptribuna-local {
    margin: 3px 0 0;
    font-size: clamp(12px, 1.1vw, 15px);
    color: var(--ptrib-texto2);
}
.ptribuna-relogio { flex: 0 0 auto; text-align: right; }
.ptribuna-data {
    display: block;
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ptrib-texto2);
}
.ptribuna-hora {
    font-family: var(--fonte-destaque);
    font-size: clamp(26px, 3vw, 46px);
    font-weight: 700;
    line-height: 1;
    color: var(--ptrib-texto);
    font-variant-numeric: tabular-nums;
}

/* Rótulo "Tribuna": chip discreto. */
.ptribuna-rotulo {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    border-radius: var(--borda-pilula);
    background: var(--ptrib-rotulo-bg);
    border: 1px solid var(--ptrib-rotulo-borda);
    font-size: clamp(12px, 1.2vw, 16px);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ptrib-rotulo-txt);
}
.ptribuna-rotulo-pulso {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ptrib-pulso);
    animation: ptribunaPulso 1.6s infinite;
}
@keyframes ptribunaPulso {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* Herói: orador à esquerda, relógio (anel) à direita. */
.ptribuna-corpo {
    position: relative;
    z-index: 1;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(28px, 5vw, 88px);
    min-height: 0;
}
.ptribuna-orador {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
    min-width: 0;
}
.ptribuna-foto {
    flex: 0 0 auto;
    width: clamp(140px, 24vh, 300px);
    height: clamp(140px, 24vh, 300px);
    border-radius: 26px;
    object-fit: cover;
    border: 4px solid var(--ptrib-foto-borda);
    box-shadow: var(--ptrib-foto-sombra);
    background: var(--ptrib-foto-bg);
}
.ptribuna-foto-vazia {
    display: grid;
    place-items: center;
    font-family: var(--fonte-destaque);
    font-size: clamp(56px, 10vh, 128px);
    font-weight: 700;
    color: var(--ptrib-foto-inicial);
}
.ptribuna-ident { min-width: 0; }
.ptribuna-nome {
    margin: 0;
    font-family: var(--fonte-destaque);
    font-size: clamp(30px, 4vw, 64px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--ptrib-texto);
    text-wrap: balance;
}
.ptribuna-legenda {
    display: inline-block;
    margin: 14px 0 0;
    padding: 6px 16px;
    border-radius: var(--borda-pilula);
    background: var(--ptrib-chip-bg);
    font-size: clamp(14px, 1.4vw, 22px);
    font-weight: 600;
    color: var(--ptrib-chip-txt);
}
.ptribuna-assunto {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 18px 0 0;
    font-size: clamp(16px, 1.7vw, 26px);
    line-height: 1.35;
    color: var(--ptrib-texto2);
}
.ptribuna-assunto-rotulo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ptrib-texto2);
}

/* "A seguir" — o próximo orador da fila, no rodapé do telão da tribuna (temado). */
.ptribuna-proximo {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 18px;
    border-radius: var(--borda-pilula);
    background: var(--ptrib-chip-bg);
    font-size: clamp(14px, 1.4vw, 20px);
    font-weight: 600;
    color: var(--ptrib-texto);
}
.ptribuna-proximo-rotulo {
    font-size: clamp(10px, 1vw, 13px);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ptrib-texto2);
}

/* Telão estreito (retrato, TV pequena): empilha, tudo centrado. */
@media (max-width: 900px) {
    .ptribuna-topo { flex-wrap: wrap; }
    .ptribuna-corpo {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: clamp(20px, 5vh, 40px);
    }
    .ptribuna-orador { flex-direction: column; text-align: center; }
    .ptribuna-assunto { align-items: center; }
    .cron-orador-anel { width: clamp(200px, 56vw, 320px); }
    .cron-anel-centro { font-size: clamp(40px, 13vw, 88px); }
}

/* ---- Mesa de comando na aba Tribuna (.tribuna-atual) ---- */
.tribuna-atual {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--espaco-grande);
    margin-bottom: var(--espaco-medio);
    padding: var(--espaco-medio) var(--espaco-grande);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #f7fbf9);
    box-shadow: var(--sombra-suave);
}
.tribuna-atual-pausado {
    background: linear-gradient(180deg, #ffffff, #fdfaf3);
}
.tribuna-atual-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 220px;
}
.tribuna-atual-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cor-sucesso);
}
.tribuna-atual-pausado .tribuna-atual-rotulo { color: var(--cor-alerta); }
.tribuna-atual-pulso {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: ptribunaPulso 1.6s infinite;
}
.tribuna-atual-nome {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #1f2937;
}
.tribuna-atual-assunto {
    font-size: 13px;
    color: #6b7280;
}
.tribuna-atual-controles {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--espaco-pequeno);
}
.tribuna-atual-tempo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: var(--borda-pilula);
    background: #f1f5f9;
}
.tribuna-tempo-atual {
    min-width: 46px;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #334155;
}
.tribuna-linha-acoes {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-pequeno);
}
.tribuna-tempo-final {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--cor-neutra);
}

@media (prefers-reduced-motion: reduce) {
    .cron-orador-pulso,
    .ptribuna-rotulo-pulso,
    .tribuna-atual-pulso { animation: none; }
}

/* ============================================
   AJUSTES MÓVEIS TARDIOS
   Estas regras PRECISAM ficar no fim do arquivo. Os componentes que elas ajustam
   (.sessoes-filtros, .sessoes-tabela) são definidos por volta da linha 3765, enquanto o
   @media principal está na 645. Com a mesma especificidade vence quem vem por último —
   então, lá em cima, a regra base sobrescrevia o media query e o ajuste móvel só valia
   pela metade (foi exatamente o bug do modo cartão: `display:block` pegava, mas o
   `min-width: 560px` da base continuava valendo e a tabela vazava da tela).
   ============================================ */

@media (max-width: 768px) {
    /* ---- Filtros: grade em vez de coluna ----
       A base é `display: flex; align-items: center`. Virando só `flex-direction: column`,
       o `center` continuava valendo e encolhia cada campo até o conteúdo, jogando-o pro
       meio — campos estreitos e tortos. E seis filtros empilhados viravam meia tela de
       rolagem antes da tabela. Aqui: duas colunas quando cabem, uma quando não. */
    .sessoes-filtros {
        display: grid;
        /* DUAS colunas explícitas, não auto-fit: o auto-fit criava 3 colunas em larguras
           médias e um PAR de campos deixava a terceira vazia — grade capenga (visto na
           Matérias, que tem um bloco de 3 campos). Com 2 fixas, buraco é impossível:
           par preenche a linha, ímpar se estica pelas regras de span. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
    }
    /* O piso de 160px servia ao layout em linha; na grade quem manda é o `minmax`. */
    .sessoes-filtros .campo-grupo { min-width: 0; }

    /* ---- Tabela vira cartão ----
       Rolar de lado era consolo, não solução: metade da informação ficava fora da tela.
       E o `min-width: 560px` da base forçava rolagem até numa tabela de 2 colunas, que
       caberia folgada. Aqui cada linha vira um cartão "rótulo: valor", lido de cima pra
       baixo — zero rolagem lateral, com 2 ou com 6 colunas.
       O rótulo sai do `data-rotulo` que o TabelaLista põe em cada célula, já que neste
       modo o cabeçalho da tabela some. */
    .sessoes-tabela-container {
        overflow-x: visible;
        border: none;
        background: none;
        border-radius: 0;
    }

    .sessoes-tabela {
        min-width: 0;
        width: 100%;
    }
    .sessoes-tabela thead { display: none; }
    .sessoes-tabela,
    .sessoes-tabela tbody,
    .sessoes-tabela tr,
    .sessoes-tabela td { display: block; }

    /* Fala a mesma língua do [[Card Pendência]]: raio 12, faixa de destaque na lateral,
       sombra suave e um leve levantar ao tocar. Assim o cartão nasce parente do resto. */
    .sessoes-tabela tr {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-left: 4px solid var(--cor-primaria);
        border-radius: 12px;
        box-shadow: var(--sombra-suave);
        margin-bottom: var(--espaco-medio);
        padding-bottom: 6px;
        overflow: hidden;
        transition: box-shadow var(--transicao), transform var(--transicao);
    }
    .sessoes-tabela tbody tr:last-child { margin-bottom: 0; }
    .sessoes-tabela tbody tr:hover { background: #fff; }
    .sessoes-tabela tbody tr.linha-clicavel:active {
        transform: translateY(-1px);
        box-shadow: var(--sombra-elevada);
    }

    .sessoes-tabela td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--espaco-medio);
        text-align: right;
        padding: 7px 14px;
        border: none;
        /* Colunas com largura cravada pro modo tabela (`.coluna-data` tem 120px) não
           cabem aqui: rótulo + valor estouram e passam por cima um do outro. E o
           `nowrap` delas impediria a quebra que o cartão precisa. */
        width: auto;
        white-space: normal;
        /* `break-word` quebra na PALAVRA quando um texto longo não cabe. Era `anywhere`,
           que quebrava CARACTERE a caractere — e num texto espremido (o nome do vereador
           na célula estreita) isso empilhava o nome na vertical, uma letra por linha. */
        overflow-wrap: break-word;
    }

    /* A primeira coluna é sempre o identificador da linha (data, número, nome): vira o
       título do cartão, e não mais um par rótulo/valor perdido no meio. */
    .sessoes-tabela tbody td:first-child {
        background: #f8f9fb;
        border-bottom: 1px solid #eef0f3;
        padding: 10px 14px;
        margin-bottom: 4px;
        font-size: 15px;
        font-weight: 700;
        color: var(--cor-primaria-escura);
    }

    /* Cinza e miúdo de propósito: o que importa é o VALOR. Antes o rótulo vinha em azul
       forte e competia com o dado — daí o ar de planilha. */
    .sessoes-tabela td::before {
        content: attr(data-rotulo);
        flex: 0 0 auto;
        max-width: 42%;
        text-align: left;
        font-size: 10.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--cor-neutra);
    }

    /* "Nenhum registro" é recado, não par rótulo/valor: ocupa o cartão inteiro. */
    .sessoes-tabela td.sessoes-vazio {
        display: block;
        text-align: center;
    }
    .sessoes-tabela td.sessoes-vazio::before { content: none; }
}

/* ---- Tela inicial em aparelho estreito (≤420px) ----
   Fica aqui no fim pelo mesmo motivo do bloco acima: `.inicio-heroi` (linha ~736) e
   `.card-metrica` (~1047) nascem depois do @media principal (645), então lá em cima
   estas regras seriam engolidas pela base. */
@media (max-width: 420px) {
    /* O respiro de 32px de cada lado come 1/5 de uma tela de 320px: sobram ~224px de
       conteúdo, e com isso TODA frase quebra. Menos respiro devolve o texto. */
    .inicio-heroi { padding: var(--espaco-grande) var(--espaco-medio); }
    .card-metrica,
    .card-pendencia { padding: var(--espaco-medio); }

    /* Pílulas são frases curtas — unidade de leitura, não parágrafo. "SESSÃO EM
       ANDAMENTO" partido em duas linhas vira dois pedaços sem sentido. */
    .heroi-selo,
    .heroi-percentual { white-space: nowrap; }

    /* Cada botão vem embrulhado num <Link>, que encolhe até o texto: daí dois botões de
       larguras diferentes, um sob o outro, tortos. Empilhados e esticados, viram uma
       coluna de alvos iguais — e alvo grande é o que serve no dedo. */
    .heroi-acoes {
        flex-direction: column;
        align-items: stretch;
    }
    .heroi-acoes > a { width: 100%; }
    .heroi-acoes .botao {
        width: 100%;
        justify-content: center;
    }
}

/* ---- Gráfico de um dado só: o número É o gráfico ----
   Barra única não compara nada — e comparar é a única coisa que barra sabe fazer. O guia
   de visualização manda trocar a forma ("a one-bar bar chart → a stat tile"), não polir a
   barra. A câmara vive esse caso todo começo de legislatura. */
.grafico-destaque {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-pequeno);
    padding: var(--espaco-medio) 0;
}
.grafico-destaque-numeros {
    display: flex;
    align-items: baseline;
    gap: var(--espaco-pequeno);
}
.grafico-destaque-valor {
    font-family: var(--fonte-destaque);
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--cor-primaria-escura);
}
.grafico-destaque-total {
    font-size: 16px;
    font-weight: 600;
    color: var(--cor-neutra);
    font-variant-numeric: tabular-nums;
}
/* Barra de proporção deitada: mostra a mesma parte-do-todo sem fingir ser série. */
.grafico-destaque-trilho {
    height: 8px;
    border-radius: var(--borda-pilula);
    background: #f1f4f9;
    overflow: hidden;
}
.grafico-destaque-preenchido {
    height: 100%;
    border-radius: inherit;
    background: var(--cor-primaria);
    transition: width 0.6s ease;
}
.grafico-destaque-alerta .grafico-destaque-preenchido { background: var(--cor-alerta); }
.grafico-destaque-rotulo {
    font-size: 12px;
    color: var(--cor-neutra);
}

/* ---- Minigráfico de tendência (sparkline) ----
   Fica pronto e invisível: sem série, o componente devolve null. No dia em que o backend
   passar a mandar histórico, ele aparece em todos os cartões sem tocar na página. */
.minigrafico {
    position: relative;
    margin-top: var(--espaco-medio);
}
.minigrafico-svg {
    display: block;
    width: 100%;
    height: 30px;
    overflow: visible;
}
/* Traço de 2px, ponta redonda; `vector-effect` mantém a espessura mesmo com o SVG
   esticado (sem ele o `preserveAspectRatio: none` engorda a linha na horizontal). */
.minigrafico-linha {
    fill: none;
    stroke: var(--cor-neutra);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
/* Lastro a 10%: uma lavagem, nunca um bloco. */
.minigrafico-area { fill: currentColor; opacity: 0.1; stroke: none; }

.minigrafico-ponta {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    /* Anel na cor da superfície: mantém o ponto legível onde ele cruza a linha. */
    box-shadow: 0 0 0 2px #fff;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.minigrafico-alta   { color: var(--cor-sucesso); }
.minigrafico-queda  { color: var(--cor-perigo); }
.minigrafico-estavel { color: var(--cor-neutra); }
.minigrafico-alta .minigrafico-linha  { stroke: var(--cor-sucesso); }
.minigrafico-queda .minigrafico-linha { stroke: var(--cor-perigo); }

.minigrafico-variacao {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 12px;
}
.minigrafico-numero { font-weight: 700; }
/* O texto do período usa cor de texto, não a cor do dado: quem carrega a identidade é a
   seta colorida ao lado. */
.minigrafico-periodo { color: var(--cor-neutra); font-weight: 400; }

/* ============================================
   GRÁFICO DE LINHA — a presença ao longo das sessões
   Responde o que o herói NÃO responde: está caindo? O herói diz quantos vieram hoje;
   a linha diz se a casa está esvaziando. Era a única pergunta que faltava na tela.
   ============================================ */
.grafico-linha {
    position: relative;
    width: 100%;
}
.linha-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Grade e eixo recuam um passo do fundo: fio SÓLIDO, nunca tracejado — tracejo lê como
   "projeção" ou "limite" quando é só grade. */
.linha-grade {
    stroke: #eef2f8;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.linha-eixo,
.linha-rotulo {
    font-size: 9px;
    font-weight: 600;
    fill: var(--cor-neutra);
    font-variant-numeric: tabular-nums;
}

/* Traço de 2px com ponta redonda. `non-scaling-stroke` mantém a espessura mesmo com o
   SVG esticado — sem ele a linha engorda na horizontal e afina na vertical. */
.linha-traco {
    fill: none;
    stroke: var(--cor-primaria);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    /* Desenha da esquerda para a direita ao entrar: o olho percorre o tempo. */
    stroke-dasharray: 1000;
    animation: linhaDesenha 1.1s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes linhaDesenha {
    from { stroke-dashoffset: 1000; }
    to   { stroke-dashoffset: 0; }
}

/* Lavagem sob a linha: dá corpo sem virar bloco. Some ao descer. */
.linha-area {
    stroke: none;
    animation: linhaAreaEntra 0.8s ease 0.5s both;
}
@keyframes linhaAreaEntra { from { opacity: 0; } to { opacity: 1; } }

/* Anel na cor da superfície: mantém o ponto legível onde ele cruza a linha. */
.linha-ponto {
    fill: var(--cor-primaria);
    stroke: #fff;
    stroke-width: 2;
    animation: linhaPontoEntra 0.3s cubic-bezier(.34, 1.56, .64, 1) both;
}
.linha-ponto-ultimo { stroke-width: 2.5; }
@keyframes linhaPontoEntra {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1); }
}
.linha-ponto { transform-box: fill-box; transform-origin: center; }

/* Rótulo direto SÓ na ponta. Valor em cada ponto vira poluição e ninguém lê — o eixo e
   os rótulos de baixo carregam o resto. */
.linha-ultimo {
    position: absolute;
    transform: translate(-50%, -170%);
    padding: 2px 7px;
    border-radius: var(--borda-pilula);
    background: var(--cor-primaria);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    animation: linhaAreaEntra 0.4s ease 1.1s both;
}

@media (prefers-reduced-motion: reduce) {
    .linha-traco, .linha-area, .linha-ponto, .linha-ultimo { animation: none; }
    .linha-traco { stroke-dasharray: none; }
}

/* ---- Meu perfil: foto + identificação ---- */
.perfil-foto-area {
    display: flex;
    align-items: center;
    gap: var(--espaco-grande);
}
.perfil-foto-nome {
    margin: 0;
    font-family: var(--fonte-destaque);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cor-primaria-escura);
}
.perfil-foto-cargo {
    margin: 2px 0 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--cor-neutra);
}
@media (max-width: 560px) {
    .perfil-foto-area { flex-direction: column; align-items: flex-start; gap: var(--espaco-medio); }
}

/* Cada cartão declara a cor do seu traço; o degradê do filete consome esta variável.
   Assim o acento entra sem sobrescrever o `background`, que carrega o degradê. */
.card-metrica:has(.metrica-icone-primaria) { --cor-traco: var(--cor-primaria); }
.card-metrica:has(.metrica-icone-sucesso)  { --cor-traco: #15803d; }
.card-metrica:has(.metrica-icone-alerta)   { --cor-traco: #b45309; }
.card-metrica:has(.metrica-icone-neutra)   { --cor-traco: #4b5563; }

/* ============================================
   AJUSTES MÓVEIS — formulários e barras de ação
   No fim do arquivo de propósito (mesma armadilha de cascata de sempre): estes
   componentes são definidos lá em cima, e a regra base venceria um @media anterior.
   ============================================ */
@media (max-width: 640px) {
    /* Toda GridFormulario vira uma coluna. Vence a variável --grid-colunas do componente
       porque é uma regra posterior de mesma especificidade — não precisa de !important. */
    .grid-formulario { grid-template-columns: 1fr; }

    /* Cancelar/Salvar não cabem lado a lado em 320px: empilham, largura cheia, ação
       principal em cima (é onde o polegar chega primeiro num layout de baixo). */
    .formulario-acoes,
    .formulario-rodape-fixo {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .formulario-acoes .botao,
    .formulario-rodape-fixo .botao { width: 100%; }

    /* Nome do vereador longo (ex.: "Antonio Pereira Melo") era cortado por falta de
       quebra. `break-word` quebra na PALAVRA quando não cabe — NUNCA letra por letra.
       (Era `anywhere`, que quebrava caractere a caractere e deixava o nome VERTICAL.) */
    .vereador-nome-foto > div { min-width: 0; flex: 1; }
    .vereador-nome-linha,
    .vereador-info-linha { overflow-wrap: break-word; }
}

/* ============================================
   AJUSTES MÓVEIS — cartões de vereador e cabeçalho
   ============================================ */
@media (max-width: 768px) {
    /* As regras da célula de vereador vivem num bloco só — "FICHA DE VEREADOR" no fim do
       arquivo. Havia três camadas de regras se sobrescrevendo aqui; foi consolidado. */

    /* Ações no cartão: a etiqueta "Ações" à esquerda, os botões agrupados à direita —
       em vez de espalhados pela linha inteira. */
    .sessoes-tabela td.coluna-acoes {
        justify-content: flex-start;
        gap: var(--espaco-pequeno);
        flex-wrap: wrap;
    }
    .sessoes-tabela td.coluna-acoes::before { margin-right: auto; }

    /* No TABLET (≤768) o cabeçalho vira coluna (título em cima, ações embaixo) e os botões
       cabem lado a lado na largura cheia — deixa natural, sem esticar (esticar deixava o
       Excluir gigante). Os botões vivem em `.sessoes-cabecalho-acoes`, não no container. */
    .cabecalho-pagina-acoes { width: 100%; }
    /* Botões no tamanho NATURAL, centralizados. Quebram para a linha de baixo se não
       couberem, mas continuam centralizados. Era só isso que o usuário pediu — eu que
       compliquei com largura cheia e coluna. */
    .sessoes-cabecalho-acoes { flex-wrap: wrap; justify-content: center; }
}

/* Conteúdo do modal de "votação iniciada" (VigiaVotacao). */
.vigia-votacao-identificacao {
    margin: 0;
    font-weight: 700;
    color: var(--cor-primaria-escura);
    font-size: 15px;
}
.vigia-votacao-titulo {
    margin: 4px 0 0;
    color: var(--cor-neutra);
    font-size: 14px;
}

/* ============================================
   FICHA DE VEREADOR NO CELULAR — retrato centralizado
   Único bloco que estiliza a linha de vereador no mobile (as camadas parciais anteriores
   foram removidas). Escopo por :has(.celula-vereador): nenhuma outra tabela é afetada.

   Por que retrato, e não foto-ao-lado: a 320px sobram ~130px para o nome ao lado da
   foto — QUALQUER nome quebra em 3–4 linhas ali. Centralizado, o nome ganha a largura
   inteira do cartão e a ficha lê como cartão de contato, não como tabela espremida.
   ============================================ */
@media (max-width: 768px) {
    /* — Cabeça: foto no topo, nome embaixo com a largura toda — */
    .sessoes-tabela td.celula-vereador {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
        padding: 18px 16px 14px;
        border-bottom: 1px solid #eef0f3;
    }
    .sessoes-tabela td.celula-vereador::before { display: none; }

    .sessoes-tabela td.celula-vereador .vereador-nome-foto {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
    }
    /* Aro branco + fio: destaca o retrato sobre a faixa clara. */
    .sessoes-tabela td.celula-vereador .avatar-tabela {
        width: 68px;
        height: 68px;
        flex-shrink: 0;
        box-shadow: 0 0 0 3px #fff, 0 0 0 4px #dbe3f0;
    }
    .sessoes-tabela td.celula-vereador .vereador-nome-foto > div {
        flex: none;
        width: 100%;
        min-width: 0;
    }
    /* O nome centralizado; o badge (ex.: Licença Saúde) flui junto, também centrado. */
    .sessoes-tabela td.celula-vereador .vereador-nome-linha {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 4px 8px;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;
    }
    .sessoes-tabela td.celula-vereador .vereador-info-linha {
        margin-top: 2px;
        font-size: 13px;
    }

    /* — Corpo: rótulo em cima, valor embaixo. Lado a lado a 320px o valor quebrava
         ("01/01/2025 —" numa linha, o resto na outra). Empilhado, a data cabe inteira. — */
    .sessoes-tabela tr:has(.celula-vereador) td:not(.celula-vereador):not(.coluna-acoes) {
        display: block;
        text-align: center;
        padding: 9px 16px;
        font-size: 14px;
        font-weight: 600;
        color: var(--cor-primaria-escura);
        font-variant-numeric: tabular-nums;
    }
    .sessoes-tabela tr:has(.celula-vereador) td:not(.celula-vereador):not(.coluna-acoes)::before {
        display: block;
        max-width: none;
        text-align: center;
        margin: 0 0 3px;
        font-size: 10px;
        letter-spacing: 0.08em;
    }

    /* Período do mandato na ficha: as datas EMPILHAM e o traço some. Travessão pendurado
       no fim da linha parecia erro de digitação; EMPILHADO sem o traço, duas datas sob a
       foto viravam lápide (o usuário notou, rindo — e com razão: é a gramática visual de
       túmulo, pior ainda no afastado em preto-e-branco). UMA linha, corpo 13px, resolve
       os dois: cabe inteira até nos 320px. */
    .sessoes-tabela tr:has(.celula-vereador) .periodo-mandato {
        display: inline-flex;
        flex-direction: row;
        gap: 5px;
        font-size: 13px;
        white-space: nowrap;
    }
    .sessoes-tabela tr:has(.celula-vereador) .periodo-sep {
        display: inline;
        color: var(--cor-neutra);
        font-weight: 400;
    }

    /* — Rodapé: ações centralizadas, separadas por um fio — */
    .sessoes-tabela tr:has(.celula-vereador) td.coluna-acoes {
        justify-content: center;
        gap: var(--espaco-pequeno);
        padding: 10px 16px 14px;
        border-top: 1px solid #f1f5f9;
    }
    .sessoes-tabela tr:has(.celula-vereador) td.coluna-acoes::before { display: none; }
}

/* ============================================
   CABEÇALHO NO CELULAR (≤520px) — botões empilhados, MESMA largura, ação principal
   em cima ("+ Nova" é o último no DOM; o column-reverse o põe primeiro).
   No tablet (521–768) ficam lado a lado, centralizados, largura natural.
   ============================================ */
@media (max-width: 520px) {
    .sessoes-cabecalho-acoes {
        flex-direction: column-reverse;
        align-items: center;
        width: 100%;
    }
    /* Mesma largura para os dois: cada filho (o botão solto e o Link que envolve o
       outro) ocupa a largura disponível, com teto pra não esticar demais. */
    .sessoes-cabecalho-acoes > * { width: 100%; max-width: 340px; }
    .sessoes-cabecalho-acoes .botao { width: 100%; justify-content: center; }
}

/* Período de mandato (base, desktop): datas + travessão em linha, e cada data é uma
   unidade — nunca quebra por dentro. Na ficha do celular o travessão some e as datas
   empilham (regra no bloco FICHA DE VEREADOR acima). */
.periodo-mandato {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.periodo-data { white-space: nowrap; }

/* Título do accordion no mobile: "1ª Legislatura" quebrava em duas linhas, espremido
   pelos controles à direita (lápis, badge, seta). Título de seção não quebra: fica numa
   linha sempre, e um título longo demais ganha reticências — partir ao meio lê como
   defeito. O `min-width: 0` no .accordion-textos é o que permite ao título encolher
   (filho de flex não encolhe abaixo do conteúdo sem ele). */
@media (max-width: 768px) {
    .accordion-textos { min-width: 0; }
    .accordion-titulo {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* FormularioInline no mobile: é um flex em LINHA sem quebra (Select + botão) — em 320px
   o botão era decepado pela borda ("+ Incl…"). Empilha: campo em cima com a largura
   toda, botão embaixo inteiro. Global: pega Vereadores, Mesa Diretora e qualquer tela
   que use o componente. */
@media (max-width: 640px) {
    .formulario-inline {
        flex-direction: column;
        align-items: stretch;
    }
    .formulario-inline > * { width: 100%; }
    .formulario-inline .botao { width: 100%; justify-content: center; }
}

/* ============================================
   ABAS — sombras que avisam que a barra desliza
   O JS do componente (Abas.jsx) mede o scroll e liga as classes: a sombra da direita só
   existe enquanto houver aba escondida ali; a da esquerda, só depois de rolar. Fade fixo
   mentiria. No desktop nunca há overflow — nunca aparecem.
   ============================================ */
.abas-moldura { position: relative; }
.abas-moldura::before,
.abas-moldura::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 2px; /* preserva a linha de base das abas visível sob o fade */
    width: 40px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}
.abas-moldura::before { left: 0; background: linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0)); }
.abas-moldura::after { right: 0; background: linear-gradient(270deg, #fff 25%, rgba(255, 255, 255, 0)); }
.abas-sombra-esq::before { opacity: 1; }
.abas-sombra-dir::after { opacity: 1; }

/* ============================================
   CABEÇALHO DE PÁGINA NO CELULAR (≤640px) — composição centralizada
   À esquerda ele ficava solto: ícone + título espremidos e o badge pendurado embaixo,
   sozinho. Centralizado, vira a mesma linguagem da ficha de vereador: ícone no topo,
   título embaixo, badge/ações centrados. A marca-d'água do brasão some — neste tamanho
   ela é ruído colorido atrás do texto, não identidade.
   ============================================ */
@media (max-width: 640px) {
    .cabecalho-pagina { align-items: center; text-align: center; }
    .cabecalho-pagina-info {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    /* O brasão-marca-d'água FICA no celular — o usuário gosta das listras coloridas
       ("gosto das listras. kkk"). Tentei escondê-lo achando que era ruído; vetado. */
    .cabecalho-pagina-acoes { justify-content: center; }
}

/* Paginação no mobile: são três blocos em flex SEM quebra ("N resultados" + "Mostrar:" +
   os controles) somando ~340px — em 320px ela estourava e ARRASTAVA a página inteira pra
   largura dela (era o "sistema fica mais largo" da aba Vereadores, a única com
   paginação). Quebra em linhas centradas. Global: vale para todas as listagens. */
@media (max-width: 640px) {
    .paginacao {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--espaco-pequeno) var(--espaco-grande);
        padding: var(--espaco-medio);
    }
}

/* Sessões/Mostrar no mobile — achados da varredura das 7 abas:
   · a faixa de contexto (legislatura — sessão legislativa + badge) era flex sem quebra;
   · a barra de ações dos expedientes idem. As demais abas já herdam os consertos globais
   (formulario-inline empilha, tabelas em cartão com rótulo automático, ficha de
   vereador na Mesa, presença e votações já tinham flex-wrap). */
@media (max-width: 640px) {
    .sessao-dados-cabecalho {
        flex-wrap: wrap;
        gap: var(--espaco-pequeno);
    }
    .expediente-barra-acoes { flex-wrap: wrap; }
}

/* ============================================
   REFINO DOS FILTROS E DO CARD NO CELULAR
   ============================================ */

/* Filtros: a grade 2-col deixava a busca espremida ao lado de um select e o terceiro
   filtro órfão e truncado ("Todos os tipos de se..."). Ordem nova: a BUSCA ocupa a
   primeira linha inteira (é o filtro principal e o de placeholder mais longo), os selects
   pareiam embaixo — e um select que sobraria sozinho na última linha também se estica
   (a regra do :last-child par), pra grade nunca terminar capenga. */
@media (max-width: 640px) {
    .sessoes-filtros .campo-grupo:first-child { grid-column: 1 / -1; }
    .sessoes-filtros .campo-grupo:last-child:nth-child(even) { grid-column: 1 / -1; }
}

/* Card: título longo ("1ª Sessão Extraordinária da 2ª Sessão Legislativa...") quebrado
   à direita lia como texto espremido. Célula de título (.coluna-sessao) vira BLOCO à
   esquerda com o rótulo em cima — a mesma linguagem da ficha de vereador. Vale para
   Sessões e Vereadores, que usam a mesma classe. */
@media (max-width: 768px) {
    .sessoes-tabela td.coluna-sessao {
        display: block;
        text-align: left;
        font-weight: 600;
        color: var(--cor-primaria-escura);
        line-height: 1.45;
    }
    .sessoes-tabela td.coluna-sessao::before {
        display: block;
        max-width: none;
        text-align: left;
        margin: 0 0 3px;
    }
}

/* Ações da Presença no celular: o flex com quebra automática embaralhava botões, contagem
   e o salvar num bolo. Vira uma grade intencional:
   ┌ Marcar todos ┬ Desmarcar todos ┐   (par, mesma largura)
   │       12 / 12 presentes        │   (contagem centrada)
   └        Salvar presença         ┘   (ação principal, linha inteira)
   O <div> espaçador (flex:1) só servia ao layout de linha — some. */
@media (max-width: 640px) {
    .presenca-acoes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--espaco-pequeno);
    }
    .presenca-acoes > div { display: none; }
    .presenca-acoes .botao { width: 100%; justify-content: center; }
    .presenca-acoes .presenca-contagem {
        grid-column: 1 / -1;
        text-align: center;
    }
    .presenca-acoes .botao-primario { grid-column: 1 / -1; }
}

/* Dropdown "Alterar Status" (Projetos/Mostrar): o JSX usa dropdown-container/menu, mas
   essas classes NUNCA tiveram CSS — o menu abria no FLUXO, itens soltos empurrando o
   cartão (quebrado no desktop também; o celular só deixou evidente). Mesma receita do
   .dropdown-status-lista: cartão flutuante sob o botão. Os itens já herdam o estilo de
   .dropdown-item. */
.dropdown-container { position: relative; }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 60;
    min-width: 180px;
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
    box-shadow: var(--sombra-elevada);
    padding: 4px 0;
}

/* Dois blocos .sessoes-filtros seguidos (Matérias: campos de texto + selects) devem ler
   como UM grupo de filtros — a margem cheia entre eles parecia duas seções distintas. */
.sessoes-filtros:has(+ .sessoes-filtros) { margin-bottom: var(--espaco-pequeno); }

/* ============================================
   TV PÚBLICA (/tv) E A CENTRAL DE TVS DO /painel
   ============================================ */

/* A página da TV: tela cheia, sem navbar. O padding recria o respiro que o layout logado
   dava, e os min-height dos filhos são recalculados para 100vh (sem os 116px de barra). */
.tv-pagina {
    min-height: 100vh;
    background: var(--cor-fundo-secundario);
    padding: var(--espaco-grande);
}

/* Layout do telão na TV, nos DOIS temas: preenche a tela (sem faixa cinza no rodapé). A
   SKIN (fundo azul, partículas, vidro, texto branco) fica gateada em `.tema-azul`; sem ela
   (tema Claro) a /tv cai no visual claro base — o mesmo do /painel interno. */
.tv-pagina .ptelao {
    min-height: 100vh;
    margin: calc(-1 * var(--espaco-grande));
    padding: var(--espaco-grande);
    position: relative;
    overflow: hidden;
}
.tv-pagina .ptelao-espera { min-height: 100vh; }
.tv-pagina .ptribuna { min-height: 100vh; }

/* ============================================
   TELÃO DE VOTAÇÃO/FREQUÊNCIA NA TV — identidade AZUL da tribuna, conteúdo adaptado.
   Quebra o padding do .tv-pagina (margin negativo) para o azul cobrir a tela toda;
   min-height 100vh para não sobrar faixa cinza no rodapé.
   ============================================ */
.tv-pagina.tema-azul .ptelao {
    min-height: 100vh;
    margin: calc(-1 * var(--espaco-grande));
    padding: var(--espaco-grande);
    position: relative;
    overflow: hidden;
    /* O MESMO azul da boas-vindas do sistema — o telão fica contínuo com a tela de entrada. */
    background: linear-gradient(135deg, var(--cor-primaria-escura) 0%, var(--cor-primaria) 50%, #2e6fd4 100%);
}
/* Repouso (espera) na TV: MESMO azul do resto do telão — brasão, nome e relógio em branco,
   partículas no lugar do halo claro, faixa branca do rodapé corrigida (100vh). */
.tv-pagina.tema-azul .ptelao-espera {
    min-height: 100vh;
    color: #fff;
    background: linear-gradient(135deg, var(--cor-primaria-escura) 0%, var(--cor-primaria) 50%, #2e6fd4 100%);
}
.tv-pagina.tema-azul .ptelao-espera-halo { display: none; }
.tv-pagina.tema-azul .ptelao-espera-local { color: rgba(255, 255, 255, 0.7); }
.tv-pagina.tema-azul .ptelao-espera-hora { color: #fff; }
.tv-pagina.tema-azul .ptelao-espera-data { color: rgba(255, 255, 255, 0.72); }
.tv-pagina.tema-azul .ptelao-espera-divisor { background: rgba(255, 255, 255, 0.3); }
.tv-pagina.tema-azul .ptelao-espera-status {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
}
/* Cartão da próxima sessão em vidro. */
.tv-pagina.tema-azul .ptelao-proxima {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}
.tv-pagina.tema-azul .ptelao-proxima-icone { background: rgba(255, 255, 255, 0.14); color: #fff; }
.tv-pagina.tema-azul .ptelao-proxima-rotulo { color: rgba(255, 255, 255, 0.72); }
.tv-pagina.tema-azul .ptelao-proxima-titulo { color: #fff; }
.tv-pagina.tema-azul .ptelao-proxima-contagem { color: rgba(255, 255, 255, 0.85); }
.tv-pagina.tema-azul .ptelao-proxima-dia { color: rgba(255, 255, 255, 0.72); }
.tv-pagina.tema-azul .ptelao-proxima-hora { color: #fff; }
.tv-pagina.tema-azul .ptelao-proxima-hora-vazia { color: rgba(255, 255, 255, 0.7); }

/* Partículas: escondidas por padrão (o /painel interno é claro), animadas só na TV. */
.ptelao-decor { display: none; }
.tv-pagina.tema-azul .ptelao-decor {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}
/* O anel grande central (partícula 6) e a bolha radial (2) brigavam com a informação. */
.tv-pagina.tema-azul .ptelao-decor .login-particula-6,
.tv-pagina.tema-azul .ptelao-decor .login-particula-2 { display: none; }
.tv-pagina.tema-azul .ptelao > *:not(.ptelao-decor) { position: relative; z-index: 1; }

/* Cabeçalho ABERTO (sem caixa), só um fio de divisa embaixo — coerente com o resto solto. */
.tv-pagina.tema-azul .ptelao-cabecalho {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    box-shadow: none;
    padding: 6px 6px 18px;
}
.tv-pagina.tema-azul .ptelao-brasao { background: rgba(255, 255, 255, 0.92); padding: 4px; }
.tv-pagina.tema-azul .ptelao-camara-nome { color: #fff; }
.tv-pagina.tema-azul .ptelao-camara-local { color: rgba(255, 255, 255, 0.7); }
.tv-pagina.tema-azul .ptelao-data { color: rgba(255, 255, 255, 0.72); }
.tv-pagina.tema-azul .ptelao-relogio { color: #fff; }

/* Matéria segue ABERTA (o título flutua, só um fio embaixo) — não vira caixa. */
.tv-pagina.tema-azul .ptelao-materia {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    box-shadow: none;
}
/* Placar e info ganham um container GENTIL: ancora os números (sem "decepar"), mas longe
   da caixa de vidro pesada de antes — fundo bem sutil e sombra leve. */
.tv-pagina.tema-azul .ptelao-placar,
.tv-pagina.tema-azul .ptelao-infobox {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}
.tv-pagina.tema-azul .ptelao-total { background: rgba(0, 0, 0, 0.22); }

/* Faixa da matéria em texto branco. */
.tv-pagina.tema-azul .ptelao-materia-sub { color: #cfe0fb; }
.tv-pagina.tema-azul .ptelao-materia-titulo { color: #fff; }
.tv-pagina.tema-azul .ptelao-materia-ementa { color: rgba(255, 255, 255, 0.85); }
.tv-pagina.tema-azul .ptelao-materia-tipo { background: rgba(255, 255, 255, 0.16); color: #fff; }
.tv-pagina.tema-azul .ptelao-materia-ordem { background: rgba(255, 255, 255, 0.18); color: #fff; }
.tv-pagina.tema-azul .ptelao-quorum-inst-ok { background: rgba(74, 222, 128, 0.18); color: #bbf7d0; }
.tv-pagina.tema-azul .ptelao-quorum-inst-falta { background: rgba(245, 200, 100, 0.18); color: #fde68a; }

/* Placar: números VIVOS sobre o vidro (verde/vermelho claros p/ contraste no azul). */
.tv-pagina.tema-azul .ptelao-placar-bloco { border-bottom-color: rgba(255, 255, 255, 0.12); }
.tv-pagina.tema-azul .ptelao-placar-num { font-size: 36px; }
.tv-pagina.tema-azul .ptelao-placar-rotulo { font-size: 14px; letter-spacing: 1.8px; }
.tv-pagina.tema-azul .ptelao-sim .ptelao-placar-num, .tv-pagina.tema-azul .ptelao-sim .ptelao-placar-rotulo { color: #5ef08e; }
.tv-pagina.tema-azul .ptelao-nao .ptelao-placar-num, .tv-pagina.tema-azul .ptelao-nao .ptelao-placar-rotulo { color: #ff8080; }
.tv-pagina.tema-azul .ptelao-abs .ptelao-placar-num, .tv-pagina.tema-azul .ptelao-abs .ptelao-placar-rotulo { color: rgba(255, 255, 255, 0.85); }
.tv-pagina.tema-azul .ptelao-total { background: rgba(0, 0, 0, 0.32); }
.tv-pagina.tema-azul .ptelao-total .ptelao-placar-num, .tv-pagina.tema-azul .ptelao-total .ptelao-placar-rotulo { color: #fff; }

/* Caixa de info + quórum + resultado. */
.tv-pagina.tema-azul .ptelao-info-rotulo { color: rgba(255, 255, 255, 0.82); font-size: 15px; }
.tv-pagina.tema-azul .ptelao-info-valor { color: #fff; font-size: 20px; }
.tv-pagina.tema-azul .ptelao-quorum-barra { background: rgba(255, 255, 255, 0.2); }
.tv-pagina.tema-azul .ptelao-quorum-fill { background: #fff; }
.tv-pagina.tema-azul .ptelao-quorum-min { color: rgba(255, 255, 255, 0.78); font-size: 13.5px; }
.tv-pagina.tema-azul .ptelao-resultado-aprovada { background: rgba(52, 199, 108, 0.28); color: #e4ffef; }
.tv-pagina.tema-azul .ptelao-resultado-rejeitada { background: rgba(239, 68, 68, 0.3); color: #ffe6e6; }
.tv-pagina.tema-azul .ptelao-resultado-nula { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.85); }

/* Cartões: SIM/NÃO mantêm verde/vermelho; pendente/abstenção/presente/"votou" ganham
   moldura clara e RODAPÉ ESCURO (navy) — o nome/partido branco salta, sem sumir no vidro. */
.tv-pagina.tema-azul .ptelao-card { background: rgba(255, 255, 255, 0.08); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); }
.tv-pagina.tema-azul .ptelao-card-foto-vazio { background: rgba(255, 255, 255, 0.12); color: #fff; }
.tv-pagina.tema-azul .ptelao-card-pendente { border-color: rgba(255, 255, 255, 0.32); }
.tv-pagina.tema-azul .ptelao-card-pendente .ptelao-card-info { background: rgba(255, 255, 255, 0.14); }
.tv-pagina.tema-azul .ptelao-card-abs { border-color: rgba(255, 255, 255, 0.42); }
.tv-pagina.tema-azul .ptelao-card-abs .ptelao-card-info { background: rgba(255, 255, 255, 0.14); }
.tv-pagina.tema-azul .ptelao-card-votou { border-color: rgba(255, 255, 255, 0.5); }
.tv-pagina.tema-azul .ptelao-card-votou .ptelao-card-info { background: rgba(255, 255, 255, 0.14); }
.tv-pagina.tema-azul .ptelao-card-presente { border-color: rgba(255, 255, 255, 0.5); }
.tv-pagina.tema-azul .ptelao-card-presente .ptelao-card-info { background: rgba(255, 255, 255, 0.14); }
/* SIM/NÃO: rodapé em VIDRO TINGIDO (não cor chapada) — mesmo idioma dos painéis. A borda
   e o selo S/N seguem sólidos, carregando o sinal do voto sem perder força. */
.tv-pagina.tema-azul .ptelao-card-sim .ptelao-card-info { background: rgba(34, 197, 94, 0.6); }
.tv-pagina.tema-azul .ptelao-card-nao .ptelao-card-info { background: rgba(239, 68, 68, 0.6); }
/* Sem o cabeçalho do /painel interno, o telão da tribuna precisa ocupar a tela inteira
   na TV — senão sobra uma faixa cinza no rodapé. */
.tv-pagina.tema-azul .ptribuna { min-height: 100vh; }

/* A faixa de controle das TVs, no /painel interno. */
.tvs-faixa {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: var(--espaco-medio);
}
.tvs-faixa-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espaco-pequeno) var(--espaco-medio);
}
.tvs-faixa-titulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cor-primaria-escura);
}
.tv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--borda-pilula);
    background: #f1f4f9;
    font-size: 12px;
    color: #374151;
}
.tv-chip-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--cor-sucesso); }
.tv-chip-off { opacity: 0.65; }
.tv-chip-off .tv-chip-ponto { background: #cbd5e1; }
.tvs-vazio { font-size: 12.5px; color: var(--cor-neutra); }

.tvs-endereco-rotulo { font-size: 12.5px; font-weight: 600; color: var(--cor-neutra); }
/* O endereço em "cara de código": é para LER e DIGITAR na TV — precisa se distinguir de
   texto corrido, caractere por caractere. */
.tvs-endereco {
    font-family: Consolas, Menlo, monospace;
    font-size: 13px;
    padding: 4px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--borda-raio);
    color: var(--cor-primaria-escura);
    overflow-wrap: anywhere; /* endereço é código, não prosa: pode quebrar onde precisar */
}
.tvs-como {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--cor-neutra);
}
.tvs-como code {
    font-family: Consolas, Menlo, monospace;
    background: #f1f4f9;
    padding: 1px 6px;
    border-radius: 4px;
}

/* Na TV (/tv), a boas-vindas ABRE a tela: não existe login por trás para o azul "crescer
   a partir da divisa". Nasce cobrindo tudo desde o primeiro quadro — sem isto o telão
   aparecia primeiro e a boas-vindas chegava por cima depois (a coreografia de 0.6s do
   login virava um vazamento). A saída (fade) continua a mesma. */
.overlay-entrada-imediata .overlay-entrada-fundo {
    clip-path: inset(0 0 0 0);
    animation: none;
}

/* Ementa no modal de votação iniciada: o vereador decide se corre ao voto sabendo DO QUE
   se trata, não só o número da matéria. Clamp em 4 linhas — ementa quilométrica não pode
   empurrar os botões pra fora da tela. */
.vigia-votacao-ementa {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: #4b5563;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── TV: botão flutuante "Ativar som" ─────────────────────────────────────────
   Navegador só libera áudio depois de um gesto na página: este botão É o gesto.
   Aparece discreto no canto; depois do toque (blip de confirmação), some. Se o
   navegador da TV permitir autoplay, ele nem chega a aparecer. */
.tv-som-botao {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 60;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* Selo de conexão do telão — canto inferior ESQUERDO (o botão de som fica à direita).
   "Ao vivo" discreto enquanto o poll responde; "Reconectando" quando a rede cai, para a
   TV pública nunca exibir estado velho como se fosse atual. Branco: legível no azul e no claro. */
.painel-conexao {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 55;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--borda-pilula);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e4e9f1;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.16);
    color: #6b7280;
}
.painel-conexao-ponto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cor-sucesso);
}
.painel-conexao-ok { opacity: 0.72; }
.painel-conexao-ok .painel-conexao-ponto { animation: painelConexaoPulso 2s infinite; }
.painel-conexao-instavel {
    color: var(--cor-alerta);
    border-color: #f2e7cf;
    opacity: 1;
}
.painel-conexao-instavel .painel-conexao-ponto {
    background: var(--cor-alerta);
    animation: painelConexaoPulso 1s infinite;
}
@keyframes painelConexaoPulso {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
    .painel-conexao-ponto { animation: none !important; }
}

/* Momento do resultado (PainelResultadoFlash) — cartão do veredicto ao encerrar. */
.presult {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding: var(--espaco-grande);
    pointer-events: none;
    background: rgba(15, 23, 42, 0.44);
    animation: presultScrim 0.35s ease both;
}
.presult-saindo { animation: presultSai 0.5s ease forwards; }
@keyframes presultScrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes presultSai { to { opacity: 0; } }
.presult-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: clamp(28px, 5vh, 56px) clamp(36px, 8vw, 104px);
    border-radius: 24px;
    background: #fff;
    border-top: 7px solid var(--cor-neutra);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
    text-align: center;
    animation: presultCard 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
@keyframes presultCard {
    from { opacity: 0; transform: translateY(26px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.presult-materia {
    max-width: 52ch;
    font-size: clamp(14px, 1.6vw, 22px);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--cor-neutra);
}
.presult-palavra {
    font-family: var(--fonte-destaque);
    font-size: clamp(48px, 10vw, 148px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--cor-neutra);
    animation: presultCarimbo 0.55s cubic-bezier(0.2, 0.8, 0.2, 1.4) 0.12s both;
}
@keyframes presultCarimbo {
    0%   { opacity: 0; transform: scale(1.5); }
    60%  { opacity: 1; transform: scale(0.94); }
    100% { transform: scale(1); }
}
.presult-aprovada  .presult-card { border-top-color: var(--cor-sucesso); }
.presult-aprovada  .presult-palavra { color: var(--cor-sucesso); }
.presult-rejeitada .presult-card { border-top-color: var(--cor-perigo); }
.presult-rejeitada .presult-palavra { color: var(--cor-perigo); }
.presult-placar {
    display: flex;
    gap: clamp(20px, 4vw, 52px);
    font-size: clamp(17px, 2.3vw, 32px);
    color: #4b5563;
    font-variant-numeric: tabular-nums;
}
.presult-placar b { color: #1f2937; font-weight: 800; }
@media (prefers-reduced-motion: reduce) {
    .presult, .presult-card, .presult-palavra { animation-duration: 0.01ms !important; }
}

/* ── Matérias: faixa de autoria institucional (comissão autora) ───────────────
   Acima da tabela de autores-vereadores: a matéria nasceu de uma comissão, e a
   faixa leva à ficha dela. O X só aparece pra quem pode editar. */
.autoria-comissao-faixa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    /* Mesma família visual das outras faixas: tom de tabela, não aviso azul. */
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
    font-size: 14px;
    color: #1f2937;
}

.autoria-comissao-texto { flex: 1; min-width: 0; }

.autoria-comissao-link {
    color: var(--cor-primaria);
    font-weight: 600;
    text-decoration: none;
}

.autoria-comissao-link:hover { text-decoration: underline; }

/* ── Legislaturas: faixa de presidências ──────────────────────────────────────
   Quem presidiu a Casa e quando — acima da tabela de vereadores do acordeão.
   Vários períodos convivem lado a lado (a Casa troca de presidente no meio da
   legislatura); no aperto, a faixa quebra linha sozinha. */
.presidencias-faixa {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 12px 16px;
    margin-bottom: 12px;
    /* O mesmo vestido da tabela logo abaixo (fundo branco, borda #c5cad3): o azul
       clarinho destoava do cartão — pedido do usuário. */
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
}

.presidencia-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.presidencia-texto {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #1f2937;
    min-width: 0;
}

.presidencia-periodo {
    color: #6b7280;
    font-size: 13px;
    white-space: nowrap;
}

/* ── Mesa Diretora: histórico por sessão legislativa ─────────────────────────
   Cada ano da legislatura vira um bloco: título com o ano + a tabela da mesa. */
.mesa-historico-sessao {
    margin-top: 20px;
}

.mesa-historico-sessao .detalhe-secao-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Sessão: faixa de geração de documentos ───────────────────────────────────
   Acima dos documentos vinculados: a sessão escreve a própria ata/pauta/relatório
   a partir do que já foi registrado. */
.gerar-documentos-faixa {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    /* Respiro da régua de abas em cima; tom de tabela (branco + #c5cad3) — o azul
       clarinho destoava do cartão (pedido do usuário, mesmo veredito das presidências). */
    margin: 20px 0 16px;
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
}

.gerar-documentos-rotulo {
    /* Sem negrito e na fonte padrão do sistema, tamanho de texto normal —
       rótulo de apoio não disputa atenção com os botões (pedido do usuário). */
    font-family: var(--fonte-principal);
    font-size: 15px;
    font-weight: 400;
    color: #1f2937;
    margin-right: 4px;
}

/* ── Documentos vinculados: link-botão e modal de visualização ────────────────
   O título do documento virou <button> (abre modal, não navega): precisa vestir
   a mesma roupa de link que tinha como <a>. */
button.doc-link-oficial {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

/* A página A4 do DocumentoPaginado é mais larga que o miolo do modal em telas
   menores: rola dentro do próprio quadro, sem estourar o modal. */
.doc-modal-visualizacao {
    overflow-x: auto;
    background: #eef0f3;
    border-radius: var(--borda-raio);
    padding: 16px;
}

/* ── Tribuna: formulário em duas linhas (desenho do usuário) ──────────────────
   Linha 1: os dois seletores meio a meio (menu largo = nome legível).
   Linha 2: o Assunto com a linha inteira e o Incluir na ponta. */
.tribuna-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.tribuna-form-linha {
    display: flex;
    gap: 12px;
    align-items: center;
}

.tribuna-form-linha > .campo-grupo {
    flex: 1;
    min-width: 0;
    margin: 0;
}

@media (max-width: 640px) {
    .tribuna-form-linha { flex-direction: column; align-items: stretch; }
}

/* ── Aba Vídeos da sessão ─────────────────────────────────────────────────── */
.sessao-videos-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.sessao-videos-opcoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sessao-videos-dica {
    margin: 0;
    font-size: var(--texto-pequeno);
    color: var(--cor-neutra);
}

/* ── Página Vídeos: card do canal do YouTube (mesmo box padrão do cabeçalho) ── */
.videos-canal {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-medio);
    padding: var(--espaco-grande);
    margin-bottom: var(--espaco-grande);
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
    flex-wrap: wrap;
}

/* Capa (banner) do canal como fundo, com véu escuro pra legibilidade */
.videos-canal-capa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.videos-canal-comcapa::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Cortina BRANCA: opaca à esquerda (ícone/ID legíveis), abrindo à direita pra deixar
       o banner aparecer. Mesmo princípio do véu do cabeçalho com o brasão. */
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.92) 28%, rgba(255, 255, 255, 0.55) 62%, rgba(255, 255, 255, 0.2) 100%);
}

.videos-canal-comcapa > *:not(.videos-canal-capa) {
    position: relative;
    z-index: 2;
}

/* Anel branco no avatar pra separá-lo do banner */
.videos-canal-comcapa .videos-canal-foto { box-shadow: 0 0 0 2px #fff; }

.videos-canal-info {
    display: flex;
    align-items: center;
    gap: var(--espaco-medio);
    min-width: 0;
}

.videos-canal-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--borda-raio);
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
}

.videos-canal-foto {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

/* Galeria dos vídeos do canal no "Novo vídeo" */
.videos-canal-picker {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--cor-borda);
}

.videos-picker-cabecalho {
    margin: 0 0 8px;
    font-size: var(--texto-pequeno);
    font-weight: 600;
    color: var(--cor-neutra);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.videos-picker-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 10px;
    padding: 2px;
}

.videos-picker-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: var(--borda-raio);
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.videos-picker-item:hover { border-color: var(--cor-primaria); }

.videos-picker-item.selecionado {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 2px var(--cor-primaria-clara);
}

.videos-picker-item img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px;
}

.videos-picker-titulo {
    font-size: 0.85rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.videos-picker-vazio {
    margin: 12px 0 0;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--cor-neutra);
}

.videos-picker-expandir { margin-top: 12px; }

/* Player do modal "assistir vídeo" */
.video-modal-player {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #000;
    border-radius: var(--borda-raio);
    overflow: hidden;
}

.video-modal-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-modal-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.videos-ajuda-intro { margin: 0 0 8px; }

/* ── Admin: Enquetes (linhas dentro do card-container branco) ──────────────── */
.enquetes-lista { display: flex; flex-direction: column; }

.enquete-linha {
    padding: 18px 4px;
    border-bottom: 1px solid var(--cor-borda);
}
.enquete-linha:last-child { border-bottom: none; }
.enquete-linha:first-child { padding-top: 6px; }

.enquete-card-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.enquete-card-titulo { margin: 0; font-size: var(--texto-medio); }
.enquete-card-desc { margin: 4px 0 0; font-size: var(--texto-pequeno); color: var(--cor-neutra); }

.enquete-resultado { display: flex; flex-direction: column; gap: 10px; }
.enquete-barra-item { display: flex; flex-direction: column; gap: 4px; }
.enquete-barra-topo { display: flex; justify-content: space-between; gap: 10px; font-size: 0.9rem; }
.enquete-barra-num { color: var(--cor-neutra); font-variant-numeric: tabular-nums; white-space: nowrap; }
.enquete-barra { height: 8px; background: var(--cor-fundo-secundario); border-radius: 999px; overflow: hidden; }
.enquete-barra-preenchida { height: 100%; background: var(--cor-primaria); border-radius: 999px; transition: width 0.3s ease; }
.enquete-total { margin: 10px 0 0; font-size: var(--texto-pequeno); color: var(--cor-neutra); }

.enquete-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cor-borda);
}

.enquete-opcoes-rotulo {
    margin: 16px 0 6px;
    font-size: var(--texto-pequeno);
    font-weight: 600;
    color: var(--cor-neutra);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.enquete-opcao-linha { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.enquete-opcao-linha .campo-grupo { flex: 1; min-width: 0; margin: 0; }

/* Título da enquete na tabela: parece texto, mas abre o resultado ao clicar. */
.enquete-pergunta-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 600;
    color: var(--cor-texto);
    text-align: left;
    cursor: pointer;
    transition: color 0.15s ease;
}
.enquete-pergunta-link:hover { color: var(--cor-primaria); text-decoration: underline; }

/* Contador de leituras na tabela de notícias (ícone de olho + número). */
.noticia-views {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cor-neutra);
    font-variant-numeric: tabular-nums;
}

.enquete-resultado-img {
    display: block;
    width: auto;
    max-width: 300px;
    max-height: 180px;
    margin: 4px auto 22px;
    object-fit: contain;
    border-radius: var(--borda-raio);
    border: 1px solid var(--cor-borda);
    background: var(--cor-fundo-secundario);
}

/* CampoImagem — upload retangular reutilizável (imagem de enquete etc.) */
.campo-imagem { margin-top: 4px; }
.campo-imagem-preview {
    position: relative;
    width: 340px;
    max-width: 100%;
    border-radius: var(--borda-raio);
    overflow: hidden;
    border: 1px solid #c5cad3;
    background: var(--cor-fundo-secundario);
}
.campo-imagem-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.campo-imagem-acoes {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    gap: 8px;
    padding: 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
}
.campo-imagem-vazia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 340px;
    max-width: 100%;
    padding: 28px 16px;
    border: 2px dashed #c5cad3;
    border-radius: var(--borda-raio);
    background: transparent;
    color: var(--cor-neutra);
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.campo-imagem-vazia:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }

.videos-canal-textos {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.videos-canal-rotulo {
    font-size: var(--texto-pequeno);
    font-weight: 600;
    color: var(--cor-neutra);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.videos-canal-valor {
    font-weight: 600;
    font-size: var(--texto-base);
    word-break: break-all;
}

.videos-canal-vazio {
    font-weight: 400;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--cor-neutra);
}

/* "Como achar o ID?" — ajuda expansível dentro do modal de canal */
.videos-ajuda-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-size: var(--texto-pequeno);
    font-weight: 600;
    color: var(--cor-primaria);
    cursor: pointer;
}

.videos-ajuda-toggle svg { transition: transform 0.15s ease; }
.videos-ajuda-toggle.aberto svg { transform: rotate(90deg); }

.videos-ajuda {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--cor-fundo-secundario);
    border-radius: var(--borda-raio);
    font-size: 0.9rem;
    line-height: 1.5;
}

.videos-ajuda-titulo {
    margin: 10px 0 2px;
    font-weight: 700;
}

.videos-ajuda-titulo:first-child { margin-top: 0; }

.videos-ajuda ol {
    margin: 2px 0 6px;
    padding-left: 20px;
}

.videos-ajuda li { margin: 3px 0; }

.videos-ajuda-obs {
    margin: 8px 0 0;
    color: var(--cor-neutra);
    font-style: italic;
}

/* ── Sessão no rito: ordem do dia, justificativas, chips do seletor ─────────── */

/* Posição na ordem do dia (1ª, 2ª...) no cartão de votação. */
.votacao-posicao {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.votacao-ordem-setas {
    display: inline-flex;
    gap: 4px;
    margin-right: 8px;
}

.botao-acao-desabilitado {
    opacity: 0.35;
    pointer-events: none;
}

/* Justificar ausências: nome + motivo, linha a linha. */
.justificativas-area {
    margin-top: 20px;
    padding: 16px;
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
}

.justificativas-dica {
    margin: 4px 0 12px;
    font-size: 12px;
    color: var(--cor-neutra);
}

.justificativa-linha {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.justificativa-nome {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

@media (max-width: 640px) {
    .justificativa-linha { grid-template-columns: 1fr; gap: 4px; }
}

/* Chips Todas | Em tramitação do seletor da pauta. */
.busca-materia-chips {
    display: flex;
    gap: 8px;
    padding: 0 16px 10px;
}

.busca-materia-chip {
    padding: 6px 14px;
    background: #f3f4f6;
    border: 1px solid #c5cad3;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cor-neutra);
    cursor: pointer;
}

.busca-materia-chip.ativo {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
}

/* ── Notícias do Portal (gestão interna) ────────────────────────────────────── */

.noticia-linha {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Título da notícia na lista: sem negrito (peso médio, ainda legível). */
.noticia-linha strong { font-weight: 500; }

.noticia-capa-mini {
    width: 64px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.noticia-capa-area { margin-top: 4px; }

.noticia-capa-preview {
    display: flex;
    align-items: flex-end;
    gap: 14px;
}

.noticia-capa-preview img {
    width: 280px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--borda-raio);
    border: 1px solid #c5cad3;
}

.noticia-capa-vazia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 16px;
    border: 2px dashed #c5cad3;
    border-radius: var(--borda-raio);
    color: var(--cor-neutra);
    cursor: pointer;
    text-align: center;
    font-size: 14px;
}

.noticia-capa-vazia:hover {
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
}

/* Ponte sutil do login de volta ao portal público: canto do painel azul. */
.login-voltar-portal {
    position: absolute;
    bottom: 20px;
    left: 24px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-voltar-portal:hover { color: #fff; }


/* ── Telão: aviso de votação secreta no lugar do placar ─────────────────────── */

.ptelao-sigilo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 20px;
    background: #fff;
    border: 2px solid #e5b93e;
    border-radius: 14px;
    color: var(--cor-primaria-escura);
    text-align: center;
    box-shadow: var(--sombra-suave);
}

.ptelao-sigilo svg { color: #d9a441; margin-bottom: 4px; }
.ptelao-sigilo strong { font-size: 20px; font-weight: 800; letter-spacing: 0.02em; }
.ptelao-sigilo span { font-size: 13px; color: var(--cor-neutra); }

/* ── Central do Portal: linhas de configuração e galeria ────────────────────── */

.padmin-titulo {
    font-size: 16px;
    font-weight: 700;
    color: var(--cor-primaria-escura);
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--cor-primaria-clara);
}

.padmin-linha {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: var(--borda-raio);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.padmin-linha-nome { min-width: 200px; }

.padmin-linha-servico .padmin-linha-texto { flex: 1; min-width: 260px; }

.padmin-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.padmin-galeria-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: var(--borda-raio);
}

.padmin-galeria-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
}

.padmin-galeria-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 180px;
    border: 2px dashed #c5cad3;
    border-radius: var(--borda-raio);
    color: var(--cor-neutra);
    cursor: pointer;
    font-size: 14px;
}

.padmin-galeria-add:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }

/* ── Ouvidoria (gestão) — Lei 13.460/2017 ─────────────────────────────────────
   Classes globais no app.css (não local). Usa os tokens do sistema. */
.ouv-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.ouv-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ouv-toggle-trilho {
    width: 42px; height: 24px; border-radius: 999px;
    background: var(--cor-neutra, #9aa4b2); position: relative; transition: background 0.18s ease;
}
.ouv-toggle-bolinha {
    position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; transition: transform 0.18s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.ouv-toggle input:checked + .ouv-toggle-trilho { background: var(--cor-sucesso, #1f8f4e); }
.ouv-toggle input:checked + .ouv-toggle-trilho .ouv-toggle-bolinha { transform: translateX(18px); }
.ouv-toggle input:focus-visible + .ouv-toggle-trilho { box-shadow: 0 0 0 3px var(--cor-primaria-clara); }
.ouv-toggle-texto { font-size: 0.88em; font-weight: 600; color: var(--cor-texto-secundario, #5b6472); }

.ouv-aviso-desativada {
    margin: 0 0 18px; padding: 12px 14px; border-radius: 10px;
    background: var(--cor-fundo-secundario, #f4f6f9); border-left: 3px solid var(--cor-neutra, #9aa4b2);
    font-size: 0.9em; color: var(--cor-texto-secundario, #5b6472);
}

/* Faixa-resumo compacta: números limpos, sem blocos de cor. A cor entra só na
   bolinha que pisca quando há manifestação vencida — atenção onde urge. */
.ouv-resumo-caixa { margin-bottom: 16px; }
.ouv-resumo {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap;
}
.ouv-resumo li {
    flex: 1; min-width: 120px;
    display: flex; flex-direction: column; gap: 2px;
    padding: 4px 20px;
    border-left: 1px solid var(--cor-borda, #e5e7eb);
}
.ouv-resumo li:first-child { border-left: none; padding-left: 4px; }
.ouv-resumo-num {
    position: relative; display: inline-flex; align-items: center; gap: 8px; width: fit-content;
    font-size: 1.9em; font-weight: 800; line-height: 1;
    color: var(--cor-texto, #1c2430); font-variant-numeric: tabular-nums;
}
.ouv-resumo-rot { font-size: 0.82em; color: var(--cor-texto-secundario, #5b6472); }
/* Cor semântica por número (sutil, sem blocos): total azul, aberto âmbar,
   respondidas verde. Vencidas fica vermelha só quando há alguma (ouv-resumo-urgente). */
.ouv-resumo li:nth-child(1) .ouv-resumo-num { color: var(--cor-primaria, #1a54bf); }
.ouv-resumo li:nth-child(2) .ouv-resumo-num { color: var(--cor-alerta, #b8860b); }
.ouv-resumo li:nth-child(3) .ouv-resumo-num { color: var(--cor-sucesso, #1f8f4e); }
.ouv-resumo-urgente .ouv-resumo-num { color: var(--cor-perigo, #d64545); }

.ouv-ponto-pisca {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--cor-perigo, #d64545);
    box-shadow: 0 0 0 0 var(--cor-perigo, #d64545);
    animation: ouvPisca 1.2s ease-in-out infinite;
}
@keyframes ouvPisca {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(214, 69, 69, 0.5); }
    50%      { opacity: 0.35; box-shadow: 0 0 0 5px rgba(214, 69, 69, 0); }
}
@media (prefers-reduced-motion: reduce) { .ouv-ponto-pisca { animation: none; } }

.ouv-filtros { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ouv-nota-sigilo { font-size: 0.82em; color: var(--cor-texto-secundario, #5b6472); font-style: italic; }

@media (max-width: 640px) {
    .ouv-resumo li { flex-basis: 45%; border-left: none; padding: 8px 4px; }
}

.ouv-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ouv-item { border: 1px solid var(--cor-borda, #e5e7eb); border-radius: 10px; background: #fff; }
.ouv-item.vencida { border-color: var(--cor-perigo, #d64545); }
.ouv-item-botao {
    width: 100%; display: grid; align-items: center; gap: 12px;
    grid-template-columns: 130px 150px 1fr 96px 120px 120px;
    padding: 12px 14px; background: none; border: none; cursor: pointer; text-align: left;
}
.ouv-item-botao:hover { background: var(--cor-fundo-secundario, #f4f6f9); }
.ouv-item-protocolo { font-family: ui-monospace, monospace; font-size: 0.85em; color: var(--cor-texto, #1c2430); font-weight: 600; }
.ouv-item-tipo { display: inline-flex; align-items: center; gap: 6px; }
.ouv-item-assunto { font-size: 0.9em; color: var(--cor-texto, #1c2430); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ouv-item-data { font-size: 0.82em; color: var(--cor-texto-secundario, #5b6472); font-variant-numeric: tabular-nums; }
.ouv-prazo-ok { font-size: 0.82em; color: var(--cor-texto-secundario, #5b6472); }
.ouv-cadeado { font-size: 0.82em; }

@media (max-width: 900px) {
    .ouv-item-botao { grid-template-columns: 1fr 1fr; row-gap: 6px; }
    .ouv-item-assunto { grid-column: 1 / -1; white-space: normal; }
}

/* Detalhe (overlay + painel) */
.ouv-detalhe-overlay {
    position: fixed; inset: 0; z-index: 2000; background: rgba(15,23,42,0.5);
    display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
.ouv-detalhe {
    position: relative; width: 100%; max-width: 640px; background: #fff; border-radius: 14px;
    padding: 26px 24px; box-shadow: 0 18px 50px rgba(0,0,0,0.25);
}
.ouv-detalhe-fechar {
    position: absolute; top: 12px; right: 14px; border: none; background: none; cursor: pointer;
    font-size: 1.5em; line-height: 1; color: var(--cor-texto-secundario, #5b6472);
}
.ouv-detalhe-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ouv-detalhe-protocolo { margin-left: auto; font-family: ui-monospace, monospace; font-size: 0.85em; color: var(--cor-texto-secundario, #5b6472); }
.ouv-detalhe-assunto { margin: 0 0 8px; font-size: 1.15em; color: var(--cor-texto, #1c2430); }
.ouv-detalhe-mensagem { margin: 0 0 16px; font-size: 0.95em; line-height: 1.6; color: var(--cor-texto, #1c2430); white-space: pre-wrap; }
.ouv-detalhe-meta {
    display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 14px; margin-bottom: 16px;
    background: var(--cor-fundo-secundario, #f4f6f9); border-radius: 8px;
    font-size: 0.84em; color: var(--cor-texto-secundario, #5b6472);
}
.ouv-anon { font-style: italic; }
.ouv-detalhe-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ouv-detalhe-resposta {
    padding: 14px 16px; background: var(--cor-sucesso-clara, #e7f6ec); border-radius: 10px;
    border-left: 3px solid var(--cor-sucesso, #1f8f4e);
}
.ouv-detalhe-rotulo { font-size: 0.8em; font-weight: 700; color: var(--cor-texto-secundario, #5b6472); }
.ouv-detalhe-resposta p { margin: 6px 0 0; font-size: 0.95em; line-height: 1.6; color: var(--cor-texto, #1c2430); white-space: pre-wrap; }
.ouv-detalhe-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--cor-borda, #e5e7eb); }

/* Foto no avatar do topo (quando o usuário tem foto). */
.btn-user-avatar img,
.user-dropdown-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }