{% extends "dashboard/base_dashboard.html" %}

{% block title %}Dashboard Financeiro — Dra. Mariela{% endblock %}
{% block panel_title %}Dashboard Financeiro{% endblock %}

{% block panel_content %}
<!-- Filtro de Datas + Clínica + Botões -->
<div class="bg-white rounded-xl p-4 sm:p-5 border border-gray-100 shadow-sm mb-6 space-y-3">
    <!-- Fila 1: Filtros de data -->
    <form method="get" class="grid grid-cols-2 sm:flex sm:flex-wrap items-end gap-2 sm:gap-3">
        <div class="col-span-1">
            <label class="block text-[10px] sm:text-xs font-medium text-gray-500 mb-1">De</label>
            {{ form.fecha_inicio }}
        </div>
        <div class="col-span-1">
            <label class="block text-[10px] sm:text-xs font-medium text-gray-500 mb-1">Até</label>
            {{ form.fecha_fin }}
        </div>
        <div class="col-span-2 flex gap-2">
            <button type="submit" class="flex-1 sm:flex-none px-3 py-2 bg-rosa text-white font-semibold rounded-lg text-xs sm:text-sm hover:bg-rosa/90 transition shadow-sm inline-flex items-center justify-center gap-1">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg>
                Filtrar
            </button>
            <a id="btn-exportar-excel" href="{% url 'finance:exportar_excel' %}" class="flex-1 sm:flex-none px-3 py-2 bg-green-600 text-white font-semibold rounded-lg text-xs sm:text-sm hover:bg-green-700 transition shadow-sm inline-flex items-center justify-center gap-1">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                Exportar para Excel
            </a>
        </div>
    </form>
    <!-- Fila 2: Clínica + Ações do dia -->
    <div class="pt-3 border-t border-gray-100 space-y-2">
        <div>
            <label for="sel-clinica" class="block text-[10px] sm:text-xs font-medium text-gray-500 mb-1">Clínica</label>
            <select id="sel-clinica" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-xs sm:text-sm focus:border-rosa focus:ring-2 focus:ring-rosa/20 transition">
                <option value="">— Selecionar clínica —</option>
                {% for c in clinicas %}
                <option value="{{ c.id }}" {% if dia_abierto and dia_abierto.clinica_id == c.id %}selected{% endif %}>{{ c.nombre }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="grid grid-cols-3 gap-2">
            <button type="button" id="btn-abrir-dia"
                class="px-2 py-2 bg-green-600 text-white font-semibold rounded-lg text-[11px] sm:text-xs hover:bg-green-700 transition shadow-sm inline-flex items-center justify-center gap-1">
                <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                <span class="truncate">Abrir Dia</span>
            </button>
            <button type="button" id="btn-cerrar-dia"
                class="px-2 py-2 bg-red-600 text-white font-semibold rounded-lg text-[11px] sm:text-xs hover:bg-red-700 transition shadow-sm inline-flex items-center justify-center gap-1 {% if not dia_abierto %}opacity-50 cursor-not-allowed{% endif %}"
                {% if not dia_abierto %}disabled{% endif %}>
                <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                <span class="truncate">Fechar Dia</span>
            </button>
            <button type="button" id="btn-crear-factura"
                class="px-2 py-2 bg-rosa text-white font-semibold rounded-lg text-[11px] sm:text-xs hover:bg-rosa/90 transition shadow-sm inline-flex items-center justify-center gap-1 {% if not dia_abierto %}opacity-50 cursor-not-allowed{% endif %}"
                {% if not dia_abierto %}disabled{% endif %}>
                <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                <span class="truncate">Criar Fatura</span>
            </button>
        </div>
    </div>
    <p class="text-[10px] sm:text-xs text-gray-400">
        Mostrando: {{ fecha_inicio|date:"d/m/Y" }} — {{ fecha_fin|date:"d/m/Y" }}
    </p>
</div>

<!-- ============================================================ -->
<!-- SEÇÃO FATURAÇÃO DIA CLÍNICA (oculta até Abrir Dia)     -->
<!-- ============================================================ -->
<div id="seccion-facturacion" class="{% if not dia_abierto %}hidden{% endif %} mb-6">
    <!-- Encabeçado de Faturação -->
    <div class="bg-white rounded-t-xl p-5 border border-gray-100 shadow-sm">
        <div class="flex flex-wrap items-center gap-6">
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5 text-rosa" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                <span class="font-poppins font-semibold text-dark text-base">Faturação Clínica:</span>
                <span id="lbl-clinica-nombre" class="font-semibold text-rosa">{% if dia_abierto %}{{ dia_abierto.clinica.nombre }}{% endif %}</span>
            </div>
            <div class="flex items-center gap-2">
                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                <span class="text-sm text-gray-600">Data:</span>
                <span id="lbl-fecha" class="text-sm font-semibold text-dark">{% now "d/m/Y" %}</span>
            </div>
            <div class="flex items-center gap-2">
                <span id="badge-estado" class="px-3 py-1 bg-green-50 text-green-600 rounded-lg text-xs font-semibold">
                    Estado: Aberto
                </span>
            </div>
            <div class="flex items-center gap-2">
                <svg class="w-4 h-4 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/></svg>
                <span id="badge-irt" class="px-3 py-1 bg-amber-50 text-amber-600 rounded-lg text-xs font-semibold">
                    IRT: {{ irt_porciento }}%
                </span>
            </div>
            <div class="flex items-center gap-2">
                <button type="button" id="btn-ingreso-extra" class="px-3 py-1 bg-emerald-50 text-emerald-600 rounded-lg text-xs font-semibold hover:bg-emerald-100 transition inline-flex items-center gap-1.5 cursor-pointer" title="Registrar Ingreso Extra">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8V7m0 1v8m0 0v1"/></svg>
                    Receita Extra
                </button>
                <button type="button" id="btn-movimentos" class="px-3 py-1 bg-indigo-50 text-indigo-600 rounded-lg text-xs font-semibold hover:bg-indigo-100 transition inline-flex items-center gap-1.5 cursor-pointer" title="Movimentos do Dia">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>
                    Movimentos
                </button>
            </div>
        </div>
    </div>

    <!-- Tabela de Faturação -->
    <div class="bg-white rounded-b-xl border border-t-0 border-gray-100 shadow-sm overflow-x-auto">
        <table class="w-full text-xs" id="tabla-facturacion">
            <thead>
                <tr class="bg-gray-50">
                    <th class="px-2 py-2 text-center font-medium text-gray-500 border-b" rowspan="2">No.</th>
                    <th class="px-2 py-2 text-center font-medium text-gray-500 border-b" rowspan="2">Fatura</th>
                    <th class="px-2 py-2 text-center font-medium text-gray-500 border-b" rowspan="2">Paciente</th>
                    <th class="px-2 py-2 text-center font-medium text-gray-500 border-b" rowspan="2">Tipo Cliente</th>
                    <th class="px-2 py-2 text-center font-medium text-rosa border-b border-l border-gray-200" colspan="2">Serv. Médico</th>
                    <th class="px-2 py-2 text-center font-medium text-rosa border-b border-l border-gray-200" colspan="2">Laboratório</th>
                    <th class="px-2 py-2 text-center font-medium text-rosa border-b border-l border-gray-200" colspan="2">Imagens</th>
                    <th class="px-2 py-2 text-center font-medium text-rosa border-b border-l border-gray-200" colspan="2">Procedimentos</th>
                    <th class="px-2 py-2 text-center font-medium text-rosa border-b border-l border-gray-200" rowspan="2">Observações</th>
                    <th class="px-2 py-2 text-center font-medium text-gray-500 border-b border-l border-gray-200" rowspan="2"></th>
                </tr>
                <tr class="bg-gray-50 text-[10px]">
                    <th class="px-2 py-1 text-center font-medium text-gray-400 border-b border-l border-gray-200">P. Venda</th>
                    <th class="px-2 py-1 text-center font-medium text-gray-400 border-b">% Médico</th>
                    <th class="px-2 py-1 text-center font-medium text-gray-400 border-b border-l border-gray-200">P. Venda</th>
                    <th class="px-2 py-1 text-center font-medium text-gray-400 border-b">% Médico</th>
                    <th class="px-2 py-1 text-center font-medium text-gray-400 border-b border-l border-gray-200">P. Venda</th>
                    <th class="px-2 py-1 text-center font-medium text-gray-400 border-b">% Médico</th>
                    <th class="px-2 py-1 text-center font-medium text-gray-400 border-b border-l border-gray-200">P. Venda</th>
                    <th class="px-2 py-1 text-center font-medium text-gray-400 border-b">% Médico</th>
                </tr>
            </thead>
            <tbody id="tbody-facturacion" class="divide-y divide-gray-50">
                {% for fd in facturas_dia %}
                <tr class="fila-detalle hover:bg-gray-50/50 transition text-xs" data-factura-id="{{ fd.id }}">
                    <td class="px-2 py-2 text-center text-gray-500">{{ forloop.counter }}</td>
                    <td class="px-2 py-2 text-gray-700">{{ fd.numero_factura|default:"" }}</td>
                    <td class="px-2 py-2 text-gray-700">{{ fd.paciente_nombre }}</td>
                    <td class="px-2 py-2 text-gray-600">{{ fd.tipo_cliente.nombre|default:"" }}</td>
                    <td class="px-2 py-2 text-center border-l border-gray-200 serv-precio">{{ fd.serv_precio|floatformat:2 }}</td>
                    <td class="px-2 py-2 text-center serv-medico">{{ fd.serv_medico|floatformat:2 }}</td>
                    <td class="px-2 py-2 text-center border-l border-gray-200 lab-precio">{{ fd.lab_precio|floatformat:2 }}</td>
                    <td class="px-2 py-2 text-center lab-medico">{{ fd.lab_medico|floatformat:2 }}</td>
                    <td class="px-2 py-2 text-center border-l border-gray-200 img-precio">{{ fd.img_precio|floatformat:2 }}</td>
                    <td class="px-2 py-2 text-center img-medico">{{ fd.img_medico|floatformat:2 }}</td>
                    <td class="px-2 py-2 text-center border-l border-gray-200 proc-precio">{{ fd.proc_precio|floatformat:2 }}</td>
                    <td class="px-2 py-2 text-center proc-medico">{{ fd.proc_medico|floatformat:2 }}</td>
                    <td class="px-2 py-2 text-left border-l border-gray-200 obs-text" style="max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis" title="{{ fd.observaciones }}">{{ fd.observaciones }}</td>
                    <td class="px-2 py-2 text-center border-l border-gray-200"><button type="button" class="btn-eliminar-factura text-red-400 hover:text-red-600 transition" data-id="{{ fd.id }}" title="Eliminar factura"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg></button></td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr class="bg-amber-50 font-semibold text-xs">
                    <td colspan="4" class="px-2 py-2 text-right text-gray-600">Subtotais</td>
                    <td class="px-2 py-2 text-center text-dark border-l border-gray-200" id="sub-serv-precio">0.00</td>
                    <td class="px-2 py-2 text-center text-dark" id="sub-serv-porciento">0.00</td>
                    <td class="px-2 py-2 text-center text-dark border-l border-gray-200" id="sub-lab-precio">0.00</td>
                    <td class="px-2 py-2 text-center text-dark" id="sub-lab-porciento">0.00</td>
                    <td class="px-2 py-2 text-center text-dark border-l border-gray-200" id="sub-img-precio">0.00</td>
                    <td class="px-2 py-2 text-center text-dark" id="sub-img-porciento">0.00</td>
                    <td class="px-2 py-2 text-center text-dark border-l border-gray-200" id="sub-proc-precio">0.00</td>
                    <td class="px-2 py-2 text-center text-dark" id="sub-proc-porciento">0.00</td>
                    <td class="px-2 py-2 text-center text-dark border-l border-gray-200" id="sub-obs" colspan="2"></td>
                </tr>
                <tr class="bg-rosa/10 font-bold text-xs">
                    <td colspan="4" class="px-2 py-2 text-right text-rosa">Totais</td>
                    <td colspan="6" class="px-2 py-2"></td>
                    <td class="px-2 py-2 text-right text-rosa border-l border-gray-200 whitespace-nowrap" colspan="2">% Médico: <span id="total-porciento-medico">0.00</span></td>
                    <td class="px-2 py-2 text-right text-amber-600 border-l border-gray-200 whitespace-nowrap">IRT: <span id="total-irt-monto">0.00</span></td>
                    <td class="px-2 py-2 text-right text-green-600 border-l border-gray-200 whitespace-nowrap">Líquido: <span id="total-neto">0.00</span></td>
                </tr>
            </tfoot>
        </table>
    </div>

    <!-- Ingresos Extra del Día -->
    <div id="seccion-ingresos-extra" class="bg-white rounded-xl border border-t-0 border-gray-100 shadow-sm mt-0">
        <div class="px-5 py-3 border-b border-gray-100 flex items-center justify-between">
            <h4 class="font-poppins font-semibold text-emerald-600 text-sm flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8V7m0 1v8m0 0v1"/></svg>
                Receitas Extra
            </h4>
            <span class="text-xs text-gray-400">Só se somam à Receita Líquida</span>
        </div>
        <table class="w-full text-xs">
            <thead>
                <tr class="bg-emerald-50/50">
                    <th class="px-4 py-2 text-left font-medium text-emerald-600 border-b">Motivo</th>
                    <th class="px-4 py-2 text-right font-medium text-emerald-600 border-b">Valor (Kz)</th>
                    <th class="px-4 py-2 text-center font-medium text-emerald-600 border-b w-10"></th>
                </tr>
            </thead>
            <tbody id="tbody-ingresos-extra" class="divide-y divide-gray-50">
                {% for ie in ingresos_extra %}
                <tr class="fila-ingreso-extra hover:bg-emerald-50/30 transition" data-ingreso-id="{{ ie.id }}">
                    <td class="px-4 py-2 text-gray-700 ie-motivo">{{ ie.motivo }}</td>
                    <td class="px-4 py-2 text-right font-semibold text-emerald-600 ie-monto">{{ ie.monto|floatformat:2 }}</td>
                    <td class="px-4 py-2 text-center"><button type="button" class="btn-eliminar-ingreso text-red-400 hover:text-red-600 transition" data-id="{{ ie.id }}" title="Eliminar ingreso extra"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg></button></td>
                </tr>
                {% empty %}
                <tr class="ingreso-extra-empty">
                    <td colspan="3" class="px-4 py-3 text-center text-gray-400">Sem receitas extra.</td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr class="bg-emerald-50 font-bold text-xs">
                    <td class="px-4 py-2 text-right text-emerald-700">Total Receita Extra:</td>
                    <td class="px-4 py-2 text-right text-emerald-700"><span id="total-ingreso-extra">0.00</span> Kz</td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

<!-- KPIs -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <!-- Receitas Hoje -->
    <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
        <div class="flex items-center justify-between mb-3">
            <div class="w-11 h-11 bg-green-50 rounded-xl flex items-center justify-center">
                <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            {% if variacion > 0 %}
            <span class="text-xs font-semibold text-green-600 bg-green-50 px-2 py-1 rounded-lg">+{{ variacion }}%</span>
            {% elif variacion < 0 %}
            <span class="text-xs font-semibold text-red-500 bg-red-50 px-2 py-1 rounded-lg">{{ variacion }}%</span>
            {% else %}
            <span class="text-xs font-semibold text-gray-400 bg-gray-50 px-2 py-1 rounded-lg">0%</span>
            {% endif %}
        </div>
        <p class="text-xs text-gray-400 uppercase tracking-wide font-medium">Receitas Hoje</p>
        <p id="kpi-ingresos-hoy" class="text-2xl font-bold text-dark mt-1">{{ ingresos_hoy|floatformat:2 }} <span class="text-sm font-normal text-gray-400">Kz</span></p>
        <p class="text-xs text-gray-400 mt-1">Ontem: {{ ingresos_ayer|floatformat:2 }} Kz</p>
    </div>

    <!-- Receita Anual -->
    <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
        <div class="w-11 h-11 bg-rosa-bg rounded-xl flex items-center justify-center mb-3">
            <svg class="w-5 h-5 text-rosa" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
        </div>
        <p class="text-xs text-gray-400 uppercase tracking-wide font-medium">Receita Anual {{ ano_actual }}</p>
        <p id="kpi-ingreso-anual" class="text-2xl font-bold text-dark mt-1">{{ ingreso_anual|floatformat:2 }} <span class="text-sm font-normal text-gray-400">Kz</span></p>
        <p class="text-xs text-gray-400 mt-1"><span id="kpi-total-facturas-anual">{{ total_facturas_anual }}</span> fatura{{ total_facturas_anual|pluralize:"s" }}</p>
    </div>

    <!-- IRT Anual -->
    <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
        <div class="w-11 h-11 bg-amber-50 rounded-xl flex items-center justify-center mb-3">
            <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2zM10 8.5a.5.5 0 11-1 0 .5.5 0 011 0zm5 5a.5.5 0 11-1 0 .5.5 0 011 0z"/></svg>
        </div>
        <p class="text-xs text-gray-400 uppercase tracking-wide font-medium">IRT Anual {{ ano_actual }}</p>
        <p id="kpi-irt-anual" class="text-2xl font-bold text-dark mt-1">{{ irt_anual|floatformat:2 }} <span class="text-sm font-normal text-gray-400">Kz</span></p>
        <p class="text-xs text-gray-400 mt-1">Acumulado de faturas</p>
    </div>

    <!-- Subtotal Mês -->
    <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
        <div class="w-11 h-11 bg-blue-50 rounded-xl flex items-center justify-center mb-3">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
        </div>
        <p class="text-xs text-gray-400 uppercase tracking-wide font-medium">Subtotal Mês — {{ mes_actual|capfirst }}</p>
        <p id="kpi-subtotal-mes" class="text-2xl font-bold text-dark mt-1">{{ subtotal_mes_ingreso|floatformat:2 }} <span class="text-sm font-normal text-gray-400">Kz</span></p>
        <p class="text-xs text-gray-400 mt-1">IRT mês: <span id="kpi-irt-mes">{{ subtotal_mes_irt|floatformat:2 }}</span> Kz</p>
    </div>
</div>

<!-- Desglose por Servicio + Desglose por Especialidades -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <!-- Detalhe por Tipo de Serviço -->
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100">
            <h3 class="font-poppins font-semibold text-dark text-base">Detalhe por Serviço</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider">
                        <th class="px-6 py-3 text-left font-medium">Serviço</th>
                        <th class="px-6 py-3 text-center font-medium">Quantidade</th>
                        <th class="px-6 py-3 text-left font-medium">Clínica</th>
                        <th class="px-6 py-3 text-right font-medium">Receita Líquida</th>
                    </tr>
                </thead>
                <tbody id="tbody-desglose-servicios" class="divide-y divide-gray-50">
                    {% for item in desglose_servicios %}
                    <tr class="hover:bg-gray-50/50 transition" data-tipo="{{ item.tipo }}" data-clinica="{{ item.clinica }}">
                        <td class="px-6 py-3 font-medium text-dark ds-tipo">{{ item.tipo }}</td>
                        <td class="px-6 py-3 text-center text-gray-500 ds-cantidad">{{ item.cantidad }}</td>
                        <td class="px-6 py-3 text-gray-600 ds-clinica">{{ item.clinica }}</td>
                        <td class="px-6 py-3 text-right font-semibold text-green-600 ds-neto">{{ item.total_ingreso_neto|floatformat:2 }} Kz</td>
                    </tr>
                    {% empty %}
                    <tr class="desglose-empty">
                        <td colspan="4" class="px-6 py-8 text-center text-gray-400">Sem dados para hoje.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Detalhe por Especialidades -->
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100">
            <h3 class="font-poppins font-semibold text-dark text-base">Detalhe por Especialidades</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider">
                        <th class="px-6 py-3 text-left font-medium">Especialidade</th>
                        <th class="px-6 py-3 text-center font-medium">Quantidade</th>
                        <th class="px-6 py-3 text-left font-medium">Clínica</th>
                        <th class="px-6 py-3 text-right font-medium">Receita Líquida</th>
                    </tr>
                </thead>
                <tbody id="tbody-desglose-especialidades" class="divide-y divide-gray-50">
                    {% for item in desglose_especialidades %}
                    <tr class="hover:bg-gray-50/50 transition" data-nombre="{{ item.nombre }}" data-clinica="{{ item.clinica }}">
                        <td class="px-6 py-3 font-medium text-dark de-nombre">{{ item.nombre }}</td>
                        <td class="px-6 py-3 text-center text-gray-500 de-cantidad">{{ item.cantidad }}</td>
                        <td class="px-6 py-3 text-gray-600 de-clinica">{{ item.clinica }}</td>
                        <td class="px-6 py-3 text-right font-semibold text-rosa de-neto">{{ item.total_ingreso_neto|floatformat:2 }} Kz</td>
                    </tr>
                    {% empty %}
                    <tr class="desglose-empty">
                        <td colspan="4" class="px-6 py-8 text-center text-gray-400">Sem especialidades registadas.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Facturas Día Clínica -->
<div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden mb-6">
    <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
        <h3 class="font-poppins font-semibold text-dark text-base">Faturas Dia Clínica</h3>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider">
                    <th class="px-6 py-3 text-left font-medium">Fatura</th>
                    <th class="px-6 py-3 text-left font-medium">Paciente</th>
                    <th class="px-6 py-3 text-left font-medium">Tipo Cliente</th>
                    <th class="px-6 py-3 text-right font-medium">P. Venda Total</th>
                    <th class="px-6 py-3 text-right font-medium">% Médico Total</th>
                    <th class="px-6 py-3 text-right font-medium">Valor IRT</th>
                    <th class="px-6 py-3 text-right font-medium">Receita Líquida</th>
                    <th class="px-6 py-3 text-center font-medium">Estado</th>
                </tr>
            </thead>
            <tbody id="tbody-facturas-dia" class="divide-y divide-gray-50">
                {% for fd in facturas_dia %}
                <tr class="hover:bg-gray-50/50 transition" data-factura-id="{{ fd.id }}">
                    <td class="px-6 py-3 font-medium text-dark">{{ fd.numero_factura|default:"S/N" }}</td>
                    <td class="px-6 py-3 text-gray-600">{{ fd.paciente_nombre }}</td>
                    <td class="px-6 py-3 text-gray-600">{{ fd.tipo_cliente.nombre|default:"—" }}</td>
                    <td class="px-6 py-3 text-right text-dark font-medium">{{ fd.precio_venta_total|floatformat:2 }} Kz</td>
                    <td class="px-6 py-3 text-right text-rosa font-semibold">{{ fd.porciento_medico_total|floatformat:2 }} Kz</td>
                    <td class="px-6 py-3 text-right text-amber-600 font-medium">{{ fd.irt_monto|floatformat:2 }} Kz</td>
                    <td class="px-6 py-3 text-right text-green-600 font-semibold">{{ fd.ingreso_neto|floatformat:2 }} Kz</td>
                    <td class="px-6 py-3 text-center">
                        {% if fd.estado == 'sin_confirmar' %}
                        <span class="px-2.5 py-1 bg-amber-50 text-amber-600 rounded-lg text-xs font-semibold">Sem Confirmar</span>
                        {% elif fd.estado == 'confirmada' %}
                        <span class="px-2.5 py-1 bg-green-50 text-green-600 rounded-lg text-xs font-semibold">Confirmada</span>
                        {% elif fd.estado == 'anulada' %}
                        <span class="px-2.5 py-1 bg-red-50 text-red-500 rounded-lg text-xs font-semibold">Anulada</span>
                        {% endif %}
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="8" class="px-6 py-8 text-center text-gray-400">
                        <svg class="w-10 h-10 mx-auto text-gray-200 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Não há faturas para o dia de hoje.
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Quick Links -->
<div class="bg-white rounded-xl p-4 sm:p-5 border border-gray-100 shadow-sm">
    <p class="text-[10px] sm:text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Acessos rápidos</p>
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:flex lg:flex-wrap gap-2">
        <a href="{% url 'dashboard:analytics' %}" class="inline-flex items-center justify-center gap-1.5 px-3 py-2 bg-dark text-white rounded-lg text-[11px] sm:text-xs font-medium hover:bg-dark/90 transition shadow-sm">
            <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
            <span class="truncate">Analytics</span>
        </a>
        <a href="{% url 'finance:lista_facturas' %}" class="inline-flex items-center justify-center gap-1.5 px-3 py-2 bg-white border border-gray-200 rounded-lg text-[11px] sm:text-xs font-medium text-gray-600 hover:border-rosa hover:text-rosa transition shadow-sm">
            <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
            <span class="truncate">Faturas</span>
        </a>
        <a href="{% url 'finance:exportar_excel' %}" class="inline-flex items-center justify-center gap-1.5 px-3 py-2 bg-green-600 text-white rounded-lg text-[11px] sm:text-xs font-medium hover:bg-green-700 transition shadow-sm">
            <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            <span class="truncate">Excel Dia</span>
        </a>
        <a href="{% url 'reports:reporte_mensual_pdf' %}" class="inline-flex items-center justify-center gap-1.5 px-3 py-2 bg-rosa text-white rounded-lg text-[11px] sm:text-xs font-medium hover:bg-rosa/90 transition shadow-sm">
            <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            <span class="truncate">PDF Mensal</span>
        </a>
        <a href="{% url 'reports:reporte_anual_pdf' %}" class="inline-flex items-center justify-center gap-1.5 px-3 py-2 bg-dorado text-white rounded-lg text-[11px] sm:text-xs font-medium hover:bg-dorado/90 transition shadow-sm">
            <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
            <span class="truncate">PDF Anual</span>
        </a>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- ============================================================ -->
<!-- MODAL — Criar Fatura                                         -->
<!-- ============================================================ -->
<div id="modal-factura" class="fixed inset-0 z-[1100] hidden">
    <!-- Overlay -->
    <div id="modal-overlay" class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
    <!-- Panel -->
    <div class="absolute inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col relative">
            <!-- Header -->
            <div class="shrink-0 bg-white rounded-t-2xl px-6 py-4 border-b border-gray-100 flex items-center justify-between">
                <h2 class="font-poppins font-semibold text-dark text-lg flex items-center gap-2">
                    <svg class="w-5 h-5 text-rosa" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    Criar Fatura
                </h2>
                <button type="button" id="modal-cerrar" class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
            <!-- Body (scrollable) -->
            <div class="flex-1 overflow-y-auto px-6 py-5 space-y-4">
                <!-- Citas Agendadas Hoy -->
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">
                        <svg class="w-4 h-4 inline mr-1 -mt-0.5 text-rosa" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        Consultas Agendadas Hoje
                    </label>
                    <select id="m-cita" class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:border-rosa focus:ring-2 focus:ring-rosa/20 transition">
                        <option value="">— Selecionar consulta (opcional) —</option>
                        {% for cita in citas_hoy %}
                        <option value="{{ cita.id }}"
                                data-paciente="{{ cita.paciente.get_full_name }}"
                                data-paciente-id="{{ cita.paciente.id }}"
                                data-especialidad="{{ cita.especialidad }}">
                            {{ cita.fecha_hora|date:"H:i" }} — {{ cita.paciente.get_full_name }}{% if cita.servicio %} ({{ cita.servicio.nombre }}){% endif %}
                        </option>
                        {% empty %}
                        <option value="" disabled>Não há consultas para hoje</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <!-- Nro. Factura -->
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">Nro. Fatura</label>
                        <input type="text" id="m-factura" class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:border-rosa focus:ring-2 focus:ring-rosa/20 transition" placeholder="FAC-2026-0001">
                    </div>
                    <!-- Paciente (editable) -->
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">Paciente</label>
                        <input type="text" id="m-paciente" class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:border-rosa focus:ring-2 focus:ring-rosa/20 transition" placeholder="Nome do paciente">
                        <input type="hidden" id="m-paciente-id" value="">
                    </div>
                    <!-- Tipo Cliente -->
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">Tipo de Cliente</label>
                        <select id="m-tipo-cliente" class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:border-rosa focus:ring-2 focus:ring-rosa/20 transition">
                            <option value="">— Selecionar —</option>
                            {% for tipo in tipos_cliente %}
                            <option value="{{ tipo.id }}">{{ tipo.nombre }}</option>
                            {% empty %}
                            <option value="" disabled>Sem registos</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <!-- Servicio Médico con precios -->
                <div class="border border-dorado/30 rounded-xl p-4 space-y-2 bg-dorado/5">
                    <p class="text-xs font-semibold text-dorado uppercase tracking-wide">Serviço Médico</p>
                    <div class="grid grid-cols-12 gap-2 items-end">
                        <div class="col-span-4">
                            <label class="block text-xs font-medium text-gray-500 mb-1">Serviço</label>
                            <select id="m-servicio" class="w-full border border-gray-200 rounded-xl px-3 py-2 text-sm focus:border-rosa focus:ring-2 focus:ring-rosa/20 transition">
                                <option value="">— Selecionar —</option>
                                {% for sm in servicios_medicos %}
                                <option value="{{ sm.id }}">{{ sm.nombre }}</option>
                                {% empty %}
                                <option value="" disabled>Sem registos</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-xs font-medium text-gray-400 mb-1">P. Venda</label>
                            <div id="m-serv-precio" class="border border-gray-100 bg-gray-50 rounded-xl px-3 py-2 text-sm text-center font-semibold text-dark">0.00</div>
                        </div>
                        <div class="col-span-3">
                            <label class="block text-xs font-medium text-green-600 mb-1">Novo Preço</label>
                            <input type="number" step="0.01" min="0" id="m-serv-nuevo" class="w-full border border-green-300 bg-green-50 rounded-xl px-3 py-2 text-sm text-center font-semibold text-dark focus:border-green-500 focus:ring-2 focus:ring-green-200 transition" placeholder="0.00">
                        </div>
                        <div class="col-span-3">
                            <label class="block text-xs font-medium text-gray-400 mb-1">% Médico</label>
                            <div id="m-serv-porciento" class="border border-gray-100 bg-gray-50 rounded-xl px-3 py-2 text-sm text-center font-semibold text-rosa">0.00</div>
                        </div>
                    </div>
                </div>

                <!-- Sección con borde rosa para catálogos clínicos -->
                <div class="border border-rosa/30 rounded-xl p-4 space-y-4 bg-rosa/5">
                    <p class="text-xs font-semibold text-rosa uppercase tracking-wide">Serviços Clínicos</p>

                    <!-- Laboratório -->
                    <div>
                        <div class="flex items-center justify-between mb-1">
                            <label class="text-xs font-medium text-gray-500">Laboratório</label>
                            <button type="button" class="btn-add-row inline-flex items-center gap-1 text-xs text-green-600 hover:text-green-700 font-semibold transition" data-cat="lab" title="Adicionar outro laboratório">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                                Adicionar
                            </button>
                        </div>
                        <div id="cat-lab-rows" class="space-y-2">
                            <div class="grid grid-cols-12 gap-2 items-end cat-row" data-cat="lab">
                                <div class="col-span-4">
                                    <select class="cat-select w-full border border-gray-200 rounded-xl px-3 py-2 text-sm focus:border-rosa focus:ring-2 focus:ring-rosa/20 transition" data-catkey="laboratorios">
                                        <option value="">— Selecionar —</option>
                                        {% for lab in laboratorios %}
                                        <option value="{{ lab.id }}">{{ lab.nombre }}</option>
                                        {% empty %}
                                        <option value="" disabled>Sem registos</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-span-2">
                                    <div class="cat-precio border border-gray-100 bg-gray-50 rounded-xl px-3 py-2 text-sm text-center font-semibold text-dark">0.00</div>
                                </div>
                                <div class="col-span-3">
                                    <input type="number" step="0.01" min="0" class="cat-nuevo w-full border border-green-300 bg-green-50 rounded-xl px-3 py-2 text-sm text-center font-semibold text-dark focus:border-green-500 focus:ring-2 focus:ring-green-200 transition" placeholder="0.00">
                                </div>
                                <div class="col-span-3">
                                    <div class="cat-porciento border border-gray-100 bg-gray-50 rounded-xl px-3 py-2 text-sm text-center font-semibold text-rosa">0.00</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Imagens -->
                    <div>
                        <div class="flex items-center justify-between mb-1">
                            <label class="text-xs font-medium text-gray-500">Imagens</label>
                            <button type="button" class="btn-add-row inline-flex items-center gap-1 text-xs text-green-600 hover:text-green-700 font-semibold transition" data-cat="img" title="Adicionar outra imagem">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                                Adicionar
                            </button>
                        </div>
                        <div id="cat-img-rows" class="space-y-2">
                            <div class="grid grid-cols-12 gap-2 items-end cat-row" data-cat="img">
                                <div class="col-span-4">
                                    <select class="cat-select w-full border border-gray-200 rounded-xl px-3 py-2 text-sm focus:border-rosa focus:ring-2 focus:ring-rosa/20 transition" data-catkey="imagenes">
                                        <option value="">— Selecionar —</option>
                                        {% for img in imagenes %}
                                        <option value="{{ img.id }}">{{ img.nombre }}</option>
                                        {% empty %}
                                        <option value="" disabled>Sem registos</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-span-2">
                                    <div class="cat-precio border border-gray-100 bg-gray-50 rounded-xl px-3 py-2 text-sm text-center font-semibold text-dark">0.00</div>
                                </div>
                                <div class="col-span-3">
                                    <input type="number" step="0.01" min="0" class="cat-nuevo w-full border border-green-300 bg-green-50 rounded-xl px-3 py-2 text-sm text-center font-semibold text-dark focus:border-green-500 focus:ring-2 focus:ring-green-200 transition" placeholder="0.00">
                                </div>
                                <div class="col-span-3">
                                    <div class="cat-porciento border border-gray-100 bg-gray-50 rounded-xl px-3 py-2 text-sm text-center font-semibold text-rosa">0.00</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Procedimentos -->
                    <div>
                        <div class="flex items-center justify-between mb-1">
                            <label class="text-xs font-medium text-gray-500">Procedimentos</label>
                            <button type="button" class="btn-add-row inline-flex items-center gap-1 text-xs text-green-600 hover:text-green-700 font-semibold transition" data-cat="proc" title="Adicionar outro procedimento">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                                Adicionar
                            </button>
                        </div>
                        <div id="cat-proc-rows" class="space-y-2">
                            <div class="grid grid-cols-12 gap-2 items-end cat-row" data-cat="proc">
                                <div class="col-span-4">
                                    <select class="cat-select w-full border border-gray-200 rounded-xl px-3 py-2 text-sm focus:border-rosa focus:ring-2 focus:ring-rosa/20 transition" data-catkey="procederes">
                                        <option value="">— Selecionar —</option>
                                        {% for proc in procederes %}
                                        <option value="{{ proc.id }}">{{ proc.nombre }}</option>
                                        {% empty %}
                                        <option value="" disabled>Sem registos</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-span-2">
                                    <div class="cat-precio border border-gray-100 bg-gray-50 rounded-xl px-3 py-2 text-sm text-center font-semibold text-dark">0.00</div>
                                </div>
                                <div class="col-span-3">
                                    <input type="number" step="0.01" min="0" class="cat-nuevo w-full border border-green-300 bg-green-50 rounded-xl px-3 py-2 text-sm text-center font-semibold text-dark focus:border-green-500 focus:ring-2 focus:ring-green-200 transition" placeholder="0.00">
                                </div>
                                <div class="col-span-3">
                                    <div class="cat-porciento border border-gray-100 bg-gray-50 rounded-xl px-3 py-2 text-sm text-center font-semibold text-rosa">0.00</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Observações -->
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">Observações</label>
                        <textarea id="m-observaciones" rows="3" class="w-full border border-gray-200 rounded-xl px-3 py-2 text-sm focus:border-rosa focus:ring-2 focus:ring-rosa/20 transition resize-none" placeholder="Notas, observações, exames adicionais..."></textarea>
                    </div>
                </div>
            </div>
            <!-- Footer -->
            <div class="shrink-0 bg-white rounded-b-2xl px-6 py-4 border-t border-gray-100 flex justify-end gap-3">
                <button type="button" id="modal-cancelar" class="px-5 py-2.5 border border-gray-200 text-gray-600 font-semibold rounded-xl text-sm hover:bg-gray-50 transition">
                    Cancelar
                </button>
                <button type="button" id="modal-agregar" class="px-5 py-2.5 bg-rosa text-white font-semibold rounded-xl text-sm hover:bg-rosa/90 transition shadow-sm inline-flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                    Adicionar à Tabela
                </button>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================ -->
<!-- MODAL — Receita Extra                                         -->
<!-- ============================================================ -->
<div id="modal-ingreso-extra" class="fixed inset-0 z-[1100] hidden">
    <div id="modal-ie-overlay" class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
    <div class="absolute inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md relative">
            <div class="bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-t-2xl px-6 py-4 flex items-center justify-between">
                <h2 class="font-poppins font-semibold text-white text-lg flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8V7m0 1v8m0 0v1"/></svg>
                    Registar Receita Extra
                </h2>
                <button type="button" id="modal-ie-cerrar" class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-white/20 transition text-white/80 hover:text-white">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
            <div class="px-6 py-5 space-y-4">
                <p class="text-xs text-gray-500">Esta receita não tem IRT nem % médico. Soma-se diretamente à receita líquida.</p>
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Valor (Kz)</label>
                    <input type="number" step="0.01" min="0.01" id="ie-monto" class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition" placeholder="0.00">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Motivo</label>
                    <input type="text" id="ie-motivo" class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition" placeholder="Descrição da receita extra...">
                </div>
            </div>
            <div class="px-6 py-4 border-t border-gray-100 flex justify-end gap-3">
                <button type="button" id="modal-ie-cancelar" class="px-5 py-2.5 border border-gray-200 text-gray-600 font-semibold rounded-xl text-sm hover:bg-gray-50 transition">Cancelar</button>
                <button type="button" id="modal-ie-guardar" class="px-5 py-2.5 bg-emerald-600 text-white font-semibold rounded-xl text-sm hover:bg-emerald-700 transition shadow-sm inline-flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    Guardar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================ -->
<!-- MODAL — Fechar Dia (estilizado)                               -->
<!-- ============================================================ -->
<div id="modal-cerrar-dia" class="fixed inset-0 z-[1100] hidden">
    <div id="modal-cd-overlay" class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
    <div class="absolute inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg relative overflow-hidden">
            <div class="bg-gradient-to-r from-red-500 to-rosa rounded-t-2xl px-6 py-5 text-center">
                <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-3">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m0 0v2m0-2h2m-2 0H10m-4.343-5.657a8 8 0 1111.314 0L12 17l-6.343-6.343z"/></svg>
                </div>
                <h2 class="font-poppins font-bold text-white text-xl">Fechar Dia Clínica</h2>
                <p class="text-white/80 text-sm mt-1" id="cd-clinica-nombre"></p>
            </div>
            <div class="px-6 py-5">
                <div id="cd-alerta-citas" class="hidden mb-4 bg-amber-50 border border-amber-200 rounded-xl p-4">
                    <div class="flex items-start gap-3">
                        <svg class="w-6 h-6 text-amber-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.072 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
                        <div>
                            <p class="font-semibold text-amber-800 text-sm">Consultas pendentes</p>
                            <p class="text-amber-700 text-xs mt-1" id="cd-citas-msg"></p>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 rounded-xl p-4 space-y-2">
                    <p class="text-xs text-gray-500 uppercase tracking-wider font-semibold mb-3">Resumo do Dia</p>
                    <div class="flex justify-between text-sm"><span class="text-gray-500">Total Faturas:</span><span class="font-semibold text-dark" id="cd-total-facturas">0</span></div>
                    <div class="flex justify-between text-sm"><span class="text-gray-500">% Médico Total:</span><span class="font-semibold text-rosa" id="cd-total-medico">0.00 Kz</span></div>
                    <div class="flex justify-between text-sm"><span class="text-gray-500">IRT Total:</span><span class="font-semibold text-amber-600" id="cd-total-irt">0.00 Kz</span></div>
                    <div class="flex justify-between text-sm"><span class="text-gray-500">Receita Extra:</span><span class="font-semibold text-emerald-600" id="cd-total-extra">0.00 Kz</span></div>
                    <hr class="border-gray-200">
                    <div class="flex justify-between text-sm"><span class="text-gray-600 font-semibold">Receita Líquida Total:</span><span class="font-bold text-green-600 text-base" id="cd-total-neto">0.00 Kz</span></div>
                </div>
                <p class="text-xs text-gray-400 text-center mt-4">Todos os dados serão guardados e as faturas pendentes serão confirmadas.</p>
            </div>
            <div class="px-6 py-4 border-t border-gray-100 flex justify-end gap-3">
                <button type="button" id="modal-cd-cancelar" class="px-5 py-2.5 border border-gray-200 text-gray-600 font-semibold rounded-xl text-sm hover:bg-gray-50 transition">Cancelar</button>
                <button type="button" id="modal-cd-confirmar" class="px-5 py-2.5 bg-red-600 text-white font-semibold rounded-xl text-sm hover:bg-red-700 transition shadow-sm inline-flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    Confirmar Fecho
                </button>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================ -->
<!-- MODAL NOTIFICAÇÃO ESTILIZADO (reutilizável)                  -->
<!-- ============================================================ -->
<div id="modal-notify" class="fixed inset-0 z-[1200] hidden">
    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" id="modal-notify-overlay"></div>
    <div class="absolute inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md relative overflow-hidden transform transition-all">
            <!-- Header dinámico -->
            <div id="mn-header" class="rounded-t-2xl px-6 py-5 text-center">
                <div id="mn-icon-wrap" class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-3">
                    <svg id="mn-icon" class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"></svg>
                </div>
                <h2 id="mn-title" class="font-poppins font-bold text-white text-xl"></h2>
                <p id="mn-subtitle" class="text-white/80 text-sm mt-1"></p>
            </div>
            <!-- Body -->
            <div class="px-6 py-5">
                <div id="mn-body"></div>
            </div>
            <!-- Footer -->
            <div class="px-6 py-4 border-t border-gray-100 flex justify-center">
                <button type="button" id="modal-notify-ok" class="px-8 py-2.5 font-semibold rounded-xl text-sm text-white transition shadow-sm inline-flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    Aceitar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================ -->
<!-- MODAL — Movimentos do Dia                                    -->
<!-- ============================================================ -->
<div id="modal-movimentos" class="fixed inset-0 z-[1100] hidden">
    <div id="mov-overlay" class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
    <div class="absolute inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col relative">
            <!-- Header -->
            <div class="shrink-0 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-t-2xl px-6 py-5 text-center">
                <div class="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-2">
                    <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>
                </div>
                <h2 class="font-poppins font-bold text-white text-xl">Movimentos do Dia</h2>
                <p class="text-white/70 text-sm mt-1" id="mov-fecha"></p>
            </div>
            <!-- Body -->
            <div class="flex-1 overflow-y-auto px-6 py-5">
                <div id="mov-loading" class="hidden text-center py-12">
                    <svg class="animate-spin h-8 w-8 text-indigo-500 mx-auto mb-3" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                    <p class="text-gray-400 text-sm">A carregar movimentos...</p>
                </div>
                <div id="mov-conteudo"></div>
            </div>
            <!-- Footer -->
            <div class="shrink-0 px-6 py-4 border-t border-gray-100 flex justify-center gap-3">
                <button type="button" id="mov-pdf" class="px-5 py-2.5 bg-red-600 text-white font-semibold rounded-xl text-sm hover:bg-red-700 transition shadow-sm flex items-center gap-2" title="Exportar PDF">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    PDF
                </button>
                <button type="button" id="mov-fechar" class="px-8 py-2.5 bg-indigo-600 text-white font-semibold rounded-xl text-sm hover:bg-indigo-700 transition shadow-sm">Fechar</button>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================ -->
<!-- JAVASCRIPT — Gestão Dia Clínica                              -->
<!-- ============================================================ -->
<script>
(function(){
    // ── Atualizar link Excel com intervalo de datas ──
    const btnExcel = document.getElementById('btn-exportar-excel');
    const inputInicio = document.getElementById('id_fecha_inicio');
    const inputFin = document.getElementById('id_fecha_fin');
    const baseExcelUrl = '{% url "finance:exportar_excel" %}';

    function actualizarExcelUrl(){
        const params = new URLSearchParams();
        if(inputInicio && inputInicio.value) params.set('fecha_inicio', inputInicio.value);
        if(inputFin && inputFin.value) params.set('fecha_fin', inputFin.value);
        const qs = params.toString();
        btnExcel.href = qs ? baseExcelUrl + '?' + qs : baseExcelUrl;
    }
    if(inputInicio) inputInicio.addEventListener('change', actualizarExcelUrl);
    if(inputFin) inputFin.addEventListener('change', actualizarExcelUrl);
    actualizarExcelUrl();

    const CSRF = '{{ csrf_token }}';

    // ---- Helper: actualizar todos los KPIs dinámicamente ----
    function actualizarKPI(monto, irtMonto, sumar) {
        const sign = sumar ? 1 : -1;
        const delta = parseFloat(monto) || 0;
        const deltaIrt = parseFloat(irtMonto) || 0;

        // Receitas Hoje
        const kpiHoy = document.getElementById('kpi-ingresos-hoy');
        const prevHoy = parseFloat(kpiHoy.textContent) || 0;
        kpiHoy.innerHTML = Math.max(0, prevHoy + sign * delta).toFixed(2) + ' <span class="text-sm font-normal text-gray-400">Kz</span>';

        // Receita Anual
        const kpiAnual = document.getElementById('kpi-ingreso-anual');
        if (kpiAnual) {
            const prevAnual = parseFloat(kpiAnual.textContent) || 0;
            kpiAnual.innerHTML = Math.max(0, prevAnual + sign * delta).toFixed(2) + ' <span class="text-sm font-normal text-gray-400">Kz</span>';
        }

        // IRT Anual
        const kpiIrt = document.getElementById('kpi-irt-anual');
        if (kpiIrt) {
            const prevIrt = parseFloat(kpiIrt.textContent) || 0;
            kpiIrt.innerHTML = Math.max(0, prevIrt + sign * deltaIrt).toFixed(2) + ' <span class="text-sm font-normal text-gray-400">Kz</span>';
        }

        // Subtotal Mês
        const kpiMes = document.getElementById('kpi-subtotal-mes');
        if (kpiMes) {
            const prevMes = parseFloat(kpiMes.textContent) || 0;
            kpiMes.innerHTML = Math.max(0, prevMes + sign * delta).toFixed(2) + ' <span class="text-sm font-normal text-gray-400">Kz</span>';
        }

        // IRT Mês
        const kpiIrtMes = document.getElementById('kpi-irt-mes');
        if (kpiIrtMes) {
            const prevIrtMes = parseFloat(kpiIrtMes.textContent) || 0;
            kpiIrtMes.textContent = Math.max(0, prevIrtMes + sign * deltaIrt).toFixed(2);
        }
    }

    const seccion = document.getElementById('seccion-facturacion');
    const tbody = document.getElementById('tbody-facturacion');
    const btnAbrir = document.getElementById('btn-abrir-dia');
    const btnCerrar = document.getElementById('btn-cerrar-dia');
    const btnFactura = document.getElementById('btn-crear-factura');
    const selClinica = document.getElementById('sel-clinica');
    const lblClinica = document.getElementById('lbl-clinica-nombre');
    const btnIngresoExtra = document.getElementById('btn-ingreso-extra');

    // Modal Crear Factura elements
    const modal = document.getElementById('modal-factura');
    const modalOverlay = document.getElementById('modal-overlay');
    const modalCerrar = document.getElementById('modal-cerrar');
    const modalCancelar = document.getElementById('modal-cancelar');
    const modalAgregar = document.getElementById('modal-agregar');
    const mCita = document.getElementById('m-cita');
    const mFactura = document.getElementById('m-factura');
    const mPaciente = document.getElementById('m-paciente');
    const mPacienteId = document.getElementById('m-paciente-id');
    const mTipoCliente = document.getElementById('m-tipo-cliente');
    const mServicio = document.getElementById('m-servicio');
    const mObservaciones = document.getElementById('m-observaciones');

    // Modal Ingreso Extra elements
    const modalIE = document.getElementById('modal-ingreso-extra');
    const modalIEOverlay = document.getElementById('modal-ie-overlay');
    const modalIECerrar = document.getElementById('modal-ie-cerrar');
    const modalIECancelar = document.getElementById('modal-ie-cancelar');
    const modalIEGuardar = document.getElementById('modal-ie-guardar');
    const ieMonto = document.getElementById('ie-monto');
    const ieMotivo = document.getElementById('ie-motivo');
    const tbodyIE = document.getElementById('tbody-ingresos-extra');

    // Modal Cerrar Día elements
    const modalCD = document.getElementById('modal-cerrar-dia');
    const modalCDOverlay = document.getElementById('modal-cd-overlay');
    const modalCDCancelar = document.getElementById('modal-cd-cancelar');
    const modalCDConfirmar = document.getElementById('modal-cd-confirmar');

    // Modal Notificación elements
    const modalNotify = document.getElementById('modal-notify');
    const mnHeader = document.getElementById('mn-header');
    const mnIcon = document.getElementById('mn-icon');
    const mnTitle = document.getElementById('mn-title');
    const mnSubtitle = document.getElementById('mn-subtitle');
    const mnBody = document.getElementById('mn-body');
    const mnOk = document.getElementById('modal-notify-ok');
    const mnOverlay = document.getElementById('modal-notify-overlay');

    function mostrarNotify(opts){
        // opts: {tipo:'success'|'warning'|'error', titulo, subtitulo, bodyHTML}
        const temas = {
            success: {
                grad: 'bg-gradient-to-r from-emerald-500 to-green-600',
                btn: 'bg-emerald-600 hover:bg-emerald-700',
                icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>'
            },
            warning: {
                grad: 'bg-gradient-to-r from-amber-500 to-orange-500',
                btn: 'bg-amber-600 hover:bg-amber-700',
                icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.072 16.5c-.77.833.192 2.5 1.732 2.5z"/>'
            },
            error: {
                grad: 'bg-gradient-to-r from-red-500 to-rosa',
                btn: 'bg-red-600 hover:bg-red-700',
                icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>'
            }
        };
        const t = temas[opts.tipo] || temas.success;
        mnHeader.className = 'rounded-t-2xl px-6 py-5 text-center ' + t.grad;
        mnIcon.innerHTML = t.icon;
        mnOk.className = 'px-8 py-2.5 font-semibold rounded-xl text-sm text-white transition shadow-sm inline-flex items-center gap-1.5 ' + t.btn;
        mnTitle.textContent = opts.titulo || '';
        mnSubtitle.textContent = opts.subtitulo || '';
        mnBody.innerHTML = opts.bodyHTML || '';
        modalNotify.classList.remove('hidden');
    }

    function cerrarNotify(){ modalNotify.classList.add('hidden'); }
    mnOk.addEventListener('click', cerrarNotify);
    mnOverlay.addEventListener('click', cerrarNotify);

    let diaId = '{{ dia_abierto.id|default:"" }}';
    let catalogos = null;
    let filaNum = {{ facturas_dia|length }};

    // Carregar catálogo de preços
    fetch('{% url "finance:catalogo_precios" %}').then(r=>r.json()).then(d=>{ catalogos=d; });

    // ---- ABRIR DIA ----
    btnAbrir.addEventListener('click', function(){
        const clinicaId = selClinica.value;
        if(!clinicaId){ alert('Selecione uma clínica.'); return; }
        fetch('{% url "finance:abrir_dia" %}', {
            method:'POST',
            headers:{'Content-Type':'application/json','X-CSRFToken':CSRF},
            body: JSON.stringify({clinica_id: clinicaId})
        }).then(r=>r.json()).then(data=>{
            if(data.success){
                diaId = data.dia_id;
                lblClinica.textContent = data.clinica_nombre || selClinica.options[selClinica.selectedIndex].text;
                seccion.classList.remove('hidden');
                document.getElementById('badge-estado').textContent = 'Estado: Aberto';
                document.getElementById('badge-estado').className = 'px-3 py-1 bg-green-50 text-green-600 rounded-lg text-xs font-semibold';
                btnCerrar.disabled = false; btnCerrar.classList.remove('opacity-50','cursor-not-allowed');
                btnFactura.disabled = false; btnFactura.classList.remove('opacity-50','cursor-not-allowed');
                selClinica.disabled = true;

                // Si fue reabierto, cargar facturas e ingresos extra previos
                if(data.reabierto && data.facturas){
                    tbody.innerHTML = '';
                    filaNum = 0;
                    data.facturas.forEach(function(fd){
                        filaNum++;
                        const tr = document.createElement('tr');
                        tr.className = 'fila-detalle hover:bg-gray-50/50 transition text-xs';
                        tr.dataset.facturaId = fd.id;
                        tr.innerHTML =
                            '<td class="px-2 py-2 text-center text-gray-500">' + filaNum + '</td>' +
                            '<td class="px-2 py-2 text-gray-700">' + esc(fd.numero_factura) + '</td>' +
                            '<td class="px-2 py-2 text-gray-700">' + esc(fd.paciente_nombre) + '</td>' +
                            '<td class="px-2 py-2 text-gray-600">' + esc(fd.tipo_cliente) + '</td>' +
                            '<td class="px-2 py-2 text-center border-l border-gray-200 serv-precio">' + parseFloat(fd.serv_precio).toFixed(2) + '</td>' +
                            '<td class="px-2 py-2 text-center serv-medico">' + parseFloat(fd.serv_medico).toFixed(2) + '</td>' +
                            '<td class="px-2 py-2 text-center border-l border-gray-200 lab-precio">' + parseFloat(fd.lab_precio).toFixed(2) + '</td>' +
                            '<td class="px-2 py-2 text-center lab-medico">' + parseFloat(fd.lab_medico).toFixed(2) + '</td>' +
                            '<td class="px-2 py-2 text-center border-l border-gray-200 img-precio">' + parseFloat(fd.img_precio).toFixed(2) + '</td>' +
                            '<td class="px-2 py-2 text-center img-medico">' + parseFloat(fd.img_medico).toFixed(2) + '</td>' +
                            '<td class="px-2 py-2 text-center border-l border-gray-200 proc-precio">' + parseFloat(fd.proc_precio).toFixed(2) + '</td>' +
                            '<td class="px-2 py-2 text-center proc-medico">' + parseFloat(fd.proc_medico).toFixed(2) + '</td>' +
                            '<td class="px-2 py-2 text-left border-l border-gray-200 obs-text" style="max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis" title="' + esc(fd.observaciones) + '">' + esc(fd.observaciones) + '</td>' +
                            '<td class="px-2 py-2 text-center border-l border-gray-200"><button type="button" class="btn-eliminar-factura text-red-400 hover:text-red-600 transition" data-id="' + fd.id + '" title="Eliminar factura"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg></button></td>';
                        tbody.appendChild(tr);
                    });
                    recalcTotales();

                    // Cargar ingresos extra
                    if(data.ingresos_extra && data.ingresos_extra.length){
                        tbodyIE.innerHTML = '';
                        data.ingresos_extra.forEach(function(ie){
                            agregarFilaIngresoExtra(ie.id, ie.monto, ie.motivo);
                        });
                        recalcIngresoExtra();
                    }
                }

                if(data.reabierto){
                    mostrarNotify({
                        tipo: 'warning',
                        titulo: 'Dia Reaberto',
                        subtitulo: data.clinica_nombre,
                        bodyHTML: '<div class="bg-amber-50 border border-amber-200 rounded-xl p-4">' +
                            '<div class="flex items-start gap-3">' +
                                '<svg class="w-6 h-6 text-amber-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>' +
                                '<div>' +
                                    '<p class="font-semibold text-amber-800 text-sm">Os dados anteriores foram carregados</p>' +
                                    '<p class="text-amber-700 text-xs mt-1">Foram restauradas <strong>' + (data.facturas ? data.facturas.length : 0) + '</strong> fatura(s) e <strong>' + (data.ingresos_extra ? data.ingresos_extra.length : 0) + '</strong> receita(s) extra.</p>' +
                                    '<p class="text-amber-600 text-xs mt-2 italic">Esta ação fica registada na auditoria.</p>' +
                                '</div>' +
                            '</div>' +
                        '</div>'
                    });
                }
            } else {
                mostrarNotify({
                    tipo: 'error',
                    titulo: 'Erro ao Abrir Dia',
                    subtitulo: '',
                    bodyHTML: '<p class="text-center text-gray-600">' + esc(data.error || 'Erro ao abrir dia.') + '</p>'
                });
            }
        }).catch(()=>mostrarNotify({
            tipo: 'error',
            titulo: 'Erro de Conexão',
            subtitulo: '',
            bodyHTML: '<p class="text-center text-gray-600">Não foi possível conectar com o servidor. Tente novamente.</p>'
        }));
    });

    // ---- FECHAR DIA (modal estilizado) ----
    btnCerrar.addEventListener('click', function(){
        if(!diaId){ alert('Não há dia aberto.'); return; }

        // Preencher dados do modal
        document.getElementById('cd-clinica-nombre').textContent = lblClinica.textContent;

        // Contar faturas na tabela
        const filasFactura = tbody.querySelectorAll('tr.fila-detalle').length;
        document.getElementById('cd-total-facturas').textContent = filasFactura;

        // Totais atuais
        const totalMedico = document.getElementById('total-porciento-medico').textContent;
        const totalIrt = document.getElementById('total-irt-monto').textContent;
        const totalExtra = document.getElementById('total-ingreso-extra').textContent;
        const totalNetoBase = parseFloat(document.getElementById('total-neto').textContent) || 0;
        const totalExtraVal = parseFloat(totalExtra) || 0;
        const totalNetoFinal = (totalNetoBase + totalExtraVal).toFixed(2);

        document.getElementById('cd-total-medico').textContent = totalMedico + ' Kz';
        document.getElementById('cd-total-irt').textContent = totalIrt + ' Kz';
        document.getElementById('cd-total-extra').textContent = totalExtra + ' Kz';
        document.getElementById('cd-total-neto').textContent = totalNetoFinal + ' Kz';

        // Verificar consultas confirmadas pendentes
        const citasPendientes = Array.from(mCita.options).filter(o => o.value).length;
        const alertaCitas = document.getElementById('cd-alerta-citas');
        if(citasPendientes > 0){
            alertaCitas.classList.remove('hidden');
            document.getElementById('cd-citas-msg').textContent = 'Restam ' + citasPendientes + ' consulta(s) confirmada(s) sem faturar. Verifique que não fique nada de fora.';
        } else {
            alertaCitas.classList.add('hidden');
        }

        modalCD.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    });

    function cerrarModalCD(){
        modalCD.classList.add('hidden');
        document.body.style.overflow = '';
    }
    modalCDCancelar.addEventListener('click', cerrarModalCD);
    modalCDOverlay.addEventListener('click', cerrarModalCD);

    modalCDConfirmar.addEventListener('click', function(){
        modalCDConfirmar.disabled = true;
        modalCDConfirmar.textContent = 'Fechando...';

        fetch('{% url "finance:cerrar_dia" %}', {
            method:'POST',
            headers:{'Content-Type':'application/json','X-CSRFToken':CSRF},
            body: JSON.stringify({dia_id: diaId})
        }).then(r=>r.json()).then(data=>{
            modalCDConfirmar.disabled = false;
            modalCDConfirmar.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Confirmar Fecho';

            if(data.success){
                cerrarModalCD();
                document.getElementById('badge-estado').textContent = 'Estado: Fechado';
                document.getElementById('badge-estado').className = 'px-3 py-1 bg-gray-100 text-gray-500 rounded-lg text-xs font-semibold';
                btnCerrar.disabled = true; btnCerrar.classList.add('opacity-50','cursor-not-allowed');
                btnFactura.disabled = true; btnFactura.classList.add('opacity-50','cursor-not-allowed');
                selClinica.disabled = false;
                diaId = '';

                // Limpar tabela de faturação
                tbody.innerHTML = '';
                filaNum = 0;
                recalcTotales();

                // Limpar receitas extra
                tbodyIE.innerHTML = '<tr class="ingreso-extra-empty"><td colspan="3" class="px-4 py-3 text-center text-gray-400">Sem receitas extra.</td></tr>';
                document.getElementById('total-ingreso-extra').textContent = '0.00';

                // Limpar tabela de Faturas Dia Clínica
                const tbodyFD = document.getElementById('tbody-facturas-dia');
                tbodyFD.innerHTML = '<tr><td colspan="8" class="px-6 py-8 text-center text-gray-400"><svg class="w-10 h-10 mx-auto text-gray-200 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>Dia fechado. Não há faturas pendentes.</td></tr>';

                mostrarNotify({
                    tipo: 'success',
                    titulo: 'Dia Fechado com Sucesso',
                    subtitulo: lblClinica.textContent,
                    bodyHTML: '<div class="bg-gray-50 rounded-xl p-4 space-y-2">' +
                        '<p class="text-xs text-gray-500 uppercase tracking-wider font-semibold mb-3">Resumo Final</p>' +
                        '<div class="flex justify-between text-sm"><span class="text-gray-500">Total Faturas:</span><span class="font-semibold text-gray-800">' + data.total_facturas + '</span></div>' +
                        '<div class="flex justify-between text-sm"><span class="text-gray-500">P. Venda Total:</span><span class="font-semibold text-gray-800">' + data.total_precio_venta + ' Kz</span></div>' +
                        '<div class="flex justify-between text-sm"><span class="text-gray-500">% Médico Total:</span><span class="font-semibold text-rosa">' + data.total_porciento_medico + ' Kz</span></div>' +
                        '<div class="flex justify-between text-sm"><span class="text-gray-500">IRT:</span><span class="font-semibold text-amber-600">' + data.total_irt_monto + ' Kz</span></div>' +
                        '<div class="flex justify-between text-sm"><span class="text-gray-500">Receita Extra:</span><span class="font-semibold text-emerald-600">' + data.total_ingreso_extra + ' Kz</span></div>' +
                        '<hr class="border-gray-200">' +
                        '<div class="flex justify-between text-sm"><span class="text-gray-600 font-semibold">Receita Líquida Total:</span><span class="font-bold text-green-600 text-base">' + data.total_ingreso_neto + ' Kz</span></div>' +
                    '</div>'
                });
            } else {
                mostrarNotify({
                    tipo: 'error',
                    titulo: 'Erro ao Fechar',
                    subtitulo: '',
                    bodyHTML: '<p class="text-center text-gray-600">' + esc(data.error || 'Erro ao fechar dia.') + '</p>'
                });
            }
        }).catch(()=>{
            modalCDConfirmar.disabled = false;
            modalCDConfirmar.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Confirmar Fecho';
            mostrarNotify({
                tipo: 'error',
                titulo: 'Erro de Conexão',
                subtitulo: '',
                bodyHTML: '<p class="text-center text-gray-600">Não foi possível conectar com o servidor. Tente novamente.</p>'
            });
        });
    });

    // ============================================================
    // RECEITA EXTRA — Modal + CRUD
    // ============================================================
    btnIngresoExtra.addEventListener('click', function(){
        if(!diaId){ alert('Primeiro abra o dia.'); return; }
        ieMonto.value = '';
        ieMotivo.value = '';
        modalIE.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
        ieMonto.focus();
    });

    function cerrarModalIE(){
        modalIE.classList.add('hidden');
        document.body.style.overflow = '';
    }
    modalIECerrar.addEventListener('click', cerrarModalIE);
    modalIECancelar.addEventListener('click', cerrarModalIE);
    modalIEOverlay.addEventListener('click', cerrarModalIE);

    modalIEGuardar.addEventListener('click', function(){
        const monto = parseFloat(ieMonto.value);
        const motivo = ieMotivo.value.trim();
        if(!monto || monto <= 0){ alert('Insira um valor válido.'); return; }
        if(!motivo){ alert('Insira o motivo da receita.'); return; }

        modalIEGuardar.disabled = true;
        modalIEGuardar.textContent = 'Guardando...';

        fetch('{% url "finance:crear_ingreso_extra" %}', {
            method:'POST',
            headers:{'Content-Type':'application/json','X-CSRFToken':CSRF},
            body: JSON.stringify({dia_id: diaId, monto: monto.toFixed(2), motivo: motivo})
        }).then(r=>r.json()).then(resp=>{
            modalIEGuardar.disabled = false;
            modalIEGuardar.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Guardar';
            if(resp.success){
                agregarFilaIngresoExtra(resp.ingreso.id, resp.ingreso.monto, resp.ingreso.motivo);
                recalcIngresoExtra();

                // Actualizar todos os KPIs (ingreso extra não tem IRT)
                actualizarKPI(resp.ingreso.monto, 0, true);

                cerrarModalIE();
            } else { alert(resp.error || 'Erro ao guardar.'); }
        }).catch(()=>{
            modalIEGuardar.disabled = false;
            modalIEGuardar.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Guardar';
            alert('Erro de conexão.');
        });
    });

    function agregarFilaIngresoExtra(id, monto, motivo){
        // Quitar fila vacía
        const empty = tbodyIE.querySelector('.ingreso-extra-empty');
        if(empty) empty.remove();
        const tr = document.createElement('tr');
        tr.className = 'fila-ingreso-extra hover:bg-emerald-50/30 transition';
        tr.dataset.ingresoId = id;
        tr.innerHTML =
            '<td class="px-4 py-2 text-gray-700 ie-motivo">' + esc(motivo) + '</td>' +
            '<td class="px-4 py-2 text-right font-semibold text-emerald-600 ie-monto">' + parseFloat(monto).toFixed(2) + '</td>' +
            '<td class="px-4 py-2 text-center"><button type="button" class="btn-eliminar-ingreso text-red-400 hover:text-red-600 transition" data-id="' + id + '" title="Eliminar receita extra"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg></button></td>';
        tbodyIE.appendChild(tr);
    }

    function recalcIngresoExtra(){
        let total = 0;
        tbodyIE.querySelectorAll('.fila-ingreso-extra').forEach(tr=>{
            total += parseFloat(tr.querySelector('.ie-monto').textContent) || 0;
        });
        document.getElementById('total-ingreso-extra').textContent = total.toFixed(2);
    }

    // Eliminar receita extra (delegação de eventos)
    tbodyIE.addEventListener('click', function(e){
        const btn = e.target.closest('.btn-eliminar-ingreso');
        if(!btn) return;
        const ingresoId = btn.dataset.id;
        if(!ingresoId) return;
        if(!confirm('Eliminar esta receita extra?')) return;

        fetch('{% url "finance:eliminar_ingreso_extra" %}', {
            method:'POST',
            headers:{'Content-Type':'application/json','X-CSRFToken':CSRF},
            body: JSON.stringify({ingreso_id: ingresoId})
        }).then(r=>r.json()).then(resp=>{
            if(resp.success){
                const tr = btn.closest('tr');
                if(tr) tr.remove();
                recalcIngresoExtra();

                // Actualizar todos os KPIs (subtrair ingreso extra, sem IRT)
                actualizarKPI(resp.monto, 0, false);

                // Se não restam filas, mostrar vazio
                if(!tbodyIE.querySelector('.fila-ingreso-extra')){
                    tbodyIE.innerHTML = '<tr class="ingreso-extra-empty"><td colspan="3" class="px-4 py-3 text-center text-gray-400">Sem receitas extra.</td></tr>';
                }
            } else { alert(resp.error || 'Erro ao eliminar.'); }
        }).catch(()=>alert('Erro de conexão.'));
    });

    // ============================================================
    // MODAL — Criar Fatura
    // ============================================================
    function abrirModal(){
        mCita.value = '';
        mFactura.value = '';
        mPaciente.value = '';
        mPacienteId.value = '';
        mTipoCliente.value = '';
        mServicio.value = '';
        document.getElementById('m-serv-precio').textContent = '0.00';
        document.getElementById('m-serv-porciento').textContent = '0.00';
        document.getElementById('m-serv-nuevo').value = '';
        mObservaciones.value = '';
        // Reset filas dinámicas: dejar solo la primera fila en cada categoría
        ['lab','img','proc'].forEach(cat=>{
            const container = document.getElementById('cat-'+cat+'-rows');
            const rows = container.querySelectorAll('.cat-row');
            rows.forEach((r,i)=>{ if(i>0) r.remove(); });
            const first = container.querySelector('.cat-row');
            if(first){
                first.querySelector('.cat-select').value = '';
                first.querySelector('.cat-precio').textContent = '0.00';
                first.querySelector('.cat-nuevo').value = '';
                first.querySelector('.cat-porciento').textContent = '0.00';
            }
        });
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
        modal.querySelector('.overflow-y-auto').scrollTop = 0;
    }

    function cerrarModal(){
        modal.classList.add('hidden');
        document.body.style.overflow = '';
    }

    btnFactura.addEventListener('click', function(){
        if(!diaId){ alert('Primeiro abra o dia.'); return; }
        abrirModal();
    });

    modalCerrar.addEventListener('click', cerrarModal);
    modalCancelar.addEventListener('click', cerrarModal);
    modalOverlay.addEventListener('click', cerrarModal);

    document.addEventListener('keydown', function(e){
        if(e.key === 'Escape'){
            if(!modal.classList.contains('hidden')) cerrarModal();
            if(!modalIE.classList.contains('hidden')) cerrarModalIE();
            if(!modalCD.classList.contains('hidden')) cerrarModalCD();
            if(!modalNotify.classList.contains('hidden')) cerrarNotify();
        }
    });

    // Al seleccionar consulta → auto-preencher paciente + serviço médico desde especialidade
    mCita.addEventListener('change', function(){
        const opt = this.options[this.selectedIndex];
        if(this.value){
            mPaciente.value = opt.dataset.paciente || '';
            mPacienteId.value = opt.dataset.pacienteId || '';
            // Si la consulta trae especialidade, buscar en el select de serviço médico
            const especialidad = (opt.dataset.especialidad || '').trim();
            if(especialidad){
                const opciones = mServicio.options;
                let found = false;
                for(let i = 0; i < opciones.length; i++){
                    if(opciones[i].text.trim().toLowerCase() === especialidad.toLowerCase()){
                        mServicio.value = opciones[i].value;
                        mServicio.dispatchEvent(new Event('change'));
                        found = true;
                        break;
                    }
                }
                if(!found){ mServicio.value = ''; mServicio.dispatchEvent(new Event('change')); }
            }
        } else {
            mPaciente.value = '';
            mPacienteId.value = '';
        }
    });

    mPaciente.addEventListener('input', function(){ mPacienteId.value = ''; });

    // ============================================================
    // Auto-preencher preços — Serviço Médico
    // ============================================================
    mServicio.addEventListener('change', function(){
        const pEl = document.getElementById('m-serv-precio');
        const pcEl = document.getElementById('m-serv-porciento');
        if(this.value && catalogos && catalogos.servicios_medicos && catalogos.servicios_medicos[this.value]){
            const info = catalogos.servicios_medicos[this.value];
            pEl.textContent = parseFloat(info.precio).toFixed(2);
            pcEl.textContent = parseFloat(info.porciento).toFixed(2);
        } else {
            pEl.textContent = '0.00';
            pcEl.textContent = '0.00';
        }
    });

    // ============================================================
    // Auto-preencher preços — Filas dinâmicas (Lab/Img/Proc)
    // ============================================================
    function bindCatSelectChange(selEl){
        selEl.addEventListener('change', function(){
            const row = this.closest('.cat-row');
            const catKey = this.dataset.catkey;
            const pEl = row.querySelector('.cat-precio');
            const pcEl = row.querySelector('.cat-porciento');
            if(this.value && catalogos && catalogos[catKey] && catalogos[catKey][this.value]){
                const info = catalogos[catKey][this.value];
                pEl.textContent = parseFloat(info.precio).toFixed(2);
                if(info.porciento) pcEl.textContent = parseFloat(info.porciento).toFixed(2);
            } else {
                pEl.textContent = '0.00';
                pcEl.textContent = '0.00';
            }
        });
    }
    // Bind initial rows
    document.querySelectorAll('.cat-select').forEach(s=> bindCatSelectChange(s));

    // ============================================================
    // Botões "+" — Adicionar fila dinâmica
    // ============================================================
    document.querySelectorAll('.btn-add-row').forEach(btn=>{
        btn.addEventListener('click', function(){
            const cat = this.dataset.cat;
            const container = document.getElementById('cat-'+cat+'-rows');
            const firstRow = container.querySelector('.cat-row');
            const newRow = firstRow.cloneNode(true);
            // Reset values
            const sel = newRow.querySelector('.cat-select');
            sel.value = '';
            newRow.querySelector('.cat-precio').textContent = '0.00';
            newRow.querySelector('.cat-nuevo').value = '';
            newRow.querySelector('.cat-porciento').textContent = '0.00';
            // Add remove button
            const removeDiv = document.createElement('div');
            removeDiv.className = 'col-span-12 flex justify-end -mt-1';
            removeDiv.innerHTML = '<button type="button" class="btn-remove-row text-xs text-red-400 hover:text-red-600 font-medium transition inline-flex items-center gap-0.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>Remover</button>';
            removeDiv.querySelector('.btn-remove-row').addEventListener('click', function(){ newRow.remove(); });
            newRow.appendChild(removeDiv);
            // Bind change event
            bindCatSelectChange(sel);
            container.appendChild(newRow);
        });
    });

    // ============================================================
    // Recopilar dados de uma categoria (múltiplas filas)
    // ============================================================
    function collectCatData(cat){
        const container = document.getElementById('cat-'+cat+'-rows');
        let totalPrecio = 0, totalMedico = 0;
        container.querySelectorAll('.cat-row').forEach(row=>{
            const sel = row.querySelector('.cat-select');
            if(!sel.value) return;
            const nuevo = row.querySelector('.cat-nuevo').value.trim();
            const catPrecio = parseFloat(nuevo || row.querySelector('.cat-precio').textContent) || 0;
            const catPorc = parseFloat(row.querySelector('.cat-porciento').textContent) || 0;
            totalPrecio += catPrecio;
            totalMedico += catPrecio * catPorc / 100;
        });
        return { precio: totalPrecio, medico: totalMedico };
    }

    // ---- ADICIONAR À TABELA (guarda na BD) ----
    modalAgregar.addEventListener('click', function(){
        const paciente = mPaciente.value.trim();
        if(!paciente){ alert('Insira o nome do paciente.'); return; }
        if(!diaId){ alert('Primeiro abra o dia.'); return; }

        filaNum++;

        // Serviço Médico
        const servNuevo = document.getElementById('m-serv-nuevo').value.trim();
        const servPrecioVal = parseFloat(servNuevo || document.getElementById('m-serv-precio').textContent) || 0;
        const servPorcVal = parseFloat(document.getElementById('m-serv-porciento').textContent) || 0;
        const servMedico = servPrecioVal * servPorcVal / 100;
        const servNombre = mServicio.value ? mServicio.options[mServicio.selectedIndex].text : '';

        // Serviços Clínicos (soma de filas)
        const labData = collectCatData('lab');
        const imgData = collectCatData('img');
        const procData = collectCatData('proc');

        const observaciones = mObservaciones.value.trim();
        const tipoText = mTipoCliente.value ? mTipoCliente.options[mTipoCliente.selectedIndex].text : '';

        // Construir lista de detalhes para a API
        const detalles = [];
        // Serviço médico
        if(mServicio.value && servPrecioVal > 0){
            detalles.push({
                tipo: 'servicio_medico',
                nombre_item: servNombre,
                precio_venta: servPrecioVal.toFixed(2),
                porciento_medico: servPorcVal.toFixed(2),
            });
        }
        // Laboratórios
        collectCatDetails('lab', 'laboratorio', detalles);
        // Imagens
        collectCatDetails('img', 'imagen', detalles);
        // Procedimentos
        collectCatDetails('proc', 'proceder', detalles);

        // Desabilitar botão enquanto se guarda
        modalAgregar.disabled = true;
        modalAgregar.textContent = 'Guardando...';

        fetch('{% url "finance:crear_factura_dia" %}', {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-CSRFToken': CSRF},
            body: JSON.stringify({
                dia_id: diaId,
                numero_factura: mFactura.value.trim(),
                paciente_nombre: paciente,
                tipo_cliente_id: mTipoCliente.value || null,
                observaciones: observaciones,
                detalles: detalles,
                cita_id: mCita.value || null,
            })
        }).then(r => r.json()).then(resp => {
            modalAgregar.disabled = false;
            modalAgregar.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> Adicionar à Tabela';
            if(!resp.success){
                alert(resp.error || 'Erro ao guardar fatura.');
                filaNum--;
                return;
            }

            // Adicionar fila à tabela de faturação
            const tr = document.createElement('tr');
            tr.className = 'fila-detalle hover:bg-gray-50/50 transition text-xs';
            tr.dataset.facturaId = resp.factura.id;
            tr.dataset.factura = resp.factura.numero_factura;
            tr.dataset.pacienteNombre = paciente;
            tr.dataset.pacienteId = mPacienteId.value;
            tr.dataset.tipoClienteId = mTipoCliente.value;
            tr.dataset.servicioId = mServicio.value;
            tr.dataset.servPrecio = servPrecioVal.toFixed(2);
            tr.dataset.servPorciento = servPorcVal.toFixed(2);
            tr.dataset.labPrecio = labData.precio.toFixed(2);
            tr.dataset.labPorciento = labData.medico > 0 ? '50' : '0';
            tr.dataset.imgPrecio = imgData.precio.toFixed(2);
            tr.dataset.imgPorciento = imgData.medico > 0 ? '50' : '0';
            tr.dataset.procPrecio = procData.precio.toFixed(2);
            tr.dataset.procPorciento = procData.medico > 0 ? '50' : '0';
            tr.dataset.observaciones = observaciones;

            tr.innerHTML =
                '<td class="px-2 py-2 text-center text-gray-500">' + filaNum + '</td>' +
                '<td class="px-2 py-2 text-gray-700">' + esc(mFactura.value) + '</td>' +
                '<td class="px-2 py-2 text-gray-700">' + esc(paciente) + '</td>' +
                '<td class="px-2 py-2 text-gray-600">' + esc(tipoText) + '</td>' +
                '<td class="px-2 py-2 text-center border-l border-gray-200 serv-precio">' + servPrecioVal.toFixed(2) + '</td>' +
                '<td class="px-2 py-2 text-center serv-medico">' + servMedico.toFixed(2) + '</td>' +
                '<td class="px-2 py-2 text-center border-l border-gray-200 lab-precio">' + labData.precio.toFixed(2) + '</td>' +
                '<td class="px-2 py-2 text-center lab-medico">' + labData.medico.toFixed(2) + '</td>' +
                '<td class="px-2 py-2 text-center border-l border-gray-200 img-precio">' + imgData.precio.toFixed(2) + '</td>' +
                '<td class="px-2 py-2 text-center img-medico">' + imgData.medico.toFixed(2) + '</td>' +
                '<td class="px-2 py-2 text-center border-l border-gray-200 proc-precio">' + procData.precio.toFixed(2) + '</td>' +
                '<td class="px-2 py-2 text-center proc-medico">' + procData.medico.toFixed(2) + '</td>' +
                '<td class="px-2 py-2 text-left border-l border-gray-200 obs-text" style="max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis" title="' + esc(observaciones) + '">' + esc(observaciones) + '</td>' +
                '<td class="px-2 py-2 text-center border-l border-gray-200"><button type="button" class="btn-eliminar-factura text-red-400 hover:text-red-600 transition" data-id="' + resp.factura.id + '" title="Eliminar factura"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg></button></td>';

            tbody.appendChild(tr);
            recalcTotales();

            // Adicionar fila à tabela de Faturas Dia Clínica
            const fd = resp.factura;
            const irtMonto = parseFloat(fd.irt_monto || 0).toFixed(2);
            const ingresoNeto = parseFloat(fd.ingreso_neto || 0).toFixed(2);
            const tbodyFD = document.getElementById('tbody-facturas-dia');
            // Quitar fila vazia se existe
            const emptyRow = tbodyFD.querySelector('tr td[colspan]');
            if(emptyRow) emptyRow.closest('tr').remove();

            const trFD = document.createElement('tr');
            trFD.className = 'hover:bg-gray-50/50 transition';
            trFD.dataset.facturaId = fd.id;
            trFD.innerHTML =
                '<td class="px-6 py-3 font-medium text-dark">' + esc(fd.numero_factura || 'S/N') + '</td>' +
                '<td class="px-6 py-3 text-gray-600">' + esc(fd.paciente_nombre) + '</td>' +
                '<td class="px-6 py-3 text-gray-600">' + esc(fd.tipo_cliente || '—') + '</td>' +
                '<td class="px-6 py-3 text-right text-dark font-medium">' + parseFloat(fd.precio_venta_total).toFixed(2) + ' Kz</td>' +
                '<td class="px-6 py-3 text-right text-rosa font-semibold">' + parseFloat(fd.porciento_medico_total).toFixed(2) + ' Kz</td>' +
                '<td class="px-6 py-3 text-right text-amber-600 font-medium">' + irtMonto + ' Kz</td>' +
                '<td class="px-6 py-3 text-right text-green-600 font-semibold">' + ingresoNeto + ' Kz</td>' +
                '<td class="px-6 py-3 text-center"><span class="px-2.5 py-1 bg-amber-50 text-amber-600 rounded-lg text-xs font-semibold">' + esc(fd.estado) + '</span></td>';
            tbodyFD.appendChild(trFD);

            // ---- Atualizar todos os KPIs ----
            actualizarKPI(fd.ingreso_neto || 0, fd.irt_monto || 0, true);

            // ---- Atualizar Detalhe por Serviço e Especialidades ----
            const clinicaNombre = fd.clinica || '';
            if(fd.detalles && fd.detalles.length){
                fd.detalles.forEach(function(det){
                    actualizarDesgloseServicio(det.tipo_display, det.ingreso_neto, clinicaNombre);
                    if(det.tipo === 'servicio_medico'){
                        actualizarDesgloseEspecialidad(det.nombre_item, det.ingreso_neto, clinicaNombre);
                    }
                });
            }

            // Se se completou uma consulta, retirá-la do select
            if(resp.cita_completada){
                const opt = mCita.querySelector('option[value="' + resp.cita_completada + '"]');
                if(opt) opt.remove();
                mCita.value = '';
            }

            cerrarModal();
        }).catch(err => {
            modalAgregar.disabled = false;
            modalAgregar.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> Adicionar à Tabela';
            filaNum--;
            alert('Erro de conexão ao guardar fatura.');
        });
    });

    // Recopilar detalhes individuais de uma categoria para enviar à API
    function collectCatDetails(cat, tipo, detalles){
        const container = document.getElementById('cat-'+cat+'-rows');
        container.querySelectorAll('.cat-row').forEach(row=>{
            const sel = row.querySelector('.cat-select');
            if(!sel.value) return;
            const nuevo = row.querySelector('.cat-nuevo').value.trim();
            const catPrecio = parseFloat(nuevo || row.querySelector('.cat-precio').textContent) || 0;
            const catPorc = parseFloat(row.querySelector('.cat-porciento').textContent) || 0;
            if(catPrecio > 0){
                detalles.push({
                    tipo: tipo,
                    nombre_item: sel.options[sel.selectedIndex].text,
                    precio_venta: catPrecio.toFixed(2),
                    porciento_medico: catPorc.toFixed(2),
                });
            }
        });
    }

    // ---- RECALCULAR SUBTOTAIS / TOTAIS ----
    function recalcTotales(){
        let sServP=0, sServM=0, sLabP=0, sLabM=0, sImgP=0, sImgM=0, sProcP=0, sProcM=0;
        tbody.querySelectorAll('tr.fila-detalle').forEach(tr=>{
            sServP += parseFloat(tr.querySelector('.serv-precio')?.textContent||0);
            sServM += parseFloat(tr.querySelector('.serv-medico')?.textContent||0);
            sLabP += parseFloat(tr.querySelector('.lab-precio')?.textContent||0);
            sLabM += parseFloat(tr.querySelector('.lab-medico')?.textContent||0);
            sImgP += parseFloat(tr.querySelector('.img-precio')?.textContent||0);
            sImgM += parseFloat(tr.querySelector('.img-medico')?.textContent||0);
            sProcP += parseFloat(tr.querySelector('.proc-precio')?.textContent||0);
            sProcM += parseFloat(tr.querySelector('.proc-medico')?.textContent||0);
        });
        document.getElementById('sub-serv-precio').textContent = sServP.toFixed(2);
        document.getElementById('sub-serv-porciento').textContent = sServM.toFixed(2);
        document.getElementById('sub-lab-precio').textContent = sLabP.toFixed(2);
        document.getElementById('sub-lab-porciento').textContent = sLabM.toFixed(2);
        document.getElementById('sub-img-precio').textContent = sImgP.toFixed(2);
        document.getElementById('sub-img-porciento').textContent = sImgM.toFixed(2);
        document.getElementById('sub-proc-precio').textContent = sProcP.toFixed(2);
        document.getElementById('sub-proc-porciento').textContent = sProcM.toFixed(2);
        const totalMedico = sServM + sLabM + sImgM + sProcM;
        document.getElementById('total-porciento-medico').textContent = totalMedico.toFixed(2);
        // IRT total = sum irt_monto de facturas en tabla Facturas Día Clínica
        let totalIrt = 0;
        const tbodyFD = document.getElementById('tbody-facturas-dia');
        if(tbodyFD){
            tbodyFD.querySelectorAll('tr[data-factura-id]').forEach(tr=>{
                const celdas = tr.querySelectorAll('td');
                // La columna 6 (index 5) es IRT Monto
                if(celdas.length > 5) totalIrt += parseFloat(celdas[5].textContent) || 0;
            });
        }
        document.getElementById('total-irt-monto').textContent = totalIrt.toFixed(2);
        document.getElementById('total-neto').textContent = (totalMedico - totalIrt).toFixed(2);
    }

    function esc(s){ const d=document.createElement('div'); d.textContent=s||''; return d.innerHTML; }

    // ---- Atualizar tabela Detalhe por Serviço incrementalmente ----
    function actualizarDesgloseServicio(tipoDisplay, ingresoNetoStr, clinica){
        const tbody = document.getElementById('tbody-desglose-servicios');
        if(!tbody) return;
        const neto = parseFloat(ingresoNetoStr) || 0;
        const cl = clinica || '—';
        // Buscar fila existente por tipo + clínica
        let fila = null;
        tbody.querySelectorAll('tr[data-tipo]').forEach(tr => {
            if(tr.dataset.tipo === tipoDisplay && tr.dataset.clinica === cl) fila = tr;
        });
        if(fila){
            const cantEl = fila.querySelector('.ds-cantidad');
            const netoEl = fila.querySelector('.ds-neto');
            cantEl.textContent = parseInt(cantEl.textContent) + 1;
            const prevNeto = parseFloat(netoEl.textContent) || 0;
            netoEl.textContent = (prevNeto + neto).toFixed(2) + ' Kz';
        } else {
            const empty = tbody.querySelector('.desglose-empty');
            if(empty) empty.remove();
            const tr = document.createElement('tr');
            tr.className = 'hover:bg-gray-50/50 transition';
            tr.dataset.tipo = tipoDisplay;
            tr.dataset.clinica = cl;
            tr.innerHTML =
                '<td class="px-6 py-3 font-medium text-dark ds-tipo">' + esc(tipoDisplay) + '</td>' +
                '<td class="px-6 py-3 text-center text-gray-500 ds-cantidad">1</td>' +
                '<td class="px-6 py-3 text-gray-600 ds-clinica">' + esc(cl) + '</td>' +
                '<td class="px-6 py-3 text-right font-semibold text-green-600 ds-neto">' + neto.toFixed(2) + ' Kz</td>';
            tbody.appendChild(tr);
        }
    }

    // ---- Atualizar tabela Detalhe por Especialidades incrementalmente ----
    function actualizarDesgloseEspecialidad(nombre, ingresoNetoStr, clinica){
        const tbody = document.getElementById('tbody-desglose-especialidades');
        if(!tbody) return;
        const neto = parseFloat(ingresoNetoStr) || 0;
        const cl = clinica || '—';
        let fila = null;
        tbody.querySelectorAll('tr[data-nombre]').forEach(tr => {
            if(tr.dataset.nombre === nombre && tr.dataset.clinica === cl) fila = tr;
        });
        if(fila){
            const cantEl = fila.querySelector('.de-cantidad');
            const netoEl = fila.querySelector('.de-neto');
            cantEl.textContent = parseInt(cantEl.textContent) + 1;
            const prevNeto = parseFloat(netoEl.textContent) || 0;
            netoEl.textContent = (prevNeto + neto).toFixed(2) + ' Kz';
        } else {
            const empty = tbody.querySelector('.desglose-empty');
            if(empty) empty.remove();
            const tr = document.createElement('tr');
            tr.className = 'hover:bg-gray-50/50 transition';
            tr.dataset.nombre = nombre;
            tr.dataset.clinica = cl;
            tr.innerHTML =
                '<td class="px-6 py-3 font-medium text-dark de-nombre">' + esc(nombre) + '</td>' +
                '<td class="px-6 py-3 text-center text-gray-500 de-cantidad">1</td>' +
                '<td class="px-6 py-3 text-gray-600 de-clinica">' + esc(cl) + '</td>' +
                '<td class="px-6 py-3 text-right font-semibold text-rosa de-neto">' + neto.toFixed(2) + ' Kz</td>';
            tbody.appendChild(tr);
        }
    }

    // ---- Subtrair da tabela Detalhe por Serviço ao eliminar ----
    function restarDesgloseServicio(tipoDisplay, ingresoNetoStr, clinica){
        const tbody = document.getElementById('tbody-desglose-servicios');
        if(!tbody) return;
        const neto = parseFloat(ingresoNetoStr) || 0;
        const cl = clinica || '—';
        let fila = null;
        tbody.querySelectorAll('tr[data-tipo]').forEach(tr => {
            if(tr.dataset.tipo === tipoDisplay && tr.dataset.clinica === cl) fila = tr;
        });
        if(!fila) return;
        const cantEl = fila.querySelector('.ds-cantidad');
        const netoEl = fila.querySelector('.ds-neto');
        const nuevaCant = parseInt(cantEl.textContent) - 1;
        if(nuevaCant <= 0){
            fila.remove();
            if(!tbody.querySelector('tr:not(.desglose-empty)')){
                const empty = document.createElement('tr');
                empty.className = 'desglose-empty';
                empty.innerHTML = '<td colspan="4" class="px-6 py-8 text-center text-gray-400">Sem dados para hoje.</td>';
                tbody.appendChild(empty);
            }
        } else {
            cantEl.textContent = nuevaCant;
            const prevNeto = parseFloat(netoEl.textContent) || 0;
            netoEl.textContent = Math.max(0, prevNeto - neto).toFixed(2) + ' Kz';
        }
    }

    // ---- Subtrair da tabela Detalhe por Especialidades ao eliminar ----
    function restarDesgloseEspecialidad(nombre, ingresoNetoStr, clinica){
        const tbody = document.getElementById('tbody-desglose-especialidades');
        if(!tbody) return;
        const neto = parseFloat(ingresoNetoStr) || 0;
        const cl = clinica || '—';
        let fila = null;
        tbody.querySelectorAll('tr[data-nombre]').forEach(tr => {
            if(tr.dataset.nombre === nombre && tr.dataset.clinica === cl) fila = tr;
        });
        if(!fila) return;
        const cantEl = fila.querySelector('.de-cantidad');
        const netoEl = fila.querySelector('.de-neto');
        const nuevaCant = parseInt(cantEl.textContent) - 1;
        if(nuevaCant <= 0){
            fila.remove();
            if(!tbody.querySelector('tr:not(.desglose-empty)')){
                const empty = document.createElement('tr');
                empty.className = 'desglose-empty';
                empty.innerHTML = '<td colspan="4" class="px-6 py-8 text-center text-gray-400">Sem especialidades registadas.</td>';
                tbody.appendChild(empty);
            }
        } else {
            cantEl.textContent = nuevaCant;
            const prevNeto = parseFloat(netoEl.textContent) || 0;
            netoEl.textContent = Math.max(0, prevNeto - neto).toFixed(2) + ' Kz';
        }
    }

    // ============================================================
    // ELIMINAR FATURA (só sem_confirmar)
    // ============================================================
    tbody.addEventListener('click', function(e){
        const btn = e.target.closest('.btn-eliminar-factura');
        if(!btn) return;
        const facturaId = btn.dataset.id;
        if(!facturaId) return;
        if(!confirm('Eliminar esta fatura e seus detalhes?')) return;

        fetch('{% url "finance:eliminar_factura_dia" %}', {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-CSRFToken': CSRF},
            body: JSON.stringify({factura_id: facturaId})
        }).then(r => r.json()).then(resp => {
            if(!resp.success){
                alert(resp.error || 'Erro ao eliminar.');
                return;
            }
            // Eliminar fila da tabela de faturação
            const tr = btn.closest('tr');
            if(tr) tr.remove();
            recalcTotales();

            // Eliminar fila de Faturas Dia Clínica
            const tbodyFD = document.getElementById('tbody-facturas-dia');
            const trFD = tbodyFD.querySelector('tr[data-factura-id="' + facturaId + '"]');
            if(trFD) trFD.remove();

            // Atualizar todos os KPIs (subtrair)
            if(resp.ingreso_neto){
                actualizarKPI(resp.ingreso_neto, resp.irt_monto || 0, false);
            }

            // Atualizar detalhes (subtrair)
            if(resp.detalles && resp.detalles.length){
                const cl = resp.clinica || '—';
                resp.detalles.forEach(function(det){
                    restarDesgloseServicio(det.tipo_display, det.ingreso_neto, cl);
                    if(det.tipo === 'servicio_medico'){
                        restarDesgloseEspecialidad(det.nombre_item, det.ingreso_neto, cl);
                    }
                });
            }

            // Se a consulta foi revertida a confirmada, readicioná-la ao select
            if(resp.cita_revertida){
                const c = resp.cita_revertida;
                const opt = document.createElement('option');
                opt.value = c.id;
                opt.dataset.paciente = c.paciente;
                opt.dataset.pacienteId = '';
                opt.dataset.especialidad = '';
                opt.textContent = c.hora + ' — ' + c.paciente + (c.servicio ? ' (' + c.servicio + ')' : '');
                mCita.appendChild(opt);
            }

            // Se não restam filas, mostrar mensagem vazia
            if(!tbodyFD.querySelector('tr')){
                const emptyTr = document.createElement('tr');
                emptyTr.innerHTML = '<td colspan="8" class="px-6 py-8 text-center text-gray-400"><svg class="w-10 h-10 mx-auto text-gray-200 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>Não há faturas para o dia de hoje.</td>';
                tbodyFD.appendChild(emptyTr);
            }
        }).catch(() => alert('Erro de conexão.'));
    });

    // ============================================================
    // MODAL — Movimentos do Dia
    // ============================================================
    const btnMovimentos = document.getElementById('btn-movimentos');
    const modalMov = document.getElementById('modal-movimentos');
    const modalMovOverlay = document.getElementById('mov-overlay');
    const btnMovFechar = document.getElementById('mov-fechar');
    const btnMovPdf = document.getElementById('mov-pdf');
    const movConteudo = document.getElementById('mov-conteudo');
    const movLoading = document.getElementById('mov-loading');

    var movDatosCache = null; // almacena la respuesta para PDF

    function fecharModalMov(){ modalMov.classList.add('hidden'); }
    if(btnMovFechar) btnMovFechar.addEventListener('click', fecharModalMov);
    if(modalMovOverlay) modalMovOverlay.addEventListener('click', fecharModalMov);
    document.addEventListener('keydown', function(e){ if(e.key==='Escape' && !modalMov.classList.contains('hidden')) fecharModalMov(); });

    function fmtKz(v){ return parseFloat(v).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' Kz'; }

    if(btnMovimentos){
        btnMovimentos.addEventListener('click', function(){
            modalMov.classList.remove('hidden');
            movConteudo.innerHTML = '';
            movLoading.classList.remove('hidden');

            fetch('{% url "finance:movimentos_dia" %}')
            .then(r => r.json())
            .then(resp => {
                movLoading.classList.add('hidden');
                if(!resp.success){ movConteudo.innerHTML = '<p class="text-center text-red-500 py-8">Erro ao carregar dados.</p>'; return; }

                movDatosCache = resp;
                document.getElementById('mov-fecha').textContent = resp.fecha;

                if(resp.data.length === 0){
                    movConteudo.innerHTML = '<div class="text-center py-12 text-gray-400"><svg class="w-12 h-12 mx-auto mb-3 text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg><p>Nenhum movimento registado hoje.</p></div>';
                    return;
                }

                let html = '';
                let grandTotalNeto = 0, grandTotalExtras = 0;

                resp.data.forEach(function(clinica){
                    const t = clinica.totais;
                    grandTotalNeto += parseFloat(t.neto);
                    grandTotalExtras += parseFloat(t.extras);

                    html += '<div class="mb-6 last:mb-0">';
                    // Header clínica
                    html += '<div class="flex items-center justify-between bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl px-4 py-3 mb-3">';
                    html += '<div class="flex items-center gap-2"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>';
                    html += '<span class="font-poppins font-bold text-indigo-800">' + clinica.clinica + '</span></div>';
                    html += '<div class="flex items-center gap-3 text-xs">';
                    if(clinica.hora_abertura) html += '<span class="text-gray-500">Abertura: <b>' + clinica.hora_abertura + '</b></span>';
                    if(clinica.hora_fecho) html += '<span class="text-gray-500">Fecho: <b>' + clinica.hora_fecho + '</b></span>';
                    html += '<span class="px-2 py-0.5 rounded-lg text-xs font-semibold ' + (clinica.estado==='Aberto' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600') + '">' + clinica.estado + '</span>';
                    html += '</div></div>';

                    // Faturas
                    if(clinica.facturas.length > 0){
                        html += '<p class="text-xs text-gray-500 uppercase tracking-wider font-semibold mb-2 px-1">Faturas (' + clinica.num_facturas + ')</p>';
                        html += '<div class="overflow-x-auto rounded-xl border border-gray-200 mb-3"><table class="w-full text-xs">';
                        html += '<thead><tr class="bg-gray-50 text-gray-500 uppercase">';
                        html += '<th class="px-3 py-2 text-left font-medium">Fatura</th>';
                        html += '<th class="px-3 py-2 text-left font-medium">Paciente</th>';
                        html += '<th class="px-3 py-2 text-left font-medium">Tipo</th>';
                        html += '<th class="px-3 py-2 text-right font-medium">P. Venda</th>';
                        html += '<th class="px-3 py-2 text-right font-medium">% Médico</th>';
                        html += '<th class="px-3 py-2 text-right font-medium">IRT</th>';
                        html += '<th class="px-3 py-2 text-right font-medium">R. Líquida</th>';
                        html += '<th class="px-3 py-2 text-center font-medium">Estado</th>';
                        html += '</tr></thead><tbody class="divide-y divide-gray-100">';

                        clinica.facturas.forEach(function(f){
                            html += '<tr class="hover:bg-gray-50/50">';
                            html += '<td class="px-3 py-2 font-medium text-dark">' + f.numero + '</td>';
                            html += '<td class="px-3 py-2 text-gray-700">' + f.paciente + '</td>';
                            html += '<td class="px-3 py-2 text-gray-500">' + f.tipo_cliente + '</td>';
                            html += '<td class="px-3 py-2 text-right text-dark">' + fmtKz(f.pventa) + '</td>';
                            html += '<td class="px-3 py-2 text-right text-rosa font-medium">' + fmtKz(f.medico) + '</td>';
                            html += '<td class="px-3 py-2 text-right text-amber-600">' + fmtKz(f.irt) + '</td>';
                            html += '<td class="px-3 py-2 text-right text-green-600 font-semibold">' + fmtKz(f.neto) + '</td>';
                            html += '<td class="px-3 py-2 text-center"><span class="px-2 py-0.5 rounded-lg text-[10px] font-semibold ' + (f.estado==='Confirmada' ? 'bg-green-50 text-green-600' : f.estado==='Anulada' ? 'bg-red-50 text-red-500' : 'bg-amber-50 text-amber-600') + '">' + f.estado + '</span></td>';
                            html += '</tr>';
                        });

                        // Subtotais facturas
                        html += '<tr class="bg-gray-50 font-semibold">';
                        html += '<td colspan="3" class="px-3 py-2 text-right text-gray-500 text-[10px] uppercase">Subtotais</td>';
                        html += '<td class="px-3 py-2 text-right text-dark">' + fmtKz(t.pventa) + '</td>';
                        html += '<td class="px-3 py-2 text-right text-rosa">' + fmtKz(t.medico) + '</td>';
                        html += '<td class="px-3 py-2 text-right text-amber-600">' + fmtKz(t.irt) + '</td>';
                        html += '<td class="px-3 py-2 text-right text-green-600">' + fmtKz(t.neto) + '</td>';
                        html += '<td></td></tr>';
                        html += '</tbody></table></div>';
                    } else {
                        html += '<p class="text-xs text-gray-400 italic mb-3 px-1">Sem faturas registadas.</p>';
                    }

                    // Receitas extra
                    if(clinica.extras.length > 0){
                        html += '<p class="text-xs text-emerald-600 uppercase tracking-wider font-semibold mb-2 px-1">Receitas Extra (' + clinica.num_extras + ')</p>';
                        html += '<div class="overflow-x-auto rounded-xl border border-emerald-200 mb-3"><table class="w-full text-xs">';
                        html += '<thead><tr class="bg-emerald-50 text-emerald-600 uppercase">';
                        html += '<th class="px-3 py-2 text-left font-medium">Motivo</th>';
                        html += '<th class="px-3 py-2 text-right font-medium">Valor</th>';
                        html += '<th class="px-3 py-2 text-left font-medium">Registado por</th>';
                        html += '</tr></thead><tbody class="divide-y divide-gray-100">';

                        clinica.extras.forEach(function(ex){
                            html += '<tr class="hover:bg-gray-50/50">';
                            html += '<td class="px-3 py-2 text-gray-700">' + ex.motivo + '</td>';
                            html += '<td class="px-3 py-2 text-right text-emerald-600 font-semibold">' + fmtKz(ex.monto) + '</td>';
                            html += '<td class="px-3 py-2 text-gray-500">' + ex.registado_por + '</td>';
                            html += '</tr>';
                        });

                        html += '<tr class="bg-emerald-50 font-semibold"><td class="px-3 py-2 text-right text-emerald-700 text-[10px] uppercase">Total Extra</td>';
                        html += '<td class="px-3 py-2 text-right text-emerald-700">' + fmtKz(t.extras) + '</td><td></td></tr>';
                        html += '</tbody></table></div>';
                    }

                    // Resumo da clínica
                    html += '<div class="bg-gradient-to-r from-gray-50 to-indigo-50/30 rounded-xl p-4 grid grid-cols-2 sm:grid-cols-4 gap-3">';
                    html += '<div><p class="text-[10px] text-gray-400 uppercase">Receita Líquida</p><p class="text-sm font-bold text-green-600">' + fmtKz(t.neto) + '</p></div>';
                    html += '<div><p class="text-[10px] text-gray-400 uppercase">Receitas Extra</p><p class="text-sm font-bold text-emerald-600">' + fmtKz(t.extras) + '</p></div>';
                    html += '<div><p class="text-[10px] text-gray-400 uppercase">IRT</p><p class="text-sm font-bold text-amber-600">' + fmtKz(t.irt) + '</p></div>';
                    html += '<div><p class="text-[10px] text-gray-400 uppercase">Total Geral</p><p class="text-sm font-bold text-indigo-700">' + fmtKz(t.geral) + '</p></div>';
                    html += '</div>';

                    html += '</div>';
                });

                // Grand total
                let grandTotal = grandTotalNeto + grandTotalExtras;
                html += '<div class="mt-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-xl p-5 text-white">';
                html += '<div class="flex items-center justify-between">';
                html += '<div class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>';
                html += '<span class="font-poppins font-bold text-lg">Total do Dia</span></div>';
                html += '<span class="font-bold text-2xl">' + fmtKz(grandTotal) + '</span>';
                html += '</div>';
                html += '<div class="flex gap-6 mt-2 text-white/70 text-xs">';
                html += '<span>Receita Líquida: ' + fmtKz(grandTotalNeto) + '</span>';
                html += '<span>Receitas Extra: ' + fmtKz(grandTotalExtras) + '</span>';
                html += '</div></div>';

                movConteudo.innerHTML = html;
            })
            .catch(() => { movLoading.classList.add('hidden'); movConteudo.innerHTML = '<p class="text-center text-red-500 py-8">Erro de conexão.</p>'; });
        });
    }

    // ── Exportar Movimentos a PDF ──
    if(btnMovPdf){
        btnMovPdf.addEventListener('click', function(){
            if(!movDatosCache || !movDatosCache.success){ alert('Sem dados para exportar.'); return; }
            gerarMovPdf(movDatosCache);
        });
    }

    function gerarMovPdf(resp){
        var jspdfUrl = 'https://cdn.jsdelivr.net/npm/jspdf@2.5.2/dist/jspdf.umd.min.js';
        function run(){
            var jsPDF = window.jspdf.jsPDF;
            var doc = new jsPDF({orientation:'portrait', unit:'mm', format:'a4'});
            var W = 210, ML = 14, MR = 14, CW = W - ML - MR;
            var y = 0;

            // — Header con fondo —
            doc.setFillColor(79,70,229); // indigo-600
            doc.rect(0, 0, W, 38, 'F');
            doc.setTextColor(255,255,255);
            doc.setFont('helvetica','bold');
            doc.setFontSize(18);
            doc.text('Movimentos do Dia', W/2, 17, {align:'center'});
            doc.setFontSize(11);
            doc.setFont('helvetica','normal');
            doc.text(resp.fecha || '', W/2, 27, {align:'center'});
            doc.setFontSize(8);
            doc.text('Dra. Mariela Moreno Autie', W/2, 33, {align:'center'});
            y = 44;

            doc.setTextColor(0,0,0);

            var grandTotalNeto = 0, grandTotalExtras = 0;

            resp.data.forEach(function(cl){
                var t = cl.totais;
                grandTotalNeto += parseFloat(t.neto);
                grandTotalExtras += parseFloat(t.extras);

                // Checkear nueva página
                if(y > 250){ doc.addPage(); y = 15; }

                // Nombre clínica
                doc.setFillColor(238,242,255); // indigo-50
                doc.roundedRect(ML, y, CW, 9, 2, 2, 'F');
                doc.setFont('helvetica','bold'); doc.setFontSize(11);
                doc.setTextColor(55,48,163);
                doc.text(cl.clinica, ML + 3, y + 6.5);
                var infoX = W - MR - 3;
                doc.setFont('helvetica','normal'); doc.setFontSize(7);
                doc.setTextColor(107,114,128);
                var info = '';
                if(cl.hora_abertura) info += 'Abertura: ' + cl.hora_abertura + '  ';
                if(cl.hora_fecho) info += 'Fecho: ' + cl.hora_fecho + '  ';
                info += cl.estado;
                doc.text(info, infoX, y + 6.5, {align:'right'});
                y += 13;

                doc.setTextColor(0,0,0);

                // Faturas
                if(cl.facturas.length > 0){
                    doc.setFont('helvetica','bold'); doc.setFontSize(8);
                    doc.setTextColor(107,114,128);
                    doc.text('FATURAS (' + cl.num_facturas + ')', ML, y + 3);
                    y += 6;

                    // Header tabla
                    var cols = [
                        {label:'Fatura',   w:20, align:'left'},
                        {label:'Paciente', w:32, align:'left'},
                        {label:'Tipo',     w:18, align:'left'},
                        {label:'P. Venda', w:23, align:'right'},
                        {label:'% Médico', w:23, align:'right'},
                        {label:'IRT',      w:20, align:'right'},
                        {label:'R.Líquida',w:23, align:'right'},
                        {label:'Estado',   w:CW - 20 - 32 - 18 - 23 - 23 - 20 - 23, align:'center'}
                    ];

                    doc.setFillColor(249,250,251);
                    doc.rect(ML, y, CW, 6, 'F');
                    doc.setFont('helvetica','bold'); doc.setFontSize(6.5);
                    doc.setTextColor(107,114,128);
                    var cx = ML;
                    cols.forEach(function(c){
                        var tx = c.align==='right' ? cx+c.w-1 : c.align==='center' ? cx+c.w/2 : cx+1;
                        doc.text(c.label, tx, y+4, {align:c.align});
                        cx += c.w;
                    });
                    y += 7;

                    // Filas
                    doc.setFont('helvetica','normal'); doc.setFontSize(7);
                    cl.facturas.forEach(function(f){
                        if(y > 275){ doc.addPage(); y = 15; }
                        doc.setTextColor(0,0,0);
                        cx = ML;
                        var vals = [f.numero, f.paciente, f.tipo_cliente, fmtKz(f.pventa), fmtKz(f.medico), fmtKz(f.irt), fmtKz(f.neto), f.estado];
                        vals.forEach(function(v, i){
                            var c = cols[i];
                            var tx = c.align==='right' ? cx+c.w-1 : c.align==='center' ? cx+c.w/2 : cx+1;
                            var txt = String(v);
                            if(c.align==='left' && txt.length > Math.floor(c.w/1.8)) txt = txt.substring(0, Math.floor(c.w/1.8)) + '..';
                            doc.text(txt, tx, y+3, {align:c.align});
                            cx += c.w;
                        });
                        y += 5.5;
                    });

                    // Subtotais
                    doc.setFillColor(249,250,251);
                    doc.rect(ML, y, CW, 6, 'F');
                    doc.setFont('helvetica','bold'); doc.setFontSize(7);
                    doc.setTextColor(55,48,163);
                    cx = ML + cols[0].w + cols[1].w + cols[2].w;
                    var subVals = [fmtKz(t.pventa), fmtKz(t.medico), fmtKz(t.irt), fmtKz(t.neto)];
                    for(var si=0; si<4; si++){
                        var sc2 = cols[si+3];
                        doc.text(subVals[si], cx+sc2.w-1, y+4, {align:'right'});
                        cx += sc2.w;
                    }
                    y += 9;
                }

                // Receitas extra
                if(cl.extras.length > 0){
                    if(y > 260){ doc.addPage(); y = 15; }
                    doc.setFont('helvetica','bold'); doc.setFontSize(8);
                    doc.setTextColor(5,150,105);
                    doc.text('RECEITAS EXTRA (' + cl.num_extras + ')', ML, y + 3);
                    y += 6;

                    doc.setFillColor(236,253,245);
                    doc.rect(ML, y, CW, 6, 'F');
                    doc.setFont('helvetica','bold'); doc.setFontSize(6.5);
                    doc.setTextColor(5,150,105);
                    doc.text('Motivo', ML+1, y+4);
                    doc.text('Valor', ML+CW*0.6+24-1, y+4, {align:'right'});
                    doc.text('Registado por', ML+CW*0.6+25, y+4);
                    y += 7;

                    doc.setFont('helvetica','normal'); doc.setFontSize(7);
                    doc.setTextColor(0,0,0);
                    cl.extras.forEach(function(ex){
                        if(y > 275){ doc.addPage(); y = 15; }
                        doc.text(String(ex.motivo).substring(0,45), ML+1, y+3);
                        doc.text(fmtKz(ex.monto), ML+CW*0.6+24-1, y+3, {align:'right'});
                        doc.text(String(ex.registado_por).substring(0,30), ML+CW*0.6+25, y+3);
                        y += 5.5;
                    });

                    doc.setFillColor(236,253,245);
                    doc.rect(ML, y, CW, 6, 'F');
                    doc.setFont('helvetica','bold'); doc.setFontSize(7);
                    doc.setTextColor(5,150,105);
                    doc.text('Total Extra:', ML+CW*0.6+24-35, y+4, {align:'right'});
                    doc.text(fmtKz(t.extras), ML+CW*0.6+24-1, y+4, {align:'right'});
                    y += 9;
                }

                // Resumo clínica
                if(y > 255){ doc.addPage(); y = 15; }
                doc.setFillColor(243,244,246);
                doc.roundedRect(ML, y, CW, 12, 2, 2, 'F');
                doc.setFontSize(6); doc.setFont('helvetica','normal');
                doc.setTextColor(156,163,175);
                var rLabels = ['Receita Líquida','Receitas Extra','IRT','Total Geral'];
                var rVals   = [fmtKz(t.neto), fmtKz(t.extras), fmtKz(t.irt), fmtKz(t.geral)];
                var rColors = [[22,163,74],[5,150,105],[217,119,6],[55,48,163]];
                var rw = CW / 4;
                for(var ri=0; ri<4; ri++){
                    doc.setTextColor(156,163,175);
                    doc.setFont('helvetica','normal'); doc.setFontSize(6);
                    doc.text(rLabels[ri], ML + rw*ri + rw/2, y+4.5, {align:'center'});
                    doc.setTextColor(rColors[ri][0], rColors[ri][1], rColors[ri][2]);
                    doc.setFont('helvetica','bold'); doc.setFontSize(8);
                    doc.text(rVals[ri], ML + rw*ri + rw/2, y+9.5, {align:'center'});
                }
                y += 18;
            });

            // Grand total
            if(y > 255){ doc.addPage(); y = 15; }
            var grandTotal = grandTotalNeto + grandTotalExtras;
            doc.setFillColor(79,70,229);
            doc.roundedRect(ML, y, CW, 18, 3, 3, 'F');
            doc.setTextColor(255,255,255);
            doc.setFont('helvetica','bold'); doc.setFontSize(13);
            doc.text('Total do Dia', ML + 6, y + 8);
            doc.setFontSize(15);
            doc.text(fmtKz(grandTotal), W - MR - 6, y + 8, {align:'right'});
            doc.setFont('helvetica','normal'); doc.setFontSize(7.5);
            doc.setTextColor(199,210,254);
            doc.text('Receita Líquida: ' + fmtKz(grandTotalNeto) + '     Receitas Extra: ' + fmtKz(grandTotalExtras), ML + 6, y + 14.5);

            // Footer
            var pageCount = doc.internal.getNumberOfPages();
            for(var p=1; p<=pageCount; p++){
                doc.setPage(p);
                doc.setFontSize(7); doc.setFont('helvetica','normal');
                doc.setTextColor(180,180,180);
                doc.text('Gerado em ' + new Date().toLocaleString('pt-AO'), ML, 290);
                doc.text('Página ' + p + ' de ' + pageCount, W - MR, 290, {align:'right'});
            }

            doc.save('Movimentos_' + (resp.fecha || 'dia').replace(/[\s\/]/g,'_') + '.pdf');
        }

        // Cargar jsPDF bajo demanda
        if(window.jspdf){
            run();
        } else {
            var s = document.createElement('script');
            s.src = jspdfUrl;
            s.onload = run;
            s.onerror = function(){ alert('Erro ao carregar biblioteca PDF.'); };
            document.head.appendChild(s);
        }
    }

    // Recalcular totais com as filas existentes ao carregar a página
    recalcTotales();
    recalcIngresoExtra();
})();
</script>
{% endblock %}