disparaba el anillo global de :focus-visible (base.css) alrededor de todo el bloque de contenido — su borde inferior quedaba justo encima del pie, pareciendo una raya azul del pie. #main no es un control interactivo (solo recibe foco por script o por el enlace "Saltar al contenido"), así que se le quita el anillo aquí; el salto de foco en sí se mantiene para lectores de pantalla. */ #main:focus-visible{ outline:none; } /* ========================================================================== HERO EDITORIAL (Biblioteca) ========================================================================== */ .hero{ padding:2.2rem 0 1.5rem; max-width:640px; } .hero h1{ font-size:1.85rem; margin-bottom:.9rem; } .hero-lede{ font-size:.98rem; color:var(--color-text-secondary); line-height:1.55; } .hero-manifesto{ font-family:var(--serif); font-style:italic; font-size:1.02rem; color:var(--color-text-primary); border-left:2px solid var(--color-accent); padding-left:1rem; margin:1.3rem 0 .5rem; } .hero-secondary{ font-size:.85rem; color:var(--color-text-muted); } .hero-cta{ display:none; margin-top:1.6rem; font-size:.9rem; color:var(--color-accent); border-bottom:1px solid var(--color-accent-hover); padding-bottom:.2rem; transition:opacity var(--transition-fast); } .hero-cta:hover{ opacity:.75; } /* ========================================================================== LAYOUT DE DOS COLUMNAS (BIBLIOTECA) ========================================================================== */ .library-layout{ display:grid; grid-template-columns:380px 1fr; gap:3rem; align-items:start; } .library-aside{ position:sticky; top:1.5rem; max-height:calc(100vh - 3rem); overflow-y:auto; padding-right:1rem; margin-right:-1rem; scrollbar-width:thin; scrollbar-color:var(--color-border-strong) transparent; } .library-aside::-webkit-scrollbar{ width:6px; } .library-aside::-webkit-scrollbar-track{ background:transparent; } .library-aside::-webkit-scrollbar-thumb{ background:var(--color-border-strong); border-radius:99px; } .library-aside::-webkit-scrollbar-thumb:hover{ background:var(--color-accent-hover); } .library-notes{ min-width:0; } @media (max-width: 1024px){ .library-layout{ display:block; } .library-aside{ position:static; max-height:none; overflow-y:visible; padding-right:0; margin-right:0; } .hero-cta{ display:inline-block; } } /* ========================================================================== BUSCADOR Y FILTROS ========================================================================== */ .library-controls{ display:flex; flex-direction:column; gap:1.2rem; padding:1.5rem 0 2rem; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); } .search-wrap input{ width:100%; background:var(--color-surface-alt); border:1px solid var(--color-border-strong); border-radius:8px; padding:.7rem .9rem; color:var(--color-text-primary); font-size:.88rem; } .search-wrap input::placeholder{ color:var(--color-text-muted); font-size:.85rem; } .search-wrap input:focus-visible{ border-color:var(--color-accent-hover); } .filters{ display:flex; flex-wrap:wrap; gap:.5rem; } .filter-chip{ display:inline-flex; align-items:center; gap:.4rem; font-size:.74rem; color:var(--color-text-secondary); border:1px solid var(--color-border-strong); border-radius:99px; padding:.35rem .75rem; transition:border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast); } .filter-chip i{ font-size:.85em; } .filter-chip:hover{ color:var(--color-text-primary); border-color:var(--color-accent-hover); } .filter-chip.is-active{ color:var(--color-text-on-accent); background:var(--color-accent); border-color:var(--color-accent); font-weight:600; } /* ========================================================================== CUADRÍCULA DE THINKING NOTES ========================================================================== */ .notes-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.1rem; padding-top:2.4rem; } .note-card{ display:flex; flex-direction:column; gap:.7rem; padding:1.6rem; background:var(--color-surface-alt); border:1px solid var(--color-border); border-radius:var(--radius); transition:border-color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast); } .note-card:hover{ border-color:var(--color-accent-hover); } .note-card h3{ font-size:1.2rem; margin:0; } .note-card h3 a{ transition:color var(--transition-fast); } .note-card h3 a:hover{ color:var(--color-accent); } .note-card .card-subtitle{ font-size:.92rem; color:var(--color-text-secondary); margin:0; } .note-card .card-summary{ font-size:.88rem; color:var(--color-text-muted); margin:0; line-height:1.55; } .library-notes .note-card{ padding:1.3rem; gap:.55rem; } .library-notes .note-card h3{ font-size:1.1rem; } .library-notes .note-card .card-subtitle{ font-size:.88rem; } .library-notes .note-card .card-summary{ font-size:.84rem; } .card-concepts{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.2rem; } .card-concept-icon{ display:inline-flex; align-items:center; color:var(--color-accent); font-size:1rem; } .card-meta{ display:flex; align-items:center; gap:.8rem; font-size:.76rem; color:var(--color-text-muted); margin-top:.3rem; padding-top:.8rem; border-top:1px solid var(--color-border); } .card-meta .dot{ opacity:.5; } .card-meta .card-number{ font-family:var(--mono); color:var(--color-text-secondary); } .card-read-icon{ margin-left:auto; color:var(--color-accent); font-size:1.2rem; line-height:1; transition:transform var(--transition-fast), opacity var(--transition-fast); } .card-read-icon:hover{ transform:translateX(3px); opacity:.8; } .no-results{ padding:3rem 0; color:var(--color-text-muted); font-size:.95rem; } /* Paginación real (se regenera sola al añadir un TNxxx.json nuevo, ver script.js — no hay nada que tocar aquí al publicar contenido). */ .pagination{ display:flex; justify-content:center; align-items:center; gap:.6rem; padding-top:3rem; } .pagination button{ font-size:.85rem; color:var(--color-text-secondary); border:1px solid var(--color-border-strong); border-radius:6px; padding:.45rem .8rem; transition:border-color var(--transition-fast), color var(--transition-fast); } .pagination button:hover:not(:disabled){ color:var(--color-text-primary); border-color:var(--color-accent-hover); } .pagination button:disabled{ opacity:.35; cursor:default; } .pagination button.is-current{ color:var(--color-text-on-accent); background:var(--color-accent); border-color:var(--color-accent); } /* ========================================================================== VISTA DE LECTURA — NOTA ========================================================================== */ .back-link{ margin-top:2rem; font-size:.85rem; color:var(--color-text-secondary); } .back-link:hover{ color:var(--color-accent); } .note-header{ max-width:calc(var(--article-w) + 260px); margin:2rem auto 0; } .note-header h1{ font-size:clamp(1.8rem,4vw,2.5rem); margin-bottom:.7rem; } .note-subtitle{ font-size:1.08rem; color:var(--color-text-secondary); margin-bottom:1.2rem; } .note-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.82rem; color:var(--color-text-muted); margin-bottom:1.4rem; } .note-meta .note-number{ font-family:var(--mono); color:var(--color-text-secondary); } .note-meta .dot{ opacity:.5; } .meta-copy-link{ color:var(--color-text-muted); font-size:.9rem; transition:color var(--transition-fast); } .meta-copy-link:hover{ color:var(--color-accent); } .note-meta-concepts{ display:inline-flex; gap:.6rem; margin-left:auto; } .ai-disclosure{ margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid var(--color-border); } .ai-disclosure p{ font-size:.74rem; line-height:1.5; color:var(--color-text-muted); margin:0 0 .8rem; } .ai-disclosure dl{ display:flex; flex-direction:column; gap:.55rem; margin:0; font-size:.72rem; } .ai-disclosure .ai-pair{ display:flex; flex-direction:column; gap:.1rem; } .ai-disclosure dt{ font-weight:600; color:var(--color-text-muted); } .ai-disclosure dd{ margin:0; color:var(--color-text-secondary); } .note-body-layout{ display:grid; grid-template-columns:200px minmax(0,var(--article-w)); gap:3rem; justify-content:center; max-width:calc(var(--article-w) + 260px); margin:0 auto; } .note-toc{ position:relative; } .toc-sticky{ position:sticky; top:1.5rem; } .toc-desktop{ display:flex; flex-direction:column; gap:.6rem; } .toc-desktop a{ font-size:.82rem; color:var(--color-text-muted); border-left:2px solid var(--color-border-strong); padding-left:.8rem; transition:color var(--transition-fast), border-color var(--transition-fast); } .toc-desktop a:hover, .toc-desktop a.is-active{ color:var(--color-accent); border-color:var(--color-accent); } .toc-mobile{ display:none; } @media (max-width: 900px){ .note-body-layout{ grid-template-columns:1fr; max-width:var(--article-w); } .toc-sticky{ position:static; } .toc-desktop{ display:none; } .toc-mobile{ display:block; border:1px solid var(--color-border-strong); border-radius:8px; padding:.7rem 1rem; } .toc-mobile summary{ cursor:pointer; font-size:.85rem; color:var(--color-text-secondary); } .toc-mobile nav{ display:flex; flex-direction:column; gap:.5rem; margin-top:.8rem; } .toc-mobile nav a{ font-size:.85rem; color:var(--color-text-muted); } } .note-content{ font-size:1.05rem; line-height:1.85; color:var(--color-text-primary); } .note-content p{ margin:0 0 1.4em; } .note-content h2{ font-size:1.5rem; margin:2.6em 0 .8em; scroll-margin-top:1.5rem; } .note-content h3{ font-size:1.2rem; margin:2em 0 .7em; scroll-margin-top:1.5rem; } .note-content blockquote{ margin:1.8em 0; padding:.2em 0 .2em 1.3em; border-left:2px solid var(--color-accent); font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--color-text-secondary); } .note-content ul.content-list{ list-style:none; margin:1.6em 0; padding:0; } .note-content ul.content-list li{ position:relative; padding-left:1.4em; margin-bottom:.7em; color:var(--color-text-secondary); } .note-content ul.content-list li::before{ content:"—"; position:absolute; left:0; color:var(--color-accent); } .content-callout{ margin:2em 0; padding:1.2em 1.4em; background:var(--color-surface-alt); border:1px solid var(--color-border); border-left:2px solid var(--color-accent); border-radius:6px; font-size:.98rem; color:var(--color-text-secondary); } .content-callout .callout-label{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-accent); margin-bottom:.4em; } .content-figure{ margin:2.2em 0; } .content-figure .figure-placeholder{ border:1px solid var(--color-border-strong); border-radius:8px; background: linear-gradient(135deg, var(--color-surface-alt) 0%, var(--color-surface-tinted) 100%); min-height:220px; display:flex; align-items:center; justify-content:center; color:var(--color-text-muted); font-size:.8rem; } .content-figure figcaption{ font-size:.82rem; color:var(--color-text-muted); margin-top:.7em; } .content-diagram{ margin:2.2em 0; } .content-diagram .diagram-box{ border:1px solid var(--color-border-strong); border-radius:8px; padding:1.4rem; background:var(--color-surface-alt); } .content-diagram figcaption{ font-size:.82rem; color:var(--color-text-muted); margin-top:.7em; } .content-metric{ display:inline-flex; flex-direction:column; gap:.2rem; margin:2em 0; padding:1.2em 1.6em; border:1px solid var(--color-border); border-radius:8px; background:var(--color-surface-alt); } .content-metric .metric-value{ font-family:var(--serif); font-size:2.1rem; color:var(--color-accent); } .content-metric .metric-label{ font-size:.85rem; color:var(--color-text-muted); max-width:340px; } .note-content hr.content-separator{ border:none; border-top:1px solid var(--color-border-strong); margin:3em auto; width:60px; } .translation-notice{ max-width:calc(var(--article-w) + 260px); margin:1rem auto 0; font-size:.82rem; color:var(--color-text-muted); border:1px dashed var(--color-border-strong); border-radius:6px; padding:.7rem 1rem; } .related-notes{ max-width:calc(var(--article-w) + 260px); margin:3rem auto 0; } .related-notes h2{ font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted); margin-bottom:1.2rem; } .related-notes-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } .related-notes-grid .note-card{ padding:1.2rem; } .note-editorial-nav{ max-width:calc(var(--article-w) + 260px); margin:3rem auto 0; border-top:1px solid var(--color-border); padding-top:2rem; } .note-editorial-nav .back-link{ margin-top:0; } .contact-block{ max-width:calc(var(--article-w) + 260px); margin:1.6rem auto 0; display:grid; grid-template-columns:1fr auto; align-items:center; gap:2rem; } .contact-block p{ font-family:var(--serif); font-size:1.15rem; margin:0; white-space:pre-line; } .contact-cta-group{ display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; } @media (max-width: 900px){ .contact-block{ grid-template-columns:1fr; } } /* El CTA de contacto usa el componente .button.button--primary real de SetFile (components.css), no un botón propio de esta app. */ .contact-block .contact-hint{ font-style:italic; font-size:.78rem; color:var(--color-text-muted); white-space:normal; margin:0; } /* ========================================================================== PIE DE PÁGINA MÍNIMO ---------------------------------------------------------------------------- Sustituye al footer estándar (varias columnas de enlaces) por un único bloque: logo + textos a su derecha, sin listas de anclas. Fondo, padding y borde superior los pone .site-footer de SetFile (layout.css, con los mismos tokens --color-bg / --color-surface-alt de toda la página — nada propio de esta hoja); aquí solo se ordena el contenido de esa fila. ========================================================================== */ .tn-footer-minimal{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; } .tn-footer-minimal__text{ display:flex; flex-direction:column; gap:.2rem; } .tn-footer-minimal__text p{ margin:0; } /* ========================================================================== TOAST (aviso breve, p.ej. "enlace copiado") ========================================================================== */ .toast{ position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(10px); background:var(--color-accent); color:var(--color-text-on-accent); font-size:.85rem; font-weight:600; padding:.7rem 1.2rem; border-radius:8px; opacity:0; pointer-events:none; transition:opacity var(--transition-fast), transform var(--transition-fast); z-index:400; } .toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); } /* ========================================================================== IMPRESIÓN ========================================================================== */ @media print{ .reading-progress, .note-toc, .note-editorial-nav, .related-notes, .contact-block, .back-link{ display:none !important; } .note-body-layout{ grid-template-columns:1fr; } }