/* personajes.css — placeholders + animaciones por [data-estado] */

/* ═══════════════════════════════════════
   CÍRCULO BASE
═══════════════════════════════════════ */
.personaje-circle {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #fff;
  background: var(--p-color, var(--rojo));
  border: 2px solid rgba(255,255,255,.12);
  flex-shrink: 0;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),
              box-shadow .25s ease,
              border-color .25s ease;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
  user-select: none;
  position: relative;
}

/* tamaños */
.personaje-circle.sm { width: 28px; height: 28px; font-size: 12px; border-width: 1.5px; }
.personaje-circle.md { width: 36px; height: 36px; font-size: 15px; }
.personaje-circle.lg { width: 64px; height: 64px; font-size: 28px; border-width: 3px; }
.personaje-circle.xl { width: 88px; height: 88px; font-size: 38px; border-width: 3px; }

/* default (sin clase de tamaño) → md */
.personaje-circle:not(.sm):not(.lg):not(.xl) {
  width: 36px;
  height: 36px;
  font-size: 15px;
}

/* ═══════════════════════════════════════
   POSE: AVATAR
   uso: sidebar, topbar (compacto)
═══════════════════════════════════════ */
.personaje-avatar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 6px;
  border-radius: var(--r);
}

.personaje-avatar-nombre {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
}

/* ═══════════════════════════════════════
   POSE: LOADER
   uso: view stubs (centrado, con label)
═══════════════════════════════════════ */
.personaje-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.personaje-estado-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: var(--txt2);
  transition: color .25s, border-color .25s, background .25s;
}

/* ═══════════════════════════════════════
   POSE: CARD
   uso: login (selección de personaje)
═══════════════════════════════════════ */
.personaje-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 18px 18px;
  border-radius: var(--r-xl);
  background: var(--card);
  border: 1.5px solid var(--line);
  min-width: 146px;
  max-width: 170px;
  transition: border-color .2s, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  position: relative;
  overflow: hidden;
}

/* línea de acento en la parte superior */
.personaje-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--p-color, var(--rojo)) 50%, transparent 100%);
  opacity: .5;
  transition: opacity .2s;
}
.login-persona-btn:hover .personaje-card::before { opacity: 1; }

.personaje-silhouette {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* aura difusa detrás del círculo */
.personaje-aura {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--p-color, var(--rojo)) 0%, transparent 70%);
  opacity: .08;
  filter: blur(10px);
  pointer-events: none;
  transition: opacity .25s;
}
[data-estado]:not([data-estado="idle"]) .personaje-aura { opacity: .2; }

.personaje-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

.personaje-nombre {
  font-size: 15px;
  font-weight: 700;
  color: var(--txt);
  letter-spacing: .01em;
}

.personaje-subtitulo {
  font-size: 11px;
  color: var(--txt2);
  font-weight: 400;
}

.personaje-estado-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  color: var(--txt2);
  margin-top: 5px;
  background: transparent;
  transition: color .25s, border-color .25s, background .25s;
  letter-spacing: .04em;
}

/* ═══════════════════════════════════════
   ESTADOS — sobrescriben estilos base
═══════════════════════════════════════ */

/* ── idle: flota suave ── */
[data-estado="idle"] .personaje-circle {
  animation: p-idle 3s ease-in-out infinite;
}

/* ── alerta: pulsa + brillo amarillo ── */
[data-estado="alerta"] .personaje-circle {
  animation: p-alerta 1.6s ease-in-out infinite;
  border-color: var(--amarillo);
  box-shadow: 0 0 14px rgba(234,179,8,.45);
}
[data-estado="alerta"] .personaje-estado-pill,
[data-estado="alerta"] .personaje-estado-label {
  color: var(--amarillo);
  border-color: rgba(234,179,8,.4);
  background: rgba(234,179,8,.08);
}
[data-estado="alerta"] .personaje-card { border-color: rgba(234,179,8,.2); }

/* ── presion: tiembla suave + borde rojo ── */
[data-estado="presion"] .personaje-circle {
  animation: p-presion .9s ease-in-out infinite;
  border-color: var(--rojo-sem);
  box-shadow: 0 0 18px rgba(255,59,48,.5);
}
[data-estado="presion"] .personaje-estado-pill,
[data-estado="presion"] .personaje-estado-label {
  color: var(--rojo-sem);
  border-color: rgba(255,59,48,.35);
  background: rgba(255,59,48,.1);
}
[data-estado="presion"] .personaje-card { border-color: rgba(255,59,48,.2); }

/* ── panico: sacudida intensa + rojo vivo ── */
[data-estado="panico"] .personaje-circle {
  animation: p-panico .28s linear infinite;
  border-color: var(--rojo-sem);
  box-shadow: 0 0 22px rgba(255,59,48,.75);
  filter: brightness(1.15);
}
[data-estado="panico"] .personaje-card {
  animation: p-panico-card .28s linear infinite;
  border-color: rgba(255,59,48,.4);
}
[data-estado="panico"] .personaje-estado-pill,
[data-estado="panico"] .personaje-estado-label {
  color: var(--rojo-sem);
  border-color: rgba(255,59,48,.5);
  background: rgba(255,59,48,.15);
  animation: p-blink .6s ease-in-out infinite;
}

/* ── festejo: salta + brillo verde ── */
[data-estado="festejo"] .personaje-circle {
  animation: p-festejo .55s ease-in-out infinite alternate;
  border-color: var(--verde);
  box-shadow: 0 0 18px rgba(34,197,94,.55);
}
[data-estado="festejo"] .personaje-estado-pill,
[data-estado="festejo"] .personaje-estado-label {
  color: var(--verde);
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.08);
}
[data-estado="festejo"] .personaje-card { border-color: rgba(34,197,94,.2); }

/* ═══════════════════════════════════════
   KEYFRAMES PERSONAJES
═══════════════════════════════════════ */
@keyframes p-idle {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

@keyframes p-alerta {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.06); opacity: .88; }
}

@keyframes p-presion {
  0%   { transform: translateX(0) rotate(0deg); }
  20%  { transform: translateX(-3px) rotate(-1deg); }
  40%  { transform: translateX(3px) rotate(1deg); }
  60%  { transform: translateX(-2px) rotate(-.5deg); }
  80%  { transform: translateX(2px) rotate(.5deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

@keyframes p-panico {
  0%   { transform: translate(-4px, -2px) rotate(-3deg); }
  25%  { transform: translate(4px,  2px) rotate(3deg); }
  50%  { transform: translate(-3px, 2px) rotate(-2deg); }
  75%  { transform: translate(3px, -2px) rotate(2deg); }
  100% { transform: translate(-4px, -2px) rotate(-3deg); }
}

@keyframes p-panico-card {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(-2px); }
}

@keyframes p-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

@keyframes p-festejo {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-10px) scale(1.1); }
}

/* ═══════════════════════════════════════
   HOVER EN LOGIN CARDS
═══════════════════════════════════════ */
.login-persona-btn:hover .personaje-card {
  border-color: var(--p-color, var(--rojo));
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
}
.login-persona-btn:hover .personaje-circle {
  transform: scale(1.08);
  box-shadow: 0 0 20px var(--p-color, var(--rojo));
}