/*
 * Cognitiva-AI — Estilos de la página Espacio docente
 * ---------------------------------------------------
 * IMPORTANTE: los valores hexadecimales de abajo son APROXIMADOS
 * a "petróleo / menta / naranja". Reemplázalos por los códigos
 * exactos de tu guía de marca (deberías tenerlos en el prototipo
 * /demo o en tu Personalizador → Colores) antes de subir a producción.
 */

:root {
	--cae-petroleo: #1B3A3A;   /* verde oscuro / petróleo — reemplazar por tu HEX real */
	--cae-menta: #A8E6CF;      /* menta — reemplazar por tu HEX real */
	--cae-naranja: #FF6B35;    /* naranja de marca — reemplazar por tu HEX real */
	--cae-fondo: #F4F5F0;      /* fondo claro, como en tu landing */
	--cae-texto: #1B1B1B;
	--cae-radio: 12px;
}

.cae-espacio-wrapper {
	font-family: 'Space Grotesk', sans-serif;
	background: var(--cae-fondo);
	min-height: 100vh;
}

/* Encabezado */
.cae-espacio-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 40px;
	background: #ffffff;
	border-bottom: 1px solid #e5e5e0;
}

.cae-espacio-logo {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--cae-petroleo);
	text-decoration: none;
}

.cae-logo-acento {
	color: var(--cae-naranja);
}

.cae-espacio-nav a {
	margin-left: 24px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.85rem;
	color: var(--cae-petroleo);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.cae-espacio-usuario {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.85rem;
	color: #6b6b6b;
}

.cae-espacio-nav a:hover {
	border-color: var(--cae-naranja);
}

/* Contenido: aquí cae el shortcode [cognitiva_espacio] */
.cae-espacio-contenido {
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 24px 80px;
}

/*
 * El shortcode [cognitiva_espacio] genera sus propios bloques
 * internos (tarjetas de sílabo, sesiones, etc.). Estas reglas
 * generales le dan una base de marca; si el shortcode ya trae
 * clases propias (ej. .cae-tarjeta, .cae-boton), personaliza
 * esas clases específicas en vez de estas genéricas.
 */
.cae-espacio-contenido h1,
.cae-espacio-contenido h2,
.cae-espacio-contenido h3 {
	font-family: 'Space Grotesk', sans-serif;
	color: var(--cae-petroleo);
}

.cae-espacio-contenido a.button,
.cae-espacio-contenido button,
.cae-espacio-contenido input[type="submit"] {
	background: var(--cae-naranja);
	color: #ffffff;
	border: none;
	border-radius: var(--cae-radio);
	padding: 10px 20px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	cursor: pointer;
}

.cae-espacio-contenido a.button:hover,
.cae-espacio-contenido button:hover {
	opacity: 0.9;
}

/* Responsive básico */
@media (max-width: 640px) {
	.cae-espacio-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 16px 20px;
	}
	.cae-espacio-nav a {
		margin-left: 0;
		margin-right: 20px;
	}
}