/* Piezas propias de la muestra del panel: el aviso, el aviso flotante, la terminal
   (en el panel es xterm sobre <canvas>), las gráficas y el diálogo de inventario.
   Los colores son los de client.css del tema. */

/* Las clases del panel ponen display a las vistas y anulan el atributo. */
[hidden] { display: none !important; }

.muestra-aviso {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .25rem 1rem; padding: .5rem 1rem;
  background: var(--antorcha); color: var(--tinta);
  font: 500 .85rem/1.35 var(--fuente); text-align: center;
}
.muestra-aviso a { color: var(--tinta); font-weight: 700; text-decoration: underline; }

.muestra-toast {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  z-index: 60; max-width: calc(100vw - 2rem);
  padding: .65rem 1rem; border-radius: .5rem;
  background: var(--superficie-2); border: 1px solid var(--linea); color: var(--luna);
  font: 500 .875rem/1.4 var(--fuente);
}

/* Terminal */
.demo-terminal {
  height: 100%; min-height: 22rem; max-height: 32rem; overflow-y: auto;
  padding: .5rem .75rem; background: var(--tinta); color: var(--luna);
  font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.demo-terminal .t-aviso { color: var(--antorcha); }
.demo-terminal .t-panel { color: #E5C07B; }
.demo-terminal .t-ok { color: var(--pasto-claro); }
.demo-terminal .t-gris { color: var(--niebla); }

/* Gráficas */
.demo-grafica { display: block; width: 100%; height: 178px; }
.demo-grafica path.linea { fill: none; stroke: var(--pasto); stroke-width: 2; vector-effect: non-scaling-stroke; }
.demo-grafica path.area { fill: var(--pasto); fill-opacity: .12; }
.demo-grafica path.linea.b { stroke: var(--antorcha); }
.demo-grafica path.area.b { fill: var(--antorcha); }
.demo-grafica line { stroke: var(--linea); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Diálogo de inventario */
.muestra-dialogo { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 4rem 1rem 2rem; overflow-y: auto; }
.muestra-dialogo[hidden] { display: none; }
.muestra-dialogo-fondo { position: fixed; inset: 0; background: rgba(10, 11, 22, .75); }
.muestra-dialogo-caja {
  position: relative; width: 100%; max-width: 32rem; padding: 1.5rem;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: .5rem;
  color: var(--luna); font-family: var(--fuente);
}
.muestra-dialogo-caja h2 { font-size: 1.25rem; font-weight: 600; margin: 0 2rem 0 0; }
.muestra-dialogo-desc { color: var(--niebla); font-size: .875rem; margin: .25rem 0 1rem; }
.muestra-dialogo-x { position: absolute; top: .75rem; right: .9rem; background: none; border: 0; color: var(--niebla); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.muestra-dialogo-x:hover { color: var(--luna); }
.inv-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; font-size: .75rem; color: var(--niebla); }
.inv-datos span { display: block; color: var(--luna); font-size: .875rem; }
.inv-pos { font-size: .75rem; color: var(--niebla); margin-top: .5rem; }
.inv-seccion { margin-top: 1rem; }
.inv-seccion > p { font-size: .75rem; text-transform: uppercase; color: var(--niebla); margin-bottom: .5rem; }
.inv-rejilla { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .25rem; }
.inv-hueco { position: relative; height: 3rem; border-radius: .25rem; border: 1px solid var(--linea); background: var(--noche); display: flex; align-items: center; justify-content: center; }
.inv-hueco.lleno { background: var(--superficie-2); }
.inv-hueco.encantado { border-color: #C084FC; }
.inv-hueco.vacio-hueco { border: 0; background: none; }
.inv-icono { width: 32px; height: 32px; background-image: url("minecraft-items.be57d7c9.png"); background-repeat: no-repeat; background-size: 1280px auto; }
.inv-cantidad { position: absolute; bottom: 0; right: .25rem; font-size: .75rem; font-weight: 700; color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, .9); }
@media (max-width: 480px) {
  .inv-datos { grid-template-columns: repeat(2, 1fr); }
  .inv-hueco { height: 2.25rem; }
  .inv-icono { transform: scale(.75); }
  .muestra-dialogo-caja { padding: 1.25rem 1rem; }
}

/* Menú del servidor en el móvil: el panel lo pinta dentro de la barra al abrirla. */
.demo-menu-movil { padding: 0 .5rem .75rem; }