/* ===========================================================================
   DESIGN SYSTEM — Centro de Treinamento RV
   ---------------------------------------------------------------------------
   Único lugar onde cor, tipografia, espaçamento, raio, sombra e transição são
   definidos. O resto do sistema consome estes tokens.

   Carrega DEPOIS de glass.css e perfil.css (Dash lê os assets em ordem
   alfabética), então ganha nos empates de especificidade.

   Estrutura:
     1. Tokens
     2. Ponte com o Bootstrap (--bs-*) — faz todo componente dbc herdar o tema
     3. Base e tipografia
     4. Superfícies (cards, seções)
     5. Botões
     6. Campos de formulário
     7. Dropdowns (dcc.Dropdown, estilo Google Sheets)
     8. Tabelas
     9. Badges / chips
    10. Modais
    11. Navegação (sidebar, topo, breadcrumb, abas do perfil)
    12. Estados: vazio, carregando (skeleton), foco
    13. Rolagem
    14. Responsivo e acessibilidade
   =========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   1. TOKENS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Marca ─────────────────────────────────────────────────────────────
     Azul-marinho = estrutura e texto. Vermelho = a cor marcante, reservada
     para a ação principal de cada tela e para o estado ativo. */
  --brand-900: #0d1b2e;
  --brand-800: #14263d;
  --brand-700: #1a3050;
  --brand-600: #1e3a5f;   /* azul-marinho oficial */
  --brand-500: #2c4d78;
  --brand-400: #4a6d97;
  --brand-300: #8ba3c0;
  --brand-100: #dbe4f0;
  --brand-50:  #eef2f9;

  --acento-700: #b4232e;
  --acento-600: #cf2b37;
  --acento-500: #e63946;  /* vermelho oficial */
  --acento-400: #ef5f6a;
  --acento-100: #fde4e6;
  --acento-50:  #fef2f3;

  /* ── Neutros ──────────────────────────────────────────────────────────── */
  --n-900: #0f172a;
  --n-800: #1e293b;
  --n-700: #334155;
  --n-600: #475569;
  --n-500: #64748b;
  --n-400: #94a3b8;
  --n-300: #cbd5e1;
  --n-200: #e2e8f0;
  --n-100: #eff2f7;
  --n-50:  #f7f9fc;
  --branco: #ffffff;

  /* ── Semânticos ───────────────────────────────────────────────────────── */
  --ok-600: #0f7b52;
  --ok-500: #16a06a;
  --ok-100: #dcf5e9;
  --alerta-600: #b45309;
  --alerta-500: #e08700;
  --alerta-100: #fdf0d5;
  --erro-600: #b42318;
  --erro-500: #dc2626;
  --erro-100: #fde8e6;
  --info-600: #1554b8;
  --info-500: #2563eb;
  --info-100: #dfeaff;

  /* ── Texto ────────────────────────────────────────────────────────────── */
  --txt-forte: var(--n-900);
  --txt:       var(--n-700);
  --txt-suave: var(--n-500);
  --txt-fraco: var(--n-400);

  /* ── Linhas ───────────────────────────────────────────────────────────── */
  --linha:       rgba(15, 23, 42, 0.08);
  --linha-media: rgba(15, 23, 42, 0.13);
  --linha-forte: rgba(15, 23, 42, 0.20);

  /* ── Tipografia ───────────────────────────────────────────────────────── */
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-md:  13px;
  --fs-base:14px;
  --fs-lg:  16px;
  --fs-xl:  19px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --lh-apertado: 1.2;
  --lh:          1.5;

  /* ── Espaçamento (escala de 4) ────────────────────────────────────────── */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 20px;  --e-6: 24px;  --e-8: 32px;  --e-10: 40px;

  /* ── Raios ────────────────────────────────────────────────────────────── */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-full: 999px;

  /* ── Sombras (baixa opacidade, em camadas) ────────────────────────────── */
  --s-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --s-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --s-md: 0 4px 12px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.05);
  --s-lg: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05);
  --s-xl: 0 24px 56px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.06);
  --s-foco: 0 0 0 3px rgba(30, 58, 95, 0.16);
  --s-foco-erro: 0 0 0 3px rgba(220, 38, 38, 0.16);

  /* ── Transições ───────────────────────────────────────────────────────── */
  --curva: cubic-bezier(0.2, 0.7, 0.3, 1);
  --t-rapido: 120ms var(--curva);
  --t:        180ms var(--curva);
  --t-lento:  260ms var(--curva);

  /* ── Medidas ──────────────────────────────────────────────────────────── */
  --sidebar-l: 232px;
  --sidebar-l-min: 68px;
  --topo-h: 56px;
  --campo-h: 38px;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. PONTE COM O BOOTSTRAP
   Redefinir as variáveis do Bootstrap 5 faz TODO componente dbc (botão, input,
   tabela, modal, badge, alerta) adotar o tema sem precisar tocar no Python.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --bs-font-sans-serif: var(--fonte);
  --bs-body-font-family: var(--fonte);
  --bs-body-font-size: var(--fs-base);
  --bs-body-color: var(--txt);
  --bs-body-bg: transparent;
  --bs-secondary-color: var(--txt-suave);

  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 30, 58, 95;
  --bs-danger: var(--acento-500);
  --bs-danger-rgb: 230, 57, 70;
  --bs-success: var(--ok-500);
  --bs-success-rgb: 22, 160, 106;
  --bs-warning: var(--alerta-500);
  --bs-info: var(--info-500);
  --bs-secondary: var(--n-500);

  --bs-border-color: var(--linha-media);
  --bs-border-radius: var(--r-sm);
  --bs-border-radius-sm: var(--r-xs);
  --bs-border-radius-lg: var(--r-md);
  --bs-border-radius-xl: var(--r-lg);
  --bs-border-radius-pill: var(--r-full);

  --bs-box-shadow: var(--s-md);
  --bs-box-shadow-sm: var(--s-sm);
  --bs-box-shadow-lg: var(--s-lg);

  --bs-link-color: var(--brand-600);
  --bs-link-hover-color: var(--acento-500);
}

/* ══════════════════════════════════════════════════════════════════════════
   3. BASE E TIPOGRAFIA
   ══════════════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--fonte);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

h1, h2, h3, h4, h5, h6, .h5 {
  color: var(--txt-forte);
  letter-spacing: -0.015em;
  font-weight: 700;
}

h5, .h5 { font-size: var(--fs-xl); }
h6, .h6 { font-size: var(--fs-lg); }

/* Dinheiro e datas alinham melhor com números de largura fixa */
.num-tabular,
td, th { font-variant-numeric: tabular-nums; }

small, .small { font-size: var(--fs-sm); }

/* Rótulo de seção reutilizável (MAIÚSCULO discreto) */
.rotulo-seco {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-fraco);
}

/* ══════════════════════════════════════════════════════════════════════════
   4. SUPERFÍCIES
   ══════════════════════════════════════════════════════════════════════════ */
.app-fundo-vidro {
  /* Profundidade por variação de tonalidade, sem gradiente chamativo */
  background:
    radial-gradient(1100px 620px at 8% -5%, rgba(30, 58, 95, 0.07), transparent 60%),
    radial-gradient(900px 560px at 100% 100%, rgba(230, 57, 70, 0.045), transparent 62%),
    var(--n-50);
  background-attachment: fixed;
}

