:root {
  --bg: #0b0c0f;
  --panel: #121420;
  --text: #e9ebf2;
  --muted: #a8afc3;
  --border: rgba(255, 255, 255, .10);
  --link: #8bd5ff;
  --accent: #7cf0c5;
  --warn: #ffdd7a;

  --maxw: 880px;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .25);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f7fb;
    --panel: #ffffff;
    --text: #161923;
    --muted: #4a5266;
    --border: rgba(20, 30, 55, .10);
    --link: #0b63ce;
    --accent: #0aa37f;
    --warn: #8a5b00;
    --shadow: 0 10px 25px rgba(20, 30, 55, .10);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  background: radial-gradient(1200px 600px at 50% -10%, rgba(124, 240, 197, .15), transparent 70%),
              radial-gradient(900px 500px at 10% 10%, rgba(139, 213, 255, .12), transparent 65%),
              var(--bg);
  color: var(--text);
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.skip {
  position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip:focus {
  left: 12px; top: 12px; width: auto; height: auto; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  z-index: 9999;
}

header.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  max-width: calc(var(--maxw) + 2rem);
  margin: 0 auto;
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: space-between;
}

.brand {
  display: flex; align-items: center; gap: .6rem; min-width: 200px;
}
.dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--link));
  box-shadow: 0 0 0 6px rgba(124, 240, 197, .12);
}
.brand b { font-size: .95rem; }
.brand span { color: var(--muted); font-size: .85rem; display: none; }

@media(min-width: 820px) {
  .brand span { display: inline; }
}

.actions {
  display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .55rem .8rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel) 88%, transparent);
  color: var(--text);
  border-radius: 999px;
  box-shadow: none;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  user-select: none;
}
.btn:hover { border-color: color-mix(in oklab, var(--border) 60%, var(--link)); }
.btn.primary {
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 25%, var(--panel)),
    color-mix(in oklab, var(--link) 18%, var(--panel))
  );
}
.btn small { color: var(--muted); font-size: .78rem; }
.btn:focus-visible { outline: 3px solid color-mix(in oklab, var(--link) 45%, transparent); outline-offset: 2px; }

main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.25rem 1rem 4rem;
}

.paper {
  background: color-mix(in oklab, var(--panel) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero {
  padding: 1.4rem 1.2rem 1rem;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(900px 300px at 30% 10%, rgba(139, 213, 255, .14), transparent 70%),
    radial-gradient(700px 240px at 80% 20%, rgba(124, 240, 197, .12), transparent 70%),
    transparent;
}

h1 {
  margin: 0 0 .4rem;
  font-size: clamp(1.35rem, 2.2vw + 1rem, 2.05rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.subtitle {
  margin: 0 0 .8rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.45;
}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  color: var(--muted);
  font-size: .92rem;
}
.pill {
  display: inline-flex; gap: .35rem; align-items: center;
  padding: .35rem .6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklab, var(--panel) 85%, transparent);
}
.pill code { font-family: var(--mono); font-size: .86rem; color: var(--text); }

.disclaimer {
  margin-top: .95rem;
  border-left: 3px solid color-mix(in oklab, var(--warn) 65%, var(--border));
  padding: .7rem .8rem;
  background: color-mix(in oklab, var(--panel) 70%, transparent);
  border-radius: 12px;
  color: var(--text);
}
.disclaimer b { color: color-mix(in oklab, var(--warn) 85%, var(--text)); }
.disclaimer p { margin: 0; }
.disclaimer .small { margin-top: .35rem; color: var(--muted); font-size: .92rem; }

nav.toc {
  padding: .9rem 1.2rem 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel) 88%, transparent);
}
.toc-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-bottom: .6rem;
}
.toc h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: .02em;
}
.toc .toggle {
  display: none;
}
@media (max-width: 700px) {
  .toc .toggle { display: inline-flex; }
  .toc-links { display: none; }
  .toc-links.open { display: block; }
}
.toc-links {
  columns: 2;
  column-gap: 1.2rem;
}
@media (max-width: 700px) {
  .toc-links { columns: 1; }
}
.toc a {
  display: block;
  padding: .25rem 0;
  color: var(--link);
  break-inside: avoid;
}
.toc a small { color: var(--muted); margin-left: .25rem; }

article.content {
  padding: 1.2rem;
}

.content p {
  margin: .7rem 0;
  font-size: 1.03rem;
  line-height: 1.75;
}

.content h2 {
  margin: 1.5rem 0 .45rem;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  scroll-margin-top: 90px;
}

