* { box-sizing: border-box; }
body { font-family: sans-serif; background: #e9ecef; margin: 0; padding: 10px; display: flex; justify-content: center; }
.contenedor { max-width: 900px; width: 100%; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

/* Encabezados y Autor */
.titulo-principal { text-align: center; color: #212529; font-size: 32px; margin-bottom: 5px; font-weight: 900; letter-spacing: 1px; }
.subtitulo-autor { text-align: center; color: #6c757d; font-size: 18px; font-style: italic; margin-top: 0; margin-bottom: 20px; }

/* Sección de la imagen */
.guia-manos { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 15px; text-align: center; margin-bottom: 20px; }
.guia-manos p { margin-top: 0; color: #495057; font-weight: bold; }
.imagen-manos { max-width: 100%; height: auto; max-height: 250px; }

#texto-practica { width: 100%; height: 80px; margin-bottom: 15px; padding: 10px; font-size: 16px; border: 1px solid #ced4da; border-radius: 4px; resize: vertical; }

/* Botón Rojo 100% Ancho */
.btn-rojo { width: 100%; background: #dc3545; color: white; border: none; padding: 15px; cursor: pointer; border-radius: 5px; font-size: 18px; font-weight: bold; text-transform: uppercase; transition: background 0.2s; }
.btn-rojo:hover { background: #c82333; }

.estadisticas { display: flex; justify-content: space-between; background: #343a40; color: white; padding: 10px 20px; border-radius: 5px; margin-bottom: 15px; font-weight: bold; }

.area-mecanografia { 
    font-size: 24px; 
    line-height: 40px; 
    background: #f8f9fa; 
    padding: 15px; 
    border-radius: 5px; 
    border: 2px solid #ced4da; 
    margin-bottom: 15px; 
    height: 110px; 
    overflow-y: hidden; 
    position: relative; 
    word-break: break-word;
    
    /* ESTA LÍNEA ES CRÍTICA PARA QUE SE RESPETEN LOS PÁRRAFOS */
    white-space: pre-wrap; 
}

.letra-correcta { color: #adb5bd; }
.letra-actual { background-color: #ffe066; color: #000; font-weight: bold; padding: 0 2px; border-radius: 3px; border-bottom: 3px solid #fd7e14; }
.letra-incorrecta { color: #fff; background-color: #dc3545; }
/* Estilo para el símbolo de Enter en la pantalla */
.letra-salto {
    color: #adb5bd;
    opacity: 0.6;
    font-weight: normal;
}
/* Verde cuando aciertan a la primera */
/* Color verde claro para las letras que se escribieron bien a la primera */
.letra-correcta { 
    color: #066d1e !important; 
    background-color: #d4edda !important; 
    border-radius: 2px;
}

/* Color rojo claro permanente para las letras donde el alumno cometió un error */
.letra-corregida-error { 
    color: #ba0416 !important; 
    background-color: #feafaf !important; 
    border-radius: 2px;
    font-weight: bold;
    border-bottom: 2px solid #dc3545 !important;
}

/* Letra actual que el alumno debe escribir (fondo amarillo) */
.letra-actual { 
    background-color: #ffe066 !important; 
    color: #000 !important; 
    font-weight: bold; 
    padding: 0 2px; 
    border-radius: 3px; 
    border-bottom: 3px solid #fd7e14 !important; 
}

/* Letras futuras que aún no se escriben (color oscuro normal del texto) */
#display-texto span:not(.letra-correcta):not(.letra-corregida-error):not(.letra-actual) {
    color: #495057 !important;
}

.icono-emoji {
    border: none !important;
    font-size: 60px;
}

.indicador-dedo { text-align: center; font-size: 18px; color: #0056b3; margin-bottom: 15px; font-weight: bold; }

/* Teclado CSS */
.teclado { display: flex; flex-direction: column; gap: 5px; background: #dee2e6; padding: 10px; border-radius: 8px; }
.fila { display: flex; justify-content: center; gap: 5px; }
.tecla { border: 1px solid rgba(0,0,0,0.1); border-radius: 5px; min-width: 40px; height: 45px; display: flex; justify-content: center; align-items: center; font-size: 14px; color: #495057; box-shadow: 0 2px 0 rgba(0,0,0,0.15); transition: all 0.1s; }
.tecla.ancha { min-width: 60px; }
.tecla.extra-ancha { min-width: 85px; }
.tecla.barra-espaciadora { width: 350px; }

/* PALETA DE COLORES POR DEDOS (Tonos Pastel para legibilidad) */
.c-mi { background-color: #fbcfe8; } /* Meñique Izq: Rosa claro */
.c-ai { background-color: #fed7aa; } /* Anular Izq: Naranja claro */
.c-mdi { background-color: #fef08a; } /* Medio Izq: Amarillo claro */
.c-ii { background-color: #bbf7d0; } /* Índice Izq: Verde claro */
.c-id { background-color: #99f6e4; } /* Índice Der: Turquesa claro */
.c-mdd { background-color: #bfdbfe; } /* Medio Der: Azul claro */
.c-ad { background-color: #e9d5ff; } /* Anular Der: Morado claro */
.c-md { background-color: #fecdd3; } /* Meñique Der: Rojo/Rosa claro */
.c-p { background-color: #e5e7eb; }  /* Pulgares: Gris claro */

/* Tecla activa y errores (Forzamos alto contraste con !important) */
.tecla-activa { 
    background: #212529 !important; 
    color: #ffffff !important; 
    border-color: #000 !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important; 
    transform: scale(1.1); 
    font-weight: bold; 
    z-index: 10;
}
.tecla-error { 
    background: #dc3545 !important; 
    color: white !important; 
    box-shadow: 0 0 8px #dc3545 !important; 
}