@font-face {
  font-family: 'BrumaPixel';
  src: url('/brumapixel.otf') format('opentype');
  font-display: swap;
}

:root {
  --gui: #c6c6c6;
  --gui-luz: #ffffff;
  --gui-sombra: #555555;
  --titulo: #404040;
  --texto: #1d1d1d;
  --suave: #4f4f4f;
  --lila: #a99cff;
  --hielo: #bfd7ff;
  --menta: #8fe3c2;
  --rojo: #ff5555;
  --verde: #55ff55;
  --oro: #ffd36e;
  --pixel: 'BrumaPixel', ui-monospace, monospace;
  --cuerpo: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --esquinas: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
}

* { box-sizing: border-box; }

html { background: #141129; }

body {
  margin: 0;
  min-height: 100vh;
  color: #f2f0ff;
  font: 15px/1.5 var(--cuerpo);
  background: #141129 url('/img/fondo.png') center / cover fixed no-repeat;
  image-rendering: pixelated;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 8, 25, 0.25), rgba(10, 8, 25, 0.55));
  pointer-events: none;
  z-index: -1;
}

img { image-rendering: pixelated; }

[hidden] { display: none !important; }

.marca, h1, h2, h3, .boton, .titulo-ventana, .cifra b, .menu a {
  font-family: var(--pixel);
  font-weight: normal;
  letter-spacing: 0;
}

/* ── Ventana gris del inventario ── */
.ventana {
  background: var(--gui);
  color: var(--texto);
  border: 2px solid #000;
  box-shadow: inset 4px 4px 0 var(--gui-luz), inset -4px -4px 0 var(--gui-sombra);
  clip-path: var(--esquinas);
  padding: 20px 22px;
  min-width: 0;
}

.titulo-ventana {
  margin: 0 0 12px;
  color: var(--titulo);
  font-size: 16px;
  line-height: 1.4;
}

.titulo-ventana img { width: 32px; height: 32px; vertical-align: -9px; margin-right: 8px; }

.ventana p { margin: 6px 0; }

