/*--------------------------------------------------------------
# Archivo: single.css
# Estilos para la plantilla de artículo individual.
--------------------------------------------------------------*/

/* --- Barra de Progreso de Lectura --- */
#progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; z-index: 1001; }
#reading-progress-bar { height: 4px; background-color: var(--color-primary); width: 0%; }

/* --- Cabecera del Artículo (Hero) --- */
.single-hero { position: relative; padding: calc(var(--spacing) * 4) 0 0; background-color: var(--color-dark-bg); color: white; text-align: center; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(17, 24, 39, 0.7); }
.hero-content { position: relative; z-index: 2; }
.post-category { display: inline-block; background-color: var(--color-primary); color: white; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; text-decoration: none; margin-bottom: 1rem; }
.entry-title { font-family: var(--font-family-serif); font-size: 3.2rem; line-height: 1.15; margin: 0 0 1rem 0; }
.entry-meta { font-size: 0.9rem; color: #D1D5DB; }
.entry-meta .meta-item:not(:last-child)::after { content: '•'; margin: 0 0.5rem; }

/* --- Imagen Destacada Profesional --- */
.featured-image-container {
    margin-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2.5);
    position: relative;
    z-index: 2;
}
.featured-image-pro {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 15px 30px -10px rgba(0,0,0,0.4);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}


/* --- Contenido del Artículo --- */

/* --- Estructura de Layout con Sidebar --- */
.single-layout-container {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: calc(var(--spacing) * 2.5);
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 2);
    /* SOLUCIÓN DEFINITIVA (PARTE 1): Evita que el propio contenedor se desborde. */
    min-width: 0;
}

.main-content-area {
    /* SOLUCIÓN DEFINITIVA (PARTE 2): Obliga a todo el contenido a romperse si es necesario. */
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* --- Tabla de Contenidos (TOC) --- */
.table-of-contents { background-color: var(--color-subtle-bg); border-left: 4px solid var(--color-primary); padding: var(--spacing); margin: 0 0 calc(var(--spacing) * 2) 0; }
.toc-title { font-weight: 700; font-size: 1.1rem; margin: 0 0 0.75rem 0; }
.table-of-contents ul { list-style: none; padding-left: 0; margin: 0; counter-reset: toc-counter; }
.table-of-contents li { margin-bottom: 0.5rem; }
.table-of-contents li::before { counter-increment: toc-counter; content: counter(toc-counter) ". "; font-weight: 700; color: var(--color-primary); }
.table-of-contents li a { text-decoration: none; color: var(--color-text); }
.table-of-contents li a:hover { text-decoration: underline; }

/* --- Contenido Principal del Artículo (`entry-content`) --- */
.entry-content { font-size: 1.125rem; line-height: 1.75; color: var(--color-text); }
.entry-content h2, .entry-content h3, .entry-content h4 { font-family: var(--font-family-serif); line-height: 1.3; margin-top: 2.5em; margin-bottom: 1em; }
.entry-content h2 { font-size: 2rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); }
.entry-content h2:hover .heading-anchor { opacity: 1; }
.heading-anchor { opacity: 0; text-decoration: none; color: var(--color-primary); margin-left: 8px; transition: opacity 0.2s ease-in-out; }
.entry-content h3 { font-size: 1.6rem; }
.entry-content p {
    margin: 0 0 1.5em 0;
    text-align: justify;
}
.entry-content a { color: var(--color-primary); text-decoration: none; box-shadow: inset 0 -2px 0 var(--color-primary); transition: box-shadow 0.2s ease-in-out; }
.entry-content a:hover { box-shadow: inset 0 -1.2em 0 var(--color-primary); color: white; }
.entry-content ul, .entry-content ol { padding-left: 1.5em; margin-bottom: 1.5em; }
.entry-content blockquote { margin: 1.5em 0; padding: var(--spacing); border-left: 4px solid var(--color-secondary); background-color: var(--color-subtle-bg); font-size: 1.2rem; font-style: italic; color: #555; }
.entry-content blockquote p { margin: 0; }
.entry-content img { border-radius: 8px; margin: 2em auto; }

/* --- Estilos para Tablas Responsive --- */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin: 2em 0;
}
.entry-content table {
    width: 100%;
    border-collapse: collapse;
}
.table-responsive-wrapper table {
    min-width: 800px;
}
.table-responsive-wrapper .styled-table {
    margin: 0;
    font-size: 0.9em;
    font-family: var(--font-family-sans);
    box-shadow: none;
}
.table-responsive-wrapper .styled-table thead tr {
    background-color: #4F46E5;
    color: #ffffff;
    text-align: left;
}
.table-responsive-wrapper .styled-table th,
.table-responsive-wrapper .styled-table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--color-border);
}
.table-responsive-wrapper .styled-table tbody tr:nth-of-type(even) {
    background-color: var(--color-subtle-bg);
}
.table-responsive-wrapper .styled-table tbody tr:last-of-type {
    border-bottom: 2px solid var(--color-primary);
}


/* --- Pie de Artículo (Tags) --- */
.entry-footer { margin-top: calc(var(--spacing) * 2); }
.post-tags a { display: inline-block; background-color: var(--color-subtle-bg); color: #6B7280; padding: 0.25rem 0.75rem; margin: 0 0.5rem 0.5rem 0; border-radius: 4px; font-size: 0.875rem; text-decoration: none; }
.post-tags a:hover { background-color: var(--color-border); }

/* --- Estilos del Sidebar --- */
.sidebar-area {
    position: sticky;
    top: 100px;
    align-self: start;
}
.sidebar-area .widget-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}
.sidebar-post-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1rem;
    align-items: center;
    text-decoration: none;
    margin-bottom: 1.25rem;
}
.sidebar-post-thumbnail img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.2s ease-in-out;
}
.sidebar-post-item:hover .sidebar-post-thumbnail img {
    transform: scale(1.05);
}
.sidebar-post-title {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.4;
}
.sidebar-post-item:hover .sidebar-post-title {
    color: var(--color-primary);
}


/* --- Artículos Relacionados --- */
.related-posts-section { padding: calc(var(--spacing) * 2) 0; }
.related-posts-section .section-title { text-align: center; font-size: 2rem; }
.related-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing); }
.related-post-card { display: block; text-decoration: none; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.related-post-card:hover .related-post-title { color: var(--color-primary); }
.related-post-thumbnail img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.related-post-content { padding: var(--spacing); }
.related-post-title { margin: 0; font-size: 1.1rem; color: var(--color-text); }

/* --- Responsive para pantallas pequeñas --- */
@media (max-width: 992px) {
    .single-layout-container {
        grid-template-columns: 1fr;
    }
    .sidebar-area {
        margin-top: calc(var(--spacing) * 2);
        position: static;
    }
}
@media (max-width: 768px) {
    .entry-title { font-size: 2.2rem; }
    .entry-content { font-size: 1rem; }
    .related-posts-grid { grid-template-columns: 1fr; }
}