/* static/css/style.css */

/* --- VARIÁVEIS DO SISTEMA --- */
/* As cores e a fonte da marca (out/2026) moram em marca.css; estas são as antigas, que algumas
   telas ainda usam, apontadas para elas. */
:root {
    --primary-color: var(--marca-teal-escuro);
    --secondary-color: var(--marca-petroleo);
    --success-color: #25d366; /* Verde WhatsApp (botões do WhatsApp) */
    --bg-color: var(--marca-nevoa);
    --text-color: var(--marca-petroleo);
    --sidebar-width: 250px;
    --font-main: var(--marca-fonte);
}

/* --- ESTILO BASE --- */
body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
}

/* --- ACESSIBILIDADE: MODO LEITURA (dislexia) --- */
/* A fonte (@font-face) e as variáveis estão em marca.css; esta regra alcança também as telas
   que declaram fonte própria. Os ícones voltam à fonte deles mais abaixo. */
body.dyslexic-mode * {
    font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
    line-height: 1.8 !important;
    letter-spacing: 0.05em !important;
}

/* --- ACESSIBILIDADE: ALTO CONTRASTE --- */
/* O tema inteiro (variáveis, componentes, botões e fundos) está em marca.css. */

/* --- LAYOUT: BARRA DO TOPO --- */
.navbar-custom {
    background-color: var(--marca-petroleo);
    border-bottom: 3px solid var(--marca-teal);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    padding: 0.5rem 1rem;
}

/* Links e botões claros sobre o petróleo */
.navbar-custom .navbar-brand,
.navbar-custom .btn {
    color: #fff !important;
}

.navbar-custom .navbar-nav .nav-link {
    color: #fff;
    font-weight: 600;
    font-size: .9375rem;
    white-space: nowrap;
    border-radius: .375rem;
}

/* Menu recolhido (abaixo de 1200 px): os botões da direita quebram linha em vez de vazar,
   e o sininho fica só no atalho ao lado do logo (antes apareciam dois). */
@media (max-width: 1199.98px) {
    .navbar-custom #navbarContent > .d-flex {
        flex-wrap: wrap;
        row-gap: .5rem;
        padding-bottom: .5rem;
    }
    .navbar-custom #navbarContent .dropdown:has(> #sino) {
        display: none;
    }
}

/* Barra aberta em tela média (1200–1399 px, o notebook comum): menos folga entre os itens
   para caber numa linha só, com o "Ver como..." do superusuário. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-custom .navbar-nav .nav-link {
        padding-left: .4rem;
        padding-right: .4rem;
    }
    .navbar-custom .navbar-brand {
        margin-right: .5rem;
    }
}

.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-nav .nav-link:focus,
.navbar-custom .navbar-nav .nav-link.show {
    color: var(--marca-agua);
}

/* O grupo (ou o item) da tela aberta: sublinhado em teal, além da cor */
.navbar-custom .navbar-nav .nav-link.active {
    color: #fff;
    box-shadow: inset 0 -3px 0 var(--marca-teal);
}

.navbar-custom .navbar-toggler {
    border-color: rgba(255,255,255,0.6);
}

.navbar-custom .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-custom .btn-outline-secondary {
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

.navbar-custom .btn-outline-secondary:hover {
    background-color: #fff;
    color: var(--marca-petroleo) !important;
}

/* Avatar sem foto: as iniciais, desenhadas aqui (nada sai para serviço de fora) */
.avatar-iniciais {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--marca-teal-escuro);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
}

body.high-contrast-mode .avatar-iniciais {
    background-color: #000;
    color: #ff0;
    border: 2px solid #ff0;
}

/* "Ver como..." (só superusuário): contorno em água sobre o petróleo */
.navbar-custom .btn-ver-como {
    border: 1px solid var(--marca-agua);
    color: var(--marca-agua) !important;
    background-color: transparent;
}

.navbar-custom .btn-ver-como:hover,
.navbar-custom .btn-ver-como.show {
    background-color: var(--marca-agua);
    color: var(--marca-petroleo) !important;
}

body.high-contrast-mode .navbar-custom .btn-ver-como {
    border-color: #ff0;
    color: #ff0 !important;
}

.brand-logo {
    height: 28px; /* assinatura horizontal (7:1) */
    width: auto;
    display: block;
}

/* Celular: a assinatura um pouco menor, para o sininho e o botão do menu caberem na mesma linha */
@media (max-width: 575.98px) {
    .brand-logo { height: 22px; }
    .navbar-custom .navbar-brand { margin-right: .5rem; }
}

/* Alto contraste: a assinatura toda em branco */
.brand-logo--branca { display: none; }
body.high-contrast-mode .brand-logo--negativa { display: none; }
body.high-contrast-mode .brand-logo--branca { display: block; }

.main-container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Celular: menos margem lateral, para o conteúdo não espremer */
@media (max-width: 575.98px) {
    .main-container {
        padding: 1rem .75rem;
    }
}

