/* ============================================================
   Academia Innova73 · Activos visuales del Módulo 8 (lecciones)
   Paleta: navy #0b1631 → #1D428A · oro #FFC72C
   ============================================================ */

/* --- Barra de progreso de lectura --- */
#progreso-lectura { position: fixed; top: 0; left: 0; height: 4px; width: 0%;
    background: linear-gradient(90deg, #FFC72C, #e6b000, #FFC72C);
    z-index: 60; box-shadow: 0 0 12px rgba(255,199,44,.7);
    transition: width .08s linear; border-radius: 0 4px 4px 0; }

/* --- Meta-barra de la lección --- */
.meta-leccion { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
    margin-bottom: 1.75rem; }
.meta-leccion .chip { display: inline-flex; align-items: center; gap: .4rem;
    background: #fff; border: 1px solid #e2e6ef; border-left: 4px solid #FFC72C;
    color: #142f66; font-size: .72rem; font-weight: 700; padding: .45rem .85rem;
    border-radius: .6rem; box-shadow: 0 2px 8px rgba(11,22,49,.06);
    text-transform: uppercase; letter-spacing: .04em; }
.meta-leccion .chip svg { width: .9rem; height: .9rem; }
.meta-leccion .chip.activo { background: linear-gradient(135deg,#1D428A,#142f66);
    color: #FFC72C; border-color: #142f66; border-left-color: #FFC72C; }

/* --- Capítulos: h2 con tarjeta y número --- */
article h2[id] { position: relative; background: #fff;
    border: 1px solid #e2e6ef; border-left: 5px solid #FFC72C;
    border-radius: 0 .9rem .9rem 0; padding: .9rem 1.1rem .9rem 1.25rem;
    box-shadow: 0 4px 14px rgba(11,22,49,.07);
    font-weight: 800; color: #142f66; margin-top: 3rem !important; }
article h2[id]::before { content: ""; position: absolute; left: -5px; top: 0; bottom: 0;
    width: 5px; border-radius: 4px 0 0 4px;
    background: linear-gradient(180deg,#FFC72C,#e6b000); }
article h2[id]:hover { border-color: #b6c3dd; box-shadow: 0 6px 20px rgba(29,66,138,.14); }

/* --- Subcapítulos h3 con marcador dorado --- */
article h3[id] { display: flex; align-items: center; gap: .55rem;
    color: #1D428A; font-weight: 700; margin-top: 2.1rem !important; }
article h3[id]::before { content: ""; width: .65rem; height: .65rem; flex: none;
    background: linear-gradient(135deg,#FFC72C,#e6b000);
    transform: rotate(45deg); border-radius: 2px;
    box-shadow: 0 0 0 3px rgba(255,199,44,.25); }

/* --- Imágenes con vida --- */
article p img, article img { border-radius: .9rem !important;
    border: 1px solid #e2e6ef !important;
    box-shadow: 0 10px 30px rgba(11,22,49,.16);
    transition: transform .35s ease, box-shadow .35s ease; }
article p img:hover, article img:hover { transform: scale(1.015);
    box-shadow: 0 16px 44px rgba(29,66,138,.28); }

/* --- Tablas más pulidas --- */
article table { border-radius: .8rem; overflow: hidden;
    box-shadow: 0 6px 22px rgba(11,22,49,.10); border: 1px solid #e2e6ef; }
article thead th { background: linear-gradient(135deg,#1D428A,#142f66) !important;
    font-size: .8rem; letter-spacing: .03em; }
article tbody tr:nth-child(even) td { background: #f4f7fd; }
article tbody tr:hover td { background: #fff8e1; }

/* --- Listas con check dorado --- */
article ul li { position: relative; }
article ul li p { margin: 0; }

/* --- Cajas de énfasis (blockquote ya existente se potencia) --- */
article blockquote { box-shadow: 0 6px 18px rgba(199,151,0,.12);
    font-weight: 500; }

/* --- Índice lateral: scrollspy activo --- */
#book-nav .nav-item.activo { background: linear-gradient(135deg,#1D428A,#142f66) !important;
    color: #FFC72C !important; border-left: 3px solid #FFC72C !important;
    font-weight: 700; box-shadow: 0 4px 12px rgba(11,22,49,.25); }

/* --- Lista de lecciones del módulo 8 --- */
.lecciones-lista a.activo { background: linear-gradient(135deg,#1D428A,#142f66) !important;
    color: #FFC72C !important; box-shadow: 0 4px 12px rgba(11,22,49,.25); }
.lecciones-lista a.activo .num { color: #FFC72C !important; }

/* --- Botón volver arriba --- */
#volver-arriba { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 55;
    width: 3rem; height: 3rem; border-radius: 9999px; border: none; cursor: pointer;
    background: linear-gradient(135deg,#FFC72C,#e6b000); color: #142f66;
    box-shadow: 0 8px 24px rgba(199,151,0,.45);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transform: translateY(12px);
    transition: opacity .25s, transform .25s; }
#volver-arriba.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
#volver-arriba:hover { transform: translateY(-3px) scale(1.06); }

/* --- Navegación anterior/siguiente --- */
.nav-lecciones .tarjeta-nav { transition: transform .18s ease, box-shadow .18s ease; }
.nav-lecciones .tarjeta-nav:hover { transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(29,66,138,.18); }

/* --- Resaltado suave al saltar a un ancla --- */
@keyframes flash-oro { 0% { background-color: rgba(255,199,44,.45); }
    100% { background-color: transparent; } }
article h1[id], article h2[id], article h3[id] { scroll-margin-top: 7rem; }
article :target { animation: flash-oro 1.4s ease-out; }

@media (max-width: 1023px) {
    article h2[id] { margin-top: 2rem !important; }
}