/* ════════════════════════════════════════════════════════════════
   tokens.css — Design tokens da marca Vanessa Fernandes
   Fisioterapia Pélvica · Suíte Clínica offline-first

   Este arquivo é a única fonte de verdade visual da aplicação.
   Tudo que é crítico para leitura e impressão vive aqui, para que
   a suíte continue utilizável se os CDNs estiverem indisponíveis.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ---- Paleta institucional ---- */
  --terracota:      #B86657;
  --terracota-deep: #9E4F42;
  --cafe:           #3D2E28;
  --areia:          #F7F4F0;
  --rosegold:       #D49A8D;
  --branco:         #FFFFFF;

  /* ---- Derivados de apoio (tons de trabalho da interface) ---- */
  --cafe-suave:     #6B564D;
  --cafe-tenue:     #8A7268;
  --linha:          #E3D9D2;
  --linha-forte:    #CBBDB3;
  --areia-fundo:    #EDE6DF;
  --terracota-leve: #FBF3F1;

  /* ---- Cores semânticas de severidade (convenção interna de UI) ---- */
  --sev-ok:      #2F6B4F;  --sev-ok-bg:      #E6F1EB;
  --sev-atencao: #8A6A1F;  --sev-atencao-bg: #F6EEDC;
  --sev-alerta:  #A8541F;  --sev-alerta-bg:  #F8EADC;
  --sev-grave:   #8C2F26;  --sev-grave-bg:   #F6E0DC;

  /* ---- Tipografia ---- */
  --fonte-titulo: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fonte-corpo:  'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

  /* ---- Escala tipográfica ---- */
  --t-xs:   11px;
  --t-sm:   13px;
  --t-base: 14.5px;
  --t-md:   16px;
  --t-lg:   19px;
  --t-xl:   23px;
  --t-2xl:  30px;

  /* ---- Espaçamento ---- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 22px;
  --e-6: 30px;
  --e-7: 42px;

  /* ---- Formas e profundidade ---- */
  --raio-sm: 5px;
  --raio:    9px;
  --raio-lg: 14px;
  --sombra:      0 1px 2px rgba(61,46,40,.05), 0 10px 28px -18px rgba(61,46,40,.22);
  --sombra-alta: 0 2px 6px rgba(61,46,40,.07), 0 18px 40px -20px rgba(61,46,40,.28);

  /* ---- Medidas de impressão A4 ---- */
  --a4-largura-util: 182mm;   /* 210mm - 2 x 14mm de margem */
  --timbre-altura:   18mm;
}

/* ════════════════════════════════════════════════════════════════
   Base — independente de Tailwind.
   Se o CDN não carregar, a aplicação continua legível.
   ════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--areia);
  color: var(--cafe);
  font-family: var(--fonte-corpo);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .titulo { font-family: var(--fonte-titulo); font-weight: 600; }
h1 { font-size: var(--t-2xl); line-height: 1.15; margin: 0 0 var(--e-3); letter-spacing: -.015em; }
h2 { font-size: var(--t-xl); line-height: 1.2;  margin: 0; letter-spacing: -.012em; }
h3 { font-size: var(--t-lg); line-height: 1.28; margin: var(--e-5) 0 var(--e-2); }
h4 { font-size: var(--t-md); line-height: 1.3;  margin: var(--e-4) 0 var(--e-2); }
p  { margin: 0 0 var(--e-3); }
a  { color: var(--terracota-deep); }

/* ---- Utilitários próprios (não dependem do Tailwind) ---- */
.vf-oculto   { display: none !important; }
.vf-so-impr  { display: none; }          /* só aparece no papel */
.no-print    { }                          /* alvo das regras de print.css */

.vf-container { max-width: 1180px; margin: 0 auto; padding: 0 var(--e-5); }

/* ---- Cartão de seção ---- */
.vf-card {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  margin-bottom: var(--e-4);
  overflow: hidden;
}
.vf-card-cab {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-5);
  border-bottom: 1px solid var(--areia-fundo);
  background: linear-gradient(to bottom, #FDFBFA, var(--branco));
}
.vf-card-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--terracota-leve); color: var(--terracota-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); font-weight: 700; font-family: var(--fonte-corpo);
}
.vf-card-corpo { padding: var(--e-4) var(--e-5) var(--e-5); }

