.rkld-malla-frontend { max-width: 1200px; margin: 0 auto; padding: 30px; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.rkld-header { text-align: center; margin-bottom: 40px; padding-bottom: 20px; }
.rkld-titulo { color: var(--color-texto, #000000); font-size: 32px; margin: 0; }
.rkld-semestre { margin-bottom: 40px; }
.rkld-semestre[data-semestre] { }
.rkld-semestre-titulo { background: var(--color-primario, #fdf41e); color: #000000; padding: 12px 20px; border-radius: 8px; margin-bottom: 20px; font-size: 22px; font-weight: bold; }
.rkld-asignaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; }
.rkld-asignatura-item label { display: flex; align-items: flex-start; padding: 15px; background: transparent; border: 2px solid #e0e0e0; border-radius: 12px; cursor: pointer; transition: all 0.3s; -webkit-tap-highlight-color: transparent; }
.rkld-asignatura-item label:hover { background: #f9f9f9; border-color: #cccccc; }
.rkld-asignatura-item label:active { background: #f0f0f0; }
.rkld-asignatura-check { margin-right: 12px; width: 20px; height: 20px; cursor: pointer; flex-shrink: 0; min-width: 20px; min-height: 20px; }
.rkld-malla-frontend .rkld-asignatura-check { accent-color: var(--color-checkbox, #fdf41e) !important; }
.asignatura-info { flex: 1; }
.asignatura-nombre { display: block; font-weight: bold; color: var(--color-texto, #000000); margin-bottom: 5px; }
.asignatura-docente { display: block; font-size: 14px; color: var(--color-docente, #888888); font-style: italic; }
.rkld-resumen-container { margin-top: 40px; padding: 30px; background: var(--color-secundario, #f5f5f5); border-radius: 12px; border: none; transition: all 0.3s ease; }
.rkld-resumen-container h3 { color: var(--color-primario, #fdf41e); margin-top: 0; margin-bottom: 20px; font-size: 24px; }
.rkld-asignaturas-seleccionadas { list-style: none; padding: 0; margin: 0 0 25px 0; }
.rkld-asignaturas-seleccionadas li { padding: 10px 15px; background: white; margin-bottom: 10px; border-radius: 8px; border: none; color: var(--color-texto, #000000); }
.rkld-asignaturas-seleccionadas .docente-info { display: block; font-size: 14px; color: var(--color-docente, #888888); font-style: italic; margin-top: 5px; }
.rkld-no-selection { color: #999 !important; font-style: italic; }
.rkld-download-button-container { margin-top: 20px; text-align: center; padding: 20px 0; }
.rkld-descargar-pdf { background: var(--color-primario, #fdf41e) !important; border-color: var(--color-primario, #fdf41e) !important; color: #000000 !important; font-size: 18px !important; padding: 15px 40px !important; cursor: pointer; border-radius: 8px; font-weight: bold; transition: all 0.3s ease; border: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.rkld-descargar-pdf:hover { opacity: 0.8; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.rkld-descargar-pdf:active { transform: scale(0.98); }
.rkld-descargar-pdf:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.rkld-resumen-container.rkld-show { display: block !important; }
.rkld-mobile-notification { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); background: #4caf50; color: white; padding: 15px 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); font-size: 16px; font-weight: bold; z-index: 10000; opacity: 0; transition: all 0.3s ease; pointer-events: none; }
.rkld-mobile-notification.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 768px) { 
    .rkld-asignaturas { grid-template-columns: 1fr; } 
    .rkld-malla-frontend { padding: 15px; }
    .rkld-descargar-pdf { width: 100%; padding: 18px 20px !important; font-size: 16px !important; }
    .rkld-resumen-container { padding: 20px; }
    .rkld-titulo { font-size: 24px; }
    .rkld-semestre-titulo { font-size: 18px; }
    .rkld-asignatura-item label { padding: 12px; }
    .rkld-asignatura-check { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
    .rkld-mobile-notification { bottom: 80px; max-width: 90%; }
}