.card {
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  box-shadow: var(--s-sm);
  background: var(--branco);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--linha);
  padding: var(--e-3) var(--e-4);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--txt-forte);
}

.card-body { padding: var(--e-4); }

/* Containers que abrigam dropdown NÃO podem recortar o menu.
   Precisa valer para o .modal-content E para o .modal-body: se qualquer um
   dos dois recortar, o menu do seletor abre cortado e o clique na opção cai
   fora — dando a impressão de que a escolha "não fixa". */
.glass-form,
.modal-content.glass,
.modal-content.glass > .modal-body { overflow: visible !important; }
.glass-form::after,
.modal-content.glass::after { display: none !important; }

/* Modal com rolagem própria é exceção: aí o corpo precisa rolar mesmo, e o
   menu é posicionado dentro dele. */
.modal-dialog-scrollable .modal-content.glass > .modal-body {
  overflow-y: auto !important;
}

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

/* ══════════════════════════════════════════════════════════════════════════
   5. BOTÕES
   Hierarquia: primário (vermelho, 1 por tela) > secundário (contorno marinho)
   > neutro (fantasma) > destrutivo (vermelho contorno).
   ══════════════════════════════════════════════════════════════════════════ */
.btn {
  --bs-btn-padding-y: 0.44rem;
  --bs-btn-padding-x: 0.95rem;
  --bs-btn-font-size: var(--fs-md);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--r-sm);
  letter-spacing: 0.005em;
  transition: background-color var(--t-rapido), border-color var(--t-rapido),
              color var(--t-rapido), box-shadow var(--t), transform var(--t-rapido);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
}

.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { box-shadow: var(--s-foco); outline: none; }

.btn-sm {
  --bs-btn-padding-y: 0.3rem;
  --bs-btn-padding-x: 0.7rem;
  --bs-btn-font-size: var(--fs-sm);
  --bs-btn-border-radius: var(--r-xs);
}

.btn-lg {
  --bs-btn-padding-y: 0.65rem;
  --bs-btn-padding-x: 1.3rem;
  --bs-btn-font-size: var(--fs-lg);
  --bs-btn-border-radius: var(--r-sm);
}

/* Primário — a ação principal da tela */
.btn-danger {
  --bs-btn-bg: var(--acento-500);
  --bs-btn-border-color: var(--acento-500);
  --bs-btn-hover-bg: var(--acento-600);
  --bs-btn-hover-border-color: var(--acento-600);
  --bs-btn-active-bg: var(--acento-700);
  --bs-btn-active-border-color: var(--acento-700);
  box-shadow: 0 1px 2px rgba(180, 35, 46, 0.18);
}
.btn-danger:hover { box-shadow: 0 4px 12px rgba(230, 57, 70, 0.26); }

/* Secundário */
.btn-primary {
  --bs-btn-bg: var(--brand-600);
  --bs-btn-border-color: var(--brand-600);
  --bs-btn-hover-bg: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-700);
}
.btn-primary:hover { box-shadow: 0 4px 12px rgba(30, 58, 95, 0.22); }

.btn-outline-primary {
  --bs-btn-color: var(--brand-600);
  --bs-btn-border-color: var(--linha-forte);
  --bs-btn-hover-bg: var(--brand-50);
  --bs-btn-hover-color: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-300);
  --bs-btn-active-bg: var(--brand-100);
  --bs-btn-active-color: var(--brand-700);
  --bs-btn-active-border-color: var(--brand-400);
}

/* Neutro / fantasma */
.btn-outline-secondary {
  --bs-btn-color: var(--txt);
  --bs-btn-border-color: var(--linha-media);
  --bs-btn-hover-bg: var(--n-100);
  --bs-btn-hover-color: var(--txt-forte);
  --bs-btn-hover-border-color: var(--linha-forte);
}

/* Destrutivo em contorno */
.btn-outline-danger {
  --bs-btn-color: var(--erro-600);
  --bs-btn-border-color: rgba(220, 38, 38, 0.32);
  --bs-btn-hover-bg: var(--erro-100);
  --bs-btn-hover-color: var(--erro-600);
  --bs-btn-hover-border-color: var(--erro-500);
}

.btn-outline-success {
  --bs-btn-color: var(--ok-600);
  --bs-btn-border-color: rgba(22, 160, 106, 0.32);
  --bs-btn-hover-bg: var(--ok-100);
  --bs-btn-hover-color: var(--ok-600);
  --bs-btn-hover-border-color: var(--ok-500);
}

.btn-success {
  --bs-btn-bg: var(--ok-500);
  --bs-btn-border-color: var(--ok-500);
  --bs-btn-hover-bg: var(--ok-600);
  --bs-btn-hover-border-color: var(--ok-600);
}

.btn-warning {
  --bs-btn-bg: var(--alerta-500);
  --bs-btn-border-color: var(--alerta-500);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--alerta-600);
  --bs-btn-hover-border-color: var(--alerta-600);
}

.btn:disabled, .btn.disabled {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}

/* Botão só de ícone: quadrado e confortável de clicar */
.btn-icone {
  width: 32px; height: 32px;
  padding: 0 !important;
  border-radius: var(--r-xs);
}

/* Grupo de ações por linha de tabela */
.acoes-linha { display: inline-flex; gap: var(--e-1); }

/* Estado carregando */
.btn-carregando { position: relative; color: transparent !important; pointer-events: none; }
.btn-carregando::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--branco);
  animation: girar 0.6s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.btn-group > .btn { border-radius: var(--r-xs); }
.btn-group > .btn:not(:first-child) { margin-left: -1px; }

/* ══════════════════════════════════════════════════════════════════════════
   6. CAMPOS
   ══════════════════════════════════════════════════════════════════════════ */
.form-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--txt);
  margin-bottom: var(--e-1);
  letter-spacing: 0.005em;
}

.form-control,
.form-select {
  min-height: var(--campo-h);
  padding: 0.42rem 0.7rem;
  font-size: var(--fs-md);
  color: var(--txt-forte);
  background-color: var(--branco);
  border: 1px solid var(--linha-media);
  border-radius: var(--r-sm);
  box-shadow: var(--s-xs);
  transition: border-color var(--t-rapido), box-shadow var(--t), background-color var(--t-rapido);
}

.form-control::placeholder { color: var(--txt-fraco); }

.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) { border-color: var(--linha-forte); }

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-400);
  box-shadow: var(--s-foco);
  background-color: var(--branco);
}

/* Preenchido: fica levemente mais firme que o vazio */
.form-control:not(:placeholder-shown) { border-color: var(--linha-forte); }

.form-control:disabled,
.form-select:disabled {
  background-color: var(--n-100);
  color: var(--txt-fraco);
  border-color: var(--linha);
  cursor: not-allowed;
  box-shadow: none;
}

.form-control.is-invalid, .is-invalid > .form-control {
  border-color: var(--erro-500);
}
.form-control.is-invalid:focus { box-shadow: var(--s-foco-erro); }
.form-control.is-valid { border-color: var(--ok-500); }

