/* =========================================================================
   modern-ui.css — Camada de modernização visual do Portal do Contribuinte
   -------------------------------------------------------------------------
   Overlay carregado por ÚLTIMO em todas as telas (templates padrao /
   painelPadrao e páginas públicas). Apenas refina o tema Inspinia/PrimeFaces
   existente: tipografia, cantos arredondados, sombras suaves, transições e
   estados de foco/hover. NÃO altera estrutura, layout ou comportamento.

   Acessibilidade: todas as regras de COR/FUNDO ficam sob
   `body:not(.high-contrast)`, para não interferir no modo de alto contraste.
   Apenas refinamentos neutros (raio, sombra, espaçamento, tipografia,
   transição) são aplicados globalmente.
   ========================================================================= */

:root {
    --wp-primary: #108a96;          /* teal institucional (navbar) */
    --wp-primary-dark: #0c6b74;
    --wp-primary-light: #e6f3f4;
    --wp-text: #2a3542;
    --wp-muted: #6b7785;
    --wp-bg: #eef1f4;               /* fundo geral mais suave */
    --wp-border: #e3e8ee;
    --wp-radius: 8px;
    --wp-radius-sm: 6px;
    --wp-shadow: 0 1px 3px rgba(20, 40, 60, .06), 0 1px 2px rgba(20, 40, 60, .04);
    --wp-shadow-md: 0 4px 14px rgba(20, 40, 60, .08);
    --wp-transition: .18s ease;
}

/* =========================================================================
   1) REFINAMENTOS NEUTROS — aplicados sempre (inclusive em alto contraste).
      Não alteram cores/fundos; só forma, profundidade, espaçamento e fonte.
   ========================================================================= */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Open Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .1px;
}

h1, h2, h3, h4, h5 {
    font-weight: 600;
}

a {
    transition: color var(--wp-transition);
}

/* Cards */
.ibox {
    border-radius: var(--wp-radius);
    box-shadow: var(--wp-shadow);
    overflow: hidden;
    transition: box-shadow var(--wp-transition);
    margin-bottom: 22px;
}
.ibox:hover {
    box-shadow: var(--wp-shadow-md);
}
.ibox-title {
    padding: 14px 18px 10px;
}
.ibox-title h5 {
    font-weight: 600;
    letter-spacing: .2px;
    text-transform: none;
}
.ibox-content {
    padding: 18px;
}

/* Botões */
.btn {
    border-radius: var(--wp-radius-sm);
    font-weight: 600;
    letter-spacing: .2px;
    transition: background-color var(--wp-transition),
                box-shadow var(--wp-transition),
                transform var(--wp-transition);
    padding: 7px 16px;
}
.btn:hover {
    box-shadow: 0 2px 8px rgba(20, 40, 60, .12);
    transform: translateY(-1px);
}
.btn:active {
    transform: translateY(0);
    box-shadow: none;
}
.btn:focus,
.btn:active:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 138, 150, .22);
}
.btn-circle {
    border-radius: 50%;
}
/* navbar: botões sem o "salto" para não poluir a barra */
.navbar-webpublico .btn,
.navbar-form .btn {
    box-shadow: none;
}
.navbar-webpublico .btn:hover,
.navbar-form .btn:hover {
    transform: none;
}

/* Campos de formulário */
.form-control,
.ui-inputfield,
.ui-inputtext,
.ui-selectonemenu,
textarea.form-control {
    border-radius: var(--wp-radius-sm);
    box-shadow: none;
    transition: border-color var(--wp-transition), box-shadow var(--wp-transition);
}

/* Navbar / cabeçalho */
.navbar-webpublico {
    box-shadow: 0 2px 6px rgba(20, 40, 60, .12);
    border: 0 !important;
}
.page-heading {
    box-shadow: var(--wp-shadow);
}
.page-heading h1,
.page-heading h2 {
    font-weight: 600;
}
.breadcrumb {
    background: transparent;
    padding: 4px 0;
    margin-bottom: 0;
}

/* Cartões de serviço (home) */
.servico {
    transition: transform var(--wp-transition), box-shadow var(--wp-transition);
    border-radius: var(--wp-radius-sm);
}
.servico:hover {
    transform: translateY(-2px);
}
.servico > div.icon,
.servico > div.link {
    transition: background-color var(--wp-transition);
}