/* Cartões de Dashboard */
.card-custom {
    background: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
/* --- CORREÇÃO DO DROPDOWN --- */
/* Garante que os botões dentro do menu (fundo branco) tenham cor legível */
.navbar-custom .dropdown-menu .btn {
    color: #333 !important; /* Texto escuro */
    border-color: #dee2e6 !important; /* Borda suave */
}

/* Botão Ativo. O teal da marca com texto branco dá só 3:1: no menu o
   estado ligado usa o teal escuro (#027183, 5,69:1, WCAG AA). */
.navbar-custom .dropdown-menu .btn-primary {
    color: #fff !important;
    background-color: var(--marca-teal-escuro) !important;
    border-color: var(--marca-teal-escuro) !important;
}
/* No alto contraste a variável da marca vira amarelo e o texto branco sumia (1,07:1). */
body.high-contrast-mode .navbar-custom .dropdown-menu .btn-primary {
    background-color: #000 !important;
    color: #FFFF00 !important;
    border: 2px solid #FFFF00 !important;
}

/* Botão Alto Contraste Ativo (Amarelo) */
.navbar-custom .dropdown-menu .btn-warning {
    color: #000 !important;
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
}

/* Estado Hover (Ao passar o mouse) */
.navbar-custom .dropdown-menu .btn:hover {
    background-color: #e9ecef !important;
    color: #000 !important;
}

/* --- ALINHAMENTO DE FORMULÁRIOS --- */
.form-label {
    min-height: 42px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   NOVIDADES DO SISTEMA — sininho da navbar e página /novidades/
   (templates/base.html e templates/core/novidades.html)
   Texto sobre fundo claro usa o teal escuro (o teal da marca fica em ~3:1 no branco).
   ========================================================================== */

/* --- Sininho: dropdown --- */
.sino-menu {
    padding-top: 0.25rem;
}
.sino-menu .sino-secao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.25rem;
}
.sino-menu .dropdown-header {
    padding: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--marca-petroleo);
}
.sino-menu .sino-ver-todas {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--marca-teal-escuro);
    text-decoration: none;
}
.sino-menu .sino-ver-todas:hover,
.sino-menu .sino-ver-todas:focus {
    text-decoration: underline;
}
.sino-menu .sino-item {
    white-space: normal;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #f0f2f4;
}
.sino-menu .sino-linha-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.4rem;
    margin-bottom: 0.2rem;
}
.sino-menu .sino-meta {
    font-size: 0.72rem;
    color: #5c636a;
}
.sino-menu .sino-titulo {
    display: block;
    font-size: 0.86rem;
    line-height: 1.3;
}
.sino-menu .sino-ocultas {
    color: var(--marca-teal-escuro);
    font-weight: 600;
}
.sino-menu .sino-mencao-icone {
    color: var(--marca-teal-escuro);
}

/* Marca de tipo (sininho e página): a cor vem de VISUAL_TIPO, sempre com ícone + texto. */
.novidade-badge {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.sino-nova,
.novidade-nova {
    background-color: #0b5f6e;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
}

/* --- Página /novidades/: linha do tempo --- */
.novidades-pagina {
    max-width: 880px;
    margin: 0 auto;
}
.novidades-cabecalho {
    border-bottom: 3px solid var(--marca-teal);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
.novidades-h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--marca-petroleo);
    margin: 0 0 0.25rem;
}
.novidades-h1 .fa-bell {
    color: var(--marca-teal);
}
.novidades-subtitulo {
    color: #5c636a;
    margin: 0 0 0.6rem;
}
.novidades-total {
    display: inline-block;
    margin: 0;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    background-color: #e6f5f8;
    color: var(--marca-petroleo);
    font-size: 0.9rem;
}

.novidades-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}
.novidades-campo {
    display: flex;
    flex-direction: column;
    flex: 1 1 12rem;
    min-width: 0;
}
.novidades-campo label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--marca-petroleo);
    margin-bottom: 0.2rem;
}
.novidades-acoes {
    display: flex;
    gap: 0.25rem;
}
.novidades-btn {
    background-color: var(--marca-petroleo);
    border: 1px solid var(--marca-petroleo);
    color: #fff;
}
.novidades-btn:hover,
.novidades-btn:focus {
    background-color: var(--marca-teal);
    border-color: var(--marca-teal);
    color: #000;
}
.novidades-limpar {
    color: var(--marca-teal-escuro);
    text-decoration: underline;
}

/* Atalho para a página "Minhas notificações" (as menções e os bloqueios moram lá). */
.novidades-atalho {
    background-color: #fff;
    border: 1px solid #e3e7eb;
    border-left: 4px solid var(--marca-teal);
    border-radius: 8px;
    padding: 0.75rem 1.1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #333;
}
.novidades-atalho .fa-at,
.novidades-atalho a {
    color: var(--marca-teal-escuro);
}

