.app-container { max-width: 1200px; margin: auto; font-family: Arial, sans-serif; }
.top-controls { display: flex; gap: 20px; margin-bottom: 20px; }
.control label { display: block; font-weight: bold; }
.control select { padding: 8px 12px; border-radius: 20px; border: 2px solid #2f4f6f; }
.main-content { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.left-panel { display: flex; flex-direction: column; gap: 20px; }
.calendar-box { border: 4px solid #1e3a5f; border-radius: 20px; padding: 15px; background: #fff1ed; }
.calendar-header { display: flex; align-items: center; gap: 15px; }
.year-box { background: #ffb6b0; padding: 10px; border-radius: 10px; font-weight: bold; }
.month-title { flex: 1; text-align: center; font-size: 20px; font-weight: bold; border-bottom: 2px solid #1e3a5f; padding-bottom: 5px; }
.weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 15px; font-weight: bold; text-align: center; }
.days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 15px; }
.day { background: #f3e6e3; height: 60px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: bold; }
.day.marked { font-weight: bold; border: 2px solid #000; }
.form-box { background: #fff0da; padding: 20px; border-radius: 20px; text-align: center; }
.right-panel { background: #f3feff; border: 4px solid #000; border-radius: 30px; padding: 30px; }
#actividades-detalle ul { list-style: none; padding: 0; }
#actividades-detalle li { margin-bottom: 15px; padding: 10px; background: #fff; border-radius: 8px; border: 1px solid #ddd; }