/*
 * portal.css – estilos do shell da Área Pública (SICAM.Net)
 * Consolida, na ordem de cascata anterior: regras usadas do extras.1.3.1, footer.css, styles/custom.css e custom.css (raiz).
 * Cores sempre via tokens --cor-* (definidos em styles/tema-govbr.min.css).
 */

/* ===== origem: styles/extras.1.3.1.min.css (.spinner global e @keyframes rotate, usados no spinner dos botões) ===== */
.spinner{height:20px;width:20px;-webkit-animation:rotate .8s infinite linear;animation:rotate .8s infinite linear;border:2px solid var(--cor-texto-suave);border-right-color:transparent;border-radius:50%}
@keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}

/* ===== origem: styles/footer.css ===== */
/*
 * footer.css – Estilos do rodapé e formulário de login
 * Portal da Transparência – SICAM.Net
 *
 * REFATORADO: removido @media aninhado inválido e redefinição
 * conflitante de body. Estilos de acessibilidade migrados para
 * styles/acessibilidade.css
 *
 * 2026-06 – Correções WCAG 2.1 AA:
 *   - .footer: height e line-height ajustados para 44px (WCAG 2.5.5)
 *   - .TituloPagina: clamp() para escala fluida e controlada
 *   - #frm_login: removido outline:0 que violava WCAG 2.4.7
 */

/* =============================================
   LAYOUT: Título da página
   Responsivo (mobile-first) com clamp()
   FIX: substituído font-size:3vw (imprevisível
   em tablets) por escala fluida entre 1.125rem e
   1.875rem, com ponto médio de 4vw.
============================================= */
.TituloPagina {
    padding-top: 10px;
    font-size: clamp(1.125rem, 4vw, 1.875rem);
    line-height: 1.3;
}

@media (max-width: 767px) {
    .TituloPagina {
        max-width: 100%;
        word-wrap: break-word;
        padding-left: 3px;
    }
}

/* =============================================
   LAYOUT: Ajustes mobile de nav (legado)
============================================= */
@media only screen and (max-width: 740px) {
    .dropdown-menu {
        z-index: 1000;
    }
    .page-title {
        font-size: clamp(0.875rem, 4vw, 1.125rem);
    }
}

/* =============================================
   RODAPÉ FIXO
   FIX: height e line-height ajustados para 44px
   conforme WCAG 2.5.5 (Target Size mínimo).
   Era height:40px / line-height:30px.
============================================= */
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 44px;       /* FIX: era 40px */
    line-height: 44px;  /* FIX: era 30px – alinha ao container */
    background-color: var(--cor-fundo);
    border-top: 1px solid var(--cor-borda);
    z-index: 1000;
    /* Safe area para dispositivos com notch/home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.footer .nav {
    padding-left: 45px;
}

/* Rodapé responsivo: em mobile reduz padding lateral */
@media (max-width: 767px) {
    .footer .nav {
        padding-left: 12px;
    }

    /* Esconde textos secundários no rodapé em mobile */
    .footer .nav-link .d-sm-none-text {
        display: none;
    }
}

/* =============================================
   FORMULÁRIO DE LOGIN
============================================= */
#frm_login div {
    font-weight: bold;
}

#frm_login input {
    direction: ltr;
    height: 44px;      /* FIX: era 44px – mantido */
    font-size: 1rem;   /* evita zoom automático em iOS */
}

#frm_login input[type=email],
#frm_login input[type=password],
#frm_login input[type=text],
#frm_login button {
    width: 100%;
    display: block;
    margin-bottom: 10px;
    z-index: 1;
    position: relative;
    box-sizing: border-box;
}

/*
  FIX WCAG 2.4.7: removido outline:0 que eliminava
  o indicador de foco. O estilo de foco correto está
  definido em styles/acessibilidade.css com !important.
*/
#frm_login .form-control:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(19, 81, 180, 0.25);
}

/* =============================================
   BOTÃO DE ACESSO (Login)
   FIX: altura mínima de 44px para WCAG 2.5.5
============================================= */
.btn.btn-signin {
    background-color: rgb(104, 145, 162);
    padding: 0;
    font-weight: 700;
    font-size: 0.875rem;
    height: 44px;       /* FIX: era 36px – abaixo de WCAG 2.5.5 */
    min-height: 44px;
    border-radius: 3px;
    border: none;
    transition: background-color 0.218s ease;
}

