/* Entrenador de Mecanografía v1.8.1 */
.tap-wrapper { font-family:"Inter","Roboto","Helvetica",sans-serif; display:flex; justify-content:center; padding:24px; }
.tap-card { width:100%; max-width:1000px; background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,0.08); padding:24px; border:1px solid #e5e7eb; }
.tap-title { color:#1E40AF; font-size:28px; margin:0 0 8px; }
.tap-subtitle { color:#374151; margin:0 0 16px; }
.tap-prestart { background:#F8FAFF; border:1px solid #E5EDFF; padding:12px; border-radius:12px; margin-bottom:16px; }
.tap-prestart-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tap-select { padding:8px 10px; border-radius:10px; border:1px solid #93C5FD; background:#fff; }
.tap-controls { display:flex; gap:12px; margin:12px 0 16px; }
.tap-btn { background:#2563EB; color:#fff; border:none; padding:10px 16px; border-radius:12px; cursor:pointer; box-shadow:0 4px 12px rgba(37,99,235,0.2); transition:background 0.2s, transform 0.02s; }
.tap-btn:hover { background:#1E40AF; }
.tap-btn:active { transform: translateY(1px); }
.tap-btn-secondary { background:#3B82F6; }
.tap-btn-ghost { background:#E0EAFF; color:#1E40AF; }
.tap-lesson-info { background:#F8FAFF; border:1px solid #E5EDFF; padding:16px; border-radius:12px; margin-bottom:16px; }
.tap-lesson-breadcrumb { color:#1E40AF; font-weight:600; margin-bottom:4px; }
.tap-lesson-title { font-weight:700; color:#0f172a; margin-bottom:4px; }
.tap-lesson-desc { color:#334155; margin-bottom:8px; }
.tap-lesson-instructions-title { color:#1E40AF; font-weight:600; margin-top:6px; }
.tap-lesson-instructions { color:#0f172a; margin-bottom:10px; }
.tap-lesson-target-title { color:#1E40AF; font-weight:600; margin-bottom:4px; }
.tap-lesson-target { font-family: ui-sans-serif, system-ui; background:#fff; border:1px dashed #93C5FD; padding:12px; border-radius:8px; color:#0f172a; white-space:pre-wrap; }
.tap-meta-pill { display:inline-block; background:#E0EAFF; color:#1E40AF; padding:4px 8px; border-radius:9999px; font-size:12px; margin-right:8px; }
.tap-timer { background:#93C5FD; color:#0f172a; }
.tap-editor { margin-top:16px; }
.tap-editor-toolbar { display:flex; gap:12px; justify-content:space-between; align-items:center; font-size:12px; color:#334155; margin-bottom:8px; }
.tap-format-state { font-size:12px; color:#1E40AF; background:#E0EAFF; padding:4px 8px; border-radius:9999px; }
.tap-input { width:100%; min-height:220px; border:1px solid #93C5FD; border-radius:12px; padding:12px; outline:none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.03); }
.tap-input[aria-disabled="true"] { background:#f3f4f6; }
.tap-input:focus { border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,0.15); }
.tap-timeover { margin-top:8px; color:#0f172a; background:#E0EAFF; border:1px solid #93C5FD; padding:8px 10px; border-radius:8px; }
.tap-stats { margin-top:16px; background:#F8FAFF; border:1px solid #E5EDFF; padding:16px; border-radius:12px; }
.tap-stats-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; }
@media (min-width: 720px) { .tap-stats-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.tap-diff { display:grid; grid-template-columns: 1fr; gap:12px; margin-top:12px; }
@media (min-width: 880px){ .tap-diff { grid-template-columns: 1fr 1fr; } }
.tap-diff-title { color:#1E40AF; font-weight:600; margin-bottom:4px; }
.tap-diff-box { border:1px solid #E5E7EB; background:#fff; border-radius:8px; padding:12px; min-height:80px; white-space:pre-wrap; }
.tap-diff-box .ok { color:#0f172a; }
.tap-diff-box .miss { background:#93C5FD; color:#1E40AF; border-radius:3px; }
.tap-diff-box .err { background:#FECACA; color:#7F1D1D; border-radius:3px; }
.tap-diff-box .gap { color:#9CA3AF; }
.tap-diff-box .extra { background:#FFE4E6; color:#9F1239; }
.tap-modal { position:fixed; inset:0; background:rgba(15,23,42,0.4); display:flex; align-items:center; justify-content:center; z-index:9999; }
.tap-modal-content { background:#fff; border-radius:16px; padding:20px; width:90%; max-width:620px; box-shadow:0 10px 30px rgba(0,0,0,0.2); border:1px solid #E5E7EB; }
.tap-modal-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:12px; } 
.tap-progress-title { font-weight:600; color:#1E40AF; margin-bottom:8px; }
.tap-progress-ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:6px; }
.tap-progress-ul li { padding:8px 10px; border:1px solid #E5E7EB; border-radius:10px; background:#fff; }
.tap-progress-ul li.passed { border-color:#86efac; background:#ecfdf5; }
.tap-progress-ul li.failed { border-color:#fecaca; background:#fff1f2; }