{% extends 'app_base.html' %}{% block content %}
<div class="settings-head"><div><div class="eyebrow">Central de parametrização</div><h1>Configurações</h1><p>Personalize operação, aparência, financeiro, PIX, portal e comunicação da clínica em um só lugar.</p></div><span class="badge">ClinicOS 11.23</span></div>

{% if not settings_unlocked and not session_user.developer_override %}
<section class="card settings-section settings-security-gate"><div class="settings-title"><div><span class="settings-kicker">SEGURANÇA</span><h2>Confirmar acesso às Configurações</h2><p>Para evitar alterações com uma sessão administrativa esquecida aberta, confirme novamente a senha do usuário conectado.</p></div><span class="material-symbols-outlined">admin_panel_settings</span></div><form method="post" class="form-grid settings-unlock-form"><input type="hidden" name="section" value="unlock_settings"><div><label class="label">Usuário</label><input class="input" value="{{ session_user.email }}" readonly></div><div><label class="label">Senha</label><input class="input" type="password" name="password" autocomplete="current-password" required autofocus></div><button class="btn btn-primary"><span class="material-symbols-outlined">lock_open</span> Liberar configurações por 15 minutos</button></form><div class="notice" style="margin-top:14px">O bloqueio protege <b>todas</b> as abas: Geral, Dados/Sync, Aparência, Financeiro, PIX, Comunicação, Mobile, Portal e Auditoria.</div></section>
{% else %}
<nav class="settings-nav card">
<a href="#geral"><span class="material-symbols-outlined">tune</span>Geral</a>
<a href="#dados"><span class="material-symbols-outlined">database</span>Dados / Sync</a>
<a href="#aparencia"><span class="material-symbols-outlined">palette</span>Aparência <small>central</small></a>
<a href="#metas"><span class="material-symbols-outlined">track_changes</span>Metas</a>
<a href="#financeiro"><span class="material-symbols-outlined">payments</span>Financeiro</a>
<a href="#pix"><span class="material-symbols-outlined">qr_code_2</span>PIX</a>
<a href="#comunicacao"><span class="material-symbols-outlined">alternate_email</span>Comunicação</a>
<a href="#mobile"><span class="material-symbols-outlined">qr_code_2</span>Mobile</a>
<a href="#portal"><span class="material-symbols-outlined">patient_list</span>Portal</a>
<a href="#auditoria"><span class="material-symbols-outlined">history</span>Auditoria</a>
</nav>

<section id="geral" class="card settings-section"><div class="settings-title"><div><span class="settings-kicker">CLÍNICA</span><h2>Configurações gerais</h2><p>Dados de exibição e preferências operacionais.</p></div><span class="material-symbols-outlined">business</span></div>
<form method="post" class="form-grid"><input type="hidden" name="section" value="general">
<div class="grid-3"><div><label class="label">Nome de exibição</label><input class="input" name="display_name" value="{{ clinic.general_settings.display_name }}"></div><div><label class="label">Telefone</label><input class="input" name="phone" value="{{ clinic.general_settings.phone }}"></div><div><label class="label">E-mail institucional</label><input class="input" type="email" name="email" value="{{ clinic.general_settings.email }}"></div></div>
<div style="margin-top:14px"><label class="label">Endereço da clínica (usado em relatórios/documentos)</label><input class="input" name="address" value="{{ clinic.general_settings.address }}" placeholder="Rua, número, bairro, cidade/UF"></div>
<div class="grid-3" style="margin-top:14px"><div><label class="label">Site</label><input class="input" name="website" value="{{ clinic.general_settings.website }}" placeholder="https://..."></div><div><label class="label">Fuso horário</label><select class="input" name="timezone"><option value="America/Sao_Paulo" selected>Brasília / São Paulo</option><option value="America/Manaus">Manaus</option><option value="America/Cuiaba">Cuiabá</option><option value="America/Rio_Branco">Rio Branco</option></select></div><div><label class="label">Linhas por tabela</label><input class="input" type="number" min="10" max="100" name="rows_per_page" value="{{ clinic.general_settings.rows_per_page }}"></div></div>
<div class="grid-3"><div><label class="label">Idioma/região</label><select class="input" name="locale"><option value="pt-BR">Português (Brasil)</option></select></div><div><label class="label">Moeda</label><select class="input" name="currency"><option value="BRL">Real brasileiro (BRL)</option></select></div><div><label class="label">Formato de data</label><select class="input" name="date_format"><option value="DD/MM/YYYY">DD/MM/AAAA</option><option value="YYYY-MM-DD">AAAA-MM-DD</option></select></div></div>
<div class="settings-actions"><button class="btn btn-primary">Salvar configurações gerais</button></div></form></section>

<section id="dados" class="card settings-section"><div class="settings-title"><div><span class="settings-kicker">INFRAESTRUTURA</span><h2>Banco de dados e sincronização</h2><p>Confira qual base o ClinicOS está usando neste servidor. Credenciais e senhas nunca são exibidas.</p></div><span class="material-symbols-outlined">database</span></div>
<div class="grid-3">
<div class="integration-card"><small>BASE ATIVA NO RUNTIME</small><h3>{{ infra_status.provider_label }}</h3><span class="badge">{{ infra_status.provider }}</span></div>
<div class="integration-card"><small>FIREBIRD</small><h3>{{ 'Conectado' if infra_status.firebird_ready else ('Configurado' if infra_status.firebird_configured else 'Não configurado') }}</h3><p><b>Banco:</b> {{ infra_status.firebird_database or 'não informado' }}</p><p><b>Servidor:</b> {{ infra_status.firebird_host }}:{{ infra_status.firebird_port }}</p></div>
<div class="integration-card"><small>FIREBASE / FIRESTORE</small><h3>{{ 'Admin configurado' if infra_status.firebase_admin_configured else 'Credencial Admin pendente' }}</h3><p><b>Projeto:</b> {{ infra_status.firebase_project or 'não informado' }}</p><p><b>Database ID:</b> {{ infra_status.firebase_database or 'clinica' }}</p></div>
</div>
<div class="notice" style="margin-top:14px"><b>Arquivo local de apoio:</b> {{ infra_status.local_file }}{% if infra_status.provider=='firebird_hybrid' %}<br><b>Uso atual:</b> Pacientes são autoritativos no Firebird nesta etapa; módulos ainda não migrados permanecem no armazenamento local até a migração transacional ser concluída.{% elif infra_status.provider=='local' %}<br><b>Atenção:</b> o runtime está usando o armazenamento local. O Firebird pode estar instalado/configurado, mas não é a base autoritativa enquanto STORAGE_PROVIDER não estiver em firebird_hybrid.{% endif %}{% if infra_status.firebird_client_library %}<br><b>Cliente Firebird:</b> {{ infra_status.firebird_client_library }}{% endif %}{% if infra_status.firebird_error %}<br><b>Firebird:</b> {{ infra_status.firebird_error }}{% endif %}</div>
<div class="sync-status" style="margin-top:14px"><span>Sincronização <b>{{ 'HABILITADA' if infra_status.sync_enabled else 'DESABILITADA' }}</b></span><span>Último sync <b>{{ infra_status.last_sync or 'ainda não executado' }}</b></span><span>Pendentes <b>{{ infra_status.pending }}</b></span><span>Conflitos <b>{{ infra_status.conflicts }}</b></span></div>
</section>

