:root{
  --ui-scale: 1;
  --bg: #f4f7fa;
  --blue: #003799;
  --light: #fff;
  --notch-size: 140px;
  --notch-x: 50px;
  --btn-hover-dur: 260ms;
  --btn-active-dur: 140ms;
  --btn-ease: cubic-bezier(.2,.9,.28,1);
}

/* ------------------ Contenedor (SECCIÓN) ------------------ */
.diagramaSAT {
  position: relative;            /* contenedor de referencia para absolute dentro */
  padding: 36px 0;
  min-height: 720px;             /* Altura mínima para desktop */
  box-sizing: border-box;
  overflow: visible;
  background: transparent;
}

/* wrap centrado dentro de la sección */
.diagramaSAT .wrap{
  width:100%;
  max-width:1100px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  box-sizing:border-box;
  height: auto;
}

/* Escala opcional del SVG (controlada por JS con --ui-scale) */
.diagramaSAT #svg {
  display:block;
  width:100%;
  max-width:1100px;
  height:auto;
  transform-origin: 50% 0;
  transform: scale(var(--ui-scale));
  transition: transform 160ms ease;
}

/* Limites del svg para que no estire fuera */
.diagramaSAT svg{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
}

/* Highlight circular (absoluto dentro de la sección) */
/* Mantenemos translate(-50%,-50%) — el JS debe asignar left/top al CENTRO del highlight */
#nodeHighlight-SAT,
#nodeHighlight-SAT[data-generated],
.diagramaSAT #nodeHighlight-SAT {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background: #003799; /* color suave por defecto (ajustable) */
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  pointer-events: none;
  z-index: 9999;
  display: none;
  transform-origin: center center;
  transition: transform 0.28s cubic-bezier(.2,.9,.28,1), opacity 0.18s linear;
  opacity: 1;
  will-change: transform, width, height, left, top, opacity;
}

/* Compatibility: si en DOM usas .body-overlay o #bodyOverlay, ambos estilos incluidos */
.body-overlay,
#bodyOverlay,
.diagramaSAT .body-overlay,
.diagramaSAT #bodyOverlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 85;
  display: none;
  opacity: 0; /* Para animación de opacidad */
  background: rgba(0,0,0,0.2); /* Fondo ligeramente oscuro */
  transition: opacity 0.3s ease-out; /* Animación de fade */
}

/* mostrar overlay */
.body-overlay.show,
#bodyOverlay.show,
.diagramaSAT .body-overlay.show,
.diagramaSAT #bodyOverlay.show { 
  display: block; 
  opacity: 1;
}

/* ------------------ Modal ------------------ */
.modal{
  position: absolute;
  left: 0;
  right: 0;
   width: 100%;           /* ancho completo pantalla */
  height: 75.3%;          /* alto completo pantalla */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  background: var(--light);
  border-radius: 0;
  padding: calc(var(--notch-size) + 48px) 48px 56px; 
  box-shadow:0 30px 80px rgba(15,20,30,0.12);
  z-index: 90;
  display: none;
  overflow:auto;
  opacity: 0; /* Se inicia oculto para la animación */
  transform: translateY(40px) scale(0.98); /* Estado inicial para la animación */

  
  /* MASK para notch (corte circular en la parte superior) */
  -webkit-mask-image: radial-gradient(circle var(--notch-size) at var(--notch-x) 0px, transparent 0, transparent calc(var(--notch-size)), black calc(var(--notch-size) + 1px), black 100%);
  mask-image: radial-gradient(circle var(--notch-size) at var(--notch-x) 0px, transparent 0, transparent calc(var(--notch-size)), black calc(var(--notch-size) + 1px), black 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top center;
  mask-position: top center;
}
.modal.show { display: block; } /* Solo cambia display para que GSAP pueda animar */

.modal .close{
  position:absolute;
  right:18px;
  top:12px;
  width:44px;
  height:44px;
  border-radius:8px;
  background:rgba(0,0,0,0.76);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  pointer-events: auto;
  z-index: 999;
}

/* --- ESTILOS DE CONTENIDO DEL MODAL (ACTUALIZADOS) --- */
.modal .node-title,
.modal h3{
  text-align:center;
  color:var(--blue);
  font-weight:800;
  margin-bottom: 20px; /* Margen inferior para separar del contenido de columna */
  line-height:1.1;
  font-size: clamp(28px, 3.8vw, 32px); /* Un poco más grande para el título */
  max-width: 900px; /* Ancho máximo para el título */
  opacity: 0; /* Para animación secuencial */
  transform: translateY(20px); /* Para animación secuencial */
}

/* Contenedor de las columnas */
.modal-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start; /* Alinea los elementos al inicio (arriba) */
    gap: 50px; /* Espacio aumentado entre columnas */
    min-height: 263.72px; 
    /* margin-top: 20px; */
    max-width: 1058.66px; /* Límite para el contenido de las columnas */
    margin-left: auto;
    margin-right: auto;
    opacity: 0; /* Para animación secuencial */
    transform: translateY(20px); /* Para animación secuencial */
}

/* Cada columna */
.modal-column {
    flex-grow: 1;
    flex-shrink: 1;
}
.modal-column.text-column {
    flex-basis: 58%; /* Columna de texto un poco más ancha */
    min-width: 350px; /* Ancho mínimo antes de apilarse */
}
.modal-column.video-column {
    flex-basis: 35%; /* Columna de video */
    min-width: 360px; /* Ancho mínimo para el video */
    /* height: 263.72px; */
    display: flex;
    align-items: center; /* Centra verticalmente el video si hay espacio */
    justify-content: center;
}

