/* ============================================================================
 * mobro-tokens.css
 * Design system base do MobRo — tokens + classes compartilhadas.
 *
 * Carregado por src/index.php (após os CSS legados, antes do </head>).
 * Path: src/css/mobro-tokens.css  →  /css/mobro-tokens.css  (root-relative)
 *
 * Estratégia: shim híbrido (ver infra/docs/mobro-tokens-fatoracao.md).
 *   - Bloco 1: tokens `--p-*` em :root (inclui override de tema escuro,
 *     seletor `html[data-theme="dark"]`, logo abaixo do :root claro)
 *   - Bloco 2: classes base `.mob-*`
 *   - Bloco 3: shim de aliases `.pac-*` / `.sac-*` / `.sag-*`
 *   - Bloco 4: skin jqxGrid (sobrescreve jqx.metro.css com tokens MobRo)
 *
 * Origem canônica das regras: saude/paciente/management.html
 * (módulo mais completo, Allan já validou visualmente).
 *
 * NÃO introduzir tooling (SASS, build, @extend). CSS puro, edit-file-refresh.
 * ========================================================================== */

/* ── Bloco 1: Tokens ────────────────────────────────────────────────────── */
:root {
    --p-blue:       #1a6b7c;
    --p-blue-lt:    #e6f2f5;
    --p-blue-strong: #006699;   /* cor da navbar (--nav-bg) — uso em header de grid, badge forte, etc */
    --p-green:      #1e9e72;
    --p-green-lt:   #e4f5ef;
    --p-amber:      #d4722a;
    --p-amber-lt:   #fdf0e6;
    --p-purple:     #6452aa;
    --p-purple-lt:  #efecf8;
    --p-slate:      #3d5a7a;
    --p-slate-lt:   #eaeff5;
    --p-dark:       #2d3748;
    --p-dark-lt:    #edf2f7;
    --p-teal:       #0d7070;
    --p-teal-lt:    #e3f0f0;
    --p-danger:     #c94040;
    --p-danger-lt:  #fdf0f0;
    --p-bg:         #eef1f5;
    --p-card:       #ffffff;
    --p-border:     #dde3ec;
    --p-text:       #1a202c;
    --p-muted:      #64748b;
    /* Pares CLAROS de tokens que a feature 007 criou só no bloco dark
     * (ver specs/008-tema-dark-cobertura-total/research.md, Decisão 1).
     * Sem eles, `var(--p-card-2)` usado FORA do escopo dark computa valor
     * inválido no tema claro → a propriedade cai pro valor inicial (ex.:
     * `background: transparent`), que era o bug do hover dos botões
     * neutros/cancelar. Valores escolhidos são os que o próprio arquivo já
     * usava hardcoded pra esse papel — tema claro não muda. */
    --p-card-2:     #f4f6f9;   /* superfície nível 2: modal, campo desabilitado, hover neutro */
    --p-border-strong: #cbd5e1; /* borda de repouso de campo / botão neutro */
    --p-row-alt:    #fafbfd;   /* linha ímpar de grid (zebra) */
    /* Fundo da coluna ordenada/filtrada do grid (jqxGrid `-sort-metro`).
     * O skin metro usava #EFF3F8, indistinguível da célula branca
     * ("se há mudança de cor ao reordenar não é perceptível"). Este é o
     * azul claro do design system — marcação visível de relance. */
    --p-grid-sort-bg: #dbeafe;
    /* Borda pálida de selo de título. No claro é um tom lavado do acento; no
     * escuro o fundo do selo já é `--p-*-lt` (superfície escura tingida) e a
     * borda legível passa a ser o próprio acento — por isso é par, não
     * "a mesma cor mais escura". */
    --p-blue-bd:    #b8d8e2;
    --p-amber-bd:   #f0c9a0;
    --p-green-bd:   #9fd9c4;
    --p-radius:     12px;
    --p-radius-sm:  7px;
    --p-shadow:     0 1px 3px rgba(0,0,0,.07), 0 4px 12px rgba(0,0,0,.04);
    --p-ring:       0 0 0 3px rgba(26,107,124,.18);
    /* Realce de linha de grid (jqxGridMain.js `cellsrenderer`, pendência/
     * ponto de embarque) — usado via `element.css('background-color', 'var(--p-highlight-...)')`
     * no JS, em vez de hex fixo, pra reagir ao tema sem duplicar lógica. */
    --p-highlight-pendencia: #FFE0B2;
    --p-highlight-embarque:  #FFDFBA;
    --p-highlight-embarque-alt: #b7dfff46;
}

/* ── Tema escuro (Dark Soft) — override dos tokens ───────────────────────────
 * Ativado via <html data-theme="dark"> (ver script síncrono em index.php).
 * Paleta base Slate/Navy (ver specs/007-tema-dark-soft-global/) — reduz
 * ofuscamento (sem preto absoluto), pensada p/ jornadas longas de tela.
 * --p-blue-strong NÃO é redefinido: já tem contraste alto contra fundo
 * escuro e amarra visualmente grids/badges à navbar (que fica fixa).
 * Cores semânticas: clareadas (não invertidas), mesma família de matiz;
 * --p-danger foi ajustado (#fca5a5, não o valor literal da paleta de
 * referência) pra manter 4.5:1 de contraste — o valor de referência falhava
 * WCAG AA pra texto normal.
 * `-lt`: em claro é tint pálido de fundo; em escuro vira superfície escura
 * com tint, cor base passa a ser o primeiro plano legível sobre ela.
 * --p-card-2 e --p-border-strong são tokens novos desta feature (nível 2 de
 * elevação p/ modais/popovers/disabled, e borda de repouso de input) — sem
 * par no tema claro, ver specs/007-tema-dark-soft-global/data-model.md. */
html[data-theme="dark"] {
    --p-blue:       #38bdf8;
    --p-blue-lt:    #1e3a8a;
    --p-green:      #4ade80;
    --p-green-lt:   #14532d;
    --p-amber:      #facc15;
    --p-amber-lt:   #713f12;
    --p-purple:     #9d8ce0;
    --p-purple-lt:  #2a2440;
    --p-slate:      #7f9dc0;
    --p-slate-lt:   #1d2836;
    --p-dark:       #aab4c4;
    --p-dark-lt:    #232b38;
    --p-teal:       #35b3ac;
    --p-teal-lt:    #123333;
    --p-danger:     #fca5a5;
    --p-danger-lt:  #7f1d1d;
    --p-bg:         #1e293b;
    --p-card:       #334155;
    --p-card-2:     #475569;
    --p-row-alt:    #283548; /* linha ímpar do grid (zebra striping), ver Bloco 4 */
    --p-grid-sort-bg: rgba(56,189,248,.18); /* coluna ordenada: azul do tema sobre --p-card */
    --p-border:     #475569;
    --p-border-strong: #64748b;
    --p-text:       #f8fafc;
    --p-muted:      #94a3b8;
    --p-blue-bd:    var(--p-blue);
    --p-amber-bd:   var(--p-amber);
    --p-green-bd:   var(--p-green);
    --p-shadow:     0 2px 4px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.35);
    --p-ring:       0 0 0 3px rgba(56,189,248,.35);
    --p-highlight-pendencia: #4a3018;
    --p-highlight-embarque:  #223347;
    --p-highlight-embarque-alt: rgba(96,165,250,.15);
}

/* ── Tema escuro — cobertura global (chrome de vendor) ───────────────────────
 * Cobre elementos fora do design system novo (ace.css/Bootstrap/jQuery UI)
 * que não consomem --p-* nativamente. `html[data-theme="dark"] <seletor>`
 * vence o seletor solto desses arquivos por especificidade (carregados antes
 * deste, ver cabeçalho do arquivo) — sem precisar de !important. NÃO editar
 * ace.css/bootstrap.css/jquery-ui diretamente (constitution.md seção II).
 * Ver specs/007-tema-dark-soft-global/{spec,data-model}.md. */

/* Camada base: fundo geral da página (resolve a tela inicial, que não usa
 * #contentSection/#templateIndexModules, e serve de rede de segurança p/
 * qualquer view ainda não migrada pro design system novo). */
html[data-theme="dark"] body,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] .main-container,
html[data-theme="dark"] .main-container:after {
    background: var(--p-bg);
    color: var(--p-text);
}

/* Camada de formulário: todo input de texto/data/etc (classado ou não) +
 * select/textarea/.form-control do Bootstrap. Exclui tipos que não são
 * campo de texto (checkbox/radio/file/range/etc. — mesmo critério que
 * ace.css já usa pros próprios seletores, ver ace.css:7731-7746) pra não
 * quebrar a aparência nativa desses controles.
 * Profundidade invertida: fundo mais escuro que o card ao redor
 * (var(--p-bg), não var(--p-card)) — reforça a percepção de campo
 * preenchível, ver specs/007-tema-dark-soft-global/research.md decisão 2. */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="range"]):not([type="hidden"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control {
    /* !important: `ace.css:7822` tem `textarea.form-control { background-
     * color: #f5f5f5 !important }`, não escopado por tema. Sem `!important`
     * aqui essa regra vence (mesmo esta sendo estruturalmente mais
     * específica) — todo `<textarea class="form-control">` habilitado (ex.:
     * "Observações" na tabela de documentos de Pessoas) ficava com fundo
     * claro, enquanto o `<textarea>` vizinho sem essa classe ficava escuro
     * certo. */
    /* Longhand de proposito: o shorthand `background` zera o
     * background-image do chevron que `.mob-select`/`.pac-select` definem
     * no proprio shorthand — o select ficava SEM SETA no tema escuro
     * (sobrava a seta nativa do SO). */
    background-color: var(--p-bg) !important;
    border-color: var(--p-border-strong);
    color: var(--p-text);
}
/* Glifo de calendário/relógio de `<input type="date/time/month/week/
 * datetime-local">` é renderizado pelo próprio navegador (não é fonte de
 * ícone nem SVG do app), sempre em preto sólido, sem token de cor — nenhum
 * CSS alcança a cor interna do glifo, só o pseudo-elemento do glifo em si.
 * `invert(1)` vira o preto em branco (não faz sentido em campo claro, por
 * isso escopado só no tema escuro). Ex.: calendário da tabela de documentos
 * de Pessoas (`documentosTableTemplate.html`), Emissão/Validade. */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}
/* sigem.css tem `.form-control, select { color: #aaa !important }` (não
 * escopado por tema, nem por :disabled) — sem os `!important` abaixo o
 * texto do <select> fica cinza-claro ilegível sobre o fundo escuro. Regra
 * de :disabled separada e MAIS específica que a de habilitado (ambas com
 * !important) pra manter o mesmo contraste enabled/disabled que os demais
 * campos (var(--p-text) vs var(--p-muted)). */
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control {
    color: var(--p-text) !important;
}
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] select[disabled],
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[disabled] {
    color: var(--p-muted) !important;
}
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="range"]):not([type="hidden"]):focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .form-control:focus {
    border-color: var(--p-blue);
    /* !important: sigem.css tem `box-shadow: none !important` (não escopado
     * por tema) no seletor de tipos de input de texto — senão anula o anel
     * de foco por completo. */
    box-shadow: var(--p-ring) !important;
    outline: none;
}
/* !important em ambos (background/color): achado em runtime (008) —
 * ace.css tem MÚLTIPLAS regras `!important` pra campo desabilitado/readonly,
 * não escopadas por tema: `input[disabled]`, `select[disabled]`,
 * `ng-disabled[disabled]` (ace.css:7900-7917) e `.form-group
 * input[disabled]`/`textarea[disabled]` (ace.css:9104-9108) — todas
 * `background-color:#f8f8f8 !important; color:#333 !important`. Sem
 * `!important` aqui, qualquer campo `[disabled]` fora do design system novo
 * (ex.: mobilidade/escala/escalas, ARV em modo visualizar) ficava com fundo
 * quase branco por cima do resto da tela escura.
 * `[readonly]` incluído pelo mesmo motivo: `input[readonly]`/
 * `textarea[readonly]` (ace.css:7919-7922) tem a MESMA dupla de
 * `!important` (`background:#f5f5f5`/`color:#333`) — usado em campos de
 * saída/output (ex.: "Código de Autenticidade" em documentos, campos do
 * modal "Plano de Transporte" no ARV). Nenhuma das duas condições
 * (disabled/readonly) tinha cobertura de `background` em `mobro-tokens.css`
 * antes de ganhar `!important` aqui. */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="range"]):not([type="hidden"]):disabled,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="range"]):not([type="hidden"])[readonly],
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] textarea[readonly],
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] input[disabled],
html[data-theme="dark"] input[readonly],
html[data-theme="dark"] .form-control[disabled],
html[data-theme="dark"] .form-control[readonly] {
    background: var(--p-card-2) !important;
    color: var(--p-muted) !important;
}

/* Camada de modal: diálogos jQuery UI (.dialog()) + modais Bootstrap
 * (.modal). Nível 2 de elevação (--p-card-2) — mais claro que o card da
 * página por trás, sem depender de sombra pesada pra comunicar hierarquia. */
html[data-theme="dark"] .ui-dialog,
html[data-theme="dark"] .ui-dialog-titlebar,
html[data-theme="dark"] .ui-dialog-buttonpane,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    background: var(--p-card-2);
    border-color: var(--p-border);
    color: var(--p-text);
}

/* X de fechar do jQuery UI dialog (.ui-dialog-titlebar-close). O ace.css
   define cor #64748b + opacity 0.7, que fica pouco visivel no tema escuro
   (cinza claro desbotado contra o var(--p-card-2)). Aqui em ambos os temas
   elevamos a cor pra var(--p-text) (preto no claro / branco no escuro) e
   subimos a opacity pra 0.9 — o X fica visualmente equivalente aos outros
   controles do header. Hover continua como antes (vermelho no ace.css). */
.ui-dialog .ui-dialog-titlebar-close,
.ui-jqdialog .ui-dialog-titlebar-close,
.ui-dialog .ui-jqdialog-titlebar-close,
.ui-jqdialog .ui-jqdialog-titlebar-close {
    color: var(--p-text);
    opacity: 0.9;
}

/* Modal "Visualizar ARV" (iframe da tela da ARV): sem padding no conteudo,
 * o iframe vira o corpo do modal. Casca (borda, titlebar, buttonpane) usa
 * --p-card e borda forte pra se separar dos campos (--p-card-2, no escuro). */
html body .mob-dialog-arv.ui-dialog { padding: 0; border: 2px solid var(--p-border-strong); background: var(--p-card); overflow: hidden; }
html body .mob-dialog-arv .title-export { margin: 0 !important; }
html body .mob-dialog-arv .ui-dialog-titlebar { margin: 0; min-height: 0; padding: 6px 14px; border-width: 0 0 2px; border-color: var(--p-border-strong); border-radius: 0; background: var(--p-card); }
html body .mob-dialog-arv .ui-dialog-content { padding: 0 !important; overflow: hidden !important; background: var(--p-bg); }
.mob-dialog-arv .ui-dialog-content iframe { display: block; width: 100%; height: 100%; border: 0; }
html body .mob-dialog-arv .ui-dialog-buttonpane { margin: 0; padding: 6px 14px; border-width: 2px 0 0; border-color: var(--p-border-strong); background: var(--p-card); }

/* Icones redondos da barra de pager do jqGrid (.ui-pg-button > .ui-icon).
   No ace.css o glifo e #808080 (cinza medio) sobre um quadrado branco, o que
   fica apagado contra o fundo escuro do app. No tema escuro a gente troca
   so o glifo pra var(--p-text) — o quadrado branco continua, pra o botao nao
   desaparecer visualmente. Hover puxa pro azul forte do tema. */
