teste2 / index.html
Cyrofranklin's picture
Add 3 files
086c65c verified
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anestesia em Pacientes Hepáticos - Dr. Cyro Vieira</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.slide {
display: none;
min-height: 100vh;
padding: 2rem;
}
.active {
display: block;
}
.progress-container {
width: 100%;
height: 8px;
background: #e0e0e0;
}
.progress-bar {
height: 8px;
background: #3b82f6;
width: 0%;
}
.chart-container {
width: 100%;
height: 300px;
margin: 20px auto;
}
.flowchart {
display: flex;
flex-direction: column;
align-items: center;
}
.flow-step {
padding: 15px;
border: 2px solid #3b82f6;
border-radius: 8px;
margin: 10px;
width: 80%;
text-align: center;
background-color: #f8fafc;
}
.flow-arrow {
font-size: 24px;
color: #3b82f6;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<div class="progress-container fixed top-0 left-0 z-50">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="fixed bottom-10 right-10 z-50 flex space-x-4">
<button onclick="prevSlide()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-full shadow-lg transition duration-300">
<i class="fas fa-arrow-left"></i>
</button>
<button onclick="nextSlide()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-full shadow-lg transition duration-300">
<i class="fas fa-arrow-right"></i>
</button>
</div>
<!-- Slides -->
<div class="slides-container">
<!-- Slide 1 - Title -->
<div class="slide active fade-in">
<div class="flex flex-col items-center justify-center h-full bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl p-8 shadow-xl">
<img src="https://img.icons8.com/color/96/000000/liver.png" alt="Liver Icon" class="mb-6">
<h1 class="text-5xl font-bold text-blue-800 mb-6 text-center">Anestesia em Pacientes Hepáticos</h1>
<h2 class="text-3xl font-semibold text-gray-700 mb-8 text-center">Protocolos e Abordagens no HUWC-HSC</h2>
<div class="bg-white p-6 rounded-lg shadow-md w-full max-w-2xl">
<p class="text-xl text-gray-700 mb-2"><i class="fas fa-user-md text-blue-500 mr-2"></i> <span class="font-semibold">Apresentação:</span> Dr. Cyro Vieira</p>
<p class="text-xl text-gray-700"><i class="fas fa-calendar-alt text-blue-500 mr-2"></i> <span class="font-semibold">Data:</span> <span id="currentDate"></span></p>
</div>
</div>
</div>
<!-- Slide 2 - Objectives -->
<div class="slide fade-in">
<div class="bg-white rounded-xl p-8 h-full shadow-xl">
<h2 class="text-3xl font-bold text-blue-800 mb-8 text-center border-b-2 border-blue-200 pb-4">Objetivos da Apresentação</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-blue-50 p-6 rounded-lg shadow">
<h3 class="text-2xl font-semibold text-blue-700 mb-4 flex items-center">
<i class="fas fa-bullseye mr-3"></i> Objetivos Gerais
</h3>
<ul class="space-y-3 text-gray-700 text-lg">
<li class="flex items-start"><i class="fas fa-check-circle text-blue-500 mr-2 mt-1"></i> Compreender a fisiopatologia hepática relevante para anestesia</li>
<li class="flex items-start"><i class="fas fa-check-circle text-blue-500 mr-2 mt-1"></i> Avaliar riscos anestésicos em pacientes hepáticos</li>
<li class="flex items-start"><i class="fas fa-check-circle text-blue-500 mr-2 mt-1"></i> Conhecer as particularidades do manejo perioperatório</li>
</ul>
</div>
<div class="bg-indigo-50 p-6 rounded-lg shadow">
<h3 class="text-2xl font-semibold text-indigo-700 mb-4 flex items-center">
<i class="fas fa-clipboard-list mr-3"></i> Objetivos Específicos
</h3>
<ul class="space-y-3 text-gray-700 text-lg">
<li class="flex items-start"><i class="fas fa-check-circle text-indigo-500 mr-2 mt-1"></i> Protocolos de avaliação pré-operatória</li>
<li class="flex items-start"><i class="fas fa-check-circle text-indigo-500 mr-2 mt-1"></i> Escolha de agentes anestésicos</li>
<li class="flex items-start"><i class="fas fa-check-circle text-indigo-500 mr-2 mt-1"></i> Monitorização intraoperatória</li>
<li class="flex items-start"><i class="fas fa-check-circle text-indigo-500 mr-2 mt-1"></i> Cuidados pós-operatórios</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Slide 3 - Epidemiology -->
<div class="slide fade-in">
<div class="bg-white rounded-xl p-8 h-full shadow-xl">
<h2 class="text-3xl font-bold text-blue-800 mb-8 text-center">Epidemiologia das Doenças Hepáticas</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
<div>
<h3 class="text-2xl font-semibold text-gray-700 mb-4 flex items-center">
<i class="fas fa-chart-line text-blue-500 mr-3"></i> Prevalência Global
</h3>
<div class="bg-gray-50 p-4 rounded-lg shadow">
<p class="text-gray-700 mb-4">As doenças hepáticas afetam aproximadamente 844 milhões de pessoas mundialmente, com cirrose sendo responsável por mais de 1 milhão de mortes anualmente.</p>
<div class="chart-container">
<canvas id="epidemiologyChart"></canvas>
</div>
</div>
</div>
<div>
<h3 class="text-2xl font-semibold text-gray-700 mb-4 flex items-center">
<i class="fas fa-procedures text-blue-500 mr-3"></i> Implicações Anestésicas
</h3>
<div class="bg-gray-50 p-4 rounded-lg shadow">
<ul class="space-y-3 text-gray-700">
<li class="flex items-start"><i class="fas fa-exclamation-triangle text-yellow-500 mr-2 mt-1"></i> 8-10% dos pacientes cirróticos necessitam de cirurgia anualmente</li>
<li class="flex items-start"><i class="fas fa-exclamation-triangle text-yellow-500 mr-2 mt-1"></i> Mortalidade perioperatória pode chegar a 50% em Child C</li>
<li class="flex items-start"><i class="fas fa-exclamation-triangle text-yellow-500 mr-2 mt-1"></i> Complicações em até 30% dos casos</li>
</ul>
<div class="mt-4 p-4 bg-blue-50 rounded-lg">
<p class="text-blue-800 font-semibold"><i class="fas fa-lightbulb text-blue-500 mr-2"></i> A avaliação cuidadosa é essencial para reduzir morbimortalidade</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 4 - Liver Functions -->
<div class="slide fade-in">
<div class="bg-white rounded-xl p-8 h-full shadow-xl">
<h2 class="text-3xl font-bold text-blue-800 mb-8 text-center">Funções Hepáticas Relevantes para Anestesia</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gradient-to-b from-blue-50 to-blue-100 p-6 rounded-xl shadow hover:shadow-lg transition duration-300">
<div class="text-blue-600 text-4xl mb-4">
<i class="fas fa-pills"></i>
</div>
<h3 class="text-xl font-bold text-blue-800 mb-3">Metabolismo de Drogas</h3>
<p class="text-gray-700">O fígado metaboliza a maioria dos agentes anestésicos através das enzimas do citocromo P450.</p>
</div>
<div class="bg-gradient-to-b from-green-50 to-green-100 p-6 rounded-xl shadow hover:shadow-lg transition duration-300">
<div class="text-green-600 text-4xl mb-4">
<i class="fas fa-tint"></i>
</div>
<h3 class="text-xl font-bold text-green-800 mb-3">Síntese de Proteínas</h3>
<p class="text-gray-700">Produz albumina e fatores de coagulação (II, V, VII, IX, X), essenciais para ligação de drogas e hemostasia.</p>
</div>
<div class="bg-gradient-to-b from-purple-50 to-purple-100 p-6 rounded-xl shadow hover:shadow-lg transition duration-300">
<div class="text-purple-600 text-4xl mb-4">
<i class="fas fa-filter"></i>
</div>
<h3 class="text-xl font-bold text-purple-800 mb-3">Desintoxicação</h3>
<p class="text-gray-700">Remove amônia, bilirrubina e outras toxinas que podem afetar a função cerebral.</p>
</div>
<div class="bg-gradient-to-b from-yellow-50 to-yellow-100 p-6 rounded-xl shadow hover:shadow-lg transition duration-300">
<div class="text-yellow-600 text-4xl mb-4">
<i class="fas fa-sugar-lump"></i>
</div>
<h3 class="text-xl font-bold text-yellow-800 mb-3">Metabolismo Energético</h3>
<p class="text-gray-700">Gliconeogênese, armazenamento de glicogênio e metabolismo lipídico.</p>
</div>
<div class="bg-gradient-to-b from-red-50 to-red-100 p-6 rounded-xl shadow hover:shadow-lg transition duration-300">
<div class="text-red-600 text-4xl mb-4">
<i class="fas fa-water"></i>
</div>
<h3 class="text-xl font-bold text-red-800 mb-3">Volume Sanguíneo</h3>
<p class="text-gray-700">Armazena ~10% do volume sanguíneo total e regula o fluxo portal.</p>
</div>
<div class="bg-gradient-to-b from-indigo-50 to-indigo-100 p-6 rounded-xl shadow hover:shadow-lg transition duration-300">
<div class="text-indigo-600 text-4xl mb-4">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="text-xl font-bold text-indigo-800 mb-3">Função Imune</h3>
<p class="text-gray-700">Células de Kupffer filtram bactérias e endotoxinas da circulação portal.</p>
</div>
</div>
</div>
</div>
<!-- Slide 5 - Child-Pugh Classification -->
<div class="slide fade-in">
<div class="bg-white rounded-xl p-8 h-full shadow-xl">
<h2 class="text-3xl font-bold text-blue-800 mb-8 text-center">Classificação de Child-Pugh</h2>
<div class="bg-blue-50 p-6 rounded-lg shadow mb-8">
<p class="text-blue-800 text-lg mb-4"><i class="fas fa-info-circle text-blue-500 mr-2"></i> Sistema de escore que avalia a gravidade da doença hepática e prediz mortalidade perioperatória.</p>
<div class="overflow-x-auto">
<table class="min-w-full bg-white rounded-lg overflow-hidden shadow">
<thead class="bg-blue-600 text-white">
<tr>
<th class="py-3 px-4 text-left">Parâmetro</th>
<th class="py-3 px-4 text-center">1 ponto</th>
<th class="py-3 px-4 text-center">2 pontos</th>
<th class="py-3 px-4 text-center">3 pontos</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 font-medium">Bilirrubina (mg/dL)</td>
<td class="py-3 px-4 text-center">&lt;2</td>
<td class="py-3 px-4 text-center">2-3</td>
<td class="py-3 px-4 text-center">&gt;3</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 font-medium">Albumina (g/dL)</td>
<td class="py-3 px-4 text-center">&gt;3.5</td>
<td class="py-3 px-4 text-center">2.8-3.5</td>
<td class="py-3 px-4 text-center">&lt;2.8</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 font-medium">INR</td>
<td class="py-3 px-4 text-center">&lt;1.7</td>
<td class="py-3 px-4 text-center">1.7-2.3</td>
<td class="py-3 px-4 text-center">&gt;2.3</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 font-medium">Ascite</td>
<td class="py-3 px-4 text-center">Ausente</td>
<td class="py-3 px-4 text-center">Leve-moderada</td>
<td class="py-3 px-4 text-center">Refratária</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 font-medium">Encefalopatia</td>
<td class="py-3 px-4 text-center">Ausente</td>
<td class="py-3 px-4 text-center">Grau I-II</td>
<td class="py-3 px-4 text-center">Grau III-IV</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-green-50 p-4 rounded-lg shadow text-center">
<h3 class="text-xl font-bold text-green-800 mb-2">Child A (5-6 pontos)</h3>
<p class="text-gray-700">Mortalidade perioperatória: 10%</p>
<p class="text-gray-700">Sobrevida em 1 ano: 100%</p>
</div>
<div class="bg-yellow-50 p-4 rounded-lg shadow text-center">
<h3 class="text-xl font-bold text-yellow-800 mb-2">Child B (7-9 pontos)</h3>
<p class="text-gray-700">Mortalidade perioperatória: 30%</p>
<p class="text-gray-700">Sobrevida em 1 ano: 80%</p>
</div>
<div class="bg-red-50 p-4 rounded-lg shadow text-center">
<h3 class="text-xl font-bold text-red-800 mb-2">Child C (10-15 pontos)</h3>
<p class="text-gray-700">Mortalidade perioperatória: 50-80%</p>
<p class="text-gray-700">Sobrevida em 1 ano: 45%</p>
</div>
</div>
</div>
</div>
<!-- Slide 6 - MELD Score -->
<div class="slide fade-in">
<div class="bg-white rounded-xl p-8 h-full shadow-xl">
<h2 class="text-3xl font-bold text-blue-800 mb-8 text-center">Escore MELD (Model for End-Stage Liver Disease)</h2>
<div class="bg-indigo-50 p-6 rounded-lg shadow mb-8">
<p class="text-indigo-800 text-lg mb-4"><i class="fas fa-calculator text-indigo-500 mr-2"></i> MELD = 3,78 × ln(bilirrubina [mg/dL]) + 11,2 × ln(INR) + 9,57 × ln(creatinina [mg/dL]) + 6,43</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-semibold text-gray-700 mb-4">Interpretação do MELD</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="bg-green-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1">1</div>
<div>
<p class="font-medium text-gray-800">MELD &lt;10</p>
<p class="text-gray-600">Baixo risco perioperatório (mortalidade ~5%)</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-yellow-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1">2</div>
<div>
<p class="font-medium text-gray-800">MELD 10-15</p>
<p class="text-gray-600">Risco intermediário (mortalidade ~15%)</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1">3</div>
<div>
<p class="font-medium text-gray-800">MELD 16-20</p>
<p class="text-gray-600">Alto risco (mortalidade ~25%)</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1">4</div>
<div>
<p class="font-medium text-gray-800">MELD &gt;20</p>
<p class="text-gray-600">Risco muito alto (mortalidade &gt;50%)</p>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold text-gray-700 mb-4">Vantagens do MELD</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start"><i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i> Objetivo (baseado em exames laboratoriais)</li>
<li class="flex items-start"><i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i> Melhor preditor de mortalidade em 3 meses</li>
<li class="flex items-start"><i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i> Útil para priorização de transplante</li>
<li class="flex items-start"><i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i> Não depende de achados subjetivos</li>
</ul>
<div class="mt-6 p-4 bg-blue-100 rounded-lg">
<p class="text-blue-800"><i class="fas fa-exclamation-triangle text-blue-500 mr-2"></i> <strong>Limitação:</strong> Não considera hipertensão portal ou encefalopatia</p>
</div>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow border border-blue-200">
<h3 class="text-xl font-semibold text-blue-700 mb-4">Recomendações Baseadas no MELD</h3>
<div class="flowchart">
<div class="flow-step">MELD &lt;10 → Procedimento geralmente seguro</div>
<div class="flow-arrow"></div>
<div class="flow-step">MELD 10-15 → Avaliar risco-benefício cuidadosamente</div>
<div class="flow-arrow"></div>
<div class="flow-step">MELD &gt;15 → Considerar adiar cirurgia eletiva</div>
<div class="flow-arrow"></div>
<div class="flow-step">MELD &gt;25 → Evitar cirurgias eletivas</div>
</div>
</div>
</div>
</div>
<!-- Slide 7 - Preoperative Evaluation -->
<div class="slide fade-in">
<div class="bg-white rounded-xl p-8 h-full shadow-xl">
<h2 class="text-3xl font-bold text-blue-800 mb-8 text-center">Avaliação Pré-Operatória</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div>
<h3 class="text-2xl font-semibold text-gray-700 mb-4 flex items-center">
<i class="fas fa-clipboard-check text-blue-500 mr-3"></i> Componentes Essenciais
</h3>
<div class="bg-gray-50 p-6 rounded-lg shadow">
<ul class="space-y-4 text-gray-700">
<li class="flex items-start">
<span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">1</span>
<span>História completa e exame físico (buscar sinais de hipertensão portal, encefalopatia)</span>
</li>
<li class="flex items-start">
<span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">2</span>
<span>Classificação Child-Pugh e cálculo do MELD</span>
</li>
<li class="flex items-start">
<span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">3</span>
<span>Exames laboratoriais: hemograma, coagulograma, função hepática, eletrólitos, creatinina</span>
</li>
<li class="flex items-start">
<span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">4</span>
<span>Avaliação cardiovascular (ECG, ecocardiograma se indicado)</span>
</li>
<li class="flex items-start">
<span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">5</span>
<span>Avaliação pulmonar (gasometria, espirometria se cirrose)</span>
</li>
<li class="flex items-start">
<span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">6</span>
<span>Endoscopia digestiva alta (rastreio de varizes)</span>
</li>
</ul>
</div>
</div>
<div>
<h3 class="text-2xl font-semibold text-gray-700 mb-4 flex items-center">
<i class="fas fa-exclamation-triangle text-red-500 mr-3"></i> Fatores de Alto Risco
</h3>
<div class="bg-red-50 p-6 rounded-lg shadow">
<div class="space-y-4">
<div class="flex items-start">
<div class="bg-red-100 text-red-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1">
<i class="fas fa-skull-crossbones"></i>
</div>
<div>
<p class="font-bold text-red-800">Child-Pugh C ou MELD &gt;15</p>
<p class="text-gray-700">Mortalidade perioperatória significativamente aumentada</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-red-100 text-red-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1">
<i class="fas fa-tint"></i>
</div>
<div>
<p class="font-bold text-red-800">Hiponatremia &lt;130 mEq/L</p>
<p class="text-gray-700">Preditor independente de mortalidade</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-red-100 text-red-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1">
<i class="fas fa-brain"></i>
</div>
<div>
<p class="font-bold text-red-800">Encefalopatia hepática</p>
<p class="text-gray-700">Aumenta risco de complicações neurológicas</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-red-100 text-red-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1">
<i class="fas fa-heartbeat"></i>
</div>
<div>
<p class="font-bold text-red-800">Cardiomiopatia cirrótica</p>
<p class="text-gray-700">Risco aumentado de insuficiência cardíaca</p>
</div>
</div>
</div>
<div class="mt-6 p-4 bg-white rounded-lg border border-red-200">
<p class="text-red-800 font-semibold"><i class="fas fa-lightbulb text-red-500 mr-2"></i> Pacientes com estes fatores exigem avaliação multidisciplinar e otimização pré-operatória</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 8 - Preoperative Optimization -->
<div class="slide fade-in">
<div class="bg-white rounded-xl p-8 h-full shadow-xl">
<h2 class="text-3xl font-bold text-blue-800 mb-8 text-center">Otimização Pré-Operatória</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="text-2xl font-semibold text-gray-700 mb-4 flex items-center">
<i class="fas fa-flask text-green-500 mr-3"></i> Correção de Anormalidades Laboratoriais
</h3>
<div class="bg-green-50 p-6 rounded-lg shadow">
<ul class="space-y-4 text-gray-700">
<li class="flex items-start">
<span class="bg-green-100 text-green-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">1</span>
<span><strong>Coagulopatia:</strong> Vitamina K (5-10mg IV), FFP (10-15mL/kg), PCC se INR&gt;1.5</span>
</li>
<li class="flex items-start">
<span class="bg-green-100 text-green-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">2</span>
<span><strong>Trombocitopenia:</strong> Transfusão de plaquetas se &lt;50.000/mm³</span>
</li>
<li class="flex items-start">
<span class="bg-green-100 text-green-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">3</span>
<span><strong>Anemia:</strong> Transfusão se Hb&lt;7-8g/dL (avaliar risco de sobrecarga volêmica)</span>
</li>
<li class="flex items-start">
<span class="bg-green-100 text-green-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">4</span>
<span><strong>Hiponatremia:</strong> Correção lenta (não mais que 6-8 mEq/L/dia)</span>
</li>
<li class="flex items-start">
<span class="bg-green-100 text-green-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">5</span>
<span><strong>Hipoalbuminemia:</strong> Albumina humana 20% se &lt;2,5g/dL</span>
</li>
</ul>
</div>
</div>
<div>
<h3 class="text-2xl font-semibold text-gray-700 mb-4 flex items-center">
<i class="fas fa-procedures text-blue-500 mr-3"></i> Manejo de Complicações da Cirrose
</h3>
<div class="bg-blue-50 p-6 rounded-lg shadow">
<ul class="space-y-4 text-gray-700">
<li class="flex items-start">
<span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">1</span>
<span><strong>Ascite:</strong> Paracentese pré-operatória se volumosa (associada a albumina 6-8g/L removido)</span>
</li>
<li class="flex items-start">
<span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">2</span>
<span><strong>Encefalopatia:</strong> Lactulose e rifaximina, evitar sedativos</span>
</li>
<li class="flex items-start">
<span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">3</span>
<span><strong>Varizes:</strong> Beta-bloqueadores não seletivos (propranolol, carvedilol)</span>
</li>
<li class="flex items-start">
<span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">4</span>
<span><strong>Infecção:</strong> Antibioticoprofilaxia em cirurgias de alto risco</span>
</li>
<li class="flex items-start">
<span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">5</span>
<span><strong>Desnutrição:</strong> Suplementação nutricional (35-40 kcal/kg/dia, 1,2-1,5g proteína/kg/dia)</span>
</li>
</ul>
</div>
</div>
</div>
<div class="mt-8 bg-yellow-50 p-6 rounded-lg shadow">
<h3 class="text-2xl font-semibold text-yellow-800 mb-4 flex items-center">
<i class="fas fa-clock text-yellow-500 mr-3"></i> Timing Cirúrgico
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded-lg shadow text-center">
<p class="font-bold text-green-600">Eletiva</p>
<p class="text-gray-700">Apenas após otimização completa (Child A/B, MELD&lt;15)</p>
</div>
<div class="bg-white p-4 rounded-lg shadow text-center">
<p class="font-bold text-orange-600">Urgente</p>
<p class="text-gray-700">Avaliar risco-benefício, otimizar no perioperatório</p>
</div>
<div class="bg-white p-4 rounded-lg shadow text-center">
<p class="font-bold text-red-600">Emergência</p>
<p class="text-gray-700">Manejo agressivo das complicações durante cirurgia</p>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 9 - Anesthetic Considerations -->
<div class="slide fade-in">
<div class="bg-white rounded-xl p-8 h-full shadow-xl">
<h2 class="text-3xl font-bold text-blue-800 mb-8 text-center">Considerações Anestésicas em Pacientes Hepáticos</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div>
<h3 class="text-2xl font-semibold text-gray-700 mb-4 flex items-center">
<i class="fas fa-syringe text-purple-500 mr-3"></i> Farmacologia Anestésica Alterada
</h3>
<div class="bg-purple-50 p-6 rounded-lg shadow">
<div class="mb-6">
<h4 class="text-lg font-bold text-purple-800 mb-2">Alterações Farmacocinéticas</h4>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start"><i class="fas fa-arrow-right text-purple-500 mr-2 mt-1"></i> ↑ Volume de distribuição (↓ albumina, ascite)</li>
<li class="flex items-start"><i class="fas fa-arrow-right text-purple-500 mr-2 mt-1"></i> ↓ Ligação proteica (↑ fração livre de drogas)</li>
<li class="flex items-start"><i class="fas fa-arrow-right text-purple-500 mr-2 mt-1"></i> ↓ Metabolismo hepático (↓ atividade enzimática)</li>
<li class="flex items-start"><i class="fas fa-arrow-right text-purple-500 mr-2 mt-1"></i> ↓ Clearance (↓ fluxo sanguíneo hepático)</li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold text-purple-800 mb-2">Alterações Farmacodinâmicas</h4>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start"><i class="fas fa-brain text-purple-500 mr-2 mt-1"></i> ↑ Sensibilidade a sedativos (encefalopatia)</li>
<li class="flex items-start"><i class="fas fa-heart text-purple-500 mr-2 mt-1"></i> ↓ Resposta cardiovascular (cardiomiopatia cirrótica)</li>
<li class="flex items-start"><i class="fas fa-lungs text-purple-500 mr-2 mt-1"></i> ↑ Shunt pulmonar (HPS)</li>
</ul>
</div>
</div>
</div>
<div>
<h3 class="text-2xl font-semibold text-gray-700 mb-4 flex items-center">
<i class="fas fa-heartbeat text-red-500 mr-3"></i> Considerações Hemodinâmicas
</h3>
<div class="bg-red-50 p-6 rounded-lg shadow">
<div class="mb-6">
<h4 class="text-lg font-bold text-red-800 mb-2">Circulação Hiperdinâmica</h4>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start"><i class="fas fa-tachometer-alt text-red-500 mr-2 mt-1"></i> ↑ Débito cardíaco (2-3x normal)</li>
<li class="flex items-start"><i class="fas fa-water text-red-500 mr-2 mt-1"></i> ↓ Resistência vascular sistêmica</li>
<li class="flex items-start"><i class="fas fa-vial text-red-500 mr-2 mt-1"></i> ↓ Pressão de perfusão hepática</li>
<li class="flex items-start"><i class="fas fa-exchange-alt text-red-500 mr-2 mt-1"></i> ↑ Shunt portossistêmico</li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold text-red-800 mb-2">Implicações Anestésicas</h4>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start"><i class="fas fa-exclamation-triangle text-red-500 mr-2 mt-1"></i> Hipotensão marcada com indução</li>
<li class="flex items-start"><i class="fas fa-exclamation-triangle text-red-500 mr-2 mt-1"></i> Resposta exagerada a vasopressores</li>
<li class="flex items-start"><i class="fas fa-exclamation-triangle text-red-500 mr-2 mt-1"></i> Risco de isquemia hepática</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-8 bg-blue-50 p-6 rounded-lg shadow">
<h3 class="text-2xl font-semibold text-blue-800 mb-4 flex items-center">
<i class="fas fa-balance-scale text-blue-500 mr-3"></i> Princípios Gerais de Manejo
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-bold text-blue-700 mb-2">Doses</h4>
<p class="text-gray-700">Reduzir doses de indutores e opioides em 30-50%</p>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-bold text-blue-700 mb-2">Monitorização</h4>
<p class="text-gray-700">Considerar acesso arterial e cateter venoso central</p>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-bold text-blue-700 mb-2">Hidratação</h4>
<p class="text-gray-700">Balancear risco de sobrecarga x hipoperfusão hepática</p>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 10 - Anesthetic Agents -->
<div class="slide fade-in">
<div class="bg-white rounded-xl p-8 h-full shadow-xl">
<h2 class="text-3xl font-bold text-blue-800 mb-8 text-center">Agentes Anestésicos em Pacientes Hepáticos</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
<div>
<h3 class="text-2xl font-semibold text-gray-700 mb-4 flex items-center">
<i class="fas fa-prescription-bottle-alt text-green-500 mr-3"></i> Indutores Intravenosos
</h3>
<div class="bg-green-50 p-6 rounded-lg shadow">
<table class="min-w-full bg-white rounded-lg overflow-hidden">
<thead class="bg-green-600 text-white">
<tr>
<th class="py-2 px-4 text-left">Droga</th>
<th class="py-2 px-4 text-left">Considerações</th>
<th class="py-2 px-4 text-left">Dose</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="py-2 px-4 font-medium">Propofol</td>
<td class="py-2 px-4">Metabolismo hepático, mas clearance bem preservado</td>
<td class="py-2 px-4">↓ 30-50%</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-2 px-4 font-medium">Etomidato</td>
<td class="py-2 px-4">Boa estabilidade hemodinâmica, mas risco de supressão adrenal</td>
<td class="py-2 px-4">↓ 20-30%</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-2 px-4 font-medium">Tiopental</td>
<td class="py-2 px-4">Metabolismo hepático, longa duração</td>
<td class="py-2 px-4">↓ 50%</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-2 px-4 font-medium">Ketamina</td>
<td class="py-2 px-4">Pode aumentar pressão portal, útil em hipovolemia</td>
<td class="py-2 px-4">Dose padrão</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<h3 class="text-2xl font-semibold text-gray-700 mb-4 flex items-center">
<i class="fas fa-gas-pump text-blue-500 mr-3"></i> Anestésicos Inalatórios
</h3>
<div class="bg-blue-50 p-6 rounded-lg shadow">
<table class="min-w-full bg-white rounded-lg overflow-hidden">
<thead class="bg-blue-600 text-white">
<tr>
<th class="py-2 px-4 text-left">Droga</th>
<th class="py-2 px-4 text-left">Considerações</th>
<th class="py-2 px-4 text-left">Recomendação</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="py-2 px-4 font-medium">Isoflurano</td>
<td class="py-2 px-4">↓ Fluxo sanguíneo hepático, risco de hepatotoxicidade</td>
<td class="py-2 px-4">Evitar</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-2 px-4 font-medium">Sevoflurano</td>
<td class="py-2 px-4">Menos efeito no fluxo hepático, metabolismo mínimo</td>
<td class="py-2 px-4">Droga de escolha</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-2 px-4 font-medium">Desflurano</td>
<td class="py-2 px-4">Metabolismo mínimo, mas pode causar taquicardia</td>
<td class="py-2 px-4">Alternativa</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-2 px-4 font-medium">Óxido Nitroso</td>
<td class="py-2 px-4">Risco de embolia gasosa em shunts portossistêmicos</td>
<td class="py-2 px-4">Evitar</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div>
<h3 class="text-2xl font-semibold text-gray-700 mb-4 flex items-center">
<i class="fas fa-pills text-purple-500 mr-3"></i> Relaxantes Musculares
</h3>
<div class="bg-purple-50 p-6 rounded-lg shadow">
<table class="min-w-full bg-white rounded-lg overflow-hidden">
<thead class="bg-purple-600 text-white">
<tr>
<th class="py-2 px-4 text-left">Droga</th>
<th class="py-2 px-4 text-left">Considerações</th>
<th class="py-2 px-4 text-left">Recomendação</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="py-2 px-4 font-medium">Rocurônio</td>
<td class="py-2 px-4">Excreção biliar, duração prolongada</td>
<td class="py-2 px-4">↓ Dose ou usar sugammadex</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-2 px-4 font-medium">Vecurônio</td>
<td class="py-2 px-4">Excreção biliar, duração muito prolongada</td>
<td class="py-2 px-4">Evitar</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-2 px-4 font-medium">Cisatracúrio</td>
<td class="py-2 px-4">Hofmann elimination, independente do fígado</td>
<td class="py-2 px-4">Droga de escolha</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-2 px-4 font-medium">Atracúrio</td>
<td class="py-2 px-4">Hofmann elimination, mas libera laudanosine</td>
<td class="py-2 px-4">Alternativa</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<h3 class="text-2xl font-semibold text-gray-700 mb-4 flex items-center">
<i class="fas fa-prescription-bottle text-red-500 mr-3"></i> Analgésicos Opioides
</h3>
<div class="bg-red-50 p-6 rounded-lg shadow">
<table class="min-w-full bg-white rounded-lg overflow-hidden">
<thead class="bg-red-600 text-white">
<tr>
<th class="py-2 px-4 text-left">Droga</th>
<th class="py-2 px-4 text-left">Considerações</th>
<th class="py-2 px-4 text-left">Dose</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="py-2 px-4 font-medium">Fentanil</td>
<td class="py-2 px-4">Metabolismo hepático, mas curta duração</td>
<td class="py-2 px-4">↓ 30%</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-2 px-4 font-medium">Remifentanil</td>
<td class="py-2 px-4">Metabolismo por esterases plasmáticas</td>
<td class="py-2 px-4">Dose padrão</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-2 px-4 font-medium">Morfina</td>
<td class="py-2 px-4">Metabolismo hepático, glicuronidação</td>
<td class="py-2 px-4">↓ 50%</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-2 px-4 font-medium">Buprenorfina</td>
<td class="py-2 px-4">Metabolismo hepático, mas alto clearance</td>
<td class="py-2 px-4">↓ 30%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 11 - Monitoring -->
<div class="slide fade-in">
<div class="bg-white rounded-xl p-8 h-full shadow-xl">
<h2 class="text-3xl font-bold text-blue-800 mb-8 text-center">Monitorização em Pacientes Hepáticos</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div>
<h3 class="text-2xl font-semibold text-gray-700 mb-4 flex items-center">
<i class="fas fa-heartbeat text-red-500 mr-3"></i> Monitorização Básica
</h3>
<div class="bg-red-50 p-6 rounded-lg shadow">
<ul class="space-y-4 text-gray-700">
<li class="flex items-start">
<span class="bg-red-100 text-red-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">1</span>
<span><strong>ECG contínuo:</strong> Arritmias são comuns em cirróticos</span>
</li>
<li class="flex items-start">
<span class="bg-red-100 text-red-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">2</span>
<span><strong>Pressão arterial não invasiva:</strong> Limitações em hipotensão grave</span>
</li>
<li class="flex items-start">
<span class="bg-red-100 text-red-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">3</span>
<span><strong>Oximetria de pulso:</strong> Importante na HPS e hipoxemia</span>
</li>
<li class="flex items-start">
<span class="bg-red-100 text-red-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">4</span>
<span><strong>Capnografia:</strong> Avaliação de ventilação e shunt</span>
</li>
<li class="flex items-start">
<span class="bg-red-100 text-red-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">5</span>
<span><strong>Temperatura:</strong> Risco aumentado de hipotermia</span>
</li>
<li class="flex items-start">
<span class="bg-red-100 text-red-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">6</span>
<span><strong>BIS/Entropia:</strong> Útil devido à sensibilidade aumentada</span>
</li>
</ul>
</div>
</div>
<div>
<h3 class="text-2xl font-semibold text-gray-700 mb-4 flex items-center">
<i class="fas fa-tachometer-alt text-blue-500 mr-3"></i> Monitorização Avançada
</h3>
<div class="bg-blue-50 p-6 rounded-lg shadow">
<ul class="space-y-4 text-gray-700">
<li class="flex items-start">
<span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">1</span>
<span><strong>Pressão arterial invasiva:</strong> Recomendada em Child B/C ou cirurgias maiores</span>
</li>
<li class="flex items-start">
<span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">2</span>
<span><strong>Cateter venoso central:</strong> Avaliação de volemia e administração de vasopressores</span>
</li>
<li class="flex items-start">
<span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">3</span>
<span><strong>Gasometria arterial:</strong> Avaliação de oxigenação, acidose e eletrólitos</span>
</li>
<li class="flex items-start">
<span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">4</span>
<span><strong>Ecocardiografia transes
</html>