/* styles.css */

  /* Reset básico */
  body {
    margin: 0;
    padding: 0;
    overflow-x: auto;
  }

  /* Contenedor principal del organigrama */
  #version-escritorio .org-chart-container {
    position: relative;
    width: 1200px;
    /* Ancho fijo */
    height: 2000px;
    /* Alto fijo */
    margin: 0 auto;
    /* Centra el contenedor horizontalmente */
    overflow: hidden;
    /* Evita scroll no deseado */
    background-color: #ffffff;
    /* Opcional: color de fondo */
  }

  /* SVG para líneas */
  #version-escritorio .org-lines {
    position: absolute;
    top: 0;
    left: 0;
    /* Asegura que el SVG no escale */
    width: 1200px;
    height: 2000px;
    pointer-events: none;
    /* Permite interactuar con los elementos debajo del SVG */
  }

  /* Contenido del organigrama */
  #version-escritorio .org-chart {
    position: absolute;
    top: 0;
    left: 0;
    width: 1200px;
    /* Debe coincidir con el SVG */
    height: 2000px;
    /* Debe coincidir con el SVG */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Asegura que las filas no cambien de posición */
  }

  /* Filas del organigrama */
  #version-escritorio .org-row {
    display: flex;
    justify-content: center;
    width: 100%;
    font-family: museo-text, sans-serif;
    /* Evita que las filas cambien con el tamaño */
    flex: 0 0 auto;
  }

  /* Cajas del organigrama */
  #version-escritorio .org-box {
    border: 1px solid #5C89BD;
    background-color: #e9f4ff;
    color: #007bff;
    padding: 5px;
    margin: 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    width: 140px;
    /* Ancho fijo */
    height: 85px;
    /* Alto fijo */
    box-sizing: border-box;
    font-family: museo-text, sans-serif;
    flex: 0 0 auto;
    /* Evita que las cajas cambien de tamaño */
  }

  /* Estilos adicionales según tu CSS original */
  #version-escritorio .org-box-lead {
    background-color: #CF415D;
    color: #ffffff;
  }

  #version-escritorio .org-box-unit {
    background-color: #1E3372;
    color: #ffffff;
  }

  #version-escritorio .org-box-dept {
    background-color: #3169AB;
    color: #ffffff;
  }

  #version-escritorio .org-box-dept6 {
    background-color: #ffffff;
    color: #3269AA;
  }

  #version-escritorio .org-box-dept7 {
    background-color: #DDEBF6;
    color: #5C89BD;
  }

  #version-escritorio .org-box-cls {
    background-color: transparent;
    border: none;
    width: 160px;
    height: 85px;
  }

  #version-escritorio .org-box-blank {
    background-color: transparent;
    border: none;
    width: 160px;
    height: 85px;
  }

  #version-escritorio .org-box-blank2 {
    /* Configuraciones para espacios en blanco */
    background-color: transparent;
    border: none;
    width: 160px;
    height: 85px;
    /* Ancho fijo */
  }

  #version-escritorio .org-box-blank3 {
    /* Configuraciones para espacios en blanco */
    background-color: transparent;
    border: none;
    width: 85px;
    height: 85px;
    /* Ancho fijo */
  }

  #version-escritorio .org-box-blank4 {
    /* Configuraciones para espacios en blanco */
    background-color: transparent;
    border: none;
    width: 80px;
    height: 85px;
    /* Ancho fijo */
  }

  #version-escritorio .color-nuevo {
    background-color: #2C4AA6;
  }

  #version-escritorio .centrar-titulo {
    text-align: center;
    font-family: 'Museo_900';
    font-size: 35px;
    font-weight: bold;
    line-height: 1.2;
    color: #2C4AA6;
  }

  #version-escritorio .txt-chart-container {
    position: relative;
    width: 1200px;
    /* Ancho fijo */
    margin: 0 auto;
    /* Centra el contenedor horizontalmente */
    overflow: hidden;
    /* Evita scroll no deseado */
    background-color: #ffffff;
    /* Opcional: color de fondo */
  }




  /* --------------------------------- VERSION MOVIL  ---------------------------------*/


  /* Contenedor principal del organigrama */
  #version-movil .org-chart-container {
    width: 410px;
    /* Ancho fijo */
    max-width: 410px;
    /* Limita el ancho máximo a 444px */
    height: auto;
    /* Permite que la altura crezca según el contenido */
    position: relative;
    /* Asegura que el contenedor esté en su lugar */
    margin: 0 auto;
    /* Centra el contenedor horizontalmente */
    overflow: hidden;
    /* Evita desbordamientos */

  }

  /* SVG para líneas */
  #version-movil .org-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Escala con el contenedor */
    height: auto;
    pointer-events: none;
    aspect-ratio: 3 / 5;
    /* Mantiene proporción relativa */
  }

  #version-movil .org-box-full {
    grid-column: 1 / -1;
    /* Ocupa todas las columnas */
    color: #fff;
    font-weight: bold;
  }

  /* Contenido del organigrama */
  #version-movil .org-chart {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* Escala al 100% del contenedor */
  }

  /* Filas del organigrama */
  #version-movil .org-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Tres columnas iguales */
    gap: 0.5em;
    /* Espaciado entre columnas */
    width: 100%;
    /* Asegura que el contenedor ocupe todo el ancho */
    box-sizing: border-box;
    row-gap: 10px;
  }

  /* Cajas del organigrama */
  #version-movil .org-box {
    background-color: #e9f4ff;
    border: 1px solid #5C89BD;
    text-align: center;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: museo-text;
    height: 50px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    /* Centra horizontalmente */
    align-items: center;
    /* Centra verticalmente */

  }

  /* Estilos adicionales */
  #version-movil .org-box-lead {
    background-color: #CF415D;
    color: #ffffff;
  }

  #version-movil .org-box-unit {
    background-color: #1E3372;
    color: #ffffff;
  }

  #version-movil .org-box-dept {
    background-color: #3169AB;
    color: #ffffff;
  }

  #version-movil .org-box-dept6 {
    background-color: #ffffff;
    color: #3269AA;
  }

  #version-movil .org-box-dept7 {
    background-color: #DDEBF6;
    color: #5C89BD;
  }

  #version-movil .org-box-cls,
  #version-movil .org-box-blank,
  #version-movil .org-box-blank2,
  #version-movil .org-box-blank3,
  #version-movil .org-box-blank4 {
    background-color: transparent;
    border: none;
  }

  #version-movil .color-nuevo {
    background-color: #2C4AA6;
  }

  #version-movil .centrar-titulo {
    text-align: center;
    font-family: 'Museo_900';
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    color: #2C4AA6;
  }