.content h3 {
  margin: 1.1rem 0 .35rem;
  font-size: 1.08rem;
  line-height: 1.3;
  scroll-margin-top: 90px;
}

.content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.2rem 0;
}

figure {
  margin: 1rem 0;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in oklab, var(--panel) 92%, transparent);
  overflow: hidden;
}
figure img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
}
figcaption {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
}

.note {
  padding: .75rem .85rem;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: color-mix(in oklab, var(--panel) 86%, transparent);
  color: var(--muted);
  font-size: .95rem;
  margin: .9rem 0;
}
.note b { color: var(--text); }

.refs {
  padding-left: 1.1rem;
}
.refs li {
  margin: .5rem 0;
  line-height: 1.55;
}
.refs a { word-break: break-word; }

.foot {
  padding: 1rem 1.2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: .9rem;
  background: color-mix(in oklab, var(--panel) 90%, transparent);
}

.kbd {
  font-family: var(--mono);
  font-size: .86rem;
  padding: .15rem .35rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: color-mix(in oklab, var(--panel) 88%, transparent);
}

/* small helper: highlight on hash navigation */
.flash {
  animation: flash 1.2s ease-out 1;
  border-radius: 10px;
}
@keyframes flash {
  0% { background: color-mix(in oklab, var(--accent) 18%, transparent); }
  100% { background: transparent; }
}

/* =========================================
   CORRECCIONES PARA MÓVIL (Responsive Fixes)
   ========================================= */
@media (max-width: 768px) {

  /* 1. Diseño "Full Bleed" (Aprovechar todo el ancho) 
     En vez de una carta flotante, hacemos que el contenido llene la pantalla. */
  main {
    padding: 0; /* Eliminamos el relleno externo */
    max-width: 100%;
  }

  .paper {
    border-radius: 0; /* Quitamos las esquinas redondas */
    border-left: none;
    border-right: none;
    border-top: none; /* Quitamos bordes laterales */
    box-shadow: none; /* Quitamos la sombra para que se sienta plano */
    background: var(--panel); /* Fondo sólido para mejor lectura */
  }

  /* 2. Arreglar el Encabezado (Header) 
     Evitamos que los botones aplasten el logo o ocupen media pantalla. */
  .topbar {
    position: relative; /* Lo despegamos (no sticky) para que no quite espacio de lectura si es muy alto */
  }

  .topbar-inner {
    flex-direction: column; /* Ponemos el logo arriba y los botones abajo */
    align-items: flex-start;
    padding: 0.8rem 1rem;
    gap: 0.8rem;
  }

  .brand {
    min-width: auto; /* Quitamos la restricción de ancho mínimo */
    width: 100%;
  }

  .actions {
    width: 100%;
    display: flex;
    justify-content: flex-start; /* Alineamos botones a la izquierda */
    gap: 0.5rem;
    overflow-x: auto; /* Permite deslizar (scroll) horizontalmente si los botones no caben */
    padding-bottom: 4px; /* Espacio para la barra de scroll si aparece */
    white-space: nowrap;
  }
  
  /* Opcional: Hacer los botones un poco más compactos en móvil */
  .btn {
    padding: .45rem .7rem;
    font-size: .85rem;
  }

  /* 3. Ajustes de Tipografía y Espaciado */
  h1 {
    font-size: 1.6rem; /* Título un poco más controlado */
  }
  
  .content {
    padding: 1rem; /* Relleno interno cómodo para leer */
  }
  
  /* Ajustar imágenes para que no se vean gigantes */
  figure {
    margin: 1rem -1rem; /* Truco: hacer que la figura toque los bordes de la pantalla */
    border-radius: 0;
    border-left: none; 
    border-right: none;
  }
  
  figure img {
    border-radius: 0;
  }
}


/* Estilo base para todas las burbujas de autores */
.author-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 16px;
    padding: 0.2rem 0.7rem;
    text-decoration: none;
    font-size: 0.85rem;
    transition: transform 0.2s, background-color 0.2s;
}

.author-pill:hover {
    transform: translateY(-2px);
}

.author-pill span, .author-pill b {
    margin-right: 6px;
}

.author-pill img {
    width: 12px;
    height: 12px;
}

/* Variantes por tipo de enlace */
.pill-linkedin {
    background: #f0f7ff;
    border: 1px solid #0077b5;
    color: #004182;
}

.pill-orcid {
    background: #f0f4f0;
    border: 1px solid #a6ce39;
    color: #333;
}

.pill-link {
    background: #f8f9fa;
    border: 1px solid #ccc;
    color: #333;
}