/**
 * Letrases — Estilos del sitio público.
 * Importa tokens y componentes, luego define layouts de cada página.
 * "Menos interfaz. Más literatura." (01_Branding.md)
 */
@import url('tokens.css');
@import url('components.css');

/* === Site Header (Navbar: Logo + Buscador + Menú + Perfil) === */
.lt-site-header {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-16) var(--space-24);
    background: var(--color-background);
    position: sticky; top: 0; z-index: 100;
}
.lt-site-header__inner {
    max-width: var(--max-width); margin: 0 auto;
    display: flex; align-items: center; gap: var(--space-24);
}
.lt-site-header__logo {
    font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700;
    color: var(--color-text); text-decoration: none; flex-shrink: 0;
}
.lt-site-header__search {
    flex: 1; max-width: 360px;
    padding: var(--space-8) var(--space-16);
    border: 1px solid var(--color-border); border-radius: var(--radius);
    font-size: var(--text-small); font-family: var(--font-body);
}
.lt-site-header__search:focus { outline: none; border-color: var(--color-accent); }
.lt-site-header__menu {
    list-style: none; display: flex; gap: var(--space-24); margin: 0; padding: 0; margin-left: auto;
}
.lt-site-header__menu a {
    color: var(--color-text); text-decoration: none; font-size: var(--text-small); font-weight: 500;
    transition: color var(--transition-fast);
}
.lt-site-header__menu a:hover { color: var(--color-accent); }

/* === Hero (portada, 17_Paginas.md → "Inicio") === */
.lt-hero {
    text-align: center; padding: var(--space-96) var(--space-24) var(--space-64);
    max-width: var(--max-width); margin: 0 auto;
}
.lt-hero__title {
    font-family: var(--font-heading); font-size: var(--text-h1); font-weight: 700;
    margin-bottom: var(--space-16); letter-spacing: -0.02em;
}
.lt-hero__subtitle {
    font-size: 1.25rem; color: var(--color-muted); max-width: 540px; margin: 0 auto var(--space-32);
}
.lt-hero__cta { display: inline-flex; gap: var(--space-12); }

/* === Secciones de portada === */
.lt-section {
    max-width: var(--max-width); margin: 0 auto;
    padding: var(--space-64) var(--space-24);
}
.lt-section__header {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: var(--space-32);
}
.lt-section__title {
    font-family: var(--font-heading); font-size: var(--text-h3); font-weight: 600;
}
.lt-section__link { font-size: var(--text-small); color: var(--color-accent); }