<section id="aparencia" class="card settings-section">
<div class="settings-title"><div><span class="settings-kicker">IDENTIDADE VISUAL</span><h2>Identidade da empresa</h2><p>O layout do ClinicOS é oficial e igual para todas as empresas. Aqui você personaliza somente identidade, cores autorizadas e logomarcas.</p></div><span class="material-symbols-outlined">palette</span></div><div class="notice official-layout-notice"><b>Layout oficial ClinicOS.</b> Menu, cards, formulários, tabelas, tipografia, dimensões e responsividade seguem o mesmo padrão da LK9000.</div>
<form method="post" action="{{ url_for('clinic.settings') }}#aparencia" enctype="multipart/form-data" class="form-grid theme-form" id="themeForm">
<input type="hidden" name="section" value="appearance"><input type="hidden" name="appearance_editor_json" id="appearanceEditorJson">
<div class="appearance-save-status"><b>Aparência da clínica</b><small id="themeSaveState">Nenhuma alteração pendente • V11.36.18.28</small></div>

<div class="appearance-central-editor">
  <div class="appearance-editor-toolbar">
    <div class="appearance-target-select"><label class="label" for="appearanceTarget">O que deseja editar?</label><select class="input" id="appearanceTarget">
      <option value="menu">Menu / cor da marca</option><option value="buttons">Botões / destaque</option><option value="login">Tela de login</option>
    </select></div>
    <div class="appearance-presets"><span>Padrão</span><div><button type="button" class="appearance-preset" data-theme-preset="clinicos">Restaurar identidade ClinicOS</button></div></div>
  </div>

  <div class="appearance-workspace">
    <div class="appearance-preview-panel">
      <div class="appearance-preview-head"><div><span class="settings-kicker">PRÉ-VISUALIZAÇÃO</span><h3 id="appearanceTargetTitle">Menu lateral</h3></div><span class="appearance-live-pill"><i></i> ao vivo</span></div>
      <div class="appearance-app-preview" id="appearanceAppPreview">
        <aside class="ap-preview-menu"><div class="ap-preview-logo">CL</div><i class="active"></i><i></i><i></i><i></i></aside>
        <div class="ap-preview-page"><div class="ap-preview-top"><span></span><b></b></div><div class="ap-preview-content"><div class="ap-preview-card"><strong>Resumo</strong><small>Card de exemplo</small><label>Campo<input value="Exemplo" readonly></label><button type="button">Botão principal</button></div><div class="ap-preview-card mini"></div></div></div>
      </div>
      <p class="muted appearance-preview-note">A alteração também é aplicada na interface real desta tela. Clique em <b>Salvar aparência</b> para manter após sair.</p>
    </div>

    <div class="appearance-editor-controls">
      <div class="appearance-control-head"><div><span class="settings-kicker">EDITOR</span><h3 id="appearanceControlTitle">Menu lateral</h3></div><button type="button" class="btn btn-soft btn-sm" id="appearanceResetTarget"><span class="material-symbols-outlined">restart_alt</span>Restaurar este item</button></div>
      <label class="label">Tipo de fundo</label><div class="appearance-mode-switch" id="appearanceModeSwitch"><button type="button" data-mode="solid">Cor única</button><button type="button" data-mode="linear">Linear</button><button type="button" data-mode="radial">Radial</button><button type="button" data-mode="conic">Cônico</button></div>
      <div class="appearance-color-row">
        <label class="appearance-color-control"><span id="appearanceColor1Label">Cor</span><div><input type="color" id="appearanceColor1"><code id="appearanceColor1Hex"></code></div></label>
        <label class="appearance-color-control gradient-only"><span>Cor intermediária</span><div><input type="color" id="appearanceColor2"><code id="appearanceColor2Hex"></code></div></label>
        <label class="appearance-color-control gradient-only"><span>Cor final</span><div><input type="color" id="appearanceColor3"><code id="appearanceColor3Hex"></code></div></label>
      </div>
      <label class="appearance-range linear-conic-only"><span>Ângulo <output id="appearanceAngleOut">135°</output></span><input type="range" min="0" max="360" step="1" id="appearanceAngle"></label>
      <div class="appearance-stops gradient-only"><label><span>Início <output id="appearanceStop1Out">0%</output></span><input type="range" min="0" max="100" id="appearanceStop1"></label><label><span>Meio <output id="appearanceStop2Out">50%</output></span><input type="range" min="0" max="100" id="appearanceStop2"></label><label><span>Fim <output id="appearanceStop3Out">100%</output></span><input type="range" min="0" max="100" id="appearanceStop3"></label></div>
      <div class="appearance-text-control"><label class="appearance-color-control"><span>Cor do texto/ícones</span><div><input type="color" id="appearanceTextColor"><code id="appearanceTextHex"></code></div></label><div class="appearance-contrast"><span id="appearanceContrastStatus">Contraste</span><b id="appearanceContrastValue">—</b><button type="button" class="btn btn-soft btn-sm" id="appearanceAutoContrast">Ajustar automaticamente</button></div></div>
      <div class="appearance-editor-actions"><button type="button" class="btn btn-soft" id="appearanceResetAll"><span class="material-symbols-outlined">settings_backup_restore</span>Restaurar tema ClinicOS</button><span class="muted">A identidade é por empresa; o layout permanece oficial.</span></div>
    </div>
  </div>
</div>

<div class="notice" style="margin-top:18px"><b>Estrutura bloqueada pelo padrão oficial.</b><br>Fonte, tamanho, densidade, arredondamento, largura do menu, largura do conteúdo, bordas e espaçamentos são definidos pela plataforma e iguais para todas as empresas.</div>

<details class="appearance-advanced identity-appearance" style="margin-top:14px"><summary><span class="material-symbols-outlined">image</span><div><b>Logomarca e identidade</b><small>Logo do menu, login e relatórios.</small></div><span class="material-symbols-outlined">expand_more</span></summary><div class="appearance-advanced-body">
<p class="muted" style="margin-top:0">Use uma versão vertical/compacta no menu e uma versão horizontal no login. Se não informar uma delas, o sistema usa a logomarca principal como alternativa.</p>
<div class="grid-2">
  <div class="card" style="padding:14px"><b>Logo do menu</b><small class="muted" style="display:block;margin:4px 0 10px">Recomendado: formato vertical ou compacto, fundo transparente.</small>{% set menu_logo = clinic.theme.menu_logo_url or clinic.theme.logo_url %}{% if menu_logo %}<div class="appearance-logo-preview"><img src="{{ menu_logo }}" alt="Logo do menu"></div>{% endif %}<label class="label" style="margin-top:10px">Enviar logo do menu</label><input class="input" type="file" name="menu_logo_file" accept="image/png,image/jpeg,image/webp"><label class="label" style="margin-top:10px">URL/caminho web</label><input class="input" name="menu_logo_url" value="{{ clinic.theme.menu_logo_url or clinic.theme.logo_url }}" placeholder="/static/... ou https://...">{% if menu_logo %}<label class="checkrow" style="margin-top:8px"><input type="checkbox" name="remove_menu_logo"><span><b>Remover logo do menu</b></span></label>{% endif %}</div>
  <div class="card" style="padding:14px"><b>Logo do login</b><small class="muted" style="display:block;margin:4px 0 10px">Recomendado: formato horizontal, fundo transparente.</small>{% set login_logo = clinic.theme.login_logo_url or clinic.theme.logo_url %}{% if login_logo %}<div class="appearance-logo-preview"><img src="{{ login_logo }}" alt="Logo do login"></div>{% endif %}<label class="label" style="margin-top:10px">Enviar logo do login</label><input class="input" type="file" name="login_logo_file" accept="image/png,image/jpeg,image/webp"><label class="label" style="margin-top:10px">URL/caminho web</label><input class="input" name="login_logo_url" value="{{ clinic.theme.login_logo_url or clinic.theme.logo_url }}" placeholder="/static/... ou https://...">{% if login_logo %}<label class="checkrow" style="margin-top:8px"><input type="checkbox" name="remove_login_logo"><span><b>Remover logo do login</b></span></label>{% endif %}</div>
