/* public/css/clinhub-ui.css — design system do ClinHub (Etapa 9).
   Fonte única de cores, raios, sombras e componentes. Trocar um token aqui muda todas as telas.
   Tema escuro = outro conjunto de variáveis (html.dark). Componentes com prefixo `ch-`. Catálogo vivo: /dev/ui. */

/* ============================================================ Tokens */
:root {
  /* Marca (logo ClinHub) */
  --ch-brand-navy: #0b1f4b;
  --ch-brand-blue: #2045fa;
  --ch-brand-sky: #1aa3f0;
  --ch-brand-mint: #3fd9b8;
  --ch-brand-gray: #b5b6bc;

  /* Papéis */
  --ch-primary: var(--ch-brand-blue);
  --ch-primary-hover: #1735d4;
  --ch-primary-soft: #e6ecff;        /* fundo do item ativo do menu, foco */
  --ch-on-primary: #ffffff;
  --ch-primary-fg: var(--ch-brand-blue); /* texto/ícone na cor principal (links, menu ativo, botão secundário) */
  --ch-success: #1e8e4e;
  --ch-success-soft: #e3f5ea;
  --ch-warning: #c2410c;
  --ch-warning-soft: #fff1e6;
  --ch-danger: #dc2626;
  --ch-danger-hover: #b91c1c;
  --ch-danger-soft: #fdecec;
  --ch-info: var(--ch-primary);
  --ch-info-soft: var(--ch-primary-soft);

  /* Superfícies e texto */
  --ch-bg: #f6f7fb;                  /* fundo da página */
  --ch-surface: #ffffff;             /* cartões, tabelas, modais, menu */
  --ch-surface-2: #f8f9fc;           /* cabeçalho de tabela, áreas internas */
  --ch-hover: #f1f4fb;
  --ch-border: #e4e7ef;
  --ch-border-strong: #cfd5e2;
  --ch-text: #1b2333;
  --ch-text-strong: var(--ch-brand-navy);
  --ch-text-muted: #5f6b7e;          /* contraste ≥ 4,5:1 sobre branco */
  --ch-text-subtle: #8a94a6;         /* só para rótulos pequenos e ícones */
  --ch-focus: 0 0 0 3px rgba(32, 69, 250, .28);

  /* Forma */
  --ch-radius-pill: 9999px;
  --ch-radius-field: 12px;
  --ch-radius-card: 16px;
  --ch-radius-sm: 8px;
  --ch-shadow-card: 0 1px 2px rgba(16, 24, 40, .04);
  --ch-shadow-pop: 0 12px 32px rgba(16, 24, 40, .14);

  /* Tamanhos */
  --ch-control-h: 42px;
  --ch-control-h-sm: 34px;
  --ch-sidebar-w: 264px;
  --ch-sidebar-w-collapsed: 84px;
  --ch-topbar-h: 76px;

  color-scheme: light;              /* listas nativas (select, data) no tema claro mesmo com o sistema escuro */
  --ch-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html.dark {
  --ch-primary: #3f5bc4;              /* azul mais fechado e menos saturado: botão sem ofuscar no escuro */
  --ch-primary-hover: #4b68d1;
  --ch-primary-soft: rgba(110, 136, 230, .16);
  --ch-primary-fg: #a9b8f2;           /* texto azul legível sobre fundo escuro */
  --ch-on-primary: #f1f4ff;
  --ch-success: #4ade80;
  --ch-success-soft: rgba(74, 222, 128, .14);
  --ch-warning: #fb923c;
  --ch-warning-soft: rgba(251, 146, 60, .14);
  --ch-danger: #f87171;
  --ch-danger-hover: #fca5a5;
  --ch-danger-soft: rgba(248, 113, 113, .14);

  --ch-bg: #0b1120;
  --ch-surface: #121a2c;
  --ch-surface-2: #0f1626;
  --ch-hover: #1a2440;
  --ch-border: #233049;
  --ch-border-strong: #33425f;
  --ch-text: #e5e9f2;
  --ch-text-strong: #ffffff;
  --ch-text-muted: #a3aec2;
  --ch-text-subtle: #7b879c;
  --ch-focus: 0 0 0 3px rgba(110, 136, 230, .45);
  --ch-shadow-card: none;
  --ch-shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ============================================================ Base */
.ch-app { font-family: var(--ch-font); background: var(--ch-bg); color: var(--ch-text); -webkit-font-smoothing: antialiased; }
.ch-app :focus-visible { outline: none; box-shadow: var(--ch-focus); }
.ch-skip { position: absolute; left: -999px; top: 8px; z-index: 100; }
.ch-skip:focus { left: 8px; background: var(--ch-surface); padding: .5rem 1rem; border-radius: var(--ch-radius-pill); }
.ch-h1 { font-size: 1.5rem; line-height: 2rem; font-weight: 600; color: var(--ch-text-strong); }
.ch-h2 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: var(--ch-text-strong); }
.ch-text-muted { color: var(--ch-text-muted); }
.ch-text-subtle { color: var(--ch-text-subtle); }
.ch-link { color: var(--ch-primary-fg); font-weight: 500; text-decoration: none; }
.ch-link:hover { text-decoration: underline; }
.ch-breadcrumb { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; color: var(--ch-primary-fg); }

/* ============================================================ Botões (pílula) */
.ch-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: var(--ch-control-h); padding: 0 1.25rem; border-radius: var(--ch-radius-pill);
  border: 1px solid transparent; font: 600 .875rem/1 var(--ch-font); white-space: nowrap;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .05s; text-decoration: none;
}
.ch-btn:active { transform: scale(.98); }
.ch-btn[disabled], .ch-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.ch-btn-primary { background: var(--ch-primary); color: var(--ch-on-primary); }
.ch-btn-primary:hover { background: var(--ch-primary-hover); }
.ch-btn-secondary { background: var(--ch-surface); color: var(--ch-primary-fg); border-color: var(--ch-primary); }
.ch-btn-secondary:hover { background: var(--ch-primary-soft); }
.ch-btn-danger { background: var(--ch-danger); color: #fff; }
.ch-btn-danger:hover { background: var(--ch-danger-hover); }
.ch-btn-danger-outline { background: var(--ch-surface); color: var(--ch-danger); border-color: var(--ch-danger); }
.ch-btn-danger-outline:hover { background: var(--ch-danger-soft); }
.ch-btn-ghost { background: transparent; color: var(--ch-primary-fg); }
.ch-btn-ghost:hover { background: var(--ch-primary-soft); }
.ch-btn-sm { height: var(--ch-control-h-sm); padding: 0 .9rem; font-size: .8125rem; }
.ch-btn-lg { height: 48px; padding: 0 1.6rem; font-size: .9375rem; }
.ch-btn-block { width: 100%; }
.ch-btn-icon { width: var(--ch-control-h); padding: 0; }
.ch-btn-icon.ch-btn-sm { width: var(--ch-control-h-sm); }
.ch-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.ch-btn.is-loading::after {
  content: ''; position: absolute; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--ch-on-primary) transparent var(--ch-on-primary) transparent; animation: ch-spin .7s linear infinite;
}
.ch-btn-secondary.is-loading::after, .ch-btn-ghost.is-loading::after { border-color: var(--ch-primary) transparent var(--ch-primary) transparent; }
@keyframes ch-spin { to { transform: rotate(360deg); } }
/* Ações de linha (ícone, sem fundo) — editar azul, excluir vermelho, demais neutras */
.ch-action { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--ch-radius-pill);
  color: var(--ch-text-subtle); background: transparent; border: 0; cursor: pointer; transition: background-color .15s, color .15s; }
.ch-action:hover { background: var(--ch-hover); color: var(--ch-text); }
.ch-action-edit { color: var(--ch-primary-fg); }
.ch-action-edit:hover { color: var(--ch-primary-hover); }
.ch-action-delete { color: var(--ch-danger); }
.ch-action-delete:hover { background: var(--ch-danger-soft); color: var(--ch-danger-hover); }

/* ============================================================ Chips (pílula) */
.ch-chip { display: inline-flex; align-items: center; gap: .3rem; height: 24px; padding: 0 .65rem; border-radius: var(--ch-radius-pill);
  font-size: .75rem; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.ch-chip-primary { background: var(--ch-primary-soft); color: var(--ch-primary-fg); }
.ch-chip-success { background: var(--ch-success-soft); color: var(--ch-success); }
.ch-chip-warning { background: var(--ch-warning-soft); color: var(--ch-warning); }
.ch-chip-danger { background: var(--ch-danger-soft); color: var(--ch-danger); }
.ch-chip-neutral { background: var(--ch-surface-2); color: var(--ch-text-muted); border-color: var(--ch-border); }
.ch-chip-purple { background: rgba(147, 51, 234, .1); color: #7e22ce; }
html.dark .ch-chip-purple { background: rgba(192, 132, 252, .14); color: #d8b4fe; }
.ch-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.ch-badge-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--ch-radius-pill); background: var(--ch-danger); color: #fff;
  font-size: .6875rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* ============================================================ Cartões */
.ch-card { background: var(--ch-surface); border: 1px solid var(--ch-border); border-radius: var(--ch-radius-card); box-shadow: var(--ch-shadow-card); }
.ch-card-body { padding: 1.5rem; }
.ch-card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem 0; }
.ch-stat { padding: 1.1rem 1.25rem; }
.ch-stat-label { font-size: .875rem; font-weight: 500; color: var(--ch-text); }
.ch-stat-value { margin-top: .75rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.ch-stat-sub { margin-top: .25rem; font-size: .75rem; color: var(--ch-text-muted); }

/* ============================================================ Formulários */
.ch-form { display: grid; gap: 1.25rem; }
.ch-form-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.ch-span-2 { grid-column: span 2; }
@media (max-width: 640px) { .ch-span-2 { grid-column: auto; } }
.ch-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.ch-label { font-size: .875rem; font-weight: 500; color: var(--ch-text); }
.ch-label.is-required::after { content: ' *'; color: var(--ch-danger); }
.ch-input, .ch-select, .ch-textarea {
  width: 100%; height: var(--ch-control-h); padding: 0 .9rem; border-radius: var(--ch-radius-field);
  background: var(--ch-surface); color: var(--ch-text); border: 1px solid var(--ch-border-strong);
  font: 400 .9375rem var(--ch-font); transition: border-color .15s, box-shadow .15s;
}
.ch-textarea { height: auto; min-height: 96px; padding: .7rem .9rem; resize: vertical; }
.ch-select { appearance: none; padding-right: 2.4rem; background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a94a6' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); }
.ch-input::placeholder, .ch-textarea::placeholder { color: var(--ch-text-subtle); }
.ch-input:hover, .ch-select:hover, .ch-textarea:hover { border-color: var(--ch-text-subtle); }
.ch-input:focus, .ch-select:focus, .ch-textarea:focus { outline: none; border-color: var(--ch-primary); box-shadow: var(--ch-focus); }
.ch-input[disabled], .ch-select[disabled], .ch-textarea[disabled] { background: var(--ch-surface-2); color: var(--ch-text-subtle); cursor: not-allowed; }
.ch-input[aria-invalid="true"], .ch-select[aria-invalid="true"], .ch-textarea[aria-invalid="true"] { border-color: var(--ch-danger); }
.ch-input[aria-invalid="true"]:focus, .ch-select[aria-invalid="true"]:focus, .ch-textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .2); }
.ch-help { font-size: .8125rem; color: var(--ch-text-muted); }
.ch-error { display: flex; align-items: flex-start; gap: .35rem; font-size: .8125rem; font-weight: 500; color: var(--ch-danger); }
.ch-error:empty { display: none; }
.ch-input-group { position: relative; }
.ch-input-group > i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--ch-text-subtle); font-size: .85rem; pointer-events: none; }
.ch-input-group > .ch-input { padding-left: 2.4rem; }
/* Senha com botão de mostrar/ocultar: <div class="ch-password"><input class="ch-input" type="password"><button class="ch-password-toggle" data-ch-password-toggle> */
.ch-password { position: relative; }
.ch-password > .ch-input { padding-right: 2.75rem; }
.ch-password-toggle { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--ch-text-subtle); background: transparent; border: 0; cursor: pointer; }
.ch-password-toggle:hover { color: var(--ch-text); background: var(--ch-surface-2); }
.ch-password-toggle:focus-visible { outline: 2px solid var(--ch-primary); outline-offset: 1px; }
.ch-check { display: inline-flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--ch-text); cursor: pointer; }
.ch-check input { width: 18px; height: 18px; accent-color: var(--ch-primary); cursor: pointer; }
.ch-switch { position: relative; display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .9rem; }
.ch-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ch-switch-track { width: 40px; height: 22px; border-radius: var(--ch-radius-pill); background: var(--ch-border-strong); position: relative; transition: background-color .15s; flex: none; }
.ch-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ch-switch input:checked + .ch-switch-track { background: var(--ch-primary); }
.ch-switch input:checked + .ch-switch-track::after { transform: translateX(18px); }
.ch-switch input:focus-visible + .ch-switch-track { box-shadow: var(--ch-focus); }
.ch-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; padding-top: 1.25rem; border-top: 1px solid var(--ch-border); }
.ch-form-summary { border-radius: var(--ch-radius-field); padding: .8rem 1rem; background: var(--ch-danger-soft); color: var(--ch-danger); font-size: .875rem; }
.ch-form-summary[hidden] { display: none; }