.novidades-dia {
    margin-bottom: 1.75rem;
}
.novidades-dia-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--marca-petroleo);
    margin: 0 0 0.75rem;
}
.novidades-hoje {
    font-size: 0.7rem;
    font-weight: 600;
    background-color: var(--marca-teal);
    color: #000;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}
.novidades-linha {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-left: 0.4rem;
    padding-left: 1.25rem;
    border-left: 2px solid #cfe9ee;
}
.novidade-item {
    position: relative;
    background-color: #fff;
    border: 1px solid #e3e7eb;
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    scroll-margin-top: 90px; /* a navbar é sticky: o link #novidade-… não esconde o título */
}
/* Ponto na linha do tempo, centrado sobre a borda de .novidades-linha */
.novidade-item::before {
    content: '';
    position: absolute;
    left: calc(-1.25rem - 7px);
    top: 1.1rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid var(--marca-teal);
}
.novidade-item--nova {
    border-color: var(--marca-teal);
    box-shadow: inset 3px 0 0 var(--marca-teal);
}
.novidade-item--nova::before {
    background-color: var(--marca-teal);
}
.novidade-item:target {
    outline: 3px solid var(--marca-teal);
    outline-offset: 2px;
}
.novidade-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    font-size: 0.8rem;
    color: #5c636a;
    margin-bottom: 0.35rem;
}
.novidade-hora {
    font-weight: 700;
    color: var(--marca-petroleo);
    font-variant-numeric: tabular-nums;
}
.novidade-titulo {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--marca-petroleo);
    margin: 0 0 0.35rem;
}
.novidade-descricao {
    font-size: 0.92rem;
    color: #333;
    overflow-wrap: anywhere;
}
.novidade-descricao p:last-child {
    margin-bottom: 0;
}
.novidade-entregas {
    margin: 0.5rem 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--marca-teal-escuro);
}
.novidades-vazio {
    color: #5c636a;
    padding: 1.5rem 0;
}
.novidades-paginacao .page-link {
    color: var(--marca-teal-escuro);
}
.novidades-paginacao .page-item.disabled .page-link {
    color: #5c636a;
}

@media (max-width: 575.98px) {
    .novidades-h1 {
        font-size: 1.35rem;
    }
    .novidades-linha {
        margin-left: 0.2rem;
        padding-left: 0.9rem;
    }
    .novidade-item {
        padding: 0.75rem 0.85rem;
    }
    .novidade-item::before {
        left: calc(-0.9rem - 7px);
    }
}

/* --- Alto contraste: sininho e página --- */
body.high-contrast-mode .sino-menu {
    background-color: #000 !important;
    border: 2px solid #FFFF00 !important;
}
body.high-contrast-mode .sino-menu .dropdown-item {
    color: #00FFFF !important;
    background-color: transparent;
    border-bottom-color: #333;
}
body.high-contrast-mode .sino-menu .dropdown-item:hover,
body.high-contrast-mode .sino-menu .dropdown-item:focus {
    background-color: #222 !important;
}
body.high-contrast-mode .sino-menu .dropdown-header {
    color: #FFFF00 !important;
}
body.high-contrast-mode .sino-menu .sino-meta,
body.high-contrast-mode .sino-menu .dropdown-item-text,
body.high-contrast-mode .sino-menu .text-muted {
    color: #FFF !important;
}
body.high-contrast-mode .sino-menu .dropdown-divider {
    border-color: #FFFF00;
    opacity: 1;
}
body.high-contrast-mode .sino-menu .sino-mencao-icone {
    color: #00FFFF;
}
body.high-contrast-mode .novidade-badge,
body.high-contrast-mode .sino-nova,
body.high-contrast-mode .novidade-nova,
body.high-contrast-mode .novidades-hoje {
    background-color: #000 !important;
    color: #FFFF00 !important;
    border: 1px solid #FFFF00 !important;
}
body.high-contrast-mode .novidade-item {
    background-color: #000 !important;
    color: #FFF !important;
    border: 2px solid #FFFF00 !important;
    box-shadow: none;
}
body.high-contrast-mode .novidade-item::before {
    background-color: #000;
    border-color: #FFFF00;
}
body.high-contrast-mode .novidade-item--nova::before {
    background-color: #FFFF00;
}
body.high-contrast-mode .novidade-item:target {
    outline-color: #00FFFF;
}
body.high-contrast-mode .novidades-linha {
    border-left-color: #FFFF00;
}
body.high-contrast-mode .novidades-cabecalho {
    border-bottom-color: #FFFF00;
}
body.high-contrast-mode .novidades-h1,
body.high-contrast-mode .novidades-h1 .fa-bell,
body.high-contrast-mode .novidades-subtitulo,
body.high-contrast-mode .novidades-dia-titulo,
body.high-contrast-mode .novidades-campo label,
body.high-contrast-mode .novidades-atalho,
body.high-contrast-mode .novidades-atalho .fa-at,
body.high-contrast-mode .novidades-vazio,
body.high-contrast-mode .novidade-meta,
body.high-contrast-mode .novidade-hora,
body.high-contrast-mode .novidade-titulo,
body.high-contrast-mode .novidade-descricao,
body.high-contrast-mode .novidade-entregas {
    color: #FFF !important;
}
body.high-contrast-mode .novidades-total,
body.high-contrast-mode .novidades-atalho {
    background-color: #000 !important;
    color: #FFF !important;
    border: 2px solid #FFFF00 !important;
}
body.high-contrast-mode .novidades-atalho a {
    color: #00FFFF !important;
}
body.high-contrast-mode .novidades-btn {
    background-color: #000;
    border: 2px solid #FFFF00;
    color: #FFFF00 !important;
    font-weight: bold;
}
body.high-contrast-mode .novidades-paginacao .page-link {
    background-color: #000;
    border-color: #FFFF00;
}
body.high-contrast-mode .novidades-paginacao .page-item.disabled .page-link {
    color: #FFF !important;
}