.btn.btn-signin:hover,
.btn.btn-signin:active,
.btn.btn-signin:focus {
    background-color: rgb(12, 97, 33);
}

.forgot-password {
    color: rgb(104, 145, 162);
}

.forgot-password:hover,
.forgot-password:active,
.forgot-password:focus {
    color: rgb(12, 97, 33);
}


/* ===== origem: styles/custom.css ===== */
/* =========================
   VARIÁVEIS
========================= */
:root {

    --border-radius: 8px;
    --border-radius-lg: 12px;

    --box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    --box-shadow-hover: 0 4px 12px rgba(0,0,0,0.15);
    --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

    --transition: all 0.3s ease;
    --font-size-base: 1rem;
    --line-height-base: 1.6;
}

/* =========================
   BASE
========================= */
body {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: var(--line-height-base);
    /* Evita scroll horizontal em mobile */
    overflow-x: hidden;
}

/* =========================
   HEADER
========================= */
.page-header {
    background: var(--cor-superficie);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow);
    padding: 2rem;
    margin: 1rem 0 2rem;
    border-left: 4px solid var(--cor-primaria);
}

/* Page-header compacto em mobile */
@media (max-width: 767px) {
    .page-header {
        padding: 1rem;
        margin: 0.5rem 0 1rem;
        border-radius: var(--border-radius);
    }
}

/* =========================
   TITULO RESPONSIVO
   FIX: consolidado com footer.css — usa clamp()
   para escala fluida entre 1.125rem e 1.875rem.
   Remove versão divergente anterior (font-size:3vw).
========================= */
.TituloPagina {
    font-size: clamp(1.125rem, 4vw, 1.875rem);
    padding-top: 10px;
    line-height: 1.3;
}

/* =========================
   BOTÕES
========================= */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.5.5: área de toque mínima */
    min-height: 44px;
    min-width: 44px;
}

/* Remove spinner antigo (CONFLITO RESOLVIDO) */
.btn::after {
    display: none !important;
}

/* BOTÃO PRIMARY */
.btn-primary {
    position: relative;
    overflow: hidden;
}

/* Spinner centralizado */
.btn-primary .spinner {
    position: absolute;
    inset: 0;
    /* anula o .spinner genérico (anel de 20px girando, preso no canto) */
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    animation: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
    display: none;
}

/* Estado loading */
.btn.loading {
    pointer-events: none;
    opacity: 0.75;
}

.btn-primary.loading .spinner {
    display: flex;
}

.btn-primary.loading .btn-content {
    opacity: 0;
}

.btn-primary.loading {
    cursor: wait;
}

