/* ── single-post.css — diferido para is_singular('post')
   Paleta y tipografía canónicas: gv_print_palette_vars() en functions.php.
   Skip link, breadcrumbs y :focus-visible globales → header.php inline style. */

/* ── Cuerpo del artículo ── */
.lv-article-body{font-family:Georgia,serif;font-size:clamp(18px,2.5vw,20px);line-height:1.7;color:var(--text);max-width:680px}
a:hover .lv-avatar-img{filter:grayscale(0%)}
.lv-author-name-text a:hover{color:var(--green)}

/* Social icons, fechas, barra compartir y btn-circle-share →
   movidos al <style> inline de single.php para que sean
   críticos y no dependan de este archivo (que carga no-bloqueante). */

/* ── Sidebar sticky en desktop ── */
.sidebar-title{border-top:2px solid var(--green);padding-top:10px;color:var(--green);font-weight:800;font-size:12px;text-transform:uppercase;margin:30px 0 20px}
.most-viewed-item{display:flex;gap:15px;margin-bottom:20px;text-decoration:none}
.mv-img-wrap{width:100px;flex-shrink:0;border-radius:4px;overflow:hidden;background:var(--bg-elevated-2)}
.mv-img-wrap img{width:100%;height:65px;object-fit:cover;display:block}
.mv-title{font-family:var(--font-body);font-weight:800;font-size:14px;line-height:1.3;color:var(--text);margin:0}
/* Sticky del sidebar → gestionado en el inline CSS de single.php (top depende de la nav) */
@media(min-width:1024px){
  .most-viewed-item{flex-direction:column}
  .mv-img-wrap{width:100%}
  .mv-img-wrap img{height:auto}
  .mv-title{font-size:16px;margin-top:8px}
}

/* ── Tags ── */
.lv-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;padding-top:20px;border-top:1px solid var(--border)}
.lv-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--green);border:1px solid var(--green);border-radius:2px;padding:4px 10px;text-decoration:none;transition:background .2s,color .2s}
.lv-tag:hover{background:var(--green);color:var(--white)}

/* ── Caja del autor ── */
.lv-author-box{margin-top:36px;padding:20px;background:var(--bg-elevated);border-top:3px solid var(--green);display:flex;gap:16px;align-items:flex-start}
.lv-author-box-avatar-link{flex-shrink:0}
.lv-author-box-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block;filter:grayscale(20%);transition:filter .3s}
.lv-author-box-avatar-link:hover .lv-author-box-avatar{filter:grayscale(0%)}
.lv-author-box-body{flex:1}
.lv-author-box-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin:0 0 2px}
.lv-author-box-name{font-weight:800;font-size:15px;color:var(--text);margin:0 0 8px}
.lv-author-box-name a{color:inherit;text-decoration:none}
.lv-author-box-name a:hover{color:var(--green)}
.lv-author-box-bio{font-size:13px;line-height:1.55;color:var(--text-muted);margin:0 0 10px}
.lv-author-box-link{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--green);text-decoration:none}
.lv-author-box-link:hover{text-decoration:underline}

/* ════════════════════════════════════════════════════
   NEWSLETTER — Formulario con label visible,
   validación inline y estado de éxito
════════════════════════════════════════════════════ */
.lv-newsletter-cta{margin-top:28px;padding:20px 22px;background:var(--bg-elevated);border-left:4px solid var(--green);display:flex;flex-direction:column;gap:14px}
@media(min-width:580px){.lv-newsletter-cta{flex-direction:row;align-items:flex-start;gap:24px}}
.lv-newsletter-cta-text{flex:1}
.lv-newsletter-cta-heading{font-size:15px;font-weight:800;color:var(--text);margin:0 0 3px}
.lv-newsletter-cta-sub{font-size:13px;color:var(--text-muted);margin:0}

