/* ============================================
   CDSS - ESTILOS VISUAIS (MODERN UI 2.0)
   VERSÃO 2.1 - Com Dark Mode Completo
   ============================================ */

/* ============================================
   SISTEMA DE VARIÁVEIS CSS - DARK MODE
   Baseado em pesquisas de UI/UX 2025-2026
   - Evita preto puro (#000) e branco puro (#fff)
   - Usa tons desaturados para conforto visual
   - Mantém contraste WCAG 4.5:1
   ============================================ */

:root {
    /* === CORES BASE === */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-bg-tertiary: #f1f5f9;
    --color-bg-elevated: #ffffff;
    --color-bg-hover: #f1f5f9;
    --color-bg-input: #ffffff;
    --color-bg-input-disabled: #f3f4f6;

    /* === TEXTOS === */
    --color-text-primary: #1e293b;
    --color-text-secondary: #475569;
    --color-text-tertiary: #64748b;
    --color-text-muted: #94a3b8;
    --color-text-inverse: #ffffff;

    /* === BORDAS === */
    --color-border-primary: #e2e8f0;
    --color-border-secondary: #cbd5e1;
    --color-border-light: #f1f5f9;
    --color-border-input: #d1d5db;
    --color-border-focus: #3b82f6;

    /* === SOMBRAS === */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.15);

    /* === CORES SEMÂNTICAS (ALERTAS) === */
    /* Crítico/Vermelho */
    --color-critical-bg: #fef2f2;
    --color-critical-bg-hover: #fee2e2;
    --color-critical-border: #fecaca;
    --color-critical-text: #991b1b;
    --color-critical-accent: #ef4444;

    /* Alto/Laranja */
    --color-high-bg: #fff7ed;
    --color-high-bg-hover: #ffedd5;
    --color-high-border: #fed7aa;
    --color-high-text: #9a3412;
    --color-high-accent: #f97316;

    /* Moderado/Âmbar */
    --color-moderate-bg: #fefce8;
    --color-moderate-bg-hover: #fef9c3;
    --color-moderate-border: #fef08a;
    --color-moderate-text: #854d0e;
    --color-moderate-accent: #eab308;

    /* Baixo/Azul */
    --color-low-bg: #eff6ff;
    --color-low-bg-hover: #dbeafe;
    --color-low-border: #bfdbfe;
    --color-low-text: #1e40af;
    --color-low-accent: #3b82f6;

    /* Seguro/Verde */
    --color-safe-bg: #f0fdf4;
    --color-safe-bg-hover: #dcfce7;
    --color-safe-border: #bbf7d0;
    --color-safe-text: #166534;
    --color-safe-accent: #22c55e;

    /* Info/Cinza */
    --color-info-bg: #f8fafc;
    --color-info-border: #e2e8f0;
    --color-info-text: #475569;
    --color-info-accent: #64748b;

    /* Especial/Rosa (Pré-natal) */
    --color-special-bg: #fdf2f8;
    --color-special-bg-hover: #fce7f3;
    --color-special-border: #fbcfe8;
    --color-special-text: #9d174d;
    --color-special-accent: #ec4899;

    /* === CORES DE COMPONENTES === */
    --color-tab-active-bg: #eff6ff;
    --color-tab-active-text: #2563eb;
    --color-tab-hover-bg: #f1f5f9;

    /* === GAUGE/GRÁFICO === */
    --color-gauge-bg: #f1f5f9;
    --color-gauge-safe: rgba(34, 197, 94, 0.4);
    --color-gauge-marker: #0f172a;
    --color-gauge-marker-shadow: rgba(255, 255, 255, 0.8);

    /* === TOOLTIP === */
    --color-tooltip-bg: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --color-tooltip-text: #e2e8f0;
    --color-tooltip-title: #93c5fd;
    --color-tooltip-success: #4ade80;
    --color-tooltip-danger: #fca5a5;
    --color-tooltip-muted: #94a3b8;

    /* === SCROLLBAR === */
    --color-scrollbar-track: transparent;
    --color-scrollbar-thumb: #cbd5e1;
    --color-scrollbar-thumb-hover: #94a3b8;

    /* === GLASS EFFECT === */
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(255, 255, 255, 0.5);

    /* === TRANSIÇÃO GLOBAL === */
    --transition-colors: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ============================================
   DARK MODE v3.0 - MÉDICO PROFISSIONAL
   Inspirado em monitores de UTI e equipamentos médicos
   Tons de azul-acinzentado, elegante e profissional
   ============================================ */

/* Logo light/dark mode toggle */
.logo-light { display: inline-block; }
.logo-dark { display: none; }
html.dark .logo-light { display: none !important; }
html.dark .logo-dark { display: inline-block !important; }

html.dark {
    /* ===== BACKGROUNDS ===== */
    --color-bg-primary: #0d1117;      /* Fundo principal - mais escuro que slate */
    --color-bg-secondary: #161b22;    /* Cards, sidebars, seções */
    --color-bg-tertiary: #21262d;     /* Inputs, accordions fechados */
    --color-bg-elevated: #2d333b;     /* Hover states, elementos elevados */
    --color-bg-hover: #2d333b;
    --color-bg-input: #21262d;
    --color-bg-input-disabled: #161b22;

    /* ===== TEXTO ===== */
    --color-text-primary: #f0f6fc;    /* Texto principal - alto contraste */
    --color-text-secondary: #8b949e;  /* Labels, texto auxiliar */
    --color-text-tertiary: #8b949e;   /* Alias para compatibilidade */
    --color-text-muted: #6e7681;      /* Placeholders, hints */
    --color-text-inverse: #0d1117;

    /* ===== BORDAS ===== */
    --color-border-primary: #30363d;  /* Bordas sutis */
    --color-border-secondary: #4a5568; /* Bordas com mais destaque */
    --color-border-light: #21262d;
    --color-border-input: #30363d;
    --color-border-focus: #58a6ff;    /* Azul médico profissional */

    /* ===== SOMBRAS ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
    --shadow-focus: 0 0 0 3px rgba(88, 166, 255, 0.25);

    /* ===== ACCENT - Azul médico profissional ===== */
    --accent-primary: #58a6ff;        /* Links, elementos interativos, foco */
    --accent-secondary: #1f6feb;      /* Botões, elementos ativos */
    --accent-muted: rgba(56, 139, 253, 0.15); /* Backgrounds de destaque sutil */

    /* ===== STATUS CLÍNICOS - APENAS para valores laboratoriais ===== */
    --status-critical: #f85149;       /* Valores críticos/muito alterados */
    --status-warning: #d29922;        /* Valores levemente alterados */
    --status-success: #3fb950;        /* Valores normais */
    --status-info: #58a6ff;           /* Informativo neutro */

    /* ===== BACKGROUNDS DE STATUS (para campos de input) ===== */
    --status-critical-bg: rgba(248, 81, 73, 0.15);
    --status-warning-bg: rgba(210, 153, 34, 0.15);
    --status-success-bg: rgba(63, 185, 80, 0.15);

    /* ===== CORES SEMÂNTICAS (compatibilidade) ===== */
    /* Crítico/Vermelho */
    --color-critical-bg: rgba(248, 81, 73, 0.1);
    --color-critical-bg-hover: rgba(248, 81, 73, 0.2);
    --color-critical-border: rgba(248, 81, 73, 0.4);
    --color-critical-text: #ffa198;
    --color-critical-accent: #f85149;

    /* Alto/Laranja-Amarelo */
    --color-high-bg: rgba(210, 153, 34, 0.1);
    --color-high-bg-hover: rgba(210, 153, 34, 0.2);
    --color-high-border: rgba(210, 153, 34, 0.4);
    --color-high-text: #e3b341;
    --color-high-accent: #d29922;

    /* Moderado/Âmbar */
    --color-moderate-bg: rgba(210, 153, 34, 0.1);
    --color-moderate-bg-hover: rgba(210, 153, 34, 0.2);
    --color-moderate-border: rgba(210, 153, 34, 0.4);
    --color-moderate-text: #e3b341;
    --color-moderate-accent: #d29922;

    /* Baixo/Azul - Informativo */
    --color-low-bg: rgba(88, 166, 255, 0.1);
    --color-low-bg-hover: rgba(88, 166, 255, 0.15);
    --color-low-border: rgba(88, 166, 255, 0.3);
    --color-low-text: #79c0ff;
    --color-low-accent: #58a6ff;

    /* Seguro/Verde - Normal */
    --color-safe-bg: rgba(63, 185, 80, 0.1);
    --color-safe-bg-hover: rgba(63, 185, 80, 0.15);
    --color-safe-border: rgba(63, 185, 80, 0.4);
    --color-safe-text: #7ee787;
    --color-safe-accent: #3fb950;

    /* Info/Cinza - Neutro */
    --color-info-bg: #21262d;
    --color-info-border: #30363d;
    --color-info-text: #8b949e;
    --color-info-accent: #8b949e;

    /* Especial/Rosa (Pré-natal) - mantém distintivo */
    --color-special-bg: rgba(219, 112, 219, 0.1);
    --color-special-bg-hover: rgba(219, 112, 219, 0.15);
    --color-special-border: rgba(219, 112, 219, 0.3);
    --color-special-text: #db70db;
    --color-special-accent: #db70db;

    /* ===== COMPONENTES ===== */
    --color-tab-active-bg: rgba(88, 166, 255, 0.15);
    --color-tab-active-text: #58a6ff;
    --color-tab-hover-bg: #21262d;

    /* ===== GAUGE/GRÁFICO ===== */
    --color-gauge-bg: #21262d;
    --color-gauge-safe: rgba(63, 185, 80, 0.3);
    --color-gauge-marker: #f0f6fc;
    --color-gauge-marker-shadow: rgba(0, 0, 0, 0.8);

    /* ===== TOOLTIP ===== */
    --color-tooltip-bg: linear-gradient(135deg, #161b22 0%, #21262d 100%);
    --color-tooltip-text: #f0f6fc;
    --color-tooltip-title: #58a6ff;
    --color-tooltip-success: #3fb950;
    --color-tooltip-danger: #f85149;
    --color-tooltip-muted: #6e7681;

    /* ===== SCROLLBAR ===== */
    --color-scrollbar-track: #0d1117;
    --color-scrollbar-thumb: #30363d;
    --color-scrollbar-thumb-hover: #4a5568;

    /* ===== GLASS EFFECT ===== */
    --glass-bg: rgba(13, 17, 23, 0.95);
    --glass-border: rgba(48, 54, 61, 0.6);
}

/* ============================================
   APLICAÇÃO DAS VARIÁVEIS - Base
   ============================================ */

/* --- BASE & TYPOGRAPHY --- */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    transition: var(--transition-colors);
}

/* --- REMOVE NUMBER INPUT SPINNERS --- */
/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* --- MODERN INPUTS --- */
input[type="number"], 
input[type="text"], 
input[type="date"], 
select, 
textarea {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0.5rem;
}

/* Garante que input date tenha espaço para o ano completo */
input[type="date"] {
    min-width: 140px;
}

input:focus,
select:focus,
textarea:focus {
    background-color: var(--color-bg-input);
    transform: translateY(-1px);
    box-shadow: var(--shadow-focus);
    border-color: var(--color-border-focus) !important;
    outline: none;
}

/* --- GLASSMORPHISM CARDS --- */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
}

/* --- MONITOR SIDEBAR CARDS --- */
.monitor-card {
    background: var(--color-bg-elevated);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--color-border-primary);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, var(--transition-colors);
}

.monitor-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Barra lateral colorida */
.monitor-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--card-color, #94a3b8);
}

/* Cores dos cards */
.card-critical {
    --card-color: var(--color-critical-accent);
    background: linear-gradient(135deg, var(--color-critical-bg) 0%, var(--color-critical-bg-hover) 100%);
    border-color: var(--color-critical-border);
}

.card-high {
    --card-color: var(--color-high-accent);
    background: linear-gradient(135deg, var(--color-high-bg) 0%, var(--color-high-bg-hover) 100%);
    border-color: var(--color-high-border);
}

.card-moderate {
    --card-color: var(--color-moderate-accent);
    background: linear-gradient(135deg, var(--color-moderate-bg) 0%, var(--color-moderate-bg-hover) 100%);
    border-color: var(--color-moderate-border);
}

.card-low {
    --card-color: var(--color-low-accent);
    background: linear-gradient(135deg, var(--color-low-bg) 0%, var(--color-low-bg-hover) 100%);
    border-color: var(--color-low-border);
}

.card-info {
    --card-color: var(--color-info-accent);
    background: var(--color-info-bg);
    border-color: var(--color-info-border);
}

/* --- CARDS COMPACTOS (para LOW e INFO) --- */
.card-low,
.card-info {
    padding: 0.5rem 0.75rem;
}

.card-low .monitor-card-details,
.card-info .monitor-card-details {
    display: none;
}

.card-low:hover .monitor-card-details,
.card-info:hover .monitor-card-details {
    display: block;
}

/* --- ANIMAÇÃO FADE IN --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-out;
}

/* --- ACCORDION/DETAILS STYLING --- */
details summary {
    list-style: none;
}

details summary::-webkit-details-marker {
    display: none;
}

details[open] > summary {
    margin-bottom: 0.5rem;
}

details summary:hover {
    background-color: var(--color-bg-hover);
}

/* --- GAUGE (GRÁFICO LINEAR) --- */
.gauge-container {
    position: relative;
    height: 0.5rem;
    background: var(--color-gauge-bg);
    border-radius: 9999px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    margin-top: 0.4rem;
}

.gauge-safe-zone {
    position: absolute;
    height: 100%;
    background-color: var(--color-gauge-safe);
    z-index: 1;
}

.gauge-marker {
    position: absolute;
    height: 100%;
    width: 4px;
    background-color: var(--color-gauge-marker);
    top: 0;
    transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 2px;
    z-index: 10;
    box-shadow: 0 0 0 2px var(--color-gauge-marker-shadow);
}

/* --- SCROLLBAR --- */
.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: var(--color-scrollbar-track); }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: var(--color-scrollbar-thumb); border-radius: 20px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--color-scrollbar-thumb-hover); }

/* --- ABAS (TABS) MODERNAS --- */
.tab-btn {
    position: relative;
    padding: 0.75rem 1.25rem;
    color: var(--color-text-tertiary);
    font-weight: 600;
    font-size: 0.8rem;
    transition: all 0.2s, var(--transition-colors);
    border-radius: 0.5rem;
    margin-right: 0.25rem;
    cursor: pointer;
}

.tab-btn:hover {
    color: var(--color-text-primary);
    background-color: var(--color-tab-hover-bg);
}

.tab-btn.active {
    color: var(--color-tab-active-text);
    background-color: var(--color-tab-active-bg);
    box-shadow: var(--shadow-sm);
}

.tab-btn.active::after { display: none; }

/* --- BADGE ANIMADO --- */
@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.badge-pulse {
    animation: pulse-badge 2s infinite;
}

/* --- TRUNCATE COM TOOLTIP --- */
.truncate-tooltip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.truncate-tooltip:hover {
    overflow: visible;
    white-space: normal;
    word-break: break-word;
}

/* --- RICH EDITOR --- */
.rich-editor {
    min-height: 300px;
    border: 2px solid var(--color-border-primary);
    border-radius: 0.75rem;
    padding: 1rem;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 0.875rem;
    line-height: 1.6;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, var(--transition-colors);
}

.rich-editor:focus {
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-input);
}

/* --- PRINT STYLES --- */
@media print {
    .no-print { display: none !important; }
    .monitor-card { break-inside: avoid; }
}
/* --- CORREÇÃO DAS ABAS (IMPORTANTE) --- */
.tab-content { 
    display: none; /* Esconde por padrão */
    animation: fadeIn 0.3s ease; /* Animação suave */
}

.tab-content.active { 
    display: block; /* Mostra apenas a ativa */
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(4px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* Animação para entrada suave das tags */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fadeIn {
    animation: fadeIn 0.2s ease-out forwards;
}

/* --- ABA MEDICAMENTOS --- */
.med-autocomplete-item:hover {
    background-color: var(--color-low-bg);
}

#med-autocomplete {
    scrollbar-width: thin;
}

/* Badge de alerta pulsante */
@keyframes pulse-alert {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.animate-pulse {
    animation: pulse-alert 1.5s ease-in-out infinite;
}

/* Interação cards */
.interaction-card {
    transition: all 0.2s ease;
}

.interaction-card:hover {
    transform: translateX(2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* ============================================
   UX ENHANCEMENTS - Novos Estilos
   ============================================ */

/* --- VALORES CRÍTICOS PISCANDO --- */
@keyframes critical-blink {
    0%, 100% { 
        background-color: rgba(239, 68, 68, 0.2);
        border-color: #ef4444;
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
    }
    50% { 
        background-color: rgba(239, 68, 68, 0.4);
        border-color: #dc2626;
        box-shadow: 0 0 16px rgba(239, 68, 68, 0.8);
    }
}

@keyframes warning-blink {
    0%, 100% { 
        background-color: rgba(245, 158, 11, 0.2);
        border-color: #f59e0b;
        box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
    }
    50% { 
        background-color: rgba(245, 158, 11, 0.35);
        border-color: #d97706;
        box-shadow: 0 0 12px rgba(245, 158, 11, 0.7);
    }
}

.critical-blink {
    animation: critical-blink 0.5s ease-in-out 6;
    border-radius: 4px;
}

.warning-blink {
    animation: warning-blink 0.6s ease-in-out 5;
    border-radius: 4px;
}

/* --- TOOLTIPS DE REFERÊNCIA --- */
.ref-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: var(--color-tooltip-bg);
    color: var(--color-tooltip-text);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    text-align: left;
}

.ref-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #334155;
}

html.dark .ref-tooltip::after {
    border-top-color: var(--color-bg-elevated, #2d333b);
}

.ref-tooltip.tooltip-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.ref-tooltip .tooltip-title {
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 6px;
    color: var(--color-tooltip-title);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 4px;
}

.ref-tooltip .tooltip-range {
    color: var(--color-tooltip-text);
    margin-bottom: 4px;
}

.ref-tooltip .tooltip-range b {
    color: var(--color-tooltip-success);
}

.ref-tooltip .tooltip-critical {
    color: var(--color-tooltip-danger);
    font-size: 10px;
    margin-top: 4px;
}

.ref-tooltip .tooltip-note {
    color: var(--color-tooltip-muted);
    font-size: 10px;
    font-style: italic;
    margin-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 4px;
}

/* --- BUSCA GLOBAL --- */
.global-search-container {
    position: relative;
}

.global-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.global-search-input-wrapper i.search-icon {
    position: absolute;
    left: 12px;
    color: var(--color-text-muted);
    font-size: 14px;
    pointer-events: none;
}

#global-search-input {
    width: 100%;
    padding: 10px 36px 10px 38px;
    border: 2px solid var(--color-border-input);
    border-radius: 10px;
    font-size: 14px;
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    transition: all 0.2s ease, var(--transition-colors);
}

#global-search-input:focus {
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
    outline: none;
}

#global-search-input::placeholder {
    color: var(--color-text-muted);
}

#global-search-clear {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s;
}

#global-search-clear:hover {
    color: var(--color-text-secondary);
    background: var(--color-bg-hover);
}

#global-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-primary);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1001;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease, var(--transition-colors);
}

#global-search-results.visible {
    opacity: 1;
    transform: translateY(0);
}

#global-search-results.hidden {
    display: none;
}

.search-category {
    padding: 8px 14px 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
}

.search-result-item {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border-light);
    transition: all 0.1s ease, var(--transition-colors);
}

.search-result-item:hover,
.search-result-item.selected {
    background: var(--color-low-bg);
}

.search-result-item.selected {
    border-left: 3px solid var(--color-low-accent);
}

.search-result-label {
    font-size: 13px;
    color: var(--color-text-primary);
}

.search-result-label mark {
    background: var(--color-moderate-bg-hover);
    color: var(--color-moderate-text);
    padding: 1px 2px;
    border-radius: 2px;
}

.search-result-value {
    font-size: 12px;
    color: var(--color-text-secondary);
    font-family: 'SF Mono', 'Monaco', monospace;
    background: var(--color-bg-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
}

.search-no-results {
    padding: 30px 20px;
    text-align: center;
    color: var(--color-text-muted);
}

.search-no-results p {
    font-size: 13px;
}

/* --- DESTAQUE DE CAMPO ENCONTRADO --- */
@keyframes search-highlight-pulse {
    0% { 
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    70% { 
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

.search-highlight {
    animation: search-highlight-pulse 0.8s ease-out 3;
    background-color: #dbeafe !important;
    border-color: #3b82f6 !important;
}

/* --- BOTÃO DE SOM --- */
#btn-toggle-sound {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--color-border-input);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease, var(--transition-colors);
    display: flex;
    align-items: center;
    justify-content: center;
}

#btn-toggle-sound:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

#btn-toggle-sound.sound-off {
    color: var(--color-critical-accent);
}

/* --- ATALHO KEYBOARD HINT --- */
.kbd-hint {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    color: var(--color-text-muted);
    margin-left: 8px;
}

.kbd-hint kbd {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: system-ui;
    font-size: 10px;
    color: var(--color-text-secondary);
}

/* ============================================
   SISTEMA DE EXAMES ANTERIORES
   ============================================ */

/* Animação de entrada */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-in {
    animation: slideInFromLeft 0.2s ease-out;
}

/* Campos de valores anteriores */
.prev-value-col input,
.prev-value-col-2 input {
    background: var(--color-bg-secondary);
    border: 1px dashed var(--color-border-secondary);
    color: var(--color-text-primary);
}

.prev-value-col input:focus,
.prev-value-col-2 input:focus {
    background: var(--color-bg-input);
    border: 1px solid var(--color-border-focus);
    border-style: solid;
}

/* Badge de delta clicável */
.delta-badge {
    cursor: pointer;
    transition: all 0.2s ease;
}

.delta-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Modal de detalhes */
#delta-detail-modal {
    animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#delta-detail-modal > div:last-child {
    animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Header de datas responsivo */
#exam-dates-header {
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    #exam-dates-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #previous-values-header {
        flex-wrap: wrap;
        margin-top: 4px;
    }
}

/* ============================================
   PALETTE BRIDGE v3.0 — Tailwind v4 Variable Override

   Tailwind v4 usa variáveis CSS internas como
   --color-blue-50, --color-teal-600, etc.
   Sobrescrevemos essas variáveis diretamente no
   seletor html[data-palette] para que TODAS as
   classes Tailwind automaticamente sigam o tema.

   Cores médicas (red) são INTOCÁVEIS.
   ============================================ */

/* ── VARIÁVEIS TAILWIND v4: DECORATIVAS → PALETA ── */
html[data-palette] {
    /* NEUTROS (gray/slate) → variáveis de tema */
    --color-white: var(--color-bg-primary);
    --color-slate-50: var(--color-bg-secondary);
    --color-slate-100: var(--color-bg-tertiary);
    --color-slate-200: var(--color-border-primary);
    --color-slate-300: var(--color-border-secondary);
    --color-slate-400: var(--color-text-muted);
    --color-slate-500: var(--color-text-tertiary);
    --color-slate-600: var(--color-text-secondary);
    --color-slate-700: var(--color-text-primary);
    --color-slate-800: var(--color-text-primary);
    --color-slate-900: var(--color-text-primary);
    --color-gray-50: var(--color-bg-secondary);
    --color-gray-100: var(--color-bg-tertiary);
    --color-gray-200: var(--color-border-primary);
    --color-gray-300: var(--color-border-secondary);
    --color-gray-400: var(--color-text-muted);
    --color-gray-500: var(--color-text-tertiary);
    --color-gray-600: var(--color-text-secondary);
    --color-gray-700: var(--color-text-primary);
    --color-gray-800: var(--color-text-primary);
    --color-gray-900: var(--color-text-primary);

    /* BLUE → paleta accent */
    --color-blue-50: var(--color-bg-secondary);
    --color-blue-100: var(--color-bg-tertiary);
    --color-blue-200: var(--color-border-primary);
    --color-blue-300: var(--color-border-secondary);
    --color-blue-400: var(--color-text-muted);
    --color-blue-500: var(--color-border-focus);
    --color-blue-600: var(--color-tab-active-text);
    --color-blue-700: var(--color-tab-active-text);
    --color-blue-800: var(--color-text-primary);
    --color-blue-900: var(--color-text-primary);

    /* TEAL → paleta */
    --color-teal-50: var(--color-bg-secondary);
    --color-teal-100: var(--color-bg-tertiary);
    --color-teal-200: var(--color-border-primary);
    --color-teal-300: var(--color-border-secondary);
    --color-teal-400: var(--color-text-muted);
    --color-teal-500: var(--color-border-focus);
    --color-teal-600: var(--color-tab-active-text);
    --color-teal-700: var(--color-tab-active-text);
    --color-teal-800: var(--color-text-primary);

    /* ROSE → paleta */
    --color-rose-50: var(--color-bg-secondary);
    --color-rose-100: var(--color-bg-tertiary);
    --color-rose-200: var(--color-border-primary);
    --color-rose-400: var(--color-text-muted);
    --color-rose-500: var(--color-text-tertiary);
    --color-rose-600: var(--color-tab-active-text);
    --color-rose-700: var(--color-tab-active-text);
    --color-rose-800: var(--color-text-primary);

    /* PINK → paleta */
    --color-pink-50: var(--color-bg-secondary);
    --color-pink-100: var(--color-bg-tertiary);
    --color-pink-200: var(--color-border-primary);
    --color-pink-300: var(--color-border-secondary);
    --color-pink-400: var(--color-text-muted);
    --color-pink-500: var(--color-text-tertiary);
    --color-pink-600: var(--color-tab-active-text);
    --color-pink-700: var(--color-tab-active-text);
    --color-pink-800: var(--color-text-primary);
    --color-pink-900: var(--color-text-primary);

    /* SKY → paleta */
    --color-sky-50: var(--color-bg-secondary);
    --color-sky-100: var(--color-bg-tertiary);
    --color-sky-200: var(--color-border-primary);
    --color-sky-300: var(--color-border-secondary);
    --color-sky-400: var(--color-text-muted);
    --color-sky-500: var(--color-border-focus);
    --color-sky-600: var(--color-tab-active-text);
    --color-sky-700: var(--color-tab-active-text);
    --color-sky-800: var(--color-text-primary);
    --color-sky-900: var(--color-text-primary);

    /* EMERALD → paleta */
    --color-emerald-50: var(--color-bg-secondary);
    --color-emerald-100: var(--color-bg-tertiary);
    --color-emerald-200: var(--color-border-primary);
    --color-emerald-300: var(--color-border-secondary);
    --color-emerald-400: var(--color-text-muted);
    --color-emerald-500: var(--color-border-focus);
    --color-emerald-600: var(--color-tab-active-text);
    --color-emerald-700: var(--color-tab-active-text);
    --color-emerald-800: var(--color-text-primary);
    --color-emerald-900: var(--color-text-primary);

    /* GREEN → paleta */
    --color-green-50: var(--color-bg-secondary);
    --color-green-100: var(--color-bg-tertiary);
    --color-green-200: var(--color-border-primary);
    --color-green-300: var(--color-border-secondary);
    --color-green-400: var(--color-text-muted);
    --color-green-500: var(--color-border-focus);
    --color-green-600: var(--color-tab-active-text);
    --color-green-700: var(--color-tab-active-text);
    --color-green-800: var(--color-text-primary);
    --color-green-900: var(--color-text-primary);

    /* INDIGO → paleta */
    --color-indigo-50: var(--color-bg-secondary);
    --color-indigo-100: var(--color-bg-tertiary);
    --color-indigo-200: var(--color-border-primary);
    --color-indigo-400: var(--color-text-muted);
    --color-indigo-500: var(--color-border-focus);
    --color-indigo-600: var(--color-tab-active-text);
    --color-indigo-700: var(--color-tab-active-text);
    --color-indigo-800: var(--color-text-primary);

    /* VIOLET → paleta */
    --color-violet-50: var(--color-bg-secondary);
    --color-violet-100: var(--color-bg-tertiary);
    --color-violet-200: var(--color-border-primary);
    --color-violet-400: var(--color-text-muted);
    --color-violet-500: var(--color-text-tertiary);
    --color-violet-600: var(--color-tab-active-text);
    --color-violet-800: var(--color-text-primary);

    /* PURPLE → paleta */
    --color-purple-50: var(--color-bg-secondary);
    --color-purple-100: var(--color-bg-tertiary);
    --color-purple-200: var(--color-border-primary);
    --color-purple-300: var(--color-border-secondary);
    --color-purple-400: var(--color-text-muted);
    --color-purple-500: var(--color-border-focus);
    --color-purple-600: var(--color-tab-active-text);
    --color-purple-700: var(--color-tab-active-text);
    --color-purple-800: var(--color-text-primary);
    --color-purple-900: var(--color-text-primary);

    /* AMBER → paleta */
    --color-amber-50: var(--color-bg-secondary);
    --color-amber-100: var(--color-bg-tertiary);
    --color-amber-200: var(--color-border-primary);
    --color-amber-300: var(--color-border-secondary);
    --color-amber-400: var(--color-text-muted);
    --color-amber-500: var(--color-border-focus);
    --color-amber-600: var(--color-tab-active-text);
    --color-amber-700: var(--color-tab-active-text);
    --color-amber-800: var(--color-text-primary);

    /* CYAN → paleta */
    --color-cyan-50: var(--color-bg-secondary);
    --color-cyan-100: var(--color-bg-tertiary);
    --color-cyan-200: var(--color-border-primary);
    --color-cyan-400: var(--color-text-muted);
    --color-cyan-500: var(--color-border-focus);
    --color-cyan-600: var(--color-tab-active-text);
    --color-cyan-700: var(--color-tab-active-text);
    --color-cyan-800: var(--color-text-primary);

    /* LIME → paleta */
    --color-lime-50: var(--color-bg-secondary);
    --color-lime-100: var(--color-bg-tertiary);
    --color-lime-400: var(--color-text-muted);
    --color-lime-500: var(--color-border-focus);
    --color-lime-600: var(--color-tab-active-text);
    --color-lime-800: var(--color-text-primary);

    /* FUCHSIA → paleta */
    --color-fuchsia-50: var(--color-bg-secondary);
    --color-fuchsia-100: var(--color-bg-tertiary);
    --color-fuchsia-200: var(--color-border-primary);
    --color-fuchsia-300: var(--color-border-secondary);
    --color-fuchsia-400: var(--color-text-muted);
    --color-fuchsia-500: var(--color-border-focus);
    --color-fuchsia-700: var(--color-tab-active-text);
    --color-fuchsia-800: var(--color-text-primary);
    --color-fuchsia-900: var(--color-text-primary);

    /* ORANGE → paleta */
    --color-orange-50: var(--color-bg-secondary);
    --color-orange-100: var(--color-bg-tertiary);
    --color-orange-200: var(--color-border-primary);
    --color-orange-300: var(--color-border-secondary);
    --color-orange-400: var(--color-text-muted);
    --color-orange-500: var(--color-border-focus);
    --color-orange-600: var(--color-tab-active-text);
    --color-orange-700: var(--color-tab-active-text);
    --color-orange-800: var(--color-text-primary);
    --color-orange-900: var(--color-text-primary);

    /* YELLOW → paleta */
    --color-yellow-50: var(--color-bg-secondary);
    --color-yellow-100: var(--color-bg-tertiary);
    --color-yellow-200: var(--color-border-primary);
    --color-yellow-300: var(--color-border-secondary);
    --color-yellow-400: var(--color-text-muted);
    --color-yellow-500: var(--color-border-focus);
    --color-yellow-600: var(--color-tab-active-text);
    --color-yellow-700: var(--color-tab-active-text);
    --color-yellow-800: var(--color-text-primary);
    --color-yellow-900: var(--color-text-primary);
}

/* ── INPUTS COM PALETA ── */
html[data-palette] input,
html[data-palette] select,
html[data-palette] textarea {
    background-color: var(--color-bg-input) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-input) !important;
}
html[data-palette] input:focus,
html[data-palette] select:focus,
html[data-palette] textarea:focus {
    border-color: var(--color-border-focus) !important;
    box-shadow: var(--shadow-focus) !important;
}
html[data-palette] input::placeholder,
html[data-palette] textarea::placeholder {
    color: var(--color-text-muted) !important;
}
html[data-palette] input:disabled,
html[data-palette] select:disabled {
    background-color: var(--color-bg-input-disabled) !important;
    color: var(--color-text-muted) !important;
}

