/* =========================================
   RESET
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

button {
    font: inherit;
}


/* =========================================
   BODY
========================================= */

body {
    min-height: 100vh;
    padding: 45px 35px;
    overflow-x: hidden;

    font-family: Arial, Helvetica, sans-serif;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 50% -20%,
            #1b1b28 0%,
            #09090e 45%,
            #050507 100%
        );
}


/* =========================================
   LUCES
========================================= */

.luz {
    position: fixed;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(160px);
    opacity: 0.12;

    pointer-events: none;
}

.luz--morada {
    top: -200px;
    left: -200px;

    background: #a84dff;
}

.luz--azul {
    right: -200px;
    bottom: -200px;

    background: #396aff;
}


/* =========================================
   APP
========================================= */

.app {
    position: relative;
    z-index: 2;

    width: min(100%, 1350px);

    margin: auto;
}


/* =========================================
   ENCABEZADO
========================================= */

.encabezado {
    margin-bottom: 45px;

    text-align: center;
}

.dayoff {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 20px;

    margin-bottom: 20px;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 7px;
}

.dayoff span {
    width: 60px;
    height: 1px;

    background: rgba(255, 255, 255, 0.55);
}

.encabezado h1 {
    margin-bottom: 18px;

    font-size: clamp(45px, 6vw, 82px);

    line-height: 0.95;

    letter-spacing: -4px;
}

.encabezado h1 strong {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #788dff,
            #bd5cff
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.subtitulo {
    color: #92929f;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 5px;
}

.subtitulo b {
    margin: 0 10px;

    color: #555560;
}


/* =========================================
   OCULTAR
========================================= */

.oculto {
    display: none !important;
}


/* =========================================
   COLORES INDIVIDUALES

   Gerry = azul
   Memo  = rosa
   Eva   = turquesa
   Chris = naranja
   Ala   = morado
========================================= */

.participante--gerry,
.persona.persona--gerry {
    --color-persona: #6577ff;
}

.participante--memo,
.persona.persona--memo {
    --color-persona: #ff59d6;
}

.participante--eva,
.persona.persona--eva {
    --color-persona: #35ddd2;
}

.participante--chris,
.persona.persona--chris {
    --color-persona: #ff944d;
}

.participante--ala,
.persona.persona--ala {
    --color-persona: #b75cff;
}


/* =========================================
   PANTALLA ORDEN
========================================= */

.pantalla-orden {
    max-width: 1100px;

    margin: auto;

    padding: 35px 35px 30px;

    border:
        1px solid
        rgba(255, 255, 255, 0.11);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.015)
        );

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, 0.3);
}


/* =========================================
   TÍTULO FASE
========================================= */

.titulo-seccion {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 20px;

    margin-bottom: 32px;

    text-align: left;
}

.numero-fase {
    color: #a15cff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2px;
}

.titulo-seccion h2 {
    margin-bottom: 6px;

    font-size: 25px;
}

.titulo-seccion p {
    color: #858591;

    font-size: 13px;
}


/* =========================================
   SELECTOR PARTICIPANTES
========================================= */

.selector-participantes {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 14px;
}


/* =========================================
   TARJETAS SELECCIÓN
========================================= */

.participante {
    --color-persona: #7777ff;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;

    gap: 10px;

    min-height: 150px;

    padding: 20px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-persona) 50%,
            transparent
        );

    border-radius: 20px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 50% 15%,
            color-mix(
                in srgb,
                var(--color-persona) 34%,
                transparent
            ),
            transparent 62%
        ),
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--color-persona) 16%,
                #101015
            ),
            #09090d
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.05),

        0 10px 30px
        rgba(0, 0, 0, 0.18);

    cursor: pointer;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        opacity 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================
   HOVER
========================================= */

.participante:hover {
    transform:
        translateY(-6px)
        scale(1.015);

    border-color:
        var(--color-persona);

    box-shadow:
        0 0 28px
        color-mix(
            in srgb,
            var(--color-persona) 32%,
            transparent
        ),

        0 15px 35px
        rgba(0, 0, 0, 0.3);
}


/* =========================================
   SELECCIONADO
========================================= */

