<article class="contenedor">
  <%- include('../partials/breadcrumbs', { items: migas }) %>

  <!-- CAPA 1 · Identidad -->
  <header class="u-mb-16">
    <h1><%= fila.nombre %></h1>
    <p class="u-mt-8">
      <% if (fila.articulacion) { %><span class="chip"><%= fila.articulacion %></span><% } %>
      <% if (fila.es_demo) { %><span class="badge badge--demo">DEMO · entidad ficticia de demostración</span><% } %>
      <% if (tipo === 'producto' && fila.ciclo_vida && fila.ciclo_vida !== 'activo') { %>
        <span class="badge badge--descatalogado"><%= fila.ciclo_vida %></span><% } %>
    </p>
  </header>

  <% if (fila.es_demo) { %>
  <%- include('../partials/banner-alerta', { nivel: 'informativa', alertaTitulo: 'Contenido de demostración',
     alertaTexto: 'Esta ficha es ficticia: existe para mostrar la estructura del portal y no describe un caso real.' }) %>
  <% } %>

  <!-- CAPA 2 · Respuesta corta -->
  <% if (fila.resumen_corto) { %>
  <div class="respuesta-corta"><p><%- fila.resumen_corto %></p></div>
  <% } %>

  <!-- CAPA 3 · Contenido dual -->
  <% if (vistaPro && !proDisponible) { %>
  <%- include('../partials/banner-alerta', { nivel: 'informativa', alertaTitulo: 'Sin versión profesional todavía',
     alertaTexto: 'Esta ficha aún no tiene contenido específico para profesionales; se muestra la versión general.' }) %>
  <% } %>
  <% if (!vistaPro && fila.contenido_pro) { %>
  <p class="u-texto-suave">¿Eres profesional sanitario? <a href="<%= rutaActual %>?vista=pro">Ver la versión técnica</a></p>
  <% } %>

  <% if (toc && toc.length >= 2) { %>
  <nav class="factbox u-mb-16" aria-label="Índice de contenidos">
    <h2>En esta página</h2>
    <ul style="margin:0;padding-left:18px">
      <% toc.forEach(function(t){ %><li><a href="#<%= t.id %>"><%= t.texto %></a></li><% }) %>
    </ul>
  </nav>
  <% } %>

  <div class="prosa">
    <%- contenidoHtml %>
  </div>

  <!-- Bloques específicos del tipo (Loop 5 los rellena para producto) -->
  <% if (bloqueTipo) { %><%- include('../' + bloqueTipo) %><% } %>

<% if (typeof medios !== 'undefined' && medios.length) { %>
<section class="seccion bloque-medios" style="padding:16px 0"><h2 style="font-size:20px">Medios</h2>
  <div class="grid-cards u-mt-8">
  <% medios.forEach(function(m){ %>
    <div class="card">
      <% if (m.clase==='imagen') { %><img src="<%= m.url %>" alt="<%= m.titulo %>" loading="lazy" style="width:100%;border-radius:10px"><p class="card__meta"><%= m.titulo %></p>
      <% } else if (m.clase==='video') { %><a href="<%= m.url %>" rel="noopener" target="_blank" class="btn btn--fantasma">&#9654; Ver vídeo: <%= m.titulo %></a>
        <p class="u-texto-suave" style="font-size:12.5px">Se abre en el proveedor (no cargamos rastreadores aquí).</p>
      <% } else { %><a href="<%= m.url %>" rel="noopener">&#128196; <%= m.titulo %></a><% } %>
      <% if (m.audiencia==='pro') { %><span class="badge badge--declarado">Vista profesional</span><% } %>
    </div>
  <% }) %></div></section>
<% } %>

  <% if (faq.length) { %>
  <%- include('../partials/faq', { faqs: faq }) %>
  <% } %>

  <!-- CAPA 4 · E-E-A-T -->
  <section class="factbox u-mt-32" id="fuentes" aria-label="Revisión y fuentes">
    <h2>Revisión y fuentes</h2>
    <p>
      <% if (revisor) { %>Revisado por <strong><%= revisor.nombre || revisor.email %></strong>
        (<%= revisor.rol === 'revisor_medico' ? 'revisor médico' : revisor.rol %>)<% } %>
      <% if (fila.fecha_revision) { %> · Última revisión: <%= new Date(fila.fecha_revision).toISOString().slice(0,10) %><% } %>
    </p>
    <% if (fuentes.length) { %>
    <ul style="margin:0;padding-left:18px">
      <% fuentes.forEach(function(f){ %>
      <li><% if (f.url) { %><a href="<%= f.url %>" rel="noopener"><%= f.nombre %></a><% } else { %><%= f.nombre %><% } %>
        <% if (f.fecha) { %><span class="u-texto-suave">(consultado: <%= f.fecha %>)</span><% } %></li>
      <% }) %>
    </ul>
    <% } else { %><p class="u-texto-suave">Las fuentes se enlazan en cada dato verificado.</p><% } %>
  </section>

  <!-- CAPA 5 · Relaciones del grafo -->
  <% if (relaciones.length) { %>
  <section class="u-mt-32" id="relaciones" aria-label="Relacionado">
    <h2>Relacionado en TuPrótesis</h2>
    <div class="grid-cards u-mt-16">
      <% relaciones.forEach(function(g){ %>
      <div class="card">
        <h3 style="font-size:16px"><%= g.etiqueta %></h3>
        <ul style="margin:0;padding-left:18px">
        <% g.items.forEach(function(it){ %>
          <li><% if (it.url) { %><a href="<%= it.url %>"><%= it.nombre %></a><% } else { %><%= it.nombre %><% } %>
          <% if (it.verificada) { %> <span class="badge badge--verificado">verificado</span><% } %></li>
        <% }) %>
        </ul>
      </div>
      <% }) %>
    </div>
  </section>
  <% } %>

  <!-- CAPA 6 · Acción -->
  <% if (cta) { %>
  <section class="seccion u-centrado" aria-label="Siguiente paso">
    <a class="btn btn--primario" href="<%= cta.url %>"><%= cta.texto %></a>
  </section>
  <% } %>
</article>
