/* ==========================================================================
   Juegos - Estilos
   Paleta sobria: azul pizarra monocromo derivado del azul de marca (#0F5EA8),
   con un unico punto calido en laton apagado reservado a la accion primaria.
   Los enlaces usan un azul acero para no competir con esa accion.
   ========================================================================== */

:root{
  --fondo: #0D1826;        /* fondo de pagina */
  --superficie: #142334;   /* tarjetas */
  --borde: #24374D;        /* filetes, bordes de tabla, separadores */
  --texto: #DDE5EF;        /* texto principal - 12.5:1 sobre --superficie */
  --texto-tenue: #93A4B8;  /* metadatos, paginacion, pie - 6.2:1 */
  --laton: #C3A76B;        /* accion primaria - 7.7:1 con --fondo encima */
  --laton-claro: #D5BC88;  /* estado hover de la accion primaria */
  --acero: #8FB4D9;        /* enlaces - 7.3:1 sobre --superficie */
  --alerta: #8E2F35;       /* error, burdeos - 8:1 con texto blanco */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body{
  background-color: var(--fondo);
  color: var(--texto);
}

.content-wrapper{
  background: var(--fondo);
  color: var(--texto);
}

.content-header h1{
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */

.card{
  background-color: var(--superficie);
  border-color: var(--borde);
  color: var(--texto);
}

.card-header{
  background-color: transparent;
  border-bottom: 1px solid var(--borde);
  color: var(--texto);
}

.card-title{
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   Formulario de canje
   -------------------------------------------------------------------------- */

#token{
  background-color: var(--fondo);
  border: 1px solid var(--borde);
  color: var(--texto);
}

#token::placeholder{
  color: var(--texto-tenue);
}

#token:focus{
  border-color: var(--laton);
  outline: 2px solid var(--laton);
  outline-offset: 1px;
}

/* Unico elemento calido de la pagina: la accion que la justifica. */
.btn-primary{
  background-color: var(--laton);
  border-color: var(--laton);
  color: var(--fondo);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active{
  background-color: var(--laton-claro);
  border-color: var(--laton-claro);
  color: var(--fondo);
}

/* --------------------------------------------------------------------------
   Tabla de juegos
   -------------------------------------------------------------------------- */

.table{
  color: var(--texto);
}

.table-bordered,
.table-bordered th,
.table-bordered td{
  border-color: var(--borde);
}

.table thead th{
  color: var(--texto);
  border-bottom-color: var(--borde);
}

.table-striped tbody tr:nth-of-type(odd){
  background-color: rgba(255, 255, 255, .03);
}

.table-hover tbody tr:hover{
  background-color: rgba(255, 255, 255, .06);
  color: var(--texto);
}

.table td a{
  color: var(--acero);
}

.table td a:hover{
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   Controles de DataTables
   -------------------------------------------------------------------------- */

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{
  color: var(--texto-tenue);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background-color: var(--fondo);
  border: 1px solid var(--borde);
  color: var(--texto);
}

.dataTables_wrapper .dataTables_filter input::placeholder{
  color: var(--texto-tenue);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus{
  border-color: var(--laton);
  outline: 2px solid var(--laton);
  outline-offset: 1px;
}

.page-link{
  background-color: var(--superficie);
  border-color: var(--borde);
  color: var(--texto-tenue);
}

.page-link:hover{
  background-color: var(--borde);
  border-color: var(--borde);
  color: var(--texto);
}

.page-item.active .page-link{
  background-color: var(--borde);
  border-color: var(--borde);
  color: var(--texto);
}

.page-item.disabled .page-link{
  background-color: var(--superficie);
  border-color: var(--borde);
  color: #5C6B7E;
}

/* --------------------------------------------------------------------------
   Mensajes de error
   -------------------------------------------------------------------------- */

/* The alert message box */
.alert{
  padding: 20px;
  background-color: var(--alerta);
  color: #fff;
  margin-bottom: 15px;
}

/* The close button */
.closebtn{
  margin-left: 15px;
  color: #fff;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover{
  color: var(--fondo);
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.copyright_brithers{
  text-align: center;
  font-size: 15px;
}

.copyright_brithers a{
  color: var(--texto-tenue);
}

.copyright_brithers a:hover{
  color: var(--texto);
}

/* Prueba social: peso por tamano, no por color. */
.centrar_vendidos{
  text-align: center;
  font-size: 100px;
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   Modal de presentacion
   -------------------------------------------------------------------------- */

.claseFondoJuego{
  background-color: #424874;
  color: #FFFFFF;
}

.clasefixJuego{
  border-radius: 0px;
  border-bottom: none;
  border-top: none;
}

.centrar-elemento-juego{
  display: block;
  margin: auto;
  text-align: center;
}

.centrar-simple-elemento-juego{
  text-align: center;
}

/* --------------------------------------------------------------------------
   Foco visible
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible{
  outline: 2px solid var(--laton);
  outline-offset: 2px;
}