html[data-theme="dark"] .ui-pg-table > tbody > tr > .ui-pg-button > .ui-icon {
    color: var(--p-text);
}
html[data-theme="dark"] .ui-pg-table > tbody > tr > .ui-pg-button > .ui-icon:hover {
    color: var(--p-blue-strong, #38bdf8);
    border-color: var(--p-blue-strong, #38bdf8);
}

/* Profundidade invertida nos inputs (Bloco 2/3, mais abaixo neste arquivo):
 * `.mob-input`/`.pac-input`/`.sac-input`/`.sag-input`/`.mob-select`
 * (+ aliases) usam `var(--p-card)` como fundo — que no escuro seria a MESMA
 * superfície do card ao redor. Este override os desce pra `var(--p-bg)`, um
 * nível abaixo do card, que é o que comunica "campo preenchível" no escuro
 * (research.md da 007, decisão 2). Override explícito aqui, em vez de contar
 * com a especificidade da camada de formulário genérica acima, pra não
 * depender de uma cadeia de :not() como fonte de verdade de outro componente.
 * `background-color` (não o shorthand `background`) preserva o ícone SVG do
 * chevron do `.mob-select`. */
html[data-theme="dark"] input.mob-input,
html[data-theme="dark"] input.pac-input,
html[data-theme="dark"] input.sac-input,
html[data-theme="dark"] input.sag-input,
html[data-theme="dark"] input.mob-busca-input,
html[data-theme="dark"] .mob-select,
html[data-theme="dark"] .pac-select,
html[data-theme="dark"] .sac-select,
html[data-theme="dark"] .sag-select {
    background-color: var(--p-bg);
    border-color: var(--p-border-strong);
    /* color não redeclarado aqui: `.mob-select` etc. são sempre `<select>`,
     * já cobertos (habilitado/desabilitado) pelas regras de `color` da
     * camada de formulário genérica acima — evita duplicar a lógica de
     * !important em dois lugares. */
}
html[data-theme="dark"] input.mob-input[disabled],
html[data-theme="dark"] input.mob-input:disabled,
html[data-theme="dark"] input.pac-input[disabled],
html[data-theme="dark"] input.pac-input:disabled,
html[data-theme="dark"] input.sac-input[disabled],
html[data-theme="dark"] input.sac-input:disabled,
html[data-theme="dark"] input.sag-input[disabled],
html[data-theme="dark"] input.sag-input:disabled {
    background-color: var(--p-card-2);
}

/* Camada ng-grid (widget legado, `css/ng-grid.css`) — usado em popups antigos
 * (diálogo "Planos de Transporte", RF-4.b arv) E na listagem principal de
 * `saude/planejamento-transporte` (`ng-grid="gridAgendamentos"`, `showFooter:
 * true`). Cobertura da estrutura base (fundo/zebra/cabeçalho/rodapé) — os
 * estados semânticos de célula (alterado/erro/etc., cores pastel amarelo/
 * verde/vermelho/azul) ficam como estão, raros na prática e de baixo risco
 * de ilegibilidade. */
html[data-theme="dark"] .ngGrid {
    background-color: var(--p-card);
}
html[data-theme="dark"] .ngTopPanel,
html[data-theme="dark"] .ngGroupPanel {
    background-color: var(--p-card-2);
    border-bottom-color: var(--p-border);
}
html[data-theme="dark"] .ngRow {
    border-bottom-color: var(--p-border);
}
html[data-theme="dark"] .ngRow.odd {
    background-color: var(--p-card);
}
html[data-theme="dark"] .ngRow.even {
    background-color: var(--p-row-alt);
}
html[data-theme="dark"] .ngRow.selected {
    background-color: var(--p-blue-lt);
}
html[data-theme="dark"] .ngViewport {
    border-left-color: var(--p-border);
    border-right-color: var(--p-border);
}
/* Rodapé "Total de Registros"/"Registros Selecionados" — fundo cinza-claro
 * (`#eaeaea`) hardcoded em ng-grid.css, sem par dark; texto herdava
 * `var(--p-text)` (quase branco) do body, ficando ilegível sobre o cinza
 * claro fixo (FR-022: fundo fixo + texto que acompanha o tema). */
html[data-theme="dark"] .ngFooterPanel {
    background-color: var(--p-card-2);
    border-top-color: var(--p-border);
    color: var(--p-text);
}

/* Ajuste GLOBAL de layout do cabeçalho de módulo (breadcrumb "Home > ...",
 * shared/mainContentModule.html, ~35 módulos) — vale nos dois temas.
 * ace.css usa a MESMA classe `.breadcrumb` no `<div class="breadcrumb
 * border">` (wrapper) e no `<ul class="breadcrumb">` (conteúdo) de dentro,
 * com `width:99%` + `margin:4px 0 4px 6px` + `display:inline-block` nos
 * dois — sobra gap à direita/esquerda e, com a navbar horizontal, um gap
 * vertical acima do cabeçalho. */
.breadcrumb.border {
    display: block;
    width: 100%;
    margin: 0 0 16px; /* mais respiro antes do .mob-card--grid/toolbar */
}
.breadcrumb.border > ul.breadcrumb {
    width: 100%;
    margin: 4px 0 4px 6px;
}
body.nav-is-top .breadcrumb.border,
body.nav-is-top .breadcrumb.border > ul.breadcrumb {
    margin-top: 0;
}

/* Breadcrumb das telas de listagem (shared/mainContentModule.html, ~35
 * módulos) — fundo branco vinha de `sigem.css` (`.breadcrumb {
 * background-color: #FFF }`), carregado DEPOIS de ace.css e vencendo por
 * ordem de origem (mesma especificidade, sem token nenhum). Texto/setas
 * herdam de ace.css (`#333`/`#555`/`#b2b6bf`), também sem token. */
html[data-theme="dark"] .breadcrumb.border {
    border-bottom: none;
}
html[data-theme="dark"] .breadcrumb {
    background-color: var(--p-card);
    color: var(--p-text);
}
html[data-theme="dark"] .breadcrumb > li,
html[data-theme="dark"] .breadcrumb > li.active {
    color: var(--p-text);
}
html[data-theme="dark"] .breadcrumb > li + li:before {
    color: var(--p-muted);
}

/* Aba ativa de módulo legado (`.nav-tabs`/`tabset`/`.tab-content`, ex.:
 * mobilidade/veiculo/veiculos, pessoa/pessoas — 6 telas) — fundo quase
 * branco vinha de `sigem.css` (`.tab-content > .active { background-color:
 * #FCFEFF }`), sem token, pintando o `.tab-pane.active` por cima do
 * `.mob-card` já escuro que o envolve. Mesmo padrão do breadcrumb acima. */
html[data-theme="dark"] .tab-content > .active {
    background-color: var(--p-card);
    border-color: var(--p-border);
    color: var(--p-text);
}

/* Quando o `.tab-pane.active` está dentro de um `.mob-card`, o card já é o
 * container visual — a borda herdada de `sigem.css` (`1px solid #D4E9FA`)
 * duplica a borda do card e parece um `<fieldset>` interno. Zera borda +
 * padding do pane pra deixar o card ser o próprio "fieldset" visual.
 * Escopo: telas modernas que usam `.mob-card` + `.nav-tabs` (Veículo,
 * Pessoas, etc.).
 * O seletor `.mob-form >` cobre o outro arranjo: a barra de abas e o
 * `.tab-content` FORA do card, com cada aba empilhando VÁRIOS `.mob-card`
 * (Pessoas set/2026). Sem ele o pane re-herda borda/padding do `sigem.css`
 * e envolve os cards num retângulo que Allan lê como "fieldset". */
.mob-card > .tab-content > .active,
.mob-form > .tab-content > .active {
    border: 0;
    padding: 0;
}

/* O `.active` do arranjo "cards empilhados soltos" ainda herda fundo de
 * card: no claro, o branco do `sigem.css` (linha ~378); no escuro, a regra
 * da linha ~381 (`html[data-theme="dark"] .tab-content > .active`), que
 * pinta o pane com `--p-card` de propósito pra resolver o outro arranjo
 * (`.tab-content` DENTRO de um `.mob-card`). Aqui o `<form>` que envolve os
 * `.mob-card` é transparente, então esse fundo de card aparece por trás do
 * vão de 40px entre eles (regra abaixo) — a margem existe mas fica
 * invisível porque o fundo atrás dela é idêntico ao dos cards, exatamente
 * o "colado"/"mesmo fundo" que Allan reporta. Devolve o fundo de página
 * (`--p-bg`) só nesse arranjo, pra o vão voltar a ter contraste. Precisa
 * ser mais específico que a regra da linha ~381 (soma `.mob-form` ao
 * seletor) pra vencer por especificidade, não só por ordem no arquivo. */
.mob-form > .tab-content > .active {
    background-color: var(--p-bg);
}
html[data-theme="dark"] .mob-form > .tab-content > .active {
    background-color: var(--p-bg);
}

/* O `.tab-content` em si (`ace.css:9120`) tem `border: 1px solid #C5D0DC` +
 * `padding: 12px 12px 10px`. Dentro de um `.mob-card` essa caixa fica
 * mascarada pela borda do card; quando a barra de abas e o conteúdo ficam
 * FORA do card (Pessoas set/2026 — cada aba empilhando seus `.mob-card`) ela
 * reaparece em volta dos cards, exatamente o "parece que tem um fieldset
 * dentro" que Allan reporta — e os 12px de padding ainda desalinham os cards
 * da barra de abas (cards 33px mais estreitos). `ace.css` já oferece
 * `.tab-content.no-border`/`.no-padding`, mas aqui vai por CSS pra pegar os
 * dois temas e não tocar no markup das outras 4 telas, que mantêm o
 * `.tab-content` dentro do card. Escopo pelo pai: só o arranjo novo. */
.mob-form > .tab-content {
    border: 0;
    padding: 0;
}

/* Cards empilhados soltos (Pessoas set/2026): o `margin-bottom: 18px` padrão
 * do `.mob-card` não basta aqui. Dois problemas somados: (1) o vão fica no
 * mesmo tom escuro do fundo da página, sem a borda de um `.mob-card` pai ao
 * redor pra dar contraste; (2) no tema dark o `--p-shadow` tem blur de 20px
 * (`0 8px 20px rgba(0,0,0,.35)`, linha ~117) — com DOIS cards empilhados a
 * sombra de baixo de um encontra a sombra de cima do próximo no meio do
 * vão, borrando o espaço com cinza em vez de fundo liso. Resultado: mesmo
 * com margin correta, lê como "colado". 40px dá vão suficiente pra sombra
 * de cada card dissipar antes de encontrar a do vizinho. Escopo só nesse
 * arranjo (form > tab-content > tab-pane > form > .mob-card), sem mexer no
 * valor padrão usado nas outras telas. */
.mob-form > .tab-content .mob-card {
    margin-bottom: 40px;
}

/* Botão anexado a input (ex.: "explorar tabela"/"limpar" nos campos de
 * autocomplete `<angucomplete>`, searchtable.html) — classe Bootstrap
 * `.input-group-addon`, fundo cinza-claro hardcoded, sem token. */
html[data-theme="dark"] .input-group-addon {
    background-color: var(--p-card-2);
    border-color: var(--p-border-strong);
    color: var(--p-text);
}

/* Filtro avançado legado (`ace.css`, `fieldset.sigem`/`<legend>` soltos,
 * `advancedfilterControl.html`) — fundo quase branco (`#FBFBFB`) e texto
 * escuro (`#333`) sem token, dentro do `#advanced-filter` que já é escuro
 * (var(--p-card-2) acima). `legend` sem escopo cobre qualquer `<legend>`
 * solto do app (9 telas). */
html[data-theme="dark"] fieldset.sigem {
    background-color: var(--p-card-2);
    border-color: var(--p-border);
}
html[data-theme="dark"] legend {
    color: var(--p-text);
}
/* `.legend-black-lg` (`ace.css:936`) força `color:#232323 !important` —
 * !important vence o `legend` sem escopo acima; usado em 5 telas de
 * escala/configuração/feriado (cfgescala, editHorarios, planejamento-
 * transporte, configuracoes, cfgferiado). */
html[data-theme="dark"] .legend-black-lg {
    color: var(--p-text) !important;
}

/* Caixa de destaque de campo condicional (ex.: "Descrição da condição" em
 * agendamento) — `.mob-conditional-block`/aliases usam paleta âmbar própria
 * hardcoded (`#fffbf5`/`#f0c895`), não os tokens `--p-amber`/`--p-amber-lt`
 * já usados no header do mesmo bloco. */
html[data-theme="dark"] .mob-conditional-block,
html[data-theme="dark"] .pac-conditional-block {
    background: var(--p-amber-lt);
    border-color: var(--p-amber);
}

/* Ícones de ação em colunas jqxGrid (ex.: "Histórico"/"Replicar" em
 * agendamentos, "Histórico" em rastreadores) — vários controllers geram o
 * template da célula na mão com `style="color:black"`/`style="color: black"`
 * inline (ex.: agendamentosController.js, rastreadorController.js,
 * pacientesController.js), sem token, ficando pretos sobre fundo escuro.
 * Seletor de atributo pega qualquer ocorrência atual/futura desse padrão
 * sem precisar editar cada controller. */
html[data-theme="dark"] [style*="color:black"],
html[data-theme="dark"] [style*="color: black"] {
    color: var(--p-text) !important;
}
/* Mesmo padrão, cores NOMEADAS (008) — `pessoaController.js`,
 * `permissoesController.js`, `escalasController.js`, `ARVController.js`,
 * `GestaoViagemPacienteController.js`, `agendamentosController.js`,
 * `AgendamentosViagemController.js`, `rastreadorController.js`,
 * `usuariosController.js` montam ícone de ação com
 * `style="color:darkslateblue/maroon/darkred/darkgreen/green/coral/dimgray"`
 * — só `black` tinha cobertura. Não editar os `cellsrenderer`: risco de
 * quebrar coluna de grid é maior que o ganho (Decisão 4 de research.md). */
html[data-theme="dark"] [style*="color:darkslateblue"],
html[data-theme="dark"] [style*="color: darkslateblue"] {
    color: var(--p-slate) !important;
}
html[data-theme="dark"] [style*="color:maroon"],
html[data-theme="dark"] [style*="color: maroon"],
html[data-theme="dark"] [style*="color:darkred"],
html[data-theme="dark"] [style*="color: darkred"] {
    color: var(--p-danger) !important;
}
html[data-theme="dark"] [style*="color:darkgreen"],
html[data-theme="dark"] [style*="color: darkgreen"],
html[data-theme="dark"] [style*="color:green"],
html[data-theme="dark"] [style*="color: green"] {
    color: var(--p-green) !important;
}
html[data-theme="dark"] [style*="color:coral"],
html[data-theme="dark"] [style*="color: coral"] {
    color: var(--p-amber) !important;
}
html[data-theme="dark"] [style*="color:dimgray"],
html[data-theme="dark"] [style*="color: dimgray"] {
    color: var(--p-muted) !important;
}

/* Ícones de ação com cor semântica por função (visualizar/editar/status/
 * excluir), sobrepondo os utilitários `.blue`/`.green`/`.purple`/`.red`/
 * `.grey` de ace.css (que já são !important, mas ficam pouco distintos
 * contra o novo fundo escuro) — escopado às colunas de ação do jqxGrid pra
 * não vazar pra outros usos desses utilitários (navbar, botões, etc). */
html[data-theme="dark"] .jqx-grid-cell-metro .blue,
html[data-theme="dark"] .jqx-grid-cell-pinned-metro .blue,
html[data-theme="dark"] .jqx-grid-cell-metro .dark-blue,
html[data-theme="dark"] .jqx-grid-cell-pinned-metro .dark-blue,
html[data-theme="dark"] .jqx-grid-cell-metro .light-blue,
html[data-theme="dark"] .jqx-grid-cell-pinned-metro .light-blue {
    color: var(--p-blue) !important;
}
html[data-theme="dark"] .jqx-grid-cell-metro .green,
html[data-theme="dark"] .jqx-grid-cell-pinned-metro .green,
html[data-theme="dark"] .jqx-grid-cell-metro .dark-green,
html[data-theme="dark"] .jqx-grid-cell-pinned-metro .dark-green,
html[data-theme="dark"] .jqx-grid-cell-metro .light-green,
html[data-theme="dark"] .jqx-grid-cell-pinned-metro .light-green {
    color: var(--p-green) !important;
}
html[data-theme="dark"] .jqx-grid-cell-metro .red,
html[data-theme="dark"] .jqx-grid-cell-pinned-metro .red,
html[data-theme="dark"] .jqx-grid-cell-metro .light-red,
html[data-theme="dark"] .jqx-grid-cell-pinned-metro .light-red {
    color: var(--p-danger) !important;
}
html[data-theme="dark"] .jqx-grid-cell-metro .purple,
html[data-theme="dark"] .jqx-grid-cell-pinned-metro .purple {
    color: var(--p-purple) !important;
}
html[data-theme="dark"] .jqx-grid-cell-metro .orange,
html[data-theme="dark"] .jqx-grid-cell-pinned-metro .orange,
html[data-theme="dark"] .jqx-grid-cell-metro .dark-orange,
html[data-theme="dark"] .jqx-grid-cell-pinned-metro .dark-orange,
html[data-theme="dark"] .jqx-grid-cell-metro .light-orange,
html[data-theme="dark"] .jqx-grid-cell-pinned-metro .light-orange,
html[data-theme="dark"] .jqx-grid-cell-metro .orange2,
html[data-theme="dark"] .jqx-grid-cell-pinned-metro .orange2 {
    color: var(--p-amber) !important;
}
html[data-theme="dark"] .jqx-grid-cell-metro .grey,
html[data-theme="dark"] .jqx-grid-cell-pinned-metro .grey,
html[data-theme="dark"] .jqx-grid-cell-metro .light-grey,
html[data-theme="dark"] .jqx-grid-cell-pinned-metro .light-grey {
    color: var(--p-muted) !important;
}
/* Ações específicas sem utilitário de cor no markup original (vinham
 * `style="color:black"`, ver regra acima) — cor própria por função, token do
 * design system. Valem nos DOIS temas: o bloco antigo era só `dark`, então no
 * claro essas ações caíam no `var(--p-text)` do inline — e o menu da coluna
 * "Opções" (que copia a cor da âncora pro item) saía com ícone sem cor. */
.altera-status {
    color: var(--p-purple) !important;
}
.historico-paciente {
    color: var(--p-amber) !important;
}
.historico-rastreador {
    color: var(--p-slate) !important;
}
.replicar-agendamento {
    color: var(--p-teal) !important;
}
.confirm-agendamento {
    color: var(--p-green) !important;
}

/* jqxGrid: coluna fixa/checkbox (`-pinned-metro`) recebe fundo via inline
 * style do próprio widget (JS), que só perde pra `!important`. `!important`
 * na regra base do Bloco 4 (mais abaixo) não bastava pra essa classe
 * especificamente — override dedicado aqui. */
html[data-theme="dark"] .jqx-grid-cell-pinned-metro {
    background-color: var(--p-card) !important;
}

/* jqxGrid: colunas FILTRADAS (`-filter-metro`/`-filter-alt-metro`) —
 * jqx.metro.css:193-194 crava `background-color: #EFF3F8 !important` (quase
 * branco) no grupo (-sort-metro / -sort-alt-metro / -filter-alt-metro /
 * -pinned-metro). No escuro isso dava fundo quasi-branco com o texto
 * `--p-text` claro por cima = a coluna "em branco". Aqui a filtrada volta pro
 * fundo normal (marcação não é dela). A marcação da coluna ORDENADA mora mais
 * abaixo, junto das regras de fundo de célula — lá ela precisa vir DEPOIS do
 * zebra pra vencer nas linhas `-alt-` também. */
html[data-theme="dark"] .jqx-grid-cell-filter-metro {
    background-color: var(--p-card) !important;
}
html[data-theme="dark"] .jqx-grid-cell-filter-alt-metro {
    background-color: var(--p-row-alt) !important;
}

/* NOTA (008): a cobertura de `.jqx-window*` que existia aqui foi removida —
 * `jqxwindow.js` não está entre os 19 scripts jqWidgets carregados em
 * index.php e não há uma única ocorrência de `.jqx-window`/`jqxWindow(` em
 * src/application. Era código morto (o popup "Planos de Transporte" do ARV
 * usa jQuery UI `.dialog()`, já coberto acima). */

/* ── Reset page bg ───────────────────────────────────────────────────────── */
html, body {
    overflow: hidden;
    height: 100%;
}

/* Container de scroll. Páginas de FORM têm <section id="contentSection"> na raiz;
 * páginas de LISTAGEM renderizam em #templateIndexModules (index.php → shared).
 * Como html,body é overflow:hidden, sem esse scroller a listagem não rola
 * (perdia a scrollbar vertical quando o grid passava da viewport). */
#contentSection,
#templateIndexModules {
    background: var(--p-bg);
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 40px;
}

/* Navbar no topo: .main-container-inner já reserva a altura da navbar (padding-top), então o scroller
 * precisa caber no que sobra. Com 100vh o documento passava da viewport em --nav-h e, como html,body é
 * overflow:hidden, qualquer foco/scrollIntoView rolava o body e o topo da página ficava sob a navbar sem
 * como rolar de volta com o mouse. */
body.nav-is-top #contentSection,
body.nav-is-top #templateIndexModules {
    height: calc(100vh - var(--nav-h, 54px));
}

/* ── Bloco 2: classes base (.mob-*) ─────────────────────────────────────── */

/* ── Page shell ─────────────────────────────────────────────────────────── */
.mob-page-header {
    background: var(--p-card);
    border-bottom: 1px solid var(--p-border);
    padding: 14px 28px;
    margin-bottom: 24px;
}

.mob-breadcrumb {
    font-size: 12px;
    color: var(--p-muted);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

.mob-breadcrumb a {
    color: var(--p-blue);
    text-decoration: none;
}

.mob-breadcrumb a:hover { text-decoration: underline; }

.mob-bc-sep { margin: 0 5px; color: var(--p-muted); }

.mob-bc-active { color: var(--p-text); font-weight: 600; }

.mob-header-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.mob-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mob-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: var(--p-text);
    letter-spacing: -.4px;
}

.mob-title-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--p-blue-lt);
    color: var(--p-blue);
    border: 1px solid var(--p-blue-bd);
}

.mob-title-badge--edit {
    background: var(--p-amber-lt);
    color: var(--p-amber);
    border-color: var(--p-amber-bd);
}

.mob-title-badge--new {
    background: var(--p-green-lt);
    color: var(--p-green);
    border-color: var(--p-green-bd);
}

.mob-back-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--p-blue);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--p-radius-sm);
    border: 1px solid var(--p-blue-lt);
    transition: background .15s;
    cursor: pointer;
}

.mob-back-link:hover {
    background: var(--p-blue-lt);
    text-decoration: none;
}

.mob-page-body,
.mob-page-title {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

.mob-form {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.mob-card {
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius);
    box-shadow: var(--p-shadow);
    margin-bottom: 18px;
    overflow: hidden;
}

.mob-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.mob-row-2 .mob-card { margin-bottom: 0; }

.mob-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--p-border);
    border-left: 4px solid var(--p-blue);
    background: linear-gradient(to right, var(--p-blue-lt), var(--p-card) 60%);
}

.mob-card-header:has(.mob-icon--green)  { border-left-color: var(--p-green);  background: linear-gradient(to right, var(--p-green-lt), var(--p-card) 60%); }
.mob-card-header:has(.mob-icon--amber)  { border-left-color: var(--p-amber);  background: linear-gradient(to right, var(--p-amber-lt), var(--p-card) 60%); }
.mob-card-header:has(.mob-icon--purple) { border-left-color: var(--p-purple); background: linear-gradient(to right, var(--p-purple-lt), var(--p-card) 60%); }
.mob-card-header:has(.mob-icon--slate)  { border-left-color: var(--p-slate);  background: linear-gradient(to right, var(--p-slate-lt), var(--p-card) 60%); }
.mob-card-header:has(.mob-icon--dark)   { border-left-color: var(--p-dark);   background: linear-gradient(to right, var(--p-dark-lt), var(--p-card) 60%); }
.mob-card-header:has(.mob-icon--teal)   { border-left-color: var(--p-teal);   background: linear-gradient(to right, var(--p-teal-lt), var(--p-card) 60%); }

.mob-card-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--p-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.mob-card-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--p-text);
    flex: 1;
}

.mob-header-action {
    background: var(--p-teal);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background .15s;
}

.mob-header-action:hover { background: var(--p-teal); opacity: .88; }

.mob-card-body { padding: 20px 18px; }

/* ── Icon accents ───────────────────────────────────────────────────────── */
.mob-icon--green  { background: var(--p-green); }
.mob-icon--amber  { background: var(--p-amber); }
.mob-icon--purple { background: var(--p-purple); }
.mob-icon--slate  { background: var(--p-slate); }
.mob-icon--dark   { background: var(--p-dark); }
.mob-icon--teal   { background: var(--p-teal); }

/* ── Tabs (secoes alternaveis; wiring real e o Bootstrap tab.js via
   diretiva `tabset` + data-toggle="tab"/data-target — as classes abaixo
   sao so reskin, nao mexem na wiring). A barra normalmente e o TOPO de um
   `.mob-card`; quando ela e irma dos cards (`.mob-form > .mob-tabs-bar`,
   caso Pessoas set/2026) ganha tratamento proprio no fim deste bloco. ── */
/* Reskin "segmented control": a barra vira uma trilha recuada (--p-card-2)
 * com a aba ativa flutuando por cima como um chip solido (--p-card + sombra
 * curta), no lugar do retangulo branco Bootstrap + sublinhado 2px + versalete
 * (herança direta do `.nav-tabs` legado). Texto em sentence case: versalete
 * com letter-spacing e o "botao branco colado" eram o que lia como datado. */
.mob-tabs-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 5px;
    list-style: none;
    background: var(--p-card-2);
    border-bottom: 1px solid var(--p-border);
    border-radius: var(--p-radius) var(--p-radius) 0 0;
}
.mob-tabs-bar > li { margin: 0; }
.mob-tabs-bar > li > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--p-muted);
    text-decoration: none;
    border-radius: var(--p-radius-sm);
    cursor: pointer;
    position: relative;
    transition: color .15s, background-color .15s, box-shadow .15s;
    white-space: nowrap;
}
/* `.nav-tabs > li > a, > a:focus { background-color: #F9F9F9 }` e
 * `.nav-tabs > li > a:hover { background-color: #FFF }` (ace.css:9444/9457)
 * batem empate de especificidade com estas regras (mesma contagem de classe
 * + pseudo-classe) e vencem por MIM não sobrescrever `background-color` em
 * nenhum estado — só a aba `.active` tinha fundo próprio. Resultado: aba
 * inativa em hover/focus virava um retângulo branco solto, o efeito que
 * Allan não quer. Zera pra transparente em todo estado da aba não-ativa; o
 * hover ganha só um tom acima da trilha (`--p-border`, mesmo token usado
 * como fundo de hover em outros controles do design system), sem
 * reintroduzir "botão branco". A `.active` (mais abaixo) empata em
 * especificidade e vem depois no arquivo, então continua vencendo o hover
 * quando a aba ativa também está sob o cursor. */
.mob-tabs-bar > li > a,
.mob-tabs-bar > li > a:focus {
    background-color: transparent;
}
.mob-tabs-bar > li > a:hover {
    color: var(--p-blue);
    background-color: var(--p-border);
}
.mob-tabs-bar > li > a i { font-size: 14px; }
.mob-tabs-bar > li.disabled > a { color: var(--p-muted); cursor: not-allowed; }
/* Reset da borda Bootstrap (`.nav-tabs > li > a` tem `border: 1px solid
 * transparent`, e o active traz `border: 1px solid #dddddd` + `background:
 * #ffffff` — branco puro no card escuro). Sem isto a aba ativa fica com
 * "caixa branca" em volta, quebrando o reskin dark. */
.mob-tabs-bar > li > a { border: 0; }
.mob-tabs-bar > li.active > a {
    color: var(--p-blue);
    background: var(--p-card);
    box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.10);
}
/* Barra de abas SOLTA: fora de um `.mob-card`, ela deixa de ser "topo de
 * card" e vira uma faixa arredondada propria — senao fica com os cantos de
 * baixo retos e a borda inferior solta, parecendo cortada. Escopo pelo pai
 * (`.mob-form >`) pra nao mexer nas 4 telas que mantem a barra no card. */
.mob-form > .mob-tabs-bar {
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius);
    margin-bottom: 18px;
}
.mob-card-body--tab { padding: 20px 18px; }
.mob-tabs-actions { margin: 0 18px 18px; }

/* ── Identity row ───────────────────────────────────────────────────────── */
.mob-identity-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.mob-avatar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.mob-avatar {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--p-border);
    background: var(--p-card-2);
    position: relative;
    transition: border-color .2s, box-shadow .2s;
}

.mob-avatar--clickable {
    cursor: pointer;
    border-color: var(--p-blue);
}

.mob-avatar--clickable:hover { box-shadow: var(--p-ring); }

.mob-avatar--clickable:hover .mob-avatar-overlay { opacity: 1; }

.mob-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mob-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26,107,124,.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    transition: opacity .2s;
    gap: 3px;
}

.mob-avatar-overlay i { font-size: 20px; }

.mob-avatar-hint {
    font-size: 11px;
    color: var(--p-muted);
    text-align: center;
}

.mob-identity-fields { flex: 1; min-width: 0; }

/* ── Field grid ────────────────────────────────────────────────────────── */
.mob-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ── Form fields ───────────────────────────────────────────────────────── */
.mob-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mob-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
    align-items: start;
}

.mob-form-row--single {
    grid-template-columns: 1fr;
}

.mob-form-row:last-child { margin-bottom: 0; }

.mob-field--grow  { min-width: 0; }
.mob-field--half  { min-width: 0; }
.mob-field--fixed { min-width: 0; }

.mob-hint {
    font-size: 11px;
    color: var(--p-muted);
    margin-top: 2px;
    line-height: 1.4;
}

/* Toggle inline (label + switch horizontal) */
.mob-toggle-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 14px;
    background: var(--p-card-2);
    border: 1.5px solid var(--p-border);
    border-radius: 20px;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background .15s;
    white-space: nowrap;
}

.mob-toggle-inline:hover {
    border-color: var(--p-blue);
    background: var(--p-blue-lt);
}

.mob-toggle-inline-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--p-text);
}

.mob-toggle-inline .mob-switch { width: 36px; height: 20px; }
.mob-toggle-inline .mob-switch-slider::before { width: 14px; height: 14px; }
.mob-toggle-inline .mob-switch input:checked + .mob-switch-slider::before { transform: translateX(16px); }

.mob-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--p-muted);
    letter-spacing: .5px;
    text-transform: uppercase;
    margin: 0;
}

.mob-req { color: var(--p-danger); font-weight: 700; }

input.mob-input,
input.pac-input, input.sac-input, input.sag-input {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--p-border);
    border-radius: var(--p-radius-sm) !important;
    font-size: 14px;
    color: var(--p-text);
    background: var(--p-card);
    transition: border-color .18s, box-shadow .18s;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

input.mob-input:focus,
input.pac-input:focus, input.sac-input:focus, input.sag-input:focus {
    border-color: var(--p-blue) !important;
    box-shadow: var(--p-ring);
}

input.mob-input[disabled], input.mob-input:disabled, fieldset[disabled] input.mob-input,
input.pac-input[disabled], input.pac-input:disabled, fieldset[disabled] input.pac-input,
input.sac-input[disabled], input.sac-input:disabled, fieldset[disabled] input.sac-input,
input.sag-input[disabled], input.sag-input:disabled, fieldset[disabled] input.sag-input {
    background: var(--p-card-2);
    color: var(--p-muted);
    cursor: default;
}

.mob-textarea { resize: vertical; min-height: 82px; }
.mob-textarea--tall { min-height: 130px; }

.mob-select {
    width: 100%;
    padding: 9px 36px 9px 12px;
    border: 1.5px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    font-size: 14px;
    color: var(--p-text);
    background: var(--p-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E") no-repeat right 12px center;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
    box-sizing: border-box;
}

.mob-select:focus {
    border-color: var(--p-blue);
    box-shadow: var(--p-ring);
}

.mob-field-error {
    font-size: 11px;
    color: var(--p-danger);
    min-height: 14px;
}

/* ── Input + inline button ─────────────────────────────────────────────── */
.mob-input-with-btn {
    display: flex;
    gap: 6px;
}

.mob-input-with-btn .mob-input { flex: 1; }

/* Campo de autocomplete (`<angucomplete>`, template em
 * `_partials/searchtable.html`) dentro de `.mob-input-with-btn`: o PRÓPRIO
 * elemento `<angucomplete>` é o flex item — sem `flex` ele fica com
 * `flex: 0 1 auto` e encolhe pro conteúdo (~208px numa row de 962px),
 * deixando metade da linha vazia (o `.angucomplete-holder` e o
 * `.input-group` internos já preenchem o que recebem). Fix equivalente também
 * existe (duplicado) no `<style>` local de `planejamentoTransporte.html`. */
.mob-input-with-btn > angucomplete {
    flex: 1;
    min-width: 0;
}

/* Botão só-ícone (anexo a input / ação de linha).
 * `inline-flex` + `align-items/justify-content: center` NÃO são decoração: o
 * mesmo botão existe como `<button>` e como `<a>`, e as duas formas erravam o
 * centro em direções opostas — `<button>`: a UA centra o conteúdo mas o
 * leading jogava o glifo 4px ABAIXO do centro (botão de 34px); `<a>`: vira
 * `display: block` e o conteúdo inline cai na 1ª linha, 6px ACIMA do centro
 * (botão de 42px). Caso real set/2026: os "Limpar data fim" da tela de
 * Permissões são os ÚNICOS `.mob-btn-icon` feitos com `<a>` (3 de 5 no
 * projeto) e Allan reportou "os botões de apagar estão desalinhados".
 * `color: var(--p-text)` pra casar com os `.input-group-addon` do
 * autocomplete (`icon-table`/`icon-eraser`, template `searchtable.html`) que
 * ficam na MESMA linha — com `--p-muted` os botões liam como "apagados" ao
 * lado deles nos dois temas (medido: claro #393939 × #64748b, escuro
 * #f8fafc × #94a3b8). */
.mob-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1.5px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    background: var(--p-card);
    color: var(--p-text);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
}