/* =========================
   SPINNER (fallback bootstrap-like)
========================= */
.spinner-border {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border: 0.125em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.125em;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

/* =========================
   DATATABLES AJUSTES
========================= */
.dataTables_wrapper td:before {
    margin-left: 20px;
    text-align: left;
}

.dataTables_wrapper td {
    text-align: left;
}

.dataTables_wrapper .child {
    max-width: 100%;
}

.dataTables_wrapper table.dataTable tbody td {
    text-align: left;
    padding-left: 30px !important;
}

.dataTables_filter input[type="search"] {
    padding-left: 25px !important;
}

/* Datatables responsivo em mobile */
@media (max-width: 576px) {
    .dataTables_wrapper table.dataTable tbody td {
        padding-left: 12px !important;
    }

    .dataTables_filter input[type="search"] {
        padding-left: 10px !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* Controles de paginação empilhados */
    .dataTables_wrapper .dataTables_paginate {
        margin-top: 0.5rem;
        text-align: center;
    }
}

/* =========================
   ANIMAÇÕES
========================= */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* =========================
   RESPONSIVO – Login
========================= */
@media (max-width: 576px) {
    .login-card {
        padding: 1.5rem 1rem;
        margin: 0.5rem;
    }

    .login-title {
        font-size: 1.5rem;
    }
}

/* =========================
   OVERLAY
========================= */
.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    border-radius: 0 0 0 10px;
}

.text {
    margin: 0;
}

.finalMandato {
    background-color: black;
    color: #fff;
    padding: 3px;
}

/* =========================
   MOTION SAFETY
   FIX: respeita prefers-reduced-motion do SO
   (WCAG 2.3.3 – Animation from Interactions)
========================= */
@media (prefers-reduced-motion: reduce) {
    /* Animações de entrada */
    .fade-in {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .shake {
        animation: none;
    }

    /* Spinner: mantém rotação mas sem aceleração abrupta */
    .spinner-border {
        animation-duration: 1.5s;
    }

    /* Transições gerais */
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* =========================
   TOPBAR — BLOCO DO USUÁRIO
   Compacto em mobile, completo em md+
========================= */

/* Garante que a navbar não quebre linha em telas pequenas */
.main-navbar .navbar {
    flex-wrap: nowrap !important;
    min-height: 3.5rem;
}

/* Área de usuário: reduz padding em mobile */
.main-navbar .navbar-nav .nav-link {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

/* Avatar: tamanho controlado */
.main-navbar .user-avatar {
    width: 28px;
    height: 28px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Nome do usuário: trunca se for muito longo */
.main-navbar .user-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

/* Logo/título da entidade: não comprime o bloco do usuário */
.navbar-brand-custom {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}

.navbar-title-wrapper {
    min-width: 0;
    overflow: hidden;
}

.navbar-title {
    display: block;
    font-size: clamp(0.7rem, 2.5vw, 1rem);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.navbar-subtitle {
    display: block;
    font-size: 0.65rem;
    color: var(--cor-texto-suave);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Em mobile: logo menor */
.navbar-logo {
    max-height: 36px;
    max-width: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    /* Reduz padding lateral dos itens de nav na topbar */
    .main-navbar .navbar-nav .nav-link {
        padding-left: 0.3rem;
        padding-right: 0.3rem;
    }

    /* Ícone de conta: tamanho adequado para toque (WCAG 2.5.5) */
    .main-navbar .material-icons {
        font-size: 1.375rem;
    }

    /* Logo da entidade: reduz em mobile */
    .navbar-logo {
        max-height: 28px;
        max-width: 28px;
        margin-right: 0.4rem !important;
    }

    /* Título: ligeiramente menor */
    .navbar-title {
        font-size: clamp(0.65rem, 3vw, 0.85rem);
    }

    /* Subtitle: oculta em telas muito pequenas (<360px) */
    @media (max-width: 359px) {
        .navbar-subtitle { display: none; }
    }
}

/* =========================
   AÇÕES DO DASHBOARD (ICONS)
========================= */
.btn-acao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: var(--border-radius);
    color: var(--cor-superficie) !important;
    text-decoration: none;
    transition: var(--transition);
    min-width: 32px;
    height: 32px;
}

.btn-acao-icone:hover {
    transform: translateY(-1px);
    box-shadow: var(--box-shadow);
    color: var(--cor-superficie) !important;
}

.btn-acao-sucesso {
    background-color: var(--cor-sucesso) !important;
}
.btn-acao-sucesso:hover {
    background-color: var(--cor-sucesso) !important; /* escurece success */
}

.btn-acao-primario {
    background-color: var(--cor-primaria) !important;
}
.btn-acao-primario:hover {
    background-color: var(--cor-primaria-escura) !important;
}

.btn-acao-info {
    background-color: var(--cor-info) !important;
}
.btn-acao-info:hover {
    background-color: var(--cor-info) !important; /* escurece info */
}

.btn-acao-alerta {
    background-color: var(--cor-aviso) !important;
    color: var(--cor-texto) !important;
}
.btn-acao-alerta:hover {
    background-color: var(--cor-aviso) !important; /* escurece warning */
    color: var(--cor-texto) !important;
}

/* ===== origem: custom.css ===== */
/*
  custom.css – Estilos globais da Masterpage
  Portal da Transparência – SICAM.Net
  Atualizado: 2026-06 – Correções WCAG 2.1 AA / eMAG 3.1 + Responsividade Mobile
*/

/* =============================================
   NOTA: Skip Navigation Links e regras de foco
   estão definidas canonicamente em:
     styles/acessibilidade.css
   Não redefinir aqui para evitar conflito de cascade.
============================================= */

/* =============================================
   CORREÇÃO SHARDS DASHBOARD — card-header colorido
   O Shards define color em .h1–.h6 com alta
   especificidade, quebrando text-white do Bootstrap.
   Força herança da cor do card-header bg-* aqui,
   no head (depois do Shards), com !important.
============================================= */
.card-header[class*="bg-"] .h1,
.card-header[class*="bg-"] .h2,
.card-header[class*="bg-"] .h3,
.card-header[class*="bg-"] .h4,
.card-header[class*="bg-"] .h5,
.card-header[class*="bg-"] .h6,
.card-header[class*="bg-"] span:not(.badge),
.card-header[class*="bg-"] p {
    color: inherit !important;
}

/* Botões outline dentro de card-headers coloridos
   herdam a cor de borda/texto do variant correto */
.card-header.bg-primary .btn-outline-light {
    color: var(--cor-fundo) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.card-header.bg-primary .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border-color: var(--cor-superficie) !important;
}


/* =============================================
   LAYOUT – Sidebar fixa (Shards Dashboard)
============================================= */

/*
  ARQUITETURA DE SCROLL CORRETA:
  ──────────────────────────────
  • Uma única barra de rolagem: a nativa do browser (body)
  • .main-sidebar → position: fixed, rola internamente se
    o menu for longo (sem criar scroll container no body)
  • .main-content → fluxo normal, sem height/overflow fixos
  • .sticky-top no header funciona em relação ao scroll do body
  • NÃO definir height: 100vh nem overflow-y no .main-content
    para evitar segunda barra de rolagem

  Larguras espelham o grid Bootstrap:
    col-md-3 = 25%  |  col-lg-2 = 16.6667%
*/

/* — Sidebar fixa no desktop (md ≥ 768px) — */
@media (min-width: 768px) {
    .main-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh;
        width: 25%; /* col-md-3 */
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1030;
        /* Scrollbar discreta (visível só quando menu é longo) */
        scrollbar-width: thin;
        scrollbar-color: var(--cor-borda) transparent;
    }

    .main-sidebar::-webkit-scrollbar       { width: 4px; }
    .main-sidebar::-webkit-scrollbar-track { background: transparent; }
    .main-sidebar::-webkit-scrollbar-thumb { background-color: var(--cor-borda); border-radius: 4px; }
}

/* — Largura col-lg-2 em lg ≥ 992px — */
@media (min-width: 992px) {
    .main-sidebar { width: 16.6667%; }
}

/*
  Padding-bottom no conteúdo principal para
  nunca ficar escondido atrás do footer fixo (44px — WCAG 2.5.5).
  O offset lateral já é tratado pelo grid (offset-md-3 / offset-lg-2).
*/
.main-content {
    padding-bottom: 52px; /* altura do footer (44px) + margem de segurança */
}

/* =============================================
   UTILITÁRIOS GERAIS
============================================= */
.icon-blue {
    color: var(--cor-primaria);
}

.zebra tbody tr:nth-child(odd) {
    background-color: var(--cor-fundo);
}

.AlertaErro {
    color: var(--cor-perigo);
    font-weight: bold;
}

/* =============================================
   BADGE DE CONTAGEM – Normas Jurídicas
   FIX: position:absolute relativo ao .nav-link
   (que já possui position pela base do Shards).
   Remove margens negativas frágeis.
   font-size mínimo de 0.65rem (~10px) para WCAG 1.4.4.
============================================= */
.main-sidebar .nav-item {
    position: relative; /* âncora para o badge absoluto */
}

.BadgeTotal {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.65rem;    /* ≈ 10.4px – mínimo legível */
    min-width: 18px;
    min-height: 18px;
    line-height: 18px;
    padding: 0 4px;
    text-align: center;
    border-radius: 10px;
    vertical-align: unset;
    margin: 0;
}

/* =============================================
   BANNER PWA – iOS
   FIX: safe-area-inset para iPhones com
   Home Indicator (iPhone X em diante).
============================================= */
.ios-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff3cd;
    color: #856404;
    border-top: 2px solid #ffeeba;
    z-index: 1000;
    /* Padding com fallback para navegadores sem suporte a env() */
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    display: flex;
    justify-content: center;
    align-items: center;
    animation: slideIn 0.5s ease-out;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.ios-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
    text-align: left;
}

.ios-banner-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0; /* não encolhe em telas pequenas */
}

.icon-share {
    font-size: 1.2em;
}

@keyframes slideIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (min-width: 768px) {
    .ios-banner-content {
        font-size: 1rem;
    }
}

/* =============================================
   AJUSTE DE PADDING PARA BANNER PWA
============================================= */
.banner-visible {
    padding-bottom: 60px;
}

/* =============================================
   TOPBAR – Logo e Título da Entidade
============================================= */
.navbar-brand-custom {
    min-width: 0;
}

.navbar-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
}

.navbar-title-wrapper {
    line-height: 1.1;
    min-width: 0; /* permite truncamento via text-overflow */
}

.navbar-subtitle {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: var(--cor-texto); /* FIX: o cinza anterior dava ~4.48:1; o token de texto passa de 4.5:1 */
    display: block;
}

.navbar-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cor-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
}

@media (max-width: 768px) {
    .navbar-title {
        max-width: 200px;
        font-size: 0.95rem;
    }
}
@media (max-width: 400px) {
    .navbar-title {
        max-width: 140px;
        font-size: 0.85rem;
    }
    .navbar-subtitle {
        font-size: 0.6rem;
    }
}

/* =============================================
   SIDEBAR – Itens de Navegação
============================================= */

/* Separador de seção dentro da sidebar */
.nav-section-header {
    pointer-events: none;
}

.main-sidebar .nav .nav-item .nav-link {
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    border-radius: 6px;
    margin: 3px 8px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    /* FIX WCAG 2.5.5: área de toque mínima 44px */
    min-height: 44px;
}

.main-sidebar .nav .nav-item .nav-link:hover {
    background-color: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    transform: translateX(4px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}

.main-sidebar .nav .nav-item .nav-link i {
    transition: transform 0.25s ease, color 0.25s ease;
    font-size: 1.125rem;
    flex-shrink: 0; /* ícone não encolhe */
}

.main-sidebar .nav .nav-item .nav-link:hover i {
    transform: scale(1.15);
    color: var(--cor-primaria);
}

/* Estado Ativo – segue paleta govbr
   FIX: margem corrigida para alinhar com os demais
   itens (margin: 3px 8px → margin: 3px 0 para laterais,
   compensando o border-left de 4px no padding) */
.main-sidebar .nav .nav-item .nav-link.active {
    background-color: var(--cor-primaria-clara);
    font-weight: 700;
    color: var(--cor-primaria);
    border-left: 4px solid var(--cor-primaria);
    border-radius: 0 6px 6px 0;
    /* FIX: zero nas laterais, mantém top/bottom de 3px */
    margin: 3px 0;
    /* FIX: padding-left = margem-lateral-normal(8px) + padding-original(15px) - border(4px) + 4px = 23px
       Mantém o texto alinhado com os outros itens visualmente */
    padding-left: 23px;
}

.main-sidebar .nav .nav-item .nav-link.active i {
    color: var(--cor-primaria);
}

/* =============================================
   SIDEBAR – Dropdown de Processo Legislativo
============================================= */
.main-sidebar .dropdown-menu {
    transition: all 0.25s ease;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-top: 5px;
}

.main-sidebar .dropdown-item {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    padding: 8px 20px;
    border-radius: 4px;
    margin: 2px 8px;
    width: auto;
    /* FIX WCAG 2.5.5: área de toque mínima */
    min-height: 44px;
    display: flex;
    align-items: center;
}

.main-sidebar .dropdown-item:hover,
.main-sidebar .dropdown-item:focus {
    background-color: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    transform: translateX(3px);
}

/* =============================================
   RESPONSIVIDADE MOBILE – Sidebar Overlay
   Em telas < 768px a sidebar vira um painel
   deslizante por cima do conteúdo, com backdrop.
============================================= */
@media (max-width: 767px) {

    /* Sidebar: fora da tela por padrão */
    .main-sidebar {
        position: fixed !important;
        top: 0;
        left: -100%;
        width: 85% !important;
        max-width: 300px;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1050;
        background: var(--cor-superficie);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
        transition: left 0.3s ease;
        scrollbar-width: thin;
        scrollbar-color: var(--cor-borda) transparent;
    }

    /* Sidebar aberta (classe adicionada via JS) */
    .main-sidebar.sidebar-open {
        left: 0;
        /* o tema (Shards) esconde a sidebar com translateX(-100%) em telas pequenas;
           antes o shards-dashboards.js anulava com a classe .open, removida junto com ele */
        transform: translateX(0);
    }

    /* Backdrop semitransparente atrás da sidebar */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1040;
        cursor: pointer;
    }

    .sidebar-backdrop.active {
        display: block;
    }

    /* Conteúdo ocupa 100% em mobile */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding-bottom: 56px;
    }

    /* Remove offset de grid em mobile */
    .main-content.col-md-9,
    .main-content.col-lg-10 {
        margin-left: 0 !important;
    }

    /* Barra de acessibilidade compacta em mobile */
    #barra-acessibilidade {
        font-size: 0.7rem;
    }

    /* Topbar: menor padding */
    .main-navbar .navbar {
        padding: 0.25rem 0.5rem !important;
    }

    /* Logo menor em mobile */
    .navbar-logo {
        width: 36px;
        height: 36px;
    }

    /* Nav-links ainda com 44px em mobile */
    .main-sidebar .nav .nav-item .nav-link {
        min-height: 44px;
        padding: 10px 12px;
    }

    /* Dropdown items com alvo de toque correto */
    .main-sidebar .dropdown-item {
        min-height: 44px;
        padding: 10px 16px;
    }

    /* BadgeTotal reposicionado para mobile */
    .BadgeTotal {
        top: 4px;
        right: 4px;
    }
}