.lv-newsletter-form{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
@media(min-width:580px){.lv-newsletter-form{min-width:240px}}

/* Label visible — nunca solo placeholder */
.lv-field-group{display:flex;flex-direction:column;gap:4px}
.lv-field-label{font-size:11px;font-weight:700;color:var(--text);letter-spacing:.3px}

.lv-newsletter-input{
  padding:9px 13px;
  border:1px solid var(--border);
  border-radius:3px;
  font-size:14px;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
  background:var(--bg-elevated-2);
  color:var(--text);
  width:100%;
  box-sizing:border-box;
}
.lv-newsletter-input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(31,170,85,.15)}
/* Estado de error — feedback en tiempo real */
.lv-newsletter-input.lv-input-error{border-color:#c00;box-shadow:0 0 0 3px rgba(200,0,0,.12)}

.lv-field-error{
  font-size:12px;color:#c00;
  min-height:16px;
  display:block;
  font-weight:600;
}

.lv-newsletter-btn{
  padding:10px 18px;
  background:var(--green);color:var(--white);
  border:none;border-radius:3px;
  font-size:13px;font-weight:700;
  cursor:pointer;white-space:nowrap;
  transition:background .2s,transform .1s;
  /* Touch target ≥ 44px */
  min-height:44px;
}
.lv-newsletter-btn:hover{background:var(--green-deep)}
.lv-newsletter-btn:active{transform:scale(.97)}

/* Estado de éxito */
.lv-newsletter-success{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:#1b5e20;
  background:#e8f5e9;border:1px solid #a5d6a7;
  border-radius:3px;padding:12px 16px;
  margin-top:4px;
}
.lv-newsletter-success svg{flex-shrink:0;color:#2e7d32}

/* ════════════════════════════════════════════════════
   ARTÍCULOS RELACIONADOS — ancho completo (fuera del grid)
════════════════════════════════════════════════════ */
.lv-related-fullwidth{margin-top:40px;border-top:1px solid var(--border)}
.lv-related-fullwidth-title{font-family:var(--font-body);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--text);margin:0;padding:14px 0 12px;border-bottom:1px dashed var(--border);margin-bottom:22px}
.lv-related-fullwidth-title span{color:var(--green)}
.lv-related-fullwidth-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 16px;padding-bottom:40px}
@media(min-width:600px){.lv-related-fullwidth-grid{grid-template-columns:repeat(4,1fr);gap:24px 20px}}
.lv-related-fullwidth-item{text-decoration:none;display:block}
.lv-related-fullwidth-img{overflow:hidden;border-radius:3px;background:var(--bg-elevated-2);margin-bottom:9px;aspect-ratio:3/2}
.lv-related-fullwidth-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.lv-related-fullwidth-img-ph{width:100%;height:100%;background:var(--bg-elevated-2)}
.lv-related-fullwidth-item:hover .lv-related-fullwidth-img img{transform:scale(1.04)}
.lv-related-fullwidth-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--green);display:block;margin-bottom:5px}
.lv-related-fullwidth-item-title{font-family:var(--font-body);font-weight:700;font-size:14px;line-height:1.35;color:var(--text);margin:0;transition:color .2s}
.lv-related-fullwidth-item:hover .lv-related-fullwidth-item-title{color:var(--green)}

/* ── TikTok embed: placeholder mientras carga de forma lazy ─────────────
   Reserva el espacio antes de que embed.js transforme el blockquote en
   iframe, evitando el salto de layout (CLS). Una vez cargado, el iframe
   de TikTok sobreescribe estos estilos con los suyos propios.
   max-width:605px es el ancho estándar de los embeds de TikTok. */
blockquote.tiktok-embed{
  max-width:605px;
  min-height:560px;
  margin:24px auto;
  padding:20px;
  background:#fafafa;
  border:1px solid #e8e8e8 !important;
  border-radius:12px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  position:relative;
  overflow:hidden;
}
/* Icono TikTok centrado como indicador visual */
blockquote.tiktok-embed::before{
  content:"";
  width:48px;height:48px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23010101'%3E%3Cpath d='M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V8.94a8.19 8.19 0 0 0 4.78 1.52V7.02a4.85 4.85 0 0 1-1.01-.33z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.25;
  flex-shrink:0;
}
blockquote.tiktok-embed section{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13px;color:#888;text-align:center;
}
blockquote.tiktok-embed section a{color:#555;text-decoration:none}
/* Una vez que embed.js carga, quita el fondo del placeholder */
blockquote.tiktok-embed iframe{
  position:absolute;inset:0;width:100%!important;height:100%!important;
  border:0;border-radius:12px;
}

@media print{
  .lv-action-bar,.lv-sidebar-col,.lv-related-fullwidth,.lv-newsletter-cta,.lv-author-box{display:none}
  .lv-grid{display:block}
}