/* =====================================================================
   guildarise · estilos
   Estructura moderna y sobria; la fantasía vive en los estandartes,
   los títulos (Marcellus) y el dorado heráldico.
   ===================================================================== */

/* Fuentes alojadas en el propio servidor (licencia SIL OFL, ver /fonts) */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/figtree-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/figtree-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/figtree-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/figtree-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/figtree-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/marcellus-latin-400-normal.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --bg: #121821;
  --surface: #19212c;
  --surface-2: #212b38;
  --line: #2e3a4a;
  --ink: #ece6da;
  --muted: #9aa4b2;
  --gold: #d2a54a;
  --gold-soft: #e6c77f;
  --gold-ink: #1b1407;
  --alliance: #2f64c8;
  --alliance-deep: #16326a;
  --horde: #a8332b;
  --horde-deep: #4e1612;
  --neutral-banner: #4a5568;
  --danger: #e58a7f;
  --ok: #7cc79a;
  --discord: #5865f2;

  --radius-sm: 6px;
  --radius: 10px;
  --font-display: 'Marcellus', 'Times New Roman', serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1080px;
  --gutter: 16px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.2; }
p { margin: 0; }
a { color: var(--gold-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { display: block; }
:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; border-radius: 4px; }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 50;
  background: var(--gold); color: var(--gold-ink); padding: 8px 12px; border-radius: var(--radius-sm);
}
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.pad { padding: 24px var(--gutter); }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row.end { justify-content: flex-end; }
.row.tight { gap: 4px; }