/* ============================================================ Select com busca (Select2 no tema) — todo <select> de formulário usa data-select */
.ch-app .select2-container { width: 100% !important; font-family: var(--ch-font); }
.ch-app .select2-container--default .select2-selection--single,
.ch-app .select2-container--default .select2-selection--multiple {
  min-height: var(--ch-control-h); border-radius: var(--ch-radius-field); border: 1px solid var(--ch-border-strong); background: var(--ch-surface);
  transition: border-color .15s, box-shadow .15s; }
.ch-app .select2-container--default .select2-selection--single { height: var(--ch-control-h); display: flex; align-items: center; }
.ch-app .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ch-text); padding: 0 2.6rem 0 .9rem; line-height: normal; font-size: .9375rem; }
.ch-app .select2-container--default .select2-selection__placeholder { color: var(--ch-text-subtle); }
.ch-app .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: .65rem; width: 20px; }
.ch-app .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--ch-text-subtle) transparent transparent transparent; }
.ch-app .select2-container--default .select2-selection--single .select2-selection__clear { color: var(--ch-text-subtle); margin-right: .4rem; font-size: 1.1rem; }
.ch-app .select2-container--default:hover .select2-selection { border-color: var(--ch-text-subtle); }
.ch-app .select2-container--default.select2-container--focus .select2-selection,
.ch-app .select2-container--default.select2-container--open .select2-selection { border-color: var(--ch-primary); box-shadow: var(--ch-focus); }
.ch-app .select2-container--open .select2-selection--single, .ch-app .select2-container--open .select2-selection--multiple { border-radius: var(--ch-radius-field) !important; }
.ch-app .select2-container--default.select2-container--disabled .select2-selection { background: var(--ch-surface-2); opacity: .7; cursor: not-allowed; }
.ch-app .select2-container--default .select2-selection--multiple { padding: .2rem .4rem; }
.ch-app .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--ch-primary-soft); color: var(--ch-primary-fg); border: 0;
  border-radius: var(--ch-radius-pill); padding: .15rem .6rem .15rem 1.5rem; margin: .2rem .25rem 0 0; font-size: .8125rem; font-weight: 500; position: relative; }
.ch-app .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--ch-primary-fg); border: 0; left: .35rem; top: 50%; transform: translateY(-50%); background: transparent; }
.ch-app .select2-container--default .select2-search--inline .select2-search__field { color: var(--ch-text); font-family: var(--ch-font); margin-top: .35rem; }
.ch-app .select2-dropdown, .select2-dropdown.ch-select-dropdown { background: var(--ch-surface); border: 1px solid var(--ch-border); border-radius: var(--ch-radius-field) !important;
  box-shadow: var(--ch-shadow-pop); overflow: hidden; font-family: var(--ch-font); }
.ch-app .select2-container--open .select2-dropdown--below { margin-top: 6px; }
.ch-app .select2-container--open .select2-dropdown--above { margin-top: -6px; }
.ch-app .select2-search--dropdown { padding: .6rem .6rem .3rem; }
.ch-app .select2-container--default .select2-search--dropdown .select2-search__field { height: 36px; padding: 0 .75rem; border-radius: 10px; border: 1px solid var(--ch-border-strong);
  background: var(--ch-surface-2); color: var(--ch-text); outline: none; }
.ch-app .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--ch-primary); }
.ch-app .select2-results > .select2-results__options { padding: .3rem; max-height: 260px; }
.ch-app .select2-container--default .select2-results__option { padding: .55rem .75rem; border-radius: 8px; color: var(--ch-text); font-size: .9rem; }
.ch-app .select2-container--default .select2-results__option--selected,
.ch-app .select2-container--default .select2-results__option[aria-selected="true"] { background: transparent; color: var(--ch-primary-fg); font-weight: 600; }
.ch-app .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.ch-app .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ch-primary-soft); color: var(--ch-primary-fg); }
.ch-app .select2-container--default .select2-results__option--disabled { color: var(--ch-text-subtle); }
.ch-app .select2-results__message { color: var(--ch-text-muted); }
.ch-app select[aria-invalid="true"] + .select2-container .select2-selection { border-color: var(--ch-danger); }

/* ============================================================ Tabela */
.ch-table-wrap { background: var(--ch-surface); border: 1px solid var(--ch-border); border-radius: var(--ch-radius-card); overflow: hidden; box-shadow: var(--ch-shadow-card); }
.ch-table-scroll { overflow-x: auto; }
.ch-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ch-table th { padding: .9rem 1rem; background: var(--ch-surface-2); color: var(--ch-text-subtle); font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; text-align: left; border-bottom: 1px solid var(--ch-border); white-space: nowrap; }
.ch-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--ch-border); vertical-align: top; color: var(--ch-text); }
.ch-table tbody tr:last-child td { border-bottom: 0; }
.ch-table tbody tr:hover { background: var(--ch-hover); }
.ch-table tr[data-row-href], .ch-table tr[data-row-open] { cursor: pointer; }
.ch-table tr[data-row-href]:focus-visible, .ch-table tr[data-row-open]:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ch-primary); }
.ch-table .ch-col-num { width: 3rem; color: var(--ch-text-subtle); font-weight: 500; }
.ch-table .ch-col-actions { text-align: right; white-space: nowrap; width: 1%; }
.ch-sort { display: inline-flex; align-items: center; gap: .35rem; color: inherit; text-decoration: none; }
.ch-sort:hover, .ch-sort.is-active { color: var(--ch-primary-fg); }
.ch-cell-title { font-weight: 600; color: var(--ch-text-strong); }
.ch-cell-sub { font-size: .75rem; color: var(--ch-text-muted); margin-top: 2px; }

/* ============================================================ Paginação */
.ch-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1rem; border-top: 1px solid var(--ch-border); font-size: .8125rem; color: var(--ch-text-muted); }
.ch-pages { display: inline-flex; align-items: center; gap: .25rem; }
.ch-page { min-width: 34px; height: 34px; padding: 0 .5rem; border-radius: var(--ch-radius-pill); display: inline-flex; align-items: center; justify-content: center;
  color: var(--ch-text); font-weight: 500; text-decoration: none; border: 1px solid transparent; }
.ch-page:hover { background: var(--ch-hover); }
.ch-page[aria-current="page"] { background: var(--ch-primary); color: var(--ch-on-primary); }
.ch-page[aria-disabled="true"] { color: var(--ch-text-subtle); pointer-events: none; }
.ch-per-page { display: inline-flex; align-items: center; gap: .5rem; }
.ch-per-page .ch-select { height: 34px; width: auto; padding-left: .75rem; font-size: .8125rem; }
.ch-app .ch-per-page .select2-container { width: 84px !important; }
.ch-app .ch-per-page .select2-container--default .select2-selection--single { height: 34px; min-height: 34px; border-radius: var(--ch-radius-pill); }
.ch-app .ch-per-page .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: .8125rem; padding: 0 2rem 0 .85rem; }
.select2-dropdown.ch-dropdown-compact .select2-results__option { font-size: .8125rem; padding: .45rem .7rem; }

/* ============================================================ Alertas, estado vazio, modal */
.ch-alert { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: var(--ch-radius-field); font-size: .875rem; }
.ch-alert > i { margin-top: .15rem; }
.ch-alert-info { background: var(--ch-info-soft); color: var(--ch-primary-fg); }
.ch-alert-success { background: var(--ch-success-soft); color: var(--ch-success); }
.ch-alert-warning { background: var(--ch-warning-soft); color: var(--ch-warning); }
.ch-alert-danger { background: var(--ch-danger-soft); color: var(--ch-danger); }
.ch-empty { text-align: center; padding: 3rem 1.5rem; }
.ch-empty-icon { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%; background: var(--ch-primary-soft); color: var(--ch-primary-fg);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.ch-modal { width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: var(--ch-radius-card);
  background: var(--ch-surface); color: var(--ch-text); box-shadow: var(--ch-shadow-pop); }
.ch-modal-lg { width: min(800px, calc(100vw - 2rem)); }
.ch-modal::backdrop { background: rgba(11, 17, 32, .55); }
.ch-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--ch-border); }
.ch-modal-body { padding: 1.5rem; overflow-y: auto; }
.ch-modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--ch-border); background: var(--ch-surface-2); }

/* ============================================================ Layout: menu lateral + barra superior */
.ch-shell { min-height: 100vh; }
.ch-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--ch-sidebar-w); background: var(--ch-surface); border-right: 1px solid var(--ch-border);
  display: flex; flex-direction: column; transition: width .2s ease, transform .2s ease; }