.participante.seleccionado {
    border-color:
        var(--color-persona);

    background:
        radial-gradient(
            circle at 50% 15%,
            color-mix(
                in srgb,
                var(--color-persona) 48%,
                transparent
            ),
            transparent 62%
        ),
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--color-persona) 23%,
                #101015
            ),
            #09090d
        );

    box-shadow:
        0 0 30px
        color-mix(
            in srgb,
            var(--color-persona) 38%,
            transparent
        );
}

.participante.seleccionado .avatar {
    transform: scale(0.92);
}


/* =========================================
   AVATAR
========================================= */

.avatar {
    width: 58px;
    height: 58px;

    display: flex;

    justify-content: center;
    align-items: center;

    border-radius: 50%;

    color: #08080b;

    background:
        var(--color-persona);

    font-size: 23px;
    font-weight: 900;

    box-shadow:
        0 0 28px
        color-mix(
            in srgb,
            var(--color-persona) 55%,
            transparent
        );

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================
   NÚMERO ORDEN
========================================= */

.numero-orden {
    position: absolute;

    top: 10px;
    right: 10px;

    width: 27px;
    height: 27px;

    display: flex;

    justify-content: center;
    align-items: center;

    border-radius: 50%;

    color: #07070a;

    background:
        var(--color-persona);

    font-size: 12px;
    font-weight: 900;

    opacity: 0;

    transform: scale(0);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.participante.seleccionado .numero-orden {
    opacity: 1;

    transform: scale(1);
}


/* =========================================
   ORDEN ELEGIDO
========================================= */

.orden-elegido {
    margin-top: 28px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.07);
}

.etiqueta {
    margin-bottom: 15px;

    color: #666673;

    text-align: center;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 4px;
}

.lista-orden {
    min-height: 42px;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;
    align-items: center;

    gap: 8px;
}

.orden-vacio {
    color: #656571;

    font-size: 13px;
}

.item-orden {
    padding: 9px 14px;

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius: 100px;

    color: #c6c6ce;

    background:
        rgba(255, 255, 255, 0.035);

    font-size: 12px;
}

.item-orden strong {
    margin-right: 6px;

    color: #a96cff;
}


/* =========================================
   BOTONES ORDEN
========================================= */

.acciones-orden {
    display: flex;

    justify-content: center;

    gap: 12px;

    margin-top: 28px;
}

.boton-principal,
.boton-secundario {
    min-height: 53px;

    padding: 0 27px;

    border-radius: 100px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;

    cursor: pointer;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.boton-principal {
    border: none;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #834cff,
            #486cff
        );

    box-shadow:
        0 0 25px
        rgba(117, 78, 255, 0.35);
}

.boton-secundario {
    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    color: #9b9ba5;

    background: transparent;
}

.boton-principal:not(:disabled):hover,
.boton-secundario:not(:disabled):hover {
    transform: translateY(-3px);
}

button:disabled {
    opacity: 0.3;

    cursor: default;
}

.ayuda {
    margin-top: 20px;

    color: #555561;

    text-align: center;

    font-size: 11px;
}


/* =========================================
   ORDEN MINI
========================================= */

.barra-turnos {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-bottom: 25px;

    color: #5f5f6b;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;
}

.orden-mini {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 7px;
}

.turno-mini {
    padding: 7px 11px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 100px;

    color: #777783;

    background:
        rgba(255, 255, 255, 0.025);

    font-size: 9px;

    letter-spacing: 1px;

    transition: 0.3s ease;
}

.turno-mini.actual {
    color: #ffffff;

    border-color: #965cff;

    background:
        rgba(150, 92, 255, 0.15);
}

.turno-mini.terminado {
    opacity: 0.4;
}


/* =========================================
   TARJETAS SORTEO
========================================= */

.personas {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 15px;

    margin-bottom: 32px;
}

.persona {
    --color-persona: #7777ff;

    position: relative;

    min-width: 0;

    padding: 25px 16px 18px;

    overflow: hidden;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-persona) 60%,
            transparent
        );

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 50% -5%,
            color-mix(
                in srgb,
                var(--color-persona) 42%,
                transparent
            ),
            transparent 62%
        ),
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--color-persona) 19%,
                #101015
            ),
            #09090d
        );

    text-align: center;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.05),

        0 12px 35px
        rgba(0, 0, 0, 0.18);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease,
        box-shadow 0.4s ease;
}

.persona .avatar {
    margin: 0 auto 12px;
}

