/* Compatibilidad entre signos del zodiaco */
.czo-app { max-width: 760px; margin: 0 auto; }

.czo-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem 1.25rem;
  background: linear-gradient(160deg, #241b3c, #1a1530);
  border: 1px solid #4a3a7a;
  border-radius: 16px;
  padding: 1.6rem 1.4rem;
}
.czo-field { display: flex; flex-direction: column; gap: .4rem; flex: 1 1 220px; }
.czo-label { font-weight: 600; color: #d9c9ff; font-size: .95rem; }
.czo-select {
  appearance: none;
  background: #15101f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23e8cf86' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 1rem center;
  color: #f4eede;
  border: 1px solid #5a4790;
  border-radius: 10px;
  padding: .7rem 2.2rem .7rem 1rem;
  font-size: 1.05rem;
  cursor: pointer;
  width: 100%;
}
.czo-select:focus { outline: 2px solid #e8cf86; outline-offset: 1px; }
.czo-heart { color: #ff6fae; font-size: 1.8rem; align-self: center; padding-bottom: .3rem; }
.czo-calc { flex: 1 1 100%; margin-top: .4rem; }

/* Result */
.czo-result {
  margin-top: 1.6rem;
  background: linear-gradient(160deg, #1f1836, #161126);
  border: 1px solid #4a3a7a;
  border-radius: 16px;
  padding: 1.8rem 1.4rem;
  text-align: center;
}
.czo-signs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.czo-person { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 110px; }
.czo-emoji { font-size: 2.8rem; line-height: 1; color: #e8cf86; }
.czo-person-name { font-weight: 700; font-size: 1.15rem; color: #f4eede; }
.czo-person-elem { font-size: .85rem; color: #b9a8e0; }
.czo-amp { color: #ff6fae; font-size: 1.8rem; }

.czo-bar-wrap { display: flex; align-items: center; gap: .8rem; margin: 1.6rem auto 0; max-width: 440px; }
.czo-bar { flex: 1; height: 14px; background: #2c2348; border-radius: 999px; overflow: hidden; }
.czo-bar-fill { height: 100%; width: 0; border-radius: 999px; transition: width 1s ease; background: #8a7ad0; }
.czo-percent { font-weight: 700; color: #f4eede; min-width: 3.2em; text-align: right; }
.czo-affinity { margin-top: .7rem; font-weight: 600; letter-spacing: .02em; }

.czo-result[data-affinity="muy_alta"] .czo-bar-fill { background: linear-gradient(90deg, #51e3a3, #00e0ff); }
.czo-result[data-affinity="muy_alta"] .czo-affinity { color: #51e3a3; }
.czo-result[data-affinity="alta"] .czo-bar-fill { background: linear-gradient(90deg, #9be36b, #51e3a3); }
.czo-result[data-affinity="alta"] .czo-affinity { color: #9be36b; }
.czo-result[data-affinity="media"] .czo-bar-fill { background: linear-gradient(90deg, #ffc94a, #ff9f45); }
.czo-result[data-affinity="media"] .czo-affinity { color: #ffc94a; }
.czo-result[data-affinity="baja"] .czo-bar-fill { background: linear-gradient(90deg, #ff8a8a, #ff5a5a); }
.czo-result[data-affinity="baja"] .czo-affinity { color: #ff8a8a; }

.czo-interpretation {
  margin-top: 1.3rem;
  line-height: 1.6;
  color: #e7ddf5;
  text-align: left;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid #e8cf86;
  border-radius: 8px;
  padding: 1rem 1.1rem;
}
.czo-restart { margin-top: 1.4rem; }
.czo-error { margin-top: 1rem; color: #ff8a8a; text-align: center; }

@media (max-width: 540px) {
  .czo-heart { flex: 1 1 100%; text-align: center; padding: 0; }
}