.rrt-table-wrap {
	--rrt-primary: #1d4ed8;
	--rrt-primary-light: #eef2ff;
	--rrt-text: #1f2430;
	--rrt-muted: #6b7280;
	--rrt-border: #e5e7eb;
	--rrt-bg: #ffffff;
	--rrt-row-alt: #f9fafb;
	--rrt-gold: #f5c542;
	--rrt-silver: #c9ccd1;
	--rrt-bronze: #d9995b;
	--rrt-radius: 14px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--rrt-text);
	background: var(--rrt-bg);
	border: 1px solid var(--rrt-border);
	border-radius: var(--rrt-radius);
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
	padding: 20px;
	margin: 24px 0;
	box-sizing: border-box;
}
.rrt-table-wrap *, .rrt-table-wrap *::before, .rrt-table-wrap *::after {
	box-sizing: border-box;
}

/* Toolbar */
.rrt-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.rrt-search-box {
	position: relative;
	flex: 1 1 260px;
	max-width: 360px;
}
.rrt-icon-search {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--rrt-muted);
	pointer-events: none;
}
.rrt-search-input {
	width: 100%;
	padding: 10px 12px 10px 38px;
	border: 1px solid var(--rrt-border);
	border-radius: 10px;
	font-size: 14px;
	background: #fafafa;
	transition: border-color .15s ease, background .15s ease;
}
.rrt-search-input:focus {
	outline: none;
	border-color: var(--rrt-primary);
	background: #fff;
}

.rrt-filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.rrt-filters select,
.rrt-pagesize select {
	padding: 9px 12px;
	border: 1px solid var(--rrt-border);
	border-radius: 10px;
	background: #fafafa;
	font-size: 14px;
	color: var(--rrt-text);
	cursor: pointer;
}
.rrt-filters select:focus,
.rrt-pagesize select:focus {
	outline: none;
	border-color: var(--rrt-primary);
}

/* Meta row */
.rrt-meta-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	font-size: 13px;
	color: var(--rrt-muted);
}
.rrt-pagesize label {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Table */
.rrt-table-scroll {
	overflow-x: auto;
	border-radius: 10px;
	border: 1px solid var(--rrt-border);
}
.rrt-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 720px;
}
.rrt-table thead th {
	position: sticky;
	top: 0;
	background: var(--rrt-primary-light);
	color: #1e3a8a;
	text-align: left;
	padding: 12px 14px;
	font-weight: 600;
	white-space: nowrap;
	border-bottom: 1px solid var(--rrt-border);
	user-select: none;
}
.rrt-table thead th.rrt-sortable {
	cursor: pointer;
}
.rrt-table thead th.rrt-sortable:hover {
	background: #e0e7ff;
}
.rrt-table thead th .rrt-sort-arrow {
	display: inline-block;
	margin-left: 4px;
	opacity: 0.35;
	font-size: 11px;
}
.rrt-table thead th.rrt-sort-active .rrt-sort-arrow {
	opacity: 1;
}

.rrt-table tbody td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--rrt-border);
	white-space: nowrap;
}
.rrt-table tbody tr:last-child td {
	border-bottom: none;
}
.rrt-table tbody tr:nth-child(even) {
	background: var(--rrt-row-alt);
}
.rrt-table tbody tr:hover {
	background: var(--rrt-primary-light);
}