.ch-sidebar-brand { height: var(--ch-topbar-h); display: flex; align-items: center; gap: .6rem; padding: 0 1.4rem; flex: none; text-decoration: none; }
.ch-logo-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--ch-primary); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.ch-logo-text { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--ch-text-strong); white-space: nowrap; }
.ch-logo-text b { color: var(--ch-primary-fg); font-weight: 800; }
.ch-sidebar-cta { padding: .25rem 1rem 1rem; }
.ch-nav { flex: 1; overflow-y: auto; padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.ch-nav-item { display: flex; align-items: center; gap: .75rem; width: 100%; height: 46px; padding: 0 1rem; border-radius: var(--ch-radius-pill); border: 0;
  background: transparent; color: var(--ch-text); font: 500 .9375rem var(--ch-font); text-decoration: none; cursor: pointer; text-align: left; position: relative; }
.ch-nav-item > i:first-child { width: 22px; text-align: center; font-size: 1.05rem; color: var(--ch-text-muted); flex: none; }
.ch-nav-item:hover { background: var(--ch-hover); }
.ch-nav-item.is-active { background: var(--ch-primary-soft); color: var(--ch-primary-fg); font-weight: 600; }
.ch-nav-item.is-active > i:first-child { color: var(--ch-primary-fg); }
/* grupo da tela atual fechado (outro grupo aberto): só o ícone fica destacado, fundo e texto normais */
.ch-nav-group > .ch-nav-item.is-active:not(.is-open) { background: transparent; color: var(--ch-text); font-weight: 500; }
.ch-nav-group > .ch-nav-item.is-active:not(.is-open):hover { background: var(--ch-hover); }
.ch-nav-item.is-open:not(.is-active) { background: var(--ch-hover); }
.ch-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-nav-caret { font-size: .7rem; color: var(--ch-text-subtle); transition: transform .2s; }
.ch-nav-item[aria-expanded="true"] .ch-nav-caret { transform: rotate(180deg); }
.ch-nav-sub { margin: .25rem 0 .35rem 1.3rem; padding-left: .6rem; min-width: 0; border-left: 1px solid var(--ch-border); display: flex; flex-direction: column; gap: .1rem; }
.ch-nav-sub[hidden] { display: none; }
.ch-nav-link { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .5rem .6rem; border-radius: var(--ch-radius-pill); color: var(--ch-text-muted); font-size: .9rem; text-decoration: none; }
.ch-nav-link-label { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.ch-nav-link > i { width: 18px; text-align: center; font-size: .95rem; color: var(--ch-text-subtle); flex: none; }
.ch-nav-link.is-active > i { color: var(--ch-primary-fg); }
.ch-nav-link:hover { background: var(--ch-hover); color: var(--ch-text); }
.ch-nav-link.is-active { color: var(--ch-primary-fg); font-weight: 600; background: var(--ch-primary-soft); }
.ch-sidebar-toggle { position: absolute; top: calc(var(--ch-topbar-h) - 14px); right: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--ch-surface);
  border: 1px solid var(--ch-border-strong); color: var(--ch-primary-fg); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .7rem; z-index: 2; }
.ch-sidebar-toggle i { transition: transform .2s; }
.ch-main { margin-left: var(--ch-sidebar-w); transition: margin-left .2s ease; min-width: 0; }
.ch-topbar { position: sticky; top: 0; z-index: 30; height: var(--ch-topbar-h); background: var(--ch-surface); border-bottom: 1px solid var(--ch-border);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.5rem; }
.ch-topbar-actions { display: flex; align-items: center; gap: .25rem; }
.ch-icon-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--ch-primary-fg); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.ch-icon-btn:hover { background: var(--ch-hover); }
.ch-icon-btn .ch-badge-count { position: absolute; top: 2px; right: 0; }
.ch-content { padding: 1.75rem 2rem 3rem; max-width: 1440px; }
.ch-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.ch-backdrop { display: none; }

/* Recolhido (desktop) */
.ch-collapsed .ch-sidebar { width: var(--ch-sidebar-w-collapsed); }
.ch-collapsed .ch-main { margin-left: var(--ch-sidebar-w-collapsed); }
.ch-collapsed .ch-sidebar-toggle i { transform: rotate(180deg); }
.ch-collapsed .ch-logo-text, .ch-collapsed .ch-nav-label, .ch-collapsed .ch-nav-caret, .ch-collapsed .ch-cta-label { display: none; }
.ch-collapsed .ch-sidebar-brand { justify-content: center; padding: 0; }
.ch-collapsed .ch-sidebar-cta { padding: .25rem 1rem 1rem; display: flex; justify-content: center; }
.ch-collapsed .ch-sidebar-cta .ch-btn { width: 52px; height: 52px; padding: 0; }
.ch-collapsed .ch-nav { padding: 0 .9rem 1rem; overflow: visible; }
.ch-collapsed .ch-nav-item { justify-content: center; padding: 0; width: 52px; height: 52px; margin: 0 auto; }
/* No recolhido, o grupo aberto mostra os subitens só com ícone, empilhados numa pílula azul-clara logo abaixo (nome no balão) */
.ch-collapsed .ch-nav-item.is-open { background: var(--ch-primary-soft); }
.ch-collapsed .ch-nav-sub { margin: .3rem auto .4rem; padding: .35rem 0; width: 52px; border-left: 0; border-radius: 26px; background: var(--ch-primary-soft);
  align-items: center; gap: .15rem; }
.ch-collapsed .ch-nav-link { width: 42px; height: 42px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.ch-collapsed .ch-nav-link .ch-nav-link-label { display: none; }
/* recolhido: o grupo aberto (botão e subitens) não tem hover; os demais itens mantêm o hover normal */
.ch-collapsed .ch-nav-group.is-open .ch-nav-item:hover { background: var(--ch-primary-soft); }
.ch-collapsed .ch-nav-group.is-open .ch-nav-link:hover { background: transparent; color: var(--ch-text-muted); }
.ch-collapsed .ch-nav-group.is-open .ch-nav-link.is-active:hover { color: var(--ch-primary-fg); }
.ch-collapsed .ch-nav-link.is-active { background: transparent; }

/* Celular/tablet: menu sobreposto */
@media (max-width: 1023px) {
  .ch-sidebar { transform: translateX(-100%); width: var(--ch-sidebar-w) !important; box-shadow: var(--ch-shadow-pop); }
  .ch-main, .ch-collapsed .ch-main { margin-left: 0; }
  .ch-sidebar-toggle { display: none; }
  .ch-menu-open .ch-sidebar { transform: none; }
  .ch-menu-open .ch-backdrop { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(11, 17, 32, .45); }
  .ch-content { padding: 1.25rem 1rem 2.5rem; }
  .ch-topbar { padding: 0 1rem; }
  /* no celular o menu é sempre o expandido */
  .ch-collapsed .ch-logo-text, .ch-collapsed .ch-nav-label, .ch-collapsed .ch-nav-caret, .ch-collapsed .ch-cta-label { display: initial; }
  .ch-collapsed .ch-nav-item { justify-content: flex-start; padding: 0 1rem; width: 100%; height: 46px; }
  .ch-collapsed .ch-nav-sub { width: auto; background: transparent; border-left: 1px solid var(--ch-border); border-radius: 0; margin: .25rem 0 .35rem 1.65rem; padding: 0 0 0 .9rem; align-items: stretch; }
  .ch-collapsed .ch-nav-link { width: auto; height: auto; padding: .55rem .8rem; justify-content: flex-start; border-radius: var(--ch-radius-pill); }
  .ch-collapsed .ch-nav-link .ch-nav-link-label { display: inline; }
  .ch-collapsed .ch-nav-link.is-active { background: var(--ch-primary-soft); }
  .ch-collapsed .ch-nav-item.is-open:not(.is-active) { background: var(--ch-hover); }
  .ch-collapsed .ch-sidebar-brand { justify-content: center; padding: 1.5rem 1rem 0; height: calc(var(--ch-topbar-h) + .75rem); }
  .ch-collapsed .ch-sidebar-cta .ch-btn { width: 100%; height: var(--ch-control-h); padding: 0 1.25rem; }
}
@media (min-width: 1024px) {
  .ch-menu-btn { display: none; }
  /* desktop: o menu faz parte da página e rola junto com ela (não fica fixo na tela) */
  .ch-shell { display: flex; align-items: stretch; }
  .ch-sidebar { position: relative; inset: auto; flex: none; min-height: 100vh; }
  .ch-nav { overflow: visible; }
  .ch-main, .ch-collapsed .ch-main { margin-left: 0; flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) { .ch-app *, .ch-app *::before, .ch-app *::after { transition: none !important; animation: none !important; } }

/* ============================================================ Calendário (FullCalendar no tema) — vale dentro de .ch-app */
.ch-app .fc {
  --fc-border-color: var(--ch-border); --fc-page-bg-color: var(--ch-surface); --fc-neutral-bg-color: var(--ch-surface-2);
  --fc-today-bg-color: var(--ch-primary-soft); --fc-list-event-hover-bg-color: var(--ch-hover);
  --fc-button-bg-color: var(--ch-primary); --fc-button-border-color: var(--ch-primary);
  --fc-button-hover-bg-color: var(--ch-primary-hover); --fc-button-hover-border-color: var(--ch-primary-hover);
  --fc-button-active-bg-color: var(--ch-primary-hover); --fc-button-active-border-color: var(--ch-primary-hover);
  --fc-now-indicator-color: var(--ch-danger); font-family: var(--ch-font); color: var(--ch-text);
}
.ch-app .fc .fc-toolbar-title { color: var(--ch-text-strong); font-weight: 600; font-size: 1.125rem; }
.ch-app .fc .fc-button { border-radius: var(--ch-radius-pill); font-weight: 600; font-family: var(--ch-font); padding: .45rem 1rem; }
.ch-app .fc .fc-button:focus-visible { outline: none; box-shadow: var(--ch-focus) !important; }
.ch-app .fc .fc-button-group > .fc-prev-button, .ch-app .fc .fc-button-group > .fc-next-button {
  background: var(--ch-surface); border-color: var(--ch-border-strong); color: var(--ch-primary-fg); }
.ch-app .fc .fc-prev-button:hover, .ch-app .fc .fc-next-button:hover { background: var(--ch-primary-soft); border-color: var(--ch-primary); color: var(--ch-primary-fg); }
/* seletor de visualização: pílula segmentada; ativo em azul */
.ch-app .fc .fc-button-group:has(.fc-timeGridWeek-button), .ch-app .fc .fc-button-group:has(.fc-listWeek-button) { background: var(--ch-surface-2); border: 1px solid var(--ch-border); border-radius: var(--ch-radius-pill); padding: 3px; }
.ch-app .fc .fc-button-group:has(.fc-timeGridWeek-button) > .fc-button, .ch-app .fc .fc-button-group:has(.fc-listWeek-button) > .fc-button {
  background: transparent; border-color: transparent; color: var(--ch-text-muted); border-radius: var(--ch-radius-pill) !important; }
.ch-app .fc .fc-button-group:has(.fc-timeGridWeek-button) > .fc-button:hover, .ch-app .fc .fc-button-group:has(.fc-listWeek-button) > .fc-button:hover { color: var(--ch-text); }
.ch-app .fc .fc-button-group:has(.fc-timeGridWeek-button) > .fc-button.fc-button-active, .ch-app .fc .fc-button-group:has(.fc-listWeek-button) > .fc-button.fc-button-active {
  background: var(--ch-primary); border-color: var(--ch-primary); color: var(--ch-on-primary); }
.ch-app .fc .fc-scrollgrid { border-radius: var(--ch-radius-field); overflow: hidden; border-color: var(--ch-border); }
.ch-app .fc .fc-scrollgrid-section-header > th { background: var(--ch-surface-2); }
.ch-app .fc .fc-col-header-cell-cushion { color: var(--ch-text-muted); font-weight: 600; padding: .6rem .25rem; text-decoration: none; }
.ch-app .fc .fc-daygrid-day-number, .ch-app .fc .fc-timegrid-slot-label { color: var(--ch-text-muted); text-decoration: none; }
.ch-app .fc .fc-day-today .fc-col-header-cell-cushion { color: var(--ch-primary-fg); }
/* cartões dos agendamentos: fundo suave na cor do status, etiqueta lateral e texto escurecido (claro e escuro) */
.ch-app .fc .fc-timegrid-event:not(.fc-bg-event), .ch-app .fc .fc-daygrid-block-event {
  background: color-mix(in srgb, var(--ev) 14%, var(--ch-surface)) !important; border: 0 !important; border-left: 3px solid var(--ev) !important; border-radius: 4px 10px 10px 4px; box-shadow: none; }
.ch-app .fc .fc-timegrid-event:not(.fc-bg-event) .fc-event-main, .ch-app .fc .fc-daygrid-block-event .fc-event-main { color: color-mix(in srgb, var(--ev) 78%, var(--ch-text-strong)); }
html.dark .ch-app .fc .fc-timegrid-event:not(.fc-bg-event) .fc-event-main, html.dark .ch-app .fc .fc-daygrid-block-event .fc-event-main { color: color-mix(in srgb, var(--ev) 45%, #fff); }
.ch-app .fc .fc-list { border-color: var(--ch-border); border-radius: var(--ch-radius-field); overflow: hidden; }
.ch-app .fc .fc-list-day-cushion { background: var(--ch-surface-2); }
.ch-app .fc .fc-list-event:hover td { background: var(--ch-hover); }

/* ============================================================ SweetAlert2 no tema (diálogos, confirmações e avisos) */
.ch-app .swal2-container { font-family: var(--ch-font); }
.ch-app .swal2-popup { background: var(--ch-surface); color: var(--ch-text); border: 1px solid var(--ch-border); border-radius: var(--ch-radius-card); box-shadow: var(--ch-shadow-pop); padding: 1.75rem 1.5rem 1.4rem; }
.ch-app .swal2-title { color: var(--ch-text-strong); font-size: 1.25rem; font-weight: 600; }
.ch-app .swal2-html-container, .ch-app .swal2-content { color: var(--ch-text-muted); font-size: .9375rem; }
.ch-app .swal2-html-container .text-gray-500 { color: var(--ch-text-muted) !important; }
.ch-app .swal2-actions { gap: .6rem; margin-top: 1.4rem; }
.ch-app .swal2-styled { height: var(--ch-control-h); padding: 0 1.4rem !important; margin: 0 !important; border-radius: var(--ch-radius-pill) !important; border: 1px solid transparent !important;
  font: 600 .875rem/1 var(--ch-font) !important; box-shadow: none !important; transition: background-color .15s; }
.ch-app .swal2-styled:focus-visible { box-shadow: var(--ch-focus) !important; }
.ch-app .swal2-styled.swal2-confirm { background: var(--ch-primary) !important; color: var(--ch-on-primary) !important; }
.ch-app .swal2-styled.swal2-confirm:hover { background: var(--ch-primary-hover) !important; }
.ch-app .swal2-styled.swal2-cancel { background: var(--ch-surface) !important; color: var(--ch-primary-fg) !important; border-color: var(--ch-primary) !important; }
.ch-app .swal2-styled.swal2-cancel:hover { background: var(--ch-primary-soft) !important; }
.ch-app .swal2-styled.swal2-deny { background: var(--ch-surface) !important; color: var(--ch-primary-fg) !important; border-color: var(--ch-border-strong) !important; }
.ch-app .swal2-styled.swal2-deny:hover { background: var(--ch-hover) !important; }
.ch-app .swal2-styled.ch-swal-danger { background: var(--ch-danger) !important; color: #fff !important; }
.ch-app .swal2-styled.ch-swal-danger:hover { background: var(--ch-danger-hover) !important; }
.ch-app .swal2-input, .ch-app .swal2-select, .ch-app .swal2-textarea { height: var(--ch-control-h); border-radius: var(--ch-radius-field); border: 1px solid var(--ch-border-strong);
  background: var(--ch-surface); color: var(--ch-text); font: 400 .9375rem var(--ch-font); box-shadow: none; }
.ch-app .swal2-input:focus, .ch-app .swal2-select:focus, .ch-app .swal2-textarea:focus { border-color: var(--ch-primary); box-shadow: var(--ch-focus); }
.ch-app .swal2-validation-message { background: var(--ch-danger-soft); color: var(--ch-danger); border-radius: var(--ch-radius-field); }
.ch-app .swal2-loader { border-color: var(--ch-primary) transparent var(--ch-primary) transparent; }
.ch-app .swal2-timer-progress-bar { background: var(--ch-primary); }
/* aviso rápido (toast): cartão compacto, sem ícone gigante */
.ch-app .swal2-popup.swal2-toast { padding: .75rem 1rem; border-radius: var(--ch-radius-field); box-shadow: var(--ch-shadow-pop); }
.ch-app .swal2-popup.swal2-toast .swal2-title { font-size: .9rem; font-weight: 500; color: var(--ch-text); }
/* ícones: cores do sistema */
.ch-app .swal2-icon.swal2-success { border-color: var(--ch-success); color: var(--ch-success); }
.ch-app .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--ch-success); }
.ch-app .swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--ch-success) 30%, transparent); }
.ch-app .swal2-icon.swal2-error { border-color: var(--ch-danger); color: var(--ch-danger); }
.ch-app .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--ch-danger); }
.ch-app .swal2-icon.swal2-warning { border-color: var(--ch-warning); color: var(--ch-warning); }
.ch-app .swal2-icon.swal2-info, .ch-app .swal2-icon.swal2-question { border-color: var(--ch-primary); color: var(--ch-primary-fg); }

