/* ==========================================================================
   PROFILE PLAYER - hoja de estilos independiente
   Colocar en el mismo directorio css/ que style.min.css
   (usa rutas relativas ../img/... igual que el stylesheet principal)

   Lenguaje visual alineado a info.css: fondo negro plano, sin paneles/
   cajas, hairlines doradas finas (rgba(221,171,94,.15)), Cinzel dorado.
   El inventario (equip-grid / equip-item / rings / pendant / tooltip)
   NO se toca: mismas clases, mismos valores, misma posición.
   ========================================================================== */

.profile-shell {
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  animation: peFadeUp .5s ease both;
}

@keyframes peFadeUp {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---------- CARD BASE (ahora plano, sin panel) ---------- */
.profile-shell .profile-card {
  position: relative;
  background: #000;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 60px 36px 64px;
  width: 100%;
  box-sizing: border-box;
}

/* ---------- EYEBROW (mismo recurso que .info-basica-eyebrow) ---------- */
.profile-eyebrow {
  color: var(--gold);
  display: block;
  font-family: Cinzel, serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 4px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* ---------- HEADER ---------- */
.profile-shell .profile-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid rgba(221, 171, 94, .15);
  margin-bottom: 30px;
  padding-bottom: 30px;
}

/* Avatar simple, borde dorado fijo (sin gradientes ni rotación) */
.profile-avatar-ring {
  position: relative;
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar-initial {
  font-family: Cinzel, serif;
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--gold-light);
}

.profile-heading { flex: 1 1 auto; min-width: 200px; }

.profile-shell .profile-name {
  font-family: Cinzel, serif;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 10px;
}

.profile-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.profile-shell .profile-class {
  background: transparent;
  border: 1px solid rgba(221, 171, 94, .35);
  color: var(--gold-light);
  gap: 10px;
  letter-spacing: 1px;
  font-family: 'Play';
  font-size: 1rem;
  padding: 6px 20px;
  border-radius: 20px;
  font-weight: 600;
  text-transform: uppercase;
}

.profile-meta .badge-online,
.profile-meta .badge-offline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 1px;
    font-family: 'Play';
    font-size: 1rem;
    padding: 6px 20px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
}

.profile-meta .badge-offline i {
  color: red;
}

.profile-meta .badge-online {
  color: #ddab5e;
}

/* ---------- LEVEL / MASTER LEVEL BARS (minimalista) ---------- */
.level-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 34px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(221, 171, 94, .15);
}

.level-bar-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Play';
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 6px;
}

.level-bar-title .lb-current { color: #8d8d8d; font-weight: 600; letter-spacing: .5px; }

.level-bar-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: #0d0d0d;
  overflow: hidden;
}

.level-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--gold);
  transition: width .5s ease;
}

.level-bar-fill.ml {
  background: #8f8f96;
}

/* El porcentaje ya se muestra en level-bar-title; se omite el texto
   superpuesto en la barra para mantenerla limpia y minimalista */
.level-bar-label { display: none; }

/* ---------- SECTION TITLES ---------- */
.profile-col-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-light);
  font-family: Cinzel, serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.profile-col-title .pe-icon-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(221, 171, 94, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: .65rem;
}

.profile-col-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(221, 171, 94, .2);
}

/* ---------- LAYOUT (sin cambios de ubicación) ---------- */
.profile-main-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.profile-stats-col {
  width: 100%;
  max-width: 640px;
}

.profile-stats-col .profile-col-title,
.profile-stats-col .profile-stats-grid {
  justify-content: center;
}

.profile-inventory-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- STAT "CARDS" (ahora planas, hairline en vez de cajas) ---------- */
.profile-stats-col .profile-stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid rgba(221, 171, 94, .15);
  border-bottom: 1px solid rgba(221, 171, 94, .15);
}

.profile-stats-col .stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  flex: 1 1 160px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 20px 18px;
  transition: background .2s ease;
}

.profile-stats-col .stat-card:hover {
  background: rgba(221, 171, 94, .04);
}

.profile-stats-col .stat-card:not(:first-child):before {
  background: hsla(0, 0%, 100%, .08);
  bottom: 14px;
  content: "";
  left: 0;
  position: absolute;
  top: 14px;
  width: 1px;
}