/* Painéis / abas / tabelas — forma */
.ui-panel,
.ui-widget-content,
.ui-fieldset {
    border-radius: var(--wp-radius);
}
.ui-panel .ui-panel-titlebar,
.ui-fieldset .ui-fieldset-legend {
    border-radius: var(--wp-radius) var(--wp-radius) 0 0;
    font-weight: 600;
}
.table > thead > tr > th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: .82em;
    letter-spacing: .3px;
}
.table > tbody > tr > td {
    vertical-align: middle;
}
.ui-paginator .ui-state-active {
    border-radius: var(--wp-radius-sm);
}

/* Modais */
.modal-content {
    border-radius: var(--wp-radius);
    box-shadow: 0 12px 40px rgba(20, 40, 60, .22);
    overflow: hidden;
}

/* Mensagens / badges */
.alert,
.ui-messages,
.ui-message {
    border-radius: var(--wp-radius-sm);
}
.label,
.badge,
.legenda {
    border-radius: 10px;
    letter-spacing: .2px;
    padding: 3px 9px;
}

/* Barra de rolagem discreta */
* {
    scrollbar-width: thin;
    scrollbar-color: #c4ccd4 transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: #c4ccd4;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: #aab3bc;
    background-clip: content-box;
}

/* Grade "Todos os Serviços" — estrutura (neutra, vale em qualquer tema) */
.grid-servicos { margin-top: 6px; }
.card-servico {
    display: block;
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius);
    box-shadow: var(--wp-shadow);
    padding: 18px;
    margin-bottom: 22px;
    min-height: 132px;
    transition: transform var(--wp-transition),
                box-shadow var(--wp-transition),
                border-color var(--wp-transition);
}
.card-servico:hover {
    transform: translateY(-3px);
    box-shadow: var(--wp-shadow-md);
    border-color: var(--wp-primary);
    text-decoration: none;
}
.card-servico .icone {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}
.card-servico h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}
.card-servico .descricao {
    font-size: 13px;
    line-height: 1.45;
    margin: 0 0 12px;
}

/* Cabeçalho do card: ícone e título na mesma linha */
.card-head {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.card-head .icone {
    margin-bottom: 0;
    margin-right: 12px;
    flex: 0 0 auto;
}
.card-head h4 {
    margin: 0;
}

/* Login / home: cards da mesma altura por linha, com "Acesse" alinhado embaixo */
.work-bg .grid-servicos,
.servicos-home .grid-servicos {
    display: flex;
    flex-wrap: wrap;
}
.work-bg .grid-servicos > [class*="col-"],
.servicos-home .grid-servicos > [class*="col-"] {
    display: flex;
    margin-bottom: 22px;
}
.work-bg .card-servico,
.servicos-home .card-servico {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0;
}
.work-bg .card-servico .acesse,
.servicos-home .card-servico .acesse {
    margin-top: auto;
}
.card-servico .acesse {
    font-weight: 600;
    font-size: 13px;
}
.card-servico .acesse i { margin-left: 4px; transition: transform var(--wp-transition); }
.card-servico:hover .acesse i { transform: translateX(3px); }

/* Respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
    .btn:hover,
    .servico:hover,
    .card-servico:hover { transform: none; }
    .card-servico:hover .acesse i { transform: none; }
}

/* Grade de serviços — cores (somente tema padrão) */
body:not(.high-contrast) .card-servico {
    background: #fff;
    color: var(--wp-text);
}
body:not(.high-contrast) .card-servico:hover {
    color: var(--wp-text);
}
body:not(.high-contrast) .card-servico .icone {
    background: var(--wp-primary-light);
    color: var(--wp-primary);
}
body:not(.high-contrast) .card-servico h4 { color: var(--wp-text); }
body:not(.high-contrast) .card-servico .descricao { color: var(--wp-muted); }
body:not(.high-contrast) .card-servico .acesse { color: var(--wp-primary); }

/* =========================================================================
   MENU LATERAL (sidebar Inspinia) — visual mais moderno
   ========================================================================= */

/* Estrutura (neutra) */
.navbar-static-side {
    transition: width var(--wp-transition);
}
#side-menu > li > a {
    padding: 12px 22px;
    font-size: 13.5px;
    font-weight: 500;
    transition: background-color var(--wp-transition),
                color var(--wp-transition),
                border-color var(--wp-transition);
}
#side-menu > li > a i {
    width: 20px;
    margin-right: 10px;
    text-align: center;
    transition: color var(--wp-transition);
}
.nav-header {
    padding: 18px 12px;
}

/* Paleta clara (somente tema padrão) */
body:not(.high-contrast) .navbar-static-side {
    background: #fff;
    box-shadow: inset -1px 0 0 var(--wp-border);
}
body:not(.high-contrast) .nav-header {
    background: linear-gradient(135deg, var(--wp-primary) 0%, var(--wp-primary-dark) 100%);
    border-bottom: 1px solid var(--wp-border);
}
body:not(.high-contrast) .nav-header a,
body:not(.high-contrast) .nav-header .text-muted,
body:not(.high-contrast) .nav-header strong {
    color: #ffffff !important;
}