.persona h2 {
    margin-bottom: 20px;

    color: #ffffff;

    font-size: 20px;
}


/* =========================================
   TU TURNO
========================================= */

.turno-badge {
    position: absolute;

    top: 10px;
    right: 10px;

    padding: 5px 8px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-persona) 50%,
            transparent
        );

    border-radius: 100px;

    color:
        var(--color-persona);

    background:
        rgba(0, 0, 0, 0.45);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1px;

    opacity: 0;
}

.persona.activa .turno-badge {
    opacity: 1;
}

.persona.activa .turno-badge::before {
    content: "TU TURNO";
}


/* =========================================
   CASILLAS MARCAS
========================================= */

.marcas {
    display: flex;

    flex-direction: column;

    gap: 9px;
}

.marca {
    min-height: 53px;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 8px 10px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-persona) 25%,
            rgba(255, 255, 255, 0.05)
        );

    border-radius: 11px;

    color: #92929d;

    background:
        rgba(0, 0, 0, 0.25);

    font-size: 13px;
    font-weight: 700;

    line-height: 1.2;

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


/* =========================================
   LÍNEA COLOR
========================================= */

.linea {
    width: 55px;
    height: 3px;

    margin: 18px auto 0;

    border-radius: 50px;

    background:
        var(--color-persona);

    box-shadow:
        0 0 12px
        color-mix(
            in srgb,
            var(--color-persona) 65%,
            transparent
        );
}


/* =========================================
   ESPERANDO
========================================= */

.persona.esperando {
    opacity: 0.72;

    transform: scale(0.98);

    filter: none;
}


/* =========================================
   PERSONA ACTIVA
========================================= */

.persona.activa {
    z-index: 5;

    opacity: 1;

    transform:
        translateY(-10px)
        scale(1.04);

    border-color:
        var(--color-persona);

    background:
        radial-gradient(
            circle at 50% -5%,
            color-mix(
                in srgb,
                var(--color-persona) 60%,
                transparent
            ),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--color-persona) 28%,
                #101015
            ),
            #09090d
        );

    box-shadow:
        0 0 0 1px
        color-mix(
            in srgb,
            var(--color-persona) 80%,
            transparent
        ),

        0 0 30px
        color-mix(
            in srgb,
            var(--color-persona) 40%,
            transparent
        ),

        0 0 70px
        color-mix(
            in srgb,
            var(--color-persona) 20%,
            transparent
        );
}

.persona.activa .avatar {
    transform: scale(1.08);

    box-shadow:
        0 0 25px
        color-mix(
            in srgb,
            var(--color-persona) 85%,
            transparent
        ),

        0 0 50px
        color-mix(
            in srgb,
            var(--color-persona) 40%,
            transparent
        );
}


/* =========================================
   COMPLETADA
========================================= */

.persona.completada {
    opacity: 0.95;

    transform: scale(1);
}


/* =========================================
   ANIMACIÓN SORTEO
========================================= */

.marca.sorteando {
    color: #ffffff;

    border-color:
        color-mix(
            in srgb,
            var(--color-persona) 55%,
            transparent
        );

    background:
        color-mix(
            in srgb,
            var(--color-persona) 14%,
            #111116
        );

    animation:
        vibrar
        0.1s
        infinite alternate;
}

@keyframes vibrar {

    from {
        transform: translateY(-2px);
    }

    to {
        transform: translateY(2px);
    }

}


/* =========================================
   MARCA REVELADA
========================================= */

.marca.revelada {
    color: #ffffff;

    border-color:
        color-mix(
            in srgb,
            var(--color-persona) 70%,
            transparent
        );

    background:
        linear-gradient(
            90deg,

            color-mix(
                in srgb,
                var(--color-persona) 23%,
                #111116
            ),

            color-mix(
                in srgb,
                var(--color-persona) 10%,
                #111116
            )
        );

    animation:
        aparecerMarca
        0.5s
        cubic-bezier(.2, 1.6, .4, 1);
}

@keyframes aparecerMarca {

    0% {
        opacity: 0;

        transform: scale(0.65);
    }

    70% {
        transform: scale(1.07);
    }

    100% {
        opacity: 1;

        transform: scale(1);
    }

}


/* =========================================
   ESTADO
========================================= */

.estado {
    min-height: 30px;

    margin-bottom: 13px;

    text-align: center;
}