/* ---- Campos ---- */
.vf-rotulo {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--cafe-suave);
  margin-bottom: var(--e-1);
}
.vf-campo {
  width: 100%;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  padding: 7px 10px;
  font-family: var(--fonte-corpo);
  font-size: var(--t-base);
  color: var(--cafe);
  transition: border-color .15s, box-shadow .15s;
}
.vf-campo:focus {
  outline: none;
  border-color: var(--terracota);
  box-shadow: 0 0 0 3px rgba(184,102,87,.13);
}
.vf-campo:disabled { background: var(--areia-fundo); color: var(--cafe-tenue); cursor: not-allowed; }
textarea.vf-campo { resize: vertical; min-height: 62px; line-height: 1.55; }

/* ---- Grupos de opção ---- */
.vf-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.vf-opcoes label {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: 999px; padding: 5px 11px;
  font-size: var(--t-sm); color: var(--cafe);
  transition: border-color .13s, background .13s;
}
.vf-opcoes label:hover { border-color: var(--rosegold); }
.vf-opcoes input { accent-color: var(--terracota); width: 14px; height: 14px; flex: none; }
.vf-opcoes label:has(input:checked) { background: var(--terracota-leve); border-color: var(--terracota); }
.vf-opcoes label:has(input:checked) span { font-weight: 600; color: var(--terracota-deep); }
.vf-opcoes input:disabled { cursor: not-allowed; }
.vf-opcoes label:has(input:disabled) { opacity: .45; cursor: not-allowed; }

/* ---- Badge de severidade ---- */
.vf-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-xs); font-weight: 700;
  padding: 4px 11px; border-radius: 999px;
  letter-spacing: .02em; white-space: nowrap;
}
.vf-badge[data-sev="ok"]      { background: var(--sev-ok-bg);      color: var(--sev-ok); }
.vf-badge[data-sev="atencao"] { background: var(--sev-atencao-bg); color: var(--sev-atencao); }
.vf-badge[data-sev="alerta"]  { background: var(--sev-alerta-bg);  color: var(--sev-alerta); }
.vf-badge[data-sev="grave"]   { background: var(--sev-grave-bg);   color: var(--sev-grave); }
.vf-badge[data-sev="neutro"]  { background: var(--areia-fundo);    color: var(--cafe-suave); }

/* ---- Painel de escore ---- */
.vf-escore {
  display: flex; align-items: baseline; gap: var(--e-2);
  background: var(--terracota-leve);
  border: 1px solid #F0DDD7;
  border-radius: var(--raio-sm);
  padding: 10px 15px;
}
.vf-escore-valor { font-family: var(--fonte-titulo); font-size: 26px; font-weight: 600; color: var(--terracota-deep); line-height: 1; }
.vf-escore-max   { font-size: var(--t-sm); color: var(--cafe-suave); }
.vf-escore .vf-badge { margin-left: auto; }

/* ---- Régua EVA ---- */
.vf-eva { display: flex; align-items: center; gap: var(--e-4); }
.vf-eva input[type=range] {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 6px; border-radius: 99px; background: transparent;
}
.vf-eva input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, #6FAE8C 0%, #E3C567 35%, #D98A4A 70%, #C4554A 100%);
}
.vf-eva input[type=range]::-moz-range-track {
  height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, #6FAE8C 0%, #E3C567 35%, #D98A4A 70%, #C4554A 100%);
}
.vf-eva input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: var(--branco); border: 3px solid var(--terracota);
  cursor: pointer; box-shadow: 0 1px 4px rgba(61,46,40,.25);
}
.vf-eva input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--branco); border: 3px solid var(--terracota); cursor: pointer;
}
.vf-eva-valor {
  font-family: var(--fonte-titulo); font-size: var(--t-xl);
  color: var(--terracota-deep); width: 34px; text-align: center; flex: none;
}

/* ---- Abas ---- */
.vf-abas { display: flex; gap: var(--e-6); border-top: 1px solid var(--areia-fundo); overflow-x: auto; }
.vf-aba {
  position: relative; padding: 11px 2px; white-space: nowrap;
  font-family: var(--fonte-corpo); font-size: var(--t-base); font-weight: 500;
  color: var(--cafe-suave); background: none; border: none; cursor: pointer;
  transition: color .15s;
}
.vf-aba:hover { color: var(--cafe); }
.vf-aba[aria-selected="true"] { color: var(--terracota-deep); font-weight: 600; }
.vf-aba[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--terracota); border-radius: 2px 2px 0 0;
}
.vf-aba:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; border-radius: 3px; }

/* ---- Botões ---- */
.vf-btn {
  font-family: var(--fonte-corpo); font-size: var(--t-sm); font-weight: 500;
  padding: 8px 14px; border-radius: var(--raio-sm); cursor: pointer;
  border: 1px solid var(--linha); background: var(--branco); color: var(--cafe);
  transition: background .15s, border-color .15s, color .15s;
}
.vf-btn:hover { background: var(--areia); }
.vf-btn:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }
.vf-btn-primario {
  background: var(--terracota); border-color: var(--terracota);
  color: var(--branco); font-weight: 600;
}
.vf-btn-primario:hover { background: var(--terracota-deep); border-color: var(--terracota-deep); }