/* ============================================================ Barra de filtros e período (de … até) */
.ch-filterbar { padding: 1rem 1.25rem; display: grid; gap: .9rem; }
.ch-filter-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); align-items: center; }
.ch-filter-grid .ch-span-2 { grid-column: span 2; }
@media (max-width: 640px) { .ch-filter-grid .ch-span-2 { grid-column: auto; } }
/* período: pílula única com ícone, data inicial, "até" e data final; cada data abre o seletor nativo */
.ch-daterange { display: flex; align-items: center; min-width: 0; width: 100%; max-width: 21rem; height: var(--ch-control-h); border: 1px solid var(--ch-border-strong); border-radius: var(--ch-radius-pill);
  background: var(--ch-surface); transition: border-color .15s, box-shadow .15s; padding: 0 .35rem 0 .35rem; gap: .25rem; }
.ch-daterange:hover { border-color: var(--ch-text-subtle); }
.ch-daterange:focus-within { border-color: var(--ch-primary); box-shadow: var(--ch-focus); }
.ch-daterange > span:not(.ch-daterange-sep) { flex: 1 1 0; min-width: 0; }
.ch-daterange input { width: 100%; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ch-text); font: 400 .875rem var(--ch-font);
  text-align: center; padding: 0 1.7rem !important; outline: none; box-shadow: none; }
/* o contorno de foco é do conjunto (.ch-daterange:focus-within), não de cada campo por dentro */
.ch-daterange input:focus, .ch-daterange input:focus-visible { outline: none; box-shadow: none; border: 0; }
.ch-daterange input::placeholder { text-align: center; }

.ch-daterange-sep { color: var(--ch-text-subtle); font-size: .8125rem; flex: none; }
.ch-daterange-clear { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--ch-text-subtle); cursor: pointer; }
.ch-daterange-clear:hover { background: var(--ch-hover); color: var(--ch-text); }
.ch-daterange[aria-invalid="true"] { border-color: var(--ch-danger); }
/* atalhos de período */
.ch-quick { display: flex; flex-wrap: wrap; gap: .4rem; }
.ch-quick button { height: 30px; padding: 0 .85rem; border-radius: var(--ch-radius-pill); border: 1px solid var(--ch-border-strong); background: var(--ch-surface);
  color: var(--ch-text-muted); font: 500 .8125rem var(--ch-font); cursor: pointer; }
.ch-quick button:hover { background: var(--ch-hover); color: var(--ch-text); }
.ch-quick button[aria-pressed="true"] { background: var(--ch-primary-soft); border-color: var(--ch-primary); color: var(--ch-primary-fg); font-weight: 600; }
/* chips dos filtros ativos */
.ch-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--ch-text-muted); }
.ch-filter-chip { display: inline-flex; align-items: center; gap: .4rem; height: 28px; padding: 0 .35rem 0 .8rem; border-radius: var(--ch-radius-pill); background: var(--ch-primary-soft); color: var(--ch-primary-fg); font-weight: 500; }
.ch-filter-chip button { width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: .7rem; }
.ch-filter-chip button:hover { background: rgba(255, 255, 255, .5); }
html.dark .ch-filter-chip button:hover { background: rgba(255, 255, 255, .12); }
.ch-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; background: var(--ch-surface-2); border: 1px solid var(--ch-border); border-radius: 6px; padding: .1rem .4rem; }

/* ============================================================ Dropdown de filtro (múltipla escolha, com busca) — <details class="ch-dd"> */
.ch-dd { position: relative; min-width: 0; }
.ch-dd > summary { list-style: none; display: flex; align-items: center; gap: .55rem; width: 100%; height: var(--ch-control-h); padding: 0 .9rem; cursor: pointer; user-select: none;
  border: 1px solid var(--ch-border-strong); border-radius: var(--ch-radius-pill); background: var(--ch-surface); color: var(--ch-text); font: 500 .875rem var(--ch-font); white-space: nowrap; transition: border-color .15s, background-color .15s; }
.ch-dd > summary::-webkit-details-marker { display: none; }
.ch-dd > summary:hover { border-color: var(--ch-text-subtle); }
.ch-dd[open] > summary, .ch-dd > summary:focus-visible { border-color: var(--ch-primary); box-shadow: var(--ch-focus); outline: none; }
.ch-dd > summary > i:first-child { color: var(--ch-text-subtle); font-size: .8rem; }
.ch-dd > summary .ch-dd-caret { margin-left: auto; font-size: .65rem; color: var(--ch-text-subtle); transition: transform .2s; }
.ch-dd[open] > summary .ch-dd-caret { transform: rotate(180deg); }
.ch-dd.is-applied > summary { background: var(--ch-primary-soft); border-color: var(--ch-primary); color: var(--ch-primary-fg); }
.ch-dd.is-applied > summary > i:first-child { color: var(--ch-primary-fg); }
.ch-dd-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--ch-radius-pill); background: var(--ch-primary); color: var(--ch-on-primary); font-size: .6875rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ch-dd-count[hidden] { display: none; }
.ch-dd-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: max(100%, 17rem); background: var(--ch-surface); border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-card); box-shadow: var(--ch-shadow-pop); overflow: hidden; display: flex; flex-direction: column; }
.ch-dd-search { padding: .65rem .65rem .35rem; }
.ch-dd-search .ch-input { height: 36px; border-radius: 10px; background: var(--ch-surface-2); font-size: .875rem; }
.ch-dd-list { max-height: 15rem; overflow-y: auto; padding: .35rem; }
.ch-dd-group { padding: .5rem .65rem .25rem; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ch-text-subtle); }
.ch-dd-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: 8px; cursor: pointer; font-size: .9rem; color: var(--ch-text); }
.ch-dd-item:hover { background: var(--ch-hover); }
.ch-dd-item input { width: 17px; height: 17px; accent-color: var(--ch-primary); flex: none; }
.ch-dd-item[hidden], .ch-dd-group[hidden] { display: none; }
.ch-dd-item .ch-cell-sub { margin: 0 0 0 .15rem; }
.ch-dd-empty { padding: .9rem .75rem; font-size: .8125rem; color: var(--ch-text-muted); }
.ch-dd-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .65rem; border-top: 1px solid var(--ch-border); background: var(--ch-surface-2); }

