* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; }
body { background: #f0f2f5; padding: 24px; }

#page { max-width: 720px; margin: 0 auto; }

header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
h1 { font-size: 22px; color: #1a1a2e; }

.badge { padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: bold; }
.badge.active   { background: #e8f5e9; color: #2e7d32; }
.badge.inactive { background: #ffebee; color: #c62828; }

section {
  background: #fff; border-radius: 10px; padding: 20px 24px;
  margin-bottom: 16px; box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
h2 { font-size: 15px; color: #3f51b5; margin-bottom: 16px; border-bottom: 1px solid #eee; padding-bottom: 8px; }

.field-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.field-row label:first-child { min-width: 240px; font-size: 14px; color: #333; }
.field-row input[type=text],
.field-row input[type=number],
.field-row select {
  flex: 1; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px;
  font-size: 14px; outline: none; min-width: 180px;
}
.field-row input:focus, .field-row select:focus { border-color: #3f51b5; }
.field-row small { color: #888; font-size: 12px; width: 100%; margin-top: -8px; }

/* Toggle switch */
.toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: #ccc; border-radius: 24px; transition: .3s; }
.slider:before { content:''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .3s; }
.toggle input:checked + .slider { background: #3f51b5; }
.toggle input:checked + .slider:before { transform: translateX(20px); }

/* Horarios */
.horario-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.horario-row select, .horario-row input[type=time] { padding: 6px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; }
.horario-row button { background: #ffebee; color: #c62828; border: none; border-radius: 4px; padding: 6px 10px; cursor: pointer; }

/* Audios */
.audio-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.audio-row label { min-width: 160px; font-size: 14px; color: #333; }
.audio-row input[type=file] { flex: 1; }
.file-name { font-size: 12px; color: #4caf50; }

/* Actions */
#form-actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.btn-primary { background: #3f51b5; color: #fff; border: none; padding: 12px 28px; border-radius: 8px; font-size: 15px; cursor: pointer; }
.btn-primary:hover { background: #303f9f; }
.btn-secondary { background: #e8eaf6; color: #3f51b5; border: none; padding: 8px 16px; border-radius: 6px; font-size: 13px; cursor: pointer; margin-top: 8px; }
#save-status { font-size: 14px; color: #4caf50; }