/**
 * INEC WPLMS UI — Tokens de marca y compatibilidad de tema.
 *
 * Única fuente de verdad para el color de marca del sitio /app.
 * Para cambiar el color de marca institucional, editar SOLO las variables en este archivo.
 */
:root {
	--inec-marca: #f16645;
	--inec-marca-fuerte: #d9482a;
	--inec-marca-suave: #fdece8;
	--inec-marca-texto: #ffffff;
	--inec-adminbar: 0px;

	/* Tipografia del menu lateral: unica fuente para menu + botones Filtros/Orden */
	--inec-menu-fs: 14px;
	--inec-menu-lh: 1.3;
}

html[data-inecpanel-movil] {
	--inec-menu-fs: 13px;
}

body.admin-bar,
html:has(body.admin-bar) {
	--inec-adminbar: 32px;
}

@media (max-width: 782px) {
	body.admin-bar,
	html:has(body.admin-bar) {
		--inec-adminbar: 46px;
	}
}

html.inec-oscuro, html.inecpanel-oscuro {
	--inec-marca-fuerte: #ff9a80;
	--inec-marca-suave: #4a2419;
}

/* Override de la variable nativa de vibebp en todo el /app (claro y oscuro) */
html body,
html body .vibebp_myprofile,
html body .vibebp_myprofile.dark_theme {
	--primary: var(--inec-marca);
}

/* Botones en marca */
html body .button.is-primary:hover,
html body .button.is-primary:focus,
html body .button.is-primary:focus-visible,
html body .button.is-primary:active {
	background-color: color-mix(in srgb, var(--inec-marca) 85%, #000);
	border-color: color-mix(in srgb, var(--inec-marca) 85%, #000);
	color: var(--inec-marca-texto);
}

html body .button:focus {
	border-color: var(--inec-marca);
}

html body .inec-alta__boton {
	background-color: var(--inec-marca);
	border-color: var(--inec-marca);
	color: var(--inec-marca-texto);
}

html body .inec-alta__boton:hover,
html body .inec-alta__boton:focus,
html body .inec-alta__boton:focus-visible,
html body .inec-alta__boton:active {
	background-color: color-mix(in srgb, var(--inec-marca) 85%, #000);
	border-color: color-mix(in srgb, var(--inec-marca) 85%, #000);
	color: var(--inec-marca-texto);
}

/* Barra de desplazamiento común */
html body #vibebp_member,
html .inecpanel-sb,
.inec-leccion .ilc-trans {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, currentColor 25%, transparent) transparent;
}

html body #vibebp_member::-webkit-scrollbar,
html .inecpanel-sb::-webkit-scrollbar,
.inec-leccion .ilc-trans::-webkit-scrollbar {
	width: 4px;
	height: 4px;
	background: transparent;
}

html body #vibebp_member::-webkit-scrollbar-thumb,
html .inecpanel-sb::-webkit-scrollbar-thumb,
.inec-leccion .ilc-trans::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 4px;
}

html body #vibebp_member::-webkit-scrollbar-track,
html body #vibebp_member::-webkit-scrollbar-corner,
html .inecpanel-sb::-webkit-scrollbar-track,
html .inecpanel-sb::-webkit-scrollbar-corner,
.inec-leccion .ilc-trans::-webkit-scrollbar-track,
.inec-leccion .ilc-trans::-webkit-scrollbar-corner {
	background: transparent;
}

/* En oscuro #vibebp_member hereda texto #444: el pulgar se perdía sobre el fondo. */
html.inec-oscuro body #vibebp_member,
html.inecpanel-oscuro body #vibebp_member {
	scrollbar-color: color-mix(in srgb, #e8eaed 25%, transparent) transparent;
}

html.inec-oscuro body #vibebp_member::-webkit-scrollbar-thumb,
html.inecpanel-oscuro body #vibebp_member::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, #e8eaed 25%, transparent);
}

html body #vibebp_member::-webkit-scrollbar-button,
html .inecpanel-sb::-webkit-scrollbar-button,
.inec-leccion .ilc-trans::-webkit-scrollbar-button {
	display: none;
}