/* O dropdown "Configurações" abre sobre fundo branco — manter o texto escuro/legível
   (senão herda o branco da regra acima e fica invisível). */
body:not(.high-contrast) .nav-header .dropdown-menu > li > a,
body:not(.high-contrast) .nav-header .dropdown-menu a {
    color: #42526e !important;
}
body:not(.high-contrast) .nav-header .dropdown-menu > li > a:hover,
body:not(.high-contrast) .nav-header .dropdown-menu > li > a:focus,
body:not(.high-contrast) .nav-header .dropdown-menu a:hover,
body:not(.high-contrast) .nav-header .dropdown-menu a:focus {
    color: var(--wp-primary-dark) !important;
    background-color: var(--wp-primary-light) !important;
}

body:not(.high-contrast) #side-menu > li > a {
    color: #44515f;
    border-left: 3px solid transparent;
}
body:not(.high-contrast) #side-menu > li > a i {
    color: var(--wp-muted);
}
body:not(.high-contrast) .navbar-default #side-menu > li > a:hover,
body:not(.high-contrast) .navbar-default #side-menu > li > a:focus {
    background-color: var(--wp-primary-light);
    color: var(--wp-primary-dark);
    border-left-color: var(--wp-primary);
}
body:not(.high-contrast) #side-menu > li > a:hover i,
body:not(.high-contrast) #side-menu > li.active > a i {
    color: var(--wp-primary);
}
body:not(.high-contrast) #side-menu > li.active {
    background: var(--wp-primary-light);
    border-left: 0;
}
body:not(.high-contrast) #side-menu > li.active > a {
    color: var(--wp-primary-dark);
    font-weight: 600;
    border-left: 3px solid var(--wp-primary);
}

/* =========================================================================
   2) PALETA CLARA — somente no tema padrão (desliga em alto contraste).
   ========================================================================= */

body:not(.high-contrast) {
    color: var(--wp-text);
}

body:not(.high-contrast) h1,
body:not(.high-contrast) h2,
body:not(.high-contrast) h3,
body:not(.high-contrast) h4,
body:not(.high-contrast) h5 {
    color: var(--wp-text);
}

body:not(.high-contrast) .gray-bg,
body:not(.high-contrast) #page-wrapper.gray-bg {
    background-color: var(--wp-bg) !important;
}

/* Cards */
body:not(.high-contrast) .ibox {
    border: 1px solid var(--wp-border);
}
body:not(.high-contrast) .ibox-title {
    border: 0;
    border-top: 2px solid var(--wp-primary);
    border-bottom: 1px solid var(--wp-border);
    background: #fbfcfd;
}
body:not(.high-contrast) .ibox-content {
    border: 0;
}

/* Botão primário com leve profundidade */
body:not(.high-contrast) .btn-primary {
    background-color: var(--wp-primary);
    border-color: var(--wp-primary);
}
body:not(.high-contrast) .btn-primary:hover,
body:not(.high-contrast) .btn-primary:focus,
body:not(.high-contrast) .btn-primary:active {
    background-color: var(--wp-primary-dark);
    border-color: var(--wp-primary-dark);
}

/* Campos */
body:not(.high-contrast) .form-control,
body:not(.high-contrast) .ui-inputfield,
body:not(.high-contrast) .ui-inputtext,
body:not(.high-contrast) .ui-selectonemenu,
body:not(.high-contrast) textarea.form-control {
    border: 1px solid var(--wp-border);
}
body:not(.high-contrast) .form-control:focus,
body:not(.high-contrast) .ui-inputfield:focus,
body:not(.high-contrast) .ui-inputtext:focus,
body:not(.high-contrast) .ui-state-focus {
    border-color: var(--wp-primary) !important;
    box-shadow: 0 0 0 3px rgba(16, 138, 150, .15) !important;
}
body:not(.high-contrast) .wp-label,
body:not(.high-contrast) label.control-label,
body:not(.high-contrast) .control-label {
    color: var(--wp-text);
    font-weight: 600;
}

/* Cabeçalho da página / breadcrumb */
body:not(.high-contrast) .page-heading {
    border-bottom: 1px solid var(--wp-border) !important;
}
body:not(.high-contrast) .breadcrumb > li > a {
    color: var(--wp-primary);
}

