/* =========================================================================
   Organigrama FPT — widget de Elementor
   Árbol jerárquico con líneas conectoras. Responsive:
   - Escritorio/tablet: árbol horizontal (de arriba hacia abajo).
   - Móvil (<= 767px): árbol vertical apilado con conectores a la izquierda.
   Colores configurables vía variables CSS (las define el widget).
   ========================================================================= */

.fpt-orgchart-wrap {
	/* Permite desplazamiento horizontal si el organigrama es muy ancho. */
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}

.fpt-orgchart {
	--oc-node-bg: #1B3A66;
	--oc-node-color: #FFFFFF;
	--oc-role-color: #CFE0F2;
	--oc-border: #1B3A66;
	--oc-line: #9DB7D6;
	--oc-gap: 22px;
	display: inline-block;
	min-width: 100%;
	text-align: center;
	box-sizing: border-box;
	padding: 4px;
}

.fpt-orgchart ul {
	position: relative;
	padding: var(--oc-gap) 0 0 0;
	margin: 0;
	display: flex;
	justify-content: center;
	list-style: none;
}

.fpt-orgchart li {
	list-style: none;
	position: relative;
	padding: var(--oc-gap) 10px 0 10px;
	box-sizing: border-box;
}

/* Conectores: línea horizontal superior a cada hijo. */
.fpt-orgchart li::before,
.fpt-orgchart li::after {
	content: '';
	position: absolute;
	top: 0;
	right: 50%;
	width: 50%;
	height: var(--oc-gap);
	border-top: 2px solid var(--oc-line);
}

.fpt-orgchart li::after {
	right: auto;
	left: 50%;
	border-left: 2px solid var(--oc-line);
}

/* Un único hijo: solo línea vertical, sin tramos horizontales. */
.fpt-orgchart li:only-child::before,
.fpt-orgchart li:only-child::after {
	display: none;
}
.fpt-orgchart li:only-child {
	padding-top: var(--oc-gap);
}

/* Extremos: recorta las líneas horizontales sobrantes. */
.fpt-orgchart li:first-child::before,
.fpt-orgchart li:last-child::after {
	border: 0 none;
}
.fpt-orgchart li:last-child::before {
	border-right: 2px solid var(--oc-line);
	border-radius: 0 6px 0 0;
}
.fpt-orgchart li:first-child::after {
	border-radius: 6px 0 0 0;
}

/* Línea vertical que baja desde un padre hacia la fila de hijos. */
.fpt-orgchart ul ul::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	border-left: 2px solid var(--oc-line);
	width: 0;
	height: var(--oc-gap);
}

/* Recuadro (nodo). */
.fpt-orgchart .oc-node {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 180px;
	max-width: 80vw;
	padding: 12px 14px;
	background: var(--oc-node-bg);
	color: var(--oc-node-color);
	border: 1px solid var(--oc-border);
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	text-align: center;
	vertical-align: top;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fpt-orgchart .oc-node:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
}

.fpt-orgchart .oc-photo img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.7);
	display: block;
}

.fpt-orgchart .oc-name {
	font-weight: 700;
	line-height: 1.25;
	color: var(--oc-node-color);
}

.fpt-orgchart .oc-role {
	font-size: 0.82em;
	opacity: 0.95;
	line-height: 1.2;
	color: var(--oc-role-color);
}

/* ---- Niveles amplios: cuadrícula de N por fila (evita scroll horizontal) ---- */
.fpt-orgchart ul.oc-grid {
	display: grid;
	grid-template-columns: repeat(var(--oc-cols, 4), max-content);
	justify-content: center;
	column-gap: 18px;
	row-gap: 30px;
	padding-top: calc(var(--oc-gap) * 2);
}

/* Estante horizontal sobre la cuadrícula (la línea que baja del padre lo toca). */
.fpt-orgchart ul.oc-grid::after {
	content: '';
	position: absolute;
	top: var(--oc-gap);
	left: 14%;
	right: 14%;
	border-top: 2px solid var(--oc-line);
}