/* ── SOMBRAS COM PALETA ── */
html[data-palette] .shadow-sm { box-shadow: var(--shadow-sm) !important; }
html[data-palette] .shadow-md { box-shadow: var(--shadow-md) !important; }
html[data-palette] .shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* ── BACKGROUNDS NEUTROS EXTRAS ── */
html[data-palette] .bg-white { background-color: var(--color-bg-primary) !important; }
html[data-palette] .bg-\[\#f8fafc\] { background-color: var(--color-bg-secondary) !important; }

/* ── REFORÇO: BACKGROUNDS DECORATIVOS COM CLASSE !important ──
   Belt-and-suspenders: mesmo que o override de variável funcione,
   este bloco garante que os backgrounds mudem em qualquer browser.
   RED é INTOCÁVEL (segurança clínica). */
html[data-palette] .bg-blue-50     { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-blue-100    { background-color: var(--color-bg-tertiary) !important; }
html[data-palette] .bg-blue-50\/30 { background-color: color-mix(in srgb, var(--color-bg-secondary) 30%, transparent) !important; }
html[data-palette] .bg-blue-50\/70 { background-color: color-mix(in srgb, var(--color-bg-secondary) 70%, transparent) !important; }
html[data-palette] .bg-teal-50     { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-teal-100    { background-color: var(--color-bg-tertiary) !important; }
html[data-palette] .bg-rose-50     { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-rose-100    { background-color: var(--color-bg-tertiary) !important; }
html[data-palette] .bg-pink-50     { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-pink-100    { background-color: var(--color-bg-tertiary) !important; }
html[data-palette] .bg-sky-50      { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-sky-100     { background-color: var(--color-bg-tertiary) !important; }
html[data-palette] .bg-emerald-50  { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-emerald-100 { background-color: var(--color-bg-tertiary) !important; }
html[data-palette] .bg-green-50    { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-green-100   { background-color: var(--color-bg-tertiary) !important; }
html[data-palette] .bg-indigo-50   { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-indigo-100  { background-color: var(--color-bg-tertiary) !important; }
html[data-palette] .bg-violet-50   { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-violet-100  { background-color: var(--color-bg-tertiary) !important; }
html[data-palette] .bg-purple-50   { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-purple-100  { background-color: var(--color-bg-tertiary) !important; }
html[data-palette] .bg-amber-50    { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-amber-100   { background-color: var(--color-bg-tertiary) !important; }
html[data-palette] .bg-cyan-50     { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-cyan-100    { background-color: var(--color-bg-tertiary) !important; }
html[data-palette] .bg-lime-50     { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-lime-100    { background-color: var(--color-bg-tertiary) !important; }
html[data-palette] .bg-fuchsia-50  { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-fuchsia-100 { background-color: var(--color-bg-tertiary) !important; }
html[data-palette] .bg-orange-50   { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-orange-100  { background-color: var(--color-bg-tertiary) !important; }
html[data-palette] .bg-yellow-50   { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-yellow-100  { background-color: var(--color-bg-tertiary) !important; }
html[data-palette] .bg-stone-50    { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-slate-50    { background-color: var(--color-bg-secondary) !important; }
html[data-palette] .bg-gray-50     { background-color: var(--color-bg-secondary) !important; }

/* ── REFORÇO: TEXTOS DECORATIVOS ── */
html[data-palette] .text-blue-600,
html[data-palette] .text-blue-700  { color: var(--color-tab-active-text) !important; }
html[data-palette] .text-teal-600,
html[data-palette] .text-teal-700  { color: var(--color-tab-active-text) !important; }
html[data-palette] .text-rose-500,
html[data-palette] .text-rose-600  { color: var(--color-tab-active-text) !important; }
html[data-palette] .text-pink-500,
html[data-palette] .text-pink-600,
html[data-palette] .text-pink-700  { color: var(--color-tab-active-text) !important; }
html[data-palette] .text-sky-600,
html[data-palette] .text-sky-700   { color: var(--color-tab-active-text) !important; }
html[data-palette] .text-emerald-600,
html[data-palette] .text-emerald-700,
html[data-palette] .text-emerald-800 { color: var(--color-tab-active-text) !important; }
html[data-palette] .text-indigo-600,
html[data-palette] .text-indigo-700 { color: var(--color-tab-active-text) !important; }
html[data-palette] .text-violet-600,
html[data-palette] .text-violet-700 { color: var(--color-tab-active-text) !important; }
html[data-palette] .text-purple-600,
html[data-palette] .text-purple-700 { color: var(--color-tab-active-text) !important; }
html[data-palette] .text-amber-600,
html[data-palette] .text-amber-700 { color: var(--color-tab-active-text) !important; }
html[data-palette] .text-cyan-600,
html[data-palette] .text-cyan-700  { color: var(--color-tab-active-text) !important; }
html[data-palette] .text-orange-600,
html[data-palette] .text-orange-700 { color: var(--color-tab-active-text) !important; }

/* ── REFORÇO: BORDAS DECORATIVAS ── */
html[data-palette] .border-blue-200,
html[data-palette] .border-blue-300  { border-color: var(--color-border-primary) !important; }
html[data-palette] .border-teal-200,
html[data-palette] .border-teal-300  { border-color: var(--color-border-primary) !important; }
html[data-palette] .border-rose-200,
html[data-palette] .border-rose-300  { border-color: var(--color-border-primary) !important; }
html[data-palette] .border-pink-200,
html[data-palette] .border-pink-300  { border-color: var(--color-border-primary) !important; }
html[data-palette] .border-sky-200   { border-color: var(--color-border-primary) !important; }
html[data-palette] .border-emerald-200 { border-color: var(--color-border-primary) !important; }
html[data-palette] .border-green-200 { border-color: var(--color-border-primary) !important; }
html[data-palette] .border-indigo-200 { border-color: var(--color-border-primary) !important; }
html[data-palette] .border-violet-200 { border-color: var(--color-border-primary) !important; }
html[data-palette] .border-purple-200 { border-color: var(--color-border-primary) !important; }
html[data-palette] .border-amber-200 { border-color: var(--color-border-primary) !important; }
html[data-palette] .border-cyan-200  { border-color: var(--color-border-primary) !important; }
html[data-palette] .border-orange-200 { border-color: var(--color-border-primary) !important; }
html[data-palette] .border-yellow-200 { border-color: var(--color-border-primary) !important; }

/* ── REFORÇO: FOCUS RINGS ── */
html[data-palette] .focus\:border-blue-500:focus,
html[data-palette] .focus\:border-teal-500:focus,
html[data-palette] .focus\:border-rose-400:focus,
html[data-palette] .focus\:border-pink-500:focus { border-color: var(--color-border-focus) !important; }
html[data-palette] .focus\:ring-blue-100:focus,
html[data-palette] .focus\:ring-rose-100:focus,
html[data-palette] .focus\:ring-teal-100:focus { --tw-ring-color: var(--color-border-light) !important; }

/* ── REFORÇO: HOVERS DECORATIVOS ── */
html[data-palette] .hover\:bg-blue-50:hover,
html[data-palette] .hover\:bg-teal-50:hover,
html[data-palette] .hover\:bg-rose-50:hover,
html[data-palette] .hover\:bg-sky-50:hover,
html[data-palette] .hover\:bg-emerald-50:hover,
html[data-palette] .hover\:bg-indigo-50:hover,
html[data-palette] .hover\:bg-violet-50:hover,
html[data-palette] .hover\:bg-purple-50:hover,
html[data-palette] .hover\:bg-amber-50:hover { background-color: var(--color-bg-hover) !important; }

/* ═══ PROTEÇÃO: CORES MÉDICAS RED — INTOCÁVEIS ═══ */
/* RED não é sobrescrito acima — permanece com valores originais Tailwind.
   Alertas clínicos (critical/high) usam red e devem SEMPRE ser vermelhos. */

/* ── CARD ALERGIAS — segue o tema ── */
.alergias-label {
    color: #b91c1c;
}
.alergias-label i {
    color: #ef4444;
}
.alergias-input-wrapper {
    border: 1px solid #fecaca;
    background-color: rgba(254, 226, 226, 0.3);
}
.alergias-input-wrapper:focus-within {
    border-color: #f87171;
    box-shadow: 0 0 0 2px rgba(254, 202, 202, 0.5);
}
html[data-palette] .alergias-label {
    color: var(--color-text-primary) !important;
}
html[data-palette] .alergias-label i {
    color: var(--color-tab-active-text) !important;
}
html[data-palette] .alergias-input-wrapper {
    border-color: var(--color-border-primary) !important;
    background-color: var(--color-bg-secondary) !important;
}
html[data-palette] .alergias-input-wrapper:focus-within {
    border-color: var(--color-border-focus) !important;
    box-shadow: var(--shadow-focus) !important;
}

/* Tags de Alergia */
.tag-alergia {
    background-color: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}
.tag-alergia .tag-remove-btn:hover {
    background-color: #fecaca;
}
html[data-palette] .tag-alergia {
    background-color: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-primary) !important;
}
html[data-palette] .tag-alergia .tag-remove-btn:hover {
    background-color: var(--color-bg-hover) !important;
}

/* Tags de Medicamento */
.tag-medicamento {
    background-color: #dbeafe;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.tag-medicamento .tag-remove-btn:hover {
    background-color: #bfdbfe;
}
html[data-palette] .tag-medicamento {
    background-color: var(--color-bg-tertiary) !important;
    color: var(--color-tab-active-text) !important;
    border-color: var(--color-border-primary) !important;
}
html[data-palette] .tag-medicamento .tag-remove-btn:hover {
    background-color: var(--color-bg-hover) !important;
}

/* ── UPLOAD PDF — segue o tema ── */
.pdf-upload-label {
    color: #4b5563;
}
.pdf-upload-label i {
    color: #ef4444;
}
.pdf-upload-input {
    color: #6b7280;
}
.pdf-upload-input::file-selector-button {
    margin-right: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    border: none;
    font-size: 10px;
    font-weight: 600;
    background-color: #fef2f2;
    color: #b91c1c;
    cursor: pointer;
    transition: background-color 0.15s;
}
.pdf-upload-input::file-selector-button:hover {
    background-color: #fee2e2;
}
html[data-palette] .pdf-upload-label {
    color: var(--color-text-secondary) !important;
}
html[data-palette] .pdf-upload-label i {
    color: var(--color-tab-active-text) !important;
}
html[data-palette] .pdf-upload-input {
    color: var(--color-text-secondary) !important;
}
html[data-palette] .pdf-upload-input::file-selector-button {
    background-color: var(--color-bg-secondary) !important;
    color: var(--color-tab-active-text) !important;
}
html[data-palette] .pdf-upload-input::file-selector-button:hover {
    background-color: var(--color-bg-hover) !important;
}
html[data-palette] .pdf-upload-section {
    border-color: var(--color-border-primary) !important;
}

/* ── ACORDEÕES LABORATÓRIO — segue o tema ── */
/* Header: substitui QUALQUER gradient (red, blue, amber, etc.) pelo tema */
html[data-palette] .lab-accordion-header[class*="bg-gradient"] {
    background: linear-gradient(to right, var(--color-bg-secondary), var(--color-bg-primary)) !important;
}
html[data-palette] .lab-accordion-header {
    background-color: var(--color-bg-primary) !important;
}

/* Ícone badge dentro do header */
html[data-palette] .lab-accordion-header span[class*="bg-gradient-to-br"] {
    background: linear-gradient(to bottom right, var(--color-bg-tertiary), var(--color-border-primary)) !important;
}

/* Ícones dentro dos badges */
html[data-palette] .lab-accordion-header span[class*="bg-gradient-to-br"] i {
    color: var(--color-tab-active-text) !important;
}

/* Título do accordion */
html[data-palette] .lab-accordion-header span.font-semibold {
    color: var(--color-text-primary) !important;
}

/* Chevron */
html[data-palette] .lab-accordion-chevron {
    color: var(--color-text-muted) !important;
}

/* Container do accordion */
html[data-palette] .lab-accordion {
    background-color: var(--color-bg-primary) !important;
    border-color: var(--color-border-primary) !important;
}
html[data-palette] #lab-accordions-container .lab-accordion:last-child {
    border-bottom-color: var(--color-border-primary) !important;
}

/* Dividers (Série Vermelha, Leucograma, etc.) */
html[data-palette] .lab-divider {
    color: var(--color-text-secondary) !important;
    border-bottom-color: var(--color-border-primary) !important;
}
html[data-palette] .lab-divider i.fa-circle {
    color: var(--color-tab-active-text) !important;
}

/* Sub-acordeões */
html[data-palette] .lab-sub-header {
    background-color: var(--color-bg-primary) !important;
}
html[data-palette] .lab-sub-header:hover {
    background-color: var(--color-bg-hover) !important;
}
html[data-palette] .lab-sub-chevron {
    color: var(--color-text-muted) !important;
}

/* Sticky header da aba Lab */
html[data-palette] .lab-tab-header-sticky {
    background: var(--color-bg-primary) !important;
}

/* ── BOTÃO "LIMPAR TUDO" — segue o tema ── */
.btn-limpar-tudo {
    color: #ef4444;
}
.btn-limpar-tudo:hover {
    color: #dc2626;
    text-decoration: underline;
}
html[data-palette] .btn-limpar-tudo {
    color: var(--color-tab-active-text) !important;
}
html[data-palette] .btn-limpar-tudo:hover {
    color: var(--color-text-primary) !important;
}

/* ── BOTÃO MICROFONE (dictation) — segue o tema ── */
html[data-palette] .dictation-btn-highlight {
    border-color: var(--color-border-focus) !important;
    background: var(--color-bg-secondary) !important;
    color: var(--color-tab-active-text) !important;
}
html[data-palette] .dictation-btn-highlight:hover {
    background: var(--color-bg-hover) !important;
    border-color: var(--color-tab-active-text) !important;
    box-shadow: 0 2px 8px var(--shadow-sm) !important;
}
html[data-palette] .dictation-btn-highlight.active {
    background: var(--color-tab-active-text) !important;
    color: var(--color-text-inverse, #ffffff) !important;
    border-color: var(--color-text-primary) !important;
}
html[data-palette] .dictation-btn-highlight.recording {
    animation: pulse-recording-palette 1.5s infinite;
}
@keyframes pulse-recording-palette {
    0%, 100% { box-shadow: 0 0 0 0 var(--color-border-focus); }
    50% { box-shadow: 0 0 0 8px transparent; }
}
html[data-palette] .dictation-status {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-tab-active-text) !important;
}

/* ── BOTÃO "GERAR CONDUTA IA" — segue o tema ── */
html[data-palette] .ia-btn-primary {
    background: linear-gradient(
        135deg,
        var(--color-text-primary) 0%,
        var(--color-tab-active-text) 50%,
        var(--color-border-focus) 100%
    ) !important;
    color: var(--color-text-inverse, #ffffff) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-tab-active-text) 35%, transparent),
                0 1px 3px rgba(0,0,0,0.08) !important;
}
html[data-palette] .ia-btn-primary:hover {
    box-shadow: 0 6px 20px color-mix(in srgb, var(--color-tab-active-text) 50%, transparent),
                0 2px 6px rgba(0,0,0,0.1) !important;
    transform: translateY(-1px);
}
html[data-palette] .ia-btn-primary:active {
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-tab-active-text) 30%, transparent) !important;
    transform: translateY(0);
}

/* ============================================
   DARK MODE v3.0 - OVERRIDES TAILWIND
   Paleta Médico Profissional
   ============================================ */

/* === BODY E BACKGROUNDS PRINCIPAIS === */
html.dark body {
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
}

html.dark .bg-white { background-color: var(--color-bg-secondary) !important; }
html.dark .bg-gray-50, html.dark .bg-slate-50 { background-color: var(--color-bg-secondary) !important; }
html.dark .bg-gray-100, html.dark .bg-slate-100 { background-color: var(--color-bg-tertiary) !important; }
html.dark .bg-gray-200, html.dark .bg-slate-200 { background-color: var(--color-bg-elevated) !important; }
html.dark .bg-\[\#f8fafc\] { background-color: var(--color-bg-secondary) !important; }
html.dark .bg-stone-50 { background-color: var(--color-bg-secondary) !important; }

/* === TEXTOS === */
html.dark .text-white { color: var(--color-text-primary) !important; }
html.dark .text-gray-300, html.dark .text-slate-300 { color: var(--color-text-secondary) !important; }
html.dark .text-gray-400, html.dark .text-slate-400 { color: var(--color-text-secondary) !important; }
html.dark .text-gray-500, html.dark .text-slate-500 { color: var(--color-text-secondary) !important; }
html.dark .text-gray-600, html.dark .text-slate-600 { color: var(--color-text-secondary) !important; }
html.dark .text-gray-700, html.dark .text-slate-700 { color: var(--color-text-primary) !important; }
html.dark .text-gray-800, html.dark .text-slate-800 { color: var(--color-text-primary) !important; }
html.dark .text-gray-900, html.dark .text-slate-900 { color: var(--color-text-primary) !important; }

/* === BORDAS === */
html.dark .border-gray-100, html.dark .border-slate-100 { border-color: var(--color-border-primary) !important; }
html.dark .border-gray-200, html.dark .border-slate-200 { border-color: var(--color-border-primary) !important; }
html.dark .border-gray-300, html.dark .border-slate-300 { border-color: var(--color-border-secondary) !important; }
html.dark .border-stone-200 { border-color: var(--color-border-primary) !important; }

/* === CORES SEMÂNTICAS - AZUL (Accent principal) === */
html.dark .bg-blue-50 { background-color: var(--color-low-bg) !important; }
html.dark .bg-blue-100 { background-color: var(--color-low-bg-hover) !important; }
html.dark .bg-blue-200 { background-color: rgba(88, 166, 255, 0.2) !important; }
html.dark .bg-blue-200\/50 { background-color: rgba(88, 166, 255, 0.1) !important; }
html.dark .bg-blue-500 { background-color: var(--accent-secondary) !important; }
html.dark .bg-blue-600 { background-color: var(--accent-secondary) !important; }
html.dark .text-blue-500 { color: var(--accent-primary) !important; }
html.dark .text-blue-600, html.dark .text-blue-700 { color: var(--accent-primary) !important; }
html.dark .text-blue-800 { color: var(--color-low-text) !important; }
html.dark .border-blue-100, html.dark .border-blue-200 { border-color: var(--color-low-border) !important; }
html.dark .border-blue-500 { border-color: var(--accent-primary) !important; }
html.dark .hover\:bg-blue-50:hover { background-color: var(--color-low-bg-hover) !important; }
html.dark .focus\:border-blue-400:focus { border-color: var(--accent-primary) !important; }
html.dark .focus\:ring-blue-100:focus { --tw-ring-color: var(--accent-muted) !important; }

/* === CORES SEMÂNTICAS - VERMELHO (Status crítico) === */
html.dark .bg-red-50 { background-color: var(--color-critical-bg) !important; }
html.dark .bg-red-100 { background-color: var(--color-critical-bg-hover) !important; }
html.dark .bg-red-200 { background-color: rgba(248, 81, 73, 0.25) !important; }
html.dark .bg-red-500, html.dark .bg-red-600 { background-color: var(--status-critical) !important; }
html.dark .text-red-500 { color: var(--status-critical) !important; }
html.dark .text-red-600, html.dark .text-red-700 { color: var(--status-critical) !important; }
html.dark .text-red-800, html.dark .text-red-900 { color: var(--color-critical-text) !important; }
html.dark .border-red-100, html.dark .border-red-200, html.dark .border-red-300 { border-color: var(--color-critical-border) !important; }
html.dark .hover\:bg-red-50:hover { background-color: var(--color-critical-bg-hover) !important; }

/* === CORES SEMÂNTICAS - LARANJA/ÂMBAR (Status warning) === */
html.dark .bg-orange-50, html.dark .bg-amber-50, html.dark .bg-yellow-50 { background-color: var(--color-high-bg) !important; }
html.dark .bg-orange-100, html.dark .bg-amber-100, html.dark .bg-yellow-100 { background-color: var(--color-high-bg-hover) !important; }
html.dark .bg-amber-500, html.dark .bg-orange-500, html.dark .bg-yellow-500 { background-color: var(--status-warning) !important; }
html.dark .text-orange-500, html.dark .text-amber-500, html.dark .text-yellow-500 { color: var(--status-warning) !important; }
html.dark .text-orange-600, html.dark .text-orange-700, html.dark .text-amber-600, html.dark .text-amber-700 { color: var(--status-warning) !important; }
html.dark .text-orange-800, html.dark .text-amber-800, html.dark .text-yellow-800 { color: var(--color-high-text) !important; }
html.dark .border-orange-100, html.dark .border-orange-200, html.dark .border-amber-200, html.dark .border-yellow-300 { border-color: var(--color-high-border) !important; }

/* === CORES SEMÂNTICAS - VERDE (Status success/normal) === */
html.dark .bg-green-50, html.dark .bg-emerald-50 { background-color: var(--color-safe-bg) !important; }
html.dark .bg-green-100, html.dark .bg-emerald-100 { background-color: var(--color-safe-bg-hover) !important; }
html.dark .bg-green-200, html.dark .bg-emerald-200 { background-color: rgba(63, 185, 80, 0.25) !important; }
html.dark .bg-green-500, html.dark .bg-emerald-500, html.dark .bg-green-600, html.dark .bg-emerald-600 { background-color: var(--status-success) !important; }
html.dark .bg-emerald-700 { background-color: rgba(63, 185, 80, 0.8) !important; }
html.dark .bg-gray-300 { background-color: var(--color-bg-elevated) !important; }
html.dark .text-green-500, html.dark .text-emerald-500 { color: var(--status-success) !important; }
html.dark .text-green-600, html.dark .text-green-700, html.dark .text-emerald-600, html.dark .text-emerald-700 { color: var(--status-success) !important; }
html.dark .text-green-800, html.dark .text-emerald-800 { color: var(--color-safe-text) !important; }
html.dark .border-green-100, html.dark .border-green-200, html.dark .border-emerald-200 { border-color: var(--color-safe-border) !important; }
html.dark .border-green-500 { border-color: var(--status-success) !important; }
html.dark .hover\:bg-green-50:hover, html.dark .hover\:bg-emerald-50:hover { background-color: var(--color-safe-bg-hover) !important; }
html.dark .hover\:bg-green-200:hover, html.dark .hover\:bg-emerald-200:hover { background-color: rgba(63, 185, 80, 0.3) !important; }
html.dark .hover\:bg-green-100:hover, html.dark .hover\:bg-emerald-100:hover { background-color: rgba(63, 185, 80, 0.2) !important; }

/* === CORES SEMÂNTICAS - ROSA/PINK (Pré-natal) === */
html.dark .bg-pink-50, html.dark .bg-rose-50 { background-color: var(--color-special-bg) !important; }
html.dark .bg-pink-100, html.dark .bg-rose-100 { background-color: var(--color-special-bg-hover) !important; }
html.dark .text-pink-500, html.dark .text-rose-500 { color: var(--color-special-accent) !important; }
html.dark .text-pink-600, html.dark .text-pink-700, html.dark .text-rose-700 { color: var(--color-special-accent) !important; }
html.dark .text-pink-800, html.dark .text-pink-900, html.dark .text-rose-800 { color: var(--color-special-text) !important; }
html.dark .border-pink-100, html.dark .border-pink-200, html.dark .border-rose-200 { border-color: var(--color-special-border) !important; }
html.dark .border-pink-500 { border-color: var(--color-special-accent) !important; }
html.dark .hover\:bg-pink-50:hover { background-color: var(--color-special-bg-hover) !important; }

/* === CORES SEMÂNTICAS - ROXO/VIOLETA (Monocromático no dark) === */
html.dark .bg-purple-50, html.dark .bg-violet-50, html.dark .bg-indigo-50 { background-color: var(--color-bg-tertiary) !important; }
html.dark .bg-purple-100, html.dark .bg-violet-100, html.dark .bg-indigo-100 { background-color: var(--color-bg-elevated) !important; }
html.dark .text-purple-500, html.dark .text-violet-500 { color: var(--accent-primary) !important; }
html.dark .text-purple-600, html.dark .text-purple-700, html.dark .text-violet-700, html.dark .text-indigo-700 { color: var(--accent-primary) !important; }
html.dark .border-purple-200, html.dark .border-violet-200, html.dark .border-indigo-200 { border-color: var(--color-border-secondary) !important; }

/* === CORES SEMÂNTICAS - CYAN/SKY === */
html.dark .bg-cyan-50, html.dark .bg-sky-50 { background-color: var(--color-low-bg) !important; }
html.dark .bg-cyan-100, html.dark .bg-sky-100 { background-color: var(--color-low-bg-hover) !important; }
html.dark .text-cyan-500, html.dark .text-sky-500 { color: var(--accent-primary) !important; }
html.dark .text-cyan-600, html.dark .text-cyan-700, html.dark .text-sky-600, html.dark .text-sky-700 { color: var(--accent-primary) !important; }
html.dark .border-cyan-200, html.dark .border-sky-200 { border-color: var(--color-low-border) !important; }

/* === CORES SEMÂNTICAS - TEAL/LIME (Monocromático) === */
html.dark .bg-teal-50, html.dark .bg-lime-50 { background-color: var(--color-bg-tertiary) !important; }
html.dark .text-teal-500, html.dark .text-lime-500 { color: var(--color-text-secondary) !important; }

/* === CORES SEMÂNTICAS - FUCHSIA (Monocromático) === */
html.dark .bg-fuchsia-50 { background-color: var(--color-bg-tertiary) !important; }
html.dark .text-fuchsia-500, html.dark .text-fuchsia-600 { color: var(--color-text-secondary) !important; }

/* === INPUTS E SELECTS === */
html.dark input, html.dark select, html.dark textarea {
    background-color: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark input:focus, html.dark select:focus, html.dark textarea:focus {
    border-color: var(--color-border-focus) !important;
    background-color: var(--color-bg-tertiary) !important;
    box-shadow: var(--shadow-focus) !important;
}

html.dark input::placeholder, html.dark textarea::placeholder {
    color: var(--color-text-muted) !important;
}

html.dark input:disabled, html.dark select:disabled {
    background-color: var(--color-bg-secondary) !important;
    color: var(--color-text-muted) !important;
}

/* === CHECKBOXES === */
html.dark input[type="checkbox"] {
    background-color: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark input[type="checkbox"]:checked {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

/* === HOVER STATES === */
html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-slate-50:hover { background-color: var(--color-bg-elevated) !important; }
html.dark .hover\:bg-gray-100:hover, html.dark .hover\:bg-slate-100:hover { background-color: var(--color-bg-elevated) !important; }
html.dark .hover\:bg-white:hover { background-color: var(--color-bg-elevated) !important; }
html.dark .hover\:text-gray-700:hover, html.dark .hover\:text-slate-700:hover { color: var(--color-text-primary) !important; }
html.dark .hover\:text-gray-600:hover { color: var(--color-text-primary) !important; }

/* === SOMBRAS === */
html.dark .shadow-sm { box-shadow: var(--shadow-sm) !important; }
html.dark .shadow, html.dark .shadow-md { box-shadow: var(--shadow-md) !important; }
html.dark .shadow-lg { box-shadow: var(--shadow-lg) !important; }
html.dark .shadow-xl, html.dark .shadow-2xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5) !important;
}

/* === GRADIENTES (Removidos/Neutralizados) === */
html.dark .from-blue-50, html.dark .from-red-50, html.dark .from-green-50,
html.dark .from-amber-50, html.dark .from-orange-50, html.dark .from-pink-50,
html.dark .from-purple-50, html.dark .from-slate-50, html.dark .from-emerald-50 {
    --tw-gradient-from: var(--color-bg-secondary) !important;
}

html.dark .to-blue-50, html.dark .to-red-50, html.dark .to-green-50,
html.dark .to-amber-200, html.dark .to-orange-200, html.dark .to-pink-200,
html.dark .to-slate-100, html.dark .to-emerald-50, html.dark .to-red-200,
html.dark .to-yellow-200, html.dark .to-rose-200 {
    --tw-gradient-to: var(--color-bg-tertiary) !important;
}

html.dark .via-white { --tw-gradient-via: var(--color-bg-tertiary) !important; }

/* Gradient backgrounds - NEUTRALIZAR */
html.dark .bg-gradient-to-r, html.dark .bg-gradient-to-br, html.dark .bg-gradient-to-b {
    background: var(--color-bg-secondary) !important;
}

/* === DIVISORES === */
html.dark .divide-gray-100 > * + *, html.dark .divide-gray-200 > * + *,
html.dark .divide-slate-100 > * + *, html.dark .divide-slate-200 > * + * {
    border-color: var(--color-border-primary) !important;
}

html.dark .divide-slate-50 > * + * {
    border-color: var(--color-border-primary) !important;
}

/* === RING/FOCUS === */
html.dark .ring-blue-100, html.dark .ring-blue-200 { --tw-ring-color: var(--accent-muted) !important; }
html.dark .ring-blue-500 { --tw-ring-color: rgba(88, 166, 255, 0.4) !important; }
html.dark .ring-green-500 { --tw-ring-color: rgba(63, 185, 80, 0.4) !important; }
html.dark .ring-red-500 { --tw-ring-color: rgba(248, 81, 73, 0.4) !important; }
html.dark .ring-pink-200 { --tw-ring-color: rgba(219, 112, 219, 0.2) !important; }
html.dark .ring-rose-100, html.dark .ring-rose-200 { --tw-ring-color: rgba(219, 112, 219, 0.15) !important; }
html.dark .focus\:ring-rose-100:focus { --tw-ring-color: rgba(219, 112, 219, 0.2) !important; }
html.dark .focus\:border-rose-300:focus { border-color: var(--color-special-border) !important; }

/* === OPACITY BACKGROUNDS === */
html.dark .bg-white\/60, html.dark .bg-white\/70, html.dark .bg-white\/80 {
    background-color: rgba(22, 27, 34, 0.8) !important;
}
html.dark .bg-white\/30 {
    background-color: rgba(22, 27, 34, 0.4) !important;
}
html.dark .bg-black\/50, html.dark .bg-black\/60 {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

/* === OPACITY VARIANTS - SEMANTIC COLORS === */
/* Sky/Cyan com opacidade */
html.dark .bg-sky-50\/60, html.dark .bg-sky-50\/50, html.dark .bg-sky-50\/30,
html.dark .bg-cyan-50\/60, html.dark .bg-cyan-50\/50, html.dark .bg-cyan-50\/30 {
    background-color: rgba(88, 166, 255, 0.1) !important;
}

/* Blue com opacidade */
html.dark .bg-blue-50\/30, html.dark .bg-blue-50\/20, html.dark .bg-blue-50\/10 {
    background-color: rgba(88, 166, 255, 0.08) !important;
}

/* Green/Emerald com opacidade */
html.dark .bg-green-50\/30, html.dark .bg-green-50\/50,
html.dark .bg-emerald-50\/30, html.dark .bg-emerald-50\/50 {
    background-color: rgba(63, 185, 80, 0.1) !important;
}

/* Red/Rose com opacidade */
html.dark .bg-red-50\/30, html.dark .bg-red-50\/50,
html.dark .bg-rose-50\/30, html.dark .bg-rose-50\/50, html.dark .bg-rose-50\/60 {
    background-color: rgba(248, 81, 73, 0.1) !important;
}

/* Pink com opacidade */
html.dark .bg-pink-50\/30, html.dark .bg-pink-50\/50, html.dark .bg-pink-50\/60 {
    background-color: rgba(219, 112, 219, 0.1) !important;
}

/* Yellow com opacidade */
html.dark .bg-yellow-50\/30, html.dark .bg-yellow-50\/50 {
    background-color: rgba(210, 153, 34, 0.1) !important;
}

/* Amber/Orange com opacidade */
html.dark .bg-amber-50\/30, html.dark .bg-amber-50\/50,
html.dark .bg-orange-50\/30, html.dark .bg-orange-50\/50 {
    background-color: rgba(210, 153, 34, 0.1) !important;
}

/* Indigo/Purple/Violet com opacidade */
html.dark .bg-indigo-50\/30, html.dark .bg-indigo-50\/50,
html.dark .bg-purple-50\/30, html.dark .bg-purple-50\/50,
html.dark .bg-violet-50\/30, html.dark .bg-violet-50\/50 {
    background-color: var(--color-bg-tertiary) !important;
}

/* Teal com opacidade */
html.dark .bg-teal-50\/30, html.dark .bg-teal-50\/50 {
    background-color: var(--color-bg-tertiary) !important;
}

/* Slate/Gray com opacidade */
html.dark .bg-slate-50\/30, html.dark .bg-slate-50\/50, html.dark .bg-slate-50\/70,
html.dark .bg-gray-50\/30, html.dark .bg-gray-50\/50, html.dark .bg-gray-50\/70 {
    background-color: var(--color-bg-secondary) !important;
}

/* === 100 OPACITY VARIANTS (headers) === */
html.dark .bg-red-100\/80, html.dark .bg-red-100\/70 {
    background-color: rgba(248, 81, 73, 0.15) !important;
}

html.dark .bg-orange-100\/80, html.dark .bg-orange-100\/70,
html.dark .bg-amber-100\/80, html.dark .bg-amber-100\/70 {
    background-color: rgba(210, 153, 34, 0.15) !important;
}

html.dark .bg-yellow-100\/80, html.dark .bg-yellow-100\/70 {
    background-color: rgba(210, 153, 34, 0.12) !important;
}

html.dark .bg-green-100\/80, html.dark .bg-green-100\/70,
html.dark .bg-emerald-100\/80, html.dark .bg-emerald-100\/70 {
    background-color: rgba(63, 185, 80, 0.15) !important;
}

html.dark .bg-blue-100\/80, html.dark .bg-blue-100\/70 {
    background-color: rgba(88, 166, 255, 0.15) !important;
}

html.dark .bg-pink-100\/80, html.dark .bg-pink-100\/70,
html.dark .bg-rose-100\/80, html.dark .bg-rose-100\/70 {
    background-color: rgba(219, 112, 219, 0.15) !important;
}

html.dark .bg-purple-100\/80, html.dark .bg-purple-100\/70,
html.dark .bg-violet-100\/80, html.dark .bg-violet-100\/70,
html.dark .bg-indigo-100\/80, html.dark .bg-indigo-100\/70 {
    background-color: var(--color-bg-elevated) !important;
}

/* === 50 COM 70 (cards de alerta) === */
html.dark .bg-red-50\/70, html.dark .bg-red-50\/80 {
    background-color: rgba(248, 81, 73, 0.12) !important;
}

html.dark .bg-orange-50\/70, html.dark .bg-orange-50\/80,
html.dark .bg-amber-50\/70, html.dark .bg-amber-50\/80 {
    background-color: rgba(210, 153, 34, 0.12) !important;
}

html.dark .bg-green-50\/70, html.dark .bg-green-50\/80,
html.dark .bg-emerald-50\/70, html.dark .bg-emerald-50\/80 {
    background-color: rgba(63, 185, 80, 0.12) !important;
}

html.dark .bg-blue-50\/70, html.dark .bg-blue-50\/80 {
    background-color: rgba(88, 166, 255, 0.12) !important;
}

html.dark .bg-pink-50\/70, html.dark .bg-pink-50\/80,
html.dark .bg-rose-50\/70, html.dark .bg-rose-50\/80 {
    background-color: rgba(219, 112, 219, 0.12) !important;
}

/* === BORDERS COM OPACIDADE === */
html.dark .border-sky-200\/60, html.dark .border-sky-100\/60,
html.dark .border-blue-200\/60, html.dark .border-blue-100\/60 {
    border-color: rgba(88, 166, 255, 0.25) !important;
}

html.dark .border-green-200\/60, html.dark .border-emerald-200\/60 {
    border-color: rgba(63, 185, 80, 0.25) !important;
}

html.dark .border-red-200\/60, html.dark .border-rose-200\/60, html.dark .border-rose-200\/70 {
    border-color: rgba(248, 81, 73, 0.25) !important;
}

html.dark .border-pink-200\/60 {
    border-color: rgba(219, 112, 219, 0.25) !important;
}

html.dark .border-amber-200\/60, html.dark .border-yellow-200\/60 {
    border-color: rgba(210, 153, 34, 0.25) !important;
}

html.dark .border-slate-200\/60, html.dark .border-gray-200\/60,
html.dark .border-slate-200\/70, html.dark .border-teal-200\/70 {
    border-color: var(--color-border-primary) !important;
}

/* ============================================
   DARK MODE v2.0 - BOTÃO E MENU
   ============================================ */

#dark-mode-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

#dark-mode-toggle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--color-border-primary);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: var(--shadow-lg);
    transition: all 0.2s ease;
}

#dark-mode-toggle:hover {
    transform: scale(1.05);
    border-color: var(--color-border-focus);
    color: var(--color-text-primary);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

#dark-mode-toggle:active {
    transform: scale(0.95);
}

/* Menu de opções */
#dark-mode-menu {
    position: absolute;
    bottom: 60px;
    right: 0;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    overflow: hidden;
    animation: fadeInUp 0.2s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.theme-menu-title {
    padding: 12px 16px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-light);
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    position: relative;
}

.theme-option:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.theme-option.active {
    background: var(--color-tab-active-bg);
    color: var(--color-tab-active-text);
}

.theme-option.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-tab-active-text);
    border-radius: 0 2px 2px 0;
}

.theme-option i {
    width: 20px;
    text-align: center;
    font-size: 14px;
}

.theme-option span:first-of-type {
    font-weight: 500;
    font-size: 13px;
}

.theme-desc {
    display: block;
    font-size: 10px;
    color: var(--color-text-muted);
    margin-left: auto;
}

.theme-option.active .theme-desc {
    color: var(--color-tab-active-text);
    opacity: 0.7;
}

/* === TRANSIÇÃO SUAVE GLOBAL === */
html.dark *, html.dark *::before, html.dark *::after {
    transition: background-color 0.3s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Desativa transição durante carregamento inicial */
html.no-transitions * {
    transition: none !important;
}

/* ============================================
   DARK MODE v3.0 - MÉDICO PROFISSIONAL
   Componentes Específicos
   ============================================ */

/* Correção para modais */
html.dark [class*="bg-black/"] {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Logo/Imagens - adiciona fundo para visibilidade */
html.dark img.logo {
    filter: brightness(0.9);
}

/* === ÍCONES MONOCROMÁTICOS === */
/* REGRA PRINCIPAL: Todos os ícones em cor neutra no dark mode */
/* Cores só para status clínicos (valores de exames) */
html.dark .fa-robot,
html.dark .fa-flask,
html.dark .fa-calculator,
html.dark .fa-pills,
html.dark .fa-kit-medical,
html.dark .fa-baby,
html.dark .fa-heart,
html.dark .fa-lungs,
html.dark .fa-kidney,
html.dark .fa-bone,
html.dark .fa-droplet,
html.dark .fa-virus,
html.dark .fa-dna,
html.dark .fa-brain,
html.dark .fa-shield-virus,
html.dark .fa-vial,
html.dark .fa-microscope,
html.dark .fa-syringe,
html.dark .fa-stethoscope,
html.dark .fa-user-doctor,
html.dark .fa-hospital,
html.dark .fa-thermometer-half,
html.dark .fa-weight,
html.dark .fa-ruler-vertical,
html.dark .fa-person,
html.dark .fa-venus,
html.dark .fa-mars,
html.dark .fa-calendar,
html.dark .fa-id-card {
    color: var(--color-text-secondary) !important;
}

/* Ícones de navegação/tabs - todos mesma cor */
html.dark .tab-btn i,
html.dark [role="tab"] i,
html.dark nav i {
    color: inherit !important;
}

/* Exceção: ícones dentro de alertas clínicos mantêm a cor do status */
html.dark .card-critical i,
html.dark .card-high i,
html.dark [class*="bg-red-"] i:not(.tab-btn i),
html.dark [class*="bg-orange-"] i:not(.tab-btn i),
html.dark [class*="bg-amber-"] i:not(.tab-btn i) {
    color: inherit !important;
}

/* Badge de notificação - apenas para contagem */
html.dark .bg-amber-500 {
    background-color: var(--status-warning) !important;
}

/* Tabela de preços CMED */
html.dark table th {
    background-color: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
}

html.dark table td {
    border-color: var(--color-border-primary) !important;
}

html.dark table tr:hover td {
    background-color: var(--color-bg-hover) !important;
}

/* Fix específico para o header/navegação */
html.dark .bg-gradient-to-r {
    background: linear-gradient(to right, var(--color-bg-tertiary), var(--color-bg-secondary)) !important;
}

/* Fix para scrollbar do sistema */
html.dark {
    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

html.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark ::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
}

html.dark ::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar-thumb);
    border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-scrollbar-thumb-hover);
}

/* ============================================
   AJUSTES ADICIONAIS DARK MODE v2.0
   ============================================ */

/* Cards e containers principais */
html.dark .monitor-card {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark .monitor-card:hover {
    border-color: var(--color-border-secondary) !important;
}

/* Editor de anamnese */
html.dark [contenteditable="true"] {
    background: var(--color-bg-input) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-input) !important;
}

html.dark [contenteditable="true"]:focus {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-focus) !important;
}

/* Abas de navegação */
html.dark .tab-btn {
    color: var(--color-text-tertiary) !important;
}

html.dark .tab-btn:hover {
    color: var(--color-text-primary) !important;
    background: var(--color-bg-hover) !important;
}

html.dark .tab-btn.active,
html.dark .tab-btn[aria-selected="true"] {
    background: var(--color-tab-active-bg) !important;
    color: var(--color-tab-active-text) !important;
}

/* Seções accordion/details */
html.dark details {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark details summary {
    color: var(--color-text-primary) !important;
}

html.dark details summary:hover {
    background: var(--color-bg-hover) !important;
}

/* Tooltips customizados */
html.dark .tooltip,
html.dark [data-tooltip]::after {
    background: var(--color-tooltip-bg) !important;
    color: var(--color-tooltip-text) !important;
}

/* Dropdown de busca de exames */
html.dark #exam-search-results {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark .search-result-item:hover {
    background: var(--color-bg-hover) !important;
}

/* Badges e pills */
html.dark .badge,
html.dark .pill {
    border-color: var(--color-border-secondary) !important;
}

/* Links */
html.dark a:not([class]) {
    color: var(--color-low-accent) !important;
}

html.dark a:not([class]):hover {
    color: var(--color-low-text) !important;
}

/* Separadores horizontais */
html.dark hr {
    border-color: var(--color-border-primary) !important;
}

/* Código/monospace */
html.dark code,
html.dark pre {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
}

/* Botões secundários */
html.dark .btn-secondary,
html.dark button[class*="bg-slate-"],
html.dark button[class*="bg-gray-"] {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-secondary) !important;
}

html.dark .btn-secondary:hover,
html.dark button[class*="bg-slate-"]:hover,
html.dark button[class*="bg-gray-"]:hover {
    background: var(--color-bg-hover) !important;
}

/* Campos com status de exame - ajuste fino */
html.dark input[class*="border-green"],
html.dark input[class*="bg-green"] {
    background: var(--color-safe-bg) !important;
    border-color: var(--color-safe-border) !important;
    color: var(--color-safe-text) !important;
}

html.dark input[class*="border-orange"],
html.dark input[class*="bg-orange"] {
    background: var(--color-high-bg) !important;
    border-color: var(--color-high-border) !important;
    color: var(--color-high-text) !important;
}

html.dark input[class*="border-red"],
html.dark input[class*="bg-red"] {
    background: var(--color-critical-bg) !important;
    border-color: var(--color-critical-border) !important;
    color: var(--color-critical-text) !important;
}

/* Animação suave de fade in */
@keyframes darkFadeIn {
    from { opacity: 0.8; }
    to { opacity: 1; }
}

html.dark {
    animation: darkFadeIn 0.3s ease;
}

/* ============================================
   DARK MODE v3.0 - COMPONENTES ESPECÍFICOS
   Paleta Médico Profissional - Monocromático
   ============================================ */

/* === SEÇÃO INFORMAÇÕES & BIOMETRIA === */
html.dark #patient-info-section,
html.dark [data-section="patient-info"] {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark #patient-info-section label,
html.dark [data-section="patient-info"] label {
    color: var(--color-text-secondary) !important;
}

/* === SINAIS VITAIS === */
html.dark #vital-signs,
html.dark [data-section="vital-signs"] {
    background: var(--color-bg-secondary) !important;
}

html.dark #vital-signs .grid > div {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
}

/* === ACCORDIONS - SEM BORDAS COLORIDAS === */
/* Comorbidades e Medicamentos - monocromático */
html.dark details[open] {
    background: var(--color-bg-secondary) !important;
}

html.dark details > summary {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

/* Remove bordas coloridas laterais dos accordions */
html.dark details::before,
html.dark details summary::before {
    background: var(--color-border-secondary) !important;
}

/* Accordion content */
html.dark details > div,
html.dark details > section,
html.dark details .accordion-content {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

/* === CATEGORIAS DE EXAMES - MONOCROMÁTICO === */
/* Remove cores vibrantes das categorias de exames */
html.dark .exam-category,
html.dark [data-category],
html.dark .lab-category {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark .exam-category:hover,
html.dark [data-category]:hover,
html.dark .lab-category:hover {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border-secondary) !important;
}

/* Ícones de categoria - TODOS MONOCROMÁTICOS */
html.dark .exam-category i,
html.dark [data-category] i,
html.dark .lab-category i,
html.dark .category-icon {
    color: var(--color-text-secondary) !important;
}

/* Cabeçalhos de categoria */
html.dark .exam-category-header,
html.dark .lab-category-header {
    color: var(--color-text-primary) !important;
    border-bottom-color: var(--color-border-primary) !important;
}

/* === INPUTS DE EXAMES COM STATUS === */
/* Normal - verde sutil */
html.dark input.exam-normal,
html.dark input[data-status="normal"] {
    background: var(--status-success-bg) !important;
    border-color: var(--status-success) !important;
    color: var(--color-safe-text) !important;
}

/* Alterado - amarelo/warning */
html.dark input.exam-warning,
html.dark input[data-status="warning"],
html.dark input[data-status="high"],
html.dark input[data-status="low"] {
    background: var(--status-warning-bg) !important;
    border-color: var(--status-warning) !important;
    color: var(--color-high-text) !important;
}

/* Crítico - vermelho */
html.dark input.exam-critical,
html.dark input[data-status="critical"] {
    background: var(--status-critical-bg) !important;
    border-color: var(--status-critical) !important;
    color: var(--color-critical-text) !important;
}

/* === MONITOR CLÍNICO === */
html.dark #clinical-monitor,
html.dark .clinical-monitor,
html.dark [data-monitor] {
    background: var(--color-bg-primary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark .monitor-header {
    background: var(--color-bg-secondary) !important;
    border-bottom-color: var(--color-border-primary) !important;
}

html.dark .monitor-content {
    background: var(--color-bg-primary) !important;
}

/* Cards do monitor - mantém cores de status */
html.dark .monitor-card.card-critical {
    background: linear-gradient(135deg, var(--status-critical-bg) 0%, rgba(248, 81, 73, 0.08) 100%) !important;
    border-left: 4px solid var(--status-critical) !important;
}

html.dark .monitor-card.card-high,
html.dark .monitor-card.card-moderate {
    background: linear-gradient(135deg, var(--status-warning-bg) 0%, rgba(210, 153, 34, 0.08) 100%) !important;
    border-left: 4px solid var(--status-warning) !important;
}

html.dark .monitor-card.card-low,
html.dark .monitor-card.card-info {
    background: var(--color-bg-tertiary) !important;
    border-left: 4px solid var(--color-border-secondary) !important;
}

/* === EDITOR DE ANAMNESE (SOAP) === */
html.dark .soap-editor,
html.dark #anamnesis-editor,
html.dark .rich-editor {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

html.dark .soap-editor:focus,
html.dark #anamnesis-editor:focus,
html.dark .rich-editor:focus {
    background: var(--color-bg-secondary) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: var(--shadow-focus) !important;
}

html.dark .soap-section-header,
html.dark .soap-label {
    color: var(--accent-primary) !important;
    border-bottom-color: var(--color-border-primary) !important;
}

/* === BOTÕES === */
/* Botão Primário */
html.dark .btn-primary,
html.dark button.bg-blue-500,
html.dark button.bg-blue-600,
html.dark button[class*="bg-blue-"] {
    background-color: var(--accent-secondary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--accent-primary) !important;
}

html.dark .btn-primary:hover,
html.dark button.bg-blue-500:hover,
html.dark button.bg-blue-600:hover,
html.dark button[class*="bg-blue-"]:hover {
    background-color: var(--accent-primary) !important;
}

/* Botão Secundário */
html.dark .btn-secondary,
html.dark button.bg-gray-100,
html.dark button.bg-gray-200,
html.dark button.bg-slate-100,
html.dark button.bg-slate-200 {
    background-color: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-secondary) !important;
}

html.dark .btn-secondary:hover,
html.dark button.bg-gray-100:hover,
html.dark button.bg-gray-200:hover,
html.dark button.bg-slate-100:hover,
html.dark button.bg-slate-200:hover {
    background-color: var(--color-bg-elevated) !important;
}

/* Botão de Ação/Perigo */
html.dark .btn-danger,
html.dark button.bg-red-500,
html.dark button.bg-red-600 {
    background-color: var(--status-critical) !important;
    color: var(--color-text-primary) !important;
}

html.dark .btn-danger:hover,
html.dark button.bg-red-500:hover,
html.dark button.bg-red-600:hover {
    background-color: #da3633 !important;
}

/* === CAMPOS DE BUSCA === */
html.dark .search-input,
html.dark #global-search-input,
html.dark input[type="search"] {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

html.dark .search-input:focus,
html.dark #global-search-input:focus,
html.dark input[type="search"]:focus {
    background: var(--color-bg-secondary) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: var(--shadow-focus) !important;
}

html.dark .search-input::placeholder,
html.dark #global-search-input::placeholder,
html.dark input[type="search"]::placeholder {
    color: var(--color-text-muted) !important;
}

/* === CAMPOS DATE === */
html.dark input[type="date"] {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
}

/* === SCROLLBARS CUSTOMIZADAS === */
html.dark *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark *::-webkit-scrollbar-track {
    background: var(--color-bg-primary);
    border-radius: 4px;
}

html.dark *::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: 4px;
}

html.dark *::-webkit-scrollbar-thumb:hover {
    background: var(--accent-muted);
}

/* === TAGS DE MEDICAMENTOS === */
html.dark .med-tag,
html.dark .medication-tag,
html.dark .tag-input-tag {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border-secondary) !important;
    color: var(--color-text-primary) !important;
}

html.dark .med-tag:hover,
html.dark .medication-tag:hover,
html.dark .tag-input-tag:hover {
    background: var(--accent-muted) !important;
    border-color: var(--accent-primary) !important;
}

/* Botão de remover tag */
html.dark .med-tag .remove-btn,
html.dark .medication-tag .remove-btn,
html.dark .tag-input-tag button {
    color: var(--color-text-muted) !important;
}

html.dark .med-tag .remove-btn:hover,
html.dark .medication-tag .remove-btn:hover,
html.dark .tag-input-tag button:hover {
    color: var(--status-critical) !important;
}

/* === COMORBIDADES TAGS === */
html.dark .comorbidity-tag {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border-secondary) !important;
    color: var(--color-text-primary) !important;
}

/* === DROPDOWN AUTOCOMPLETE === */
html.dark .autocomplete-dropdown,
html.dark #med-autocomplete,
html.dark .search-results-dropdown {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border-primary) !important;
    box-shadow: var(--shadow-lg) !important;
}

html.dark .autocomplete-item,
html.dark .med-autocomplete-item {
    color: var(--color-text-primary) !important;
    border-bottom-color: var(--color-border-primary) !important;
}

html.dark .autocomplete-item:hover,
html.dark .med-autocomplete-item:hover,
html.dark .autocomplete-item.selected {
    background: var(--color-bg-hover) !important;
}

/* === MODAIS === */
html.dark .modal,
html.dark [role="dialog"] {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark .modal-header {
    border-bottom-color: var(--color-border-primary) !important;
}

html.dark .modal-footer {
    border-top-color: var(--color-border-primary) !important;
    background: var(--color-bg-tertiary) !important;
}

/* === TABELAS === */
html.dark table {
    border-color: var(--color-border-primary) !important;
}

html.dark thead {
    background: var(--color-bg-tertiary) !important;
}

html.dark th {
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark td {
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

html.dark tr:nth-child(even) {
    background: var(--color-bg-secondary) !important;
}

html.dark tr:hover {
    background: var(--color-bg-hover) !important;
}

/* === INTERAÇÕES MEDICAMENTOSAS === */
html.dark .interaction-card {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
}

/* Interação grave */
html.dark .interaction-card.severity-major,
html.dark .interaction-card[data-severity="major"] {
    border-left: 4px solid var(--status-critical) !important;
    background: var(--status-critical-bg) !important;
}

/* Interação moderada */
html.dark .interaction-card.severity-moderate,
html.dark .interaction-card[data-severity="moderate"] {
    border-left: 4px solid var(--status-warning) !important;
    background: var(--status-warning-bg) !important;
}

/* Interação leve */
html.dark .interaction-card.severity-minor,
html.dark .interaction-card[data-severity="minor"] {
    border-left: 4px solid var(--color-border-secondary) !important;
    background: var(--color-bg-tertiary) !important;
}

/* === ALERTAS DE GRAVIDEZ/LACTAÇÃO === */
html.dark .pregnancy-alert,
html.dark .lactation-alert {
    background: var(--status-warning-bg) !important;
    border-color: var(--status-warning) !important;
    color: var(--color-high-text) !important;
}

/* === HEADER/NAVEGAÇÃO PRINCIPAL === */
html.dark header,
html.dark .main-header,
html.dark nav.main-nav {
    background: var(--color-bg-secondary) !important;
    border-bottom-color: var(--color-border-primary) !important;
}

/* === SIDEBAR === */
html.dark aside,
html.dark .sidebar {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

/* === FOOTER === */
html.dark footer {
    background: var(--color-bg-tertiary) !important;
    border-top-color: var(--color-border-primary) !important;
    color: var(--color-text-secondary) !important;
}

/* === ESTADO VAZIO === */
html.dark .empty-state,
html.dark .no-data,
html.dark .no-results {
    color: var(--color-text-muted) !important;
}

html.dark .empty-state i {
    color: var(--color-text-muted) !important;
}

/* === LOADING/SPINNER === */
html.dark .loading,
html.dark .spinner {
    border-color: var(--color-border-primary) !important;
    border-top-color: var(--accent-primary) !important;
}

/* === PROGRESS BAR === */
html.dark .progress-bar {
    background: var(--color-bg-tertiary) !important;
}

html.dark .progress-bar-fill {
    background: var(--accent-primary) !important;
}

/* === TOOLTIPS ARIA === */
html.dark [data-tooltip]:hover::after,
html.dark .tooltip-content {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-secondary) !important;
}

/* === ALERTAS DE CATEGORIAS FDA (Gestação) === */
html.dark [data-categoria="X"],
html.dark .categoria-x {
    background: var(--status-critical-bg) !important;
    border-color: var(--status-critical) !important;
    color: var(--color-critical-text) !important;
}

html.dark [data-categoria="D"],
html.dark .categoria-d {
    background: var(--status-warning-bg) !important;
    border-color: var(--status-warning) !important;
    color: var(--color-high-text) !important;
}

html.dark [data-categoria="C"],
html.dark .categoria-c {
    background: var(--status-warning-bg) !important;
    border-color: var(--status-warning) !important;
    color: var(--color-high-text) !important;
}

/* === RECEITUÁRIO BADGES === */
html.dark .receita-badge,
html.dark [data-receita] {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
}

/* === SELEÇÃO DE TEXTO === */
html.dark ::selection {
    background: var(--accent-muted) !important;
    color: var(--color-text-primary) !important;
}

/* === FOCUS VISIBLE (Acessibilidade) === */
html.dark *:focus-visible {
    outline: 2px solid var(--accent-primary) !important;
    outline-offset: 2px !important;
}

/* === PLACEHOLDER TEXT === */
html.dark ::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 1 !important;
}

/* === DISABLED STATES === */
html.dark *:disabled,
html.dark [disabled],
html.dark .disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* === READONLY STATES === */
html.dark input:read-only,
html.dark textarea:read-only {
    background: var(--color-bg-secondary) !important;
    color: var(--color-text-secondary) !important;
}

/* === MEDIA PRINT - Força Light Mode === */
@media print {
    html.dark {
        --color-bg-primary: #ffffff;
        --color-bg-secondary: #f8fafc;
        --color-text-primary: #1e293b;
        --color-text-secondary: #475569;
        --color-border-primary: #e2e8f0;
    }
}

/* ============================================
   DARK MODE v3.0 - PADRONIZAÇÃO COMPLETA
   Aba Calculadoras, Medicamentos, Monitor Clínico
   ============================================ */

/* ═══════════════════════════════════════════
   1. ABA CALCULADORAS
   ═══════════════════════════════════════════ */

/* Cards de Calculadora (PREVENT, SCORE2, etc) */
html.dark .calculator-card,
html.dark [data-calculator],
html.dark #tab-calc .bg-white,
html.dark #tab-calc .bg-gray-50,
html.dark #tab-calc .bg-slate-50 {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark .calculator-card-header,
html.dark #tab-calc .rounded-t-xl,
html.dark #tab-calc .rounded-t-lg {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark .calculator-card-title,
html.dark #tab-calc h3,
html.dark #tab-calc .font-bold {
    color: var(--color-text-primary) !important;
}

html.dark .calculator-card-subtitle,
html.dark #tab-calc .text-sm.text-gray-500,
html.dark #tab-calc .text-xs.text-gray-500 {
    color: var(--color-text-secondary) !important;
}

/* Ícone/emoji do card */
html.dark .calculator-card-icon,
html.dark #tab-calc .text-3xl,
html.dark #tab-calc .text-4xl {
    color: var(--accent-primary) !important;
}

/* Badge tipo "Logístico", "Europa" */
html.dark .calculator-badge,
html.dark #tab-calc span[class*="bg-"][class*="text-"][class*="rounded"] {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-secondary) !important;
    border: 1px solid var(--color-border-primary) !important;
}

html.dark .calculator-badge:hover {
    background: var(--accent-muted) !important;
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

/* Seção "DADOS DO SISTEMA" - CRÍTICO */
html.dark .calculator-data-section,
html.dark #tab-calc .bg-gray-100,
html.dark #tab-calc .bg-slate-100,
html.dark #tab-calc .bg-stone-100,
html.dark #tab-calc [class*="bg-gray-1"],
html.dark #tab-calc [class*="bg-slate-1"] {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark .calculator-data-section-title,
html.dark #tab-calc .text-xs.uppercase,
html.dark #tab-calc .text-\[10px\].uppercase {
    color: var(--accent-primary) !important;
}

/* Campo individual */
html.dark .calculator-data-field,
html.dark #tab-calc .bg-white.rounded,
html.dark #tab-calc .bg-white.p-2,
html.dark #tab-calc .bg-white.p-3 {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark .calculator-data-field-label {
    color: var(--color-text-secondary) !important;
}

html.dark .calculator-data-field-value {
    color: var(--accent-primary) !important;
}

html.dark .calculator-data-field-value.empty,
html.dark #tab-calc .text-gray-400 {
    color: var(--color-text-muted) !important;
}

/* Seção "INFORMAÇÕES ADICIONAIS" */
html.dark .calculator-info-section {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
}

/* Selects dentro */
html.dark .calculator-select,
html.dark #tab-calc select {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

html.dark #tab-calc select:focus {
    border-color: var(--color-border-focus) !important;
    box-shadow: var(--shadow-focus) !important;
}

html.dark .calculator-select-label,
html.dark #tab-calc label {
    color: var(--color-text-secondary) !important;
}

/* Botão "Calcular PREVENT" */
html.dark .calculator-submit-btn,
html.dark #tab-calc button[class*="bg-blue"],
html.dark #tab-calc button[class*="bg-emerald"],
html.dark #tab-calc button[class*="bg-green"] {
    background: var(--accent-secondary) !important;
    color: var(--color-text-primary) !important;
    border: none !important;
}

html.dark .calculator-submit-btn:hover,
html.dark #tab-calc button[class*="bg-blue"]:hover,
html.dark #tab-calc button[class*="bg-emerald"]:hover {
    background: var(--accent-primary) !important;
}

/* Botão de ação secundário */
html.dark .calculator-action-btn,
html.dark #tab-calc button[class*="bg-gray"],
html.dark #tab-calc button[class*="bg-slate"] {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-secondary) !important;
}

html.dark .calculator-action-btn:hover,
html.dark #tab-calc button[class*="bg-gray"]:hover,
html.dark #tab-calc button[class*="bg-slate"]:hover {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
}

/* Mensagens de Erro/Validação */
html.dark .calculator-error-message,
html.dark #tab-calc .bg-red-50,
html.dark #tab-calc .bg-red-100 {
    background: var(--status-critical-bg) !important;
    border-color: var(--status-critical) !important;
    color: var(--color-critical-text) !important;
}