textarea.form-control { min-height: 72px; line-height: 1.5; resize: vertical; }

.form-text, .texto-auxiliar {
  font-size: var(--fs-xs);
  color: var(--txt-suave);
  margin-top: var(--e-1);
}

/* Mensagem de validação */
.msg-erro, .text-danger {
  font-size: var(--fs-sm);
  color: var(--erro-600) !important;
}
.msg-erro:not(:empty) {
  display: flex; align-items: flex-start; gap: 0.4em;
  padding: var(--e-2) var(--e-3);
  background: var(--erro-100);
  border-radius: var(--r-xs);
  border-left: 3px solid var(--erro-500);
  margin-top: var(--e-2);
}

/* Ícone nativo do date/color: ganha a cor do tema */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
  transition: opacity var(--t-rapido);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 0.9; }

/* Radio / checkbox */
.form-check-input {
  border-color: var(--linha-forte);
  transition: background-color var(--t-rapido), border-color var(--t-rapido);
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
}
.form-check-input:focus-visible { box-shadow: var(--s-foco); }
.form-check-label { font-size: var(--fs-md); cursor: pointer; }

/* Campo de busca com lupa embutida */
.campo-busca { position: relative; }
.campo-busca .bi-search {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--txt-fraco); font-size: var(--fs-md); pointer-events: none; z-index: 3;
}
.campo-busca .form-control { padding-left: 32px; }

/* ══════════════════════════════════════════════════════════════════════════
   7. DROPDOWNS — dcc.Dropdown no espírito do Google Sheets
   ══════════════════════════════════════════════════════════════════════════ */
.Select, .dash-dropdown { font-size: var(--fs-md); }

.Select-control {
  min-height: var(--campo-h) !important;
  height: auto !important;
  border: 1px solid var(--linha-media) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--s-xs);
  background: var(--branco) !important;
  transition: border-color var(--t-rapido), box-shadow var(--t);
  cursor: pointer;
}

.Select:hover .Select-control { border-color: var(--linha-forte) !important; }

.Select.is-focused:not(.is-open) > .Select-control,
.Select.is-open > .Select-control {
  border-color: var(--brand-400) !important;
  box-shadow: var(--s-foco) !important;
}

.Select-placeholder,
.Select--single > .Select-control .Select-value {
  line-height: calc(var(--campo-h) - 2px) !important;
  padding-left: 11px !important;
  padding-right: 32px !important;
}
.Select-placeholder { color: var(--txt-fraco) !important; }
.Select-value-label { color: var(--txt-forte) !important; font-weight: 500; }

.Select-input { height: calc(var(--campo-h) - 2px) !important; padding-left: 11px !important; }
.Select-input > input { padding: 0 !important; line-height: 1.4; color: var(--txt-forte); }

.Select-arrow-zone { padding-right: 10px !important; }
.Select-arrow {
  border-color: var(--txt-suave) transparent transparent !important;
  border-width: 5px 4px 0 !important;
  transition: transform var(--t);
}
.is-open .Select-arrow { transform: rotate(180deg); }

.Select-clear-zone {
  color: var(--txt-fraco) !important;
  transition: color var(--t-rapido);
  padding-right: 4px;
}
.Select-clear-zone:hover { color: var(--erro-500) !important; }

/* O menu flutuante */
.Select-menu-outer {
  margin-top: 6px !important;
  border: 1px solid var(--linha-media) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--s-xl) !important;
  background: var(--branco) !important;
  overflow: hidden !important;
  max-height: 320px !important;
  /* Acima do modal do Bootstrap (1055) — senão o menu abre atrás dele */
  z-index: 1080 !important;
  animation: menuEntra var(--t) both;
}

/* O seletor aberto tem que ficar acima dos vizinhos, senão a lista fica
   por baixo do campo de data que está ao lado. */
.Select.is-open { position: relative; z-index: 1080; }

@keyframes menuEntra {
  from { opacity: 0; transform: translateY(-4px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

.Select-menu { max-height: 318px !important; padding: var(--e-1); }

.Select-option {
  padding: 9px 12px !important;
  border-radius: var(--r-xs);
  color: var(--txt) !important;
  background: transparent !important;
  transition: background-color var(--t-rapido), color var(--t-rapido);
  cursor: pointer;
}

.Select-option.is-focused {
  background: var(--brand-50) !important;
  color: var(--brand-700) !important;
}

/* Opção escolhida: marca de seleção, não só cor */
.Select-option.is-selected {
  background: var(--brand-100) !important;
  color: var(--brand-700) !important;
  font-weight: 600;
  position: relative;
  padding-right: 32px !important;
}
.Select-option.is-selected::after {
  content: "\F26E";                       /* bi-check2 */
  font-family: "bootstrap-icons";
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-base); color: var(--brand-600);
}

.Select-option.is-disabled { color: var(--txt-fraco) !important; cursor: not-allowed; }

.Select-noresults {
  padding: var(--e-4) !important;
  color: var(--txt-suave) !important;
  text-align: center;
  font-size: var(--fs-sm);
}

/* Múltipla escolha: etiquetas arredondadas */
.Select--multi .Select-value {
  display: inline-flex;
  align-items: center;
  background: var(--brand-50) !important;
  border: 1px solid var(--brand-100) !important;
  border-radius: var(--r-full) !important;
  color: var(--brand-700) !important;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin: 3px 3px 0 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
.Select--multi .Select-value-icon {
  border: none !important;
  padding: 2px 7px !important;
  color: var(--brand-400) !important;
  order: 2;
  transition: background-color var(--t-rapido), color var(--t-rapido);
}
.Select--multi .Select-value-icon:hover {
  background: var(--acento-100) !important;
  color: var(--acento-600) !important;
}
.Select--multi .Select-value-label { padding: 2px 2px 2px 10px !important; }

/* Menu do dbc.DropdownMenu (ações de 3 pontinhos) */
.dropdown-menu {
  border: 1px solid var(--linha-media);
  border-radius: var(--r-md);
  box-shadow: var(--s-xl);
  padding: var(--e-1);
  font-size: var(--fs-md);
  animation: menuEntra var(--t) both;
}
.dropdown-item {
  border-radius: var(--r-xs);
  padding: 8px 12px;
  color: var(--txt);
  display: flex; align-items: center; gap: 0.5em;
  transition: background-color var(--t-rapido), color var(--t-rapido);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--brand-50); color: var(--brand-700);
}
.dropdown-item.item-destrutivo:hover { background: var(--erro-100); color: var(--erro-600); }
.dropdown-divider { border-color: var(--linha); margin: var(--e-1) 0; }

/* ══════════════════════════════════════════════════════════════════════════
   8. TABELAS
   ══════════════════════════════════════════════════════════════════════════ */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--txt);
  font-size: var(--fs-md);
  margin-bottom: 0;
  border-color: var(--linha);
}

.table > thead > tr > th {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-suave);
  background: transparent;
  border-bottom: 1px solid var(--linha-media) !important;
  padding: var(--e-3) var(--e-4);
  white-space: nowrap;
  vertical-align: middle;
}

.table > tbody > tr > td {
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
  color: var(--txt);
}

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

