/* ---------------------------------------------------------------------------
   Portal del reino.

   Sistema visual: los colores de calidad de objeto de WoW (gris, blanco, verde,
   azul, morado, naranja) son el acento estructural de toda la interfaz. No son
   decoración: un jugador lee la calidad de una pieza por su color antes que por
   su nombre, así que el color hace trabajo informativo en cada sitio donde
   aparece.

   La base es piedra fría y metal, el vocabulario material de la interfaz del
   juego, con el oro reservado para jerarquía.
--------------------------------------------------------------------------- */

:root {
    --piedra-900: #13161d;
    --piedra-850: #181c25;
    --piedra-800: #1e2430;
    --piedra-700: #2b3340;
    --piedra-600: #3d4757;

    --oro:        #c8a456;
    --oro-tenue:  #8a7540;
    --escarcha:   #7fb6d9;

    --texto:      #ddd9ce;
    --texto-sord: #8f9099;

    --alianza:    #4a7ebb;
    --horda:      #b33b3b;

    --verde:      #4a9b5e;
    --rojo:       #c0453f;

    --radio:      3px;
    --ancho:      1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, #223042 0%, transparent 70%),
        var(--piedra-900);
    color: var(--texto);
    font: 400 16px/1.6 'Barlow', system-ui, sans-serif;
    min-height: 100vh;
}

h1, h2, h3 {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2;
    margin: 0 0 .5em;
}
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size: 1.35rem; color: var(--oro); }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1em; max-width: 68ch; }

a { color: var(--escarcha); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: .9em;
    background: var(--piedra-800);
    border: 1px solid var(--piedra-700);
    border-radius: var(--radio);
    padding: .1em .4em;
    color: var(--escarcha);
}

:focus-visible {
    outline: 2px solid var(--escarcha);
    outline-offset: 2px;
}

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }

/* ------------------------------ Cabecera ---------------------------------- */

.cabecera {
    border-bottom: 1px solid var(--piedra-700);
    background: linear-gradient(var(--piedra-850), var(--piedra-900));
    position: sticky; top: 0; z-index: 10;
}
.cabecera-fila {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; min-height: 72px; flex-wrap: wrap;
}
.marca { display: flex; flex-direction: column; text-decoration: none; }
.marca:hover { text-decoration: none; }
.marca-nombre {
    font-family: 'Cinzel', Georgia, serif; font-weight: 700;
    font-size: 1.3rem; color: var(--oro);
}
.marca-sub { font-size: .75rem; color: var(--texto-sord); }