/* Resultado da Calculadora */
html.dark .calculator-result {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark .calculator-result-value {
    color: var(--color-text-primary) !important;
}

html.dark .calculator-result-label {
    color: var(--color-text-secondary) !important;
}

/* Classificação de risco */
html.dark .calculator-risk-low,
html.dark .risk-low,
html.dark [data-risk="low"] {
    color: var(--status-success) !important;
}

html.dark .calculator-risk-moderate,
html.dark .risk-moderate,
html.dark [data-risk="moderate"] {
    color: var(--status-warning) !important;
}

html.dark .calculator-risk-high,
html.dark .risk-high,
html.dark [data-risk="high"] {
    color: var(--status-critical) !important;
}

/* Gráfico de risco (gauge/progress) */
html.dark #tab-calc .bg-gradient-to-r {
    background: var(--color-bg-tertiary) !important;
}

html.dark #tab-calc [class*="from-green"],
html.dark #tab-calc [class*="from-emerald"] {
    background: linear-gradient(to right, var(--status-success), var(--status-warning), var(--status-critical)) !important;
}

/* ═══════════════════════════════════════════
   2. ABA MEDICAMENTOS
   ═══════════════════════════════════════════ */

/* Card de Medicamento */
html.dark .medication-card,
html.dark #tab-meds .bg-white,
html.dark #tab-meds [class*="rounded-xl"][class*="border"] {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark .medication-card-header {
    border-bottom-color: var(--color-border-primary) !important;
}

html.dark .medication-name,
html.dark #tab-meds .font-bold,
html.dark #tab-meds .font-semibold {
    color: var(--color-text-primary) !important;
}

/* Ícone do medicamento */
html.dark .medication-icon {
    background: var(--color-bg-elevated) !important;
    color: var(--accent-primary) !important;
}

/* Container das tags */
html.dark .medication-tags {
    gap: 6px;
}

/* Tag base - TODAS as tags devem seguir este padrão */
html.dark .medication-tag,
html.dark #tab-meds span[class*="px-"][class*="py-"][class*="rounded"],
html.dark #tab-meds .tag-input-tag {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border-secondary) !important;
}

/* Tag de classe terapêutica (Antibiótico - Macrolídeo) */
html.dark .medication-tag.class,
html.dark #tab-meds span[class*="bg-blue-"][class*="text-blue-"],
html.dark #tab-meds span[class*="bg-indigo-"][class*="text-indigo-"],
html.dark #tab-meds span[class*="bg-purple-"][class*="text-purple-"],
html.dark #tab-meds span[class*="bg-violet-"][class*="text-violet-"] {
    background: var(--accent-muted) !important;
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

/* Tag SUS */
html.dark .medication-tag.sus,
html.dark #tab-meds span[class*="bg-green-"][class*="text-green-"]:not([class*="pregnancy"]) {
    background: var(--status-success-bg) !important;
    color: var(--status-success) !important;
    border-color: var(--status-success) !important;
}

/* Tag Receita (Receita Simples, Receita Controlada, etc) */
html.dark .medication-tag.prescription,
html.dark #tab-meds span[class*="bg-gray-"][class*="text-gray-"],
html.dark #tab-meds span[class*="bg-slate-"][class*="text-slate-"] {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-secondary) !important;
}

/* Tag Gestação - cores baseadas na categoria */
html.dark .medication-tag.pregnancy-a,
html.dark .medication-tag.pregnancy-b,
html.dark [data-pregnancy="A"],
html.dark [data-pregnancy="B"] {
    background: var(--status-success-bg) !important;
    color: var(--status-success) !important;
    border-color: var(--status-success) !important;
}

html.dark .medication-tag.pregnancy-c,
html.dark [data-pregnancy="C"] {
    background: var(--status-warning-bg) !important;
    color: var(--status-warning) !important;
    border-color: var(--status-warning) !important;
}

html.dark .medication-tag.pregnancy-d,
html.dark .medication-tag.pregnancy-x,
html.dark [data-pregnancy="D"],
html.dark [data-pregnancy="X"] {
    background: var(--status-critical-bg) !important;
    color: var(--status-critical) !important;
    border-color: var(--status-critical) !important;
}

/* Tag Lactação */
html.dark .medication-tag.lactation-safe {
    background: var(--status-success-bg) !important;
    color: var(--status-success) !important;
    border-color: var(--status-success) !important;
}

html.dark .medication-tag.lactation-caution {
    background: var(--status-warning-bg) !important;
    color: var(--status-warning) !important;
    border-color: var(--status-warning) !important;
}

html.dark .medication-tag.lactation-unsafe {
    background: var(--status-critical-bg) !important;
    color: var(--status-critical) !important;
    border-color: var(--status-critical) !important;
}

/* Seções do Medicamento (Mecanismo de Ação, Posologia, etc) */
html.dark .medication-section {
    border-bottom-color: var(--color-border-primary) !important;
}

html.dark .medication-section-title,
html.dark #tab-meds .text-xs.uppercase.text-blue-600,
html.dark #tab-meds .text-\[10px\].uppercase {
    color: var(--accent-primary) !important;
}

html.dark .medication-section-content {
    color: var(--color-text-primary) !important;
}

/* Botões do Card de Medicamento */
html.dark .medication-btn-presentations,
html.dark #tab-meds button[class*="bg-green"],
html.dark #tab-meds button[class*="bg-emerald"] {
    background: var(--status-success) !important;
    color: #ffffff !important;
}

html.dark .medication-btn-presentations:hover {
    background: #2ea043 !important;
}

html.dark .medication-btn-action {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-secondary) !important;
}

html.dark .medication-btn-action:hover {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
}

html.dark .medication-btn-close {
    color: var(--color-text-muted) !important;
}

html.dark .medication-btn-close:hover {
    background: var(--status-critical-bg) !important;
    color: var(--status-critical) !important;
}

/* Autocomplete de medicamentos */
html.dark #med-autocomplete,
html.dark .med-autocomplete-dropdown {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark .med-autocomplete-item {
    color: var(--color-text-primary) !important;
    border-bottom-color: var(--color-border-primary) !important;
}

html.dark .med-autocomplete-item:hover {
    background: var(--color-bg-hover) !important;
}

html.dark .med-autocomplete-item .text-gray-500,
html.dark .med-autocomplete-item .text-slate-500 {
    color: var(--color-text-secondary) !important;
}

/* Navegação por categorias de medicamentos */
html.dark .categoria-btn,
html.dark #tab-meds [data-categoria] {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark .categoria-btn:hover,
html.dark #tab-meds [data-categoria]:hover {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border-secondary) !important;
}

html.dark .categoria-btn i,
html.dark #tab-meds [data-categoria] i {
    color: var(--color-text-secondary) !important;
}

/* ═══════════════════════════════════════════
   3. MONITOR CLÍNICO - ALERTAS
   ═══════════════════════════════════════════ */

/* Container de Alerta */
html.dark .clinical-alert,
html.dark #clinical-alerts .bg-white,
html.dark .monitor-sidebar .bg-white {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

/* Header do Grupo de Alertas (NUTRICIONAL, DEFICIÊNCIAS, etc) */
html.dark .alert-group-header,
html.dark .monitor-card-header,
html.dark #clinical-alerts [class*="bg-amber-"],
html.dark #clinical-alerts [class*="bg-yellow-"],
html.dark #clinical-alerts [class*="bg-orange-"]:not(.alert-item-icon) {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
}

html.dark .alert-group-title {
    color: var(--color-text-primary) !important;
}

/* Ícone do grupo - monocromático ou accent */
html.dark .alert-group-icon,
html.dark #clinical-alerts .fa-apple-whole,
html.dark #clinical-alerts .fa-leaf,
html.dark #clinical-alerts .fa-utensils,
html.dark #clinical-alerts .fa-bone,
html.dark #clinical-alerts .fa-capsules {
    color: var(--accent-primary) !important;
}

