ul {
            list-style-type: none; /* Elimina los iconos predeterminados de <li> */
        }

    .hidden {
            display: none;
        } 
       
    .header {
            background: #2635b7;
            padding: 10px;    
            color: white;        
            text-align: center;
            font-weight: bold;
        }


/**** otros  ****/ 

    

    
       .tree {
            list-style: none;
            padding-left: 5px;
            position: relative;
        }

      .tree-node {            
            cursor: pointer;
            padding: 0px;
            display: inline-block;
            align-items: left;
            position: relative;
            /*left: -10px;*/
        }

       .tree-node:hover, .selected { background: #cde8f1; }
      
       .tree-node2 {            
            cursor: pointer;
            padding: 0px;
            display: inline-block;
            align-items: left;
            position: relative;
            left: -30px;
        }
       .tree-node2:hover, .selected { background: #cde8f1; }
       
        



       /* formatos de la carpeta y el nombre*/

       .folder {
            cursor: pointer;
            font-weight: bold;
            display: inline-block;
            padding: 0px;
            align-items: left;
            position: relative;
            left: 0px;
            margin-right: 5px;
   
        }
        .folder:hover, .selected { background: #b9e7f4;}

       .Arbol_Codigo {
             font-size: 12pt; 
	     font-weight: bold; 
	     font-family: 'Times New Roman';              
             display: inline-block;            
        }

       .Arbol_Nombre {            
             font-weight: bold;
             cursor:pointer;
	     color: purple;
	     font-size: 12pt; 
	     font-weight: bold; 
	     font-family: 'Times New Roman'; 	
	     background-color: transparent;
             display: inline-block;	
        }
  

      
      .icon {
            margin-right: 5px;
        } 
      
      .icono-svg {
        top: 10px;
        width: 14px;  /* 18 Ancho deseado */
        height: 18px; /* 18 Alto deseado */
        cursor:pointer;
       }

     .manImg {
        top: 10px;
        width: 14px;  /* 18 Ancho deseado */
        height: 18px; /* 18 Alto deseado */
        cursor:pointer;
       }

     .icono-cabecera {
        top: 10px;
        margin-right: 20px;
        width: 40px;  /* 18 Ancho deseado */
        height: 40px; /* 18 Alto deseado */
        cursor:pointer;
       /* border-radius: 8px;   */    
       }

     .icono-cabecera:hover {
        transform: scale(1.05);
      }


/*   TOOL TIP EN LAS IMAGENES*/
/* Contenedor del tooltip: NECESITA position: relative */

.tooltip-container {
    position: relative; /* Es crucial para posicionar el tooltip-text */
    display: inline-block; /* Permite que el contenedor se ajuste al tamaño de la imagen */
    cursor: pointer; /* Indica que es interactivo */
   /* margin: 50px; /* Para asegurar espacio alrededor de la imagen */
       
        margin-right: 20px;
        width: 40px;  /* 18 Ancho deseado */
        height: 40px; /* 18 Alto deseado */
        
}

/* Estilos de la imagen */
.tooltip-container img {
    border: 3px solid #5BACF5; /*skyblue; /*#007bff;*/
    border-radius: 8px;
    display: block; /* Elimina espacio extra debajo de la imagen */
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.tooltip-container img:hover {
    transform: scale(1.03);
}

/* Estilos del texto del tooltip */
.tooltip-text {
    visibility: hidden; /* Oculto por defecto */
    width: 100px; /* Ancho fijo del tooltip */
    
    /* CAMBIOS AQUÍ: COLORES Y TAMAÑO DE LETRA */
    background-color: #FFFFCC; /* Fondo amarillo claro */
    color: #000000; /* Texto negro */
    font-size: 0.8em; /* Letra más pequeña */
    /* FIN CAMBIOS */

    text-align: center;
    border-radius: 6px;
    padding: 8px 0; /* Un poco menos de padding por la letra pequeña */
    position: absolute;
    z-index: 1;
    
    /* CAMBIOS AQUÍ: POSICIONAMIENTO INFERIOR */
    top: 115%; /* Posiciona el tooltip por debajo de la imagen */
    left: 175%;
    margin-left: -100px; /* Ajuste para centrar (la mitad de `width`) */
    /* FIN CAMBIOS */

    opacity: 0;
    transition: opacity 0.3s, top 0.3s; /* Transición suave para la aparición */
}

/* Flecha del tooltip (opcional, para un mejor diseño) */
.tooltip-text::after {
     content: "";
    position: absolute;
    /* CAMBIO CLAVE AQUÍ: Posicionamos la flecha en la parte superior del tooltip */
    bottom: 100%; 
    left: 50%;
    margin-left: -5px; /* Centra la flecha */
    border-width: 5px;
    border-style: solid;
    /* CAMBIO CLAVE AQUÍ: Las fronteras para que apunten hacia arriba, usando el color del fondo */
    border-color: transparent transparent #FFFFCC transparent; 

}

/* Mostrar el tooltip al pasar el ratón por encima del contenedor */
.tooltip-container:hover .tooltip-text {
    visibility: visible; /* Hace visible el tooltip */
    opacity: 1; /* Lo hace completamente opaco */
    /*bottom: 135%; /* Ligeramente más arriba al aparecer */
    top:135%;
}


/*  ventana modal */


/* Estilos de la ventana modal */
.modal-backdrop {
    display: none; /* Oculto por defecto */
    position: fixed; /* Permanece en su lugar incluso al desplazarse */
    z-index: 1000; /* Se superpone a todo */
    left: 0;
    top: 0;
    width: 100%; /* Ancho completo */
    height: 100%; /* Alto completo */
    overflow: auto; /* Habilitar desplazamiento si el contenido es demasiado grande */
    background-color:  rgba(0,0,0,0.7);  /* Fondo semi-transparente negro */
    backdrop-filter: blur(5px); /* Efecto de desenfoque en el fondo */
    -webkit-backdrop-filter: blur(5px); /* Compatibilidad con Safari */
    display: none; /*flex;*/ /* Usamos flexbox para centrar el contenido */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
}

/**************** Contenido de la modal ***********/
.modal-content {
    background-color: #2635b7; /*#fff;*/
    margin: 15px; /* Pequeño margen para que no toque los bordes */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative; /* Para posicionar el botón de cerrar */
    width: 90%; /* Ancho responsivo */
    max-width: 900px; /* Ancho máximo para pantallas grandes */
    height: 80%; /* Altura responsiva */
    max-height: 600px; /* Altura máxima */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Oculta cualquier desbordamiento dentro del contenido */
}

/* Botón para cerrar la modal */
.close-button {
    color: white;/*#aaa;*/
    position: absolute;
    top: -1px;
    right: 5px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: #5BACF5;; /*skyblue;  #333;*/
    text-decoration: none;
    cursor: pointer;
}

/* Estilo para el cuerpo de la modal (donde va el iframe) */
.modal-body {
    flex-grow: 1; /* Permite que ocupe todo el espacio disponible */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilo para el iframe */
#modalIframe {
    width: 100%;
    height: 100%;
    border: none; /* Quita el borde por defecto del iframe */
    background-color: #f9f9f9; /* Color de fondo del iframe mientras carga */
}