/* =============================================
   RESPONSIVIDADE MOBILE – Barra de Acessibilidade
============================================= */
@media (max-width: 480px) {
    .barra-ac-container {
        padding: 4px 8px;
    }

    /* Esconde o rótulo "Acessibilidade:" em telas muito pequenas */
    .barra-ac-label {
        display: none;
    }

    /* Reduz gap entre botões */
    #barra-acessibilidade nav ul {
        gap: 2px 6px;
    }
}

/* =============================================
   RESPONSIVIDADE MOBILE – Topbar Toggle
   Botão hambúrguer para abrir sidebar em mobile
============================================= */
.sidebar-toggle-btn {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--cor-texto);
    border-radius: 6px;
    min-width: 44px;   /* WCAG 2.5.5 */
    min-height: 44px;  /* WCAG 2.5.5 */
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.sidebar-toggle-btn:hover {
    background-color: var(--cor-fundo);
}

.sidebar-toggle-btn:focus-visible {
    outline: 3px solid var(--cor-primaria);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .sidebar-toggle-btn {
        display: inline-flex;
    }
}

/* =============================================
   MOTION SAFETY – Respeita preferência do SO
   (WCAG 2.3.3 — Animation from Interactions)
============================================= */
@media (prefers-reduced-motion: reduce) {
    /* Sidebar overlay */
    .main-sidebar {
        transition: none !important;
    }

    /* Banner PWA */
    .ios-banner {
        animation: none !important;
    }

    /* Nav-links */
    .main-sidebar .nav .nav-item .nav-link,
    .main-sidebar .nav .nav-item .nav-link i,
    .main-sidebar .dropdown-item {
        transition: none !important;
        transform: none !important;
    }

    /* Dropdown */
    .main-sidebar .dropdown-menu {
        transition: none !important;
    }

    /* Navbar title */
    .navbar-title,
    .navbar-logo {
        transition: none !important;
    }
}

