@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

  :root {
    color-scheme: light;
    --azul: #0a3d6b;
    --azul-medio: #1a5fa8;
    --azul-claro: #e8f0f9;
    --verde: #1a6b4a;
    --verde-claro: #e6f4ee;
    --cinza: #4a5568;
    --cinza-claro: #f5f7fa;
    --borda: #d0dae8;
    --branco: #ffffff;
    --texto: #1a202c;
    --bg-page: #eef2f8;
    --bg-card: #ffffff;
    --bg-input: #f5f7fa;
    --preview-bg: #fdfcfb;
    /* Cor de fundo das barras de marca (header, abas) — separada de --azul,
       que no modo escuro vira cor de TEXTO/destaque e não pode ser fundo. */
    --brand-bg: #0a3d6b;
    --brand-bg-2: #0d2f52;
    --brand-bg-deep: #061f38;
    --ok-solid: #1a6b4a;
    --btn-primary-bg: #0a3d6b;
    --btn-primary-hover: #1a5fa8;
    --sombra-card: 0 2px 8px rgba(10,61,107,0.06);
    --foco-ring: 0 0 0 3px rgba(26,95,168,0.12);
    /* Tokens --d-* (cores fixas do HTML/JS) NÃO são definidos aqui de propósito:
       var(--d-x, #hex) cai no #hex original. Só css/theme-dark.css os define. */
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'IBM Plex Sans', sans-serif;
    background: var(--bg-page);
    color: var(--texto);
    min-height: 100vh;
    transition: background 0.3s, color 0.3s;
  }

  /* HEADER */
  .app-header {
    background: var(--brand-bg);
    color: white;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 12px rgba(10,61,107,0.3);
  }

  .logo-circle {
    width: 48px; height: 48px;
    background: var(--d-bg-card,white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
  }

  .app-header h1 {
    font-family: 'Source Serif 4', serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
  }

  .app-header p {
    font-size: 12px;
    opacity: 0.75;
    margin-top: 2px;
  }

  .badge-cirurgia {
    margin-left: auto;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
  }

  /* ABAS */
  .tabs-bar {
    background: var(--brand-bg);
    padding: 0 32px;
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .tabs-bar.has-overflow { padding-right: 48px; }

  .tab-btn {
    padding: 10px 22px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px 6px 0 0;
    transition: all 0.2s;
  }

  .tab-btn.active {
    background: var(--d-bg-page,#eef2f8);
    color: var(--azul);
    font-weight: 600;
  }

  .tab-btn:not(.active):hover {
    background: rgba(255,255,255,0.18);
    color: white;
  }

  .tab-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    padding: 0px 6px;
    font-size: 10px;
    margin-left: 6px;
    vertical-align: middle;
  }

  .tab-btn.active .tab-badge { background: var(--azul-claro); color: var(--azul); }

  /* LAYOUT PRINCIPAL */
  .main-layout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .card {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--borda);
    box-shadow: var(--sombra-card);
    overflow: hidden;
  }

  .card-header {
    background: var(--azul-claro);
    border-bottom: 1px solid var(--borda);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .card-header h2 {
    font-size: 13px;
    font-weight: 600;
    color: var(--azul);
    text-transform: uppercase;
    letter-spacing: 0.6px;
  }

  .card-icon { font-size: 16px; }

  .card-body { padding: 20px; }

  /* FORMULÁRIO */
  .form-group {
    margin-bottom: 16px;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* Três campos na mesma linha (ex.: Peso / Altura / IMC). O IMC fica
     com a coluna mais larga porque exibe valor + classificação.
     Os campos esticam para terminar todos na mesma altura, mesmo que
     um deles use fonte menor. */
  .form-row-3 { grid-template-columns: 0.85fr 0.85fr 1.3fr; }
  .form-row-3 > .form-group { display: flex; flex-direction: column; }
  .form-row-3 > .form-group > input,
  .form-row-3 > .form-group > select { flex: 1 1 auto; }

  label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--cinza);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
  }

  input, select, textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--borda);
    border-radius: 7px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    color: var(--texto);
    background: var(--bg-input);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
  }

  input:focus, select:focus, textarea:focus {
    border-color: var(--azul-medio);
    box-shadow: var(--foco-ring);
    background: var(--bg-card);
  }

  textarea { resize: vertical; min-height: 70px; }

  /* Campos que crescem conforme o texto é digitado (ver comuns.js).
     A altura inicial continua sendo o min-height de cada campo; o
     crescimento para no max-height e a partir daí o campo rola. */
  textarea.auto-grow {
    max-height: 240px;
    overflow-y: hidden;
    transition: height 0.12s ease-out;
  }

  /* STATUS CLÍNICO */
  .status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 4px;
  }

  .status-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1.5px solid var(--borda);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    background: var(--cinza-claro);
    color: var(--cinza);
  }

  .status-chip input[type="radio"] { display: none; }

  .status-chip.selected-sim {
    border-color: var(--verde);
    background: var(--verde-claro);
    color: var(--verde);
    font-weight: 600;
  }

  .status-chip.selected-nao {
    border-color: var(--d-fg-erro,#c0392b);
    background: var(--d-bg-erro,#fdf0ef);
    color: var(--d-fg-erro,#c0392b);
    font-weight: 600;
  }

  .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
  }

  /* BOTÕES */
  .btn-group {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
  }

  .btn {
    padding: 11px 22px;
    border: none;
    border-radius: 8px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .btn-primary {
    background: var(--btn-primary-bg);
    color: white;
    flex: 1;
  }
  .btn-primary:hover { background: var(--btn-primary-hover); transform: translateY(-1px); }

  .btn-secondary {
    background: var(--azul-claro);
    color: var(--azul);
    border: 1.5px solid var(--borda);
  }
  .btn-secondary:hover { background: var(--borda); }

  .btn-danger {
    background: var(--d-bg-erro,#fdf0ef);
    color: var(--d-fg-erro,#c0392b);
    border: 1.5px solid var(--d-bd-erro,#f5c0bb);
  }
  .btn-danger:hover { background: var(--d-bg-erro,#f5c0bb); }

  /* PREVIEW DA EVOLUÇÃO */
  .preview-card {
    grid-column: 1 / -1;
  }

  .preview-area {
    font-family: 'Source Serif 4', serif;
    font-size: 14px;
    line-height: 1.85;
    color: var(--texto);
    white-space: pre-wrap;
    padding: 24px;
    background: var(--preview-bg);
    border: 1px solid var(--borda);
    border-radius: 8px;
    min-height: 200px;
    position: relative;
  }

  .preview-empty {
    color: var(--d-texto-mut,#aab);
    font-style: italic;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    text-align: center;
    padding: 40px;
  }

  /* CABEÇALHO DO DOCUMENTO GERADO */
  .doc-header {
    text-align: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--azul);
  }

  .doc-header-logo {
    font-size: 28px;
    margin-bottom: 4px;
  }

  .doc-header-title {
    font-family: 'Source Serif 4', serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--azul);
    line-height: 1.3;
  }

  .doc-header-sub {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px;
    color: var(--cinza);
    margin-top: 4px;
    letter-spacing: 0.3px;
  }

  .doc-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--cinza);
    background: var(--cinza-claro);
    padding: 6px 10px;
    border-radius: 5px;
    margin-bottom: 14px;
    border-left: 3px solid var(--azul-medio);
  }

  .doc-body {
    font-family: 'Source Serif 4', serif;
    font-size: 14px;
    line-height: 1.9;
  }

  .doc-section {
    font-weight: 600;
    color: var(--azul);
    margin-top: 12px;
    font-style: italic;
  }

  /* TOAST */
  .toast {
    position: fixed;
    bottom: 28px; right: 28px;
    background: var(--ok-solid);
    color: white;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    transform: translateY(80px);
    opacity: 0;
    transition: all 0.35s cubic-bezier(.22,1,.36,1);
    z-index: 9999;
    display: flex; align-items: center; gap: 8px;
  }
  .toast.show { transform: translateY(0); opacity: 1; }

  /* SEPARADOR */
  .divider {
    border: none;
    border-top: 1px solid var(--borda);
    margin: 16px 0;
  }

  /* CAMPOS ESPECIAIS */
  .campo-opcoes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
  }

  .opcao-pill {
    padding: 4px 12px;
    border-radius: 20px;
    border: 1.5px solid var(--borda);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--cinza-claro);
    color: var(--cinza);
    font-weight: 500;
  }
  .opcao-pill:hover, .opcao-pill.ativo {
    border-color: var(--azul-medio);
    background: var(--azul-claro);
    color: var(--azul);
    font-weight: 600;
  }

  .help-text {
    font-size: 11px;
    color: var(--d-texto-mut,#8899aa);
    margin-top: 4px;
    font-style: italic;
  }

  /* PÓS-OPERATÓRIO */
  .posop-banner {
    background: linear-gradient(135deg, #1a6b4a 0%, #2d8f63 100%);
    color: white;
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(26,107,74,0.25);
  }

  .posop-banner .posop-icon { font-size: 20px; }

  .posop-section {
    background: var(--d-verde-claro,#f0faf5);
    border: 1.5px solid var(--d-bd-ok,#a8d8c0);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 14px;
  }

  .posop-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--d-verde,#1a6b4a);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .check-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1.5px solid var(--borda);
    border-radius: 7px;
    background: var(--d-bg-card,white);
    font-size: 12px;
    color: var(--cinza);
    cursor: pointer;
    transition: all 0.15s;
  }

  .check-item:has(input:checked) {
    border-color: var(--verde);
    background: var(--verde-claro);
    color: var(--verde);
    font-weight: 600;
  }

  .check-item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    min-width: 15px;
    accent-color: var(--verde);
    cursor: pointer;
  }

  /* INFO DO PACIENTE NO PREVIEW */
  .info-paciente-preview {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--azul-claro);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-family: 'IBM Plex Sans', sans-serif;
  }

  .info-item { font-size: 12px; color: var(--cinza); }
  .info-item strong { display: block; font-size: 14px; color: var(--texto); font-weight: 600; }

  /* PÁGINA INICIAL — antes era tudo style="" + onmouseover; agora classes com
     :hover real, para o tema escuro poder reestilizar (ver css/theme-dark.css). */
  .home-page {
    min-height: calc(100vh - 80px);
    background: linear-gradient(135deg, #061f38 0%, #0a3d6b 50%, #1a5fa8 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px;
  }
  .home-inner { max-width: 860px; width: 100%; text-align: center; }
  .home-title {
    font-family: 'Source Serif 4', serif; font-size: 28px; font-weight: 600;
    color: white; margin-bottom: 8px; letter-spacing: 0.5px;
  }
  .home-sub {
    font-family: 'IBM Plex Sans', sans-serif; font-size: 14px;
    color: rgba(255,255,255,0.65); margin-bottom: 48px;
  }
  .home-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 24px; max-width: 1200px; margin: 0 auto;
  }
  .home-card {
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: 16px; padding: 36px 24px;
    cursor: pointer; text-align: center;
    transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  }
  .home-card:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.4);
    transform: translateY(-4px);
  }
  .home-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .home-card--admin { border-color: rgba(255,200,100,0.35); }
  .home-card--admin:hover { border-color: rgba(255,200,100,0.35); }
  .home-card-icon { font-size: 48px; margin-bottom: 16px; }
  .home-card-title {
    font-family: 'Source Serif 4', serif; font-size: 18px; font-weight: 600;
    color: white; margin-bottom: 8px;
  }
  .home-card-desc {
    font-family: 'IBM Plex Sans', sans-serif; font-size: 12px;
    color: rgba(255,255,255,0.55); line-height: 1.6;
  }
  .home-footer {
    margin-top: 40px; font-family: 'IBM Plex Mono', sans-serif;
    font-size: 11px; color: rgba(255,255,255,0.3);
  }

  /* BOTÃO MODO NOTURNO */
  .dark-toggle-btn {
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    font-family: 'IBM Plex Sans', sans-serif;
    letter-spacing: 0.3px;
    flex-shrink: 0;
  }
  .dark-toggle-btn:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.45);
  }
  /* ============ IMPRESSÃO ============ */
  /* ── tela: ocultar container de impressão ── */
  #print-container { display: none; }

  @media print {
    @page { margin: 6mm 8mm; size: A4; }
    .print-sc { text-transform: none; }

    body > *:not(#print-container) { display: none !important; }
    #print-container { display: block !important; }

    /* Firefox: por padrão NÃO imprime cores de fundo (cabeçalhos coloridos
       somem). Forçar a preservação de cores/fundos em todo o impresso. */
    #print-container, #print-container * {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      color-adjust: exact !important;
    }

    /* Firefox: bordas de tabela "somem" quando uma linha quebra entre páginas
       e com border-collapse. Manter collapse e evitar quebra dentro de
       linhas/cabeçalhos preserva as bordas. */
    #print-container table { border-collapse: collapse !important; }
    #print-container tr,
    #print-container td,
    #print-container th { page-break-inside: avoid; }

    .print-page {
      page-break-after: always;
      page-break-inside: avoid;
    }
    .print-page:last-child {
      page-break-after: auto;
    }
    /* Páginas com tabelas longas devem fluir entre folhas (senão o Firefox
       corta as linhas que excedem a página). O thead repete o cabeçalho e
       cada linha (tr) não se parte. */
    .print-page--flow {
      page-break-inside: auto !important;
    }

    /* ── RODAPÉ PRESO AO PÉ DA FOLHA ──────────────────────────────────────
       Os documentos clínicos saem de buildPaginaComRodape /
       buildPaginaComRodapeProprio (js/internacao.js): uma <table> com
       <tfoot> — assinatura + faixa GHC/SUS/MS — como filha DIRETA da
       .print-page. O tfoot repete a cada folha, mas ficava logo abaixo do
       texto: num atestado curto o rodapé subia até o meio da página.

       A altura na tabela funciona como MÍNIMO: a folha curta é esticada até
       a borda inferior e a longa cresce e quebra normalmente. A altura sobra
       é distribuída entre as linhas, então quem decide onde o conteúdo
       encosta é o vertical-align de cada célula.

       285mm = 297mm (A4) − 12mm (margens do @page acima). Descontamos mais
       2mm porque qualquer arredondamento para cima geraria folha em branco.

       O seletor de filha direta é proposital: Escala, Fila e Férias montam
       um <div> com @page próprio (margem 12mm, ou paisagem) e altura
       calculada em mm no JS — 283mm ali forçaria uma folha em branco. Como
       nesses a <table> é neta, e não filha, a regra não os alcança. */
    .print-page > table {
      height: 283mm;
    }
    .print-page > table > tbody > tr > td { vertical-align: top; }
    .print-page > table > tfoot > tr > td { vertical-align: bottom; }
    /* Numa página que flui entre folhas a altura mínima atrapalha a quebra. */
    .print-page--flow > table { height: auto; }

    /* tfoot sempre no fundo da página */
    tfoot { display: table-footer-group; }
    thead { display: table-header-group; }
  }

  .print-doc { display: none; }

  @media (max-width: 760px) {

    .main-layout { grid-template-columns: 1fr; }
    .preview-card { grid-column: 1; }
    .form-row, .form-row-3 { grid-template-columns: 1fr; }
    .tabs-bar, .subtabs-bar, .module-nav {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      flex-wrap: nowrap;
      padding-left: 10px;
      padding-right: 10px;
    }
    .tab-btn, .subtab-btn, .module-btn {
      white-space: nowrap;
      flex: 0 0 auto;
    }
    #module-bar { padding: 6px 12px !important; position: sticky !important; top: 0 !important; z-index: 100 !important; }
    #home-modules-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    #modulo-escala #app { padding: 10px !important; }
    #escala-tab-switcher {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    #escala-tab-switcher button {
      white-space: nowrap;
      flex: 0 0 auto;
    }
    #tab-calendar > div:first-child { overflow-x: auto; }
    #tab-calendar .calendar-grid { min-width: 720px; }
  }

  /* ============================================================ */
  /* LAYOUT PRESCRIÇÃO                                            */
  /* ============================================================ */
  .presc-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 24px;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 24px;
    align-items: start;
  }

  .presc-left { display: flex; flex-direction: column; gap: 18px; }

  .presc-card { overflow: visible; }
  .presc-card .card-body { padding: 16px 20px; }

  .presc-item-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
  }

  .presc-item-list { display: flex; flex-direction: column; gap: 6px; }

  .presc-med-row { display: flex; align-items: flex-start; }

  .presc-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 6px;
    transition: background 0.15s;
    font-size: 13px;
    color: var(--texto);
    line-height: 1.4;
  }

  .presc-check:hover { background: var(--azul-claro); }

  .presc-check input[type="checkbox"] {
    width: 15px; height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--azul);
    cursor: pointer;
    background: var(--cinza-claro);
    border: none;
    padding: 0;
  }

  .presc-check input[type="checkbox"]:focus {
    box-shadow: none;
  }

  /* PREVIEW PRESCRIÇÃO */
  .presc-preview-body {
    font-family: 'Source Serif 4', serif;
    font-size: 13px;
    line-height: 1.7;
    color: var(--texto);
  }

  .presc-item-num {
    counter-increment: presc-counter;
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px dotted var(--d-borda,#e0e8f0);
    align-items: start;
  }

  .presc-item-num:last-child { border-bottom: none; }

  .presc-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--azul);
    padding-top: 2px;
  }

  .presc-secao-titulo {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--azul);
    background: var(--azul-claro);
    padding: 4px 10px;
    border-radius: 4px;
    margin: 10px 0 6px 0;
    display: block;
  }

  /* SOS / Regular toggle */
  .freq-toggle {
    display: inline-flex;
    gap: 3px;
    margin-left: 8px;
    flex-shrink: 0;
  }
  .freq-btn {
    padding: 1px 7px;
    border-radius: 10px;
    border: 1.5px solid var(--borda);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    background: var(--cinza-claro);
    color: var(--cinza);
    transition: all 0.15s;
    letter-spacing: 0.3px;
  }
  .freq-btn.sos.active {
    background: var(--d-bg-alerta,#fff3e0);
    border-color: var(--d-bd-alerta,#e67e22);
    color: var(--d-fg-alerta,#c0620a);
  }
  .freq-btn.regular.active {
    background: var(--verde-claro);
    border-color: var(--verde);
    color: var(--verde);
  }
  .presc-med-row { align-items: center; flex-wrap: wrap; gap: 4px; }

  /* presc print handled by global #print-container */

  @media (max-width: 900px) {
    .presc-layout { grid-template-columns: 1fr; }
  }

  /* ============================================================
     MÓDULOS PRINCIPAIS
  ============================================================ */
  .module-nav {
    background: var(--d-brand-deep,#061f38);
    display: flex;
    gap: 0;
    padding: 0 32px;
    border-bottom: 2px solid var(--d-azul,#0a3d6b);
  }
  .module-btn {
    padding: 11px 28px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    letter-spacing: 0.3px;
  }
  .module-btn.active {
    color: #fff;
    border-bottom-color: #4ea8de;
    background: rgba(255,255,255,0.07);
  }
  .module-btn:not(.active):hover {
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.05);
  }

  /* Subtabs para ambulatorio e CC */
  .subtabs-bar {
    background: var(--d-brand-2,#0d2f52);
    padding: 0 24px;
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .subtabs-bar.has-overflow { padding-right: 48px; }

  .subtabs-overflow-btn {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: inherit;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.18);
    color: white;
    padding: 0 16px;
    cursor: pointer;
    font-size: 17px;
    font-family: 'IBM Plex Sans', sans-serif;
    z-index: 10;
    align-items: center;
  }
  .has-overflow .subtabs-overflow-btn { display: flex; }

  .subtabs-dropdown {
    display: none;
    position: fixed;
    background: var(--d-brand-2,#0d2f52);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 6px;
    min-width: 220px;
    z-index: 9999;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  }
  .subtabs-dropdown.show { display: block; }
  .subtabs-dropdown .subtab-btn,
  .subtabs-dropdown .tab-btn {
    display: block !important;
    width: 100%;
    text-align: left;
    border-radius: 6px;
    padding: 10px 14px;
    white-space: nowrap !important;
  }
  .subtab-btn {
    padding: 9px 18px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px 6px 0 0;
    transition: all 0.18s;
    white-space: nowrap !important;
    flex-shrink: 0;
  }
  .subtab-btn.active {
    background: var(--d-bg-page,#eef2f8);
    color: var(--azul);
    font-weight: 600;
  }
  .subtab-btn:not(.active):hover {
    background: rgba(255,255,255,0.12);
    color: white;
  }
  /* Documentos do kit cirúrgico — destaque discreto em âmbar */
  .subtab-btn.kit {
    color: rgba(253,230,138,0.75);
  }
  .subtab-btn.kit:not(.active):hover {
    background: rgba(255,255,255,0.12);
    color: #fef3c7;
  }
  .subtab-btn.kit.active {
    color: var(--d-fg-alerta,#d97706);
  }

  /* Seções pós-op ambulatório */
  .posop-section { margin-bottom: 16px; }
  .posop-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--azul);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--azul-claro);
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
  }

  /* Clock dieta */
  .clock-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
  }
  .clock-face {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--azul-claro);
    border: 3px solid var(--azul);
    cursor: pointer;
  }
  .clock-hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom center;
    background: var(--azul);
    border-radius: 3px;
    transition: transform 0.3s;
  }
  .clock-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 12px; height: 12px;
    background: var(--azul);
    border-radius: 50%;
    z-index: 10;
  }
  .clock-hour-mark {
    position: absolute;
    top: 50%; left: 50%;
    width: 2px; height: 14px;
    background: rgba(10,61,107,0.3);
    transform-origin: bottom center;
  }
  .clock-label {
    position: absolute;
    font-size: 10px;
    font-weight: 700;
    color: var(--azul);
    transform: translate(-50%,-50%);
    font-family: 'IBM Plex Mono',monospace;
  }
  .time-display {
    font-family: 'IBM Plex Mono',monospace;
    font-size: 28px;
    font-weight: 700;
    color: var(--azul);
    background: var(--azul-claro);
    padding: 8px 24px;
    border-radius: 8px;
    border: 2px solid var(--azul);
    cursor: pointer;
  }

  /* TCLE */
  .tcle-card {
    background: var(--d-bg-alerta,#fffef0);
    border: 1px solid var(--d-bd-alerta,#d4c800);
    border-radius: 8px;
    padding: 16px;
    font-family: 'Source Serif 4', serif;
    font-size: 13px;
    line-height: 1.8;
    color: var(--d-texto,#333);
    margin-bottom: 12px;
  }

  /* Exames */
  .exam-category {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--azul);
    background: var(--azul-claro);
    padding: 4px 10px;
    border-radius: 4px;
    margin: 10px 0 6px;
    display: block;
  }
  /* Lista de exames: 3 colunas e itens mais justos, para caber mais
     exame por tela. Só vale aqui — o .check-item das condutas continua
     com o tamanho original. */
  .exam-check-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px 8px;
    margin-bottom: 6px;
  }

  .exam-check-grid .check-item {
    padding: 5px 9px;
    font-size: 11.5px;
    line-height: 1.3;
    /* Sem o caixa-alta herdado de `label`: o nome do exame ocupa ~15% menos
       e cabe numa linha só na coluna estreita. */
    text-transform: none;
    letter-spacing: 0;
  }

  /* Precisa vir DEPOIS da regra de 3 colunas acima, senão a base vence. */
  @media (max-width: 760px) {
    .exam-check-grid { grid-template-columns: 1fr 1fr; }
  }

  /* Desc cirúrgica */
  .desc-template-btn {
    padding: 8px 14px;
    background: var(--azul-claro);
    border: 1.5px solid var(--borda);
    border-radius: 7px;
    color: var(--azul);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'IBM Plex Sans',sans-serif;
  }
  .desc-template-btn:hover {
    background: var(--azul);
    color: white;
    border-color: var(--azul);
  }
  .desc-template-btn.ativo {
    background: var(--azul);
    color: white;
    border-color: var(--azul);
    box-shadow: 0 0 0 2px rgba(10,61,107,0.18);
  }

  /* CC status */
  .cc-status-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }

  /* Ambulatório pacientes */
  .amb-pac-card {
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--d-bg-card,white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }

  /* Risco cirúrgico badge */
  .risco-box {
    border: 2px solid var(--azul-medio);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--d-azul-claro,#f0f5ff);
    margin-bottom: 12px;
  }
  .risco-box-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--azul);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
  }


  /* ===== MÓDULO ESCALA E MAPA CIRÚRGICO ===== */
  .tab-active { border-bottom: 2px solid #2563eb; color: #2563eb; }
        .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
        .shift-badge { font-size: 0.65rem; padding: 2px 4px; border-radius: 3px; margin-bottom: 1px; display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .bg-nerj { background-color: var(--d-verde-claro,#dcfce7); color: var(--d-verde,#166534); border: 1px solid var(--d-bd-ok,#bbf7d0); }
        .bg-ghc { background-color: var(--d-azul-claro,#dbeafe); color: #1e40af; border: 1px solid var(--d-borda-forte,#bfdbfe); }
        .bg-ms { background-color: #ede9fe; color: #6d28d9; border: 1px solid #c4b5fd; }
        .folga { text-decoration: line-through; opacity: 0.4; filter: grayscale(1); }
        .alerta-24h { background-color: var(--d-bg-erro,#fee2e2) !important; color: var(--d-fg-erro,#991b1b) !important; border: 1px solid var(--d-bd-erro,#fca5a5) !important; font-weight: 700; }
        .period-header { font-size: 0.6rem; font-weight: 800; color: var(--d-texto-mut,#94a3b8); text-transform: uppercase; margin-top: 4px; border-bottom: 1px solid var(--d-borda,#f1f5f9); padding-bottom: 1px; margin-bottom: 2px; }
  /* ===== AUTOCOMPLETE EQUIPE CC ===== */
  #cc-ac-dropdown {
    position: fixed;
    z-index: 9999;
    background: var(--bg-card, #fff);
    border: 1.5px solid var(--azul-medio, #1a5fa8);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 210px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    display: none;
  }
  .cc-ac-item {
    padding: 8px 14px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    cursor: pointer;
    color: var(--texto, #1a202c);
    border-bottom: 1px solid var(--borda, #d0dae8);
  }
  .cc-ac-item:last-child { border-bottom: none; }
  .cc-ac-item:hover, .cc-ac-item.cc-ac-sel {
    background: var(--azul-claro, #e8f0f9);
    color: var(--azul, #0a3d6b);
    font-weight: 600;
  }
  .cc-ac-item strong { color: var(--azul, #0a3d6b); }
  /* ============================================================
     MODAL DE CONFIRMAÇÃO CUSTOMIZADO
  ============================================================ */
  .confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    z-index: 99999;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
  }
  .confirm-overlay.show { opacity: 1; pointer-events: all; }
  .confirm-box {
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 28px 32px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    transform: scale(0.92);
    transition: transform 0.2s;
  }
  .confirm-overlay.show .confirm-box { transform: scale(1); }
  .confirm-icon { font-size: 32px; margin-bottom: 12px; text-align: center; }
  .confirm-title {
    font-family: 'Source Serif 4', serif;
    font-size: 16px; font-weight: 600;
    color: var(--texto);
    text-align: center; margin-bottom: 8px;
  }
  .confirm-msg {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px; color: var(--cinza);
    text-align: center; line-height: 1.6;
    margin-bottom: 22px;
  }
  .confirm-btns { display: flex; gap: 10px; justify-content: center; }
  .confirm-btn-cancel {
    padding: 9px 24px; border-radius: 8px;
    border: 1.5px solid var(--borda);
    background: var(--cinza-claro); color: var(--cinza);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all 0.15s;
  }
  .confirm-btn-cancel:hover { background: var(--borda); }
  .confirm-btn-ok {
    padding: 9px 24px; border-radius: 8px;
    border: none;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all 0.15s;
  }
  .confirm-btn-ok.danger { background: #c0392b; color: white; }
  .confirm-btn-ok.danger:hover { background: #a93226; }
  .confirm-btn-ok.primary { background: var(--btn-primary-bg); color: white; }
  .confirm-btn-ok.primary:hover { background: var(--btn-primary-hover); }

  /* ============================================================
     BUSCA NO HISTÓRICO
  ============================================================ */
  .historico-busca {
    display: flex; align-items: center;
    border: 1.5px solid var(--borda);
    border-radius: 8px;
    background: var(--bg-input);
    padding: 0 12px;
    margin-bottom: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .historico-busca:focus-within {
    border-color: var(--azul-medio);
    box-shadow: var(--foco-ring);
    background: var(--bg-card);
  }
  .historico-busca input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 9px 8px;
    font-size: 14px;
    flex: 1;
  }
  .historico-busca input:focus { box-shadow: none !important; }
  .historico-busca-icon { color: var(--cinza); font-size: 15px; }

  /* ============================================================
     TIMESTAMP DE ÚLTIMA EDIÇÃO
  ============================================================ */
  .preview-timestamp {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--d-texto-mut,#aab);
    text-align: right;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--borda);
  }

  /* ============================================================
     MODAL IMPRIMIR TUDO (seleção de documentos)
  ============================================================ */
  .print-select-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    z-index: 99998;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
  }
  .print-select-overlay.show { opacity: 1; pointer-events: all; }
  .print-select-box {
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 28px 32px;
    max-width: 420px;
    width: 92%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    transform: scale(0.92);
    transition: transform 0.2s;
  }
  .print-select-overlay.show .print-select-box { transform: scale(1); }
  .print-select-title {
    font-family: 'Source Serif 4', serif;
    font-size: 16px; font-weight: 600;
    color: var(--texto);
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 8px;
  }
  .print-select-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    color: var(--texto);
  }
  .print-select-item:hover { background: var(--azul-claro); }
  .print-select-item input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--azul);
    cursor: pointer;
    background: var(--cinza-claro);
    border: none; padding: 0;
    flex-shrink: 0;
  }
  .print-select-item input:focus { box-shadow: none !important; }
  .print-select-btns {
    display: flex; gap: 10px; justify-content: flex-end;
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--borda);
  }

  /* STATUS ONLINE/OFFLINE na barra */
  .offline-banner {
    background: #c0392b;
    color: white;
    font-size: 11px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    text-align: center;
    padding: 4px;
    display: none;
  }
  .offline-banner.show { display: block; }

  /* ── SIDEBAR DE HISTÓRICO ── */
  .evolucao-outer { display: flex; align-items: flex-start; }
  .evolucao-outer > .main-layout { flex: 1; min-width: 0; }
  .historico-sidebar {
    width: 252px; flex-shrink: 0;
    padding: 28px 20px 28px 0;
    display: block;
  }
  .historico-sidebar-inner {
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: 12px;
    box-shadow: var(--sombra-card);
    overflow: hidden;
    position: sticky;
    top: 16px;
  }
  .historico-sidebar-header {
    background: var(--d-primary,#0a3d6b); color: white;
    padding: 11px 14px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .historico-sidebar-lista { padding: 8px; max-height: 62vh; overflow-y: auto; }
  .sidebar-ev-item {
    padding: 8px 10px;
    border: 1px solid var(--borda);
    border-radius: 8px; cursor: pointer; margin-bottom: 6px;
    font-family: 'IBM Plex Sans', sans-serif; font-size: 11px;
    background: var(--bg-card); line-height: 1.4;
    transition: background 0.1s, border-color 0.1s;
  }
  .sidebar-ev-item:hover { background: var(--azul-claro, #e8f4ff); }
  .sidebar-ev-item.selecionado { border-color: var(--d-azul,#0a3d6b); background: var(--azul-claro, #e8f4ff); }
  .sidebar-modo-banner {
    background: var(--d-bg-alerta,#fef3c7); border-bottom: 1px solid var(--d-bd-alerta,#fcd34d);
    padding: 7px 12px; font-size: 11px; font-weight: 600;
    color: var(--d-fg-alerta,#92400e); font-family: 'IBM Plex Sans', sans-serif;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  }
  @media (max-width: 960px) {
    .evolucao-outer { flex-direction: column; }
    .historico-sidebar { width: 100%; padding: 0 24px 24px; }
    .historico-sidebar-inner { position: static; }
  }

  /* ── SIDEBAR ESQUERDA: CIRURGIAS DO DIA (Centro Cirúrgico) ── */
  .cc-layout-outer { display: flex; align-items: flex-start; }
  .cc-abas-wrap { flex: 1; min-width: 0; }
  /* Sidebar (esquerda) e spacer (direita) têm a MESMA largura para manter o
     conteúdo do meio centralizado em relação à viewport. */
  .cc-dia-sidebar {
    width: 258px; flex-shrink: 0;
    padding: 28px 0 28px 24px;
    display: block;
  }
  .cc-dia-spacer { width: 258px; flex-shrink: 0; }
  .cc-dia-sidebar-inner {
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: 12px;
    box-shadow: var(--sombra-card);
    overflow: hidden;
    position: sticky;
    top: 16px;
  }
  .cc-dia-sidebar-header {
    background: var(--d-primary,#0a3d6b); color: white;
    padding: 11px 14px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
  }
  .cc-dia-sidebar-header .cc-dia-badge {
    background: rgba(255,255,255,0.22); border-radius: 20px;
    padding: 1px 8px; font-size: 11px; font-weight: 700;
  }
  .cc-dia-sidebar-lista {
    padding: 8px; max-height: 74vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px;
  }
  .cc-dia-item {
    border: 1px solid var(--borda); border-radius: 9px;
    padding: 9px 10px; background: var(--bg-card);
  }
  .cc-dia-nome {
    font-family: 'IBM Plex Sans', sans-serif; font-size: 13px;
    font-weight: 700; color: var(--d-azul,#0a3d6b); line-height: 1.3;
  }
  .cc-dia-proc {
    font-family: 'IBM Plex Sans', sans-serif; font-size: 11px;
    color: var(--d-cinza,#475569); margin: 3px 0 8px; line-height: 1.35;
  }
  .cc-dia-btn {
    width: 100%; background: var(--d-primary,#0a3d6b); color: #fff; border: none;
    border-radius: 7px; padding: 7px 10px;
    font-family: 'IBM Plex Sans', sans-serif; font-size: 12px;
    font-weight: 600; cursor: pointer; transition: background 0.15s;
  }
  .cc-dia-btn:hover { background: var(--d-brand-2,#0c4a80); }
  @media (max-width: 960px) {
    .cc-layout-outer { flex-direction: column; }
    .cc-dia-sidebar { width: 100%; padding: 16px 24px 0; }
    .cc-dia-sidebar-inner { position: static; }
    .cc-dia-sidebar-lista { max-height: none; }
    .cc-dia-spacer { display: none !important; }
  }

  /* ── BUSCA GLOBAL ──────────────────────────────────────────────────────── */
  .busca-global-item {
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 1px solid var(--d-borda,#f0f4f8);
    background: var(--d-bg-card,white);
    transition: background 0.1s;
  }
  .busca-global-item:last-child { border-bottom: none; }

  /* ── RESPONSIVIDADE TABLET / TOUCH ─────────────────────────────────────── */
  @media (max-width: 1024px) {
    .presc-layout { grid-template-columns: 1fr !important; }
    .presc-left, .presc-right { width: 100% !important; }
    .presc-right { position: static !important; }
  }

  @media (max-width: 900px) {
    /* Botões maiores para touch — mínimo WCAG de 44px */
    button, .btn-acao, .tab-btn, .freq-btn, .opcao-pill {
      min-height: 44px;
    }
    .tab-btn {
      padding: 8px 12px;
      font-size: 13px;
    }
    /* Mapa de leitos: scroll horizontal em telas menores */
    .mapa-leitos-table, #mapa-leitos-container table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

  /* ── DASHBOARD ─────────────────────────────────────────────────────────── */
  .card-indicador {
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.22);
    border-radius: 14px;
    padding: 20px 18px;
    text-align: center;
    color: white;
    font-family: 'IBM Plex Sans', sans-serif;
    transition: background 0.2s, transform 0.2s;
  }
  .card-indicador:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-2px);
  }
  .card-indicador .ind-valor {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
  }
  .card-indicador .ind-titulo {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.9;
    margin-bottom: 3px;
  }
  .card-indicador .ind-sub {
    font-size: 11px;
    opacity: 0.55;
  }

  /* ============================================================
     OTIMIZAÇÃO MOBILE (Chrome/Brave) — 05/11/2026
     1) Overlays FECHADOS não podem custar memória de GPU. Havia ~25 camadas de
        tela cheia (position:fixed + inset:0 + backdrop-filter) sempre montadas
        com opacity:0; no Chrome/Brave do celular isso esgota a memória de
        rasterização e a página "pisca" em branco ao rolar. Fechado =
        visibility:hidden e sem blur; o blur só existe com o modal aberto (.show).
        Aberto, a aparência é a mesma de antes.
     ============================================================ */
  .confirm-overlay, .print-select-overlay {
    visibility: hidden;
    backdrop-filter: none;
    transition: opacity 0.2s, visibility 0s linear 0.2s;
  }
  .confirm-overlay.show, .print-select-overlay.show {
    visibility: visible;
    backdrop-filter: blur(3px);
    transition: opacity 0.2s, visibility 0s;
  }
  /* Modal de consultas do Ambulatório: abre/fecha por style inline (opacity/pointer-events). */
  #amb-consultas-overlay[style*="pointer-events: all"] { backdrop-filter: blur(3px); }

  /* 2) Cabeçalho compacto no celular (antes: ~300 px de 800 entre barra do usuário,
        cabeçalho e barra do módulo). No computador nada muda. */
  @media (max-width: 760px) {
    #fb-user-bar { padding: 3px 12px !important; gap: 8px !important; }
    #fb-user-bar button { min-height: 30px; padding: 2px 12px !important; }
    .app-header { padding: 6px 12px; gap: 10px; box-shadow: none; }
    .app-header img { height: 30px !important; }
    .app-header > div:not(.badge-cirurgia) > div { display: none; }
    .app-header h1 { font-size: 13px !important; margin: 0 !important; }
    .app-header p, .badge-cirurgia { display: none; }
    .dark-toggle-btn { margin-left: auto; min-height: 34px; padding: 4px 10px; }
    #dark-toggle-label { display: none; }
  }