#mensaje {
    color: #b0b0ba;

    font-size: 14px;
}


/* =========================================
   BOTÓN SORTEO
========================================= */

.boton-sorteo {
    position: relative;

    display: block;

    min-width: 420px;

    margin: auto;

    padding: 20px 35px;

    overflow: hidden;

    border: none;

    border-radius: 100px;

    color: #ffffff;

    background: #09090e;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 4px;

    cursor: pointer;

    box-shadow:
        0 0 0 2px #965cff,
        0 0 28px rgba(150, 92, 255, 0.55),
        0 0 60px rgba(61, 108, 255, 0.22);

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.boton-sorteo:not(:disabled):hover {
    transform:
        translateY(-4px)
        scale(1.02);
}


/* =========================================
   DADO
========================================= */

.dado {
    display: inline-block;

    margin-right: 12px;

    font-size: 20px;

    vertical-align: middle;
}

.dado.girando {
    animation:
        girarDado
        0.5s
        linear
        infinite;
}

@keyframes girarDado {

    from {
        transform:
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            rotate(180deg)
            scale(1.3);
    }

    to {
        transform:
            rotate(360deg)
            scale(1);
    }

}


/* =========================================
   REGLA
========================================= */

.regla {
    margin-top: 23px;

    color: #646470;

    text-align: center;

    font-size: 9px;
    font-weight: 600;

    line-height: 1.8;

    letter-spacing: 4px;
}


/* =========================================
   FRASE
========================================= */

.frase {
    width: fit-content;

    max-width: 100%;

    display: flex;

    align-items: center;

    gap: 15px;

    margin: 38px auto 0;

    padding: 14px 25px;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 15px;

    color: #8c8c98;

    background:
        rgba(255, 255, 255, 0.025);

    font-size: 13px;
}

.frase span {
    color: #c86cff;

    font-size: 20px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .selector-participantes {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .personas {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================
   MÓVIL
========================================= */

@media (max-width: 600px) {

    body {
        padding: 30px 17px;
    }

    .encabezado {
        margin-bottom: 30px;
    }

    .encabezado h1 {
        letter-spacing: -2px;
    }

    .subtitulo {
        line-height: 2;

        letter-spacing: 2px;
    }

    .dayoff span {
        width: 30px;
    }

    .pantalla-orden {
        padding: 25px 18px;
    }

    .titulo-seccion {
        align-items: flex-start;
    }

    .selector-participantes {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .participante {
        min-height: 130px;
    }

    .acciones-orden {
        flex-direction: column;
    }

    .boton-principal,
    .boton-secundario {
        width: 100%;
    }

    .personas {
        grid-template-columns: 1fr;
    }

    .persona.esperando {
        opacity: 0.65;
    }

    .persona.activa {
        transform:
            translateY(-5px)
            scale(1.01);
    }

    .boton-sorteo {
        width: 100%;

        min-width: 0;

        padding: 19px 20px;

        letter-spacing: 2px;
    }

    .frase {
        font-size: 11px;
    }

}

/* =========================================
   POPUP MEME
========================================= */

.meme-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 30px;

    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


/* CUANDO EL MEME ESTÁ ACTIVO */

.meme-overlay.activo {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* TARJETA */

.meme-card {
    width: min(680px, 92vw);

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(168, 85, 247, 0.20),
            transparent 45%
        ),
        #0b0b10;

    box-shadow:
        0 30px 100px rgba(0, 0, 0, 0.65),
        0 0 50px rgba(168, 85, 247, 0.15);

    transform:
        scale(0.85)
        translateY(30px);

    opacity: 0;

    transition:
        transform 0.45s cubic-bezier(.2,.8,.2,1),
        opacity 0.35s ease;
}


/* ANIMACIÓN DE ENTRADA */

.meme-overlay.activo .meme-card {
    transform:
        scale(1)
        translateY(0);

    opacity: 1;
}


/* PARTE SUPERIOR */

.meme-superior {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 16px 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

    color: #aaaab6;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 3px;
}


.meme-punto {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #a855f7;

    box-shadow:
        0 0 12px #a855f7;
}


/* IMAGEN */

.meme-imagen-contenedor {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #050507;
}


.meme-imagen-contenedor img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* INFORMACIÓN INFERIOR */

.meme-info {
    display: flex;
    align-items: center;

    gap: 16px;

    padding: 20px 22px;
}


#memeIcono {
    font-size: 32px;
}


#memePersona {
    margin: 0 0 5px;

    color: #92929d;

    font-size: 12px;
}


#memeFrase {
    margin: 0;

    color: white;

    font-size: 18px;
    font-weight: 800;
}


/* =========================================
   OCULTAR
========================================= */

.oculto {
    display: none !important;
}


/*
   IMPORTANTE:
   cuando JS quiera mostrar el meme,
   puede tener .activo pero NO .oculto
*/

.meme-overlay.oculto {
    display: none !important;
}
/* =========================================
   POPUP MEME
========================================= */

.meme-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 30px;

    background: rgba(0, 0, 0, 0.88);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


/* CUANDO APARECE */

.meme-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================
   TARJETA DEL MEME
========================================= */

.meme-card {
    width: min(720px, 92vw);

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(168, 85, 247, 0.22),
            transparent 45%
        ),
        #0b0b10;

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, 0.75),

        0 0 60px
        rgba(168, 85, 247, 0.20);

    opacity: 0;

    transform:
        scale(0.82)
        translateY(30px);

    transition:
        transform 0.45s
        cubic-bezier(.2, .9, .2, 1.2),

        opacity 0.35s ease;
}


