/* Estos tokens son el contrato compartido con shared/css/shell.css (componentes comunes del
   portal): cualquier utilidad nueva debe definir este mismo juego de variables en su propio
   :root (con sus propios valores si quiere otra paleta) para que la barra de utilidades, el
   pie de página, etc. hereden el color correcto sin tocar shell.css. Ver CreaGML/src/css/estilos.css
   para otro ejemplo real ya funcionando. */
:root {
	--color-fondo: #f4f5f7;
	--color-panel: #ffffff;
	--color-borde: #d7dbe0;
	--color-texto: #1f2733;
	--color-texto-suave: #5c6672;
	--color-acento: #2f6f4f;
	--color-acento-hover: #255a40;
}

* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
	margin: 0;
}

body {
	font-family: "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--color-texto);
	background: var(--color-fondo);
	display: flex;
	flex-direction: column;
}

/* Cabecera: misma estructura que cualquier utilidad -- centralizada en shared/css/shell.css como
   .app-header (ver ese fichero). Aquí solo el token de color (arriba) decide su aspecto. */

.portal-main {
	flex: 1 1 auto;
	padding: 24px;
}

.portal-main__intro {
	color: var(--color-texto-suave);
	font-size: 15px;
	line-height: 1.6;
	max-width: 640px;
	margin: 0 0 24px;
}

/* Desplegable "Proyectos ▾" de la portada (2026-09-09) -- a diferencia del que ya tiene cada
   módulo (que solo ve SUS proyectos), este es un acceso rápido SIN filtrar a los de cualquier
   módulo (ver shared/js/proyectos.js), así que cada fila lleva una etiqueta de color con el
   nombre del módulo al que pertenece. */
.selector-proyectos-global {
	position: relative;
}

.selector-proyectos-global__boton {
	background: transparent;
	border: 1px solid #ffffff;
	color: #ffffff;
	font-size: 13px;
	padding: 6px 12px;
	border-radius: 4px;
	cursor: pointer;
}

.selector-proyectos-global__boton:hover {
	background: rgba(255, 255, 255, 0.15);
}

.lista-proyectos-global {
	position: absolute;
	left: 0;
	top: calc(100% + 4px);
	z-index: 1300;
	min-width: 260px;
	max-height: 320px;
	overflow-y: auto;
	background: var(--color-panel);
	border: 1px solid var(--color-borde);
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	padding: 4px;
}

.lista-proyectos-global__vacio {
	font-size: 12px;
	color: var(--color-texto-suave);
	font-style: italic;
	margin: 6px;
}

.lista-proyectos-global__fila {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	width: 100%;
	text-align: left;
	padding: 7px 8px;
	border-radius: 4px;
	color: var(--color-texto);
	text-decoration: none;
}

.lista-proyectos-global__fila:hover {
	background: var(--color-fondo);
}

.lista-proyectos-global__nombre {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.etiqueta-modulo {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 10px;
	border: 1px solid;
}