/* Sticky footer styles-------------------------------------------------- */
html {
	position: relative;
	min-height: 100%;
}
body {
	/* Margin bottom by footer height */
	margin-bottom: 60px;
    background-position: center;
	line-height: normal;
}

p, label, span {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.negrita {
	font-weight: bold;
}

.registros {
	font-size: 14px;
}

.content-nav {
	background-color: #C03D36;
}



.navbar-nav .nav-item:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Cambio de color al pasar el cursor */
    transition: background-color 0.3s ease-in-out;
}

.navbar-nav .nav-item .nav-link {
    display: flex; /* Permite centrar el texto */
    height: 100%; /* Asegura que el enlace ocupe toda la altura */
    width: 100%; /* Se asegura de que abarque el ancho del <li> */
    color: white; /* Mantener el color del texto */
}

.navbar {
	padding: .2rem 0rem ;
}

.navbar-dark .navbar-toggler{
	border-color: rgba(255,255,255,.6);
}

.navbar-toggler {
	border: 2px solid transparent;
	padding: .25rem .5rem;
}

/* HEADER */
header img {
    margin-top: 7px;
    margin-bottom: 3px;
    width: 60px;
    height: auto;
}

.title-header-1, .title-header-2 {
	color: #FFFFFF
}
.bold {
	font-weight: bold;
}
.titleSection {
	font-size: 25px;
	font-weight: bold;
	text-transform: uppercase;
	color: grey;
}

.subtitleSection {
	font-size: 22px;
	font-weight: bold;
	color: grey;
}

.subtitleH5Section {
	font-size: 20px;
	font-weight: bold;
	color: grey;
}

.subtitleH6Section {
	font-size: 18px;
	font-weight: bold;
	color: grey;
}

.titleBox {
    color: white;
    margin: 0; /* Restablece los márgenes predeterminados */
    padding: 5px; /* Ajusta el relleno según sea necesario */
}




footer {
	position: absolute;
	bottom: 0;
	width: 100%;
    background-color: #0e3b68;
	text-align:center;
	line-height:60px;
}

.pre-footer{
	height: 60px;
}

.text-footer {
	color: white;
}

/*  COLORES PARTIDOS    */
.match-result-0 {
	background-color: #f44336;
}
.match-result-1 {
	background-color: #ffc107;
}
.match-result-3 {
	background-color: #4caf50;
}

/* MIGAS DE PAN */
.breadcrumbs {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
	margin-bottom: 15px;
}
.breadcrumbs li {
    display: inline;
}
.breadcrumbs li:not(:last-child):after {
    content: ">";
    margin: 0 5px;
}
.breadcrumbs li a {
    text-decoration: none;
}

/* TABLES */
/* Estilo general de la tabla */
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 0.9rem; /* Un poco más pequeño */
  background-color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
  table-layout: fixed;
}

/* Cabecera de la tabla */
.table thead {
  background-color: #004080; /* Azul oscuro */
  color: #ffffff;
  text-align: center;
}

.table thead th {
  padding: 8px 8px; /* Más compacto */
  font-weight: 600;
  border-bottom: 2px solid #003060;
}

table th, table td {
    font-size: 1.1em;
}

/* Filas del cuerpo */
.table tr {
  text-align: center;
  transition: background-color 0.2s ease-in-out;
}

.table-striped tr:nth-child(even) {
  background-color: #f4f8fc;
}


.table-striped tbody tr:hover {
  background-color: #e6f0ff;
}

/* Celdas */
.table td {
  padding: 6px 8px; /* Compacto */
  border-bottom: 1px solid #ddd;
  vertical-align: middle;
}

/* Acciones (icono de edición) */
.btn-actions a {
  color: #555;
  font-size: 1rem;
}

.btn-actions a:hover {
  color: #004080;
}





#pagination, #paginationEntrenadores, #paginationFichajes {
  margin-top: 20px;
  text-align: center;
}