/* ANIMACIÓN ENTRADA */

.meme-overlay.visible .meme-card {
    opacity: 1;

    transform:
        scale(1)
        translateY(0);
}


/* =========================================
   CABECERA MEME
========================================= */

.meme-superior {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 16px 21px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);

    color: #aaaab6;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 3px;
}


.meme-punto {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #a855f7;

    box-shadow:
        0 0 15px #a855f7;
}


/* =========================================
   IMAGEN DEL MEME
========================================= */

.meme-imagen-contenedor {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #050507;
}


.meme-imagen-contenedor img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================
   INFORMACIÓN DEL MEME
========================================= */

.meme-info {
    display: flex;
    align-items: center;

    gap: 17px;

    padding: 20px 23px;
}


#memeIcono {
    flex-shrink: 0;

    font-size: 34px;
}


#memePersona {
    margin: 0 0 5px;

    color: #92929d;

    font-size: 12px;
}


#memeFrase {
    margin: 0;

    color: #ffffff;

    font-size: 19px;
    font-weight: 800;
}


/* =========================================
   RESPONSIVE MEME
========================================= */

@media (max-width: 600px) {

    .meme-overlay {
        padding: 17px;
    }

    .meme-card {
        width: 100%;

        border-radius: 20px;
    }

    .meme-info {
        padding: 17px;
    }

    #memeIcono {
        font-size: 28px;
    }

    #memeFrase {
        font-size: 16px;
    }

}
/* =========================================
   MEJORAR LEGIBILIDAD DE TEXTOS INFERIORES
========================================= */

/* "¡Listo! Todos tienen sus marcas." */
#mensaje {
    color: #ffffff !important;
    font-weight: 600;
    opacity: 1;
}


/* "SIN CAMBIOS · SIN ARREPENTIMIENTOS
   LO QUE TOCA, TOCA." */
.regla {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 700;

    letter-spacing: 4px;

    text-shadow:
        0 0 12px rgba(255, 255, 255, 0.15);
}


/* Frase inferior */
.frase {
    color: #ffffff;
}

.frase p,
#fraseFinal {
    color: #ffffff !important;
    opacity: 1 !important;
}


/* Texto del botón cuando termina */
.boton-sorteo:disabled,
.boton-sorteo.terminado {
    color: #ffffff !important;
    opacity: 1 !important;
}


/* Orden superior */
.barra-turnos > span {
    color: #ffffff;
    opacity: 0.75;
}


/* Números/nombres del orden */
.orden-mini span {
    color: #ffffff;
}
/* =====================================================
   AJUSTE FINAL DE LEGIBILIDAD
   PANTALLA DE SELECCIÓN DEL ORDEN
===================================================== */


/* =====================================================
   CONTENEDOR PRINCIPAL
===================================================== */

.pantalla-orden {
    color: #ffffff;
}


/* =====================================================
   TÍTULO DE LA SECCIÓN
   "¿Quién se la juega primero?"
===================================================== */

.titulo-seccion h2 {
    color: #ffffff !important;

    font-size: 22px;
    font-weight: 800;

    opacity: 1 !important;
}


