* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Roboto', sans-serif; background:#0d0d0d; color:#fff; }
section { padding:80px 20px; display:flex; flex-direction:column; align-items:center; }
h2 { font-size:2.5rem; color:#ffffff; margin-bottom:40px; text-align:center; }
.profesor-form { background:#1a1a1a; border-radius:20px; padding:40px; width:100%; max-width:600px; box-shadow:0 6px 20px rgba(0,0,0,0.7); display:flex; flex-direction:column; align-items:center; gap:20px; }
.foto-container { position:relative; width:150px; height:150px; margin-bottom:10px; }
.foto-container input[type="file"] { position:absolute; width:100%; height:100%; opacity:0; cursor:pointer; border-radius:50%; }
.foto-container img { width:100%; height:100%; border-radius:50%; border:3px solid #3da35d; object-fit:cover; transition:0.3s; }
.profesor-form input, .profesor-form select, .profesor-form textarea {
    width:90%; padding:12px; border-radius:8px; border:none; outline:none;
    background:#2a2a2a; color:#fff; font-size:1rem;
}
.profesor-form textarea { resize:none; height:100px; }
label { align-self:flex-start; margin-left:5%; color:#ccc; font-size:0.9rem; }
.dias-container { width:90%; display:flex; flex-direction:column; gap:10px; background:#141414; padding:15px; border-radius:10px; }
.dia-item { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dia-item input[type="time"] { width:45%; display:none; }
.btn { width:60%; padding:14px; font-weight:700; border:none; border-radius:8px; background:#3da35d; color:#fff; cursor:pointer; transition:0.3s; }
.btn:hover { background:#2b7c44; transform:scale(1.03); }
#portafolio-nombre { align-self:flex-start; margin-left:5%; color:#ccc; font-size:0.9rem; }

/* FLASH MESSAGES */
.flash-messages {
  max-width: 600px;
  margin: 20px auto;
  padding: 0 20px;
}

.alert {
  padding: 15px 20px;
  margin-bottom: 15px;
  border-radius: 8px;
  font-weight: 500;
  text-align: center;
  animation: fadeIn 0.5s ease-in;
}

.alert-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.alert-error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
#portafolio { width:90%; padding:10px; border-radius:8px; border:none; outline:none; background:#2a2a2a; color:#fff; font-size:1rem; }