* { 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; }

.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; }

.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; 
}