/* L2Village — mejora visual. Conserva el panel y sus componentes originales. */
:root {
  --pv-bg:#0b1016;
  --pv-surface:#191f29;
  --pv-surface-raised:#202733;
  --pv-line:rgba(215,179,99,.18);
  --pv-gold:#d7b363;
  --pv-gold-light:#f0d799;
  --pv-text:#e7eaf0;
  --pv-muted:#a3acb8;
}
body {
  color:var(--pv-text);
  background:#090e13 url('../../img/l2village-hero.png') center/cover fixed no-repeat;
  -webkit-font-smoothing:antialiased;
}
body::before {
  background:linear-gradient(100deg,rgba(6,10,15,.89),rgba(7,13,18,.65) 50%,rgba(6,10,15,.89)),linear-gradient(0deg,rgba(6,10,15,.75),transparent);
}
::selection { background:#d7b363;color:#11151c; }
::-webkit-scrollbar { width:6px;height:6px; }
::-webkit-scrollbar-track { background:#0e141c; }
::-webkit-scrollbar-thumb { background:#48505a;border-radius:8px; }
.panel-root {
  min-height:0;
  height:calc(100vh - 56px);
  height:calc(100dvh - 56px);
  border-radius:18px;
  border-color:var(--pv-line);
  background:rgba(12,17,24,.96);
  box-shadow:0 28px 90px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.25);
}
.header {
  background:linear-gradient(105deg,#151c25,#111820 70%,#1d2228);
  border-bottom-color:var(--pv-line);
  box-shadow:0 4px 18px rgba(0,0,0,.14);
}
.h-icon {
  background:linear-gradient(145deg,#2b2930,#141a23);
  border-right:1px solid var(--pv-line);
  color:var(--pv-gold-light);
  font-size:27px;
}
.h-title { color:#e8d3a0;font-size:17px;letter-spacing:1.8px; }
.h-right { background:transparent;border-left:0;gap:9px;padding-right:20px; }
.h-coins {
  background:rgba(215,179,99,.08);
  border:1px solid rgba(215,179,99,.22);
  border-radius:9px;
  padding:7px 13px;
  color:var(--pv-gold-light);
}
.h-user { color:#b4bdc9; }
.h-btn { border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);border-radius:9px;color:#c6ced7; }
.h-btn:hover { background:rgba(215,179,99,.1);border-color:rgba(215,179,99,.3); }
.panel-body { background:transparent; }
.sidebar,.sidebar:hover {
  background:linear-gradient(180deg,#121923,#0e151e);
  border-right-color:var(--pv-line);
}
.sidebar-inner { padding:17px 14px; }
.side-identity {
  background:linear-gradient(150deg,#202633,#171e28);
  border-color:var(--pv-line);
  border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.025);
  padding:17px 15px;
}
.side-logo { filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
.side-kicker,.side-balance-label,.side-section-label { color:#9ca6b4;font-size:10px;letter-spacing:1.2px; }
.side-account { color:var(--pv-gold-light);font-size:18px;margin-top:5px; }
.side-balance-label { border-top-color:var(--pv-line); }
.side-balance { color:var(--pv-gold-light);font-size:22px; }
.side-section-label { padding:3px 11px 9px; }
.nav-item {
  color:#b5bdc9;
  border:1px solid transparent;
  border-radius:8px;
  margin:3px 0;
  transition:background .16s,color .16s,border-color .16s;
}
.nav-item:hover { color:#f3e5c5;background:rgba(215,179,99,.055);border-color:rgba(215,179,99,.1); }
.nav-item.active {
  color:var(--pv-gold-light);
  background:linear-gradient(90deg,rgba(215,179,99,.16),rgba(215,179,99,.045));
  border-color:rgba(215,179,99,.21);
  box-shadow:inset 3px 0 var(--pv-gold);
}
.nav-icon { font-size:16px; }
.nav-label { font-size:13px;letter-spacing:.5px; }
.nav-sep { background:var(--pv-line);margin:13px 8px; }
.side-world { background:#171e28;border-color:var(--pv-line);border-radius:11px;padding:15px; }
.side-world-title { color:#e2e6ed; }
.side-world-row { color:var(--pv-muted);font-size:11px;padding:5px 0; }
.side-world-row b { color:var(--pv-gold-light);font-size:11px; }
.content {
  background:radial-gradient(ellipse at 95% 0,rgba(215,179,99,.045),transparent 50%),linear-gradient(140deg,#111923,#0e151e);
  color:var(--pv-text);
  scrollbar-gutter:stable;
}
.bc { color:#8994a3;font-size:12px; }
.bc span { color:var(--pv-gold); }
.bc span:hover { color:var(--pv-gold-light); }
.page-title { color:#f0e5ca;font-size:25px;letter-spacing:.8px;line-height:1.3; }
.page-title::after { background:linear-gradient(90deg,rgba(215,179,99,.26),transparent); }
.card,.stat {
  background:linear-gradient(145deg,rgba(31,39,51,.96),rgba(23,30,40,.98));
  border:1px solid rgba(215,179,99,.15);
  box-shadow:0 8px 24px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.025);
}
.card { border-radius:13px; }
.card:has(.tbl) { overflow-x:auto; }
.ct { color:#eee6d5;font-size:15px;letter-spacing:.8px; }
.stats { gap:14px;margin-bottom:21px; }
.stat { border-radius:12px;padding:20px 18px; }
.stat::after { height:2px;background:linear-gradient(90deg,rgba(215,179,99,.5),rgba(215,179,99,.05)); }
.stat .sv { color:#f1dfb5;font-size:31px;font-variant-numeric:tabular-nums; }
.stat .sl { color:#a5afbd;font-size:10px;letter-spacing:1.1px; }
.fl { color:#b0bac7;letter-spacing:.65px; }
.fi {
  background:#101720;
  border:1px solid #35404d;
  color:#edf0f5;
  border-radius:9px;
  min-height:44px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.12);
}
.fi::placeholder { color:#7e8a9a;opacity:1; }
.fi:focus { border-color:var(--pv-gold);box-shadow:0 0 0 3px rgba(215,179,99,.1); }
select.fi { color-scheme:dark; }
.btn { min-height:42px;border-radius:9px;letter-spacing:.6px;transition:background .16s,box-shadow .16s,transform .16s; }
.btn-primary {
  color:#201a0e;
  background:linear-gradient(110deg,#b48b40,#e5c77e 55%,#c29b53);
  border:1px solid rgba(255,230,174,.25);
  box-shadow:0 4px 14px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover:not(:disabled) { background:linear-gradient(110deg,#c69e54,#f2d99b 55%,#d1ac69);box-shadow:0 5px 18px rgba(215,179,99,.12); }
.btn-sec { background:#2a3442;color:#dce2eb;border:1px solid #3b4656; }
.btn-sec:hover:not(:disabled) { background:#354252; }
.btn-danger { background:linear-gradient(135deg,#743a40,#a04c51);border:1px solid rgba(247,139,146,.18); }
.btn:disabled { opacity:.45;transform:none;box-shadow:none; }
.btn:focus-visible,.h-btn:focus-visible,.fi:focus-visible,a:focus-visible { outline:2px solid var(--pv-gold-light);outline-offset:3px; }
.tbl { font-size:13px; }
.tbl th { color:#b7c0cc;background:rgba(215,179,99,.06);font-size:10px;letter-spacing:.65px;padding:13px 14px;border-color:var(--pv-line); }
.tbl td { padding:14px;border-bottom-color:rgba(255,255,255,.065);color:#dce2eb; }
.tbl tr:hover td { background:rgba(215,179,99,.035); }
.tbl tr:last-child td { border-bottom:0; }
.badge { padding:4px 9px;border-radius:6px;font-size:10px;font-weight:600;letter-spacing:.2px; }
.bg-green { background:rgba(74,188,133,.13);color:#94dbb3;border:1px solid rgba(74,188,133,.16); }
.bg-yellow { background:rgba(215,179,99,.12);color:#e6c982;border:1px solid rgba(215,179,99,.18); }
.bg-red { background:rgba(219,107,117,.12);color:#f1a3ac;border:1px solid rgba(219,107,117,.16); }
.bg-blue { background:rgba(110,161,220,.13);color:#a3c7ef;border:1px solid rgba(110,161,220,.17); }
.mcard,.copt { background:linear-gradient(140deg,#1e2734,#151e29);border-color:#35404d;box-shadow:inset 0 1px 0 rgba(255,255,255,.02); }
.mcard:hover,.copt:hover { border-color:rgba(215,179,99,.5);box-shadow:0 8px 22px rgba(0,0,0,.15); }
.mcard.sel,.copt.sel { background:linear-gradient(140deg,#302c25,#1f242b);border-color:var(--pv-gold);box-shadow:0 0 0 1px rgba(215,179,99,.18),0 8px 20px rgba(0,0,0,.15); }
.mcard .check { background:var(--pv-gold);color:#171b22; }
.copt::before { background:linear-gradient(90deg,transparent,var(--pv-gold),transparent); }
.minfo p,.cq-label,.cp { color:var(--pv-muted); }
.cq { color:var(--pv-gold-light);font-size:26px; }
.total-box { background:rgba(215,179,99,.06);border:1px solid rgba(215,179,99,.25);padding:18px 20px; }
.tl { color:#afb9c7; }
.tv { color:var(--pv-gold-light); }
.mbg { background:rgba(4,8,13,.76);backdrop-filter:blur(5px); }
.modal { background:#1a2330;border:1px solid rgba(215,179,99,.3);border-radius:15px;max-height:90vh;overflow:auto;box-shadow:0 24px 80px rgba(0,0,0,.5); }
.auth-wrap,.loading-screen {
  background:linear-gradient(110deg,rgba(5,10,17,.74),rgba(6,12,20,.88)),url('../../img/l2village-hero.png') center/cover fixed no-repeat;
  min-height:calc(100vh - 56px);
  min-height:calc(100dvh - 56px);
}
.auth-wrap { border-radius:18px; }
.auth-card { background:linear-gradient(150deg,rgba(29,38,51,.97),rgba(18,26,37,.97));border-color:rgba(215,179,99,.26);border-radius:16px;box-shadow:0 25px 75px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04); }
.auth-logo p { color:#d7c18e; }
.auth-card h2 { color:#efdeb4;border-bottom-color:var(--pv-line);letter-spacing:1px; }
.auth-sw { color:#a3acb8;line-height:1.65; }
.auth-sw a { color:var(--pv-gold); }
.auth-sw a:hover { color:var(--pv-gold-light); }
.alert { border-radius:9px;line-height:1.6; }
.a-info { background:rgba(91,144,204,.1);color:#b4d4f5;border-color:rgba(91,144,204,.22); }
.a-ok { background:rgba(73,172,124,.1);color:#a4dfbf;border-color:rgba(73,172,124,.22); }
.a-err { background:rgba(217,104,116,.1);color:#f2b0b9;border-color:rgba(217,104,116,.22); }
@media(max-width:1000px) {
  .panel-root { height:100vh;height:100dvh;border-radius:0; }
  .sidebar-inner { padding:10px 4px; }
  .auth-wrap,.loading-screen { min-height:100vh;min-height:100dvh;border-radius:0; }
}
@media(max-width:600px) {
  .h-title { font-size:12px;letter-spacing:1px;padding:0 8px; }
  .h-right { gap:4px;padding-right:7px; }
  .h-btn { width:29px;height:32px; }
  .h-coins { padding:6px 7px;font-size:11px;white-space:nowrap; }
  .h-icon { width:44px;font-size:23px; }
  .content { padding:20px 12px 32px; }
  .stats { gap:9px; }
  .stat { padding:15px 12px; }
  .stat .sv { font-size:26px; }
  .stat .sl { font-size:9px;letter-spacing:.65px; }
  .page-title { font-size:22px; }
  .card { padding:18px 14px; }
  .tbl td,.tbl th { padding:11px 10px; }
  .auth-wrap { padding:24px 14px; }
  .auth-card { padding:25px 20px; }
  .auth-logo img { max-width:100%; }
}
@media(max-width:380px) {
  .h-title { font-size:11px;letter-spacing:0; }
  .h-right { gap:2px;padding-right:4px; }
  .h-icon { width:36px; }
  .h-btn { width:25px; }
  .auth-card { padding:22px 12px; }
  .auth-wrap { padding:20px 7px; }
}
@media(prefers-reduced-motion:reduce) {
  .content>div { animation:none; }
  .nav-item,.btn,.mcard,.copt { transition:none; }
}

/* Retratos de personajes: raza, sexo y tipo de clase. */
.char-card-header { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px; }
.char-identity { display:flex;align-items:center;gap:16px;min-width:0; }
.char-portrait { width:80px;height:80px;flex:0 0 80px;object-fit:cover;border:1px solid rgba(215,179,99,.55);border-radius:11px;background:#151d27;box-shadow:0 4px 14px rgba(0,0,0,.25); }
.char-description { min-width:0; }
.char-name { display:flex;align-items:center;gap:8px;font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:700;color:#f0e5ca;overflow-wrap:anywhere; }
.char-details { margin-top:5px;color:#b0bac7;font-size:12px;line-height:1.6;overflow-wrap:anywhere; }
.char-card-header>.badge { flex-shrink:0;white-space:nowrap; }
@media(max-width:600px) {
  .char-card-header { flex-wrap:wrap;gap:12px; }
  .char-identity { gap:12px;flex:1 1 100%; }
  .char-portrait { width:64px;height:64px;flex-basis:64px;border-radius:9px; }
  .char-name { font-size:19px; }
  .char-details { font-size:11px; }
}