/* ==========================================================================
   GENERIC LABS — Design system
   Dark first · Green as signal · System over decoration
   Derivado del brand book: tokens, tipografía, cards-módulo, system labels.
   ========================================================================== */

:root {
    /* Fallback tokens — pueden sobrescribirse desde SiteSettings (brand-primary/deep) */
    --brand-accent: #A4FF68;

    --bg: #090B0A;
    --surface: #111512;
    --surface-2: #171C18;

    --border: #29332C;

    --text: #F1F4F0;
    --text-secondary: #A5AEA7;
    --text-muted: #69736C;

    --success: #79D84B;
    --warning: #E8C65A;
    --error: #E45C5C;
    --info: #6BA7FF;

    --font-display: "Space Grotesk", sans-serif;
    --font-body: "Inter", sans-serif;
    --font-mono: "JetBrains Mono", monospace;

    --radius-sm: 4px;
    --radius-md: 6px;

    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
}

* { box-sizing: border-box; }

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
}

/* Grid técnico de fondo — opacidad muy baja, nunca compite con el contenido */
body {
    background-image:
        linear-gradient(rgba(241, 244, 240, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(241, 244, 240, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
}

h1, h2, h3, h4, .display {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

h1 { font-size: 56px; font-weight: 700; }
h2 { font-size: 40px; font-weight: 650; }
h3 { font-size: 28px; font-weight: 600; }
h4 { font-size: 22px; font-weight: 600; }
small, .small { font-size: 14px; }
.caption { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }

@media (max-width: 768px) {
    h1 { font-size: 36px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
}

a { color: var(--brand-primary, var(--success)); text-decoration: none; transition: color 120ms ease; }
a:hover { color: var(--brand-accent); }

p { color: var(--text-secondary); }

code, .mono, .system-label {
    font-family: var(--font-mono);
}

/* ---------- Navbar ---------- */
.navbar-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--brand-primary, var(--success));
    border-radius: var(--radius-sm);
    margin-right: var(--space-3);
    position: relative;
}
.navbar-brand-mark::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1.5px solid var(--brand-primary, var(--success));
    border-radius: 2px;
}

.navbar.navbar-lab {
    background: var(--bg) !important;
    border-bottom: 1px solid var(--border);
}
.navbar-lab .navbar-brand {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text) !important;
    text-transform: uppercase;
    font-size: 18px;
}
.navbar-lab .nav-link {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary) !important;
    padding: 0.5rem 1rem !important;
}
.navbar-lab .nav-link:hover,
.navbar-lab .nav-link.active {
    color: var(--brand-primary, var(--success)) !important;
}

/* ---------- System labels ---------- */
.system-label {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
}
.system-label--accent {
    color: var(--brand-primary, var(--success));
    border-color: var(--brand-primary, var(--success));
}
/* Etiqueta de sistema que además es un enlace (PRIVACY en el pie): se pinta
   igual que las de al lado y solo se ilumina al pasar por encima, para que la
   fila del pie se lea como una hilera de indicadores y no como un menú. */
.system-label--link {
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.system-label--link:hover,
.system-label--link:focus-visible {
    color: var(--brand-primary, var(--success));
    border-color: var(--brand-primary, var(--success));
}
.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-primary, var(--success));
    margin-right: 6px;
    box-shadow: 0 0 6px var(--brand-primary, var(--success));
}

/* ---------- Hero ---------- */
.hero {
    padding: var(--space-8) 0 var(--space-7);
    position: relative;
}
.hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--brand-primary, var(--success));
    text-transform: uppercase;
    margin-bottom: var(--space-4);
    display: block;
}
.hero h1 {
    font-size: 64px;
    line-height: 1.05;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}
.hero h1 .accent { color: var(--brand-primary, var(--success)); }
.hero-sub {
    max-width: 560px;
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}
@media (max-width: 768px) {
    .hero h1 { font-size: 40px; }
}

/* ---------- Buttons ---------- */
.btn-brand {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background-color: var(--brand-primary, var(--success));
    border: 1px solid var(--brand-primary, var(--success));
    color: var(--bg);
    border-radius: var(--radius-sm);
    padding: 0.55rem 1.1rem;
}
.btn-brand:hover { background-color: var(--brand-accent); border-color: var(--brand-accent); color: var(--bg); }

.btn-outline-lab {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 0.55rem 1.1rem;
}
.btn-outline-lab:hover { border-color: var(--brand-primary, var(--success)); color: var(--brand-primary, var(--success)); }

/* ---------- Cards / módulos de sistema ---------- */
.module-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    height: 100%;
    transition: border-color 150ms ease;
}
.module-card:hover { border-color: var(--brand-primary, var(--success)); }

.module-index {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: var(--space-3);
}
.module-index .n { color: var(--brand-primary, var(--success)); }

.module-card img {
    width: 100%;
    object-fit: cover;
    height: 190px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
    filter: grayscale(15%);
}

.module-card h5 {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text);
    margin-bottom: var(--space-2);
}

.module-link {
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-primary, var(--success));
}
.module-link:hover { color: var(--brand-accent); }

/* ---------- Badges / tags ---------- */
.badge-tech {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    margin: 0 4px 4px 0;
    display: inline-block;
}