/* === Grid de tarjetas === */
.lt-grid {
    display: grid; gap: var(--space-32);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.lt-grid--2 { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.lt-grid--authors { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* === Publicación individual (la página más importante, 17_Paginas.md) === */
.lt-publication {
    max-width: var(--max-width-reading); margin: 0 auto;
    padding: var(--space-64) var(--space-24) var(--space-96);
}
.lt-publication__header { margin-bottom: var(--space-48); }
.lt-publication__title {
    font-family: var(--font-heading); font-size: var(--text-h1); font-weight: 700;
    line-height: 1.15; margin-bottom: var(--space-16); letter-spacing: -0.02em;
}
.lt-publication__subtitle {
    font-size: 1.25rem; color: var(--color-muted); margin-bottom: var(--space-24);
}
.lt-publication__meta {
    display: flex; align-items: center; gap: var(--space-16);
    font-size: var(--text-small); color: var(--color-muted);
}
.lt-publication__author-link { display: flex; align-items: center; gap: var(--space-8); color: var(--color-text); font-weight: 500; }
.lt-publication__content {
    font-size: var(--text-body); line-height: var(--line-height);
}
.lt-publication__content p { margin-bottom: 1.5em; }
.lt-publication__content h2 {
    font-family: var(--font-heading); font-size: var(--text-h3);
    margin: 2em 0 0.5em;
}
.lt-publication__content blockquote {
    border-left: 3px solid var(--color-accent); padding-left: var(--space-24);
    color: var(--color-muted); font-style: italic; margin: 1.5em 0;
}
.lt-publication__tags { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-48); }
.lt-publication__tags a {
    padding: var(--space-4) var(--space-12); border: 1px solid var(--color-border);
    border-radius: var(--radius-round); font-size: 0.8rem; color: var(--color-muted);
}
.lt-publication__tags a:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* === Author bio al pie de publicación === */
.lt-author-bio {
    display: flex; gap: var(--space-24); align-items: flex-start;
    padding: var(--space-32); margin-top: var(--space-64);
    border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.lt-author-bio__text { flex: 1; }
.lt-author-bio__name { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; margin-bottom: var(--space-4); }
.lt-author-bio__description { font-size: var(--text-small); color: var(--color-muted); }

/* === Perfil público del autor (17_Paginas.md → "Perfil del autor") === */
.lt-author-profile {
    max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-24) var(--space-96);
}
.lt-author-profile__banner {
    width: 100%; height: 240px; object-fit: cover; border-radius: 0 0 var(--radius) var(--radius);
    background: var(--color-surface);
}
.lt-author-profile__header {
    display: flex; align-items: flex-end; gap: var(--space-24);
    margin-top: -48px; padding: 0 var(--space-32); margin-bottom: var(--space-32);
}
.lt-author-profile__avatar {
    width: 120px; height: 120px; border-radius: var(--radius-round);
    border: 4px solid var(--color-background); object-fit: cover;
}
.lt-author-profile__info { flex: 1; padding-bottom: var(--space-8); }
.lt-author-profile__name { font-family: var(--font-heading); font-size: var(--text-h2); font-weight: 700; }
.lt-author-profile__bio { color: var(--color-muted); margin-top: var(--space-8); }
.lt-author-profile__stats {
    display: flex; gap: var(--space-32); font-size: var(--text-small); color: var(--color-muted);
    margin-top: var(--space-12);
}
.lt-author-profile__stats strong { color: var(--color-text); }

/* === Revista (ya existente, actualizo con tokens) === */
.lt-magazine { max-width: var(--max-width-reading); margin: 0 auto; padding: var(--space-48) var(--space-24) var(--space-96); }
.lt-magazine__title { font-family: var(--font-heading); font-size: var(--text-h1); font-weight: 700; margin: var(--space-24) 0 var(--space-4); letter-spacing: -0.02em; }
.lt-magazine__date { color: var(--color-muted); font-size: var(--text-small); }
.lt-magazine__editorial, .lt-magazine__call {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: var(--space-32); margin-bottom: var(--space-48);
}
.lt-magazine__editorial h2, .lt-magazine__call h2, .lt-magazine__section h2 {
    font-family: var(--font-heading); font-size: 1.5rem; margin-top: 0;
}
.lt-magazine__article-card { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-24); margin-bottom: var(--space-24); }
.lt-magazine__article-card h3 { font-family: var(--font-heading); font-size: 1.15rem; margin: 0 0 var(--space-8); }
.lt-magazine__article-card a { color: var(--color-text); }
.lt-magazine__article-card a:hover { color: var(--color-accent); }
.lt-magazine__article-excerpt { color: var(--color-muted); font-size: var(--text-small); }
.lt-magazine__article-author { font-size: 0.85rem; color: var(--color-muted); }

/* === Archivo revista === */
.lt-magazine-archive { max-width: var(--max-width); margin: 0 auto; padding: var(--space-48) var(--space-24) var(--space-96); }
.lt-magazine-archive h1 { font-family: var(--font-heading); font-size: var(--text-h2); margin-bottom: var(--space-48); }
.lt-magazine-archive__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-24);
}
.lt-magazine-archive__card { text-decoration: none; color: var(--color-text); }
.lt-magazine-archive__card img { width: 100%; border-radius: var(--radius); aspect-ratio: 3/2; object-fit: cover; }
.lt-magazine-archive__card-title { font-family: var(--font-heading); font-size: 1rem; margin-top: var(--space-8); }

/* === Explorar / Buscar (17_Paginas.md → "Explorar") === */
.lt-explore { max-width: var(--max-width); margin: 0 auto; padding: var(--space-48) var(--space-24); }