/* Badge de contagem */
html.dark .alert-group-count {
    background: var(--accent-muted) !important;
    color: var(--accent-primary) !important;
}

/* Item de Alerta Individual */
html.dark .alert-item {
    border-bottom-color: var(--color-border-primary) !important;
}

html.dark .alert-item-title {
    color: var(--color-text-primary) !important;
}

/* Ícone de severidade do alerta */
html.dark .alert-item-icon.warning {
    background: var(--status-warning-bg) !important;
    color: var(--status-warning) !important;
}

html.dark .alert-item-icon.critical {
    background: var(--status-critical-bg) !important;
    color: var(--status-critical) !important;
}

html.dark .alert-item-icon.info {
    background: var(--accent-muted) !important;
    color: var(--accent-primary) !important;
}

/* Badge de Ação do Alerta (CONSIDERAR, ATENÇÃO, etc) */
html.dark .alert-action-badge,
html.dark #clinical-alerts span[class*="uppercase"][class*="text-\["],
html.dark .monitor-card span[class*="uppercase"] {
    background: var(--color-bg-elevated) !important;
    border: 1px solid var(--color-border-secondary) !important;
}

html.dark .alert-action-badge.consider,
html.dark .alert-action-badge.attention,
html.dark #clinical-alerts .bg-amber-100,
html.dark #clinical-alerts .bg-yellow-100,
html.dark #clinical-alerts .bg-orange-100 {
    background: var(--status-warning-bg) !important;
    color: var(--status-warning) !important;
    border-color: var(--status-warning) !important;
}

html.dark .alert-action-badge.urgent,
html.dark #clinical-alerts .bg-red-100 {
    background: var(--status-critical-bg) !important;
    color: var(--status-critical) !important;
    border-color: var(--status-critical) !important;
}

html.dark .alert-action-badge.info {
    background: var(--accent-muted) !important;
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

/* Conteúdo do Alerta */
html.dark .alert-item-content {
    color: var(--color-text-secondary) !important;
}

html.dark .alert-item-content strong {
    color: var(--color-text-primary) !important;
}

/* Recomendação clínica */
html.dark .alert-recommendation,
html.dark #clinical-alerts [class*="border-l-"][class*="pl-"] {
    background: var(--color-bg-tertiary) !important;
    border-left-color: var(--accent-primary) !important;
}

html.dark .alert-recommendation-icon {
    color: var(--status-warning) !important;
}

html.dark .alert-recommendation-text {
    color: var(--color-text-primary) !important;
}

/* Link de Referência (Diretrizes BRASPEN 2023, etc) */
html.dark .alert-reference-link,
html.dark #clinical-alerts a {
    color: var(--accent-primary) !important;
}

html.dark .alert-reference-link:hover {
    text-decoration: underline !important;
}

/* ═══════════════════════════════════════════
   4. ELEMENTOS GERAIS ADICIONAIS
   ═══════════════════════════════════════════ */

/* Tooltips */
html.dark .tooltip,
html.dark [role="tooltip"] {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Dropdowns/Menus */
html.dark .dropdown-menu,
html.dark [role="menu"],
html.dark .context-menu {
    background: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html.dark .dropdown-item,
html.dark [role="menuitem"] {
    color: var(--color-text-primary) !important;
}

html.dark .dropdown-item:hover,
html.dark [role="menuitem"]:hover {
    background: var(--color-bg-tertiary) !important;
}

html.dark .dropdown-item.active {
    background: var(--accent-muted) !important;
    color: var(--accent-primary) !important;
}

html.dark .dropdown-divider {
    border-top-color: var(--color-border-primary) !important;
}

/* Modais */
html.dark .modal-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
}

html.dark .modal-content,
html.dark [role="dialog"] > div {
    background: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border-primary) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

html.dark .modal-header {
    border-bottom-color: var(--color-border-primary) !important;
}

html.dark .modal-title {
    color: var(--color-text-primary) !important;
}

html.dark .modal-close-btn {
    color: var(--color-text-muted) !important;
}

html.dark .modal-close-btn:hover {
    color: var(--color-text-primary) !important;
    background: var(--color-bg-tertiary) !important;
}

html.dark .modal-body {
    color: var(--color-text-primary) !important;
}

html.dark .modal-footer {
    border-top-color: var(--color-border-primary) !important;
}

/* Loading/Spinner */
html.dark .spinner,
html.dark .loading-spinner {
    border-color: var(--color-bg-elevated) !important;
    border-top-color: var(--accent-primary) !important;
}

html.dark .loading-text {
    color: var(--color-text-muted) !important;
}

/* Empty States */
html.dark .empty-state {
    color: var(--color-text-secondary) !important;
}

html.dark .empty-state-icon {
    color: var(--color-text-muted) !important;
    opacity: 0.4 !important;
}

html.dark .empty-state-title {
    color: var(--color-text-secondary) !important;
}

html.dark .empty-state-description {
    color: var(--color-text-muted) !important;
}

/* Upload de Arquivo */
html.dark .file-upload-area {
    background: var(--color-bg-tertiary) !important;
    border: 2px dashed var(--color-border-primary) !important;
}

html.dark .file-upload-area:hover,
html.dark .file-upload-area.dragover {
    border-color: var(--accent-primary) !important;
    background: var(--accent-muted) !important;
}

html.dark .file-upload-btn {
    background: transparent !important;
    color: var(--accent-primary) !important;
    border: 1px solid var(--accent-primary) !important;
}

html.dark .file-upload-btn:hover {
    background: var(--accent-muted) !important;
}

html.dark .file-upload-text {
    color: var(--color-text-muted) !important;
}

/* ═══════════════════════════════════════════
   5. OVERRIDE GLOBAL - GARANTIA FINAL
   Catch-all para elementos que podem ter escapado
   ═══════════════════════════════════════════ */

/* Qualquer elemento com fundo branco/claro dentro de tabs */
html.dark [id^="tab-"] .bg-white,
html.dark [id^="tab-"] .bg-gray-50,
html.dark [id^="tab-"] .bg-slate-50,
html.dark [id^="tab-"] .bg-stone-50 {
    background: var(--color-bg-secondary) !important;
}

/* Qualquer elemento com fundo cinza claro */
html.dark [id^="tab-"] .bg-gray-100,
html.dark [id^="tab-"] .bg-slate-100,
html.dark [id^="tab-"] .bg-stone-100 {
    background: var(--color-bg-tertiary) !important;
}

/* Textos cinza escuro */
html.dark [id^="tab-"] .text-gray-800,
html.dark [id^="tab-"] .text-slate-800,
html.dark [id^="tab-"] .text-gray-900,
html.dark [id^="tab-"] .text-slate-900 {
    color: var(--color-text-primary) !important;
}

/* Textos cinza médio */
html.dark [id^="tab-"] .text-gray-600,
html.dark [id^="tab-"] .text-slate-600,
html.dark [id^="tab-"] .text-gray-500,
html.dark [id^="tab-"] .text-slate-500 {
    color: var(--color-text-secondary) !important;
}

/* Bordas */
html.dark [id^="tab-"] .border-gray-200,
html.dark [id^="tab-"] .border-slate-200,
html.dark [id^="tab-"] .border-gray-100,
html.dark [id^="tab-"] .border-slate-100 {
    border-color: var(--color-border-primary) !important;
}

/* Divisores */
html.dark [id^="tab-"] .divide-gray-100 > * + *,
html.dark [id^="tab-"] .divide-gray-200 > * + *,
html.dark [id^="tab-"] .divide-slate-100 > * + *,
html.dark [id^="tab-"] .divide-slate-200 > * + * {
    border-color: var(--color-border-primary) !important;
}

/* Inputs dentro de qualquer tab */
html.dark [id^="tab-"] input:not([type="checkbox"]):not([type="radio"]),
html.dark [id^="tab-"] select,
html.dark [id^="tab-"] textarea {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

html.dark [id^="tab-"] input:focus,
html.dark [id^="tab-"] select:focus,
html.dark [id^="tab-"] textarea:focus {
    border-color: var(--color-border-focus) !important;
    box-shadow: var(--shadow-focus) !important;
}

/* Seletor de tabs na própria aba de medicamentos */
html.dark #tab-meds .border-b-2.border-blue-500,
html.dark #tab-meds .border-b-2.border-emerald-500 {
    border-bottom-color: var(--accent-primary) !important;
}

html.dark #tab-meds [class*="border-b-2"]:not(.border-b-2.border-blue-500):not(.border-b-2.border-emerald-500) {
    border-bottom-color: transparent !important;
}

/* Ícones coloridos em abas - forçar monocromático */
html.dark [id^="tab-"] i[class*="text-blue-"],
html.dark [id^="tab-"] i[class*="text-emerald-"],
html.dark [id^="tab-"] i[class*="text-green-"],
html.dark [id^="tab-"] i[class*="text-purple-"],
html.dark [id^="tab-"] i[class*="text-pink-"],
html.dark [id^="tab-"] i[class*="text-amber-"],
html.dark [id^="tab-"] i[class*="text-orange-"],
html.dark [id^="tab-"] i[class*="text-indigo-"],
html.dark [id^="tab-"] i[class*="text-cyan-"],
html.dark [id^="tab-"] i[class*="text-teal-"] {
    color: var(--color-text-secondary) !important;
}

/* Exceção: ícones dentro de badges de status clínico mantêm cor */
html.dark [id^="tab-"] [class*="bg-red-"] i,
html.dark [id^="tab-"] [class*="bg-amber-"] i,
html.dark [id^="tab-"] [class*="bg-green-"] i {
    color: inherit !important;
}

/* ═══════════════════════════════════════════
   6. CORES ADICIONAIS - SKY, TEAL, INDIGO
   Para Calculadoras e outros componentes
   ═══════════════════════════════════════════ */

/* Sky colors - usados em PREVENT */
html.dark .from-sky-50,
html.dark .to-sky-50,
html.dark .bg-sky-50 {
    background-color: var(--color-bg-tertiary) !important;
}

html.dark .from-blue-50,
html.dark .to-blue-50 {
    background-color: var(--color-bg-tertiary) !important;
}

html.dark .bg-sky-100 {
    background-color: var(--color-bg-elevated) !important;
}

html.dark .border-sky-100,
html.dark .border-sky-200 {
    border-color: var(--color-border-primary) !important;
}

html.dark .text-sky-600,
html.dark .text-sky-700,
html.dark .text-sky-800 {
    color: var(--accent-primary) !important;
}

html.dark .bg-sky-600 {
    background-color: var(--accent-secondary) !important;
}

html.dark .bg-sky-600:hover,
html.dark .hover\:bg-sky-700:hover {
    background-color: var(--accent-primary) !important;
}

/* Teal/Emerald colors - usados em SCORE2 */
html.dark .from-emerald-50,
html.dark .to-emerald-50,
html.dark .from-teal-50,
html.dark .to-teal-50 {
    --tw-gradient-from: var(--color-bg-secondary) !important;
    --tw-gradient-to: var(--color-bg-secondary) !important;
    background: var(--color-bg-secondary) !important;
}

html.dark .bg-emerald-100 {
    background-color: var(--color-bg-elevated) !important;
}

html.dark .border-emerald-200,
html.dark .border-teal-200 {
    border-color: var(--color-border-primary) !important;
}

html.dark .text-emerald-600,
html.dark .text-emerald-700,
html.dark .text-emerald-800,
html.dark .text-teal-600 {
    color: var(--accent-primary) !important;
}

/* Indigo colors - Refinamento de Risco */
html.dark .bg-indigo-50 {
    background-color: var(--color-bg-tertiary) !important;
}

html.dark .border-indigo-200 {
    border-color: var(--color-border-primary) !important;
}

html.dark .text-indigo-600,
html.dark .text-indigo-700 {
    color: var(--accent-primary) !important;
}

/* Gradientes de risco (gauge) - verde para vermelho */
html.dark .from-green-200,
html.dark .via-yellow-200,
html.dark .to-red-200 {
    --tw-gradient-from: var(--status-success) !important;
    --tw-gradient-via: var(--status-warning) !important;
    --tw-gradient-to: var(--status-critical) !important;
}

html.dark .bg-gradient-to-r.from-green-200 {
    background: linear-gradient(to right,
        rgba(63, 185, 80, 0.3),
        rgba(210, 153, 34, 0.3),
        rgba(248, 81, 73, 0.3)) !important;
}

/* Barra de marcador do gauge */
html.dark .bg-slate-800 {
    background-color: var(--color-text-primary) !important;
}

/* Notas/Info box */
html.dark .bg-blue-50 {
    background-color: var(--color-bg-tertiary) !important;
}

html.dark .border-blue-200 {
    border-color: var(--color-border-primary) !important;
}

html.dark .text-blue-800 {
    color: var(--accent-primary) !important;
}

/* Amber/Warning sections */
html.dark .bg-amber-50\/50,
html.dark .bg-amber-50 {
    background-color: var(--color-bg-tertiary) !important;
}

html.dark .border-amber-200 {
    border-color: var(--color-border-primary) !important;
}

html.dark .text-amber-700,
html.dark .text-amber-500 {
    color: var(--status-warning) !important;
}

/* Checkboxes estilizados */
html.dark .form-checkbox {
    background-color: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-secondary) !important;
}

html.dark .form-checkbox:checked {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

html.dark .text-indigo-600.form-checkbox:checked {
    background-color: var(--accent-primary) !important;
}

html.dark .text-red-600.form-checkbox:checked {
    background-color: var(--status-critical) !important;
}

/* White with opacity backgrounds */
html.dark .bg-white\/60,
html.dark .bg-white\/70 {
    background-color: var(--color-bg-secondary) !important;
}

/* Debug/pre blocks */
html.dark pre.bg-slate-800 {
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
}

html.dark .text-slate-200 {
    color: var(--color-text-secondary) !important;
}

/* Details/Summary */
html.dark #tab-calc details {
    background: var(--color-bg-secondary) !important;
}

html.dark #tab-calc summary {
    color: var(--color-text-secondary) !important;
}

html.dark #tab-calc summary:hover {
    color: var(--accent-primary) !important;
}

/* Resultado boxes - bordas coloridas */
html.dark .border-2.border-sky-300 {
    border-color: var(--accent-primary) !important;
}

html.dark .border-2.border-emerald-300 {
    border-color: var(--accent-primary) !important;
}

/* Error messages inline */
html.dark .border-l-4.border-red-400 {
    border-left-color: var(--status-critical) !important;
}

/* ═══════════════════════════════════════════
   7. ABA EMERGÊNCIA - Cores específicas
   ═══════════════════════════════════════════ */

html.dark #tab-emergency .from-red-600,
html.dark #tab-emergency .to-red-700 {
    background: linear-gradient(to right, var(--status-critical), #da3633) !important;
}

html.dark #tab-emergency .bg-gradient-to-r {
    background: linear-gradient(to right, var(--status-critical), #da3633) !important;
}

/* ═══════════════════════════════════════════
   8. GARANTIA FINAL - Catch-all adicional
   ═══════════════════════════════════════════ */

/* Qualquer texto com cor gray-* dentro de tabs */
html.dark [id^="tab-"] .text-gray-400 {
    color: var(--color-text-muted) !important;
}

html.dark [id^="tab-"] span.text-gray-500,
html.dark [id^="tab-"] label.text-gray-600 {
    color: var(--color-text-secondary) !important;
}

/* Borders do gray */
html.dark [id^="tab-"] .border-gray-300 {
    border-color: var(--color-border-primary) !important;
}

/* Focus states */
html.dark [id^="tab-"] .focus\:border-sky-500:focus,
html.dark [id^="tab-"] .focus\:border-emerald-500:focus,
html.dark [id^="tab-"] .focus\:border-blue-500:focus {
    border-color: var(--color-border-focus) !important;
}

/* ═══════════════════════════════════════════
   9. MONITOR CLÍNICO - HEADERS DE GRUPO
   CORREÇÃO CRÍTICA: Remover fundos coloridos vibrantes
   ═══════════════════════════════════════════ */

/* Headers de todas as categorias - FORÇAR fundo neutro */
html.dark .monitor-sidebar [class*="bg-red-100"],
html.dark .monitor-sidebar [class*="bg-rose-100"],
html.dark .monitor-sidebar [class*="bg-sky-100"],
html.dark .monitor-sidebar [class*="bg-emerald-100"],
html.dark .monitor-sidebar [class*="bg-amber-100"],
html.dark .monitor-sidebar [class*="bg-orange-100"],
html.dark .monitor-sidebar [class*="bg-violet-100"],
html.dark .monitor-sidebar [class*="bg-lime-100"],
html.dark .monitor-sidebar [class*="bg-green-100"],
html.dark .monitor-sidebar [class*="bg-fuchsia-100"],
html.dark .monitor-sidebar [class*="bg-blue-100"],
html.dark .monitor-sidebar [class*="bg-indigo-100"],
html.dark .monitor-sidebar [class*="bg-purple-100"],
html.dark .monitor-sidebar [class*="bg-slate-100"],
html.dark .monitor-sidebar [class*="bg-yellow-100"],
html.dark .monitor-sidebar [class*="bg-teal-100"],
html.dark .monitor-sidebar [class*="bg-cyan-100"],
html.dark #clinical-monitor [class*="bg-red-100"],
html.dark #clinical-monitor [class*="bg-rose-100"],
html.dark #clinical-monitor [class*="bg-sky-100"],
html.dark #clinical-monitor [class*="bg-emerald-100"],
html.dark #clinical-monitor [class*="bg-amber-100"],
html.dark #clinical-monitor [class*="bg-orange-100"],
html.dark #clinical-monitor [class*="bg-violet-100"],
html.dark #clinical-monitor [class*="bg-lime-100"],
html.dark #clinical-monitor [class*="bg-green-100"],
html.dark #clinical-monitor [class*="bg-fuchsia-100"],
html.dark #clinical-monitor [class*="bg-blue-100"],
html.dark #clinical-monitor [class*="bg-indigo-100"],
html.dark #clinical-monitor [class*="bg-purple-100"],
html.dark #clinical-monitor [class*="bg-slate-100"],
html.dark #clinical-monitor [class*="bg-yellow-100"],
html.dark #clinical-monitor [class*="bg-teal-100"],
html.dark #clinical-monitor [class*="bg-cyan-100"],
html.dark aside [class*="bg-red-100"],
html.dark aside [class*="bg-rose-100"],
html.dark aside [class*="bg-sky-100"],
html.dark aside [class*="bg-emerald-100"],
html.dark aside [class*="bg-amber-100"],
html.dark aside [class*="bg-orange-100"],
html.dark aside [class*="bg-violet-100"],
html.dark aside [class*="bg-lime-100"],
html.dark aside [class*="bg-green-100"],
html.dark aside [class*="bg-fuchsia-100"],
html.dark aside [class*="bg-blue-100"],
html.dark aside [class*="bg-indigo-100"],
html.dark aside [class*="bg-purple-100"],
html.dark aside [class*="bg-slate-100"],
html.dark aside [class*="bg-yellow-100"] {
    background: var(--color-bg-tertiary) !important;
}

/* Headers com opacity (bg-xxx-100/80) - CATCH ALL */
html.dark [class*="100\/80"],
html.dark [class*="100\/70"],
html.dark [class*="100\/60"] {
    background: var(--color-bg-tertiary) !important;
}

/* Cards de alertas - fundo neutro com borda lateral colorida */
html.dark .monitor-card {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

/* Borda lateral para indicar severidade - via ::before */
html.dark .monitor-card.card-critical::before {
    background: var(--status-critical) !important;
}

html.dark .monitor-card.card-high::before,
html.dark .monitor-card.card-moderate::before {
    background: var(--status-warning) !important;
}

html.dark .monitor-card.card-low::before,
html.dark .monitor-card.card-info::before {
    background: var(--color-border-secondary) !important;
}

/* Textos de categoria - cores neutras (monitor/sidebar) */
html.dark .monitor-sidebar [class*="text-red-800"],
html.dark .monitor-sidebar [class*="text-rose-800"],
html.dark .monitor-sidebar [class*="text-sky-800"],
html.dark .monitor-sidebar [class*="text-emerald-800"],
html.dark .monitor-sidebar [class*="text-amber-800"],
html.dark .monitor-sidebar [class*="text-orange-800"],
html.dark .monitor-sidebar [class*="text-violet-800"],
html.dark .monitor-sidebar [class*="text-lime-800"],
html.dark .monitor-sidebar [class*="text-green-800"],
html.dark .monitor-sidebar [class*="text-fuchsia-800"],
html.dark .monitor-sidebar [class*="text-blue-800"],
html.dark .monitor-sidebar [class*="text-indigo-800"],
html.dark .monitor-sidebar [class*="text-purple-800"],
html.dark .monitor-sidebar [class*="text-yellow-800"],
html.dark #clinical-monitor [class*="text-red-800"],
html.dark #clinical-monitor [class*="text-rose-800"],
html.dark #clinical-monitor [class*="text-sky-800"],
html.dark #clinical-monitor [class*="text-emerald-800"],
html.dark #clinical-monitor [class*="text-amber-800"],
html.dark #clinical-monitor [class*="text-orange-800"],
html.dark #clinical-monitor [class*="text-violet-800"],
html.dark #clinical-monitor [class*="text-lime-800"],
html.dark #clinical-monitor [class*="text-green-800"],
html.dark #clinical-monitor [class*="text-fuchsia-800"],
html.dark #clinical-monitor [class*="text-blue-800"],
html.dark #clinical-monitor [class*="text-indigo-800"],
html.dark #clinical-monitor [class*="text-purple-800"],
html.dark #clinical-monitor [class*="text-yellow-800"],
html.dark aside [class*="text-red-800"],
html.dark aside [class*="text-rose-800"],
html.dark aside [class*="text-sky-800"],
html.dark aside [class*="text-emerald-800"],
html.dark aside [class*="text-amber-800"],
html.dark aside [class*="text-orange-800"],
html.dark aside [class*="text-violet-800"],
html.dark aside [class*="text-lime-800"],
html.dark aside [class*="text-green-800"],
html.dark aside [class*="text-fuchsia-800"],
html.dark aside [class*="text-blue-800"],
html.dark aside [class*="text-indigo-800"],
html.dark aside [class*="text-purple-800"],
html.dark aside [class*="text-yellow-800"] {
    color: var(--color-text-primary) !important;
}

/* Badges de severidade - CONSIDERAR, ATENÇÃO - outline style */
html.dark .monitor-sidebar [class*="bg-yellow-100"][class*="text-yellow"],
html.dark .monitor-sidebar [class*="bg-amber-100"][class*="text-amber"],
html.dark #clinical-monitor [class*="bg-yellow-100"][class*="text-yellow"],
html.dark #clinical-monitor [class*="bg-amber-100"][class*="text-amber"],
html.dark aside [class*="bg-yellow-100"][class*="text-yellow"],
html.dark aside [class*="bg-amber-100"][class*="text-amber"] {
    background: transparent !important;
    color: var(--status-warning) !important;
    border: 1px solid var(--status-warning) !important;
}

/* Badge ATENÇÃO - bg-orange-500 text-white */
html.dark .monitor-sidebar [class*="bg-orange-500"],
html.dark #clinical-monitor [class*="bg-orange-500"],
html.dark aside [class*="bg-orange-500"] {
    background: transparent !important;
    color: var(--status-warning) !important;
    border: 1px solid var(--status-warning) !important;
}

/* Badge CRÍTICO - bg-red text-white */
html.dark .monitor-sidebar [class*="bg-red-"][class*="text-white"],
html.dark #clinical-monitor [class*="bg-red-"][class*="text-white"],
html.dark aside [class*="bg-red-"][class*="text-white"] {
    background: transparent !important;
    color: var(--status-critical) !important;
    border: 1px solid var(--status-critical) !important;
}

/* Fundos de cards 50 (bg-xxx-50) - monitor sidebar */
html.dark .monitor-sidebar [class*="bg-red-50"],
html.dark .monitor-sidebar [class*="bg-rose-50"],
html.dark .monitor-sidebar [class*="bg-sky-50"],
html.dark .monitor-sidebar [class*="bg-emerald-50"],
html.dark .monitor-sidebar [class*="bg-amber-50"],
html.dark .monitor-sidebar [class*="bg-orange-50"],
html.dark .monitor-sidebar [class*="bg-violet-50"],
html.dark .monitor-sidebar [class*="bg-lime-50"],
html.dark .monitor-sidebar [class*="bg-green-50"],
html.dark .monitor-sidebar [class*="bg-fuchsia-50"],
html.dark .monitor-sidebar [class*="bg-blue-50"],
html.dark .monitor-sidebar [class*="bg-indigo-50"],
html.dark .monitor-sidebar [class*="bg-purple-50"],
html.dark .monitor-sidebar [class*="bg-slate-50"],
html.dark .monitor-sidebar [class*="bg-yellow-50"],
html.dark #clinical-monitor [class*="bg-red-50"],
html.dark #clinical-monitor [class*="bg-rose-50"],
html.dark #clinical-monitor [class*="bg-sky-50"],
html.dark #clinical-monitor [class*="bg-emerald-50"],
html.dark #clinical-monitor [class*="bg-amber-50"],
html.dark #clinical-monitor [class*="bg-orange-50"],
html.dark #clinical-monitor [class*="bg-violet-50"],
html.dark #clinical-monitor [class*="bg-lime-50"],
html.dark #clinical-monitor [class*="bg-green-50"],
html.dark #clinical-monitor [class*="bg-fuchsia-50"],
html.dark #clinical-monitor [class*="bg-blue-50"],
html.dark #clinical-monitor [class*="bg-indigo-50"],
html.dark #clinical-monitor [class*="bg-purple-50"],
html.dark #clinical-monitor [class*="bg-slate-50"],
html.dark #clinical-monitor [class*="bg-yellow-50"],
html.dark aside [class*="bg-red-50"],
html.dark aside [class*="bg-rose-50"],
html.dark aside [class*="bg-sky-50"],
html.dark aside [class*="bg-emerald-50"],
html.dark aside [class*="bg-amber-50"],
html.dark aside [class*="bg-orange-50"],
html.dark aside [class*="bg-violet-50"],
html.dark aside [class*="bg-lime-50"],
html.dark aside [class*="bg-green-50"],
html.dark aside [class*="bg-fuchsia-50"],
html.dark aside [class*="bg-blue-50"],
html.dark aside [class*="bg-indigo-50"],
html.dark aside [class*="bg-purple-50"],
html.dark aside [class*="bg-slate-50"],
html.dark aside [class*="bg-yellow-50"] {
    background: var(--color-bg-secondary) !important;
}

/* Textos coloridos (600, 700, 900) - neutralizar */
html.dark .monitor-sidebar [class*="text-"][class*="-900"],
html.dark #clinical-monitor [class*="text-"][class*="-900"],
html.dark aside [class*="text-"][class*="-900"] {
    color: var(--color-text-primary) !important;
}

html.dark .monitor-sidebar [class*="text-"][class*="-700"],
html.dark #clinical-monitor [class*="text-"][class*="-700"],
html.dark aside [class*="text-"][class*="-700"] {
    color: var(--color-text-secondary) !important;
}

html.dark .monitor-sidebar [class*="text-"][class*="-600"]:not([class*="text-red-600"]):not([class*="text-orange-600"]):not([class*="text-amber-600"]),
html.dark #clinical-monitor [class*="text-"][class*="-600"]:not([class*="text-red-600"]):not([class*="text-orange-600"]):not([class*="text-amber-600"]),
html.dark aside [class*="text-"][class*="-600"]:not([class*="text-red-600"]):not([class*="text-orange-600"]):not([class*="text-amber-600"]) {
    color: var(--color-text-secondary) !important;
}

/* Bordas de divisão dentro do monitor */
html.dark .monitor-sidebar .divide-slate-50 > * + *,
html.dark .monitor-sidebar .divide-slate-100 > * + *,
html.dark #clinical-monitor .divide-slate-50 > * + *,
html.dark #clinical-monitor .divide-slate-100 > * + *,
html.dark aside .divide-slate-50 > * + *,
html.dark aside .divide-slate-100 > * + * {
    border-color: var(--color-border-primary) !important;
}

html.dark .monitor-sidebar .border-slate-100,
html.dark .monitor-sidebar .border-t,
html.dark #clinical-monitor .border-slate-100,
html.dark #clinical-monitor .border-t,
html.dark aside .border-slate-100,
html.dark aside .border-t {
    border-color: var(--color-border-primary) !important;
}

/* Forçar links para accent */
html.dark .monitor-sidebar a,
html.dark #clinical-monitor a,
html.dark aside a {
    color: var(--accent-primary) !important;
}

/* Recomendações clínicas - borda lateral */
html.dark .monitor-sidebar [class*="border-l-"][class*="pl-"],
html.dark #clinical-monitor [class*="border-l-"][class*="pl-"],
html.dark aside [class*="border-l-"][class*="pl-"] {
    background: var(--color-bg-tertiary) !important;
    border-left-color: var(--accent-primary) !important;
}

/* Badges de status inline - base */
html.dark .monitor-sidebar span[class*="bg-"][class*="text-"][class*="rounded"]:not([class*="bg-red-"]):not([class*="bg-orange-"]):not([class*="bg-amber-"]):not([class*="bg-yellow-"]):not([class*="bg-green-"]):not([class*="bg-emerald-"]),
html.dark #clinical-monitor span[class*="bg-"][class*="text-"][class*="rounded"]:not([class*="bg-red-"]):not([class*="bg-orange-"]):not([class*="bg-amber-"]):not([class*="bg-yellow-"]):not([class*="bg-green-"]):not([class*="bg-emerald-"]),
html.dark aside span[class*="bg-"][class*="text-"][class*="rounded"]:not([class*="bg-red-"]):not([class*="bg-orange-"]):not([class*="bg-amber-"]):not([class*="bg-yellow-"]):not([class*="bg-green-"]):not([class*="bg-emerald-"]) {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border-secondary) !important;
}

/* Exceções: badges de status clínico mantêm cores semânticas */
html.dark .monitor-sidebar span[class*="bg-red-"][class*="text-red-"],
html.dark #clinical-monitor span[class*="bg-red-"][class*="text-red-"],
html.dark aside span[class*="bg-red-"][class*="text-red-"] {
    background: var(--status-critical-bg) !important;
    color: var(--status-critical) !important;
    border: 1px solid var(--status-critical) !important;
}

html.dark .monitor-sidebar span[class*="bg-amber-"][class*="text-amber-"],
html.dark .monitor-sidebar span[class*="bg-orange-"][class*="text-orange-"],
html.dark .monitor-sidebar span[class*="bg-yellow-"][class*="text-yellow-"],
html.dark #clinical-monitor span[class*="bg-amber-"][class*="text-amber-"],
html.dark #clinical-monitor span[class*="bg-orange-"][class*="text-orange-"],
html.dark #clinical-monitor span[class*="bg-yellow-"][class*="text-yellow-"],
html.dark aside span[class*="bg-amber-"][class*="text-amber-"],
html.dark aside span[class*="bg-orange-"][class*="text-orange-"],
html.dark aside span[class*="bg-yellow-"][class*="text-yellow-"] {
    background: var(--status-warning-bg) !important;
    color: var(--status-warning) !important;
    border: 1px solid var(--status-warning) !important;
}

html.dark .monitor-sidebar span[class*="bg-green-"][class*="text-green-"],
html.dark .monitor-sidebar span[class*="bg-emerald-"][class*="text-emerald-"],
html.dark #clinical-monitor span[class*="bg-green-"][class*="text-green-"],
html.dark #clinical-monitor span[class*="bg-emerald-"][class*="text-emerald-"],
html.dark aside span[class*="bg-green-"][class*="text-green-"],
html.dark aside span[class*="bg-emerald-"][class*="text-emerald-"] {
    background: var(--status-success-bg) !important;
    color: var(--status-success) !important;
    border: 1px solid var(--status-success) !important;
}

/* White backgrounds dentro do monitor */
html.dark .monitor-sidebar .bg-white,
html.dark #clinical-monitor .bg-white,
html.dark aside .bg-white {
    background: var(--color-bg-secondary) !important;
}

/* ═══════════════════════════════════════════
   10. MONITOR CLÍNICO - CONTAINER PRINCIPAL
   ═══════════════════════════════════════════ */

/* Container principal do Monitor Clínico */
html.dark .lg\:col-span-5 > div > .bg-white,
html.dark #clinical-notes {
    background: var(--color-bg-secondary) !important;
}

/* Borda lateral azul -> accent */
html.dark .border-l-4.border-blue-500 {
    border-left-color: var(--accent-primary) !important;
    background: var(--color-bg-secondary) !important;
}

/* Header do Monitor Clínico */
html.dark .lg\:col-span-5 h3 {
    color: var(--color-text-primary) !important;
    border-bottom-color: var(--color-border-primary) !important;
}

html.dark .lg\:col-span-5 .fa-microscope {
    color: var(--accent-primary) !important;
}

/* Painel Pré-Natal */
html.dark #prenatal-panel {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-special-border) !important;
}

html.dark #prenatal-panel h4 {
    color: var(--color-special-text) !important;
}

html.dark #prenatal-content {
    color: var(--color-text-primary) !important;
}

/* === PRENATAL: Achados de Imagem + Botão SP === */
.prenatal-findings-box {
    transition: all 0.2s ease;
}

.prenatal-sp-btn {
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    min-width: 36px;
    text-align: center;
    transition: background 0.15s;
}

.prenatal-sp-btn:hover {
    background: #2563eb;
}

/* === PRENATAL: Badges de Risco Gestacional === */
.risk-badge-alto {
    display: inline-block;
    background: #fecaca;
    color: #991b1b;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid #f87171;
    letter-spacing: 0.02em;
}

