/*****************************************
REGISTRO_GRUPO.CSS

Desplegable personalizado del campo "Grupo de
trabajo" de registro.php (paso 1).

Motivo: un <select> nativo NO permite dar formato
distinto a partes del texto de una <option>. El
requerimiento es mostrar en cada opcion:

	NOMBRE CORTO   -> mayuscula + negrilla
	Nombre completo -> cursiva, fuente menor

Por eso el <select> se reemplaza por una lista
propia (div) + un <input type="hidden" id="grupo">
que conserva name="grupo" y el valor id_grupo, de
modo que el POST y la validacion AJAX siguen
funcionando igual que antes.

Mobile-first, igual que css/registro.css: los
estilos base son para celular.
******************************************/

.grupo-select{
	position:relative;
	width:100%;
}

/*****************************************
CAJA VISIBLE (reemplaza al <select>)
Replica exactamente las medidas de
.input-group select de css/registro.css
******************************************/

.grupo-trigger{

	width:100%;
	min-height:52px;

	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;

	border:1px solid #d9e3e3;
	outline:none;

	padding:8px 16px;

	border-radius:14px;

	background:#f5f7f8;

	color:#134040;

	font-family:inherit;
	font-size:15px;
	text-align:left;

	cursor:pointer;

	transition:.3s;
}

.grupo-trigger:hover{
	border-color:#c3d2d2;
}

.grupo-select.abierto .grupo-trigger,
.grupo-trigger:focus{

	border:1px solid var(--color-boton-fondo);
	background:white;

	box-shadow:0 0 0 4px color-mix(in srgb, var(--color-boton-fondo) 10%, transparent);
}

/* Texto dentro de la caja visible */

.grupo-trigger-texto{
	flex:1;
	min-width:0;
	line-height:1.35;
}

.grupo-placeholder{
	color:#6b7d7d;
	font-size:15px;
}

/* Flecha */

.grupo-flecha{
	flex:0 0 auto;
	width:0;
	height:0;
	border-left:5px solid transparent;
	border-right:5px solid transparent;
	border-top:6px solid #6b7d7d;
	transition:transform .2s;
}

.grupo-select.abierto .grupo-flecha{
	transform:rotate(180deg);
}

/*****************************************
LISTA DESPLEGABLE
******************************************/

.grupo-lista{

	display:none;

	position:absolute;
	top:calc(100% + 6px);
	left:0;
	right:0;
	z-index:60;

	max-height:280px;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;

	background:white;

	border:1px solid #d9e3e3;
	border-radius:14px;

	box-shadow:0 12px 30px rgba(0,0,0,.12);

	padding:6px;
}

.grupo-select.abierto .grupo-lista{
	display:block;
}

.grupo-item{

	padding:10px 12px;

	border-radius:10px;

	cursor:pointer;

	transition:background .15s;
}

.grupo-item + .grupo-item{
	border-top:1px solid #eef3f3;
}

.grupo-item:hover,
.grupo-item.resaltado{
	background:color-mix(in srgb, var(--color-boton-fondo) 8%, white);
}

.grupo-item.seleccionado{
	background:color-mix(in srgb, var(--color-boton-fondo) 14%, white);
}

/*****************************************
FORMATO PEDIDO POR EL USUARIO
corto  -> MAYUSCULA + NEGRILLA
full   -> cursiva, mas pequeno
******************************************/

.grupo-corto{

	display:block;

	text-transform:uppercase;
	font-weight:800;
	letter-spacing:.4px;

	font-size:14px;

	color:var(--color-texto-titulo);

	line-height:1.3;

	word-break:break-word;
}

.grupo-full{

	display:block;

	font-style:italic;
	font-weight:400;

	font-size:12px;

	color:var(--color-texto-secundario);

	line-height:1.35;

	margin-top:2px;

	word-break:break-word;
}

/* Dentro de la caja visible el texto va mas compacto */

.grupo-trigger .grupo-corto{
	font-size:14px;
}

.grupo-trigger .grupo-full{
	font-size:11.5px;
}