<!DOCTYPE html>
<html lang="es" xmlns:th="http://www.thymeleaf.org" th:fragment="mail(content)">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title th:text="${subject} ?: 'Notificación'">Notificación</title>

  <!-- Evitar dark mode agresivo en clientes que lo respetan -->
  <meta name="color-scheme" content="light only">
  <meta name="supported-color-schemes" content="light">

  <!-- Tu CSS incrustado -->
  <style th:utext="${emailCss}"></style>

  <!-- Hack específico para Gmail iOS (fuerza blanco en la tarjeta/contenido) -->
  <style>
    /* Gmail iOS: el selector u + .body apunta al cuerpo real que Gmail envuelve */
    u + .body .email-container { background: #ffffff !important; }
    u + .body .email-content  { background: #ffffff !important; color: #333 !important; }
    u + .body .email-header   { background: #f0f0f0 !important; }
    u + .body .email-footer   { background: #f9f9f9 !important; }
  </style>
</head>

<!-- Añade class="body" para el hack de Gmail iOS -->
<body class="body" style="margin:0; padding:0; background-color:#f5f7fb;" bgcolor="#f5f7fb">

  <!-- Wrapper 100% -->
  <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0"
         class="email-wrapper"
         style="width:100%; background-color:#f5f7fb;"
         bgcolor="#f5f7fb">
    <tr>
      <td align="center" class="email-body" style="padding:20px 10px;">

        <!-- Tarjeta blanca (con pixel blanco para evitar inversión en móvil) -->
        <table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0"
               class="email-container"
               style="max-width:600px; width:100%; background-color:#ffffff; border-radius:8px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,0.08);"
               bgcolor="#ffffff"
               background="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMB/et0HFAAAAABJRU5ErkJggg==">
          <!-- Header -->
          <tr>
            <td class="email-header" style="background:#f0f0f0; padding:20px; text-align:center;" bgcolor="#f0f0f0">
              <h2 style="margin:0;">
                <img src="cid:logo" alt="imprimelibros" height="45" style="display:block; margin:0 auto;">
              </h2>
            </td>
          </tr>

          <!-- Content -->
          <tr>
            <td class="email-content"
                style="padding:24px; font-size:14px; line-height:1.6; color:#333; text-align:left; background:#ffffff;"
                bgcolor="#ffffff">
              <th:block th:replace="~{${template} :: content}"></th:block>

            </td>
          </tr>

          <!-- Footer -->
          <tr>
            <td class="email-footer" style="background:#f9f9f9; padding:12px; text-align:center; font-size:12px; color:#777;" bgcolor="#f9f9f9">
              <p style="margin:0;">
                <strong th:text="${companyName} ?: 'ImprimeLibros'">ImprimeLibros</strong><br>
                Calle José Picón, Nº 28 Local A, 28028, Madrid<br>
                91 005 25 74 -
                <a href="mailto:contacto@imprimelibros.com" style="color:#2563eb; text-decoration:none;">
                  contacto@imprimelibros.com
                </a><br>
                &copy; <span th:text="${year} ?: ${#dates.year(#dates.createNow())}">2025</span>
              </p>
            </td>
          </tr>
        </table>
        <!-- /Tarjeta -->

      </td>
    </tr>
  </table>
  <!-- /Wrapper -->

</body>
</html>
