/* ==========================================================================
   Artículo de Blog — davidbuenov.com
   Maquetación de lectura premium, héroe partido, raíl TOC pegajoso y modo dual
   ========================================================================== */

.po {
  --po-bg:          oklch(0.16 0.012 250);
  --po-bg-soft:     oklch(0.145 0.01 250);
  --po-surface:     oklch(0.195 0.012 250);
  --po-border:      oklch(0.27 0.012 250);
  --po-border-2:    oklch(0.36 0.014 250);
  --po-text:        oklch(0.95 0.006 250);
  --po-text-soft:   oklch(0.78 0.01 250);
  --po-text-mute:   oklch(0.66 0.012 250);
  --po-accent:      oklch(0.82 0.13 178);
  --po-accent-in:   oklch(0.18 0.03 200);
  --po-accent-bg:   oklch(0.82 0.13 178 / 0.12);
  --po-hero:        radial-gradient(110% 100% at 82% 0%, oklch(0.26 0.05 190) 0%, var(--po-bg) 62%);
  --po-shadow:      0 30px 64px -28px oklch(0.05 0.02 250 / 0.85);

  --po-sans:        'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --po-display:     'Space Grotesk', var(--po-sans);
  --po-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  background: var(--po-bg);
  color: var(--po-text);
  font-family: var(--po-sans);
  transition: background .35s ease, color .35s ease;
}

/* Modo claro forzado / automático */
html[data-bs-theme="light"] #content.po,
html[data-bs-theme="light"] #content.po .content-wrap,
html[data-bs-theme="light"] .po,
html.light .po,
body.light .po {
  --po-bg:          oklch(0.985 0.003 250) !important;
  --po-bg-soft:     oklch(0.965 0.004 250) !important;
  --po-surface:     oklch(1 0 0) !important;
  --po-border:      oklch(0.9 0.006 250) !important;
  --po-border-2:    oklch(0.83 0.008 250) !important;
  --po-text:        oklch(0.24 0.012 250) !important;
  --po-text-soft:   oklch(0.46 0.01 250) !important;
  --po-text-mute:   oklch(0.58 0.01 250) !important;
  --po-accent:      oklch(0.58 0.11 195) !important;
  --po-accent-in:   oklch(0.99 0.01 195) !important;
  --po-accent-bg:   oklch(0.58 0.11 195 / 0.09) !important;
  --po-hero:        radial-gradient(110% 100% at 82% 0%, oklch(0.94 0.03 195) 0%, var(--po-bg) 62%) !important;
  --po-shadow:      0 30px 64px -28px oklch(0.4 0.02 250 / 0.35) !important;
}

/* Modo oscuro forzado */
html[data-bs-theme="dark"] #content.po,
html[data-bs-theme="dark"] #content.po .content-wrap,
html[data-bs-theme="dark"] .po,
html.dark .po,
body.dark:not(.light) .po {
  --po-bg:          oklch(0.16 0.012 250) !important;
  --po-bg-soft:     oklch(0.145 0.01 250) !important;
  --po-surface:     oklch(0.195 0.012 250) !important;
  --po-border:      oklch(0.27 0.012 250) !important;
  --po-border-2:    oklch(0.36 0.014 250) !important;
  --po-text:        oklch(0.95 0.006 250) !important;
  --po-text-soft:   oklch(0.78 0.01 250) !important;
  --po-text-mute:   oklch(0.66 0.012 250) !important;
  --po-accent:      oklch(0.82 0.13 178) !important;
  --po-accent-in:   oklch(0.18 0.03 200) !important;
  --po-accent-bg:   oklch(0.82 0.13 178 / 0.12) !important;
  --po-hero:        radial-gradient(110% 100% at 82% 0%, oklch(0.26 0.05 190) 0%, var(--po-bg) 62%) !important;
  --po-shadow:      0 34px 70px -26px oklch(0.05 0.02 250 / 0.85) !important;
}