.nav { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.nav a { color: var(--texto); font-weight: 500; }
.nav a.activo { color: var(--oro); }
.nav a.activo::after {
    content: ''; display: block; height: 2px; background: var(--oro); margin-top: 3px;
}
.nav-salir { color: var(--texto-sord) !important; font-size: .9rem; }

.principal { padding: 2.5rem 1.25rem 4rem; }

/* -------------------------------- Botones --------------------------------- */

.boton {
    display: inline-block;
    font: 600 .95rem 'Barlow', sans-serif;
    padding: .55em 1.3em;
    border: 1px solid var(--oro-tenue);
    border-radius: var(--radio);
    background: linear-gradient(var(--piedra-700), var(--piedra-800));
    color: var(--oro);
    cursor: pointer;
    text-decoration: none;
}
.boton:hover { background: var(--piedra-600); text-decoration: none; }
.boton[disabled] { opacity: .4; cursor: not-allowed; }
.boton-grande { padding: .75em 1.8em; font-size: 1.05rem; }
.boton-cabecera { padding: .4em 1em; }
.boton-plano { background: none; border-color: var(--piedra-600); color: var(--texto); }

/* --------------------------------- Hero ----------------------------------- */

.hero {
    border: 1px solid var(--piedra-700);
    border-top: 2px solid var(--oro-tenue);
    border-radius: var(--radio);
    background: linear-gradient(160deg, var(--piedra-800), var(--piedra-900));
    padding: 2.5rem 2rem;
    margin-bottom: 2.5rem;
}
.hero-estado {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .85rem; color: var(--texto-sord); margin-bottom: 1rem;
}
.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.punto-verde { background: var(--verde); box-shadow: 0 0 8px var(--verde); }
.punto-rojo  { background: var(--rojo); }
.punto-gris  { background: var(--texto-sord); }

.hero-titulo { color: var(--oro); margin-bottom: .3em; }
.hero-texto { font-size: 1.08rem; }
.hero-acciones { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.5rem 0 2rem; }

.cifras {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1px; margin: 0;
    background: var(--piedra-700);
    border: 1px solid var(--piedra-700);
    border-radius: var(--radio);
    overflow: hidden;
}
.cifras > div { background: var(--piedra-850); padding: .9rem 1rem; }
.cifras dt { font-size: .78rem; color: var(--texto-sord); margin-bottom: .2rem; }
.cifras dd {
    margin: 0; font-family: 'Cinzel', serif; font-size: 1.5rem; color: var(--texto);
}
.cifras-ficha { margin: 1.5rem 0 2rem; }

/* -------------------------------- Bloques --------------------------------- */

.bloque { margin-bottom: 3rem; }
.encabezado-seccion { margin-bottom: 1.75rem; }
.encabezado-tienda {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 2rem; flex-wrap: wrap;
}
.intro { color: var(--texto-sord); }

.pasos { padding-left: 1.2rem; max-width: 68ch; }
.pasos li { margin-bottom: .6rem; }

.columna-estrecha { max-width: 460px; margin: 0 auto; }

/* ------------------------------ Formularios -------------------------------- */

.formulario { display: flex; flex-direction: column; gap: .35rem; }
.formulario-estrecho { max-width: 380px; }
.formulario label { font-weight: 600; font-size: .9rem; margin-top: .9rem; }
.formulario input {
    font: 400 1rem 'Barlow', sans-serif;
    padding: .6em .75em;
    background: var(--piedra-900);
    border: 1px solid var(--piedra-600);
    border-radius: var(--radio);
    color: var(--texto);
}
.formulario input:focus { border-color: var(--escarcha); }
.formulario button { margin-top: 1.5rem; align-self: flex-start; }
.pista { font-size: .82rem; color: var(--texto-sord); margin: .1rem 0 0; }
.opcional { font-weight: 400; color: var(--texto-sord); font-size: .8rem; }
.alternativa { margin-top: 1.75rem; font-size: .9rem; color: var(--texto-sord); }

.buscador { display: flex; gap: .5rem; margin-bottom: 1.5rem; max-width: 460px; }
.buscador input {
    flex: 1; font: 400 1rem 'Barlow', sans-serif; padding: .6em .75em;
    background: var(--piedra-900); border: 1px solid var(--piedra-600);
    border-radius: var(--radio); color: var(--texto);
}

select {
    font: 400 .9rem 'Barlow', sans-serif; padding: .45em .6em;
    background: var(--piedra-900); border: 1px solid var(--piedra-600);
    border-radius: var(--radio); color: var(--texto);
}

/* -------------------------------- Avisos ----------------------------------- */

.aviso {
    border-left: 3px solid var(--piedra-600);
    background: var(--piedra-850);
    padding: .85rem 1.1rem;
    border-radius: var(--radio);
    margin-bottom: 1.5rem;
}
.aviso ul { margin: 0; padding-left: 1.1rem; }
.aviso-ok    { border-left-color: var(--verde); }
.aviso-error { border-left-color: var(--rojo); }
.aviso-info  { border-left-color: var(--escarcha); }

.vacio {
    border: 1px dashed var(--piedra-600);
    border-radius: var(--radio);
    padding: 2.5rem 2rem;
    text-align: center;
    color: var(--texto-sord);
}
.vacio p { max-width: none; }
.vacio-equipo { padding: 1.5rem; }

/* -------------------------------- Tablas ----------------------------------- */

.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th {
    text-align: left; font-family: 'Barlow', sans-serif; font-weight: 600;
    font-size: .82rem; color: var(--texto-sord);
    padding: .5rem .75rem; border-bottom: 1px solid var(--piedra-700);
}
.tabla td { padding: .65rem .75rem; border-bottom: 1px solid var(--piedra-800); }
.tabla tr:hover td { background: var(--piedra-850); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.tenue { color: var(--texto-sord); font-size: .88rem; }
.contador { font-size: .85rem; color: var(--texto-sord); }

.enlace-pj { font-weight: 600; }
.chip-online {
    font-size: .7rem; color: var(--verde); border: 1px solid var(--verde);
    border-radius: 2px; padding: .05em .4em; margin-left: .5rem;
    white-space: nowrap;
}
.faccion-alianza { color: var(--alianza); }
.faccion-horda   { color: var(--horda); }

/* -------------------------- Tarjetas de personaje -------------------------- */

.rejilla-pj {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .75rem;
}
.tarjeta-pj {
    display: flex; flex-direction: column; gap: .15rem;
    border: 1px solid var(--piedra-700); border-radius: var(--radio);
    background: var(--piedra-850); padding: .85rem 1rem;
    text-decoration: none;
}
.tarjeta-pj:hover { border-color: var(--piedra-600); text-decoration: none; }
.pj-nombre { font-weight: 600; font-size: 1.05rem; }
.pj-meta { font-size: .82rem; color: var(--texto-sord); }
.pj-faccion { font-size: .76rem; }
.pj-online { font-size: .72rem; color: var(--verde); }

/* ------------------------- Ficha y panel de equipo ------------------------- */

.ficha {
    border: 1px solid var(--piedra-700);
    border-radius: var(--radio);
    background: var(--piedra-850);
    padding: 2rem;
}
.ficha-cabecera {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1.5rem; flex-wrap: wrap;
    border-bottom: 1px solid var(--piedra-700); padding-bottom: 1.25rem;
}
.ficha-nombre { margin-bottom: .15em; }
.ficha-sub { color: var(--texto-sord); margin: 0; }
.ficha-estado { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.ficha-faccion { font-weight: 600; }
.dinero { font-size: 1.1rem !important; }
.oro   { color: #e4c04a; }
.plata { color: #c7c7c7; }
.cobre { color: #c8835a; }

.titulo-equipo { margin-top: 2rem; }

/* Dos columnas de ranuras, como el panel de personaje del juego: la izquierda
   mira hacia dentro y la derecha hacia fuera. */
.panel-equipo {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.columna-ranuras { display: flex; flex-direction: column; gap: .4rem; }

.ranura { display: flex; align-items: center; gap: .7rem; min-height: 46px; }
.ranura-der { flex-direction: row-reverse; text-align: right; }
.ranura-der .ranura-texto { align-items: flex-end; }

.ranura-caja {
    flex: 0 0 auto; width: 40px; height: 40px;
    border: 2px solid var(--piedra-600);
    border-radius: 2px;
    background: var(--piedra-900);
    display: block;
}
.ranura-caja img { width: 100%; height: 100%; display: block; border: 0; }

.ranura-texto { display: flex; flex-direction: column; min-width: 0; }
.ranura-objeto {
    font-weight: 600; font-size: .92rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ranura-etiqueta { font-size: .74rem; color: var(--texto-sord); }
.ranura-vacia .ranura-caja { border-style: dashed; opacity: .45; }
.ranura-vacia .ranura-etiqueta { opacity: .6; }

.fila-armas {
    display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap;
    margin-top: 1.5rem; padding-top: 1.5rem;
    border-top: 1px solid var(--piedra-700);
}
.ranura-arma { flex-direction: column; text-align: center; gap: .35rem; }
.ranura-arma .ranura-texto { align-items: center; }
.ranura-arma .ranura-objeto { max-width: 160px; }

.nota-frescura {
    font-size: .8rem; color: var(--texto-sord);
    margin-top: 2rem; padding-top: 1rem;
    border-top: 1px solid var(--piedra-800);
}
.volver { margin-top: 1.5rem; }

/* -------------------------------- Tienda ----------------------------------- */

.saldo {
    border: 1px solid var(--oro-tenue); border-radius: var(--radio);
    padding: .6rem 1.2rem; text-align: center; background: var(--piedra-850);
}
.saldo-cifra {
    display: block; font-family: 'Cinzel', serif; font-size: 1.7rem; color: var(--oro);
}
.saldo-etiqueta { font-size: .75rem; color: var(--texto-sord); }

.filtros { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
           border-bottom: 1px solid var(--piedra-700); padding-bottom: .6rem; }
.filtros a { color: var(--texto-sord); font-size: .92rem; }
.filtros a.activo { color: var(--oro); font-weight: 600; }

.rejilla-tienda {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem;
}

/* El borde izquierdo lleva el color de calidad del objeto: es la señal que un
   jugador busca primero. */
.articulo {
    border: 1px solid var(--piedra-700);
    border-left: 3px solid var(--calidad, var(--piedra-600));
    border-radius: var(--radio);
    background: var(--piedra-850);
    padding: 1.1rem;
    display: flex; flex-direction: column; gap: .6rem;
}
.articulo-cabecera { display: flex; gap: .75rem; align-items: flex-start; }
.articulo-icono {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 2px;
    border: 2px solid var(--calidad);
    background: color-mix(in srgb, var(--calidad) 14%, transparent);
    overflow: hidden; display: block;
}
.articulo-icono img { width: 100%; height: 100%; display: block; }
.articulo-nombre { margin: 0; font-size: 1rem; color: var(--calidad); font-family: 'Barlow', sans-serif; font-weight: 600; }
.articulo-meta { margin: .1rem 0 0; font-size: .78rem; color: var(--texto-sord); }
.articulo-desc { margin: 0; font-size: .88rem; color: var(--texto-sord); }
.articulo-roto { margin: 0; font-size: .82rem; color: var(--rojo); }
.articulo-pie {
    margin-top: auto; padding-top: .6rem;
    display: flex; justify-content: space-between; align-items: center;
    gap: .75rem; flex-wrap: wrap;
    border-top: 1px solid var(--piedra-800);
}
.precio { font-family: 'Cinzel', serif; font-size: 1.2rem; color: var(--oro); }
.precio small { font-size: .65rem; color: var(--texto-sord); font-family: 'Barlow', sans-serif; }
.form-compra { display: flex; gap: .4rem; align-items: center; }

.estado { font-size: .78rem; border-radius: 2px; padding: .1em .5em; }
.estado-entregado { color: var(--verde); border: 1px solid var(--verde); }
.estado-pendiente { color: var(--oro); border: 1px solid var(--oro-tenue); }
.estado-fallido   { color: var(--rojo); border: 1px solid var(--rojo); }

/* --------------------------------- Pie ------------------------------------- */

.pie {
    border-top: 1px solid var(--piedra-700);
    padding: 2rem 0; margin-top: 3rem;
    font-size: .85rem; color: var(--texto-sord);
}
.pie p { margin: 0 0 .3rem; max-width: none; }
.pie-realm code { font-size: .85rem; }

/* ------------------------------ Adaptación --------------------------------- */

@media (max-width: 700px) {
    .panel-equipo { grid-template-columns: 1fr; gap: .4rem; }
    .ranura-der { flex-direction: row; text-align: left; }
    .ranura-der .ranura-texto { align-items: flex-start; }
    .ficha { padding: 1.25rem; }
    .hero { padding: 1.75rem 1.25rem; }
    .cabecera-fila { min-height: 0; padding-top: .75rem; padding-bottom: .75rem; }
    .nav { gap: 1rem; font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* -------------------------------- Visor 3D --------------------------------- */

.visor3d { margin-top: 2rem; }
.visor3d-cabecera {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.visor3d-cabecera .titulo-equipo { margin: 0; }

.visor3d-estado { font-size: .85rem; color: var(--texto-sord); margin: .5rem 0 0; }
.visor3d-error { color: var(--rojo); }

/* Alto fijo: el visor necesita dimensiones concretas para inicializar su
   lienzo, y un contenedor que crezca solo provoca un canvas de 0 píxeles. */
.visor3d-lienzo {
    width: 100%; height: 520px; margin-top: 1rem;
    border: 1px solid var(--piedra-700); border-radius: var(--radio);
    background: radial-gradient(ellipse at 50% 40%, #243040, var(--piedra-900));
    overflow: hidden;
}
.visor3d-lienzo canvas { display: block; width: 100% !important; height: 100% !important; }

.visor3d-controles {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-top: .75rem;
}
.visor3d-zoom {
    display: flex; align-items: center; gap: .5rem;
    font-size: .82rem; color: var(--texto-sord); margin-left: auto;
}
.visor3d-zoom input { accent-color: var(--oro); width: 130px; }

@media (max-width: 700px) {
    .visor3d-lienzo { height: 360px; }
    .visor3d-zoom { margin-left: 0; }
}

/* Tienda: restricciones y notas de artículo */
.articulo-clases {
    margin: 0; font-size: .78rem; color: var(--escarcha);
}
.articulo-nota {
    margin: 0; font-size: .78rem; color: var(--oro-tenue);
}