/* =============================================================================
   Panel RarxNos

   Mismo lenguaje visual que docs.exileworld.io: fondo casi negro azulado,
   superficies elevadas con esquinas redondeadas, bordes finísimos y tres
   acentos — dorado, celeste y violeta. Inter en todo, con la base en 14px como
   allí, para que el conjunto no se sienta gigante.

   Los valores salen de site/src/css/custom.css y de los paneles CraftingPanel /
   DropLookup de la propia doc, no de ojo.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg:        #050913;
  --superficie:#0b1220;
  --superficie-2: #101a2c;
  --borde:     rgba(240, 244, 255, .1);
  --texto:     #f0f4ff;
  --texto-dim: #93a0bd;

  --dorado:    #ffd166;
  --azul:      #5ec4ff;
  --violeta:   #b794ff;
  --rojo:      #f05a5a;
  --verde:     #47cf73;
}

* { box-sizing: border-box; }

/* `display: flex` de una clase le gana al `display: none` que el navegador da
   a [hidden], asi que sin esto el menu y el pie salen en la pantalla de entrar. */
[hidden] { display: none !important; }

html {
  font-size: 14px;
  /* Reservar siempre el hueco de la barra de scroll: sin esto, al desplegar
     una lista la pagina salta unos pixeles a la izquierda. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(94, 196, 255, .08), transparent),
              var(--bg);
  color: var(--texto);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: .9rem;
  line-height: 1.55;
}

input, select, button, textarea { font-family: inherit; }

/* La barra de scroll, del mismo juego de colores que el resto. */
* { scrollbar-width: thin; scrollbar-color: var(--dorado) rgba(255, 255, 255, .05); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); }
*::-webkit-scrollbar-thumb {
  background-image: linear-gradient(180deg, var(--dorado), var(--azul));
  border-radius: 999px;
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background-image: linear-gradient(180deg, var(--azul), var(--violeta)); }

/* Las imagenes entran suaves en vez de aparecer de golpe. */
@keyframes aparecer { from { opacity: 0 } to { opacity: 1 } }
img { animation: aparecer .25s ease-out; }

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

/* ---- Superficies ---------------------------------------------------------- */

.panel {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 16px;
}

.ventana {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 16px;
  overflow: hidden;
}

.barra {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--borde);
  background: rgba(255, 255, 255, .012);
}

.barra h1 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; }
.barra .sub { font-size: .8rem; color: var(--texto-dim); }

