/* Los 13 Horóscopos */
.h13-app { max-width: 860px; margin: 0 auto; }

/* Optional birthdate */
.h13-birth {
  background: linear-gradient(160deg, #241b3c, #1a1530);
  border: 1px solid #4a3a7a; border-radius: 14px;
  padding: 1rem 1.2rem; margin-bottom: 1.4rem; text-align: center;
}
.h13-birth-label { display: block; font-weight: 600; color: #d9c9ff; margin-bottom: .6rem; }
.h13-birth-fields { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.h13-birth-fields 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 .7rem center;
  color: #f4eede; border: 1px solid #5a4790; border-radius: 8px;
  padding: .5rem 1.9rem .5rem .8rem; font-size: .95rem; cursor: pointer;
}
.h13-birth-fields select:focus { outline: 2px solid #e8cf86; outline-offset: 1px; }
.h13-birth-hint { font-size: .82rem; color: #b9a8e0; margin: .6rem 0 0; }

/* Hub of systems */
.h13-systems {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}
.h13-system {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  background: linear-gradient(160deg, #241b3c, #1a1530);
  border: 1px solid #4a3a7a; border-radius: 14px;
  padding: 1.1rem .5rem; cursor: pointer; color: #f4eede;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.h13-system:hover { transform: translateY(-3px); border-color: #e8cf86; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.h13-sys-emoji { font-size: 2.1rem; line-height: 1; }
.h13-sys-name { font-weight: 700; font-size: 1rem; }
.h13-sys-count { font-size: .78rem; color: #b9a8e0; }

/* Detail */
.h13-detail { }
.h13-back, .h13-back-signs { margin-bottom: 1.1rem; }
.h13-sys-title { color: #e8cf86; margin: .2rem 0 1rem; }
.h13-note {
  background: rgba(232,207,134,0.08); border: 1px solid #4a3a7a; border-left: 3px solid #e8cf86;
  border-radius: 8px; padding: .7rem .9rem; margin: 0 0 1.1rem; color: #d9c9ff; font-size: .9rem;
}

.h13-loader { text-align: center; padding: 1.5rem 0; }
.h13-spinner {
  display: inline-block; width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid #4a3a7a; border-top-color: #e8cf86; animation: h13-spin .8s linear infinite;
}
@keyframes h13-spin { to { transform: rotate(360deg); } }

/* Signs grid */
.h13-signs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}
.h13-sign {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  background: linear-gradient(160deg, #1f1836, #161126);
  border: 1px solid #4a3a7a; border-radius: 12px;
  padding: 1rem .5rem; cursor: pointer; color: #f4eede;
  transition: transform .12s ease, border-color .12s ease;
}
.h13-sign:hover { transform: translateY(-2px); border-color: #e8cf86; }
.h13-sign img { width: 72px; height: 72px; object-fit: contain; }
.h13-sign-name { font-weight: 600; font-size: .9rem; text-align: center; }
.h13-sign.is-mine {
  border-color: #e8cf86; box-shadow: 0 0 0 2px #e8cf86, 0 8px 22px rgba(232,207,134,0.25);
  background: linear-gradient(160deg, #2c2348, #211a3a);
}
.h13-mine-badge {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #1a1530; background: #e8cf86; border-radius: 999px; padding: .12rem .5rem;
}

/* Reading */
.h13-reading {
  background: linear-gradient(160deg, #1f1836, #161126);
  border: 1px solid #4a3a7a; border-radius: 16px;
  padding: 1.6rem 1.5rem;
}
.h13-reading-body { line-height: 1.7; color: #e7ddf5; }
.h13-reading-body h1, .h13-reading-body h2, .h13-reading-body h3 { color: #e8cf86; line-height: 1.3; }
.h13-reading-body h1 { font-size: 1.5rem; }
.h13-reading-body h2 { font-size: 1.2rem; margin-top: 1.4rem; }
.h13-reading-body h3 { font-size: 1.05rem; margin-top: 1.2rem; }
.h13-reading-body img { max-width: 100%; height: auto; display: inline-block; }
.h13-reading-body p { margin: .6rem 0; }
.h13-reading-body ul { margin: .6rem 0; padding-left: 1.4rem; }
.h13-reading-body strong { color: #f7eecb; }
.h13-reading-body table {
  border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .9rem;
  display: block; overflow-x: auto;
}
.h13-reading-body td, .h13-reading-body th {
  border: 1px solid #4a3a7a; padding: .4rem .6rem; text-align: center;
}
.h13-error { margin-top: 1rem; color: #ff8a8a; text-align: center; }

@media (max-width: 680px) {
  .h13-systems, .h13-signs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 460px) {
  .h13-systems, .h13-signs { grid-template-columns: repeat(2, 1fr); }
}