/* Estilo básico para la página */
body {
  font-family: 'Arial', sans-serif;
  background-color: rgba(255, 255, 255, 0.3);  /* Fondo amarillo claro, similar al color de la caja */
  color: #3e2723;  /* Texto oscuro para contraste */
}

/* Colores inspirados en la caja de Catan */
.bg-dark {
  background-color: #8f1010 !important; /* Color rojo intenso, inspirado en la caja */
}

/* Línea separadora con opacidad */
.separator {
    width: 100%; /* Cubre todo el ancho de la página */
    height: 1px; /* Un pixel de alto */
    background-color: rgba(255, 255, 255, 0.2); /* Color blanco con opacidad */
    margin: 0; /* Eliminar márgenes si es necesario */
}

.init-p {
    text-shadow: 1px 1px 2px black; /* Sombra que simula el contorno */
}

/* Ajuste general para la sección de información */
.info-section {
    background-image: url('section-bg.jpg'); /* Aquí puedes poner una imagen del juego */
    background-size: cover;
    background-color: #1a0e0e;
    padding: 2rem; /* Agrega espacio alrededor del contenido */
}



.jumbotron {
  background-image: url('catan-bg.jpg'); /* Aquí puedes poner una imagen del juego */
  background-size: cover;
  background-color: rgba(255, 87, 34, 0.5); /* Filtro naranja semi-transparente */
  color: black;
}

.jumbotron h1 {
  font-family: 'Arial', serif;
  font-weight: bold;
  text-shadow: 1px 1px 2px black; /* Sombra que simula el contorno */
  color: #c9600e; /* Naranja brillante, como el color del trigo */
}


/* Ajuste específico para el logo de la web en el navbar -- no se si se esta sobreponiendo en otro lugar */
img[src="static/images/alfa-logo.webp"] {
    width: 100%; /* Asegura que ambas ocupen el mismo ancho */
    max-width: 500px; /* Limita el tamaño máximo */
    height: auto; /* Mantener proporción */
}


h1 {
    font-family: 'Alfaboard-logo';
}


h2 {

  margin-bottom: 1rem; /* Ajusta el espacio */
  color: #f57c00; /* Naranja cálido, inspirado en el color del desierto */
  text-shadow: 1px 1px 2px black; /* Sombra que simula el contorno */
}

.news-container {
    background-color: rgba(255, 255, 255, 0.8); /* Fondo claro con opacidad */
    border: 2px solid #8B5A2B; /* Borde marrón oscuro */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para efecto flotante */
    margin: 2rem auto; /* Margen superior e inferior */
    padding: 2rem; /* Espaciado interno */
    max-width: 900px; /* Ancho máximo para centrarlo */
}

.news-title {
    color: #c65d28; /* Naranja cálido */
    text-shadow: 1px 1px 2px black; /* Sombra para destacar */
    font-weight: bold;
}

.news-date {
    font-size: 1.2rem;
    color: #6d4c41; /* Marrón suave */
    margin-bottom: 1rem;
}

.init-p {
    font-size: 1rem;
    line-height: 1.5; /* Espaciado entre líneas */
}


h3 {
    margin-left: 15px;  /* Mantienes el margen izquierdo si lo necesitas */

}

.footer-catan {
    border-top: 3px solid #d17a22; /* Línea inferior naranja */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Sombra para toda la barra */
}

.navbar-brand {
  position: relative; /* Contenedor de referencia para posicionamiento absoluto */
}

.logo-over-navbar {
  position: absolute;
  top: -40px; /* Ajusta según sea necesario */
  left: 20px; /* Ajusta la posición horizontal según sea necesario */
  height: 100px; /* Mantén el tamaño fijo del logo */
  z-index: 100; /* Asegúrate de que esté sobre la barra de navegación */
}

/* Ajustes generales para la barra de navegación */
.navbar {
  position: relative;
  background-color: #8f1010 !important; /* Rojo oscuro inspirado en Catan */
  border-bottom: 3px solid #d17a22; /* Línea inferior naranja */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Sombra para toda la barra */
  z-index: 1; /* Asegúrate de que esté sobre la barra de navegación */
  height: 90px;
  overflow: visible; /* Permite que el logo sobresalga */
}

