/* Sala de equipamiento. Overrides aislados de la interfaz y formularios del juego. */
#selector-personaje {
  --sp-accent: #72d8ed;
  padding: clamp(8px, 2.4vw, 28px);
  background: radial-gradient(ellipse at 24% 40%, #12283b 0%, #080e19 54%, #030711 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#selector-personaje .sp-panel {
  width: min(1120px, 100%); max-height: 100%; padding: 24px;
  background: linear-gradient(140deg, rgba(23,37,52,.94), rgba(8,16,28,.98));
  border: 1px solid #324351; border-radius: 18px; clip-path: none;
  box-shadow: 0 32px 100px #0008, inset 0 1px 0 #ffffff08;
}
#selector-personaje .sp-head { text-align: left; margin-bottom: 22px; }
#selector-personaje .sp-kicker { color: #bfe0ee; font-size: 10px; font-weight: 700; letter-spacing: 2px; display: flex; align-items: center; gap: 8px; }
#selector-personaje .sp-kicker > span { width: 16px; height: 2px; background: var(--sp-accent); }
#selector-personaje .sp-title { font-size: clamp(19px, 3vw, 32px); letter-spacing: -.7px; font-weight: 800; margin: 9px 0 6px; }
#selector-personaje .sp-sub { color: #e2ecf5; font-size: 13px; line-height: 1.5; }
#selector-personaje .sp-body { grid-template-columns: minmax(290px, .83fr) minmax(0, 1.17fr); gap: 24px; align-items: stretch; }
#selector-personaje .sp-visor {
  min-height: 430px; height: min(540px, 59vh); border-radius: 12px; border-color: #354c5b;
  background: radial-gradient(ellipse at 50% 36%, #35505e 0%, #182f42 30%, #0b1827 66%, #08121e 100%);
  box-shadow: inset 0 0 60px #020b1755;
}
#selector-personaje .sp-visor::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #07142088, transparent 20%, transparent 60%, #06111ecc); }
#sp-canvas { position: relative; z-index: 1; }
.sp-visor-label { position: absolute; z-index: 2; left: 17px; right: 17px; top: 18px; display: flex; align-items: center; gap: 7px; color: #d6e6f0; font-size: 8px; font-weight: 700; letter-spacing: 1.5px; pointer-events: none; }
.sp-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sp-accent); box-shadow: 0 0 9px var(--sp-accent); }
.sp-model-id { margin-left: auto; color: #c8d8e5; font-size: 15px; letter-spacing: 0; font-weight: 400; }
.sp-identidad { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 69px; text-align: center; pointer-events: none; }
.sp-equipo { color: var(--sp-accent); font-size: 8px; font-weight: 700; letter-spacing: 2px; }
#selector-personaje .sp-nombre { position: static; padding: 0; margin-top: 5px; color: #f3f8ff; font-size: 16px; font-weight: 650; letter-spacing: -.25px; }
#selector-personaje .sp-sexo { z-index: 3; left: 14px; right: 14px; bottom: 15px; gap: 8px; }
#selector-personaje .sp-sexo button { min-height: 40px; min-width: 106px; border-radius: 6px; border-color: #3c5263; color: #f0f6fb; font-size: 10px; font-weight: 700; letter-spacing: 1px; background: #0b1928df; }
#selector-personaje .sp-sexo button.on { background: #d5e9f2; color: #102938; border-color: #e2f0f7; box-shadow: 0 2px 15px #050d1655; }
.sp-status { position: absolute; z-index: 3; left: 22px; right: 22px; top: 43%; color: #ffffff; font-size: 11px; line-height: 1.6; text-align: center; text-shadow: 0 2px 8px #000; pointer-events: none; }
.sp-status:empty { display: none; }
.sp-profesiones { min-height: 0; display: flex; flex-direction: column; }
.sp-lista-heading { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 12px; padding: 3px 2px 13px; color: #f4f9fd; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; }
.sp-lista-heading span:last-child { color: #b7c7d6; font-weight: 500; letter-spacing: .5px; }
#selector-personaje .sp-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; min-height: 0; overflow-y: auto; padding: 1px 5px 1px 1px; scrollbar-width: thin; scrollbar-color: #526779 #101d2b; align-content: start; }
#selector-personaje .sp-card {
  position: relative; min-height: 54px; padding: 9px 10px; gap: 9px; border: 1px solid #2b3a49; border-radius: 7px;
  background: linear-gradient(120deg, #1a2937a8, #101d2aac); color: #f0f6fb; font-size: 11px; font-weight: 500; line-height: 1.35;
  transition: border-color .16s, background .16s, box-shadow .16s;
}
#selector-personaje .sp-card:hover { border-color: #638198; background: #20384c; }
#selector-personaje .sp-card.on { color: #f4fbff; border-color: var(--sp-card-accent); background: linear-gradient(120deg, #304a60, #162b3e); box-shadow: inset 3px 0 0 var(--sp-card-accent), 0 0 0 1px #a8e9ff0a; }
#selector-personaje .sp-ico { font-size: 18px; display: grid; place-items: center; width: 30px; height: 32px; background: #050f1a44; border-radius: 5px; }
.sp-card-name { flex: 1; min-width: 0; }
.sp-card-mark { color: #708a9e; font-size: 13px; padding-left: 2px; }
.sp-card.on .sp-card-mark { color: var(--sp-card-accent); }
#selector-personaje button:focus-visible, #selector-personaje input:focus-visible { outline: 2px solid #effbff; outline-offset: 3px; }
#selector-personaje #sp-ok { margin-top: 20px; display: flex; justify-content: center; align-items: center; gap: 22px; min-height: 52px; border: 1px solid #b1ecf8; border-radius: 7px; clip-path: none; background: linear-gradient(120deg, #a5e7ef, #78bddb); color: #0a2335; font-size: 12px; font-weight: 800; letter-spacing: 1.7px; box-shadow: 0 7px 25px #00192977; }
#selector-personaje #sp-ok > span:last-child { font-size: 22px; font-weight: 500; }
#selector-personaje #sp-ok:hover { filter: brightness(1.08); }
@media (max-width: 800px) {
  #selector-personaje .sp-panel { padding: 18px; }
  #selector-personaje .sp-body { grid-template-columns: minmax(235px, .8fr) minmax(0, 1fr); gap: 15px; }
  #selector-personaje .sp-lista { grid-template-columns: 1fr; }
  #selector-personaje .sp-visor { height: min(540px, 59vh); min-height: 370px; }
}
@media (max-width: 580px) {
  #selector-personaje { padding: 8px; }
  #selector-personaje .sp-panel { padding: 13px; border-radius: 12px; }
  #selector-personaje .sp-head { margin-bottom: 13px; }
  #selector-personaje .sp-kicker { font-size: 8px; letter-spacing: 1.4px; }
  #selector-personaje .sp-title { font-size: 20px; margin: 7px 0 4px; }
  #selector-personaje .sp-sub { font-size: 11px; }
  #selector-personaje .sp-body { grid-template-columns: 1fr; gap: 14px; overflow-y: auto; display: flex; flex-direction: column; }
  #selector-personaje .sp-visor { height: clamp(240px, 37vh, 310px); min-height: 240px; flex: 0 0 auto; }
  #selector-personaje .sp-visor-label { top: 12px; left: 12px; right: 12px; font-size: 7px; }
  #selector-personaje .sp-identidad { text-align: left; left: 13px; bottom: 16px; right: 47%; }
  #selector-personaje .sp-nombre { font-size: 12px; line-height: 1.3; }
  .sp-equipo { font-size: 7px; letter-spacing: 1px; }
  #selector-personaje .sp-sexo { left: auto; right: 12px; bottom: 15px; gap: 5px; }
  #selector-personaje .sp-sexo button { min-width: 0; padding: 8px; min-height: 38px; font-size: 8px; letter-spacing: .4px; }
  #selector-personaje .sp-profesiones { min-height: auto; }
  #selector-personaje .sp-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 1px; gap: 6px; }
  #selector-personaje .sp-card { min-height: 57px; font-size: 10px; padding: 7px; gap: 7px; }
  #selector-personaje .sp-ico { width: 24px; height: 29px; font-size: 16px; }
  .sp-card-mark { display: none; }
  #selector-personaje #sp-ok { margin-top: 12px; min-height: 49px; font-size: 10px; letter-spacing: 1.3px; }
}
@media (max-height: 540px) and (min-width: 581px) {
  #selector-personaje { padding: 8px; }
  #selector-personaje .sp-panel { padding: 12px 16px; }
  #selector-personaje .sp-head { margin-bottom: 8px; }
  #selector-personaje .sp-title { font-size: 19px; margin: 5px 0 0; }
  #selector-personaje .sp-sub { display: none; }
  #selector-personaje .sp-body { grid-template-columns: 255px 1fr; gap: 16px; }
  #selector-personaje .sp-visor { min-height: 235px; height: 235px; }
  #selector-personaje .sp-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #selector-personaje .sp-identidad { bottom: 53px; }
  #selector-personaje .sp-nombre { font-size: 11px; }
  #selector-personaje .sp-sexo { bottom: 9px; }
  #selector-personaje .sp-sexo button { min-height: 33px; }
  #selector-personaje #sp-ok { margin-top: 9px; min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  #selector-personaje .sp-card { transition: none; }
}