@import url('https://fonts.googleapis.com/css2?family=Pompiere&display=swap');

body{
    font-family: 'Pompiere', cursive;
    background-color: #FEFEFE;
}

.fa-1_5x{ font-size: 1.5em !important;}
.fa-1_25x{ font-size: 1.25em !important;}
.h50{ height: 50px}
.h100{ height: 100px}
.oculto{display: none;}
.cursor-pointer{ cursor: pointer; }

.logo-login{
    max-width: 150px!important;
}

.fondo-puzle{
    background-image: url("http://sevensins.paranoiasisaacdev.com/tema_default/img/fondo-puzle.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position-y: bottom;
}

.icono-apatia{ left:-7px;}
/*
.fa-2x{ font-size: 2em !important;}*/
.icono-competencia{
    max-width: 35px;
    max-height: 35px;
}

.icono-puzle{
    margin-top: -10px;
}

.checkbox-competencias, .checkbox-extras{
    padding: 10px !important;
}

.checkbox-competencias:not(:disabled):not(:checked), .checkbox-extras:not(:disabled):not(:checked){
    border-color: green;
    background-color: #E5FAE5;
}

.checkbox-competencias.pendiente{
    border-color: orange;
    background-color: #FFD5A2;
}

.mapa{
    background-size: cover;
}

.mapa .col-2b{
    width: 20%;
    padding: 0px;
}

.mapa .casilla{
    /*border: 1px solid red;*/
    padding-bottom: 100%;
}

.casilla.visitada{
    background-color: rgba(255,255,255, 0.95);
}

.casilla.visitada img{
    position: absolute;
    max-width: 45px;
    margin-left: 40px;
    margin-top: 40px;
}

.casilla-actual{
    background-color: rgba(155,0,255,0.75);
}

.reto:not(:first-child){
    display: none;
}

/* =================== DADOS =================== */
.dados {
    align-items: center;
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
    grid-template-rows: auto;
    justify-items: center;
    padding: 2rem;
    perspective: 600px;
}
.die-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 6rem;
    list-style-type: none;
    transform-style: preserve-3d;
    width: 6rem;
}
.even-roll {
    transition: transform 1.25s ease-out;
}

.odd-roll {
    transition: transform 1.25s ease-out;
}

.odd2-roll {
    transition: transform 1.25s ease-out;
}

.die-item {

    background-color: #eeeeee;
    box-shadow: inset -0.15rem 0.15rem 0.35rem rgba(0, 0, 0, 0.3),
    inset 0.1rem -0.15rem 0.25rem rgba(0, 0, 0, 0.15);
    display: grid;
    grid-column: 1;
    grid-row: 1;
    height: 50%;
    padding: 0.5rem;
    width: 50%;
}

.die-item img{
    max-width: 30px;
    margin: auto;
    padding: 0px;
}
.die-item img.invertida{
    transform: scaleY(-1);
}

.dado-activo{
    cursor: pointer;
}
.dado-inactivo img{
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.even-roll[data-roll="1"] {
    transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="2"] {
    transform: rotateX(450deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="3"] {
    transform: rotateX(360deg) rotateY(630deg) rotateZ(360deg);
}
.even-roll[data-roll="4"] {
    transform: rotateX(360deg) rotateY(810deg) rotateZ(360deg);
}
.even-roll[data-roll="5"] {
    transform: rotateX(270deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="6"] {
    transform: rotateX(360deg) rotateY(900deg) rotateZ(360deg);
}
.odd-roll[data-roll="1"] {
    transform: rotateX(-360deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="2"] {
    transform: rotateX(-270deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="3"] {
    transform: rotateX(-360deg) rotateY(-810deg) rotateZ(-360deg);
}
.odd-roll[data-roll="4"] {
    transform: rotateX(-360deg) rotateY(-630deg) rotateZ(-360deg);
}
.odd-roll[data-roll="5"] {
    transform: rotateX(-450deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="6"] {
    transform: rotateX(-360deg) rotateY(-900deg) rotateZ(-360deg);
}
[data-side="1"] {
    transform: rotate3d(0, 0, 0, 90deg) translateZ(2rem);
}
[data-side="2"] {
    transform: rotate3d(-1, 0, 0, 90deg) translateZ(2rem);
}
[data-side="3"] {
    transform: rotate3d(0, 1, 0, 90deg) translateZ(2rem);
}
[data-side="4"] {
    transform: rotate3d(0, -1, 0, 90deg) translateZ(2rem);
}
[data-side="5"] {
    transform: rotate3d(1, 0, 0, 90deg) translateZ(2rem);
}
[data-side="6"] {
    transform: rotate3d(1, 0, 0, 180deg) translateZ(2rem);
}

.die-item, .dice, .dot, .die-list{
    box-sizing: unset;
}

/* =================== Juegos - Speed Finger (mecanografía) ======================== */
.palabraActual{
    min-height: 100px;
    color: darkred;
    font-weight: bold;
    font-size: 3rem;
}

.palabra-mal{
    background-color: #F6CECE !important;
}


.hud-mecanografia input, .hud-mecanografia input:disabled, .hud-mecanografia input:focus{
    background-color: transparent;
    border: 1px solid #000000;
    text-align: center;
}

.hud-mecanografia .fa-check{
    color: green;
}

.hud-mecanografia .fa-times{
    color: red;
}

.listaSonidos li{
    text-align: center;
    padding: 4px;
    list-style: none;
}

.listaSonidos li:hover{
    background-color: #F1F1F1;
    cursor: pointer;
}

.listaSonidos li#tCuerda:hover{background-color: indianred;}
.listaSonidos li#tLaser:hover{background-color: darkseagreen;}
.listaSonidos li#tCampana:hover{background-color: lightgoldenrodyellow;}
.listaSonidos li#tGrapadora:hover{background-color: dodgerblue;}

.showColor{height:200px;}

.MS-countDown{
    font-size: 5rem;
    text-align: center;
}

.MS-showcolor{height:200px;}

.MS-4{
    height: 25vh;
    background-color: indianred;
    box-shadow: 0px 0px 10px 10px rgba(205,92,92,1);}

.MS-1{
    height: 25vh;
    background-color: lightgoldenrodyellow;
    box-shadow: 0px 0px 10px 10px rgba(250,250,210,1);}

.MS-2{
    height: 25vh;
    background-color: darkseagreen;
    box-shadow: 0px 0px 10px 10px rgba(143,188,143,1);}

.MS-3{
    height: 25vh;
    background-color: dodgerblue;
    box-shadow: 0px 0px 10px 10px rgba(30,144,255,1);}

.MS-default{background-color: rgba(255,255,255,0.75);}