/* Tabelas */
body:not(.high-contrast) .table {
    background: #fff;
}
body:not(.high-contrast) .table > thead > tr > th {
    border-bottom: 2px solid var(--wp-border);
    color: var(--wp-muted);
}
body:not(.high-contrast) .table > tbody > tr > td {
    border-top: 1px solid #f0f3f6;
}
body:not(.high-contrast) .table-hover > tbody > tr:hover,
body:not(.high-contrast) .ui-datatable tbody tr:hover {
    background-color: var(--wp-primary-light) !important;
    transition: background-color var(--wp-transition);
}
body:not(.high-contrast) .ui-datatable thead th,
body:not(.high-contrast) .ui-datatable .ui-datatable-header {
    background: #fbfcfd;
    border-color: var(--wp-border);
    color: var(--wp-muted);
}
body:not(.high-contrast) .ui-datatable .ui-paginator {
    background: transparent;
    border: 0;
    padding-top: 8px;
}
body:not(.high-contrast) .ui-paginator .ui-state-active {
    background: var(--wp-primary) !important;
    color: #fff !important;
}

/* Painéis / abas */
body:not(.high-contrast) .ui-panel,
body:not(.high-contrast) .ui-widget-content,
body:not(.high-contrast) .ui-fieldset {
    border-color: var(--wp-border);
}
body:not(.high-contrast) .ui-panel .ui-panel-titlebar,
body:not(.high-contrast) .ui-fieldset .ui-fieldset-legend {
    background: #fbfcfd;
    border-color: var(--wp-border);
    color: var(--wp-text);
}
body:not(.high-contrast) .ui-tabs .ui-tabs-nav li.ui-state-active {
    border-bottom: 2px solid var(--wp-primary);
}

/* Modais */
body:not(.high-contrast) .modal-header {
    border-bottom: 1px solid var(--wp-border);
}
body:not(.high-contrast) .modal-footer {
    border-top: 1px solid var(--wp-border);
}

/* Login */
body:not(.high-contrast).work-bg .ibox {
    box-shadow: var(--wp-shadow-md);
}

/* Consulta de débitos — card de legenda */
.legenda-card .ibox-title h5 { text-transform: none; }
.legenda-itens {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-bottom: 12px;
}
.legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.legenda-item .legenda {
    display: inline-block;
    width: 26px;
    height: 16px;
    border-radius: 4px;
    padding: 0;
}
.legenda-notas {
    list-style: none;
    padding: 0;
    margin: 0;
}
.legenda-notas li {
    position: relative;
    padding: 6px 0 6px 18px;
    font-size: 13px;
    line-height: 1.5;
}
.legenda-notas li + li { border-top: 1px solid var(--wp-border); }
.legenda-notas li:before {
    content: "•";
    position: absolute;
    left: 4px;
    color: var(--wp-primary);
    font-weight: 700;
}
body:not(.high-contrast) .legenda-notas li { color: var(--wp-muted); }
body:not(.high-contrast) .legenda-notas li strong { color: var(--wp-text); }

/* Consulta de débitos — card "Total por Situação" */
.totais-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}
.totais-lista li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 2px;
    font-size: 13.5px;
}
.totais-lista li + li { border-top: 1px solid var(--wp-border); }
.totais-valor { font-weight: 700; white-space: nowrap; }
body:not(.high-contrast) .totais-rotulo { color: var(--wp-muted); }
body:not(.high-contrast) .totais-valor { color: var(--wp-text); }

/* =========================================================================
   HOME — perfil do contribuinte
   ========================================================================= */
.perfil-contribuinte { max-width: 960px; margin: 0 auto; }

.perfil-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border-radius: var(--wp-radius);
    margin-bottom: 22px;
}
.perfil-avatar {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.perfil-identidade { min-width: 0; }
.perfil-identidade h3 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    word-break: break-word;
}
.perfil-doc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
}

.perfil-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.perfil-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: var(--wp-radius-sm);
}
.perfil-item-full { grid-column: 1 / -1; }
.perfil-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.perfil-value {
    font-size: 14.5px;
    line-height: 1.5;
    word-break: break-word;
}
.perfil-tag {
    display: inline-block;
    margin: 2px 8px 2px 0;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 13px;
}
.perfil-tag small { font-weight: 400; opacity: .8; }
.perfil-endereco { display: block; padding: 2px 0; }
.perfil-endereco + .perfil-endereco { margin-top: 6px; }
.perfil-vazio { font-style: italic; font-size: 13px; }

.perfil-acoes { text-align: center; margin: 24px auto 8px; }

@media (max-width: 640px) {
    .perfil-grid { grid-template-columns: 1fr; }
    .perfil-header { flex-direction: column; text-align: center; }
}

