/* =====================================================================
   SIGE: design system sobre Bootstrap 5
   1. Tokens   2. Base e tipografia   3. Componentes Bootstrap
   4. Layout da aplicação   5. Componentes do produto   6. Páginas públicas
   7. Responsividade, acessibilidade e impressão
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Cores de marca e de estado */
  --app-primary: #2457a6;
  --app-primary-hover: #1d4889;
  --app-primary-active: #183c73;
  --app-primary-soft: #eaf0fa;
  --app-primary-soft-2: #dbe6f6;
  --app-success: #1b7f4b;   --app-success-soft: #e7f5ed;
  --app-warning: #9a6200;   --app-warning-soft: #fdf3dc;  --app-warning-solid: #e5a00d;
  --app-danger: #c0362c;    --app-danger-soft: #fdecea;
  --app-info: #1d6a8f;      --app-info-soft: #e5f3f9;
  --app-neutral: #4b5565;   --app-neutral-soft: #eef1f5;

  /* Superfícies e texto */
  --app-background: #f5f7fa;
  --app-surface: #ffffff;
  --app-surface-2: #f8fafc;
  --app-border: #e3e8ef;
  --app-border-strong: #cfd6e0;
  --app-text: #1b2430;
  --app-text-muted: #5b6576;
  --app-text-subtle: #8a93a3;
  --app-disabled: #a7afbc;

  /* Forma, elevação e ritmo */
  --app-radius-sm: 6px;
  --app-radius: 8px;
  --app-radius-lg: 12px;
  --app-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --app-shadow: 0 4px 12px rgba(16, 24, 40, .08);
  --app-shadow-lg: 0 12px 32px rgba(16, 24, 40, .16);
  --app-esp-1: 4px; --app-esp-2: 8px; --app-esp-3: 12px; --app-esp-4: 16px; --app-esp-5: 24px; --app-esp-6: 32px; --app-esp-7: 48px;
  --app-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --app-transicao: .15s ease;

  /* Layout */
  --cor-org: var(--app-primary);
  --altura-topo: 56px;
  --largura-lateral: 256px;
  --largura-lateral-recolhida: 64px;
  --largura-maxima: 1640px;

  /* Bootstrap */
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: 36, 87, 166;
  --bs-link-color: var(--app-primary);
  --bs-link-color-rgb: 36, 87, 166;
  --bs-link-hover-color: var(--app-primary-hover);
  --bs-link-hover-color-rgb: 29, 72, 137;
  --bs-body-font-family: var(--app-font);
  --bs-body-font-size: .875rem;
  --bs-body-line-height: 1.5;
  --bs-body-color: var(--app-text);
  --bs-body-bg: var(--app-background);
  --bs-secondary-color: var(--app-text-muted);
  --bs-border-color: var(--app-border);
  --bs-border-radius: var(--app-radius-sm);
  --bs-border-radius-lg: var(--app-radius);
  --bs-primary-bg-subtle: var(--app-primary-soft);
  --bs-primary-text-emphasis: var(--app-primary-active);
  --bs-success-bg-subtle: var(--app-success-soft);
  --bs-warning-bg-subtle: var(--app-warning-soft);
  --bs-danger-bg-subtle: var(--app-danger-soft);
  --bs-info-bg-subtle: var(--app-info-soft);
  --bs-tertiary-bg: var(--app-surface-2);
  --bs-tertiary-bg-rgb: 248, 250, 252;
  --bs-focus-ring-color: rgba(36, 87, 166, .25);
}

