img {width:3cm;height:3cm;}
table {width:100%;margin:auto;}
th#price {cursor:pointer;}
li {color:dimgray;}
/*si chequea muestra los productos sin cheque desaparecen los productos*/
input#c1:checked ~ table tbody tr.c1 { display: table-row; }
input#c1:not(checked) ~ table tbody tr.c1 { display: none; }
input#c2:checked ~ table tbody tr.c2 { display: table-row; }
input#c2:not(checked) ~ table tbody tr.c2 { display: none; }
input#c3:checked ~ table tbody tr.c3 { display: table-row; }
input#c3:not(checked) ~ table tbody tr.c3 { display: none; }
input#c4:checked ~ table tbody tr.c4 { display: table-row; }
input#c4:not(checked) ~ table tbody tr.c4 { display: none; }


.autor, .carnet, .correo, .grupo {
    text-align: center;
    font-size: 1.1rem;
    color: #004d40;
    margin: 5px 0;
    font-weight: bold;
}

.autor, .carnet, .correo, .grupo {
    background-color: #e0f2f1;
    padding: 8px;
    border-radius: 5px;
}

table thead th {
    background-color: #00695c;
    color: white;
}

body{
    font-family: "Monaco", monospace;
    background: linear-gradient(to right, mediumturquoise, #ffffff);
    color:black;
    margin: 0;
    padding: 20px;
}

h1{
    text-align: center;
    color:black;
    text-shadow: 3px 3px 5px darkgray;
}
p{
    text-align: center;
    color:black;
    font-size: 1rem;
}

button{
    background-color: lightslategrey;
    color: white;
    border:none;
    padding: 10px 20px;
    margin: 15px 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: xx-large;
    transition: 0.012s;
}

button:hover{
    background-color: #004d40;

}

table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    background: linear-gradient(to right,lightslategrey, white);
}

th, td{
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    font-size: 0.95rem;
}

th{
    background-color: #00897b;
    color: white;
    cursor: pointer;
}

tr:nth-child(even){
    background-color: #f2f2f2;
}

tr:hover{
    background-color: #e0f2f1;
}