/*=============================================
INFO-PERFIL
=============================================*/

.infoPerfil{
	position: relative;
	margin-top:-80px;
}

.infoPerfil .colIzqPerfil{
	position:relative;
	margin-top:-170px;
}

.colIzqPerfil .descripcionPerfil{
	border-right:1px solid #eee;
}

.colIzqPerfil .descripcionPerfil .imgPerfil{
	position:relative;
	width:120px;
	height:120px;
	border-radius:100%;
	overflow:hidden;
	left:50%;
	transform:translate(-50%,0);
}

.colIzqPerfil .descripcionPerfil .card-header a{
	font-family: 'Open Sans', sans-serif;
	font-weight: 100;
	color:#777;
	font-size:22px;
	line-height:40px;
}

.colIzqPerfil .descripcionPerfil ul.card-body{
	min-height: 125px;
	height: auto;
}

.colIzqPerfil .descripcionPerfil .card ul li.misReservas{
	font-family: 'Open Sans', sans-serif;
	font-weight: 100;
	color:#777;
	font-size:18px;
	line-height:70px;
	border-top:1px solid #eee;
}

.colDerPerfil{
	transition:0.3s all;
}

.colDerPerfil thead{
	background-color: #197DB1;
	line-height:50px;
	color:white;
}

.colDerPerfil thead tr th{
	font-family: 'Open Sans', sans-serif;
	font-weight: 100;
}

.table-striped tbody tr:nth-of-type(odd){
	background-color: #EBF8F9 !important;
}

.colDerPerfil tbody tr td button{
	border-radius:100%;
}

/*=============================================
MEJORAS RESPONSIVE
=============================================*/

/* Asegurar que el contenedor se adapte correctamente */
.infoPerfil .container {
	max-width: 100%;
	padding: 0 15px;
}

.infoPerfil .row {
	margin-right: 0;
	margin-left: 0;
}

/* Mejorar la tabla para que sea responsive */
.colDerPerfil {
	overflow-x: auto;
}

.colDerPerfil .table {
	min-width: 700px;
}

/* Wrapper responsive para la tabla */
.table-responsive-perfil {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/*=============================================
TABLET VERTICAL (MD revisamos en 768px hacia abajo)
=============================================*/

@media (max-width:991px){
	
	.infoPerfil .colIzqPerfil{
		margin-top: -100px;
	}
	
	.colIzqPerfil .descripcionPerfil{
		border-right: none;
		border-bottom: 1px solid #eee;
		padding-bottom: 20px;
		margin-bottom: 20px;
	}
}

@media (max-width:768px){
	
	.infoPerfil .colIzqPerfil .cabeceraPerfil{
		background: black;
	}

	/* NO ocultar la tabla, hacerla scrolleable */
	.table-striped{
		display: table;
		width: 100%;
		font-size: 14px;
	}
	
	.table-striped thead th,
	.table-striped tbody td {
		padding: 8px 4px;
		font-size: 12px;
	}
	
	.colDerPerfil .table {
		min-width: 100%;
	}

	.colIzqPerfil .d-flex button{
		border-radius:100%;
	}
	
	.infoPerfil{
		margin-top: -40px;
	}
	
	.infoPerfil .colIzqPerfil{
		margin-top: -80px;
	}
}

@media (max-width:575px){
	
	/* Ajustes para móviles pequeños */
	.colDerPerfil h4 {
		font-size: 18px;
	}
	
	.colIzqPerfil .descripcionPerfil .card-header a {
		font-size: 18px;
	}
	
	.colIzqPerfil .descripcionPerfil .card ul li.misReservas {
		font-size: 16px;
		line-height: 50px;
	}
	
	/* Hacer que los botones sean más grandes en móvil */
	.d-lg-none .btn {
		min-height: 44px;
	}
}