/* ---------- Cabecera ---------- */
.header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(18, 24, 33, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.header-inner {
  padding: 8px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); text-decoration: none;
  letter-spacing: 0.01em;
}
.brand-mark { width: 30px; height: 34px; }
.nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.nav-link {
  color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: var(--radius-sm);
}
.nav-link:hover { color: var(--ink); background: var(--surface); }
.nav-link[aria-current='page'] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
.header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.user { display: flex; align-items: center; gap: 8px; }
.user-name { font-weight: 600; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Botones y campos ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 16px;
  font: inherit; font-weight: 600; font-size: 0.95rem;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: #46566b; }
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn-primary { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.btn-quiet { background: transparent; }
.btn-discord { background: var(--discord); border-color: var(--discord); color: #fff; }
.btn-discord:hover { background: #6b76f5; }
.btn-danger { color: var(--danger); }
.btn-sm { min-height: 32px; padding: 4px 10px; font-size: 0.875rem; }
.btn-lg { min-height: 48px; padding: 12px 22px; font-size: 1.05rem; }
.lang { font-weight: 400; color: var(--muted); }
.lang .short { display: none; }

.input {
  width: 100%; min-height: 42px; padding: 8px 12px;
  font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(210, 165, 74, 0.2); }
textarea.input { resize: vertical; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.label { font-weight: 600; font-size: 0.925rem; }
.hint { color: var(--muted); font-size: 0.85rem; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--gold); }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; width: fit-content; }
.seg {
  font: inherit; font-weight: 600; padding: 8px 18px; min-height: 40px;
  background: transparent; color: var(--muted); border: 0; cursor: pointer;
}
.seg + .seg { border-left: 1px solid var(--line); }
.seg.on.alliance { background: var(--alliance); color: #fff; }
.seg.on.horde { background: var(--horde); color: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; padding: 6px 14px; min-height: 38px;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
}
.chip:hover { border-color: #46566b; }
.chip.on { border-color: var(--gold); background: rgba(210, 165, 74, 0.14); box-shadow: inset 0 0 0 1px var(--gold); }
.pack {
  font-size: 0.7rem; font-weight: 700; color: var(--gold-ink); background: var(--gold-soft);
  padding: 0 6px; border-radius: 4px;
}
.star { color: var(--gold-soft); }
.class-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }

/* ---------- Estructura de página ---------- */
.main { max-width: var(--wrap); margin: 0 auto; padding: 32px var(--gutter) 72px; display: grid; gap: 24px; }
.main:focus { outline: none; }
.page-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.4rem); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.lead { color: var(--muted); max-width: 62ch; margin-top: 6px; }
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; display: grid; gap: 14px; align-content: start;
}
.panel-title { font-family: var(--font-display); font-size: 1.3rem; display: flex; align-items: center; gap: 10px; }
.count {
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
  background: var(--gold); color: var(--gold-ink); border-radius: 999px; padding: 1px 8px;
}
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.grid-2.tight { gap: 16px; }
.empty-state { text-align: center; padding: 64px 16px; display: grid; gap: 16px; justify-items: center; }
.empty-inline { color: var(--muted); padding: 20px; border: 1px dashed var(--line); border-radius: var(--radius); }
.note-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------- Estandartes ---------- */
.banner { flex: none; overflow: visible; }
.banner-sm { width: 34px; height: 66px; }
.banner-md { width: 52px; height: 100px; }
.banner-lg { width: 110px; height: 214px; }
.banner-xl { width: 96px; height: 186px; }
.banner-pole { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.banner-edge { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linejoin: round; }
.banner-mono { font-family: var(--font-display); font-size: 26px; fill: var(--gold-soft); letter-spacing: 1px; }
.faction-tag { font-weight: 600; font-size: 0.875rem; }
.faction-tag.alliance { color: #8fb1f0; }
.faction-tag.horde { color: #ec8f86; }

/* ---------- Inicio (sin sesión) ---------- */
.home { display: grid; gap: 40px; }
.hero {
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
  padding: 24px 0 8px;
}
.hero-copy { display: grid; gap: 18px; justify-items: start; max-width: 36rem; }
.hero-title { font-family: var(--font-display); font-size: clamp(2.3rem, 6vw, 3.6rem); line-height: 1.08; }
.hero-lead { font-size: 1.15rem; color: #cfd6df; }
.hero-banners { display: flex; gap: 22px; align-items: flex-start; padding-right: 8px; }
.hero-banners .banner:nth-child(2) { margin-top: 36px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-banners .banner { transform-origin: 50% 0; animation: sway 7s ease-in-out infinite; }
  .hero-banners .banner:nth-child(2) { animation-delay: -3.5s; }
  @keyframes sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
}
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; border-top: 1px solid var(--line); padding-top: 28px; }
.feature h3 { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold-soft); margin-bottom: 6px; }
.feature p { color: var(--muted); }
.dev-login { max-width: 460px; border-style: dashed; }
.dev-login .input { flex: 1; min-width: 160px; }

/* ---------- Inicio (con sesión) ---------- */
.char-summary { display: flex; gap: 12px; align-items: flex-start; }
.char-summary .class-dot { margin-top: 8px; }
.char-name { font-weight: 700; }
.guild-mini { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.guild-mini strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; }
.guild-mini .muted { display: block; font-size: 0.9rem; }

/* ---------- Personajes ---------- */
.char-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.char-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  border-top: 3px solid var(--class-color, var(--line));
  padding: 16px 18px; display: grid; gap: 6px; align-content: start;
}
.char-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.char-head h3 { font-size: 1.25rem; }
.char-meta { font-size: 0.95rem; }
.char-profs { font-size: 0.9rem; color: #cfd6df; }
.char-note { font-size: 0.9rem; color: var(--muted); font-style: italic; }
.char-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.badges { display: flex; gap: 6px; }
.badge { font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.badge-main { background: var(--gold); color: var(--gold-ink); }
.badge-active { border: 1px solid var(--ok); color: var(--ok); }

/* ---------- Lista de hermandades ---------- */
.filters { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.guild-list { display: grid; gap: 10px; }
.guild-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
}
.guild-row:hover { border-color: #46566b; }
.guild-row h3 { font-family: var(--font-display); font-size: 1.3rem; }
.guild-desc { color: var(--muted); font-size: 0.925rem; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.guild-row-side { text-align: right; }

/* ---------- Crear hermandad ---------- */
.create-layout { display: grid; grid-template-columns: 1fr 220px; gap: 24px; align-items: start; }
.create-preview { display: grid; justify-items: center; gap: 12px; padding-top: 16px; position: sticky; top: 90px; }
.create-preview-name { font-family: var(--font-display); font-size: 1.3rem; text-align: center; overflow-wrap: anywhere; }

/* ---------- Página de hermandad ---------- */
.guild-head {
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start;
  padding: 24px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
.guild-head.alliance { border-top: 3px solid var(--alliance); }
.guild-head.horde { border-top: 3px solid var(--horde); }
.guild-head-body { display: grid; gap: 12px; min-width: 0; }
.guild-name { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); overflow-wrap: anywhere; }
.guild-sub { color: var(--muted); }
.guild-desc-full { white-space: pre-line; max-width: 65ch; }
.inline-form { padding: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); max-width: 560px; }

.requests { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.request { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.request-msg { margin-top: 6px; color: #cfd6df; white-space: pre-line; }

.avatar { border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.avatar-fallback { display: inline-grid; place-items: center; font-weight: 700; font-size: 0.85rem; color: var(--muted); flex: none; }

/* Gráficos */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px 36px; }
.chart { margin: 0; display: grid; gap: 10px; align-content: start; }
.chart-title { font-weight: 700; font-size: 0.95rem; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 8.5rem 1fr 2rem; gap: 10px; align-items: center; font-size: 0.9rem; }
.bar-label { display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 10px; background: var(--surface-2); border-radius: 0 4px 4px 0; }
.bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 4px; }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.bar-row:hover .bar-track { background: #2a3646; }

/* Roster */
.table-wrap { overflow-x: auto; }
.roster { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.roster th { text-align: left; font-weight: 600; color: var(--muted); font-size: 0.85rem; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.roster td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.roster tr:last-child td { border-bottom: 0; }
.roster .num { text-align: right; font-variant-numeric: tabular-nums; }
.member { display: flex; gap: 10px; align-items: center; }
.role { font-size: 0.78rem; font-weight: 700; }
.role-leader { color: var(--gold-soft); }
.role-officer { color: #9cc6e6; }
.role-member { color: var(--muted); font-weight: 400; }
.actions-cell { text-align: right; }
.actions-cell .row { justify-content: flex-end; }

/* ---------- Avisos ---------- */
.toasts { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 40; width: min(92vw, 420px); }
.toast {
  padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--line); border-left: 4px solid var(--ok); box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: opacity .4s, transform .4s;
}
.toast-error { border-left-color: var(--danger); }
.toast.out { opacity: 0; transform: translateY(6px); }

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .header-inner { gap: 8px 12px; padding: 8px var(--gutter); }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .nav-link { white-space: nowrap; }
  .user-name { display: none; }
  .brand { font-size: 1.2rem; gap: 8px; }
  .brand-mark { width: 26px; height: 30px; }
  .header-right { gap: 6px; }
  .header-right .btn { padding: 6px 10px; min-height: 36px; }
  .lang .long { display: none; }
  .lang .short { display: inline; }
  .main { padding-top: 20px; }
  .hero { grid-template-columns: 1fr; }
  .hero-banners { order: -1; }
  .banner-lg { width: 64px; height: 124px; }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .input:first-child { grid-column: 1 / -1; }
  .guild-row { grid-template-columns: auto 1fr; }
  .guild-row-side { grid-column: 2; text-align: left; }
  .create-layout { grid-template-columns: 1fr; }
  .create-preview { display: none; }
  .guild-head { grid-template-columns: 1fr; padding: 18px; }
  .guild-head .banner-xl { width: 56px; height: 108px; }
  .request { grid-template-columns: auto 1fr; }
  .request > .row { grid-column: 1 / -1; }
  .bar-row { grid-template-columns: 7rem 1fr 1.8rem; }

  /* El roster pasa de tabla a fichas */
  .roster thead { display: none; }
  .roster, .roster tbody, .roster tr, .roster td { display: block; width: 100%; }
  .roster tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .roster tr:last-child { border-bottom: 0; }
  .roster td { border: 0; padding: 4px 0; display: grid; grid-template-columns: 7rem 1fr; gap: 8px; }
  .roster td::before { content: attr(data-label); color: var(--muted); font-size: 0.85rem; }
  .roster td.num { text-align: left; }
  .roster td.actions-cell { display: block; }
  .roster td.actions-cell::before { content: none; }
  .actions-cell .row { justify-content: flex-start; }
}

/* ---------- Asistente de creación de personaje ---------- */
.input-lg { min-height: 50px; font-size: 1.15rem; }
.wiz-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.wiz-step { flex: 1; min-width: 0; }
.wiz-step-btn {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  font: inherit; font-size: 0.9rem; color: var(--muted); background: none;
  border: 0; border-top: 3px solid var(--line); text-align: left;
}
button.wiz-step-btn { cursor: pointer; }
button.wiz-step-btn:hover { color: var(--ink); }
.wiz-step.done .wiz-step-btn { border-top-color: var(--gold-dark, #8a6a2a); color: #cfd6df; }
.wiz-step.current .wiz-step-btn { border-top-color: var(--gold); color: var(--ink); font-weight: 600; }
.wiz-num {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 700; background: var(--surface-2); color: var(--muted);
}
.wiz-step.done .wiz-num { background: #5a4a26; color: var(--gold-soft); }
.wiz-step.current .wiz-num { background: var(--gold); color: var(--gold-ink); }
.wiz-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wiz-layout { display: grid; grid-template-columns: 1fr 240px; gap: 28px; align-items: start; }
.wiz-body {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; min-height: 360px; display: grid; align-content: start;
}
.wiz-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 1.9rem); margin-bottom: 18px; }
.wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }

.wiz-preview {
  position: sticky; top: 90px; display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 20px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
.wiz-preview-art { position: relative; width: 150px; height: 150px; display: grid; place-items: center; margin-bottom: 6px; }
.wiz-preview-race { width: 150px; height: 150px; }
.wiz-preview-crest { width: 110px; max-height: 140px; }
.wiz-preview-class { position: absolute; right: -6px; bottom: -4px; width: 58px; height: 58px; }
.wiz-preview-name { font-family: var(--font-display); font-size: 1.35rem; overflow-wrap: anywhere; }

/* Tarjetas para elegir */
.pick { font: inherit; color: var(--ink); cursor: pointer; }
.faction-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.faction-pick {
  display: grid; justify-items: center; gap: 8px; padding: 26px 16px 22px;
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--bg);
  transition: border-color .15s, transform .15s, background .15s;
}
.faction-pick.alliance:hover, .faction-pick.alliance.on { border-color: var(--alliance); background: linear-gradient(180deg, rgba(47,100,200,.22), var(--bg)); }
.faction-pick.horde:hover, .faction-pick.horde.on { border-color: var(--horde); background: linear-gradient(180deg, rgba(168,51,43,.25), var(--bg)); }
.faction-crest { width: 140px; height: 168px; }
.faction-pick-name { font-family: var(--font-display); font-size: 1.8rem; }
.faction-pick-tag { color: var(--muted); }

.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.card-pick {
  display: grid; justify-items: center; align-content: start; gap: 8px; padding: 16px 10px 14px;
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--bg);
  transition: border-color .15s, background .15s;
}
.card-pick:hover { border-color: var(--pick-color, var(--gold)); background: var(--surface-2); }
.card-pick.on { border-color: var(--pick-color, var(--gold)); box-shadow: inset 0 0 0 1px var(--pick-color, var(--gold)); background: var(--surface-2); }
.pick-art { width: 96px; height: 96px; }
.pick-name { font-weight: 600; font-size: 1.02rem; }
.pick-new { font-size: 0.78rem; color: var(--gold-soft); }
@media (prefers-reduced-motion: no-preference) {
  .faction-pick:hover, .card-pick:hover { transform: translateY(-2px); }
}

/* Resumen */
.summary-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
  padding: 20px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line);
}
.summary-card.alliance { border-left: 4px solid var(--alliance); }
.summary-card.horde { border-left: 4px solid var(--horde); }
.summary-race { width: 112px; height: 112px; }
.summary-class { width: 72px; height: 72px; }
.summary-body { display: grid; gap: 4px; min-width: 0; }
.summary-name { font-family: var(--font-display); font-size: 1.7rem; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .wiz-layout { grid-template-columns: 1fr; }
  .wiz-preview { display: none; }
  .wiz-label { display: none; }
  .wiz-step.current .wiz-label { display: inline; }
  .wiz-step.current { flex: 4; }
  .wiz-body { padding: 18px; }
  .faction-picks { gap: 10px; }
  .faction-pick { padding: 18px 8px; }
  .faction-crest { width: 96px; height: 116px; }
  .faction-pick-name { font-size: 1.4rem; }
  .pick-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
  .pick-art { width: 72px; height: 72px; }
  .summary-card { grid-template-columns: auto 1fr; }
  .summary-race { width: 80px; height: 80px; }
  .summary-class { display: none; }
}

/* ---------- Iconos oficiales de Blizzard ---------- */
.blz-frame {
  display: inline-block; flex: none; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--gold); box-shadow: inset 0 0 0 1px #8a6a2a, 0 0 0 1px #0b0f15;
  background: var(--bg);
}
.blz-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Pie ---------- */
.footer { border-top: 1px solid var(--line); margin-top: 16px; }
.footer-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 20px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  display: grid; gap: 6px; color: var(--muted); font-size: 0.8rem; line-height: 1.5;
}