/* --- Modo dislexia: devolve os ícones do Font Awesome no sistema inteiro ---
   O `body.dyslexic-mode *` (acima) troca a fonte de TODO elemento, inclusive a do
   <i class="fas …">, e o ícone vira um quadrado vazio. Aqui a fonte do ícone volta
   (seletor mais específico, também !important). */
body.dyslexic-mode .fa,
body.dyslexic-mode .fas,
body.dyslexic-mode .far,
body.dyslexic-mode .fa-solid,
body.dyslexic-mode .fa-regular {
    font-family: 'Font Awesome 6 Free' !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
}
body.dyslexic-mode .fab,
body.dyslexic-mode .fa-brands {
    font-family: 'Font Awesome 6 Brands' !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
}
/* --- fim NOVIDADES DO SISTEMA --- */

/* ==========================================================================
   MINHAS NOTIFICAÇÕES — página /notificacoes/ (templates/core/notificacoes.html)
   Mesma linguagem da página de novidades: linha do tempo por dia, cartões com
   ícone + texto (nunca só a cor), contraste AA e regras de alto contraste.
   ========================================================================== */
.notificacoes-pagina {
    max-width: 880px;
    margin: 0 auto;
}
.notificacoes-cabecalho {
    border-bottom: 3px solid var(--marca-teal);
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
}
.notificacoes-h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--marca-petroleo);
    margin: 0 0 0.25rem;
}
.notificacoes-h1 .fa-bell {
    color: var(--marca-teal);
}
.notificacoes-subtitulo {
    color: #5c636a;
    margin: 0 0 0.6rem;
}
.notificacoes-total {
    display: inline-block;
    margin: 0;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    background-color: #e6f5f8;
    color: var(--marca-petroleo);
    font-size: 0.9rem;
}
.notificacoes-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.notificacoes-campo {
    display: flex;
    flex-direction: column;
    flex: 1 1 12rem;
    min-width: 0;
}
.notificacoes-campo--data {
    flex: 1 1 8rem;
}
.notificacoes-campo label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--marca-petroleo);
    margin-bottom: 0.2rem;
}
.notificacoes-acoes {
    display: flex;
    gap: 0.25rem;
}
.notificacoes-btn {
    background-color: var(--marca-petroleo);
    border: 1px solid var(--marca-petroleo);
    color: #fff;
}
.notificacoes-btn:hover,
.notificacoes-btn:focus {
    background-color: var(--marca-teal);
    border-color: var(--marca-teal);
    color: #000;
}
.notificacoes-limpar {
    color: var(--marca-teal-escuro);
    text-decoration: underline;
}
.notificacoes-nota,
.notificacoes-vazio {
    color: #5c636a;
    font-size: 0.85rem;
}
.notificacoes-vazio {
    font-size: 1rem;
    padding: 1.5rem 0;
}
.notificacoes-todas {
    margin: 0 0 1.25rem;
}
.notificacoes-btn-todas {
    background-color: #fff;
    border: 1px solid var(--marca-teal-escuro);
    color: var(--marca-teal-escuro);
    font-weight: 600;
}
.notificacoes-btn-todas:hover,
.notificacoes-btn-todas:focus {
    background-color: var(--marca-teal-escuro);
    color: #fff;
}
.notificacoes-dia {
    margin-bottom: 1.75rem;
}
.notificacoes-dia-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--marca-petroleo);
    margin: 0 0 0.75rem;
}
.notificacoes-hoje {
    font-size: 0.7rem;
    font-weight: 600;
    background-color: var(--marca-teal);
    color: #000;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}
.notificacoes-linha {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-left: 0.4rem;
    padding-left: 1.25rem;
    border-left: 2px solid #cfe9ee;
}
.notificacao-item {
    position: relative;
    background-color: #fff;
    border: 1px solid #e3e7eb;
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
}
/* Ponto na linha do tempo, centrado sobre a borda de .notificacoes-linha */
.notificacao-item::before {
    content: '';
    position: absolute;
    left: calc(-1.25rem - 7px);
    top: 1.1rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid var(--marca-teal);
}
.notificacao-item--nova {
    border-color: var(--marca-teal);
    box-shadow: inset 3px 0 0 var(--marca-teal);
}
.notificacao-item--nova::before {
    background-color: var(--marca-teal);
}
.notificacao-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    font-size: 0.8rem;
    color: #5c636a;
    margin-bottom: 0.35rem;
}
.notificacao-hora {
    font-weight: 700;
    color: var(--marca-petroleo);
    font-variant-numeric: tabular-nums;
}
.notificacao-badge {
    font-size: 0.68rem;
    font-weight: 600;
}
.notificacao-badge--mencao {
    background-color: #0b5f6e;
    color: #fff;
}
.notificacao-badge--bloqueio {
    background-color: #7a2e00;
    color: #fff;
}
.notificacao-situacao--nova {
    color: var(--marca-teal-escuro);
    font-weight: 700;
}
.notificacao-titulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--marca-petroleo);
    margin: 0 0 0.25rem;
}
.notificacao-onde {
    font-size: 0.85rem;
    color: #333;
    margin: 0 0 0.4rem;
}
.notificacao-codigo {
    font-size: 0.78rem;
    color: #5c636a;
    margin-left: 0.25rem;
}
.notificacao-texto {
    font-size: 0.92rem;
    color: #333;
    background-color: #f7f9fa;
    border-left: 3px solid #cfe9ee;
    border-radius: 0 6px 6px 0;
    padding: 0.5rem 0.75rem;
    overflow-wrap: anywhere;
}
.notificacao-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}
.notificacao-abrir {
    background-color: var(--marca-teal);
    border: 1px solid var(--marca-teal-escuro);
    color: #000;
    font-weight: 600;
}
.notificacao-abrir:hover,
.notificacao-abrir:focus {
    background-color: var(--marca-teal-escuro);
    color: #fff;
}
.notificacao-marcar {
    background-color: #fff;
    border: 1px solid #5c636a;
    color: var(--marca-petroleo);
}
.notificacao-marcar:hover,
.notificacao-marcar:focus {
    background-color: var(--marca-petroleo);
    color: #fff;
}
.notificacoes-paginacao .page-link {
    color: var(--marca-teal-escuro);
}
.notificacoes-paginacao .page-item.disabled .page-link {
    color: #5c636a;
}