.profile-stats-col .stat-card .pe-stat-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(221, 171, 94, .3);
  color: var(--gold);
  font-size: .82rem;
  transition: .2s ease;
}

.profile-stats-col .stat-card:hover .pe-stat-icon {
  background: var(--gold);
  color: #1a1400;
  border-color: var(--gold);
}

.profile-stats-col .stat-card .pe-stat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.profile-stats-col .stat-card span {
  color: #7d7d7d;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.profile-stats-col .stat-card strong {
  color: var(--gold-light);
  font-family: Cinzel, serif;
  font-size: 1.05rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-stats-col .stat-card-wide {
  flex: 1 1 100%;
  border-left: none;
  border-top: 1px solid rgba(221, 171, 94, .15);
}

.profile-stats-col .stat-card-wide:before {
  display: none;
}

.profile-stats-col .stat-card-wide strong {
  font-family: Open Sans, sans-serif;
  font-size: .92rem;
  white-space: normal;
}

/* ==========================================================================
   INVENTARIO — SIN CAMBIOS. Misma estructura, mismos valores, misma
   posición que la versión original (no tocar layout ni tamaños acá).
   ========================================================================== */

.inventory-panel {
  position: relative;
  background: #141414;
  border: 1px solid rgba(216, 169, 99, .18);
  border-radius: 14px;
  padding: 16px;
}

.inventory-panel::before,
.inventory-panel::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--gold);
  opacity: .6;
}

.inventory-panel::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.inventory-panel::after { top: 8px; right: 8px; border-left: none; border-bottom: none; }

.equip-wrap { display: inline-block; position: relative; }

/* Grid de equipo agrandado para que el fondo (equipment_bg) se aprecie
   completo, con los íconos recortados hacia adentro de cada celda
   (background-origin: content-box) para que no la tapen por completo */
.equip-grid {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  grid-auto-rows: 120px;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(216, 169, 99, .25);
  border-radius: 10px;
  background-color: #0a0a0a;
  position: relative;
}

.equip-item {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, .015);
  background-origin: content-box;
  background-clip: content-box;
  padding: 6px;
  transition: border-color .2s ease, background .2s ease;
  border: 1px solid rgba(216, 169, 99, .18);
}

.item-tooltip {
  position: absolute;
  background: #171310;
  border: 1px solid var(--gold);
  padding: 12px 16px;
  border-radius: 8px;
  z-index: 9999;
  pointer-events: none;
  min-width: 200px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .6);
  display: none;
}

.item-tooltip .tt-name {
  color: var(--gold-light);
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(216, 169, 99, .3);
  padding-bottom: 6px;
  font-family: Cinzel, serif;
  letter-spacing: .5px;
}

.item-tooltip .tt-prop {
  color: #ddd;
  font-size: 14px;
  margin: 4px 0;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.item-tooltip .tt-prop .label { color: #8a8a8a; }
.item-tooltip .tt-prop .value { color: #f0ddb0; font-weight: 600; }

.equip-rings { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.ring-slot, .pendant-slot { pointer-events: auto; transition: border-color .2s ease; }

/* left/top/width/height se definen inline desde $ringPendantConfig en player.php */
.ring-slot {
  position: absolute;
  overflow: hidden;
  background: #101010;
  border: 1px solid rgba(216, 169, 99, .18);
}

.pendant-slot {
  position: absolute;
  overflow: hidden;
  background: #101010;
  border: 1px solid rgba(216, 169, 99, .18); 
}

.ring-slot:hover, .pendant-slot:hover, .equip-item:hover {
  border-color: var(--gold); 
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
  .profile-inventory-col { width: 100%; }
  .profile-shell .profile-card { padding: 44px 22px 48px; }
}

@media (max-width: 576px) {
  .profile-shell .profile-header { flex-direction: column; text-align: center; }
  .profile-meta { justify-content: center; }
  .profile-shell .profile-card { padding: 36px 14px 40px; }
  .equip-grid { grid-template-columns: repeat(3, 100px); grid-auto-rows: 100px; }
  /* Si necesitás otras coordenadas de anillos/dije para mobile, ajustá
     $ringPendantConfig en player.php (no hay overrides fijos acá). */
}