.mob-btn-icon:hover {
    background: var(--p-blue-lt);
    border-color: var(--p-blue);
    color: var(--p-blue);
}

/* ── Toggle switches ──────────────────────────────────────────────────── */
.mob-toggles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.mob-toggle-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 14px;
    min-height: 40px;
    border: 1.5px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    background: var(--p-card);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
    box-sizing: border-box;
}

.mob-toggle-card:hover {
    border-color: var(--p-blue);
    background: var(--p-blue-lt);
}

.mob-switch {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.mob-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.mob-switch-slider {
    position: absolute;
    inset: 0;
    background: var(--p-border-strong);
    border-radius: 22px;
    transition: background .2s;
    cursor: pointer;
}

.mob-switch-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

.mob-switch input:checked + .mob-switch-slider { background: var(--p-blue); }

.mob-switch input:checked + .mob-switch-slider::before { transform: translateX(18px); }

fieldset[disabled] .mob-switch-slider { cursor: default; opacity: .6; }

.mob-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mob-toggle-label-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--p-text);
}

.mob-toggle-desc {
    font-size: 11px;
    color: var(--p-muted);
    line-height: 1.3;
}

/* ── Conditional block ──────────────────────────────────────────────────── */
.mob-conditional-block {
    background: var(--p-amber-lt);
    border: 1.5px solid var(--p-amber-bd);
    border-radius: var(--p-radius-sm);
    padding: 14px 16px;
    margin-bottom: 16px;
    animation: mob-reveal .18s ease;
}

.mob-conditional-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--p-amber);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Cards de acompanhantes ────────────────────────────────────────────── */
.mob-acomp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}

.mob-acomp-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--p-card-2);
    border: 1.5px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    position: relative;
    transition: border-color .15s, box-shadow .15s;
}

.mob-acomp-card:hover { border-color: var(--p-teal); box-shadow: 0 2px 8px rgba(13,112,112,.08); }

.mob-acomp-card-avatar { flex-shrink: 0; }

.mob-acomp-avatar-img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--p-border);
    display: block;
}

.mob-acomp-card-info { flex: 1; min-width: 0; }

.mob-acomp-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--p-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.mob-acomp-card-row {
    font-size: 11px;
    color: var(--p-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mob-acomp-card-label {
    font-weight: 600;
    color: var(--p-teal);
    text-transform: uppercase;
    letter-spacing: .3px;
    font-size: 10px;
}

.mob-acomp-card-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mob-acomp-action {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.mob-acomp-action--edit  { color: var(--p-teal); }
.mob-acomp-action--edit:hover  { background: var(--p-teal-lt); color: var(--p-teal); }
.mob-acomp-action--remove { color: var(--p-danger); }
.mob-acomp-action--remove:hover { background: var(--p-danger-lt); color: var(--p-danger); }

.mob-acomp-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 0;
    color: var(--p-muted);
    font-size: 13px;
}

.mob-acomp-empty i { font-size: 22px; opacity: .4; }

/* ── Acomp form inline ─────────────────────────────────────────────────── */
.mob-acomp-form {
    margin-top: 16px;
    border-top: 2px solid var(--p-teal-lt);
    padding-top: 16px;
}

.mob-acomp-form-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--p-teal);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 8px 12px;
    background: var(--p-teal-lt);
    border-radius: var(--p-radius-sm);
}

.mob-acomp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.mob-field--span2 { grid-column: 1 / -1; }

.mob-acomp-form-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.mob-acomp-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 18px;
    border: none;
    border-radius: var(--p-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
}

.mob-acomp-btn:hover { opacity: .88; transform: translateY(-1px); }
.mob-acomp-btn:active { transform: translateY(0); }
.mob-acomp-btn--confirm { background: var(--p-teal); color: #fff; }
.mob-acomp-btn--cancel  { background: var(--p-card); color: var(--p-text); border: 1.5px solid var(--p-border-strong); }
.mob-acomp-btn--cancel:hover { background: var(--p-card-2); }

/* ── Fix date input ────────────────────────────────────────────────────── */
input[type="date"].mob-input {
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: var(--p-radius-sm) !important;
    padding: 9px 12px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

/* ── Required note ─────────────────────────────────────────────────────── */
.mob-fields-note {
    font-size: 12px;
    color: var(--p-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0 14px;
}

/* ── Action bar ─────────────────────────────────────────────────────────── */
.mob-action-bar {
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius);
    padding: 16px 18px;
    box-shadow: var(--p-shadow);
    margin-bottom: 20px;
}

.mob-action-bar > div,
.mob-action-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mob-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    border: none;
    border-radius: var(--p-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .1s, box-shadow .15s;
    letter-spacing: .1px;
}

.mob-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.mob-btn:active:not(:disabled) { transform: translateY(0); }
.mob-btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }

.mob-btn--success   { background: var(--p-green); color: #fff; }
.mob-btn--secondary { background: #3a82c4; color: #fff; }
.mob-btn--outline {
    background: transparent;
    color: var(--p-muted);
    border: 1.5px solid var(--p-border);
}
.mob-btn--outline:hover:not(:disabled) {
    background: var(--p-card-2);
    color: var(--p-text);
    border-color: var(--p-border-strong);
}

/* Variante mais visivel do --outline, usada em botoes secundarios de modal
   (Todos/Nenhum do filtro, Cancelar dos dialogs de filtro dos paineis).
   A --outline normal fica desbotada (var(--p-muted) + borda fina) e some no
   tema escuro contra o fundo do modal — esta variante engrossa a borda,
   puxa o texto pra cor do body e adiciona um leve fundo translucido pra ter
   peso visual proximo do botao primario (--success), sem competir com ele. */
.mob-btn--outline-strong {
    background: color-mix(in srgb, var(--p-text) 8%, transparent);
    color: var(--p-text);
    border: 2px solid var(--p-border-strong);
    font-weight: 600;
}
.mob-btn--outline-strong:hover:not(:disabled) {
    background: color-mix(in srgb, var(--p-text) 14%, transparent);
    border-color: var(--p-text);
}

/* Botao quadrado so com icone — usado quando o toolbar nao tem largura
   pro label (ex: "Maximizar" em paineis de mapa em telas estreitas).
   Mantem a mesma altura dos botoes com label (font-size 14px + padding 6px 14px
   = ~32px de altura) mas vira 36x36 com so o icone centralizado. */
.mob-btn--icon {
    padding: 6px 10px;
    min-width: 36px;
    text-align: center;
}
.mob-btn--icon > i { margin: 0; }

/* ── Modal overlay (imagem em tela cheia) ──────────────────────────────── */
.modal-imagem-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(4, 8, 16, .78);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
}
.modal-imagem-overlay:focus { outline: none; }
.modal-imagem-overlay.ng-enter                                 { opacity: 0;    transition: opacity .2s ease; }
.modal-imagem-overlay.ng-enter-active                          { opacity: 1; }
.modal-imagem-overlay.ng-enter .modal-imagem-container         { transform: scale(.97) translateY(6px); transition: transform .22s ease; }
.modal-imagem-overlay.ng-enter-active .modal-imagem-container  { transform: none; }
.modal-imagem-overlay.ng-leave                                 { opacity: 1;    transition: opacity .15s ease; }
.modal-imagem-overlay.ng-leave-active                          { opacity: 0; }

/* Visor de documento em tela cheia — FONTE ÚNICA (008), usado por solicitação de
 * agendamento, de acompanhante e pelo histórico de pendências.
 * "Mesa de leitura": o palco escuro é o conteúdo e a interface recua. O título fica
 * numa faixa translúcida no topo, os controles numa barra flutuante embaixo, e o
 * rodapé com "Fechar" sai (o X, a área fora do visor e Esc fecham). O palco é escuro
 * nos dois temas, como a moldura do tile de documento (.mob-doc-frame). A marcação
 * antiga (header > h4 + toolbar + fechar, body, footer) continua valendo. */
.modal-imagem-container {
    position: relative;
    width: min(96vw, 1280px); height: min(92vh, 920px);
    display: flex; flex-direction: column;
    background: radial-gradient(ellipse at 50% 46%, #18233a 0%, #0b1220 72%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    overflow: hidden;
}
.modal-imagem-header {
    /* sem position: a barra de controles (que na marcação antiga fica DENTRO do header)
       precisa ancorar no container, não no header */
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px 6px 22px;
    background: transparent;
}
.modal-imagem-header h4 {
    margin: 0; min-width: 0; flex: 0 1 auto;
    font-size: 15px; font-weight: 600; color: #e8ecf5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.modal-imagem-header .mob-doc-tag { margin-left: 0; }
.btn-fechar {
    margin-left: auto; flex: 0 0 auto;
    width: 36px; height: 36px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .1); color: #e8ecf5;
    font-size: 22px; line-height: 1; cursor: pointer;
    transition: background .15s;
}
.btn-fechar:hover { background: var(--p-blue); color: #fff; }
.btn-fechar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.modal-imagem-toolbar {
    position: absolute; left: 50%; bottom: 20px; z-index: 3; transform: translateX(-50%);
    display: flex; align-items: center; gap: 2px;
    max-width: calc(100% - 24px); margin: 0; padding: 6px;
    background: rgba(15, 23, 42, .84);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    overflow-x: auto;
}
.modal-imagem-toolbar .btn.btn-default {
    flex: 0 0 auto; width: 38px; height: 36px; margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: 10px; box-shadow: none;
    color: #e8ecf5; font-size: 15px; text-shadow: none;
    transition: background .15s, color .15s;
}
.modal-imagem-toolbar .btn.btn-default:hover,
.modal-imagem-toolbar .btn.btn-default:focus { background: rgba(255, 255, 255, .14); color: #fff; }
.modal-imagem-toolbar .btn.btn-default:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.modal-imagem-toolbar .btn.btn-default i { margin: 0; }
.modal-imagem-zoom-label {
    display: inline-block; flex: 0 0 auto; min-width: 58px; padding: 0 6px; text-align: center;
    font-size: 13px; font-weight: 600; color: #e8ecf5;
    font-variant-numeric: tabular-nums;
}
.modal-imagem-toolbar .btn.btn-default.modal-imagem-zoom-btn {
    width: auto; min-width: 58px; padding: 0 8px;
    font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.modal-imagem-sep { flex: 0 0 auto; width: 1px; height: 22px; margin: 0 6px; background: rgba(255, 255, 255, .16); }

.modal-imagem-body {
    position: relative;
    flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 8px 28px 92px;
    overflow: hidden;
}
.modal-imagem-body img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    /* drop-shadow (e não box-shadow): com object-fit a caixa do <img> é maior que a imagem */
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .55));
    transition: transform .15s ease-out;
    user-select: none; -webkit-user-drag: none;
    touch-action: none; cursor: zoom-in; will-change: transform;
}
.modal-imagem-body.is-zoomed img { cursor: grab; }
.modal-imagem-body.is-dragging img { cursor: grabbing; transition: none; }
.modal-imagem-body img.is-oculta { visibility: hidden; }
.modal-imagem-status {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    color: #a9b4c9; font-size: 14px; font-weight: 600; text-align: center;
    pointer-events: none;
}
.modal-imagem-status i { font-size: 30px; opacity: .6; }
.modal-imagem-subtitulo {
    min-width: 0; flex: 0 1 auto;
    color: #a9b4c9; font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal-imagem-footer { display: none; }

@media (max-width: 680px) {
    .modal-imagem-container { width: 100vw; height: 100vh; border-radius: 0; border: 0; }
    .modal-imagem-body { padding: 4px 8px 84px; }
}
@media (prefers-reduced-motion: reduce) {
    .modal-imagem-overlay.ng-enter, .modal-imagem-overlay.ng-enter .modal-imagem-container,
    .modal-imagem-body img, .btn-fechar, .modal-imagem-toolbar .btn.btn-default { transition: none; }
}

/* ── Animation ─────────────────────────────────────────────────────────── */
@keyframes mob-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .mob-row-2            { grid-template-columns: 1fr; }
    .mob-grid-2           { grid-template-columns: 1fr; }
    .mob-acomp-cards      { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .mob-identity-row     { flex-direction: column; align-items: center; }
    .mob-grid-2           { grid-template-columns: 1fr; }
    .mob-toggles          { grid-template-columns: 1fr; }
    .mob-form             { padding: 0 12px; }
    .mob-page-body,
    .mob-page-title       { padding: 0 12px; }
    .mob-page-header      { padding: 12px 16px; }
    .mob-header-title     { flex-direction: column; align-items: flex-start; gap: 8px; }
    .mob-title            { font-size: 20px; }
}

/* ── Bloco 3: shim de aliases ─────────────────────────────────────────── */
/* Shim: aliases para módulos já migrados antes de mobro-tokens.css.
 * Os 3 prefixos (pac-, sac-, sag-) compartilham as regras do .mob-*.
 * Remover os aliases à medida que cada módulo for refatorado para .mob-*.
 * Ordens de declaração: o agrupamento é um único seletor — sem specificity fight.
 */

/* Page shell */
.mob-page-header,
.pac-page-header, .sac-page-header, .sag-page-header {
    background: var(--p-card);
    border-bottom: 1px solid var(--p-border);
    padding: 14px 28px;
    margin-bottom: 24px;
}

.mob-breadcrumb,
.pac-breadcrumb, .sac-breadcrumb, .sag-breadcrumb {
    font-size: 12px;
    color: var(--p-muted);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

.mob-breadcrumb a,
.pac-breadcrumb a, .sac-breadcrumb a, .sag-breadcrumb a {
    color: var(--p-blue);
    text-decoration: none;
}

.mob-breadcrumb a:hover,
.pac-breadcrumb a:hover, .sac-breadcrumb a:hover, .sag-breadcrumb a:hover { text-decoration: underline; }

.mob-bc-sep,
.pac-bc-sep, .sac-bc-sep, .sag-bc-sep { margin: 0 5px; color: var(--p-muted); }

.mob-bc-active,
.pac-bc-active, .sac-bc-active, .sag-bc-active { color: var(--p-text); font-weight: 600; }

.mob-header-title,
.pac-header-title, .sac-header-title, .sag-header-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.mob-title-wrap,
.pac-title-wrap, .sac-title-wrap, .sag-title-wrap { display: flex; align-items: center; gap: 10px; }

.mob-title,
.pac-title, .sac-title, .sag-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: var(--p-text);
    letter-spacing: -.4px;
}

.mob-title-badge,
.pac-title-badge, .sac-title-badge, .sag-title-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--p-blue-lt);
    color: var(--p-blue);
    border: 1px solid var(--p-blue-bd);
}

.mob-title-badge--edit,
.pac-title-badge--edit, .sac-title-badge--edit, .sag-title-badge--edit {
    background: var(--p-amber-lt);
    color: var(--p-amber);
    border-color: var(--p-amber-bd);
}

.mob-title-badge--new,
.pac-title-badge--new, .sac-title-badge--new, .sag-title-badge--new {
    background: var(--p-green-lt);
    color: var(--p-green);
    border-color: var(--p-green-bd);
}

.mob-back-link,
.pac-back-link, .sac-back-link, .sag-back-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--p-blue);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--p-radius-sm);
    border: 1px solid var(--p-blue-lt);
    transition: background .15s;
    cursor: pointer;
}

.mob-back-link:hover,
.pac-back-link:hover, .sac-back-link:hover, .sag-back-link:hover {
    background: var(--p-blue-lt);
    text-decoration: none;
}

.mob-page-body, .mob-page-title,
.pac-page-body, .sac-page-body, .sag-page-body,
.pac-page-title, .sac-page-title, .sag-page-title {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

.mob-form,
.pac-form, .sac-form, .sag-form {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Cards */
.mob-card,
.pac-card, .sac-card, .sag-card {
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius);
    box-shadow: var(--p-shadow);
    margin-bottom: 18px;
    overflow: hidden;
}

.mob-row-2,
.pac-row-2, .sac-row-2, .sag-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.mob-row-2 .mob-card,
.pac-row-2 .pac-card, .sac-row-2 .sac-card, .sag-row-2 .sag-card { margin-bottom: 0; }

.mob-card-header,
.pac-card-header, .sac-card-header, .sag-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--p-border);
    border-left: 4px solid var(--p-blue);
    background: linear-gradient(to right, var(--p-blue-lt), var(--p-card) 60%);
}

.mob-card-header:has(.mob-icon--green),
.pac-card-header:has(.pac-icon--green), .sac-card-header:has(.sac-icon--green), .sag-card-header:has(.sag-icon--green) {
    border-left-color: var(--p-green);
    background: linear-gradient(to right, var(--p-green-lt), var(--p-card) 60%);
}

.mob-card-header:has(.mob-icon--amber),
.pac-card-header:has(.pac-icon--amber), .sac-card-header:has(.sac-icon--amber), .sag-card-header:has(.sag-icon--amber) {
    border-left-color: var(--p-amber);
    background: linear-gradient(to right, var(--p-amber-lt), var(--p-card) 60%);
}

.mob-card-header:has(.mob-icon--purple),
.pac-card-header:has(.pac-icon--purple), .sac-card-header:has(.sac-icon--purple), .sag-card-header:has(.sag-icon--purple) {
    border-left-color: var(--p-purple);
    background: linear-gradient(to right, var(--p-purple-lt), var(--p-card) 60%);
}

.mob-card-header:has(.mob-icon--slate),
.pac-card-header:has(.pac-icon--slate), .sac-card-header:has(.sac-icon--slate), .sag-card-header:has(.sag-icon--slate) {
    border-left-color: var(--p-slate);
    background: linear-gradient(to right, var(--p-slate-lt), var(--p-card) 60%);
}

.mob-card-header:has(.mob-icon--dark),
.pac-card-header:has(.pac-icon--dark), .sac-card-header:has(.sac-icon--dark), .sag-card-header:has(.sag-icon--dark) {
    border-left-color: var(--p-dark);
    background: linear-gradient(to right, var(--p-dark-lt), var(--p-card) 60%);
}

.mob-card-header:has(.mob-icon--teal),
.pac-card-header:has(.pac-icon--teal), .sac-card-header:has(.sac-icon--teal), .sag-card-header:has(.sag-icon--teal) {
    border-left-color: var(--p-teal);
    background: linear-gradient(to right, var(--p-teal-lt), var(--p-card) 60%);
}

.mob-card-icon,
.pac-card-icon, .sac-card-icon, .sag-card-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--p-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.pac-card-header .pac-icon--green  { background: var(--p-green); }
.pac-card-header .pac-icon--amber  { background: var(--p-amber); }
.pac-card-header .pac-icon--purple { background: var(--p-purple); }
.pac-card-header .pac-icon--slate  { background: var(--p-slate); }
.pac-card-header .pac-icon--dark   { background: var(--p-dark); }
.pac-card-header .pac-icon--teal   { background: var(--p-teal); }

.sac-card-header .sac-icon--green  { background: var(--p-green); }
.sac-card-header .sac-icon--teal   { background: var(--p-teal); }

.mob-icon--green,  .pac-icon--green,  .sac-icon--green,  .sag-icon--green  { background: var(--p-green); }
.mob-icon--amber,  .pac-icon--amber,  .sac-icon--amber,  .sag-icon--amber  { background: var(--p-amber); }
.mob-icon--purple, .pac-icon--purple, .sac-icon--purple, .sag-icon--purple { background: var(--p-purple); }
.mob-icon--slate,  .pac-icon--slate,  .sac-icon--slate,  .sag-icon--slate  { background: var(--p-slate); }
.mob-icon--dark,   .pac-icon--dark,   .sac-icon--dark,   .sag-icon--dark   { background: var(--p-dark); }
.mob-icon--teal,   .pac-icon--teal,   .sac-icon--teal,   .sag-icon--teal   { background: var(--p-teal); }

.mob-card-title,
.pac-card-title, .sac-card-title, .sag-card-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--p-text);
    flex: 1;
}

.mob-header-action,
.pac-header-action, .sac-header-action, .sag-header-action {
    background: var(--p-teal);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background .15s;
}

.mob-header-action:hover,
.pac-header-action:hover, .sac-header-action:hover, .sag-header-action:hover { background: var(--p-teal); opacity: .88; }

.mob-card-body,
.pac-card-body, .sac-card-body, .sag-card-body { padding: 20px 18px; }

/* Field grid */
/* Corpo de card em coluna: espaçamento vertical uniforme entre linhas de campos (sem margin-top inline) */
.sag-stack { display: flex; flex-direction: column; gap: 14px; }
.sag-stack > .sag-grid-2 { width: 100%; }
.mob-grid-2,
.pac-grid-2, .sac-grid-2, .sag-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Form fields */
.mob-field,
.pac-field, .sac-field, .sag-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mob-form-row,
.pac-form-row, .sac-form-row, .sag-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
    align-items: start;
}

.mob-form-row--single,
.pac-form-row--single, .sac-form-row--single, .sag-form-row--single {
    grid-template-columns: 1fr;
}

.mob-form-row:last-child,
.pac-form-row:last-child, .sac-form-row:last-child, .sag-form-row:last-child { margin-bottom: 0; }

.mob-field--grow,
.pac-field--grow, .sac-field--grow, .sag-field--grow  { min-width: 0; }
.mob-field--half,
.pac-field--half, .sac-field--half, .sag-field--half  { min-width: 0; }
.mob-field--fixed,
.pac-field--fixed, .sac-field--fixed, .sag-field--fixed { min-width: 0; }

.mob-hint,
.pac-hint, .sac-hint, .sag-hint {
    font-size: 11px;
    color: var(--p-muted);
    margin-top: 2px;
    line-height: 1.4;
}

.mob-toggle-inline,
.pac-toggle-inline, .sac-toggle-inline, .sag-toggle-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 14px;
    background: var(--p-card-2);
    border: 1.5px solid var(--p-border);
    border-radius: 20px;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background .15s;
    white-space: nowrap;
}

.mob-toggle-inline:hover,
.pac-toggle-inline:hover, .sac-toggle-inline:hover, .sag-toggle-inline:hover {
    border-color: var(--p-blue);
    background: var(--p-blue-lt);
}

.mob-toggle-inline-text,
.pac-toggle-inline-text, .sac-toggle-inline-text, .sag-toggle-inline-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--p-text);
}

.mob-label,
.pac-label, .sac-label, .sag-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--p-muted);
    letter-spacing: .5px;
    text-transform: uppercase;
    margin: 0;
}

.mob-req, .pac-req, .sac-req, .sag-req { color: var(--p-danger); font-weight: 700; }

input.mob-input,
input.pac-input, input.sac-input, input.sag-input {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--p-border);
    border-radius: var(--p-radius-sm) !important;
    font-size: 14px;
    color: var(--p-text);
    background: var(--p-card);
    transition: border-color .18s, box-shadow .18s;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

input.mob-input:focus,
input.pac-input:focus, input.sac-input:focus, input.sag-input:focus {
    border-color: var(--p-blue) !important;
    box-shadow: var(--p-ring);
}

input.mob-input[disabled], input.mob-input:disabled, fieldset[disabled] input.mob-input,
input.pac-input[disabled], input.pac-input:disabled, fieldset[disabled] input.pac-input,
input.sac-input[disabled], input.sac-input:disabled, fieldset[disabled] input.sac-input,
input.sag-input[disabled], input.sag-input:disabled, fieldset[disabled] input.sag-input {
    background: var(--p-card-2);
    color: var(--p-muted);
    cursor: default;
}

.mob-textarea, .pac-textarea, .sac-textarea, .sag-textarea { resize: vertical; min-height: 82px; }
.mob-textarea--tall, .pac-textarea--tall, .sac-textarea--tall, .sag-textarea--tall { min-height: 130px; }

/* Caixa de <textarea> do design system. Ate aqui NENHUMA regra do mobro
 * alcancava textarea: `input.mob-input`/`input.pac-input` sao qualificadas
 * por ELEMENTO, e o legado estiliza o `textarea` nu (ace.css:7745 e
 * sigem.css:312: 12px, padding 5px 4px, cor #858585 e
 * `border-radius: 0 !important`). Efeito medido no form de paciente
 * (card Observacoes): 155px de largura, radius 0, fonte 12px — porque
 * textoarea nao estica sozinha e o card nao tem wrapper de campo
 * (`.mob-field`/`.pac-field` e que estica por ser flex column).
 * `!important` SO no radius (sigem.css:312 crava `0 !important`) e no
 * box-shadow do foco (sigem.css:312 crava `box-shadow: none !important`). */