.table.table-hover > tbody > tr {
  transition: background-color var(--t-rapido);
}
.table.table-hover > tbody > tr:hover > * {
  background: var(--brand-50);
  --bs-table-accent-bg: transparent;
}

/* Sem bordas verticais: linhas horizontais discretas leem melhor */
.table-bordered > :not(caption) > * > * { border-width: 0 0 1px 0; }
.table-bordered > :not(caption) > * { border-width: 0; }

/* Tabelas cruas (html.Table) recebem o mesmo tratamento */
table:not(.table) > thead > tr > th {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-suave);
  border-bottom: 1px solid var(--linha-media);
  padding: var(--e-3) var(--e-4);
}
table:not(.table) > tbody > tr { transition: background-color var(--t-rapido); }
table:not(.table) > tbody > tr:hover { background: var(--brand-50); }

/* Rodapé de tabela com paginação */
.tabela-rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3); flex-wrap: wrap;
  padding: var(--e-3) var(--e-4);
  border-top: 1px solid var(--linha);
  font-size: var(--fs-sm);
  color: var(--txt-suave);
}

.pagina-btns { display: inline-flex; gap: var(--e-1); align-items: center; }
.pagina-btn {
  min-width: 32px; height: 32px;
  border: 1px solid var(--linha-media);
  background: var(--branco);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm); font-weight: 600; color: var(--txt);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color var(--t-rapido), border-color var(--t-rapido), color var(--t-rapido);
}
.pagina-btn:hover:not(:disabled) { background: var(--brand-50); border-color: var(--brand-300); }
.pagina-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pagina-btn.ativa {
  background: var(--brand-600); border-color: var(--brand-600); color: var(--branco);
}

/* ══════════════════════════════════════════════════════════════════════════
   9. BADGES / CHIPS
   ══════════════════════════════════════════════════════════════════════════ */
.badge {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.34em 0.72em;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 0.35em;
  vertical-align: middle;
}

/* Tom suave em vez de cor cheia — mais elegante e melhor contraste */
.badge.bg-success { background: var(--ok-100) !important;     color: var(--ok-600) !important;     border-color: rgba(22,160,106,.22); }
.badge.bg-danger  { background: var(--erro-100) !important;   color: var(--erro-600) !important;   border-color: rgba(220,38,38,.22); }
.badge.bg-warning { background: var(--alerta-100) !important; color: var(--alerta-600) !important; border-color: rgba(224,135,0,.26); }
.badge.bg-secondary { background: var(--n-100) !important;    color: var(--n-600) !important;      border-color: var(--linha-media); }
.badge.bg-primary { background: var(--info-100) !important;   color: var(--info-600) !important;   border-color: rgba(37,99,235,.2); }
.badge.bg-dark    { background: var(--brand-100) !important;  color: var(--brand-700) !important;  border-color: rgba(30,58,95,.2); }

/* Bolinha antes do texto: estado não depende só de cor */
.badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto; opacity: 0.75;
}
.badge.sem-ponto::before { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   10. MODAIS
   ══════════════════════════════════════════════════════════════════════════ */
.modal-content {
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--s-xl);
}
.modal-header {
  border-bottom: 1px solid var(--linha);
  padding: var(--e-4) var(--e-5);
}
.modal-title { font-size: var(--fs-lg); font-weight: 700; color: var(--txt-forte); }
.modal-body { padding: var(--e-5); }
.modal-footer {
  border-top: 1px solid var(--linha);
  padding: var(--e-3) var(--e-5);
  gap: var(--e-2);
}
.modal-backdrop.show { opacity: 0.45; backdrop-filter: blur(2px); }
.modal.fade .modal-dialog { transition: transform var(--t-lento), opacity var(--t-lento); }

.alert {
  border-radius: var(--r-sm);
  border: 1px solid var(--linha-media);
  font-size: var(--fs-md);
  padding: var(--e-3) var(--e-4);
}
.alert-info    { background: var(--info-100);   color: var(--info-600);   border-color: rgba(37,99,235,.2); }
.alert-success { background: var(--ok-100);     color: var(--ok-600);     border-color: rgba(22,160,106,.22); }
.alert-warning { background: var(--alerta-100); color: var(--alerta-600); border-color: rgba(224,135,0,.26); }
.alert-danger  { background: var(--erro-100);   color: var(--erro-600);   border-color: rgba(220,38,38,.22); }
.alert-light   { background: var(--n-50);       color: var(--txt-suave);  border-color: var(--linha); }

/* ══════════════════════════════════════════════════════════════════════════
   11. NAVEGAÇÃO
   ══════════════════════════════════════════════════════════════════════════ */
.topo-app {
  height: var(--topo-h);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid var(--linha);
  box-shadow: var(--s-xs);
}

.topo-usuario {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--fs-sm); color: var(--txt);
}

/* Menu da conta: o nome do usuário é o gatilho, sem cara de botão */
.btn-conta {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-full) !important;
  padding: 4px 10px 4px 4px !important;
  color: var(--txt) !important;
  box-shadow: none !important;
  transition: background-color var(--t-rapido), border-color var(--t-rapido);
}
.btn-conta:hover { background: var(--n-100) !important; border-color: var(--linha) !important; }
.btn-conta::after { border-top-color: var(--txt-fraco); margin-left: 0.5em; }
#menu-conta .dropdown-menu { min-width: 220px; }

.chip-versao {
  font-size: var(--fs-2xs) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--brand-50) !important;
  color: var(--brand-600) !important;
  border: 1px solid var(--brand-100);
  border-radius: var(--r-full);
  padding: 0.22em 0.6em;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
/* O posicionamento mora aqui, não em style inline no Python: é o que permite
   a mesma barra virar gaveta no celular. */
.sidebar-area {
  position: fixed;
  top: var(--topo-h); left: 0; bottom: 0;
  z-index: 150;
}

.sidebar {
  height: 100%;
  width: var(--sidebar-l);
  background: var(--brand-900);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  transition: width var(--t-lento);
  display: flex; flex-direction: column;
}

.sidebar-recolhida { width: var(--sidebar-l-min); }

.sidebar-marca {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-4) var(--e-4) var(--e-3);
  overflow: hidden;
}
.sidebar-recolhida .sidebar-marca { padding: var(--e-4) 0; justify-content: center; }

.sidebar-link {
  display: flex; align-items: center; gap: 0.7em;
  margin: 2px var(--e-2);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--fs-md);
  font-weight: 500;
  white-space: nowrap;
  position: relative;
  transition: background-color var(--t-rapido), color var(--t-rapido);
}

.sidebar-link i { font-size: var(--fs-lg); flex: 0 0 auto; width: 20px; text-align: center; }

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.95);
}

.sidebar-link.ativo {
  background: rgba(255, 255, 255, 0.11);
  color: var(--branco);
  font-weight: 600;
}
/* Barra vermelha marca a seção ativa (não é só cor) */
.sidebar-link.ativo::before {
  content: ""; position: absolute; left: -var(--e-2); left: -8px;
  top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--acento-500);
  border-radius: 0 var(--r-full) var(--r-full) 0;
}

.sidebar-recolhida .sidebar-link { justify-content: center; padding: 10px 0; }
.sidebar-recolhida .sidebar-rotulo,
.sidebar-recolhida .sidebar-titulo-menu { display: none; }