.risk-badge-intermediario {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid #fbbf24;
    letter-spacing: 0.02em;
}

.risk-badge-habitual {
    display: inline-block;
    background: #d1fae5;
    color: #065f46;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid #34d399;
    letter-spacing: 0.02em;
}

/* === Dark Mode: Prenatal Findings + Risk Badges === */
html.dark .prenatal-sp-btn {
    background: #2563eb;
}

html.dark .prenatal-sp-btn:hover {
    background: #3b82f6;
}

html.dark .prenatal-findings-box textarea {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark .risk-badge-alto {
    background: #450a0a;
    color: #fca5a5;
    border-color: #dc2626;
}

html.dark .risk-badge-intermediario {
    background: #451a03;
    color: #fcd34d;
    border-color: #d97706;
}

html.dark .risk-badge-habitual {
    background: #052e16;
    color: #6ee7b7;
    border-color: #059669;
}

/* Empty state do monitor */
html.dark #clinical-notes .text-gray-400,
html.dark #clinical-notes .text-gray-500 {
    color: var(--color-text-muted) !important;
}

/* Smart Paste section */
html.dark .lg\:col-span-5 .border-t {
    border-top-color: var(--color-border-primary) !important;
}

html.dark .lg\:col-span-5 label {
    color: var(--color-text-secondary) !important;
}

html.dark .lg\:col-span-5 .fa-magic {
    color: var(--status-warning) !important;
}

/* Textarea de smart paste */
html.dark .lg\:col-span-5 textarea {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

html.dark .lg\:col-span-5 textarea:focus {
    border-color: var(--color-border-focus) !important;
    box-shadow: var(--shadow-focus) !important;
}

/* ═══════════════════════════════════════════
   11. ALERTAS RENDERIZADOS DINAMICAMENTE
   Tratamento dos cards gerados pelo render.js
   ═══════════════════════════════════════════ */

/* Cards de alerta gerados dinamicamente */
html.dark #clinical-notes > div[class*="bg-"] {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

/* Header de categoria (ex: Nutricional, Hematológico) */
html.dark #clinical-notes [class*="bg-"][class*="-100"] {
    background: var(--color-bg-tertiary) !important;
}

/* Textos nos cards */
html.dark #clinical-notes [class*="text-"][class*="-800"] {
    color: var(--color-text-primary) !important;
}

html.dark #clinical-notes [class*="text-"][class*="-900"] {
    color: var(--color-text-primary) !important;
}

html.dark #clinical-notes [class*="text-"][class*="-700"] {
    color: var(--color-text-secondary) !important;
}

html.dark #clinical-notes [class*="text-"][class*="-600"]:not(.text-red-600):not(.text-orange-600):not(.text-amber-600) {
    color: var(--color-text-secondary) !important;
}

/* Badges dentro dos alertas */
html.dark #clinical-notes [class*="bg-orange-500"],
html.dark #clinical-notes [class*="bg-amber-500"] {
    background: transparent !important;
    color: var(--status-warning) !important;
    border: 1px solid var(--status-warning) !important;
}

html.dark #clinical-notes [class*="bg-yellow-100"][class*="text-yellow"] {
    background: transparent !important;
    color: var(--status-warning) !important;
    border: 1px solid var(--status-warning) !important;
}

/* Bordas de divisão */
html.dark #clinical-notes .divide-slate-50 > * + *,
html.dark #clinical-notes .divide-slate-100 > * + *,
html.dark #clinical-notes .divide-gray-100 > * + * {
    border-color: var(--color-border-primary) !important;
}

html.dark #clinical-notes .border-t,
html.dark #clinical-notes .border-b {
    border-color: var(--color-border-primary) !important;
}

/* Container de items dentro de cada categoria */
html.dark #clinical-notes .bg-white {
    background: var(--color-bg-secondary) !important;
}

/* Items coloridos que indicam status */
html.dark #clinical-notes [class*="text-orange-600"][class*="bg-orange-50"],
html.dark #clinical-notes [class*="text-amber-600"][class*="bg-amber-50"] {
    background: var(--status-warning-bg) !important;
    border-color: var(--status-warning) !important;
}

html.dark #clinical-notes [class*="text-slate-600"][class*="bg-slate-50"] {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
}

/* ═══════════════════════════════════════════
   12. CARD DE ALERGIAS - ABA ANAMNESE
   ═══════════════════════════════════════════ */

/* Container wrapper de alergias */
html.dark .tags-input-wrapper.border-red-200,
html.dark .tags-input-wrapper[class*="bg-red-50"],
html.dark [onclick*="input-alergias"] {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
}

/* Focus state */
html.dark .tags-input-wrapper.border-red-200:focus-within,
html.dark .tags-input-wrapper[class*="bg-red-50"]:focus-within {
    border-color: var(--status-critical) !important;
    box-shadow: 0 0 0 2px var(--status-critical-bg) !important;
}

/* Input dentro do wrapper */
html.dark #input-alergias {
    background: transparent !important;
    color: var(--color-text-primary) !important;
}

html.dark #input-alergias::placeholder {
    color: var(--color-text-muted) !important;
}

/* Label de alergias */
html.dark label:has(.fa-exclamation-triangle) {
    color: var(--color-text-primary) !important;
}

/* Ícone de alerta - manter vermelho para indicar importância */
html.dark .fa-exclamation-triangle.text-red-500 {
    color: var(--status-critical) !important;
}

/* Tags de alergia já adicionadas */
html.dark #tags-alergias span,
html.dark #tags-alergias .tag {
    background: var(--status-critical-bg) !important;
    color: var(--status-critical) !important;
    border: 1px solid var(--status-critical) !important;
}

/* Botão de remover tag */
html.dark #tags-alergias button,
html.dark #tags-alergias .remove-tag {
    color: var(--status-critical) !important;
}

html.dark #tags-alergias button:hover,
html.dark #tags-alergias .remove-tag:hover {
    background: var(--status-critical) !important;
    color: var(--color-text-primary) !important;
}

/* Texto de ajuda abaixo */
html.dark .tags-input-wrapper + p.text-gray-400,
html.dark .tags-input-wrapper ~ p.text-\[10px\] {
    color: var(--color-text-muted) !important;
}

/* ═══════════════════════════════════════════
   13. ÍCONES ABA LABORATÓRIOS - PADRONIZAÇÃO
   Função Renal, Função Hepática, Tireoide
   ═══════════════════════════════════════════ */

/* Container do ícone - fundo neutro no dark mode */
html.dark .lab-accordion-header span[class*="bg-gradient-to-br"] {
    background: var(--color-bg-elevated) !important;
    border: 1px solid var(--color-border-secondary) !important;
}

/* Ícone Função Renal - fa-kidney */
html.dark .lab-accordion-header .fa-kidney {
    color: var(--accent-primary) !important;
}

/* Ícone Função Hepática - fa-liver */
html.dark .lab-accordion-header .fa-liver {
    color: var(--accent-primary) !important;
}

/* Ícone Tireoide - fa-butterfly */
html.dark .lab-accordion-header .fa-butterfly {
    color: var(--accent-primary) !important;
}

/* Outros ícones de lab accordions - padronizar também */
html.dark .lab-accordion-header .fa-chart-pie,
html.dark .lab-accordion-header .fa-fire,
html.dark .lab-accordion-header .fa-leaf,
html.dark .lab-accordion-header .fa-vial,
html.dark .lab-accordion-header .fa-tint,
html.dark .lab-accordion-header .fa-syringe,
html.dark .lab-accordion-header .fa-microscope,
html.dark .lab-accordion-header .fa-dna,
html.dark .lab-accordion-header .fa-flask,
html.dark .lab-accordion-header .fa-pills,
html.dark .lab-accordion-header .fa-heart,
html.dark .lab-accordion-header .fa-droplet {
    color: var(--accent-primary) !important;
}

/* Divisores dentro dos accordions - círculos coloridos */
html.dark .lab-divider i.fa-circle {
    color: var(--accent-primary) !important;
    opacity: 0.6;
}

/* Texto do header do accordion */
html.dark .lab-accordion-header span.font-semibold {
    color: var(--color-text-primary) !important;
}

/* Gradiente do header - neutralizar */
html.dark .lab-accordion-header[class*="bg-gradient-to-r"] {
    background: var(--color-bg-tertiary) !important;
}

/* ============================================
   MODO INTERATIVO V2 - SOAP ACCORDION
   Seções expansíveis com integração CDSS
   ============================================ */

/* --- Toggle de Modo --- */
.anamnese-mode-toggle {
    display: flex;
    gap: 0.25rem;
    background: var(--color-bg-tertiary);
    padding: 0.25rem;
    border-radius: 0.5rem;
    width: fit-content;
}

.anamnese-mode-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.anamnese-mode-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.anamnese-mode-btn.active {
    background: var(--color-bg-elevated);
    color: #3b82f6;
    box-shadow: var(--shadow-sm);
}

html.dark .anamnese-mode-btn.active {
    background: var(--accent-muted);
    color: var(--accent-primary);
}

/* --- Containers de Modo --- */
.anamnese-mode-content {
    transition: opacity 0.2s ease;
}

.anamnese-mode-content.hidden {
    display: none;
}

/* ============================================
   SOAP INTERACTIVE V2 - Container Principal
   ============================================ */

.soap-interactive-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* --- Header --- */
.soap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.soap-template-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 250px;
}

.soap-template-selector label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.soap-template-selector label i {
    color: #6366f1;
}

.soap-template-selector select {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    border: 1px solid var(--color-border-input);
    border-radius: 0.5rem;
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    outline: none;
    transition: border-color 0.2s;
}

.soap-template-selector select:focus {
    border-color: #3b82f6;
}

.soap-actions {
    display: flex;
    gap: 0.375rem;
}

.soap-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border-primary);
    border-radius: 0.375rem;
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.soap-btn-secondary:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

/* --- Seções SOAP --- */
.soap-sections {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.soap-section {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-primary);
    border-radius: 0.75rem;
    overflow: hidden;
}

.soap-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.soap-section-header:hover {
    background: var(--color-bg-hover);
}

.soap-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.soap-section-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: white;
    font-weight: 700;
    font-size: 0.8125rem;
}

.soap-section-letter.soap-letter-o {
    background: linear-gradient(135deg, #10b981, #059669);
}

.soap-section-letter.soap-letter-a {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.soap-section-letter.soap-letter-p {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.soap-auto-badge {
    font-size: 0.625rem;
    font-weight: 500;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

html.dark .soap-auto-badge {
    background: rgba(16, 185, 129, 0.15);
}

.soap-section-badge {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.soap-section-badge.filled {
    color: #10b981;
}

.soap-section-badge .soap-badge-count {
    background: #6366f1;
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.soap-section-arrow {
    color: var(--color-text-tertiary);
    transition: transform 0.2s;
}

.soap-section.expanded .soap-section-arrow {
    transform: rotate(180deg);
}

.soap-section-content {
    display: none;
    padding: 1rem;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-secondary);
}

.soap-section.expanded .soap-section-content {
    display: block;
}

/* --- Campos de Formulário --- */
.soap-field-group {
    margin-bottom: 1rem;
}

.soap-field-group:last-child {
    margin-bottom: 0;
}

.soap-field-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    margin-bottom: 0.375rem;
}

.soap-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    border: 1px solid var(--color-border-input);
    border-radius: 0.5rem;
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.soap-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.soap-textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    border: 1px solid var(--color-border-input);
    border-radius: 0.5rem;
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    outline: none;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.soap-textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* --- Checklist --- */
.soap-checklist-container {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-light);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.soap-checklist-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-light);
}

.soap-checklist-header i {
    color: #6366f1;
}

.soap-checklist-toggle {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 0.25rem;
}

.soap-checklist-items {
    padding: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.soap-checklist-items.collapsed {
    display: none;
}

.soap-checklist-section {
    margin-bottom: 0.75rem;
}

.soap-checklist-section:last-child {
    margin-bottom: 0;
}

.soap-checklist-section-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
}

.soap-checklist-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.15s;
}

.soap-checklist-item:hover {
    background: var(--color-bg-hover);
}

.soap-checklist-item.checked {
    background: rgba(16, 185, 129, 0.1);
}

.soap-checklist-item.redflag .soap-checklist-text i {
    color: #ef4444;
}

.soap-checklist-item input[type="checkbox"] {
    accent-color: #10b981;
}

.soap-checklist-text {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.soap-checklist-check {
    color: #10b981;
    font-size: 0.75rem;
}

/* --- Sinais Vitais --- */
.soap-vitals-card {
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border: 1px solid #bfdbfe;
    border-radius: 0.625rem;
    margin-bottom: 1rem;
}

html.dark .soap-vitals-card {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
}

.soap-vitals-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 1px solid rgba(191, 219, 254, 0.5);
}

html.dark .soap-vitals-header {
    border-color: var(--color-border-light);
}

.soap-vitals-header i {
    color: #ef4444;
}

.soap-vitals-source {
    margin-left: auto;
    font-size: 0.625rem;
    font-weight: 500;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}

.soap-vitals-content {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
}

.soap-vital-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    background: var(--color-bg-elevated);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-light);
}

.soap-vital-badge.alert {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

html.dark .soap-vital-badge.alert {
    background: rgba(248, 81, 73, 0.15);
    border-color: rgba(248, 81, 73, 0.3);
    color: #ffa198;
}

.soap-vital-empty {
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
    font-style: italic;
}

/* --- Tabs de Exame Físico --- */
.soap-exam-container {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-light);
    border-radius: 0.5rem;
    overflow: hidden;
}

.soap-exam-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem;
    padding: 0.375rem;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-light);
}

.soap-exam-tab {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.soap-exam-tab:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.soap-exam-tab.active {
    background: var(--color-bg-elevated);
    color: #3b82f6;
    box-shadow: var(--shadow-sm);
}

html.dark .soap-exam-tab.active {
    color: var(--accent-primary);
}

.soap-exam-tab i {
    font-size: 0.6875rem;
}

.soap-exam-content {
    padding: 0;
}

.soap-exam-panel {
    display: none;
}

.soap-exam-panel.active {
    display: block;
}

.soap-exam-textarea {
    border: none;
    border-radius: 0;
    background: var(--color-bg-input);
    min-height: 60px;
}

.soap-exam-textarea:focus {
    box-shadow: none;
    border: none;
}

/* --- Template Exam --- */
.soap-exam-template {
    margin-top: 1rem;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-light);
    border-radius: 0.5rem;
}

.soap-exam-template-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-light);
}

.soap-exam-template-header i {
    color: #6366f1;
}

.soap-template-exam-section {
    padding: 0.5rem;
}

.soap-template-exam-section-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
}

/* --- Avaliação --- */
.soap-avaliacao-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: var(--color-bg-tertiary);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

.soap-avaliacao-info i {
    color: #6366f1;
}

.soap-avaliacao-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.soap-avaliacao-empty {
    padding: 1rem;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: 0.8125rem;
}

.soap-diagnostico-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg-tertiary);
    border-radius: 0.375rem;
    border-left: 3px solid #6366f1;
}

.soap-diagnostico-item.manual {
    border-left-color: #10b981;
}

.soap-diagnostico-number {
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.soap-diagnostico-text {
    flex: 1;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.soap-diagnostico-remove {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.soap-diagnostico-item:hover .soap-diagnostico-remove {
    opacity: 1;
}

.soap-diagnostico-remove:hover {
    color: #ef4444;
}

.soap-add-diagnostico {
    display: flex;
    gap: 0.5rem;
}

.soap-add-diagnostico .soap-input {
    flex: 1;
}

.soap-btn-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s;
}

.soap-btn-add:hover {
    background: #4f46e5;
}

/* --- Plano --- */
.soap-plano-suggestions {
    margin-bottom: 1rem;
}

.soap-plano-shortcuts {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.soap-shortcuts-label {
    font-size: 0.6875rem;
    color: var(--color-text-tertiary);
}

.soap-shortcut {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.6875rem;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-light);
    border-radius: 0.375rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.soap-shortcut:hover {
    background: var(--color-bg-hover);
    border-color: #6366f1;
    color: #6366f1;
}

/* --- Footer --- */
.soap-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-light);
    border-radius: 0.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.soap-footer-info {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.soap-footer-info i {
    color: #6366f1;
    margin-right: 0.25rem;
}

.soap-footer-actions {
    display: flex;
    gap: 0.5rem;
}

.soap-btn-outline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-primary);
    border-radius: 0.5rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.soap-btn-outline:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.soap-btn-primary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 0.5rem;
    color: white;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.soap-btn-primary:hover {
    background: linear-gradient(135deg, #059669, #047857);
}

/* --- Placeholder antigo --- */
.interactive-wizard-placeholder {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--color-text-tertiary);
}

/* Estilos antigos do wizard removidos - agora usa SOAP V2 */

/* ============================================
   SISTEMA DE COMANDOS DE VOZ
   ============================================ */

/* Botão de Microfone */
.voice-mic-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--color-border-primary);
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.voice-mic-btn:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    transform: scale(1.05);
}

.voice-mic-btn.listening {
    border-color: #22c55e;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    animation: voice-pulse 1.5s ease-in-out infinite;
}

.voice-mic-btn.processing {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.voice-mic-btn.staging {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.voice-mic-btn.error {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

.voice-mic-btn.not-supported {
    opacity: 0.5;
    cursor: not-allowed;
}

.voice-mic-btn i {
    font-size: 18px;
    color: var(--color-text-secondary);
    transition: color 0.3s ease;
}

.voice-mic-btn.listening i { color: #16a34a; }
.voice-mic-btn.processing i { color: #2563eb; }
.voice-mic-btn.staging i { color: #d97706; }
.voice-mic-btn.error i { color: #dc2626; }

@keyframes voice-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
}

/* Badge de staging */
.voice-staging-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

/* Painel de Staging */
.voice-staging-panel {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 360px;
    max-height: calc(100vh - 120px);
    background: var(--color-bg-elevated);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border-secondary);
}

.voice-staging-panel.visible {
    display: flex;
    animation: voice-slide-in 0.3s ease;
}

@keyframes voice-slide-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.voice-staging-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #1d4ed8 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.voice-staging-header h3 {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.voice-staging-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.voice-staging-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.voice-transcript-area {
    padding: 12px 20px;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-secondary);
    min-height: 44px;
}

.voice-transcript-text {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-style: italic;
}

.voice-transcript-text.interim { color: var(--color-text-muted); }
.voice-transcript-text.final {
    color: var(--color-text-primary);
    font-style: normal;
    font-weight: 500;
}

.voice-staging-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.voice-staging-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--color-bg-secondary);
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid var(--color-border-secondary);
    transition: all 0.2s;
}

.voice-staging-item:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-primary);
}

.voice-staging-item.suspicious {
    background: #fef3c7;
    border-color: #fcd34d;
}

.voice-staging-item.low-confidence {
    background: #fef9c3;
    border-color: #fde047;
}

.voice-staging-item-info { flex: 1; min-width: 0; }

.voice-staging-item-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.voice-staging-item-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 2px;
}

.voice-staging-item-value span:first-child {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.voice-staging-item-value span:last-child {
    font-size: 11px;
    color: var(--color-text-tertiary);
}

.voice-staging-item-warning {
    font-size: 10px;
    color: #d97706;
    margin-top: 2px;
}

.voice-staging-item-actions { display: flex; gap: 6px; }

.voice-staging-item-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s;
}

.voice-staging-item-btn.edit {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.voice-staging-item-btn.edit:hover { background: var(--color-bg-hover); }

.voice-staging-item-btn.reject {
    background: #fee2e2;
    color: #dc2626;
}

.voice-staging-item-btn.reject:hover { background: #fecaca; }

.voice-staging-footer {
    padding: 16px 20px;
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-secondary);
    display: flex;
    gap: 10px;
}

.voice-staging-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.voice-staging-btn.confirm {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.voice-staging-btn.confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.voice-staging-btn.cancel {
    background: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
    border: 1px solid var(--color-border-secondary);
}

.voice-staging-btn.cancel:hover { background: var(--color-bg-hover); }

.voice-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background: var(--color-text-primary);
    color: white;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    display: none;
    animation: voice-toast-in 0.3s ease;
}

.voice-toast.visible { display: block; }
.voice-toast.success { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.voice-toast.error { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.voice-toast.warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }

@keyframes voice-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.voice-edit-input {
    width: 80px;
    padding: 4px 8px;
    border: 2px solid var(--color-primary);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    outline: none;
    background: var(--color-bg-input);
    color: var(--color-text-primary);
}

.voice-edit-input:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.voice-staging-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--color-text-muted);
}

.voice-staging-empty i {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.voice-staging-empty p { font-size: 13px; }

/* Dark mode ajustes */
[data-theme="dark"] .voice-staging-item.suspicious {
    background: rgba(254, 243, 199, 0.1);
    border-color: rgba(252, 211, 77, 0.3);
}

[data-theme="dark"] .voice-staging-item.low-confidence {
    background: rgba(254, 249, 195, 0.1);
    border-color: rgba(253, 224, 71, 0.3);
}

[data-theme="dark"] .voice-staging-item-btn.reject {
    background: rgba(254, 226, 226, 0.1);
    color: #f87171;
}

[data-theme="dark"] .voice-mic-btn.listening {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.2) 100%);
}

[data-theme="dark"] .voice-mic-btn.processing {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%);
}

[data-theme="dark"] .voice-mic-btn.staging {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.2) 100%);
}

/* ============================================
   DROPDOWN DE LISTA (EDITOR)
   ============================================ */

#list-dropdown-container {
    position: relative;
}

#list-dropdown {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 150px;
    z-index: 100;
}

#list-dropdown button {
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    font-size: 11px;
    color: #374151;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

#list-dropdown button:hover {
    background: #eff6ff;
}

#list-dropdown button:first-child {
    border-radius: 7px 7px 0 0;
}

#list-dropdown button:last-child {
    border-radius: 0 0 7px 7px;
}

#list-dropdown button span {
    font-weight: 600;
    color: #6b7280;
}

/* Dark mode */
[data-theme="dark"] #list-dropdown {
    background: #1f2937;
    border-color: #374151;
}

[data-theme="dark"] #list-dropdown button {
    color: #e5e7eb;
}

[data-theme="dark"] #list-dropdown button:hover {
    background: #374151;
}

[data-theme="dark"] #list-dropdown button span {
    color: #9ca3af;
}

/* ============================================
   DROPDOWNS DE FONTE, TAMANHO E COR (EDITOR)
   ============================================ */

/* Botão largo para fonte/tamanho */
.toolbar-btn-wide {
    height: 28px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: white;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 11px;
}

.toolbar-btn-wide:hover {
    background: #e5e7eb;
    color: #374151;
    border-color: #d1d5db;
}

/* Item genérico de dropdown do editor */
.editor-dropdown-item {
    width: 100%;
    text-align: left;
    padding: 6px 12px;
    font-size: 11px;
    color: #374151;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.editor-dropdown-item:hover {
    background: #eff6ff;
}

.editor-dropdown-item:first-child {
    border-radius: 7px 7px 0 0;
}

.editor-dropdown-item:last-child {
    border-radius: 0 0 7px 7px;
}

/* Containers dos dropdowns */
#font-dropdown-container,
#size-dropdown-container,
#color-dropdown-container {
    position: relative;
}

/* Dropdowns de fonte e tamanho */
#font-dropdown,
#size-dropdown {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
}

/* Dropdown de cor */
#color-dropdown {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
}

/* Swatch de cor individual */
.color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.15s ease;
}

.color-swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Dark mode para os novos controles */
[data-theme="dark"] .toolbar-btn-wide {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

[data-theme="dark"] .toolbar-btn-wide:hover {
    background: #4b5563;
    color: #f3f4f6;
}

[data-theme="dark"] #font-dropdown,
[data-theme="dark"] #size-dropdown,
[data-theme="dark"] #color-dropdown {
    background: #1f2937;
    border-color: #374151;
}

[data-theme="dark"] .editor-dropdown-item {
    color: #e5e7eb;
}

[data-theme="dark"] .editor-dropdown-item:hover {
    background: #374151;
}

[data-theme="dark"] .color-swatch {
    border-color: rgba(255, 255, 255, 0.2);
}

/* ============================================
   TRANSCRIÇÃO DE CONSULTA (Whisper AI)
   ============================================ */

/* Botão na toolbar */
.toolbar-btn.consultation-btn {
    position: relative;
    transition: all 0.2s ease;
}

.toolbar-btn.consultation-btn:hover {
    background: rgba(239, 68, 68, 0.1);
}

.toolbar-btn.consultation-btn.active {
    background: rgba(239, 68, 68, 0.15);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
}

.toolbar-btn.consultation-btn.active i {
    animation: pulse-mic 1.5s ease-in-out infinite;
}

@keyframes pulse-mic {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* Container do módulo de transcrição */
#consultation-transcription-container {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

#consultation-transcription-container.hidden {
    display: none;
}

/* Dark mode ajustes para transcrição */
[data-theme="dark"] .toolbar-btn.consultation-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .toolbar-btn.consultation-btn.active {
    background: rgba(239, 68, 68, 0.25);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4);
}

/* ============================================
   SEMIOLOGIA WIZARD STYLES
   ============================================ */

/* Container do Wizard */
.wizard-container {
    background: var(--color-bg-primary);
    border-radius: 12px;
    border: 1px solid var(--color-border-primary);
    overflow: hidden;
}

/* Header do Wizard */
.wizard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.wizard-header-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wizard-icon {
    font-size: 1.5rem;
}

.wizard-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.wizard-specialty {
    font-size: 0.75rem;
    opacity: 0.85;
}

.wizard-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.wizard-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Barra de Progresso */
.wizard-progress-container {
    padding: 0.75rem 1.25rem;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}

.wizard-progress-bar {
    height: 6px;
    background: var(--color-border-primary);
    border-radius: 3px;
    overflow: hidden;
}

.wizard-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.wizard-progress-text {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Red Flags */
.wizard-red-flags {
    margin: 0.75rem 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--color-critical-bg);
    border: 1px solid var(--color-critical-border);
    border-radius: 8px;
}

.wizard-red-flags.hidden {
    display: none;
}

.wizard-red-flags-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-critical-text);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.wizard-red-flags-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wizard-red-flag-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    color: var(--color-critical-text);
    font-size: 0.8rem;
}

/* Área de Conteúdo */
.wizard-content {
    padding: 1.5rem 1.25rem;
    min-height: 300px;
}

/* Pergunta */
.wizard-question {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.wizard-question-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.wizard-question-section {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.wizard-required {
    color: var(--color-critical-accent);
    font-weight: bold;
}

.wizard-question-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
}

.wizard-question-hint {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0 0 1rem 0;
}

.wizard-suggested-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #667eea;
}

.wizard-use-suggestion {
    background: #667eea;
    color: white;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    margin-left: auto;
}

.wizard-use-suggestion:hover {
    background: #5a67d8;
}

/* Inputs do Wizard */
.wizard-input-container {
    margin-top: 1rem;
}

.wizard-boolean-options {
    display: flex;
    gap: 0.75rem;
}

.wizard-boolean-btn {
    flex: 1;
    padding: 1rem;
    border: 2px solid var(--color-border-primary);
    background: var(--color-bg-primary);
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.wizard-boolean-btn:hover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.wizard-boolean-btn.selected {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

.wizard-enum-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wizard-enum-btn {
    padding: 0.75rem 1rem;
    border: 2px solid var(--color-border-primary);
    background: var(--color-bg-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.wizard-enum-btn:hover {
    border-color: #667eea;
}

.wizard-enum-btn.selected {
    border-color: #667eea;
    background: #667eea;
    color: white;
}

.wizard-multi-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wizard-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.wizard-checkbox-label:hover {
    background: var(--color-bg-secondary);
}

.wizard-checkbox-label.checked {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
}

.wizard-checkbox-label input {
    width: 18px;
    height: 18px;
    accent-color: #667eea;
}

.wizard-input,
.wizard-textarea,
.wizard-select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid var(--color-border-primary);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: border-color 0.2s;
}

.wizard-input:focus,
.wizard-textarea:focus,
.wizard-select:focus {
    outline: none;
    border-color: #667eea;
}

.wizard-number-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wizard-input-number {
    width: 150px;
}

.wizard-input-unit {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.wizard-scale-container {
    padding: 0.5rem 0;
}

.wizard-scale {
    width: 100%;
    accent-color: #667eea;
}

.wizard-scale-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.wizard-scale-value {
    font-weight: bold;
    color: #667eea;
    font-size: 1.1rem;
}

/* Seção Header */
.wizard-section-header {
    text-align: center;
    padding: 2rem;
}

.wizard-section-header i {
    font-size: 3rem;
    color: #667eea;
    margin-bottom: 1rem;
}

.wizard-section-header h3 {
    font-size: 1.25rem;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
}

.wizard-section-header p {
    color: var(--color-text-muted);
    margin: 0 0 1.5rem 0;
}

/* Empty State */
.wizard-empty {
    text-align: center;
    padding: 3rem;
}

.wizard-empty i {
    font-size: 4rem;
    color: #22c55e;
    margin-bottom: 1rem;
}

.wizard-empty h3 {
    font-size: 1.25rem;
    color: var(--color-text-primary);
}

.wizard-empty p {
    color: var(--color-text-muted);
}

/* Dados do Sistema */
.wizard-system-data {
    padding: 0.5rem 1.25rem;
    background: var(--color-bg-tertiary);
    border-top: 1px solid var(--color-border-primary);
}

.wizard-system-data-items {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.wizard-system-item {
    background: var(--color-bg-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

/* Navegação */
.wizard-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-border-primary);
    background: var(--color-bg-secondary);
}

.wizard-btn {
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    border: none;
}

.wizard-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wizard-btn-primary {
    background: #667eea;
    color: white;
}

.wizard-btn-primary:hover:not(:disabled) {
    background: #5a67d8;
}

.wizard-btn-secondary {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.wizard-btn-secondary:hover:not(:disabled) {
    background: var(--color-border-primary);
}

.wizard-btn-outline {
    background: transparent;
    border: 1px solid var(--color-border-secondary);
    color: var(--color-text-secondary);
}

.wizard-btn-outline:hover:not(:disabled) {
    background: var(--color-bg-tertiary);
}

.wizard-btn-success {
    background: #22c55e;
    color: white;
}

.wizard-btn-success:hover:not(:disabled) {
    background: #16a34a;
}

/* Footer do Wizard */
.wizard-footer {
    display: flex;
    justify-content: center;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-border-primary);
}

/* ============================================
   TEMPLATE SELECTOR STYLES
   ============================================ */

.template-selector {
    background: var(--color-bg-primary);
    border-radius: 12px;
    border: 1px solid var(--color-border-primary);
    overflow: hidden;
}

/* Toggle de Modo */
.template-mode-toggle {
    display: flex;
    padding: 0.75rem;
    gap: 0.5rem;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}

.template-mode-btn {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid var(--color-border-primary);
    background: var(--color-bg-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
    color: var(--color-text-secondary);
}

.template-mode-btn:hover {
    border-color: #667eea;
}

.template-mode-btn.active {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

/* Busca */
.template-search-container {
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border-primary);
}

.template-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.template-search-icon {
    position: absolute;
    left: 0.75rem;
    color: var(--color-text-muted);
}

.template-search-input {
    width: 100%;
    padding: 0.625rem 2rem 0.625rem 2.25rem;
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}

.template-search-input:focus {
    outline: none;
    border-color: #667eea;
}

.template-search-clear {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.25rem;
}

.template-search-clear.hidden {
    display: none;
}

/* Categorias */
.template-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border-primary);
}

.template-category-btn {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-primary);
    border-radius: 20px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--color-text-secondary);
}

.template-category-btn:hover {
    border-color: #667eea;
}

.template-category-btn.active {
    background: #667eea;
    border-color: #667eea;
    color: white;
}

/* Lista de Templates */
.template-list-container {
    max-height: 400px;
    overflow-y: auto;
}

.template-recents {
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border-primary);
    background: var(--color-bg-secondary);
}

.template-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.template-recents-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.template-recent-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-primary);
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.template-recent-item:hover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.template-list {
    padding: 0.75rem;
}

.template-group {
    margin-bottom: 1rem;
}

.template-group:last-child {
    margin-bottom: 0;
}

.template-group-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-border-primary);
}

.template-group-items {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.template-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    width: 100%;
}

.template-item:hover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.template-item-icon {
    font-size: 1.25rem;
    width: 32px;
    text-align: center;
}

.template-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.template-item-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.template-item-type {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.template-item-badge {
    color: #667eea;
    font-size: 0.8rem;
}

.template-empty {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-muted);
}

.template-empty i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* Anamnese Mode Toggle (existente) - ajustes */
.anamnese-mode-toggle {
    display: flex;
    gap: 0.375rem;
}

.anamnese-mode-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-primary);
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    color: var(--color-text-secondary);
}

.anamnese-mode-btn:hover {
    border-color: #667eea;
}

.anamnese-mode-btn.active {
    background: #667eea;
    border-color: #667eea;
    color: white;
}

/* Dark Mode para Wizard e Template Selector */
html.dark .wizard-container,
html.dark .template-selector {
    background: var(--color-bg-primary);
    border-color: var(--color-border-primary);
}

