/* ===========================================================================
   TABLAS
   Densas pero legibles: 300 personas y varias visitas diarias.
   =========================================================================== */

.tabla-marco{ width:100%; overflow-x:auto; }

table.tabla{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 13.5px;
}

table.tabla thead th{
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 12px 16px;
	text-align: left;
	white-space: nowrap;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	background: var(--fondo-3);
	border-bottom: 1px solid var(--linea);
	backdrop-filter: blur(14px);
}
table.tabla thead th:first-child{ padding-left: 22px; }
table.tabla thead th:last-child{ padding-right: 22px; }

table.tabla tbody td{
	padding: 13px 16px;
	border-bottom: 1px solid rgba(255,255,255,.045);
	vertical-align: middle;
	color: var(--texto-suave);
}
table.tabla tbody td:first-child{ padding-left: 22px; }
table.tabla tbody td:last-child{ padding-right: 22px; }

table.tabla tbody tr{ transition: background var(--transicion); }
table.tabla tbody tr:hover{ background: var(--superficie); }
table.tabla tbody tr:last-child td{ border-bottom: 0; }

.tabla .principal{ color: var(--texto); font-weight: 650; }
.tabla .num{ font-family: var(--fuente-num); font-variant-numeric: tabular-nums; }
.tabla .der{ text-align: right; }

/* --- Celda de persona con avatar. --- */
.persona{ display:flex; align-items:center; gap:11px; min-width:0; }
.persona-avatar{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width: 34px; height: 34px;
	flex: 0 0 auto;
	border-radius: var(--radio-sm);
	background: linear-gradient(135deg, rgba(var(--marca-1-rgb), .3), rgba(var(--marca-2-rgb), .22));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 10px rgba(0,0,0,.26);
	font-size: 12px;
	font-weight: 750;
	color: var(--texto);
	letter-spacing: .02em;
}
.persona-copia{ min-width:0; }
.persona-nombre{
	display:block;
	color: var(--texto);
	font-weight: 650;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.persona-dato{ display:block; font-size:12px; color: var(--texto-tenue); }

/* --- Etiqueta de perfil. --- */
.perfil{
	display: inline-flex;
	align-items: center;
	height: 23px;
	padding: 0 10px;
	border-radius: var(--radio-pil);
	border: 1px solid var(--linea);
	background: var(--superficie-2);
	font-size: 11.5px;
	font-weight: 650;
	color: var(--texto-suave);
}
.perfil--empleado{ color: var(--marca-3); border-color: rgba(var(--marca-3-rgb), .3); background: rgba(var(--marca-3-rgb), .10); }
.perfil--promotor{ color: var(--marca-2); border-color: rgba(var(--marca-2-rgb), .34); background: rgba(var(--marca-2-rgb), .12); }

/* --- Barra de filtros sobre la tabla. --- */
.filtros{
	display: flex;
	align-items: center;
	gap: 11px;
	flex-wrap: wrap;
	padding: 15px 22px;
	border-bottom: 1px solid var(--linea);
	background: rgba(0,0,0,.12);
}
.filtros input,.filtros select{ height: 38px; width: auto; min-width: 150px; font-size: 13.5px; }
/* Una casilla no es un campo de texto: el ancho mínimo la deformaba. */
.filtros input[type="checkbox"],
.filtros input[type="radio"]{ height: auto; min-width: 0; }
.filtros .casilla{ display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.filtros .separador{ flex: 1 1 auto; }

/* --- Paginación. --- */
.paginacion{
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--texto-tenue);
}
.paginacion-botones{ display:flex; gap:6px; }
.paginacion-botones button{
	min-width: 34px; height: 34px;
	padding: 0 10px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-xs);
	background: var(--superficie);
	color: var(--texto-suave);
	font-size: 13px;
	font-weight: 600;
	transition: all var(--transicion);
}
.paginacion-botones button:hover{ background: var(--superficie-3); color: var(--texto); }
.paginacion-botones button[aria-current="page"]{
	color: var(--texto-sobre-marca);
	border-color: transparent;
	background: linear-gradient(135deg, var(--marca-1), var(--marca-2));
	box-shadow: 0 4px 12px rgba(var(--marca-1-rgb), .36);
}