/* ==========================================================================
   LO QUE NO EXISTE — css/no-encontrado.css
   La página 404 (404.html) y el aviso de que un juego o una cuenta no existen
   (js/no-encontrado.js, en juego.html y usuario.html): la misma cara para lo
   que no existe (specs/019-lo-que-no-existe). Los colores salen de las
   variables de css/inicio.css, así que siguen al tema y a la paleta.
   ========================================================================== */

.mr-no-encontrado {
  box-sizing: border-box;
  width: 100%;
  max-width: 620px;
  margin: 32px auto;
  padding: 40px 28px 36px;
  text-align: center;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text-main);
}

/* hidden, por encima de cualquier display que le dé otra hoja. */
.mr-no-encontrado[hidden] {
  display: none;
}

.mr-no-encontrado-logo {
  display: inline-block;
  margin-bottom: 6px;
}

.mr-no-encontrado-logo img {
  display: block;
  width: 180px;
  max-width: 60vw;
  height: auto;
}

.mr-no-encontrado-codigo {
  margin: 4px 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(64px, 18vw, 104px);
  line-height: 1;
  letter-spacing: 4px;
  color: var(--gold);
}

.mr-no-encontrado-titulo {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 5.5vw, 30px);
  line-height: 1.25;
  color: var(--text-main);
}

.mr-no-encontrado-texto {
  max-width: 46ch;
  margin: 0 auto 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.mr-no-encontrado-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Los botones son enlaces, y las hojas de la web les pisan el color a los
   enlaces: .mr-root a les pone "inherit" (css/inicio.css), y en el tema claro
   css/theme-canonical.css los pinta de morado con una regla de seis clases,
   la de los puntos 94 y 96 de la auditoría. Por eso cada color va puesto
   aquí, y en el tema claro con !important: esa regla no se iguala sin él. */
.mr-no-encontrado-acciones a.mr-no-encontrado-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 46px;
  padding: 12px 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-panel-alt);
  color: var(--text-main);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.mr-no-encontrado-acciones a.mr-no-encontrado-boton:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* El principal, dorado como .boton-primario, sin el tono más oscuro del
   degradado: con él, el texto bajaba de 4,5:1 en una esquina. */
.mr-no-encontrado-acciones a.mr-no-encontrado-principal {
  border-color: transparent;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--text-on-accent);
}

.mr-no-encontrado-acciones a.mr-no-encontrado-principal:hover {
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(240, 180, 41, 0.35);
}

/* Tema claro: los botones del resto de la web en ese tema (theme-canonical),
   el principal amarillo con el texto oscuro y el otro con el azul, sobre
   blanco para que el azul pase de 4,5:1. */
html[data-tema="claro"] .mr-no-encontrado-acciones a.mr-no-encontrado-boton {
  border-color: var(--mj-blue-light, #4aa3df);
  background: #fff;
  color: var(--mj-blue, #167ac6) !important;
}

html[data-tema="claro"] .mr-no-encontrado-acciones a.mr-no-encontrado-boton:hover {
  background: var(--mj-blue-hover, #eaf7ff);
}

html[data-tema="claro"] .mr-no-encontrado-acciones a.mr-no-encontrado-principal {
  border-color: var(--mj-yellow-border, #e6a800);
  background: var(--mj-yellow, #ffcc00);
  color: #222 !important;
}

html[data-tema="claro"] .mr-no-encontrado-acciones a.mr-no-encontrado-principal:hover {
  background: var(--mj-yellow-hover, #ffe066);
  box-shadow: none;
}

/* En el móvil, un botón por fila, a todo el ancho: más fácil de tocar. */
@media (max-width: 480px) {
  .mr-no-encontrado {
    padding: 32px 18px 28px;
  }

  .mr-no-encontrado-acciones a.mr-no-encontrado-boton {
    flex: 1 1 100%;
  }
}

/* ---- La página 404 ----
   Sin barra ni pie: el aviso, en medio de la pantalla. */
body.mr-pagina-404 {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 24px 16px;
}

body.mr-pagina-404 .mr-no-encontrado {
  margin: 0;
}