@font-face {
  font-family: 'akiroboto';
  src: url('../../fonts/Roboto/Roboto-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'akiroboto', sans-serif !important;
}
input::selection {
  background-color: red;
  color: white;
}

/* CUESTIONARIOS */
.tagTipoRespuestaDetalle {
  width: 100% !important;
  height: 100% !important;
}

.dragdrop table {
  margin: 20px;
  border-collapse: collapse;
}
.dragdrop table, .dragdrop th, .dragdrop td {
  padding: 10px;
  text-align: center;
}
.dragdrop tr:hover {
  background-color: #f1f1f1;
  cursor: pointer;
}


/* EN PRUEBAS */
.carousel-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

#tagGralCarrusel {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
  width: 100%;
  border: thin solid transparent;
  height: 85px;
  padding: 4px;
  border:thin solid black;
}

#tagGralCarrusel::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}

#tagGralCarrusel > div {
  flex: 0 0 auto;
  margin-right: 10px;
  scroll-snap-align: start;
}

.selected {
  border: 2px solid blue;
  background-color: lightblue;
}

.selected-accion {
  background-color: red;
}

.cntJugadorAccion {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
  width: calc(100% - 55px);
  border: thin solid transparent;
  height: 55px;
  padding: 4px;
  border:thin solid black;
  border:thin solid transparent;
  padding-top: 1px;
}

.cntJugadorAccion::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}

.cntJugadorAccion > div {
  flex: 0 0 auto;
  margin-right: 10px;
  scroll-snap-align: start;
}


.backgroundTexto {
  position: relative;
  background-color: transparent;
  overflow: hidden;
  border-bottom: thin solid rgba(0, 0, 0, 0.1);
}

.backgroundTexto::before {
  content: ""; /* Este valor se cambiará en cada clase específica */
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: calc(100% - 30px);
  text-align: right;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;  
}
.bgCorrida::before {
  content: "Corrida";
}
.bgIterce::before {
  content: "Intercepción";
}
.bgCaptura::before {
  content: "Captura";
}
.bgCastigo::before {
  content: "Castigo";
}
.bgTacleo::before {
  content: "Tacleo";
}
.bgAnotacion::before {
  content: "Anotación";
}
.bgCentro::before {
  content: "Centro";
}
.bgLanza::before {
  content: "Lanza";
}
.bgAtrapa::before {
  content: "Atrapa";
}

/* OTRAS */

#mainContainer {
  display: flex;
  flex-wrap: wrap;
  width: auto;
  height: auto;
  border: none; /* Eliminamos el borde del contenedor para evitar espacios adicionales */
  padding: 0;   /* Eliminamos el padding del contenedor */
}

#mainContainer div {
  width: 50px;
  height: 50px;
  margin: 2px; /* Espaciado fijo de 2px entre cada div */
  background-color: #4CAF50;
  box-sizing: border-box; /* Asegura que el borde esté incluido en el tamaño total */
}

.centered-div {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center;     /* Centra verticalmente */
  height: 200px;           /* Ajusta la altura según necesites */
  border: 1px solid black;
}


/* ROLES */
.scroll-container-roles {
  width: 100%; /* Puedes ajustar el ancho según lo necesites */
  height: 200px; /* Fija la altura del contenedor */
  overflow-x: auto; /* Permite el desplazamiento horizontal */
  overflow-y: hidden; /* Oculta el desplazamiento vertical */
  white-space: nowrap; /* Impide que los elementos bajen a la siguiente línea */
  display: flex;
  align-items: center; /* Centra verticalmente los elementos */
  scroll-behavior: smooth; /* Añade un efecto de desplazamiento suave */
  background: transparent;
  box-shadow: none;
}

::selection {
  background: transparent;
  color: inherit; /* Mantiene el color del texto seleccionado */
}

/* Personalizar la barra de desplazamiento horizontal */
.scroll-container-roles::-webkit-scrollbar {
  height: 6px; /* Altura de la barra de desplazamiento */
}

.scroll-container-roles::-webkit-scrollbar-thumb {
  background-color: #888; /* Color del "pulgar" de la barra */
  background-color: transparent;
  border-radius: 10px; /* Bordes redondeados */
}

/* Opcional: cambiar el color al pasar el mouse */
.scroll-container-roles::-webkit-scrollbar-thumb:hover {
  background-color: #555;
  cursor: pointer;
}

.tagGralCarruselResumenJuego {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
  width: 100%;
  height: 578px !important; 
  padding: 4px;
  border:thin solid rgb(134, 134, 134);
  border:thin solid transparent;
  border-radius: 4px;
}

.tagGralCarruselResumenJuego::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}

.tagGralCarruselResumenJuego > div {
  flex: 0 0 auto;
  margin-right: 10px;
  scroll-snap-align: start;
}

.background-staff-nodata {
  background-image: url('../img/naoflag/NoStaff.png'); /* Reemplaza con la URL de tu imagen */
  background-size: contain; /* Ajusta el tamaño de la imagen manteniendo su proporcionalidad */
  background-position: center; /* Centra la imagen en el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  height: 100%; /* Ajusta el alto del contenedor */
  width: 100%; /* Ajusta el ancho del contenedor */
}