/* 1. RESET Y BASE */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Esto está perfecto para el panel */
    font-family: sans-serif;
    background-color: transparent; /* CLAVE: Fondo del body transparente */
}

#Logo {
    position: fixed; /* Mejor fixed que absolute */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrado perfecto */
    max-width: 200px; /* Controlamos el tamaño para que sea marca de agua */
    height: auto;
    z-index: 1; /* LA CAPA MÁS BAJA, al fondo */
    pointer-events: none; /* Que el mouse no lo detecte */
    opacity: 0.1; /* Super suave, para que no moleste */
}

/* 2. FONDO ANIMADO (La escena detrás de todo) */
#escena {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* CAPA MEDIA, por encima del logo grande */
    overflow: hidden;
    background-color: #f7f9fc; /* Color de respaldo si el logo no carga */
	
}
/* 3. ESTRUCTURA DEL PANEL (Por encima del fondo) */
.site-wrapper {
    display: flex;
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 10; /* LA CAPA MÁS ALTA, para que el menú funcione */
}

/* 4. BARRA LATERAL (Sidebar) */
.sidebar {
    width: 260px;
    height: 100vh;
    background: rgba(255, 255, 255, 0); /* Efecto vidrio */
    //backdrop-filter: blur(12px);
    //-webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(255, 255, 255, 0);
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 40px 20px;
    text-align: center;
}

.main-logo {
    max-width: 180px; /* Controlamos el tamaño del logo AS */
    height: auto;
}

/* 5. MENÚ DE NAVEGACIÓN (Limpiando los puntos azules) */
.nav-links {
	max-height: calc(100vh - 60px);
	overflow-y: auto;
	overflow-x: hidden;
    list-style: none; /* QUITA LOS PUNTOS NEGROS */
    padding: 0;
    margin: 0;
	-webkit-overflow-scrolling: touch;
}

.nav-links li {
    width: 100%;
}

.nav-links li a {
    display: flex;
    align-items: center;
    padding: 18px 25px;
    color: #1a202c; /* Color oscuro para legibilidad */
    text-decoration: none; /* QUITA EL SUBRAYADO AZUL */
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border-left: 5px solid transparent;
}

.nav-links li a:hover {
    background: rgba(0, 174, 239, 0.1);
    color: #0078d4;
    border-left: 5px solid #00aeef;
}

.icon {
    margin-right: 15px;
    font-size: 1.4rem;
}

/* 6. CONTENEDOR DE CONTENIDO (Derecha) */
.content-container {
    flex-grow: 1;
    padding: 40px;
    display: flex;
    justify-content: left;
    align-items: flex-start;
    overflow-y: auto;
}

#sub-app {
	
    background: rgba(255, 255, 255, 0.9);
    padding: 40px;
    border-radius: 20px;
    width: 100%;
    //max-width: 900px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}


.flecha {
    position: absolute;
    /* Gradiente: arranca transparente en la cola (0%) y se vuelve sólido en la punta (100%) */
    /*background: linear-gradient(to right, rgba(0, 128, 255, 0) 0%, rgba(0, 128, 255, 1) 100%);*/
	background: rgba(49, 46, 146, 0.6);
    pointer-events: none;
    height: 4px; 
    filter: 
        drop-shadow(0 0 5px rgba(0, 174, 239, 1))
     ;
	 /*mix-blend-mode: screen;*/
    /* El clip-path para la punta */
    clip-path: polygon(
        0% 10%, 
        calc(100% - 40px) 0%, 
        calc(100% - 40px) 0%, 
        100% 50%, 
        calc(100% - 40px) 100%, 
        calc(100% - 40px) 100%, 
        0% 100%,
		40px 50%
    );
}

/* LA COLA (Efecto de remate) */
.flecha::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    /* Hacemos un puntito muy pequeño y sutil al inicio */
    width: 3px;
    height: 3px;
    background-color: rgba(0, 128, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    /* Un pequeño brillo para que no sea un punto muerto */
    box-shadow: 0 0 5px rgba(0, 128, 255, 0.8);
}

/* ANIMACIÓN ÚNICA */
@keyframes deslizarFlecha {
    0% {
        transform: translate(0, 0) rotate(var(--rotacion));
        opacity: 1;
    }

    100% {
        transform: translate(var(--dist-x), var(--dist-y)) rotate(var(--rotacion));
        opacity: 1;
    }
}



button { 
	padding: 10px 15px; 
	background: #27ae60; 
	color: white; 
	border: none; 
	cursor: pointer; 
	border-radius: 4px; 
}
button:hover { 
	background: #2ecc71; 
}

select, input { 
			padding: 8px; 
			border-radius: 4px; 
			width: 250px; 
		}
		
		
boton-cuadrado{
		width: 50px; 
}