.sidebar-titulo-menu {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.3);
  padding: var(--e-4) var(--e-4) var(--e-2);
  text-transform: uppercase;
}

.sidebar-sair { color: var(--acento-400) !important; cursor: pointer; }
.sidebar-sair:hover { background: rgba(230, 57, 70, 0.14) !important; color: var(--acento-400) !important; }

.btn-recolher {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.7);
  border-radius: var(--r-xs);
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color var(--t-rapido), color var(--t-rapido);
}
.btn-recolher:hover { background: rgba(255, 255, 255, 0.14); color: var(--branco); }

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.trilha {
  display: flex; align-items: center; gap: 0.45em;
  font-size: var(--fs-sm); color: var(--txt-fraco);
  margin-bottom: var(--e-3);
}
.trilha a { color: var(--txt-suave); text-decoration: none; font-weight: 500; transition: color var(--t-rapido); }
.trilha a:hover { color: var(--brand-600); }

/* ── Cabeçalho de página ─────────────────────────────────────────────────── */
.pagina-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
  margin-bottom: var(--e-5);
}
.pagina-titulo {
  font-size: var(--fs-2xl); font-weight: 700; color: var(--txt-forte);
  letter-spacing: -0.02em; margin: 0;
  display: flex; align-items: center; gap: 0.5em;
}
.pagina-titulo i { color: var(--acento-500); font-size: 0.85em; }
.pagina-sub { font-size: var(--fs-md); color: var(--txt-suave); margin: var(--e-1) 0 0; }
.pagina-acoes { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }

/* ── Abas do perfil ──────────────────────────────────────────────────────── */
.perfil-tab-btn {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--txt-suave) !important;
  font-size: var(--fs-md) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  padding: var(--e-3) var(--e-5) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color var(--t-rapido), border-color var(--t-rapido), background-color var(--t-rapido);
}
.perfil-tab-btn:hover { color: var(--txt-forte) !important; background: var(--n-100) !important; filter: none; }
.perfil-tab-btn.aba-ativa {
  color: var(--brand-700) !important;
  border-bottom-color: var(--acento-500) !important;
  background: transparent !important;
}
#perfil-tabs-topo {
  background: transparent !important;
  border-bottom: 1px solid var(--linha) !important;
  border-radius: 0 !important;
  gap: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   11b. COMPROVANTES — área de foto e grade
   ══════════════════════════════════════════════════════════════════════════ */

/* Alvo grande e óbvio: no celular é o que abre a câmera */
.area-foto {
  display: block;
  border: 2px dashed var(--linha-forte);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.5);
  padding: var(--e-8) var(--e-5);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t), background-color var(--t), transform var(--t-rapido);
}

.area-foto:hover,
.area-foto:focus-within {
  border-color: var(--acento-400);
  background: var(--acento-50);
}
.area-foto:active { transform: scale(0.995); }

.area-foto-icone {
  width: 58px; height: 58px; margin: 0 auto var(--e-3);
  border-radius: var(--r-lg);
  display: grid; place-items: center;
  background: var(--acento-50);
  border: 1px solid var(--acento-100);
  color: var(--acento-500);
  font-size: 26px;
}
.area-foto:hover .area-foto-icone { background: var(--branco); }

.area-foto-titulo {
  font-size: var(--fs-lg); font-weight: 700; color: var(--txt-forte);
  margin-bottom: var(--e-1);
}
.area-foto-texto {
  font-size: var(--fs-md); color: var(--txt-suave);
  max-width: 420px; margin: 0 auto;
}

/* Cartão da grade */
.comprov-card { display: flex; flex-direction: column; overflow: hidden; }

.comprov-mini-wrap {
  cursor: zoom-in;
  background: var(--n-100);
  border-bottom: 1px solid var(--linha);
  overflow: hidden;
  position: relative;
}
.comprov-mini-wrap::after {
  content: "\F52D";                       /* bi-zoom-in */
  font-family: "bootstrap-icons";
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(15, 23, 42, 0.55);
  color: #fff; font-size: 13px;
  opacity: 0; transition: opacity var(--t);
}
.comprov-mini-wrap:hover::after { opacity: 1; }

.comprov-mini {
  display: block; width: 100%; height: 180px;
  object-fit: cover;
  transition: transform var(--t-lento);
}
.comprov-mini-wrap:hover .comprov-mini { transform: scale(1.03); }

.comprov-mini-vazia {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--txt-fraco);
  background: var(--n-100);
}

/* Passo-a-passo do fluxo, para ninguém ficar sem saber o que fazer */
.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e-4);
}
.passo { display: flex; gap: var(--e-3); align-items: flex-start; }
.passo-num {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--acento-500); color: #fff;
  font-size: var(--fs-sm); font-weight: 700;
}
.passo strong { font-size: var(--fs-md); color: var(--txt-forte); }
.passo-texto { font-size: var(--fs-sm); color: var(--txt-suave); margin-top: 2px; }

/* Caixinha para marcar a foto e mandar frente e verso na mesma baixa */
.comprov-check-wrap {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--linha-media);
  border-radius: var(--r-xs);
  padding: 4px 6px;
  box-shadow: var(--s-sm);
}
.comprov-check input[type="checkbox"] {
  width: 18px; height: 18px; margin: 0; cursor: pointer;
  accent-color: var(--ok-500);
}
.comprov-check label { margin: 0; display: block; cursor: pointer; }

@media (max-width: 575.98px) {
  .area-foto { padding: var(--e-6) var(--e-4); }
  .area-foto-titulo { font-size: var(--fs-base); }
  .comprov-mini { height: 200px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   12. ESTADOS
   ══════════════════════════════════════════════════════════════════════════ */

/* Vazio */
.estado-vazio {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--e-10) var(--e-5);
  color: var(--txt-suave);
}
.estado-vazio-icone {
  width: 56px; height: 56px; border-radius: var(--r-lg);
  display: grid; place-items: center;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--brand-400);
  font-size: 24px;
  margin-bottom: var(--e-4);
}
.estado-vazio-titulo { font-size: var(--fs-lg); font-weight: 600; color: var(--txt-forte); margin-bottom: var(--e-1); }
.estado-vazio-texto { font-size: var(--fs-md); max-width: 380px; margin-bottom: var(--e-4); }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--n-100) 25%, var(--n-200) 37%, var(--n-100) 63%);
  background-size: 400% 100%;
  animation: skeleton 1.3s ease-in-out infinite;
  border-radius: var(--r-xs);
}
@keyframes skeleton {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.skeleton-linha { height: 14px; margin-bottom: 10px; }
.skeleton-tabela { padding: var(--e-4); }
.skeleton-tabela .skeleton-linha:nth-child(1) { width: 100%; height: 18px; }
.skeleton-tabela .skeleton-linha:nth-child(even) { width: 92%; }
.skeleton-tabela .skeleton-linha:nth-child(odd)  { width: 78%; }

/* Spinner do dcc.Loading */
._dash-loading-callback,
.dash-spinner { color: var(--brand-500) !important; }

/* Foco visível para teclado — nunca remover */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
a:focus-visible, .sidebar-link:focus-visible { outline-offset: -2px; }

/* ══════════════════════════════════════════════════════════════════════════
   13. ROLAGEM
   ══════════════════════════════════════════════════════════════════════════ */
* { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--n-300);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--n-400); background-clip: content-box; }