@media (max-width: 575.98px) {
    .notificacoes-h1 {
        font-size: 1.35rem;
    }
    .notificacoes-campo,
    .notificacoes-campo--data {
        flex: 1 1 100%;
    }
    .notificacoes-acoes,
    .notificacao-botoes form,
    .notificacao-botoes .btn {
        flex: 1 1 100%;
    }
    .notificacao-botoes .btn {
        width: 100%;
    }
    .notificacoes-linha {
        margin-left: 0.2rem;
        padding-left: 0.9rem;
    }
    .notificacao-item {
        padding: 0.75rem 0.85rem;
    }
    .notificacao-item::before {
        left: calc(-0.9rem - 7px);
    }
}

/* --- Alto contraste: página de notificações --- */
body.high-contrast-mode .notificacao-item {
    background-color: #000 !important;
    color: #FFF !important;
    border: 2px solid #FFFF00 !important;
    box-shadow: none;
}
body.high-contrast-mode .notificacao-item::before {
    background-color: #000;
    border-color: #FFFF00;
}
body.high-contrast-mode .notificacao-item--nova::before {
    background-color: #FFFF00;
}
body.high-contrast-mode .notificacoes-linha {
    border-left-color: #FFFF00;
}
body.high-contrast-mode .notificacoes-cabecalho {
    border-bottom-color: #FFFF00;
}
body.high-contrast-mode .notificacoes-h1,
body.high-contrast-mode .notificacoes-h1 .fa-bell,
body.high-contrast-mode .notificacoes-subtitulo,
body.high-contrast-mode .notificacoes-dia-titulo,
body.high-contrast-mode .notificacoes-campo label,
body.high-contrast-mode .notificacoes-nota,
body.high-contrast-mode .notificacoes-vazio,
body.high-contrast-mode .notificacao-meta,
body.high-contrast-mode .notificacao-hora,
body.high-contrast-mode .notificacao-titulo,
body.high-contrast-mode .notificacao-onde,
body.high-contrast-mode .notificacao-codigo,
body.high-contrast-mode .notificacao-situacao,
body.high-contrast-mode .notificacao-situacao--nova,
body.high-contrast-mode .notificacao-texto {
    color: #FFF !important;
}
body.high-contrast-mode .notificacao-texto {
    background-color: #000 !important;
    border-left-color: #FFFF00;
}
body.high-contrast-mode .notificacoes-aviso {
    background-color: #000 !important;
    color: #FFF !important;
    border: 2px solid #FFFF00 !important;
}
body.high-contrast-mode .notificacoes-total,
body.high-contrast-mode .notificacoes-hoje,
body.high-contrast-mode .notificacao-badge {
    background-color: #000 !important;
    color: #FFFF00 !important;
    border: 1px solid #FFFF00 !important;
}
body.high-contrast-mode .notificacoes-btn,
body.high-contrast-mode .notificacoes-btn-todas,
body.high-contrast-mode .notificacao-abrir,
body.high-contrast-mode .notificacao-marcar {
    background-color: #000 !important;
    border: 2px solid #FFFF00 !important;
    color: #FFFF00 !important;
    font-weight: bold;
}
body.high-contrast-mode .notificacoes-paginacao .page-link {
    background-color: #000;
    border-color: #FFFF00;
}
body.high-contrast-mode .notificacoes-paginacao .page-item.disabled .page-link {
    color: #FFF !important;
}

/* O destino do link "Abrir o comentário" (#comentario-<pk> no card do Comercial):
   a navbar é sticky, e o comentário aberto precisa saltar aos olhos. */