/* ============================================================ Atalho de hoje (ícone de calendário com mês e dia) — listas e calendário */
.ch-today { display: inline-grid; grid-template-rows: auto 1fr; width: 42px; height: 42px; padding: 0; overflow: hidden; border-radius: 12px; cursor: pointer; text-decoration: none; text-align: center;
  background: var(--ch-surface); border: 1px solid var(--ch-border-strong); color: var(--ch-text); transition: border-color .15s, box-shadow .15s; vertical-align: middle; }
.ch-today:hover { border-color: var(--ch-primary); }
.ch-today-m { display: block; padding: 3px 0 2px; background: var(--ch-text-subtle); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.ch-today-d { display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; line-height: 1; }
.ch-today[aria-pressed="true"], .ch-showing-today .fc .fc-hoje-button { border-color: var(--ch-primary); box-shadow: 0 0 0 1px var(--ch-primary); }
.ch-today[aria-pressed="true"] .ch-today-m, .ch-showing-today .fc .fc-hoje-button::before { background: var(--ch-primary); }
/* o mesmo visual no botão de hoje do FullCalendar (texto = dia; mês vem de --fc-today-month) */
.ch-app .fc .fc-hoje-button { display: inline-grid; grid-template-rows: auto 1fr; align-items: center; width: 42px; height: 42px; padding: 0; margin-left: .5rem !important; overflow: hidden;
  border-radius: 12px !important; background: var(--ch-surface); border: 1px solid var(--ch-border-strong); color: var(--ch-text); font-size: 16px; font-weight: 700; line-height: 1; }
.ch-app .fc .fc-hoje-button::before { content: var(--fc-today-month, ''); display: block; padding: 3px 0 2px; background: var(--ch-text-subtle); color: #fff; font-size: 9px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.ch-app .fc .fc-hoje-button:hover { background: var(--ch-surface); border-color: var(--ch-primary); color: var(--ch-text); }

/* setas de navegação do calendário: ícone centralizado no círculo e barra de ferramentas alinhada ao centro */
.ch-app .fc .fc-toolbar { align-items: center; gap: .75rem; }
.ch-app .fc .fc-toolbar-chunk { display: flex; align-items: center; }
.ch-app .fc .fc-button-group > .fc-prev-button, .ch-app .fc .fc-button-group > .fc-next-button {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; line-height: 1; }
.ch-app .fc .fc-prev-button .fc-icon, .ch-app .fc .fc-next-button .fc-icon { display: block; font-size: 1.35rem; line-height: 1; width: 1em; height: 1em; text-align: center; margin: 0; }
.ch-app .fc .fc-toolbar-title { margin: 0 .25rem; line-height: 1.2; }

/* Calendário no celular: setas, hoje e título na barra de cima; visualizações em pílula no rodapé (igual ao calendário atual) */
@media (max-width: 639px) {
  .ch-app .fc .fc-toolbar { gap: .4rem; flex-wrap: nowrap; }
  .ch-app .fc .fc-toolbar.fc-header-toolbar { margin-bottom: .75rem; }
  .ch-app .fc .fc-toolbar.fc-footer-toolbar { margin-top: .75rem; justify-content: center; }
  .ch-app .fc .fc-toolbar-title { font-size: .95rem; margin: 0; text-align: center; }
  .ch-app .fc .fc-button { padding: .3rem .6rem; font-size: .8rem; }
  .ch-app .fc .fc-button-group > .fc-prev-button, .ch-app .fc .fc-button-group > .fc-next-button { width: 34px; height: 34px; }
  .ch-app .fc .fc-hoje-button { width: 38px; height: 38px; margin-left: .25rem !important; }
  .ch-app .fc .fc-toolbar-chunk:empty { display: none; }
  .ch-app .fc .fc-footer-toolbar .fc-button-group { max-width: 100%; }
  .ch-app .fc .fc-footer-toolbar .fc-button-group > .fc-button { padding: .35rem .7rem; }
}

/* campos de data com máscara: o ícone de calendário (finclin-datepicker.js) no tema (selecionado por aria-label: o balão global remove o title); vale para todo campo data-mask="date" */
.ch-app button[aria-label="Escolher no calendário"] { color: var(--ch-text-subtle) !important; right: .7rem !important; }
.ch-app button[aria-label="Escolher no calendário"]:hover { color: var(--ch-primary-fg) !important; }
.ch-app .ch-daterange button[aria-label="Escolher no calendário"] { right: .35rem !important; }
/* período: o ícone da data inicial fica à esquerda; o da data final, à direita */
.ch-app .ch-daterange > span:first-of-type button[aria-label="Escolher no calendário"] { right: auto !important; left: .35rem !important; }

/* ============================================================ Abas (tabs) — [data-ch-tabs] com role=tablist/tab/tabpanel */
.ch-tabs { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: 100%; }
.ch-tabs::-webkit-scrollbar { display: none; }
.ch-tab { display: inline-flex; align-items: center; gap: .5rem; flex: none; height: 38px; padding: 0 1rem; border: 1px solid transparent; border-radius: var(--ch-radius-pill);
  background: transparent; color: var(--ch-text-muted); font: 500 .875rem var(--ch-font); white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.ch-tab:hover { background: var(--ch-hover); color: var(--ch-text); }
.ch-tab[aria-selected="true"] { background: var(--ch-primary-soft); color: var(--ch-primary-fg); border-color: transparent; font-weight: 600; }
.ch-tab[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.ch-tab > i { font-size: .85rem; }
.ch-tab-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--ch-radius-pill); background: var(--ch-surface-2); border: 1px solid var(--ch-border); color: var(--ch-text-muted);
  font-size: .6875rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ch-tab[aria-selected="true"] .ch-tab-count { background: var(--ch-primary); border-color: var(--ch-primary); color: var(--ch-on-primary); }
.ch-tab-alert { width: 8px; height: 8px; border-radius: 50%; background: var(--ch-danger); flex: none; }
/* variante segmentada: as abas dentro de uma pílula única (alterna entre poucas visões) */
.ch-tabs-segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--ch-surface-2); border: 1px solid var(--ch-border); border-radius: var(--ch-radius-pill); }
.ch-tabs-segmented .ch-tab { height: 34px; }
.ch-tabs-segmented .ch-tab[aria-selected="true"] { background: var(--ch-primary); color: var(--ch-on-primary); }
/* variante com linha embaixo: telas de detalhe com muito conteúdo */
.ch-tabs-line { gap: 1.5rem; border-bottom: 1px solid var(--ch-border); border-radius: 0; }
.ch-tabs-line .ch-tab { height: 44px; padding: 0 .15rem; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ch-tabs-line .ch-tab:hover { background: transparent; color: var(--ch-text); }
.ch-tabs-line .ch-tab[aria-selected="true"] { background: transparent; color: var(--ch-primary-fg); border-bottom-color: var(--ch-primary); }
.ch-tabpanel { padding-top: 1.25rem; }
.ch-tabpanel[hidden] { display: none; }
.ch-tab:focus-visible { outline: none; box-shadow: var(--ch-focus); }

/* ============================================================ Menu suspenso de ações (dropdown menu) — [data-ch-menu] */
.ch-menu { position: relative; display: inline-block; }
.ch-menu-panel { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; min-width: 14rem; padding: .35rem; background: var(--ch-surface); border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-card); box-shadow: var(--ch-shadow-pop); }
.ch-menu-panel[hidden] { display: none; }
.ch-menu.is-left .ch-menu-panel { right: auto; left: 0; }
.ch-menu.is-up .ch-menu-panel { top: auto; bottom: calc(100% + 6px); }
.ch-menu-head { padding: .75rem .85rem; border-bottom: 1px solid var(--ch-border); margin: -.35rem -.35rem .35rem; }
.ch-menu-head strong { display: block; font-size: .875rem; color: var(--ch-text-strong); overflow-wrap: anywhere; }
.ch-menu-head span { display: block; margin-top: 2px; font-size: .75rem; color: var(--ch-text-muted); }
.ch-menu-item { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem .85rem; border: 0; border-radius: 10px; background: transparent; color: var(--ch-text);
  font: 500 .875rem var(--ch-font); text-align: left; text-decoration: none; cursor: pointer; }
.ch-menu-item > i { width: 18px; text-align: center; color: var(--ch-text-subtle); font-size: .9rem; flex: none; }
.ch-menu-item:hover, .ch-menu-item:focus-visible { background: var(--ch-hover); outline: none; }
.ch-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--ch-primary); }
.ch-menu-item[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.ch-menu-item.is-danger, .ch-menu-item.is-danger > i { color: var(--ch-danger); }
.ch-menu-item.is-danger:hover { background: var(--ch-danger-soft); }
.ch-menu-item .ch-chip { margin-left: auto; height: 20px; font-size: .6875rem; }
.ch-menu-sep { height: 1px; margin: .35rem .25rem; background: var(--ch-border); border: 0; }
/* botão com seta (ação principal + menu): "Novo ▾" */
.ch-split { display: inline-flex; }
.ch-split > .ch-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ch-split > .ch-btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 .85rem; border-left: 1px solid rgba(255, 255, 255, .35); }

/* ============================================================ Carregamento: esqueleto (skeleton) e indicador */
.ch-skeleton { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--ch-border) 25%, var(--ch-hover) 50%, var(--ch-border) 75%); background-size: 200% 100%; animation: ch-shimmer 1.4s ease-in-out infinite; }
.ch-skeleton-line { height: 12px; }
.ch-skeleton-line.is-lg { height: 16px; }
.ch-skeleton-chip { height: 24px; width: 5.5rem; border-radius: var(--ch-radius-pill); }
.ch-skeleton-circle { width: 34px; height: 34px; border-radius: 50%; }
@keyframes ch-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.ch-table.is-loading tbody tr { pointer-events: none; }
.ch-table.is-loading tbody tr:hover { background: transparent; }
.ch-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ch-border-strong); border-top-color: var(--ch-primary); animation: ch-spin .8s linear infinite; display: inline-block; }
.ch-loading-overlay { position: relative; }
.ch-loading-overlay > .ch-loading-veil { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: color-mix(in srgb, var(--ch-surface) 78%, transparent); border-radius: inherit; color: var(--ch-text-muted); font-size: .875rem; }
.ch-loading-overlay > .ch-loading-veil[hidden] { display: none; }
.ch-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Logo do menu: completo (claro/escuro) quando expandido; só o símbolo quando recolhido */
.ch-sidebar-brand img { display: block; width: auto; }
.ch-logo-dark, .ch-logo-sym { display: none !important; }
html.dark .ch-logo-light { display: none !important; }
html.dark .ch-logo-dark { display: block !important; }
.ch-collapsed .ch-logo-light, html.dark.ch-collapsed .ch-logo-dark { display: none !important; }
.ch-collapsed .ch-logo-sym { display: block !important; }
@media (max-width: 1023px) {
  .ch-collapsed .ch-logo-sym { display: none !important; }
  .ch-collapsed .ch-logo-light { display: block !important; }
  html.dark.ch-collapsed .ch-logo-light { display: none !important; }
  html.dark.ch-collapsed .ch-logo-dark { display: block !important; }
}

