/* Mil Vidas 4.1.1 — refuerzo de legibilidad sobre escenas luminosas */

.app-shell .scene-art + .brand {
  align-items: center;
  margin: 0 -10px;
  padding: 13px 16px;
  border: 1px solid rgba(225, 189, 116, .38);
  border-radius: 18px;
  background: linear-gradient(100deg, rgba(5, 8, 18, .93), rgba(20, 15, 31, .87));
  box-shadow: 0 16px 48px rgba(0, 0, 0, .58);
  backdrop-filter: blur(17px) saturate(115%);
  -webkit-backdrop-filter: blur(17px) saturate(115%);
}

.app-shell .scene-art + .brand h1 {
  color: #fffaf0;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .9);
}

.app-shell .scene-art + .brand > span {
  color: #f2cb83;
  text-shadow: 0 2px 5px #000;
}

.app-shell .scene-art + .brand p {
  color: #f4eaf4;
  font-size: .86rem;
  font-weight: 600;
  text-shadow: 0 2px 5px #000;
}

.app-shell .brand .data-button {
  border-color: rgba(226, 191, 121, .68);
  color: #ffe4a9;
  background: rgba(7, 9, 19, .82);
  box-shadow: inset 0 0 18px rgba(215, 170, 110, .08), 0 3px 12px rgba(0, 0, 0, .3);
  text-shadow: 0 1px 3px #000;
}

.app-shell .brand .data-button:hover,
.app-shell .brand .data-button:focus-visible {
  border-color: #f0cd89;
  color: #fff4d3;
  background: rgba(49, 36, 42, .94);
}

.app-shell .trait-strip,
.app-shell .school-strip {
  position: relative;
  padding: 12px 14px;
  border: 1px solid rgba(225, 189, 116, .28);
  border-radius: 16px;
  background: linear-gradient(105deg, rgba(6, 9, 19, .95), rgba(24, 17, 35, .92));
  box-shadow: 0 13px 38px rgba(0, 0, 0, .52);
  backdrop-filter: blur(16px) saturate(112%);
  -webkit-backdrop-filter: blur(16px) saturate(112%);
}

.app-shell .trait-strip {
  color: #ddd2e3;
  font-size: .72rem;
  font-weight: 600;
  text-shadow: 0 1px 3px #000;
}

.app-shell .trait-strip > span:first-child {
  color: #e5d7e8;
}

.app-shell .trait-strip b {
  border-color: rgba(232, 194, 125, .52);
  color: #f5d79e;
  background: rgba(215, 170, 110, .13);
  box-shadow: inset 0 0 12px rgba(215, 170, 110, .06);
  text-shadow: 0 1px 3px #000;
}

.app-shell .school-strip {
  gap: 9px;
}

.app-shell .school-strip span {
  flex: 1 1 128px;
  min-width: 128px;
  min-height: 59px;
  border-color: rgba(255, 255, 255, .16);
  color: #c9bfce;
  background: rgba(12, 14, 27, .78);
  font-size: .71rem;
  font-weight: 600;
  line-height: 1.35;
  text-shadow: 0 1px 3px #000;
}

.app-shell .school-strip b {
  color: #fffdfd;
  font-size: .94rem;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .95);
}

.app-shell .scene-heading,
.app-shell .family-strip {
  box-shadow: 0 15px 45px rgba(0, 0, 0, .55);
}

@media (max-width: 720px) {
  .app-shell .scene-art + .brand {
    margin: 0;
    padding: 14px;
  }

  .app-shell .scene-art + .brand p {
    font-size: .82rem;
  }

  .app-shell .school-strip span {
    flex-basis: calc(50% - 9px);
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .app-shell .school-strip span {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .app-shell .scene-art + .brand,
  .app-shell .trait-strip,
  .app-shell .school-strip {
    background: #0a0c18;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}