.comentario-item {
    scroll-margin-top: 90px;
}
.comentario-item:target {
    background-color: #e6f5f8;
    box-shadow: inset 3px 0 0 var(--marca-teal);
}
body.high-contrast-mode .comentario-item:target {
    background-color: #000 !important;
    outline: 2px solid #FFFF00;
}
/* --- fim MINHAS NOTIFICAÇÕES --- */

/* =========================================================
   BLOQUEIOS DE COBRANÇA (templates/cobranca/*)
   Lista, detalhe e cadastro. Estado sempre com ícone + texto
   (nunca só a cor), contraste AA e regras de alto contraste.
   ========================================================= */
.bloq-pagina {
    max-width: 1100px;
    margin: 0 auto;
}
.bloq-voltar {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--marca-teal-escuro);
    margin-bottom: 0.5rem;
}
.bloq-cabecalho {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    border-bottom: 2px solid var(--marca-teal);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}
.bloq-cabecalho-texto {
    flex: 1 1 22rem;
    min-width: 0;
}
.bloq-h1 {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--marca-petroleo);
    margin: 0 0 0.3rem;
    overflow-wrap: anywhere;
}
.bloq-subtitulo {
    color: #5c636a;
    font-size: 0.92rem;
}
.bloq-sub {
    font-size: 0.8rem;
    color: #5c636a;
    line-height: 1.3;
}
.bloq-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
}
.bloq-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.bloq-btn-primario {
    background-color: var(--marca-teal-escuro);
    border: 1px solid var(--marca-teal-escuro);
    color: #fff;
    font-weight: 600;
}
.bloq-btn-primario:hover,
.bloq-btn-primario:focus {
    background-color: #075a6a;
    border-color: #075a6a;
    color: #fff;
}
.bloq-estado {
    font-weight: 600;
    white-space: normal;
    text-align: left;
}
.bloq-estado--vigente {
    background-color: #d1f5e0;
    color: #0b4d26;
    border: 1px solid #25d366;
}
.bloq-estado--a_revisar {
    background-color: #fff3cd;
    color: #664d03;
    border: 1px solid #ffc107;
}
.bloq-estado--revogado {
    background-color: #e9ecef;
    color: #41464b;
    border: 1px solid #adb5bd;
}
.bloq-canal {
    background-color: #e7f6f9;
    color: #0a5866;
    border: 1px solid var(--marca-teal);
    font-weight: 500;
    white-space: normal;
    text-align: left;
    margin-bottom: 0.15rem;
}
.bloq-legado {
    background-color: var(--marca-petroleo);
    color: #fff;
}
.bloq-nao-conectado {
    color: #842029;
    font-weight: 600;
}
.bloq-conectado {
    color: #0b4d26;
    font-weight: 600;
}
.bloq-sem-responsavel {
    color: #842029;
    font-weight: 600;
}
.bloq-obrig {
    color: #b02a37;
    font-weight: 700;
}
.bloq-nome {
    font-weight: 700;
    color: var(--marca-petroleo);
    text-decoration: none;
}
.bloq-nome:hover,
.bloq-nome:focus {
    text-decoration: underline;
}
.bloq-regras {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.75rem;
    font-size: 0.88rem;
}
.bloq-regras summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--marca-teal-escuro);
}
.bloq-regras ul {
    margin-top: 0.5rem;
    padding-left: 1.2rem;
}
.bloq-canais-situacao {
    list-style: none;
    padding-left: 0 !important;
}
.bloq-atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.bloq-atalho {
    border: 1px solid var(--marca-teal-escuro);
    color: var(--marca-teal-escuro);
    background-color: #fff;
}
.bloq-atalho.active,
.bloq-atalho:hover,
.bloq-atalho:focus {
    background-color: var(--marca-teal-escuro);
    color: #fff;
}
.bloq-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem 0.75rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.75rem;
}
.bloq-campo {
    flex: 1 1 10rem;
    min-width: 0;
}
.bloq-campo label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #5c636a;
    margin-bottom: 0.15rem;
}
.bloq-campo--checks label {
    display: inline;
    font-weight: 400;
    color: #333;
}
.bloq-campo--botoes {
    flex: 0 0 auto;
    display: flex;
    gap: 0.4rem;
}
.bloq-tabela {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.bloq-tabela .table {
    font-size: 0.88rem;
}
.bloq-tabela thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #5c636a;
    white-space: nowrap;
}
.bloq-vazio {
    color: #5c636a;
    padding: 1.5rem 0;
}
.bloq-paginacao {
    margin-top: 1rem;
}
.bloq-paginacao .page-link {
    color: var(--marca-teal-escuro);
}
.bloq-paginacao .page-item.disabled .page-link {
    color: #5c636a;
}
.bloq-alerta {
    font-size: 0.92rem;
}
.bloq-secao {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}
.bloq-secao-titulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--marca-petroleo);
    margin-bottom: 0.75rem;
}
.bloq-secao-subtitulo {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--marca-petroleo);
    margin: 0.75rem 0 0.4rem;
}
.bloq-dados dt {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #5c636a;
}
.bloq-dados dd {
    margin-bottom: 0.55rem;
}
.bloq-texto {
    overflow-wrap: anywhere;
}
.bloq-documentos .list-group-item {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}
.bloq-doc-nome {
    min-width: 0;
    overflow-wrap: anywhere;
}
.bloq-quadro {
    font-size: 0.86rem;
}
.bloq-quadro--corta .bloq-quadro-corta {
    font-weight: 700;
    color: #0b4d26;
}
.bloq-quadro--fora th,
.bloq-quadro--fora td {
    color: #6c757d;
}
.bloq-quadro--fora .bloq-nao-conectado,
.bloq-quadro--fora .bloq-conectado {
    color: #6c757d;
    font-weight: 400;
}
.bloq-volta {
    padding-left: 1.2rem;
    font-size: 0.9rem;
}
.bloq-linha-tempo {
    list-style: none;
    margin: 0;
    padding-left: 1rem;
    border-left: 3px solid var(--marca-teal);
}
.bloq-evento {
    position: relative;
    padding-bottom: 0.75rem;
}
.bloq-evento::before {
    content: '';
    position: absolute;
    left: calc(-1rem - 8px);
    top: 0.3rem;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #fff;
    border: 3px solid var(--marca-teal);
}
.bloq-evento-meta {
    font-size: 0.78rem;
    color: #5c636a;
}
.bloq-evento-acao {
    font-weight: 700;
    color: var(--marca-petroleo);
}
.bloq-unidades {
    max-height: 20rem;
    overflow-y: auto;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background: #fff;
    padding: 0.4rem 0.75rem 0.4rem 2rem;
}
.bloq-unidades:empty {
    display: none;
}
.bloq-unidade {
    padding: 0.2rem 0;
    border-bottom: 1px dashed #e9ecef;
}
.bloq-ja-bloqueada {
    background-color: #fff3cd;
    color: #664d03;
    border: 1px solid #ffc107;
}
.bloq-canais-escolha .form-check {
    margin-bottom: 0.2rem;
}
.bloq-rodape-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 575.98px) {
    .bloq-h1 {
        font-size: 1.25rem;
    }
    .bloq-acoes .btn {
        flex: 1 1 45%;
    }
    .bloq-campo--botoes {
        flex: 1 1 100%;
    }
    .bloq-rodape-form .btn {
        flex: 1 1 auto;
    }
    .bloq-secao {
        padding: 0.8rem 0.85rem;
    }
}

