/* =========================================================================
   juridico — Componentes
   Camada 2 de 3. Requer tokens.css. Reescreve os componentes do
   Bootstrap 5.1.3 no visual do painel. Nada aqui usa cor "crua":
   todo valor vem de um token --jr-*.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Base
   ------------------------------------------------------------------------- */
body {
    font-family: var(--jr-font-sans);
    font-size: var(--jr-font-size-base);
    line-height: var(--jr-line-height-base);
    color: var(--jr-body-color);
    background-color: var(--jr-body-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--jr-font-sans);
    font-weight: var(--jr-font-weight-semibold);
    color: var(--jr-heading-color);
    line-height: 1.3;
}

h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: var(--jr-font-size-base); }

a { color: var(--jr-primary); text-decoration: none; }
a:hover { color: var(--jr-primary-emphasis); }

hr { border-color: var(--jr-border-color); opacity: 1; }

.text-muted { color: var(--jr-text-muted) !important; }
.text-subtle { color: var(--jr-text-subtle) !important; }
.text-primary { color: var(--jr-primary) !important; }
.text-body { color: var(--jr-body-color) !important; }

/* Escala tipográfica utilitária (usada nas views e no style guide) */
.fs-xs { font-size: var(--jr-font-size-xs) !important; }
.fs-sm { font-size: var(--jr-font-size-sm) !important; }
.fs-md { font-size: var(--jr-font-size-md) !important; }
.fs-lg { font-size: var(--jr-font-size-lg) !important; }
.fs-xl { font-size: var(--jr-font-size-xl) !important; }
.fs-2xl { font-size: var(--jr-font-size-2xl) !important; }

/* Pesos — o painel usa 400/500/600; .fw-bold do Bootstrap (700) fica de fora */
.fw-medium { font-weight: var(--jr-font-weight-medium) !important; }
.fw-semibold { font-weight: var(--jr-font-weight-semibold) !important; }

/* Compat com o tema anterior (Minible) — mantém views legadas legíveis */
.font-size-11 { font-size: 11px !important; }
.font-size-12 { font-size: 12px !important; }
.font-size-13 { font-size: 13px !important; }
.font-size-14 { font-size: 14px !important; }
.font-size-15 { font-size: 15px !important; }
.font-size-16 { font-size: 16px !important; }
.font-size-18 { font-size: 18px !important; }
.font-size-20 { font-size: 20px !important; }
.font-size-24 { font-size: 24px !important; }

/* Quadrados de ícone/avatar — .size-N = N * 0.25rem */
.size-4  { width: 1rem;    height: 1rem; }
.size-6  { width: 1.5rem;  height: 1.5rem; }
.size-8  { width: 2rem;    height: 2rem; }
.size-10 { width: 2.5rem;  height: 2.5rem; }
.size-12 { width: 3rem;    height: 3rem; }
.size-14 { width: 3.5rem;  height: 3.5rem; }

/* -------------------------------------------------------------------------
   2. Card — a superfície padrão de todo conteúdo
   ------------------------------------------------------------------------- */
.card {
    margin-bottom: var(--jr-spacer);
    border: 1px solid var(--jr-border-color-soft);
    border-radius: var(--jr-radius);
    background-color: var(--jr-surface-glass);
    backdrop-filter: blur(14px);
    box-shadow: var(--jr-shadow);
    color: var(--jr-body-color);
}

.card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: var(--jr-spacer) var(--jr-spacer) 0;
    background-color: transparent;
    border-bottom: 0;
    border-radius: var(--jr-radius) var(--jr-radius) 0 0;
}

.card-header .card-title,
.card-title {
    margin-bottom: 0;
    font-size: var(--jr-font-size-base);
    font-weight: var(--jr-font-weight-semibold);
    color: var(--jr-heading-color);
}

.card-subtitle {
    font-size: var(--jr-font-size-sm);
    color: var(--jr-text-muted);
}

.card-body { padding: var(--jr-spacer); }

.card-footer {
    padding: var(--jr-spacer);
    background-color: transparent;
    border-top: 1px solid var(--jr-border-color);
    border-radius: 0 0 var(--jr-radius) var(--jr-radius);
}

/* Card com cabeçalho separado por linha (formulários longos) */
.card-bordered-header > .card-header {
    padding-bottom: var(--jr-spacer);
    border-bottom: 1px solid var(--jr-border-color);
}

/* Preenche a altura da coluna — use em linhas de KPI */
.card-h-100 { height: calc(100% - var(--jr-spacer)); }

/* -------------------------------------------------------------------------
   3. Botões
   ------------------------------------------------------------------------- */
.btn {
    --bs-btn-padding-y: .5625rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-size: var(--jr-font-size-base);
    --bs-btn-font-weight: var(--jr-font-weight-medium);
    --bs-btn-border-radius: var(--jr-radius);
    padding: .5625rem 1.5rem;
    font-size: var(--jr-font-size-base);
    font-weight: var(--jr-font-weight-medium);
    line-height: var(--jr-line-height-base);
    border-radius: var(--jr-radius);
    transition: color .15s ease-in-out, background-color .15s ease-in-out,
                border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn:focus, .btn:focus-visible { box-shadow: var(--jr-focus-ring); }

.btn-sm {
    padding: .3125rem .75rem;
    font-size: var(--jr-font-size-sm);
    border-radius: var(--jr-radius-sm);
}

.btn-lg {
    padding: .75rem 1.75rem;
    font-size: var(--jr-font-size-lg);
    border-radius: var(--jr-radius);
}

/* Botão só com ícone, quadrado e alinhado */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 2.25rem;
    height: 2.25rem;
}
.btn-icon.btn-sm { width: 1.875rem; height: 1.875rem; }