/* Contenido de texto (párrafos) */
.modal .node-content{

  text-align: center;
  color:#333;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height:1.8;
  margin:0;
  padding:0;
}

.modal .modal-columns {
  display: flex;
  align-items: center;     /* Centra verticalmente texto y video */
  justify-content: center; /* Opcional: mantiene separación pareja */
}


.modal .modal-column {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Centra su contenido verticalmente */
}


.modal .node-content p{
  margin: 0 0 18px 0;
  font-size: clamp(15px, 1.3vw, 22px);
  line-height: 1.7;
  color: #000000;
}

.modal .node-content p:last-child {
  margin-bottom: 0;
}


/* Wrapper del video */
.video-wrapper {
  width: 100%;
  max-width: 420px;   /* controla tamaño del preview */
  height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
} */

/* --- ESTILOS DE NODOS SVG (Sin cambios) --- */
#nodes > g { cursor: pointer; transform-box: fill-box; transform-origin: center; }

#nodes > g circle {
  stroke: #71c108;
  stroke-width: 3px;
  fill: var(--blue);
  transition: stroke var(--btn-hover-dur) var(--btn-ease),
              transform var(--btn-hover-dur) var(--btn-ease),
              filter var(--btn-hover-dur) var(--btn-ease);
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, stroke;
}
#nodes > g text[font-size="18"] {
  fill: #71c108;
  font-weight:700;
  transition: transform var(--btn-hover-dur) var(--btn-ease);
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

#nodes > g:hover circle,
#nodes > g:focus-within circle {
  stroke: var(--blue);
  transform: scale(1.10);
  filter: drop-shadow(0 6px 14px rgba(0,74,173,0.06));
}
#nodes > g:hover text[font-size="18"],
#nodes > g:focus-within text[font-size="18"] {
  transform: scale(1.20);
}

#nodes > g:active circle { transform: scale(0.98); transition-duration: var(--btn-active-dur); }
#nodes > g:active text[font-size="18"] { transform: scale(0.95); transition-duration: var(--btn-active-dur); }

/* Responsive tweaks */
/* Teléfonos Grandes / Tablets Pequeñas */
@media (max-width: 768px){
  .diagramaSAT { padding: 18px 0; min-height: auto; }
  .diagramaSAT .wrap { padding: 6px; }
  .modal { padding: calc(var(--notch-size) + 24px) 14px 32px; }
  .modal .close{ width:36px; height:36px; right:12px; top:8px; font-size:16px; }
  
  .modal .node-title, .modal h3 {
      margin-bottom: 25px;
      font-size: clamp(24px, 5vw, 36px);
  }
  .modal-columns {
      gap: 30px;
      min-height: 200px;
      margin-top: 15px;
  }
  .modal-column.text-column,
  .modal-column.video-column {
      flex-basis: 100%; /* Las columnas se apilan */
      min-width: unset; /* Quita el mínimo para móvil */
  }
  .modal .node-content {
      text-align: center; /* En móvil, centramos el texto de nuevo */
  }
  .modal .node-content p {
      margin-bottom: 14px;
  }
  #nodes > g:hover circle { transform: scale(1.06); }
  #nodes > g:hover text[font-size="18"] { transform: scale(1.12); }
}

/* Teléfonos Pequeños */
@media (max-width: 480px){
  .diagramaSAT { min-height: auto; padding: 10px 0; }
  .diagramaSAT .wrap { padding: 2px; }
  .modal { padding: calc(var(--notch-size) + 18px) 10px 24px; }
  .modal .close{ width:32px; height:32px; right:8px; top:6px; font-size:14px; }
  .modal .node-title, .modal h3 {
      margin-bottom: 20px;
      font-size: clamp(20px, 6vw, 30px);
  }
  .modal-columns {
      gap: 20px;
      min-height: 150px;
  }
  .modal .node-content {
      font-size: clamp(14px, 3.8vw, 16px);
      line-height: 1.6;
  }
  .modal .node-content p {
      margin-bottom: 10px;
  }
  #nodes > g:hover circle { transform: scale(1.04); }
  #nodes > g:hover text[font-size="18"] { transform: scale(1.08); }
}
    
/* helper para limitar altura del modal */
.modal.clamp {
  max-height: calc(100% - 40px);
  overflow: auto;
}

/* cuando abrimos modal dentro de la sección: evitar que se vea contenido de otras secciones */
.diagramaSAT.has-open-modal {
  overflow: hidden; /* evita que el modal "muestre" otras secciones cuando sea más alto */
  position: relative; /* ya lo tienes, por seguridad */
}

/* asegurar que el modal no desborde la sección en altura */
.diagramaSAT .modal {
  max-height: calc(100% - 16px); /* deja un pequeño margen */
  overflow: auto;
}

/* asegurar overlay ocupa exactamente la sección */
.diagramaSAT .body-overlay {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

/* pequeño helper visual si quieres un highlight más brillante (opcional) */
#nodeHighlight-SAT.bright {
  background: rgba(0,168,89,0.12);
  box-shadow: 0 12px 40px rgba(0,168,89,0.10), inset 0 0 30px rgba(0,168,89,0.05);
}


@media (max-width: 480px){
  :root { --notch-size: 120px; } /* tope práctico */
}
@media (max-width: 360px){
  :root { --notch-size: 100px; }
}