/*
Theme Name: Campus Vivo
Theme URI: https://github.com/juanreuter/aula-envivo
Author: Campus Vivo
Description: Tema sobrio y profesional para sitios con el campus virtual "campus-vivo". Toma el logo y el color principal de Campus → Apariencia. Portada, encabezado y pie editables desde WordPress.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.2
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: campus-vivo-tema
*/

/* Detalles que theme.json no cubre. */

:root {
	--cvt-radio: 8px;
	--cvt-oscuro: #0a0a0a;
	--cvt-oscuro-texto: #f5f5f0;
	--cvt-oscuro-suave: #b8b8b2;
}

/* Campus → Apariencia → Bordes rectos. */
.cvt-rectos {
	--cvt-radio: 2px;
}

.cvt-encabezado {
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

/* El logo se ajusta por alto: así entran bien tanto los cuadrados como los horizontales. */
.cvt-encabezado .wp-block-site-logo img {
	width: auto !important;
	height: 44px;
	max-width: min(200px, 40vw);
	object-fit: contain;
	object-position: left center;
}

/* Celular: el nombre del sitio y el botón "Ingresar al campus" en una sola línea. */
.cvt-encabezado .cv-saludo__ingresar {
	white-space: nowrap;
}

@media (max-width: 600px) {
	.cvt-encabezado .wp-block-site-title {
		font-size: 1.05rem;
	}

	.cvt-encabezado .cv-saludo__ingresar {
		padding: 0.45em 0.9em;
		font-size: 0.9rem;
	}
}

/* Celular angosto con logo: el logo ya identifica el sitio, el nombre se oculta para que entre el botón. */
@media (max-width: 480px) {
	.cvt-encabezado:has(.wp-block-site-logo img) .wp-block-site-title {
		display: none;
	}

	.cvt-encabezado .wp-block-site-logo img {
		height: 30px;
		max-width: 34vw;
	}
}

.cvt-portada {
	position: relative;
	overflow: hidden;
}

/* Trama suave de puntos en la portada: le da textura sin imágenes. */
.cvt-portada::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
	background-size: 22px 22px;
	pointer-events: none;
}

.cvt-portada > * {
	position: relative;
	z-index: 1;
}

.cvt-volanta {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
}

.cvt-paso__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--primario);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1;
}

.cvt-tarjeta {
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: calc(var(--cvt-radio) * 1.5);
	background: var(--wp--preset--color--blanco);
}

.cvt-pie a {
	text-decoration: none;
}

.cvt-pie__linea {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	background: none;
}

.cvt-pie a:hover {
	text-decoration: underline;
}

/* Botones de contorno sobre fondo oscuro. */
.cvt-portada .is-style-outline .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
	color: inherit;
}

:where(.wp-site-blocks) :focus-visible {
	outline: 2px solid var(--wp--preset--color--primario);
	outline-offset: 3px;
}

/* --- Barra "Volver a la web principal" ------------------------------------ */

.cvt-barra-sitio {
	background: var(--wp--preset--color--fondo-suave);
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.cvt-barra-sitio a {
	color: var(--wp--preset--color--texto);
	text-decoration: none;
}

.cvt-barra-sitio a:hover {
	text-decoration: underline;
}

/* --- Campus → Apariencia → Encabezado y pie oscuros ------------------------ */

.cvt-oscuro .cvt-barra-sitio {
	background: #000;
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.cvt-oscuro .cvt-barra-sitio a {
	color: var(--cvt-oscuro-suave);
}

.cvt-oscuro .cvt-encabezado,
.cvt-oscuro .cvt-pie,
.cvt-oscuro .cvt-portada {
	background-color: var(--cvt-oscuro) !important;
	color: var(--cvt-oscuro-texto);
}

.cvt-oscuro .cvt-encabezado {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

.cvt-oscuro .cvt-encabezado .wp-block-site-title a,
.cvt-oscuro .cvt-encabezado .wp-block-navigation,
.cvt-oscuro .cvt-encabezado .wp-block-navigation a {
	color: var(--cvt-oscuro-texto);
}

/* "Ingresar al campus": el texto en claro, el borde en el color principal. */
.cvt-oscuro .cvt-encabezado .cv-saludo__ingresar,
.cvt-oscuro .cvt-encabezado .cv-saludo__boton {
	border-color: var(--wp--preset--color--primario);
	color: var(--cvt-oscuro-texto);
}

/* Menú del celular: también oscuro. */
.cvt-oscuro .cvt-encabezado .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--cvt-oscuro) !important;
	color: var(--cvt-oscuro-texto) !important;
}

/* La portada oscura lleva una grilla fina en vez de la trama de puntos. */
.cvt-oscuro .cvt-portada::after {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 48px 48px;
}

.cvt-oscuro .cvt-portada .cvt-volanta {
	color: var(--cvt-oscuro-suave) !important;
}

.cvt-oscuro .cvt-portada .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--wp--preset--color--primario) !important;
	color: var(--wp--preset--color--blanco) !important;
}

/* Con bordes rectos, el saludo del encabezado ("¡Hola, Ana!") tampoco va redondeado. */
.cvt-rectos .cv-saludo__boton,
.cvt-rectos .cv-saludo__ingresar,
.cvt-rectos .cv-saludo__menu,
.cvt-rectos .cvt-paso__numero {
	border-radius: var(--cvt-radio);
}

/* --- Aviso de sitio de demostración ---------------------------------------- */

.cvt-demo {
	border-block: 1px solid var(--wp--preset--color--borde);
}

.cvt-demo p {
	margin: 0;
}