/* Estilo base de los botones */
.pagination-btn {
  margin: 0 6px;
  padding: 8px 14px;
  font-size: 0.95rem;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  background-color: #e0e0e0;
  color: #333;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

/* Botón primario (Primera, Última) */
.pagination-btn.primary {
  background-color: #004080;
  color: white;
}

.pagination-btn.primary:hover {
  background-color: #002d5c;
}

/* Botón actual (desactivado pero visible como seleccionado) */
.pagination-btn.current {
  background-color: #0066cc;
  color: white;
  cursor: default;
}

/* Hover general */
.pagination-btn:hover:not(:disabled):not(.current) {
  background-color: #c7d6e6;
}

/* Desactivado */
.pagination-btn:disabled {
  background-color: #f0f0f0;
  color: #aaa;
  cursor: not-allowed;
  box-shadow: none;
}


.contenedor {
	margin-top: 20px; /* Ajusta este valor según sea necesario */
}

footer {
	padding-top: 20px; /* Ajusta este valor según sea necesario */
}

label {
	font-weight: bold;
}

/* PESTAÑAS */
.tabs {
    display: flex;
    flex-wrap: wrap; /* Permite que los botones bajen de línea en pantallas pequeñas */
    overflow-x: auto; /* Agrega desplazamiento horizontal si es necesario */
    white-space: nowrap; /* Evita que los botones se dividan en varias líneas */
    background-color: #ffffff;
    scrollbar-width: thin; /* Estiliza la barra de desplazamiento en navegadores compatibles */
}

/* Estiliza la barra de desplazamiento en Webkit (Chrome, Edge, Safari) */
.tabs::-webkit-scrollbar {
    height: 6px;
}
.tabs::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
.tabs::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.tab-button {
    padding: 10px 10px;
    cursor: pointer;
    border: none;
    background-color: #ffffff;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease-in-out;
    font-size: 16px;
    font-weight: bold;
    color: #555;
    flex: 1; /* Hace que los botones se distribuyan mejor */
    text-align: center;
    min-width: 100px; /* Evita que los botones sean demasiado pequeños */
    outline: none; /* Mejora accesibilidad evitando estilos predeterminados de outline */
}

.tab-button:hover,
.tab-button:focus {
    background-color: #f1f1f1;
    border-bottom: 3px solid #007BFF;
    color: #007BFF;
}

/* Activa la pestaña actual */
.tab-button.active {
    border-bottom: 3px solid #007BFF;
    color: #007BFF;
}

/* Contenedor de contenido de pestañas */
.tab-content {
    display: none;
    padding: 0 15px 15px;
    background-color: #ffffff;
    border-top: none;
    margin-bottom: 20px;
}

/* Muestra el contenido activo */
.tab-content.active {
    display: block;
}

/* Accesibilidad: permitir navegación con teclado */
.tab-button:focus-visible {
    outline: 2px solid #007BFF;
    outline-offset: 2px;
}



/* RECORDS */
.clubName, .mayorVictoria, #clubForm {
    padding-top: 10px;
}
.records, .mayorVictoria, #clubForm {
    padding-left: 13px;
}

.border {
    border: 2px solid #ccc !important;
}

.yellow-card{
	color: #FFD700;
}

.red-card, .exit{
	color: #FF4500;
}

.enter {
	color: #32CD32;
}

/* BUTTON AS LINK */
.link-button {
    background: none;
    border: none;
    color: #337ab7;
    cursor: pointer;
    font-size: 1em;
    font-family: inherit;
}

.link-button:hover {
        text-decoration: underline;
}

.submit-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: block;
    margin: 0 auto;
    margin-top: 10px;
}

/* ordenamiento de tablas */
th.sortable {
    cursor: pointer;
}

th.sortable:after {
    content: '\25B2'; /* Default up arrow */
    float: right;
    margin-left: 5px;
    opacity: 0.5;
}

th.sortable.sort-asc:after {
    content: '\25B2'; /* Up arrow for ascending sort */
    opacity: 1;
}

th.sortable.sort-desc:after {
    content: '\25BC'; /* Down arrow for descending sort */
    opacity: 1;
}

.sort-asc::after {
    content: ' ▲';
}

.sort-desc::after {
    content: ' ▼';
}

/* Filtro de las tablas */
.filter-container {
    margin-bottom: 10px;
} 

.filter-container label {
    margin-right: 10px; /* Espacio entre el label y el input */
}




/*ENLACES */
.enlace {
	color: #337ab7;
}

/* table hover */
.table tbody tr:hover {
    background-color: #dcdcdc; /* Cambia el color de fondo al pasar el cursor */
}

.white-space{
	white-space: pre-wrap;
}

/* FILTROS DE TABLAS */

.filter-container-server button {
	    margin-top: -4px;           /* Espacio entre el input y el botón */
	}


header, .titleBox{
	background-color: #2F6FD1;
}

.header-container {
  display: grid;
  grid-gap: 10px; /* Espacio entre las columnas */
}

.column3 {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrado vertical */
}


.title-header-1 {
    margin-top: 4px;
}
	
/*----------------------------------------*/

@media screen and (min-width: 1700px) {
	.contenedor {
		margin-left: 200px;
		margin-right: 200px;
	}
	
	.header-container {
	  grid-template-columns: 70px auto; 
	  margin-left: 200px;
	}
	
	nav {
		margin-left: 200px;
		margin-right: 200px;
	}
}

@media screen and (max-width: 1700px) and (min-width: 600px) {
	
	.contenedor {
		margin-left: 50px;
		margin-right: 50px;
	}
	
	.header-container {
	  grid-template-columns: 70px auto;
	  margin-left: 50px;
	}

	nav {
		margin-left: 50px;
		margin-right: 50px;
	}
}

@media screen and (max-width: 599px){
	
	.contenedor {
		margin-left: 15px;
		margin-right: 15px;
	}
	
	.header-container {
	  grid-template-columns: 70px auto;
	  margin-left: 15px;
	}
	
	nav {
	  margin-left: 15px;
	  margin-right: 15px;
	}
	
	.title-header-1{
		font-size: 1.9rem;
	}

	.title-header-2{
		font-size: 1.2rem;
	}
}


@media screen and (min-width: 600px) {
	
	#filterInput, #filterInputEntrenadores, #filterInputNews, #orderInput, #filterInputFichajes {
	    width: 250px;
	}
	
}

@media screen and (min-width: 900px) {
	
	nav {
		padding: 0% !important;
	}
	
}