/* Cores (somente tema padrão) */
body:not(.high-contrast) .perfil-header {
    background: linear-gradient(135deg, var(--wp-primary) 0%, var(--wp-primary-dark) 100%);
    box-shadow: var(--wp-shadow-md);
}
body:not(.high-contrast) .perfil-avatar {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}
body:not(.high-contrast) .perfil-identidade h3 { color: #fff; }
body:not(.high-contrast) .perfil-doc {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}
body:not(.high-contrast) .perfil-item {
    background: #fff;
    border: 1px solid var(--wp-border);
}
body:not(.high-contrast) .perfil-label { color: var(--wp-muted); }
body:not(.high-contrast) .perfil-label i { color: var(--wp-primary); }
body:not(.high-contrast) .perfil-value { color: var(--wp-text); }
body:not(.high-contrast) .perfil-tag {
    background: var(--wp-primary-light);
    color: var(--wp-primary-dark);
}
body:not(.high-contrast) .perfil-vazio { color: var(--wp-muted); }

/* Seção de serviços na home */
.servicos-home {
    max-width: 960px;
    margin: 34px auto 0;
    padding-top: 26px;
}
.servicos-home-titulo {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px;
    padding-bottom: 10px;
}
body:not(.high-contrast) .servicos-home {
    border-top: 1px solid var(--wp-border);
}
body:not(.high-contrast) .servicos-home-titulo {
    color: var(--wp-text);
    border-bottom: 2px solid var(--wp-primary-light);
}

/* reCAPTCHA — centralizado e alinhado com os campos do login */
#g-recaptcha,
#g-recaptcha-mobile {
    display: flex !important;
    justify-content: center !important;
    margin: 16px 0 6px !important;
    overflow: hidden;
}
#g-recaptcha > div,
#g-recaptcha-mobile > div {
    display: inline-block !important;
    transform: scale(0.9) !important;
    -webkit-transform: scale(0.9) !important;
    transform-origin: center top !important;
    -webkit-transform-origin: center top !important;
}

/* ============================================================
   Abas (nav-tabs) — estilo moderno "underline" alinhado ao layout
   Cobre tanto as abas interativas (data-toggle="tab") quanto as
   abas-cabeçalho (uma única <li class="active"> sobre uma tabela).
   ============================================================ */
.nav-tabs {
    border-bottom: 1px solid var(--wp-border);
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 18px;
    padding-left: 0;
}
.nav-tabs > li {
    float: none;
    margin-bottom: -1px;
}
.nav-tabs > li > a {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: var(--wp-radius-sm) var(--wp-radius-sm) 0 0;
    background: transparent !important;
    color: var(--wp-muted);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .2px;
    line-height: 1.4;
    margin-right: 0;
    padding: 10px 18px;
    transition: color var(--wp-transition),
                background-color var(--wp-transition),
                border-color var(--wp-transition);
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    color: var(--wp-primary);
    background: var(--wp-primary-light) !important;
    border-bottom-color: rgba(16, 138, 150, .35) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--wp-primary) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--wp-primary) !important;
    cursor: pointer;
}

/* Conteúdo das abas interativas */
.tab-content {
    padding-top: 6px;
}
.tab-content > .tab-pane {
    padding-top: 4px;
}

/* ============================================================
   Status badge — selo de situação reutilizável (pílula)
   ============================================================ */
.status-badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .2px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.status-badge.is-success { color: #1b7e4b; background: #e6f6ec; border-color: #bfe6cf; }
.status-badge.is-info    { color: var(--wp-primary-dark); background: var(--wp-primary-light); border-color: #c5e6e9; }
.status-badge.is-warning { color: #946200; background: #fdf2dc; border-color: #f5dca0; }
.status-badge.is-danger  { color: #b03a3a; background: #fbe9e9; border-color: #f1c6c6; }
.status-badge.is-muted   { color: var(--wp-muted); background: #eef1f4; border-color: var(--wp-border); }

/* ============================================================
   Cabeçalho de seção dentro de cards (ex.: detalhamento)
   ============================================================ */
.bloco-subtitulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px;
    padding: 8px 12px;
    background: var(--wp-primary-light);
    border-left: 3px solid var(--wp-primary);
    border-radius: 0 var(--wp-radius-sm) var(--wp-radius-sm) 0;
    color: var(--wp-primary-dark);
    font-weight: 600;
}

/* Contador no título do card */
.ibox-title .titulo-contador {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wp-primary-dark);
    background: var(--wp-primary-light);
    border: 1px solid #c5e6e9;
    border-radius: 999px;
    padding: 1px 10px;
    vertical-align: middle;
}