.lt-explore__header { margin-bottom: var(--space-32); }
.lt-explore__title {
    font-family: var(--font-heading); font-size: var(--text-h1);
    font-weight: 600; line-height: 1.1; margin-bottom: var(--space-8);
}
.lt-explore__intro { color: var(--color-muted); max-width: 56ch; }

/* Buscador: es lo primero que se ve y lo que más se usa, así que manda. */
.lt-explore__search {
    display: flex; gap: var(--space-8); margin-bottom: var(--space-24);
    max-width: 680px;
}
.lt-explore__input {
    flex: 1; min-width: 0;
    padding: var(--space-12) var(--space-16);
    font-family: var(--font-body); font-size: var(--text-body);
    color: var(--color-text); background: var(--color-background);
    border: 1px solid var(--color-border); border-radius: var(--radius);
    transition: border-color var(--transition-fast);
}
.lt-explore__input:focus { outline: none; border-color: var(--color-accent); }
.lt-explore__input::placeholder { color: var(--color-muted); }

.lt-explore__filters {
    display: flex; flex-wrap: wrap; gap: var(--space-24) var(--space-32);
    padding: var(--space-24) 0; margin-bottom: var(--space-24);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.lt-explore__filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.lt-explore__filter-group--end { margin-left: auto; }
.lt-explore__filter-label {
    font-size: var(--text-small); font-weight: 600; color: var(--color-muted);
    width: 100%; margin-bottom: var(--space-4);
}
.lt-explore__filter-group--end .lt-explore__filter-label { width: auto; margin-bottom: 0; }

/* Filtros como "chips": se ven todos los géneros de un vistazo. */
.lt-chip {
    display: inline-flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4) var(--space-12);
    font-size: var(--text-small); color: var(--color-text);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-round); text-decoration: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.lt-chip:hover { border-color: var(--color-accent); }
.lt-chip.is-active {
    background: var(--color-accent); border-color: var(--color-accent);
    color: var(--color-white);
}
.lt-chip__count { font-size: 0.75rem; opacity: .7; }

.lt-select--inline { width: auto; }

.lt-explore__summary {
    display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap;
    font-size: var(--text-small); color: var(--color-muted);
    margin-bottom: var(--space-24);
}
.lt-explore__clear { color: var(--color-accent); }

.lt-explore__section-title {
    font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600;
    margin-bottom: var(--space-16);
}
.lt-explore__authors { margin-bottom: var(--space-48); }

/* Mientras se recargan los resultados, se atenúa en vez de desaparecer: si
 * la lista parpadeara a blanco, filtrar daría sensación de lentitud. */
#lt-explore-results.is-loading { opacity: .5; transition: opacity var(--transition-fast); }

/* La tarjeta de autor es un enlace completo en los resultados. */
a.lt-author-card { text-decoration: none; color: inherit; }
.lt-author-card__count { font-size: 0.8rem; color: var(--color-muted); margin-top: var(--space-4); }

.lt-badge--genero { margin-bottom: var(--space-8); }

/* === Una colección ===
 * Se lee como el índice de un libro: cabecera, y los textos numerados en el
 * orden que eligió quien la hizo.
 */
.lt-collection { max-width: var(--max-width-reading); margin: 0 auto; padding: var(--space-48) var(--space-24); }

.lt-collection__header { margin-bottom: var(--space-48); text-align: center; }
.lt-collection__cover {
    width: 100%; height: auto; border-radius: var(--radius);
    margin-bottom: var(--space-32); display: block;
}
.lt-collection__eyebrow {
    text-transform: uppercase; letter-spacing: .08em;
    font-size: 0.75rem; font-weight: 600; color: var(--color-accent);
    margin-bottom: var(--space-8);
}
.lt-collection__title {
    font-family: var(--font-heading); font-size: var(--text-h1);
    font-weight: 600; line-height: 1.1; margin-bottom: var(--space-16);
}
.lt-collection__description {
    font-size: 1.15rem; color: var(--color-muted);
    max-width: 56ch; margin: 0 auto var(--space-16);
}
.lt-collection__meta { font-size: var(--text-small); color: var(--color-muted); }
.lt-collection__meta a { color: var(--color-accent); }
.lt-collection__intro { margin-top: var(--space-24); text-align: left; }