/* Estilo para los enlaces de navegación */
.navbar-nav .nav-link {
  color: #eeab48 !important; /* Naranja brillante */
  font-weight: bold; /* Texto en negrita */
  text-transform: uppercase; /* Letras en mayúsculas */
  padding: 10px 15px; /* Espaciado alrededor del enlace */
  border-radius: 5px; /* Bordes redondeados para simular un botón */
  transition: all 0.3s ease-in-out; /* Transición suave */
  line-height: 50px; /* Asegúrate de que no se amontonen */
}

/* Efecto hover en enlaces de navegación */
.navbar-nav .nav-link:hover {
  color: #ffa726; /* Naranja más claro */
  background-color: rgba(255, 255, 255, 0.2); /* Fondo semi-transparente */
  text-shadow: 0 0 10px rgba(255, 255, 0, 0.8); /* Sombra brillante */
  transform: scale(1.05); /* Ampliación ligera para dar sensación de botón */
}

/* Efecto activo (clic) en enlaces de navegación */
.navbar-nav .nav-link:active {
  transform: scale(0.95); /* Contracción ligera al hacer clic */
  background-color: rgba(255, 255, 255, 0.3); /* Fondo más opaco al hacer clic */
}

/* Hover en el ítem activo para mantener consistencia */
.navbar-nav .nav-link.active {
  color: #ffa726 !important; /* Naranja más claro */
  background-color: rgba(255, 255, 255, 0.1); /* Fondo más tenue para el activo */
  text-shadow: 0 0 8px rgba(255, 255, 0, 0.7); /* Sombra de iluminación */
}

.collapse navbar-collapse {
    margin-left: 300px;
}

.navbar-nav .nav-item {
  margin-right: 35px; /* Ajusta el valor según sea necesario */
}

.navbar-nav .nav-item:last-child {
  margin-right: 0; /* Elimina el margen del último elemento */
}



/* Estilo para los enlaces y botones */
a {
  color: #eeab48 !important; /* Color naranja brillante, trigo */
}

a:hover {
  color: #ffa726; /* Color al pasar el cursor */
} /* Aquí cerramos el bloque correctamente */

/* Margen y desplazamiento de la tabla */
.table-responsive {
    margin: 0 auto; /* Margen superior e inferior, desplazamiento hacia la derecha */
    max-width:900 px; /* Asegura que la tabla no ocupe todo el ancho */
}

.ranking-logo {
    display: block; /* Asegura que se comporte como un bloque */
    max-width: 100%; /* La imagen no excederá el ancho del contenedor */
    width: auto; /* Ajusta el ancho dinámicamente */
    height: 150px; /* Mantén la proporción de la imagen */
    float: left; /* Alinea la imagen a la izquierda */
    margin: 0 20px 20px 0; /* Margen derecho e inferior para separar del contenido */
}

.ranking-logo-left {
    float: left; /* Alinea la imagen a la izquierda */
    margin: 0 20px 20px 0; /* Margen derecho e inferior para separar del contenido */
}

.ranking-logo-right {
    float: right; /* Alinea la imagen a la derecha */
    margin: 0 0 20px 20px; /* Margen izquierdo e inferior para separar del contenido */
}

/* Centrar texto en la tabla */
.table th, .table td {
    text-align: center; /* Centra los valores en las celdas */
    vertical-align: middle; /* Alineación vertical centrada */
}

/* Opcional: ajusta la cabecera de la tabla para destacar */
.table thead th {
    background-color: #f4f4f4; /* Color de fondo para destacar la cabecera */
    font-weight: bold;
}

@font-face {
    font-family: 'Alfaboard-logo';
    src: url('/static/fonts/Blinkfor.otf') format('truetype');
}

/* Estilo inspirado en las cartas de Catan con textura */
.catan-theme {
    background-image: url('register-bg-1.jpg'); /* Ruta de la imagen */
    background-size: cover; /* Escalar la imagen para cubrir todo el fondo */
    background-repeat: no-repeat; /* Evitar que la imagen se repita */
    background-position: center; /* Centrar la imagen */
    background-blend-mode: overlay; /* Mezclar imagen y color */
    background-color: rgba(212, 163, 115, 0.9); /* Marrón claro con opacidad */
    border: 2px solid #8B5A2B; /* Marrón oscuro */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para profundidad */
    padding: 20px;
    margin: 20px auto; /* Centrar y espaciar verticalmente */
    color: #4E342E; /* Texto marrón oscuro */
}

.catan-theme h5 {
    color: #8B5A2B; /* Marrón oscuro */
}

