body{
font-family:Arial, Helvetica, sans-serif;
background:linear-gradient(135deg,#eef2f7,#e6ecf5);
margin:0;
padding:20px;
}

/* CONTENEDOR PRINCIPAL */

.container{
max-width:1000px;
margin:auto;
background:white;
padding:25px;
border-radius:14px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

h1{
text-align:center;
margin-bottom:10px;
color:#2c3e50;
}

.nota{
font-size:22px;
margin-bottom:15px;
text-align:center;
}

/* SELECTOR IDIOMA */

.selector{
width:140px;
position:relative;
margin-bottom:20px;
cursor:pointer;
}

.selected{
display:flex;
align-items:center;
gap:8px;
border:1px solid #ddd;
padding:8px;
border-radius:8px;
background:white;
transition:0.2s;
}

.selected:hover{
background:#f5f7fb;
}

.selected img{
width:22px;
}

.options{
display:none;
position:absolute;
background:white;
border:1px solid #ddd;
width:100%;
border-radius:8px;
z-index:10;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.options div{
display:flex;
align-items:center;
gap:8px;
padding:8px;
}

.options div:hover{
background:#eef3ff;
}

.options img{
width:22px;
}

/* BOTONES */

.botones{
display:flex;
justify-content:center;
gap:20px;
margin:25px 0;
}

button{
padding:10px 22px;
border:none;
border-radius:8px;
background:linear-gradient(135deg,#4CAF50,#2e8b57);
color:white;
cursor:pointer;
font-size:15px;
transition:0.25s;
box-shadow:0 4px 8px rgba(0,0,0,0.1);
}

button:hover{
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,0.15);
}



/* TABLA PROFESIONAL */

table{
width:100%;
border-collapse:separate;
border-spacing:0;
overflow:hidden;
border-radius:12px;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

/* CABECERA */

th{
background:linear-gradient(135deg,#5f9cff,#3f6ef7);
color:white;
padding:14px;
font-size:15px;
letter-spacing:0.5px;
}

/* CELDAS */

td{
padding:14px;
text-align:center;
border-bottom:1px solid #eee;
transition:0.2s;
}

/* FILAS ALTERNAS */

tr:nth-child(even) td{
background:#f8faff;
}

/* HOVER FILAS */

tr:hover td{
background:#eef3ff;
}

/* COLORES SUAVES POR COLUMNA */

td:nth-child(1){
background:#f7fbff;
font-weight:bold;
}

td:nth-child(2){
background:#fcf9ff;
}

td:nth-child(3){
background:#fffaf7;
}

td:nth-child(4){
background:#f8fff8;
}

/* INPUTS */

input{
width:90%;
padding:7px;
border-radius:7px;
border:1px solid #ccc;
text-align:center;
font-size:14px;
background:white;
transition:0.25s;
}

input:focus{
outline:none;
border-color:#4aa3ff;
box-shadow:0 0 6px rgba(74,163,255,0.4);
}

/* RESPUESTAS */

.correct{
background:#c8f7c5 !important;
border:1px solid #3ba839 !important;
color:#1e5c1e;
}

.incorrect{
background:#f7c5c5 !important;
border:1px solid #d63b3b !important;
color:#8a1f1f;
}

.mostrar{
background:#4aa3ff !important;
color:white;
border:1px solid #357ae8 !important;
}

/* ESTADISTICAS */

.stats{
margin-top:30px;
}

.stats h3{
text-align:center;
margin-bottom:10px;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
}

.stat-box{
border-radius:10px;
padding:12px;
text-align:center;
background:linear-gradient(135deg,#ffffff,#f4f7ff);
border:1px solid #e3e7f0;
box-shadow:0 3px 8px rgba(0,0,0,0.05);
}

.stat-box h4{
margin:5px 0;
font-size:15px;
color:#444;
}

.stat-box p{
font-size:18px;
font-weight:bold;
color:#2c3e50;
}

/* BOTON BORRAR ESTADISTICAS */

#borrarStats{
margin-top:15px;
background:linear-gradient(135deg,#ff5c5c,#d63b3b);
}

#borrarStats:hover{
background:linear-gradient(135deg,#ff3b3b,#b82d2d);
}

/* RESPONSIVE */

@media(max-width:700px){

th,td{
font-size:12px;
padding:8px;
}

.stats-grid{
grid-template-columns:repeat(2,1fr);
}

button{
padding:8px 14px;
}

}