html.dark .wizard-header {
    background: linear-gradient(135deg, #5a67d8 0%, #6b21a8 100%);
}

html.dark .wizard-boolean-btn,
html.dark .wizard-enum-btn,
html.dark .wizard-checkbox-label,
html.dark .wizard-input,
html.dark .wizard-textarea,
html.dark .wizard-select,
html.dark .template-mode-btn,
html.dark .template-category-btn,
html.dark .template-item,
html.dark .template-recent-item {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

html.dark .wizard-boolean-btn.selected,
html.dark .wizard-enum-btn.selected {
    background: rgba(102, 126, 234, 0.2);
}

html.dark .template-mode-btn.active,
html.dark .template-category-btn.active {
    background: #667eea;
}

/* ============================================
   TEMPLATE SELECTOR SIMPLIFICADO
   ============================================ */

.template-selector-simple {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: 0.75rem;
    padding: 1rem;
}

/* Toggle Texto/Wizard como radio buttons */
.template-mode-toggle-simple {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.template-mode-radio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.template-mode-radio input[type="radio"] {
    width: 1rem;
    height: 1rem;
    accent-color: #667eea;
}

.template-mode-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.template-mode-label i {
    color: #667eea;
}

/* Dropdown de Templates */
.template-dropdown-container {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.template-dropdown-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.template-dropdown-select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border-primary);
    border-radius: 0.5rem;
    font-size: 0.9rem;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    cursor: pointer;
}

.template-dropdown-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.template-dropdown-select optgroup {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.template-dropdown-select option {
    font-weight: 400;
    color: var(--color-text-primary);
}

/* Container do Wizard */
.template-wizard-container {
    margin-top: 1rem;
}

.template-wizard-container:empty {
    display: none;
}

/* ============================================
   WIZARD - TEXTO LIVRE
   ============================================ */

.wizard-freetext-container {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--color-border-primary);
}

.wizard-freetext-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.wizard-freetext-checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: #667eea;
}

.wizard-freetext-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.wizard-freetext-label i {
    color: #667eea;
}

.wizard-freetext-input {
    margin-top: 0.75rem;
}

.wizard-freetext-input.hidden {
    display: none;
}

.wizard-freetext-textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border-primary);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    resize: vertical;
    min-height: 60px;
}

.wizard-freetext-textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.wizard-freetext-textarea::placeholder {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Dark mode para novos estilos */
html.dark .template-selector-simple {
    background: var(--color-bg-primary);
    border-color: var(--color-border-primary);
}

html.dark .template-dropdown-select {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

html.dark .wizard-freetext-textarea {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

/* ============================================
   DARK MODE - CORREÇÕES FINAIS v4.0.5
   Editor dropdowns, Lab header, Dictation, Lab feedback
   ============================================ */

/* === EDITOR DROPDOWNS (Fonte, Tamanho, Cor) === */
html.dark #font-dropdown,
html.dark #size-dropdown,
html.dark #color-dropdown {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark .editor-dropdown-item {
    background: transparent !important;
    color: var(--color-text-primary) !important;
}

html.dark .editor-dropdown-item:hover {
    background: var(--color-bg-elevated) !important;
}

html.dark .color-swatch {
    border-color: var(--color-border-secondary) !important;
}

html.dark .toolbar-btn,
html.dark .toolbar-btn-wide {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-secondary) !important;
}

html.dark .toolbar-btn:hover,
html.dark .toolbar-btn-wide:hover {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
}

/* === LAB TAB HEADER (Data, Expandir, Recolher) === */
html.dark .lab-tab-header-sticky {
    background: var(--color-bg-primary) !important;
}

html.dark .lab-tab-header-sticky .bg-gradient-to-r,
html.dark #tab-lab .bg-gradient-to-r.from-blue-50 {
    background: var(--color-bg-tertiary) !important;
}

html.dark #dataExamesLab {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

html.dark #dataExamesLab:focus {
    border-color: var(--color-border-focus) !important;
}

html.dark .lab-tab-header-sticky button {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-secondary) !important;
}

html.dark .lab-tab-header-sticky button:hover {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
}

/* === DICTATION MODULE === */
html.dark .dictation-btn-highlight {
    background: linear-gradient(135deg, rgba(248, 81, 73, 0.15) 0%, rgba(248, 81, 73, 0.25) 100%) !important;
    border-color: rgba(248, 81, 73, 0.5) !important;
    color: #f87171 !important;
}

html.dark .dictation-btn-highlight:hover {
    background: linear-gradient(135deg, rgba(248, 81, 73, 0.25) 0%, rgba(248, 81, 73, 0.35) 100%) !important;
    border-color: #f87171 !important;
}

html.dark .dictation-btn-highlight.active {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    border-color: #b91c1c !important;
    color: white !important;
}

html.dark .dictation-status {
    background: var(--color-critical-bg) !important;
    border-color: var(--color-critical-border) !important;
    color: var(--color-critical-text) !important;
}

html.dark .dictation-interim {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-secondary) !important;
}

html.dark .dictation-confidence {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-secondary) !important;
}

html.dark .confidence-bar-container {
    background: var(--color-bg-elevated) !important;
}

/* === LAB FIELD VALUE FEEDBACK (Bordas coloridas) === */
/* Normal/dentro da faixa - verde sutil */
html.dark input.exam-normal,
html.dark input[data-status="normal"] {
    border-color: rgba(63, 185, 80, 0.5) !important;
    background: rgba(63, 185, 80, 0.08) !important;
}

/* Alterado/fora da faixa - laranja */
html.dark input.exam-altered,
html.dark input[data-status="altered"],
html.dark input.exam-warning {
    border-color: rgba(210, 153, 34, 0.6) !important;
    background: rgba(210, 153, 34, 0.1) !important;
}

/* Crítico - vermelho */
html.dark input.exam-critical,
html.dark input[data-status="critical"] {
    border-color: rgba(248, 81, 73, 0.6) !important;
    background: rgba(248, 81, 73, 0.1) !important;
}

/* Baixo - amarelo claro */
html.dark input.exam-low {
    border-color: rgba(210, 153, 34, 0.5) !important;
    background: rgba(210, 153, 34, 0.08) !important;
}

/* Alto - laranja mais intenso */
html.dark input.exam-high {
    border-color: rgba(249, 115, 22, 0.6) !important;
    background: rgba(249, 115, 22, 0.1) !important;
}

/* === PADRONIZAÇÃO DE ÍCONES (Monocromático elegante) === */
/* Ícones dentro de containers coloridos - manter cor original para contraste */
html.dark .lab-accordion-header span[class*="bg-gradient"] i,
html.dark [class*="w-8 h-8 rounded-lg"] i {
    color: var(--accent-primary) !important;
}

/* Ícones em headers de seção - monocromático */
html.dark .lab-divider i.fa-circle {
    opacity: 0.5 !important;
}

/* Ícones de ação/interação - cor de accent */
html.dark .lab-tab-header-sticky i,
html.dark button i[class*="fa-expand"],
html.dark button i[class*="fa-compress"],
html.dark button i[class*="fa-calendar"] {
    color: var(--accent-primary) !important;
}

/* Ícones de labels nos campos de exame */
html.dark .text-blue-500,
html.dark .text-emerald-500,
html.dark .text-violet-500,
html.dark .text-amber-500,
html.dark .text-orange-500,
html.dark .text-pink-500,
html.dark .text-green-500,
html.dark .text-red-500,
html.dark .text-cyan-500,
html.dark .text-purple-500,
html.dark .text-rose-500,
html.dark .text-yellow-500 {
    color: var(--accent-primary) !important;
}

/* Manter ícone do coração com cor especial em sinais vitais */
html.dark .text-rose-400 {
    color: #fb7185 !important;
}

/* === EDITOR DE ANAMNESE === */
html.dark .rich-editor {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

html.dark .rich-editor:focus {
    border-color: var(--color-border-focus) !important;
    background: var(--color-bg-tertiary) !important;
}

/* Toolbar do editor */
html.dark .flex.items-center.justify-between.bg-gray-100 {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
}

/* === INDIGO COLORS (usados em gradientes) === */
html.dark .to-indigo-50 {
    --tw-gradient-to: var(--color-bg-tertiary) !important;
}

html.dark .from-indigo-50 {
    --tw-gradient-from: var(--color-bg-tertiary) !important;
}

/* === CAMPOS DE EXAME - FEEDBACK VISUAL (Bordas e Fundo) === */
/* Normal - Verde sutil */
html.dark input.border-green-500,
html.dark input.border-2.border-green-500 {
    border-color: var(--color-safe-accent) !important;
    background-color: var(--color-safe-bg) !important;
    color: var(--color-safe-text) !important;
}

/* Alto/Baixo - Laranja */
html.dark input.border-orange-500,
html.dark input.border-2.border-orange-500 {
    border-color: var(--color-high-accent) !important;
    background-color: var(--color-high-bg) !important;
    color: var(--color-high-text) !important;
}

/* Crítico - Vermelho */
html.dark input.border-red-500,
html.dark input.border-2.border-red-500 {
    border-color: var(--color-critical-accent) !important;
    background-color: var(--color-critical-bg) !important;
    color: var(--color-critical-text) !important;
}

/* Ring para crítico */
html.dark input.ring-red-200,
html.dark input.ring-2.ring-red-200 {
    --tw-ring-color: rgba(248, 81, 73, 0.3) !important;
}

/* Sem referência - Neutro */
html.dark input.border-slate-300,
html.dark input.bg-slate-50 {
    border-color: var(--color-border-primary) !important;
    background-color: var(--color-bg-secondary) !important;
    color: var(--color-text-primary) !important;
}

/* Badges de status */
html.dark span.bg-green-100 {
    background-color: var(--color-safe-bg) !important;
}

html.dark span.text-green-700 {
    color: var(--color-safe-text) !important;
}

html.dark span.bg-orange-100 {
    background-color: var(--color-high-bg) !important;
}

html.dark span.text-orange-700 {
    color: var(--color-high-text) !important;
}

html.dark span.bg-red-600 {
    background-color: var(--status-critical) !important;
}

/* === BOTÕES EXPANDIR/RECOLHER LAB === */
html.dark #tab-lab button.bg-white {
    background-color: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-secondary) !important;
}

html.dark #tab-lab button.bg-white:hover {
    background-color: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
}

/* ============================================
   DARK MODE - CORREÇÕES v4.0.6
   Botões A+/A-/Sol, Copiar, SOAP, Emergência,
   Calculadoras, File Input
   ============================================ */

/* === BOTÃO SESSÕES (destaque funcional) === */
.btn-sessoes-header {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid var(--color-border-focus, #3b82f6);
    background: color-mix(in srgb, var(--color-border-focus, #3b82f6) 10%, white);
    cursor: pointer;
    font-size: 14px;
    color: var(--color-border-focus, #3b82f6);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-sessoes-header:hover {
    background: color-mix(in srgb, var(--color-border-focus, #3b82f6) 18%, white);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-border-focus, #3b82f6) 20%, transparent);
    transform: translateY(-1px);
}
.btn-sessoes-header:active {
    background: color-mix(in srgb, var(--color-border-focus, #3b82f6) 25%, white);
    transform: translateY(0);
}
html.dark .btn-sessoes-header {
    background: color-mix(in srgb, var(--color-border-focus, #3b82f6) 15%, var(--color-bg-secondary, #1e293b)) !important;
    border-color: var(--color-border-focus, #3b82f6) !important;
    color: var(--color-border-focus, #3b82f6) !important;
}
html.dark .btn-sessoes-header:hover {
    background: color-mix(in srgb, var(--color-border-focus, #3b82f6) 25%, var(--color-bg-secondary, #1e293b)) !important;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--color-border-focus, #3b82f6) 25%, transparent);
}

/* === BOTÕES A- A+ SOL (font-btn) === */
html.dark .font-btn {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-secondary) !important;
}

html.dark .font-btn:hover {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-secondary) !important;
    color: var(--color-text-primary) !important;
}

html.dark .font-btn:active {
    background: var(--color-bg-elevated) !important;
}

/* === BOTÕES EMERALD (Copiar Tudo, Gerar SOAP) === */
/* Estilo sutil e elegante para dark mode */
html.dark button.bg-emerald-500,
html.dark button.bg-emerald-600 {
    background: var(--color-bg-secondary) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: #6ee7b7 !important;
}

html.dark button.bg-emerald-500:hover,
html.dark button.hover\:bg-emerald-600:hover,
html.dark button.bg-emerald-600:hover,
html.dark button.hover\:bg-emerald-700:hover {
    background: var(--color-bg-tertiary) !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
    color: #a7f3d0 !important;
}

/* === BOTÕES SKY (Calcular PREVENT) === */
html.dark button.bg-sky-600 {
    background: linear-gradient(135deg, #075985 0%, #0369a1 100%) !important;
    border-color: #0284c7 !important;
}

html.dark button.bg-sky-600:hover,
html.dark button.hover\:bg-sky-700:hover {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%) !important;
}

/* === BOTÕES INDIGO (Analisar Lacunas) === */
html.dark button.bg-indigo-50 {
    background: var(--color-bg-secondary) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #a5b4fc !important;
}

html.dark button.bg-indigo-50:hover,
html.dark button.hover\:bg-indigo-100:hover {
    background: var(--color-bg-tertiary) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
}

/* === BOTÕES RED (Atualizar Análise - Emergência) === */
html.dark button.bg-red-600 {
    background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%) !important;
    border-color: #dc2626 !important;
}

html.dark button.bg-red-600:hover,
html.dark button.hover\:bg-red-700:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important;
}

/* === BOTÕES CINZA (Limpar, secundários) === */
html.dark button.bg-gray-100,
html.dark button.bg-gray-200 {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-secondary) !important;
}

html.dark button.bg-gray-100:hover,
html.dark button.bg-gray-200:hover,
html.dark button.hover\:bg-gray-200:hover,
html.dark button.hover\:bg-gray-300:hover {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
}

/* === ABA EMERGÊNCIA - GASOMETRIA === */
/* Header da Gasometria */
html.dark #tab-emergency .bg-gradient-to-r.from-red-600,
html.dark .bg-gradient-to-r.from-red-600.to-red-700 {
    background: linear-gradient(to right, #7f1d1d, #991b1b) !important;
}

/* Cards da Gasometria */
html.dark #tab-emergency .bg-white {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

/* Inputs da Gasometria */
html.dark #tab-emergency input {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

html.dark #tab-emergency input:focus {
    border-color: #f87171 !important;
}

/* Labels e Textos */
html.dark #tab-emergency label {
    color: var(--color-text-secondary) !important;
}

html.dark #tab-emergency .text-gray-600,
html.dark #tab-emergency .text-gray-500 {
    color: var(--color-text-secondary) !important;
}

html.dark #tab-emergency .text-gray-400 {
    color: var(--color-text-muted) !important;
}

/* Lactato - Campo especial */
html.dark #tab-emergency #gas_lactato {
    background: rgba(248, 81, 73, 0.1) !important;
    border-color: rgba(248, 81, 73, 0.4) !important;
}

/* Cálculos Derivados */
html.dark #tab-emergency .bg-amber-50 {
    background: rgba(210, 153, 34, 0.1) !important;
    border-color: rgba(210, 153, 34, 0.3) !important;
}

html.dark #tab-emergency .bg-orange-50 {
    background: rgba(249, 115, 22, 0.1) !important;
    border-color: rgba(249, 115, 22, 0.3) !important;
}

html.dark #tab-emergency .bg-purple-50 {
    background: rgba(139, 92, 246, 0.1) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

html.dark #tab-emergency .bg-rose-50 {
    background: rgba(244, 63, 94, 0.1) !important;
    border-color: rgba(244, 63, 94, 0.3) !important;
}

html.dark #tab-emergency .text-amber-700,
html.dark #tab-emergency .text-amber-800 {
    color: #e3b341 !important;
}

html.dark #tab-emergency .text-orange-700,
html.dark #tab-emergency .text-orange-800 {
    color: #f97316 !important;
}

html.dark #tab-emergency .text-purple-700,
html.dark #tab-emergency .text-purple-800 {
    color: #a78bfa !important;
}

html.dark #tab-emergency .text-rose-700,
html.dark #tab-emergency .text-rose-800 {
    color: #fb7185 !important;
}

/* === ABA CALCULADORAS === */
/* PREVENT Card - Estilo sutil sem gradiente gritante */
html.dark #tab-calculators .bg-gradient-to-br.from-sky-50,
html.dark .bg-gradient-to-br.from-sky-50.to-blue-50 {
    background: var(--color-bg-secondary) !important;
    border-color: rgba(14, 165, 233, 0.25) !important;
}

/* SCORE2 Card - Estilo sutil sem gradiente gritante */
html.dark #tab-calculators .bg-gradient-to-br.from-emerald-50,
html.dark .bg-gradient-to-br.from-emerald-50.to-teal-50 {
    background: var(--color-bg-secondary) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}

/* Refinamento de Risco */
html.dark #tab-calculators .bg-indigo-50 {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

/* Selects e Inputs nas Calculadoras */
html.dark #tab-calculators select,
html.dark #tab-calculators input {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

html.dark #tab-calculators select:focus,
html.dark #tab-calculators input:focus {
    border-color: var(--color-border-focus) !important;
}

/* Labels e Textos */
html.dark #tab-calculators .text-sky-800,
html.dark #tab-calculators .text-sky-700,
html.dark #tab-calculators .text-sky-600 {
    color: #7dd3fc !important;
}

html.dark #tab-calculators .text-emerald-800,
html.dark #tab-calculators .text-emerald-700,
html.dark #tab-calculators .text-emerald-600 {
    color: #6ee7b7 !important;
}

html.dark #tab-calculators .text-indigo-700 {
    color: #a5b4fc !important;
}

html.dark #tab-calculators .text-gray-600,
html.dark #tab-calculators .text-gray-500 {
    color: var(--color-text-secondary) !important;
}

/* Backgrounds internos */
html.dark #tab-calculators .bg-white\/60,
html.dark #tab-calculators .bg-white {
    background: var(--color-bg-secondary) !important;
}

html.dark #tab-calculators .bg-sky-50 {
    background: rgba(14, 165, 233, 0.1) !important;
    border-color: rgba(14, 165, 233, 0.2) !important;
}

html.dark #tab-calculators .bg-sky-100 {
    background: rgba(14, 165, 233, 0.15) !important;
}

html.dark #tab-calculators .bg-emerald-100 {
    background: rgba(16, 185, 129, 0.15) !important;
}

html.dark #tab-calculators .bg-amber-50\/50 {
    background: rgba(210, 153, 34, 0.08) !important;
    border-color: rgba(210, 153, 34, 0.25) !important;
}

html.dark #tab-calculators .text-amber-700 {
    color: #e3b341 !important;
}

/* Resultado PREVENT */
html.dark #tab-calculators #prevent_resultado .bg-white {
    background: var(--color-bg-tertiary) !important;
    border-color: rgba(14, 165, 233, 0.4) !important;
}

/* Barra de risco */
html.dark #tab-calculators .bg-gradient-to-r.from-green-200 {
    background: linear-gradient(to right, rgba(34, 197, 94, 0.3), rgba(234, 179, 8, 0.3), rgba(239, 68, 68, 0.3)) !important;
}

/* Notas informativas */
html.dark #tab-calculators .bg-blue-50 {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

html.dark #tab-calculators .text-blue-800 {
    color: #93c5fd !important;
}

/* Detalhes do cálculo */
html.dark #tab-calculators .bg-gray-50 {
    background: var(--color-bg-tertiary) !important;
}

/* Erro */
html.dark #tab-calculators .bg-red-50 {
    background: rgba(248, 81, 73, 0.1) !important;
    border-color: #f85149 !important;
}

/* === FILE INPUT (Upload PDF) === */
html.dark input[type="file"] {
    color: var(--color-text-secondary) !important;
}

html.dark input[type="file"]::file-selector-button {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-secondary) !important;
}

html.dark input[type="file"]::file-selector-button:hover {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
}

/* OCR Preview */
html.dark #ocrPreview {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-secondary) !important;
}

/* === OUTROS ELEMENTOS FALTANTES === */

/* Card do editor de anamnese */
html.dark .border-gray-200.rounded-b-lg.bg-white {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

/* Prontuário Gerado / Conduta IA */
html.dark #cdss-output {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

/* Botão Copiar do Prontuário */
html.dark button.bg-gray-200.text-gray-700 {
    background: var(--color-bg-secondary) !important;
    color: var(--color-text-secondary) !important;
}

html.dark button.bg-gray-200.text-gray-700:hover {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
}

/* Tags de Alergias */
html.dark .tags-input-wrapper.border-red-200 {
    background: rgba(248, 81, 73, 0.05) !important;
    border-color: rgba(248, 81, 73, 0.3) !important;
}

html.dark .tags-input-wrapper.border-red-200 input {
    background: transparent !important;
    color: var(--color-text-primary) !important;
}

/* Checkboxes nas calculadoras */
html.dark #tab-calculators input[type="checkbox"] {
    accent-color: #6366f1;
}

/* === EDITOR TOOLBAR E CONTROLES === */
/* Toolbar principal */
html.dark .bg-gray-100.border-gray-200 {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
}

/* Select de Templates */
html.dark #templateAnamnese {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

html.dark #templateAnamnese:focus {
    border-color: var(--color-border-focus) !important;
}

/* Botões A-/A+ dentro do editor */
html.dark #font-controls-wrapper button {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-secondary) !important;
}

html.dark #font-controls-wrapper button:hover {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
}

/* === SELECTS GENÉRICOS COM bg-white === */
html.dark select.bg-white {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

html.dark select.bg-white:focus {
    border-color: var(--color-border-focus) !important;
}

/* === INPUTS COM bg-white GENÉRICOS === */
html.dark input.bg-white:not([type="checkbox"]):not([type="radio"]) {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

/* === BOTÕES GENÉRICOS COM bg-white === */
html.dark button.bg-white {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-secondary) !important;
}

html.dark button.bg-white:hover {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
}

/* === LIMPEZA FINAL === */
/* Botões limpar/reset com hover */
html.dark button.text-red-500 {
    color: #f87171 !important;
}

html.dark button.text-red-500:hover {
    color: #fca5a5 !important;
}

/* Labels genéricos */
html.dark label.text-gray-700 {
    color: var(--color-text-secondary) !important;
}

html.dark label.text-gray-600 {
    color: var(--color-text-secondary) !important;
}

html.dark label.text-gray-500 {
    color: var(--color-text-muted) !important;
}

/* Spans de texto */
html.dark span.text-gray-500 {
    color: var(--color-text-muted) !important;
}

html.dark span.text-gray-400 {
    color: var(--color-text-muted) !important;
}

/* Parágrafos informativos */
html.dark p.text-gray-400 {
    color: var(--color-text-muted) !important;
}

html.dark p.text-gray-500 {
    color: var(--color-text-secondary) !important;
}

/* ============================================
   DARK MODE - CARDS DE IDENTIFICAÇÃO v4.0.7
   Nascimento (blue), Peso (teal), Sinais (rose)
   ============================================ */

/* Card Nascimento/Sexo - Azul */
html.dark .bg-blue-50.border-blue-200 {
    background: var(--color-bg-secondary) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}

html.dark .bg-blue-50 label.text-blue-600,
html.dark .text-blue-600 {
    color: #93c5fd !important;
}

html.dark .bg-blue-50 .text-blue-700,
html.dark .text-blue-700 {
    color: #93c5fd !important;
}

html.dark .bg-blue-50 input,
html.dark .bg-blue-50 select {
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: var(--color-text-primary) !important;
}

html.dark .bg-blue-50 input:focus,
html.dark .bg-blue-50 select:focus {
    border-color: rgba(59, 130, 246, 0.6) !important;
}

/* Card Peso/Altura/IMC - Teal */
html.dark .bg-teal-50.border-teal-200 {
    background: var(--color-bg-secondary) !important;
    border-color: rgba(20, 184, 166, 0.25) !important;
}

html.dark .bg-teal-50 label.text-teal-600,
html.dark .text-teal-600 {
    color: #5eead4 !important;
}

html.dark .bg-teal-50 .text-teal-700,
html.dark .text-teal-700,
html.dark #displayImc {
    color: #5eead4 !important;
}

html.dark .bg-teal-50 input {
    border-color: rgba(20, 184, 166, 0.3) !important;
    color: var(--color-text-primary) !important;
}

html.dark .bg-teal-50 input:focus {
    border-color: rgba(20, 184, 166, 0.6) !important;
}

/* Card Sinais Vitais - Rose */
html.dark .bg-rose-50.border-rose-200 {
    background: var(--color-bg-secondary) !important;
    border-color: rgba(244, 63, 94, 0.25) !important;
}

html.dark .bg-rose-50 label.text-rose-600,
html.dark .bg-rose-50 span.text-rose-600,
html.dark .text-rose-600 {
    color: #fda4af !important;
}

html.dark .bg-rose-50 .text-rose-500,
html.dark .text-rose-500 {
    color: #fb7185 !important;
}

html.dark .bg-rose-50 .text-rose-400 {
    color: #fb7185 !important;
}

html.dark .bg-rose-50 input {
    background: var(--color-bg-tertiary) !important;
    border-color: rgba(244, 63, 94, 0.25) !important;
    color: var(--color-text-primary) !important;
}

html.dark .bg-rose-50 input:focus {
    border-color: rgba(244, 63, 94, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.1) !important;
}

/* ============================================
   PAINEL DE INFORMAÇÕES CLÍNICAS (clinicalPearls)
   ============================================ */

.exam-info-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    padding: 16px;
}

.exam-info-panel.visible {
    opacity: 1;
    visibility: visible;
}

.exam-info-panel-content {
    background: var(--color-bg-primary, #ffffff);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 520px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(10px);
    transition: transform 0.2s ease;
}

.exam-info-panel.visible .exam-info-panel-content {
    transform: translateY(0);
}

.exam-info-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--color-border-light, #e2e8f0);
    flex-shrink: 0;
}

.exam-info-panel-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    margin: 0;
    line-height: 1.3;
}

