/* =========================================================================
   WIZAY - ASPECTO PARA ORDENADOR: barra de scroll, puntero y estela de puntos
   Solo diseño y solo con ratón (en móvil y tablet no se aplica nada).
   Cada cosa se enciende o apaga desde el panel (Editor de Contenidos → Aspecto):
   header.php pone en <html> las clases wz-scroll, wz-puntero y wz-estela.
   Idea: «con cada personaje aparece un nuevo punto de un dibujo aún por descubrir».
   ========================================================================= */
@media (hover: hover) and (pointer: fine) {

    /* ---------- Barra de scroll: pista beige con puntos burdeos, pulgar burdeos ---------- */
    html.wz-scroll::-webkit-scrollbar,
    html.wz-scroll ::-webkit-scrollbar { width: 14px; height: 14px; }
    html.wz-scroll::-webkit-scrollbar-track,
    html.wz-scroll ::-webkit-scrollbar-track {
        background: var(--color-beige-hondo, #d6bfa4) radial-gradient(circle at center, rgba(107, 15, 26, 0.8) 1.3px, transparent 1.7px) center top / 12px 9px repeat-y;
    }
    html.wz-scroll::-webkit-scrollbar-thumb,
    html.wz-scroll ::-webkit-scrollbar-thumb {
        background: var(--color-burdeos, #6b0f1a);
        border: 3px solid var(--color-beige-hondo, #d6bfa4);
        border-radius: 10px;
    }
    html.wz-scroll::-webkit-scrollbar-thumb:hover,
    html.wz-scroll ::-webkit-scrollbar-thumb:hover  { background: var(--color-naranja-trazo, #b84a28); }
    html.wz-scroll::-webkit-scrollbar-thumb:active,
    html.wz-scroll ::-webkit-scrollbar-thumb:active { background: var(--color-oscuro, #121212); }
    html.wz-scroll::-webkit-scrollbar-corner,
    html.wz-scroll ::-webkit-scrollbar-corner { background: var(--color-beige-hondo, #d6bfa4); }

    /* Firefox solo deja elegir colores y grosor (sin puntos) */
    @supports not selector(::-webkit-scrollbar) {
        html.wz-scroll, html.wz-scroll * {
            scrollbar-width: thin;
            scrollbar-color: var(--color-burdeos, #6b0f1a) var(--color-beige-hondo, #d6bfa4);
        }
    }

    /* ---------- Puntero: punto naranja con aro de puntos; sobre enlaces y botones, el punto crece ---------- */
    html.wz-puntero {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='13' fill='none' stroke='%23e6d5c3' stroke-width='3' stroke-dasharray='2 4.2' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='18' r='13' fill='none' stroke='%236b0f1a' stroke-width='1.3' stroke-dasharray='2 4.2' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='18' r='4.2' fill='%23b84a28' stroke='%23121212' stroke-width='1.2'/%3E%3C/svg%3E") 18 18, auto;
    }
    html.wz-puntero a[href], html.wz-puntero button, html.wz-puntero summary, html.wz-puntero [role="button"],
    html.wz-puntero label[for], html.wz-puntero input[type="submit"], html.wz-puntero input[type="button"],
    html.wz-puntero input[type="checkbox"], html.wz-puntero input[type="radio"],
    html.wz-puntero .lightbox-btn, html.wz-puntero .pildora-opcion, html.wz-puntero .rgpd-custom-label,
    html.wz-puntero .btn-enviar-teatral, html.wz-puntero .btn-capsula-item, html.wz-puntero .btn-play-teatral,
    html.wz-puntero .cky-btn, html.wz-puntero .cky-btn-revisit-wrapper, html.wz-puntero .cky-switch input {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='15' fill='none' stroke='%23e6d5c3' stroke-width='2.4'/%3E%3Ccircle cx='18' cy='18' r='15' fill='none' stroke='%236b0f1a' stroke-width='1'/%3E%3Ccircle cx='18' cy='18' r='8.5' fill='%23b84a28' stroke='%23121212' stroke-width='1.3'/%3E%3C/svg%3E") 18 18, pointer;
    }
    html.wz-puntero button:disabled, html.wz-puntero [aria-disabled="true"] { cursor: not-allowed; }

    /* ---------- Estela de puntos (los crea js/estela.js) ---------- */
    .wz-punto {
        position: fixed;
        z-index: 2147483000;
        width: 9px;
        height: 9px;
        margin: -4.5px 0 0 -4.5px;
        border-radius: 50%;
        pointer-events: none;
        animation: wz-punto 1.1s ease-out forwards;
    }
    .wz-punto.a { background: var(--color-naranja-trazo, #b84a28); box-shadow: 0 0 0 1px var(--color-oscuro, #121212); }
    .wz-punto.b { background: var(--color-beige, #e6d5c3); box-shadow: 0 0 0 1px var(--color-burdeos, #6b0f1a); }
    @keyframes wz-punto {
        0%   { opacity: 1; transform: scale(1); }
        100% { opacity: 0; transform: scale(0.3); }
    }
}
@media (prefers-reduced-motion: reduce) {
    .wz-punto { display: none !important; }
}