/* Texto:
   "Seleccionen a cada participante..."
*/

.titulo-seccion p {
    color: #d7d7df !important;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.5;

    opacity: 1 !important;
}


/* Número 01 */

.numero-fase {
    color: #b85cff !important;

    font-size: 13px;
    font-weight: 900;

    opacity: 1 !important;

    text-shadow:
        0 0 12px rgba(184, 92, 255, 0.45);
}


/* =====================================================
   TARJETAS DE PARTICIPANTES
===================================================== */

.participante strong {
    color: #ffffff !important;

    font-size: 14px;
    font-weight: 800;

    opacity: 1 !important;
}


/* =====================================================
   SECCIÓN "ORDEN DEL DESTINO"
===================================================== */

.orden-elegido {
    color: #ffffff;
}


/* Título ORDEN DEL DESTINO */

.orden-elegido .etiqueta,
.etiqueta {
    color: #ffffff !important;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 4px;

    opacity: 0.85 !important;

    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.10);
}


/* =====================================================
   TEXTO CUANDO NO HAY NADIE SELECCIONADO
===================================================== */

.orden-vacio {
    color: #ffffff !important;

    font-size: 13px;
    font-weight: 500;

    opacity: 0.85 !important;
}


/* =====================================================
   PERSONAS QUE YA FUERON ELEGIDAS EN EL ORDEN
===================================================== */

.lista-orden {
    color: #ffffff;
}


.lista-orden span:not(.orden-vacio) {
    color: #ffffff !important;

    font-weight: 700;

    opacity: 1 !important;
}


/* Si utilizas chips para mostrar el orden */

.orden-item,
.item-orden {
    color: #ffffff !important;

    opacity: 1 !important;
}


/* =====================================================
   BOTONES
===================================================== */

.acciones-orden button {
    font-weight: 800;

    opacity: 1;

    letter-spacing: 2px;
}


/* LIMPIAR ORDEN */

.boton-secundario {
    color: #ffffff !important;

    border-color:
        rgba(255, 255, 255, 0.25) !important;

    opacity: 1 !important;
}


/* COMENZAR SORTEO */

.boton-principal {
    color: #ffffff !important;

    opacity: 1 !important;
}


/* =====================================================
   BOTONES DESACTIVADOS

   Aquí NO los hacemos súper transparentes porque
   precisamente por eso casi no se alcanzaban a leer.
===================================================== */

.boton-secundario:disabled,
.boton-principal:disabled {
    color:
        rgba(255, 255, 255, 0.55) !important;

    opacity: 1 !important;

    cursor: not-allowed;
}


.boton-secundario:disabled {
    border-color:
        rgba(255, 255, 255, 0.12) !important;

    background:
        rgba(255, 255, 255, 0.025) !important;
}


.boton-principal:disabled {
    background:
        rgba(105, 105, 255, 0.32) !important;

    border-color:
        rgba(130, 130, 255, 0.28) !important;
}


/* =====================================================
   TEXTO INFERIOR
   "Una vez iniciado el sorteo..."
===================================================== */

.ayuda {
    color: #ffffff !important;

    font-size: 11px;
    font-weight: 500;

    line-height: 1.5;

    opacity: 0.72 !important;
}


/* =====================================================
   PANTALLA DEL SORTEO
   También dejamos corregidos los textos inferiores
===================================================== */


/* Mensaje de turno / final */

#mensaje {
    color: #ffffff !important;

    font-weight: 600;

    opacity: 1 !important;
}


/* Regla inferior */

.regla {
    color: #ffffff !important;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.7;
    letter-spacing: 4px;

    opacity: 0.9 !important;

    text-shadow:
        0 0 12px
        rgba(255, 255, 255, 0.12);
}


/* Frase final */

.frase {
    color: #ffffff !important;
}


.frase p,
#fraseFinal {
    color: #ffffff !important;

    opacity: 0.85 !important;
}


/* =====================================================
   ORDEN MINI DE LA PANTALLA DEL SORTEO
===================================================== */

.barra-turnos {
    color: #ffffff;
}


.barra-turnos > span {
    color: #ffffff !important;

    font-weight: 700;

    opacity: 0.75 !important;
}


.orden-mini span {
    color: #ffffff !important;

    opacity: 1 !important;
}