/* =============================================
   MÓDULO ESTUDIO — TEMPORIZADOR POMODORO
   Layout en 2 columnas: 270px timer | resto notas/pendientes.
   ─────────────────────────────────────────
   COLUMNA TIMER (#estudio-timer-panel):
   · Grid 2×2 de botones de modo (.tmodo): Pomodoro, Descanso, etc.
   · #timer-wrap: contenedor 220×220px que superpone el SVG y el texto
     usando position:absolute en #timer-inner.
   · SVG: dos <circle> — .tring-bg (pista gris) y .tring-fg (progreso neon).
     El progreso usa stroke-dashoffset animado con transition 0.9s linear.
     transform:rotate(-90deg) en el SVG para que empiece desde arriba.
   · #timer-tiempo: número grande MM:SS con text-shadow neon.
   · Controles: botón reset (circular pequeño) y play/pause (grande neon).
   ─────────────────────────────────────────
   COLUMNA LATERAL (#estudio-side):
   · .estudio-box: tarjetas con h4 y contenido.
   · #estudio-notas: textarea con auto-persist en localStorage.
   · #estudio-pendientes: lista de próximas tareas del calendario,
     con .pend-dias.urg para los urgentes en amarillo.
   ─────────────────────────────────────────
   Responsive <=768px: una sola columna, timer arriba, notas abajo.
   ============================================= */

/* ──────────────────────────────────────────────
   SELECT CASCADE MATERIA — TAREAS & PARCIALES
   ────────────────────────────────────────────── */
#ev-materia {
    width: 100%;
    background: var(--fondo-input, #1a1d23);
    color: var(--texto-primario, #e0e0e0);
    border: 1px solid var(--borde, rgba(255,255,255,.12));
    border-radius: 2px;
    padding: 7px 10px;
    font-size: .85rem;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%2300e5ff' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}
#ev-materia:focus {
    border-color: var(--acento, #00e5ff);
    box-shadow: 0 0 0 2px rgba(0,229,255,.18);
}
#ev-materia optgroup {
    color: var(--acento, #00e5ff);
    font-weight: 700;
    font-size: .78rem;
    background: var(--fondo-modal, #13161c);
}
#ev-materia option {
    color: var(--texto-primario, #e0e0e0);
    background: var(--fondo-modal, #13161c);
}