.rrt-col-nombre {
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Badges de posición general (top 3) */
.rrt-badge-pos {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 13px;
	color: var(--rrt-muted);
}
.rrt-pos-1 .rrt-badge-pos { background: var(--rrt-gold); color: #6b4c00; }
.rrt-pos-2 .rrt-badge-pos { background: var(--rrt-silver); color: #3f3f46; }
.rrt-pos-3 .rrt-badge-pos { background: var(--rrt-bronze); color: #5a3315; }

tr.rrt-pos-1 td:first-child,
tr.rrt-pos-2 td:first-child,
tr.rrt-pos-3 td:first-child {
	border-left: 3px solid transparent;
}
tr.rrt-pos-1 { border-left-color: var(--rrt-gold); }
tr.rrt-pos-2 { border-left-color: var(--rrt-silver); }
tr.rrt-pos-3 { border-left-color: var(--rrt-bronze); }

.rrt-empty-row td {
	text-align: center;
	padding: 30px 14px;
	color: var(--rrt-muted);
}

/* Paginación */
.rrt-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	flex-wrap: wrap;
}
.rrt-page-btn {
	border: 1px solid var(--rrt-border);
	background: #fff;
	color: var(--rrt-text);
	border-radius: 8px;
	padding: 7px 12px;
	font-size: 13px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.rrt-page-btn:hover:not(:disabled) {
	background: var(--rrt-primary-light);
}
.rrt-page-btn.is-active {
	background: var(--rrt-primary);
	border-color: var(--rrt-primary);
	color: #fff;
}
.rrt-page-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Selector de columnas (configurar qué se ve en la fila compacta de mobile) */
.rrt-col-config {
	position: relative;
	display: none; /* solo tiene sentido en mobile, se activa por media query */
}
.rrt-col-selector-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 12px;
	border: 1px solid var(--rrt-border);
	border-radius: 10px;
	background: #fafafa;
	font-size: 13px;
	color: var(--rrt-text);
	cursor: pointer;
}
.rrt-col-selector-btn:hover {
	background: var(--rrt-primary-light);
}
.rrt-col-selector-panel {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 20;
	background: #fff;
	border: 1px solid var(--rrt-border);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
	padding: 12px 14px;
	width: 220px;
}
.rrt-col-selector-title {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--rrt-muted);
	text-transform: uppercase;
	letter-spacing: .03em;
}
.rrt-col-selector-panel label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	font-size: 14px;
	cursor: pointer;
}
.rrt-col-selector-panel input[type="checkbox"] {
	margin: 0;
}
.rrt-col-selector-hint {
	margin: 8px 0 0;
	font-size: 11.5px;
	color: var(--rrt-muted);
	border-top: 1px dashed var(--rrt-border);
	padding-top: 8px;
}

/* Lista mobile (tarjetas) */
.rrt-mobile-list {
	display: none;
}

.rrt-card {
	border: 1px solid var(--rrt-border);
	border-radius: 12px;
	margin-bottom: 10px;
	background: #fff;
	overflow: hidden;
	border-left: 3px solid transparent;
}
.rrt-card.rrt-pos-1 { border-left-color: var(--rrt-gold); }
.rrt-card.rrt-pos-2 { border-left-color: var(--rrt-silver); }
.rrt-card.rrt-pos-3 { border-left-color: var(--rrt-bronze); }

.rrt-card-summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.rrt-card-summary:active {
	background: var(--rrt-row-alt);
}
.rrt-card-fields {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	column-gap: 14px;
	row-gap: 2px;
}
.rrt-card-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.rrt-card-field .rrt-field-label {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--rrt-muted);
	line-height: 1.4;
}
.rrt-card-field .rrt-field-value {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--rrt-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rrt-card-field.rrt-field-nombre .rrt-field-value {
	white-space: normal;
}

.rrt-card-chevron {
	flex-shrink: 0;
	color: var(--rrt-muted);
	transition: transform .2s ease;
}
.rrt-card.is-open .rrt-card-chevron {
	transform: rotate(180deg);
}

.rrt-card-details {
	max-height: 0;
	overflow: hidden;
	transition: max-height .25s ease;
	background: var(--rrt-row-alt);
}
.rrt-card.is-open .rrt-card-details {
	max-height: 400px;
}
.rrt-card-details-inner {
	padding: 4px 14px 12px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 14px;
	border-top: 1px dashed var(--rrt-border);
	margin-top: 2px;
	padding-top: 10px;
}
.rrt-card-details .rrt-field-label {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--rrt-muted);
}
.rrt-card-details .rrt-field-value {
	font-size: 14px;
	color: var(--rrt-text);
	font-weight: 500;
}

/* Responsive: activar tarjetas mobile y ocultar tabla */
@media (max-width: 640px) {
	.rrt-table-wrap {
		padding: 14px;
	}
	.rrt-filters {
		width: 100%;
	}
	.rrt-filters select {
		flex: 1;
	}
	.rrt-col-config {
		display: block;
		flex: 0 0 auto;
	}
	.rrt-table-scroll {
		display: none;
	}
	.rrt-mobile-list {
		display: block;
	}
}