/* =============================================
   LAZY LOAD / SKELETON SCREEN (FOTOS VEREADORES)
============================================= */
.lazy-load {
    /* placeholder liso enquanto a foto carrega (sem brilho em degradê) */
    background-color: var(--cor-fundo);
}

.lazy-loaded {
    animation: none;
    transition: opacity 0.5s ease;
    opacity: 1;
    background-size: cover;
    background-position: center top;
}

.lazy-loading {
    opacity: 0;
}

/* Garante que imagens img que falham fiquem visíveis depois do load falso */
img.lazy-loaded {
    opacity: 1;
}

/* =============================================
   SEO TECHNICAL OVERRIDES
   ============================================= */
h1.navbar-title {
    margin: 0;
    padding: 0;
    line-height: normal;
    display: inline-block;
}



/* =====================================================================
   SHELL — ajustes gov.br (spec 2026-10-02, seção 3)
   ===================================================================== */

/* Ícones Font Awesome na sidebar: largura fixa para alinhar os textos */
.main-sidebar .nav .nav-item .nav-link i {
    width: 1.25rem;
    text-align: center;
}

/* Link ativo e hover da sidebar — um único efeito, só no link.
   O tema (Shards) também pinta o <li> (.nav-item:hover/.active) com fundo e barra,
   o que somado ao link-cartão gerava dois efeitos sobrepostos. */