/* --- Alto contraste: bloqueios de cobrança --- */
body.high-contrast-mode .bloq-secao,
body.high-contrast-mode .bloq-filtros,
body.high-contrast-mode .bloq-tabela,
body.high-contrast-mode .bloq-regras,
body.high-contrast-mode .bloq-unidades,
body.high-contrast-mode .bloq-modal .modal-content {
    background-color: #000 !important;
    color: #FFF !important;
    border: 2px solid #FFFF00 !important;
    box-shadow: none;
}
body.high-contrast-mode .bloq-h1,
body.high-contrast-mode .bloq-subtitulo,
body.high-contrast-mode .bloq-sub,
body.high-contrast-mode .bloq-secao-titulo,
body.high-contrast-mode .bloq-secao-subtitulo,
body.high-contrast-mode .bloq-campo label,
body.high-contrast-mode .bloq-dados dt,
body.high-contrast-mode .bloq-evento-meta,
body.high-contrast-mode .bloq-evento-acao,
body.high-contrast-mode .bloq-vazio,
body.high-contrast-mode .bloq-nome,
body.high-contrast-mode .bloq-pagina .form-label,
body.high-contrast-mode .bloq-pagina .form-text,
body.high-contrast-mode .bloq-pagina .form-check-label,
body.high-contrast-mode .bloq-modal .form-label,
body.high-contrast-mode .bloq-modal .form-text,
body.high-contrast-mode .bloq-quadro--fora th,
body.high-contrast-mode .bloq-quadro--fora td {
    color: #FFF !important;
}
body.high-contrast-mode .bloq-estado,
body.high-contrast-mode .bloq-canal,
body.high-contrast-mode .bloq-legado,
body.high-contrast-mode .bloq-ja-bloqueada {
    background-color: #000 !important;
    color: #FFFF00 !important;
    border: 1px solid #FFFF00 !important;
}
body.high-contrast-mode .bloq-nao-conectado,
body.high-contrast-mode .bloq-sem-responsavel,
body.high-contrast-mode .bloq-obrig,
body.high-contrast-mode .bloq-quadro--fora .bloq-nao-conectado {
    color: #FFFF00 !important;
    font-weight: 700;
}
body.high-contrast-mode .bloq-conectado,
body.high-contrast-mode .bloq-quadro--corta .bloq-quadro-corta {
    color: #00FF00 !important;
}
body.high-contrast-mode .bloq-pagina .table,
body.high-contrast-mode .bloq-modal .table {
    --bs-table-bg: #000;
    --bs-table-color: #FFF;
    --bs-table-hover-bg: #222;
    --bs-table-hover-color: #FFF;
    border-color: #FFFF00;
}
body.high-contrast-mode .bloq-pagina .table-light {
    --bs-table-bg: #000;
    --bs-table-color: #FFFF00;
}
body.high-contrast-mode .bloq-pagina .form-control,
body.high-contrast-mode .bloq-pagina .form-select,
body.high-contrast-mode .bloq-modal .form-control,
body.high-contrast-mode .bloq-modal .form-select {
    background-color: #000;
    color: #FFF;
    border: 2px solid #FFFF00;
}
body.high-contrast-mode .bloq-btn-primario,
body.high-contrast-mode .bloq-atalho {
    background-color: #000;
    border: 2px solid #FFFF00;
    color: #FFFF00 !important;
    font-weight: bold;
}
body.high-contrast-mode .bloq-atalho.active {
    background-color: #FFFF00;
    color: #000 !important;
}
body.high-contrast-mode .bloq-linha-tempo {
    border-left-color: #FFFF00;
}
body.high-contrast-mode .bloq-evento::before {
    background-color: #000;
    border-color: #FFFF00;
}
body.high-contrast-mode .bloq-cabecalho {
    border-bottom-color: #FFFF00;
}
body.high-contrast-mode .bloq-documentos .list-group-item {
    color: #FFF;
    border-color: #FFFF00;
}
body.high-contrast-mode .bloq-paginacao .page-link {
    background-color: #000;
    border-color: #FFFF00;
}
body.high-contrast-mode .bloq-paginacao .page-item.disabled .page-link {
    color: #FFF !important;
}
/* O "X" dos modais é um ícone escuro do Bootstrap: sobre o preto, vira branco. */
body.high-contrast-mode .bloq-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 1;
}
body.high-contrast-mode .bloq-pagina .btn-outline-secondary,
body.high-contrast-mode .bloq-modal .btn-outline-secondary {
    background-color: #000;
    border: 2px solid #FFFF00;
    color: #FFF !important;
}
body.high-contrast-mode .bloq-pagina .btn-outline-secondary:hover,
body.high-contrast-mode .bloq-pagina .btn-outline-secondary:focus,
body.high-contrast-mode .bloq-modal .btn-outline-secondary:hover,
body.high-contrast-mode .bloq-modal .btn-outline-secondary:focus {
    background-color: #FFFF00;
    color: #000 !important;
}
/* Alertas claros viram pretos: o link ciano do alto contraste sumia no fundo claro. */
body.high-contrast-mode .bloq-alerta {
    background-color: #000 !important;
    color: #FFF !important;
    border: 2px solid #FFFF00 !important;
}