/* Sólidos */
.btn-primary   { color: #fff; background-color: var(--jr-primary);   border-color: var(--jr-primary); }
.btn-secondary { color: #fff; background-color: var(--jr-secondary); border-color: var(--jr-secondary); }
.btn-success   { color: #fff; background-color: var(--jr-success);   border-color: var(--jr-success); }
.btn-info      { color: #fff; background-color: var(--jr-info);      border-color: var(--jr-info); }
.btn-warning   { color: #fff; background-color: var(--jr-warning);   border-color: var(--jr-warning); }
.btn-danger    { color: #fff; background-color: var(--jr-danger);    border-color: var(--jr-danger); }
.btn-dark      { color: #fff; background-color: var(--jr-dark);      border-color: var(--jr-dark); }
.btn-light     { color: var(--jr-text-muted); background-color: var(--jr-light); border-color: var(--jr-light); }

.btn-primary:hover, .btn-primary:active, .btn-primary.active,
.btn-check:checked + .btn-primary     { color: #fff; background-color: var(--jr-primary-emphasis);   border-color: var(--jr-primary-emphasis); }
.btn-secondary:hover, .btn-secondary:active { color: #fff; background-color: var(--jr-secondary-emphasis); border-color: var(--jr-secondary-emphasis); }
.btn-success:hover, .btn-success:active     { color: #fff; background-color: var(--jr-success-emphasis);   border-color: var(--jr-success-emphasis); }
.btn-info:hover, .btn-info:active           { color: #fff; background-color: var(--jr-info-emphasis);      border-color: var(--jr-info-emphasis); }
.btn-warning:hover, .btn-warning:active     { color: #fff; background-color: var(--jr-warning-emphasis);   border-color: var(--jr-warning-emphasis); }
.btn-danger:hover, .btn-danger:active       { color: #fff; background-color: var(--jr-danger-emphasis);    border-color: var(--jr-danger-emphasis); }
.btn-light:hover, .btn-light:active         { color: var(--jr-body-color); background-color: var(--jr-surface-muted); border-color: var(--jr-surface-muted); }

/* Outline */
.btn-outline-primary   { color: var(--jr-primary);   border-color: var(--jr-primary);   background-color: transparent; }
.btn-outline-secondary { color: var(--jr-secondary); border-color: var(--jr-secondary); background-color: transparent; }
.btn-outline-success   { color: var(--jr-success);   border-color: var(--jr-success);   background-color: transparent; }
.btn-outline-info      { color: var(--jr-info);      border-color: var(--jr-info);      background-color: transparent; }
.btn-outline-warning   { color: var(--jr-warning);   border-color: var(--jr-warning);   background-color: transparent; }
.btn-outline-danger    { color: var(--jr-danger);    border-color: var(--jr-danger);    background-color: transparent; }
.btn-outline-dark      { color: var(--jr-body-color); border-color: var(--jr-dark);     background-color: transparent; }

.btn-outline-primary:hover   { color: #fff; background-color: var(--jr-primary);   border-color: var(--jr-primary); }
.btn-outline-secondary:hover { color: #fff; background-color: var(--jr-secondary); border-color: var(--jr-secondary); }
.btn-outline-success:hover   { color: #fff; background-color: var(--jr-success);   border-color: var(--jr-success); }
.btn-outline-info:hover      { color: #fff; background-color: var(--jr-info);      border-color: var(--jr-info); }
.btn-outline-warning:hover   { color: #fff; background-color: var(--jr-warning);   border-color: var(--jr-warning); }
.btn-outline-danger:hover    { color: #fff; background-color: var(--jr-danger);    border-color: var(--jr-danger); }
.btn-outline-dark:hover      { color: #fff; background-color: var(--jr-dark);      border-color: var(--jr-dark); }

/* Soft (.btn-sub-*) — a variante de ação secundária do painel.
   Prefira-a a .btn-outline-* em tabelas e toolbars. */
.btn-sub-primary   { color: var(--jr-primary);   background-color: var(--jr-primary-subtle);   border-color: transparent; }
.btn-sub-secondary { color: var(--jr-secondary); background-color: var(--jr-secondary-subtle); border-color: transparent; }
.btn-sub-success   { color: var(--jr-success);   background-color: var(--jr-success-subtle);   border-color: transparent; }
.btn-sub-info      { color: var(--jr-info);      background-color: var(--jr-info-subtle);      border-color: transparent; }
.btn-sub-warning   { color: var(--jr-warning-emphasis); background-color: var(--jr-warning-subtle); border-color: transparent; }
.btn-sub-danger    { color: var(--jr-danger);    background-color: var(--jr-danger-subtle);    border-color: transparent; }
.btn-sub-dark      { color: var(--jr-body-color); background-color: var(--jr-dark-subtle);     border-color: transparent; }

.btn-sub-primary:hover   { color: var(--jr-primary);   background-color: var(--jr-primary-border-subtle); }
.btn-sub-secondary:hover { color: var(--jr-secondary); background-color: var(--jr-secondary-border); }
.btn-sub-success:hover   { color: var(--jr-success);   background-color: var(--jr-success-border); }
.btn-sub-info:hover      { color: var(--jr-info);      background-color: var(--jr-info-border); }
.btn-sub-warning:hover   { color: var(--jr-warning-emphasis); background-color: var(--jr-warning-border); }
.btn-sub-danger:hover    { color: var(--jr-danger);    background-color: var(--jr-danger-border); }
.btn-sub-dark:hover      { color: var(--jr-body-color); background-color: var(--jr-dark-border); }

/* Dashed — ações de "adicionar" dentro de áreas vazias */
.btn-dashed-primary { color: var(--jr-primary); background-color: transparent; border: 1px dashed var(--jr-primary); }
.btn-dashed-success { color: var(--jr-success); background-color: transparent; border: 1px dashed var(--jr-success); }
.btn-dashed-danger  { color: var(--jr-danger);  background-color: transparent; border: 1px dashed var(--jr-danger); }
.btn-dashed-dark    { color: var(--jr-text-muted); background-color: transparent; border: 1px dashed var(--jr-border-color); }
.btn-dashed-primary:hover { background-color: var(--jr-primary-subtle); color: var(--jr-primary); }
.btn-dashed-success:hover { background-color: var(--jr-success-subtle); color: var(--jr-success); }
.btn-dashed-danger:hover  { background-color: var(--jr-danger-subtle);  color: var(--jr-danger); }
.btn-dashed-dark:hover    { background-color: var(--jr-surface-muted);  color: var(--jr-body-color); }

/* Ghost (.btn-active-*) — ícone de linha em tabela, sem peso visual */
.btn-active-primary { color: var(--jr-primary); background-color: transparent; border-color: transparent; }
.btn-active-danger  { color: var(--jr-danger);  background-color: transparent; border-color: transparent; }
.btn-active-dark    { color: var(--jr-text-muted); background-color: transparent; border-color: transparent; }
.btn-active-primary:hover { background-color: var(--jr-primary-subtle); color: var(--jr-primary); }
.btn-active-danger:hover  { background-color: var(--jr-danger-subtle);  color: var(--jr-danger); }
.btn-active-dark:hover    { background-color: var(--jr-surface-muted);  color: var(--jr-body-color); }

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) { margin-left: -1px; }

/* -------------------------------------------------------------------------
   4. Formulários
   ------------------------------------------------------------------------- */
.form-label {
    margin-bottom: .5rem;
    font-size: var(--jr-font-size-md);
    font-weight: var(--jr-font-weight-medium);
    color: var(--jr-body-color);
}

.col-form-label {
    font-size: var(--jr-font-size-md);
    font-weight: var(--jr-font-weight-medium);
    color: var(--jr-body-color);
}

.form-text { font-size: var(--jr-font-size-sm); color: var(--jr-text-muted); }

.form-control,
.form-select {
    padding: .594rem 1rem;
    font-size: var(--jr-font-size-base);
    line-height: 1.45;
    color: var(--jr-body-color);
    background-color: var(--jr-surface);
    border: 1px solid var(--jr-border-color);
    border-radius: var(--jr-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* O select precisa reservar o espaço da seta à direita (background-image do
   Bootstrap), senão o texto passa por baixo dela. */
.form-select { padding-right: 2.25rem; }

.form-control::placeholder { color: var(--jr-text-subtle); }

.form-control:focus,
.form-select:focus {
    color: var(--jr-body-color);
    background-color: var(--jr-surface);
    border-color: var(--jr-primary);
    box-shadow: var(--jr-focus-ring);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--jr-surface-muted);
    color: var(--jr-text-muted);
    opacity: 1;
}

.form-control-sm, .form-select-sm {
    padding: .375rem .75rem;
    font-size: var(--jr-font-size-sm);
    border-radius: var(--jr-radius-sm);
}
.form-select-sm { padding-right: 2rem; }

.form-control-lg, .form-select-lg {
    padding: .75rem 1rem;
    font-size: var(--jr-font-size-lg);
    border-radius: var(--jr-radius);
}
.form-select-lg { padding-right: 2.25rem; }

/* .form-floating é o padrão das telas de CADASTRO (nas de pesquisa o rótulo
   fica acima do campo — ver §4.3 do docs/style-guide.md).
   O Bootstrap 5.1.3 controla altura e padding com especificidade maior; aqui
   só alinhamos cor e raio ao tema. */
.form-floating > label { color: var(--jr-text-muted); }
.form-floating > .form-control,
.form-floating > .form-select {
    border-radius: var(--jr-radius);
    border-color: var(--jr-border-color);
    background-color: var(--jr-surface);
}
.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
    border-color: var(--jr-primary);
    box-shadow: var(--jr-focus-ring);
}

/* O textarea dentro de .form-floating precisa de altura explícita — sem ela
   o Bootstrap o deixa com uma linha e o rótulo flutuado cobre o texto.
   Estas classes existem para não espalhar style="height:…" pelas views. */
.form-floating > textarea.textarea-md { height: 7rem; }
.form-floating > textarea.textarea-lg { height: 10rem; }

/* Campo obrigatório: o asterisco vinha só de .form-label.required, que não
   se aplica ao rótulo dentro de .form-floating. */
label.required::after { content: " *"; color: var(--jr-danger); }

textarea.form-control { min-height: 5.5rem; }

.input-group-text {
    padding: .594rem 1rem;
    font-size: var(--jr-font-size-base);
    color: var(--jr-text-muted);
    background-color: var(--jr-surface-muted);
    border: 1px solid var(--jr-border-color);
    border-radius: var(--jr-radius);
}

.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child),
.input-group > .input-group-text:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .input-group-text:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.form-check-input {
    width: 1.075rem;
    height: 1.075rem;
    margin-top: .155rem;
    background-color: var(--jr-surface);
    border: 1px solid var(--jr-border-color);
    border-radius: .3125rem;
}
.form-check-input:checked { background-color: var(--jr-primary); border-color: var(--jr-primary); }
.form-check-input:focus { border-color: var(--jr-primary); box-shadow: var(--jr-focus-ring); }
.form-check-input[type="radio"] { border-radius: 50%; }

.form-switch .form-check-input { width: 2.125rem; height: 1.1875rem; border-radius: var(--jr-radius-pill); }

.form-check-label { font-size: var(--jr-font-size-md); color: var(--jr-body-color); }

.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid {
    border-color: var(--jr-danger);
}

/* Campo com erro em foco: sem isto o halo continuava azul (vem de
   .form-control:focus), o que fazia o campo errado parecer o campo ativo.
   A variante .form-floating existe porque aquela regra tem a mesma
   especificidade e as telas antigas ainda usam esse arranjo. */
.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.form-floating > .form-control.is-invalid:focus,
.form-floating > .form-select.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
    border-color: var(--jr-danger);
    box-shadow: var(--jr-focus-ring-danger);
}

.form-check-input.is-invalid { border-color: var(--jr-danger); }
.form-check-input.is-invalid:focus { border-color: var(--jr-danger); box-shadow: var(--jr-focus-ring-danger); }

/* O rotulo do campo com erro acompanha, senao so a borda muda e passa
   despercebido num formulario longo. Sem prender a .form-label: as telas
   antigas rotulam dentro de .form-floating. */
.rotulo-invalido,
.form-floating > .form-control.is-invalid ~ label,
.form-floating > .form-select.is-invalid ~ label { color: var(--jr-danger); }

.invalid-feedback, .text-danger-feedback { font-size: var(--jr-font-size-sm); color: var(--jr-danger); }



/* -------------------------------------------------------------------------
   5. Tabelas
   ------------------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--jr-body-color);
    margin-bottom: 0;
    font-size: var(--jr-font-size-base);
    color: var(--jr-body-color);
    border-color: var(--jr-border-color);
}

.table > thead > tr > th {
    padding: .875rem 1.25rem;
    font-size: var(--jr-font-size-md);
    font-weight: var(--jr-font-weight-medium);
    color: var(--jr-text-muted);
    text-transform: none;
    background-color: transparent;
    border-bottom: 1px solid var(--jr-border-color);
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: .875rem 1.25rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--jr-border-color);
    background-color: transparent;
}

.table > tbody > tr:last-child > td { border-bottom: 0; }

.table-hover > tbody > tr:hover > * {
    background-color: var(--jr-surface-muted);
    color: var(--jr-body-color);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(var(--jr-body-color-rgb), .025);
    color: var(--jr-body-color);
}

/* Tabela dentro de um card: encosta nas bordas do card */
.card > .table-responsive > .table > thead > tr > th:first-child,
.card > .table-responsive > .table > tbody > tr > td:first-child { padding-left: var(--jr-spacer); }
.card > .table-responsive > .table > thead > tr > th:last-child,
.card > .table-responsive > .table > tbody > tr > td:last-child { padding-right: var(--jr-spacer); }

.table-responsive { border-radius: var(--jr-radius); }

/* Coluna de ações à direita, largura fixa e sem quebra */
.table .col-acoes { width: 1%; white-space: nowrap; text-align: right; }

/* Coluna de seleção em lote (financeiro): só o checkbox, sem roubar largura. */
.table .col-check { width: 1%; white-space: nowrap; padding-right: 0; }

/* Compat com views legadas do tema Minible */
.table-centered > tbody > tr > td { vertical-align: middle; }
.table-card-list { border-collapse: separate; border-spacing: 0; }

/* -------------------------------------------------------------------------
   6. Badges e chips
   ------------------------------------------------------------------------- */
.badge {
    padding: .3125rem .5rem;
    font-size: var(--jr-font-size-xs);
    font-weight: var(--jr-font-weight-medium);
    line-height: 1;
    border-radius: var(--jr-radius-sm);
}

.badge.bg-pill, .rounded-pill { border-radius: var(--jr-radius-pill) !important; }

.bg-primary   { background-color: var(--jr-primary) !important; }
.bg-secondary { background-color: var(--jr-secondary) !important; }
.bg-success   { background-color: var(--jr-success) !important; }
.bg-info      { background-color: var(--jr-info) !important; }
.bg-warning   { background-color: var(--jr-warning) !important; }
.bg-danger    { background-color: var(--jr-danger) !important; }
.bg-light     { background-color: var(--jr-light) !important; }
.bg-dark      { background-color: var(--jr-dark) !important; }

/* Badges "soft" — o padrão para status em listas.
   .bg-soft-* é o nome legado do projeto; .badge-sub-* é o nome novo.
   Os dois apontam para o mesmo visual. */
.bg-soft-primary,   .badge-sub-primary   { color: var(--jr-primary) !important;   background-color: var(--jr-primary-subtle) !important; }
.bg-soft-secondary, .badge-sub-secondary { color: var(--jr-secondary) !important; background-color: var(--jr-secondary-subtle) !important; }
.bg-soft-success,   .badge-sub-success   { color: var(--jr-success) !important;   background-color: var(--jr-success-subtle) !important; }
.bg-soft-info,      .badge-sub-info      { color: var(--jr-info) !important;      background-color: var(--jr-info-subtle) !important; }
.bg-soft-warning,   .badge-sub-warning   { color: var(--jr-warning-emphasis) !important; background-color: var(--jr-warning-subtle) !important; }
.bg-soft-danger,    .badge-sub-danger    { color: var(--jr-danger) !important;    background-color: var(--jr-danger-subtle) !important; }
.bg-soft-dark,      .badge-sub-dark      { color: var(--jr-body-color) !important; background-color: var(--jr-dark-subtle) !important; }
.bg-soft-light                            { color: var(--jr-text-muted) !important; background-color: var(--jr-surface-muted) !important; }

/* -------------------------------------------------------------------------
   7. Alertas
   ------------------------------------------------------------------------- */
.alert {
    padding: .875rem 1.125rem;
    font-size: var(--jr-font-size-base);
    border: 1px solid transparent;
    border-radius: var(--jr-radius);
}
.alert-primary { color: var(--jr-primary);   background-color: var(--jr-primary-subtle);   border-color: var(--jr-primary-border-subtle); }
.alert-success { color: var(--jr-success-emphasis); background-color: var(--jr-success-subtle); border-color: var(--jr-success-border); }
.alert-info    { color: var(--jr-info-emphasis);    background-color: var(--jr-info-subtle);    border-color: var(--jr-info-border); }
.alert-warning { color: var(--jr-warning-emphasis); background-color: var(--jr-warning-subtle); border-color: var(--jr-warning-border); }
.alert-danger  { color: var(--jr-danger-emphasis);  background-color: var(--jr-danger-subtle);  border-color: var(--jr-danger-border); }
.alert-dark    { color: var(--jr-body-color); background-color: var(--jr-dark-subtle); border-color: var(--jr-dark-border); }

/* -------------------------------------------------------------------------
   8. Dropdown
   ------------------------------------------------------------------------- */
.dropdown-menu {
    padding: .5rem;
    font-size: var(--jr-font-size-base);
    color: var(--jr-body-color);
    background-color: var(--jr-surface);
    border: 1px solid var(--jr-border-color);
    border-radius: var(--jr-radius);
    box-shadow: var(--jr-shadow-dropdown);
}

.dropdown-menu-md { min-width: 14rem; }
.dropdown-menu-lg { min-width: 20rem; }

.dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: var(--jr-radius-sm);
    color: var(--jr-body-color);
}
.dropdown-item:hover, .dropdown-item:focus {
    color: var(--jr-primary);
    background-color: var(--jr-primary-subtle);
}
.dropdown-item.active, .dropdown-item:active {
    color: var(--jr-primary);
    background-color: var(--jr-primary-subtle);
}
.dropdown-divider { border-top-color: var(--jr-border-color); }
.dropdown-header {
    padding: .375rem .75rem;
    font-size: var(--jr-font-size-sm);
    font-weight: var(--jr-font-weight-semibold);
    color: var(--jr-text-muted);
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   9. Modal e offcanvas
   ------------------------------------------------------------------------- */
.modal-content {
    background-color: var(--jr-surface);
    border: 1px solid var(--jr-border-color);
    border-radius: var(--jr-radius-lg);
    box-shadow: var(--jr-shadow-lg);
}
.modal-header {
    padding: 1.125rem var(--jr-spacer);
    border-bottom: 1px solid var(--jr-border-color);
}
.modal-title { font-size: var(--jr-font-size-lg); font-weight: var(--jr-font-weight-semibold); }
.modal-body { padding: var(--jr-spacer); }
.modal-footer {
    padding: 1rem var(--jr-spacer);
    gap: .5rem;
    border-top: 1px solid var(--jr-border-color);
}
.modal-footer > * { margin: 0; }
.modal-backdrop { background-color: #101828; }
.modal-backdrop.show { opacity: .4; }

.offcanvas {
    background-color: var(--jr-surface);
    color: var(--jr-body-color);
    border-color: var(--jr-border-color);
}
.offcanvas-header { padding: 1.125rem var(--jr-spacer); border-bottom: 1px solid var(--jr-border-color); }
.offcanvas-body { padding: var(--jr-spacer); }

[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* -------------------------------------------------------------------------
   10. Navegação: tabs, pills, breadcrumb, paginação
   ------------------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 1px solid var(--jr-border-color);
    gap: .25rem;
}
.nav-tabs .nav-link {
    padding: .625rem 1rem;
    font-size: var(--jr-font-size-base);
    font-weight: var(--jr-font-weight-medium);
    color: var(--jr-text-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--jr-primary); border-bottom-color: var(--jr-primary-border-subtle); }
.nav-tabs .nav-link.active {
    color: var(--jr-primary);
    background-color: transparent;
    border-bottom-color: var(--jr-primary);
}

/* Aba que contem campo pendente. O ponto e o que se enxerga de longe: a cor
   sozinha nao chama atencao numa barra com sete abas. */
.nav-tabs .nav-link.aba-invalida,
.nav-tabs .nav-link.aba-invalida:hover { color: var(--jr-danger); }
.nav-tabs .nav-link.aba-invalida::after {
    content: "";
    display: inline-block;
    width: .375rem;
    height: .375rem;
    margin-left: .375rem;
    vertical-align: middle;
    border-radius: var(--jr-radius-pill);
    background-color: var(--jr-danger);
}
.nav-tabs .nav-link.aba-invalida.active { border-bottom-color: var(--jr-danger); }

.nav-pills { gap: .25rem; }
.nav-pills .nav-link {
    padding: .5rem 1rem;
    color: var(--jr-text-muted);
    border-radius: var(--jr-radius-sm);
}
.nav-pills .nav-link:hover { color: var(--jr-primary); background-color: var(--jr-primary-subtle); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { color: #fff; background-color: var(--jr-primary); }

.breadcrumb { font-size: var(--jr-font-size-md); margin-bottom: 0; }
.breadcrumb-item, .breadcrumb-item a { color: var(--jr-text-muted); }
.breadcrumb-item a:hover { color: var(--jr-primary); }
.breadcrumb-item.active { color: var(--jr-body-color); font-weight: var(--jr-font-weight-medium); }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--jr-text-subtle); }

/* Os itens são pílulas separadas (gap), então o primeiro e o último não podem
   herdar o raio "de grupo" do Bootstrap — todos usam o mesmo raio. */
.pagination { gap: .25rem; }
.page-item:first-child .page-link,
.page-item:last-child .page-link { border-radius: var(--jr-radius-sm); }
.page-link {
    padding: .4375rem .75rem;
    font-size: var(--jr-font-size-md);
    color: var(--jr-text-muted);
    background-color: transparent;
    border: 1px solid var(--jr-border-color);
    border-radius: var(--jr-radius-sm);
}
.page-link:hover { color: var(--jr-primary); background-color: var(--jr-primary-subtle); border-color: var(--jr-primary-border-subtle); }
.page-item.active .page-link { color: #fff; background-color: var(--jr-primary); border-color: var(--jr-primary); }
.page-item.disabled .page-link { color: var(--jr-text-subtle); background-color: transparent; border-color: var(--jr-border-color); }

/* -------------------------------------------------------------------------
   11. Outros componentes
   ------------------------------------------------------------------------- */
.list-group-item {
    padding: .75rem 1rem;
    color: var(--jr-body-color);
    background-color: transparent;
    border-color: var(--jr-border-color);
}
.list-group-item:first-child { border-top-left-radius: var(--jr-radius); border-top-right-radius: var(--jr-radius); }
.list-group-item:last-child { border-bottom-left-radius: var(--jr-radius); border-bottom-right-radius: var(--jr-radius); }
.list-group-item.active { color: var(--jr-primary); background-color: var(--jr-primary-subtle); border-color: var(--jr-primary-border-subtle); }

.progress {
    height: .5rem;
    background-color: var(--jr-surface-muted);
    border-radius: var(--jr-radius-pill);
}
.progress-bar { background-color: var(--jr-primary); border-radius: var(--jr-radius-pill); }

.accordion-item {
    background-color: transparent;
    border: 1px solid var(--jr-border-color);
    border-radius: var(--jr-radius);
    margin-bottom: .5rem;
}
.accordion-button {
    padding: .875rem 1.125rem;
    font-weight: var(--jr-font-weight-medium);
    color: var(--jr-body-color);
    background-color: transparent;
    border-radius: var(--jr-radius) !important;
}
.accordion-button:not(.collapsed) { color: var(--jr-primary); background-color: var(--jr-primary-subtle); box-shadow: none; }
.accordion-button:focus { box-shadow: none; border-color: var(--jr-border-color); }
.accordion-body { padding: 0 1.125rem 1.125rem; }

.tooltip-inner {
    padding: .375rem .625rem;
    font-size: var(--jr-font-size-sm);
    background-color: var(--jr-dark);
    border-radius: var(--jr-radius-sm);
}

.popover {
    background-color: var(--jr-surface);
    border-color: var(--jr-border-color);
    border-radius: var(--jr-radius);
    box-shadow: var(--jr-shadow-dropdown);
}

.toast {
    background-color: var(--jr-surface);
    border-color: var(--jr-border-color);
    border-radius: var(--jr-radius);
    box-shadow: var(--jr-shadow-dropdown);
}

/* Avatar / ícone circular com fundo suave */
.icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
    border-radius: var(--jr-radius);
    color: var(--jr-primary);
    background-color: var(--jr-primary-subtle);
}
.icon-tile-sm { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
.icon-tile-round { border-radius: 50%; }
.icon-tile-success { color: var(--jr-success); background-color: var(--jr-success-subtle); }
.icon-tile-danger  { color: var(--jr-danger);  background-color: var(--jr-danger-subtle); }
.icon-tile-warning { color: var(--jr-warning-emphasis); background-color: var(--jr-warning-subtle); }
.icon-tile-info    { color: var(--jr-info);    background-color: var(--jr-info-subtle); }
.icon-tile-secondary { color: var(--jr-secondary); background-color: var(--jr-secondary-subtle); }

/* Card de indicador (KPI) — padrão dos dashboards */
.stat-card .stat-value {
    font-size: var(--jr-font-size-xl);
    font-weight: var(--jr-font-weight-semibold);
    line-height: 1.2;
    color: var(--jr-heading-color);
}
.stat-card .stat-label {
    font-size: var(--jr-font-size-md);
    color: var(--jr-text-muted);
}
.stat-card .stat-trend { font-size: var(--jr-font-size-sm); font-weight: var(--jr-font-weight-medium); }
.stat-card .stat-trend.up { color: var(--jr-success); }
.stat-card .stat-trend.down { color: var(--jr-danger); }

/* Estado vazio */
.empty-state { padding: 3rem 1rem; text-align: center; color: var(--jr-text-muted); }
.empty-state i { font-size: 2.75rem; color: var(--jr-text-subtle); display: block; margin-bottom: .75rem; }
.empty-state .empty-title { font-size: var(--jr-font-size-lg); font-weight: var(--jr-font-weight-semibold); color: var(--jr-body-color); margin-bottom: .25rem; }


/* Esteira — a sequência ordenada de etapas de um processo (propostas).
   A ordem é a informação principal, por isso cada etapa vem numerada. Três
   estados: percorrida, atual e futura. Serve tanto na tela da proposta quanto
   inline numa listagem (.jr-esteira--inline). */
.jr-esteira {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: jr-esteira;
}
.jr-esteira-item {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .75rem;
    font-size: var(--jr-font-size-sm);
    color: var(--jr-text-muted);
    background-color: var(--jr-surface-muted);
    border: 1px solid transparent;
    border-radius: var(--jr-radius-pill);
}
.jr-esteira-item::before {
    counter-increment: jr-esteira;
    content: counter(jr-esteira);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    font-size: var(--jr-font-size-xs);
    font-weight: var(--jr-font-weight-semibold);
    color: var(--jr-text-subtle);
    background-color: var(--jr-surface);
    border-radius: 50%;
}
.jr-esteira-item.is-concluida {
    color: var(--jr-success);
    background-color: var(--jr-success-subtle);
}
.jr-esteira-item.is-concluida::before { color: var(--jr-success); }
.jr-esteira-item.is-atual {
    color: var(--jr-primary);
    font-weight: var(--jr-font-weight-medium);
    background-color: var(--jr-primary-subtle);
    border-color: var(--jr-primary-border-subtle);
}
.jr-esteira-item.is-atual::before { color: var(--jr-primary); }
.jr-esteira-prazo { font-size: var(--jr-font-size-xs); color: var(--jr-text-subtle); }

/* Dentro de uma célula de tabela a esteira é só referência: some a numeração
   e o item encolhe para não empurrar a largura da coluna. */
.jr-esteira--inline .jr-esteira-item { padding: .125rem .5rem; font-size: var(--jr-font-size-xs); }
.jr-esteira--inline .jr-esteira-item::before { display: none; }

/* Montagem da esteira: duas listas, a da direita ordenável por arrasto. */
.jr-esteira-picker {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    counter-reset: jr-esteira-picker;
}
.jr-esteira-picker-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    background-color: var(--jr-surface);
    border: 1px solid var(--jr-border-color);
    border-radius: var(--jr-radius);
}
.jr-esteira-picker-nome { flex: 1 1 auto; font-size: var(--jr-font-size-md); }
.jr-esteira-picker-prazo { flex: 0 0 5.5rem; }
.jr-esteira-punho { color: var(--jr-text-subtle); cursor: grab; }
.jr-esteira-picker--ordenavel .jr-esteira-picker-nome::before {
    counter-increment: jr-esteira-picker;
    content: counter(jr-esteira-picker) ". ";
    color: var(--jr-text-subtle);
    font-weight: var(--jr-font-weight-semibold);
}
/* Vão que o jQuery UI abre enquanto o item é arrastado. */
.jr-esteira-placeholder {
    background-color: var(--jr-primary-subtle);
    border: 1px dashed var(--jr-primary-border-subtle);
}

/* Linha do tempo de um processo (histórico da proposta). */
.jr-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--jr-spacer);
    border-left: 1px solid var(--jr-border-color);
}
.jr-timeline-item { position: relative; padding-bottom: var(--jr-spacer); }
.jr-timeline-item:last-child { padding-bottom: 0; }
.jr-timeline-item::before {
    content: '';
    position: absolute;
    /* centra o ponto na régua: recua o padding do <ul>, a borda e meio ponto */
    left: calc((var(--jr-spacer) + 1px + .3125rem) * -1);
    top: .375rem;
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    background-color: var(--jr-primary);
    box-shadow: 0 0 0 .1875rem var(--jr-primary-subtle);
}
.jr-timeline-data { font-size: var(--jr-font-size-xs); color: var(--jr-text-subtle); }
.jr-timeline-titulo { font-size: var(--jr-font-size-md); font-weight: var(--jr-font-weight-medium); color: var(--jr-body-color); }
.jr-timeline-acao { font-size: var(--jr-font-size-sm); color: var(--jr-text-muted); }
.jr-timeline-texto { margin: .25rem 0 0; font-size: var(--jr-font-size-sm); color: var(--jr-text-muted); }
.jr-timeline-autor { margin-top: .25rem; font-size: var(--jr-font-size-xs); color: var(--jr-text-subtle); }


/* Painel de filtros de uma consulta avançada.
   .filtro-secao rotula cada grupo de campos dentro do painel; .filtro-contador
   é a bolinha com o número de filtros preenchidos ao lado de "Mais filtros". */
.filtro-secao {
    display: block;
    margin-bottom: .5rem;
    font-size: var(--jr-font-size-sm);
    font-weight: var(--jr-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--jr-text-muted);
}
.filtro-contador {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0 .375rem;
    border-radius: var(--jr-radius-pill);
    font-size: var(--jr-font-size-xs);
    line-height: 1.25rem;
    text-align: center;
    color: var(--jr-primary);
    background-color: var(--jr-primary-subtle);
}
/* Dentro de um botão suave da mesma cor o contador sumiria no fundo: vira sólido. */
.btn-sub-primary > .filtro-contador {
    color: var(--jr-white);
    background-color: var(--jr-primary);
}

/* Miniatura de registro em listagem (foto do imóvel, avatar de pessoa). */
.thumb-registro {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 3.75rem;
    overflow: hidden;
    border-radius: var(--jr-radius-sm);
    color: var(--jr-text-subtle);
    background-color: var(--jr-surface-muted);
}
.thumb-registro img { width: 100%; height: 100%; object-fit: cover; }

/* Logo da conta (a marca da imobiliária), no /meus-dados.
   Diferente de .thumb-registro: marca não se corta, então `contain` e moldura
   tracejada — a área vazia precisa parecer um lugar onde se solta um arquivo. */
.logo-conta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 16rem;
    height: 8rem;
    padding: var(--jr-spacer);
    overflow: hidden;
    border: 1px dashed var(--jr-border-color);
    border-radius: var(--jr-radius);
    color: var(--jr-text-subtle);
    background-color: var(--jr-surface-muted);
}
.logo-conta img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-conta .logo-conta-vazio { font-size: var(--jr-font-size-sm); text-align: center; }

/* -------------------------------------------------------------------------
   12. Bibliotecas de terceiros usadas no projeto
   ------------------------------------------------------------------------- */
/* DataTables */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    padding: .375rem .75rem;
    font-size: var(--jr-font-size-md);
    color: var(--jr-body-color);
    background-color: var(--jr-surface);
    border: 1px solid var(--jr-border-color);
    border-radius: var(--jr-radius-sm);
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info { font-size: var(--jr-font-size-md); color: var(--jr-text-muted); }
/* A integração dataTables.bootstrap4 renderiza
   <li class="paginate_button page-item"><a class="page-link">.
   A borda tem que ficar só no <a>: estilizar o <li> também produz a moldura
   dupla. Por isso as regras de .paginate_button abaixo excluem .page-item —
   elas valem apenas para o DataTables puro, sem integração. */
.dataTables_wrapper .dataTables_paginate .paginate_button.page-item {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item) {
    padding: .3125rem .625rem !important;
    margin-left: .25rem;
    font-size: var(--jr-font-size-md);
    color: var(--jr-text-muted) !important;
    border: 1px solid var(--jr-border-color) !important;
    border-radius: var(--jr-radius-sm) !important;
    background: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item).current,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item).current:hover {
    color: #fff !important;
    background: var(--jr-primary) !important;
    border-color: var(--jr-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item):hover {
    color: var(--jr-primary) !important;
    background: var(--jr-primary-subtle) !important;
    border-color: var(--jr-primary-border-subtle) !important;
}

/* Rodapé do DataTables: paginação à direita, alinhada com a tabela.
   O padding horizontal é 0 porque o .card-body já afasta das bordas. */
.dataTables_wrapper .bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: .75rem 0;
}
.dataTables_wrapper .dataTables_paginate { margin: 0; }

/* A tabela ocupa a largura toda do card; sem larguras fixas em px, nada de
   scroll horizontal. Ver autoWidth:false em juridico-datatables.js. */
table.dataTable { width: 100% !important; }

/* jQuery UI (datepicker / autocomplete) */
.ui-widget.ui-widget-content {
    font-family: var(--jr-font-sans);
    font-size: var(--jr-font-size-md);
    color: var(--jr-body-color);
    background: var(--jr-surface);
    border: 1px solid var(--jr-border-color);
    border-radius: var(--jr-radius);
    box-shadow: var(--jr-shadow-dropdown);
}
.ui-datepicker .ui-datepicker-header {
    background: transparent;
    border: 0;
    color: var(--jr-body-color);
    font-weight: var(--jr-font-weight-semibold);
}
.ui-datepicker td .ui-state-default {
    text-align: center;
    border: 0;
    background: transparent;
    color: var(--jr-body-color);
    border-radius: var(--jr-radius-sm);
}
.ui-datepicker td .ui-state-active,
.ui-datepicker td .ui-state-highlight {
    background: var(--jr-primary);
    color: #fff;
}
.ui-menu .ui-menu-item-wrapper.ui-state-active {
    background: var(--jr-primary-subtle);
    border-color: transparent;
    color: var(--jr-primary);
}

/* FullCalendar (agenda) */
.fc .fc-toolbar-title { font-size: var(--jr-font-size-lg); font-weight: var(--jr-font-weight-semibold); color: var(--jr-heading-color); }
.fc .fc-button-primary {
    background-color: var(--jr-primary-subtle);
    border-color: transparent;
    color: var(--jr-primary);
    border-radius: var(--jr-radius-sm);
    text-transform: capitalize;
}
.fc .fc-button-primary:not(:disabled):hover,
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--jr-primary);
    border-color: var(--jr-primary);
    color: #fff;
}
.fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid { border-color: var(--jr-border-color); }
.fc .fc-daygrid-day.fc-day-today { background-color: var(--jr-primary-subtle); }

/* Select2 / virtual-select, quando presentes */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    height: auto;
    padding: .375rem .5rem;
    background-color: var(--jr-surface);
    border: 1px solid var(--jr-border-color);
    border-radius: var(--jr-radius);
}

/* ApexCharts — gráficos do painel.
   O tema antigo (app.min.css) fixa cor e fonte da legenda com !important;
   estas regras devolvem o controle aos tokens, para o gráfico acompanhar o
   modo claro/escuro junto com o resto da tela. As cores das séries continuam
   vindo do JS (public/assets/js/painel.js), que lê os mesmos tokens. */
.apexcharts-legend-text {
    color: var(--jr-text-muted) !important;
    font-family: var(--jr-font-sans) !important;
    font-size: var(--jr-font-size-sm) !important;
    font-weight: var(--jr-font-weight-normal) !important;
}
/* Seletor espelhado do app.min.css (".apexcharts-xaxis text, .apexcharts-yaxis
   text"): mesma especificidade, e como este arquivo carrega depois, vence. */
.apexcharts-xaxis text,
.apexcharts-yaxis text { fill: var(--jr-text-muted); font-family: var(--jr-font-sans) !important; }
.apexcharts-text { fill: var(--jr-text-muted); font-family: var(--jr-font-sans); }
.apexcharts-datalabel-label { fill: var(--jr-text-muted); }
.apexcharts-datalabel-value { fill: var(--jr-body-color); }

/* Coluna do percentual de participação no demonstrativo por categoria:
   largura fixa para as barras de todos os grupos começarem alinhadas. */
.table .col-participacao { width: 8rem; }

/* ==========================================================================
   Planos e limites — tela /plano, avisos de teste grátis e barras de uso.
   Todo valor sai de token; nada de cor ou raio cru aqui.
   ========================================================================== */

/* Cartão de plano da tela /plano ------------------------------------------ */
.jr-plano-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.jr-plano-card .card-body { display: flex; flex-direction: column; flex: 1 1 auto; }

/* o plano "mais escolhido" ganha a borda de ação, não uma cor nova */
.jr-plano-card.is-destaque { border-color: var(--jr-primary); box-shadow: var(--jr-shadow); }
.jr-plano-card.is-atual { border-color: var(--jr-success); }

.jr-plano-fita {
    position: absolute;
    top: 0;
    right: var(--jr-spacer);
    transform: translateY(-50%);
    padding: .125rem .625rem;
    border-radius: var(--jr-radius-sm);
    font-size: var(--jr-font-size-xs);
    font-weight: var(--jr-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background-color: var(--jr-primary);
}
.jr-plano-card.is-atual .jr-plano-fita { background-color: var(--jr-success); }

.jr-plano-nome {
    font-size: var(--jr-font-size-xl);
    font-weight: var(--jr-font-weight-semibold);
    margin-bottom: .25rem;
}
.jr-plano-chamada {
    color: var(--jr-text-muted);
    font-size: var(--jr-font-size-sm);
    min-height: 3.25rem;
}

.jr-plano-preco { display: flex; align-items: baseline; gap: .25rem; margin: var(--jr-spacer) 0 .25rem; }
.jr-plano-preco-moeda { font-size: var(--jr-font-size-md); color: var(--jr-text-muted); }
.jr-plano-preco-valor { font-size: var(--jr-font-size-2xl); font-weight: var(--jr-font-weight-semibold); line-height: 1.1; }
.jr-plano-preco-periodo { font-size: var(--jr-font-size-sm); color: var(--jr-text-muted); }
.jr-plano-economia { font-size: var(--jr-font-size-sm); color: var(--jr-success); }

.jr-plano-limites {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: var(--jr-spacer) 0;
}

/* "Tudo do plano X, mais:" — o cartão lista só o que o plano acrescenta */
.jr-plano-heranca {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0 0 .5rem;
    padding: .5rem .625rem;
    border-radius: var(--jr-radius-sm);
    background-color: var(--jr-surface-muted);
    color: var(--jr-text-muted);
    font-size: var(--jr-font-size-md);
}
.jr-plano-heranca i { color: var(--jr-success); margin-top: .125rem; }
.jr-plano-heranca strong { color: var(--jr-body-color); font-weight: var(--jr-font-weight-semibold); }

.jr-plano-itens { list-style: none; padding: 0; margin: 0 0 var(--jr-spacer); }
.jr-plano-itens li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .1875rem 0;
    font-size: var(--jr-font-size-md);
}
.jr-plano-itens li i { flex: 0 0 auto; margin-top: .125rem; }
.jr-plano-itens li.tem i { color: var(--jr-success); }
.jr-plano-itens li.nao-tem { color: var(--jr-text-subtle); }
.jr-plano-itens li.nao-tem i { color: var(--jr-text-subtle); }

.jr-plano-acao { margin-top: auto; }

/* Comparativo ------------------------------------------------------------- */
/* respiro entre os cartões e a tabela: sem isso a tabela encosta nos planos */
.jr-plano-comparativo { margin-top: calc(var(--jr-spacer) * 1.5); }

/* colunas de plano estreitas: com a tabela em 8 colunas, cada rem aqui sai do
   nome do recurso -- e e o nome que precisa caber numa linha so. */
.table .jr-plano-col { width: 6.5rem; text-align: center; }
.table td.jr-plano-col i.tem { color: var(--jr-success); }
.table td.jr-plano-col i.nao-tem { color: var(--jr-text-subtle); }

/* Uso do limite (imóveis / usuários) -------------------------------------- */
.jr-plano-uso { min-width: 12rem; }
.jr-plano-uso-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    font-size: var(--jr-font-size-sm);
    color: var(--jr-text-muted);
    margin-bottom: .25rem;
}
.jr-plano-uso-valor strong { color: var(--jr-body-color); font-weight: var(--jr-font-weight-semibold); }
.jr-plano-uso-barra { height: .375rem; background-color: var(--jr-surface-muted); border-radius: var(--jr-radius-sm); }
.jr-plano-uso-aviso { margin-top: .25rem; font-size: var(--jr-font-size-xs); color: var(--jr-danger); }

/* Selo de recurso fora do plano, ao lado de um item de menu ou botão ------- */
.jr-plano-selo { margin-left: .375rem; padding: .125rem .3125rem; font-size: var(--jr-font-size-xs); }

/* Faixa de teste grátis / assinatura pendente ------------------------------ */
.jr-plano-faixa {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
    padding: .625rem var(--jr-spacer);
    margin-bottom: var(--jr-spacer);
    border: 1px solid var(--jr-warning-subtle);
    border-radius: var(--jr-radius);
    background-color: var(--jr-warning-subtle);
    color: var(--jr-warning-emphasis);
    font-size: var(--jr-font-size-md);
}
.jr-plano-faixa i { font-size: var(--jr-font-size-lg); }
.jr-plano-faixa .jr-plano-faixa-texto { flex: 1 1 auto; }
.jr-plano-faixa.is-urgente {
    border-color: var(--jr-danger-subtle);
    background-color: var(--jr-danger-subtle);
    color: var(--jr-danger);
}

/* Bloco de "recurso não incluso" no lugar de uma tela inteira -------------- */
.jr-plano-indisponivel { padding: 3rem 1rem; text-align: center; color: var(--jr-text-muted); }
.jr-plano-indisponivel .icon-tile { margin: 0 auto .75rem; }
.jr-plano-indisponivel .jr-plano-indisponivel-titulo {
    font-size: var(--jr-font-size-lg);
    font-weight: var(--jr-font-weight-semibold);
    color: var(--jr-body-color);
    margin-bottom: .25rem;
}