/* La chapa de servidor. Es el dato que mas caro sale confundir. */
.chapa {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.chapa-test { background: rgba(71, 207, 115, .1);  border: 1px solid rgba(71, 207, 115, .4);  color: var(--verde); }
.chapa-prod { background: rgba(240, 90, 90, .12);  border: 1px solid rgba(240, 90, 90, .5);   color: var(--rojo); }

/* ---- Controles ------------------------------------------------------------ */

.campo {
  background: rgba(94, 196, 255, .06);
  border: 1px solid rgba(94, 196, 255, .25);
  border-radius: 10px;
  color: var(--texto);
  padding: 7px 12px;
  font-size: .8rem;
}
.campo::placeholder { color: var(--texto-dim); }
.campo:focus { outline: none; border-color: var(--azul); }
.campo:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

.boton {
  background: rgba(94, 196, 255, .06);
  border: 1px solid rgba(94, 196, 255, .35);
  border-radius: 12px;
  color: var(--texto);
  font-weight: 700;
  letter-spacing: .05em;
  font-size: .8rem;
  padding: 9px 18px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.boton:hover { background: rgba(94, 196, 255, .12); }
.boton:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.boton[disabled] { opacity: .45; cursor: default; }

.boton-guardar {
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  font-size: .82rem;
  padding: 10px 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow .15s ease, background .15s ease;
}
.boton-test {
  background: rgba(255, 209, 102, .14);
  border: 1px solid rgba(255, 209, 102, .55);
  color: var(--dorado);
}
.boton-test:hover { background: rgba(255, 209, 102, .22); box-shadow: 0 0 14px rgba(255, 209, 102, .25); }
.boton-prod {
  background: rgba(240, 90, 90, .16);
  border: 1px solid rgba(240, 90, 90, .6);
  color: #ff9b9b;
}
.boton-prod:hover { background: rgba(240, 90, 90, .26); box-shadow: 0 0 14px rgba(240, 90, 90, .3); }

.boton-quitar {
  width: 28px; height: 28px; line-height: 1;
  background: rgba(240, 90, 90, .08);
  border: 1px solid rgba(240, 90, 90, .35);
  border-radius: 8px;
  color: var(--rojo);
  font-size: .9rem; font-weight: 700; cursor: pointer;
}
.boton-quitar:hover { background: rgba(240, 90, 90, .18); }

.boton-anyadir {
  width: 100%;
  padding: 11px;
  background: transparent;
  border: 1px dashed var(--borde);
  border-radius: 12px;
  color: var(--texto-dim);
  cursor: pointer;
  font-size: .8rem;
}
.boton-anyadir:hover { color: var(--dorado); border-color: rgba(255, 209, 102, .4); }

/* ---- La casilla de objeto -------------------------------------------------- */

.slot {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 6px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.slot:hover { border-color: rgba(255, 209, 102, .4); }
/* Los iconos son de 32x32 de verdad, sacados del cliente: sin suavizar. */
.slot img { width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; }

/* ---- Estructura ------------------------------------------------------------ */

.marco { display: flex; gap: 16px; height: 100vh; padding: 16px; }

.menu { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.menu-lista { flex-grow: 1; padding: 8px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }

.opcion {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--texto-dim);
  font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.opcion:hover { background: rgba(255, 209, 102, .06); color: var(--texto); }
.opcion[aria-current="true"] {
  background: rgba(255, 209, 102, .1);
  border-color: rgba(255, 209, 102, .3);
  color: var(--texto);
}
.opcion .cuenta { margin-left: auto; font-size: .7rem; font-weight: 500; color: var(--texto-dim); }
.opcion .abajo { display: block; font-size: .7rem; font-weight: 400; color: var(--texto-dim); }

.cuerpo { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; gap: 12px; }
.lienzo { flex-grow: 1; padding: 18px; overflow-y: auto; min-height: 0; }

.rotulo {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--texto-dim);
}

/* ---- Filas de datos -------------------------------------------------------- */

.cabeceras, .fila { display: grid; gap: 14px; align-items: center; }

.cabeceras { padding: 0 14px 10px; }
.cabeceras span { font-size: .7rem; font-weight: 700; letter-spacing: .12em; color: var(--texto-dim); }

.fila {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 10px 14px;
  transition: border-color .15s ease;
}
.fila:hover { border-color: rgba(255, 209, 102, .25); }
.filas { display: flex; flex-direction: column; gap: 8px; }

.objeto { display: flex; align-items: center; gap: 12px; min-width: 0; }
.objeto .nombre { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.objeto .vnum { font-size: .7rem; color: var(--texto-dim); font-variant-numeric: tabular-nums; }

.legible { font-size: .78rem; color: var(--dorado); margin-top: 3px; font-variant-numeric: tabular-nums; }

input[type="range"] { width: 100%; accent-color: var(--dorado); }
input[type="number"] { font-variant-numeric: tabular-nums; }

/* ---- El pie ---------------------------------------------------------------- */

.pie { flex-shrink: 0; padding: 14px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pie .cambios { flex-grow: 1; min-width: 200px; }
.pie .lista-cambios { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; max-height: 84px; overflow-y: auto; }
.pie .lista-cambios div { font-size: .8rem; color: var(--texto-dim); }
.pie .lista-cambios b { color: var(--dorado); font-weight: 700; }

.destino {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px;
  border-radius: 12px;
  font-size: .78rem;
  color: var(--texto-dim);
}

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

.aviso {
  padding: 12px 16px;
  border-radius: 12px;
  border-left: 3px solid;
  font-size: .82rem;
  margin-bottom: 14px;
}
.aviso-malo  { background: rgba(240, 90, 90, .08);  border-color: var(--rojo);    color: #ffc9c9; }
.aviso-bueno { background: rgba(71, 207, 115, .08); border-color: var(--verde);   color: #bff5d2; }
.aviso-ojo   { background: rgba(183, 148, 255, .08);border-color: var(--violeta); color: #e2d5ff; }

.vacio { padding: 48px; text-align: center; color: var(--texto-dim); font-size: .85rem; }

/* ---- Entrar ---------------------------------------------------------------- */

.entrar { margin: 6vh auto; width: min(360px, 100%); }
.entrar label { display: block; margin-bottom: 14px; font-size: .78rem; color: var(--texto-dim); }
.entrar .campo { width: 100%; margin-top: 5px; }

/* Pantallas estrechas: el menu pasa arriba en vez de comerse el ancho. */
@media (max-width: 900px) {
  .marco { flex-direction: column; height: auto; }
  .menu { width: auto; }
  .menu-lista { flex-direction: row; flex-wrap: wrap; }
  .opcion { width: auto; }
  .opcion .abajo { display: none; }
}

/* ---- Chips ------------------------------------------------------------------
   Las listas horizontales (actos, recetas) no son un menu lateral: son fichas
   que se eligen. Misma familia que los chips de la doc — pildora, borde fino y
   el dorado reservado para la que esta puesta. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(94, 196, 255, .05);
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--texto-dim);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover { background: rgba(255, 209, 102, .08); color: var(--texto); }
.chip:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.chip[aria-current="true"] {
  background: rgba(255, 209, 102, .12);
  border-color: rgba(255, 209, 102, .55);
  color: var(--dorado);
  box-shadow: 0 0 12px rgba(255, 209, 102, .18);
}
.chip .cuenta {
  font-size: .68rem;
  font-weight: 500;
  color: var(--texto-dim);
  font-variant-numeric: tabular-nums;
}

/* ---- Piezas de las pantallas ------------------------------------------------ */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* El menu va por grupos: "En marcha", "Contenido", "Economia", "Sistema". */
.grupo { padding: 14px 12px 6px; }
.grupo:first-child { padding-top: 4px; }

a.opcion { text-decoration: none; }

.titulo-ficha { margin: 0 0 16px; font-size: 1.15rem; font-weight: 700; }

/* Rejilla de datos sueltos: la unidad de las fichas. */
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.dato {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 12px 14px;
}
.dato-valor { margin-top: 5px; font-size: .92rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Formularios de alta: etiqueta arriba, campo debajo, en columnas que caben. */
.formulario { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.formulario label { display: block; font-size: .78rem; color: var(--texto-dim); }
.formulario .campo { width: 100%; margin-top: 5px; }

label > .campo { margin-top: 5px; }

/* Una fila que ademas es boton (las listas en las que se pincha). */
button.fila { text-align: left; font: inherit; color: inherit; cursor: pointer; }

.receta { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.receta .flecha { font-size: 1.6rem; color: var(--dorado); align-self: center; }
.caja-resultado {
  background: var(--superficie-2);
  border: 1px solid rgba(71, 207, 115, .4);
  border-radius: 12px;
  padding: 14px;
}

.rejilla-slots { display: flex; flex-wrap: wrap; gap: 8px; }

.minimapa {
  max-width: 100%;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie-2);
  margin-bottom: 16px;
}

/* El editor de ficheros y los volcados en crudo. */
.editor {
  width: 100%;
  min-height: 420px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  resize: vertical;
}
.crudo {
  margin-top: 8px;
  padding: 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 12px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem;
  color: var(--texto-dim);
}

.alta > summary { list-style: none; }
.alta > summary::-webkit-details-marker { display: none; }

/* ---- Pestañas de tipo -------------------------------------------------------
   No son un menú: son tres cosas distintas (acto / mapa / monstruo) y la
   diferencia importa, así que cada una lleva su color y explica qué significa
   debajo del nombre. */

.pestanyas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.pestanya {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 12px 16px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.pestanya:hover { background: rgba(255, 255, 255, .03); }
.pestanya:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.pestanya-nombre { font-size: .88rem; font-weight: 700; color: var(--texto-dim); }
.pestanya-pista { font-size: .72rem; color: var(--texto-dim); opacity: .75; }

/* Un color por tipo: el que está puesto se reconoce sin leer. */
.pestanya-acto[aria-current="true"]     { border-left-color: var(--dorado);  background: rgba(255, 209, 102, .09); }
.pestanya-acto[aria-current="true"] .pestanya-nombre { color: var(--dorado); }
.pestanya-mapa[aria-current="true"]     { border-left-color: var(--azul);    background: rgba(94, 196, 255, .09); }
.pestanya-mapa[aria-current="true"] .pestanya-nombre { color: var(--azul); }
.pestanya-monstruo[aria-current="true"] { border-left-color: var(--violeta); background: rgba(183, 148, 255, .09); }
.pestanya-monstruo[aria-current="true"] .pestanya-nombre { color: var(--violeta); }

/* ---- Barra de una lista: título, buscador y el ALTA (arriba, no abajo) ------ */

.barra-lista {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin: 22px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borde);
}
.barra-lista-izq { flex-grow: 1; min-width: 200px; }
.barra-lista-titulo { font-size: 1rem; font-weight: 700; }
.barra-lista-cuenta { margin-top: 3px; font-size: .78rem; color: var(--texto-dim); }

.panel-alta {
  background: var(--superficie-2);
  border: 1px solid rgba(255, 209, 102, .3);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
}

.campo-con-icono { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.campo-con-icono .campo { flex-grow: 1; margin-top: 0; }

.interruptor {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
  color: var(--texto-dim);
  cursor: pointer;
  white-space: nowrap;
}
.interruptor input { accent-color: var(--dorado); width: 15px; height: 15px; }

.nota-lista { margin-top: 10px; font-size: .75rem; color: var(--texto-dim); }

/* ---- Filas de drop ---------------------------------------------------------- */

.cabeceras-drop, .fila-drop { grid-template-columns: minmax(0, 1fr) 96px minmax(220px, 300px) 40px; }

.fila-drop { padding: 12px 16px; align-items: center; }

.mini-campo { display: flex; flex-direction: column; gap: 3px; }
.mini-campo > span { font-size: .68rem; color: var(--texto-dim); letter-spacing: .08em; }

.columna-chance { display: flex; flex-direction: column; gap: 6px; }
.chance-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chance-pie .legible { margin: 0; flex-grow: 1; }
.porcentaje { font-size: .72rem; color: var(--texto-dim); font-variant-numeric: tabular-nums; }
.campo-mini { width: 76px; padding: 4px 8px; font-size: .74rem; }

/* Más aire entre bloques: el panel se quejaba de ir apretado. */
.lienzo { padding: 22px 24px 28px; }
.filas { gap: 10px; }
.fila { padding: 12px 16px; }
.cabeceras { padding: 0 16px 10px; }
.datos { gap: 14px; }

.chips { gap: 8px; margin-bottom: 4px; }

@media (max-width: 1100px) {
  .cabeceras-drop { display: none; }
  .fila-drop { grid-template-columns: minmax(0, 1fr) 40px; row-gap: 12px; }
  .fila-drop .mini-campo, .fila-drop .columna-chance { grid-column: 1 / -1; }
}

/* ---- Dos columnas: dónde cae / qué cae --------------------------------------
   Con cientos de mapas y monstruos, una fila de fichas no cabe: la lista va a
   la izquierda con su propio scroll y el detalle a la derecha. */

.dos-columnas {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.columna-lista {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 14px;
  overflow: hidden;
  position: sticky;
  top: 0;
}

.columna-lista-cabecera {
  padding: 14px;
  border-bottom: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lista-destinos {
  max-height: 62vh;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.destino-op {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 11px;
  background: transparent;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  border-radius: 8px;
  color: var(--texto-dim);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.destino-op:hover { background: rgba(255, 255, 255, .04); color: var(--texto); }
.destino-nombre { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.destino-cuenta { font-size: .7rem; color: var(--texto-dim); font-variant-numeric: tabular-nums; }

/* El color dice de qué tipo es la lista, igual que su pestaña. */
.destino-mapa[aria-current="true"] {
  background: rgba(94, 196, 255, .12); border-left-color: var(--azul); color: var(--azul);
}
.destino-monstruo[aria-current="true"] {
  background: rgba(183, 148, 255, .12); border-left-color: var(--violeta); color: var(--violeta);
}

.detalle-destino { min-width: 0; }
.detalle-destino .barra-lista { margin-top: 0; }

@media (max-width: 1000px) {
  .dos-columnas { grid-template-columns: minmax(0, 1fr); }
  .columna-lista { position: static; }
  .lista-destinos { max-height: 280px; }
}

/* El menú lateral tiene que poder desplazarse: con 23 secciones no cabe en
   pantallas bajas y los grupos de abajo quedaban fuera sin aviso. */
.menu { min-height: 0; }
.menu-lista { overflow-y: auto; min-height: 0; }

/* El menú, más denso: con 23 secciones y sus grupos no cabía en una pantalla
   de portátil y los de abajo quedaban fuera sin que se notase. La explicación
   de cada una pasa al title, que sigue estando al pasar el ratón. */
.opcion { padding: 7px 12px; font-size: .8rem; }
.opcion .abajo { display: none; }
.grupo { padding: 12px 12px 4px; font-size: .66rem; }
.menu-lista { gap: 1px; }

.destino-receta[aria-current="true"],
.destino-acto[aria-current="true"] {
  background: rgba(255, 209, 102, .12); border-left-color: var(--dorado); color: var(--dorado);
}

/* La línea de "añadir un ingrediente": dos campos estrechos y el botón. */
.anyadir-linea { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }

/* Cada receta en su propia tarjeta: en un NPC con quince, sin separarlas no se
   sabe dónde acaba una y empieza la otra. */
.tarjeta-receta {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.tarjeta-receta .fila { background: var(--superficie); }
.tarjeta-receta-cabecera {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--borde);
}

/* Las recetas sin dueño son un fallo, no una categoría más. */
.pestanya-roto[aria-current="true"] {
  border-left-color: var(--rojo);
  background: rgba(240, 90, 90, .09);
}
.pestanya-roto[aria-current="true"] .pestanya-nombre { color: var(--rojo); }

select.campo[size] { padding: 6px; }
select.campo[size] option { padding: 4px 6px; }

/* Cada rareza de la ruleta con su color, de común a legendario: el número solo
   no dice si un premio es el bueno o el de relleno. */
.tier-0 { border-left: 3px solid #93a0bd; }
.tier-1 { border-left: 3px solid var(--verde); }
.tier-2 { border-left: 3px solid var(--azul); }
.tier-3 { border-left: 3px solid var(--violeta); }
.tier-4 { border-left: 3px solid var(--dorado); }
.tier-5 { border-left: 3px solid var(--rojo); }

/* ---- El minimapa con lo que hay encima -------------------------------------- */

.mapa-caja {
  position: relative;
  max-width: 100%;
  margin-bottom: 20px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  overflow: hidden;
  background: #0a0f1a;
}

/* El minimapa viene a 128x128 px. Estirarlo suavizado lo deja en una mancha;
   sin suavizar queda a bloques, que es como se ve un minimapa de verdad. */
.mapa-fondo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  image-rendering: pixelated;
}

/* Cuando no hay minimapa (la API devuelve un PNG de 1x1), una cuadrícula: los
   puntos siguen cayendo donde deben y se ve la forma de lo que hay puesto. */
.mapa-rejilla {
  background-color: #0a0f1a;
  background-image:
    linear-gradient(rgba(240, 244, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 244, 255, .07) 1px, transparent 1px);
  background-size: 5% 5%, 5% 5%;
}

.mapa-punto {
  position: absolute;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  border: 1.5px solid rgba(5, 9, 19, .85);
  box-shadow: 0 0 6px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.mapa-sin-medidas { padding: 20px; font-size: .8rem; color: var(--texto-dim); }

.punto-leyenda {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: middle;
}

.fila-mapa { grid-template-columns: minmax(0, 1fr) 90px 90px 40px; }

@media (max-width: 800px) {
  .fila-mapa { grid-template-columns: minmax(0, 1fr) 70px 70px 40px; }
}

/* ---- La ficha que se abre al pulsar algo del mapa ---------------------------- */

.mapa-punto {
  border: 1.5px solid rgba(5, 9, 19, .85);
  padding: 0;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mapa-punto:hover { transform: scale(1.5); z-index: 2; }
.mapa-punto:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; z-index: 2; }

/* La fila entera abre la ficha, pero sigue siendo texto: nada de botón azul. */
.abrir-ficha {
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  min-width: 0;
}
.abrir-ficha:hover { color: var(--dorado); }
.abrir-ficha:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 6px; }

.ficha {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  z-index: 40;
  background: var(--superficie);
  border-left: 1px solid var(--borde);
  box-shadow: -18px 0 40px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  animation: entraFicha .18s ease-out;
}
@keyframes entraFicha { from { transform: translateX(24px); opacity: 0 } to { transform: none; opacity: 1 } }

.ficha-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--borde);
}
.ficha-titulo { font-size: 1.05rem; font-weight: 700; margin-top: 4px; }
.ficha-cuerpo { padding: 18px; overflow-y: auto; flex-grow: 1; }
.ficha-cuerpo .datos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

@media (max-width: 700px) {
  .ficha { width: 100%; border-left: 0; }
}