body {
    font-size:25px;
    width:100%;
}

h1, h2{
  text-align:center;
}

.listaCompleta {
    width:91.5%;
    margin-left:2%;
    padding:20px;
    background:green;
    border: 2px solid black;
    color:white;
    text-align:center;
}

.lista-deportes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 40px;   /* espacio vertical y horizontal */
    list-style: disc;
    padding: 50px;
    background: #0a7f1e; /* verde más elegante */
    color: white;
    font-size: 24px;
}

.lista-deportes li {
    padding-left: 20px;
    list-style:"|";
}

li.football::before {
  content: "⚽";
  margin-right: 8px;
}

ul input {
    font-size:25px;
    width:165px;
    height:30px;
    padding:2px 6px;
    transition: background-color 0.3s, border 0.3s;
}



.exercise-table table {
    width: 96%;
    margin-left:2%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
}

.exercise-table th {
    background: #f7c800;
    padding: 10px;
    font-size: 20px;
    text-align: center;
}

.exercise-table td {
    background: #e8f2d2;
    vertical-align: top;
    padding: 15px;
}

.exercise-table ul {
    margin: 0;
    padding-left: 18px;
}

.correcto {
    border: 2px solid green;
    background-color: #d6f5d6;
}

.incorrecto {
    border: 2px solid red;
    background-color: #f7d4d4;
}

button {
    font-size: 20px;        /* Tamaño de la letra */
    padding: 10px 20px;     /* Espacio arriba/abajo y a los lados */
    border-radius: 8px;     /* Bordes redondeados */
    border: 2px solid #333; /* Borde visible */
    background-color: #f7c800; /* Color de fondo */
    cursor: pointer;        /* Cambia el cursor al pasar por encima */
    transition: background-color 0.3s, transform 0.2s;
}

/* Efecto hover */
button:hover {
    background-color: #e6b800;
    transform: scale(1.5); /* Agranda un poco al pasar el ratón */
}

/* ----- MÓVILES ----- */
@media (max-width: 600px) {
    body {
        font-size: 18px;
    }
    .listaCompleta {
        width:84%;
        max-width: 100%;
    }

    .lista-deportes {
        grid-template-columns: repeat(2, 1fr); /* una sola columna */
        padding: 10px;              /* sin desbordes */
        gap: 8px;
        font-size: 18px;
        list-style:"fff";
    }

    .lista-deportes li {
        padding-left: 10px; /* evita que el punto empuje demasiado */
    
    }


    


    .exercise-table table {
        font-size: 18px;
    }

    ul input {
        width: 95%; 
        max-width:140px;    }

    footer {
        padding: 10px;
        text-align: left;
    }
}
@media (min-width:1024px) {
  .listaCompleta{
    width:93%;
  }
}