/* static/css/main.css */
:root {
    --primary: #1e40af; /* Azul Profundo */
    --accent: #f59e0b;  /* Dorado Premium */
    --bg: #f8fafc;
    --white: #ffffff;
}

body {
    margin: 0; font-family: 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg); color: #1e293b;
    -webkit-tap-highlight-color: transparent;
}

/* Tarjetas de Lecciones */
.lesson-card {
    background: var(--white);
    margin: 15px; padding: 20px;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.lesson-card:active { transform: scale(0.95); }

.info h3 { margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.info p { margin: 5px 0 0; color: #64748b; font-size: 0.9rem; }

/* Botón de Audio Circular */
.audio-btn {
    background: #dbeafe; border: none;
    width: 50px; height: 50px; border-radius: 50%;
    font-size: 1.5rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

/* Barra de Navegación Móvil Inferior */
.mobile-nav {
    position: fixed; bottom: 0; width: 100%;
    background: var(--white); border-top: 1px solid #e2e8f0;
    display: flex; justify-content: space-around; padding: 12px 0;
    z-index: 1000;
}

.nav-item { border: none; background: none; font-size: 0.8rem; font-weight: bold; color: #64748b; }
.nav-item.active { color: var(--primary); }

.choice-btn { transition: all 0.3s; border: 2px solid #e2e8f0; }
.choice-btn:hover { background-color: #f8fafc; transform: translateY(-2px); }
.correct { background-color: #10b981 !important; color: white !important; border-color: #059669 !important; }
.wrong { background-color: #ef4444 !important; color: white !important; border-color: #dc2626 !important; }
.feedback-message { font-size: 1.5rem; font-weight: bold; height: 2rem; }
.drop-zone { min-height: 50px; border-bottom: 2px dashed #cbd5e0; }
.word-pill { cursor: pointer; display: inline-block; padding: 8px 16px; margin: 4px; background: #edf2f7; border-radius: 20px; user-select: none; }