/*
 * Contenido de los artículos del blog (HTML del CMS dentro de .cms-articulo).
 * Aparte de output.css a propósito: así no hay que recompilar Tailwind para el blog.
 */
.cms-articulo {
    color: #374151;
    font-size: 1.125rem;
    line-height: 1.8;
    overflow-wrap: break-word;
}

.cms-articulo > * + * { margin-top: 1.25em; }

.cms-articulo h2,
.cms-articulo h3,
.cms-articulo h4 {
    color: #111827;
    font-weight: 800;
    line-height: 1.3;
    margin-top: 2em;
}

.cms-articulo h2 { font-size: 1.75rem; }
.cms-articulo h3 { font-size: 1.375rem; }
.cms-articulo h4 { font-size: 1.125rem; }

.cms-articulo a { color: #00AAFF; text-decoration: underline; text-underline-offset: 2px; }
.cms-articulo a:hover { color: #0088cc; }

.cms-articulo ul,
.cms-articulo ol { padding-left: 1.5em; }
.cms-articulo ul { list-style: disc; }
.cms-articulo ol { list-style: decimal; }
.cms-articulo li + li { margin-top: 0.4em; }

.cms-articulo strong, .cms-articulo b { color: #111827; font-weight: 700; }

.cms-articulo blockquote {
    border-left: 4px solid #00AAFF;
    background: #f0f9ff;
    border-radius: 0 0.75rem 0.75rem 0;
    padding: 1em 1.25em;
    font-style: italic;
}

.cms-articulo img { max-width: 100%; height: auto; border-radius: 0.75rem; }
.cms-articulo figure { margin-left: 0; margin-right: 0; }
.cms-articulo figcaption { color: #6b7280; font-size: 0.875rem; margin-top: 0.5em; text-align: center; }

.cms-articulo table { width: 100%; border-collapse: collapse; font-size: 1rem; display: block; overflow-x: auto; }
.cms-articulo th, .cms-articulo td { border: 1px solid #e5e7eb; padding: 0.5em 0.75em; text-align: left; vertical-align: top; }
.cms-articulo th { background: #f9fafb; font-weight: 700; }

.cms-articulo hr { border: 0; border-top: 1px solid #e5e7eb; margin: 2.5em 0; }

/* Anchura del artículo y dos columnas (texto + índice), como la plantilla de WordPress. */
.cms-ancho { max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.cms-columnas { padding-top: 3rem; padding-bottom: 3rem; }
.cms-columnas__texto { min-width: 0; max-width: 48rem; }

@media (min-width: 1024px) {
    .cms-columnas--indice { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; align-items: start; }
    .cms-columnas__indice { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; }
}

@media (max-width: 1023px) {
    .cms-columnas__indice { margin-bottom: 2rem; }
    .cms-columnas--indice { display: flex; flex-direction: column-reverse; }
}

/* Caja «Índice»: plegable (<details>), numerada y jerárquica. */
.cms-indice { border: 1px solid #d1d5db; border-radius: 0.25rem; background: #fff; }
.cms-indice summary {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.25rem; font-size: 1.125rem; color: #1f2937; cursor: pointer; list-style: none;
}
.cms-indice summary::-webkit-details-marker { display: none; }
.cms-indice summary::after {
    content: ''; width: 0.55rem; height: 0.55rem; margin-right: 0.25rem;
    border-right: 2px solid #1f2937; border-bottom: 2px solid #1f2937; transform: rotate(45deg);
    transition: transform 0.2s;
}
.cms-indice[open] summary { border-bottom: 1px solid #d1d5db; }
.cms-indice[open] summary::after { transform: rotate(-135deg); }
.cms-indice ol { counter-reset: cms-indice; list-style: none; margin: 0; padding: 0.75rem 1.25rem 1rem; }
.cms-indice ol ol { padding: 0.25rem 0 0 1.25rem; }
.cms-indice li { counter-increment: cms-indice; margin: 0.35rem 0; line-height: 1.4; }
.cms-indice li::before { content: counters(cms-indice, '.') '. '; color: #374151; }
.cms-indice a { color: #374151; text-decoration: none; }
.cms-indice a:hover { color: #00AAFF; }

/* Al saltar desde el índice, que el título no quede pegado al borde. */
.cms-articulo h2[id], .cms-articulo h3[id] { scroll-margin-top: 1.5rem; }
html { scroll-behavior: smooth; }