/* =============================================================
   PÁGINA DE CAPACITACIÓN
   ============================================================= */

@layer componentes {

  /* ---------- Encabezado de página ----------
     Compartido con consultoría y contacto. Vive aquí porque es la
     página que más lo usa; si más adelante lo necesita una cuarta,
     se sube a components/. */
  .cabecera-pagina {
    position: relative;
    padding-block: clamp(var(--e-7), 8vh, var(--e-9)) var(--e-6);
    overflow: hidden;
  }
  .cabecera-pagina::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(color-mix(in oklab, var(--pizarra) 8%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in oklab, var(--pizarra) 8%, transparent) 1px, transparent 1px);
    background-size: 3rem 3rem;
    mask-image: radial-gradient(ellipse 70% 70% at 30% 0%, #000, transparent 70%);
    pointer-events: none;
  }

  .cabecera-pagina__contenido {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--e-5);
    max-width: 48rem;
  }

  .cabecera-pagina__titulo {
    font-size: var(--t-3xl);
    font-stretch: 116%;
  }

  .cabecera-pagina__entrada {
    max-width: 52ch;
    font-size: var(--t-lg);
    color: var(--texto-suave);
    line-height: 1.55;
  }

  /* ---------- Buscador ---------- */
  .buscador {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 32rem;
  }

  .buscador__icono {
    position: absolute;
    left: 1rem;
    width: 1.15rem;
    height: 1.15rem;
    color: var(--texto-tenue);
    pointer-events: none;
  }

  .buscador__control {
    width: 100%;
    padding: 0.9rem 2.75rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-completo);
    background: var(--fondo-elevado);
    color: var(--texto);
    font-size: var(--t-base);
    transition:
      border-color var(--ritmo-rapido) var(--curva-suave),
      box-shadow var(--ritmo-rapido) var(--curva-suave);
  }
  .buscador__control::placeholder { color: var(--texto-tenue); }
  .buscador__control::-webkit-search-cancel-button { display: none; }
  .buscador__control:focus {
    outline: none;
    border-color: var(--signal-hondo);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--signal) 20%, transparent);
  }

  .buscador__limpiar {
    position: absolute;
    right: 0.6rem;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    border-radius: 50%;
    background: var(--fondo-hundido);
    color: var(--texto-suave);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--ritmo-rapido) var(--curva-suave),
                background-color var(--ritmo-rapido) var(--curva-suave);
  }
  .buscador__limpiar:hover { background: var(--borde); color: var(--texto); }

  .buscador__resultado {
    min-height: 1.2rem;
    font-family: var(--fuente-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.06em;
    color: var(--texto-acento);
  }

  /* ---------- Índice pegajoso ----------
     Se queda bajo la cabecera al desplazar. `top` se calcula desde la
     altura real de la cabecera para que no se solapen. */
  .indice {
    position: sticky;
    top: 4.5rem;
    z-index: calc(var(--z-cabecera) - 5);
    padding-block: var(--e-3);
    background: color-mix(in oklab, var(--fondo) 90%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    border-block: 1px solid var(--borde);
  }

  .indice__lista {
    display: flex;
    gap: var(--e-2);
    overflow-x: auto;
    /* Espacio abajo para que la barra de scroll no encime las pastillas. */
    padding-bottom: var(--e-2);
    /* Barra de scroll fina y con el color del tema, en vez de oculta.
       Antes estaba escondida (scrollbar-width: none): en una laptop con
       touchpad se podía deslizar, pero con un mouse normal —que solo
       tiene rueda vertical— no había forma de llegar a las categorías
       del final. Con 10 categorías, las últimas quedaban inalcanzables. */
    scrollbar-width: thin;
    scrollbar-color: var(--signal) transparent;
    /* Se desvanece a la derecha: avisa de que la lista sigue. */
    mask-image: linear-gradient(90deg, #000 92%, transparent);
    /* Desplazamiento suave al saltar con las flechas o al hacer clic. */
    scroll-behavior: smooth;
  }
  .indice__lista::-webkit-scrollbar { height: 6px; }
  .indice__lista::-webkit-scrollbar-track { background: transparent; }
  .indice__lista::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--signal) 60%, transparent);
    border-radius: var(--radio-completo);
  }
  .indice__lista::-webkit-scrollbar-thumb:hover { background: var(--signal); }

  @media (prefers-reduced-motion: reduce) {
    .indice__lista { scroll-behavior: auto; }
  }

  .indice__enlace {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-4);
    border: 1px solid var(--borde);
    border-radius: var(--radio-completo);
    color: var(--texto-suave);
    font-size: var(--t-sm);
    font-weight: var(--peso-medio);
    text-decoration: none;
    white-space: nowrap;
    transition:
      color var(--ritmo-rapido) var(--curva-suave),
      border-color var(--ritmo-rapido) var(--curva-suave),
      background-color var(--ritmo-rapido) var(--curva-suave);
  }
  .indice__enlace:hover {
    color: var(--texto);
    border-color: var(--borde-fuerte);
    background: var(--fondo-elevado);
  }
  /* El observador de scroll marca la categoría que se está leyendo. */
  .indice__enlace[data-activo='true'] {
    color: var(--tinta);
    background: var(--signal);
    border-color: var(--signal);
  }

  .indice__contador {
    font-family: var(--fuente-mono);
    font-size: 0.7rem;
    color: var(--texto-tenue);
  }
  .indice__enlace[data-activo='true'] .indice__contador { color: var(--signal-abismo); }

  /* ---------- Encabezado de categoría ---------- */
  .categoria__encabezado {
    display: grid;
    gap: var(--e-5);
    align-items: center;
    margin-bottom: var(--e-6);
  }
  @media (width >= 52rem) {
    .categoria__encabezado { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--e-6); }
  }

  .categoria__medio {
    aspect-ratio: 16 / 10;
    border-radius: var(--radio-lg);
    overflow: hidden;
    background: var(--fondo-hundido);
    border: 1px solid var(--borde);
  }
  .categoria__medio img { width: 100%; height: 100%; object-fit: cover; }

  .categoria__titulo { font-size: var(--t-2xl); }

  /* Categoría oculta por el buscador. */
  [data-categoria][hidden] { display: none; }

  /* ---------- Lista de cursos ---------- */
  .lista-cursos {
    display: grid;
    gap: var(--e-2);
    grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  }
  .lista-cursos > [hidden] { display: none; }

  .curso__accion { flex-shrink: 0; }

  /* El nombre del curso lleva a su ficha; el botón de temario abre el
     PDF. Son dos destinos distintos, así que el enlace del título NO se
     estira a toda la tarjeta: si lo hiciera, taparía el botón. */
  .curso__enlace {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--signal), var(--signal));
    background-size: 0 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--ritmo-medio) var(--curva-salida);
  }
  .curso:hover .curso__enlace,
  .curso__enlace:focus-visible { background-size: 100% 1.5px; }

  .categoria__enlace {
    color: inherit;
    text-decoration: none;
    transition: color var(--ritmo-rapido) var(--curva-suave);
  }
  .categoria__enlace:hover { color: var(--texto-acento); }
}