/*
 * Modo Switchear: el portal con la paleta del evento hasta que termine.
 * Pedido de Julian (13/10, "que quede todo pintado de violeta") y Fede: asi
 * combina con las guias de agenda, alojamiento y traslados. Despues del evento
 * se vuelve a los colores de UNAJE con `desplegar.sh modo-unaje`.
 *
 * Se carga solo con la opcion unaje_modo = switchear (functions.php). Pisa las
 * variables --unaje-*, de las que salen los colores de Astra y del plugin.
 *
 * Colores del manual de Switchear (kit switchear-brand): Emprender #312163,
 * Cambio #6903df, Actitud #4500b8, Accion #e615a3, Innovacion #ff7f00,
 * Parrafos #606060, Fondos #f1f0f7. Sobre blanco: Cambio 7,8 (AA, botones y
 * links), Emprender 13,7, Parrafos 6,3. Accion (4,2) va solo en iconos y
 * trazos. Sobre Emprender: Innovacion 5,4 (AA). El borde #ddd6f0 es derivado
 * nuestro, el mismo de las guias. Logo blanco: el "UNAJE | 25 años" que usan
 * las guias de UNAJE.
 */

:root:root {
	--unaje-turquesa: #e615a3;     /* Accion: iconos, trazos, foco */
	--unaje-verde: #ff7f00;        /* Innovacion: etiquetas y acentos */
	--unaje-accion: #6903df;       /* Cambio: links y botones */
	--unaje-accion-hover: #4500b8; /* Actitud */
	--unaje-tinta: #312163;        /* Emprender: titulos */
	--unaje-texto-2: #606060;      /* Parrafos */
	--unaje-fondo-suave: #f1f0f7;  /* Fondos */
	--unaje-borde: #ddd6f0;        /* derivado */
}

/* ---- Cabecera en violeta, con las tres barras de las guias abajo ------- */

.site-header .ast-primary-header-bar,
.site-header .ast-mobile-header-wrap .ast-primary-header-bar {
	background-color: #312163;
}

.site-header .ast-primary-header-bar {
	border-bottom: 4px solid transparent;
	border-image: linear-gradient(90deg, #6903df 0 50%, #e615a3 50% 80%, #ff7f00 80% 100%) 1;
}

/* Con body.modo-switchear adelante: Astra pinta el menu y el titulo con
   selectores de tres clases (.ast-builder-menu-1 .menu-item > .menu-link). */
body.modo-switchear .site-header .site-title a,
body.modo-switchear .site-header .site-title a:hover,
body.modo-switchear .site-header .ast-builder-menu-1 .menu-item > .menu-link,
body.modo-switchear .site-header .ast-builder-menu-1 .menu-item > .ast-menu-toggle,
body.modo-switchear .site-header .main-header-menu .menu-link,
body.modo-switchear .site-header .menu-toggle,
body.modo-switchear .site-header .menu-toggle .ast-mobile-svg {
	color: #ffffff;
	fill: #ffffff;
}

body.modo-switchear .site-header .ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
body.modo-switchear .site-header .ast-builder-menu-1 .menu-link:hover,
body.modo-switchear .site-header .ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link,
body.modo-switchear .site-header .main-header-menu .current-menu-item > .menu-link {
	color: #ff7f00;
}

/* El menu desplegable del celular queda claro: texto en Emprender y el
   actual en Cambio (el naranja sobre fondo claro no llega a AA). */
body.modo-switchear .site-header .ast-mobile-header-content .menu-item > .menu-link,
body.modo-switchear .site-header .ast-mobile-header-content .menu-item > .ast-menu-toggle {
	color: #312163;
}

body.modo-switchear .site-header .ast-mobile-header-content .menu-item.current-menu-item > .menu-link,
body.modo-switchear .site-header .ast-mobile-header-content .menu-link:hover {
	color: #6903df;
}

body.modo-switchear .site-header a:focus-visible,
body.modo-switchear .site-header button:focus-visible {
	outline-color: #ff7f00;
}

/* En escritorio, logo y menu en un renglon: el logo "UNAJE | 25" es mas ancho
   que el de UNAJE y el menu tiene 8 secciones. */
@media (min-width: 922px) {
	body.modo-switchear .site-header .custom-logo {
		max-height: 36px;
	}
	body.modo-switchear .site-header .ast-builder-menu-1 .menu-item > .menu-link {
		padding-left: 0.7em;
		padding-right: 0.7em;
	}
}

/* Entre 922 y 1199 px no entran los tres: el texto "Portal de Socios/as" se va. */
@media (min-width: 922px) and (max-width: 1199px) {
	body.modo-switchear .site-header .ast-site-title-wrap {
		display: none;
	}
}

@media (min-width: 922px) and (max-width: 1099px) {
	body.modo-switchear .site-header .ast-builder-menu-1 .menu-item > .menu-link {
		padding-left: 0.45em;
		padding-right: 0.45em;
		font-size: 15px;
	}
}

/* La etiqueta de la portada ("Switchear 2026 · 12 al 14 de noviembre"), en
   magenta con letra blanca como el boton "Quiero mi entrada" de la landing.
   Pedido de Agustin (16/10): el naranja sobre el violeta no le gustaba.
   Blanco sobre Accion da 4,2: AA solo para texto grande, igual que en la
   landing. */
body.modo-switchear .unaje-portada .unaje-etiqueta {
	color: #ffffff;
	background: #e615a3;
}

/* El naranja (Innovacion) pasa al aviso de acceso de la portada: es una
   advertencia, y el naranja se lee como tal. Fondo claro derivado nuestro;
   el texto sigue en Emprender (13+ de contraste) y el link en Cambio. */
body.modo-switchear .unaje-portada .unaje-portada__acceso {
	background: #fff3e6;
	border-left-color: #ff7f00;
}

/* ---- Lo que el plugin pinta con colores fijos de UNAJE ---------------- */
/* Revisado pantalla por pantalla el 16/10. El verde de "guardado" y el rojo
   de error quedan: son colores de estado, no de marca. */

/* Etiquetas claras ("Miembro de UNAJE" en el perfil, "Vos" en el
   directorio): violeta muy claro, derivado nuestro, en vez del verde. */
body.modo-switchear .unaje-perfil__insignia,
body.modo-switchear .unaje-socio__vos {
	color: #312163;
	background: #ece6f8;
}

/* "Socio" en Mis entradas: la misma capsula que la etiqueta de la portada. */
body.modo-switchear .unaje-entrada__tipo {
	color: #ffffff;
	background: #e615a3;
}

/* Los avisos (amarillo palido en el plugin) como el de la portada: fondo
   naranja muy claro y borde naranja. Texto en Emprender. */
body.modo-switchear .unaje-viaje__aviso--aviso,
body.modo-switchear .unaje-viaje__confirmar {
	color: #312163;
	background: #fff3e6;
	border-left: 4px solid #ff7f00;
}