/* blog.css — hoja compartida del blog. Reutiliza los tokens de la portada.
   Si cambias un color aquí, cambia también en index.html (misma paleta). */

:root {
  --bg: #10141a; --surface: #1c2026; --surface-2: #262a31; --line: #2c333b; --line-2: #3b4550;
  --ink: #dfe2eb; --soft: #9fb0a6; --electric: #00ff9d; --electric-ink: #0b0f14; --cyber: #97cbff;
  --warn: #f2b84b; --bad: #ff6b6b; --dot: rgba(53, 57, 64, .35);
  --mono: 'JetBrains Mono', ui-monospace, monospace; --sans: 'Inter', system-ui, sans-serif;
  --display: 'Space Grotesk', 'Inter', sans-serif;
}
:root.light {
  --bg: #f5f5f7; --surface: #ffffff; --surface-2: #eeeef1; --line: #dcdce2; --line-2: #c5c5cd;
  --ink: #1a1d24; --soft: #55606e; --electric: #00a866; --electric-ink: #ffffff; --cyber: #1e5080;
  --warn: #b7791f; --bad: #c53030; --dot: rgba(0, 0, 0, .06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.55;
  background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 24px 24px; }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); }
.label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.label b { color: var(--electric); font-weight: 500; }

/* barra superior */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 60px; }
.marca { font-family: var(--display); font-weight: 600; text-decoration: none; font-size: 16px; }
.marca i { font-style: normal; color: var(--electric); }
.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a { font-family: var(--mono); font-size: 12px; text-decoration: none; color: var(--soft); }
.menu a:hover, .menu a[aria-current] { color: var(--ink); }
.menu a[aria-current] { color: var(--electric); }
.ctrl { display: flex; align-items: center; gap: 14px; }
.ctrl button { background: none; border: 0; color: var(--soft); cursor: pointer; font-family: var(--mono); font-size: 12px; padding: 4px; }
.ctrl button:hover { color: var(--electric); }
@media (max-width: 760px) { .menu { display: none; } .ctrl { margin-left: auto; } }

/* botones */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; font-weight: 500; text-decoration: none; padding: 11px 18px; border-radius: 4px; border: 1px solid var(--line-2); transition: transform .15s, background .2s, border-color .2s; }
.btn:hover { transform: translateY(-1px); border-color: var(--electric); }
.btn-p { background: var(--electric); color: var(--electric-ink); border-color: var(--electric); }
.btn:focus-visible, .menu a:focus-visible, .entrada:focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; }

/* ---------- artículo ---------- */
main { padding: 52px 0 72px; }
.articulo { max-width: 720px; }
.volver { font-family: var(--mono); font-size: 12px; color: var(--soft); text-decoration: none; display: inline-block; margin-bottom: 26px; }
.volver:hover { color: var(--electric); }
.cabeza h1 { font-family: var(--display); font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1.1; letter-spacing: -.022em; margin: 10px 0 14px; font-weight: 700; }
.cabeza .entradilla { font-size: 1.06rem; color: var(--soft); margin: 0 0 22px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-family: var(--mono); font-size: 12px; color: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin-bottom: 34px; }
.meta .sep { color: var(--line-2); }

/* insignia de nivel de asistencia de IA */
.insignia { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; text-decoration: none; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); white-space: nowrap; }
.insignia:hover { border-color: currentColor; }
.insignia .punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.insignia.n1 { color: #4ade80; } .insignia.n2 { color: #f2b84b; }
.insignia.n3 { color: #97cbff; } .insignia.n4 { color: #ff8a8a; }
:root.light .insignia.n1 { color: #157347; } :root.light .insignia.n2 { color: #8a5a00; }
:root.light .insignia.n3 { color: #1e5080; } :root.light .insignia.n4 { color: #a11b1b; }

/* prosa */
.prosa { font-size: 1.02rem; }
.prosa > *:first-child { margin-top: 0; }
.prosa p, .prosa li { color: var(--ink); }
.prosa h2 { font-family: var(--display); font-size: 1.5rem; line-height: 1.2; letter-spacing: -.015em; margin: 2.1em 0 .6em; font-weight: 600; }
.prosa h3 { font-family: var(--display); font-size: 1.18rem; margin: 1.7em 0 .5em; font-weight: 600; }
.prosa a { color: var(--electric); text-underline-offset: 3px; }
.prosa strong { font-weight: 600; }
.prosa ul, .prosa ol { padding-left: 1.25em; }
.prosa li { margin: .35em 0; }
.prosa blockquote { margin: 1.6em 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--electric); color: var(--soft); }
.prosa blockquote p { margin: .5em 0; }
.prosa hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prosa img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); }

/* tablas dentro del texto (GFM) */
.prosa table { width: 100%; border-collapse: collapse; margin: 1.9em 0; font-size: .93rem; background: var(--surface); border: 1px solid var(--line); }
.prosa thead th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); font-weight: 500; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line-2); background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.prosa tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prosa tbody tr:last-child td { border-bottom: 0; }
.prosa code { white-space: nowrap; }
.prosa table code { white-space: normal; }