/* horário de atendimento ao fundo (verde suave) e mês/lista no tema */
.ch-app .fc .fc-work-hours, .ch-app .fc-work-hours-legend { background: color-mix(in srgb, var(--ch-success) 13%, transparent) !important; opacity: 1; }
.ch-app .fc .fc-work-hours .fc-event-title { color: var(--ch-success); font-size: .7rem; padding: 2px 4px; font-style: normal; }
.ch-app .fc .fc-daygrid-day.fc-day-today { background: var(--ch-primary-soft); }
.ch-app .fc .fc-daygrid-more-link { color: var(--ch-primary-fg); font-weight: 600; font-size: .75rem; }
.ch-app .fc .fc-list-event-dot { border-width: 5px; }
.ch-app .fc .fc-list-event-title, .ch-app .fc .fc-list-event-time { color: var(--ch-text); }
.ch-app .fc .fc-list-day-text, .ch-app .fc .fc-list-day-side-text { color: var(--ch-text-strong); font-weight: 600; text-decoration: none; }
.ch-app .fc .fc-ev { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 5px; padding: 2px 4px; font-weight: 600; overflow: hidden; position: relative; }
.ch-app .fc .fc-daygrid-event .fc-ev { flex-wrap: nowrap; white-space: nowrap; padding-right: 1.4rem; }
.ch-app .fc .fc-ev-dot { flex: none; width: 6px; height: 6px; border-radius: 9999px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }
.ch-app .fc .fc-ev-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ch-app .fc .fc-ev-bot { position: absolute; right: 8px; bottom: 6px; font-size: .7rem; opacity: .75; }
.ch-app .fc .fc-daygrid-event .fc-ev-bot { right: 10px; bottom: 50%; transform: translateY(50%); }

/* logo do menu: centralizado na faixa do topo (mesma altura da barra superior), com folga em cima e embaixo */
.ch-sidebar-brand { justify-content: center; padding: 0 1rem; }
.ch-sidebar-brand img.ch-logo-light, .ch-sidebar-brand img.ch-logo-dark { height: 58px; max-width: 100%; object-fit: contain; }
.ch-sidebar-brand img.ch-logo-sym { height: 52px; }

/* tema: lua no claro, sol no escuro; avatar do usuário */
.ch-theme-sun { display: none; }
html.dark .ch-theme-sun { display: inline; }
html.dark .ch-theme-moon { display: none; }
.ch-avatar { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ch-border-strong); background: var(--ch-primary-soft); color: var(--ch-primary-fg);
  font: 700 .9rem var(--ch-font); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-left: .35rem; }
.ch-avatar:hover { border-color: var(--ch-primary); }

/* botão que vira só ícone abaixo de sm (partials/button com iconOnly: 'mobile'); ícone das ações de linha */
@media (max-width: 639px) { .ch-btn.ch-btn-icon-mobile { width: var(--ch-control-h); padding: 0; gap: 0; } .ch-btn-sm.ch-btn-icon-mobile { width: var(--ch-control-h-sm); } }
.ch-action > i { font-size: .9rem; }
.ch-btn > i { font-size: .85em; }

/* botão "Filtros" (partials/filters/toggle): azul-claro com contador quando há filtro ativo; chip de filtro ativo como link; seletor aplicado */
.ch-btn.ch-btn-filter.is-on { background: var(--ch-primary-soft); }
.ch-btn.ch-btn-filter .ch-dd-caret { margin-left: .1rem; transition: transform .2s; }
.ch-filter-chip { text-decoration: none; }
.ch-filter-chip > i:last-child { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; border-radius: 50%; }
.ch-filter-chip:hover > i:last-child { background: rgba(255, 255, 255, .5); }
.ch-filter-chip > i:first-child { font-size: .75rem; }
.ch-dd > summary { font-size: .875rem; }
.ch-dd .ch-dd-foot .ch-btn { height: 34px; }
.ch-menu-sep[data-dropdown-sep][hidden] { display: none; }

/* Select2 dentro da barra de filtros: mesma pílula do dropdown de filtro (ch-dd), para os controles da barra ficarem iguais */
.ch-app [data-filter-panel] .select2-container--default .select2-selection--single,
.ch-app [data-cal-filter-panel] .select2-container--default .select2-selection--single { border-radius: var(--ch-radius-pill); min-height: var(--ch-control-h); }
.ch-app [data-filter-panel] .select2-container--default .select2-selection--single .select2-selection__rendered,
.ch-app [data-cal-filter-panel] .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: .875rem; font-weight: 500; }
.ch-app [data-filter-panel] .select2-container--default .select2-selection--single .select2-selection__arrow b,
.ch-app [data-cal-filter-panel] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-width: 5px 4px 0 4px; }

/* ============================================================ Telas ainda não migradas: componentes compartilhados pelos mesmos nomes de classe */
/* paginação solta (fora do cartão da tabela): vira um cartão */
.ch-pagination.ch-pagination-card { background: var(--ch-surface); border: 1px solid var(--ch-border); border-radius: var(--ch-radius-card); box-shadow: var(--ch-shadow-card); }
.ch-pagination strong { color: var(--ch-text-strong); font-weight: 700; }
.ch-per-page .ch-select { min-width: 4.5rem; padding-right: 2rem; border-radius: var(--ch-radius-pill); }
/* ordenação: cabeçalho de coluna */
.ch-table th .ch-sort, th .ch-sort { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; color: inherit; }
th .ch-sort:hover, th .ch-sort.is-active { color: var(--ch-primary-fg); }
/* chips antigos (fin-chip-*, usados nas telas atuais) com o visual do design system */
.fin-chip { display: inline-flex; align-items: center; gap: .3rem; height: 24px; padding: 0 .65rem; border-radius: var(--ch-radius-pill); border: 1px solid transparent;
  font-size: .75rem; line-height: 1; font-weight: 500; white-space: nowrap; }
.fin-chip-indigo { background: var(--ch-primary-soft); color: var(--ch-primary-fg); border-color: transparent; }
.fin-chip-purple { background: rgba(147, 51, 234, .1); color: #7e22ce; border-color: transparent; }
.fin-chip-slate { background: var(--ch-surface-2); color: var(--ch-text-muted); border-color: var(--ch-border); }
.fin-chip-emerald { background: var(--ch-success-soft); color: var(--ch-success); border-color: transparent; }
.fin-chip-amber { background: var(--ch-warning-soft); color: var(--ch-warning); border-color: transparent; }
html.dark .fin-chip-purple { background: rgba(192, 132, 252, .14); color: #d8b4fe; }
/* chip de status (inline, cor do cadastro): mesma altura dos demais */
span.inline-flex.rounded-full.border[style*="background-color"] { line-height: 1; }
/* modais [data-modal] (FinclinModal): fundo, caixa, borda e sombra do design system, sem editar cada tela */
.ch-app [data-modal] { background: rgba(11, 17, 32, .55); }
.ch-app [data-modal] > div { background: var(--ch-surface); color: var(--ch-text); border: 1px solid var(--ch-border); border-radius: var(--ch-radius-card); box-shadow: var(--ch-shadow-pop); }
.ch-app [data-modal] > div > div:first-child { border-color: var(--ch-border); }
.ch-app [data-modal] h3 { color: var(--ch-text-strong); }

/* campo inválido em formulários antigos (inputs Tailwind): borda vermelha e mensagem embaixo */
.ch-app input[aria-invalid="true"], .ch-app select[aria-invalid="true"], .ch-app textarea[aria-invalid="true"] { border-color: var(--ch-danger) !important; }
.ch-app .ch-error { margin-top: .3rem; }
.ch-app .select2-container + .ch-error { margin-top: .3rem; }
.ch-app [data-modal] .ch-form-summary { margin-bottom: .75rem; }

/* busca da barra de filtros: pílula, igual aos dropdowns e ao período */
.ch-input-group.ch-search .ch-input { border-radius: var(--ch-radius-pill); padding-left: 2.5rem; }
.ch-input-group.ch-search > i { left: 1rem; }

/* indicador de ordenação: sempre visível (neutro) nas colunas ordenáveis; mais forte ao passar o mouse; seta azul na coluna ativa */
.ch-sort .ch-sort-idle { opacity: .45; transition: opacity .15s; }
.ch-sort:hover .ch-sort-idle, .ch-sort:focus-visible .ch-sort-idle { opacity: .9; color: var(--ch-primary-fg); }
.ch-sort.is-active > i { color: var(--ch-primary-fg); opacity: 1; }

/* interruptor em forma de link (ex.: "Cancelados e faltas" na lista): mesmo visual do ch-switch, estado pela classe is-on */
.ch-switch-link { text-decoration: none; color: var(--ch-text); }
.ch-switch-link .ch-switch-track.is-on { background: var(--ch-primary); }
.ch-switch-link .ch-switch-track.is-on::after { transform: translateX(18px); }
.ch-switch-link:focus-visible .ch-switch-track { box-shadow: var(--ch-focus); }
/* opção em cartão (rádio de formato no modal de exportação) */
.ch-option { display: flex; align-items: center; gap: .55rem; padding: .65rem .85rem; border: 1px solid var(--ch-border-strong); border-radius: var(--ch-radius-field); cursor: pointer; font-size: .9rem; }
.ch-option:hover { background: var(--ch-hover); }
.ch-option:has(input:checked) { border-color: var(--ch-primary); background: var(--ch-primary-soft); }
.ch-option input { accent-color: var(--ch-primary); }
/* linha/cartão clicável (data-row-open / data-row-href) */
[data-row-open], [data-row-href] { cursor: pointer; }
article[data-row-open]:hover { border-color: var(--ch-primary); }

/* tabela mais compacta (listas largas como a de compromissos): menos espaço lateral nas células */
.ch-table th, .ch-table td { padding-left: .8rem; padding-right: .8rem; }

/* ============================================ Agenda: modais de agendamento (novo/editar e detalhe) */
.ch-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border: 1px solid var(--ch-border-strong); border-radius: var(--ch-radius-pill); background: var(--ch-surface); height: var(--ch-control-h); }
.ch-segment label { display: flex; align-items: center; justify-content: center; border-radius: var(--ch-radius-pill); cursor: pointer; font-size: .875rem; font-weight: 500; color: var(--ch-text-muted); }
.ch-segment label:has(input:checked) { background: var(--ch-primary); color: var(--ch-on-primary); font-weight: 600; }
.ch-segment label:has(input:focus-visible) { box-shadow: var(--ch-focus); }
.ch-section-title { margin-bottom: .5rem; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ch-text-subtle); }
.ch-dl { display: grid; grid-template-columns: 7rem 1fr; gap: .4rem .75rem; font-size: .875rem; }
.ch-dl dt { color: var(--ch-text-muted); }
.ch-dl dd { color: var(--ch-text); }
.ch-history { display: grid; gap: .6rem; font-size: .875rem; padding-left: .85rem; border-left: 2px solid var(--ch-border); }
.ch-status-btn { height: 30px; padding: 0 .85rem; border-radius: var(--ch-radius-pill); border: 1px solid; background: transparent; font: 600 .8125rem var(--ch-font); cursor: pointer; transition: background-color .15s; }
.ch-status-btn:hover { background: var(--ch-hover); }
.ch-slot { height: 30px; padding: 0 .8rem; border-radius: var(--ch-radius-pill); border: 1px solid var(--ch-success); color: var(--ch-success); background: transparent; font: 600 .8125rem var(--ch-font); cursor: pointer; }
.ch-slot:hover, .ch-slot:focus-visible { background: var(--ch-success-soft); outline: none; }
.ch-slots { border: 1px solid var(--ch-border); border-radius: var(--ch-radius-field); overflow: hidden; }
.ch-slots > details + details { border-top: 1px solid var(--ch-border); }
.ch-slots-head { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .85rem; user-select: none; }
.ch-slots-head::-webkit-details-marker { display: none; }
.ch-slots-head:hover { background: var(--ch-hover); }
.ch-text-warn { color: var(--ch-warning); }

/* lista de compromissos em notebook: células compactas e chips que quebram linha sem alargar a tabela */
[data-agenda-list] .ch-table { font-size: .8125rem; }
[data-agenda-list] .ch-table th, [data-agenda-list] .ch-table td { padding: .7rem .6rem; }
[data-agenda-list] .ch-table .ch-chip { white-space: normal; height: auto; min-height: 22px; padding-top: .1rem; padding-bottom: .1rem; line-height: 1.2; }
[data-agenda-list] .ch-table .ch-col-num { width: 2rem; }
[data-agenda-list] .ch-table .ch-col-actions { width: 1%; }

/* período dentro da barra de filtros: preenche as colunas da grade (sem a largura máxima do uso avulso), sem deixar espaço vazio ao lado */
[data-filter-panel] .ch-daterange, [data-cal-filter-panel] .ch-daterange, .ch-filter-grid .ch-daterange { max-width: none; width: 100%; }
[data-filter-panel] > *, [data-cal-filter-panel] > * { min-width: 0; }

/* campo escondido pelo atributo hidden some de verdade (.ch-field usa display:flex, que vencia o hidden do navegador) */
.ch-field[hidden], label.ch-field[hidden], [data-plan-field][hidden], [data-status-field][hidden] { display: none !important; }

/* formulário do agendamento: campos do tamanho do texto (classes próprias, sem depender de classes novas do Tailwind) */
.ch-w-date { width: 8.5rem; flex: none; }   /* DD/MM/AAAA + ícone do calendário */
.ch-w-time { width: 4.75rem; flex: none; }  /* HH:MM */
.ch-w-segment { width: 12rem; flex: none; } /* Particular | Convênio */
.ch-w-plan { flex: 1 1 12rem; min-width: 12rem; }
.ch-w-time .ch-input, .ch-w-time input { padding-left: .5rem; padding-right: .5rem; text-align: center; }
.ch-w-date .ch-input { padding-left: .75rem; }
.ch-row-prof { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 640px) { .ch-row-prof.has-location { grid-template-columns: 1fr 15rem; } }

/* botão de disponibilidade do agendamento: compacto, alinhado ao fundo dos campos da linha (altura dos campos de 42 px) */
.ch-btn.ch-btn-slots { height: var(--ch-control-h); padding: 0 .9rem; }

/* mensagens de erro de campos estreitos (data, início, fim): ficam logo abaixo, sem quebrar linha e sem mexer no alinhamento da linha */
.ch-field { position: relative; }
.ch-w-date > .ch-error, .ch-w-time > .ch-error { position: absolute; top: 100%; left: 0; margin-top: .25rem; white-space: nowrap; }
.ch-row-times:has(.ch-w-date > .ch-error:not(:empty), .ch-w-time > .ch-error:not(:empty)) { padding-bottom: 1.5rem; }
/* paciente + botão "Novo": o botão alinha com o campo (não com a mensagem de erro embaixo dele) */
.ch-row-patient { display: flex; align-items: flex-start; gap: .5rem; }
.ch-row-patient > .ch-btn { margin-top: 1.65rem; }

/* botão escondido pelo atributo hidden some de verdade (.ch-btn usa display:inline-flex) */
.ch-btn[hidden] { display: none !important; }

/* tabela compacta (listas largas: compromissos e atendimentos) */
.ch-table.is-compact { font-size: .8125rem; }
.ch-table.is-compact th, .ch-table.is-compact td { padding: .7rem .6rem; }
.ch-table.is-compact .ch-chip { white-space: normal; height: auto; min-height: 22px; padding-top: .1rem; padding-bottom: .1rem; line-height: 1.2; }
.ch-table.is-compact .ch-col-num { width: 2rem; }
article[data-row-href]:hover { border-color: var(--ch-primary); }

/* bloco recolhível (<details class="ch-details">): resumo em linha com a seta; conteúdo só ao expandir */
.ch-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem .9rem;
  border: 1px solid var(--ch-border); border-radius: var(--ch-radius-field); background: var(--ch-surface-2); font-weight: 600; font-size: .875rem; user-select: none; }
.ch-details > summary::-webkit-details-marker { display: none; }
.ch-details > summary:hover { background: var(--ch-hover); }
.ch-details[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ch-details[open] > summary .ch-dd-caret { transform: rotate(180deg); }
.ch-details > :not(summary) { padding: 0 .25rem; }

/* campo do convênio (e semelhantes): largura própria, não a linha inteira */
.ch-w-plan { flex: 0 1 18rem; min-width: 12rem; max-width: 100%; }

/* ============================================ <select> nativo no design system, em todo o sistema (claro/escuro por tokens)
   Vale para qualquer select sem Select2 (ex.: o do diálogo "Converter em plano" do SweetAlert, selects antigos das telas). Select com busca = data-select (Select2). */
.ch-app select:not([data-select]):not(.select2-hidden-accessible):not([multiple]),
.ch-app .swal2-select {
  -webkit-appearance: none; appearance: none;
  min-height: var(--ch-control-h); padding: 0 2.4rem 0 .9rem; border-radius: var(--ch-radius-field);
  background-color: var(--ch-surface); color: var(--ch-text); border: 1px solid var(--ch-border-strong);
  font: 400 .9375rem var(--ch-font); box-shadow: none; cursor: pointer;
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a94a6' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  transition: border-color .15s, box-shadow .15s;
}
.ch-app select:not([data-select]):not(.select2-hidden-accessible):not([multiple]):hover, .ch-app .swal2-select:hover { border-color: var(--ch-text-subtle); }
.ch-app select:not([data-select]):not(.select2-hidden-accessible):not([multiple]):focus, .ch-app .swal2-select:focus {
  outline: none; border-color: var(--ch-primary); box-shadow: var(--ch-focus); }
.ch-app select:not([data-select]):not(.select2-hidden-accessible):not([multiple]):disabled { background-color: var(--ch-surface-2); color: var(--ch-text-subtle); cursor: not-allowed; }
.ch-app .swal2-select { width: 100%; margin: 1rem auto 0; max-width: 100%; }
.ch-app select option { background: var(--ch-surface); color: var(--ch-text); }
/* "Por página" da paginação: pílula e compacto (sobrescreve o padrão acima) */
.ch-app .ch-per-page select { min-height: 34px; border-radius: var(--ch-radius-pill); padding: 0 2rem 0 .85rem; font-size: .8125rem; width: auto; }
/* campos escuros do SweetAlert (entrada de texto) com o mesmo padrão */
.ch-app .swal2-input { margin: 1rem auto 0; max-width: 100%; }

/* diálogo com select estilizado (FinclinSwal.escolher): a lista do Select2 abre dentro do diálogo, sem ser cortada */
.ch-app .swal2-popup.ch-swal-visible { overflow: visible; }
.ch-swal-field { margin-top: 1rem; text-align: left; }
.ch-swal-field .select2-container { width: 100% !important; }
.ch-app .swal2-popup .select2-dropdown { z-index: 1100; }

/* lista com divisórias finas e caixa com borda (telas de detalhe) */
.ch-list > li + li { border-top: 1px solid var(--ch-border); }
.ch-box { border: 1px solid var(--ch-border); border-radius: var(--ch-radius-field); }

/* mensagem de erro escondida pela classe hidden (telas antigas alternam essa classe) */
.ch-error.hidden { display: none; }

/* ============================================ Planos de tratamento: linha do tempo das etapas */
.ch-step { display: flex; flex-direction: column; align-items: center; text-align: center; width: 5rem; padding: 0; border: 0; background: transparent; color: var(--ch-text); cursor: pointer; border-radius: var(--ch-radius-sm); }
.ch-step:focus-visible { outline: none; box-shadow: var(--ch-focus); }
.ch-step-dot { position: relative; z-index: 10; display: flex; height: 2rem; width: 2rem; align-items: center; justify-content: center; border-radius: 9999px; margin: 0 auto;
  box-shadow: 0 0 0 3px var(--ch-surface); transition: transform .15s; }
.ch-step:hover .ch-step-dot { transform: scale(1.1); }
.ch-step-empty { background: var(--ch-surface-2); border: 2px dashed var(--ch-border-strong); }
.ch-step-icon { color: #fff; }

/* abas que são links de página (ex.: Agenda → Clínica | Profissionais…): a página atual leva aria-current */
.ch-tab[aria-current="page"] { background: var(--ch-primary-soft); color: var(--ch-primary-fg); font-weight: 600; }
.ch-tabs-line .ch-tab[aria-current="page"] { background: transparent; border-bottom-color: var(--ch-primary); }
a.ch-tab { text-decoration: none; }
/* barra de título de um cartão com ações (divisória embaixo) e rodapé com ações (divisória em cima) */
.ch-card-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ch-border); }
.ch-card-foot { padding: 1rem 1.25rem; border-top: 1px solid var(--ch-border); }
.ch-link-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .375rem .75rem; border: 0; border-radius: var(--ch-radius-field); background: transparent; color: var(--ch-primary-fg); font: 500 .875rem var(--ch-font); cursor: pointer; white-space: nowrap; }
.ch-link-btn:hover { background: var(--ch-primary-soft); }
.ch-link-btn:focus-visible { outline: none; box-shadow: var(--ch-focus); }

/* ============================================================ Envio de arquivo — [data-ch-file] */
.ch-file { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1.5px dashed var(--ch-border-strong); border-radius: var(--ch-radius-card); background: var(--ch-surface-2);
  transition: border-color .15s, background-color .15s; }