.ventana a { color: #2f3a9e; }

.nota { color: var(--suave); font-size: 13px; }

/* ── Botones del juego ── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 16px 8px;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  text-shadow: 2px 2px 0 #3f3f3f;
  background: #6f6f6f;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 #a8a8a8, inset -2px -4px 0 #4b4b4b;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.boton:hover, .boton:focus-visible {
  color: #ffffa0;
  text-shadow: 2px 2px 0 #3f3f28;
  background: #7e88bf;
  box-shadow: inset 2px 2px 0 #bcc4ff, inset -2px -4px 0 #525a8f;
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.boton:active { box-shadow: inset 2px 4px 0 #4b4b4b, inset -2px -2px 0 #a8a8a8; }

.boton:disabled {
  color: #a0a0a0;
  text-shadow: none;
  background: #2e2e2e;
  box-shadow: inset 2px 2px 0 #3d3d3d, inset -2px -4px 0 #202020;
  outline: none;
  cursor: not-allowed;
}

.boton.grande { min-height: 48px; font-size: 18px; padding: 8px 28px 10px; }
.boton.pequeno { min-height: 32px; font-size: 14px; padding: 4px 12px 6px; }
.boton img { width: 24px; height: 24px; }

/* Interruptor como las opciones del juego: «Postulaciones: SÍ» */
.interruptor b { color: var(--rojo); font-weight: normal; }
.interruptor[aria-pressed='true'] b { color: var(--verde); }

/* ── Campos ── */
.campo, select.campo {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  color: #fff;
  font: 15px var(--cuerpo);
  background: #000;
  border: 2px solid #a0a0a0;
  border-radius: 0;
}

.campo:focus { outline: none; border-color: #fff; }
select.campo { appearance: auto; }
select.campo[multiple] { min-height: 160px; }

label.etiqueta { display: block; margin: 12px 0 4px; color: var(--titulo); font-weight: 600; font-size: 14px; }

/* ── Estructura ── */
.app { display: grid; grid-template-columns: 230px minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; }

.barra {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: rgba(12, 10, 28, 0.82);
  border-bottom: 2px solid #000;
  box-shadow: 0 2px 0 #3a3270;
}

.logo { display: flex; align-items: center; gap: 10px; color: var(--lila); text-decoration: none; font-size: 20px; text-shadow: 2px 2px 0 #2a2552; }
.logo img { width: 32px; height: 32px; }

.usuario { display: flex; align-items: center; gap: 10px; min-width: 0; }
.usuario span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30vw; }
.avatar { width: 32px; height: 32px; border: 2px solid #000; }

.menu { display: flex; flex-direction: column; gap: 8px; padding: 20px 16px; }

.menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 10px;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  text-shadow: 2px 2px 0 #3f3f3f;
  background: #6f6f6f;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 #a8a8a8, inset -2px -4px 0 #4b4b4b;
}

.menu a img { width: 32px; height: 32px; }
.menu a:hover { background: #7e88bf; box-shadow: inset 2px 2px 0 #bcc4ff, inset -2px -4px 0 #525a8f; color: #ffffa0; }
.menu a[aria-current='page'] { background: #4b4a6e; box-shadow: inset 2px 2px 0 #8f86c9, inset -2px -4px 0 #2c2657; color: var(--oro); }

.contenido { padding: 20px 24px 60px; display: grid; gap: 20px; align-content: start; min-width: 0; outline: none; }

.cuadricula { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }

.cifra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #8b8b8b;
  border: 2px solid;
  border-color: #373737 #fff #fff #373737;
  min-width: 0;
}

.cifra img { width: 32px; height: 32px; flex: none; }
.cifra b { display: block; font-size: 20px; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; }
.cifra span { color: #1d1d1d; font-size: 13px; }

/* ── Listas ── */
.tabla-caja { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--titulo); font-weight: 700; padding: 6px 8px; border-bottom: 2px solid #8b8b8b; white-space: nowrap; }
td { padding: 6px 8px; border-bottom: 1px solid #ababab; vertical-align: top; }
tr:nth-child(even) td { background: rgba(0, 0, 0, 0.04); }
.vacio { color: var(--suave); font-style: italic; padding: 8px 0; }

.chip {
  display: inline-block;
  padding: 1px 8px 2px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #6f6f6f;
  border: 2px solid #000;
  white-space: nowrap;
}
.chip.ok { background: #2e8b3d; }
.chip.mal { background: #a83232; }
.chip.aviso { background: #a8780c; }
.chip.lila { background: #6e5fd6; }

.estado { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.punto { width: 12px; height: 12px; border: 2px solid #000; background: #6f6f6f; flex: none; }
.punto.ok { background: var(--verde); }
.punto.mal { background: var(--rojo); }

/* ── Tipos de ticket ── */
.tipos { display: grid; gap: 10px; }

.tipo {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: #b4b4b4;
  border: 2px solid;
  border-color: #fff #555 #555 #fff;
}

.tipo.destacado { background: #d9cf9e; border-color: #fff4c4 #8a7a32 #8a7a32 #fff4c4; }
.tipo img { width: 32px; height: 32px; }
.tipo h3 { margin: 0; font-size: 15px; color: var(--titulo); }
.tipo p { margin: 2px 0 0; font-size: 13px; color: var(--suave); }
.tipo .controles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.tipo select.campo { width: auto; min-width: 210px; }

.fila-ajustes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px 20px; align-items: end; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.codigo {
  display: block;
  padding: 10px;
  color: #e8e6ff;
  font: 13px/1.5 ui-monospace, Consolas, monospace;
  background: #000;
  border: 2px solid #a0a0a0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── Pantalla de entrada ── */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.entrada-caja { width: min(420px, 100%); text-align: center; }
.entrada-caja .marca { color: var(--titulo); font-size: 22px; margin: 8px 0; }
.entrada-icono { width: 64px; height: 64px; }
.entrada .boton { margin: 16px 0 8px; }
.pie { color: var(--suave); font-size: 13px; }
.error { color: #8e1f1f; font-weight: 600; }

/* ── Avisos tipo «¡Logro conseguido!» ── */
.avisos { position: fixed; top: 14px; right: 14px; display: grid; gap: 10px; z-index: 10; width: min(340px, calc(100vw - 28px)); }

.toast {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  color: #fff;
  background: #232030;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 #5e5a73, inset -2px -2px 0 #38354a;
  clip-path: var(--esquinas);
  animation: entra 0.35s ease-out;
}

.toast img { width: 32px; height: 32px; }
.toast b { display: block; font-family: var(--pixel); font-weight: normal; color: #ffff55; font-size: 15px; }
.toast span { font-size: 14px; overflow-wrap: anywhere; }
.toast.mal b { color: #ff7a7a; }

@keyframes entra { from { transform: translateX(110%); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ── Móvil ── */
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .menu { flex-direction: row; overflow-x: auto; padding: 12px 16px; gap: 8px; scrollbar-width: thin; }
  .menu a { flex: none; font-size: 14px; padding: 6px 10px 8px; }
  .menu a img { width: 24px; height: 24px; }
  .contenido { padding: 12px 16px 48px; }
  .barra { padding: 10px 16px; }
  .logo span { font-size: 16px; }
  .ventana { padding: 16px; }
  .tipo { grid-template-columns: 32px minmax(0, 1fr); }
  .tipo .controles { grid-column: 1 / -1; justify-content: flex-start; }
  .tipo select.campo { min-width: 0; width: 100%; }
}