/* ============================================================
   ORGANIGRAMA
   ------------------------------------------------------------
   Tarjetas y lineas del organigrama. Lo cargan el editor del panel
   y la pagina publica, para que la vista previa sea exacta.

   Se apoya en OrgChart (assets/libs/orgchart/orgchart.min.css): se le
   quita el estilo de ejemplo (cuadricula, rojo, amarillo) pero NO la
   caja de cada nodo, porque las lineas se calculan sobre ella. La
   tarjeta se dibuja dentro del nodo.
   ============================================================ */
.orgchart.org-chart,
.org-view,
.org-viewer,
.org-variant-grid {
  --org-navy: #16163a;
  --org-on-navy: #ffffff;
  --org-accent: #f29b24;
  /* El azul de la marca, que es el de las pastillas. */
  --org-cyan: #2aa9e0;
  --org-card: #ffffff;
  --org-card-border: #ece6d9;
  /* El borde de la tarjeta sencilla, que lo dio la universidad. */
  --org-plain-border: #e4e0ec;
  --org-text: #1b1b33;
  --org-muted: #6b6b80;
  --org-line: #f29b24;
  --org-shadow: 0 8px 22px rgba(22, 22, 58, 0.1);
}

/* --- Lienzo ----------------------------------------------- */
.orgchart.org-chart {
  padding: 24px 24px 8px;
  background: none;
  font-family: inherit;
}

/* OrgChart centra cada tarjeta sobre sus subordinados contando con texto
   centrado y listas sin sangria. Los estilos base de la pagina (Bootstrap)
   ponen lo contrario, asi que se fija aqui. */
.orgchart.org-chart ul,
.orgchart.org-chart li {
  margin: 0;
  padding: 0;
  text-align: center;
}

/* Separacion entre ramas hermanas. Es relleno simetrico dentro de cada rama:
   su centro no se mueve y las lineas siguen cayendo en el centro. */
.orgchart.org-chart .hierarchy {
  padding: 0 8px;
}

/* --- Nodo de OrgChart ------------------------------------- */
/* Se conserva su caja (relleno de 3px, borde transparente de 2px y 20px
   por debajo): con esas medidas la libreria une las lineas sin desfase. */
.orgchart.org-chart .node {
  text-align: left;
  cursor: pointer;
}

.orgchart.org-chart .node,
.orgchart.org-chart .node:hover,
.orgchart.org-chart .node.focused,
.orgchart.org-chart ul li .node:hover,
.orgchart.org-chart ul li .node.selected,
.orgchart.org-chart ul li .node.currentDropTarget {
  background-color: transparent;
}

/* --- Tarjeta ---------------------------------------------- */
/* El ancho y el redondeo salen de una variable para que una tarjeta pueda
   llevar el suyo (lo escribe js/org-chart.js) sin tocar nada mas. */
.org-card {
  --org-card-accent: var(--org-accent);
  --org-card-on-accent: #ffffff;
  box-sizing: border-box;
  width: var(--org-card-width, 210px);
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--org-card-radius, 10px);
  box-shadow: var(--org-shadow);
  transition: box-shadow 0.15s ease;
}

.org-card--top {
  width: var(--org-card-width, 250px);
  padding: 16px 18px;
}

