/*Estilo para todo el documento*/
*
{
    font-family: Arial;
    padding: 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Estilo del cuerpo*/
body
{
    height: 60vh;
    background-color: #ffffff;
    color: #000;
}

/*Cabecera h1*/
h1
{
    font-size: 28px;
    font-weight: bold;
    color: #000;
    text-align: center;
    padding: 10px;
}

/*Estilos de la Tabla*/
table 
{
    border-collapse: collapse;
    width: 80%;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #d3d3d3;
    font-size: 20px;

}

/*Filas y columnas de la tabla*/
th, td
{
    padding: 10px;
    font-size: 16px;
    border: 1px solid #d3d3d3;
}

/*Color de fondo para las cabeceras thead*/
thead th
{
    background-color: #009688;
    color: #ffffff;
    font-weight: bold;
}

/*Estilo primera columna de la tabla*/
td:first-child, th:first-child
{
    background-color: #009688;
    color:#ffffff;
    font-weight: bold;
}

/*Anchos y alineación de las columnas*/
td:nth-child(2), th:nth-child(2)
{
    width: 35%;
}
td:nth-child(3), th:nth-child(3)
{
    width: 18%;
}
td:nth-child(4), th:nth-child(4)
{
    width: 22%;
}

/*Efecto tbody*/
tbody tr:nth-child(even) td:not(:first-child)
{
    background-color: #ffffff;
}   
tr:nth-child(odd) td:not(:first-child)
{
    background-color: #e2eeec;
}   

/*Efecto de cambiar el tono de fondo al pasar el ratón por encima de las filas de la tabla*/
tbody tr:hover td:not(:first-child)
{
    background-color: #bfdddd;
    transition: background-color 0.4s ease;
}

/*Simbolo de euro*/
td:nth-child(3):after
{
    content: "€";
}


/*Pie inferior de la tabla */
caption 
{
    color: #000;
    width: 80%;
    caption-side: bottom;
    padding: 5%;
}