{# ============================================================ 
   BLOQUE SUPERIOR FIJO (CABECERA DEL EXPEDIENTE)
   ============================================================ #}

    <div class="row g-4 align-items-end">

        <!-- Nº EXPEDIENTE -->
        <div class="col-md-2">
            <div class="mb-3">
                <label class="form-label fw-bold">N.º expediente</label>
                <input type="text" class="form-control" value="{{ expediente.codigo }}" readonly>
            </div>
        </div>

        <!-- Nombre -->
        <div class="col-md-2">
            {{ form_row(form.persona.nombre) }}
        </div>

        <!-- Apellidos -->
        <div class="col-md-3">
            {{ form_row(form.persona.apellidos) }}
        </div>

        <!-- FECHA ENTRADA -->
        <div class="col-md-2">
             {{ form_row(form.fechaEntrada) }}
        </div>

        <!-- EKINEZ / CONSENTIMIENTO -->
        <div class="col-md-3">
            <div class="d-flex gap-3">
                <div class="flex-grow-1">
                     {{ form_row(form.domiciliadoEkinez) }}
                </div>
                 <div class="flex-grow-1">
                     {{ form_row(form.consentimientoDatos) }}
                </div>
            </div>
        </div>

    </div>
</div>


{# ============================================================
   PESTAÑA PRINCIPAL: DATOS INICIALES
   ============================================================ #}

<ul class="nav nav-pills bizka-tabs mt-5">
    <li class="nav-item">
        <a class="nav-link active" data-bs-toggle="tab" href="#tabDatosIniciales">
            Datos principales
        </a>
    </li>
    {# ============================================================
    PESTAÑA VALORACIONES SOLO EN EDICIÓN
    ============================================================ #}
    {% if expediente.id is defined and expediente.id is not null %}
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#tabValoraciones">Valoraciones exclusión</a>
        </li>
    {% endif %}
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tabAmbitoEstatusAdministrativo">
            Estatus administrativo
        </a>
    </li>
        <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tabAmbitoSalud">
            Salud
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tabAmbitoEmocionalRelacional">
            Emocional/Relacional
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tabAmbitoAyudasSociales">
            Ayudas sociales
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tabAmbitoVivienda">
            Vivienda
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tabAmbitoLegal">
            Legal
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tabAmbitoFormativoLaboral">
            Formativo laboral
        </a>
    </li>
    {% if expediente.id is defined and expediente.id is not null %}
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#tabAtencion">
                Atenciones
            </a>
        </li>
    {% endif %}
</ul>

<div class="tab-content mt-5">

    {# ============================================================
       TAB 1: DATOS INICIALES (SIEMPRE)
       ============================================================ #}

    <div id="tabDatosIniciales" class="tab-pane fade show active">

        {# SECCIÓN 1: DATOS PERSONALES #}
        <h5 class="fw-bold mt-4 text-primary">Datos Personales</h5>
        <div class="row g-4 mb-4">
            <div class="col-md-2">{{ form_row(form.persona.genero) }}</div>
            <div class="col-md-2">{{ form_row(form.persona.fechaNacimiento) }}</div>
            <div class="col-md-2">{{ form_row(form.persona.procedencia) }}</div>
            <div class="col-md-2">{{ form_row(form.persona.regionNacimiento) }}</div>
            <div class="col-md-2">{{ form_row(form.persona.lugarNacimiento) }}</div>
            <div class="col-md-2">{{ form_row(form.persona.telefono) }}</div>
        </div>

        {% if expediente.id is defined and expediente.id is not null %}
            <hr>

            {# SECCIÓN 2: DOCUMENTACIÓN (Datos Estatus) #}
            <h5 class="fw-bold mt-4 text-primary">Documentación (Estatus Administrativo)</h5>
            {% if ultimoEstatus %}
                <div class="row g-4 mb-4 p-3 bg-light rounded border mx-0">
                    <div class="col-md-4">
                        <label class="form-label fw-bold">DNI</label>
                        <div class="d-flex gap-2 align-items-center">
                            <span class="badge {{ ultimoEstatus.dni ? 'bg-success' : 'bg-secondary' }}">
                                {{ ultimoEstatus.dni ? 'SÍ' : 'NO' }}
                            </span>
                            {% if ultimoEstatus.dni and ultimoEstatus.dniNumero %}
                                <span>{{ ultimoEstatus.dniNumero }}</span>
                            {% endif %}
                        </div>
                    </div>
                     <div class="col-md-4">
                        <label class="form-label fw-bold">NIE</label>
                        <div class="d-flex gap-2 align-items-center">
                             <span class="badge {{ ultimoEstatus.nie ? 'bg-success' : 'bg-secondary' }}">
                                {{ ultimoEstatus.nie ? 'SÍ' : 'NO' }}
                            </span>
                            {% if ultimoEstatus.nie and ultimoEstatus.nieNumero %}
                                <span>{{ ultimoEstatus.nieNumero }}</span>
                            {% endif %}
                        </div>
                    </div>
                     <div class="col-md-4">
                        <label class="form-label fw-bold">Pasaporte</label>
                        <div class="d-flex gap-2 align-items-center">
                             <span class="badge {{ ultimoEstatus.pasaporte ? 'bg-success' : 'bg-secondary' }}">
                                {{ ultimoEstatus.pasaporte ? 'SÍ' : 'NO' }}
                            </span>
                             {% if ultimoEstatus.pasaporte and ultimoEstatus.pasaporteNumero %}
                                <span>{{ ultimoEstatus.pasaporteNumero }}</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% else %}
                 <div class="alert alert-warning mb-4">No hay datos de Estatus Administrativo.</div>
            {% endif %}

            <hr>

            {# SECCIÓN: ATENCIONES (RESUMEN) #}
            <h5 class="fw-bold mt-4 text-primary">Atenciones</h5>
            {% if expediente.id and expediente.atenciones|length > 0 %}
                <div class="bg-light p-3 rounded border">
                    <div class="table-responsive">
                        <table class="table table-sm table-borderless table-striped mb-0">
                            <thead class="fw-bold text-dark">
                                <tr>
                                    <th>Fecha</th>
                                    <th>Tipo</th>
                                    <th>Motivo/Detalle</th>
                                    <th>Estado</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for atencion in expediente.atenciones %}
                                    <tr>
                                        <td>{{ atencion.fechaEntrada|date('d/m/Y') }}</td>
                                        <td>{{ atencion.tipoAtencion ? atencion.tipoAtencion.nombre : '—' }}</td>
                                        <td>
                                            {% if atencion.motivoSalida %}
                                                {{ atencion.motivoSalida.nombre }}
                                            {% elseif atencion.derivadoA %}
                                                Derivado a: {{ atencion.derivadoA.nombre }}
                                            {% else %}
                                                —
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if atencion.activo %}
                                                <span class="badge bg-success">ACTIVA</span>
                                            {% else %}
                                                <span class="badge bg-secondary">CERRADA</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            {% else %}
                 <div class="alert alert-light border mb-4">No hay atenciones registradas.</div>
            {% endif %}

            <hr>

            <div class="row g-4">
                {# SECCIÓN 3: SALUD (MOCK) #}
                <div class="col-md-6">
                    <h5 class="fw-bold mt-2 text-primary">Salud</h5>
                    <div class="bg-light p-3 rounded border">
                         <table class="table table-sm table-borderless mb-0">
                            <tbody>
                                <tr>
                                    <td><strong>VIH:</strong> <span class="badge bg-danger">SÍ</span></td>
                                    <td class="text-muted"><small>Última analítica: 15/11/2023</small></td>
                                </tr>
                                <tr>
                                    <td><strong>VHC:</strong> <span class="badge bg-secondary">NO</span></td>
                                    <td class="text-muted"><small>Última analítica: -</small></td>
                                </tr>
                                <tr>
                                    <td><strong>VHB:</strong> <span class="badge bg-secondary">NO</span></td>
                                    <td class="text-muted"><small>Última analítica: -</small></td>
                                </tr>
                                 <tr>
                                    <td><strong>Sífilis:</strong> <span class="badge bg-secondary">NO</span></td>
                                    <td class="text-muted"><small>Última analítica: -</small></td>
                                </tr>
                            </tbody>
                         </table>
                         {# Campo oculto real para que no falle symfony (REMOVED: Field does not exist) #}
                         <!-- <div class="d-none"> form_row(form.estadoSerologico) </div> -->
                    </div>
                </div>

                {# SECCIÓN 4: VIVIENDA (MOCK) #}
                <div class="col-md-6">
                     <h5 class="fw-bold mt-2 text-primary">Vivienda</h5>
                     <div class="bg-light p-3 rounded border">
                        <div class="row g-2">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" disabled>
                                    <label class="form-check-label text-dark opacity-100">Calle</label>
                                </div>
                            </div>
                             <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" disabled checked>
                                    <label class="form-check-label fw-bold text-dark opacity-100">Vivienda no adecuada</label>
                                </div>
                            </div>
                             <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" disabled>
                                    <label class="form-check-label text-dark opacity-100">Albergue municipal</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" disabled>
                                    <label class="form-check-label text-dark opacity-100">Recurso residencial DFB</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" disabled>
                                    <label class="form-check-label text-dark opacity-100">Centro de día DFB</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                 <div class="form-check">
                                    <input class="form-check-input" type="checkbox" disabled>
                                    <label class="form-check-label text-dark opacity-100">Hábitat</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                 <div class="form-check">
                                    <input class="form-check-input" type="checkbox" disabled>
                                    <label class="form-check-label text-dark opacity-100">Alquiler habitación</label>
                                </div>
                            </div>
                             <div class="col-md-6">
                                 <div class="form-check">
                                    <input class="form-check-input" type="checkbox" disabled>
                                    <label class="form-check-label text-dark opacity-100">Alquiler vivienda</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                 <div class="form-check">
                                    <input class="form-check-input" type="checkbox" disabled>
                                    <label class="form-check-label text-dark opacity-100">Inscrita/o en Etxebide</label>
                                </div>
                            </div>
                             <div class="col-md-6">
                                 <div class="form-check">
                                    <input class="form-check-input" type="checkbox" disabled>
                                    <label class="form-check-label text-dark opacity-100">Otros</label>
                                </div>
                            </div>
                        </div>
                         {# Campo oculto real (REMOVED: Field does not exist) #}
                         <!-- <div class="d-none"> form_row(form.situacionVivienda) </div> -->
                    </div>
                </div>
            </div>
        {% endif %}

        {# SECCIÓN 5: CIERRE (Si aplica) #}
        {% if form.fechaCierre is defined %}
            <hr>
            <h5 class="fw-bold mt-4 text-secondary">Cierre del Expediente</h5>
            <div class="row g-4 mb-4">
                <div class="col-md-3">{{ form_row(form.fechaCierre) }}</div>
                <div class="col-md-3">{{ form_row(form.motivoCierre) }}</div>
            </div>
        {% endif %}

    </div> {# FIN TAB DATOS PRINCIPALES #}



    {# ============================================================
       TAB 2: VALORACIONES (SOLO EN EDICIÓN)
       ============================================================ #}

    {% if expediente.id is defined and expediente.id is not null %}
        <div id="tabValoraciones" class="tab-pane fade">

            <!-- HEADER DE LA PESTAÑA -->
            <div class="d-flex justify-content-between align-items-center mb-5">
                <div class="d-flex align-items-center">
                    <div class="page-title-icon" style="width: 44px; height: 44px;">
                        <i class="fa-solid fa-clipboard-list fs-3"></i>
                    </div>
                    <h3 class="fw-bold text-dark ms-3 mb-0">Valoraciones de exclusión</h3>
                </div>

                <button id="btnNuevaValoracion"
                        type="button"
                        class="btn btn-orange fw-bold"
                        data-url-nueva="{{ path('valoracion_new_ajax', { id: expediente.id }) }}">
                    <i class="fa-solid fa-plus me-2"></i> Nueva valoración
                </button>
            </div>


            <!-- TABLA -->
            <div class="section-box">
                <div class="table-responsive">

                    <table id="tablaValoraciones"
                        class="table table-striped align-middle table-row-dashed fs-6 gy-5"
                        data-url-listado="{{ path('expediente_valoraciones_server', { id: expediente.id }) }}"
                        style="width:100%;">

                        <thead class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                            <tr>
                                <th>Fecha</th>
                                <th>Estado</th>
                                <th>Creado por</th>
                                <th style="width:120px;">Acciones</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    {% endif %}

    {# ============================================================
       TAB 3: ESTATUS ADMINISTRATIVO
       ============================================================ #}
    <div id="tabAmbitoEstatusAdministrativo" class="tab-pane fade">

        <!-- HEADER UNIFICADO -->
        <div class="d-flex align-items-center gap-3 mb-4">
            <div class="page-title-icon" style="width: 44px; height: 44px;">
                <i class="fa-solid fa-id-card fs-3"></i>
            </div>

            <h3 class="fw-bold text-dark mb-0">Estatus Administrativo</h3>

            {% if expediente.id %}
                <button id="btnNuevoEstatus"
                    type="button"
                    class="btn btn-orange fw-bold ms-3"
                    style="{{ ultimoEstatus ? 'display:none;' : '' }}"
                    data-url="{{ path('ambito_estatus_administrativo_new', { id: expediente.id }) }}">
                    <i class="fa-solid fa-plus me-2"></i> Nuevo registro
                </button>
            {% endif %}
        </div>
        
        {# FORMULARIO del último registro (si existe) #}
        <div id="wrapperAmbitoEstatusForm">
            {% include 'ambito_estatus_administrativo/_form_ultimo.html.twig' with {'formUltimo': formEstatus} %}
        </div>

        {% if expediente.id and expediente.ambitosEstatusAdministrativos|length > 0 %}
            <!-- HISTÓRICO -->
            <div class="bizka-card">

                <div class="bizka-card-title d-flex justify-content-between align-items-center" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#collapseHistoryEstatus" aria-expanded="false" aria-controls="collapseHistoryEstatus">
                    <div>
                        <i class="fa-solid fa-clock-rotate-left"></i>
                        Historial de registros
                    </div>
                    <i class="fa-solid fa-chevron-down transition-icon"></i>
                </div>

                <div class="collapse" id="collapseHistoryEstatus">
                    <div class="table-responsive">
                        <table id="tablaAmbitoEstatus"
                            class="table align-middle table-row-dashed fs-6 gy-4"
                            data-expediente="{{ expediente.id }}"
                            data-url-json="{{ path('ambito_estatus_administrativo_list_json', { id: expediente.id }) }}">
                            <thead class="bg-light">
                                <tr>
                                    <th></th>  {# Columna responsive #}
                                    <th>Fecha</th>
                                    <th style="display:none;">Orden</th>
                                    <th>Tipo</th>
                                    <th>DNI</th>
                                    <th>NIE</th>
                                    <th>Padrón</th>
                                    <th>Profesional</th>
                                    <th class="text-start">Acciones</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        {% elseif expediente.id %}
            <div class="alert alert-info mt-3">
                Dale al botón Nuevo registro para añadir un registro de estatus.
            </div>
        {% else %}
            {# Formulario para el primer registro de Estatus Administrativo en nuevo expediente #}
            {% if form.primerAmbitoEstatusAdministrativo is defined and not expediente.id %}
                <div class="bizka-card">
                    <div class="bizka-card-title">
                        <i class="fa-solid fa-id-card"></i>
                        Primer registro de Estatus Administrativo
                    </div>
                    <div class="p-3">
                        {% include 'ambito_estatus_administrativo/_form.html.twig' with {'form': form.primerAmbitoEstatusAdministrativo, 'nested': true} %}
                    </div>
                </div>
            {% endif %}
        {% endif %}
    </div>

    {# ============================================================
       TAB SALUD
       ============================================================ #}
    <div id="tabAmbitoSalud" class="tab-pane fade" data-expediente="{{ expediente.id }}">
        <!-- HEADER UNIFICADO -->
        <div class="d-flex align-items-center gap-3 mb-4">
            <div class="page-title-icon" style="width: 44px; height: 44px;">
                <i class="fa-solid fa-heart-pulse fs-3"></i>
            </div>
            <h3 class="fw-bold text-dark mb-0">Ámbito salud</h3>

            {% if expediente.id %}
                <button id="btnNuevoSalud"
                    type="button"
                    class="btn btn-orange fw-bold ms-3"
                    style="{{ ultimoSalud ? 'display:none;' : '' }}"
                    data-url="{{ path('ambito_salud_new', { id: expediente.id }) }}">
                    <i class="fa-solid fa-plus me-2"></i> Nuevo registro
                </button>
            {% endif %}
        </div>
        
        {# FORMULARIO del último registro (si existe) #}
        <div id="wrapperAmbitoSaludForm">
            {% include 'ambito_salud/_form_ultimo.html.twig' with {'formUltimo': formSalud, 'ultimoAmbito': ultimoSalud } %}
        </div>

        {% if expediente.id %}
            <!-- HISTÓRICO -->
            <!-- HISTÓRICO -->
            <div class="bizka-card mt-4">
                <div class="bizka-card-title d-flex justify-content-between align-items-center" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#collapseHistorySalud" aria-expanded="false" aria-controls="collapseHistorySalud">
                    <div>
                        <i class="fa-solid fa-clock-rotate-left"></i>
                        Historicos de salud
                    </div>
                    <i class="fa-solid fa-chevron-down transition-icon"></i>
                </div>

                <div class="collapse" id="collapseHistorySalud">
                    <div class="table-responsive p-3" id="wrapperAmbitoSaludTabla">
                        {% if expediente.ambitosSalud|length > 0 %}
                            {% include 'ambito_salud/_tabla.html.twig' with {'registros': expediente.ambitosSalud} %}
                        {% else %}
                            {# Renderizamos la tabla vacía con su ID para que DataTables pueda inicializarse y el AJAX funcione #}
                            {% include 'ambito_salud/_tabla.html.twig' with {'registros': []} %}
                            <div class="alert alert-light border text-center mt-2 small">
                                No hay registros de salud previos.
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% else %}
            {# Formulario para el primer registro de Salud en nuevo expediente #}
            {% if form.primerAmbitoSalud is defined and not expediente.id %}
                <div class="bizka-card">
                    <div class="bizka-card-title">
                        <i class="fa-solid fa-heart-pulse"></i>
                        Primer registro de Salud
                    </div>
                    <div class="p-3">
                        {% include 'ambito_salud/_form.html.twig' with {'form': form.primerAmbitoSalud, 'nested': true} %}
                    </div>
                </div>
            {% endif %}
        {% endif %}
    </div>

    {# ============================================================
       TAB VIVIENDA
       ============================================================ #}
    <div id="tabAmbitoVivienda" class="tab-pane fade">
        <div class="d-flex align-items-center gap-3 mb-4">
            <div class="page-title-icon" style="width: 44px; height: 44px;">
                <i class="fa-solid fa-house-chimney fs-3"></i>
            </div>
            <h3 class="fw-bold text-dark mb-0">Ámbito Vivienda</h3>

            {% if expediente.id %}
                <button id="btnNuevoVivienda"
                        type="button"
                        class="btn btn-orange fw-bold ms-3"
                        style="{{ ultimoVivienda ? 'display:none;' : '' }}"
                        data-url="{{ path('ambito_vivienda_new', { id: expediente.id }) }}">
                    <i class="fa-solid fa-plus me-2"></i> Nuevo registro
                </button>
            {% endif %}
        </div>

        <div id="wrapperAmbitoViviendaForm">
            {% include 'ambito_vivienda/_form_ultimo.html.twig' with { 'formViviendaUltimo': formVivienda, 'ultimoVivienda': ultimoVivienda } %}
        </div>

        {% if expediente.id and expediente.ambitoViviendas|length > 0 %}
            <div class="bizka-card mt-4">
                <div class="bizka-card-title mb-4 d-flex justify-content-between align-items-center" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#collapseHistoryVivienda" aria-expanded="false" aria-controls="collapseHistoryVivienda">
                     <div>
                        <i class="fa-solid fa-clock-rotate-left"></i> Histórico de vivienda
                    </div>
                    <i class="fa-solid fa-chevron-down transition-icon"></i>
                </div>
                <div class="collapse" id="collapseHistoryVivienda">
                    <div class="table-responsive">
                        <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer"
                               id="tablaAmbitoVivienda"
                               data-url="{{ path('ambito_vivienda_listado', { id: expediente.id }) }}"
                               data-expediente="{{ expediente.id }}">
                            <thead>
                                <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                                    <th></th> {# Control responsive #}
                                    <th class="min-w-100px">Fecha</th>
                                    <th class="min-w-50px">Interv.</th>
                                    <th class="min-w-50px">Calle</th>
                                    <th class="min-w-50px">No Adecuada</th>
                                    <th class="min-w-50px">Albergue</th>
                                    <th class="min-w-50px">R. DFB</th>
                                    <th class="min-w-50px">C. Día</th>
                                    <th class="min-w-50px">Hábitat</th>
                                    <th class="min-w-50px">A. Hab.</th>
                                    <th class="min-w-50px">A. Viv.</th>
                                    <th class="min-w-50px">Etxebide</th>
                                    <th class="min-w-100px">Profesional</th>
                                    <th class="text-start min-w-100px">Acciones</th>
                                </tr>
                            </thead>
                            <tbody class="fw-bold text-gray-600">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        {% elseif expediente.id %}
             <div class="alert alert-info mt-3">
                Dale al botón Nuevo registro para añadir un registro de vivienda.
            </div>
        {% else %}
            {# Formulario para el primer registro de Vivienda en nuevo expediente #}
            {% if form.primerAmbitoVivienda is defined and not expediente.id %}
                <div class="bizka-card">
                    <div class="bizka-card-title">
                        <i class="fa-solid fa-house-chimney"></i>
                        Primer registro de Vivienda
                    </div>
                    <div class="p-3">
                        {% include 'ambito_vivienda/_form.html.twig' with {'form': form.primerAmbitoVivienda, 'nested': true} %}
                    </div>
                </div>
            {% endif %}
        {% endif %}
    </div>

    {# ============================================================
       TAB FORMATIVO-LABORAL
       ============================================================ #}
    <div id="tabAmbitoFormativoLaboral" class="tab-pane fade" data-expediente="{{ expediente.id }}">
        <div class="d-flex align-items-center gap-3 mb-4">
            <div class="page-title-icon" style="width: 44px; height: 44px;">
                <i class="fa-solid fa-graduation-cap fs-3"></i>
            </div>
            <h3 class="fw-bold text-dark mb-0">Ámbito Formativo-Laboral</h3>

            {% if expediente.id %}
                <button id="btnNuevoFormativoLaboral"
                        type="button"
                        class="btn btn-orange fw-bold ms-3"
                        style="{{ ultimoFormativoLaboral ? 'display:none;' : '' }}"
                        data-url="{{ path('ambito_formativo_laboral_new', { id: expediente.id }) }}">
                    <i class="fa-solid fa-plus me-2"></i> Nuevo registro
                </button>
            {% endif %}
        </div>

        <div id="wrapperAmbitoFormativoLaboralForm">
            {% include 'ambito_formativo_laboral/_form_ultimo.html.twig' with { 'formFormativoLaboralUltimo': formFormativoLaboral, 'ultimoFormativoLaboral': ultimoFormativoLaboral } %}
        </div>

        {% if expediente.id and expediente.ambitoFormativosLaborales|length > 0 %}
            <div class="bizka-card mt-4">
                <div class="bizka-card-title mb-4 d-flex justify-content-between align-items-center" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#collapseHistoryFormativo" aria-expanded="false" aria-controls="collapseHistoryFormativo">
                    <div>
                        <i class="fa-solid fa-clock-rotate-left"></i> Histórico formativo-laboral
                    </div>
                     <i class="fa-solid fa-chevron-down transition-icon"></i>
                </div>
                <div class="collapse" id="collapseHistoryFormativo">
                    <div class="table-responsive">
                        <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer"
                               id="tablaAmbitoFormativoLaboral"
                               data-url="{{ path('ambito_formativo_laboral_listado', { id: expediente.id }) }}"
                               data-expediente="{{ expediente.id }}">
                            <thead>
                                <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                                    <th></th> {# Control responsive #}
                                    <th class="min-w-100px">Fecha</th>
                                    <th class="min-w-100px">Interv.</th>
                                    <th class="min-w-100px">Cursos</th>
                                    <th class="min-w-100px">Búsq. Empleo</th>
                                    <th class="min-w-100px">Incorp. Empleo</th>
                                    <th class="min-w-100px">Profesional</th>
                                    <th class="text-start min-w-100px">Acciones</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        {% elseif expediente.id %}
             <div class="alert alert-info mt-3">
                Dale al botón Nuevo registro para añadir un registro formativo-laboral.
            </div>
        {% else %}
            {# Formulario para el primer registro Formativo-Laboral en nuevo expediente #}
            {% if form.primerAmbitoFormativoLaboral is defined and not expediente.id %}
                <div class="bizka-card">
                    <div class="bizka-card-title">
                        <i class="fa-solid fa-graduation-cap"></i>
                        Primer registro Formativo-Laboral
                    </div>
                    <div class="p-3">
                        {% include 'ambito_formativo_laboral/_form.html.twig' with {'form': form.primerAmbitoFormativoLaboral, 'nested': true} %}
                    </div>
                </div>
            {% endif %}
        {% endif %}
    </div>

    {# ============================================================
       TAB EMOCIONAL / RELACIONAL
       ============================================================ #}
    <div id="tabAmbitoEmocionalRelacional" class="tab-pane fade" data-expediente="{{ expediente.id }}">
        <div class="d-flex align-items-center gap-3 mb-4">
            <div class="page-title-icon" style="width: 44px; height: 44px;">
                <i class="fa-solid fa-heart-pulse fs-3"></i>
            </div>
            <h3 class="fw-bold text-dark mb-0">Ámbito Emocional / Relacional</h3>

            {% if expediente.id %}
                <button id="btnNuevoEmocionalRelacional"
                        type="button"
                        class="btn btn-orange fw-bold ms-3"
                        style="{{ ultimoEmocionalRelacional ? 'display:none;' : '' }}"
                        data-url="{{ path('ambito_emocional_relacional_new', { id: expediente.id }) }}">
                    <i class="fa-solid fa-plus me-2"></i> Nuevo registro
                </button>
            {% endif %}
        </div>

        <div id="wrapperAmbitoEmocionalRelacionalForm">
            {% include 'ambito_emocional_relacional/_form_ultimo.html.twig' with { 'formEmocionalRelacionalUltimo': formEmocionalRelacional, 'ultimoEmocionalRelacional': ultimoEmocionalRelacional } %}
        </div>

        {% if expediente.id and expediente.ambitosEmocionalesRelacionales|length > 0 %}
            <div class="bizka-card mt-4">
                <div class="bizka-card-title mb-4 d-flex justify-content-between align-items-center" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#collapseHistoryEmocional" aria-expanded="false" aria-controls="collapseHistoryEmocional">
                    <div>
                        <i class="fa-solid fa-clock-rotate-left"></i> Histórico emocional / relacional
                    </div>
                    <i class="fa-solid fa-chevron-down transition-icon"></i>
                </div>
                <div class="collapse" id="collapseHistoryEmocional">
                    <div class="table-responsive">
                        <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer"
                               id="tablaAmbitoEmocionalRelacional"
                               data-url="{{ path('ambito_emocional_relacional_listado', { id: expediente.id }) }}"
                               data-expediente="{{ expediente.id }}">
                            <thead>
                                <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                                    <th></th> {# Control responsive #}
                                    <th class="min-w-80px">Fecha</th>
                                    <th class="min-w-100px">Tipo</th>
                                    <th class="min-w-100px">Profesional</th>
                                    <th class="text-start min-w-80px">Acciones</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        {% elseif expediente.id %}
             <div class="alert alert-info mt-3">
                Dale al botón Nuevo registro para añadir un registro emocional / relacional.
            </div>
        {% else %}
            {# Formulario para el primer registro Emocional-Relacional en nuevo expediente #}
            {% if form.primerAmbitoEmocionalRelacional is defined and not expediente.id %}
                <div class="bizka-card">
                    <div class="bizka-card-title">
                        <i class="fa-solid fa-heart-pulse"></i>
                        Primer registro Emocional / Relacional
                    </div>
                    <div class="p-3">
                        {% include 'ambito_emocional_relacional/_form.html.twig' with {'form': form.primerAmbitoEmocionalRelacional, 'nested': true} %}
                    </div>
                </div>
            {% endif %}
        {% endif %}
    </div>

    {# ============================================================
       TAB AYUDAS SOCIALES
       ============================================================ #}
    <div id="tabAmbitoAyudasSociales" class="tab-pane fade" data-expediente="{{ expediente.id }}">
        <div class="d-flex align-items-center gap-3 mb-4">
            <div class="page-title-icon" style="width: 44px; height: 44px;">
                <i class="fa-solid fa-hand-holding-dollar fs-3"></i>
            </div>
            <h3 class="fw-bold text-dark mb-0">Ámbito Ayudas Sociales</h3>

            {% if expediente.id %}
                <button id="btnNuevoAyudasSociales"
                        type="button"
                        class="btn btn-orange fw-bold ms-3"
                        style="{{ ultimoAyudasSociales ? 'display:none;' : '' }}"
                        data-url="{{ path('ambito_ayudas_sociales_new', { id: expediente.id }) }}">
                    <i class="fa-solid fa-plus me-2"></i> Nuevo registro
                </button>
            {% endif %}
        </div>

        <div id="wrapperAmbitoAyudasSocialesForm">
            {% include 'ambito_ayudas_sociales/_form_ultimo.html.twig' with { 'formAyudasSocialesUltimo': formAyudasSociales, 'ultimoAyudasSociales': ultimoAyudasSociales } %}
        </div>

        {% if expediente.id and expediente.ambitosAyudasSociales|length > 0 %}
            <div class="bizka-card mt-4">
                <div class="bizka-card-title mb-4 d-flex justify-content-between align-items-center" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#collapseHistoryAyudas" aria-expanded="false" aria-controls="collapseHistoryAyudas">
                    <div>
                        <i class="fa-solid fa-clock-rotate-left"></i> Histórico de ayudas sociales
                    </div>
                    <i class="fa-solid fa-chevron-down transition-icon"></i>
                </div>
                <div class="collapse" id="collapseHistoryAyudas">
                    <div class="table-responsive">
                        <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer"
                               id="tablaAmbitoAyudasSociales"
                               data-url="{{ path('ambito_ayudas_sociales_listado', { id: expediente.id }) }}"
                               data-expediente="{{ expediente.id }}">
                            <thead>
                                <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                                    <th></th> {# Control responsive #}
                                    <th class="min-w-80px">Fecha</th>
                                    <th class="min-w-100px">Tipo</th>
                                    <th class="min-w-50px">RGI</th>
                                    <th class="min-w-50px">IMV</th>
                                    <th class="min-w-50px">PCV</th>
                                    <th class="min-w-50px">AES</th>
                                    <th class="min-w-50px">PNC</th>
                                    <th class="min-w-50px">A. Dep</th>
                                    <th class="min-w-50px">Banco</th>
                                    <th class="min-w-100px">Gestión dinero</th>
                                    <th class="min-w-100px">Profesional</th>
                                    <th class="text-start min-w-80px">Acciones</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        {% elseif expediente.id %}
             <div class="alert alert-info mt-3">
                Dale al botón Nuevo registro para añadir un registro de ayudas sociales.
            </div>
        {% else %}
            {# Formulario para el primer registro de Ayudas Sociales en nuevo expediente #}
            {% if form.primerAmbitoAyudasSociales is defined and not expediente.id %}
                <div class="bizka-card">
                    <div class="bizka-card-title">
                        <i class="fa-solid fa-hand-holding-dollar"></i>
                        Primer registro de Ayudas Sociales
                    </div>
                    <div class="p-3">
                        {% include 'ambito_ayudas_sociales/_form.html.twig' with {'form': form.primerAmbitoAyudasSociales, 'nested': true} %}
                    </div>
                </div>
            {% endif %}
        {% endif %}
    </div>

    {# ============================================================
       TAB 8: ÁMBITO LEGAL (SIEMPRE)
       ============================================================ #}
    <div id="tabAmbitoLegal" class="tab-pane fade">

        <!-- HEADER UNIFICADO -->
        <div class="d-flex align-items-center gap-3 mb-4">
            <div class="page-title-icon" style="width: 44px; height: 44px;">
                <i class="fa-solid fa-scale-balanced fs-3"></i>
            </div>

            <h3 class="fw-bold text-dark mb-0">Ámbito legal</h3>

            {% if expediente.id %}
                <button id="btnNuevoAmbitoLegal"
                    type="button"
                    class="btn btn-orange fw-bold ms-3"
                    style="{{ ultimoAmbito ? 'display:none;' : '' }}"
                    data-url="{{ path('ambito_legal_new', { id: expediente.id }) }}">
                    <i class="fa-solid fa-plus me-2"></i> Nuevo registro
                </button>
            {% endif %}
        </div>
        
        {# FORMULARIO del último registro (si existe) #}
        <div id="wrapperAmbitoLegalForm">
            {% include 'ambito_legal/_form_ultimo.html.twig' %}
        </div>

        {% if expediente.id and expediente.ambitosLegales|length > 0 %}
            <!-- HISTÓRICO -->
            <div class="bizka-card">

                <div class="bizka-card-title d-flex justify-content-between align-items-center" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#collapseHistoryLegal" aria-expanded="false" aria-controls="collapseHistoryLegal">
                    <div>
                        <i class="fa-solid fa-clock-rotate-left"></i>
                        Historial de registros legales
                    </div>
                    <i class="fa-solid fa-chevron-down transition-icon"></i>
                </div>

                <div class="collapse" id="collapseHistoryLegal">
                    <!-- FIX DEL RESPONSIVE -->
                    <div class="table-responsive">
                        <table id="tablaAmbitoLegal"
                            class="table align-middle table-row-dashed fs-6 gy-4"
                            data-expediente="{{ expediente.id }}"
                            data-url-json="{{ path('ambito_legal_list_json', { id: expediente.id }) }}">
                            <thead class="bg-light">
                                <tr>
                                    <th></th>  {# Columna responsive #}
                                    <th>Fecha</th>
                                    <th style="display:none;">Orden</th>
                                    <th>Tipo</th>
                                    <th>Causas pendientes</th>
                                    <th>Penas cumplidas</th>
                                    <th>Penas pendientes</th>
                                    <th>Trabajos BC</th>
                                    <th>Profesional</th>
                                    <th class="text-start">Acciones</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        {% elseif expediente.id %}
            <div class="alert alert-info mt-3">
                Dale al botón Nuevo registro para añadir un registro legal.
            </div>
        {% else %}
            {# Formulario para el primer registro Legal en nuevo expediente #}
            {% if form.primerAmbitoLegal is defined and not expediente.id %}
                <div class="bizka-card">
                    <div class="bizka-card-title">
                        <i class="fa-solid fa-scale-balanced"></i>
                        Primer registro Legal
                    </div>
                    <div class="p-3">
                        {% include 'ambito_legal/_form.html.twig' with {'form': form.primerAmbitoLegal, 'nested': true} %}
                    </div>
                </div>
            {% endif %}
        {% endif %}
    </div>

    {% if expediente.id is defined and expediente.id is not null %}
        <div id="tabAtencion" class="tab-pane fade" role="tabpanel">
            {% include 'expediente/atencion/_tab.html.twig' %}
        </div>
    {% endif %}

</div>


{# ============================================================
   BOTÓN GUARDAR
   ============================================================ #}

<div class="d-flex justify-content-end mt-4">
    <button type="submit" class="btn btn-primary fw-bold">
        <i class="fa-solid fa-floppy-disk me-2"></i> Guardar
    </button>
</div>