:root {
	--line-color: #ccc;
	--box-bg: #f9f9f9;
	--accent: #F77F00;
	font-size: 70%;
}

body { font-family: sans-serif; padding: 20px; background: #fff; }

/* Contenedor Principal */

.tree {
	margin-top: 250px;
	margin-bottom: 20px;
	overflow-x: scroll;
	
	display:flex;
	justify-content: space-between;

}

.tree ul {
	padding-top: 20px; 
	position: relative;
	display: flex;
	justify-content: center;
	transition: all 0.5s;
}

.tree li {
	float: left; text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
	transition: all 0.5s;
}

/* Líneas conectoras verticales */
.tree li::before, .tree li::after {
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 1px solid var(--line-color);
	width: 50%; height: 20px;
}
.tree li::after {
	right: auto; left: 50%;
	border-left: 1px solid var(--line-color);
}

/* Quitar conectores de nodos únicos */
.tree li:only-child::after, .tree li:only-child::before { display: none; }
.tree li:only-child { padding-top: 0; }
.tree li:first-child::before, .tree li:last-child::after { border: 0 none; }
.tree li:last-child::before { border-right: 1px solid var(--line-color); border-radius: 0 5px 0 0; }
.tree li:first-child::after { border-radius: 5px 0 0 0; }

/* Línea que baja del padre */
.tree ul ul::before {
	content: '';
	position: absolute; top: 0; left: 50%;
	border-left: 1px solid var(--line-color);
	width: 0; height: 20px;
}

/* Estilo de las Cajas */
.tree li div {
	border: 1px solid var(--line-color);
	padding: 10px 15px;
	text-decoration: none;
	color: #333;
	display: inline-block;
	border-radius: 12px;
	background: var(--box-bg);
	transition: all 0.5s;
}

.tree li div:hover {
	background: var(--accent);
	color: #fff;
	border: 1px solid var(--accent);

}