textarea.mob-input, textarea.pac-input, textarea.sac-input, textarea.sag-input,
.mob-textarea, .pac-textarea, .sac-textarea, .sag-textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--p-border);
    border-radius: var(--p-radius-sm) !important;
    font-size: 14px;
    color: var(--p-text);
    background: var(--p-card);
    box-sizing: border-box;
    outline: none;
    resize: vertical;
    transition: border-color .18s, box-shadow .18s;
}

textarea.mob-input:focus, textarea.pac-input:focus, textarea.sac-input:focus, textarea.sag-input:focus,
.mob-textarea:focus, .pac-textarea:focus, .sac-textarea:focus, .sag-textarea:focus {
    border-color: var(--p-blue) !important;
    box-shadow: var(--p-ring) !important;
}

/* Estado desabilitado, espelhando `input.pac-input[disabled]` logo acima.
 * O ace.css so cobre `input[disabled]`/`select[disabled]` (7731/7900) e
 * `.form-group textarea[disabled]` (9105) — um `<textarea disabled>` FORA
 * de um `.form-group` nao tinha cara de desabilitado (media #fff/#1a202c
 * no tema claro, igual ao habilitado). `[readonly]` fica de fora de
 * proposito: `input.pac-input` tambem nao tem regra de readonly — quem
 * manda ali e o ace.css:7920, usado nos campos de saida. */
textarea.mob-input:disabled, textarea.pac-input:disabled, textarea.sac-input:disabled, textarea.sag-input:disabled,
.mob-textarea:disabled, .pac-textarea:disabled, .sac-textarea:disabled, .sag-textarea:disabled,
fieldset[disabled] textarea.mob-input, fieldset[disabled] textarea.pac-input,
fieldset[disabled] textarea.sac-input, fieldset[disabled] textarea.sag-input,
fieldset[disabled] .mob-textarea, fieldset[disabled] .pac-textarea,
fieldset[disabled] .sac-textarea, fieldset[disabled] .sag-textarea {
    background: var(--p-card-2);
    color: var(--p-muted);
    cursor: default;
}

.mob-select,
.pac-select, .sac-select, .sag-select {
    width: 100%;
    padding: 9px 36px 9px 12px;
    border: 1.5px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    font-size: 14px;
    color: var(--p-text);
    background: var(--p-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E") no-repeat right 12px center;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
    box-sizing: border-box;
}

.mob-select:focus,
.pac-select:focus, .sac-select:focus, .sag-select:focus {
    border-color: var(--p-blue);
    box-shadow: var(--p-ring);
}

/* Select do design system x legado (medido via CSSOM em set/2026): o
 * `select` NU e alcancado por sigem.css:245/312, que crava
 * `padding-left/right: 6px !important`, `color: #aaa !important`,
 * `box-shadow: none !important` e `border-radius: 0 !important`. Como as
 * regras `.mob-select`/`.pac-select` NAO tinham `!important`, o select
 * nascia quadrado, com padding lateral de 6px (o token pede 12/36px por
 * causa do chevron) e, no tema claro, com o texto #aaaaaa — medido no
 * "Tipo ARV" do form de paciente: h37, radius 0px, color rgb(170,170,170). */
.mob-select, .pac-select, .sac-select, .sag-select {
    padding: 9px 36px 9px 12px !important;
    border-radius: var(--p-radius-sm) !important;
    color: var(--p-text) !important;
}

.mob-select:focus, .pac-select:focus, .sac-select:focus, .sag-select:focus {
    border-color: var(--p-blue) !important;
    box-shadow: var(--p-ring) !important;
}

/* Chevron do select no tema escuro (o `background` do Bloco 1 zerava o
 * background-image do token). Mesma seta, cor com contraste pra --p-bg. */
html[data-theme="dark"] .mob-select, html[data-theme="dark"] .pac-select,
html[data-theme="dark"] .sac-select, html[data-theme="dark"] .sag-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.mob-field-error, .pac-field-error, .sac-field-error, .sag-field-error {
    font-size: 11px;
    color: var(--p-danger);
    min-height: 14px;
}

.mob-fields-note, .pac-fields-note, .sac-fields-note, .sag-fields-note {
    font-size: 12px;
    color: var(--p-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0 14px;
}

.mob-field--span2,
.pac-field--span2, .sac-field--span2, .sag-field--span2 { grid-column: 1 / -1; }

/* Date input fix */
input[type="date"].mob-input,
input[type="date"].pac-input, input[type="date"].sac-input, input[type="date"].sag-input {
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: var(--p-radius-sm) !important;
    padding: 9px 12px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

/* Input with btn */
.mob-input-with-btn, .pac-input-with-btn {
    display: flex;
    gap: 6px;
}

.mob-input-with-btn .mob-input,
.pac-input-with-btn .pac-input { flex: 1; }

/* Ver comentário no Bloco 2: `inline-flex` + centro é o que mantém o glifo
 * centrado tanto no `<button>` quanto no `<a>`, e `--p-text` casa o botão com
 * os `.input-group-addon` do autocomplete na mesma linha. */
.mob-btn-icon, .pac-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1.5px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    background: var(--p-card);
    color: var(--p-text);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
}

.mob-btn-icon:hover, .pac-btn-icon:hover {
    background: var(--p-blue-lt);
    border-color: var(--p-blue);
    color: var(--p-blue);
}

/* Identity row */
.mob-identity-row,
.pac-identity-row, .sac-identity-row, .sag-identity-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.mob-avatar-col,
.pac-avatar-col { display: flex; flex-direction: column; align-items: center; gap: 7px; flex-shrink: 0; }

.mob-avatar,
.pac-avatar {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--p-border);
    background: var(--p-card-2);
    position: relative;
    transition: border-color .2s, box-shadow .2s;
}

.mob-avatar--clickable, .pac-avatar--clickable {
    cursor: pointer;
    border-color: var(--p-blue);
}

.mob-avatar--clickable:hover, .pac-avatar--clickable:hover { box-shadow: var(--p-ring); }

.mob-avatar--clickable:hover .mob-avatar-overlay,
.pac-avatar--clickable:hover .pac-avatar-overlay { opacity: 1; }

.mob-avatar-img, .pac-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mob-avatar-overlay, .pac-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26,107,124,.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    transition: opacity .2s;
    gap: 3px;
}

.mob-avatar-overlay i, .pac-avatar-overlay i { font-size: 20px; }

.mob-avatar-hint, .pac-avatar-hint {
    font-size: 11px;
    color: var(--p-muted);
    text-align: center;
}

.mob-identity-fields,
.pac-identity-fields, .sac-identity-fields, .sag-identity-fields { flex: 1; min-width: 0; }

/* sac identity-avatar (prefixo diferente mas mesma estrutura) */
.sac-identity-avatar-col { display: flex; flex-direction: column; align-items: center; gap: 7px; flex-shrink: 0; }
.sac-identity-avatar { position: relative; width: 108px; height: 108px; border-radius: 50%; overflow: hidden; border: 3px solid var(--p-border); background: var(--p-card-2); transition: border-color .2s, box-shadow .2s; }
.sac-identity-avatar--clickable { cursor: pointer; border-color: var(--p-teal); }
.sac-identity-avatar--clickable:hover { box-shadow: var(--p-ring); }
.sac-identity-avatar--clickable:hover .sac-identity-avatar-overlay { opacity: 1; }
.sac-identity-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sac-identity-avatar-overlay { position: absolute; inset: 0; background: rgba(13,112,112,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 600; opacity: 0; transition: opacity .2s; gap: 3px; cursor: pointer; margin: 0; }
.sac-identity-avatar-overlay i { font-size: 20px; }
.sac-identity-avatar-hint { font-size: 12px; color: var(--p-muted); }

/* Toggles */
.mob-toggles, .pac-toggles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.mob-toggle-card, .pac-toggle-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 14px;
    min-height: 40px;
    border: 1.5px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    background: var(--p-card);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
    box-sizing: border-box;
}

.mob-toggle-card:hover, .pac-toggle-card:hover {
    border-color: var(--p-blue);
    background: var(--p-blue-lt);
}

.mob-switch, .pac-switch {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.mob-switch input, .pac-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.mob-switch-slider, .pac-switch-slider {
    position: absolute;
    inset: 0;
    background: var(--p-border-strong);
    border-radius: 22px;
    transition: background .2s;
    cursor: pointer;
}

.mob-switch-slider::before, .pac-switch-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

.mob-switch input:checked + .mob-switch-slider,
.pac-switch input:checked + .pac-switch-slider { background: var(--p-blue); }

.mob-switch input:checked + .mob-switch-slider::before,
.pac-switch input:checked + .pac-switch-slider::before { transform: translateX(18px); }

fieldset[disabled] .mob-switch-slider,
fieldset[disabled] .pac-switch-slider { cursor: default; opacity: .6; }

.mob-toggle-info, .pac-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mob-toggle-label-text, .pac-toggle-label-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--p-text);
}

.mob-toggle-desc, .pac-toggle-desc {
    font-size: 11px;
    color: var(--p-muted);
    line-height: 1.3;
}

/* Toggle-card como opção única (radio), ex.: nível de acesso ao APP no paciente */
.mob-toggle-card.is-selected, .pac-toggle-card.is-selected {
    border-color: var(--p-blue);
    background: var(--p-blue-lt);
}

.mob-toggle-card input[type="radio"], .pac-toggle-card input[type="radio"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--p-blue);
}

/* Conditional block */
.mob-conditional-block, .pac-conditional-block {
    background: var(--p-amber-lt);
    border: 1.5px solid var(--p-amber-bd);
    border-radius: var(--p-radius-sm);
    padding: 14px 16px;
    margin-bottom: 16px;
    animation: mob-reveal .18s ease;
}

.mob-conditional-header, .pac-conditional-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--p-amber);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Acomp cards */
.mob-acomp-cards, .pac-acomp-cards,
.sac-page .sac-acomp-cards { /* sac usa contexto .sac-page */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}

.mob-acomp-card, .pac-acomp-card,
.sac-page .sac-acomp-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--p-card-2);
    border: 1.5px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    position: relative;
    transition: border-color .15s, box-shadow .15s;
}

.mob-acomp-card:hover, .pac-acomp-card:hover { border-color: var(--p-teal); box-shadow: 0 2px 8px rgba(13,112,112,.08); }
.sac-page .sac-acomp-card:hover { border-color: var(--p-teal); box-shadow: 0 2px 8px rgba(13,112,112,.08); }

.mob-acomp-card-avatar, .pac-acomp-card-avatar,
.sac-page .sac-acomp-card-avatar { flex-shrink: 0; }

.mob-acomp-avatar-img, .pac-acomp-avatar-img,
.sac-page .sac-acomp-avatar-img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--p-border);
    display: block;
}

.mob-acomp-card-info, .pac-acomp-card-info,
.sac-page .sac-acomp-card-info { flex: 1; min-width: 0; }

.mob-acomp-card-name, .pac-acomp-card-name,
.sac-page .sac-acomp-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--p-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.mob-acomp-card-row, .pac-acomp-card-row,
.sac-page .sac-acomp-card-row {
    font-size: 11px;
    color: var(--p-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mob-acomp-card-label, .pac-acomp-card-label,
.sac-page .sac-acomp-card-label {
    font-weight: 600;
    color: var(--p-teal);
    text-transform: uppercase;
    letter-spacing: .3px;
    font-size: 10px;
}

.mob-acomp-card-actions, .pac-acomp-card-actions,
.sac-page .sac-acomp-card-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mob-acomp-action, .pac-acomp-action,
.sac-page .sac-acomp-action {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.mob-acomp-action--view,  .pac-acomp-action--view  { color: var(--p-blue); }
.mob-acomp-action--view:hover,  .pac-acomp-action--view:hover  { background: var(--p-blue-lt); color: var(--p-blue); }
.mob-acomp-action--edit,  .pac-acomp-action--edit  { color: var(--p-teal); }
.mob-acomp-action--edit:hover,  .pac-acomp-action--edit:hover  { background: var(--p-teal-lt); color: var(--p-teal); }
.mob-acomp-action--remove, .pac-acomp-action--remove { color: var(--p-danger); }
.mob-acomp-action--remove:hover, .pac-acomp-action--remove:hover { background: var(--p-danger-lt); color: var(--p-danger); }
.sac-page .sac-acomp-action--view  { color: var(--p-blue); }
.sac-page .sac-acomp-action--view:hover  { background: var(--p-blue-lt); color: var(--p-blue); }
.sac-page .sac-acomp-action--edit  { color: var(--p-teal); }
.sac-page .sac-acomp-action--edit:hover  { background: var(--p-teal-lt); color: var(--p-teal); }
.sac-page .sac-acomp-action--remove { color: var(--p-danger); }
.sac-page .sac-acomp-action--remove:hover { background: var(--p-danger-lt); color: var(--p-danger); }

.mob-acomp-empty, .pac-acomp-empty,
.sac-page .sac-acomp-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 0;
    color: var(--p-muted);
    font-size: 13px;
}

.mob-acomp-empty i, .pac-acomp-empty i,
.sac-page .sac-acomp-empty i { font-size: 22px; opacity: .4; }

/* Acomp form inline */
.mob-acomp-form, .pac-acomp-form {
    margin-top: 16px;
    border-top: 2px solid var(--p-teal-lt);
    padding-top: 16px;
}

.mob-acomp-form-title, .pac-acomp-form-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--p-teal);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 8px 12px;
    background: var(--p-teal-lt);
    border-radius: var(--p-radius-sm);
}

.mob-acomp-form-grid, .pac-acomp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.mob-acomp-form-actions, .pac-acomp-form-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.mob-acomp-btn, .pac-acomp-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 18px;
    border: none;
    border-radius: var(--p-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
}

.mob-acomp-btn:hover, .pac-acomp-btn:hover { opacity: .88; transform: translateY(-1px); }
.mob-acomp-btn:active, .pac-acomp-btn:active { transform: translateY(0); }
.mob-acomp-btn--confirm, .pac-acomp-btn--confirm { background: var(--p-teal); color: #fff; }
.mob-acomp-btn--cancel,  .pac-acomp-btn--cancel  { background: var(--p-card); color: var(--p-text); border: 1.5px solid var(--p-border-strong); }
.mob-acomp-btn--cancel:hover, .pac-acomp-btn--cancel:hover { background: var(--p-card-2); }

/* Modal "Foto" (Util.capturarFoto) — escolha inicial (foto atual + Anexar/Capturar) e passo de câmera */
#divEscolhaFoto, #divCapturaFoto { padding: 4px 2px; }

.mob-foto-modal-preview {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--p-border);
    background: var(--p-card-2);
    margin: 4px auto 18px;
}

.mob-foto-modal-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Visualização (Util.visualizarFoto) — mesmo componente, 50% maior (240px, sem botões de edição) */
.mob-foto-modal-preview--grande { width: 240px; height: 240px; }

.mob-foto-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.mob-foto-modal-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border: none;
    border-radius: var(--p-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    max-width: 140px;
}

.mob-foto-modal-btn:hover { opacity: .88; transform: translateY(-1px); }
.mob-foto-modal-btn:active { transform: translateY(0); }
.mob-foto-modal-btn--primary { background: var(--p-blue); color: #fff; }
.mob-foto-modal-btn--secondary { background: var(--p-card); color: var(--p-text); border: 1.5px solid var(--p-border-strong); }
.mob-foto-modal-btn--secondary:hover { background: var(--p-card-2); }

.mob-foto-modal-cancelar { text-align: center; margin-top: 14px; }
.mob-foto-modal-cancelar a { font-size: 12px; color: var(--p-muted); text-decoration: underline; cursor: pointer; }
.mob-foto-modal-cancelar a:hover { color: var(--p-text); }

/* Action bar */
.mob-action-bar, .pac-action-bar, .sac-action-bar, .sag-action-bar {
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius);
    padding: 16px 18px;
    box-shadow: var(--p-shadow);
    margin-bottom: 20px;
}

.mob-action-bar > div, .pac-action-bar > div,
.sac-action-bar > div, .sag-action-bar > div {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mob-action-group, .sac-action-group, .sag-action-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mob-btn, .pac-btn, .sac-btn, .sag-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    border: none;
    border-radius: var(--p-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .1s, box-shadow .15s;
    letter-spacing: .1px;
}

.mob-btn:hover:not(:disabled), .pac-btn:hover:not(:disabled),
.sac-btn:hover:not(:disabled), .sag-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }

.mob-btn:active:not(:disabled), .pac-btn:active:not(:disabled),
.sac-btn:active:not(:disabled), .sag-btn:active:not(:disabled) { transform: translateY(0); }

.mob-btn:disabled, .pac-btn:disabled,
.sac-btn:disabled, .sag-btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }

.mob-btn--success,   .pac-btn--success,   .sac-btn--success,   .sag-btn--success   { background: var(--p-green); color: #fff; }
.mob-btn--secondary, .pac-btn--secondary, .sac-btn--secondary, .sag-btn--secondary { background: #3a82c4; color: #fff; }
.mob-btn--outline,   .pac-btn--outline {
    background: transparent;
    color: var(--p-muted);
    border: 1.5px solid var(--p-border);
}
.mob-btn--outline:hover:not(:disabled), .pac-btn--outline:hover:not(:disabled) {
    background: var(--p-card-2);
    color: var(--p-text);
    border-color: var(--p-border-strong);
}

/* sac/sag só tem btn--success/warning/danger/neutral */
.sac-btn--warning, .sag-btn--warning { background: var(--p-amber); color: #fff; }
.sac-btn--danger,  .sag-btn--danger  { background: var(--p-danger); color: #fff; }
.sac-btn--neutral, .sag-btn--neutral { background: var(--p-card); color: var(--p-text); border: 1.5px solid var(--p-border-strong); }
.sac-btn--neutral:hover:not(:disabled), .sag-btn--neutral:hover:not(:disabled) { background: var(--p-card-2); color: var(--p-text); }

/* ── Bloco 4: Skin jqxGrid (MobRo sobre jqx.metro) ──────────────────────
 * Sobrescreve o skin jqx.metro.css (carregado em src/index.php:81-82)
 * para alinhar o visual do jqxGrid ao design system MobRo.
 *
 * Estratégia: mesmo padrão do shim pac/sac/sag — copiar a regra do
 * jqx.metro.css, trocar a paleta de cores para var(--p-*). Usa
 * !important onde o jqx usa !important (mesma especificidade, mas
 * mobro-tokens.css é carregado depois, vence a corrida).
 *
 * Quando o jqxGrid for trocado por diretiva custom (depois do Tailwind
 * entrar), este bloco inteiro sai junto.
 * ----------------------------------------------------------------------- */
.jqx-widget-metro {
    font-size: 13px;
    font-family: 'segoe ui', arial, sans-serif;
    color: var(--p-text);
}
.jqx-widget-content-metro {
    font-size: 13px;
    font-family: 'segoe ui', arial, sans-serif;
    border-color: var(--p-border) !important;
    color: var(--p-text) !important;
    background-color: var(--p-card) !important;
    background: var(--p-card) !important;
}
.jqx-widget-header-metro {
    font-size: 13px;
    font-family: 'segoe ui', arial, sans-serif;
    color: #fff !important;
    border-color: var(--p-blue) !important;
    background-color: var(--p-blue) !important;
    background: var(--p-blue) !important;
}

/* jqxgrid.js (header da coluna): os ícones de ordenação/filtro são 3 wrappers
 * de 16px — `.sortasc`, `.sortdesc`, `.filtericon` — dentro de um
 * `.iconscontainer` posicionado em `left:100%` do header da coluna, e cada
 * wrapper recebe a classe genérica `jqx-widget-header-metro`. A regra genérica
 * acima pinta `--p-blue` (#1a6b7c no claro / #38bdf8 no escuro), que NÃO é a
 * cor do header do grid (`--p-blue-strong`): aparece um retângulo de outro azul
 * dentro da faixa do header, exatamente na coluna ordenada/filtrada
 * ("marcação em azul quando ordenamos"). São só caixas de posicionamento do
 * PNG do ícone — transparentes, o fundo do header passa por baixo (inclusive
 * o realce de hover da célula). Especificidade (0,2,0) + !important vence a
 * regra genérica (0,1,0). */
.jqx-widget-header-metro.sortasc,
.jqx-widget-header-metro.sortdesc,
.jqx-widget-header-metro.filtericon {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
}
/* Os PNGs dos botões (metro-icon-up/down.png, filter2.png) são cinza #606060:
 * feitos pro header claro do skin metro. Sobre o nosso header azul eles ficam
 * com a MESMA luminância do fundo (desaparecem). Sem o quadrado atrás, o
 * indicador de coluna ordenada/filtrada só é legível com o ícone claro. */
.jqx-grid-column-sortascbutton-metro,
.jqx-grid-column-sortdescbutton-metro,
.jqx-grid-column-filterbutton-metro,
/* botão de menu da coluna = o FUNIL de filtrar no skin metro
   (jqx.metro.css:220 usa `filter2.png`, um funil azul com fundo
   transparente — sobre o nosso header azul ele não se distingue: "não é
   possível visualizar a função ... filtrar"). Mesmo tratamento das setas. */
.jqx-grid-column-menubutton-metro {
    filter: brightness(0) invert(1);
}
.jqx-fill-state-normal-metro {
    font-size: 13px;
    font-family: 'segoe ui', arial, sans-serif;
    border-color: var(--p-border);
    color: var(--p-text);
    background: var(--p-card);
}
.jqx-fill-state-hover-metro {
    background-color: var(--p-blue-lt);
    color: var(--p-blue);
    border-color: var(--p-border);
}
.jqx-fill-state-pressed-metro {
    background-color: var(--p-blue);
    border-color: var(--p-blue);
    color: #fff;
}
.jqx-fill-state-focus-metro {
    background-color: var(--p-card);
    border-color: var(--p-blue);
    color: var(--p-text);
}
.jqx-button-metro {
    border-color: var(--p-border);
    background: var(--p-card);
    color: var(--p-text);
}
.jqx-button-metro:hover {
    background: var(--p-blue-lt);
    border-color: var(--p-blue);
    color: var(--p-blue);
}
.jqx-input-metro {
    border-color: var(--p-border);
    background: var(--p-card);
    color: var(--p-text);
}

/* ── Grid: header / cells / rows ─────────────────────────────────────── */
/* Header da grid usa cor da navbar (--p-blue-strong) — não teal MobRo
   padrão. Justificativa: o header da grid é um elemento denso (1 faixa
   de ~40px com várias colunas), o --p-blue MobRo #1a6b7c fica agressivo
   nessa altura. --p-blue-strong #006699 (mesmo da navbar) tem a mesma
   identidade mas mais saturado, casa melhor visualmente. */
.jqx-grid-header-metro,
div.jqx-grid-header-metro {
    color: #fff !important;
    background: var(--p-blue-strong) !important;
    background-color: var(--p-blue-strong) !important;
    border-color: var(--p-blue-strong) !important;
}
.jqx-grid-column-header-metro,
div.jqx-grid-column-header-metro {
    color: #fff !important;
    background: transparent !important;
    background-color: transparent !important;
    border-color: var(--p-blue-strong) !important;
    font-weight: 600;
}
.jqx-grid-column-header-metro:hover,
div.jqx-grid-column-header-metro:hover {
    background: var(--p-blue-strong) !important;
    background-color: var(--p-blue-strong) !important;
    color: #fff !important;
    filter: brightness(1.15);
}
.jqx-grid-header-metro,
div.jqx-grid-header-metro,
.jqx-grid-column-header-metro,
div.jqx-grid-column-header-metro {
    border-bottom: 1px solid var(--p-blue-strong) !important;
}

/* Groups header (área "Arraste uma coluna e solte aqui para agrupar por
   essa coluna") — fundo branco, texto muted MobRo, sem cinza jqx */
.jqx-grid-groups-header,
div.jqx-grid-groups-header {
    background: var(--p-card) !important;
    background-color: var(--p-card) !important;
    color: var(--p-muted) !important;
    border-bottom: 1px solid var(--p-border) !important;
    border-color: var(--p-border) !important;
}
/* O placeholder "Arraste uma coluna e solte aqui para agrupar por essa
 * coluna" mora num div interno e o jqx.metro.css:5-10 crava
 * `#groupsheader > div > div { color: #515151 }` — cinza escuro pensado pro
 * fundo claro daquele skin. Como é declaração direta no elemento, ela ganha
 * da cor herdada da barra (`--p-muted` acima): no tema escuro sobra
 * #515151 sobre #334155 e a instrução de arrastar a coluna desaparece.
 * `!important` (importance vence especificidade de ID) + var(--p-text) nos
 * dois aninhamentos possíveis (id do jqx e a classe do grid). */
html[data-theme="dark"] #groupsheader > div > div,
html[data-theme="dark"] .jqx-grid-groups-header > div > div {
    color: var(--p-text) !important;
}
.jqx-grid-toolbar,
div.jqx-grid-toolbar {
    background: var(--p-card) !important;
    background-color: var(--p-card) !important;
    color: var(--p-text) !important;
    border-color: var(--p-border) !important;
}
.jqx-grid-cell-metro,
.jqx-grid-cell-alt-metro,
.jqx-grid-cell-sort-metro,
.jqx-grid-cell-sort-alt-metro,
.jqx-grid-cell-filter-alt-metro,
.jqx-grid-cell-pinned-metro {
    background-color: var(--p-card);
    /* !important: jqxGrid (jqx.base.css `.jqx-widget{color:#000000}`) e o
       cellsrenderer de alguns módulos reconstroem o HTML da célula — sem
       !important o texto ficava preto sobre fundo escuro. */
    color: var(--p-text) !important;
    border-color: var(--p-border);
}
/* Linhas de grade (borda entre células/colunas) — jqx.base.css e
 * jqx.metro.css têm 3 seletores descendentes (`.jqx-widget .jqx-grid-cell`,
 * `.jqx-widget-metro .jqx-grid-cell-metro`, etc.) com 2 classes de
 * especificidade, todos com cinza bem claro (#aaa/#e5e5e5/#f0f0f0) — vencem
 * a regra de classe única acima mesmo sem !important. Reproduz a mesma
 * estrutura de seletor pra garantir a mesma especificidade + o prefixo de
 * tema por cima. */
html[data-theme="dark"] .jqx-widget .jqx-grid-cell,
html[data-theme="dark"] .jqx-widget .jqx-grid-column-header,
html[data-theme="dark"] .jqx-widget .jqx-grid-group-cell,
html[data-theme="dark"] .jqx-widget-metro .jqx-grid-cell-metro,
html[data-theme="dark"] .jqx-widget-metro .jqx-grid-column-header-metro,
html[data-theme="dark"] .jqx-widget-metro .jqx-grid-group-cell-metro {
    border-color: var(--p-border);
}
.jqx-grid-cell-alt-metro,
.jqx-grid-cell-sort-alt-metro,
.jqx-grid-cell-filter-alt-metro {
    background-color: var(--p-row-alt) !important;
    color: var(--p-text) !important;
}
/* Linha ímpar (zebra striping): a regra acima usa `var(--p-row-alt)`, que a
 * partir da 008 tem par claro/escuro no :root — o override dedicado por tema
 * que existia aqui virou redundante e foi removido. */
/* Coluna ORDENADA (`-sort-metro` / `-sort-alt-metro`) — marcação própria via
 * `--p-grid-sort-bg` (par claro/escuro no Bloco 1). O skin metro pintava
 * `#EFF3F8 !important` (indistinguível da célula branca no claro) e no escuro
 * aquele quasi-branco + texto claro deixava a coluna ilegível: nos dois casos
 * a marcação era imperceptível ("se há mudança de cor ao reordenar não é
 * perceptível"). Fica DEPOIS da regra do zebra de propósito: mesmo `!important`
 * e mesma especificidade → esta vence, e a coluna fica com tint UNIFORME (sem
 * alternar com a zebra), que é o desenho do jqx (as duas classes `-sort-`
 * valem a mesma cor). Hover/seleção continuam mandando — vêm logo abaixo. */
.jqx-grid-cell-sort-metro,
.jqx-grid-cell-sort-alt-metro {
    background-color: var(--p-grid-sort-bg) !important;
}
.jqx-grid-cell-hover-metro {
    background-color: var(--p-blue-lt) !important;
    color: var(--p-text) !important;
}
.jqx-grid-cell-selected-metro {
    background-color: var(--p-blue-lt) !important;
    color: var(--p-blue) !important;
}
/* Tema escuro: --p-blue-lt aqui é um azul-marinho sólido (bom pra tint de
 * badge, ruim pra highlight de seleção — fica um bloco opaco em vez de um
 * realce sutil). Hover/seleção usam o próprio --p-blue com alpha baixo. */
html[data-theme="dark"] .jqx-grid-cell-hover-metro {
    background-color: rgba(56, 189, 248, .10) !important;
}
html[data-theme="dark"] .jqx-grid-cell-selected-metro {
    background-color: rgba(56, 189, 248, .20) !important;
}
.jqx-grid-group-cell-metro {
    background-color: var(--p-slate-lt);
    color: var(--p-slate);
    border-color: var(--p-border);
    font-weight: 600;
}
.jqx-grid-group-expand-metro,
.jqx-grid-group-collapse-metro {
    color: var(--p-blue);
}

/* ── Pager ────────────────────────────────────────────────────────────── */
.jqx-grid-pager-metro {
    background: var(--p-card) !important;
    background-color: var(--p-card) !important;
    color: var(--p-text) !important;
    border-color: var(--p-border) !important;
    border-top: 1px solid var(--p-border) !important;
}
#pagerjqxgrid .jqx-button-metro {
    border-color: var(--p-border) !important;
    background: var(--p-card) !important;
    background-color: var(--p-card) !important;
    color: var(--p-text) !important;
}
#pagerjqxgrid .jqx-button-metro:hover,
#pagerjqxgrid .jqx-button-metro.jqx-fill-state-hover-metro {
    background: var(--p-blue-lt) !important;
    background-color: var(--p-blue-lt) !important;
    border-color: var(--p-blue) !important;
    color: var(--p-blue) !important;
}
.btn-pager {
    color: var(--p-blue) !important;
    background: var(--p-card) !important;
    background-color: var(--p-card) !important;
    border: 1px solid var(--p-border) !important;
    border-radius: var(--p-radius-sm);
}
.btn-pager:hover,
#gridpagerlistjqxgrid:hover {
    background-color: var(--p-blue-lt) !important;
    color: var(--p-blue) !important;
}
#pagerjqxgrid input.jqx-input[type="text"] {
    border: 1px solid var(--p-border) !important;
    background: var(--p-card) !important;
    background-color: var(--p-card) !important;
    color: var(--p-text) !important;
    border-radius: var(--p-radius-sm);
}
.number-show {
    color: var(--p-muted);
}

