/**
 * ============================================================
 * TENZO Competición
 * Historial de Skins
 * ============================================================
 */

.tenzo-support-page{

	width:100%;
	max-width:1800px;
	margin:60px auto 80px;
	padding:0 40px;
	box-sizing:border-box;

}

/*==================================================
CABECERA
==================================================*/

.tenzo-support-header{

	text-align:center;
	margin-bottom:40px;

}

.tenzo-support-header h1{

	margin:0 0 15px;
	font-size:52px;
	font-weight:800;
	color:#1d2b44;

}

.tenzo-support-header p{

	max-width:900px;
	margin:auto;
	font-size:17px;
	line-height:1.7;
	color:#777;

}

/*==================================================
TARJETA
==================================================*/

.tenzo-card{

	width:100%;
	max-width:1500px;
	margin:0 auto;

	background:#fff;
	padding:35px 45px;

	border-radius:20px;
	box-shadow:0 12px 35px rgba(0,0,0,.08);

	box-sizing:border-box;

}

/*==================================================
FILTROS
==================================================*/

.tenzo-support-filters{

	display:grid;
	grid-template-columns:1fr 1fr auto;
	gap:20px;
	align-items:end;
	margin-bottom:35px;

}

.tenzo-filter{

	display:flex;
	flex-direction:column;

}

.tenzo-filter label{

	margin-bottom:8px;
	font-size:13px;
	font-weight:700;
	color:#444;

}

.tenzo-filter select{

	height:48px;
	padding:0 15px;
	border:1px solid #ddd;
	border-radius:10px;
	background:#fff;
	font-size:15px;
	transition:.25s;

}

.tenzo-filter select:focus{

	outline:none;
	border-color:#ff7a00;
	box-shadow:0 0 0 3px rgba(255,122,0,.15);

}

.tenzo-filter-button{

	display:flex;
	align-items:flex-end;

}

.tenzo-button{

	height:48px;
	padding:0 35px;
	border:none;
	border-radius:10px;
	background:#ff7a00;
	color:#fff;
	font-weight:700;
	cursor:pointer;
	transition:.25s;

}

.tenzo-button:hover{

	background:#e86e00;
	transform:translateY(-2px);

}

/*==================================================
TABLA
==================================================*/

.tenzo-table-wrapper{

	width:100%;
	overflow-x:auto;
	overflow-y:hidden;
	border-radius:12px;

}

.tenzo-history-table{

	width:100%;
	border-collapse:collapse;
	table-layout:auto;

}

.tenzo-history-table thead{

	background:#f8f8f8;

}

.tenzo-history-table th{

	padding:18px 18px;
	text-align:left;
	font-size:14px;
	font-weight:700;
	color:#555;
	border-bottom:2px solid #ececec;
	white-space:nowrap;

}

.tenzo-history-table td{

	padding:18px 18px;
	font-size:14px;
	color:#333;
	border-bottom:1px solid #ececec;
	vertical-align:middle;
	white-space:nowrap;

}

.tenzo-history-table tbody tr{

	transition:.20s;

}

.tenzo-history-table tbody tr:hover{

	background:#fafafa;

}

.tenzo-history-table td:last-child{

	white-space:normal;
	line-height:1.5;
	min-width:350px;

}

/*==================================================
ANCHOS COLUMNAS
==================================================*/

.tenzo-history-table td:nth-child(2),
.tenzo-history-table th:nth-child(2){

	width:70px;
	text-align:center;

}

.tenzo-history-table td:nth-child(4),
.tenzo-history-table th:nth-child(4){

	width:120px;

}

.tenzo-history-table td:nth-child(5),
.tenzo-history-table th:nth-child(5){

	width:120px;
	text-align:center;

}

.tenzo-history-table td:nth-child(6),
.tenzo-history-table th:nth-child(6){

	width:170px;
	text-align:center;

}

/*==================================================
ESTADOS
==================================================*/

.tenzo-status{

	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:7px 15px;
	border-radius:999px;
	font-size:13px;
	font-weight:700;

}

.tenzo-status-success{

	background:#d4edda;
	color:#155724;

}

.tenzo-status-warning{

	background:#fff3cd;
	color:#856404;

}

.tenzo-status-danger{

	background:#f8d7da;
	color:#721c24;

}

/*==================================================
ARCHIVOS
==================================================*/

.tenzo-file-ok{

	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:7px 15px;
	border-radius:999px;
	background:#d4edda;
	color:#155724;
	font-size:13px;
	font-weight:700;

}

.tenzo-file-missing{

	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:7px 15px;
	border-radius:999px;
	background:#f8d7da;
	color:#721c24;
	font-size:13px;
	font-weight:700;

}

/*==================================================
PAGINACIÓN
==================================================*/

.page-numbers{

	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:42px;
	height:42px;
	margin:35px 4px 0;
	border:1px solid #ddd;
	border-radius:10px;
	background:#fff;
	color:#1d2b44;
	font-weight:700;
	text-decoration:none;
	transition:.25s;

}

.page-numbers:hover,
.page-numbers.current{

	background:#ff7a00;
	color:#fff;
	border-color:#ff7a00;

}

/*==================================================
SCROLL TABLA
==================================================*/

.tenzo-table-wrapper{

	width:100%;
	overflow-x:auto;

}

.tenzo-table-wrapper::-webkit-scrollbar{

	height:10px;

}

.tenzo-table-wrapper::-webkit-scrollbar-track{

	background:#ececec;
	border-radius:20px;

}

.tenzo-table-wrapper::-webkit-scrollbar-thumb{

	background:#ff7a00;
	border-radius:20px;

}

.tenzo-table-wrapper::-webkit-scrollbar-thumb:hover{

	background:#e86e00;

}

/* Separación de la paginación */

.page-numbers:first-child{

	margin-left:0;

}

/*==================================================
SIN RESULTADOS
==================================================*/

.tenzo-history-table td[colspan]{

	padding:50px;
	text-align:center;
	color:#888;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1200px){

	.tenzo-history-table{

		min-width:1300px;

	}

}

@media(max-width:900px){

	.tenzo-support-header h1{

		font-size:38px;

	}

	.tenzo-support-filters{

		grid-template-columns:1fr;

	}

	.tenzo-filter-button,
	.tenzo-button{

		width:100%;

	}

}