</div>
<div class="grid-2" style="margin-top:12px"><div><label class="label">Identidade no menu</label><select class="input" name="identity_mode"><option value="logo_only" {{ 'selected' if clinic.theme.identity_mode=='logo_only' }}>Somente logomarca</option><option value="logo_name" {{ 'selected' if clinic.theme.identity_mode=='logo_name' }}>Logomarca + nome</option><option value="name_only" {{ 'selected' if clinic.theme.identity_mode=='name_only' }}>Somente nome</option></select></div><div><label class="checkrow" style="margin-top:25px"><input type="checkbox" name="show_logo_login" {{ 'checked' if clinic.theme.show_logo_login }}><span><b>Exibir logomarca no login</b><small>Usa a versão horizontal quando cadastrada.</small></span></label></div></div>
<details style="margin-top:12px"><summary style="cursor:pointer;font-weight:700">Logomarca principal/fallback</summary><div style="margin-top:10px"><label class="label">Logo principal (relatórios e fallback)</label><input class="input" type="file" name="logo_file" accept="image/png,image/jpeg,image/webp"><label class="label" style="margin-top:8px">URL/caminho</label><input class="input" name="logo_url" value="{{ clinic.theme.logo_url }}">{% if clinic.theme.logo_url %}<label class="checkrow" style="margin-top:8px"><input type="checkbox" name="remove_logo"><span><b>Remover logo principal</b></span></label>{% endif %}</div></details>
</div></details>
<button type="submit" class="appearance-save-fab" id="appearanceSaveFab" title="Salvar aparência"><span class="material-symbols-outlined">save</span><span>Salvar aparência</span></button>
</form></section>


<section id="fluxo-clinico" class="card settings-section clinical-builder-card">
  <div class="settings-title"><div><span class="settings-kicker">FLUXO CLÍNICO</span><h2>Telas e modo de trabalho</h2><p>Defina um padrão para a clínica ou personalize o fluxo de cada profissional. Os campos podem ser ativados, removidos e acrescentados sem alterar o código.</p></div><span class="material-symbols-outlined">psychology</span></div>
  <form method="post" id="clinicalWorkflowForm" class="form-grid">
    <input type="hidden" name="section" value="clinical_workflow"><input type="hidden" name="workflow_json" id="workflowJson">
    <div class="grid-2"><div><label class="label">Configurar para</label><select class="input" name="professional_id" id="workflowProfessional"><option value="">Padrão da clínica</option>{% for p in professionals %}<option value="{{ p.id }}">{{ p.name }} — {{ p.specialty or 'Profissional' }}</option>{% endfor %}</select></div><label class="checkrow" id="customWorkflowRow" style="display:none;margin-top:24px"><input type="checkbox" name="use_custom_workflow" id="useCustomWorkflow"><span><b>Usar modo de trabalho próprio</b><small>Se desligado, o profissional herda automaticamente o padrão da clínica.</small></span></label></div>
    <div class="notice"><b>Estrutura flexível, não roteiro obrigatório.</b><br>Os campos organizam o registro; o profissional decide o que é clinicamente pertinente em cada atendimento.</div>
    <div class="workflow-tabs" role="tablist"><button type="button" class="workflow-tab active" data-section="patient">Paciente</button><button type="button" class="workflow-tab" data-section="assessment">Avaliação</button><button type="button" class="workflow-tab" data-section="session">Atendimento</button><button type="button" class="workflow-tab" data-section="evolution">Evolução</button></div>
    <div id="workflowEditor"></div>
    <div class="settings-actions"><button type="button" class="btn btn-soft" id="resetWorkflow"><span class="material-symbols-outlined">restart_alt</span>Restaurar modelo</button><button class="btn btn-primary"><span class="material-symbols-outlined">save</span>Salvar modo de trabalho</button></div>
  </form>
