/* Marca FLUA — superficie interna. Plano: docs/planos/2026-10-12-branding-flua.md
 *
 * So vale com <html data-surface="interno">. Sem o atributo, este arquivo nao muda nada.
 * Tokens: js/brand-flua.js -> brand-loader publica como --flua-*.
 *
 * DOIS MODOS:
 *  - pagina inteira (login, dashboard, agendas...): a Flua vale em tudo.
 *  - <html data-escopo="casca"> (medico.html): o PRONTUARIO NAO MUDA (decisao do usuario, 12/10/2026).
 *    As variaveis --brand-* da raiz seguem sendo as da CLINICA, e a Flua e aplicada SO dentro da lista
 *    de conteineres abaixo (menu, topo, fila e os modais de comunicacao/suporte/perfil/agenda/
 *    mensagens/notas/certificado). Tudo que nao esta na lista -- o prontuario e os modais abertos a
 *    partir dele -- fica como era. Modal novo de funcionario: acrescentar o id na lista (4 lugares).
 *
 * Fonte Alan Sans (variavel, 300-900) servida do proprio PAV: a CSP ja permite font-src 'self'. */

@font-face {
  font-family: 'Alan Sans';
  src: url('../fonts/AlanSans-Variable.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

html[data-surface="interno"] {
  --flua-font: 'Alan Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --flua-creme: #F9F0DF;      /* bege do guia */
  --flua-azul-claro: #CCEEF0; /* azul claro do guia */
  --flua-linha: linear-gradient(90deg, #F0283C 0%, #FE7C45 50%, #FF960E 100%);   /* Flua coral do guia: vermelho->laranja->amarelo */
}

/* ===== VARIAVEIS ===== */
:is(html[data-surface="interno"]:not([data-escopo]),
  html[data-surface="interno"][data-escopo="casca"] :is(
    aside.sidebar,
    #mini-stats-collapsed,
    main.main-content,
    #modal-ordem-integrado,
    #modal-calendario-mes,
    #modal-tutoria,
    #modal-painel-tutorado,
    #modal-painel-tutor,
    #modal-selecao-modulo,
    #modal-resetar-senha,
    #modalTickets,
    #modalDetalhesTicket,
    #modal-novidades,
    #modal-perfil-medico,
    #modal-auth-certificado,
    #recados-overlay,
    #recados-panel,
    .recados-toast-med,
    #ia-assistente-fab,
    #ia-chat-container,
    #modal-bloco-notas,
    #bloco-notas-card,
    #custom-modal-overlay,
    #modal-buscar-paciente,
    #modal-cadastrar-paciente
  )) {
  --brand-primary: var(--flua-primary);
  --brand-primary-dark: var(--flua-primary-dark);
  --brand-primary-light: var(--flua-primary-light);
  --brand-primary-rgb: var(--flua-primary-rgb);
  --brand-secondary: var(--flua-secondary);
  --brand-secondary-dark: var(--flua-secondary-dark);
  --brand-secondary-light: var(--flua-secondary-light);
  --brand-secondary-rgb: var(--flua-secondary-rgb);
  --brand-accent: var(--flua-accent);
  --brand-sidebar-bg: var(--flua-sidebar-bg);
  --brand-text-on-primary: var(--flua-text-on-primary);
  /* custom property resolve var() onde e DECLARADA: sem redeclarar aqui, o escopo herdaria o degrade da raiz */
  /* o 'dark' do azul-marinho (#000C24) e quase preto: o degrade vai do azul medio ao azul-marinho */
  --brand-gradient: linear-gradient(135deg, var(--flua-secondary) 0%, var(--flua-primary) 100%);
  --brand-gradient-secondary: linear-gradient(135deg, var(--flua-primary) 0%, var(--flua-secondary) 100%);
  /* medico.css e dashboard.css chamam a cor da marca de "green" e a gravam literal */
  --primary-green: var(--flua-primary);
  --primary-green-light: var(--flua-primary-light);
  --primary-green-dark: var(--flua-primary-dark);
  --secondary-green: var(--flua-secondary);
  --accent-green: var(--flua-accent);
  --green-light: rgba(var(--flua-primary-rgb), .12);
  --green-ultra-light: rgba(var(--flua-primary-rgb), .05);
  --primary-color: var(--flua-primary);
  --primary-dark: var(--flua-primary-dark);
  --color-primary: var(--flua-primary);
  /* painel de Mensagens (medico.html): paleta propria, que era roxo/lavanda */
  --rc-acento: var(--flua-primary);   --rc-acento-2: var(--flua-secondary);   --rc-acento-rgb: var(--flua-primary-rgb);
  --rc-suave: #7A92AB;   --rc-tinta: var(--flua-primary);
  --rc-fundo: var(--flua-creme);   --rc-fundo-2: #FBF8F1;   --rc-hover: #EDF6F7;   --rc-ativo: var(--flua-azul-claro);
  --rc-borda: #E6DFCF;   --rc-borda-2: #D9CFB9;
  --rc-azul-1: var(--flua-primary);   --rc-azul-2: var(--flua-secondary);   --rc-azul-rgb: var(--flua-primary-rgb);
  --rc-eu-1: var(--flua-primary);   --rc-eu-2: var(--flua-primary-dark);
  --rc-toast-1: var(--flua-primary);   --rc-toast-2: var(--flua-secondary);
}
/* Tema escuro: o azul-marinho some sobre fundo escuro; la a marca aparece pelo laranja. */
:is(html[data-surface="interno"][data-theme="dark"]:not([data-escopo]),
  html[data-surface="interno"][data-escopo="casca"][data-theme="dark"] :is(
    aside.sidebar,
    #mini-stats-collapsed,
    main.main-content,
    #modal-ordem-integrado,
    #modal-calendario-mes,
    #modal-tutoria,
    #modal-painel-tutorado,
    #modal-painel-tutor,
    #modal-selecao-modulo,
    #modal-resetar-senha,
    #modalTickets,
    #modalDetalhesTicket,
    #modal-novidades,
    #modal-perfil-medico,
    #modal-auth-certificado,
    #recados-overlay,
    #recados-panel,
    .recados-toast-med,
    #ia-assistente-fab,
    #ia-chat-container,
    #modal-bloco-notas,
    #bloco-notas-card,
    #custom-modal-overlay,
    #modal-buscar-paciente,
    #modal-cadastrar-paciente
  )) {
  --brand-primary: var(--flua-accent);
  --primary-green: var(--flua-accent);   --primary-green-light: #FF9F73;   --primary-green-dark: #E5652F;
  --secondary-green: #FE7C45;
  --green-light: rgba(254, 124, 69, .20);   --green-ultra-light: rgba(254, 124, 69, .08);
  --primary-color: #FE7C45;   --primary-dark: #E5652F;   --color-primary: #FE7C45;
}

/* ===== FONTE =====
   Texto e controles recebem a Alan Sans mesmo onde a pagina declara Poppins em classe. Especificidade
   alta de proposito; so a declaracao inline vence. Ficam de FORA: icones (<i> nao esta na lista;
   fa-*, .fas/.far/.fab, *icon*) e monoespacado (code/pre, *mono*). Pseudo-elementos nao sao alcancados. */
html[data-surface="interno"]:not([data-escopo]) body,
html[data-surface="interno"]:not([data-escopo]) body :is(div, span, p, a, li, td, th, label, button, input, select, textarea, h1, h2, h3, h4, h5, h6, small, strong, b, em, section, article, header, footer, nav, aside, main, form, table, tr, ul, ol, dl, dt, dd, option, legend, fieldset):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not([class*="icon"]):not([class*="mono"]),
html[data-surface="interno"][data-escopo="casca"] :is(aside.sidebar,
    #mini-stats-collapsed,
    main.main-content,
    #modal-ordem-integrado,
    #modal-calendario-mes,
    #modal-tutoria,
    #modal-painel-tutorado,
    #modal-painel-tutor,
    #modal-selecao-modulo,
    #modal-resetar-senha,
    #modalTickets,
    #modalDetalhesTicket,
    #modal-novidades,
    #modal-perfil-medico,
    #modal-auth-certificado,
    #recados-overlay,
    #recados-panel,
    .recados-toast-med,
    #ia-assistente-fab,
    #ia-chat-container,
    #modal-bloco-notas,
    #bloco-notas-card,
    #custom-modal-overlay,
    #modal-buscar-paciente,
    #modal-cadastrar-paciente),
html[data-surface="interno"][data-escopo="casca"] :is(aside.sidebar,
    #mini-stats-collapsed,
    main.main-content,
    #modal-ordem-integrado,
    #modal-calendario-mes,
    #modal-tutoria,
    #modal-painel-tutorado,
    #modal-painel-tutor,
    #modal-selecao-modulo,
    #modal-resetar-senha,
    #modalTickets,
    #modalDetalhesTicket,
    #modal-novidades,
    #modal-perfil-medico,
    #modal-auth-certificado,
    #recados-overlay,
    #recados-panel,
    .recados-toast-med,
    #ia-assistente-fab,
    #ia-chat-container,
    #modal-bloco-notas,
    #bloco-notas-card,
    #custom-modal-overlay,
    #modal-buscar-paciente,
    #modal-cadastrar-paciente) :is(div, span, p, a, li, td, th, label, button, input, select, textarea, h1, h2, h3, h4, h5, h6, small, strong, b, em, section, article, header, footer, nav, aside, main, form, table, tr, ul, ol, dl, dt, dd, option, legend, fieldset):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not([class*="icon"]):not([class*="mono"]) {
  font-family: var(--flua-font);
}

/* ===== LOGOS =====
   O "Flua" e largo (3,2:1) e as telas foram desenhadas para o logo quase quadrado da SIM. !important
   porque varias paginas fixam largura/altura inline. Login (.clinic-logo) tem tamanho proprio. */
html[data-surface="interno"] img.sidebar-logo-img {
  max-height: 34px !important;  max-width: 124px !important;  width: auto !important;  height: auto !important;
}
html[data-surface="interno"]:not([data-escopo]) img.brand-logo:not(.clinic-logo):not(.sidebar-logo-img) {
  max-height: 38px !important;  max-width: 128px !important;  width: auto !important;  height: auto !important;
  object-fit: contain;
}

/* ===== PALETA DISTRIBUIDA (painel medico) =====
   O azul-marinho sozinho nao e a marca. O gradiente vermelho->laranja vira o fio do topo e da sidebar;
   o fundo da area de trabalho e BRANCO (usuario, 16/10/2026: o creme ali pesava); o azul-claro marca o que
   esta ativo/selecionado. O creme segue no login e em detalhes. */
html[data-surface="interno"] .main-header {
  border-top: 3px solid transparent;
  border-image: var(--flua-linha) 1;
}
html[data-surface="interno"] .sidebar-header {
  border-bottom: 3px solid transparent !important;
  border-image: var(--flua-linha) 1 !important;
}
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) main.main-content {
  background: #fff;
}

/* ===== COMPONENTES COM COR LITERAL (identidade antiga) ===== */
/* Bloco "Central de Comunicacao" da sidebar: gradiente roxo literal no medico.html. */
html[data-surface="interno"] .novidades-card { background: var(--brand-gradient-secondary); }

/* Modal Central de Comunicacao */
html[data-surface="interno"] .modal-novidades-header { background: var(--brand-gradient-secondary); }
html[data-surface="interno"] .modal-tab-btn.active { background: var(--brand-primary); }
html[data-surface="interno"] .comunicado-destino { background: var(--flua-azul-claro); color: var(--brand-primary); }

/* Suporte tecnico */
html[data-surface="interno"] .modal-ticket-header { background: var(--brand-gradient-secondary); }

/* Meu perfil (verde-agua #0f766e/#0d9488) */
html[data-surface="interno"] .perfil-modal-header { background: var(--brand-gradient-secondary); }
html[data-surface="interno"] .perfil-section-title,
html[data-surface="interno"] .perfil-editavel { color: var(--brand-primary); }
html[data-surface="interno"] .perfil-btn-salvar { background: var(--brand-primary); }

/* Agenda do mes: chip da data (roxo inline) e botao "Ir para Agenda" (verde inline) */
html[data-surface="interno"] #painel-resumo-dia > div:first-child { background: var(--brand-gradient-secondary) !important; }
html[data-surface="interno"] #btn-ir-para-agenda { background: var(--brand-gradient) !important; }

/* Avatar do Meu Perfil (herdava #0d9488) e botoes de tutoria (roxo INLINE no medico.html) */
html[data-surface="interno"] .perfil-avatar-big { color: var(--brand-primary); }
html[data-surface="interno"] .recados-btn.tutor-btn { background: var(--brand-gradient) !important; }

/* Bloco de Notas: cabecalho ambar (#f59e0b->#d97706) com texto branco (contraste ~2,5:1) */
html[data-surface="interno"] .bloco-notas-header {
  background: var(--brand-gradient-secondary);
}

/* Dialogo do SISTEMA (Modal.* em modal.css; tambem aparece dentro do prontuario, decisao do usuario).
   A cor por TIPO e semantica e fica: sucesso (verde), erro (vermelho), aviso (ambar). So o "info" e o
   "pergunta", que sao o confirmar/avisar padrao, passam para a marca. */
html[data-surface="interno"] .custom-modal-icon-info,
html[data-surface="interno"] .custom-modal-icon-question {
  background: var(--flua-azul-claro);
  color: var(--brand-primary);
}
html[data-surface="interno"] .custom-modal-btn-info,
html[data-surface="interno"] .custom-modal-btn-question {
  background: var(--brand-gradient);
}
html[data-surface="interno"] .custom-modal-btn-info:hover,
html[data-surface="interno"] .custom-modal-btn-question:hover {
  background: var(--brand-gradient-secondary);
}
html[data-surface="interno"] .custom-modal-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .12);
}

/* Banner "Notificacoes de Telemedicina": era amarelo (#FEF3C7->#FDE68A), pensado para fundo cinza; sobre o
   creme da Flua o amarelo se confunde com o fundo. Azul-claro da marca + borda laranja para chamar atencao. */
html[data-surface="interno"] .notifications-panel-card .card-header {
  background: linear-gradient(135deg, var(--flua-azul-claro) 0%, #E8F5F6 100%);
  border-left: 4px solid var(--flua-accent);
}
html[data-surface="interno"] .notifications-panel-card .card-header i,
html[data-surface="interno"] .btn-toggle-notifications { color: var(--brand-primary); }
html[data-surface="interno"] .btn-toggle-notifications:hover { background: rgba(var(--brand-primary-rgb), .10); }
html[data-surface="interno"] .btn-clear-notifications { background: var(--brand-primary); }
html[data-surface="interno"] .btn-clear-notifications:hover { background: var(--brand-primary-dark); }

/* Botoes "Mes" (roxo INLINE em 4 pontos) e "Selecao de Modulos" (azul-indigo #344a87) do topo */
html[data-surface="interno"] [onclick*="abrirCalendarioMes"] { background: var(--brand-gradient) !important; }
html[data-surface="interno"] .module-switcher-btn { background: var(--brand-gradient); }

/* Buscar Pacientes / Cadastrar Novo Paciente (fora do prontuario, decisao do usuario 12/10): cabecalho, "Salvar" e
   foco do campo ja seguem a cor da marca pelas variaveis. Falta o "Buscar" (azul literal #2563EB) e o "Cancelar"
   (vermelho #DC3545): nos demais modais o cancelar e neutro. */
html[data-surface="interno"] #btn-buscar-paciente { background: var(--brand-gradient); }
/* a cor do "Cancelar" esta no style INLINE do botao: precisa de !important */
html[data-surface="interno"] .btn-cancelar-cadastro { background: #EEF1F4 !important; color: #374151 !important; }
html[data-surface="interno"] .btn-cancelar-cadastro:hover { background: #E2E7EC !important; }

/* Sino de mensagens do topo (azul #3B82F6) */
html[data-surface="interno"] .recados-btn { background: var(--brand-gradient); }

/* Assistente (IA): atalhos em verde */
html[data-surface="interno"] .ia-chat-atalho {
  color: var(--brand-primary);
  border-color: rgba(var(--brand-primary-rgb), .35);
}

/* Certificado digital: moldura e icones em roxo INLINE. Seletores pelo trecho do degrade que COMECA em
   #667eea -- o cartao do medico (lavanda claro #f0f4ff) NAO casa e continua claro; um seletor mais
   largo ja o pintou de azul-marinho com texto escuro (12/10/2026). */
html[data-surface="interno"] #modal-auth-certificado [style*="linear-gradient(135deg, #667eea"] {
  background: var(--brand-gradient-secondary) !important;
}
html[data-surface="interno"] #modal-auth-certificado [style*="color: #667eea"] { color: var(--brand-primary) !important; }
html[data-surface="interno"] #modal-auth-certificado [style*="solid #667eea"] { border-left-color: var(--brand-primary) !important; }
html[data-surface="interno"] #modal-auth-certificado div[style*="#f0f4ff"] {
  background: linear-gradient(135deg, #EAF6F7 0%, var(--flua-creme) 100%) !important;
}

/* ===== DASHBOARD =====
   O modulo SIMCare tem identidade propria em verde-agua. Degraus do funil e pontos P1-P4 sao DADO/STATUS. */
html[data-surface="interno"] .simcare-header,
html[data-surface="interno"] .simcare-orcamentos-header { background: var(--brand-gradient-secondary); }
html[data-surface="interno"] .simcare-prio-btn.active {
  background: var(--brand-primary);  border-color: var(--brand-primary);
  box-shadow: 0 2px 6px rgba(var(--brand-primary-rgb), .25);
}
/* Modulo PAV: faixa/titulo/icone em #22C55E/#16A34A literais. No escuro o azul-marinho some: laranja. */
html[data-surface="interno"] .stats-overview.pav-section {
  border-left-color: var(--brand-primary);
  background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), .04) 0%, var(--white, #fff) 100%);
}
html[data-surface="interno"] .stats-overview.pav-section .section-header h2 { color: var(--brand-primary); }
html[data-surface="interno"] .stats-overview.pav-section .section-header h2 i {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[data-surface="interno"][data-theme="dark"] .stats-overview.pav-section { border-left-color: var(--flua-accent); }
html[data-surface="interno"][data-theme="dark"] .stats-overview.pav-section .section-header h2 { color: var(--flua-accent); }
html[data-surface="interno"][data-theme="dark"] .stats-overview.pav-section .section-header h2 i {
  background: linear-gradient(135deg, var(--flua-accent), #F6B466);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ===== RESPONSIVO (celular, tablet, telas grandes) =====
   Medido no prontuario de teste em 360x740: tudo cabe, mas dois cortes eram nossos. */

/* O botao flutuante do assistente (z-index 9999999, 46px) fica POR CIMA de qualquer tela e cobria o ultimo item da
   selecao de modulos. A area rolavel ganha folga embaixo para o ultimo item poder subir acima dele. */
@media (max-width: 768px) {
  html[data-surface="interno"] .modal-selecao-content { padding-bottom: 84px; }
}

/* Titulo do painel ("Painel Medico") cortava em "Painel Me..." porque o botao "Mais" ocupa 88px. Ate 480px ele vira so o
   icone (o rotulo segue acessivel a leitor de tela). */
@media (max-width: 480px) {
  html[data-surface="interno"] #mais-opcoes-btn { padding-left: 10px; padding-right: 10px; }
  html[data-surface="interno"] #mais-opcoes-btn span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* Login em celular estreito (360px): a dica "Digite seu usuario do Tasy" era cortada pela largura do campo. */
@media (max-width: 400px) {
  html[data-surface="interno"] .form-input::placeholder { font-size: 13px; }
}

/* Telas grandes: a area de trabalho nao estica sem fim; o conteudo fica legivel e centrado. */
@media (min-width: 2200px) {
  html[data-surface="interno"][data-escopo="casca"] main.main-content .content-area { max-width: 1900px; margin-left: auto; margin-right: auto; }
}

/* ===== LOGIN: a foto e o fundo da pagina; o card fica a direita. Na foto da Flua o consultorio ocupa o
   centro, entao ancora a direita para o card nao cobrir o casal. ===== */
html[data-surface="interno"] .login-page {
  background:
    linear-gradient(100deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 34%, transparent 58%),
    var(--brand-login-bg-foto) right center / cover no-repeat,
    var(--flua-creme);
}
@media (max-aspect-ratio: 1/1), (max-width: 1024px) {
  html[data-surface="interno"] .login-page {
    background:
      var(--brand-login-bg-foto-sm) center top / cover no-repeat,
      var(--flua-creme);
  }
}

/* ===== HARMONIA COM O GUIA (16/10/2026) =====
   Guia: coral = massa/destaque; azul escuro, branco, bege e azul claro = detalhes e complementos. Texto branco sobre
   o coral reprova (2,6:1): coral nunca leva texto branco nem vira cor de texto sobre branco. Status clinico (P1,
   urgente, atrasado, alergia) segue com as cores de alerta (decisao D5). Prontuario fora (data-escopo="casca").
   As cores abaixo estao INLINE no medico.js: o seletor casa o trecho do estilo e precisa de !important. */
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) {
  --flua-azul: #0B2C45;
}

/* Botoes do card do paciente: uma acao principal (azul escuro) e as outras secundarias. */
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .patient-actions .action-btn-patient[style*="#198754"] {
  background: var(--flua-azul) !important; color: #fff !important;
}
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .patient-actions .action-btn-patient[style*="#0d6efd"] {
  background: #fff !important; color: var(--flua-azul) !important; box-shadow: inset 0 0 0 1.5px var(--flua-azul) !important;
}
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .patient-actions .action-btn-patient[style*="#0ea5e9"] {
  background: var(--flua-creme) !important; color: var(--flua-azul) !important;   /* bege: o azul claro virou o fundo do cabecalho */
}
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .patient-actions .action-btn-patient:hover { filter: brightness(.96); }

/* Numero da fila e procedimento: azul escuro (o roxo e o azul royal nao existem no guia). */
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .patient-number { background: var(--flua-azul) !important; }
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .procedimento-detail .detail-value[style*="#7c3aed"] { color: var(--flua-azul) !important; }

/* Selos ao lado do nome: complemento (azul claro / bege), texto azul escuro. A idade 60+ ganha a borda coral
   para continuar chamando atencao sem texto branco sobre laranja (que ja reprovava: 2,2:1). */
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .simcare-hra-badge {
  background: var(--flua-azul-claro) !important; color: var(--flua-azul) !important;
}
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .patient-age-badge.idade-atencao {
  background: var(--flua-creme) !important; color: var(--flua-azul) !important; box-shadow: inset 0 0 0 1.5px #FE7C45;
}

/* Estatisticas do dia: um sistema so. Fio coral no topo, icone azul escuro, numero azul escuro. */
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .stat-item::before { background: var(--flua-linha) !important; }
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .stat-item .stat-icon { color: var(--flua-azul) !important; }
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .stat-item .stat-number { color: var(--flua-azul) !important; font-weight: 600; }

/* Topo: "Mais" e "Sair" secundarios (contorno). Sair mantem o vermelho no texto: e acao de saida. */
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .mais-opcoes-btn {
  background: #fff !important; color: var(--flua-azul) !important; box-shadow: inset 0 0 0 1.5px var(--flua-azul) !important;
}
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .logout-btn {
  background: #fff !important; color: #C81E2E !important; box-shadow: inset 0 0 0 1.5px #C81E2E !important;
}

/* Agenda do dia na sidebar: o roxo do "Presencial" vira azul escuro sobre azul claro. */
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .schedule-presencial-label { color: var(--flua-azul) !important; }
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .schedule-item-presencial {
  background: linear-gradient(90deg, var(--flua-azul-claro) 0%, #fff 100%) !important;
}

/* Cabecalho e filtros da lista: o cinza nao existe no guia; vira o azul claro (usuario, 16/10/2026). Vale para as
   abas PAV, Telemedicina e Presencial, que usam o mesmo card. */
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .patients-list-card .card-header,
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .patients-list-card .date-navigation {
  background: var(--flua-azul-claro) !important; border-color: rgba(11, 44, 69, .10) !important;
}
html[data-surface="interno"][data-escopo="casca"]:not([data-theme="dark"]) .btn-mais-filtros {
  background: #fff !important; color: var(--flua-azul) !important; border-color: rgba(11, 44, 69, .35) !important;
}