/* ══════════════════════════════════════════════════════════════════════════
   14. RESPONSIVO E ACESSIBILIDADE
   ══════════════════════════════════════════════════════════════════════════ */

/* Nada pode estourar a largura da tela */
html, body { overflow-x: hidden; max-width: 100%; }

.conteudo-app {
  margin-left: var(--sidebar-l);
  margin-top: var(--topo-h);
  padding: var(--e-6);
  min-height: calc(100vh - var(--topo-h));
  transition: margin-left var(--t-lento);
}
.conteudo-app.com-sidebar-recolhida { margin-left: var(--sidebar-l-min); }

@media (max-width: 991.98px) {
  :root { --sidebar-l: 68px; }
  .sidebar-rotulo, .sidebar-titulo-menu { display: none; }
  .sidebar-link { justify-content: center; padding: 10px 0; }
  .sidebar-marca { padding: var(--e-4) 0; justify-content: center; }
  .conteudo-app { padding: var(--e-4); }
  .pagina-titulo { font-size: var(--fs-xl); }
}

@media (max-width: 767.98px) {
  .conteudo-app { padding: var(--e-3); }
  .card-body { padding: var(--e-3); }
  .modal-body { padding: var(--e-4); }
  .pagina-topo { flex-direction: column; align-items: stretch; }
  .pagina-acoes > * { flex: 1 1 auto; }
  .table > thead > tr > th,
  .table > tbody > tr > td { padding: var(--e-2) var(--e-3); }
  /* Alvos de toque confortáveis */
  .btn-sm { --bs-btn-padding-y: 0.42rem; --bs-btn-padding-x: 0.8rem; }
  .btn-icone { width: 36px; height: 36px; }
}

/* Respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .Select-menu-outer, .dropdown-menu { animation: none; }
}

/* Mais contraste para quem pede */
@media (prefers-contrast: more) {
  :root {
    --linha: rgba(15, 23, 42, 0.18);
    --linha-media: rgba(15, 23, 42, 0.30);
    --txt-suave: var(--n-600);
    --txt-fraco: var(--n-500);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   11c. FEEDBACK — chip flutuante, modal e cartões
   ══════════════════════════════════════════════════════════════════════════ */

/* Chip: fica acima de tudo, menos dos modais (1055 do Bootstrap) */
.fb-chip {
  position: fixed;
  right: var(--e-5);
  bottom: var(--e-5);
  z-index: 1040;
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: 12px 18px;
  border: 1px solid var(--acento-500);
  border-radius: 999px;
  background: var(--acento-500);
  color: #fff;
  font-size: var(--fs-md); font-weight: 600;
  box-shadow: var(--s-lg);
  cursor: pointer;
  transition: transform var(--t-rapido), box-shadow var(--t), background-color var(--t);
}
.fb-chip:hover {
  background: var(--acento-600);
  box-shadow: var(--s-xl);
  transform: translateY(-1px);
}
.fb-chip:active { transform: translateY(0) scale(0.98); }
.fb-chip:focus-visible { outline: 3px solid var(--acento-100); outline-offset: 2px; }
.fb-chip i { font-size: 17px; }

/* Aviso estilo iOS: bolinha vermelha com o número de respostas não lidas */
.fb-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 21px; height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--acento-600);
  border: 2px solid var(--acento-500);
  font-size: 11px; font-weight: 800; line-height: 17px;
  text-align: center;
  box-shadow: var(--s-sm);
}

/* No celular o rótulo sai e sobra só o ícone — não cobre a tela */
@media (max-width: 575.98px) {
  .fb-chip { right: var(--e-4); bottom: var(--e-4); padding: 13px 15px; }
  .fb-chip-rotulo { display: none; }
}

/* Abas do modal */
.fb-tabs {
  display: flex; gap: var(--e-2);
  border-bottom: 1px solid var(--linha);
  margin-bottom: var(--e-5);
}
.fb-tab-btn {
  border: 0; background: transparent;
  padding: 10px var(--e-4);
  font-size: var(--fs-md); font-weight: 600;
  color: var(--txt-suave);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.fb-tab-btn:hover { color: var(--txt-forte); }
.fb-tab-btn.ativo { color: var(--acento-500); border-bottom-color: var(--acento-500); }
.fb-tab-btn:focus-visible { outline: 2px solid var(--acento-100); outline-offset: 2px; }

/* Área de print dentro do modal: mais baixa que a de comprovante */
.area-foto-compacta { padding: var(--e-5) var(--e-4); }
.area-foto-compacta .area-foto-icone {
  width: 44px; height: 44px; font-size: 20px; margin-bottom: var(--e-2);
}
.area-foto-compacta .area-foto-titulo { font-size: var(--fs-md); }

/* Cartões */
.fb-cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--linha-media);
  border-radius: var(--r-lg);
  padding: var(--e-4) var(--e-5);
  margin-bottom: var(--e-4);
  box-shadow: var(--s-xs);
}
.fb-cartao-warning   { border-left-color: var(--alerta-500); }
.fb-cartao-info      { border-left-color: var(--info-500); }
.fb-cartao-success   { border-left-color: var(--ok-500); }
.fb-cartao-secondary { border-left-color: var(--n-400); }

.fb-cartao-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3); flex-wrap: wrap;
  margin-bottom: var(--e-3);
}
.fb-num { font-size: var(--fs-sm); font-weight: 800; color: var(--txt-fraco); }
.fb-selo { font-size: 11px; font-weight: 700; }
.fb-quando { font-size: var(--fs-xs); color: var(--txt-fraco); }

.fb-descricao {
  font-size: var(--fs-md); color: var(--txt-forte);
  white-space: pre-wrap;          /* preserva as quebras que ela digitou */
  word-break: break-word;
}
.fb-tela {
  font-size: var(--fs-xs); color: var(--txt-fraco);
  margin-top: var(--e-2);
}
.fb-tela code { font-size: var(--fs-xs); }

.fb-print-mini {
  display: block;
  max-width: 100%; max-height: 220px;
  margin-top: var(--e-3);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  object-fit: contain;
}
.fb-print-clicavel { cursor: zoom-in; transition: box-shadow var(--t); }
.fb-print-clicavel:hover { box-shadow: var(--s-md); }

/* A resposta é o que ela abre o modal para ler — destaque próprio */
.fb-resposta {
  margin-top: var(--e-4);
  padding: var(--e-3) var(--e-4);
  background: #f1fbf6;
  border: 1px solid var(--ok-100);
  border-radius: var(--r-md);
}
.fb-resposta-titulo {
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--ok-600);
  margin-bottom: var(--e-1);
}
.fb-resposta-texto {
  font-size: var(--fs-md); color: var(--txt-forte);
  white-space: pre-wrap; word-break: break-word;
}