/* ---------- 2. Base e tipografia ---------- */
body { min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, .h1 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; }
h2, .h2 { font-size: 1.125rem; font-weight: 600; }
h3, .h3 { font-size: 1rem; font-weight: 600; }
h4, .h4 { font-size: .9375rem; font-weight: 600; }
h5, .h5 { font-size: .9375rem; font-weight: 600; }
h6, .h6 { font-size: .875rem; font-weight: 600; }
.small, small { font-size: .8125rem; }
.text-body-secondary { color: var(--app-text-muted) !important; }
.text-primary { color: var(--app-primary) !important; }
.bg-primary { background-color: var(--app-primary) !important; }
.lead { font-size: 1.0625rem; }
a { text-underline-offset: 2px; }
code { color: #a23b72; }
kbd { background: var(--app-neutral-soft); color: var(--app-neutral); border: 1px solid var(--app-border); font-size: .72rem; padding: .05rem .35rem; box-shadow: none; }
:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }
::selection { background: var(--app-primary-soft-2); }
.cursor-mao { cursor: pointer; }
.flex-none { flex: none; }
.texto-truncado { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- 3. Componentes Bootstrap ---------- */
/* Botões: primário sólido, secundário neutro, perigo contornado, terciário fantasma */
.btn { --bs-btn-font-weight: 500; --bs-btn-font-size: .875rem; --bs-btn-padding-y: .4375rem; --bs-btn-padding-x: .875rem; --bs-btn-border-radius: var(--app-radius-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: .125rem; transition: background-color var(--app-transicao), border-color var(--app-transicao), color var(--app-transicao), box-shadow var(--app-transicao); }
.btn-sm { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .625rem; --bs-btn-font-size: .8125rem; }
.btn-lg { --bs-btn-padding-y: .625rem; --bs-btn-padding-x: 1.125rem; --bs-btn-font-size: .9375rem; }
.btn.w-100 { display: flex; }
.btn-link { display: inline; }
.btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary-hover); --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-active-bg: var(--app-primary-active); --bs-btn-active-border-color: var(--app-primary-active); --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary); box-shadow: var(--app-shadow-sm); }
.btn-outline-primary { --bs-btn-color: var(--app-primary); --bs-btn-border-color: #b9cbe8; --bs-btn-bg: var(--app-surface); --bs-btn-hover-color: var(--app-primary-active); --bs-btn-hover-bg: var(--app-primary-soft);
  --bs-btn-hover-border-color: #9db6de; --bs-btn-active-color: var(--app-primary-active); --bs-btn-active-bg: var(--app-primary-soft-2); --bs-btn-active-border-color: #9db6de; }
.btn-outline-secondary, .btn-light, .btn-secondary { --bs-btn-color: var(--app-text); --bs-btn-bg: var(--app-surface); --bs-btn-border-color: var(--app-border-strong); --bs-btn-hover-color: var(--app-text);
  --bs-btn-hover-bg: var(--app-surface-2); --bs-btn-hover-border-color: #b8c1ce; --bs-btn-active-color: var(--app-text); --bs-btn-active-bg: var(--app-neutral-soft); --bs-btn-active-border-color: #b8c1ce;
  --bs-btn-disabled-color: var(--app-disabled); --bs-btn-disabled-bg: var(--app-surface); --bs-btn-disabled-border-color: var(--app-border); }
.btn-outline-danger { --bs-btn-color: var(--app-danger); --bs-btn-bg: var(--app-surface); --bs-btn-border-color: #ecc3bf; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--app-danger); --bs-btn-hover-border-color: var(--app-danger);
  --bs-btn-active-bg: #a12d24; --bs-btn-active-border-color: #a12d24; }
.btn-danger { --bs-btn-bg: var(--app-danger); --bs-btn-border-color: var(--app-danger); --bs-btn-hover-bg: #a12d24; --bs-btn-hover-border-color: #a12d24; }
.btn-success { --bs-btn-bg: var(--app-success); --bs-btn-border-color: var(--app-success); --bs-btn-hover-bg: #156a3e; --bs-btn-hover-border-color: #156a3e; }
.btn-outline-success { --bs-btn-color: var(--app-success); --bs-btn-bg: var(--app-surface); --bs-btn-border-color: #b8dcc6; --bs-btn-hover-bg: var(--app-success); --bs-btn-hover-border-color: var(--app-success); }
.btn-outline-warning { --bs-btn-color: var(--app-warning); --bs-btn-bg: var(--app-surface); --bs-btn-border-color: #ebd29a; --bs-btn-hover-color: #3b2a00; --bs-btn-hover-bg: var(--app-warning-soft); --bs-btn-hover-border-color: #e0bf6e; }
.btn-outline-info { --bs-btn-color: var(--app-info); --bs-btn-bg: var(--app-surface); --bs-btn-border-color: #b6d8e8; --bs-btn-hover-color: var(--app-info); --bs-btn-hover-bg: var(--app-info-soft); --bs-btn-hover-border-color: #9ccbe0; }
.btn-warning { --bs-btn-bg: var(--app-warning-solid); --bs-btn-border-color: var(--app-warning-solid); }
.btn:disabled, .btn.disabled { opacity: .6; }
.btn.salvando { pointer-events: none; opacity: .8; }

/* Ações dentro de tabelas e listas: botões fantasma, com destaque só ao passar o mouse */
.table td .btn-sm, .list-group-item .btn-sm[data-acao] { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .5rem; min-height: 30px; min-width: 30px; }
.table td .btn-sm[class*="btn-outline-"]:not(.btn-outline-danger), .list-group-item .btn-sm[data-acao][class*="btn-outline-"]:not(.btn-outline-danger) {
  --bs-btn-border-color: transparent; --bs-btn-bg: transparent; --bs-btn-color: var(--app-text-muted); --bs-btn-hover-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary-soft); --bs-btn-hover-border-color: transparent; box-shadow: none; }
.table td .btn-sm.btn-outline-danger { --bs-btn-border-color: transparent; --bs-btn-bg: transparent; --bs-btn-color: #b4625b; }
.table td .btn-sm.btn-outline-danger:hover { --bs-btn-hover-bg: var(--app-danger-soft); --bs-btn-hover-color: var(--app-danger); }
.table td .btn-sm.btn-primary { box-shadow: none; }

/* Campos */
.form-label { font-weight: 500; font-size: .8125rem; color: #344054; margin-bottom: .3rem; }
.form-control, .form-select { font-size: .875rem; border-color: var(--app-border-strong); border-radius: var(--app-radius-sm); padding: .4375rem .75rem; color: var(--app-text); background-color: var(--app-surface);
  transition: border-color var(--app-transicao), box-shadow var(--app-transicao); }
.form-select { padding-right: 2.25rem; }
.form-control-sm, .form-select-sm { font-size: .8125rem; padding-top: .3rem; padding-bottom: .3rem; min-height: 32px; }
.form-control::placeholder { color: var(--app-text-subtle); }
.form-control:hover:not(:focus):not(:disabled), .form-select:hover:not(:focus):not(:disabled) { border-color: #b8c1ce; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #7fa3d9; box-shadow: 0 0 0 3px rgba(36, 87, 166, .15); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--app-surface-2); color: var(--app-text-muted); }
.form-check-input { border-color: #b8c1ce; }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.form-text { font-size: .75rem; color: var(--app-text-muted); }
.invalid-feedback { font-size: .78rem; }
.form-control.is-invalid, .form-select.is-invalid { background-image: none; padding-right: .75rem; }
.form-select.is-invalid { padding-right: 2.25rem; }
.was-validated .form-control:valid, .form-control.is-valid, .form-select.is-valid { border-color: var(--app-border-strong); background-image: none; }
.form-control.is-valid:focus, .form-select.is-valid:focus { box-shadow: 0 0 0 3px rgba(36, 87, 166, .15); border-color: #7fa3d9; }
.input-group-text { background: var(--app-surface-2); border-color: var(--app-border-strong); color: var(--app-text-muted); font-size: .875rem; }
.input-group-sm > .input-group-text { font-size: .8125rem; }
.multi-check { max-height: 210px; overflow: auto; border: 1px solid var(--app-border-strong); border-radius: var(--app-radius-sm); padding: .5rem .75rem; background: var(--app-surface); }
.multi-check.is-invalid { border-color: var(--app-danger); }

/* Seções de formulário (UI.form e formulários próprios) */
.form-comp > .col-12 > h3.h6, .secao-form { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--app-text-muted) !important;
  border-bottom: 1px solid var(--app-border) !important; padding-bottom: .4rem !important; margin-top: 1rem !important; }
.form-comp > .col-12:first-child > h3.h6 { margin-top: 0 !important; }

/* Cartões: planos, com borda leve e sem sombra pesada */
.card { --bs-card-border-color: var(--app-border); --bs-card-border-radius: var(--app-radius); --bs-card-inner-border-radius: calc(var(--app-radius) - 1px); --bs-card-cap-bg: var(--app-surface);
  --bs-card-spacer-y: 1rem; --bs-card-spacer-x: 1.125rem; box-shadow: var(--app-shadow-sm); }
.card-header { font-weight: 600; padding-top: .75rem; padding-bottom: .75rem; border-bottom-color: var(--app-border); }
.card-header .h6, .card-header h2 { font-size: .875rem; }
.card-footer { background: var(--app-surface-2) !important; border-top-color: var(--app-border); }
.card .card { box-shadow: none; }
.tab-pane > .card:only-child { box-shadow: var(--app-shadow-sm); }

/* Tabelas */
.table { --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border); --bs-table-hover-bg: #f5f8fd; --bs-table-striped-bg: #fafbfd; font-size: .8125rem; margin-bottom: .5rem; }
.table > :not(caption) > * > * { vertical-align: middle; padding: .55rem .75rem; }
.table-sm > :not(caption) > * > * { padding: .35rem .6rem; }
.table thead th, .table thead.table-light th, .table-light th { --bs-table-bg: var(--app-surface-2); background: var(--app-surface-2); color: var(--app-text-muted); font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--app-border); }
.table thead th .btn-ordenar { font-size: inherit; font-weight: 600 !important; letter-spacing: inherit; text-transform: inherit; color: inherit !important; display: inline-flex; align-items: center; gap: .3rem; }
.table thead th .btn-ordenar:hover { color: var(--app-text) !important; }
.table thead th .btn-ordenar .bi { font-size: .75rem; }
.table tbody tr:last-child td { border-bottom-color: transparent; }
.table-bordered > :not(caption) > * { border-color: var(--app-border); }
.table .avatar { width: 30px; height: 30px; font-size: .75rem; }
.acoes-celula, td.text-end.text-nowrap { white-space: nowrap; }
.tabela-comp .pagination { --bs-pagination-padding-x: .6rem; --bs-pagination-padding-y: .2rem; --bs-pagination-font-size: .8125rem; }
.table-responsive, .tabela-comp { position: relative; }

/* Badges e status: tons suaves, mesmo estilo em todo o sistema */
.badge { font-weight: 600; font-size: .72rem; letter-spacing: .01em; padding: .3em .6em; border-radius: 999px; }
.badge.text-bg-success { background: var(--app-success-soft) !important; color: var(--app-success) !important; }
.badge.text-bg-warning { background: var(--app-warning-soft) !important; color: var(--app-warning) !important; }
.badge.text-bg-danger { background: var(--app-danger-soft) !important; color: var(--app-danger) !important; }
.badge.text-bg-info { background: var(--app-info-soft) !important; color: var(--app-info) !important; }
.badge.text-bg-primary { background: var(--app-primary-soft) !important; color: var(--app-primary-active) !important; }
.badge.text-bg-secondary, .badge.text-bg-dark { background: var(--app-neutral-soft) !important; color: var(--app-neutral) !important; }
.badge.text-bg-light, .badge.bg-light { background: var(--app-surface-2) !important; color: var(--app-neutral) !important; border: 1px solid var(--app-border) !important; }
.badge.bg-danger.rounded-pill.position-absolute { background: var(--app-danger) !important; color: #fff !important; border: 2px solid #fff; font-size: .62rem; padding: .25em .45em; }
.badge.status::before, .badge.rounded-pill[class*="text-bg-"]:not(.position-absolute):not(.sem-ponto)::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: .35em; vertical-align: 1px; opacity: .85; }

/* Alertas */
.alert { --bs-alert-padding-y: .7rem; --bs-alert-padding-x: .9rem; --bs-alert-border-radius: var(--app-radius); font-size: .8125rem; border-width: 1px; border-left-width: 3px; }
.alert-info { --bs-alert-bg: var(--app-info-soft); --bs-alert-border-color: #c3e0ee; --bs-alert-color: #134a64; border-left-color: var(--app-info); }
.alert-warning { --bs-alert-bg: var(--app-warning-soft); --bs-alert-border-color: #f1dca6; --bs-alert-color: #5e3d00; border-left-color: var(--app-warning-solid); }
.alert-danger { --bs-alert-bg: var(--app-danger-soft); --bs-alert-border-color: #f3c9c4; --bs-alert-color: #7c221b; border-left-color: var(--app-danger); }
.alert-success { --bs-alert-bg: var(--app-success-soft); --bs-alert-border-color: #c4e5d1; --bs-alert-color: #145a35; border-left-color: var(--app-success); }
.alert-secondary, .alert-light { --bs-alert-bg: var(--app-surface-2); --bs-alert-border-color: var(--app-border); --bs-alert-color: var(--app-neutral); border-left-color: var(--app-border-strong); }
.alert-primary { --bs-alert-bg: var(--app-primary-soft); --bs-alert-border-color: #c9d8ef; --bs-alert-color: var(--app-primary-active); border-left-color: var(--app-primary); }

/* Abas: sublinhado discreto, sem caixas */
.nav-tabs { --bs-nav-tabs-border-color: var(--app-border); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-border-color: transparent; gap: .25rem; scrollbar-width: thin; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--app-text-muted); font-weight: 500; font-size: .8125rem; padding: .55rem .75rem; margin-bottom: -1px; display: inline-flex; align-items: center; gap: .3rem; }
.nav-tabs .nav-link:hover { color: var(--app-text); border-bottom-color: var(--app-border-strong); }
.nav-tabs .nav-link.active { color: var(--app-primary); border-bottom-color: var(--app-primary); background: transparent; }
.nav-tabs .nav-link .bi { margin-right: .15rem !important; }
.nav-pills { --bs-nav-pills-border-radius: var(--app-radius-sm); }
.nav-pills .nav-link { color: var(--app-text-muted); font-weight: 500; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--app-primary); color: #fff; }

/* Paginação */
.pagination { --bs-pagination-color: var(--app-text); --bs-pagination-border-color: var(--app-border); --bs-pagination-hover-bg: var(--app-surface-2); --bs-pagination-hover-color: var(--app-primary);
  --bs-pagination-active-bg: var(--app-primary); --bs-pagination-active-border-color: var(--app-primary); --bs-pagination-disabled-color: var(--app-disabled); --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(36, 87, 166, .2); }

/* Listas */
.list-group { --bs-list-group-border-color: var(--app-border); --bs-list-group-action-hover-bg: var(--app-surface-2); --bs-list-group-active-bg: var(--app-primary); --bs-list-group-active-border-color: var(--app-primary); }
.list-group-item { font-size: .8125rem; }

/* Modais */
.modal { --bs-modal-border-radius: var(--app-radius-lg); --bs-modal-border-color: transparent; --bs-modal-box-shadow: var(--app-shadow-lg); --bs-modal-header-padding: 1rem 1.25rem; --bs-modal-padding: 1.25rem; --bs-modal-footer-gap: .5rem; }
.modal-content { box-shadow: var(--app-shadow-lg); }
.modal-header { border-bottom-color: var(--app-border); }
.modal-title { font-size: 1rem !important; font-weight: 600; }
.modal-footer { background: var(--app-surface-2); border-top-color: var(--app-border); border-bottom-left-radius: var(--app-radius-lg); border-bottom-right-radius: var(--app-radius-lg); padding: .75rem 1.25rem; }
.modal-backdrop { --bs-backdrop-bg: #101828; --bs-backdrop-opacity: .45; }
.modal-confirmacao .icone-confirmacao { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; flex: none; background: var(--app-primary-soft); color: var(--app-primary); }
.modal-confirmacao.perigo .icone-confirmacao { background: var(--app-danger-soft); color: var(--app-danger); }

/* Dropdowns, tooltips, toasts e popovers */
.dropdown-menu { --bs-dropdown-border-color: var(--app-border); --bs-dropdown-border-radius: var(--app-radius); --bs-dropdown-box-shadow: var(--app-shadow); --bs-dropdown-font-size: .8125rem;
  --bs-dropdown-link-hover-bg: var(--app-surface-2); --bs-dropdown-link-active-bg: var(--app-primary-soft); --bs-dropdown-link-active-color: var(--app-primary-active); --bs-dropdown-item-padding-y: .45rem; box-shadow: var(--app-shadow); padding: .35rem; }
.dropdown-item { border-radius: var(--app-radius-sm); display: flex; align-items: center; gap: .15rem; }
.dropdown-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.tooltip { --bs-tooltip-bg: #1b2430; --bs-tooltip-font-size: .75rem; --bs-tooltip-border-radius: var(--app-radius-sm); }
.toast { --bs-toast-border-radius: var(--app-radius); --bs-toast-font-size: .8125rem; box-shadow: var(--app-shadow-lg); }
.toast.text-bg-success { background: #17603a !important; }
.toast.text-bg-danger { background: #a12d24 !important; }
.toast.text-bg-warning { background: #4a3500 !important; color: #fff !important; }
.toast.text-bg-warning .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.toast.text-bg-primary { background: #1b2430 !important; }
.progress { --bs-progress-bg: var(--app-neutral-soft); --bs-progress-bar-bg: var(--app-primary); --bs-progress-border-radius: 999px; }
.accordion { --bs-accordion-border-color: var(--app-border); --bs-accordion-active-bg: var(--app-primary-soft); --bs-accordion-active-color: var(--app-primary-active); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(36, 87, 166, .15); }
.accordion-button { font-weight: 500; font-size: .875rem; }
.breadcrumb { --bs-breadcrumb-font-size: .75rem; --bs-breadcrumb-divider-color: var(--app-text-subtle); --bs-breadcrumb-item-active-color: var(--app-text-muted); --bs-breadcrumb-margin-bottom: .25rem; }
.breadcrumb a { color: var(--app-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--app-primary); text-decoration: underline; }
.offcanvas { --bs-offcanvas-width: 300px; }
.bg-body-tertiary { background-color: var(--app-surface-2) !important; }
hr { color: var(--app-border); opacity: 1; }

/* ---------- 4. Layout da aplicação ---------- */
.marca-logo { width: 32px; height: 32px; border-radius: 8px; background: var(--cor-org); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; flex: none; }
.marca-logo.grande { width: 48px; height: 48px; font-size: 1.55rem; border-radius: 12px; }
.marca-nome { font-weight: 700; letter-spacing: .02em; font-size: 1rem; }

.topo { min-height: var(--altura-topo); z-index: 1030; box-shadow: 0 1px 0 var(--app-border); border-bottom: 0 !important; }
.topo .btn-link { color: var(--app-neutral) !important; text-decoration: none; border-radius: var(--app-radius-sm); }
.topo .btn-link:hover { background: var(--app-surface-2); color: var(--app-text) !important; }
.contexto-btn { max-width: 320px; line-height: 1.2; border-color: var(--app-border) !important; background: var(--app-surface-2) !important; padding: .3rem .65rem; }
.contexto-btn:hover { border-color: var(--app-border-strong) !important; }
.contexto-btn > span { min-width: 0; }
#btn-localizar { color: var(--app-text-muted); border-color: var(--app-border); background: var(--app-surface-2); min-width: 200px; justify-content: flex-start; }
#btn-localizar kbd { margin-left: auto !important; }
.notif-menu { width: 360px; max-width: 92vw; max-height: 70vh; overflow: auto; }
.notif-menu .dropdown-item { white-space: normal; display: block; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--app-primary-soft); color: var(--app-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .78rem; flex: none; }
.avatar.grande { width: 64px; height: 64px; font-size: 1.4rem; }
.btn-recolher { width: 36px; height: 36px; padding: 0; }

.corpo-app { min-height: calc(100vh - var(--altura-topo) - 40px); }
.lateral { width: var(--largura-lateral); flex: none; position: sticky; top: var(--altura-topo); height: calc(100vh - var(--altura-topo)); overflow-y: auto; overflow-x: hidden;
  border-right: 1px solid var(--app-border) !important; transition: width .2s ease; scrollbar-width: thin; scrollbar-color: #d0d6df transparent; }
.lateral .nav-link, #menu-lateral-m .nav-link { color: #344054; border-radius: var(--app-radius-sm); margin: 1px 10px; padding: .45rem .6rem; font-size: .8125rem; font-weight: 500; display: flex; align-items: center; gap: .1rem; white-space: nowrap; }
.lateral .nav-link .bi, #menu-lateral-m .nav-link .bi { font-size: 1rem; color: var(--app-text-muted); flex: none; width: 1.25rem; text-align: center; }
.lateral .nav-link:hover, #menu-lateral-m .nav-link:hover { background: var(--app-surface-2); color: var(--app-text); }
.lateral .nav-link.active, #menu-lateral-m .nav-link.active { background: var(--app-primary-soft); color: var(--app-primary-active); font-weight: 600; }
.lateral .nav-link.active .bi, #menu-lateral-m .nav-link.active .bi { color: var(--app-primary); }
.grupo-menu.contem-ativo > .nav-link { color: var(--app-text); font-weight: 600; }
.grupo-menu.contem-ativo > .nav-link .bi:first-child { color: var(--app-primary); }
.grupo-menu > .nav-link .seta { transition: transform var(--app-transicao); font-size: .7rem; width: auto; }
.grupo-menu > .nav-link:not(.collapsed) .seta { transform: rotate(180deg); }
.submenu { padding-left: 1.65rem !important; margin: 2px 0 6px; position: relative; }
.submenu::before { content: ""; position: absolute; left: 1.6rem; top: 2px; bottom: 2px; width: 1px; background: var(--app-border); }
.submenu .nav-link { font-size: .8125rem; font-weight: 400 !important; margin-left: 6px !important; padding: .32rem .6rem !important; color: var(--app-text-muted); white-space: normal; }
.submenu .nav-link.active { position: relative; }
.submenu .nav-link.active::before { content: ""; position: absolute; left: -7px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--app-primary); }
.secao-menu { font-size: .6875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--app-text-subtle); padding: 1rem 1.25rem .35rem; white-space: nowrap; }
.secao-menu:first-child { padding-top: .5rem; }
#conteudo { min-width: 0; outline: none; }
#conteudo > * { max-width: var(--largura-maxima); margin-left: auto; margin-right: auto; }
.rodape-app { min-height: 40px; border-top-color: var(--app-border) !important; color: var(--app-text-subtle) !important; font-size: .75rem !important; }

/* Menu lateral recolhido (somente desktop) */
@media (min-width: 992px) {
  body.menu-recolhido .lateral { width: var(--largura-lateral-recolhida); }
  body.menu-recolhido .lateral .secao-menu { font-size: 0; padding: .6rem 0 .2rem; margin: 0 14px; border-top: 1px solid var(--app-border); }
  body.menu-recolhido .lateral .secao-menu:first-child { border-top: 0; }
  body.menu-recolhido .lateral .nav-link { justify-content: center; margin: 1px 8px; padding: .55rem 0; }
  body.menu-recolhido .lateral .nav-link > span, body.menu-recolhido .lateral .nav-link .seta { display: none; }
  body.menu-recolhido .lateral .nav-link .bi { margin-right: 0 !important; font-size: 1.1rem; }
  body.menu-recolhido .lateral .submenu { display: none !important; }
}

/* Cabeçalho de página: título e descrição à esquerda, ações à direita */
.cabecalho-pagina { margin-bottom: 1.25rem !important; }
.cabecalho-pagina h1 { font-size: 1.375rem; font-weight: 600; margin-bottom: .125rem; line-height: 1.3; }
.cabecalho-pagina h1 + p, .cabecalho-pagina p.text-body-secondary { font-size: .8125rem; max-width: 820px; }
.cabecalho-pagina .breadcrumb { margin-bottom: .35rem; }
.cabecalho-pagina .acoes-cabecalho { align-items: center; }
.ref-requisitos { color: var(--app-text-subtle); font-size: .8125rem; cursor: help; margin-left: .35rem; vertical-align: 2px; }

/* ---------- 5. Componentes do produto ---------- */
/* Indicadores (KPI): neutros por padrão; cor apenas para atenção */
.kpi { height: 100%; }
.kpi .card-body { padding: .875rem 1rem; gap: .85rem !important; }
.kpi .card-body > div { min-width: 0; }
.kpi-icone { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; flex: none; }
.kpi-icone.neutro { background: var(--app-neutral-soft) !important; color: var(--app-neutral) !important; }
.kpi-valor { font-size: 1.375rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi-rotulo { font-size: .78rem; color: var(--app-text-muted); }
.kpi-valor, .kpi-rotulo { overflow-wrap: anywhere; }
a:hover > .kpi, a:focus-visible > .kpi { border-color: #b9cbe8; box-shadow: var(--app-shadow); }
a > .kpi { transition: border-color var(--app-transicao), box-shadow var(--app-transicao); }

/* Gráficos */
.grafico { width: 100%; overflow-x: auto; }
.grafico svg { display: block; max-width: 100%; height: auto; max-height: 300px; margin: 0 auto; }
.grafico text { font-family: inherit; }
.legenda-cor { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }

/* Barra de filtros e filtros ativos */
.filtros { padding-bottom: .75rem; border-bottom: 1px solid var(--app-border); margin-bottom: .75rem !important; }
.filtros .form-label { font-size: .75rem; color: var(--app-text-muted); margin-bottom: .2rem !important; }
.filtros-ativos { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-bottom: .75rem; }
.filtros-ativos:empty { display: none; }
.chip-filtro { display: inline-flex; align-items: center; gap: .3rem; background: var(--app-primary-soft); color: var(--app-primary-active); border: 1px solid #c9d8ef; border-radius: 999px; font-size: .75rem; font-weight: 500;
  padding: .15rem .3rem .15rem .6rem; line-height: 1.4; }
.chip-filtro button { border: 0; background: transparent; color: inherit; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: .7rem; }
.chip-filtro button:hover { background: rgba(36, 87, 166, .15); }
.contador-resultados { font-size: .75rem; color: var(--app-text-muted); }

/* Estados vazios */
.estado-vazio { text-align: center; padding: 2.5rem 1rem; color: var(--app-text-muted); }
.estado-vazio .bi { font-size: 1.6rem !important; display: inline-flex !important; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--app-neutral-soft); color: var(--app-text-subtle); margin-bottom: .75rem !important; }
.estado-vazio .titulo-vazio { font-weight: 600; color: var(--app-text); font-size: .875rem; margin-bottom: .2rem; }
.estado-vazio p { font-size: .8125rem; max-width: 420px; margin-left: auto; margin-right: auto; }
.carregando-sobreposto { position: fixed; inset: 0; background: rgba(245, 247, 250, .72); backdrop-filter: blur(1px); z-index: 2000; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .75rem; font-size: .875rem; color: var(--app-text-muted); }
.carregando-sobreposto > div { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius-lg); box-shadow: var(--app-shadow); padding: 1.25rem 1.75rem; }

/* Lista de definição (detalhes) */
.lista-def dt { font-weight: 400; color: var(--app-text-muted); font-size: .8125rem; padding-top: .45rem; padding-bottom: .45rem; border-bottom: 1px solid var(--app-surface-2); margin: 0; }
.lista-def dd { font-size: .8125rem; padding-top: .45rem; padding-bottom: .45rem; border-bottom: 1px solid var(--app-surface-2); margin: 0; overflow-wrap: anywhere; }
.lista-def dt:last-of-type, .lista-def dd:last-of-type { border-bottom: 0; }

/* Linha do tempo */
.linha-tempo { list-style: none; padding-left: 0; margin: 0; position: relative; }
.linha-tempo li { position: relative; padding: 0 0 1rem 1.5rem; font-size: .8125rem; }
.linha-tempo li::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: -6px; width: 2px; background: var(--app-border); }
.linha-tempo li:last-child::before { display: none; }
.linha-tempo li::after { content: ""; position: absolute; left: 1px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--app-surface); border: 2px solid var(--app-primary); }

/* Assistente (wizard) */
.wizard-etapas { display: flex; gap: .25rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: passo; }
.wizard-passo { display: flex; align-items: center; gap: .45rem; font-size: .8125rem; color: var(--app-text-muted); padding: .3rem .75rem .3rem .3rem; border-radius: 999px; background: transparent; }
.wizard-passo + .wizard-passo::before { content: ""; width: 18px; height: 1px; background: var(--app-border-strong); margin-left: -.5rem; margin-right: .1rem; }
.wizard-passo .num { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--app-surface); border: 1px solid var(--app-border-strong); color: var(--app-text-muted); font-weight: 600; font-size: .75rem; }
.wizard-passo.atual { color: var(--app-text); font-weight: 600; background: var(--app-primary-soft); }
.wizard-passo.atual .num { background: var(--app-primary); border-color: var(--app-primary); color: #fff; }
.wizard-passo.feito { color: var(--app-text); }
.wizard-passo.feito .num { background: var(--app-success-soft); border-color: #b8dcc6; color: var(--app-success); }
.wizard .card-footer { display: flex; }

/* Kanban */
.kanban { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
.kanban-coluna { flex: 0 0 264px; background: var(--app-neutral-soft); border-radius: var(--app-radius); padding: .6rem; min-height: 200px; }
.kanban-coluna.sobre { background: var(--app-primary-soft); outline: 2px dashed #9db6de; }
.kanban-cartao { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius-sm); padding: .6rem .7rem; margin-bottom: .5rem; cursor: grab; font-size: .8125rem; box-shadow: var(--app-shadow-sm); transition: box-shadow var(--app-transicao); }
.kanban-cartao:hover { box-shadow: var(--app-shadow); }

/* Grade e calendário */
.grade-horario td, .grade-horario th { text-align: center; font-size: .78rem; min-width: 90px; }
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendario .dia { background: var(--app-surface); border: 1px solid var(--app-border); min-height: 68px; padding: 4px 6px; font-size: .72rem; border-radius: var(--app-radius-sm); }
.calendario .dia.fora { background: var(--app-surface-2); color: var(--app-text-subtle); }
.calendario .dia.letivo { box-shadow: inset 3px 0 0 #74c69d; }
.calendario .dia.feriado { background: var(--app-danger-soft); }

/* Celular simulado */
.moldura-celular { width: 390px; max-width: 100%; height: 780px; max-height: calc(100vh - 120px); border: 10px solid #1f2937; border-radius: 34px; overflow: hidden; background: #fff; margin: 0 auto; display: flex; flex-direction: column; box-shadow: var(--app-shadow-lg); }
.moldura-celular .tela { flex: 1; overflow-y: auto; }

/* Selos, mapa e documento */
.selo-natureza { font-size: .68rem; font-weight: 600; letter-spacing: .02em; }
.mapa-unidades { position: relative; background: #e9f0ea; border-radius: var(--app-radius); height: 280px; overflow: hidden; border: 1px solid var(--app-border); }
.mapa-unidades .pino { position: absolute; transform: translate(-50%, -100%); color: var(--app-danger); font-size: 1.6rem; cursor: pointer; background: none; border: 0; padding: 0; }
.folha-documento { background: #fff; border: 1px solid #dcdfe5; padding: 2rem; max-width: 760px; margin: 0 auto; font-family: Georgia, "Times New Roman", serif; box-shadow: var(--app-shadow); }
.folha-documento h2 { font-family: inherit; }

/* ---------- 6. Páginas públicas e de acesso ---------- */
.publico-nav { background: rgba(255, 255, 255, .95) !important; box-shadow: 0 1px 0 var(--app-border); border-bottom: 0 !important; }
.publico-nav .nav-link { font-weight: 500; font-size: .875rem; color: var(--app-neutral); }
.publico-nav .nav-link:hover, .publico-nav .nav-link.active { color: var(--app-primary); }
.hero { background: #17345f; background-image: radial-gradient(circle at 85% 20%, rgba(76, 132, 214, .45), transparent 45%), linear-gradient(135deg, #17345f 0%, #2457a6 100%); color: #fff; }
.hero h1 { font-size: clamp(1.75rem, 3.5vw, 2.6rem); letter-spacing: -.02em; line-height: 1.15; }
.hero .lead { color: #dbe6f6; }
.hero .badge.text-bg-light { background: rgba(255, 255, 255, .14) !important; color: #fff !important; border-color: rgba(255, 255, 255, .25) !important; }
.hero .btn-light { --bs-btn-bg: #fff; --bs-btn-color: var(--app-primary-active); --bs-btn-border-color: #fff; --bs-btn-hover-bg: #eaf0fa; --bs-btn-hover-color: var(--app-primary-active); }
.hero .btn-outline-light { --bs-btn-color: #fff; --bs-btn-bg: transparent; --bs-btn-border-color: rgba(255, 255, 255, .55); --bs-btn-hover-bg: rgba(255, 255, 255, .12); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #fff; }
.icone-beneficio { width: 44px; height: 44px; border-radius: 10px; background: var(--app-primary-soft); color: var(--app-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex: none; }
.secao { padding: 4.5rem 0; }
.secao h2.h3 { font-size: 1.5rem; letter-spacing: -.01em; }
.cartao-plano { border-width: 1px; }
.cartao-plano.destaque { border-color: var(--app-primary); box-shadow: 0 0 0 1px var(--app-primary), var(--app-shadow) !important; }

.tela-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: var(--app-background); }
.caixa-auth { width: 100%; max-width: 420px; }
.caixa-auth .card { box-shadow: var(--app-shadow); border: 0; }
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--app-surface); }
.auth-marca { background: #17345f; background-image: radial-gradient(circle at 80% 15%, rgba(76, 132, 214, .45), transparent 45%), linear-gradient(160deg, #17345f 0%, #2457a6 100%); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.auth-marca h2 { font-size: 1.75rem; line-height: 1.25; letter-spacing: -.01em; max-width: 460px; }
.auth-marca p, .auth-marca li { color: #dbe6f6; }
.auth-marca .marca-logo { background: rgba(255, 255, 255, .16); }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.auth-form .conteudo-auth { width: 100%; max-width: 400px; }
.auth-form h1 { font-size: 1.5rem; }
.credenciais-demo { max-height: 300px; overflow: auto; border: 1px solid var(--app-border); border-radius: var(--app-radius); }
.credenciais-demo table { margin: 0; }
.credenciais-demo thead th { position: sticky; top: 0; z-index: 1; }
.credencial { cursor: pointer; }
.credencial:hover td { background: var(--app-primary-soft) !important; }
.forca-senha { height: 6px; }

/* ---------- 7. Responsividade, acessibilidade e impressão ---------- */
@media (max-width: 1199.98px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-marca { display: none; }
}
@media (max-width: 991.98px) {
  .cabecalho-pagina h1 { font-size: 1.25rem; }
  #btn-localizar { min-width: 0; }
}
@media (max-width: 575.98px) {
  #conteudo { padding: .875rem !important; }
  .kpi .card-body { padding: .7rem; gap: .6rem !important; }
  .kpi-valor { font-size: 1.15rem; }
  .kpi-icone { width: 34px; height: 34px; font-size: 1rem; }
  .secao { padding: 2.5rem 0; }
  .moldura-celular { border-width: 0; border-radius: 0; height: auto; max-height: none; box-shadow: none; }
  .cabecalho-pagina .d-flex.flex-wrap.gap-2 > .btn { flex: 1 1 auto; }
  .modal-footer > .btn { flex: 1 1 auto; }
  .wizard-passo:not(.atual) .rotulo-passo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .topo, .lateral, .rodape-app, .cabecalho-pagina .btn, .nao-imprimir { display: none !important; }
  body { background: #fff; }
}
.min-w-0 { min-width: 0; }
/* Filtros recolhidos no celular: a pesquisa fica visível e os demais filtros abrem pelo botão "Filtros" */
@media (max-width: 767.98px) {
  .filtros:not(.filtros-abertos) .col-filtro { display: none; }
}
/* Títulos de página escritos como h1 com classe utilitária mantêm o tamanho padrão de título */
h1.h3, h1.h4, h1.h5 { font-size: 1.375rem; font-weight: 600; }
/* No celular as tabelas rolam na horizontal em vez de quebrar cada célula em várias linhas */
@media (max-width: 767.98px) {
  .table-responsive > .table td, .table-responsive > .table th { white-space: nowrap; }
}