/* Frente H (melhorias 3). Usa as variáveis de cor de estilo.css. */
.clinica-corpo { margin-top: 8px; }
.clinica-corpo h4 { margin: 16px 0 8px; font-weight: 600; }
.clinica-form { display: grid; gap: 4px; max-width: 640px; margin: 8px 0 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--raio); background: var(--bubble-in); }
.clinica-form textarea { width: 100%; min-height: 72px; resize: vertical; border: 1px solid var(--line); border-radius: var(--raio); background: var(--surface); color: var(--text); padding: 10px 12px; font: inherit; }
.clinica-contador { justify-self: end; margin-top: -8px; font-size: 12px; }
.clinica-resumo { max-width: 320px; overflow-wrap: anywhere; }
.clinica-lista { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 8px; }
.clinica-lista li { border: 1px solid var(--line); border-radius: var(--raio); padding: 8px 12px; background: var(--surface); }
.clinica-lista li .botao { margin-top: 6px; }
.dialogo-clinica { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
.dialogo-clinica section + section { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
.dialogo-clinica h3 { font-weight: 600; margin: 12px 0 4px; }
@media (max-width: 640px) {
  .clinica-resumo { max-width: 160px; }
  .tabela .acoes-linha { display: flex; flex-wrap: wrap; gap: 4px; }
}