</section>
<style>
.workflow-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px}.workflow-tab{border:1px solid var(--line);background:var(--white);color:var(--ink);padding:9px 14px;border-radius:999px;font:inherit;font-weight:700;cursor:pointer}.workflow-tab.active{background:var(--brand);color:#fff;border-color:var(--brand)}.workflow-field{display:grid;grid-template-columns:1.5fr .75fr .65fr auto;gap:10px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in srgb,var(--white) 94%,var(--brand) 6%);margin:10px 0}.workflow-field .wide{grid-column:1/-1}.workflow-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0}.workflow-empty{padding:24px;text-align:center;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted)}@media(max-width:900px){.workflow-field{grid-template-columns:1fr}.workflow-field .wide{grid-column:auto}}
</style>
<script>
(function(){
 const form=document.getElementById('clinicalWorkflowForm'); if(!form)return;
 const defaultWorkflow={{ clinic_workflow|tojson }};
 const proWorkflows={{ professional_workflows|tojson }};
 let current=structuredClone(defaultWorkflow), section='patient';
 const editor=document.getElementById('workflowEditor'), pro=document.getElementById('workflowProfessional'), useCustom=document.getElementById('useCustomWorkflow'), customRow=document.getElementById('customWorkflowRow');
 const esc=s=>String(s??'').replace(/[&<>"']/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));
 function load(){const id=pro.value;customRow.style.display=id?'flex':'none';if(!id){current=structuredClone(defaultWorkflow);useCustom.checked=false}else{const x=proWorkflows[id]||{};useCustom.checked=!!x.use_custom;current=structuredClone((x.use_custom&&x.custom_workflow)||x.workflow||defaultWorkflow)}render()}
 function fieldHtml(f,i){let opts=(f.options||[]).join('\n'),typeLabels={text:'Texto',textarea:'Texto longo',number:'Número',scale:'Escala',select:'Lista',checkbox:'Sim/Não',date:'Data'};return `<div class="workflow-field" data-i="${i}"><div><label class="label">Nome do campo</label><input class="input wf-label" value="${esc(f.label)}"></div><div><label class="label">Tipo</label><select class="input wf-type">${['text','textarea','number','scale','select','checkbox','date'].map(t=>`<option value="${t}" ${f.type===t?'selected':''}>${typeLabels[t]}</option>`).join('')}</select></div><label class="checkrow"><input class="wf-required" type="checkbox" ${f.required?'checked':''}><span><b>Obrigatório</b></span></label><button type="button" class="btn btn-danger btn-sm wf-remove"><span class="material-symbols-outlined">delete</span></button><div class="wide"><label class="label">Ajuda / placeholder</label><input class="input wf-placeholder" value="${esc(f.placeholder||'')}"></div><div class="wide wf-options" style="${f.type==='select'?'':'display:none'}"><label class="label">Opções (uma por linha)</label><textarea class="input">${esc(opts)}</textarea></div></div>`}
 function sync(){const sec=current[section];editor.querySelectorAll('.workflow-field').forEach((el,i)=>{const f=sec.fields[i];if(!f)return;f.label=el.querySelector('.wf-label').value;f.type=el.querySelector('.wf-type').value;f.required=el.querySelector('.wf-required').checked;f.placeholder=el.querySelector('.wf-placeholder').value;if(f.type==='select')f.options=el.querySelector('.wf-options textarea').value.split('\n').map(x=>x.trim()).filter(Boolean)});document.getElementById('workflowJson').value=JSON.stringify(current)}
 function render(){const sec=current[section]||{label:section,enabled:true,fields:[]};editor.innerHTML=`<div class="workflow-section-head"><div><h3 style="margin:0">${esc(sec.label)}</h3><small class="muted">${sec.fields.length} campo(s) configurado(s)</small></div><label class="checkrow"><input type="checkbox" id="sectionEnabled" ${sec.enabled!==false?'checked':''}><span><b>Exibir esta área</b></span></label></div><div id="fieldList">${sec.fields.map(fieldHtml).join('')||'<div class="workflow-empty">Nenhum campo. Você pode adicionar o primeiro abaixo.</div>'}</div><button type="button" class="btn btn-soft" id="addWorkflowField"><span class="material-symbols-outlined">add</span>Adicionar campo</button>`;document.getElementById('sectionEnabled').onchange=e=>{sec.enabled=e.target.checked;sync()};document.getElementById('addWorkflowField').onclick=()=>{sync();sec.fields.push({id:'campo_'+Date.now().toString(36),label:'Novo campo',type:'text',required:false,enabled:true,placeholder:''});render()};editor.querySelectorAll('.wf-remove').forEach((b,i)=>b.onclick=()=>{sec.fields.splice(i,1);render()});editor.querySelectorAll('.wf-type').forEach(sel=>sel.onchange=e=>{e.target.closest('.workflow-field').querySelector('.wf-options').style.display=e.target.value==='select'?'block':'none';sync()});editor.querySelectorAll('input,select,textarea').forEach(x=>x.addEventListener('input',sync));sync()}
 document.querySelectorAll('.workflow-tab').forEach(b=>b.onclick=()=>{sync();section=b.dataset.section;document.querySelectorAll('.workflow-tab').forEach(x=>x.classList.toggle('active',x===b));render()});pro.addEventListener('change',load);useCustom.addEventListener('change',()=>{if(useCustom.checked){const id=pro.value,x=proWorkflows[id]||{};current=structuredClone(x.custom_workflow||x.workflow||defaultWorkflow)}else current=structuredClone(defaultWorkflow);render()});document.getElementById('resetWorkflow').onclick=()=>{current=structuredClone(defaultWorkflow);render()};form.addEventListener('submit',sync);load();
})();
</script>

<section id="metas" class="card settings-section"><div class="settings-title"><div><span class="settings-kicker">GESTÃO</span><h2>Metas e indicadores</h2><p>Defina objetivos da clínica. O Dashboard calcula automaticamente o realizado e o progresso.</p></div><span class="material-symbols-outlined">track_changes</span></div><form method="post" class="form-grid"><input type="hidden" name="section" value="goals"><div class="grid-2"><div><label class="label">Meta mensal de faturamento (R$)</label><input class="input" name="monthly_revenue" inputmode="decimal" value="{{ clinic.goal_settings.monthly_revenue or '' }}" placeholder="30000,00"></div><div><label class="label">Meta anual de faturamento (R$)</label><input class="input" name="annual_revenue" inputmode="decimal" value="{{ clinic.goal_settings.annual_revenue or '' }}" placeholder="360000,00"></div></div><div class="grid-3"><div><label class="label">Pacientes atendidos / mês</label><input class="input" type="number" min="0" name="monthly_patients_served" value="{{ clinic.goal_settings.monthly_patients_served or '' }}" placeholder="80"></div><div><label class="label">Novos pacientes / mês</label><input class="input" type="number" min="0" name="monthly_new_patients" value="{{ clinic.goal_settings.monthly_new_patients or '' }}" placeholder="20"></div><div><label class="label">Novos clientes / mês</label><input class="input" type="number" min="0" name="monthly_new_customers" value="{{ clinic.goal_settings.monthly_new_customers or '' }}" placeholder="20"></div></div><small class="muted">Deixe uma meta em zero ou vazia para ocultá-la do Dashboard. Pacientes atendidos contam pacientes únicos com atendimento concluído no mês.</small><button class="btn btn-primary"><span class="material-symbols-outlined">save</span>Salvar metas</button></form></section>
<div id="financeiro" class="settings-grid"><section class="card settings-section"><div class="settings-title"><div><span class="settings-kicker">FINANCEIRO</span><h2>Regras financeiras</h2><p>Parâmetros de cobrança e recebimento.</p></div><span class="material-symbols-outlined">account_balance_wallet</span></div><form method="post" class="form-grid"><input type="hidden" name="section" value="financial"><div class="notice"><b>Formas de pagamento são cadastro mestre.</b><br>{% if 'catalogs' in session_user.permissions %}<a href="{{ url_for('clinic.catalogs',kind='payment_methods') }}">Gerenciar formas de pagamento →</a>{% endif %}</div><div><label class="label">Prazo padrão para vencimento (dias)</label><input class="input" type="number" min="0" name="default_due_days" value="{{ clinic.financial_settings.default_due_days or 0 }}"></div><label class="checkrow"><input type="checkbox" name="allow_overpayment" {% if clinic.financial_settings.allow_overpayment %}checked{% endif %}><span><b>Permitir recebimento acima do saldo</b><small>Recomendado deixar desligado.</small></span></label><button class="btn btn-primary">Salvar financeiro</button></form></section>

<section id="mobile" class="card settings-section"><div class="settings-title"><div><span class="settings-kicker">MOBILE / PWA</span><h2>Acesso pelo celular e tablet</h2><p>O IP da rede é detectado automaticamente. HTTP local é permitido somente na LAN; acesso externo exige HTTPS.</p></div><span class="material-symbols-outlined">install_mobile</span></div><div class="mobile-access-grid"><article class="integration-card mobile-access-card"><div><span class="badge">REDE LOCAL</span><h3>Equipe dentro da clínica</h3><p class="muted">IP detectado automaticamente: <b>{{ mobile_access.lan_ip }}</b>. O QR é recalculado quando esta tela é aberta.</p><div class="connection-state {{ 'secure' if mobile_access.lan_secure else 'local-warning' }}"><span class="material-symbols-outlined">{{ 'lock' if mobile_access.lan_secure else 'wifi' }}</span><div><b>{{ 'Conexão HTTPS segura' if mobile_access.lan_secure else 'Conexão local HTTP' }}</b><small>{{ 'Criptografia HTTPS ativa.' if mobile_access.lan_secure else 'Permitida somente dentro da rede local. O navegador pode exibir “Não seguro”.' }}</small></div></div><code class="url-code">{{ mobile_access.lan_url }}</code></div><img src="{{ mobile_access.lan_qr }}" alt="QR Code do acesso local ClinicOS"><small>Funciona sem internet no mesmo Wi-Fi/LAN. O QR não contém usuário, senha nem dados clínicos.</small></article><article class="integration-card mobile-access-card"><div><span class="badge {{ 'badge-success' if mobile_access.public_secure else 'status-pending' }}">ACESSO EXTERNO</span><h3>Paciente fora da clínica</h3>{% if mobile_access.public_secure %}<p class="muted">Portal público HTTPS configurado.</p><div class="connection-state secure"><span class="material-symbols-outlined">lock</span><div><b>Conexão externa segura</b><small>QR externo liberado somente por HTTPS.</small></div></div><code class="url-code">{{ mobile_access.public_url }}</code></div><img src="{{ mobile_access.public_qr }}" alt="QR Code do Portal do Paciente"><small>Use este QR para paciente, acesso remoto e instalação PWA externa.</small>{% elif mobile_access.public_url %}<p class="muted">O endereço externo está configurado, mas não usa HTTPS.</p><div class="connection-state blocked"><span class="material-symbols-outlined">gpp_bad</span><div><b>Acesso externo bloqueado</b><small>Altere a URL do Portal para https:// antes de gerar o QR externo.</small></div></div><code class="url-code">{{ mobile_access.public_url }}</code></div><div class="notice">Por segurança, o ClinicOS não gera QR externo para HTTP.</div>{% else %}<p class="muted">Configure na aba Portal uma URL pública HTTPS. O endereço local não deve ser usado para pacientes fora da clínica.</p></div><div class="notice">Exemplo: <b>https://portal.suaclinica.com.br</b></div>{% endif %}</article></div></section>
<section id="portal" class="card settings-section"><div class="settings-title"><div><span class="settings-kicker">PORTAL</span><h2>Portal do Paciente</h2><p>Convite individual, pré-cadastro e permissões do que cada paciente pode visualizar.</p></div><span class="material-symbols-outlined">patient_list</span></div>{% if 'patient_portal' in clinic.enabled_modules %}<form method="post" class="form-grid"><input type="hidden" name="section" value="portal"><div class="grid-2"><div><label class="label">URL pública HTTPS do portal</label><input class="input" name="public_url" value="{{ clinic.patient_portal.public_url or '' }}" placeholder="https://portal.suaclinica.com.br"><small class="muted">Necessária para pacientes acessarem fora da clínica. Nunca use o IP local neste campo.</small></div><div><label class="label">Validade do convite</label><select class="input" name="invite_expiry_hours">{% for h,label in [(1,'1 hora'),(6,'6 horas'),(12,'12 horas'),(24,'24 horas'),(48,'48 horas'),(72,'3 dias'),(168,'7 dias')] %}<option value="{{ h }}" {{ 'selected' if clinic.patient_portal.invite_expiry_hours|int==h }}>{{ label }}</option>{% endfor %}</select><small class="muted">Cada convite é de uso único e o anterior é revogado ao gerar um novo.</small></div></div><div class="grid-2"><label class="checkrow"><input type="checkbox" name="allow_appointments" {% if clinic.patient_portal.allow_appointments %}checked{% endif %}><span><b>Agendamentos</b><small>Somente os próprios agendamentos.</small></span></label><label class="checkrow"><input type="checkbox" name="allow_documents" {% if clinic.patient_portal.allow_documents %}checked{% endif %}><span><b>Documentos liberados</b><small>Somente documentos explicitamente autorizados.</small></span></label><label class="checkrow"><input type="checkbox" name="allow_finance" {% if clinic.patient_portal.allow_finance %}checked{% endif %}><span><b>Financeiro</b><small>Cobranças e pagamentos do próprio paciente.</small></span></label><label class="checkrow"><input type="checkbox" name="allow_preregistration" {% if clinic.patient_portal.allow_preregistration %}checked{% endif %}><span><b>Permitir pré-cadastro externo</b><small>Cria apenas uma solicitação pendente; não cria prontuário nem acesso automático.</small></span></label></div><details><summary style="cursor:pointer;font-weight:700">Compatibilidade / ativação antiga</summary><label class="checkrow" style="margin-top:10px"><input type="checkbox" name="allow_legacy_activation" {% if clinic.patient_portal.allow_legacy_activation %}checked{% endif %}><span><b>Permitir ativação por e-mail + documento</b><small>Não recomendado. O padrão seguro é convite temporário gerado pela clínica.</small></span></label></details><button class="btn btn-primary">Salvar Portal do Paciente</button></form>{% if portal_requests %}<div class="integration-card" style="margin-top:18px"><div class="toolbar"><div><h3 style="margin:0">Pré-cadastros recebidos</h3><p class="muted">Ainda não possuem acesso a dados clínicos.</p></div><span class="badge">{{ portal_requests|length }}</span></div><div class="table-wrap"><table class="table"><thead><tr><th>Data</th><th>Nome</th><th>E-mail</th><th>Telefone</th><th>Status</th><th>Ação</th></tr></thead><tbody>{% for x in portal_requests %}<tr><td>{{ x.created_at|replace('T',' ') }}</td><td>{{ x.name }}</td><td>{{ x.email }}</td><td>{{ x.phone or '—' }}</td><td><span class="badge">{{ x.status }}</span></td><td>{% if x.status=='PENDENTE' %}<div class="actions"><form method="post" action="{{ url_for('clinic.portal_preregister_approve',rid=x.id) }}"><button class="btn btn-success btn-sm">Validar e criar paciente</button></form><form method="post" action="{{ url_for('clinic.portal_preregister_reject',rid=x.id) }}"><button type="button" class="btn btn-danger btn-sm" onclick="if(confirm('Recusar este pré-cadastro?'))this.form.submit()">Recusar</button></form></div>{% elif x.patient_id %}<a class="btn btn-soft btn-sm" href="{{ url_for('clinic.patient_detail',pid=x.patient_id) }}">Abrir paciente</a>{% else %}—{% endif %}</td></tr>{% endfor %}</tbody></table></div></div>{% endif %}{% else %}<div class="notice">Portal não liberado no plano atual.</div>{% endif %}</section>

<section id="pix" class="card settings-section"><div class="settings-title"><div><span class="settings-kicker">PIX</span><h2>PIX e baixa automática</h2><p>QR estático ou integração com PSP/banco. A baixa só ocorre após retorno autenticado do provedor.</p></div><span class="badge {{ 'badge-success' if clinic.financial_settings.pix.enabled else 'status-pending' }}">{{ 'ATIVO' if clinic.financial_settings.pix.enabled else 'DESATIVADO' }}</span></div>
<form method="post" class="form-grid"><input type="hidden" name="section" value="pix"><label class="checkrow"><input type="checkbox" name="enabled" {% if clinic.financial_settings.pix.enabled %}checked{% endif %}><span><b>Ativar PIX</b><small>Habilita geração de cobrança PIX.</small></span></label>
<div class="grid-3"><div><label class="label">Tipo de chave</label><select class="input" name="key_type"><option value="EVP" {{ 'selected' if clinic.financial_settings.pix.key_type=='EVP' }}>Aleatória</option><option value="CPF" {{ 'selected' if clinic.financial_settings.pix.key_type=='CPF' }}>CPF</option><option value="CNPJ" {{ 'selected' if clinic.financial_settings.pix.key_type=='CNPJ' }}>CNPJ</option><option value="EMAIL" {{ 'selected' if clinic.financial_settings.pix.key_type=='EMAIL' }}>E-mail</option><option value="PHONE" {{ 'selected' if clinic.financial_settings.pix.key_type=='PHONE' }}>Telefone</option></select></div><div><label class="label">Chave PIX</label><input class="input" name="key" value="{{ clinic.financial_settings.pix.key }}"></div><div><label class="label">Cidade</label><input class="input" name="city" value="{{ clinic.financial_settings.pix.city }}" maxlength="15"></div></div>
<div class="grid-3"><div><label class="label">Beneficiário</label><input class="input" name="beneficiary_name" value="{{ clinic.financial_settings.pix.beneficiary_name }}" maxlength="25"></div><div><label class="label">Modo</label><select class="input" name="mode"><option value="static" {{ 'selected' if clinic.financial_settings.pix.mode=='static' }}>QR / Copia e Cola</option><option value="dynamic" {{ 'selected' if clinic.financial_settings.pix.mode=='dynamic' }}>API / Webhook</option></select></div><div><label class="label">Integração</label><select class="input" name="provider"><option value="manual" {{ 'selected' if clinic.financial_settings.pix.provider=='manual' }}>Sem integração bancária</option><option value="generic_webhook" {{ 'selected' if clinic.financial_settings.pix.provider=='generic_webhook' }}>PSP/API via adaptador</option></select></div></div>
<div class="integration-card"><div class="integration-title"><span class="material-symbols-outlined">api</span><b>Parâmetros do PSP/banco</b></div><div class="grid-2"><div><label class="label">Nome do provedor</label><input class="input" name="provider_name" value="{{ clinic.financial_settings.pix.provider_name }}" placeholder="Ex.: Efí, Mercado Pago, banco..."></div><div><label class="label">URL base da API</label><input class="input" name="api_base_url" value="{{ clinic.financial_settings.pix.api_base_url }}" placeholder="https://api.provedor..."></div><div><label class="label">Client ID — variável ENV</label><input class="input" name="client_id_env" value="{{ clinic.financial_settings.pix.client_id_env }}"></div><div><label class="label">Client Secret — variável ENV</label><input class="input" name="client_secret_env" value="{{ clinic.financial_settings.pix.client_secret_env }}"></div></div><div style="margin-top:12px"><label class="label">Segredo do webhook</label><input class="input" type="password" name="webhook_secret" placeholder="Deixe vazio para manter o atual"><small class="muted">Segredos reais permanecem no servidor; a tela guarda apenas referências quando aplicável.</small></div></div>
<label class="checkrow"><input type="checkbox" name="auto_confirm" {% if clinic.financial_settings.pix.auto_confirm %}checked{% endif %}><span><b>Dar baixa automaticamente após retorno bancário válido</b><small>Quando o webhook autenticado informar TXID e valor corretos, o ClinicOS cria o pagamento e recalcula a pendência. Se desligado, fica como RECEBIDO_PENDENTE para conferência.</small></span></label><label class="checkrow"><input type="checkbox" name="allow_manual_confirmation" {% if clinic.financial_settings.pix.allow_manual_confirmation %}checked{% endif %}><span><b>Permitir confirmação manual autorizada</b><small>Fica registrada na auditoria.</small></span></label><button class="btn btn-primary">Salvar PIX</button></form></section>

<section id="comunicacao" class="card settings-section"><div class="settings-title"><div><span class="settings-kicker">COMUNICAÇÃO</span><h2>E-mail, WhatsApp, SMS e automações</h2><p>Centralize os canais usados pela clínica.</p></div><a class="btn btn-soft btn-sm" href="{{ url_for('clinic.communications') }}">Abrir central</a></div><form method="post" class="form-grid"><input type="hidden" name="section" value="communications"><div class="grid-2"><label class="checkrow"><input type="checkbox" name="portal_enabled" {% if clinic.communication_settings.portal_enabled %}checked{% endif %}><span><b>Notificações no portal</b><small>Canal interno.</small></span></label><label class="checkrow"><input type="checkbox" name="auto_send" {% if clinic.communication_settings.auto_send %}checked{% endif %}><span><b>Envio automático por eventos</b><small>Agenda e financeiro podem disparar mensagens.</small></span></label></div>
<div class="integration-card"><div class="integration-title"><span class="material-symbols-outlined">mail</span><b>E-mail / SMTP</b></div><label class="checkrow"><input type="checkbox" name="email_enabled" {% if clinic.communication_settings.email.enabled %}checked{% endif %}><span><b>Ativar e-mail</b><small>SMTP corporativo ou provedor transacional.</small></span></label><input type="hidden" name="email_provider" value="smtp"><div class="grid-3"><div><label class="label">Nome do remetente</label><input class="input" name="email_from_name" value="{{ clinic.communication_settings.email.from_name }}"></div><div><label class="label">E-mail do remetente</label><input class="input" type="email" name="email_from_email" value="{{ clinic.communication_settings.email.from_email }}"></div><div><label class="label">Servidor SMTP</label><input class="input" name="smtp_host" value="{{ clinic.communication_settings.email.smtp_host }}"></div><div><label class="label">Porta</label><input class="input" type="number" name="smtp_port" value="{{ clinic.communication_settings.email.smtp_port }}"></div><div><label class="label">Usuário — variável ENV</label><input class="input" name="smtp_username_env" value="{{ clinic.communication_settings.email.username_env }}"></div><div><label class="label">Senha — variável ENV</label><input class="input" name="smtp_password_env" value="{{ clinic.communication_settings.email.password_env }}"></div></div><label class="checkrow"><input type="checkbox" name="smtp_tls" {% if clinic.communication_settings.email.smtp_tls %}checked{% endif %}><span><b>Usar STARTTLS</b></span></label></div>
<div class="settings-grid"><div class="integration-card"><div class="integration-title"><span class="material-symbols-outlined">chat</span><b>WhatsApp Business</b></div><label class="checkrow"><input type="checkbox" name="whatsapp_enabled" {% if clinic.communication_settings.whatsapp.enabled %}checked{% endif %}><span><b>Ativar WhatsApp Cloud API</b></span></label><div><label class="label">Phone Number ID</label><input class="input" name="whatsapp_phone_number_id" value="{{ clinic.communication_settings.whatsapp.phone_number_id }}"></div><div><label class="label">Token — variável ENV</label><input class="input" name="whatsapp_token_env" value="{{ clinic.communication_settings.whatsapp.token_env }}"></div><div><label class="label">Versão da API</label><input class="input" name="whatsapp_api_version" value="{{ clinic.communication_settings.whatsapp.api_version }}"></div></div><div class="integration-card"><div class="integration-title"><span class="material-symbols-outlined">sms</span><b>SMS / Twilio</b></div><label class="checkrow"><input type="checkbox" name="sms_enabled" {% if clinic.communication_settings.sms.enabled %}checked{% endif %}><span><b>Ativar SMS</b></span></label><div><label class="label">Número remetente</label><input class="input" name="sms_from_number" value="{{ clinic.communication_settings.sms.from_number }}"></div><div><label class="label">SID — variável ENV</label><input class="input" name="sms_sid_env" value="{{ clinic.communication_settings.sms.account_sid_env }}"></div><div><label class="label">Token — variável ENV</label><input class="input" name="sms_token_env" value="{{ clinic.communication_settings.sms.auth_token_env }}"></div></div></div><div><label class="label">Segredo para webhooks de entrega</label><input class="input" type="password" name="webhook_secret" placeholder="Deixe vazio para manter o atual"></div><button class="btn btn-primary">Salvar comunicação</button></form></section>

<section id="auditoria" class="card table-wrap settings-section"><div class="settings-title"><div><span class="settings-kicker">SEGURANÇA</span><h2>Auditoria operacional</h2><p>Últimas alterações críticas registradas.</p></div><span class="material-symbols-outlined">history</span></div><table class="table"><thead><tr><th>Data/hora</th><th>Ação</th><th>Entidade</th><th>Identificador</th><th>Detalhes</th></tr></thead><tbody>{% for a in audit_logs %}<tr><td>{{ a.at }}</td><td><span class="badge">{{ a.action }}</span></td><td>{{ a.entity }}</td><td>{{ a.entity_id }}</td><td>{{ a.details or '—' }}</td></tr>{% else %}<tr><td colspan="5" class="empty">Nenhuma ação auditada ainda.</td></tr>{% endfor %}</tbody></table></section>

<div class="settings-footnote"><span class="material-symbols-outlined">lock</span><div><b>Infraestrutura protegida</b><small>Licença, módulos contratados, ambiente, banco de dados e segredos reais continuam na área do Desenvolvedor/servidor.</small></div></div>
{% endif %}
<script>
(function(){
  const form=document.getElementById('themeForm'); if(!form) return;
  const state={{ clinic.theme|tojson }} || {};
  const official={{ official_theme|tojson }} || {};
  const jsonField=document.getElementById('appearanceEditorJson');
  const saveState=document.getElementById('themeSaveState');
  const targetSel=document.getElementById('appearanceTarget');
  const titleEl=document.getElementById('appearanceTargetTitle');
  const controlTitle=document.getElementById('appearanceControlTitle');
  const c1=document.getElementById('appearanceColor1'),c2=document.getElementById('appearanceColor2'),c3=document.getElementById('appearanceColor3'),textColor=document.getElementById('appearanceTextColor');
  const angle=document.getElementById('appearanceAngle'),s1=document.getElementById('appearanceStop1'),s2=document.getElementById('appearanceStop2'),s3=document.getElementById('appearanceStop3');
  const modeButtons=[...document.querySelectorAll('#appearanceModeSwitch [data-mode]')];
  let dirty=false,current='menu';

  const targets={
    menu:{title:'Menu lateral',prefix:'sidebar',solid:'sidebar',text:'sidebar_text',defaults:{mode:official.sidebar_mode||'linear',c1:official.sidebar_gradient_from||official.sidebar||'#073B78',c2:official.sidebar_gradient_mid||official.secondary||'#168FB0',c3:official.sidebar_gradient_to||official.primary||'#13BFE6',angle:Number(official.sidebar_gradient_angle||180),text:official.sidebar_text||'#FFFFFF'}},
    background:{title:'Fundo do sistema',prefix:'background',solid:'background',text:'text',defaults:{mode:'solid',c1:'#F8F9FF',c2:'#F3F7FC',c3:'#EAF3FA',angle:135,text:'#0B1C30'}},
    cards:{title:'Cards e painéis',prefix:'surface',solid:'surface',text:'surface_text',defaults:{mode:'solid',c1:'#FFFFFF',c2:'#FBFDFF',c3:'#F3F8FC',angle:135,text:'#0B1C30'}},
    forms:{title:'Formulários e campos',prefix:'form',solid:'form_background',text:'form_text',defaults:{mode:'solid',c1:'#FFFFFF',c2:'#F8FBFD',c3:'#EEF5F9',angle:135,text:'#0B1C30'}},
    topbar:{title:'Cabeçalho superior',prefix:'topbar',solid:'topbar_background',text:'topbar_text',defaults:{mode:'solid',c1:'#FFFFFF',c2:'#F8FBFD',c3:'#EDF6FA',angle:90,text:'#0B1C30'}},
    buttons:{title:'Botões principais',prefix:'button',solid:'primary',text:'button_text',defaults:{mode:official.button_mode||'linear',c1:official.button_gradient_from||official.primary||'#08798A',c2:official.button_gradient_mid||official.secondary||'#12A6B8',c3:official.button_gradient_to||official.secondary||'#20BFD0',angle:Number(official.button_gradient_angle||135),text:official.button_text||'#FFFFFF'}},
    login:{title:'Tela de login',prefix:'login',solid:'login_background',text:'login_text',defaults:{mode:official.login_mode||'linear',c1:official.login_gradient_from||official.sidebar||'#082E64',c2:official.login_gradient_mid||official.secondary||'#0E6E9B',c3:official.login_gradient_to||official.accent||'#28D9E5',angle:Number(official.login_gradient_angle||135),text:official.login_text||'#FFFFFF'}}
  };
  const hex=(v,f='#000000')=>/^#[0-9a-f]{6}$/i.test(String(v||''))?String(v).toUpperCase():f;
  const clamp=(v,a,b,d)=>Math.max(a,Math.min(b,Number.isFinite(Number(v))?Number(v):d));
  function keys(t){const x=targets[t];return {mode:x.prefix+'_mode',c1:x.prefix+'_gradient_from',c2:x.prefix+'_gradient_mid',c3:x.prefix+'_gradient_to',angle:x.prefix+'_gradient_angle',s1:x.prefix+'_gradient_stop1',s2:x.prefix+'_gradient_stop2',s3:x.prefix+'_gradient_stop3'};}
  function ensure(t){const x=targets[t],k=keys(t),d=x.defaults;const base=x.solid;
    state[k.mode]=state[k.mode]||d.mode; state[k.c1]=hex(state[k.c1]||state[base]||d.c1,d.c1); state[k.c2]=hex(state[k.c2]||d.c2,d.c2); state[k.c3]=hex(state[k.c3]||d.c3,d.c3);
    state[k.angle]=clamp(state[k.angle],0,360,d.angle); state[k.s1]=clamp(state[k.s1],0,100,0); state[k.s2]=clamp(state[k.s2],0,100,50); state[k.s3]=clamp(state[k.s3],0,100,100);
    state[base]=hex(state[base]||state[k.c1]||d.c1,d.c1); state[x.text]=hex(state[x.text]||d.text,d.text);
  }
  Object.keys(targets).forEach(ensure);
  state.primary=hex(state.primary||targets.buttons.defaults.c1,targets.buttons.defaults.c1); state.secondary=hex(state.secondary||'#20BFD0','#20BFD0'); state.accent=hex(state.accent||'#ACF847','#ACF847');

  function cssFill(t){const x=targets[t],k=keys(t),mode=state[k.mode]||'solid',a=hex(state[k.c1],x.defaults.c1),b=hex(state[k.c2],x.defaults.c2),c=hex(state[k.c3],x.defaults.c3),ang=clamp(state[k.angle],0,360,x.defaults.angle);const stops=[clamp(state[k.s1],0,100,0),clamp(state[k.s2],0,100,50),clamp(state[k.s3],0,100,100)].sort((m,n)=>m-n);if(mode==='linear')return `linear-gradient(${ang}deg,${a} ${stops[0]}%,${b} ${stops[1]}%,${c} ${stops[2]}%)`;if(mode==='radial')return `radial-gradient(circle at center,${a} ${stops[0]}%,${b} ${stops[1]}%,${c} ${stops[2]}%)`;if(mode==='conic')return `conic-gradient(from ${ang}deg,${a} ${stops[0]}%,${b} ${stops[1]}%,${c} ${stops[2]}%,${a} 100%)`;return a;}
  function applyState(){
    if(window.clinicosApplyTheme) window.clinicosApplyTheme(state); else {const r=document.documentElement.style;r.setProperty('--menu-fill',cssFill('menu'));r.setProperty('--app-bg-fill',cssFill('background'));r.setProperty('--card-fill',cssFill('cards'));r.setProperty('--form-fill',cssFill('forms'));r.setProperty('--topbar-fill',cssFill('topbar'));r.setProperty('--button-fill',cssFill('buttons'));r.setProperty('--login-fill',cssFill('login'));}
    const r=document.documentElement.style;r.setProperty('--nav-text',state.sidebar_text);r.setProperty('--ink',state.text);r.setProperty('--card-text',state.surface_text);r.setProperty('--form-text',state.form_text);r.setProperty('--topbar-text',state.topbar_text);r.setProperty('--button-text',state.button_text);r.setProperty('--login-text',state.login_text);r.setProperty('--brand',state.primary);r.setProperty('--secondary',state.secondary);r.setProperty('--accent',state.accent);r.setProperty('--surface',state.background);r.setProperty('--white',state.surface);r.setProperty('--nav',state.sidebar);
    if(jsonField) jsonField.value=JSON.stringify(state);
  }
  function mark(){dirty=true;form.classList.add('theme-dirty');if(saveState)saveState.textContent='Alterações não salvas';}
  function setMode(mode){modeButtons.forEach(b=>b.classList.toggle('active',b.dataset.mode===mode));form.dataset.editorMode=mode;}
  function renderEditor(){ensure(current);const x=targets[current],k=keys(current),mode=state[k.mode];titleEl.textContent=x.title;controlTitle.textContent=x.title;setMode(mode);c1.value=hex(state[k.c1],x.defaults.c1);c2.value=hex(state[k.c2],x.defaults.c2);c3.value=hex(state[k.c3],x.defaults.c3);textColor.value=hex(state[x.text],x.defaults.text);angle.value=state[k.angle];s1.value=state[k.s1];s2.value=state[k.s2];s3.value=state[k.s3];document.getElementById('appearanceColor1Label').textContent=mode==='solid'?'Cor':'Cor inicial';refreshLabels();refreshContrast();}
  function refreshLabels(){document.getElementById('appearanceColor1Hex').textContent=c1.value.toUpperCase();document.getElementById('appearanceColor2Hex').textContent=c2.value.toUpperCase();document.getElementById('appearanceColor3Hex').textContent=c3.value.toUpperCase();document.getElementById('appearanceTextHex').textContent=textColor.value.toUpperCase();document.getElementById('appearanceAngleOut').textContent=angle.value+'°';document.getElementById('appearanceStop1Out').textContent=s1.value+'%';document.getElementById('appearanceStop2Out').textContent=s2.value+'%';document.getElementById('appearanceStop3Out').textContent=s3.value+'%';}
  function syncFromControls(){const x=targets[current],k=keys(current),mode=modeButtons.find(b=>b.classList.contains('active'))?.dataset.mode||'solid';state[k.mode]=mode;state[k.c1]=c1.value.toUpperCase();state[k.c2]=c2.value.toUpperCase();state[k.c3]=c3.value.toUpperCase();state[k.angle]=Number(angle.value);state[k.s1]=Number(s1.value);state[k.s2]=Number(s2.value);state[k.s3]=Number(s3.value);state[x.solid]=state[k.c1];state[x.text]=textColor.value.toUpperCase();if(current==='buttons')state.primary=state[k.c1];if(current==='background')state.background=state[k.c1];if(current==='cards')state.surface=state[k.c1];if(current==='menu')state.sidebar=state[k.c1];refreshLabels();refreshContrast();applyState();mark();}
  function luminance(h){const n=hex(h).slice(1),rgb=[0,2,4].map(i=>parseInt(n.slice(i,i+2),16)/255).map(v=>v<=.03928?v/12.92:Math.pow((v+.055)/1.055,2.4));return .2126*rgb[0]+.7152*rgb[1]+.0722*rgb[2]}
  function ratio(a,b){const x=luminance(a),y=luminance(b);return (Math.max(x,y)+.05)/(Math.min(x,y)+.05)}
  function refreshContrast(){const bg=c1.value,tx=textColor.value,v=ratio(bg,tx),value=document.getElementById('appearanceContrastValue'),st=document.getElementById('appearanceContrastStatus');value.textContent=v.toFixed(2)+':1';st.textContent=v>=7?'Excelente':v>=4.5?'Bom contraste':v>=3?'Somente texto grande':'Baixo contraste';st.className=v>=4.5?'contrast-ok':'contrast-warn';}
  function setTarget(t,vals){const x=targets[t],k=keys(t),v={...x.defaults,...vals};state[k.mode]=v.mode;state[k.c1]=v.c1;state[k.c2]=v.c2;state[k.c3]=v.c3;state[k.angle]=v.angle;state[k.s1]=v.s1??0;state[k.s2]=v.s2??50;state[k.s3]=v.s3??100;state[x.solid]=v.c1;state[x.text]=v.text;}
  function preset(name){
    if(name!=='clinicos')return;
    state.primary=official.primary||state.primary; state.secondary=official.secondary||state.secondary; state.accent=official.accent||state.accent;
    ['menu','buttons','login'].forEach(t=>setTarget(t,targets[t].defaults));
    renderEditor();applyState();mark();
  }

  targetSel.addEventListener('change',()=>{current=targetSel.value;renderEditor()});
  modeButtons.forEach(b=>b.addEventListener('click',()=>{setMode(b.dataset.mode);document.getElementById('appearanceColor1Label').textContent=b.dataset.mode==='solid'?'Cor':'Cor inicial';syncFromControls()}));
  [c1,c2,c3,textColor,angle,s1,s2,s3].forEach(el=>el.addEventListener('input',syncFromControls));
  document.getElementById('appearanceAutoContrast').addEventListener('click',()=>{const white='#FFFFFF',dark='#0B1C30';textColor.value=ratio(c1.value,white)>=ratio(c1.value,dark)?white:dark;syncFromControls()});
  document.getElementById('appearanceResetTarget').addEventListener('click',()=>{setTarget(current,targets[current].defaults);renderEditor();applyState();mark()});
  document.getElementById('appearanceResetAll').addEventListener('click',()=>preset('clinicos'));
  document.querySelectorAll('[data-theme-preset]').forEach(b=>b.addEventListener('click',()=>preset(b.dataset.themePreset)));

  document.querySelectorAll('.color-field input[type=color]').forEach(i=>i.addEventListener('input',()=>{const c=i.parentElement.querySelector('code');if(c)c.textContent=i.value.toUpperCase();const map={sidebar_active:'--nav-active',sidebar_active_text:'--nav-active-text',sidebar_hover:'--nav-hover',form_border:'--form-border'};if(map[i.name])document.documentElement.style.setProperty(map[i.name],i.value);mark()}));
  document.querySelectorAll('.range-field input[type=range]').forEach(i=>{const out=document.querySelector(`output[data-for="${i.name}"]`),suffix=i.name==='menu_logo_area_height'?' px':'%';const sync=()=>{if(out)out.textContent=i.value+suffix;const map={menu_logo_area_height:'--logo-area-height',menu_logo_width_pct:'--logo-width-pct',menu_logo_height_pct:'--logo-height-pct',menu_logo_area_opacity:'--logo-area-opacity'};if(map[i.name])document.documentElement.style.setProperty(map[i.name],i.value+suffix);mark()};i.addEventListener('input',sync);});
  form.querySelectorAll('input,select,textarea').forEach(el=>{if(el.name&&![ 'section','appearance_editor_json'].includes(el.name)){el.addEventListener('change',mark);if(!['file','checkbox','radio','color','range'].includes(el.type))el.addEventListener('input',mark)}});
  form.addEventListener('submit',()=>{if(jsonField)jsonField.value=JSON.stringify(state);form.dataset.submitting='1';dirty=false;if(saveState)saveState.textContent='Salvando...'});
  window.addEventListener('beforeunload',e=>{if(dirty&&!form.dataset.submitting){e.preventDefault();e.returnValue=''}});
  [...document.querySelectorAll('a[href]')].forEach(a=>a.addEventListener('click',e=>{if(!dirty)return;const href=a.getAttribute('href')||'';if(href.startsWith('#'))return;if(!confirm('Existem alterações de aparência não salvas. Deseja sair sem salvar?'))e.preventDefault()}));
  applyState();renderEditor();
})();
</script>
{% endblock %}