/* ============================================================
   JOHNNYTECH — EXPERIENCIA DE LECTURA PRO (lectura.css)
   Solo se incluye en /contenido y /detalle (páginas de artículo).
   Componentes: barra de progreso del artículo · tiempo de lectura ·
   TOC "En esta guía" (desktop fija a la derecha / móvil colapsable) ·
   botón Copiar en bloques de código · navegación anterior/siguiente.
   Curvas y duraciones según estándares Emil (ease-out fuerte, <300ms,
   solo transform/opacity en lo que se anima seguido).
   Funciona en tema estudio y en el original (fallbacks en cada var).
   ============================================================ */

/* ---------- 1. Barra de progreso de LECTURA (mide el artículo,
   distinta de la global #barra-scroll que mide la página) ---------- */
.lectura-barra {
  position: sticky;
  top: var(--lect-nav, 58px);          /* la fija lectura.js bajo la nav real */
  z-index: 40;                          /* debajo de la nav (50) */
  height: 3px;
  background: var(--border, #e8e4dc);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 18px;
}
.lectura-barra i {
  display: block; height: 100%;
  background: var(--accent, #4338ca);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ---------- 2. Tiempo de lectura (va dentro de .meta de la cabecera) ---------- */
.lectura-tiempo {
  font-family: var(--mono, monospace);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted2, var(--muted, #6b665c));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lectura-tiempo::before { content: "⏱ "; opacity: .7; }

/* ---------- 3a. TOC móvil / tablet — colapsable arriba del artículo ---------- */
.lectura-toc-mov {
  margin: 0 0 26px;
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e8e4dc);
  border-radius: 12px;
  box-shadow: var(--sombra-1, 0 1px 2px rgba(0, 0, 0, .05));
}
.lectura-toc-mov summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  font-family: var(--mono, monospace);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted, #57534e);
  -webkit-user-select: none; user-select: none;
}
.lectura-toc-mov summary::-webkit-details-marker { display: none; }
.lectura-toc-mov summary::before {
  content: "›";
  color: var(--accent, #4338ca);
  font-size: 15px; line-height: 1;
  transition: transform 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.lectura-toc-mov[open] summary::before { transform: rotate(90deg); }
.lectura-toc-mov ol {
  list-style: none;
  margin: 0; padding: 2px 16px 12px;
  border-top: 1px solid var(--border, #e8e4dc);
}
.lectura-toc-mov ol a {
  display: block;
  padding: 7px 0;
  font-size: 13.5px; line-height: 1.4;
  color: var(--muted, #57534e);
  text-decoration: none;
}
.lectura-toc-mov ol li + li a { border-top: 1px solid var(--border, #e8e4dc); }
.lectura-toc-mov ol a:hover { color: var(--ink, var(--text, #16150f)); text-decoration: none; }
.lectura-toc-mov ol a.activo { color: var(--accent, #4338ca); font-weight: 600; }

/* ---------- 3b. TOC desktop — columna derecha fija (≥1100px) ---------- */
.lectura-toc { display: none; }

@media (min-width: 1100px) {
  .lectura-toc-mov { display: none; }

  .lectura-toc {
    display: block;
    position: fixed;
    top: calc(var(--lect-nav, 58px) + 56px);
    /* el artículo mide 760px centrado: la TOC vive en el margen derecho */
    left: calc(50% + 380px + 26px);
    width: min(230px, calc(50vw - 380px - 44px));
    max-height: calc(100vh - var(--lect-nav, 58px) - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 30;
    opacity: 1;
    transition: opacity 250ms ease;
  }
  /* se desvanece cuando entra el footer (deja de tener artículo al lado) */
  .lectura-toc.oculta { opacity: 0; pointer-events: none; }

  .lectura-toc .lt-titulo {
    font-family: var(--mono, monospace);
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted2, var(--muted, #6b665c));
    margin: 0 0 10px 15px;
  }
  .lectura-toc ol {
    list-style: none; margin: 0; padding: 0;
    border-left: 1px solid var(--border2, var(--border, #dcd7ca));
  }
  .lectura-toc ol a {
    display: block;
    padding: 5px 4px 5px 14px;
    margin-left: -1px;                     /* pisa la hairline con el filete activo */
    border-left: 2px solid transparent;
    font-size: 13px; line-height: 1.45;
    color: var(--muted, #57534e);
    text-decoration: none;
    transition: color 150ms ease, border-color 150ms ease;
  }
  .lectura-toc ol a:hover { color: var(--ink, var(--text, #16150f)); text-decoration: none; }
  .lectura-toc ol a.activo {
    color: var(--accent, #4338ca);
    border-left-color: var(--accent, #4338ca);
    font-weight: 600;
  }
}

/* ---------- 4. Botón «Copiar» en bloques <pre> ---------- */
.pre-wrap { position: relative; }
.pre-copiar {
  position: absolute; top: 9px; right: 9px;
  padding: 4px 11px;
  font-family: var(--mono, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: #ece9df;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 7px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity 180ms ease, background 150ms ease,
              transform 140ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.pre-copiar:hover { background: rgba(255, 255, 255, .20); }
.pre-copiar:active { transform: scale(.95); }
.pre-copiar.ok {
  color: #d7f2d0;
  background: rgba(88, 170, 100, .22);
  border-color: rgba(120, 200, 130, .45);
}
/* Desktop: aparece en hover del bloque (o al enfocar con teclado); móvil: siempre visible */
@media (hover: hover) and (pointer: fine) {
  .pre-copiar { opacity: 0; }
  .pre-wrap:hover .pre-copiar,
  .pre-copiar:focus-visible,
  .pre-copiar.ok { opacity: 1; }
}

/* ---------- 5. Navegación anterior / siguiente al pie ---------- */
.lectura-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--border, #e8e4dc);
}
.lectura-nav .ln-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px;
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e8e4dc);
  border-radius: 12px;
  box-shadow: var(--sombra-1, 0 1px 2px rgba(0, 0, 0, .05));
  text-decoration: none;
  transition: transform 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              border-color 200ms ease, box-shadow 200ms ease;
}
.lectura-nav .ln-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--border2, var(--border, #dcd7ca));
  box-shadow: var(--sombra-2, 0 4px 14px rgba(0, 0, 0, .08));
}
.lectura-nav .ln-k {
  font-family: var(--mono, monospace);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--muted2, var(--muted, #6b665c));
}
.lectura-nav .ln-card b {
  font-family: var(--display, inherit);
  font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em; line-height: 1.35;
  color: var(--ink, var(--text, #16150f));
  transition: color 150ms ease;
}
.lectura-nav .ln-card:hover b { color: var(--accent, #4338ca); }
.lectura-nav .ln-card.next { text-align: right; align-items: flex-end; }
.lectura-nav .ln-vacia { /* mantiene «Siguiente» a la derecha cuando no hay anterior */ }

@media (max-width: 560px) {
  .lectura-nav { grid-template-columns: 1fr; }
  .lectura-nav .ln-vacia { display: none; }
}

/* ---------- Anclas: que la nav pegajosa no tape el título al saltar ---------- */
.md h2, .md h3 { scroll-margin-top: calc(var(--lect-nav, 58px) + 28px); }

/* ---------- Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .lectura-toc, .pre-copiar, .lectura-nav .ln-card,
  .lectura-toc-mov summary::before { transition: none; }
  .lectura-nav .ln-card:hover { transform: none; }
}