/* ── Scrollbar ───────────────────────────────────────────────────────── */
.jqx-scrollbar-state-normal-metro,
.jqx-grid-bottomright-metro,
.jqx-panel-bottomright-metro,
.jqx-listbox-bottomright-metro {
    background-color: var(--p-bg);
}
.jqx-scrollbar-thumb-state-normal-metro,
.jqx-scrollbar-thumb-state-normal-horizontal-metro {
    background: var(--p-border-strong);
    border-color: var(--p-border-strong);
}
.jqx-scrollbar-thumb-state-hover-metro,
.jqx-scrollbar-thumb-state-hover-horizontal-metro {
    background: var(--p-blue);
    border-color: var(--p-blue);
}
.jqx-scrollbar-thumb-state-pressed-metro,
.jqx-scrollbar-thumb-state-pressed-horizontal-metro {
    background: var(--p-blue);
    border-color: var(--p-blue);
}
.jqx-scrollbar-button-state-normal-metro {
    background: var(--p-card);
    border-color: var(--p-border);
}
.jqx-scrollbar-button-state-hover-metro {
    background: var(--p-blue-lt);
    border-color: var(--p-blue);
}
/* Seta de scroll é PNG (`metro-icon-up/down.png`, cinza-escuro fixo, sem
 * token) — no claro contrasta bem com o fundo `--p-card` branco do botão;
 * no escuro o botão vira `--p-card` (navy) e a seta cinza-escura some.
 * `filter: invert(1)` inverteria o botão inteiro (fundo virava claro
 * também, perdendo a cor do tema) — em vez disso, fundo claro fixo só
 * nesses dois estados, suficiente pra seta escura ficar legível sem
 * depender de token de tema. */
html[data-theme="dark"] .jqx-scrollbar-button-state-normal-metro,
html[data-theme="dark"] .jqx-scrollbar-button-state-hover-metro {
    background: #cbd5e1;
}
.jqx-scrollbar-button-state-pressed-metro {
    background: var(--p-blue);
    color: #fff;
}

/* ── Dropdownlist (filtro de coluna + select dentro da grid) ─────────── */
.jqx-dropdownlist-state-normal-metro,
.jqx-dropdownlist-state-hover-metro,
.jqx-dropdownlist-state-selected-metro {
    background: var(--p-card);
    color: var(--p-text);
    border-color: var(--p-border);
}
.jqx-dropdownlist-state-hover-metro {
    background: var(--p-blue-lt);
    border-color: var(--p-blue);
}
.jqx-dropdownlist-state-selected-metro {
    background: var(--p-blue);
    color: #fff;
    border-color: var(--p-blue);
}
.jqx-listbox-bottomright-metro {
    background: var(--p-card);
    border-color: var(--p-border);
}
/* Popup do jqxDropDownList (o "Registros por página" do pager e os demais
 * dropdowns jqx). O host do popup carrega `jqx-widget-content`
 * (jqx.base.css:3091 → `background: #fff`) e cada item vem de
 * `.jqx-listitem-state-normal-metro` com `background-color:#FFF;
 * color:#515151` (jqx.base.css:3070): no escuro o dropdown abre BRANCO com
 * texto cinza-escuro. Os estados hover/selected não têm regra `-metro`
 * (jqx.base.css:2161/2170 não definem cor) — por isso só o `normal` precisa
 * de override de fundo/texto, e os outros dois herdam o realce do tema.
 * `border-color` com !important porque o `normal-metro` usa o shorthand
 * `border: 1px solid #EEE !important`.
 * Ver references/jqxgrid-header-chrome-dark-theme.md (item 6). */
html[data-theme="dark"] .jqx-listbox-metro,
html[data-theme="dark"] div.jqx-listbox-metro {
    background: var(--p-card);
    border-color: var(--p-border);
    color: var(--p-text);
}
html[data-theme="dark"] .jqx-listitem-state-normal-metro {
    background-color: transparent;
    color: var(--p-text);
    border-color: transparent !important;
}
html[data-theme="dark"] .jqx-listitem-state-hover-metro {
    background-color: rgba(56, 189, 248, .12);
    color: var(--p-text);
}
/* Item SELECIONADO: o elemento continua com a classe `-normal-metro`
 * (por isso o `transparent` acima o alcançaria) e o realce do projeto vem do
 * `.jqx-fill-state-pressed-metro` (`background: var(--p-blue)`) — regra de
 * especificidade menor que a minha com prefixo de tema. Sem este override o
 * item selecionado perde o azul no escuro. */
html[data-theme="dark"] .jqx-listitem-state-normal-metro.jqx-fill-state-pressed-metro,
html[data-theme="dark"] .jqx-listitem-state-selected-metro {
    background-color: var(--p-blue);
    color: #fff;
}

/* ── Menu (dropmenu do header da coluna) ──────────────────────────────── */
.jqx-menu-vertical-metro {
    background: var(--p-card);
    border-color: var(--p-border);
}
.jqx-menu-item-metro,
.jqx-menu-item-top-metro {
    background: var(--p-card);
    color: var(--p-text);
    border-color: var(--p-border);
}
.jqx-menu-item-hover-metro,
.jqx-menu-item-top-hover-metro {
    background: var(--p-blue-lt);
    color: var(--p-blue);
}
.jqx-menu-item-selected-metro,
.jqx-menu-item-top-selected-metro {
    background: var(--p-blue);
    color: #fff;
}

/* ── Checkbox (coluna de seleção) ─────────────────────────────────────── */
.jqx-checkbox-hover-metro {
    border-color: var(--p-blue);
    background: var(--p-blue-lt);
}

/* ── Rounded corners: jqx metro zera tudo (border-radius: 0). Restaurar
       levemente pra alinhar com cards MobRo (--p-radius-sm) ──────────── */
.jqx-rc-tl-metro, .jqx-rc-tr-metro,
.jqx-rc-bl-metro, .jqx-rc-br-metro {
    border-radius: 0;
}
.jqx-rc-t-metro {
    border-top-left-radius: var(--p-radius-sm);
    border-top-right-radius: var(--p-radius-sm);
}
.jqx-rc-b-metro {
    border-bottom-left-radius: var(--p-radius-sm);
    border-bottom-right-radius: var(--p-radius-sm);
}
.jqx-rc-all-metro {
    border-radius: var(--p-radius-sm);
}

/* ── Bloco 4.b: Wrapper "fieldset card" do jqxGrid (Caminho Y) ──────────
 * Envolve o grid compartilhado (shared/mainContentModule.html) + a toolbar
 * interna da diretiva (jqxGridTemplate.html) num único card MobRo.
 * Header = cor sólida da navbar (--p-blue-strong). Constrói sobre o Bloco 4.
 * ----------------------------------------------------------------------- */
.mob-card--grid {
    /* herda .mob-card; modifier só pra semântica e overrides abaixo */
}

/* Respiro lateral do bloco do grid (substitui o inset que o antigo .box dava,
 * sem a borda/retângulo). Gutter percentual → escala com a resolução, o grid
 * nunca fica pequeno em telas grandes. Aplica a todos os módulos de listagem
 * que usam shared/mainContentModule.html. */
#linhas {
    padding: 0 3%;
}

/* Header sólido cor navbar (sobrescreve o gradiente + borda-esquerda base) */
.mob-card--grid > .mob-card-header {
    background: var(--p-blue-strong);
    border-bottom: 1px solid var(--p-blue-strong);
    border-left: none;
    color: #fff;
    padding: 6px 16px;
}
.mob-card--grid > .mob-card-header .mob-card-icon {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 12px;
}
.mob-card--grid > .mob-card-header .mob-card-title {
    color: #fff;
}
.mob-card--grid .mob-card-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-size: 12px;
}
.mob-card--grid .mob-card-header-actions .buildVersionNormal {
    color: rgba(255, 255, 255, .7);
}
.mob-grid-limit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.mob-grid-limit input[type="checkbox"] { margin: 0; cursor: pointer; }
.mob-input--xs {
    width: 64px;
    padding: 3px 7px;
    font-size: 11px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
}
.mob-input--xs:focus {
    background: rgba(255, 255, 255, .25);
    border-color: #fff;
    color: #fff;
}
.mob-input--xs:disabled { opacity: .5; }

/* Body: grid encosta nas bordas do card (toolbar/grid têm padding próprio).
 * position: relative ancora o filtro rápido (absolute) na mesma linha dos botões. */
.mob-card-body--grid { padding: 0; position: relative; }

/* Toolbar interna: Registros por página | filtro rápido */
.mob-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 18px;
    border-bottom: 1px solid var(--p-border);
    background: var(--p-bg);
}
.mob-grid-toolbar-left,
.mob-grid-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--p-muted);
}
.mob-grid-toolbar-right {
    flex: 1;
    justify-content: flex-end;
}
.mob-grid-toolbar .dataTables_length { margin: 0; }
.mob-grid-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}
.mob-grid-toolbar .mob-select--xs {
    padding: 4px 8px;
    font-size: 12px;
    height: auto;
    width: auto;
}

/* Status de filtro ativo — é um LABEL informativo, não um botão: sem
   fundo/contorno, só texto colorido (o "Resetar" ao lado que é clicável). */
.mob-grid-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--p-blue);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}
.mob-grid-filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--p-danger);
    text-decoration: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}
.mob-grid-filter-reset:hover { text-decoration: underline; }

/* Variantes de .mob-btn faltantes (só existiam success/secondary/outline) —
   usadas no painel de pesquisa avançada (Limpar Filtro / Cancelar edição /
   Salvar). */
.mob-btn--danger  { background: var(--p-danger); color: #fff; }
.mob-btn--warning { background: var(--p-amber);  color: #fff; }

/* ── Painel "Pesquisa avançada" (advancedfilterControl.html) ────────────
 * Painel-card próprio (borda/radius/sombra, como .mob-card), flutuando com
 * margem dentro de #advanced-filter — não fica mais colado/esticado nas
 * bordas do card da listagem. Reaproveita .mob-card-header/.mob-card-body/
 * .mob-field já usados nos formulários de cadastro. */
.mob-advfilter {
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius);
    box-shadow: var(--p-shadow);
    margin-top: 14px;
    /* SEM overflow:hidden — clipava o .dropdown-menu do Bootstrap (Salvar/
       Priorizar), que é position:absolute e precisa vazar pra fora do card. */
}
.mob-advfilter > .mob-card-header {
    /* Corners de cima manuais (sem overflow:hidden no pai pra cortar). */
    border-top-left-radius: var(--p-radius);
    border-top-right-radius: var(--p-radius);
}
.mob-advfilter .mob-card-header-actions { display: flex; align-items: center; gap: 8px; }
/* ace.css tem `.btn-group .dropdown-toggle { border-radius: 0 }` (2 classes
   de especificidade) que vence o `.mob-btn { border-radius: ... }` (1
   classe) do botão "Salvar" — reforça aqui com mais classes, sem !important. */
.mob-advfilter .btn-group > .mob-btn.dropdown-toggle,
.mob-advfilter .btn-group > .mob-btn-icon.dropdown-toggle {
    border-radius: var(--p-radius-sm);
}
/* Barra de ações (Filtrar/Limpar/Salvar) só como rodapé com divisor — sem
 * repetir borda/sombra/radius do .mob-action-bar padrão (evita "card
 * dentro de card" já que ela mora dentro do .mob-card-body do painel). */
.mob-advfilter .mob-action-bar {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    border-top: 1px solid var(--p-border);
    padding: 16px 0 0;
    margin: 0;
}

.mob-advfilter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 16px;
}
.mob-advfilter-row .mob-field { gap: 4px; }
/* flex sem grow (0 1 <base>): cada campo fica no tamanho natural dele,
 * não esticado pra preencher a linha quando é o único visível (ex.: só
 * "Campo" aparece antes de escolher a condição) — isso que deixava o
 * select de Campo virar uma caixa gigante e vazia. */
.mob-advfilter-field--campo    { flex: 0 1 280px; }
.mob-advfilter-field--condicao { flex: 0 1 170px; }
.mob-advfilter-field--valor    { flex: 0 1 240px; }
.mob-advfilter-field--operador { flex: 0 1 170px; }
.mob-advfilter-field--actions  { display: flex; gap: 8px; }
.mob-advfilter-field--actions .mob-btn { white-space: nowrap; }

.mob-advfilter-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    margin-bottom: 16px;
}
.mob-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.mob-table th {
    background: var(--p-card-2);
    color: var(--p-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--p-border);
    white-space: nowrap;
}
.mob-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--p-border);
    color: var(--p-text);
    vertical-align: middle;
}
.mob-table tbody tr:last-child td { border-bottom: none; }
.mob-table tbody tr:nth-child(even) { background: var(--p-row-alt); }

.mob-advfilter-rowactions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mob-btn-icon--danger:hover {
    background: var(--p-danger-lt);
    border-color: var(--p-danger);
    color: var(--p-danger);
}

/* Input com ícone (busca rápida) */
.mob-input-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.mob-input-icon > i {
    position: absolute;
    left: 10px;
    color: var(--p-muted);
    pointer-events: none;
}
.mob-input-icon > .mob-input {
    padding-left: 30px;
    width: 380px;
    max-width: 38vw;
    height: auto;
}
.mob-input-icon > .delay-loader {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* Filtro avançado embutido no card (advfilter directive).
 * Mantém o comportamento legado do ace.css #advanced-filter { display: none; }
 * (linha 1288) — o filtro só aparece via trigger (botão "Filtros" do
 * action-bar que abre o modal <loadlistfilters>). O .toggle-advanced-search
 * faz slideDown/slideUp via jQuery no AdvancedFilter.js:1540,1548.
 *
 * Sem max-height/scroll interno (Allan pediu pra tirar — o painel
 * redesenhado (.mob-advfilter) é compacto o bastante pra crescer livre
 * sem empurrar o grid pra fora da viewport como o painel legado antigo). */
.mob-grid-advfilter { padding: 0 18px 18px; }
#advanced-filter { }

/* Barra de pesquisa genérica (FiltrarDados) — input centralizado na
   .mob-grid-toolbar--actions (entre botões à esquerda e Limite à direita).
   Mecanismo do jqxGridMain.js via $watch('FiltrarDados') com
   delayedUpdate de 400ms. */
.mob-grid-toolbar-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 0;
}
.mob-grid-toolbar-center .mob-input-icon {
    position: relative;
    display: inline-block;
    flex: 1 1 120px;
    min-width: 0;
    width: 100%;
    max-width: 540px;
}
.mob-grid-toolbar-center .mob-input-icon > i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--p-muted);
    pointer-events: none;
    z-index: 1;
}
/* Tema escuro: a lupa e o placeholder dos inputs de busca do toolbar
 * (`mainContentModule.html`, `midia`/`avaliacao`, os 3 paineis,
 * `genericFilter.html` — todos usam `.mob-input-icon > i` + `input.mob-input`).
 * A lupa era `--p-muted` (#94a3b8) e o placeholder sai na cor default do
 * motor (~#757575) — os dois praticamente somem sobre o input `--p-bg`
 * #1e293b. Allan: "o lable de Filtrar dados selecionados... ainda está
 * cinza". `--p-text` nos dois. Escopo escuro (no claro está certo) e preso ao
 * `.mob-input-icon` pra não mexer no placeholder de todo `input.mob-input`
 * (data, limite, etc.). Ver references/jqxgrid-header-chrome-dark-theme.md
 * (item 7). */
html[data-theme="dark"] .mob-input-icon > i {
    color: var(--p-text);
}
html[data-theme="dark"] .mob-input-icon > input.mob-input::placeholder {
    color: var(--p-text);
    opacity: 1;
}
.mob-grid-toolbar-center .mob-input-icon > .mob-input {
    width: 100%;
    padding-left: 32px;
}

/* Badge "Filtro avançado ativo / Pesquisa rápida ativa" + link "Resetar":
   RF-4.b.1, perdido na migração pro toolbar novo — restaurado reusando
   .mob-grid-filter-badge/.mob-grid-filter-reset (já existiam, sem uso).
   Espaçamento entre label/Resetar/campo de busca vem do gap do
   .mob-grid-toolbar-center (flex pai). */

/* Pager: base de cor vem do Bloco 4 (.jqx-grid-pager-metro); aqui o layout
 * que antes vivia no <style> da diretiva (#pagerjqxgridDirective), agora
 * escopado por classe pra valer em qualquer gridId. */
/* O pager do jqx é montado com FLOATS, então o seu div interno COLAPSA para
 * altura 0 (todos os filhos são float). Por isso qualquer centragem falhava e o
 * conteúdo vazava. Solução: clearfix no div interno → ele ganha altura real;
 * aí o flex no container centraliza verticalmente sem reordenar os floats.
 * padding-right grande dá respiro p/ o "Próximo" não bater na borda. */
.mob-grid-wrapper .jqx-grid-pager-metro {
    display: flex !important;
    align-items: center !important;
    min-height: 44px;
    padding: 0 28px 0 8px;
    overflow: visible;
}
.mob-grid-wrapper .jqx-grid-pager-metro > div {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
}
.mob-grid-wrapper .jqx-grid-pager-metro > div::after {
    content: "";
    display: block;
    clear: both;
}
.mob-grid-wrapper .jqx-grid-pager-metro > div > * {
    margin-top: 0 !important;
    vertical-align: middle !important;
    line-height: 30px !important;
}
.mob-grid-wrapper .jqx-grid-pager-metro .number-show {
    float: left;
    margin-left: 20px;
    color: var(--p-muted);
}
/* Botões Anterior / Próximo: altura compacta, centrados, sem quebrar texto */
.mob-grid-wrapper .btn-pager {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    height: 30px;
    min-width: 100px;
    padding: 0 14px !important;
    margin-top: 0 !important;
    font-weight: 600;
    vertical-align: middle;
}
/* O jqx envolve o texto num <div> e os carets <i> têm pull-left/pull-right
 * (float) → sobem pro topo. Tira o float e alinha ícone + texto no centro. */
.mob-grid-wrapper .btn-pager > div {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    margin-left: 0 !important;
    line-height: 1 !important;
}
.mob-grid-wrapper .btn-pager .next-prev,
.mob-grid-wrapper .btn-pager i {
    float: none !important;
    margin: 0 !important;
    line-height: 1 !important;
}
/* Input "Página X" — arredondar e alinhar (a regra de Bloco 4 mirava
 * #pagerjqxgrid, mas o id real é #pagerjqxgridDirective; aqui via classe). */
