* {
    font-family: sans-serif;
    margin: 0;
}

body {
    text-align: center;
    background-color: snow;
}

header {
    top: 0;
    left: 0;
    color: white;
    background-color: royalblue;
    position: sticky;
    font-weight: normal;
    padding: 0.5em 0em 0.5em 2em;
    font-size: 0.7em;
    text-align: left;
    margin-bottom: 2em;
}

.grid-categorias {
    display: grid;
    grid-template-columns: auto auto auto;
}

.grid-proyectos {
    display: grid;
    grid-template-columns: auto auto;
    margin: 0%;
}

.Carta {
    color: black;
    padding: 1em;
    margin: 1em;
    border-style: none;
    border-radius: 1em 30em 30em 30em;
}

.Carta:hover {
    box-shadow: 5px 5px black;
    cursor: pointer;
    border-width: 3px;
    border-color: black;
    border-style: solid;
    background-color: whitesmoke;
    padding: 0.9em;
}

.Categoria {
    width: 100%/3;
    color: black;
    padding: 1em;
    margin: 1em;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    border-radius: 0em;
}

.Categoria-titulo {
    text-wrap: nowrap;
    text-align: center;
    background-color: inherit;
    color: inherit;
    font-weight: normal;
    padding: 0em 0.5em 0em 0.5em;
    font-size: 1.2em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.Carta-titulo {
    border-radius: 0em 1em 1em 0em;
    border-width: 1px;
    border-style: none;
    text-wrap: nowrap;
    text-align: left;
    background-color: inherit;
    color: inherit;
    font-weight: bold;
    padding: 0em 0.3em 0em 0.3em;
    font-size: 1.3em;
    letter-spacing: 0em;
}

.Carta-titulo:hover {
    box-shadow: 5px 5px black;
    cursor: pointer;
    border-width: 3px;
    border-color: black;
    border-style: solid;
    background-color: whitesmoke;
}

.Carta-descripcion {
    color: black;
    letter-spacing: 0em;
    font-size: 1em;
}

.Carta1 {
    background-color: linen;
}

.Carta2 {
    background-color: #d5e0f5;
}

.Carta3 {
    background-color: #7e98f7;
}

.Proyecto {
    color: black;
    padding: 1em;
    margin: 8px;
    border-style: none;
    border-radius: 0 1em 1em 1em;
    background-color: linen;
}

.Proyecto:hover {
    cursor: pointer;
    margin: 5px;
    box-shadow: 5px 5px black;
    border-width: 3px;
    border-color: black;
    border-style: solid;
    background-color: cornsilk;
}

.Proyecto-titulo {
    border-radius: 0em 1em 1em 0em;
    border-width: 1px;
    border-style: none;
    text-wrap: nowrap;
    text-align: left;
    background-color: inherit;
    color: inherit;
    font-weight: bold;
    padding: 0em 0.3em 0em 0.3em;
    font-size: 1.3em;
    letter-spacing: 0em;
}

.Proyecto-descripcion {
    color: black;
    letter-spacing: 0em;
    font-size: 1em;
}

.tag {
    border-radius: 30em 30em 30em 30em;
    font-size: 0.8em;
    font-weight: bold;
    color: white;
    padding: 0em 0.5em;
    text-transform: uppercase;
    margin-bottom: 0.5em;
    margin-top: 2em;
}

.tag-1 {
    background-color: dodgerblue;
}

.tag-2 {
    background-color: orangered;
}

.tag-3 {
    background-color: olivedrab;
}

.tag-4 {
    background-color: goldenrod;
}

.tag-5 {
    background-color: gold;
    color: black;
}

footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    color: black;
    text-align: right;
    background-color: lavender;
    padding: 0.1em;
}

/* Listado de colores
 *  #FFFFFF
 *  #000000
 *  #BD3B1F -   Rojizo
 *  #D2BF94 -   Beige accent principal
 *  #F5E9CD -   Semi beige y blanco
 *  #E2B147 -   Amarillo ocre
 *  #CC7E00 -   Anaranjado oscurecido
*/

#contenedor {
    margin: 5px;
    padding: 5px;
    display: flex;
}

#tabla {
    background-color: #d6e7ff;
    border: 2px solid lightblue;
    margin-right: 10px;
    padding: 5px;
}

#fixture {
    width: 100%;
    background-color: #d6e7ff;
    border: 2px solid lightblue;
    float: right;
}

#opciones {
    background-color: #d6e7ff;
    border: 2px solid lightblue;
    margin: 10px;
    padding: 5px;
}

.numero {
    background-color: #9391fc;
    color: white;
    border-radius: 100%;
    padding: 1em;
    text-align: center;
}

.boton {
    padding: 1em;
}

#agregarParticipante {
    background-color: #6461e7;
    color: white;
    width: 100%;
    padding: 1em;
}

.botonEliminar:disabled {
    padding-left: 1em;
    padding-right: 1em;
}

.botonEliminar:enabled {
    background-color: red;
    color: white;
    padding-left: 1em;
    padding-right: 1em;
}

.boton:enabled {
    background-color: #6461e7;
    color: white;
    padding: 1em;
    margin: 1em;
}

.inputParticipante,
.inputEquipo {
    padding: 2px;
}

hr {
    margin: 0px 10px 0px 10px;
    color: #172abe;
}