/* ---- Avisos ---- */
.vf-aviso {
  border-left: 3px solid var(--terracota);
  background: var(--branco);
  padding: var(--e-3) var(--e-4);
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
  font-size: var(--t-sm); line-height: 1.55;
  box-shadow: var(--sombra);
}
.vf-aviso-titulo {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--terracota-deep); margin-bottom: var(--e-1);
}
.vf-aviso[data-tom="atencao"] { border-left-color: var(--sev-alerta); background: var(--sev-alerta-bg); }
.vf-aviso[data-tom="atencao"] .vf-aviso-titulo { color: var(--sev-alerta); }

/* ---- Rodapé legal ---- */
.vf-rodape-legal {
  font-size: var(--t-xs); line-height: 1.5; color: var(--cafe-tenue);
}

/* ---- Grade responsiva simples (sem depender de Tailwind) ---- */
.vf-grade   { display: grid; gap: var(--e-3) var(--e-4); grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .vf-grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vf-grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vf-grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.vf-col-total { grid-column: 1 / -1; }

/* ---- Acessibilidade ---- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------
   COMPONENTES DOS MÓDULOS 2 A 5
   --------------------------------------------------------------- */

/* ---- Matriz do Wexner ---- */
.vf-wexner { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.vf-wexner th, .vf-wexner td { border: 1px solid var(--linha); padding: 7px 9px; text-align: center; }
.vf-wexner thead th { background: var(--areia); font-weight: 600; line-height: 1.3; vertical-align: bottom; }
.vf-wexner tbody th { text-align: left; font-weight: 500; background: #FDFBFA; }
.vf-wexner-pt { display: inline-block; margin-top: 3px; font-size: var(--t-xs); color: var(--terracota-deep); font-weight: 700; }
.vf-wexner-cel { display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 3px; }
.vf-wexner-cel input { accent-color: var(--terracota); width: 16px; height: 16px; cursor: pointer; }

/* ---- Cartão VIP de Treino ---- */
.vf-cartao-treino {
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-lg);
  box-shadow: var(--sombra-alta); padding: var(--e-5) var(--e-5) var(--e-4);
  max-width: 460px; margin-top: var(--e-4);
}
.cartao-cab { border-bottom: 2px solid var(--terracota); padding-bottom: var(--e-3); margin-bottom: var(--e-4); }
.cartao-etiqueta {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--rosegold); margin-bottom: 3px;
}
.cartao-cab h2 { font-size: var(--t-xl); color: var(--terracota-deep); margin: 0; }
.cartao-lista { margin: 0 0 var(--e-4); display: grid; gap: 0; }
.cartao-lista > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3);
  padding: 7px 0; border-bottom: 1px solid var(--areia-fundo);
}
.cartao-lista dt { font-size: var(--t-sm); color: var(--cafe-suave); }
.cartao-lista dd {
  margin: 0; font-family: var(--fonte-titulo); font-size: var(--t-lg);
  font-weight: 600; color: var(--terracota-deep);
}
.cartao-bloco { margin-bottom: var(--e-3); }
.cartao-bloco h3 { font-size: var(--t-base); color: var(--cafe); margin: 0 0 var(--e-2); }
.cartao-bloco ul { margin: 0; padding-left: 18px; font-size: var(--t-sm); line-height: 1.55; }
.cartao-bloco li { margin-bottom: 4px; }
.cartao-bloco li::marker { color: var(--rosegold); }
.cartao-bloco p { font-size: var(--t-sm); margin: 0; }
.cartao-nota {
  background: var(--terracota-leve); border-left: 3px solid var(--terracota);
  padding: 10px 13px; font-size: var(--t-sm); line-height: 1.5;
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0; margin-bottom: var(--e-3);
}
.cartao-rodape {
  border-top: 1px solid var(--areia-fundo); padding-top: var(--e-2); margin-top: var(--e-4);
  font-size: 10.5px; line-height: 1.45; color: var(--cafe-tenue); text-align: center;
}