/* código */
.prosa code { font-family: var(--mono); font-size: .88em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.prosa pre { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; overflow-x: auto; font-size: .86rem; line-height: 1.6; }
.prosa pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.highlight { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; margin: 1.6em 0; }
.highlight pre { border: 0; margin: 0; background: none; }
.highlight .c, .highlight .c1, .highlight .cm { color: #6f7d88; font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kr { color: #ff9ecb; }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sd { color: #a8e6a1; }
.highlight .nb, .highlight .bp { color: var(--cyber); }
.highlight .nf, .highlight .fm { color: #ffd479; }
.highlight .nc, .highlight .nn { color: #7ee7ff; }
.highlight .mi, .highlight .mf { color: #ffb38a; }
.highlight .o, .highlight .ow { color: #c9d1d9; }
.highlight .err { color: var(--bad); }
:root.light .highlight .c, :root.light .highlight .c1, :root.light .highlight .cm { color: #6a737d; }
:root.light .highlight .k, :root.light .highlight .kd { color: #a626a4; }
:root.light .highlight .s, :root.light .highlight .s1, :root.light .highlight .s2 { color: #1a7f37; }
:root.light .highlight .nf, :root.light .highlight .fm { color: #8250df; }
:root.light .highlight .nc, :root.light .highlight .nn { color: #0550ae; }
:root.light .highlight .mi, :root.light .highlight .mf { color: #b35c00; }

/* tabla de autoría */
.autoria { margin: 2em 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.autoria-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.autoria table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.autoria th, .autoria td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.autoria thead th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); font-weight: 500; }
.autoria tbody tr:last-child td { border-bottom: 0; }
.autoria .quien { white-space: nowrap; font-family: var(--mono); font-size: .85rem; }
.autoria .quien.humano { color: #4ade80; } .autoria .quien.ia { color: #ff9ecb; } .autoria .quien.hibrido { color: #f2b84b; }
:root.light .autoria .quien.humano { color: #157347; } :root.light .autoria .quien.ia { color: #a626a4; } :root.light .autoria .quien.hibrido { color: #8a5a00; }
.autoria .pie { padding: 12px 16px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--soft); }
.autoria .pie b { color: var(--ink); font-weight: 600; }
@media (max-width: 620px) {
  .autoria { overflow-x: auto; }
  .autoria table { min-width: 520px; }
}

/* aviso / nota */
.nota { margin: 2em 0; padding: 14px 16px; border: 1px solid var(--line-2); border-left: 3px solid var(--warn); border-radius: 6px; background: var(--surface); font-size: .94rem; }
.nota p:first-child { margin-top: 0; } .nota p:last-child { margin-bottom: 0; }

/* ---------- listado ---------- */
.intro { max-width: 640px; margin-bottom: 40px; }
.intro h1 { font-family: var(--display); font-size: clamp(1.9rem, 4.6vw, 2.7rem); letter-spacing: -.022em; margin: 12px 0 12px; font-weight: 700; }
.intro p { color: var(--soft); margin: 0; }
.entradas { display: grid; gap: 0; border-top: 1px solid var(--line); }
.entrada { display: block; padding: 22px 0; border-bottom: 1px solid var(--line); }
.entrada h2 a { text-decoration: none; color: inherit; }
.entrada:hover h2 a { color: var(--electric); }
.entrada h2 { font-family: var(--display); font-size: 1.32rem; margin: 0 0 6px; font-weight: 600; letter-spacing: -.01em; transition: color .2s; }
.entrada p { margin: 0; color: var(--soft); font-size: .96rem; max-width: 68ch; }
.entrada .fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--soft); }
.leyenda { margin-top: 40px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.leyenda h2 { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin: 0 0 14px; font-weight: 500; }
.leyenda ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .93rem; }
.leyenda li { display: flex; gap: 10px; align-items: baseline; }
.leyenda a { color: var(--electric); text-decoration: none; }
.leyenda .n { font-family: var(--mono); font-size: 11.5px; color: var(--soft); white-space: nowrap; }
.vacio { color: var(--soft); padding: 30px 0; }

/* pie de artículo */
.pie-articulo { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.pie-articulo a { font-family: var(--mono); font-size: 12.5px; color: var(--soft); text-decoration: none; }
.pie-articulo a:hover { color: var(--electric); }

/* footer */
footer { border-top: 1px solid var(--line); padding: 26px 0; margin-top: 0; font-family: var(--mono); font-size: 12px; color: var(--soft); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
footer a { text-decoration: none; }
footer a:hover { color: var(--electric); }
footer .der { margin-left: auto; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }