/* =========================================================
   PLANTILLAS DE FICHA DE ARTÍCULO DE BLOG (PostDetail.aspx)
   V1: con barra lateral · V2: editorial centrada · V3: con índice
   Usa las custom properties del tema activo (--primary, --surface,
   --bg-soft, --radius, --border-rgb, --text-dark, --text-light, etc.)
   ========================================================= */

main, form, body { height: auto !important; min-height: 0 !important; }

.pd-container { max-width: 900px; margin: 0 auto; padding: 40px 20px; box-sizing: border-box; }

.pd-breadcrumbs { font-size: 0.85rem; color: var(--text-light); margin-bottom: 20px; }
.pd-breadcrumbs a { color: var(--text-light); text-decoration: none; }
.pd-breadcrumbs a:hover { color: var(--primary); }

.pd-badge { display: inline-block; text-transform: uppercase; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; color: var(--primary); background: var(--bg-soft); padding: 5px 12px; border-radius: 20px; margin-bottom: 12px; }

.pd-title { font-size: 2.4rem; font-weight: 700; color: var(--text-dark); line-height: 1.2; margin: 0 0 20px 0; }

.pd-meta { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: var(--text-light); margin-bottom: 30px; }
.pd-meta-center { justify-content: center; }
.pd-author-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

.pd-hero-inline { width: 100%; height: 380px; border-radius: var(--radius); overflow: hidden; margin-bottom: 30px; background: var(--bg-soft); }
.pd-hero-inline img { width: 100%; height: 100%; object-fit: cover; }
.pd-hero-inline-v3 { height: 340px; }

.pd-hero-full { width: 100%; height: 440px; overflow: hidden; background: var(--bg-soft); }
.pd-hero-full img { width: 100%; height: 100%; object-fit: cover; }

.pd-body { line-height: 1.8; font-size: 1.1rem; color: var(--text-dark); }
.pd-body p { margin-bottom: 24px; }
.pd-body h2 { font-size: 1.6rem; margin: 40px 0 18px; color: var(--text-dark); }
.pd-body ul, .pd-body ol { margin: 0 0 24px 22px; }
.pd-body li { margin-bottom: 8px; }
.pd-body img { max-width: 100%; border-radius: var(--radius); margin: 24px 0; }
.pd-body blockquote { font-style: italic; font-size: 1.25rem; color: var(--primary); border-left: 4px solid var(--primary); padding-left: 20px; margin: 32px 0; }

.pd-author-box { display: flex; gap: 16px; align-items: center; margin-top: 50px; padding-top: 30px; border-top: 1px solid rgba(var(--border-rgb), 0.1); }
.pd-author-box img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pd-author-box h4 { margin: 0 0 4px 0; color: var(--text-dark); }
.pd-author-box p { margin: 0; font-size: 0.9rem; color: var(--text-light); }

.pd-share-buttons { display: flex; gap: 10px; }
.pd-share-center { justify-content: center; margin-bottom: 10px; }
.pd-share-buttons a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--bg-soft); color: var(--text-dark); font-size: 1.1rem; transition: 0.2s; }
.pd-share-buttons a:hover { background: var(--primary); color: var(--on-primary); }

.pd-section-alt { padding: 60px 0; background: var(--bg-soft); margin-top: 50px; }
.pd-section-title { font-size: 1.6rem; color: var(--text-dark); margin: 0 0 30px 0; }
.pd-section-title-center { text-align: center; }

.pd-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.pd-related-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid rgba(var(--border-rgb), 0.1); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.pd-related-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(var(--border-rgb), 0.08); }
.pd-related-img { width: 100%; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-soft); }
.pd-related-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-related-card-body { padding: 16px; }
.pd-related-card-body h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-dark); line-height: 1.4; }

/* ---- V1: con barra lateral ---- */
.pd-layout-sidebar { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; margin-top: 30px; }
@media (min-width: 900px) { .pd-layout-sidebar { grid-template-columns: 1.6fr 1fr; } }
.pd-layout-sidebar .pd-article-content, .pd-layout-sidebar .pd-sidebar { min-width: 0; }

.pd-sidebar-block { background: var(--bg-soft); border: 1px solid rgba(var(--border-rgb), 0.1); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.pd-sidebar-block h4 { margin: 0 0 14px 0; color: var(--text-dark); font-size: 1rem; }

.pd-category-chip { display: inline-block; background: var(--surface); border: 1px solid rgba(var(--border-rgb), 0.1); color: var(--primary); font-size: 0.85rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; }

.pd-related-list-item { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-bottom: 14px; }
.pd-related-list-item:last-child { margin-bottom: 0; }
.pd-related-list-item img { width: 56px; height: 56px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; }
.pd-related-list-item h5 { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--text-dark); line-height: 1.35; }

/* ---- V2: editorial centrada ---- */
.pd-hero-title { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.pd-article-centered .pd-body { max-width: 720px; margin: 0 auto; }
.pd-article-centered .pd-author-box { max-width: 720px; margin-left: auto; margin-right: auto; }

/* ---- V3: con índice de contenidos ---- */
.pd-layout-toc { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; margin-top: 10px; }
@media (min-width: 900px) { .pd-layout-toc { grid-template-columns: 220px 1fr 50px; } }
.pd-layout-toc .pd-article-content { min-width: 0; }

.pd-toc-box { position: sticky; top: 20px; background: var(--bg-soft); border: 1px solid rgba(var(--border-rgb), 0.1); border-radius: var(--radius); padding: 18px; }
.pd-toc-box h4 { margin: 0 0 12px 0; font-size: 0.9rem; color: var(--text-dark); }
.pd-toc-box a { display: block; font-size: 0.85rem; color: var(--text-light); text-decoration: none; padding: 6px 0; border-left: 2px solid transparent; padding-left: 10px; }
.pd-toc-box a:hover { color: var(--primary); border-left-color: var(--primary); }

.pd-share-sticky { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 10px; }
.pd-share-sticky a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--bg-soft); color: var(--text-dark); transition: 0.2s; }
.pd-share-sticky a:hover { background: var(--primary); color: var(--on-primary); }

@media (max-width: 899px) {
    .pd-share-sticky { flex-direction: row; position: static; margin-top: 30px; }
}