.table-wrap{
	width:100%;
	overflow-x:auto;
	overflow-y:visible;
	padding:0 20px 20px;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:auto;
	scrollbar-color:rgba(24,76,145,.65) rgba(255,255,255,.06);
	border-radius:18px;
}

.table-wrap{
	background:transparent;
}

.data-table.data-table-div,
.data-table-div{
	background:transparent;
}

.data-table-div .data-table-head,
.data-table-div .data-table-body,
.data-table-div .data-row,
.data-table-div .data-cell{
	background:transparent;
}

.table-wrap::-webkit-scrollbar{ height:14px; width:14px; }
.table-wrap::-webkit-scrollbar-thumb{ background:rgba(24,76,145,.65); border-radius:999px; border:3px solid rgba(255,255,255,.04); }
.table-wrap::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); border-radius:999px; }

.table-card,
.table-responsive{
	min-width:0;
}

/* =========================================
   TABLAS HTML CLÁSICAS
========================================= */

.data-table{
	width:100%;
	min-width:720px;
	border-collapse:collapse;
	table-layout:fixed;
}

.data-table thead th{
	padding:16px 14px;
	text-align:left;
	font-size:12px;
	font-weight:800;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:var(--text-muted);
	border-bottom:1px solid rgba(255,255,255,.08);
	vertical-align:top;
	white-space:nowrap;
}

.data-table tbody td{
	padding:16px 14px;
	border-bottom:1px solid rgba(255,255,255,.06);
	font-size:14px;
	line-height:1.45;
	color:var(--text-soft);
	vertical-align:top;
	word-break:break-word;
}

.data-table tbody tr:hover td{
	background:rgba(255,255,255,.03);
}

.data-table tbody tr td:first-child{
	color:var(--text);
	font-weight:600;
}

.table-nowrap th,
.table-nowrap td,
.pastores-table th,
.pastores-table td,
.casos-table th,
.casos-table td,
.atenciones-table th,
.atenciones-table td,
.cierres-table th,
.cierres-table td{
	white-space:nowrap;
}

/* =========================================
   TABLAS CON DIV
========================================= */

.data-table-div{
	width:100%;
	min-width:980px;
}

.data-table-div .data-table-head{
	border-bottom:1px solid rgba(255,255,255,.08);
}

.data-table-div .data-table-body{
	display:flex;
	flex-direction:column;
}

.data-table-div .data-row{
	display:grid;
	grid-template-columns:1fr .8fr 1.4fr 1.4fr .9fr 1.2fr;
	gap:12px;
	align-items:start;
}

.data-table-div .data-table-head .data-row{
	padding:16px 14px;
}

.data-table-div .data-table-body .data-row{
	padding:16px 14px;
	border-bottom:1px solid rgba(255,255,255,.06);
	transition:background var(--transition);
}

.data-table-div .data-table-body .data-row:hover{
	background:rgba(255,255,255,.03);
}

.data-table-div .data-cell{
	min-width:0;
	font-size:14px;
	line-height:1.45;
	color:var(--text-soft);
	word-break:break-word;
}

.data-table-div .data-table-head .data-cell{
	font-size:12px;
	font-weight:800;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:var(--text-muted);
	white-space:nowrap;
}

.data-table-div .data-table-head .data-row .data-cell:last-child{
	text-align: right;
}

.data-table-div .data-table-body .data-row .data-cell:first-child{
	color:var(--text);
	font-weight:600;
}

.data-table-div .data-cell[data-label="Acciones"]{
	display:flex;
	justify-content:flex-end;
	align-items:flex-start;
}

.data-table-div .data-row-empty{
	display:block;
	padding:18px 14px;
}

.data-table-div .data-cell-empty{
	padding:18px;
	border-radius:16px;
	border:1px dashed var(--stroke);
	color:var(--text-soft);
	background:rgba(255,255,255,.02);
}

/* =========================================
   ACCIONES
========================================= */

.table-actions{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	justify-content:flex-end;
}

/* =========================================
   LISTA LEGACY
========================================= */

.table-list{
	padding:18px 20px 20px;
}

.table-head{
	display:grid;
	gap:12px;
	padding-bottom:8px;
	margin-bottom:4px;
	border-bottom:1px solid var(--stroke);
	font-size:11px;
	font-weight:800;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:var(--text-muted);
}

.table-body{
	display:grid;
	gap:0;
	padding-top:12px;
}

.table-row{
	display:grid;
	gap:12px;
	align-items:start;
	padding:12px 6px;
	border-bottom:1px solid var(--stroke);
	transition:background var(--transition);
}

.table-row:hover{
	background:rgba(255,255,255,.04);
}

.table-cell{
	min-width:0;
}

