/* ===================================================
   ISpeedType — Temas inmersivos: estilos comunes
   (la sección del menú de temas y el aviso de desbloqueo).
   Los estilos de cada tema van en su propio archivo (themes/<nombre>.css).
   =================================================== */

/* Sección "Temas inmersivos" dentro del menú de temas (aparece al desbloquearla) */
.immersive-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

/* Misma apariencia que .theme-option (el botón de un tema normal) */
.immersive-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    outline: none;
    width: 100%;
    text-align: left;
}

.immersive-option:hover,
.immersive-option:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.immersive-option.active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    font-weight: 600;
}

/* Miniatura de cada tema inmersivo */
.swatch-graffiti {
    background:
        linear-gradient(135deg, transparent 0 55%, #00f0ff 55% 72%, #ff2fa3 72% 88%, #39ff14 88%),
        #5b2c24;
}

.swatch-manga {
    background:
        radial-gradient(circle, #000 0 1px, transparent 1.6px) 0 0 / 4px 4px,
        #fff;
    box-shadow: inset 0 0 0 2px #000;
}

.swatch-deepweb {
    background:
        radial-gradient(circle at 38% 42%, #b3261e 0 12%, #4a0d09 32%, #030303 70%);
    box-shadow: inset 0 0 0 1px #4a0d09;
}

.swatch-typewriter {
    background:
        radial-gradient(circle at 62% 56%, #16120e 0 17%, transparent 20%),
        #e2d7c5;
    box-shadow: inset 0 0 0 2px #16120e;
}

/* Botón de sonido (solo se muestra cuando hay temas inmersivos) */
.immersive-sound {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    text-align: left;
    transition: all var(--transition-fast);
}

.immersive-sound:hover,
.immersive-sound:focus-visible {
    color: var(--text-primary);
    border-color: var(--border-color-hover);
}

.immersive-sound.is-off {
    opacity: 0.7;
}

.immersive-sound-state {
    margin-left: auto;
    font-weight: 700;
}

/* Aviso de desbloqueo */
.immersive-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 10001;
    max-width: min(92vw, 420px);
    padding: 14px 22px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), 0 0 24px var(--accent-glow);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
    transform: translateX(-50%);
    animation: immersive-toast-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.immersive-toast.is-hiding {
    animation: immersive-toast-out 0.4s ease both;
}

@keyframes immersive-toast-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(24px) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes immersive-toast-out {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    to {
        opacity: 0;
        transform: translateX(-50%) translateY(16px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .immersive-toast,
    .immersive-toast.is-hiding {
        animation: none;
    }
}

.swatch-halloween {
    background:
        radial-gradient(circle at 50% 62%, #ff7a1a 0 30%, transparent 32%),
        linear-gradient(180deg, #2a1245, #120722);
    box-shadow: inset 0 0 0 2px #5b3a8c;
}

/* ===================================================
   Menú de temas en mosaico (3 columnas) + iconos ilustrados
   =================================================== */
.theme-dropdown {
    min-width: 330px;
    max-width: calc(100vw - 24px);
}

.theme-dropdown .theme-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.theme-dropdown .theme-option,
.theme-dropdown .immersive-option {
    flex-direction: column;
    justify-content: flex-start;
    gap: 7px;
    padding: 10px 4px 8px;
    text-align: center;
    font-size: 0.72rem;
    line-height: 1.15;
    min-width: 0;
    overflow-wrap: anywhere;
}

.theme-dropdown .theme-swatch {
    width: 46px;
    height: 46px;
    border-width: 2px;
    background-size: cover;
    background-position: center;
    transition: transform 0.18s ease;
}

.theme-dropdown .theme-option:hover .theme-swatch,
.theme-dropdown .immersive-option:hover .theme-swatch,
.theme-dropdown .immersive-option.active .theme-swatch {
    transform: scale(1.1);
}

.theme-dropdown .immersive-option.active .theme-swatch {
    border-color: var(--accent-primary);
}

/* Iconos de los temas inmersivos (SVG incrustado: sin peticiones extra) */
.theme-swatch.swatch-graffiti {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%234a2a24'/%3E%3Cpath d='M0 13H40M0 26H40M10 0V13M30 13V26M10 26V40' stroke='%232e1814' stroke-width='1.5'/%3E%3Ccircle cx='13' cy='15' r='8' fill='%2300f0ff'/%3E%3Ccircle cx='27' cy='13' r='7' fill='%23ff2fa3'/%3E%3Ccircle cx='21' cy='26' r='9' fill='%2339ff14' opacity='.92'/%3E%3Cpath d='M13 22v8M27 19v6' stroke='%2300f0ff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / cover no-repeat;
    box-shadow: none;
}

.theme-swatch.swatch-manga {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%23fff'/%3E%3Cpath d='M20 20L50.0 20.0' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M20 20L49.0 27.8' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M20 20L46.0 35.0' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M20 20L41.2 41.2' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M20 20L35.0 46.0' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M20 20L27.8 49.0' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M20 20L20.0 50.0' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M20 20L12.2 49.0' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M20 20L5.0 46.0' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M20 20L-1.2 41.2' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M20 20L-6.0 35.0' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M20 20L-9.0 27.8' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M20 20L-10.0 20.0' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M20 20L-9.0 12.2' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M20 20L-6.0 5.0' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M20 20L-1.2 -1.2' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M20 20L5.0 -6.0' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M20 20L12.2 -9.0' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M20 20L20.0 -10.0' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M20 20L27.8 -9.0' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M20 20L35.0 -6.0' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M20 20L41.2 -1.2' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M20 20L46.0 5.0' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M20 20L49.0 12.2' stroke='%23000' stroke-width='2.2'/%3E%3Ccircle cx='20' cy='20' r='7.5' fill='%23fff'/%3E%3Ctext x='20' y='25' font-size='13' font-weight='900' text-anchor='middle' font-family='Impact,Arial Black,sans-serif' fill='%23000'%3E%21%21%3C/text%3E%3C/svg%3E") center / cover no-repeat;
    box-shadow: none;
}

.theme-swatch.swatch-deepweb {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%23050505'/%3E%3Cpath d='M3 20Q20 4 37 20Q20 36 3 20Z' fill='%23120303' stroke='%23b3261e' stroke-width='2'/%3E%3Ccircle cx='20' cy='20' r='7' fill='%23b3261e'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23000'/%3E%3Ccircle cx='22' cy='18' r='1.2' fill='%23ff6b5e'/%3E%3C/svg%3E") center / cover no-repeat;
    box-shadow: none;
}

.theme-swatch.swatch-typewriter {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%23e2d7c5'/%3E%3Ccircle cx='20' cy='20' r='14' fill='%2316120e' stroke='%238a7d6a' stroke-width='2'/%3E%3Ccircle cx='20' cy='20' r='11' fill='none' stroke='%233a322a' stroke-width='1'/%3E%3Ctext x='20' y='26' font-size='17' font-weight='700' text-anchor='middle' font-family='Courier New,monospace' fill='%23e2d7c5'%3EA%3C/text%3E%3C/svg%3E") center / cover no-repeat;
    box-shadow: none;
}

.theme-swatch.swatch-kawaii {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffc2dc'/%3E%3Cstop offset='1' stop-color='%23cdb8ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='40' height='40' fill='url(%23g)'/%3E%3Cg fill='%23fff' stroke='%238a68a6' stroke-width='1.4'%3E%3Ccircle cx='20' cy='23' r='9'/%3E%3Ccircle cx='12' cy='25' r='6'/%3E%3Ccircle cx='28' cy='25' r='6'/%3E%3Cpath d='M14 17C12 8 14 5 16 6C18 7 17 13 17 17ZM26 17C28 8 26 5 24 6C22 7 23 13 23 17Z'/%3E%3C/g%3E%3Ccircle cx='20' cy='23' r='9' fill='%23fff'/%3E%3Ccircle cx='12' cy='25' r='6' fill='%23fff'/%3E%3Ccircle cx='28' cy='25' r='6' fill='%23fff'/%3E%3Cpath d='M16 22q1.5-2 3 0M21 22q1.5-2 3 0' stroke='%235b3b72' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M18.5 26q1.5 1.8 3 0' stroke='%235b3b72' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='14.5' cy='26' r='1.5' fill='%23ffb3d3'/%3E%3Ccircle cx='25.5' cy='26' r='1.5' fill='%23ffb3d3'/%3E%3C/svg%3E") center / cover no-repeat;
    box-shadow: none;
}

.theme-swatch.swatch-greek {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%23f3efe4'/%3E%3Crect x='0' y='0' width='40' height='3' fill='%23b8892b'/%3E%3Crect x='0' y='37' width='40' height='3' fill='%23b8892b'/%3E%3Crect x='9' y='6' width='22' height='4' fill='%23e6dcc0' stroke='%238a6516' stroke-width='1'/%3E%3Ccircle cx='11' cy='13' r='3' fill='%23f4eedd' stroke='%238a6516' stroke-width='1'/%3E%3Ccircle cx='29' cy='13' r='3' fill='%23f4eedd' stroke='%238a6516' stroke-width='1'/%3E%3Crect x='13' y='10' width='14' height='5' fill='%23f4eedd' stroke='%238a6516' stroke-width='1'/%3E%3Crect x='14' y='15' width='12' height='18' fill='%23ece4cc'/%3E%3Cpath d='M17 15V33M20 15V33M23 15V33' stroke='%23b9ae8c' stroke-width='1'/%3E%3Crect x='11' y='33' width='18' height='4' fill='%23e6dcc0' stroke='%238a6516' stroke-width='1'/%3E%3C/svg%3E") center / cover no-repeat;
    box-shadow: none;
}

.theme-swatch.swatch-space {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%2305061a'/%3E%3Ccircle cx='6' cy='8' r='.9' fill='%23fff'/%3E%3Ccircle cx='33' cy='6' r='.7' fill='%23fff'/%3E%3Ccircle cx='35' cy='31' r='.9' fill='%239b7bff'/%3E%3Ccircle cx='8' cy='33' r='.7' fill='%23fff'/%3E%3Cpath d='M4 8c10-5 24-3 32 6' stroke='%23ff4fd8' stroke-width='6' opacity='.18' fill='none'/%3E%3Cellipse cx='20' cy='21' rx='17' ry='5' transform='rotate(-20 20 21)' fill='none' stroke='%23d9c39a' stroke-width='2' opacity='.7'/%3E%3Ccircle cx='20' cy='20' r='9' fill='%233d8fd4'/%3E%3Cpath d='M12 17q8 3 16 0M11.5 21q8.5 3.5 17 0M13 25q7 2.5 14 0' stroke='%23f2d9a6' stroke-width='1.6' fill='none' opacity='.85'/%3E%3Cpath d='M13 25 Q20 34 30 27' stroke='%2305061a' stroke-width='5' fill='none' opacity='.35'/%3E%3Cpath d='M7 24Q20 31 33 18' stroke='%23d9c39a' stroke-width='2' fill='none'/%3E%3C/svg%3E") center / cover no-repeat;
    box-shadow: none;
}

.theme-swatch.swatch-cyberpunk {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%2305060a'/%3E%3Cpath d='M20 4L35 20L20 36L5 20Z' fill='none' stroke='%23ff2fa3' stroke-width='2.2' transform='translate(1.5 1.5)'/%3E%3Cpath d='M20 4L35 20L20 36L5 20Z' fill='none' stroke='%2300f0ff' stroke-width='2.2'/%3E%3Cpath d='M14 20H26M20 14V26' stroke='%2339ff14' stroke-width='1.8'/%3E%3Cpath d='M0 10H40M0 20H40M0 30H40' stroke='%23fff' stroke-width='.5' opacity='.12'/%3E%3C/svg%3E") center / cover no-repeat;
    box-shadow: none;
}

.theme-swatch.swatch-halloween {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.5' cy='.35'%3E%3Cstop offset='0' stop-color='%233a1760'/%3E%3Cstop offset='1' stop-color='%23120722'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='40' height='40' fill='url(%23b)'/%3E%3Cellipse cx='20' cy='24' rx='14' ry='11.5' fill='%23ff7a1a'/%3E%3Cpath d='M12 24c0-8 3-11 8-11M28 24c0-8-3-11-8-11' stroke='%23c24e00' stroke-width='1.2' fill='none'/%3E%3Cpath d='M18 13c0-3 1-5 3-6' stroke='%234caf50' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12.5 21l4 0-2 4zM27.5 21l-4 0 2 4z' fill='%232a0a3a'/%3E%3Cpath d='M13 29q3.5 3.5 7 0q3.5 3.5 7 0' stroke='%232a0a3a' stroke-width='2' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E") center / cover no-repeat;
    box-shadow: none;
}

@media (max-width: 380px) {
    .theme-dropdown .theme-options {
        grid-template-columns: repeat(2, 1fr);
    }
}