/* Formulário de resposta recolhido */
.fb-detalhes { margin-top: var(--e-4); border-top: 1px solid var(--linha); }
.fb-summary {
  cursor: pointer; list-style: none;
  padding-top: var(--e-3);
  font-size: var(--fs-sm); font-weight: 600; color: var(--acento-500);
}
.fb-summary::-webkit-details-marker { display: none; }
.fb-summary:hover { color: var(--acento-600); }

/* Métricas da aba */
.fb-metrica {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-4);
  border-radius: var(--r-lg);
  height: 100%;
}
.fb-metrica-icone {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  font-size: 20px;
}
.fb-metrica-warning   { background: var(--alerta-100); color: var(--alerta-600); }
.fb-metrica-success   { background: var(--ok-100); color: var(--ok-600); }
.fb-metrica-danger    { background: var(--acento-50); color: var(--acento-600); }
.fb-metrica-secondary { background: var(--n-100); color: var(--n-600); }
.fb-metrica-valor {
  font-size: var(--fs-xl); font-weight: 800; line-height: 1.1;
  color: var(--txt-forte);
}
.fb-metrica-rotulo { font-size: var(--fs-xs); color: var(--txt-suave); }

/* Contador de abertos no menu lateral */
.sidebar-contador {
  margin-left: auto;
  font-size: 10px; font-weight: 800;
  padding: 3px 6px;
}
/* Menu recolhido só mostra ícone: o número viraria borrão */
.sidebar-recolhida .sidebar-contador { display: none; }


/* ══════════════════════════════════════════════════════════════════════════
   11d. ESCOLHA EM BOTÕES — no lugar de menu suspenso
   ══════════════════════════════════════════════════════════════════════════
   Menu de 4 opções dentro de modal perdia o clique quando a página deslocava
   entre apertar e soltar o mouse: a escolha simplesmente não fixava. Com os
   quatro à vista não há menu para recortar nem para deslocar. */

.escolha-botoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2);
}

/* Cada opção vem embrulhada num .form-check do Bootstrap, com recuo próprio
   para a bolinha. O invólucro precisa sumir para o rótulo virar o botão. */
.escolha-botoes > * {
  margin: 0;
  padding: 0;
  min-height: 0;
  display: block;
}

.escolha-botoes .escolha-opcao {
  display: flex; align-items: center;
  width: 100%; height: 100%;
  margin: 0;
  padding: 11px var(--e-3);
  min-height: 46px;                 /* alvo confortável para o dedo */
  border: 1px solid var(--linha-media);
  border-radius: var(--r-md);
  background: var(--branco);
  color: var(--txt);
  font-size: var(--fs-md); font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--t-rapido), background-color var(--t-rapido),
              color var(--t-rapido), box-shadow var(--t-rapido);
}
.escolha-botoes .escolha-opcao:hover {
  border-color: var(--acento-400);
  background: var(--acento-50);
}
.escolha-botoes .escolha-opcao i { font-size: var(--fs-lg); }

/* A bolinha nativa sai de cena, mas continua no DOM: é ela que o teclado
   e o leitor de tela usam. */
.escolha-botoes .escolha-radio {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}

/* Escolhido: cor E peso E borda — não só cor, para quem não distingue bem */
.escolha-botoes .escolha-radio:checked + .escolha-opcao,
.escolha-botoes .escolha-opcao:has(.escolha-radio:checked) {
  border-color: var(--acento-500);
  background: var(--acento-50);
  color: var(--acento-700);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--acento-500);
}

/* Combinação que não existe: apagada, mas ainda visível (a pessoa entende que
   existe e está indisponível, em vez de a opção simplesmente desaparecer) */
.escolha-radio:disabled + .escolha-opcao,
.escolha-opcao:has(.escolha-radio:disabled) {
  opacity: 0.42;
  cursor: not-allowed;
  background: var(--n-50);
}

/* Foco pelo teclado precisa aparecer no rótulo, já que a bolinha está oculta */
.escolha-botoes .escolha-radio:focus-visible + .escolha-opcao,
.escolha-botoes .escolha-opcao:has(.escolha-radio:focus-visible) {
  outline: 2px solid var(--acento-400);
  outline-offset: 2px;
}

/* Celular: uma embaixo da outra, linha inteira para o dedo */
@media (max-width: 575.98px) {
  .escolha-botoes { grid-template-columns: 1fr; }
  .escolha-botoes .escolha-opcao { min-height: 50px; }
}

/* Listas maiores (planos) cabem em tres colunas no computador */
.escolha-col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991.98px) {
  .escolha-col-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .escolha-col-3 { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════
   14. TABLET E CELULAR
   ══════════════════════════════════════════════════════════════════════════
   Três larguras:
     > 992px  computador — menu fixo ao lado, tabela é tabela
     768–991  tablet     — menu em trilha de ícones, tabela ainda cabe
     < 768px  celular    — menu em gaveta, tabela empilhada em cartões
   ══════════════════════════════════════════════════════════════════════════ */

/* O fundo escuro da gaveta não existe fora do celular */
.sidebar-fundo { display: none; }

/* Filtros: no computador o bloco é sempre aberto e sem cabeçalho para clicar.
   No celular ele vira um bloco que se recolhe. */
@media (min-width: 768px) {
  .filtros-celular > summary { display: none; }
}

/* ── Gaveta: vale em tudo abaixo do computador ──────────────────────────────
   Antes a faixa 768–991 ficava com a trilha de ícones fixa, que num tablet em
   pé come a tela. Abaixo de 992px a barra sai do fluxo e só aparece quando
   chamada. */
@media (max-width: 991.98px) {
  .sidebar-area {
    z-index: 190;
    transform: translateX(-100%);
    transition: transform var(--t-lento);
    will-change: transform;
  }
  .sidebar-area.gaveta-aberta { transform: translateX(0); }

  /* Dentro da gaveta a barra é larga e com o nome escrito */
  .sidebar-area .sidebar,
  .sidebar-area .sidebar.sidebar-recolhida {
    width: min(82vw, 290px) !important;
    box-shadow: var(--s-xl);
  }
  .sidebar-area .sidebar-rotulo,
  .sidebar-area .sidebar-titulo-menu { display: inline !important; }
  .sidebar-area .sidebar-link {
    justify-content: flex-start !important;
    padding: 14px var(--e-4) !important;
    font-size: var(--fs-base);
  }
  .sidebar-area .sidebar-marca {
    padding: var(--e-4) !important;
    justify-content: flex-start !important;
  }
  .sidebar-area .sidebar-marca img {
    width: 100% !important; height: auto !important; max-width: 140px !important;
  }
  .sidebar-area .sidebar-contador { display: inline-block !important; }

  /* Fundo escuro: fecha ao toque */
  .sidebar-fundo {
    display: block;
    position: fixed; inset: 0;
    z-index: 180;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t);
  }
  .sidebar-area.gaveta-aberta ~ .sidebar-fundo { opacity: 1; pointer-events: auto; }

  /* Conteúdo ocupa a tela toda: a gaveta flutua por cima, não empurra */
  .conteudo-app,
  .conteudo-app.com-sidebar-recolhida { margin-left: 0 !important; }
}

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Os indicadores agora são uma grade — quem define as colunas por largura é
     .kpi-grid, no glass.css */
  .pagina-acoes { flex-wrap: wrap; }
  /* Alvo de toque: tablet também é dedo */
  .btn { min-height: 42px; }
  .btn-sm { min-height: 38px; }
  .form-control, .form-select, .Select-control { min-height: 42px; }
}