@media (prefers-color-scheme: dark) {
  html:not(.light):not([data-bs-theme="light"]) body:not(.light) .po {
    --po-bg:          oklch(0.16 0.012 250) !important;
    --po-bg-soft:     oklch(0.145 0.01 250) !important;
    --po-surface:     oklch(0.195 0.012 250) !important;
    --po-border:      oklch(0.27 0.012 250) !important;
    --po-border-2:    oklch(0.36 0.014 250) !important;
    --po-text:        oklch(0.95 0.006 250) !important;
    --po-text-soft:   oklch(0.78 0.01 250) !important;
    --po-text-mute:   oklch(0.66 0.012 250) !important;
    --po-accent:      oklch(0.82 0.13 178) !important;
    --po-accent-in:   oklch(0.18 0.03 200) !important;
    --po-accent-bg:   oklch(0.82 0.13 178 / 0.12) !important;
  }
}

.po *, .po *::before, .po *::after { box-sizing: border-box; }
.po-container { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

/* ---------------------------------- HERO ---------------------------------- */
.po-hero { padding-top: clamp(32px, 5vw, 56px); background: var(--po-hero); }
.po-crumbs {
  display: flex; align-items: center; gap: 8px; margin-bottom: 22px; flex-wrap: wrap;
  font-family: var(--po-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.po-crumbs a { color: var(--po-text-mute); text-decoration: none; }
.po-crumbs a:hover { color: var(--po-accent); }
.po-sep { color: var(--po-border-2); }
.po-crumb-current { color: var(--po-accent); font-weight: 500; }

.po-title {
  font-family: var(--po-display); font-weight: 700; font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.08; letter-spacing: -.03em; margin: 0 0 20px; color: var(--po-text) !important; text-wrap: pretty;
}
.po-description {
  font-size: clamp(16.5px, 1.3vw, 18px); line-height: 1.6; color: var(--po-text-soft);
  margin: 0 0 26px; max-width: 58ch; text-wrap: pretty;
}

.po-meta-bar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 18px 0;
  border-top: 1px solid var(--po-border); border-bottom: 1px solid var(--po-border);
  font-family: var(--po-mono); font-size: 12px; color: var(--po-text-mute);
}
.po-author { display: flex; align-items: center; gap: 10px; color: var(--po-text); font-weight: 500; }
.po-author-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--po-border-2); }
.po-date { display: flex; align-items: center; gap: 6px; }
.po-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.po-tag {
  font-family: var(--po-mono); font-size: 10.5px; padding: 3px 8px; border-radius: 5px;
  background: var(--po-bg-soft); border: 1px solid var(--po-border); color: var(--po-accent);
}

.po-featured-media { margin-top: 36px; border-radius: 14px; overflow: hidden; border: 1px solid var(--po-border-2); box-shadow: var(--po-shadow); background: var(--po-surface); }
.po-featured-media img { display: block; width: 100%; max-height: 480px; object-fit: cover; }

.po-hairline { max-width: 1180px; margin: clamp(36px, 5vw, 48px) auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--po-border-2), transparent); }

/* --------------------------------- CUERPO --------------------------------- */
.po-main {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 4.5vw, 56px);
  align-items: start; padding-top: clamp(36px, 5vw, 48px); padding-bottom: clamp(48px, 6vw, 64px);
}
.po-content { min-width: 0; }