.catan-theme .form-label {
    font-weight: bold;
}

.catan-theme input, .catan-theme select {
    background-color: rgba(250, 229, 211, 0.9); /* Beige con opacidad */
    border: 1px solid #8B5A2B; /* Marrón oscuro */
    border-radius: 5px;
}

.catan-theme button {
    background-color: #8B5A2B; /* Marrón oscuro */
    color: #FAE5D3; /* Beige */
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

.catan-theme button:hover {
    background-color: #A97142; /* Marrón más claro */
}

.catan-theme table {
    background-color: rgba(255, 255, 255, 0.9); /* Fondo claro para la tabla */
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Evitar que los bordes sobresalgan */
}

.catan-theme th, .catan-theme td {
    color: #4E342E; /* Texto marrón oscuro */
    border-bottom: 1px solid #8B5A2B; /* Línea entre filas */
}

.catan-theme thead th {
    background-color: #D7CCC8; /* Fondo marrón claro */
    font-weight: bold;
    color: #3E2723; /* Texto marrón más oscuro */
}

.catan-theme tbody tr:hover {
    background-color: rgba(250, 229, 211, 0.7); /* Efecto hover */
}

.catan-theme tbody tr:nth-child() {
    background-color: rgba(255, 245, 238, 0.9); /* Alternancia de filas */
}

.name-table-catan {
    background-color: #D7CCC8; /* Fondo marrón claro */
    font-weight: bold;
    color: #3E2723; /* Texto marrón más oscuro */
}

.points_mean_diff_style {
    font-weight: bold;
}
/******* Catan statistics cards *********************************/

/******* Discovery cards  *****/
.card {
    width: 100px;
    height: 135px;
    background-size: cover;
    background-position: center;
    margin: 10px;
    background-color: transparent; /* Asegura transparencia */
}

.card-knight {
    background-image: url("/static/images/catan-art/knight_card.PNG");

}

.card-yop {
    background-image: url("/static/images/catan-art/year_of_plenty_card.PNG");

}

.card-rb {
    background-image: url("/static/images/catan-art/road_building_card.PNG");

}


.card-monopoly {
    background-image: url("/static/images/catan-art/monopoly_card.PNG");

}

.card-point {
    background-image: url("/static/images/catan-art/victory_point_card.PNG");

}

/******* Big cards 2 points  *****/

.card-big {
    width: 90px;
    height: 110px;
    border-radius: 2px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}

.card-la {
    background-image: url("/static/images/catan-art/largest_army.PNG");
}

.card-lr {
    background-image: url("/static/images/catan-art/longest_road.PNG");
}


.carta-contenedor {
  text-align: center;
}

.carta-contenedor p {
  margin-top: 5px;
  font-size: 0.9rem;
  font-weight: bold;
}


/****************************************************************/

/* Cambios en formato móvil */
@media (max-width: 1000px) {

  .card {
    width: 50px;
    height: 78px;
    background-size: cover;
    background-position: center;
    margin: 10px;
    background-color: transparent; /* Asegura transparencia */
  }

  .logo-over-navbar {
    position: relative; /* Ajusta el posicionamiento relativo dentro de la barra */
    top: 0; /* Centra el logo verticalmente */
    left: 0; /* Alineación dentro de su contenedor */
    height: 50px; /* Ajusta el tamaño del logo para móvil */
    z-index: 1; /* Lo integra al flujo del contenido */
    pointer-events: auto; /* Permite interacción si es necesario */
  }

  .ranking-logo {
    display: block; /* Asegura que se comporte como un bloque */
    margin: 0 auto 20px auto; /* Centra horizontalmente */
    max-width: 90%; /* Asegura que la imagen no ocupe todo el ancho */
    height: 150px; /* Mantén la proporción de la imagen */
    width: auto; /* Mantén las proporciones dinámicas */
    float: none; /* Elimina cualquier flotación previa */

  }
  .table-responsive {
    margin: 0 auto; /* Centra la tabla */
    max-width: 100%; /* Asegura que la tabla ocupe el ancho completo en pantallas pequeñas */
  }

  .table {
        font-size: 0.7rem; /* Reducir aún más el tamaño en dispositivos pequeños */

}

  .navbar {
    height: auto; /* Permite que se ajuste según el contenido del navbar */
    overflow: hidden; /* Mantiene el diseño limpio en móvil */
  }

}