/* ── Celular ────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* Menu em gaveta: fora da tela até o botão do topo abrir */
  .sidebar-area {
    position: fixed;
    top: var(--topo-h); left: 0; bottom: 0;
    z-index: 190;
    transform: translateX(-100%);
    transition: transform var(--t-lento);
    will-change: transform;
  }
  .sidebar-area.gaveta-aberta { transform: translateX(0); }

  /* Dentro da gaveta o menu volta a ser largo e com nome escrito — a trilha
     de ícones do tablet não serve aqui, ninguém adivinha ícone no escuro. */
  .sidebar-area .sidebar,
  .sidebar-area .sidebar.sidebar-recolhida {
    width: min(82vw, 290px);
    box-shadow: var(--s-xl);
  }
  .sidebar-area .sidebar-rotulo,
  .sidebar-area .sidebar-titulo-menu { display: inline !important; }
  .sidebar-area .sidebar-link {
    justify-content: flex-start !important;
    padding: 14px var(--e-4) !important;   /* alvo de dedo */
    font-size: var(--fs-base);
  }
  .sidebar-area .sidebar-marca {
    padding: var(--e-4) !important;
    justify-content: flex-start !important;
  }
  .sidebar-area .sidebar-marca img {
    width: 100% !important; height: auto !important;
    max-width: 140px !important;
  }
  .sidebar-area .sidebar-contador { display: inline-block !important; }

  /* Fundo escuro: fecha a gaveta ao toque */
  .sidebar-fundo {
    display: block;
    position: fixed; inset: 0;
    z-index: 180;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t);
  }
  .sidebar-area.gaveta-aberta ~ .sidebar-fundo {
    opacity: 1; pointer-events: auto;
  }

  /* Conteúdo ocupa a tela toda: a gaveta flutua por cima, não empurra */
  .conteudo-app,
  .conteudo-app.com-sidebar-recolhida {
    margin-left: 0 !important;
    padding: var(--e-3);
  }

  /* ── Tabela vira cartão ────────────────────────────────────────────────
     Sete colunas não cabem em 360px. Cada linha passa a ser um cartão com
     "Rótulo: valor", e o rótulo vem do cabeçalho (data-rotulo). */
  .tabela-empilha { border: 0; }
  .tabela-empilha thead { display: none; }
  .tabela-empilha,
  .tabela-empilha tbody,
  .tabela-empilha tr,
  .tabela-empilha td { display: block; width: 100%; }

  .tabela-empilha tr {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    box-shadow: var(--s-xs);
    margin-bottom: var(--e-3);
    padding: var(--e-2) var(--e-4);
  }
  .tabela-empilha tr:hover { background: var(--branco); }

  .tabela-empilha td {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e-3);
    border: 0 !important;
    border-bottom: 1px solid var(--linha) !important;
    padding: 9px 0 !important;
    text-align: right;
    min-height: 40px;
    white-space: normal !important;
  }
  .tabela-empilha tr > td:last-child { border-bottom: 0 !important; }

  .tabela-empilha td[data-rotulo]::before {
    content: attr(data-rotulo);
    flex: 0 0 40%;
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--txt-suave);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  /* Célula de ações: os botões ficam soltos, sem rótulo competindo */
  .tabela-empilha td:has(.btn) { justify-content: flex-end; flex-wrap: wrap; }

  /* Rolagem horizontal deixa de fazer sentido depois de empilhar */
  .table-responsive { overflow-x: visible; }

  /* ── Modal ocupa a tela ───────────────────────────────────────────────
     Modal pequeno no meio da tela do celular sobra borda de todos os lados e
     o conteúdo fica num tubo estreito. */
  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    min-height: 100%;
  }
  .modal-content, .modal-content.glass {
    min-height: 100vh;
    border-radius: 0 !important;
    border-left: 0; border-right: 0;
  }
  .modal-header, .modal-footer {
    position: sticky; z-index: 5;
    background: var(--branco);
  }
  .modal-header { top: 0; }
  /* Rodapé colado embaixo: o botão de confirmar sempre ao alcance */
  .modal-footer {
    bottom: 0;
    padding-bottom: max(var(--e-4), env(safe-area-inset-bottom));
  }
  .modal-footer > .btn { flex: 1 1 auto; min-height: 46px; }

  /* ── Filtros recolhidos ──────────────────────────────────────────────── */
  .filtros-celular > summary {
    display: flex; align-items: center; gap: var(--e-2);
    list-style: none; cursor: pointer;
    min-height: 44px;
    padding: 10px var(--e-4);
    border: 1px solid var(--linha-media);
    border-radius: var(--r-md);
    background: var(--branco);
    font-size: var(--fs-md); font-weight: 600;
    color: var(--txt-forte);
  }
  .filtros-celular > summary::-webkit-details-marker { display: none; }
  .filtros-celular[open] > summary { margin-bottom: var(--e-3); }

  /* ── Alvos de toque ──────────────────────────────────────────────────── */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; --bs-btn-font-size: var(--fs-md); }
  .btn-icone { width: 42px; height: 42px; }
  .form-control, .form-select, .Select-control,
  input[type="date"] { min-height: 44px; font-size: var(--fs-base); }
  /* 16px evita o zoom automático do iOS ao focar o campo */
  .form-control, .form-select, input, textarea, select { font-size: 16px; }
  .nav-link, .dropdown-item { min-height: 42px; display: flex; align-items: center; }

  /* Paginação com alvo maior e sem quebrar em duas linhas */
  .pagina-btns { flex-wrap: wrap; gap: var(--e-1); }
  .pagina-btn { min-width: 40px; min-height: 40px; }

  /* Título e ações da página */
  .pagina-titulo { font-size: var(--fs-lg); }
  .pagina-acoes { display: flex; flex-direction: column; gap: var(--e-2); }
  .pagina-acoes > *, .pagina-acoes .btn { width: 100%; }

  /* Gráfico não pode estourar a largura */
  .js-plotly-plot, .plot-container { max-width: 100% !important; }

  /* Painel de filtro deixa de ser lateral: solta do topo (o style inline
     pede !important) e vira um bloco normal embaixo da lista */
  .filtro-lateral { position: static !important; }

  /* O chip de feedback sobe para não cobrir o rodapé do modal */
  .fb-chip { bottom: calc(var(--e-4) + env(safe-area-inset-bottom)); }
}

/* Tela muito estreita (360px e menos): rótulo em cima do valor */
@media (max-width: 400px) {
  .tabela-empilha td {
    display: block;
    text-align: left;
  }
  .tabela-empilha td[data-rotulo]::before {
    display: block;
    flex: none;
    margin-bottom: 2px;
  }
}

/* Uma opcao por linha, para escolha com explicacao embaixo do titulo */
.escolha-col-1 { grid-template-columns: 1fr; }
.escolha-opcao-alta {
  align-items: flex-start !important;
  padding: var(--e-3) var(--e-4) !important;
  text-align: left;
}
.escolha-opcao-alta .texto-auxiliar { margin-top: 2px; }