/* Select2 do campo de condomínio (cobranca/form.html) no modo alto contraste: o tema
   bootstrap-5 traz as cores claras do Bootstrap e sumiria no fundo preto. */
body.high-contrast-mode .select2-container--bootstrap-5 .select2-selection,
body.high-contrast-mode .select2-container--bootstrap-5 .select2-dropdown,
body.high-contrast-mode .select2-container--bootstrap-5 .select2-search__field {
    background-color: #000 !important;
    color: #FFFF00 !important;
    border-color: #FFFF00 !important;
}
body.high-contrast-mode .select2-container--bootstrap-5 .select2-selection__rendered,
body.high-contrast-mode .select2-container--bootstrap-5 .select2-selection__placeholder,
body.high-contrast-mode .select2-container--bootstrap-5 .select2-results__option {
    color: #FFFF00 !important;
}
body.high-contrast-mode .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: #FFFF00 !important;
    color: #000 !important;
}
/* O "×" do allowClear: o tema desenha o × como imagem cinza, que vira preta no hover e some no
   fundo preto. Aqui ele fica amarelo nos dois estados. Nasceu para os filtros de condomínio da
   Prescrição e do Cadastro de unidades, mas vale para todo Select2 do tema com allowClear (CND,
   2ª via e as telas do Jurídico). A cor só aparece se o CSS do tema não carregar e o × sair
   como texto. */
body.high-contrast-mode .select2-container--bootstrap-5 .select2-selection__clear,
body.high-contrast-mode .select2-container--bootstrap-5 .select2-selection__clear:hover,
body.high-contrast-mode .select2-container--bootstrap-5 .select2-selection__clear:focus {
    color: #FFFF00 !important;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFF00'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center / 0.75rem auto no-repeat !important;
}

/* --- fim BLOQUEIOS DE COBRANÇA --- */
/* ==========================================================================
   PÁGINAS DE ERRO (templates/403.html e 404.html; a 500 e a de formulário
   expirado têm estilo próprio porque o Django as desenha sem o base.html)
   ========================================================================== */
.pagina-erro {
    max-width: 640px;
    margin: 2rem auto;
    background-color: #fff;
    border-left: 4px solid var(--marca-teal);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    padding: 2rem;
}

.pagina-erro-codigo {
    color: var(--marca-petroleo-suave);
    font-weight: 600;
    margin-bottom: .5rem;
}

.pagina-erro h1 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

body.high-contrast-mode .pagina-erro {
    background-color: #000;
    border: 2px solid #ff0;
}

body.high-contrast-mode .pagina-erro-codigo {
    color: #e6e6e6;
}