.main-sidebar .nav .nav-item:hover,
.main-sidebar .nav .nav-item.active {
    background-color: transparent;
    box-shadow: none;
}

.main-sidebar .nav .nav-item .nav-link.active {
    background-color: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    box-shadow: inset 3px 0 0 var(--cor-primaria);
    border-left: 0;
    border-radius: 6px;
    margin: 3px 8px;
    padding: 10px 15px;
}

.main-sidebar .nav .nav-item .nav-link.active i {
    color: var(--cor-primaria);
}

.main-sidebar .nav .nav-item .nav-link:hover {
    background-color: var(--cor-fundo);
    color: var(--cor-primaria);
    box-shadow: inset 3px 0 0 var(--cor-primaria);
    transform: none;
}

.main-sidebar .nav .nav-item .nav-link.active:hover {
    background-color: var(--cor-primaria-clara);
}

/* Largura da sidebar fixa (antes: col-md-3 / col-lg-2, que davam só ~170px em 1024px).
   A sidebar é position: fixed no tema, por isso precisa de width (flex não se aplica);
   o conteúdo começa logo após ela. Só o main do shell (#conteudo-principal):
   alguns módulos (pautas, atas, parlamentar_atual) têm um <main class="main-content"> interno. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .main-sidebar {
        flex: 0 0 220px;
        width: 220px;
        max-width: 220px;
    }
    #conteudo-principal.main-content {
        flex: 0 0 calc(100% - 220px);
        max-width: calc(100% - 220px);
        margin-left: 220px;
    }
}

@media (min-width: 992px) {
    .main-sidebar {
        flex: 0 0 240px;
        width: 240px;
        max-width: 240px;
    }
    #conteudo-principal.main-content {
        flex: 0 0 calc(100% - 240px);
        max-width: calc(100% - 240px);
        margin-left: 240px;
    }
}

/* Textos longos quebram linha em vez de serem cortados */
.main-sidebar .nav .nav-item .nav-link {
    white-space: normal;
    line-height: 1.3;
}

