:root {
    /* DEFINIENDO VARIABLES */
    --blanco: #ffffff;
    --negro: #141414;
    --azul: blue;
    --margenesnormales: 20px;
}

* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

#carton {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    border: 1px solid var(--negro);
    text-align: center;
    width: 50%;
}

#muestra {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    border: 1px solid var(--negro);
    text-align: center;
    width: 50%;
}

#libres{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--negro);
    text-align: center;
    width: 50%;
}

#carton div {
    border: 1px solid var(--negro);
    height: 60px;
    padding-top: var(--margenesnormales);
}

#muestra div {
    border: 1px solid var(--negro);
    height: 60px;
    padding-top: var(--margenesnormales);
}

.numero{
    background-color: rgba(128, 128, 128, 0.582);
    font-size: 1.5em;
}

.vacio{
    background-color: var(--azul);
    color: var(--azul);
}