.lt-collection__list { list-style: none; padding: 0; margin: 0; }
.lt-collection__item {
    display: flex; gap: var(--space-24);
    padding: var(--space-32) 0;
    border-top: 1px solid var(--color-border);
}
.lt-collection__number {
    flex-shrink: 0; width: 40px;
    font-family: var(--font-heading); font-size: 1.5rem;
    color: var(--color-border); text-align: right; line-height: 1.2;
}
.lt-collection__item-body { flex: 1; min-width: 0; }
.lt-collection__item-title {
    font-family: var(--font-heading); font-size: 1.6rem; font-weight: 600;
    line-height: 1.2; margin-bottom: var(--space-8);
}
.lt-collection__item-title a { color: var(--color-text); text-decoration: none; }
.lt-collection__item-title a:hover { color: var(--color-accent); }
.lt-collection__item-excerpt { color: var(--color-muted); margin-bottom: var(--space-8); }
.lt-collection__item-meta { font-size: var(--text-small); color: var(--color-muted); }

.lt-collection__more { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-24) var(--space-96); }

@media (max-width: 600px) {
    .lt-collection__item { gap: var(--space-16); }
    .lt-collection__number { width: 24px; font-size: 1.1rem; }
    .lt-collection__item-title { font-size: 1.3rem; }
}

/* === Paginación === */
.lt-pagination {
    display: flex; justify-content: center; align-items: center;
    gap: var(--space-8); margin-top: var(--space-48);
}
.lt-page {
    min-width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 var(--space-8);
    font-size: var(--text-small); color: var(--color-text); text-decoration: none;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast);
}
.lt-page:hover { border-color: var(--color-accent); color: var(--color-accent); }
.lt-page.is-active {
    background: var(--color-accent); border-color: var(--color-accent);
    color: var(--color-white); font-weight: 600;
}

/* === Accesibilidad: texto solo para lectores de pantalla ===
 * Se usa para etiquetas de formulario y para el aviso de resultados, que
 * deben existir para quien usa un lector pero no ocupar espacio visual.
 */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* === Comentarios === */
.lt-comments { max-width: var(--max-width-reading); margin: var(--space-48) auto 0; padding: 0 var(--space-24); }
.lt-comments__title { font-family: var(--font-heading); font-size: 1.3rem; margin-bottom: var(--space-24); }
.lt-comment {
    display: flex; gap: var(--space-16); padding: var(--space-16) 0;
    border-bottom: 1px solid var(--color-border);
}
.lt-comment__body { flex: 1; }
.lt-comment__author { font-weight: 500; font-size: var(--text-small); }
.lt-comment__date { font-size: 0.8rem; color: var(--color-muted); }
.lt-comment__text { font-size: var(--text-small); margin-top: var(--space-4); }

/* === Footer === */
.lt-site-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-48) var(--space-24);
    margin-top: var(--space-64);
}
.lt-site-footer__inner {
    max-width: var(--max-width); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    font-size: var(--text-small); color: var(--color-muted);
}
.lt-site-footer__menu {
    list-style: none; display: flex; gap: var(--space-16); margin: 0; padding: 0;
}

/* === 404 (17_Paginas.md → "Página 404: debe ser útil") === */
.lt-404 { text-align: center; padding: var(--space-128) var(--space-24); }
.lt-404 h1 { font-family: var(--font-heading); font-size: var(--text-h1); }

/* === Responsive (Mobile First, 320px → 4K) === */
@media (max-width: 768px) {
    :root { --text-h1: 2.2rem; --text-h2: 1.7rem; --text-h3: 1.4rem; }
    .lt-site-header__search { display: none; }
    .lt-site-header__menu { gap: var(--space-16); }
    .lt-hero { padding: var(--space-48) var(--space-16) var(--space-32); }
    .lt-author-profile__header { flex-direction: column; align-items: center; text-align: center; }
    .lt-author-profile__avatar { margin-top: -60px; }
    .lt-author-bio { flex-direction: column; text-align: center; }
}