<div class="contenedor" style="max-width:560px">
  <h1 style="font-size:24px">Carnet del implante</h1>
  <div class="card" style="background:linear-gradient(160deg,#0C1A38,#0A1226);color:#EAF0FE;border-color:rgba(76,141,255,.3)">
    <p style="margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7fb0ff">TuPrótesis · Carnet del portador</p>
    <h2 style="color:#fff;font-size:22px;margin:.3em 0"><%= i.producto_nombre || i.producto_texto || ('Implante de ' + i.articulacion) %></h2>
    <p style="color:#A9BBDE;margin:0 0 12px"><%= i.titular %></p>
    <dl style="display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px;margin:0">
      <dt style="color:#7fb0ff">Articulación</dt><dd style="margin:0"><%= i.articulacion %><%= i.lado && i.lado!=='na' ? ' · ' + i.lado : '' %></dd>
      <% if (i.fecha_intervencion) { %><dt style="color:#7fb0ff">Intervención</dt><dd style="margin:0"><%= new Date(i.fecha_intervencion).toISOString().slice(0,10) %></dd><% } %>
      <% if (i.lote) { %><dt style="color:#7fb0ff">Lote</dt><dd style="margin:0"><%= i.lote %></dd><% } %>
      <% if (i.udi) { %><dt style="color:#7fb0ff">UDI</dt><dd style="margin:0;word-break:break-all"><%= i.udi %></dd><% } %>
      <% if (i.compat_rm) { %><dt style="color:#7fb0ff">RM</dt><dd style="margin:0"><%= i.compat_rm.replace(/_/g,' ') %></dd><% } %>
    </dl>
  </div>
  <p class="u-mt-16"><button class="btn btn--fantasma" onclick="window.print()">Imprimir</button>
  <a class="btn btn--primario" href="/mi-protesis/certificado/<%= i.id %>">Certificado de viaje (PDF)</a></p>
  <p class="u-texto-suave" style="font-size:13px">Carnet informativo con datos declarados por el titular. La tarjeta oficial del implante la emite el hospital/fabricante.</p>
</div>