.exam-info-panel-unit {
    display: inline-block;
    font-size: 11px;
    color: var(--color-text-muted, #94a3b8);
    background: var(--color-bg-secondary, #f1f5f9);
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 6px;
    font-family: monospace;
}

.exam-info-panel-source {
    display: inline-block;
    font-size: 10px;
    color: var(--color-text-muted, #94a3b8);
    font-style: italic;
}

.exam-info-panel-close {
    background: none;
    border: none;
    color: var(--color-text-muted, #94a3b8);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.15s;
    flex-shrink: 0;
}

.exam-info-panel-close:hover {
    background: var(--color-bg-hover, #f1f5f9);
    color: var(--color-text-primary, #1e293b);
}

.exam-info-panel-body {
    padding: 12px 20px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.exam-info-section {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
}

.exam-info-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.exam-info-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary, #334155);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.exam-info-section-title i {
    font-size: 11px;
}

.exam-info-list {
    margin: 0;
    padding: 0 0 0 16px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-text-secondary, #475569);
}

.exam-info-list li {
    margin-bottom: 2px;
}

.exam-info-critical {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.exam-info-critical-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #dc2626;
    font-weight: 600;
    background: #fef2f2;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #fecaca;
}

.exam-info-critical-value i {
    font-size: 10px;
}

.exam-info-cause-group {
    margin-bottom: 6px;
}

.exam-info-cause-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-primary, #334155);
    margin-bottom: 2px;
}

.exam-info-interference {
    font-size: 12px;
    color: var(--color-text-secondary, #475569);
    margin-bottom: 6px;
    line-height: 1.5;
}

.exam-info-interference-label {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

.exam-info-interference-label i {
    font-size: 10px;
}

.exam-info-collection {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 12px;
    color: var(--color-text-secondary, #475569);
}

.exam-info-collection b {
    color: var(--color-text-primary, #334155);
}

.exam-info-empty {
    font-size: 12px;
    color: var(--color-text-muted, #94a3b8);
    text-align: center;
    padding: 20px 0;
}

/* Dark mode */
html.dark .exam-info-panel {
    background: rgba(0, 0, 0, 0.6);
}

html.dark .exam-info-panel-content {
    background: var(--color-bg-primary, #0d1117);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

html.dark .exam-info-critical-value {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.3);
    color: #fca5a5;
}

/* ============================================
 * NOVAS SEÇÕES DO PAINEL DE INFO (Labs_Final)
 * ============================================ */

/* Definição */
.exam-info-definition {
    padding: 0;
}

.exam-info-definition-text {
    font-size: 12px;
    color: var(--color-text-secondary, #64748b);
    line-height: 1.6;
    margin-bottom: 6px;
}

.exam-info-definition-text:last-child {
    margin-bottom: 0;
}

/* Interpretação */
.exam-info-interpretation {
    padding-left: 10px;
    border-left: 3px solid #22c55e;
}

.exam-info-interpretation-text {
    font-size: 12px;
    color: var(--color-text-secondary, #64748b);
    line-height: 1.6;
    margin-bottom: 6px;
}

.exam-info-interpretation-text:last-child {
    margin-bottom: 0;
}

/* Accordion (Observações e Info Gerais) */
.exam-info-accordion {
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    margin-bottom: 6px;
    overflow: hidden;
}

.exam-info-accordion:last-child {
    margin-bottom: 0;
}

.exam-info-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    background: var(--color-bg-secondary, #f8fafc);
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-primary, #334155);
    text-align: left;
    transition: background 0.15s;
}

.exam-info-accordion-header:hover {
    background: var(--color-bg-hover, #f1f5f9);
}

.exam-info-accordion-header span {
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.exam-info-accordion-header i {
    font-size: 10px;
    color: var(--color-text-muted, #94a3b8);
    transition: transform 0.25s ease;
    margin-left: 8px;
    flex-shrink: 0;
}

.exam-info-accordion.open .exam-info-accordion-header i {
    transform: rotate(180deg);
}

.exam-info-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 12px;
}

.exam-info-accordion.open .exam-info-accordion-body {
    max-height: 600px;
    padding: 8px 12px 12px;
}

.exam-info-accordion-body .exam-info-list {
    margin: 0;
    padding-left: 14px;
}

/* Dark mode — novas seções */
html.dark .exam-info-definition-text,
html.dark .exam-info-interpretation-text {
    color: var(--color-text-secondary, #8b949e);
}

html.dark .exam-info-interpretation {
    border-left-color: #2ea043;
}

html.dark .exam-info-accordion {
    border-color: var(--color-border, #30363d);
}

html.dark .exam-info-accordion-header {
    background: var(--color-bg-secondary, #161b22);
    color: var(--color-text-primary, #c9d1d9);
}

html.dark .exam-info-accordion-header:hover {
    background: var(--color-bg-hover, #1c2128);
}

/* ============================================
   IA CONDUTA — STEPPER & RESPONSE PANEL v1.0
   Elegante, minimalista, premium.
   ============================================ */

/* --- Botão Principal "Gerar Conduta IA" --- */
.ia-btn-primary {
    width: 100%;
    background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3), 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.ia-btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    transition: left 0.5s ease;
}
.ia-btn-primary:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4), 0 2px 6px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}
.ia-btn-primary:hover::before {
    left: 100%;
}
.ia-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}
.ia-btn-primary i {
    font-size: 1rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* --- Stepper de Processamento --- */
.ia-stepper {
    display: none;
    gap: 0;
    margin: 0.75rem 0;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ia-stepper.active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: ia-fadeIn 0.3s ease-out;
}

.ia-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    position: relative;
}

/* Linha conectora entre steps */
.ia-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 58%;
    right: -42%;
    height: 2px;
    background: #e2e8f0;
    transition: background 0.5s ease, box-shadow 0.5s ease;
    z-index: 0;
}
.ia-step.completed:not(:last-child)::after {
    background: linear-gradient(90deg, #10b981, #34d399);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.2);
}

/* Círculo numerado */
.ia-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.ia-step.active .ia-step-circle {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #1d4ed8;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12), 0 2px 8px rgba(59, 130, 246, 0.2);
    animation: ia-step-pulse 1.5s ease-in-out infinite;
    transform: scale(1.08);
}
.ia-step.completed .ia-step-circle {
    border-color: #10b981;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #047857;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
}
.ia-step.completed .ia-step-circle .ia-step-number {
    display: none;
}
.ia-step.completed .ia-step-circle::after {
    content: '✓';
    font-size: 0.75rem;
    font-weight: 800;
}

.ia-step-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: #94a3b8;
    text-align: center;
    line-height: 1.2;
    max-width: 80px;
    letter-spacing: 0.01em;
    transition: color 0.3s ease;
}
.ia-step.active .ia-step-label {
    color: #1d4ed8;
    font-weight: 700;
}
.ia-step.completed .ia-step-label {
    color: #047857;
}

@keyframes ia-step-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12), 0 2px 8px rgba(59, 130, 246, 0.2); }
    50%      { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0), 0 2px 8px rgba(59, 130, 246, 0.1); }
}

/* --- Painel de Resposta da IA --- */
.ia-response-panel {
    display: none;
    flex-direction: column;
    gap: 0.875rem;
    animation: ia-fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.ia-response-panel.visible {
    display: flex;
}

@keyframes ia-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Card genérico — estilo premium */
.ia-card {
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
    transition: box-shadow 0.2s ease;
}
.ia-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
}
.ia-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.675rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ia-card-header i {
    opacity: 0.7;
}
.ia-card-body {
    padding: 1rem;
}

/* Badges de protocolo — elegantes */
.ia-protocolo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    background: linear-gradient(135deg, #eff6ff, #e0f2fe);
    border: 1px solid #bfdbfe;
    border-radius: 9999px;
    font-size: 0.675rem;
    font-weight: 600;
    color: #1e40af;
    margin: 0.15rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(30, 64, 175, 0.06);
}
.ia-protocolo-badge:hover {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    box-shadow: 0 2px 6px rgba(30, 64, 175, 0.12);
    transform: translateY(-1px);
}
.ia-protocolo-badge code {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.6rem;
    background: rgba(30, 64, 175, 0.08);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

/* Badge clicável — interação */
.ia-protocolo-badge--clickable {
    cursor: pointer;
    user-select: none;
}
.ia-protocolo-badge--clickable:active {
    transform: scale(0.96);
}

/* Editor de conduta — limpo e elegante */
.ia-conduta-editor {
    min-height: 180px;
    max-height: 500px;
    overflow-y: auto;
    font-size: 0.8125rem;
    line-height: 1.7;
    outline: none;
    color: #1f2937;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}
.ia-conduta-editor:focus {
    outline: none;
    box-shadow: none;
    border: none;
}
/* Placeholder visual */
.ia-conduta-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    color: #cbd5e1;
    gap: 0.75rem;
}
.ia-conduta-placeholder i {
    font-size: 2rem;
    opacity: 0.6;
}
.ia-conduta-placeholder p {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Chat Tira-Dúvidas — premium chat */
.ia-chat-container {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-height: 260px;
    overflow-y: auto;
    padding: 0.375rem 0;
    scroll-behavior: smooth;
}
.ia-chat-bubble-user {
    align-self: flex-end;
    background: linear-gradient(135deg, #eff6ff, #e0f2fe);
    border: 1px solid #bfdbfe;
    color: #1e40af;
    padding: 0.625rem 0.875rem;
    border-radius: 1.25rem 1.25rem 0.25rem 1.25rem;
    font-size: 0.8rem;
    max-width: 80%;
    line-height: 1.55;
    box-shadow: 0 1px 3px rgba(30, 64, 175, 0.08);
}
.ia-chat-bubble-ai {
    align-self: flex-start;
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border: 1px solid #bbf7d0;
    border-left: 3px solid #10b981;
    color: #14532d;
    padding: 0.625rem 0.875rem;
    border-radius: 1.25rem 1.25rem 1.25rem 0.25rem;
    font-size: 0.8rem;
    max-width: 90%;
    line-height: 1.55;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.06);
}
.ia-chat-bubble-error {
    align-self: flex-start;
    background: linear-gradient(135deg, #fef2f2, #fff1f2);
    border: 1px solid #fecaca;
    border-left: 3px solid #ef4444;
    color: #991b1b;
    padding: 0.625rem 0.875rem;
    border-radius: 1.25rem 1.25rem 1.25rem 0.25rem;
    font-size: 0.8rem;
    max-width: 90%;
    line-height: 1.55;
}

/* Link sutil Analisar Lacunas */
.ia-link-analise {
    font-size: 0.7rem;
    color: #94a3b8;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem 0;
    transition: color 0.2s ease;
    letter-spacing: 0.01em;
}
.ia-link-analise:hover {
    color: #6366f1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Botões de ação finais — refinados */
.ia-action-buttons {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.25rem;
}
.ia-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.775rem;
    font-weight: 600;
    border-radius: 0.625rem;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ia-action-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    transform: translateY(-1px);
}
.ia-action-btn:active {
    transform: translateY(0);
}
.ia-action-btn i {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* --- Dark Mode: IA Conduta --- */
html.dark .ia-btn-primary {
    background: linear-gradient(135deg, #047857 0%, #059669 50%, #10b981 100%);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2), 0 1px 3px rgba(0,0,0,0.3);
}
html.dark .ia-btn-primary:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3), 0 2px 6px rgba(0,0,0,0.4);
}

html.dark .ia-stepper {
    background: linear-gradient(180deg, var(--color-bg-tertiary, #161b22), var(--color-bg-secondary, #0d1117));
    border-color: var(--color-border-primary, #30363d);
}
html.dark .ia-step-circle {
    background: var(--color-bg-secondary, #0d1117);
    border-color: #30363d;
    color: #484f58;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
html.dark .ia-step.active .ia-step-circle {
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.08));
    color: #93c5fd;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.1), 0 2px 8px rgba(59,130,246,0.15);
}
html.dark .ia-step.completed .ia-step-circle {
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.08));
    color: #6ee7b7;
    border-color: #10b981;
    box-shadow: 0 2px 6px rgba(16,185,129,0.1);
}
html.dark .ia-step:not(:last-child)::after {
    background: #30363d;
}
html.dark .ia-step.completed:not(:last-child)::after {
    background: linear-gradient(90deg, #10b981, #34d399);
}
html.dark .ia-step-label {
    color: #484f58;
}
html.dark .ia-step.active .ia-step-label  { color: #93c5fd; }
html.dark .ia-step.completed .ia-step-label { color: #6ee7b7; }

html.dark .ia-card {
    background: var(--color-bg-tertiary, #21262d);
    border-color: #484f58;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
}
html.dark .ia-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
    border-color: #6e7681;
}
html.dark .ia-card-header {
    background: linear-gradient(180deg, var(--color-bg-elevated, #2d333b), var(--color-bg-tertiary, #21262d));
    border-color: #484f58;
    color: #c9d1d9;
}
html.dark .ia-card-body {
    color: #e6edf3;
}

html.dark .ia-protocolo-badge {
    background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(59,130,246,0.05));
    border-color: rgba(59,130,246,0.25);
    color: #93c5fd;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
html.dark .ia-protocolo-badge:hover {
    background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(59,130,246,0.1));
    box-shadow: 0 2px 6px rgba(59,130,246,0.1);
}
html.dark .ia-protocolo-badge code {
    background: rgba(59,130,246,0.15);
}

html.dark .ia-conduta-editor {
    color: #e6edf3;
    background: var(--color-bg-secondary, #161b22);
    border-color: #30363d;
}
html.dark .ia-conduta-placeholder {
    color: #484f58;
}

html.dark .ia-chat-bubble-user {
    background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(59,130,246,0.05));
    border-color: rgba(59,130,246,0.2);
    color: #93c5fd;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
html.dark .ia-chat-bubble-ai {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.03));
    border-color: rgba(16,185,129,0.2);
    border-left-color: #10b981;
    color: #6ee7b7;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
html.dark .ia-chat-bubble-error {
    background: linear-gradient(135deg, rgba(248,81,73,0.12), rgba(248,81,73,0.06));
    border-color: rgba(248,81,73,0.3);
    border-left-color: #f85149;
    color: #ffa198;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

html.dark .ia-link-analise {
    color: #484f58;
}
html.dark .ia-link-analise:hover {
    color: #a5b4fc;
}

html.dark #cdss-question {
    background: var(--color-bg-input, #0d1117) !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
html.dark #cdss-question::placeholder {
    color: #484f58 !important;
}
html.dark #cdss-question:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15) !important;
}

html.dark .ia-action-btn {
    background: var(--color-bg-elevated, #2d333b) !important;
    border-color: #484f58 !important;
    color: #c9d1d9 !important;
}
html.dark .ia-action-btn:hover {
    background: var(--color-bg-elevated, #363d47) !important;
    color: #f0f6fc !important;
    border-color: #6e7681 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}


/* ============================================
   PROTOCOL MODAL — Visualizador de Protocolos v1.0
   ============================================ */

#protocol-detail-modal {
    animation: modalFadeIn 0.2s ease-out;
}

.protocol-modal-card {
    max-width: 800px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    animation: modalSlideIn 0.25s ease-out;
}

.protocol-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #eff6ff, #e0f2fe);
    border-bottom: 1px solid #bfdbfe;
}
.protocol-modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e3a5f;
    line-height: 1.3;
    margin: 0;
}
.protocol-cid-badge {
    display: inline-block;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    letter-spacing: 0.03em;
}
.protocol-id-label {
    font-size: 0.6rem;
    color: #94a3b8;
    font-weight: 500;
}
.protocol-close-btn {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #64748b;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.15s ease;
    cursor: pointer;
    font-size: 0.85rem;
}
.protocol-close-btn:hover {
    color: #1e293b;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.protocol-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.protocol-modal-body::-webkit-scrollbar { width: 6px; }
.protocol-modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.protocol-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}
.protocol-footer-close-btn {
    font-size: 0.75rem;
    font-weight: 600;
    color: #3b82f6;
    background: transparent;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 0.35rem 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.protocol-footer-close-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
}

/* Seções do protocolo */
.protocol-section {
    margin-bottom: 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
}
.protocol-section:last-child { margin-bottom: 0; }

.protocol-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
    letter-spacing: 0.02em;
}
.protocol-section-header--treatment {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-bottom-color: #bbf7d0;
    color: #166534;
}
.protocol-section-icon {
    font-size: 0.7rem;
    opacity: 0.6;
    width: 1rem;
    text-align: center;
}

.protocol-section-body {
    padding: 0.75rem 1rem;
}

.protocol-text {
    font-size: 0.8125rem;
    line-height: 1.7;
    color: #374151;
    margin-bottom: 0.5rem;
}
.protocol-text:last-child { margin-bottom: 0; }

/* Blocos aninhados */
.protocol-nested-block {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed #e5e7eb;
}
.protocol-nested-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.protocol-nested-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #4b5563;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Passos do tratamento */
.protocol-treatment-step {
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border: 1px solid #bbf7d0;
    border-radius: 0.5rem;
    border-left: 3px solid #22c55e;
}
.protocol-treatment-step:last-child { margin-bottom: 0; }
.protocol-step-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #166534;
    margin-bottom: 0.5rem;
}
.protocol-treatment-general {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #d1fae5;
}

/* Drug tags */
.protocol-drug-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #fcd34d;
    border-radius: 9999px;
    transition: all 0.15s ease;
}
.protocol-drug-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(146, 64, 14, 0.12);
}

/* Loading overlay */
.protocol-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    color: #3b82f6;
    font-weight: 600;
    border-radius: inherit;
    z-index: 10;
    gap: 0.5rem;
}


/* ============================================
   PROTOCOL MODAL — Dark Mode
   ============================================ */

html.dark .protocol-modal-card {
    background: var(--color-bg-secondary, #161b22);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
html.dark .protocol-modal-header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
    border-bottom-color: rgba(59, 130, 246, 0.2);
}
html.dark .protocol-modal-title { color: #e6edf3; }
html.dark .protocol-cid-badge {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.4));
    color: #93c5fd;
}
html.dark .protocol-id-label { color: #484f58; }
html.dark .protocol-close-btn {
    color: #8b949e;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}
html.dark .protocol-close-btn:hover {
    color: #f0f6fc;
    background: rgba(255, 255, 255, 0.1);
}
html.dark .protocol-modal-body {
    scrollbar-color: #30363d transparent;
}
html.dark .protocol-modal-body::-webkit-scrollbar-thumb { background: #30363d; }
html.dark .protocol-modal-footer {
    background: var(--color-bg-tertiary, #21262d);
    border-top-color: #30363d;
}
html.dark .protocol-footer-close-btn {
    color: #58a6ff;
    border-color: rgba(88, 166, 255, 0.3);
}
html.dark .protocol-footer-close-btn:hover {
    background: rgba(88, 166, 255, 0.1);
}

html.dark .protocol-section { border-color: #30363d; }
html.dark .protocol-section-header {
    background: linear-gradient(135deg, var(--color-bg-tertiary, #21262d), var(--color-bg-secondary, #161b22));
    border-bottom-color: #30363d;
    color: #c9d1d9;
}
html.dark .protocol-section-header--treatment {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
    border-bottom-color: rgba(34, 197, 94, 0.2);
    color: #6ee7b7;
}
html.dark .protocol-section-body { color: #c9d1d9; }
html.dark .protocol-text { color: #c9d1d9; }
html.dark .protocol-nested-block { border-bottom-color: #21262d; }
html.dark .protocol-nested-title { color: #8b949e; }

html.dark .protocol-treatment-step {
    background: rgba(34, 197, 94, 0.05);
    border-color: rgba(34, 197, 94, 0.15);
    border-left-color: #22c55e;
}
html.dark .protocol-step-title { color: #6ee7b7; }
html.dark .protocol-treatment-general { border-bottom-color: rgba(34, 197, 94, 0.15); }

html.dark .protocol-drug-tag {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05));
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.25);
}
html.dark .protocol-loading-overlay {
    background: rgba(22, 27, 34, 0.9);
    color: #58a6ff;
}

/* Responsive */
@media (max-width: 640px) {
    .protocol-modal-card {
        max-height: 92vh;
        border-radius: 0.75rem;
    }
    .protocol-modal-header { padding: 1rem; }
    .protocol-modal-body { padding: 1rem; }
    .protocol-modal-title { font-size: 1rem; }
}

/* ============================================
   PLAN GATING — Essential vs Intelligence
   ============================================ */

/* --- Ocultar elementos de IA no plano Essential --- */
html.plan-essential #btnGerarCondutaIA,
html.plan-essential #btnAnalisarLacunasLink,
html.plan-essential #ia-stepper,
html.plan-essential #ia-response-panel,
html.plan-essential .ia-action-buttons,
html.plan-clinical #btnGerarCondutaIA,
html.plan-clinical #btnAnalisarLacunasLink,
html.plan-clinical #ia-stepper,
html.plan-clinical #ia-response-panel,
html.plan-clinical .ia-action-buttons {
    display: none !important;
}

/* --- Banner de Upgrade — Light Mode --- */
.ia-upgrade-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 40%, #ede9fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 1rem;
    margin: 0.75rem 0;
    box-shadow: 0 2px 12px rgba(14, 165, 233, 0.08);
}

.ia-upgrade-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.15rem;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3);
}

.ia-upgrade-content {
    flex: 1;
    min-width: 0;
}

.ia-upgrade-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0c4a6e;
    margin: 0 0 0.35rem 0;
    letter-spacing: -0.01em;
}

.ia-upgrade-text {
    font-size: 0.7rem;
    color: #0369a1;
    line-height: 1.6;
    margin: 0 0 0.85rem 0;
    opacity: 0.85;
}

.ia-upgrade-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ia-upgrade-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1.1rem;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.25);
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
}

.ia-upgrade-btn:hover {
    box-shadow: 0 4px 18px rgba(14, 165, 233, 0.35);
    transform: translateY(-1px);
}

.ia-upgrade-btn:active {
    transform: translateY(0);
}

.ia-upgrade-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: #0369a1;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid #7dd3fc;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ia-upgrade-btn-secondary:hover {
    background: rgba(14, 165, 233, 0.06);
    border-color: #0ea5e9;
}

/* Banner oculto no plano Intelligence */
html.plan-intelligence .ia-upgrade-banner {
    display: none !important;
}

/* --- Dark Mode: Banner de Upgrade --- */
html.dark .ia-upgrade-banner {
    background: linear-gradient(135deg,
        rgba(14, 165, 233, 0.08) 0%,
        rgba(99, 102, 241, 0.06) 40%,
        rgba(14, 165, 233, 0.08) 100%);
    border-color: rgba(14, 165, 233, 0.2);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

html.dark .ia-upgrade-icon {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.35), rgba(99, 102, 241, 0.35));
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.15);
}

html.dark .ia-upgrade-title {
    color: #7dd3fc;
}

html.dark .ia-upgrade-text {
    color: #38bdf8;
    opacity: 0.7;
}

html.dark .ia-upgrade-btn {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.5), rgba(99, 102, 241, 0.5));
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.15);
}

html.dark .ia-upgrade-btn:hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.65), rgba(99, 102, 241, 0.65));
    box-shadow: 0 4px 18px rgba(14, 165, 233, 0.25);
}

html.dark .ia-upgrade-btn-secondary {
    color: #7dd3fc;
    border-color: rgba(14, 165, 233, 0.3);
}

html.dark .ia-upgrade-btn-secondary:hover {
    background: rgba(14, 165, 233, 0.1);
    border-color: rgba(14, 165, 233, 0.5);
}

/* Responsive */
@media (max-width: 640px) {
    .ia-upgrade-banner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.25rem;
    }
    .ia-upgrade-actions {
        justify-content: center;
    }
}

/* ============================================
   PLANO INTELLIGENCE — Bordas Douradas Premium
   Substitui bordas azuis por douradas para
   transmitir sofisticação e diferenciação visual
   ============================================ */

/* --- Modo Claro: Intelligence Gold ---
     :not([data-palette]) → dourado só quando NÃO há paleta ativa.
     Quando uma paleta customizada está ativa, ela tem prioridade. */
html.plan-intelligence:not([data-palette]) .border-t-4.border-blue-600 {
    border-top-color: #b8860b !important;
}

html.plan-intelligence:not([data-palette]) .border-l-4.border-blue-500 {
    border-left-color: #b8860b !important;
}

html.plan-intelligence:not([data-palette]) .border-blue-200,
html.plan-intelligence:not([data-palette]) .border-blue-200\/60,
html.plan-intelligence:not([data-palette]) .border-blue-100,
html.plan-intelligence:not([data-palette]) .border-blue-100\/60 {
    border-color: rgba(184, 134, 11, 0.3) !important;
}

html.plan-intelligence:not([data-palette]) .border-blue-300 {
    border-color: rgba(184, 134, 11, 0.4) !important;
}

html.plan-intelligence:not([data-palette]) .border-blue-500 {
    border-color: #b8860b !important;
}

html.plan-intelligence:not([data-palette]) .focus\:border-blue-500:focus,
html.plan-intelligence:not([data-palette]) .focus\:border-blue-400:focus {
    border-color: #d4a017 !important;
}

html.plan-intelligence:not([data-palette]) .focus-within\:border-blue-500:focus-within {
    border-color: #d4a017 !important;
}

html.plan-intelligence:not([data-palette]) .focus\:ring-blue-100:focus {
    --tw-ring-color: rgba(184, 134, 11, 0.15) !important;
}

/* Backgrounds azuis sutis → dourados sutis (só sem paleta) */
html.plan-intelligence:not([data-palette]) .bg-blue-50 {
    background-color: rgba(184, 134, 11, 0.04) !important;
}

html.plan-intelligence:not([data-palette]) .bg-blue-50\/30 {
    background-color: rgba(184, 134, 11, 0.03) !important;
}

/* --- Dark Mode: Intelligence Gold (só sem paleta) --- */
html.dark.plan-intelligence:not([data-palette]) .border-t-4.border-blue-600 {
    border-top-color: #d4a017 !important;
}

html.dark.plan-intelligence:not([data-palette]) .border-l-4.border-blue-500 {
    border-left-color: #d4a017 !important;
}

html.dark.plan-intelligence:not([data-palette]) .border-blue-200,
html.dark.plan-intelligence:not([data-palette]) .border-blue-200\/60,
html.dark.plan-intelligence:not([data-palette]) .border-blue-100,
html.dark.plan-intelligence:not([data-palette]) .border-blue-100\/60 {
    border-color: rgba(212, 160, 23, 0.2) !important;
}

html.dark.plan-intelligence:not([data-palette]) .border-blue-300 {
    border-color: rgba(212, 160, 23, 0.3) !important;
}

html.dark.plan-intelligence:not([data-palette]) .border-blue-500 {
    border-color: #d4a017 !important;
}

html.dark.plan-intelligence:not([data-palette]) .focus\:border-blue-500:focus,
html.dark.plan-intelligence:not([data-palette]) .focus\:border-blue-400:focus {
    border-color: #e6b422 !important;
}

html.dark.plan-intelligence:not([data-palette]) .focus-within\:border-blue-500:focus-within {
    border-color: #e6b422 !important;
}

html.dark.plan-intelligence:not([data-palette]) .focus\:ring-blue-100:focus {
    --tw-ring-color: rgba(212, 160, 23, 0.15) !important;
}

html.dark.plan-intelligence:not([data-palette]) .bg-blue-50 {
    background-color: rgba(212, 160, 23, 0.04) !important;
}

html.dark.plan-intelligence:not([data-palette]) .bg-blue-50\/30 {
    background-color: rgba(212, 160, 23, 0.03) !important;
}

/* --- Botão "Gerar Conduta IA" — Degradê Dourado Premium (só sem paleta) --- */
html.plan-intelligence:not([data-palette]) .ia-btn-primary {
    background: linear-gradient(135deg, #8B6914 0%, #B8860B 30%, #D4A017 60%, #E6B422 100%) !important;
    box-shadow: 0 4px 14px rgba(184, 134, 11, 0.35), 0 1px 3px rgba(0,0,0,0.1) !important;
}

html.plan-intelligence:not([data-palette]) .ia-btn-primary:hover {
    background: linear-gradient(135deg, #9A7515 0%, #C4950D 30%, #E0AC1A 60%, #F0C030 100%) !important;
    box-shadow: 0 6px 22px rgba(184, 134, 11, 0.45), 0 2px 6px rgba(0,0,0,0.12) !important;
}

html.plan-intelligence:not([data-palette]) .ia-btn-primary:active {
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.3) !important;
}

/* Dark mode (só sem paleta) */
html.dark.plan-intelligence:not([data-palette]) .ia-btn-primary {
    background: linear-gradient(135deg, #7A5C10 0%, #A07610 30%, #C4950D 60%, #D4A017 100%) !important;
    box-shadow: 0 4px 14px rgba(212, 160, 23, 0.25), 0 1px 3px rgba(0,0,0,0.35) !important;
}

html.dark.plan-intelligence:not([data-palette]) .ia-btn-primary:hover {
    background: linear-gradient(135deg, #8B6914 0%, #B8860B 30%, #D4A017 60%, #E6B422 100%) !important;
    box-shadow: 0 6px 22px rgba(212, 160, 23, 0.35), 0 2px 6px rgba(0,0,0,0.4) !important;
}

html.dark.plan-intelligence:not([data-palette]) .ia-btn-primary:active {
    box-shadow: 0 2px 8px rgba(212, 160, 23, 0.2) !important;
}

/* ============================================
   LABEL DA ABA POR PLANO (Essential vs Intelligence)
   Essential: "Anamnese" (sem robô)
   Intelligence: "IA & Anamnese" (com robô)
   ============================================ */
html.plan-essential .tab-label-intelligence,
html.plan-clinical .tab-label-intelligence { display: none !important; }
html.plan-essential .tab-label-clinical,
html.plan-clinical .tab-label-clinical { display: inline !important; }
html.plan-intelligence .tab-label-clinical { display: none !important; }
html.plan-intelligence .tab-label-intelligence { display: inline !important; }

/* ============================================
   CONSULTATION TIMER — Cronômetro de Consulta
   ============================================ */

.consultation-timer {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.2rem;
    margin-left: 0.5rem;
    user-select: none;
}

.timer-separator {
    color: #cbd5e1;
    font-weight: 300;
    font-size: 1rem;
    opacity: 0.5;
    margin: 0 0.1rem;
}

.timer-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.timer-display {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #94a3b8;
    min-width: 58px;
    text-align: center;
    transition: color 0.2s ease;
}

.timer-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #64748b;
    transition: all 0.15s ease;
    padding: 0;
}

.timer-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #334155;
}

.timer-btn:active {
    background: #e2e8f0;
    transform: scale(0.95);
}

.timer-btn-reset {
    font-size: 8px;
    width: 20px;
    height: 20px;
    opacity: 0.5;
}

.timer-btn-reset:hover {
    opacity: 1;
}

/* Estado: Running — timer ativo */
.timer-running .timer-display {
    color: #16a34a;
}

.timer-running .timer-btn {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #16a34a;
}

.timer-running .timer-btn:hover {
    background: #dcfce7;
    border-color: #86efac;
}

/* Estado: Paused — timer pausado */
.timer-paused .timer-display {
    color: #d97706;
}

.timer-paused .timer-btn {
    border-color: #fde68a;
    background: #fffbeb;
    color: #d97706;
}

.timer-paused .timer-btn:hover {
    background: #fef3c7;
    border-color: #fcd34d;
}

/* --- Dark Mode --- */
html.dark .timer-separator {
    color: #484f58;
}

html.dark .timer-label {
    color: #8b949e;
}

html.dark .timer-display {
    color: #8b949e;
}

html.dark .timer-btn {
    background: var(--color-bg-secondary, #161b22);
    border-color: #30363d;
    color: #8b949e;
}

html.dark .timer-btn:hover {
    background: var(--color-bg-tertiary, #21262d);
    border-color: #484f58;
    color: #f0f6fc;
}

html.dark .timer-btn:active {
    background: var(--color-bg-elevated, #2d333b);
}

html.dark .timer-running .timer-display {
    color: #3fb950;
}

html.dark .timer-running .timer-btn {
    border-color: rgba(63, 185, 80, 0.3);
    background: rgba(63, 185, 80, 0.08);
    color: #3fb950;
}

html.dark .timer-running .timer-btn:hover {
    background: rgba(63, 185, 80, 0.15);
    border-color: rgba(63, 185, 80, 0.5);
}

html.dark .timer-paused .timer-display {
    color: #d29922;
}

html.dark .timer-paused .timer-btn {
    border-color: rgba(210, 153, 34, 0.3);
    background: rgba(210, 153, 34, 0.08);
    color: #d29922;
}

html.dark .timer-paused .timer-btn:hover {
    background: rgba(210, 153, 34, 0.15);
    border-color: rgba(210, 153, 34, 0.5);
}

/* --- Paleta Ativa: Timer segue o tema --- */
html[data-palette] .timer-separator {
    color: var(--color-border-secondary) !important;
}

html[data-palette] .timer-label {
    color: var(--color-text-muted) !important;
}

html[data-palette] .timer-display {
    color: var(--color-text-tertiary) !important;
}

html[data-palette] .timer-btn {
    background: var(--color-bg-primary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-secondary) !important;
}

html[data-palette] .timer-btn:hover {
    background: var(--color-bg-hover) !important;
    border-color: var(--color-border-secondary) !important;
    color: var(--color-text-primary) !important;
}

html[data-palette] .timer-btn:active {
    background: var(--color-bg-tertiary) !important;
}

/* Running: tom mais escuro do tema */
html[data-palette] .timer-running .timer-display {
    color: var(--color-text-primary) !important;
}

html[data-palette] .timer-running .timer-btn {
    border-color: var(--color-border-focus) !important;
    background: var(--color-bg-secondary) !important;
    color: var(--color-text-primary) !important;
}

html[data-palette] .timer-running .timer-btn:hover {
    background: var(--color-bg-hover) !important;
    border-color: var(--color-tab-active-text) !important;
}

/* Paused: tom do tema (accent) */
html[data-palette] .timer-paused .timer-display {
    color: var(--color-tab-active-text) !important;
}

html[data-palette] .timer-paused .timer-btn {
    border-color: var(--color-border-primary) !important;
    background: var(--color-bg-secondary) !important;
    color: var(--color-tab-active-text) !important;
}

html[data-palette] .timer-paused .timer-btn:hover {
    background: var(--color-bg-hover) !important;
    border-color: var(--color-border-secondary) !important;
}

/* Responsive — timer compacto em mobile */
@media (max-width: 640px) {
    .consultation-timer {
        border-left: none;
        margin-left: 0;
        padding: 0.2rem 0.4rem;
    }
    .timer-display {
        font-size: 0.7rem;
    }
}

/* ============================================
   ABA DOCUMENTOS — Cards de Download
   ============================================ */

/* --- Card de Documento --- */
.doc-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
    cursor: default;
}

.doc-card:hover {
    border-color: #d4a017;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.doc-card-icon {
    font-size: 1.75rem;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fef3c7;
    border-radius: 0.625rem;
}

.doc-card-info {
    flex: 1;
    min-width: 0;
}

.doc-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.15rem;
}

.doc-card-desc {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.35;
    margin-bottom: 0.35rem;
}

.doc-card-meta {
    font-size: 0.65rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.doc-card-meta i {
    color: #ef4444;
    margin-right: 0.25rem;
}

.doc-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* --- Botões de ação --- */
.doc-btn {
    padding: 0.4rem 0.75rem;
    border-radius: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.doc-btn-view {
    background: #f0f9ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.doc-btn-view:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

.doc-btn-download {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

.doc-btn-download:hover {
    background: #dcfce7;
    border-color: #86efac;
}

/* --- Placeholders "Em Breve" --- */
.doc-coming-soon {
    opacity: 0.5;
}

.doc-placeholder-card {
    padding: 1.25rem;
    border-radius: 0.75rem;
    border: 2px dashed #d1d5db;
    text-align: center;
    transition: all 0.2s ease;
}

.doc-placeholder-card i {
    font-size: 1.5rem;
    color: #d1d5db;
    display: block;
    margin-bottom: 0.5rem;
}

.doc-placeholder-card p {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 500;
}

/* --- Intelligence: bordas douradas --- */
html.plan-intelligence .doc-card {
    border-color: rgba(184, 134, 11, 0.2);
}

html.plan-intelligence .doc-card:hover {
    border-color: rgba(184, 134, 11, 0.5);
    box-shadow: 0 4px 16px rgba(184, 134, 11, 0.08);
}

/* --- Dark Mode --- */
html.dark .doc-card {
    background: var(--color-bg-tertiary, #161b22);
    border-color: var(--color-border-primary, #30363d);
}

html.dark .doc-card:hover {
    border-color: rgba(212, 160, 23, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

html.dark .doc-card-icon {
    background: rgba(212, 160, 23, 0.12);
}

html.dark .doc-card-title {
    color: var(--color-text-primary, #e6edf3);
}

html.dark .doc-card-desc {
    color: var(--color-text-tertiary, #8b949e);
}

html.dark .doc-card-meta {
    color: var(--color-text-muted, #484f58);
}

html.dark .doc-btn-view {
    background: rgba(56, 139, 253, 0.08);
    color: #58a6ff;
    border-color: rgba(56, 139, 253, 0.2);
}

html.dark .doc-btn-view:hover {
    background: rgba(56, 139, 253, 0.15);
    border-color: rgba(56, 139, 253, 0.4);
}

html.dark .doc-btn-download {
    background: rgba(63, 185, 80, 0.08);
    color: #3fb950;
    border-color: rgba(63, 185, 80, 0.2);
}

html.dark .doc-btn-download:hover {
    background: rgba(63, 185, 80, 0.15);
    border-color: rgba(63, 185, 80, 0.4);
}

html.dark .doc-coming-soon {
    opacity: 0.35;
}

html.dark .doc-placeholder-card {
    border-color: var(--color-border-primary, #30363d);
}

html.dark .doc-placeholder-card i {
    color: var(--color-text-muted, #484f58);
}

html.dark .doc-placeholder-card p {
    color: var(--color-text-muted, #484f58);
}

html.dark #tab-documentos h2 {
    color: var(--color-text-primary, #e6edf3);
}

html.dark #tab-documentos h3 {
    color: var(--color-text-secondary, #c9d1d9);
}

html.dark #tab-documentos .text-gray-400 {
    color: var(--color-text-muted, #484f58) !important;
}

/* --- Responsivo --- */
@media (max-width: 768px) {
    .doc-card {
        flex-direction: column;
        text-align: center;
    }

    .doc-card-actions {
        flex-direction: row;
        width: 100%;
    }

    .doc-btn {
        flex: 1;
        justify-content: center;
    }
}

/* ============================================
   FEEDBACK / REPORTAR ERRO — FAB + Modal
   ============================================ */

/* --- FAB (Floating Action Button) --- */
.fab-feedback {
    position: fixed;
    bottom: 5.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(100, 116, 139, 0.2);
    background: #f1f5f9;
    color: #64748b;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
}

.fab-feedback:hover {
    background: #e2e8f0;
    color: #475569;
    border-color: rgba(100, 116, 139, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.fab-feedback:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* FAB — Intelligence: borda dourada */
html.plan-intelligence .fab-feedback {
    border-color: rgba(184, 134, 11, 0.3);
}

html.plan-intelligence .fab-feedback:hover {
    border-color: rgba(184, 134, 11, 0.5);
    box-shadow: 0 4px 16px rgba(184, 134, 11, 0.12);
}

/* FAB — Dark Mode */
html.dark .fab-feedback {
    background: var(--color-bg-tertiary, #21262d);
    color: var(--color-text-tertiary, #8b949e);
    border-color: rgba(139, 148, 158, 0.15);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

html.dark .fab-feedback:hover {
    background: var(--color-bg-elevated, #2d333b);
    color: var(--color-text-secondary, #c9d1d9);
    border-color: rgba(139, 148, 158, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

html.dark.plan-intelligence .fab-feedback {
    border-color: rgba(212, 160, 23, 0.25);
}

html.dark.plan-intelligence .fab-feedback:hover {
    border-color: rgba(212, 160, 23, 0.45);
    box-shadow: 0 4px 16px rgba(212, 160, 23, 0.1);
}

/* --- Modal Overlay --- */
.feedback-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.2s ease-out;
}

/* --- Modal Card --- */
.feedback-modal-card {
    max-width: 520px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    animation: modalSlideIn 0.25s ease-out;
}

/* --- Header --- */
.feedback-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #fefce8, #fef9c3);
    border-bottom: 1px solid rgba(202, 138, 4, 0.15);
}

.feedback-modal-header-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: #92400e;
}

.feedback-modal-header-title i {
    font-size: 1.1rem;
    color: #b45309;
}

.feedback-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    color: #92400e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.feedback-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #78350f;
}

/* --- Body --- */
.feedback-modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feedback-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.feedback-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.01em;
}

.feedback-required {
    color: #dc2626;
    font-weight: 700;
}

.feedback-select,
.feedback-input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #1f2937;
    background: #ffffff;
    outline: none;
    transition: border-color 0.2s ease;
}

.feedback-select:focus,
.feedback-input:focus {
    border-color: #ca8a04;
    box-shadow: 0 0 0 3px rgba(202, 138, 4, 0.1);
}

.feedback-textarea {
    width: 100%;
    min-height: 120px;
    padding: 0.65rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #1f2937;
    background: #ffffff;
    outline: none;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.2s ease;
}

.feedback-textarea:focus {
    border-color: #ca8a04;
    box-shadow: 0 0 0 3px rgba(202, 138, 4, 0.1);
}

.feedback-textarea-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.feedback-char-count {
    font-size: 0.7rem;
    color: #9ca3af;
    text-align: right;
}

/* --- Footer --- */
.feedback-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}

.feedback-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.feedback-btn-cancel {
    background: transparent;
    color: #6b7280;
    border-color: #d1d5db;
}

.feedback-btn-cancel:hover {
    background: #f3f4f6;
    color: #374151;
}

.feedback-btn-copy {
    background: transparent;
    color: #4b5563;
    border-color: #d1d5db;
}

.feedback-btn-copy:hover {
    background: #f0f9ff;
    color: #1d4ed8;
    border-color: #93c5fd;
}

.feedback-btn-submit {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #ffffff;
    border: none;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.feedback-btn-submit:hover {
    background: linear-gradient(135deg, #047857, #059669);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}

.feedback-btn-submit:active {
    transform: translateY(0);
}

/* Intelligence: botão submit dourado */
html.plan-intelligence .feedback-btn-submit {
    background: linear-gradient(135deg, #b8860b, #d4a017) !important;
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.25) !important;
}

html.plan-intelligence .feedback-btn-submit:hover {
    background: linear-gradient(135deg, #9a7515, #c4950d) !important;
    box-shadow: 0 4px 12px rgba(184, 134, 11, 0.35) !important;
}

/* --- Dark Mode: Feedback Modal --- */
html.dark .feedback-modal-overlay {
    background: rgba(0, 0, 0, 0.6);
}

html.dark .feedback-modal-card {
    background: var(--color-bg-secondary, #0d1117);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

html.dark .feedback-modal-header {
    background: linear-gradient(135deg, rgba(202, 138, 4, 0.1), rgba(184, 134, 11, 0.06));
    border-bottom-color: rgba(202, 138, 4, 0.15);
}

html.dark .feedback-modal-header-title {
    color: #fbbf24;
}

html.dark .feedback-modal-header-title i {
    color: #f59e0b;
}

html.dark .feedback-modal-close {
    background: rgba(255, 255, 255, 0.05);
    color: #fbbf24;
}

html.dark .feedback-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fde68a;
}

html.dark .feedback-label {
    color: var(--color-text-secondary, #c9d1d9);
}

html.dark .feedback-select,
html.dark .feedback-input,
html.dark .feedback-textarea {
    background: var(--color-bg-tertiary, #161b22);
    border-color: var(--color-border-primary, #30363d);
    color: var(--color-text-primary, #e6edf3);
}

html.dark .feedback-select:focus,
html.dark .feedback-input:focus,
html.dark .feedback-textarea:focus {
    border-color: rgba(212, 160, 23, 0.5);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.1);
}

html.dark .feedback-char-count {
    color: var(--color-text-muted, #484f58);
}

html.dark .feedback-modal-footer {
    background: var(--color-bg-tertiary, #161b22);
    border-top-color: var(--color-border-primary, #30363d);
}

html.dark .feedback-btn-cancel {
    color: var(--color-text-tertiary, #8b949e);
    border-color: var(--color-border-primary, #30363d);
}

html.dark .feedback-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-secondary, #c9d1d9);
}

html.dark .feedback-btn-copy {
    color: var(--color-text-tertiary, #8b949e);
    border-color: var(--color-border-primary, #30363d);
}

html.dark .feedback-btn-copy:hover {
    background: rgba(56, 139, 253, 0.08);
    color: #58a6ff;
    border-color: rgba(56, 139, 253, 0.3);
}

html.dark .feedback-btn-submit {
    background: linear-gradient(135deg, #047857, #059669);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

html.dark.plan-intelligence .feedback-btn-submit {
    background: linear-gradient(135deg, #8b6914, #b8860b) !important;
    box-shadow: 0 2px 8px rgba(212, 160, 23, 0.15) !important;
}

html.dark.plan-intelligence .feedback-btn-submit:hover {
    background: linear-gradient(135deg, #a07610, #c4950d) !important;
    box-shadow: 0 4px 12px rgba(212, 160, 23, 0.25) !important;
}

/* --- Responsivo --- */
@media (max-width: 640px) {
    .fab-feedback {
        width: 42px;
        height: 42px;
        bottom: 5rem;
        right: 1rem;
        font-size: 1rem;
    }

    .feedback-modal-card {
        max-width: 100%;
        border-radius: 0.75rem;
    }

    .feedback-modal-footer {
        flex-wrap: wrap;
    }

    .feedback-btn {
        flex: 1;
        justify-content: center;
        min-width: 120px;
    }
}

/* ============================================
 * MODAL INFO CLÍNICA PRÉ-NATAL
 * Reutiliza padrão visual do exam-info-panel
 * ============================================ */

/* Botão ℹ ao lado dos exames */
.pn-exam-info-btn,
.pn-img-info-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    vertical-align: middle;
    transition: color 0.15s, transform 0.15s;
}

.pn-exam-info-btn:hover,
.pn-img-info-btn:hover {
    transform: scale(1.25);
}

/* Overlay do modal */
.pn-info-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    padding: 16px;
}

.pn-info-panel.visible {
    opacity: 1;
    visibility: visible;
}

/* Conteúdo do modal */
.pn-info-panel-content {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(236, 72, 153, 0.1);
    max-width: 520px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(12px);
    transition: transform 0.2s ease;
}

.pn-info-panel.visible .pn-info-panel-content {
    transform: translateY(0);
}

/* Header do modal */
.pn-info-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 2px solid #fce7f3;
    flex-shrink: 0;
    background: linear-gradient(135deg, #fdf2f8, #fce7f3);
}

.pn-info-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: #831843;
    margin: 0;
    line-height: 1.3;
}

.pn-info-panel-close {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.15s;
    flex-shrink: 0;
}

.pn-info-panel-close:hover {
    background: rgba(236, 72, 153, 0.1);
    color: #be185d;
}

/* Body do modal */
.pn-info-panel-body {
    padding: 12px 20px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Badges de tipo */
.pn-info-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.pn-info-badge-obrig {
    background: #fce7f3;
    color: #be185d;
    border: 1px solid #fbcfe8;
}

.pn-info-badge-eleg {
    background: #ede9fe;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}

/* Seções do modal */
.pn-info-section {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
    background: #fafafa;
}

.pn-info-section-ok {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.pn-info-section-alert {
    background: #fffbeb;
    border-color: #fde68a;
}

.pn-info-section-note {
    background: #eff6ff;
    border-color: #bfdbfe;
}

/* Títulos dentro das seções */
.pn-info-title {
    font-size: 11px;
    font-weight: 700;
    color: #374151;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pn-info-title i {
    font-size: 11px;
}

/* Texto normal */
.pn-info-text {
    font-size: 12px;
    color: #4b5563;
    line-height: 1.55;
    margin: 0;
}

/* Parágrafos de conduta formatada */
.pn-info-para {
    font-size: 12px;
    color: #4b5563;
    line-height: 1.55;
    margin: 0 0 6px 0;
    padding-left: 8px;
    border-left: 2px solid #fbbf24;
}

.pn-info-para:last-child {
    margin-bottom: 0;
}

/* Badges de periodicidade */
.pn-info-period-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #e5e7eb;
}

/* Badges de disponibilidade */
.pn-info-avail-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    letter-spacing: 0.3px;
}

.pn-info-avail-sus {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.pn-info-avail-part {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

/* ============================================
 * CHECKLIST DE EXAMES PENDENTES
 * ============================================ */

.pn-checklist-box {
    background: #fdf2f8;
    border: 1px solid #fce7f3;
    border-radius: 10px;
    padding: 10px 14px;
}

.pn-checklist-box summary {
    outline: none;
    user-select: none;
}

.pn-checklist-box summary::-webkit-details-marker {
    color: #ec4899;
}

.pn-chk-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pn-chk-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.pn-chk-done {
    background: #d1fae5;
    color: #065f46;
    border-color: #a7f3d0;
}

.pn-chk-pending {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #e5e7eb;
}

.pn-chk-late {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
    font-weight: 600;
}

.pn-chk-sus {
    font-size: 8px;
    font-weight: 700;
    color: #059669;
    background: #ecfdf5;
    padding: 0 4px;
    border-radius: 3px;
    margin-left: 2px;
}

.pn-chk-part {
    font-size: 8px;
    font-weight: 700;
    color: #2563eb;
    background: #eff6ff;
    padding: 0 4px;
    border-radius: 3px;
    margin-left: 2px;
}

/* ============================================
 * DARK MODE — Modal Info Pré-Natal
 * ============================================ */

html.dark .pn-info-panel {
    background: rgba(0, 0, 0, 0.65);
}

html.dark .pn-info-panel-content {
    background: #161b22;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(236, 72, 153, 0.15);
}

html.dark .pn-info-panel-header {
    background: linear-gradient(135deg, #1c1226, #221530);
    border-bottom-color: #2d1f3d;
}

html.dark .pn-info-panel-title {
    color: #f9a8d4;
}

html.dark .pn-info-panel-close:hover {
    background: rgba(236, 72, 153, 0.15);
    color: #f9a8d4;
}

html.dark .pn-info-badge-obrig {
    background: rgba(190, 24, 93, 0.2);
    color: #f9a8d4;
    border-color: rgba(190, 24, 93, 0.3);
}

html.dark .pn-info-badge-eleg {
    background: rgba(109, 40, 217, 0.2);
    color: #c4b5fd;
    border-color: rgba(109, 40, 217, 0.3);
}

html.dark .pn-info-section {
    background: #1c2128;
    border-color: #30363d;
}

html.dark .pn-info-section-ok {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.2);
}

html.dark .pn-info-section-alert {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.2);
}

html.dark .pn-info-section-note {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}

html.dark .pn-info-title {
    color: #c9d1d9;
}

html.dark .pn-info-text {
    color: #8b949e;
}

html.dark .pn-info-para {
    color: #8b949e;
    border-left-color: #d97706;
}

html.dark .pn-info-period-badge {
    background: #21262d;
    color: #8b949e;
    border-color: #30363d;
}

html.dark .pn-info-avail-sus {
    background: rgba(5, 150, 105, 0.15);
    color: #6ee7b7;
    border-color: rgba(5, 150, 105, 0.3);
}

html.dark .pn-info-avail-part {
    background: rgba(37, 99, 235, 0.15);
    color: #93c5fd;
    border-color: rgba(37, 99, 235, 0.3);
}

/* ============================================
 * DARK MODE — Checklist Pendentes
 * ============================================ */

html.dark .pn-checklist-box {
    background: #1c1226;
    border-color: #2d1f3d;
}

html.dark .pn-checklist-box summary::-webkit-details-marker {
    color: #f472b6;
}

html.dark .pn-chk-done {
    background: rgba(34, 197, 94, 0.12);
    color: #6ee7b7;
    border-color: rgba(34, 197, 94, 0.25);
}

html.dark .pn-chk-pending {
    background: #21262d;
    color: #8b949e;
    border-color: #30363d;
}

html.dark .pn-chk-late {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.25);
}

html.dark .pn-chk-sus {
    background: rgba(5, 150, 105, 0.15);
    color: #6ee7b7;
}

html.dark .pn-chk-part {
    background: rgba(37, 99, 235, 0.15);
    color: #93c5fd;
}

/* Intelligence plan — bordas douradas no pré-natal */
html.plan-intelligence .pn-info-panel-header {
    border-bottom-color: #d4a017;
    background: linear-gradient(135deg, #fdf8e8, #fef3cd);
}

html.plan-intelligence .pn-info-panel-content {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(184, 134, 11, 0.2);
}

html.plan-intelligence .pn-checklist-box {
    border-color: rgba(184, 134, 11, 0.25);
}

html.dark.plan-intelligence .pn-info-panel-header {
    background: linear-gradient(135deg, #1a1708, #241e08);
    border-bottom-color: #8b6914;
}

html.dark.plan-intelligence .pn-info-panel-content {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(184, 134, 11, 0.2);
}

html.dark.plan-intelligence .pn-checklist-box {
    background: #1a1708;
    border-color: rgba(184, 134, 11, 0.2);
}

/* Responsivo modal pré-natal */
@media (max-width: 640px) {
    .pn-info-panel-content {
        max-width: 100%;
        max-height: 90vh;
        border-radius: 10px;
    }

    .pn-chk-grid {
        gap: 4px;
    }

    .pn-chk-item {
        font-size: 9px;
        padding: 2px 6px;
    }
}

/* ============================================
   ABA PUERICULTURA — Estilos
   ============================================ */

#tab-puericultura .bg-white {
    transition: box-shadow 0.2s ease;
}

#tab-puericultura .bg-white:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Badge ativo na aba */
#btn-tab-puericultura.active {
    color: #0284c7 !important;
    border-bottom: 2px solid #0284c7;
    background: #f0f9ff;
}

/* ============================================
   ABA ADOLESCENTE — Estilos
   ============================================ */

#tab-adolescente .bg-white {
    transition: box-shadow 0.2s ease;
}

#tab-adolescente .bg-white:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

#btn-tab-adolescente.active {
    color: #7c3aed !important;
    border-bottom: 2px solid #7c3aed;
    background: #f5f3ff;
}

/* HEEADSSS textarea styling */
#tab-adolescente textarea:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.2);
}

/* ============================================
   DARK MODE — Puericultura e Adolescente
   ============================================ */

html.dark #tab-puericultura .bg-white,
html.dark #tab-adolescente .bg-white {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #e6edf3 !important;
}

html.dark #tab-puericultura .text-gray-700,
html.dark #tab-adolescente .text-gray-700 {
    color: #c9d1d9 !important;
}

html.dark #tab-puericultura .text-gray-600,
html.dark #tab-adolescente .text-gray-600 {
    color: #8b949e !important;
}

html.dark #tab-puericultura .text-gray-400,
html.dark #tab-puericultura .text-gray-500,
html.dark #tab-adolescente .text-gray-400,
html.dark #tab-adolescente .text-gray-500 {
    color: #6e7681 !important;
}

html.dark #tab-puericultura .border-gray-200,
html.dark #tab-puericultura .border-gray-100,
html.dark #tab-adolescente .border-gray-200,
html.dark #tab-adolescente .border-gray-100 {
    border-color: #30363d !important;
}

html.dark #tab-puericultura select,
html.dark #tab-puericultura input,
html.dark #tab-puericultura textarea,
html.dark #tab-adolescente select,
html.dark #tab-adolescente input,
html.dark #tab-adolescente textarea {
    background: #161b22 !important;
    border-color: #30363d !important;
    color: #e6edf3 !important;
}

html.dark #tab-puericultura .bg-red-50,
html.dark #tab-adolescente .bg-red-50 {
    background: rgba(248, 81, 73, 0.1) !important;
}

html.dark #tab-puericultura .border-red-200,
html.dark #tab-adolescente .border-red-200 {
    border-color: rgba(248, 81, 73, 0.3) !important;
}

html.dark #tab-puericultura .bg-green-50,
html.dark #tab-puericultura .bg-blue-50,
html.dark #tab-puericultura .bg-amber-50,
html.dark #tab-adolescente .bg-purple-50,
html.dark #tab-adolescente .bg-amber-50 {
    background: rgba(56, 58, 64, 0.5) !important;
}

html.dark #tab-puericultura .bg-sky-50,
html.dark #tab-adolescente .bg-purple-50 {
    background: rgba(56, 58, 64, 0.3) !important;
}

html.dark #btn-tab-puericultura.active {
    color: #38bdf8 !important;
    border-bottom-color: #38bdf8;
    background: rgba(56, 189, 248, 0.08);
}

html.dark #btn-tab-adolescente.active {
    color: #a78bfa !important;
    border-bottom-color: #a78bfa;
    background: rgba(167, 139, 250, 0.08);
}

/* ============================================
   REDE PARTICULAR — Separação visual vacinas
   ============================================ */

html.dark #tab-puericultura .border-amber-300,
html.dark #tab-adolescente .border-amber-300,
html.dark #tab-puericultura .border-amber-200,
html.dark #tab-adolescente .border-amber-200,
html.dark #tab-puericultura .border-amber-100,
html.dark #tab-adolescente .border-amber-100 {
    border-color: rgba(217, 119, 6, 0.35) !important;
}

html.dark #tab-puericultura .border-blue-200,
html.dark #tab-adolescente .border-purple-200 {
    border-color: rgba(96, 165, 250, 0.3) !important;
}

html.dark #tab-puericultura .text-amber-700,
html.dark #tab-adolescente .text-amber-700 {
    color: #fbbf24 !important;
}

html.dark #tab-puericultura .text-amber-600,
html.dark #tab-adolescente .text-amber-600 {
    color: #f59e0b !important;
}

html.dark #tab-puericultura .text-blue-700,
html.dark #tab-adolescente .text-purple-700 {
    color: #93c5fd !important;
}

html.dark #tab-puericultura .bg-amber-100,
html.dark #tab-adolescente .bg-amber-100 {
    background: rgba(217, 119, 6, 0.2) !important;
}

html.dark #tab-puericultura .hover\:bg-amber-50:hover,
html.dark #tab-adolescente .hover\:bg-amber-50:hover {
    background: rgba(217, 119, 6, 0.12) !important;
}

/* ============================================
   INTELLIGENCE — Bordas douradas Puericultura/Adolescente
   ============================================ */

html.plan-intelligence #tab-puericultura .border-gray-200,
html.plan-intelligence #tab-adolescente .border-gray-200 {
    border-color: rgba(184, 134, 11, 0.25) !important;
}

html.plan-intelligence #btn-tab-puericultura.active {
    border-bottom-color: #b8860b;
}

html.plan-intelligence #btn-tab-adolescente.active {
    border-bottom-color: #b8860b;
}

/* ============================================
   ADOLESCENTE TAB v2 — Testes Interativos (PHQ-9, GAD-7, CRAFFT 2.1+N)
   Modal, botões, opções, badges, quick responses, dark mode
   ============================================ */

/* === MODAL OVERLAY === */
.adol-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}
.adol-modal-overlay.hidden { display: none; }

.adol-modal-content {
    background: #fff;
    border-radius: 12px;
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}

.adol-modal-header {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
}

.adol-modal-body {
    overflow-y: auto;
    padding: 1rem 1.25rem;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* === CARDS DE PERGUNTA === */
.adol-question-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    transition: border-color 0.2s;
}
.adol-question-card:hover { border-color: #a78bfa; }

.adol-question-critical {
    border-left: 3px solid #ef4444 !important;
    background: #fef2f2;
}

.adol-question-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #7c3aed;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

/* === GRID DE OPÇÕES === */
.adol-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem;
}
@media (max-width: 500px) {
    .adol-options-grid { grid-template-columns: 1fr; }
}

/* === BOTÕES DE OPÇÃO === */
.adol-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    gap: 0.25rem;
}
.adol-option:hover {
    border-color: #8b5cf6;
    background: #f5f3ff;
}

.adol-option-selected {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    border: 2px solid #7c3aed;
    background: #ede9fe;
    color: #5b21b6;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    gap: 0.25rem;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

.adol-option-danger {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
    color: #b91c1c !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

.adol-option-score {
    font-size: 9px;
    opacity: 0.6;
}

/* === CARD DE RESULTADO === */
.adol-result-card {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 0.75rem;
}

/* === SEÇÃO HEADER (dentro do modal CRAFFT) === */
.adol-section-header {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

/* === BOTÕES DE AÇÃO === */
.adol-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    background: #7c3aed;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.adol-btn-primary:hover { background: #6d28d9; }
.adol-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.adol-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    background: #f3f4f6;
    color: #374151;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid #d1d5db;
    cursor: pointer;
    transition: background 0.2s;
}
.adol-btn-secondary:hover { background: #e5e7eb; }

/* === BOTÃO "APLICAR TESTE" nos rastreios === */
.adol-test-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(124, 58, 237, 0.3);
}
.adol-test-btn:hover {
    background: linear-gradient(135deg, #6d28d9, #5b21b6);
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.4);
    transform: translateY(-1px);
}

/* === BOTÕES DE RESPOSTA RÁPIDA (HEEADSSS) === */
.adol-quick-btn {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #4b5563;
    font-size: 9px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.adol-quick-btn:hover {
    border-color: #8b5cf6;
    background: #f5f3ff;
    color: #6d28d9;
}

.adol-quick-btn-danger {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #fca5a5;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.adol-quick-btn-danger:hover {
    border-color: #ef4444;
    background: #fee2e2;
}

/* ============================================
   ADOLESCENTE TAB v2 — DARK MODE
   ============================================ */

html.dark .adol-modal-overlay {
    background: rgba(0, 0, 0, 0.8);
}

html.dark .adol-modal-content {
    background: #1e2430;
    border: 1px solid #30363d;
}

html.dark .adol-modal-header {
    background: linear-gradient(135deg, #5b21b6 0%, #4c1d95 100%);
}

html.dark .adol-modal-body {
    background: #1e2430;
}

html.dark .adol-question-card {
    background: #161b22;
    border-color: #30363d;
}
html.dark .adol-question-card:hover { border-color: #7c3aed; }

html.dark .adol-question-critical {
    background: #2d1b1b;
    border-left-color: #ef4444 !important;
}

html.dark .adol-option {
    background: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
}
html.dark .adol-option:hover {
    border-color: #7c3aed;
    background: #2d2440;
}

html.dark .adol-option-selected {
    background: #2d2440;
    border-color: #8b5cf6;
    color: #c4b5fd;
}

html.dark .adol-option-danger {
    background: #3b1c1c !important;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
}

html.dark .adol-result-card {
    background: #1a2e1a;
    border-color: #2d5a2d;
}

html.dark .adol-btn-primary {
    background: #7c3aed;
}
html.dark .adol-btn-primary:hover { background: #6d28d9; }

html.dark .adol-btn-secondary {
    background: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
}
html.dark .adol-btn-secondary:hover { background: #30363d; }

html.dark .adol-test-btn {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

html.dark .adol-quick-btn {
    background: #21262d;
    border-color: #30363d;
    color: #8b949e;
}
html.dark .adol-quick-btn:hover {
    border-color: #7c3aed;
    background: #2d2440;
    color: #c4b5fd;
}

html.dark .adol-quick-btn-danger {
    background: #2d1b1b;
    border-color: #7f1d1d;
    color: #fca5a5;
}
html.dark .adol-quick-btn-danger:hover {
    background: #3b1c1c;
    border-color: #ef4444;
}

/* === Intelligence dourado para modal adolescente === */
html.plan-intelligence .adol-modal-header {
    background: linear-gradient(135deg, #8B6914, #B8860B, #D4A017) !important;
}
html.plan-intelligence .adol-btn-primary {
    background: linear-gradient(135deg, #8B6914, #B8860B) !important;
}
html.plan-intelligence .adol-btn-primary:hover {
    background: linear-gradient(135deg, #705510, #8B6914) !important;
}
html.plan-intelligence .adol-test-btn {
    background: linear-gradient(135deg, #B8860B, #D4A017) !important;
}
html.plan-intelligence .adol-option-selected {
    border-color: #B8860B !important;
    background: rgba(184, 134, 11, 0.15) !important;
    color: #D4A017 !important;
    box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.2) !important;
}
html.plan-intelligence .adol-question-number {
    background: #B8860B !important;
}

/* === Botão "i" informativo nos rastreios === */
.adol-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid #8b5cf6;
    background: #f5f3ff;
    color: #7c3aed;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.adol-info-btn:hover {
    background: #7c3aed;
    color: #fff;
    transform: scale(1.1);
}

/* Botão "i" inline ao lado do título — sem círculo extra */
.adol-info-btn-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #7c3aed;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
    opacity: 0.7;
}
.adol-info-btn-inline:hover {
    color: #6d28d9;
    opacity: 1;
    transform: scale(1.15);
}

/* === Popover informativo dos rastreios === */
.adol-info-popover {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    animation: adol-fade-in 0.2s ease;
}
.adol-info-popover.hidden { display: none; }

@keyframes adol-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === Dark mode: info btn + popover === */
html.dark .adol-info-btn {
    background: #2d2440;
    border-color: #7c3aed;
    color: #c4b5fd;
}
html.dark .adol-info-btn:hover {
    background: #7c3aed;
    color: #fff;
}
html.dark .adol-info-btn-inline {
    color: #c4b5fd;
}
html.dark .adol-info-btn-inline:hover {
    color: #a78bfa;
}
html.dark .adol-info-popover {
    background: #1e2430;
    border-color: #30363d;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
html.dark .adol-info-popover .text-purple-700 { color: #c4b5fd; }
html.dark .adol-info-popover .text-gray-600 { color: #8b949e; }
html.dark .adol-info-popover .text-gray-700 { color: #c9d1d9; }
html.dark .adol-info-popover .text-red-700 { color: #fca5a5; }
html.dark .adol-info-popover .bg-gray-100 { background: #21262d; }
html.dark .adol-info-popover .bg-red-50 { background: #2d1b1b; }
html.dark .adol-info-popover .border-red-200 { border-color: #7f1d1d; }
html.dark .adol-info-popover table tbody { border-color: #30363d; }

/* Intelligence: info btn dourado */
html.plan-intelligence .adol-info-btn {
    border-color: #B8860B;
    color: #B8860B;
    background: rgba(184, 134, 11, 0.08);
}
html.plan-intelligence .adol-info-btn:hover {
    background: #B8860B;
    color: #fff;
}
html.plan-intelligence .adol-info-btn-inline {
    color: #B8860B;
}
html.plan-intelligence .adol-info-btn-inline:hover {
    color: #d4a017;
}


/* ============================================
   RESPONSIVIDADE HARMÔNICA v2

   Princípio: NÃO escalar tamanhos de elementos.
   Apenas ajustar PROPORÇÕES DE LAYOUT e ESPAÇO
   para que o conteúdo se distribua naturalmente
   no espaço disponível do monitor.
   ============================================ */

/* ── CONTAINER: ocupar melhor monitores grandes ── */
@media (min-width: 1920px) {
    .max-w-screen-2xl { max-width: 1760px !important; }
}
@media (min-width: 2560px) {
    .max-w-screen-2xl { max-width: 2100px !important; }
}

/* ── GRID PRINCIPAL: proporção conteúdo / sidebar ──
   O padrão é 7/5. Em telas XL damos 8/4 para
   o editor ter mais espaço horizontal.            */
@media (min-width: 1280px) and (max-width: 1535px) {
    .lg\:col-span-7 { grid-column: span 8 / span 8 !important; }
    .lg\:col-span-5 { grid-column: span 4 / span 4 !important; }
}

/* ── CARDS DO TOPO: reorganizar em tablets ──
   Em 768-1023px Nascimento+Biometria lado a lado,
   Sinais Vitais em linha inteira.                */
@media (min-width: 768px) and (max-width: 1023px) {
    .md\:col-span-4 { grid-column: span 6 / span 6 !important; }
    .md\:col-span-3 { grid-column: span 6 / span 6 !important; }
    .md\:col-span-5 { grid-column: span 12 / span 12 !important; }
}

/* ── SIDEBAR: altura adaptativa à tela ──
   Notebooks baixos = sidebar menor; monitores
   altos = sidebar aproveita mais espaço.      */
@media (max-height: 650px) and (min-width: 1024px) {
    .h-\[78vh\] { height: 65vh !important; }
}
@media (min-height: 650px) and (max-height: 800px) and (min-width: 1024px) {
    .h-\[78vh\] { height: 72vh !important; }
}
@media (min-height: 1000px) {
    .h-\[78vh\] { height: 82vh !important; }
}
@media (min-height: 1200px) {
    .h-\[78vh\] { height: 85vh !important; }
}

/* ── CONTEÚDO PRINCIPAL: min-height adaptativo ── */
@media (max-height: 768px) and (min-width: 1024px) {
    .min-h-\[600px\] { min-height: 420px !important; }
}

/* ── NOTEBOOK COMPACTO: condensar abas e conteúdo ── */
@media (max-height: 700px) and (min-width: 1024px) {
    .tab-btn {
        padding: 0.55rem 0.9rem;
        font-size: 0.75rem;
    }
}

/* ── BARRA DE ABAS: scroll suave sem scrollbar visível ── */
@media (max-width: 1280px) {
    .flex.overflow-x-auto.scrollbar-hide {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .flex.overflow-x-auto.scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
}

/* ── MOBILE LANDSCAPE ── */
@media (max-width: 767px) and (orientation: landscape) {
    .h-\[78vh\] {
        height: auto !important;
        max-height: 55vh;
    }
}

/* ── MOBILE PORTRAIT: tudo em coluna ── */
@media (max-width: 767px) {
    .min-h-\[600px\] { min-height: 300px !important; }
    .h-\[78vh\] { height: auto !important; max-height: 70vh; }
}

/* ============================================
   SESSÕES CLÍNICAS - UI PAINEL LATERAL
   ============================================ */

.session-panel-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    animation: fadeIn 0.2s ease-out;
}

.session-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 450px;
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* === HEADER === */

.session-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-border-primary);
    background: var(--color-bg-secondary);
}

.session-panel-header h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.session-panel-header h2 i {
    color: var(--color-border-focus, #3b82f6);
}

.session-panel-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.session-panel-close:hover {
    color: var(--color-text-primary);
}

/* === CONTENT === */

.session-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.session-panel-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.session-panel-section h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.session-btn-text {
    background: transparent;
    border: none;
    color: #3b82f6;
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s;
}

.session-btn-text:hover {
    color: #2563eb;
}

/* === FORMS === */

.session-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.session-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.session-form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.session-input {
    padding: 0.75rem;
    border: 1px solid var(--color-border-input);
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--color-text-primary);
    background: var(--color-bg-input);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.session-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.session-input:disabled {
    background: var(--color-bg-input-disabled);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.session-input::placeholder {
    color: var(--color-text-muted);
}

/* === BOTÕES === */

.session-btn {
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.session-btn-primary {
    background: var(--color-border-focus, #3b82f6);
    color: white;
}

.session-btn-primary:hover {
    background: var(--color-border-focus, #2563eb);
    filter: brightness(0.9);
    box-shadow: var(--shadow-md);
}

.session-btn-primary:active {
    background: var(--color-border-focus, #1d4ed8);
    filter: brightness(0.8);
}

.session-btn-secondary {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-primary);
}

.session-btn-secondary:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-secondary);
}

.session-btn-small {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.session-btn-danger {
    color: #dc2626;
}

.session-btn-danger:hover {
    background: #fee2e2;
}

/* === SEARCH === */

.session-search-group {
    display: flex;
    gap: 0.75rem;
}

.session-search-group .session-input {
    flex: 1;
}

.session-search-group .session-btn {
    flex: 0 0 auto;
    width: 44px;
    padding: 0.75rem;
}

/* === LISTAS === */

.session-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
}

.session-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    color: var(--color-text-muted);
    text-align: center;
}

.session-list-empty i {
    font-size: 2rem;
    opacity: 0.5;
}

.session-list-empty p {
    margin: 0;
    font-size: 0.95rem;
}

/* === PATIENT CARD === */

.session-patient-card {
    padding: 1rem;
    border: 1px solid var(--color-border-primary);
    border-radius: 0.5rem;
    background: var(--color-bg-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.session-patient-card:hover {
    border-color: var(--color-border-focus, #3b82f6);
    background: var(--color-bg-elevated);
    box-shadow: var(--shadow-sm);
}

.session-patient-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.session-patient-card-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.session-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.session-patient-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.session-patient-card-footer small {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* === SESSION CARD === */

.session-session-card {
    padding: 1rem;
    border: 1px solid var(--color-border-primary);
    border-radius: 0.5rem;
    background: var(--color-bg-secondary);
}

.session-session-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.session-session-card-header h5 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.session-session-actions {
    display: flex;
    gap: 0.5rem;
}

.session-notes-preview {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border-light);
}

/* === DISCLAIMER === */

.session-disclaimer {
    padding: 1rem;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 0.5rem;
    color: #92400e;
    font-size: 0.875rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.session-disclaimer i {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* === DARK MODE === */

html.dark .session-panel {
    background: var(--color-bg-primary);
}

html.dark .session-panel-header {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
}

html.dark .session-input {
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    border-color: var(--color-border-input);
}

html.dark .session-input:focus {
    border-color: #3b82f6;
}

html.dark .session-patient-card,
html.dark .session-session-card {
    background: var(--color-bg-secondary);
}

html.dark .session-patient-card:hover {
    background: var(--color-bg-elevated);
    border-color: #3b82f6;
}

html.dark .session-badge {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

html.dark .session-disclaimer {
    background: rgba(217, 119, 6, 0.15);
    border-color: rgba(217, 119, 6, 0.3);
    color: #fbbf24;
}

html.dark .session-panel-content {
    color: var(--color-text-primary);
}

html.dark .session-panel-section h3 {
    color: var(--color-text-secondary);
}

html.dark .session-btn-secondary {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border-color: var(--color-border-primary);
}

html.dark .session-btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* === INTELIGÊNCIA - BORDERS DOURADAS === */

html.plan-intelligence .session-panel-header h2 i,
html.plan-intelligence .session-panel-close,
html.plan-intelligence .session-btn-primary {
    color: #b8860b;
}

html.plan-intelligence .session-btn-primary {
    background: #b8860b;
}

html.plan-intelligence .session-btn-primary:hover {
    background: #d4a017;
}

html.plan-intelligence .session-patient-card:hover {
    border-color: #b8860b;
}

html.plan-intelligence .session-badge {
    background: rgba(184, 134, 11, 0.15);
    color: #d4a017;
}

/* === RESPONSIVE === */

@media (max-width: 640px) {
    .session-panel {
        max-width: 100%;
    }

    .session-panel-content {
        padding: 1rem;
        gap: 1rem;
    }

    .session-list {
        max-height: 200px;
    }

    .session-patient-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .session-session-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .session-patient-card-footer,
    .session-session-actions {
        width: 100%;
    }

    .session-patient-card-footer {
        justify-content: space-between;
    }
}

/* ============================================
   BOTÃO SESSÕES - HEADER
   ============================================ */

.btn-sessoes {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-sessoes:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
}

.btn-sessoes:active {
    transform: translateY(0);
}

html.plan-intelligence .btn-sessoes {
    background: linear-gradient(135deg, #b8860b 0%, #d4a017 100%);
}

html.plan-intelligence .btn-sessoes:hover {
    background: linear-gradient(135deg, #d4a017 0%, #e6b422 100%);
    box-shadow: 0 4px 6px rgba(184, 134, 11, 0.3);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .btn-sessoes {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    }

    .btn-sessoes:hover {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    }
}