/* =========================================================================
   Genesal · Selector de grupos electrógenos — estilos del front
   Ajustado al diseño Figma "Genesal-Web-2026" (nodo 1-56021):
   cabecera roja de marca, texto blanco en mayúsculas, cuerpo en gris #434343
   con zebra, scroll lateral, cabecera a 2 líneas y filas a 1 sola línea.
   Autónomo: usa tokens DS (--gen-*) si el tema los aporta, con fallback.
   ========================================================================= */

.gen-se-selector {
	/* Tokens del diseño (con fallback por si el tema no los aporta) */
	--gen-se-rojo:        var(--gen-color-primary-500, #cf0540); /* bg/fill/primary */
	--gen-se-verde:       var(--gen-bg-success-primary, #8abd89); /* bg/success/primary */
	--gen-se-verde-texto: #2c4a2b;                                /* texto sobre el verde */
	--gen-se-texto:       var(--gen-text-darker, #000);
	--gen-se-texto-body:  var(--gen-text-dark, #434343);         /* text/dark */
	--gen-se-texto-mute:  var(--gen-color-grey-400, #9f9f9f);     /* atenuado (rango cabecera) */
	--gen-se-texto-alq:   #d3d3d3;                                /* alquilado: muy muy claro */
	--gen-se-borde:       var(--gen-color-grey-200, #e1e1e1);     /* dividers/light */
	--gen-se-surface:     var(--gen-bg-surface-primary, #fff);
	--gen-se-surface-alt: var(--gen-bg-surface-tertiary-light, #efefef); /* bg/fill/Soft */
	--gen-se-font:        var(--gen-font-helvetica, "Helvetica Neue", Arial, sans-serif);

	font-family: var(--gen-se-font);
	color: var(--gen-se-texto-body);
}

.gen-se-selector * {
	box-sizing: border-box;
}

.gen-se-cat {
	margin: 0 0 56px; /* Gap/gap 56 */
}

.gen-se-cat-title {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: 25px;
	line-height: 31px;
	font-weight: 500;
	margin: 0 0 16px;
	color: var(--gen-se-texto);
}

.gen-se-cat-range {
	font-size: 15px;
	line-height: 21px;
	font-weight: 400;
	color: var(--gen-se-texto-mute);
}

/* Contenedor con SCROLL LATERAL: la tabla no se comprime, se desplaza */
.gen-se-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.gen-se-front-table {
	width: 100%;
	min-width: 1100px;          /* fuerza el scroll lateral cuando no cabe */
	border-collapse: collapse;
	font-size: 15px;            /* size/body/md */
	line-height: 21px;          /* line height/body/md */
	background: var(--gen-se-surface);
}

/* Cabecera: roja, texto blanco en MAYÚSCULAS, alineada a la izquierda.
   Puede ocupar 2 líneas si el título es largo (white-space normal). */
.gen-se-front-table thead th {
	background: var(--gen-se-rojo);
	color: #fff;
	font-weight: 500;
	text-align: left;
	vertical-align: middle;
	padding: 16px 24px;
	font-size: 13px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	white-space: normal;        /* permite 2 líneas en cabecera */
}

/* Cuerpo: cada celda en UNA SOLA LÍNEA (nowrap), filas compactas */
.gen-se-front-table tbody td {
	padding: 4px 24px;          /* altura de fila */
	color: var(--gen-se-texto-body);
	vertical-align: middle;
	white-space: nowrap;        /* filas a una línea */
}

/* Zebra: filas pares en gris suave */
.gen-se-front-table tbody tr:nth-child(even) td {
	background: var(--gen-se-surface-alt);
}

.gen-se-modelo {
	font-weight: 700;
	color: var(--gen-se-texto);
}

/* Fila de grupo ALQUILADO: todo muy atenuado, no destaca */
.gen-se-front-table tbody tr.gen-se-row--alq td,
.gen-se-front-table tbody tr.gen-se-row--alq .gen-se-modelo {
	color: var(--gen-se-texto-alq);
}

/* Celda de disponibilidad: sin pastilla; el contenido llena toda la celda. */
.gen-se-front-table tbody td.gen-se-cell {
	padding: 0;
}

.gen-se-avail {
	display: block;
	padding: 4px 24px;          /* iguala el padding/altura del resto de celdas */
	line-height: 21px;          /* iguala la altura de la fila */
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Disponible: TODA la celda en verde; es un enlace que baja al formulario. */
.gen-se-cell--disp .gen-se-avail {
	background: var(--gen-se-verde);
	color: var(--gen-se-verde-texto) !important; /* gana al color de enlace del tema */
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.gen-se-cell--disp .gen-se-avail:hover,
.gen-se-cell--disp .gen-se-avail:focus {
	filter: brightness(0.94);
}

/* Alquilado: texto muy claro, sin fondo, no destaca. */
.gen-se-cell--alq .gen-se-avail {
	color: var(--gen-se-texto-alq);
}

/* En móvil se mantiene el scroll lateral (no se apila), con un punto
   menos de padding para aprovechar el ancho. */
@media (max-width: 782px) {
	.gen-se-front-table thead th {
		padding: 14px 16px;
	}
	.gen-se-front-table tbody td {
		padding: 12px 16px;
	}
	.gen-se-cat-title {
		font-size: 21px;
		line-height: 27px;
	}
}