/* =========================================================================
   Front de aula64.com. Basado en el front de desenvolupa.com.
   Los colores salen de las variables: cambiar la marca es cambiar :root.

   Sin el verde de desenvolupa (25/10/2026): las variables toman los colores
   del tema (`--bs-*`, de la paleta de cada aula, que se carga después; una
   variable se resuelve al usarla, así que el orden de las hojas no importa).
   Lo usan las piezas comunes que el tema no tiene (comentarios, subpáginas,
   adjuntos). El segundo valor, por si no hubiera tema: el azul de aula64.
   ========================================================================= */

:root {
	--marca: var(--bs-primary, #3f78e0);
	--marca-oscura: color-mix(in srgb, var(--bs-primary, #3f78e0) 70%, #0b2350);
	--marca-clara: color-mix(in srgb, var(--bs-primary, #3f78e0) 8%, #fff);
	--acento: var(--bs-primary, #3f78e0);

	--texto: var(--bs-body-color, #343f52);
	--texto-suave: #60697b;
	--borde: rgba(164, 174, 198, .25);
	--fondo: #ffffff;
	--fondo-alt: #f6f7f9;

	--ancho: 1120px;
	--radio: 10px;
	--sombra: 0 1px 3px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .05);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	color: var(--texto);
	background: var(--fondo);
	font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }

a { color: var(--marca); }
a:hover { color: var(--marca-oscura); }
img { max-width: 100%; height: auto; }

h1 { font-size: 2.1rem; line-height: 1.2; margin: 0 0 .35em; letter-spacing: -.01em; }
h2 { font-size: 1.4rem; line-height: 1.3; margin: 1.6em 0 .6em; }
h3 { font-size: 1.1rem; line-height: 1.35; margin: 1.2em 0 .4em; }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 14px; background: #fff; color: var(--marca); }
.saltar:focus { left: 8px; }

/* ============================ Cabecera ============================ */

.cabecera-sitio {
	background: var(--marca);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 10;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.cabecera-sitio .contenedor {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 68px;
	flex-wrap: wrap;
}

.logo {
	color: #fff;
	text-decoration: none;
	font-size: 1.3rem;
	letter-spacing: -.02em;
	white-space: nowrap;
}
.logo:hover { color: #fff; }
.logo .pieza { color: var(--acento); font-size: 1.5rem; margin-right: 2px; }
.logo em { font-style: normal; opacity: .75; }
.logo strong { color: var(--acento); font-weight: 700; }

.abrir-menu {
	display: none;
	margin-left: auto;
	background: none;
	border: 0;
	color: #fff;
	font-size: 1.6rem;
	cursor: pointer;
}

.navegacion { margin-left: auto; }

ul.menu { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
ul.menu > li { position: relative; }
ul.menu a {
	display: block;
	padding: 9px 14px;
	color: rgba(255, 255, 255, .9);
	text-decoration: none;
	border-radius: 6px;
}
ul.menu > li > a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
ul.menu > li.activo > a { background: var(--marca-oscura); color: #fff; }
ul.menu > li.con-hijos > a::after { content: " ▾"; font-size: .75em; opacity: .7; }

ul.submenu {
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 230px;
	max-width: 320px;
	background: #fff;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
	list-style: none;
	margin: 0;
	padding: 6px;
	display: none;
}
ul.menu > li:hover > ul.submenu,
ul.menu > li:focus-within > ul.submenu { display: block; }
ul.submenu a { color: var(--texto); padding: 8px 12px; }
ul.submenu a:hover { background: var(--marca-clara); color: var(--marca-oscura); }
ul.submenu a[aria-current="page"] { font-weight: 600; color: var(--marca); }
ul.submenu li.ver-todas a { font-style: italic; color: var(--texto-suave); border-top: 1px solid var(--borde); margin-top: 4px; }

/* ============================ Contenido ============================ */

main.contenedor { padding-top: 32px; padding-bottom: 56px; min-height: 55vh; }

.migas { font-size: .9rem; color: var(--texto-suave); margin-bottom: 18px; }
.migas a { color: var(--texto-suave); }

.cabecera-pagina { margin-bottom: 22px; }
.subtitulo { font-size: 1.18rem; color: var(--texto-suave); margin: 0 0 .4em; }
.datos-pagina { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.fecha { color: var(--texto-suave); font-size: .9rem; margin: 0; }
.cuando { color: var(--marca-oscura); font-weight: 600; font-size: .95rem; margin: 0; }
.fuente { color: var(--texto-suave); font-size: .92rem; font-style: italic; }

.pagina { margin-bottom: 12px; }
.pagina.estrecha { max-width: 760px; }
.imagen-principal { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--radio); margin-bottom: 26px; }

.texto { font-size: 1.05rem; overflow-wrap: break-word; }
.texto img { border-radius: var(--radio); }
.texto table { width: 100%; border-collapse: collapse; margin: 1em 0; display: block; overflow-x: auto; }
.texto th, .texto td { border: 1px solid var(--borde); padding: 8px 12px; text-align: left; }
.texto blockquote { margin: 1.2em 0; padding: .6em 1.1em; border-left: 4px solid var(--acento); background: var(--fondo-alt); }

.vacio { color: var(--texto-suave); font-style: italic; }

.bloque { margin: 36px 0; }
.titulo-bloque { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.titulo-bloque h2 { margin-bottom: .6em; }

.cabecera-seccion { border-bottom: 3px solid var(--marca); padding-bottom: 14px; margin-bottom: 24px; }
.cabecera-seccion h1 { margin-bottom: .15em; }
.cuenta-seccion { color: var(--texto-suave); font-size: .85rem; font-weight: 500; margin: .2em 0 0; }
h2 .cuenta-seccion { margin-left: 6px; }
.intro-seccion { margin-bottom: 28px; }

.boton-front {
	display: inline-block;
	padding: 10px 20px;
	background: var(--marca);
	color: #fff;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
}
.boton-front:hover { background: var(--marca-oscura); color: #fff; }

.aviso-pagina { text-align: center; margin: 40px auto; }
.jaque { font-size: 4rem; line-height: 1; margin: 0; color: var(--marca); }

/* ============================ Portada ============================ */

.destacados { display: grid; gap: 18px; margin-bottom: 32px; }
.destacado { position: relative; display: block; border-radius: var(--radio); overflow: hidden; color: #fff; text-decoration: none; }
.destacado img { width: 100%; max-height: 460px; object-fit: cover; display: block; }
.destacado .texto-destacado {
	position: absolute;
	inset: auto 0 0 0;
	padding: 26px;
	background: linear-gradient(transparent, rgba(0, 0, 0, .78));
}
.destacado h2 { margin: 0 0 .2em; color: #fff; font-size: 1.6rem; }
.destacado p { margin: 0; opacity: .92; max-width: 760px; }
.destacado:hover { color: #fff; }

.bienvenida { margin-bottom: 12px; }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

/* ============================ Tarjetas y listas ============================ */

.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }

.tarjeta {
	display: flex;
	flex-direction: column;
	background: var(--fondo);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	overflow: hidden;
	transition: box-shadow .15s, transform .15s;
}
.tarjeta:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.imagen-tarjeta { display: block; aspect-ratio: 4 / 3; background: var(--marca-clara); }
.imagen-tarjeta img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imagen-tarjeta.sin-imagen { display: flex; align-items: center; justify-content: center; color: var(--marca); font-size: 2.6rem; text-decoration: none; opacity: .55; }
.cuerpo-tarjeta { padding: 14px 16px 18px; }
.cuerpo-tarjeta h3 { margin: .15em 0 .35em; font-size: 1.05rem; }
.cuerpo-tarjeta h3 a { color: var(--texto); text-decoration: none; }
.cuerpo-tarjeta h3 a:hover { color: var(--marca); text-decoration: underline; }
.cuerpo-tarjeta p { margin: 0; font-size: .93rem; color: var(--texto-suave); }
.cuerpo-tarjeta .fecha { margin-bottom: .2em; }

.lista-paginas { list-style: none; margin: 0; padding: 0; }
.lista-paginas li { padding: 12px 0; border-bottom: 1px solid var(--borde); }
.lista-paginas li > a { font-weight: 600; text-decoration: none; }
.lista-paginas li > a:hover { text-decoration: underline; }
.lista-paginas .fecha { margin-left: 8px; }
.lista-paginas p { margin: .2em 0 0; color: var(--texto-suave); font-size: .95rem; }

.lista-secciones { list-style: none; padding: 0; margin: 0; }
.lista-secciones li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.lista-secciones a { text-decoration: none; font-weight: 600; }
.lista-secciones a:hover { text-decoration: underline; }

.cuenta {
	margin-left: auto;
	background: var(--marca-clara);
	color: var(--marca-oscura);
	border-radius: 999px;
	padding: 1px 10px;
	font-size: .8rem;
	font-weight: 600;
}
.lista-paginas .cuenta { margin-left: 8px; }

.paginacion-front { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 30px; justify-content: center; }
.paginacion-front a, .paginacion-front span {
	min-width: 40px;
	padding: 7px 12px;
	text-align: center;
	border: 1px solid var(--borde);
	border-radius: 6px;
	text-decoration: none;
	color: var(--texto);
}
.paginacion-front a:hover { border-color: var(--marca); color: var(--marca); }
.paginacion-front .actual { background: var(--marca); border-color: var(--marca); color: #fff; }
.paginacion-front .salto { color: var(--texto-suave); }

/* ============================ Agenda ============================ */

.evento { display: flex; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--borde); }
.evento .cuando { min-width: 190px; }
.evento h3 { margin: 0 0 .2em; }
.evento h3 a { text-decoration: none; }
.evento h3 a:hover { text-decoration: underline; }
.evento p { margin: 0; }
.evento.compacto { display: block; padding: 10px 0; }
.evento.compacto h3 { font-size: 1rem; }
.pasados { opacity: .8; }

/* ============================ Adjuntos ============================ */

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 28px 0; }
.galeria figure { margin: 0; }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); display: block; }
.galeria figcaption { font-size: .88rem; color: var(--texto-suave); padding-top: 6px; }

.adjuntos { margin: 26px 0; }
.adjuntos h2 { font-size: 1.15rem; }
.adjuntos ul { padding-left: 20px; }
.adjuntos li { margin-bottom: 6px; }
.adjuntos .tipo { font-size: .72rem; font-weight: 700; color: var(--texto-suave); border: 1px solid var(--borde); border-radius: 4px; padding: 0 5px; margin-left: 6px; }

/* ============================ Comentarios y perfil ============================ */

.comentarios { margin-top: 40px; border-top: 1px solid var(--borde); padding-top: 10px; }
.comentario { padding: 12px 0; border-bottom: 1px solid var(--borde); }
.comentario .meta { color: var(--texto-suave); font-size: .9rem; margin: 0 0 .3em; }
.comentario p { margin: 0; }

.ficha-perfil { display: flex; gap: 22px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--borde); margin-bottom: 20px; }
.ficha-perfil h2 { margin: 0 0 .2em; }
.ficha-perfil .dato { color: var(--texto-suave); margin: 0; }
.avatar {
	width: 88px; height: 88px; flex: 0 0 88px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--marca-clara); color: var(--marca-oscura);
	font-size: 2.2rem; font-weight: 700;
}

/* ============================ Cuenta y formularios ============================ */

.cuenta-sitio { display: flex; align-items: center; gap: 10px; }
.cuenta-sitio a, .cuenta-sitio .quien { color: #fff; text-decoration: none; font-weight: 600; }
.cuenta-sitio a:hover { text-decoration: underline; color: #fff; }
.cuenta-sitio form { margin: 0; }
.cuenta-sitio button {
	padding: 5px 12px;
	font: inherit;
	font-size: .9rem;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 6px;
	cursor: pointer;
}
.cuenta-sitio button:hover { background: rgba(255, 255, 255, .12); }

.aviso-front { padding: 12px 16px; border-radius: var(--radio); margin: 0 0 18px; border: 1px solid; }
.aviso-front.exito { background: #eaf5ec; border-color: #2d7a46; color: #1f5a33; overflow-wrap: anywhere; }
.aviso-front.error { background: #fbeceb; border-color: #a8322d; color: #8a2824; }

.formulario-front { max-width: 560px; margin-top: 18px; }
.campo-front { margin: 0 0 16px; }
.campo-front label { display: block; font-weight: 600; margin-bottom: 5px; }
.campo-front input,
.campo-front textarea {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	color: inherit;
	border: 1px solid var(--borde);
	border-radius: 8px;
	background: #fff;
}
.campo-front input:focus, .campo-front textarea:focus { outline: 2px solid var(--marca); outline-offset: -1px; }
.campo-front.con-error input, .campo-front.con-error textarea { border-color: #a8322d; }
.error-front { color: #a8322d; font-size: .9rem; margin: 5px 0 0; }
.ayuda-front { color: var(--texto-suave); font-size: .92rem; }
.formulario-front .boton-front { border: 0; font: inherit; font-weight: 600; cursor: pointer; }

/* Campo trampa para robots: fuera de la vista, pero no display:none (algunos robots lo detectan). */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.datos-perfil { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0 0 12px; }
.datos-perfil dt { color: var(--texto-suave); font-weight: 600; }
.datos-perfil dd { margin: 0; }

.pagina.cuenta { margin-top: 12px; }

/* ============================ Pie ============================ */

.pie-sitio { background: var(--fondo-alt); border-top: 1px solid var(--borde); padding: 28px 0; margin-top: 40px; }
.enlaces-pie { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-bottom: 12px; }
.enlaces-pie a { color: var(--texto-suave); text-decoration: none; font-size: .92rem; }
.enlaces-pie a:hover { color: var(--marca); text-decoration: underline; }
.copyright { text-align: center; color: var(--texto-suave); font-size: .9rem; margin: 0; }

/* ============================ Responsive ============================ */

@media (max-width: 860px) {
	.dos-columnas { grid-template-columns: 1fr; gap: 0; }
	h1 { font-size: 1.8rem; }
}

@media (max-width: 720px) {
	.abrir-menu { display: block; }
	.navegacion { display: none; width: 100%; margin: 0 0 12px; }
	body.menu-abierto .navegacion { display: block; }
	ul.menu { flex-direction: column; }
	ul.menu > li.con-hijos > a::after { content: ""; }
	ul.submenu { position: static; display: block; box-shadow: none; border: 0; padding: 0 0 0 14px; background: transparent; min-width: 0; max-width: none; }
	ul.submenu a { color: rgba(255, 255, 255, .8); padding: 6px 12px; }
	ul.submenu a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
	ul.submenu li.ver-todas a { color: rgba(255, 255, 255, .7); border-top: 0; }
	.evento { flex-direction: column; gap: 2px; }
	.evento .cuando { min-width: 0; }
	.destacado .texto-destacado { position: static; background: var(--marca-oscura); }
}

/* El círculo «DEV» de dev.aula64.com (D6, 01/11/2026): abajo a la izquierda,
   por encima de todo y sin tapar clics. Solo sale con entorno = dev
   (app/plantillas/_marca-dev.php). */
.marca-dev {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 2147483000;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #f78b1f;
	color: #fff;
	font: 700 15px/56px system-ui, sans-serif;
	letter-spacing: .06em;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
	pointer-events: none;
}

/* En local, «LOCAL» en verde y con letra algo menor, que es más larga. */
.marca-dev-local {
	background: #2e9e5b;
	font-size: 11px;
	letter-spacing: .02em;
}