/* En modo cuadrícula no se dibujan los codos por recuadro. */
.fpt-orgchart ul.oc-grid > li {
	padding: 0;
}
.fpt-orgchart ul.oc-grid > li::before,
.fpt-orgchart ul.oc-grid > li::after {
	display: none;
}

/* Conector corto desde el estante a cada recuadro de la cuadrícula. */
.fpt-orgchart ul.oc-grid > li > .oc-node {
	position: relative;
}
.fpt-orgchart ul.oc-grid > li > .oc-node::before {
	content: '';
	position: absolute;
	top: calc(var(--oc-gap) * -1);
	left: 50%;
	width: 0;
	height: var(--oc-gap);
	border-left: 2px solid var(--oc-line);
}

/* =========================== MÓVIL (<= 767px) =========================== */
@media (max-width: 767px) {

	.fpt-orgchart-wrap {
		overflow-x: visible;
	}

	.fpt-orgchart {
		display: block;
		text-align: left;
	}

	/* El árbol pasa a vertical: cada nivel se indenta a la derecha. */
	.fpt-orgchart ul {
		display: block;
		padding: 0 0 0 24px;
	}

	.fpt-orgchart > ul {
		padding-left: 0;
	}

	.fpt-orgchart li {
		display: block;
		padding: 10px 0 0 24px;
		text-align: left;
	}

	/* Reemplaza los conectores horizontales por conectores verticales. */
	.fpt-orgchart li::before,
	.fpt-orgchart li::after {
		display: none;
	}

	.fpt-orgchart ul ul::before {
		display: none;
	}

	/* Línea vertical continua a la izquierda de cada grupo de hijos. */
	.fpt-orgchart ul ul > li::before {
		display: block;
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 0;
		height: auto;
		border-left: 2px solid var(--oc-line);
		border-top: 0 none;
		border-radius: 0;
	}

	/* Brazo horizontal hacia cada recuadro. */
	.fpt-orgchart ul ul > li::after {
		display: block;
		content: '';
		position: absolute;
		top: 34px;
		left: 0;
		width: 22px;
		height: 0;
		border-top: 2px solid var(--oc-line);
		border-left: 0 none;
		border-radius: 0;
	}

	/* El último hijo: la línea vertical se corta a la altura del brazo. */
	.fpt-orgchart ul ul > li:last-child::before {
		bottom: auto;
		height: 34px;
	}

	.fpt-orgchart li:only-child {
		padding-top: 10px;
	}

	.fpt-orgchart .oc-node {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		width: 100%;
		max-width: 100%;
		text-align: left;
	}

	.fpt-orgchart .oc-node .oc-name,
	.fpt-orgchart .oc-node .oc-role {
		text-align: left;
	}

	.fpt-orgchart .oc-photo img {
		width: 44px;
		height: 44px;
	}

	/* La cuadrícula vuelve a lista vertical en móvil, con conectores a la izquierda. */
	.fpt-orgchart ul.oc-grid {
		display: block;
		grid-template-columns: none;
		padding: 0 0 0 24px;
		column-gap: 0;
		row-gap: 0;
	}
	.fpt-orgchart ul.oc-grid::after {
		display: none;
	}
	.fpt-orgchart ul.oc-grid > li > .oc-node::before {
		display: none;
	}
	.fpt-orgchart ul.oc-grid > li {
		display: block;
		padding: 10px 0 0 24px;
	}
	.fpt-orgchart ul.oc-grid > li::before {
		display: block;
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 0;
		height: auto;
		border-left: 2px solid var(--oc-line);
		border-top: 0 none;
		border-radius: 0;
	}
	.fpt-orgchart ul.oc-grid > li::after {
		display: block;
		content: '';
		position: absolute;
		top: 34px;
		left: 0;
		width: 22px;
		height: 0;
		border-top: 2px solid var(--oc-line);
		border-left: 0 none;
		border-radius: 0;
	}
	.fpt-orgchart ul.oc-grid > li:last-child::before {
		bottom: auto;
		height: 34px;
	}
}