body { margin: 0; display: flex; background: #000; color: white; font-family: 'Segoe UI', Tahoma, sans-serif; overflow: hidden; height: 100vh;}

#sidebar-principal { 
    width: 320px; 
    background: #1a1a1a; 
    padding: 20px; 
    box-sizing: border-box; 
    border-right: 2px solid #e74c3c; 
    display: flex; 
    flex-direction: column; 
    transition: transform 0.3s ease;
    z-index: 1000;
}
#sidebar-principal.collapsed { transform: translateX(-320px); position: absolute; }

#toggle-sidebar {
    position: fixed; top: 15px; left: 15px; z-index: 1100;
    padding: 8px 15px; background: #e74c3c; color: white; border: none; cursor: pointer; font-weight: bold;
}

#area-principal { flex-grow: 1; position: relative; transition: margin-left 0.3s ease; background: #000; }

/* MAPA CONCEPTUAL */
#vista-inicio { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; }
#contenedor-mapa { max-width: 900px; width: 100%; text-align: center; }
.nodo-central { background: #1a1a1a; border: 2px solid #e74c3c; padding: 30px; border-radius: 10px; margin-bottom: 40px; }
.nodo-central h1 { color: #e74c3c; font-size: 2.5rem; margin: 0; letter-spacing: 2px; }
.cuadricula-nodos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nodo-btn { background: #2a2a2a; color: #ccc; border: 1px solid #444; padding: 20px; font-size: 1rem; border-radius: 8px; cursor: pointer; transition: 0.3s; }
.nodo-btn:hover { background: #e74c3c; color: #fff; transform: translateY(-5px); }

/* MODAL */
#modal-lectura { background: #1a1a1a; border-top: 5px solid #e74c3c; max-width: 600px; padding: 40px; border-radius: 10px; flex-direction: column; position: relative; }
#btn-cerrar-modal { position: absolute; top: 20px; right: 20px; background: transparent; color: #aaa; border: 1px solid #aaa; padding: 5px 10px; cursor: pointer; }
#btn-iniciar-lab { background: #e74c3c; color: white; border: none; padding: 15px; margin-top: 20px; cursor: pointer; font-weight: bold; width: 100%; }

/* CONTROLES */
.nav-pestañas { display: flex; flex-direction: column; gap: 5px; margin-top: 20px; }
.tab-btn { padding: 12px; background: #2a2a2a; color: #999; border: none; text-align: left; cursor: pointer; }
.tab-btn.activo { background: #e74c3c; color: white; }
#btn-obturador { width: 100%; padding: 15px; background: #c0392b; color: white; border: none; font-weight: bold; cursor: pointer; margin-top: 15px; }
#btn-ir-cuarto { width: 100%; padding: 15px; background: #8e44ad; color: white; border: none; margin-top: 10px; cursor: pointer; }

#canvas-container { width: 100%; height: 100%; display: none; position: relative;}
#btn-xray { position: absolute; top: 15px; right: 20px; background: rgba(0,0,0,0.6); color: white; border: 1px solid #555; padding: 10px; cursor: pointer; z-index: 1000; }

.logo-umh { height: 35px; } .logo-sapiens { height: 40px; }
.logos { display: flex; gap: 15px; justify-content: center; margin-bottom: 20px; }
/* =========================================
   ESTILO DEL MAPA RADIAL (SAPIENS)
   ========================================= */

#area-principal { 
    flex-grow: 1; 
    position: relative; 
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

#vista-radial {
    position: relative;
    width: 900px; /* Tamaño fijo para que los porcentajes no varíen */
    height: 900px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Nodo Central: Fijo en el centro */
.nodo-radial.centro {
    position: absolute;
    width: 200px; height: 200px;
    background: #111; border: 3px solid #fff; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    text-align: center; color: white; font-size: 1.4rem; font-weight: bold;
    z-index: 10; box-shadow: 0 0 30px rgba(255,255,255,0.1);
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* Nodos Periféricos (Posiciones precisas basadas en tu diseño) */
.nodo-radial:not(.centro) {
    position: absolute; border-radius: 50%; border: none;
    display: flex; justify-content: center; align-items: center;
    text-align: center; font-weight: bold; cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5; padding: 15px; font-size: 0.95rem;
    transform: translate(-50%, -50%);
}

.nodo-radial:not(.centro):hover { transform: translate(-50%, -50%) scale(1.1); z-index: 20; }

/* Coordenadas para imitar la foto */
.p1 { top: 10%; left: 50%; } /* Presentacion */
.p7 { top: 22%; left: 78%; } /* Laboratorio (Rojo) */
.p3 { top: 50%; left: 90%; } /* Historia */
.p4 { top: 78%; left: 78%; } /* Solarigrafia */
.p5 { top: 90%; left: 50%; } /* Impacto */
.p8 { top: 78%; left: 22%; } /* Revelado (Rojo) */
.p6 { top: 50%; left: 10%; } /* Referentes */
.p2 { top: 22%; left: 22%; } /* Ciencia */
.p9 { top: 10%; left: 32%; } /* Tutorial (Amarillo) */

/* Colores */
.beige { background: #e3d5b8; color: #333; width: 120px; height: 120px; }
.rojo { background: #c0392b; color: white; width: 150px; height: 150px; }
.amarillo { background: #f1c40f; color: #333; width: 130px; height: 130px; }
/* =========================================
   DISEÑO PÁGINA DE INICIO (ESTILO SAPIENS)
   ========================================= */

.body-inicio {
    background: #000;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    margin: 0;
    height: 100vh;
    overflow: hidden;
}

#pantalla-inicio {
    display: flex;
    width: 100%;
    height: 100vh;
    padding: 40px 60px;
    box-sizing: border-box;
}

/* Columna Izquierda: Textos */
.columna-texto {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 40px;
}

.texto-intro p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #ddd;
    margin-bottom: 20px;
}

.btn-tutorial-main {
    background: #d4a32e; /* Amarillo mostaza similar al de la imagen */
    color: #000;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: fit-content;
    margin-top: 20px;
    transition: transform 0.2s, background 0.2s;
}

.btn-tutorial-main:hover {
    transform: scale(1.05);
    background: #e5b33e;
}

/* Columna Derecha: Burbujas */
.columna-nodos {
    width: 55%;
    position: relative;
    height: 100%;
}

.nodo-burbuja {
    position: absolute;
    border-radius: 50%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.nodo-burbuja:hover {
    transform: translate(-50%, -50%) scale(1.1);
    z-index: 100;
}

/* Tamaños por importancia */
.c-grande { width: 200px; height: 200px; font-size: 1.3rem; }
.c-medio { width: 160px; height: 160px; font-size: 1.1rem; font-weight: bold; }
.c-pequeno { width: 120px; height: 120px; font-size: 0.9rem; }

/* Colores */
.beige { background: #e3d5b8; color: #111; }
.rojo { background: #9b2226; color: #fff; } /* Un rojo más oscuro y elegante */
/* =========================================
   MENÚ LATERAL UNIFICADO (SAPIENS STYLE)
   ========================================= */
#sidebar-principal { 
    width: 280px; 
    background: #111; 
    padding: 25px; 
    box-sizing: border-box; 
    border-right: 1px solid #333; 
    display: flex; 
    flex-direction: column; 
    transition: transform 0.3s ease;
    z-index: 1000;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}

#sidebar-principal.collapsed { transform: translateX(-280px); }

/* Área principal adaptativa */
#area-principal {
    transition: margin-left 0.3s ease, width 0.3s ease;
}
#area-principal.expanded {
    margin-left: 0 !important;
    width: 100% !important;
}

/* Logo y Título */
.header-menu {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 1px solid #222;
    padding-bottom: 20px;
}

/* Botones de Navegación */
.nav-pestañas { display: flex; flex-direction: column; gap: 10px; }

.tab-btn { 
    padding: 15px; 
    background: transparent; 
    color: #888; 
    border: 1px solid transparent; 
    text-align: left; 
    cursor: pointer; 
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
    border-radius: 4px;
}

.tab-btn:hover { background: #1a1a1a; color: #fff; border-color: #333; }
.tab-btn.activo { background: #e74c3c; color: white; border-color: #e74c3c; font-weight: bold; }

/* Panel de Ajustes de Cámara (Solo para la página de la cámara) */
#panel-ajustes {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #333;
    z-index: 500;
    color: white;
}

#panel-ajustes h3 { font-size: 1rem; color: #e74c3c; margin-top: 0; border-bottom: 1px solid #333; padding-bottom: 10px; }
#panel-ajustes label { display: block; margin-top: 15px; font-size: 0.8rem; color: #aaa; }
#panel-ajustes input, #panel-ajustes select { width: 100%; margin-top: 5px; }

/* Botón del menú (Trigger) */
#toggle-sidebar {
    position: fixed; top: 20px; left: 20px; z-index: 1100;
    background: #e74c3c; color: white; border: none; padding: 10px 15px;
    cursor: pointer; font-weight: bold; border-radius: 4px;
}

/* Firma del autor en la esquina inferior izquierda */
        .firma-autor {
            position: fixed; 
            bottom: 30px; 
            left: 30px; 
            color: #777; 
            font-size: 0.85rem; 
            z-index: 500; 
            pointer-events: none; /* Para no bloquear clics */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            letter-spacing: 0.5px;
        }
        .firma-autor span {
            color: #ccc;
            font-weight: bold;
        }