.mob-grid-wrapper .jqx-grid-pager-metro input[type="text"],
.mob-grid-wrapper .jqx-grid-pager-metro input.jqx-input {
    height: 28px !important;
    min-height: 28px !important;
    line-height: 26px !important;
    border-radius: var(--p-radius-sm) !important;
    border: 1px solid var(--p-border) !important;
    background: var(--p-card) !important;
    color: var(--p-text) !important;
    text-align: center;
}
/* Dropdownlist "Registros por página: 10" — altura + valor centrado */
.mob-grid-wrapper .jqx-grid-pager-metro .jqx-dropdownlist-state-normal-metro,
.mob-grid-wrapper .jqx-grid-pager-metro [id^="gridpagerlist"] {
    height: 28px !important;
    border-radius: var(--p-radius-sm) !important;
}
.mob-grid-wrapper .jqx-grid-pager-metro [id^="gridpagerlist"] *,
.mob-grid-wrapper .jqx-grid-pager-metro .jqx-dropdownlist-state-normal-metro .jqx-dropdownlist-content {
    line-height: 26px !important;
    height: 26px !important;
}
.mob-grid-wrapper .jqx-grid-pager-metro .jqx-button-metro {
    border-radius: var(--p-radius-sm) !important;
}
/* Seta do dropdownlist "Registros por página" no tema escuro. O pager do
 * jqxGrid usa `icon-down-bluee.png`: um quadrado BRANCO 19x19 com chevron
 * azul. As regras do skin metro pra `.jqx-icon-arrow-down-metro` estão
 * COMENTADAS (jqx.metro.css:281-284), então vale a imagem base — que no
 * escuro aparece como um quadrado branco no meio do pager ("faça o icone
 * para baixo respeitar o tema"). Fix: mata a imagem e desenha só o chevron,
 * como máscara pintada com `var(--p-text)` — mesma forma (10x6 triângulo) que
 * o chevron do `.mob-select`. Escopo escuro; no claro o quadrado branco é o
 * próprio fundo do select e o chevron azul está certo. */
html[data-theme="dark"] .mob-grid-wrapper .jqx-grid-pager-metro .jqx-icon-arrow-down {
    background-image: none !important;
    background-color: var(--p-text);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 10px 6px;
    mask-size: 10px 6px;
}

/* Group actions (expandir / contrair grupos) */
.mob-grid-group-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 18px;
    background: var(--p-amber-lt);
    border-bottom: 1px solid var(--p-border);
    font-size: 12px;
}
.mob-grid-group-actions a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--p-amber);
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
}
.mob-grid-group-actions a:hover { text-decoration: underline; }
/* Restaurar ordem das colunas: link discreto à direita, dentro da faixa de agrupamento */
.mob-grid-reset-cols {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: 11px; color: var(--p-muted, #8a8f98) !important;
    text-decoration: none; opacity: .75; cursor: pointer; z-index: 5;
}
.mob-grid-reset-cols:hover { opacity: 1; text-decoration: underline; }
/* ── Coluna "Opções" enxuta (8 → 4 ícones) ─────────────────────────────
 * Com todas as permissões a coluna da linha exibia 8 ícones (visualizar,
 * editar, status, excluir, histórico do registro, viagens, replicar,
 * confirmar). Agora só Visualizar / Editar / Confirmar ficam à vista; as
 * demais levam `.acao-extra` no próprio `<a>` (ou num `<span>` que envolve o
 * helper de histórico, em Util.js:1588) e saem no menu flutuante aberto pelo
 * expansor `.alternar-acoes` (`abrirMenuAcoes()` no jqxGridMain.js). O menu vive
 * no `body` porque o jqxGrid recorta o conteúdo das células — é o que permite a
 * coluna ficar com a largura só dos ícones visíveis. */
.action-buttons .acao-extra {
    display: none;
}
.action-buttons a.alternar-acoes {
    color: var(--p-muted);
}
.action-buttons a.alternar-acoes:hover {
    color: var(--p-blue);
}

/* Menu flutuante das ações secundárias (`abrirMenuAcoes()` no jqxGridMain.js).
 * Sem `position` aqui de propósito: o top/left vem do JS (`getBoundingClientRect`
 * do expansor) — a classe só dá a pele. */
.mob-acoes-extras {
    position: fixed;
    z-index: 9999;
    min-width: 190px;
    padding: 4px;
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    box-shadow: var(--p-shadow);
}
.mob-acoes-extras-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--p-radius-sm);
    background: none;
    color: var(--p-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.mob-acoes-extras-item:hover {
    background: var(--p-blue-lt);
}
.mob-acoes-extras-item i {
    width: 16px;
    text-align: center;
}
/* Visualizar Histórico vem do helper compartilhado (Util.js:1588) com a classe
 * `grey` do ace (`color:#777 !important`, ace.css:2241) — cinza fixo que não é
 * token. Aqui, só na coluna Opções, ele passa a usar `--p-slate` (o !important é
 * necessário pra vencer o do ace). */
.action-buttons .view-record-history {
    color: var(--p-slate) !important;
}

/* Toolbar de AÇÕES (ocupa o lugar do antigo "Registros por página"):
 * faixa cinza no topo do body, botões à esquerda. Funde com a faixa do
 * filtro rápido (--filteronly) logo abaixo — sem divisória entre elas. */
.mob-grid-toolbar--actions {
    /* space-between: botões à esquerda, Limite à direita; busca centralizada
     * (absoluta) sobrepõe o meio livre. Right padding pequeno = Limite colado
     * à direita. */
    padding: 8px 12px 8px 18px;
    justify-content: space-between;
}
.mob-grid-toolbar--actions .mob-grid-toolbar-left {
    flex-wrap: wrap;
    gap: 8px;
}
.mob-grid-toolbar--actions .btn-group { display: inline-flex; }

/* Limite agora vive na faixa cinza (saiu do header teal): menor e estilo claro */
.mob-grid-toolbar--actions .mob-grid-limit {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--p-muted);
    white-space: nowrap;
}
.mob-grid-toolbar--actions .mob-grid-limit .mob-input--xs {
    width: 72px;
    height: auto;
    padding: 9px 8px;
    font-size: 13px;
    background: var(--p-card);
    border: 1.5px solid var(--p-border);
    color: var(--p-text);
}

/* Filtro rápido (renderizado pela diretiva jqx-grid, escopo isolado) ancorado
 * no topo-direito do card-body → mesma linha dos botões, sem mexer no JS da
 * diretiva. O .mob-card-body--grid é position:relative. */
.mob-grid-toolbar--filteronly {
    position: absolute;
    top: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 2;
    border: none;
    background: transparent;
    padding: 8px 18px;
    justify-content: center;
}

/* Todos os botões da toolbar de ações com a MESMA forma MobRo, inclusive os
 * que vêm das diretivas loadlistfilters / ng-relatorios como
 * .btn.btn-success.btn-sm do bootstrap legado, e os dropdown-toggle. */
.mob-grid-toolbar--actions .mob-btn,
.mob-grid-toolbar--actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    border: none;
    border-radius: var(--p-radius-sm);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: opacity .15s, transform .1s;
}
.mob-grid-toolbar--actions .btn:hover:not(:disabled),
.mob-grid-toolbar--actions .mob-btn:hover:not(:disabled) {
    opacity: .88;
    transform: translateY(-1px);
}
/* Filtros / Relatórios vêm como .btn dentro de .btn-group — o bootstrap zera o
 * raio dos botões agrupados. Força o raio MobRo (vence por !important). */
.mob-grid-toolbar--actions .btn,
.mob-grid-toolbar--actions .btn-group > .btn {
    border-radius: var(--p-radius-sm) !important;
}
/* Recolore os verdes do bootstrap (Filtros / Relatórios / dropdowns) para a
 * paleta MobRo, alinhando com o "Ações" (mesmo azul do .mob-btn--secondary). */
.mob-grid-toolbar--actions .btn-success,
.mob-grid-toolbar--actions .btn-primary {
    background: #3a82c4;
    color: #fff;
}
.mob-grid-toolbar--actions .dropdown-menu { font-size: 13px; }

/* Popups flutuantes de Ações/Relatórios. O painel é movido para o body pela
 * diretiva mob-grid-popup, seguindo o mesmo padrão do popup de Filtros. */
.mob-grid-popup-anchor {
    display: inline-flex;
}
.mob-grid-popup-card {
    display: none;
    position: fixed;
    z-index: 9999;
    width: 300px;
    max-width: calc(100vw - 16px);
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .16);
    overflow: hidden;
    font-size: 12px;
}
.mob-grid-popup-card.is-open {
    display: block;
    animation: mob-grid-popup-in 180ms ease-out;
}
@keyframes mob-grid-popup-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mob-grid-popup-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: linear-gradient(to right, var(--p-blue), var(--p-teal));
    color: #fff;
}
.mob-grid-popup-title {
    flex: 1 1 auto;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.mob-grid-popup-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: var(--p-radius-sm);
    background: transparent;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
}
.mob-grid-popup-close:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    opacity: 1;
}
.mob-grid-popup-search {
    padding: 6px 10px;
    background: var(--p-card);
    border-bottom: 1px solid var(--p-border);
}
.mob-grid-popup-search-input {
    width: 100%;
    height: 28px;
    padding: 3px 8px;
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    background: var(--p-bg);
    color: var(--p-text);
    font-size: 12px;
    outline: none;
}
.mob-grid-popup-search-input:focus {
    border-color: var(--p-blue);
    background: var(--p-card);
    box-shadow: 0 0 0 2px rgba(26, 107, 124, .12);
}
.mob-grid-popup-body {
    max-height: 50vh;
    padding: 4px 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--p-bg);
}
.mob-grid-popup-item {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 4px 8px;
    padding: 7px 9px;
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    background: var(--p-card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    color: var(--p-text);
    font-size: 12px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .12s, box-shadow .12s;
}
.mob-grid-popup-item:hover,
.mob-grid-popup-item:focus {
    background: var(--p-blue-lt);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    color: var(--p-blue);
}
.mob-grid-popup-item > i {
    width: 16px;
    color: var(--p-blue);
    text-align: center;
}
.mob-grid-popup-item--danger > i { color: var(--p-danger); }
.mob-grid-popup-item--danger:hover,
.mob-grid-popup-item--danger:focus { color: var(--p-danger); }

/* ── Bloco 4.b: Wrapper card do jqxGrid (Caminho Y, RF-4.b.1) ─────────
 * Envolve a diretiva <jqx-grid> num .mob-card MobRo. O header do card
 * usa cor da navbar, body tem filtro avançado + toolbar interna +
 * grid + pager (auto-injetado pelo jqx).
 *
 * O wrapper .mob-card--grid/.mob-card-body--grid/.mob-grid-toolbar
 * resolvem o bug de z-index exposto pelo Bloco 4 (input "Filtrar
 * dados" sobreposto ao header) — o input agora é renderizado pela
 * view externa, não mais dentro do jqxGridTemplate.html.
 * ----------------------------------------------------------------------- */

/* Filtro de Data injetado pelo controller do agendamento dentro da
 * .mob-grid-toolbar-left (RF-4.b.2). Label "Data:" + input date + 2 botões
 * (Buscar/Limpar) + flag "Filtrado". Default: 10 outros módulos não populam. */
.mob-grid-toolbar-filterdata {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    padding-left: 10px;
    border-left: 1px solid var(--p-border);
}
.mob-grid-filterdata-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--p-muted);
    margin: 0;
    white-space: nowrap;
}
.mob-grid-filterdata-input {
    width: 140px;
    height: 30px;
    padding: 4px 8px;
    font-size: 13px;
}
.mob-btn--filterdata {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
}
/* Botão "borracha" (Limpar): herda estilo do .mob-btn--secondary (fundo azul).
   Quando há data selecionada, fundo vermelho com ícone branco
   (.mob-btn--filterdata-active via ng-class). */
.mob-btn--filterdata.mob-btn--filterdata-active {
    background: #dd5a43;
    border-color: #dd5a43;
}
.mob-btn--filterdata.mob-btn--filterdata-active:hover:not(:disabled) {
    background: #c84a35;
    border-color: #c84a35;
}
.mob-grid-filterdata-flag {
    font-size: 12px;
    margin-left: 6px;
    white-space: nowrap;
}

/* Faixa de resumo de vagas (lotação do dia) — renderizada condicionalmente
 * via ng-if="resumoVagasDia" pelo controller, abaixo do filtro de Data. */
.mob-grid-resumo-vagas { display: block; }


/* =========================================================================
   Modal "Filtros" (loadlistfilters) — RF-4.b.3.

   Reescrito do zero. Antes usava o layout leg do ace.css
   (.dropdown-menu, .nav-search, .pull-right) que conflita com o
   .dropdown-menu do bootstrap e ficava "quadrado" / com ícones
   quebrados. Agora: scope via .mob-lf-* no mobro-tokens.css, com
   !important pontual pra neutralizar o .dropdown-menu > li > a
   { display:block; padding; clear:both } do bootstrap legado.
   ========================================================================= */
.mob-lf-dropdown {
    min-width: 340px;
    max-width: 440px;
    padding: 0 !important;
    margin: 4px 0 0 0 !important;
    border: 1px solid #d8dde6;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    background: var(--p-card);
    overflow: hidden;
}
.mob-lf-dropdown > li {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    list-style: none !important;
    line-height: 1.4 !important;
}

/* Head — "Filtros salvos" com ícone */
.mob-lf-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f3f6fa;
    border-bottom: 1px solid #e3e6ed;
    color: #50607a;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mob-lf-head > i {
    color: #1a9e72;
    font-size: 14px;
}
.mob-lf-head-title { color: #50607a; }

/* Search row — input com lupa à esquerda */
.mob-lf-search-row {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--p-card);
    border-bottom: 1px solid #eef0f4;
    position: relative;
}
.mob-lf-search-icon {
    position: absolute;
    left: 22px;
    color: #98a3b5;
    font-size: 13px;
    pointer-events: none;
}
.mob-lf-search-input {
    flex: 1 1 auto;
    width: 100%;
    height: 32px;
    padding: 4px 8px 4px 30px;
    border: 1px solid #d8dde6;
    border-radius: 4px;
    font-size: 13px;
    background: var(--p-card-2);
    color: #444;
    box-sizing: border-box;
    outline: none;
}
.mob-lf-search-input:focus {
    border-color: #3a82c4;
    background: var(--p-card);
    box-shadow: 0 0 0 2px rgba(58, 130, 196, 0.12);
}

/* Section header — "Filtros Públicos" / "Filtros Privados" */
.mob-lf-section {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #98a3b5;
    background: var(--p-card-2);
    border-bottom: 1px solid #eef0f4;
}
.mob-lf-section > i {
    color: #98a3b5;
    font-size: 12px;
}

/* Item — card horizontal centralizado: label à esquerda + ações à direita,
   num único bloco (sem dividir o modal em 2 colunas). Hover muda o bg.
   Pedido Allan: estilo card, divisões visíveis como uma tabela, mas
   centralizado no modal. */
.mob-lf-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 4px 8px;
    border: 1px solid #e3e6ed;
    border-radius: 6px;
    background: var(--p-card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.12s ease;
}
.mob-lf-item:hover {
    background: var(--p-card-2);
    border-color: #c8d0dc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
/* O bootstrap força .dropdown-menu > li > a { display: block; clear: both;
   padding: ... } — sobrescrevemos para o label virar parte do card flex. */
.mob-lf-dropdown > li.mob-lf-item > a.mob-lf-label {
    display: inline-block !important;
    clear: none !important;
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 8px !important;
    margin: 0 !important;
    background: transparent !important;
    line-height: 1.4 !important;
    border: 0 !important;
}
.mob-lf-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2c3e50;
    font-size: 13px;
    text-decoration: none !important;
    cursor: pointer;
}
.mob-lf-label:hover { color: #1a9e72; }
.mob-lf-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 !important;
    background: transparent;
}
.mob-lf-action-edit,
.mob-lf-action-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.12s ease;
    text-decoration: none;
}
.mob-lf-action-edit {
    color: #1a9e72;
    background: rgba(26, 158, 114, 0.08);
}
.mob-lf-action-edit:hover {
    background: rgba(26, 158, 114, 0.18);
    color: #128058;
}
.mob-lf-action-del {
    color: #dd5a43;
    background: rgba(221, 90, 67, 0.08);
}
.mob-lf-action-del:hover {
    background: rgba(221, 90, 67, 0.18);
    color: #c84a35;
}

/* Foot — "adicionar novo filtro" no rodapé */
.mob-lf-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    background: var(--p-card-2);
    border-top: 1px solid #eef0f4;
}
.mob-lf-foot > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #3a82c4;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.12s ease;
}
.mob-lf-foot > a:hover {
    color: #2a6da8;
    background: rgba(58, 130, 196, 0.08);
}

/* Empty state — quando não tem filtro salvo */
.mob-lf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 14px;
    text-align: center;
}
.mob-lf-empty > i { color: #c8d0dc; }
.mob-lf-empty-text {
    color: #98a3b5;
    font-size: 13px;
}
.mob-lf-empty-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #3a82c4;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.12s ease;
}
.mob-lf-empty-add:hover {
    color: #2a6da8;
    background: rgba(58, 130, 196, 0.08);
}

/* Tema escuro — dropdown "Filtros" (.mob-lf-*) foi construído do zero fora
 * do sistema de tokens (ver comentário acima, RF-4.b.3), com paleta de
 * cinzas própria. Cobertura por override em vez de reescrever cada
 * declaração — cores de acento (verde/azul/vermelho de ações) mantidas
 * como estão, já legíveis sobre superfície escura. */
html[data-theme="dark"] .mob-lf-dropdown {
    background: var(--p-card-2);
    border-color: var(--p-border);
}
html[data-theme="dark"] .mob-lf-head,
html[data-theme="dark"] .mob-lf-section,
html[data-theme="dark"] .mob-lf-foot {
    background: var(--p-card);
    border-color: var(--p-border);
    color: var(--p-muted);
}
html[data-theme="dark"] .mob-lf-head-title { color: var(--p-muted); }
html[data-theme="dark"] .mob-lf-search-row {
    background: var(--p-card-2);
    border-color: var(--p-border);
}
html[data-theme="dark"] .mob-lf-search-input {
    background: var(--p-bg);
    border-color: var(--p-border-strong);
    color: var(--p-text);
}
html[data-theme="dark"] .mob-lf-search-input:focus {
    background: var(--p-bg);
}
html[data-theme="dark"] .mob-lf-search-icon,
html[data-theme="dark"] .mob-lf-section > i,
html[data-theme="dark"] .mob-lf-empty-text,
html[data-theme="dark"] .mob-lf-empty > i {
    color: var(--p-muted);
}
html[data-theme="dark"] .mob-lf-item {
    background: var(--p-card);
    border-color: var(--p-border);
}
html[data-theme="dark"] .mob-lf-item:hover {
    background: var(--p-card-2);
    border-color: var(--p-border-strong);
}
html[data-theme="dark"] .mob-lf-label { color: var(--p-text); }

@media (max-width: 860px) {
    .mob-row-2, .pac-row-2, .sac-row-2, .sag-row-2            { grid-template-columns: 1fr; }
    .mob-grid-2, .pac-grid-2, .sac-grid-2, .sag-grid-2       { grid-template-columns: 1fr; }
    .mob-acomp-cards, .pac-acomp-cards,
    .sac-page .sac-acomp-cards                                  { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .mob-identity-row, .pac-identity-row, .sac-identity-row,
    .sag-identity-row                                          { flex-direction: column; align-items: center; }
    .mob-grid-2, .pac-grid-2, .sac-grid-2, .sag-grid-2       { grid-template-columns: 1fr; }
    .mob-toggles, .pac-toggles                                { grid-template-columns: 1fr; }
    .mob-form, .pac-form, .sac-form, .sag-form                { padding: 0 12px; }
    .mob-page-body, .mob-page-title,
    .pac-page-body, .sac-page-body, .sag-page-body,
    .pac-page-title, .sac-page-title, .sag-page-title        { padding: 0 12px; }
    .mob-page-header, .pac-page-header, .sac-page-header,
    .sag-page-header                                          { padding: 12px 16px; }
    .mob-header-title, .pac-header-title, .sac-header-title,
    .sag-header-title                                         { flex-direction: column; align-items: flex-start; gap: 8px; }
    .mob-title, .pac-title, .sac-title, .sag-title           { font-size: 20px; }
}

/* ── Layout do agendamento: aside (lotação) + form ──────────────────────── */
.mob-agenda-layout {
    display: grid;
    grid-template-columns: 1fr minmax(0, 920px) 1fr;
    align-items: start;
    gap: 18px;
    margin: 0;
}

/* coluna central = cards principais, centralizados no viewport */
.mob-agenda-layout > form {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    margin: 0;
    max-width: none;
}

/* aside ocupa o espaco que sobra a esquerda, encostado no card central */
.mob-agenda-aside {
    grid-column: 1;
    justify-self: end;
    width: 100%;
    max-width: 320px;
    position: sticky;
    top: 12px;
}

.mob-agenda-aside .mob-card { margin-bottom: 0; }

@media (max-width: 1100px) {
    .mob-agenda-layout { grid-template-columns: 1fr; }
    .mob-agenda-layout > form { grid-column: 1; }
    .mob-agenda-aside  { grid-column: 1; justify-self: stretch; max-width: 100%; position: static; }
}

/* ── Card de lotação diária ─────────────────────────────────────────────── */
.mob-lotacao-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 18px 6px;
    color: var(--p-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.mob-lotacao-empty i { font-size: 24px; color: var(--p-amber); }

.mob-lotacao-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--p-text);
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--p-border);
}

.mob-lotacao-date i { color: var(--p-amber); }

.mob-lotacao-section { margin-bottom: 16px; }
.mob-lotacao-section:last-child { margin-bottom: 0; }

.mob-lotacao-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--p-text);
    margin-bottom: 4px;
}

.mob-lotacao-badge {
    min-width: 24px;
    text-align: center;
    padding: 2px 8px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.mob-lotacao-badge--agend { background: var(--p-blue); }
.mob-lotacao-badge--solic { background: var(--p-amber); }

.mob-lotacao-help {
    font-size: 11px;
    color: var(--p-muted);
    line-height: 1.4;
    margin: 0 0 10px;
}

.mob-lotacao-tipo {
    background: var(--p-card-2);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    padding: 8px 10px;
    margin-bottom: 8px;
}

.mob-lotacao-tipo:last-child { margin-bottom: 0; }

.mob-lotacao-tipo--over {
    border-color: var(--p-danger);
    background: var(--p-danger-lt);
}

.mob-lotacao-tipo-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.mob-lotacao-tipo-cod {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--p-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mob-lotacao-tipo-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--p-blue);
    flex-shrink: 0;
}

.mob-lotacao-tipo--over .mob-lotacao-tipo-num { color: var(--p-danger); }

.mob-lotacao-nolimit {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--p-muted);
    text-transform: uppercase;
}

.mob-lotacao-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--p-border);
    overflow: hidden;
    margin-top: 6px;
}

.mob-lotacao-bar-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--p-green);
    transition: width .25s;
}

.mob-lotacao-tipo--over .mob-lotacao-bar-fill { background: var(--p-danger); }

.mob-lotacao-empty-line {
    font-size: 11.5px;
    color: var(--p-muted);
    font-style: italic;
    padding: 4px 0;
}

/* ── Avatar de paciente / acompanhante (display-only) ───────────────────── */
/* .mob-identity-row, .mob-avatar-col, .mob-avatar, .mob-avatar-img,
   .mob-avatar-overlay, .mob-avatar-hint, .mob-identity-fields já existem
   no Bloco 2 do mobro-tokens.css (linhas 264, 270, 278...). Reaproveitar. */

/* ── Avatar do paciente / acompanhante como linha inline (abaixo do select) ── */
.mob-avatar--sm {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--p-bg);
    border: 2px solid var(--p-border);
    margin: 4px 0 12px;
}

.mob-acomp-avatar {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--p-bg);
    border: 2px solid var(--p-border);
    margin: 4px 0 12px;
}

.mob-acomp-avatar--clickable { cursor: pointer; border-color: var(--p-blue); }
.mob-acomp-avatar--clickable:hover { box-shadow: var(--p-ring); }
.mob-acomp-avatar--clickable:hover .mob-avatar-overlay { opacity: 1; }

.mob-acomp-form-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Modal de foto (paciente / acompanhante) ───────────────────────────── */
.mob-foto-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15,23,42,.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.mob-foto-modal-box {
    position: relative;
    background: var(--p-card-2);
    border-radius: var(--p-radius);
    padding: 20px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

.mob-foto-modal-img {
    max-width: min(420px, 80vw);
    max-height: 70vh;
    object-fit: contain;
    border-radius: var(--p-radius-sm);
    background: var(--p-bg);
}

.mob-foto-modal-nome {
    font-size: 16px;
    font-weight: 700;
    color: var(--p-teal);
    text-align: center;
}

.mob-foto-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--p-bg);
    color: var(--p-danger);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background .15s;
}

.mob-foto-modal-close:hover { background: var(--p-danger-lt); }