/* Prose / Markdown del artículo */
.po-prose { font-size: 17px; line-height: 1.75; color: var(--po-text-soft); max-width: 68ch; }
.po-prose > :first-child { margin-top: 0; }
.po-prose h1, .po-prose h2, .po-prose h3, .po-prose h4, .po-prose h5, .po-prose h6 { color: var(--po-text) !important; font-family: var(--po-display); }
.po-prose h2 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.022em; line-height: 1.18; margin: 44px 0 16px; scroll-margin-top: 90px; }
.po-prose h3 { font-size: 21px; font-weight: 600; margin: 34px 0 12px; }
.po-prose p, .po-prose li { margin: 0 0 20px; text-wrap: pretty; color: var(--po-text-soft); }
.po-prose strong, .po-prose b { color: var(--po-text) !important; font-weight: 600; }
.po-prose a { color: var(--po-accent) !important; text-decoration: underline; text-underline-offset: 3px; }
.po-prose a:hover { color: var(--po-accent) !important; opacity: .85; }
.po-prose ul, .po-prose ol { margin: 0 0 24px; padding-left: 22px; }
.po-prose li { margin-bottom: 8px; }
.po-prose img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--po-border); margin: 16px 0 26px; }
.po-prose code { font-family: var(--po-mono); font-size: .88em; padding: 3px 8px; border-radius: 6px; background: var(--po-surface) !important; border: 1px solid var(--po-border-2) !important; color: var(--po-accent) !important; display: inline-block; line-height: 1.3; }
.po-prose pre { background: var(--po-surface) !important; border: 1px solid var(--po-border-2) !important; border-radius: 12px; padding: 20px; overflow-x: auto; margin: 0 0 26px; }
.po-prose pre code { border: 0 !important; background: transparent !important; padding: 0 !important; font-size: 14px; line-height: 1.6; color: var(--po-text) !important; display: block; }
.po-prose blockquote { margin: 0 0 26px; padding: 14px 20px; border-left: 3px solid var(--po-accent); background: var(--po-accent-bg); border-radius: 0 10px 10px 0; color: var(--po-text-soft); font-style: normal; }
.po-prose blockquote p { margin: 0; }

.po-prose table { width: 100%; border-collapse: collapse; margin: 0 0 28px; font-size: 15px; border-radius: 10px; overflow: hidden; border: 1px solid var(--po-border); }
.po-prose th, .po-prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--po-border); }
.po-prose th { font-family: var(--po-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--po-text-mute); background: var(--po-bg-soft); font-weight: 600; }
.po-prose tr:nth-child(even) td { background: color-mix(in oklab, var(--po-surface) 60%, transparent); }

/* ------------------------------ RAÍL DERECHO ------------------------------ */
.po-rail { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; gap: 20px; }
.po-box { padding: 20px; border-radius: 14px; border: 1px solid var(--po-border); background: var(--po-surface); }
.po-box-label { display: block; font-family: var(--po-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--po-accent); margin-bottom: 14px; font-weight: 500; }

.po-toc-list { list-style: none; margin: 0; padding: 0; }
.po-toc-list li { border-left: 2px solid var(--po-border); transition: border-color .18s ease; }
.po-toc-list a { display: block; padding: 6px 0 6px 12px; font-size: 13.5px; line-height: 1.4; color: var(--po-text-mute); text-decoration: none !important; transition: color .18s ease; }
.po-toc-list a:hover { color: var(--po-text); }
.po-toc-list li:has(a.is-active) { border-left-color: var(--po-accent); }
.po-toc-list a.is-active { color: var(--po-accent); font-weight: 500; }

.po-share-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.po-share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border-radius: 8px;
  font-family: var(--po-mono); font-size: 11.5px; border: 1px solid var(--po-border); background: var(--po-bg-soft);
  color: var(--po-text); transition: border-color .16s ease, transform .16s ease; text-decoration: none !important;
}
.po-share-btn:hover { border-color: var(--po-accent); color: var(--po-accent) !important; transform: translateY(-1px); text-decoration: none !important; }

/* Autor & Comentarios */
.po-author-card { display: flex; align-items: center; gap: 18px; padding: 24px; border-radius: 14px; border: 1px solid var(--po-border); background: var(--po-surface); margin-top: 48px; }
.po-author-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--po-accent); }
.po-author-info h4 { font-family: var(--po-display); font-size: 18px; font-weight: 600; margin: 0 0 6px; color: var(--po-text); }
.po-author-info p { font-size: 14px; line-height: 1.5; color: var(--po-text-soft); margin: 0; }

.po-comments { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--po-border); }

/* Responsive */
@media (max-width: 991px) {
  .po-main { grid-template-columns: 1fr; }
  .po-rail { position: static; order: 2; }
  .po-content { order: 1; }
}