/* panel.css — el cascarón del dashboard: barra de arriba, pestañas y vistas.
 *
 * Se apoya en `estilo.css` (paleta, superficies por elevación, botones) y solo añade el marco. Todo lo de
 * dentro de cada sección sigue siendo suyo — esto no repinta el juego, lo ORDENA.
 *
 * ⚠️ `.vista` esconde con `display:none`, igual que `.oculto`, y eso es a propósito: una sección se ve solo
 * si su vista está activa Y ella no está oculta. Así el desbloqueo de `app.mjs` sigue mandando y el panel
 * únicamente decide en qué pestaña vive cada cosa. Dos capas que se COMPONEN en vez de pelearse.
 */

/* La fuente de titulares es la misma que la portada: el juego y la landing no pueden parecer dos productos
   distintos. `@import` iría contra el rendimiento, así que se declara igual — el navegador la tiene ya en
   caché si el usuario vino de la portada. */
@font-face {
  font-family: 'Anton';
  src: url('/web/fuentes/anton-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

body { padding-top: 0; }

/* ── barra de arriba: quién eres ───────────────────────────────────────────────────────────────────── */
.panel-barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 10px max(14px, calc((100% - 900px) / 2));
  background: rgba(5, 5, 5, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.marca-panel {
  font-family: 'Anton', "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
  font-size: 19px; letter-spacing: .04em; color: var(--hueso); text-decoration: none;
  flex: 0 0 auto;
}
.marca-panel:hover { color: var(--amarillo); }

.panel-yo { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 auto; }
.panel-retrato {
  width: 40px; height: 40px; flex: 0 0 auto;
  background: var(--sup-1); border: 1px solid var(--linea); border-radius: 50%;
  overflow: hidden;
}
/* ⚠️ El retratista mete un <CANVAS>, no un <img> — mi primera versión estilaba `img` y el canvas entraba
   con su tamaño natural (128 px) dentro de un círculo de 40: `overflow:hidden` recortaba la esquina
   superior izquierda, que es fondo transparente, y el círculo parecía VACÍO. Se ve exactamente igual que
   «el retrato no ha cargado», y me mandó a buscar el fallo al motor cuando estaba aquí.
   El `object-position` sube el recorte para que quede la CARA: el render trae al bicho de cuerpo entero. */
.panel-retrato canvas { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.panel-datos { min-width: 0; display: grid; gap: 3px; }
.panel-nombre {
  font-size: 14px; color: var(--hueso); line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* un nombre de 24 letras no rompe la barra */
}
.panel-nivel { font-size: 11px; color: var(--gris); letter-spacing: .1em; line-height: 1; }
.panel-xp { height: 3px; background: var(--sup-2); border-radius: 2px; overflow: hidden; max-width: 150px; }
#panel-xp-fill { height: 100%; width: 0; background: var(--amarillo); transition: width .5s ease; }

/* ── el 2º eje: la FAMA, al lado del nivel ─────────────────────────────────────────────────────────
   Se lee como un hermano del bloque de nivel, no como un adorno: mismo tamaño de letra que el nivel,
   misma barra de 3 px. Lo que los distingue es el COLOR — el nivel va en amarillo de marca y la fama en
   el color de su tier, que es justo el desbloqueo `aura` de `core/renombre.mjs`. */
.panel-fama {
  display: grid; gap: 3px; flex: 0 0 auto; min-width: 0;
  padding-left: 11px; border-left: 1px solid var(--linea);
}
.panel-fama-tier {
  font-size: 11px; letter-spacing: .1em; line-height: 1;
  color: var(--tier, var(--gris));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.panel-fama-barra { height: 3px; background: var(--sup-2); border-radius: 2px; overflow: hidden; width: 84px; }
#panel-fama-fill { height: 100%; width: 0; background: var(--tier, var(--gris)); transition: width .5s ease; }
#panel-prestigio-fill { height: 100%; width: 0; background: var(--tier, var(--gris)); transition: width .5s ease; }

/* El AURA del retrato (desbloqueo del tier Brote en adelante). Va por `box-shadow` y no por `border`
   porque el borde cambiaría el tamaño del círculo y descuadraría la barra entera al desbloquearse. */
.panel-retrato.con-aura {
  border-color: var(--tier, var(--linea));
  box-shadow: 0 0 0 2px var(--tier, transparent), 0 0 10px -1px var(--tier, transparent);
}

.panel-acciones { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.panel-monedas { color: var(--amarillo); font-size: 14px; font-variant-numeric: tabular-nums; }
.btn-salir {
  background: transparent; border: 1px solid var(--linea); color: var(--gris);
  font: 700 11px/1 inherit; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 11px; border-radius: 6px; cursor: pointer;
}
.btn-salir:hover { color: var(--hueso); border-color: #4a463c; }

/* ── EL SELECTOR DE MARCA (18-ago) ─────────────────────────────────────────────────────────────────
   «En el dashboard que tú puedas ver arriba la marca personal que tienes seleccionada, y que puedas ir
   variando de una a otra.» Vive en la barra de arriba y no en una pestaña porque no es una pantalla: es
   el RECORTE con el que se leen todas las demás, y un recorte que no está a la vista se olvida.

   ⚠️ El menú va `position: absolute` colgando de `.selector-marca` (que es `relative`) y con un z-index
   POR ENCIMA del de `.panel-nav` (29) y del de la propia barra (30). Con uno menor el desplegable salía
   por debajo de las pestañas: se pintaba entero, no daba ningún error, y la mitad de abajo era
   inalcanzable con el ratón. */
.selector-marca { position: relative; flex: 0 0 auto; }
.btn-marca {
  display: flex; align-items: center; gap: 7px;
  background: var(--sup-1); border: 1px solid var(--linea); color: var(--hueso);
  font: 700 11px/1 inherit; letter-spacing: .09em; text-transform: uppercase;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  max-width: 190px;
}
.btn-marca:hover { color: var(--amarillo); border-color: #4a463c; }
.btn-marca[aria-expanded="true"] { color: var(--amarillo); border-color: var(--amarillo); }
/* el nombre de una marca puede ser largo: se recorta él, nunca la barra */
.btn-marca-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-marca-flecha { color: var(--gris); font-size: 9px; flex: 0 0 auto; }

.marca-menu {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 40;
  min-width: 230px; max-width: 290px;
  background: #0c0c0c; border: 1px solid var(--linea); border-radius: 8px;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .9);
  padding: 6px;
}
.marca-lista { display: grid; gap: 2px; }
.marca-fila {
  display: grid; gap: 2px; text-align: left;
  background: transparent; border: 0; border-radius: 6px;
  padding: 8px 9px; cursor: pointer; color: var(--hueso); font: inherit;
}
.marca-fila:hover { background: var(--sup-1); }
.marca-fila-nombre { font-size: 13px; line-height: 1.2; }
.marca-fila-pista { font-size: 11px; color: var(--gris); line-height: 1.2; }
/* Dónde estás. Va con una barra a la izquierda y NO solo con color de texto: el estado activo tiene que
   leerse sin depender del color (daltonismo, y el amarillo sobre negro ya lo usa el hover). */
.marca-fila.aqui { background: var(--sup-1); box-shadow: inset 2px 0 0 var(--amarillo); }
.marca-fila.aqui .marca-fila-nombre { color: var(--amarillo); }

.marca-nueva {
  display: flex; gap: 6px; margin-top: 6px; padding-top: 7px;
  border-top: 1px solid var(--linea);
}
.marca-nueva input {
  flex: 1 1 auto; min-width: 0;
  background: var(--sup-1); border: 1px solid var(--linea); border-radius: 6px;
  color: var(--hueso); font: 400 13px/1 inherit; padding: 8px 9px;
}
.marca-nueva input:focus { outline: none; border-color: var(--amarillo); }
/* ⚠️ El botón de «Añadir» salía BLANCO, y el motivo es una trampa que se repite: la clase `.btn-mini`
   solo existe bajo `.landing` (`landing.css:140`), así que dentro del panel no la pintaba nadie y el
   navegador ponía su botón de sistema — gris claro, con su borde biselado, sobre un menú negro. No daba
   ningún error y el formulario funcionaba perfectamente; simplemente lo más ruidoso de toda la pantalla
   era el botón menos importante de ella. Se estiliza por su SITIO (`.marca-nueva button`) y no por la
   clase prestada, para que no vuelva a depender de una hoja que ni siquiera se carga aquí. */
.marca-nueva button {
  flex: 0 0 auto;
  background: var(--sup-1); border: 1px solid var(--linea); border-radius: 6px;
  color: var(--hueso); font: 700 11px/1 inherit; letter-spacing: .07em; text-transform: uppercase;
  padding: 8px 11px; cursor: pointer;
}
.marca-nueva button:hover { color: var(--amarillo); border-color: #4a463c; }
.marca-nueva button:active { background: #171717; }
.marca-aviso { margin: 6px 2px 0; font-size: 11px; color: var(--gris); line-height: 1.3; }
.marca-aviso:empty { display: none; }   /* sin aviso no hay hueco muerto bajo el formulario */

/* La línea del creador que dice QUÉ vas a bautizar. Sin ella, llegar al creador desde una marca vacía se
   ve idéntico a crear el primer Nomms de la cuenta, y el bicho aterriza en un ámbito que nadie anunció. */
.crear-ambito { color: var(--amarillo); }

/* ── pestañas ──────────────────────────────────────────────────────────────────────────────────────── */
.panel-nav {
  position: sticky; top: 61px; z-index: 29;
  display: flex; gap: 6px;
  padding: 8px max(14px, calc((100% - 900px) / 2));
  background: rgba(5, 5, 5, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
  /* en móvil no caben seis: se desplazan en horizontal, con la barra de scroll escondida. Sin
     `-webkit-overflow-scrolling` el arrastre en iOS va a tirones. */
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.panel-nav::-webkit-scrollbar { display: none; }

.pestana-panel {
  display: flex; align-items: center; gap: 7px; flex: 0 0 auto;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: var(--gris); font: 700 13px/1 inherit; letter-spacing: .04em;
  padding: 10px 13px; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pestana-panel:hover { color: var(--hueso); background: var(--sup-1); }
.pestana-panel.activa {
  background: var(--sup-2); color: var(--hueso); border-color: var(--linea);
  /* la línea amarilla debajo: la pista de «estás aquí» que el color de fondo solo no da */
  box-shadow: inset 0 -2px 0 var(--amarillo);
}
/* Cerrada, no muerta: se ve apagada pero se puede pulsar, y al pulsarla EXPLICA cómo abrirla. Un botón
   deshabilitado no puede contar nada, y eso es justo lo que hacía falta aquí. */
.pestana-panel.cerrada { color: #55524a; cursor: help; }
.pestana-panel.cerrada:hover { color: var(--gris); background: transparent; }
.pestana-icono { font-size: 15px; line-height: 1; }

/* ── vistas ────────────────────────────────────────────────────────────────────────────────────────── */
.vista { display: none; }
.vista.activa { display: block; }

/* El `main` ya no tiene que reservar sitio para nueve secciones seguidas, así que se aprieta el espacio
   de arriba: con la barra y las pestañas fijas, el hueco extra solo alejaba el contenido. */
main { padding-top: 16px; }

/* ── el aviso de las pestañas cerradas ─────────────────────────────────────────────────────────────── */
.panel-aviso {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 14px);
  z-index: 60; max-width: min(440px, calc(100vw - 32px));
  background: #2b2416; color: var(--amarillo);
  border: 1px solid #4a3d15; border-radius: 10px;
  font-size: 14px; line-height: 1.4; padding: 12px 16px; margin: 0;
  text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s var(--muelle);
}
.panel-aviso.visible { opacity: 1; transform: translate(-50%, 0); }

/* ── de móvil a escritorio ─────────────────────────────────────────────────────────────────────────── */
/* ── BARRA COMPACTA, y el ancho lo dijo un BARRIDO ────────────────────────────────────────────────
   Estas reglas vivían en el corte de 520 px, que es el de la NAVEGACIÓN (texto de las pestañas), y
   nadie había comprobado que fuera también el ancho al que la barra de arriba deja de caber. No lo es:
   barriendo de 520 a 900 px de 20 en 20 con un detector de cajas que se intersecan
   (`herramientas/mira-prestigio.mjs`), la fila se pisa hasta 620 px y el PRIMER ancho limpio es 640.
   Entre 521 y 639 px la cabecera salía rota desde antes de que existiera el 3.er eje: «NIVEL 1»
   dibujado debajo de «BROTE» y la barra de fama cruzando POR DEBAJO del botón «Todo». No lo veía
   ningún número porque ese texto se pinta FUERA de la caja de su padre, que es justo la trampa que
   está explicada quince líneas más abajo: el rect no se mueve, así que no hay intersección que medir.
   Lo caza el ojo en la captura, y ahora también el barrido.

   Así que las reglas que liberan ANCHO se separan de las que gobiernan la NAVEGACIÓN, y cada una se
   corta donde de verdad le toca. */
@media (max-width: 639px) {
  /* ⚠️ EL NOMBRE Y EL NIVEL SE PINTABAN DEBAJO DEL SELECTOR, y esto no es «se ve apretado»: es un texto
     dibujado ENCIMA de un control. Salió en la captura de 430 px del recorrido de punta a punta
     (`13-movil-casa.png`): del nombre solo asomaba «Pr» y del nivel una «N» y un «1», el resto tapado por
     el botón «Todo». Medido a 360 px: `.panel-yo` quedaba en 17 px de caja con 77 px de contenido, y
     `.panel-datos` en 0 px de caja arrancando en x=165, o sea DENTRO del botón (147..219).

     La causa NO es el selector: es que la fila nunca cupo y NADIE la clipaba. `.panel-yo` es
     `flex: 1 1 auto; min-width: 0`, así que encoge hasta nada — pero sin `overflow`, sus hijos siguen
     pintándose fuera. El `text-overflow: ellipsis` de `.panel-nombre` SÍ funcionaba (recortaba a 28 px);
     lo que fallaba es que ese bloque ya recortado se dibujaba 30 px a la derecha de donde acaba su padre.
     Un desbordamiento que se sale por la derecha se ve; uno que se mete debajo de un elemento opaco de
     al lado no lo ve ningún test de layout, solo el ojo en la captura.

     Se arregla por los dos lados, y los dos hacen falta:
       1. Se libera el ancho que faltaba escondiendo el logotipo. Dentro del juego no informa de nada
          (ya sabes dónde estás) y su enlace va a la portada de marketing, que no es destino de alguien
          que está jugando. Lo que se queda es lo que sí dice algo: QUIÉN eres y QUÉ marca estás mirando.
       2. `overflow: hidden` en `.panel-yo` como red permanente. Aunque mañana entre otro control en la
          barra, el nombre se recortará con puntos suspensivos en su sitio en vez de aparecer debajo del
          de al lado. Recortar es honesto; superponer miente. */

  .marca-panel { display: none; }
  .panel-yo { overflow: hidden; }
  /* el bloque de fama se queda con el TIER y suelta la barra: el nombre del tier es el dato (dónde
     estás), la barra es el detalle (cuánto falta), y las dos no caben junto al nivel. */
  .panel-fama { padding-left: 8px; }
  .panel-fama-barra { display: none; }
}
@media (max-width: 520px) {
  /* en pantallas pequeñas el texto de las pestañas se come el ancho: se queda el icono, salvo en la
     activa, que sí dice dónde estás */
  .pestana-panel .pestana-texto { display: none; }
  .pestana-panel.activa .pestana-texto { display: inline; }
  .panel-xp { max-width: 90px; }
  /* El selector se queda, encogido: es lo que dice QUÉ estás mirando, así que esconderlo en móvil sería
     esconder el sujeto de toda la pantalla. Lo que se recorta es el nombre, no el control. */
  .btn-marca { max-width: 104px; padding: 8px; letter-spacing: .04em; }
  /* Y el menú se ancla a la DERECHA del botón: a 360 px, colgando por la izquierda, se salía de la
     pantalla por el otro lado y las filas quedaban cortadas sin barra de scroll que lo delatara. */
  .marca-menu { left: auto; right: 0; min-width: min(230px, calc(100vw - 28px)); }

  .panel-barra { gap: 10px; }
}
/* ── ⚠️ EL 3.er EJE PIDE MÁS SITIO QUE LOS OTROS DOS, y su corte es SUYO ─────────────────────────
   EL 3.er EJE NO CABE POR DEBAJO DE 740 px, y quien lo dijo fue la CAPTURA, no la medida. El control negativo salió
   limpio: con la insignia apagada el nombre pierde exactamente los mismos píxeles (0 px de diferencia
   a 390 y a 1440), o sea que la insignia no le quita sitio al nombre. Y aun así, a 390 px «NIVEL» y
   «BROTE» salían dibujados uno encima de otro («NIVBROTE») y «ECO» no aparecía por ningún lado.
   Medí el elemento equivocado: el nombre ya trunca solo y aguanta, el destrozo estaba en la fila de
   escaleras de al lado, que es justo donde entra la insignia nueva.

   Así que la cabecera estrecha se queda con UNA escalera, la fama, que llevaba aquí desde antes; el
   prestigio se va entero al Tablón, donde a 390 px cabe en UN renglón y además dice lo que la insignia
   nunca podría: cuánto falta, qué desbloquea y qué puntos NO cuentan.

   🔴 EL CORTE NO ES EL DE LA BARRA COMPACTA, y creérmelo me costó dos intentos. Primero lo puse en 520
   (el de la navegación) y luego en 639 (el de la barra), y las dos veces la captura enseñó la fila rota
   justo encima del corte. El barrido con control lo dejó firmado: sin la insignia la cabecera está
   entera en TODOS los anchos, y con ella se rompe en 640, 660, 680, 700 y 720 px. El primer ancho donde
   cabe de verdad es 740. Reutilizar el breakpoint de al lado porque «va de lo mismo» es cómodo y es
   justo lo que produce una franja de 100 px rota que no mira nadie: cada elemento se corta donde SU
   medida diga. */
@media (max-width: 739px) {
  #panel-prestigio { display: none; }
}
@media (min-width: 900px) {
  .panel-barra, .panel-nav { padding-left: max(14px, calc((100% - 1000px) / 2)); padding-right: max(14px, calc((100% - 1000px) / 2)); }
  main { max-width: 1000px; }
  /* la casa y el tablón respiran mejor anchos; el creador ya tiene su propio layout de escritorio */
  #vista-hogar .tarjeta, #vista-misiones .tarjeta, #vista-arena .tarjeta { padding: 24px; }
}