/* ── Busca genérica (modal `#buscafk_*` de qualquer <angucomplete>) ─────────
 * Partial `scripts/_partials/searchtable.html`. Antes: `.modal-dialog` fixo
 * de 750px, header cinza `#F1F1F1` do ace com o título em `#006699`, ✕
 * vermelho do `.close` legado e grid solto de 680px com a borda
 * `rgb(212,212,212)` do ng-grid.css. Agora: moldura MobRo + tokens.
 * O CSS mora AQUI e não num `<style>` no partial porque o partial é
 * instanciado uma vez por campo `<angucomplete>` da tela (até ~6 cópias do
 * mesmo bloco no DOM). */
.mob-busca-dialog { width: min(980px, 92vw); }

.mob-busca-modal {
    border: 0;
    border-radius: var(--p-radius);
    box-shadow: 0 14px 44px rgba(0, 0, 0, .22);
    overflow: hidden;
}

.mob-busca-body {
    margin-top: 0;
    padding: 16px 18px;
    background: var(--p-bg);
}

/* Delta do título: `.mob-card-title` (reaproveitado no h4) tem `flex: 1`,
 * pensado pra empurrar as ações do card pra direita. Aqui o título fica no
 * tamanho natural e quem ocupa a sobra é o campo de filtro. */
.mob-busca-title {
    flex: 0 1 auto;
    white-space: nowrap;
}

.mob-busca-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 180px;
    max-width: 560px;
    margin-left: auto;
}

/* Qualificado por elemento (`input.mob-busca-input`) de propósito: assim
 * empata em especificidade com `input[type="text"]` do ace.css (:7745), que
 * define `border: 1px solid #d5d5d5` + `border-radius: 0 !important`, e
 * vence por ordem de carregamento. Mesma convenção de `input.mob-input`
 * (Bloco 2). */
input.mob-busca-input {
    width: 100%;
    height: 34px;
    padding: 6px 30px 6px 32px;
    border: 1.5px solid var(--p-border-strong);
    border-radius: var(--p-radius-sm) !important;
    background: var(--p-card);
    color: var(--p-text);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .18s, box-shadow .18s;
}

input.mob-busca-input:focus {
    border-color: var(--p-blue) !important;
    box-shadow: var(--p-ring);
}

.mob-busca-search-icon {
    position: absolute;
    left: 10px;
    color: var(--p-muted);
    font-size: 13px;
    pointer-events: none;
}
/* Tema escuro: o texto do input de busca (placeholder) sai na cor default do
 * motor — medido no print do Allan: ~#757575/#64748b, praticamente ilegível
 * sobre o input `--p-bg` #1e293b — e a lupa é `--p-muted` (#94a3b8).
 * Allan: "melhore a intensidade do texto do input de busca, deve ser branco e
 * o icone também". `--p-text` nos dois (o placeholder fica com a mesma
 * intensidade do texto digitado, de propósito — foi o pedido). Escopo escuro:
 * no claro o placeholder cinza sobre branco está certo. */
html[data-theme="dark"] input.mob-busca-input::placeholder {
    color: var(--p-text);
    opacity: 1;
}
html[data-theme="dark"] .mob-busca-search-icon {
    color: var(--p-text);
}

/* Loader do filtro rápido — alternado por jQuery (`.show()`/`.hide()`) em
 * SearchTable.js. O `display: none` aqui é só o estado inicial, que antes
 * era um `style=""` inline no partial. */
.mob-busca-loader {
    position: absolute;
    right: 8px;
    display: none;
}

.mob-busca-close {
    flex-shrink: 0;
    margin-left: 4px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--p-muted);
    font-size: 26px;
    line-height: 1;
    opacity: .75;
    cursor: pointer;
    transition: opacity .15s, color .15s;
}

.mob-busca-close:hover { opacity: 1; color: var(--p-danger); }

.mob-busca-gridbox {
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    background: var(--p-card);
    box-shadow: var(--p-shadow);
    overflow: hidden;
}
/* Celula do grid do modal de busca. O `cellTemplate` da diretiva
 * (apps/SearchTable.js) e um `<div>` SEM classe, entao nao herda o
 * `white-space: nowrap` + ellipsis que o ng-grid.css:350 poe no
 * `.ngCellText` (que o template customizado substitui). Sem isso, texto
 * mais longo que a coluna QUEBRA dentro da linha de altura fixa e vaza por
 * cima da linha de baixo — aparece com as colunas longas da arvore do
 * procedimento (ex.: "Procedimentos com finalidade diagnostica" em coluna
 * de 15%). `overflow: hidden` a celula ja tem (ng-grid.css:340). */
.mob-busca-gridbox .ngCell,
.mob-busca-gridbox .ngCell > div { /* o <div> do cellTemplate (sem classe) */
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mob-busca-gridbox .ngCell > div { overflow: hidden; } /* sem isso o texto e cortado seco, sem as retinencias */

/* Divisórias de coluna (header e linhas): `ng-grid.css:35` pinta `.ngVerticalBarVisible` com `#d4d4d4` fixo —
 * no tema escuro viram linhas quase brancas, bem mais fortes que as do jqxGrid principal (que usa `--p-border`, ver
 * "Linhas de grade" acima). Mesmo token aqui (Allan: "assim como no jqx grid principal, vamos diminuir a
 * intensidade das linhas divisórias de colunas deste componente de grid modal"). Escopo só do modal de busca. */
.mob-busca-gridbox .ngVerticalBarVisible {
    background-color: var(--p-border);
}

/* Todo ng-grid do sistema: divisorias de coluna suavizadas (mesmo token do jqxGrid). */
.ngGrid .ngVerticalBarVisible {
    background-color: var(--p-border);
}

/* Reset do legado dentro da moldura: `.gridStyle` (ng-grid.css:453) força
 * borda `rgb(212,212,212)` e `.ngGrid` (ng-grid.css:1) fundo `#fdfdfd` — sem
 * isso reaparece a borda dupla / faixa off-white. A pele INTERNA do grid
 * (header cinza, zebra, pager) continua sendo a do ng-grid, de propósito. */
.mob-busca-gridbox .gridStyle,
.mob-busca-gridbox .ngGrid {
    border: 0 !important;
    background: transparent !important;
}

.mob-busca-grid { height: 410px; }

/* Pager do ng-grid (`.ngFooterPanel`) — footer gerado por `src/js/ng-grid.js`
 * ($templateCache 'footerTemplate.html'). Ele vem cheio de `style=""` inline
 * (floats no container, `margin-top: 10px`, `height:27px; width:100px` no
 * select, `width:50px; height:24px; margin-top:1px` no input de página) e
 * inline vence classe — por isso o override pontual com `!important`, mesma
 * abordagem do `_modais/loadfilterControl.html`. As "setinhas" são triângulos
 * por `border` com `#4d4d4d` hardcoded no ng-grid.css: retintadas pra
 * `currentColor` pra seguirem o botão (inclusive no tema escuro). A geometria
 * interna delas (margens negativas da barra `|`) fica como está.
 * Orçamento de altura: `ace.css:622` crava `.ngFooterPanel { height: 45px
 * !important }` — o `height: 55px` inline do `footerStyle()` do ng-grid é
 * ignorado (e o ng-grid reserva 55px pro viewport de qualquer jeito). Logo o
 * conteúdo aqui tem que caber em 45px: 28px de controle + 12px de padding
 * vertical + 1px de borda = 41px, com folga. */
.mob-busca-gridbox .ngFooterPanel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 12px;
    background-color: var(--p-card-2);
    border-top: 1px solid var(--p-border);
    font-size: 12px;
    color: var(--p-muted);
}

.mob-busca-gridbox .ngFooterPanel .ngLabel {
    float: none !important;
    margin: 0 !important;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--p-muted);
}

.mob-busca-gridbox .ngTotalSelectContainer {
    float: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.mob-busca-gridbox .ngFooterTotalItems,
.mob-busca-gridbox .ngFooterSelectedItems { padding: 0; }

.mob-busca-gridbox .ngPagerContainer {
    float: none !important;
    margin-top: 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mob-busca-gridbox .ngRowCountPicker {
    float: none !important;
    margin-right: 0 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* "Registros por página" — mesmo chevron SVG do `.mob-select` (Bloco 2).
 * `width` explícito: com `appearance: none` o `width: auto` colapsa pro
 * mínimo do motor (medido: 26px). 68px cabe "5/10/20/30" (pageSizes é fixo
 * em SearchTable.js) + o chevron. `height` do inline era 27px. */
.mob-busca-gridbox .ngRowCountPicker select {
    float: none !important;
    width: 68px !important;
    height: 28px !important;
    padding: 0 24px 0 8px;
    border: 1px solid var(--p-border-strong);
    border-radius: var(--p-radius-sm) !important;  /* sigem.css zera radius de select com !important */
    background-color: var(--p-card);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    /* color com !important: `sigem.css` declara `color: rgb(170,170,170)!
     * important` em `select` (texto cinza do skin antigo) e ganha do token. */
    color: var(--p-text) !important;
    font-size: 12px;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.mob-busca-gridbox .ngPagerControl {
    float: none !important;
    margin-right: 0 !important;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: normal !important;
}

/* Centraliza o triângulo: o filho é um box 0x0 com bordas (8,7 x 10) — o
 * flex centra a margin-box dele, então a seta fica no meio do botão. */
.mob-busca-gridbox .ngPagerButton {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 28px;
    padding: 0 5px;
    border: 1px solid var(--p-border);
    border-radius: 6px;
    background: var(--p-card);
    color: var(--p-muted);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.mob-busca-gridbox .ngPagerButton:hover:not(:disabled) {
    background: var(--p-blue-lt);
    border-color: var(--p-blue);
    color: var(--p-blue);
}

.mob-busca-gridbox .ngPagerButton:disabled {
    opacity: .45;
    cursor: default;
}

.mob-busca-gridbox .ngPagerFirstTriangle { border-color: transparent currentColor transparent transparent; }
.mob-busca-gridbox .ngPagerLastTriangle  { border-color: transparent transparent transparent currentColor; }
.mob-busca-gridbox .ngPagerFirstBar,
.mob-busca-gridbox .ngPagerLastBar { border-left-color: currentColor; }

.mob-busca-gridbox .ngPagerCurrent {
    width: 52px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border: 1px solid var(--p-border-strong);
    border-radius: var(--p-radius-sm) !important;  /* idem sigem.css */
    background: var(--p-card);
    color: var(--p-text);
    font-size: 12px;
    text-align: center;
    outline: none;
}

.mob-busca-gridbox .ngPagerCurrent:focus { border-color: var(--p-blue); }

.mob-busca-gridbox .ngGridMaxPagesNumber {
    color: var(--p-muted);
    font-size: 12px;
    vertical-align: middle;
}

/* ── Tema escuro — Fase 2 (008): componentes flutuantes de vendor ───────────
 * Mesmo mecanismo (B) das camadas acima: override sob `html[data-theme=
 * "dark"]`, sem editar o CSS de origem (constitution seção II). */

/* Calendário de data (`bootstrap-datepicker`, plugin ativo — `.datepicker(`
 * usado nos controllers; jQuery UI datepicker NÃO é usado). Preserva a
 * distinção dia comum / hoje / selecionado (FR-005): hoje = âmbar, ativo =
 * azul, comum = fundo padrão. */
html[data-theme="dark"] .datepicker,
html[data-theme="dark"] .datepicker-dropdown {
    background-color: var(--p-card-2);
    color: var(--p-text);
}
html[data-theme="dark"] .datepicker-dropdown:after {
    border-bottom-color: var(--p-card-2);
}
html[data-theme="dark"] .datepicker-dropdown.datepicker-orient-bottom:after {
    border-top-color: var(--p-card-2);
}
html[data-theme="dark"] .datepicker table tr td,
html[data-theme="dark"] .datepicker table tr th,
html[data-theme="dark"] .datepicker th.datepicker-switch,
html[data-theme="dark"] .datepicker thead tr:first-child th,
html[data-theme="dark"] .datepicker tfoot tr th {
    color: var(--p-text);
}
html[data-theme="dark"] .datepicker table tr td.old,
html[data-theme="dark"] .datepicker table tr td.new,
html[data-theme="dark"] .datepicker table tr td.disabled,
html[data-theme="dark"] .datepicker table tr td.disabled:hover {
    color: var(--p-muted);
}
html[data-theme="dark"] .datepicker table tr td.day:hover,
html[data-theme="dark"] .datepicker thead tr:first-child th:hover,
html[data-theme="dark"] .datepicker tfoot tr th:hover {
    background: var(--p-card);
}
html[data-theme="dark"] .datepicker table tr td.today,
html[data-theme="dark"] .datepicker table tr td.today:hover,
html[data-theme="dark"] .datepicker table tr td.today.disabled,
html[data-theme="dark"] .datepicker table tr td.today.disabled:hover {
    background: var(--p-amber-lt);
    background-image: none;
    color: var(--p-amber);
}
html[data-theme="dark"] .datepicker table tr td.active,
html[data-theme="dark"] .datepicker table tr td.active:hover {
    background-color: var(--p-blue) !important;
    color: #fff;
}

/* Ajuda flutuante (`.popover`, Bootstrap; `.tooltip` já é escuro/branco por
 * padrão nos 2 temas, não precisa de override). */
html[data-theme="dark"] .popover {
    background-color: var(--p-card-2);
    border-color: var(--p-border);
}
html[data-theme="dark"] .popover-title {
    background-color: var(--p-card);
    border-bottom-color: var(--p-border);
    color: var(--p-text);
}
html[data-theme="dark"] .popover-content {
    color: var(--p-text);
}
html[data-theme="dark"] .popover.top .arrow,
html[data-theme="dark"] .popover.top .arrow:after {
    border-top-color: var(--p-border);
}
html[data-theme="dark"] .popover.bottom .arrow,
html[data-theme="dark"] .popover.bottom .arrow:after {
    border-bottom-color: var(--p-border);
}
html[data-theme="dark"] .popover.left .arrow,
html[data-theme="dark"] .popover.left .arrow:after {
    border-left-color: var(--p-border);
}
html[data-theme="dark"] .popover.right .arrow,
html[data-theme="dark"] .popover.right .arrow:after {
    border-right-color: var(--p-border);
}

/* Placeholder do campo `<angucomplete>` (Procedimento, Estabelecimento, Paciente...).
 * `ace.css:795-830` fixa `color: #333 !important` em `.angucomplete-holder .placeholder-angu` — cor pensada para o
 * tema claro: no escuro o texto "Código ou descrição do procedimento" ficou bem mais escuro que o placeholder dos
 * demais campos (Allan: "o lable de procedimento está com uma cor mais escura, fora do padrão"). Token do tema nos
 * dois temas; `!important` + seletor mais específico porque a regra legada também é `!important`. */
.angucomplete-holder input.placeholder-angu::placeholder {
    color: var(--p-muted) !important;
    opacity: 1 !important;
}
.angucomplete-holder input.placeholder-angu::-webkit-input-placeholder {
    color: var(--p-muted) !important;
    opacity: 1 !important;
}
.angucomplete-holder input.placeholder-angu::-moz-placeholder {
    color: var(--p-muted) !important;
    opacity: 1 !important;
}
.angucomplete-holder input.placeholder-angu:-ms-input-placeholder {
    color: var(--p-muted) !important;
    opacity: 1 !important;
}

/* Sugestões de busca (`angucomplete`, `ace.css:101-135`, ~20 telas). */
html[data-theme="dark"] .angucomplete-dropdown {
    background-color: var(--p-card-2);
    border-color: var(--p-border);
}
html[data-theme="dark"] .angucomplete-row {
    color: var(--p-text);
}
html[data-theme="dark"] .angucomplete-selected-row,
html[data-theme="dark"] .angucomplete-row:hover {
    background-color: var(--p-blue-lt);
    color: var(--p-text);
}

/* Menu suspenso genérico Bootstrap (`.dropdown-menu`) — cobre também o
 * calendário (`.datepicker.dropdown-menu`) e o seletor de hora
 * (`.bootstrap-timepicker-widget.dropdown-menu`), que herdam a classe. Não
 * colide com `.mob-lf-*` (dropdown de filtros salvos, cobertura própria já
 * existente acima). */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--p-card-2);
    border-color: var(--p-border);
}
html[data-theme="dark"] .dropdown-menu > li > a {
    color: var(--p-text);
}
html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus {
    background-color: var(--p-blue-lt);
    color: var(--p-text);
}
html[data-theme="dark"] .dropdown-menu > .disabled > a,
html[data-theme="dark"] .dropdown-menu > .disabled > a:hover,
html[data-theme="dark"] .dropdown-menu > .disabled > a:focus {
    color: var(--p-muted);
}
html[data-theme="dark"] .dropdown-menu .divider {
    background-color: var(--p-border);
}

/* Seletor de hora (`bootstrap-timepicker`, 1 uso) — fundo já vem de
 * `.dropdown-menu` acima; só falta o texto dos botões de incremento. */
html[data-theme="dark"] .bootstrap-timepicker-widget table td a {
    color: var(--p-text);
}
html[data-theme="dark"] .bootstrap-timepicker-widget table td a:hover {
    background-color: var(--p-card);
    border-color: var(--p-border);
}

/* Seleção múltipla (`chosen`, 1 uso). */
html[data-theme="dark"] .chosen-container-single .chosen-single {
    background-color: var(--p-bg);
    border-color: var(--p-border-strong);
    color: var(--p-text);
}
html[data-theme="dark"] .chosen-container-single .chosen-default {
    color: var(--p-muted);
}
html[data-theme="dark"] .chosen-container .chosen-drop {
    background: var(--p-card-2);
    border-color: var(--p-border);
}
html[data-theme="dark"] .chosen-container .chosen-results li {
    color: var(--p-text);
}
html[data-theme="dark"] .chosen-container .chosen-results li.no-results {
    background: var(--p-card);
    color: var(--p-muted);
}
html[data-theme="dark"] .chosen-container .chosen-results li.disabled-result {
    color: var(--p-muted);
}

/* Abas legadas sem `.mob-tabs-bar` (bare `.nav-tabs`, 2 telas:
 * `scripts/_partials/relatoriosControl.html`,
 * `scripts/Cfg/configuracoes/configuracoes.html`) — nas 4 telas que já usam
 * `.mob-tabs-bar` junto, aquela classe já vence por ordem de origem. */
html[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--p-border);
}
html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs > li.active > a:focus {
    background-color: var(--p-card);
    color: var(--p-text);
    border-color: var(--p-border) var(--p-border) transparent;
}
html[data-theme="dark"] .nav-tabs > li > a:hover {
    border-color: var(--p-card-2) var(--p-card-2) var(--p-border);
}

/* Tabela simples Bootstrap (`.table`/`.table-striped`/`.table-bordered`/
 * `.table-hover`, uso raro — ex.: tabela de condições do filtro avançado). */
html[data-theme="dark"] .table thead > tr > th,
html[data-theme="dark"] .table tbody > tr > th,
html[data-theme="dark"] .table tfoot > tr > th,
html[data-theme="dark"] .table thead > tr > td,
html[data-theme="dark"] .table tbody > tr > td,
html[data-theme="dark"] .table tfoot > tr > td,
html[data-theme="dark"] .table tbody + tbody,
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > thead > tr > th,
html[data-theme="dark"] .table-bordered > tbody > tr > th,
html[data-theme="dark"] .table-bordered > tfoot > tr > th,
html[data-theme="dark"] .table-bordered > thead > tr > td,
html[data-theme="dark"] .table-bordered > tbody > tr > td,
html[data-theme="dark"] .table-bordered > tfoot > tr > td {
    border-color: var(--p-border);
}
html[data-theme="dark"] .table .table {
    background-color: var(--p-card);
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-child(odd) > td,
html[data-theme="dark"] .table-striped > tbody > tr:nth-child(odd) > th {
    background-color: var(--p-row-alt);
}
html[data-theme="dark"] .table-hover > tbody > tr:hover > td,
html[data-theme="dark"] .table-hover > tbody > tr:hover > th {
    background-color: var(--p-card-2);
}

/* Paginação Bootstrap (`.pagination`, ex.: `_partials/paginationControl.html`). */
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
    background-color: var(--p-card-2);
    border-color: var(--p-border);
    color: var(--p-text);
}
html[data-theme="dark"] .pagination > li > a:hover,
html[data-theme="dark"] .pagination > li > span:hover,
html[data-theme="dark"] .pagination > li > a:focus,
html[data-theme="dark"] .pagination > li > span:focus {
    background-color: var(--p-card);
}
html[data-theme="dark"] .pagination > .disabled > span,
html[data-theme="dark"] .pagination > .disabled > a,
html[data-theme="dark"] .pagination > .disabled > a:hover,
html[data-theme="dark"] .pagination > .disabled > a:focus {
    background-color: var(--p-card-2);
    border-color: var(--p-border);
    color: var(--p-muted);
}

/* Mapa (Leaflet 1.7.1) — balão de informação e controles (zoom, escala,
 * atribuição). Chrome pintado sobre o próprio mapa (tiles) permanece
 * intocado (allowlist: anel de marcador, botão de troca de tema do mapa). */
html[data-theme="dark"] .leaflet-bar a,
html[data-theme="dark"] .leaflet-bar a:hover {
    background-color: var(--p-card-2);
    color: var(--p-text);
}
html[data-theme="dark"] .leaflet-bar a:hover {
    background-color: var(--p-card);
}
html[data-theme="dark"] .leaflet-bar a.leaflet-disabled {
    background-color: var(--p-card-2);
    color: var(--p-muted);
}
html[data-theme="dark"] .leaflet-container .leaflet-control-attribution,
html[data-theme="dark"] .leaflet-control-attribution,
html[data-theme="dark"] .leaflet-control-scale-line {
    background: var(--p-card-2);
    color: var(--p-text);
}
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip {
    background: var(--p-card-2);
    color: var(--p-text);
}

/* ── Abas de página + histórico de pendências de solicitação ─────────────
 * Usado por solicitacao-agendamento e solicitacao-acompanhante (management.html)
 * e pela diretiva pendenciasSolicitacao. Só tokens --p-*: tema escuro herdado.
 */
.psol-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--p-border);
    margin: 0 0 18px 0;
}
.psol-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 10px 16px;
    margin-bottom: -1px;
    font-size: 13px;
    font-weight: 700;
    color: var(--p-muted);
    cursor: pointer;
}
.psol-tab:hover { color: var(--p-text); }
.psol-tab.psol-tab--ativa {
    color: var(--p-blue);
    border-bottom-color: var(--p-blue);
}
.psol-tab-count {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 9px;
    background: var(--p-card-2);
    border: 1px solid var(--p-border);
    color: var(--p-text);
    font-size: 11px;
    text-align: center;
}
.psol-tab-count--alerta {
    background: var(--p-amber-lt);
    border-color: var(--p-amber-bd);
    color: var(--p-amber);
}

.psol-solicitante {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 14px; font-size: 15px; color: var(--p-text);
}
.psol-solicitante i { color: var(--p-blue); }
.psol-vazio {
    padding: 28px 16px;
    text-align: center;
    color: var(--p-muted);
    background: var(--p-card);
    border: 1px dashed var(--p-border-strong);
    border-radius: var(--p-radius);
}
.psol-vazio--erro { color: var(--p-danger); }

/* Card retrátil de cada pendência. Estrutura do sistema: .mob-card + .mob-card-header
 * (faixa e ícone na cor do estado, via :has(.mob-icon--*)). */
.psol-head { padding: 0; }
.psol-head-btn {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-width: 0;
    padding: 12px 18px;
    background: none; border: 0; color: inherit; font: inherit; text-align: left;
    cursor: pointer;
}
.psol-head-btn:focus-visible { outline: 2px solid var(--p-blue); outline-offset: -2px; }
.psol-head-btn .mob-card-title { flex: 0 0 auto; }
.psol-chevron { color: var(--p-muted); font-size: 12px; transition: transform .2s ease; }
.psol-card--aberto .psol-chevron { transform: rotate(180deg); }
.psol-card:not(.psol-card--aberto) .mob-card-header { border-bottom-color: transparent; }
.psol-head-preview {
    flex: 1 1 0; min-width: 0;
    color: var(--p-muted); font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.psol-head-meta { margin-left: auto; flex: 0 0 auto; font-size: 12px; color: var(--p-muted); white-space: nowrap; }
.psol-head-preview + .psol-head-meta { margin-left: 0; }

.psol-badge {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--p-border);
}
.psol-badge--aberta { background: var(--p-amber-lt); border-color: var(--p-amber-bd); color: var(--p-amber); }
.psol-badge--respondida { background: var(--p-green-lt); border-color: var(--p-green-bd); color: var(--p-green); }
.psol-badge--cancelada { background: var(--p-card-2); color: var(--p-muted); }

/* Abre/fecha sem medir altura: a linha do grid vai de 0fr a 1fr */
.psol-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s ease; }
.psol-collapse.is-open { grid-template-rows: 1fr; }
.psol-collapse-inner { min-height: 0; overflow: hidden; }
.psol-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 18px; }