/* ---- Habit tracker ---- */
.vf-tracker { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.vf-tracker th, .vf-tracker td { border: 1px solid var(--linha); padding: 6px; text-align: center; }
.vf-tracker thead th { background: var(--areia); font-weight: 600; width: 56px; }
.vf-tracker thead th:first-child { width: auto; text-align: left; padding-left: 10px; }
.vf-tracker td:first-child { padding: 3px; }
.vf-tracker-rotulo { border: none !important; box-shadow: none !important; font-size: var(--t-sm); }
.vf-tracker-cel { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.vf-tracker-cel input { accent-color: var(--terracota); width: 17px; height: 17px; cursor: pointer; }

/* ---- Âncora de hábito ---- */
.vf-ancora-saida {
  margin-top: var(--e-3); padding: var(--e-3) var(--e-4);
  background: var(--terracota-leve); border-left: 3px solid var(--terracota);
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
  font-family: var(--fonte-titulo); font-size: var(--t-lg); color: var(--terracota-deep);
  line-height: 1.4;
}

/* ---- Mensagens de WhatsApp ---- */
.vf-msg { border: 1px solid var(--linha); border-radius: var(--raio-sm); margin-bottom: var(--e-3); overflow: hidden; }
.vf-msg-cab {
  display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
  padding: 9px 13px; background: var(--areia); border-bottom: 1px solid var(--linha);
}
.vf-msg-obj { font-size: var(--t-xs); color: var(--cafe-tenue); flex: 1 1 auto; }
.vf-msg-cab .vf-btn { margin-left: auto; }
.vf-msg-texto {
  margin: 0; padding: var(--e-3) var(--e-4); white-space: pre-wrap;
  font-family: var(--fonte-corpo); font-size: var(--t-sm); line-height: 1.6; background: var(--branco);
}

/* ---- Seleção de cartilhas ---- */
.vf-cartilha-op {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 13px 15px;
  background: var(--branco); transition: border-color .15s, background .15s;
}
.vf-cartilha-op:hover { border-color: var(--rosegold); }
.vf-cartilha-op.sel { border-color: var(--terracota); background: var(--terracota-leve); }
.vf-cartilha-titulo { font-family: var(--fonte-titulo); font-size: var(--t-md); color: var(--cafe); line-height: 1.25; }
.vf-cartilha-resumo { font-size: var(--t-sm); color: var(--cafe-suave); margin-top: 3px; }

/* ---- Kit de orientações ---- */
.vf-kit { margin-top: var(--e-4); }
.vf-kit-cab {
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: var(--e-4) var(--e-5); margin-bottom: var(--e-3); box-shadow: var(--sombra);
}
.vf-kit-cab h2 { font-size: var(--t-2xl); color: var(--cafe); margin: 4px 0 0; }
.vf-kit-obs {
  background: var(--terracota-leve); border-left: 3px solid var(--terracota);
  padding: var(--e-3) var(--e-4); border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
  margin-bottom: var(--e-3); line-height: 1.6;
}
.vf-cartilha {
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: var(--e-4) var(--e-5); margin-bottom: var(--e-3); box-shadow: var(--sombra);
}
.vf-cartilha h3 {
  font-size: var(--t-xl); color: var(--terracota-deep); margin: 0 0 var(--e-3);
  padding-bottom: var(--e-2); border-bottom: 1px solid var(--areia-fundo);
}
.vf-cartilha-bloco { margin-bottom: var(--e-3); }
.vf-cartilha-bloco h4 { font-family: var(--fonte-corpo); font-size: var(--t-base); font-weight: 700; margin: 0 0 5px; }
.vf-cartilha-bloco p { font-size: var(--t-base); line-height: 1.6; margin: 0 0 var(--e-2); }
.vf-cartilha-bloco ul { list-style: disc; margin: 5px 0 var(--e-2); padding-left: 20px; }
.vf-cartilha-bloco li { font-size: var(--t-base); line-height: 1.55; margin-bottom: 4px; }
.vf-cartilha-bloco li::marker { color: var(--rosegold); }
.vf-cartilha-nota {
  background: #FAF6F3; border-left: 3px solid var(--rosegold);
  padding: 10px 14px; font-size: var(--t-sm); font-style: italic;
  color: var(--cafe-suave); border-radius: 0 var(--raio-sm) var(--raio-sm) 0; margin: var(--e-2) 0 0 !important;
}
.vf-vazio {
  background: var(--branco); border: 1px dashed var(--linha-forte); border-radius: var(--raio);
  padding: var(--e-6) var(--e-5); text-align: center; color: var(--cafe-suave); margin-top: var(--e-4);
}

/* ---- Laudo ---- */
.vf-laudo-ident { margin: var(--e-4) 0 0; display: grid; gap: 0; }
.vf-laudo-ident > div {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  padding: 7px 0; border-bottom: 1px solid var(--areia-fundo); gap: var(--e-3);
}
.vf-laudo-ident dt { font-size: var(--t-xs); font-weight: 600; letter-spacing: .05em;
                     text-transform: uppercase; color: var(--cafe-suave); }
.vf-laudo-ident dd { margin: 0; font-size: var(--t-base); }

.vf-tabela-escores { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.vf-tabela-escores th, .vf-tabela-escores td {
  border: 1px solid var(--linha); padding: 8px 11px; text-align: left; vertical-align: middle;
}
.vf-tabela-escores thead th { background: var(--areia); font-weight: 600; font-size: var(--t-xs);
                              letter-spacing: .04em; text-transform: uppercase; color: var(--cafe-suave); }
.vf-tabela-escores tbody th { font-weight: 500; background: #FDFBFA; }
.vf-tabela-escores td input { border: none; box-shadow: none; padding: 2px 4px; }

.vf-lista-condutas { margin: var(--e-3) 0 0; padding-left: 20px; list-style: disc; }
.vf-lista-condutas li { margin-bottom: 4px; }

/* ---------------------------------------------------------------
   ATENDIMENTO NA SALA — recolhimento, progresso e modo essencial

   A ficha completa tem mais de duzentos campos. Deixá-los todos
   abertos obriga a olhar para a tela em vez de olhar para a pessoa.
   Estas regras existem para reduzir o que está à vista.
   --------------------------------------------------------------- */

/* ---- Barra de modo ---- */
.vf-barra-modo {
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-4); box-shadow: var(--sombra);
}

/* ---- Cabeçalho de seção como botão ---- */
button.vf-card-cab {
  width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; font-size: inherit; color: inherit;
  border: none; border-bottom: 1px solid var(--areia-fundo);
}
button.vf-card-cab:hover { background: var(--areia); }
button.vf-card-cab:focus-visible { outline: 2px solid var(--terracota); outline-offset: -2px; }

.vf-chevron {
  margin-left: var(--e-2); font-size: 17px; line-height: 1;
  color: var(--cafe-tenue); transition: transform .16s; flex: none;
}
.vf-card[data-aberto="sim"] .vf-chevron { transform: rotate(180deg); }

/* Corpo recolhido — só na tela. */
.vf-card[data-aberto="nao"] .vf-card-corpo { display: none; }

/* ---- Indicador de preenchimento ---- */
.vf-progresso {
  margin-left: auto; font-size: var(--t-xs); font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums; flex: none;
  background: var(--areia-fundo); color: var(--cafe-tenue);
}
.vf-progresso[data-estado="parcial"]  { background: var(--sev-atencao-bg); color: var(--sev-atencao); }
.vf-progresso[data-estado="completo"] { background: var(--sev-ok-bg);      color: var(--sev-ok); }

/* ---- Modo essencial ----
   Recolhido na tela, presente no papel: o registro impresso é o
   documento clínico e não pode omitir campo preenchido. */
.vf-fora-do-essencial { display: none; }

@media print {
  .vf-fora-do-essencial { display: block !important; }
  .vf-card[data-aberto="nao"] .vf-card-corpo { display: block !important; }
  button.vf-card-cab { border-bottom: 0.5pt solid #EFE7E1 !important; }
  .vf-chevron, .vf-progresso, .vf-barra-modo { display: none !important; }
}

/* ----------------------------------------------------------------
   #folha-impressao existe só para a paginação: o timbre e o rodapé
   moram no thead/tfoot dela, que é o que o Chrome repete por página.
   Na tela ela não deve introduzir layout de tabela nenhum.
   ---------------------------------------------------------------- */
#folha-impressao,
#folha-impressao > thead,
#folha-impressao > tbody,
#folha-impressao > tfoot,
#folha-impressao > * > tr,
#folha-impressao > * > tr > th,
#folha-impressao > * > tr > td {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: inherit;
  font-weight: inherit;
}
/* A marca oficial não é quadrada. O preflight do Tailwind aplica
   img{height:auto}, que vence o atributo height do HTML — por isso a
   altura precisa vir de regra de classe, não de atributo. */
.timbre-logo-img { height: 30px; width: auto; }
.marca-tela      { height: 42px; width: auto; }

/* EVA ainda não medida: régua apagada até a primeira marcação. */
.vf-eva-vazia input[type=range] { opacity: .4; }
.vf-eva-limpar { margin-left: var(--e-2); padding: 2px 8px; font-size: var(--t-xs); border: 1px solid var(--linha);
  border-radius: var(--raio-sm); background: var(--branco); color: var(--cafe-suave); cursor: pointer; }
.vf-eva-limpar:hover { border-color: var(--terracota); color: var(--terracota-deep); }