.ch-file.is-drag { border-color: var(--ch-primary); background: var(--ch-primary-soft); }
.ch-file.is-invalid { border-color: var(--ch-danger); }
.ch-file-preview { width: 88px; height: 88px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--ch-radius-field);
  background: var(--ch-surface); border: 1px solid var(--ch-border); color: var(--ch-text-subtle); font-size: 1.6rem; }
.ch-file-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ch-file-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.ch-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ch-file-input:focus-visible + .ch-file-body .ch-btn, .ch-file:focus-within .ch-file-body .ch-btn { box-shadow: var(--ch-focus); }
.ch-file-name { max-width: 100%; font-size: .875rem; color: var(--ch-text); overflow-wrap: anywhere; }
.ch-file-hint { font-size: .75rem; color: var(--ch-text-muted); }
@media (max-width: 480px) { .ch-file { flex-direction: column; align-items: stretch; text-align: center; } .ch-file-preview { margin: 0 auto; } .ch-file-body { align-items: center; } }

/* controles compactos (linhas de horário, conferência de horários): 36px, uma linha */
.ch-compact { --ch-control-h: 36px; }
.ch-compact .ch-input { height: 36px; padding-top: 0; padding-bottom: 0; font-size: .875rem; }
.ch-app .ch-compact .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: .875rem; }
/* multi-seleção compacta: começa com 36px e cresce para baixo para acomodar os chips; o texto "Todos…" fica à esquerda */
.ch-app .ch-compact .select2-container--default .select2-selection--multiple { min-height: 36px; height: auto; padding: 0 .4rem; }
.ch-app .ch-compact .select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 0; display: block; text-align: left; }
.ch-app .ch-compact .select2-container--default .select2-selection--multiple .select2-selection__choice { margin: 3px 4px 3px 0; font-size: .8125rem; }
.ch-app .ch-compact .select2-container--default .select2-search--inline { float: left; }
.ch-app .ch-compact .select2-container--default .select2-search--inline .select2-search__field { margin: 0; height: 34px; line-height: 34px; font-size: .875rem; text-align: left; }

/* painéis de abas escondidos pelo atributo hidden somem de verdade, mesmo com utilitários de display (flex/grid) no elemento */
[role="tabpanel"][hidden] { display: none !important; }

/* telas com classes de borda do Tailwind (border, border-b…): a cor da borda segue o tema */
.ch-borders :where(.border, .border-t, .border-b, .border-l, .border-r, .border-y, .border-2, .border-b-2, .border-l-4, table, thead, tbody, tr, th, td) { border-color: var(--ch-border); }
.ch-divide > * + * { border-top: 1px solid var(--ch-border); }

/* ============================================================ Matizes para telas com cores por significado (dashboard, prontuário): ch-c-* texto, ch-bg-* fundo suave,
   ch-bd-* borda suave, ch-grad-* degradê de bloco, ch-bl-* faixa lateral (com border-l-4). Claro usa o tom 600; escuro, o 400. */
:root { --h-blue: #2563eb; --h-green: #16a34a; --h-red: #dc2626; --h-indigo: #4f46e5; --h-purple: #9333ea; --h-amber: #d97706; --h-orange: #ea580c; --h-emerald: #059669; --h-yellow: #ca8a04; --h-pink: #db2777; --h-teal: #0d9488; --h-violet: #7c3aed; }
html.dark { --h-blue: #60a5fa; --h-green: #4ade80; --h-red: #f87171; --h-indigo: #a5b4fc; --h-purple: #c084fc; --h-amber: #fbbf24; --h-orange: #fb923c; --h-emerald: #34d399; --h-yellow: #facc15; --h-pink: #f472b6; --h-teal: #2dd4bf; --h-violet: #a78bfa; }
.ch-c-blue { color: var(--h-blue); }
.ch-bg-blue { background: color-mix(in srgb, var(--h-blue) 14%, var(--ch-surface)); }
.ch-bd-blue { border-color: color-mix(in srgb, var(--h-blue) 30%, var(--ch-surface)); }
.ch-grad-blue { background: linear-gradient(to bottom right, color-mix(in srgb, var(--h-blue) 8%, var(--ch-surface)), color-mix(in srgb, var(--h-blue) 18%, var(--ch-surface))); }
.ch-bl-blue { border-left-color: var(--h-blue); }
.ch-c-green { color: var(--h-green); }
.ch-bg-green { background: color-mix(in srgb, var(--h-green) 14%, var(--ch-surface)); }
.ch-bd-green { border-color: color-mix(in srgb, var(--h-green) 30%, var(--ch-surface)); }
.ch-grad-green { background: linear-gradient(to bottom right, color-mix(in srgb, var(--h-green) 8%, var(--ch-surface)), color-mix(in srgb, var(--h-green) 18%, var(--ch-surface))); }
.ch-bl-green { border-left-color: var(--h-green); }
.ch-c-red { color: var(--h-red); }
.ch-bg-red { background: color-mix(in srgb, var(--h-red) 14%, var(--ch-surface)); }
.ch-bd-red { border-color: color-mix(in srgb, var(--h-red) 30%, var(--ch-surface)); }
.ch-grad-red { background: linear-gradient(to bottom right, color-mix(in srgb, var(--h-red) 8%, var(--ch-surface)), color-mix(in srgb, var(--h-red) 18%, var(--ch-surface))); }
.ch-bl-red { border-left-color: var(--h-red); }
.ch-c-indigo { color: var(--h-indigo); }
.ch-bg-indigo { background: color-mix(in srgb, var(--h-indigo) 14%, var(--ch-surface)); }
.ch-bd-indigo { border-color: color-mix(in srgb, var(--h-indigo) 30%, var(--ch-surface)); }
.ch-grad-indigo { background: linear-gradient(to bottom right, color-mix(in srgb, var(--h-indigo) 8%, var(--ch-surface)), color-mix(in srgb, var(--h-indigo) 18%, var(--ch-surface))); }
.ch-bl-indigo { border-left-color: var(--h-indigo); }
.ch-c-purple { color: var(--h-purple); }
.ch-bg-purple { background: color-mix(in srgb, var(--h-purple) 14%, var(--ch-surface)); }
.ch-bd-purple { border-color: color-mix(in srgb, var(--h-purple) 30%, var(--ch-surface)); }
.ch-grad-purple { background: linear-gradient(to bottom right, color-mix(in srgb, var(--h-purple) 8%, var(--ch-surface)), color-mix(in srgb, var(--h-purple) 18%, var(--ch-surface))); }
.ch-bl-purple { border-left-color: var(--h-purple); }
.ch-c-amber { color: var(--h-amber); }
.ch-bg-amber { background: color-mix(in srgb, var(--h-amber) 14%, var(--ch-surface)); }
.ch-bd-amber { border-color: color-mix(in srgb, var(--h-amber) 30%, var(--ch-surface)); }
.ch-grad-amber { background: linear-gradient(to bottom right, color-mix(in srgb, var(--h-amber) 8%, var(--ch-surface)), color-mix(in srgb, var(--h-amber) 18%, var(--ch-surface))); }
.ch-bl-amber { border-left-color: var(--h-amber); }
.ch-c-orange { color: var(--h-orange); }
.ch-bg-orange { background: color-mix(in srgb, var(--h-orange) 14%, var(--ch-surface)); }
.ch-bd-orange { border-color: color-mix(in srgb, var(--h-orange) 30%, var(--ch-surface)); }
.ch-grad-orange { background: linear-gradient(to bottom right, color-mix(in srgb, var(--h-orange) 8%, var(--ch-surface)), color-mix(in srgb, var(--h-orange) 18%, var(--ch-surface))); }
.ch-bl-orange { border-left-color: var(--h-orange); }
.ch-c-emerald { color: var(--h-emerald); }
.ch-bg-emerald { background: color-mix(in srgb, var(--h-emerald) 14%, var(--ch-surface)); }
.ch-bd-emerald { border-color: color-mix(in srgb, var(--h-emerald) 30%, var(--ch-surface)); }
.ch-grad-emerald { background: linear-gradient(to bottom right, color-mix(in srgb, var(--h-emerald) 8%, var(--ch-surface)), color-mix(in srgb, var(--h-emerald) 18%, var(--ch-surface))); }
.ch-bl-emerald { border-left-color: var(--h-emerald); }
.ch-c-yellow { color: var(--h-yellow); }
.ch-bg-yellow { background: color-mix(in srgb, var(--h-yellow) 14%, var(--ch-surface)); }
.ch-bd-yellow { border-color: color-mix(in srgb, var(--h-yellow) 30%, var(--ch-surface)); }
.ch-grad-yellow { background: linear-gradient(to bottom right, color-mix(in srgb, var(--h-yellow) 8%, var(--ch-surface)), color-mix(in srgb, var(--h-yellow) 18%, var(--ch-surface))); }
.ch-bl-yellow { border-left-color: var(--h-yellow); }
.ch-c-pink { color: var(--h-pink); }
.ch-bg-pink { background: color-mix(in srgb, var(--h-pink) 14%, var(--ch-surface)); }
.ch-bd-pink { border-color: color-mix(in srgb, var(--h-pink) 30%, var(--ch-surface)); }
.ch-grad-pink { background: linear-gradient(to bottom right, color-mix(in srgb, var(--h-pink) 8%, var(--ch-surface)), color-mix(in srgb, var(--h-pink) 18%, var(--ch-surface))); }
.ch-bl-pink { border-left-color: var(--h-pink); }
.ch-c-teal { color: var(--h-teal); }
.ch-bg-teal { background: color-mix(in srgb, var(--h-teal) 14%, var(--ch-surface)); }
.ch-bd-teal { border-color: color-mix(in srgb, var(--h-teal) 30%, var(--ch-surface)); }
.ch-grad-teal { background: linear-gradient(to bottom right, color-mix(in srgb, var(--h-teal) 8%, var(--ch-surface)), color-mix(in srgb, var(--h-teal) 18%, var(--ch-surface))); }
.ch-bl-teal { border-left-color: var(--h-teal); }
.ch-c-violet { color: var(--h-violet); }
.ch-bg-violet { background: color-mix(in srgb, var(--h-violet) 14%, var(--ch-surface)); }
.ch-bd-violet { border-color: color-mix(in srgb, var(--h-violet) 30%, var(--ch-surface)); }
.ch-grad-violet { background: linear-gradient(to bottom right, color-mix(in srgb, var(--h-violet) 8%, var(--ch-surface)), color-mix(in srgb, var(--h-violet) 18%, var(--ch-surface))); }
.ch-bl-violet { border-left-color: var(--h-violet); }
.ch-grad-gray { background: linear-gradient(to bottom right, var(--ch-surface-2), var(--ch-hover)); }
.ch-surface { background: var(--ch-surface); }
.ch-surface-2 { background: var(--ch-surface-2); }
.ch-surface-3 { background: var(--ch-hover); }
.ch-hover-bg:hover { background: var(--ch-hover); }

/* Faixa do modo suporte (MASTER numa clínica): fixa no topo, acima do menu e do conteúdo */
.ch-support-banner { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; padding: .5rem 1rem; background: var(--ch-warning-soft, #fef3c7); color: var(--ch-warning, #92400e); border-bottom: 1px solid var(--ch-warning, #f59e0b); font-size: .875rem; }
.ch-support-text { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ch-support-actions { display: flex; flex-wrap: wrap; gap: .5rem; }