@font-face {
    font-family: "Gabii";
    src: url("/media/fonts/gabii-Regular.woff2") format("woff2"),
         url("fonts/gabii-Regular.woff2") format("woff2"),
         url("/media/fonts/gabii-Regular.woff") format("woff"),
         url("fonts/gabii-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Obviously";
    src: url("/media/fonts/Obviously.woff2") format("woff2"),
         url("fonts/Obviously.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}



/* Definimos variables para que sea fácil cambiar */

:root {

    --bg: #f5f7f9;

    --card: #ffffff;

    --text: #1a1a1a;

    --text-muted: #666;

}



/* Forzamos que el fondo del cuerpo cambie */

/* --- FIX DEFINITIVO MODO OSCURO --- */



/* 1. Fondo general */

body.dark-theme {

    background-color: #0f172a !important;

}



/* 2. Caja del artículo y barras */

body.dark-theme .article-box,

body.dark-theme .post-info-bar,

body.dark-theme .post-page-header,

body.dark-theme .nav-box {

    background-color: #1e293b !important;

    border-color: #334155 !important;

    color: #f8fafc !important;

}

body.dark-theme .article-box::before {

    color: #334155 !important; /* Un gris sutil para que se vea sobre el azul oscuro */

}

/* 3. El MARTILLO para el texto: 

   Atacamos a todos los contenedores posibles (article-content, entry-content, content-area) 

   y a todos sus hijos (*) */

body.dark-theme .article-content *,

body.dark-theme .entry-content *,

body.dark-theme .content-area *,

body.dark-theme .post-title,

body.dark-theme .entry-title,

body.dark-theme h1,

body.dark-theme h2,

body.dark-theme h3,

body.dark-theme p,

body.dark-theme li,

body.dark-theme span,

body.dark-theme strong {

    color: #f8fafc !important;

}



/* 4. Corregimos el texto muteado (fechas, autores) */

body.dark-theme .post-date,

body.dark-theme .meta-text span,

body.dark-theme .author-data span {

    color: #94a3b8 !important;

}
/* Header del Post */

.post-header-detail {

    padding: 80px 0 40px;

    max-width: 900px;

    margin: 0 auto;

    text-align: center;

}



.category-tag {

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: 12px;

    font-weight: 800;

    color: var(--accent);

    margin-bottom: 20px;

    display: block;

}


h1 {
    font-family: 'Obviously', 'Gabii', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin: 0 auto 30px;
}

/* Autor y Meta */
.post-meta-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0f0f0;
}

.meta-info { text-align: left; }
.meta-info b { display: block; font-size: 15px; }
.meta-info span { color: var(--text-light); font-size: 13px; }

/* Imagen Destacada */
.featured-wrapper {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

.featured-wrapper img {
    width: 100%;
    height: 60vh;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Cuerpo del Contenido (El truco del SEO) */
.content-area {
    max-width: 740px; /* Ancho ideal de lectura */
    margin: 60px auto;
    padding: 0 25px;
    font-size: 1.25rem; /* 20px para lectura fluida */
    line-height: 1.8;
    color: #333;
}

.content-area h2 {
    font-family: 'Gabii', sans-serif;
    font-size: 2rem;
    margin: 50px 0 20px;
    letter-spacing: -0.02em;
}

.content-area p { margin-bottom: 30px; }

/* Botón Volver */
.back-container {
    text-align: center;
    padding: 80px 0;
    border-top: 1px solid #eee;
    margin-top: 80px;
}

.btn-minimal {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
    padding: 12px 25px;
    border: 1px solid #ddd;
    border-radius: 50px;
    transition: all 0.3s;
}

.btn-minimal:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* RESET Y BASES */
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
body { background: #fff; color: #111; font-family: 'Gabii', system-ui, sans-serif; margin: 0; }

.post-layout { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* HERO SECTION */
.post-hero { padding: 80px 0 60px; max-width: 800px; margin: 0 auto; text-align: center; }

.breadcrumb { font-size: 13px; color: #888; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 1px; }
.breadcrumb a { color: #888; text-decoration: none; }

.entry-title { font-family: 'Obviously', 'Gabii', sans-serif; font-size: clamp(32px, 5vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: 0; margin-bottom: 25px; }

.entry-excerpt { font-size: 20px; color: #555; line-height: 1.5; margin-bottom: 40px; font-weight: 400; }

.entry-meta { display: flex; align-items: center; justify-content: center; gap: 12px; }
.avatar-mini { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; }
.meta-text { text-align: left; line-height: 1.3; }
.author-name { display: block; font-size: 15px; }
.publish-date,
.edited-date { display: block; font-size: 13px; color: #888; }
.edited-date { margin-top: 2px; color: #6b7280; }

/* IMAGEN */
.main-featured-image img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}

/* EL CONTENIDO DINÁMICO (Crucial) */
/* .entry-content { 
    max-width: 700px; 
    margin: 80px auto; 
    font-size: 19px; 
    line-height: 1.8; 
    color: #2c2c2c;
} */

/* Estilando lo que viene de Filament */
.entry-content p { margin-bottom: 30px; }
.entry-content h2 { font-size: 32px; margin-top: 60px; letter-spacing: -0.02em; }
.entry-content h3 { font-size: 24px; margin-top: 40px; }

/* Citas */
.entry-content blockquote {
    border-left: 4px solid #000;
    padding-left: 30px;
    font-style: italic;
    font-size: 24px;
    margin: 50px 0;
    color: #444;
}

/* Imágenes dentro del texto */
.entry-content img {
    display: block;
    width: min(100%, 800px);
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 40px auto;
}

/* Listas */
.entry-content ul { padding-left: 20px; margin-bottom: 30px; }
.entry-content li { margin-bottom: 10px; }

/* --- RESPONSIVE TEXT --- */
@media (max-width: 768px) {
    .article-content {
        padding: 30px 20px !important; /* Menos margen en móvil */
        font-size: 20px !important; /* Texto más grande para pulgares y ojos cansados */
    }
    .post-title { font-size: 32px !important; }
}

/* --- RATING SYSTEM --- */
.rating-section {
    margin-bottom: 40px;
    padding: 20px;
    background: #fdfdfd;
    border-radius: 12px;
    border: 1px dashed #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stars { display: flex; flex-direction: row-reverse; gap: 5px; }

/* Color gris por defecto */
.star {
    font-size: 30px;
    color: #ccc;
    cursor: pointer;
}

/* Color amarillo para hover y para cuando está ACTIVA */
.star.active, 
.star.active ~ .star {
    color: #ffcc00 !important;
}

/* Bloqueo visual cuando ya ha votado */
.rating-section.voted {
    cursor: default;
}

.star:hover, .star:hover ~ .star, .star.active, .star.active ~ .star {
    color: #ffcc00;
    transform: scale(1.1);
}

.rating-text { font-size: 14px; color: #888; margin-top: 10px; font-weight: 600; }


/*blockquote*/


/*aside*/

/* NAVEGACIÓN SIGUIENTE/ANTERIOR */
.post-navigation {
    display: flex;
    gap: 20px;
    margin-top: 60px;
}

.nav-box {
    flex: 1;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #eee;
    text-decoration: none;
    color: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.nav-box:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); border-color: #fe5c5c; }

.nav-img { width: 100px; height: 100px; background-size: cover; background-position: center; transition: transform 0.5s; }
.nav-box:hover .nav-img { transform: scale(1.1); }

.nav-content { padding: 20px; flex: 1; }
.nav-content span { font-size: 11px; font-weight: 800; color: #fe5c5c; display: block; margin-bottom: 5px; }
.nav-content strong { font-size: 15px; display: block; line-height: 1.3; }
/*blockquote*/
/* --- REDISEÑO EXCERPT TXERPA --- */
/* --- EXCERPT ESTILO EDITORIAL (BARRA ROJA) --- */
/* --- EXCERPT EDITORIAL TXERPA --- */
.post-excerpt-wrapper {
    margin: 40px auto;
    max-width: 800px;
    padding: 0 20px;
}

.excerpt-content {
    display: flex; /* Alinea la barra y el texto en paralelo */
    align-items: stretch; /* Obliga a la barra a estirarse al alto del texto */
    background-color: #f3f4f6; /* Fondo gris sutil */
    padding: 20px 25px;
    border-radius: 8px;
    gap: 20px; /* Espacio entre la barra y el texto */
}

.excerpt-decoration {
    width: 4px; /* Grosor de la línea */
    background-color: #22c55e; /* Verde Filament/Txerpa */
    flex-shrink: 0; /* Evita que la línea se estreche si el texto es largo */
    border-radius: 10px;
}

.excerpt-content p {
    margin: 0; /* Eliminamos márgenes que vienen por defecto */
    font-size: 1.25rem;
    line-height: 1.6;
    color: #374151;
    font-weight: 500;
    font-style: italic; /* Opcional: para darle aire de entradilla */
}

/* --- MODO OSCURO --- */
body.dark-theme .excerpt-content {
    background-color: #1f2937;
}

body.dark-theme .excerpt-content p {
    color: #e5e7eb;
}

body.dark-theme .excerpt-decoration {
    background-color: #4ade80;
}



/* --- SIDEBAR DE "CHICHA" (Lado izquierdo vacío) --- */
@media (min-width: 1200px) {
    .article-box { position: relative; }
    .article-box::before {
        content: "TXERPA INSIGHTS 2025";
        position: absolute;
        left: -120px;
        top: 100px;
        transform: rotate(-90deg);
        font-size: 12px;
        font-weight: 900;
        color: #eee;
        letter-spacing: 5px;
    }
}

/* Barra de progreso de lectura arriba */
.reading-progress {
    position: fixed;
    top: 0; left: 0; width: 0%; height: 4px;
    background: linear-gradient(to right, #fe5c5c, #ffcc00);
    z-index: 9999;
}