/* ---------- Node graphic (elemento gráfico propietario) ---------- */
/* ---------- Knowledge graph ---------- */
/* Portado de la landing tal cual: misma geometría en home.html y estos mismos
   estilos. Sustituye al antiguo .node-graphic, que era una retícula de líneas
   rectas; este usa curvas Bézier y tres pesos de nodo, y se lee mucho mejor
   como grafo. Los colores salen de los tokens, así que sigue la marca de
   SiteSettings sin tocar nada aquí. */
.graph-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.knowledge-graph {
    width: min(100%, 520px);
    height: auto;
    /* Los nodos de los bordes tienen radio y trazo: sin esto el viewBox los
       recorta por la mitad. */
    overflow: visible;
}

.graph-edges .edge {
    fill: none;
    stroke: var(--border);
    stroke-width: 1.2;
    stroke-linecap: round;
}
/* Las dos aristas que cierran el circuito, un punto por detrás de las demás. */
.graph-edges .edge--secondary {
    stroke: var(--brand-deep, #19351F);
    stroke-width: 1;
}

.graph-nodes .node {
    fill: var(--bg);
    stroke: var(--text-muted);
    stroke-width: 1.5;
}
.graph-nodes .node--active {
    fill: var(--brand-primary, var(--success));
    stroke: var(--brand-primary, var(--success));
}
.graph-nodes .node--small {
    fill: var(--text-muted);
    stroke: none;
    opacity: .45;
}

/* Entrada escalonada de las aristas, como en la landing. `both` y no `forwards`:
   con `forwards` la arista se ve durante su retardo y luego parpadea de 0 a 1,
   porque el fotograma inicial no se aplica hasta que arranca la animación. */
.graph-edges .edge {
    opacity: 0;
    animation: edgeAppear 1s forwards;
    animation-fill-mode: both;
}
.graph-edges .edge:nth-child(1) { animation-delay: 0.2s; }
.graph-edges .edge:nth-child(2) { animation-delay: 0.4s; }
.graph-edges .edge:nth-child(3) { animation-delay: 0.6s; }
.graph-edges .edge:nth-child(4) { animation-delay: 0.8s; }
.graph-edges .edge:nth-child(5) { animation-delay: 1.0s; }
.graph-edges .edge:nth-child(6) { animation-delay: 1.2s; }
.graph-edges .edge:nth-child(7) { animation-delay: 1.4s; }
.graph-edges .edge:nth-child(8) { animation-delay: 1.6s; }
.graph-edges .edge:nth-child(9) { animation-delay: 1.8s; }

@keyframes edgeAppear {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Quien haya pedido menos movimiento al sistema ve el grafo ya montado. */
@media (prefers-reduced-motion: reduce) {
    .graph-edges .edge {
        opacity: 1;
        animation: none;
    }
}

@media (max-width: 900px) {
    .graph-container { min-height: 320px; }
}
@media (max-width: 500px) {
    .graph-container { min-height: 260px; }
}

/* ---------- Content (posts/pages) ---------- */
.content { color: var(--text-secondary); }
.content h2, .content h3 { color: var(--text); margin-top: var(--space-6); }
.content a { text-decoration: underline; }
.content pre, .content code {
    font-family: var(--font-mono);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.content pre { padding: var(--space-4); overflow-x: auto; }
.content code { padding: 2px 5px; font-size: 14px; }
.content img { max-width: 100%; border-radius: var(--radius-sm); }

/* ---------- Páginas legales ---------- */
/* Recuadro de resumen al principio de la política de privacidad. El RGPD pide
   que la información sea «concisa, transparente e inteligible» (art. 12), y
   nadie lee diez apartados: lo que importa va aquí arriba y en una frase. */
.legal-summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 2px solid var(--brand-primary, var(--success));
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}
.legal-summary ul { margin: 0; padding-left: var(--space-5); }
.legal-summary li { margin-bottom: var(--space-2); }
.legal-summary li:last-child { margin-bottom: 0; }

/* Cabecera de la página legal: fecha de actualización y cambio de idioma. */
.legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-6);
}

/* ---------- Footer ---------- */
.footer-lab {
    border-top: 1px solid var(--border);
    background: var(--bg);
    padding: var(--space-6) 0;
}
.footer-lab .brand-line {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text);
}
/* El bloque ABOUT es un enlace: conserva el look de brand-line y solo marca el hover */
.footer-lab a.brand-line {
    display: inline-block;
    color: var(--text);
}
.footer-lab a.brand-line:hover { color: var(--brand-primary, var(--success)); }
.footer-lab a.social-icon {
    color: var(--text-secondary);
    font-size: 18px;
}
.footer-lab a.social-icon:hover { color: var(--brand-primary, var(--success)); }

/* ---------- Pagination ---------- */
.pagination .page-link {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 13px;
}
.pagination .page-link:hover { color: var(--brand-primary, var(--success)); }
.pagination .disabled .page-link { background: transparent; }

/* ---------- Sidebar ---------- */
.sidebar-title {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}
.sidebar-list a {
    display: block;
    padding: 6px 0;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 15px;
}
.sidebar-list a:hover { color: var(--brand-primary, var(--success)); }