.table-label{
	display:none;
	margin-bottom:4px;
	font-size:11px;
	font-weight:700;
	letter-spacing:.03em;
	text-transform:uppercase;
	color:var(--text-muted);
}

.table-value{
	min-width:0;
	font-size:13px;
	line-height:1.4;
	color:var(--text);
	word-break:break-word;
}

.table-cell-action{
	display:flex;
	justify-content:flex-end;
	align-items:center;
}

.table-empty{
	padding:18px;
	border-radius:16px;
	border:1px dashed var(--stroke);
	color:var(--text-soft);
	background:rgba(255,255,255,.02);
}

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

@media (max-width: 1280px){
	.table-wrap{
		padding:0 14px 14px;
		overflow-x:auto;
		overflow-y:visible;
	}

	.data-table{
		min-width:720px;
		table-layout:auto;
	}

	.data-table thead{
		display:table-header-group;
	}

	.data-table tbody{
		display:table-row-group;
	}

	.data-table tr{
		display:table-row;
	}

	.data-table th,
	.data-table td{
		display:table-cell;
	}

	.data-table thead th{
		padding:14px 12px;
		font-size:11px;
	}

	.data-table tbody td{
		padding:14px 12px;
		font-size:13px;
	}

	.data-table-div{
		min-width:860px;
	}

	.data-table-div .data-table-head{
		display:block;
	}

	.data-table-div .data-table-body{
		display:flex;
		flex-direction:column;
		gap:0;
	}

	.data-table-div .data-table-head .data-row{
		padding:14px 12px;
	}

	.data-table-div .data-table-body .data-row{
		padding:14px 12px;
		border-radius:0;
		background:transparent;
		border-left:0;
		border-right:0;
		border-top:0;
	}

	.data-table-div .data-table-body .data-cell{
		padding:0;
		font-size:13px;
	}

	.data-table-div .data-table-body .data-cell::before{
		display:none;
	}

	.data-table-div .data-cell[data-label="Acciones"]{
		justify-content:flex-end;
		align-items:flex-start;
	}

	.table-actions{
		justify-content:flex-end;
	}
}

@media (max-width: 940px){
	.table-wrap{
		padding:0 14px 14px;
		overflow:visible;
	}

	/* tablas html */
	.data-table{
		min-width:100%;
		table-layout:auto;
	}

	.data-table,
	.data-table thead,
	.data-table tbody,
	.data-table tr,
	.data-table th,
	.data-table td{
		display:block;
		width:100%;
	}

	.data-table thead{
		display:none;
	}

	.data-table tbody{
		display:flex;
		flex-direction:column;
		gap:12px;
	}

	.data-table tbody tr{
		border:1px solid rgba(255,255,255,.08);
		border-radius:14px;
		background:rgba(255,255,255,.04);
		padding:12px;
		overflow:hidden;
	}

	.data-table tbody td{
		display:flex;
		flex-direction:column;
		gap:4px;
		padding:0;
		border:0;
		background:transparent !important;
		white-space:normal;
	}

	.data-table tbody td + td{
		margin-top:10px;
	}

	.data-table tbody td::before{
		content:attr(data-label);
		display:block;
		font-size:11px;
		font-weight:800;
		letter-spacing:.04em;
		text-transform:uppercase;
		color:var(--text-muted);
	}

	/* tablas div */
	.data-table-div{
		min-width:100%;
	}

	.data-table-div .data-table-head{
		display:none;
	}

	.data-table-div .data-table-body{
		display:flex;
		flex-direction:column;
		gap:12px;
	}

	.data-table-div .data-table-body .data-row{
		display:grid;
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:12px 14px;
		padding:12px;
		border:1px solid rgba(255,255,255,.08);
		border-radius:14px;
		background:rgba(255,255,255,.04);
		overflow:hidden;
	}

	.data-table-div .data-table-body .data-cell{
		display:flex;
		flex-direction:column;
		gap:4px;
		min-width:0;
		padding:0;
		white-space:normal;
	}

	.data-table-div .data-table-body .data-cell::before{
		content:attr(data-label);
		display:block;
		font-size:11px;
		font-weight:800;
		letter-spacing:.04em;
		text-transform:uppercase;
		color:var(--text-muted);
	}

	.data-table-div .data-cell[data-label="Acciones"]{
		justify-content:flex-start;
		align-items:flex-start;
	}

	.table-actions{
		justify-content:flex-start;
	}
}

@media (max-width: 520px){
	.table-wrap{
		padding:0 12px 12px;
	}

	.data-table tbody tr,
	.data-table-div .data-table-body .data-row{
		padding:10px;
		border-radius:12px;
	}

	.data-table tbody td,
	.data-table-div .data-table-body .data-cell{
		font-size:13px;
	}
}