/* Contador de normas como item do flex, à direita (não sobrepõe o texto) */
.main-sidebar .BadgeTotal {
    position: static;
    order: 2;
    margin-left: auto;
    flex-shrink: 0;
}

/* Títulos de seção da sidebar */
.main-sidebar .main-sidebar__nav-title {
    text-transform: uppercase;
    color: var(--cor-texto-suave);
    font-weight: 600;
}

/* Contadores de normas: neutros (não são alerta) */
.main-sidebar .BadgeTotal,
.main-sidebar .badge-danger.BadgeTotal {
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
}

/* Título da entidade na topbar */
.navbar-title {
    color: var(--cor-primaria-profunda);
}

/* Evita o zoom automático do iOS ao focar campos */
@media (max-width: 575.98px) {
    .form-control {
        font-size: 1rem;
    }
}

/* =====================================================================
   COMPONENTES BASE — para os módulos (adoção no subprojeto C)
   ===================================================================== */

/* Cabeçalho de página */
.page-header .page-title {
    color: var(--cor-primaria-profunda);
    font-weight: 600;
}

.page-header .page-subtitle {
    color: var(--cor-texto-suave);
    text-transform: uppercase;
}

/* Card de consulta */
.card-small {
    border: 1px solid var(--cor-borda);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.card-small .card-header .card-title,
.card-small .card-header h5,
.card-small .card-header h6 {
    color: var(--cor-primaria-profunda);
}

/* Tabela de resultados — opt-in pela classe (não vale para toda .card .table:
   muitos módulos têm linhas com cor própria, como .TituloLista, ou itens em duas linhas) */
.tabela-resultados thead th {
    background-color: var(--cor-fundo);
    font-weight: 600;
}

.tabela-resultados tbody tr:nth-of-type(odd) {
    background-color: var(--cor-fundo);
}

.tabela-resultados tbody tr:hover {
    background-color: var(--cor-primaria-clara);
}

/* Barra de filtros */
.filtro-consulta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
    align-items: end;
}

.filtro-consulta .filtro-acoes {
    display: flex;
    gap: .5rem;
}

/* Estado vazio */
.estado-vazio {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--cor-texto-suave);
}

.estado-vazio i {
    font-size: 2rem;
    display: block;
    margin-bottom: .5rem;
}

/* Status */
.badge-status-sucesso { background-color: var(--cor-sucesso); color: #fff; }
.badge-status-perigo  { background-color: var(--cor-perigo);  color: #fff; }
.badge-status-info    { background-color: var(--cor-info);    color: #fff; }
.badge-status-aviso   { background-color: var(--cor-aviso);   color: var(--cor-texto); }
.badge-status-neutro  { background-color: var(--cor-fundo);   color: var(--cor-texto); border: 1px solid var(--cor-borda); }