.org-card__title {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.org-card__name {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.org-card--top .org-card__name {
  font-size: 15px;
}

.org-card__unassigned {
  font-weight: 400;
  font-style: italic;
  opacity: 0.8;
}

/* --- Estilos de tarjeta ----------------------------------- */
/* Cada estilo usa --org-card-accent, que cambia si la tarjeta tiene un
   color propio. */
.org-card--dark {
  background: var(--org-navy);
  color: var(--org-on-navy);
}

.org-card--dark .org-card__title {
  color: var(--org-card-accent);
}

.org-card--light {
  border-color: var(--org-card-border);
  border-left: 3px solid var(--org-card-accent);
  background: var(--org-card);
  color: var(--org-text);
}

.org-card--solid {
  background: var(--org-card-accent);
  color: var(--org-card-on-accent);
}

.org-card--solid .org-card__title {
  opacity: 0.85;
}

.org-card--soft {
  border-color: color-mix(in srgb, var(--org-card-accent) 30%, var(--org-card));
  background: color-mix(in srgb, var(--org-card-accent) 14%, var(--org-card));
  color: var(--org-text);
}

.org-card--outline {
  border: 2px solid var(--org-card-accent);
  background: var(--org-card);
  color: var(--org-text);
}

.org-card--soft .org-card__title,
.org-card--outline .org-card__title {
  color: color-mix(in srgb, var(--org-card-accent) 78%, var(--org-text));
}

/* Bloque: todo el fondo del color y el texto encima en claro. Sin color
   propio es el azul oscuro de la marca, que es como se ensena el puesto mas
   alto. */
.org-card--block {
  --org-card-accent: var(--org-navy);
  background: var(--org-card-accent);
  color: var(--org-card-on-accent);
}

/* Marco: fondo blanco y un filete alrededor, con el texto en oscuro. */
.org-card--frame {
  --org-card-accent: var(--org-navy);
  border: 1.5px solid var(--org-card-accent);
  background: var(--org-card);
  color: var(--org-text);
}

/* Pastilla: fondo suave, texto del mismo color y las esquinas redondas del
   todo. Sin color propio, el azul claro de la marca. */
.org-card--pill {
  --org-card-accent: var(--org-cyan);
  border-radius: var(--org-card-radius, 999px);
  background: color-mix(in srgb, var(--org-card-accent) 16%, var(--org-card));
  color: color-mix(in srgb, var(--org-card-accent) 85%, var(--org-text));
}

.org-card--pill .org-card__title {
  color: inherit;
}

/* Sencillo: fondo blanco con un borde tenue y el texto en oscuro. Es la
   tarjeta mas callada de todas; el color elegido no la pinta. */
.org-card--plain {
  border-color: var(--org-plain-border);
  background: var(--org-card);
  color: var(--org-text);
}

/* --- Lineas ----------------------------------------------- */
.orgchart.org-chart .hierarchy::before {
  border-color: var(--org-line);
}

.orgchart.org-chart .hierarchy:not(.couple) > .node:has(+ .nodes)::after,
.orgchart.org-chart > ul > li > ul li > .node::before {
  background-color: var(--org-line);
}

/* La linea tiene que llegar al borde de la tarjeta y pararse ahi.
   El nodo de la libreria lleva la tarjeta metida 3px por dentro (su relleno),
   y sus lineas se paraban en el borde del nodo: quedaba un hueco. Alargarlas
   de mas tampoco vale, que entonces se montan encima del borde de la tarjeta y
   le hacen una muesca. Se alargan justo esos 3px, que es --org-card-inset. */
.orgchart.org-chart {
  --org-card-inset: 3px;
}

/* La de arriba cuelga de la barra (-12px) y baja hasta el borde superior. */
.orgchart.org-chart > ul > li > ul li > .node::before {
  height: calc(12px + var(--org-card-inset));
}

/* La de abajo sale del borde inferior y llega a la barra (-11px). Se ancla
   por abajo -de ahi el `top: auto`-, que es lo que la deja a ras de la
   tarjeta mida lo que mida. */
.orgchart.org-chart .hierarchy:not(.couple) > .node:has(+ .nodes)::after {
  top: auto;
  bottom: -11px;
  height: calc(11px + var(--org-card-inset));
}

/* --- Editor: seleccion y arrastre ------------------------- */
.orgchart.org-chart .node.is-selected .org-card {
  box-shadow: 0 0 0 3px var(--org-accent), var(--org-shadow);
}

.orgchart.org-chart .node:focus-visible {
  outline: 3px solid var(--org-accent);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Donde se puede soltar: el borde discontinuo del propio nodo, en el color
   de acento (la libreria lo pintaba de verde). */
.orgchart.org-chart .node.allowedDrop,
.orgchart.org-chart ul li .node.allowedDrop {
  border-color: var(--org-accent);
  border-radius: 12px;
}

.orgchart.org-chart ul li .node.currentDropTarget .org-card {
  box-shadow: 0 0 0 3px var(--org-accent), var(--org-shadow);
}

/* --- Muestras de estilo (panel del editor) ------------------ */
.org-variant-grid {
  --org-card-accent: var(--org-accent);
}

.org-variant__sample {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 5px;
}

.org-variant__sample span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

.org-variant__sample span:first-child {
  width: 55%;
}

.org-variant__sample span:last-child {
  width: 80%;
  opacity: 0.55;
}

.org-variant__sample--auto {
  border-color: var(--org-card-border);
  background: linear-gradient(135deg, var(--org-navy) 50%, var(--org-card) 50%);
  color: var(--org-card-accent);
}

.org-variant__sample--dark {
  /* Borde tenue: sin el, en el panel oscuro la muestra se confunde con el fondo. */
  border-color: rgba(127, 127, 160, 0.35);
  background: var(--org-navy);
  color: var(--org-card-accent);
}

.org-variant__sample--light {
  border-color: var(--org-card-border);
  border-left: 3px solid var(--org-card-accent);
  background: var(--org-card);
  color: var(--org-text);
}

.org-variant__sample--solid {
  background: var(--org-card-accent);
  color: var(--org-on-navy);
}

.org-variant__sample--soft {
  background: color-mix(in srgb, var(--org-card-accent) 18%, var(--org-card));
  color: color-mix(in srgb, var(--org-card-accent) 78%, var(--org-text));
}

.org-variant__sample--outline {
  border: 2px solid var(--org-card-accent);
  background: var(--org-card);
  color: var(--org-card-accent);
}

.org-variant__sample--block {
  border-color: rgba(127, 127, 160, 0.35);
  background: var(--org-navy);
  color: var(--org-on-navy);
}

.org-variant__sample--frame {
  border: 1.5px solid var(--org-navy);
  background: var(--org-card);
  color: var(--org-text);
}

.org-variant__sample--pill {
  border-radius: 999px;
  background: color-mix(in srgb, var(--org-cyan) 16%, var(--org-card));
  color: var(--org-cyan);
}

.org-variant__sample--plain {
  border-color: var(--org-plain-border);
  background: var(--org-card);
  color: var(--org-muted);
}

/* --- Color de la linea (panel del editor) ------------------- */
.org-line-colors {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

/* --- Vista de solo lectura (antes de pintar o sin JavaScript) -- */
.org-view {
  position: relative;
  color: var(--org-text);
}

.org-view.is-enhanced {
  overflow: hidden;
  min-height: 24rem;
}

.org-view__stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.org-view__list {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--org-line);
  list-style: none;
}

.org-view__list--root {
  padding-left: 0;
  border-left: 0;
}

.org-view__item {
  margin: 0.5rem 0;
}

.org-view__title {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.org-view__name {
  display: block;
  font-weight: 600;
}

.org-view__empty {
  margin: 0;
  color: var(--org-muted);
  text-align: center;
}

/* --- Formato del texto elegido por puesto -------------------
   Al final para ganar a los estilos de tarjeta. Solo se aplica lo que se
   aparta del formato por defecto (TEXT_DEFAULTS en js/org-chart.js). */
.org-card .org-text--bold {
  font-weight: 700;
}

.org-card .org-text--regular {
  font-weight: 400;
}

.org-card .org-text--italic {
  font-style: italic;
}

.org-card .org-text--no-italic {
  font-style: normal;
}

.org-card .org-text--upper {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.org-card .org-text--no-upper {
  letter-spacing: normal;
  text-transform: none;
}

.org-card .org-text--center {
  text-align: center;
}

.org-card .org-text--start {
  text-align: left;
}

/* --- Posicion de las tarjetas --------------------------------
   js/org-chart.js mueve tarjetas (desplazamiento y alineacion) y dibuja la
   barra horizontal de cada grupo con las posiciones reales; la de OrgChart,
   hecha a trozos, se oculta. El grupo es la referencia de la barra. */
.orgchart.org-chart .nodes {
  position: relative;
}

.orgchart.org-chart.org-chart--arranged .hierarchy::before {
  content: none;
}

.orgchart.org-chart .org-chart__bar {
  position: absolute;
  top: -11px;
  height: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--org-line);
  pointer-events: none;
}

/* --- Visor: organigrama y a quien contactar ------------------
   Lo que lee quien visita la pagina, y lo mismo que ensena la vista
   previa del panel: el arbol y, al elegir un puesto, sus contactos.
   Quien lo use pone el alto; el visor lo reparte entre cabecera y
   cuerpo, y el cuerpo es lo unico que se recorre. */
.org-viewer {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #ffffff;
  color: var(--org-text);
}

.org-viewer__head {
  flex: none;
  padding: 20px 56px 20px 24px;
  background: var(--org-navy);
  color: var(--org-on-navy);
}

.org-viewer__heading {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.org-viewer__brand {
  color: var(--org-accent);
}

.org-viewer__hint {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  opacity: 0.75;
}

/* Volver al arbol: es un enlace dentro de la franja oscura, no un boton
   con caja, para que la cabecera no se llene de cajas. */
.org-viewer__back {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: #4cc3f0;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.org-viewer__back:hover,
.org-viewer__back:focus-visible {
  text-decoration: underline;
}

.org-viewer__eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.org-viewer__body {
  flex: 1;
  /* Sin los dos minimos en cero un arbol ancho estira el visor en vez de
     recorrerse dentro: el ancho de una caja flexible lo marca su contenido
     mientras no se diga lo contrario. */
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: #fafafa;
}

/* El arbol es mas ancho que un telefono: aqui se recorre. Sin esto solo se
   podia arrastrar, y lo que se ve al abrir era una esquina cualquiera. */
.org-viewer__chart {
  min-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
}

/* Ocupa todo el ancho del visor, como el arbol: cortarlo antes dejaba un
   hueco grande a la derecha. Lo que se cuida es el renglon de cada dato, que
   no se estira (ver .org-contact__row). */
.org-viewer__detail {
  padding: 20px 24px 28px;
}

.org-viewer__label {
  margin: 0 0 10px;
  color: var(--org-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.org-viewer__contacts {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.org-viewer__empty {
  margin: 0;
  color: var(--org-muted);
  font-size: 0.875rem;
}

/* --- Ficha de un contacto ----------------------------------- */
.org-contact {
  padding: 16px 18px;
  border: 1px solid var(--org-card-border);
  border-radius: 8px;
  background: var(--org-card);
}

.org-contact__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.org-contact__role {
  margin: 2px 0 0;
  color: #2aa9e0;
  font-size: 0.875rem;
  line-height: 1.3;
}

.org-contact__data {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
}

/* Etiqueta y dato en dos columnas: la etiqueta mide siempre lo mismo para
   que los correos y los telefonos arranquen a la misma altura. */
.org-contact__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px;
  align-items: baseline;
}

.org-contact__row dt {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  color: var(--org-muted);
  font-size: 0.875rem;
  font-weight: 400;
}

.org-contact__row dt i {
  color: #2aa9e0;
}

.org-contact__row dd {
  margin: 0;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.org-contact__row dd a {
  color: inherit;
  text-decoration: none;
}

.org-contact__row dd a:hover,
.org-contact__row dd a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .org-contact__row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}