/* wlst · las filas que se deslizan de lado (ui/js/carrusel.mjs).
 *
 * La fila encaja en una tarjeta y lleva una máscara que funde el borde que
 * tiene más (así vale sobre el fondo, la superficie o una hoja). Con ratón,
 * dos flechas redondas sobre la superficie elevada, sin brillos: salen al
 * pasar por encima o al llegar con el teclado, y la del lado sin más se
 * apaga. En táctil no hay flechas. Solo tokens de estilo.css. */

.carrusel { position: relative; min-width: 0; --carrusel-antes: 0px; --carrusel-despues: 0px; }
.carrusel.hay-antes { --carrusel-antes: 40px; }
.carrusel.hay-despues { --carrusel-despues: 40px; }

.carrusel-fila {
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--carrusel-antes), #000 calc(100% - var(--carrusel-despues)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--carrusel-antes), #000 calc(100% - var(--carrusel-despues)), transparent);
}
.carrusel-fila > * { scroll-snap-align: start; }

/* Las flechas: solo con ratón (en táctil, el dedo). A media altura de las carátulas. */
.carrusel-flecha { display: none; }
@media (hover: hover) and (pointer: fine) {
  .carrusel-flecha {
    position: absolute; top: var(--carrusel-altura, 36%); z-index: 2; display: grid; place-items: center;
    width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 0; border-radius: 50%;
    background: var(--elevada); color: var(--texto); box-shadow: 0 0 0 1px var(--borde), 0 4px 12px rgb(0 0 0 / 0.25);
    opacity: 0; cursor: pointer; transition: opacity var(--rapido), background var(--rapido);
  }
  .carrusel-flecha .icono { width: 18px; height: 18px; }
  .carrusel-flecha.antes { left: var(--esp-2); }
  .carrusel-flecha.despues { right: var(--esp-2); }
  .carrusel-flecha:hover { background: color-mix(in srgb, var(--elevada) 85%, var(--texto)); }
  .carrusel:hover .carrusel-flecha:not(:disabled), .carrusel:focus-within .carrusel-flecha:not(:disabled) { opacity: 1; }
  .carrusel-flecha:disabled { pointer-events: none; }
  .carrusel-flecha:focus-visible { opacity: 1; outline: 2px solid var(--acento); outline-offset: 2px; }
}

/* Las carátulas del editor son pequeñas: la flecha, a su media altura. */
.carrusel:has(> .candidatas) { --carrusel-altura: 50%; }

@media (prefers-reduced-motion: reduce) { .carrusel-flecha { transition: none; } }