.auto-diag-container {
  max-width: 600px;
  margin: 2em auto;
  padding: 1.5em;
  border: 1px solid #282828;
  background: #fff;
  color: #545454;
  font-family: sans-serif;
}
.auto-diag-container h2 {
  text-align: center;
  margin-bottom: 1em;
}
.diag-summary {
  background: #F5A6E6;
  padding: 0.5em;
  margin-bottom: 1em;
  border-radius: 4px;
  font-size: 0.9em;
}
.step { display: none; opacity: 0; transition: opacity .4s; }
.step.active { display: block; opacity: 1; }
label { display: block; margin: 0.8em 0; }
input[type="text"], input[type="email"], select {
  width: 100%; padding: 0.5em; border: 1px solid #282828; border-radius: 4px;
}
.btn-next, .btn-prev, #submit-diagnostico {
  padding: 0.6em 1.2em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 1em;
}
.btn-next {
  background: #F5A6E6;
  color: #282828;
}
.btn-prev {
  background: #545454;
  color: #fff;
  margin-right: 0.5em;
}
#popup-recomendaciones {
  display: none;
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center; align-items: center;
}
#popup-recomendaciones .popup-content {
  background: #fff;
  padding: 1.5em;
  max-width: 90%; max-height: 90%;
  overflow-y: auto;
  border-radius: 6px;
}
#popup-recomendaciones img { vertical-align: middle; margin-right: 0.5em; }

.option-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.option-group label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  flex: 1 0 30%;
}
.option-group img {
  width: 80px;
  height: auto;
  border: 2px solid transparent;
  border-radius: 4px;
  margin-bottom: 0.5em;
}
.option-group input {
  display: none;
}
.option-group input:checked + img {
  border-color: #F5A6E6;
}
.option-group span {
  font-size: 0.9em;
  color: #545454;
}
@media (max-width: 600px) {
  .option-group label { flex: 1 0 45%; }
}