.psol-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.psol-sub { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--p-muted); }
.psol-texto { margin: 0; font-size: 14px; color: var(--p-text); white-space: pre-wrap; }
.psol-texto--vazio { color: var(--p-muted); font-style: italic; }

.psol-valores { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--p-text); }
.psol-valores th, .psol-valores td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--p-border);
    word-break: break-word;
    vertical-align: top;
}
.psol-valores th { font-size: 12px; font-weight: 700; color: var(--p-muted); }
.psol-valores td:first-child { font-weight: 600; width: 28%; }

/* Tile de documento — mesmo componente das telas de solicitação (sag-/sac-doc-*),
 * sem depender do escopo da página. Reutilizável. */
.mob-doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
/* Uma linha por campo de imagem, com Antes e Depois lado a lado para comparar */
.psol-body .mob-doc-grid { display: flex; flex-direction: column; }
.psol-fragmento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mob-doc-tile {
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    overflow: hidden;
    background: var(--p-card);
}
.mob-doc-tile-head {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 12px;
    font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    color: var(--p-muted);
    border-bottom: 1px solid var(--p-border);
    background: var(--p-card-2);
}
.mob-doc-tag {
    margin-left: auto;
    padding: 1px 8px; border-radius: 9px;
    font-size: 10px; letter-spacing: .3px;
    border: 1px solid var(--p-border); background: var(--p-card); color: var(--p-muted);
}
.mob-doc-tag--depois { background: var(--p-green-lt); border-color: var(--p-green-bd); color: var(--p-green); }
.mob-doc-frame {
    position: relative;
    height: 260px;
    display: flex; align-items: center; justify-content: center;
    background: #0f172a;
    overflow: hidden;
}
.mob-doc-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.mob-doc-empty {
    display: none; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px; text-align: center;
    color: var(--p-muted); font-size: 13px; font-weight: 600; word-break: break-all;
}
.mob-doc-empty i { font-size: 30px; opacity: .5; }
.mob-doc-frame.mob-doc-frame--erro { background: var(--p-card-2); }
.mob-doc-frame--erro .mob-doc-img, .mob-doc-frame--erro .mob-doc-expand { display: none; }
.mob-doc-frame--erro .mob-doc-empty { display: flex; }
/* Tile "Depois" enquanto o paciente ainda não preencheu de novo: tracejado = ainda não existe */
.mob-doc-tile--espera { border-style: dashed; }
.mob-doc-tile--espera .mob-doc-frame { background: var(--p-card-2); }
.mob-doc-empty--visivel { display: flex; }
.psol-espera { color: var(--p-muted); font-style: italic; }
.mob-doc-expand {
    position: absolute; top: 10px; right: 10px;
    width: 34px; height: 34px;
    border: none; border-radius: 8px;
    background: rgba(15,23,42,.55); color: #fff; font-size: 15px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .18s, background .15s;
    backdrop-filter: blur(2px);
}
.mob-doc-frame:hover .mob-doc-expand, .mob-doc-expand:focus-visible { opacity: 1; }
.mob-doc-expand:hover { background: var(--p-blue); }

@media (max-width: 680px) {
    .psol-tab { padding: 10px 10px; font-size: 12px; }
    .psol-cols { grid-template-columns: 1fr; }
    .psol-fragmento { grid-template-columns: 1fr; }
    .psol-head-btn { flex-wrap: wrap; row-gap: 4px; }
    .psol-head-preview { display: none; }
    .psol-head-meta { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .psol-collapse, .psol-chevron, .mob-doc-expand { transition: none; }
}

/* ===== Relatórios IA: card de saldo + varinha mágica ===== */
.mob-credit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mob-credit-tile {
    display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
    background: var(--p-card-2); border: 1px solid var(--p-border); border-radius: var(--p-radius);
}
.mob-credit-tile--saldo { background: linear-gradient(135deg, var(--p-green-lt), var(--p-card) 85%); border-color: var(--p-green-bd); }
.mob-credit-tile--saldo.is-baixo { background: linear-gradient(135deg, var(--p-amber-lt), var(--p-card) 85%); border-color: var(--p-amber-bd); }
.mob-credit-tile--saldo.is-zerado { background: linear-gradient(135deg, var(--p-danger-lt), var(--p-card) 85%); border-color: var(--p-danger); }
.mob-credit-label { font-size: 13px; color: var(--p-muted); font-weight: 600; }
.mob-credit-value { font-size: 32px; line-height: 1.1; font-weight: 700; color: var(--p-text); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.mob-credit-value small { font-size: 14px; font-weight: 600; color: var(--p-muted); margin-right: 6px; letter-spacing: 0; }
.mob-credit-tile--saldo .mob-credit-value { color: var(--p-green); }
.mob-credit-tile--saldo.is-baixo .mob-credit-value { color: var(--p-amber); }
.mob-credit-tile--saldo.is-zerado .mob-credit-value { color: var(--p-danger); }
@media (max-width: 560px) { .mob-credit { grid-template-columns: 1fr; } }

.mob-wand-stage {
    display: flex; align-items: center; gap: 20px; margin: 14px 0; padding: 18px 20px;
    border: 1px solid var(--p-border); border-radius: var(--p-radius); overflow: hidden;
    background: linear-gradient(120deg, var(--p-purple-lt), var(--p-card) 70%);
}
.mob-wand { position: relative; width: 84px; height: 84px; flex: 0 0 84px; }
.mob-wand-svg { width: 100%; height: 100%; overflow: visible; }
.mob-wand-body { transform-origin: 28% 78%; animation: mobWandWave 1.6s ease-in-out infinite; }
.mob-wand-stick { fill: var(--p-dark); }
.mob-wand-grip { fill: var(--p-purple); }
.mob-wand-star { fill: #f5b82e; transform-box: fill-box; transform-origin: center; animation: mobWandStar 1.6s ease-in-out infinite; }
.mob-spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #f5b82e; opacity: 0; box-shadow: 0 0 8px 2px rgba(245,184,46,.7); animation: mobSpark 1.6s ease-out infinite; }
.mob-spark--1 { top: 6px;  left: 62px; animation-delay: 0s; }
.mob-spark--2 { top: 0;    left: 48px; animation-delay: .3s; background: var(--p-purple); box-shadow: 0 0 8px 2px rgba(100,82,170,.6); }
.mob-spark--3 { top: 20px; left: 76px; animation-delay: .6s; }
.mob-spark--4 { top: 30px; left: 58px; animation-delay: .9s; background: var(--p-blue); box-shadow: 0 0 8px 2px rgba(26,107,124,.6); }
.mob-spark--5 { top: 10px; left: 72px; animation-delay: 1.2s; }
.mob-wand-text { flex: 1; min-width: 0; }
.mob-wand-title { font-size: 16px; font-weight: 700; color: var(--p-text); margin-bottom: 4px; }
.mob-wand-time { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--p-purple); font-variant-numeric: tabular-nums; }
.mob-wand-bar { height: 4px; margin-top: 12px; border-radius: 2px; background: var(--p-border); overflow: hidden; }
.mob-wand-bar span { display: block; width: 40%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--p-purple), transparent); animation: mobWandBar 1.8s ease-in-out infinite; }
@keyframes mobWandWave { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(10deg); } }
@keyframes mobWandStar { 0%, 100% { transform: scale(.85); opacity: .8; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes mobSpark {
    0% { opacity: 0; transform: translate(0, 0) scale(.3); }
    25% { opacity: 1; transform: translate(4px, -6px) scale(1); }
    100% { opacity: 0; transform: translate(12px, -18px) scale(.2); }
}
@keyframes mobWandBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
    .mob-wand-body, .mob-wand-star, .mob-spark, .mob-wand-bar span { animation: none; }
    .mob-spark { opacity: .6; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Chips selecionaveis e seletor com busca (spec 018 -- regras da modalidade de transporte).
   Genericos: qualquer modulo pode usar. So tokens --p-* (tema escuro herda).
   --------------------------------------------------------------------------------------------------------------- */
.mob-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mob-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1.5px solid var(--p-border);
    border-radius: 999px;
    background: var(--p-card);
    color: var(--p-text);
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
}
.mob-chip:hover { border-color: var(--p-blue); }
.mob-chip:focus-visible { outline: 2px solid var(--p-ring); outline-offset: 2px; }
.mob-chip--on {
    border-color: var(--p-blue);
    background: var(--p-blue-lt);
    color: var(--p-blue-strong);
    font-weight: 600;
}
.mob-chip[disabled], fieldset[disabled] .mob-chip { cursor: default; opacity: .75; }
.mob-chip-mark { font-size: 12px; color: var(--p-muted); }
.mob-chip--on .mob-chip-mark { color: var(--p-blue-strong); }

.mob-picker { position: relative; max-width: 560px; }
.mob-picker-results {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--p-card);
    border: 1px solid var(--p-border-strong);
    border-radius: var(--p-radius-sm);
    box-shadow: var(--p-shadow);
}
.mob-picker-item {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 7px 12px;
    cursor: pointer;
    color: var(--p-text);
    font-size: 13px;
}
.mob-picker-item:hover, .mob-picker-item:focus { background: var(--p-blue-lt); outline: none; }
.mob-picker-kind { flex: 0 0 auto; min-width: 92px; color: var(--p-muted); font-size: 12px; }
.mob-picker-code { flex: 0 0 auto; color: var(--p-muted); font-variant-numeric: tabular-nums; }
.mob-picker-empty { padding: 8px 12px; color: var(--p-muted); font-size: 13px; }

.mob-rule-summary {
    margin: 0 0 12px;
    color: var(--p-muted);
    font-size: 13px;
}
.mob-rule-summary strong { color: var(--p-text); }

/* Mapa de area (spec 018 -- regiao): caixa do mapa e pontos de estabelecimento dentro/fora */
.mob-map-box { height: 420px; border: 1px solid var(--p-border); border-radius: var(--p-radius-sm); overflow: hidden; }
.mob-map-box > leaflet-map { display: block; height: 100%; }
.mob-map-box .leafletMap-wrap { height: 100%; }
.mob-map-box .leafletMap-map-container { height: 100% !important; }

/* Lista paginada com busca (spec 018 -- estabelecimentos da regiao) */
.mob-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; color: var(--p-muted); font-size: 13px; }
.mob-pager-info { margin-right: auto; }
.mob-pager .mob-btn { padding: 4px 12px; }
@media (max-width: 680px) { .mob-map-box { height: 320px; } }
.mob-map-dot-wrap { background: transparent; border: none; }
.mob-map-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--p-card);
    box-shadow: 0 0 0 1px var(--p-border-strong);
    vertical-align: middle;
}
.mob-map-dot--dentro { background: var(--p-green); }
.mob-map-dot--fora { background: var(--p-muted); }

/* ---------------------------------------------------------------------------------------------------------------
   Planejamento automatico (spec 018, US8): veiculo proposto com faixa de assentos por perna.
   --------------------------------------------------------------------------------------------------------------- */
.mob-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .mob-split { grid-template-columns: 1fr; } }

.mob-vehicles { display: grid; gap: 12px; }
.mob-vehicle {
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    background: var(--p-card);
    padding: 12px 14px;
}
.mob-vehicle--fixo { background: var(--p-card-2); }
.mob-vehicle-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px; }
.mob-vehicle-title { font-weight: 700; color: var(--p-text); }
.mob-vehicle-meta { color: var(--p-muted); font-size: 12px; }

.mob-seats { display: grid; grid-template-columns: 44px 1fr; gap: 4px 8px; align-items: center; margin-bottom: 8px; }
.mob-seats-label { color: var(--p-muted); font-size: 12px; }
.mob-seats-row { display: flex; flex-wrap: wrap; gap: 3px; }
.mob-seat {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1.5px solid var(--p-border-strong);
    background: transparent;
}
.mob-seat--on { background: var(--p-blue); border-color: var(--p-blue); }
.mob-seat--over { background: var(--p-danger); border-color: var(--p-danger); }

.mob-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--p-slate-lt);
    color: var(--p-slate);
}
.mob-tag--blue { background: var(--p-blue-lt); color: var(--p-blue-strong); }
.mob-tag--green { background: var(--p-green-lt); color: var(--p-green); }
.mob-tag--amber { background: var(--p-amber-lt); color: var(--p-amber); }
.mob-tag--danger { background: var(--p-danger-lt); color: var(--p-danger); }

.mob-pass-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.mob-pass-list > li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 4px 0; border-top: 1px solid var(--p-border); }
.mob-pass-list > li:first-child { border-top: none; }
.mob-pass-hora { font-variant-numeric: tabular-nums; color: var(--p-muted); min-width: 42px; }

.mob-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: var(--p-radius-sm);
    border: 1px solid var(--p-amber-bd);
    background: var(--p-amber-lt);
    color: var(--p-text);
}
.mob-metrics { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 12px; color: var(--p-muted); font-size: 13px; }
.mob-metrics strong { color: var(--p-text); font-variant-numeric: tabular-nums; }
.mob-row-active > td { background: var(--p-blue-lt) !important; }

/* Chip de data no cabecalho de telas por dia (spec 018) */
.mob-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    padding: 3px 12px;
    border: 1px solid var(--p-border);
    border-radius: 999px;
    background: var(--p-card-2);
    color: var(--p-text);
    font-size: 13px;
    font-weight: 600;
}
.mob-date-chip--weekend { border-color: var(--p-amber-bd); background: var(--p-amber-lt); }
@media (max-width: 680px) { .mob-date-chip { margin-left: 0; } }

/* Ordenação por arrastar da prioridade das modalidades (tipos-arv/index.php) */
.mob-ordem-card { margin: 8px 15px 12px; }
.mob-ordem-lista { list-style: none; margin: 10px 0 0; padding: 0; }
.mob-ordem-lista--salvando { opacity: .6; pointer-events: none; }
.mob-ordem-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; margin-bottom: 6px;
    background: var(--p-card); border: 1px solid var(--p-border); border-radius: var(--p-radius-sm);
}
.mob-ordem-item.ui-sortable-helper { box-shadow: var(--p-shadow); border-color: var(--p-blue); }
.mob-ordem-placeholder {
    height: 42px; margin-bottom: 6px; list-style: none;
    border: 2px dashed var(--p-border-strong); border-radius: var(--p-radius-sm); background: var(--p-card-2);
}
.mob-ordem-handle { cursor: grab; font-size: 18px; color: var(--p-muted); }
.mob-ordem-handle--off { cursor: default; opacity: .35; }
.mob-ordem-pos { min-width: 28px; font-weight: 600; color: var(--p-text); }
.mob-ordem-nome { flex: 1; color: var(--p-text); }
.mob-ordem-cod { color: var(--p-muted); font-size: 12px; }

/* Modal "Prioridade na escolha automática": lista enxuta, posição em destaque, setas além do arrastar */
.mob-ordem-modal { width: 560px; max-width: calc(100% - 24px); }
.mob-ordem-modal .modal-body { max-height: 70vh; overflow: auto; padding: 18px 24px 8px; }
.mob-ordem-intro { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--p-text); }
.mob-ordem-modal .mob-ordem-lista { margin-top: 0; }
.mob-ordem-modal .mob-ordem-item { padding: 8px 8px 8px 12px; gap: 12px; min-height: 52px; transition: border-color .15s, box-shadow .15s; }
.mob-ordem-modal .mob-ordem-item:hover { border-color: var(--p-border-strong); }
.mob-ordem-modal .mob-ordem-handle { padding: 6px 2px; }
.mob-ordem-modal .mob-ordem-handle:hover { color: var(--p-blue); }
.mob-ordem-modal .mob-ordem-pos {
    flex: 0 0 28px; min-width: 0; height: 28px; line-height: 28px; text-align: center; border-radius: 50%;
    background: var(--p-card-2); color: var(--p-muted); font-size: 13px; font-variant-numeric: tabular-nums;
}
.mob-ordem-modal .mob-ordem-item:first-child .mob-ordem-pos { background: var(--p-blue); color: #fff; }
.mob-ordem-modal .mob-ordem-nome { font-size: 15px; font-weight: 600; min-width: 0; }
.mob-ordem-tag {
    padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 18px; white-space: nowrap;
    background: var(--p-blue-lt); color: var(--p-blue);
}
.mob-ordem-modal .mob-ordem-cod { padding: 2px 8px; border-radius: var(--p-radius-sm); background: var(--p-card-2); }
.mob-ordem-setas { display: inline-flex; gap: 2px; flex-shrink: 0; }
.mob-ordem-seta {
    width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--p-radius-sm);
    background: transparent; color: var(--p-muted); font-size: 13px; cursor: pointer;
    transition: background .15s, color .15s;
}
.mob-ordem-seta:hover:not(:disabled) { background: var(--p-blue-lt); color: var(--p-blue); }
.mob-ordem-seta:focus-visible { outline: none; box-shadow: var(--p-ring); }
.mob-ordem-seta:disabled { opacity: .3; cursor: default; }
.mob-ordem-modal .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.mob-ordem-estado { margin-right: auto; font-size: 13px; color: var(--p-amber); }
@media (max-width: 520px) { .mob-ordem-tag { display: none; } }

/* Card com busca em lista suspensa (.mob-picker-results): overflow:hidden do .mob-card cortava a lista */
.mob-card--overflow-visible { overflow: visible; }
.mob-card--overflow-visible > .mob-card-header { border-radius: var(--p-radius) var(--p-radius) 0 0; }

.mob-subsection { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--p-border); }
.mob-subsection-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--p-text); }

/* Campo só leitura em formato de input (ex.: posição da modalidade na prioridade) */
.mob-input--readonly { display: flex; align-items: center; min-height: 40px; background: var(--p-card-2); color: var(--p-text); cursor: default; }

.mob-ordem-mover { display: inline-flex; align-items: center; gap: 6px; }
.mob-ordem-mover .mob-input--xs { width: 72px; }

/* Conferência dos dados do CADSUS (paciente): overlay + um card por campo, com a borda lateral
 * indicando o que acontece (verde preenche, âmbar substitui, cinza igual/sem dado, azul só consulta). */
.pac-cadsus-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(4, 8, 16, .62);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px; z-index: 10000;
}
.pac-cadsus-overlay.ng-enter                         { opacity: 0; transition: opacity .18s ease; }
.pac-cadsus-overlay.ng-enter-active                  { opacity: 1; }
.pac-cadsus-overlay.ng-enter .pac-cadsus-modal       { transform: translateY(8px); transition: transform .2s ease; }
.pac-cadsus-overlay.ng-enter-active .pac-cadsus-modal { transform: none; }
.pac-cadsus-overlay.ng-leave                         { opacity: 1; transition: opacity .12s ease; }
.pac-cadsus-overlay.ng-leave-active                  { opacity: 0; }

.pac-cadsus-modal {
    background: var(--p-card-2);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius);
    box-shadow: 0 12px 40px rgba(0,0,0,.28);
    width: 100%; max-width: 560px; max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
}
.pac-cadsus-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--p-border); }
.pac-cadsus-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--p-text); }
.pac-cadsus-sub { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--p-muted); }

.pac-cadsus-body {
    padding: 14px 20px; overflow-y: auto;
    display: grid; grid-template-columns: 1fr; gap: 10px;
}
.pac-cadsus-card {
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-left: 4px solid var(--p-border-strong);
    border-radius: var(--p-radius-sm);
    padding: 10px 12px;
}
.pac-cadsus-card--novo      { border-left-color: var(--p-green); }
.pac-cadsus-card--substitui { border-left-color: var(--p-amber); background: linear-gradient(to right, var(--p-amber-lt), var(--p-card) 55%); }
.pac-cadsus-card--info      { border-left-color: var(--p-blue); }
.pac-cadsus-card--igual, .pac-cadsus-card--vazio { opacity: .8; }

.pac-cadsus-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pac-cadsus-field { font-size: 13px; font-weight: 700; color: var(--p-text); }
.pac-cadsus-chip {
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
    background: var(--p-dark-lt); color: var(--p-muted); white-space: nowrap;
}
.pac-cadsus-card--novo .pac-cadsus-chip      { background: var(--p-green-lt); color: var(--p-green); }
.pac-cadsus-card--substitui .pac-cadsus-chip { background: var(--p-amber-lt); color: var(--p-amber); border: 1px solid var(--p-amber-bd); }
.pac-cadsus-card--info .pac-cadsus-chip      { background: var(--p-blue-lt); color: var(--p-blue); }

.pac-cadsus-values { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.pac-cadsus-val { display: flex; flex-direction: column; min-width: 0; }
.pac-cadsus-val-label { font-size: 11px; color: var(--p-muted); }
.pac-cadsus-old { font-size: 14px; color: var(--p-muted); text-decoration: line-through; word-break: break-word; }
.pac-cadsus-old--empty { text-decoration: none; font-style: italic; }
.pac-cadsus-new { font-size: 15px; font-weight: 600; color: var(--p-text); word-break: break-word; }

.pac-cadsus-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 12px 20px; border-top: 1px solid var(--p-border);
}
@media (max-width: 480px) {
    .pac-cadsus-foot { flex-direction: column-reverse; }
    .pac-cadsus-foot .pac-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .pac-cadsus-overlay.ng-enter, .pac-cadsus-overlay.ng-leave, .pac-cadsus-overlay .pac-cadsus-modal { transition: none !important; }
}
/* ---------------------------------------------------------------------------------------------------------------
   Planejamento em tempo real (spec 023, Etapa 1): lugares da modalidade, subpainel de edicao inline, faixas de hora.
   --------------------------------------------------------------------------------------------------------------- */
.mob-seats--layout { grid-template-columns: 64px 1fr; gap: 8px 10px; margin-bottom: 10px; }
.mob-seat--lg { width: 22px; height: 22px; border-radius: 5px; }
.mob-seat--cadeira { background: var(--p-teal); border-color: var(--p-teal); border-radius: 50%; }
.mob-banner--danger { border-color: var(--p-danger); background: var(--p-danger-lt); }
.mob-banner--info { border-color: var(--p-border); background: var(--p-card-2); }
.mob-range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mob-range > .mob-input:not(.mob-input--xs) { flex: 1 1 96px; min-width: 0; }
.mob-range > span { color: var(--p-muted); font-size: 13px; }
.mob-subpanel {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    background: var(--p-card-2);
}
.mob-subpanel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mob-list-plain { list-style: none; margin: 0; padding: 0; }
.mob-list-plain > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--p-border); }
.mob-list-plain > li:first-child { border-top: none; }
.mob-list-plain .mob-list-main { flex: 1 1 220px; min-width: 0; color: var(--p-text); }
.mob-list-plain .mob-list-meta { color: var(--p-muted); font-size: 12px; }
.mob-title-badge--alerta, .pac-title-badge--alerta { background: var(--p-danger-lt); color: var(--p-danger); }
/* Spec 023, Etapa 2: confirmação feita pelo robô (origem AUTOMATICA) */
.mob-title-badge--auto { background: var(--p-teal-lt, var(--p-green-lt)); color: var(--p-teal, var(--p-green)); }

/* Spec 023, Etapa 4: resposta da admissao no formulario de agendamento/solicitacao ("Vaga no transporte") */
.mob-vaga { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 9px 12px; border: 1px solid var(--p-border); border-left-width: 4px; border-radius: 6px; background: var(--p-card); color: var(--p-text); font-size: 13px; line-height: 1.4; }
.mob-vaga-icone { flex: 0 0 auto; margin-top: 1px; font-size: 16px; }
.mob-vaga-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mob-vaga-titulo { font-weight: 600; }
.mob-vaga-detalhe { color: var(--p-muted); }
.mob-vaga--cabe { border-left-color: var(--p-green); background: var(--p-green-lt); }
.mob-vaga--cabe .mob-vaga-icone { color: var(--p-green); }
.mob-vaga--replan { border-left-color: var(--p-amber); background: var(--p-amber-lt); }
.mob-vaga--replan .mob-vaga-icone { color: var(--p-amber); }
.mob-vaga--sem { border-left-color: var(--p-danger); background: var(--p-danger-lt); }
.mob-vaga--sem .mob-vaga-icone { color: var(--p-danger); }
.mob-vaga--parcial { border-left-color: var(--p-muted); }
.mob-vaga--parcial .mob-vaga-icone { color: var(--p-muted); }
.mob-vaga-datas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.mob-vaga-datas-rotulo { color: var(--p-muted); }
.mob-vaga-data { padding: 2px 10px; border: 1px solid var(--p-blue-bd); border-radius: 999px; background: var(--p-card); color: var(--p-blue); font: inherit; font-weight: 600; cursor: pointer; }
.mob-vaga-data:hover:not(:disabled) { background: var(--p-blue-lt); }
.mob-vaga-data:focus-visible { outline: 2px solid var(--p-blue); outline-offset: 2px; }
.mob-vaga-data:disabled { opacity: .5; cursor: not-allowed; }