/* BODY Y FUENTES */
body{
    font-family: Inter, system-ui;
    margin:0;
    background:#f9fafb;
}

/* TOPBAR */
.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 20px;
    border-bottom:1px solid #eee;
    background:white;
    position: sticky;
    top: 0;
    z-index: 1001;
}

.logo{
    font-weight:600;
}

.search{
    position: relative;
    flex:1;
    max-width:400px;
    margin: 0 10px;
}

.search input{
    width:100%;
    padding:8px 12px;
    border-radius:8px;
    border:1px solid #ddd;
}

.actions button{
    background:none;
    border:none;
    font-size:18px;
}

/* LAYOUT */
.layout{
    display:grid;
    grid-template-columns:250px 1fr 220px;
    gap:10px;
}

/* SIDEBAR */
.sidebar{
    border-right:1px solid #eee;
    padding:20px;
    height: calc(100vh - 60px);
    position:sticky;
    top:60px;
    background:white;
    transition: transform 0.3s ease;
}

.sidebar.collapsed{
    transform: translateX(-100%);
}

.sidebar a{
    display:block;
    padding:6px 0;
    text-decoration:none;
    color:#555;
}

.sidebar a:hover,
.sidebar a.active{
color:#2563eb;
font-weight:600;
}

/* CONTENT */
.content{
    padding:50px;
    max-width:850px;
}

/* TOC */
.toc{
    border-left:1px solid #eee;
    padding:20px;
    font-size:14px;
}

.toc ul{
    list-style:none;
    padding-left:0;
}

.toc a{
    text-decoration:none;
    color:#666;
}

.toc a:hover{
    color:#2563eb;
}

/* PAGE NAV */
.page-nav{
    margin-top:60px;
    display:flex;
    justify-content:space-between;
    border-top:1px solid #eee;
    padding-top:20px;
}

/* SEARCH RESULTS */
.search-results{
    position:absolute;
    top:40px;
    width:100%;
    max-height:400px;
    overflow-y:auto;
    background:white;
    border:1px solid #ddd;
    border-radius:8px;
    z-index:1002;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.search-result-item a{
    display:block;
    padding:6px 8px;
    text-decoration:none;
    color:#333;
}

.search-result-item a:hover{
    background:#f1f5f9;
}

mark{
    background:#ffe58f;
    padding:0;
    border-radius:2px;
}

/* Dark Mode */
body.dark{
  background-color: #121212;
  color: #ffffff!important;
  
}
body.dark p{
  color:#ffffff;
}

body.dark #tocList a{
  color:#ffffff;
} 
.dark .sidebar{
    background:#020617;
}

.dark .content{
    background:#0f172a;
}

/* RESPONSIVE MOBILE */
@media (max-width: 992px){
    .layout{
        grid-template-columns: auto 1fr;
    }
    .toc{
        display:none;
    }
    .sidebar{
        position: fixed;
        z-index: 1000;
        height: 100%;
        top:0;
        left:0;
        width:250px;
        transform: translateX(-100%);
    }
    .sidebar.show{
        transform: translateX(0);
    }
    .content{
        padding:20px;
    }
}
/*Fundamentos*/
.menu-toggle{

border:none;
background:none;
font-size:24px;
margin-right:10px;

}

@media (max-width:992px){

.layout{

grid-template-columns:1fr;

}

.sidebar{

position:fixed;
left:-260px;
top:0;
height:100%;
width:250px;
z-index:1000;
transition:0.3s;

}

.sidebar.show{

left:0;

}

.toc{

display:none;

}

.content{

padding:20px;

}

}

.toc a.active{
    color:#2563eb;
    font-weight:600;
}

.content h1{
font-size:2.4rem;
font-weight:700;
margin-bottom:20px;
}

.content h2{
margin-top:40px;
font-weight:600;
}

.content p{
line-height:1.7;
color:#475569;
}

.menu-toggle{
display:none;
border:none;
background:none;
font-size:24px;
margin-right:10px;
}

@media (max-width:992px){

.menu-toggle{
display:block;
}

}
/*terminal*/
    .terminal {
      background: #000;
      color: #00ff9c;
      padding: 20px;
      border-radius: 10px;
      font-family: monospace;
      height: 400px;
      overflow-y: auto;
    }

    .terminal-input {
      background: black;
      color: #00ff9c;
      border: none;
      outline: none;
      width: 100%;
    }

    .command-line {
      display: flex;
    }

    .prompt {
      margin-right: 5px;
    }

    /* Layout documentación */

.doc-layout{
display:grid;
grid-template-columns:220px 1fr 220px;
gap:30px;
padding:30px;
}

/* Sidebar interno */

.doc-sidebar{
position:sticky;
top:90px;
height:fit-content;
}

.doc-sidebar a{
display:block;
padding:6px 0;
color:#555;
text-decoration:none;
}

.doc-sidebar a:hover{
color:#000;
font-weight:500;
}

/* Contenido */

.doc-content{
max-width:800px;
}

/* ===== TOC DOCUMENTATION STYLE ===== */

.toc{
position:sticky;
top:90px;
max-height:calc(100vh - 100px);
overflow-y:auto;
padding-right:10px;
font-size:14px;
}

.toc ul{
list-style:none;
padding-left:0;
}

.toc li{
margin-bottom:6px;
}

.toc a{
text-decoration:none;
color:#666;
display:block;
padding:4px 0;
transition:all .2s;
}

.toc a:hover{
color:#000;
}

.toc a.active{
color:#0d6efd;
font-weight:600;
}

/* subnivel */

.toc .toc-h3{
padding-left:10px;
font-size:13px;
}

/* Cards */

.tech-card{
border:1px solid #eee;
border-radius:8px;
padding:15px;
text-align:center;
height:100%;
}

.tech-card i{
font-size:30px;
margin-bottom:10px;
}


/*modal de cada imagen*/
.pc-diagram {
            position: relative;
            max-width: 800px;
            margin: auto;
          }

          .hotspot {
            position: absolute;
            width: 100px;
            height: 40px;
            border-radius: 5%;
            /* background: rgba(255, 0, 0, 0.3); */
            cursor: pointer;
            transition: .3s;
          }

          .hotspot:hover {
            /* background: rgba(255, 0, 0, 0.6); */
            transform: scale(1.1);
          }

          /* posiciones */

          .cpu {
            top: 9%;
            left: 12%;
          }

          .ram {
            top: 5%;
            left: 40%;
          }

          .gpu {
            top: 9%;
            left: 70%;
          }

           .cooling {
            top: 28%;
            left: 80%;
          }

           .devices {
            top: 44%;
            left: 70%;
          }

            .power {
            top: 26%;
            left: 6%;
          }

            .storage {
            top: 44%;
            left: 18%;
          }

          .motherboard {
            top: 30%;
            left: 42%;
          }

/*redes*/
/*modal de cada imagen redes*/
.redes {
        position: relative;
        max-width: 800px;
        margin: auto;
        }
.hotspot-redes {
        position: absolute;
        width: 200px;
        height: 40px;
        border-radius: 5%;
        /* background: rgba(255, 0, 0, 0.3); */
        cursor: pointer;
        transition: .3s;
        }
.bus {
    top: 8%;
    left: 5%;
    }

.mesh {
    top: 18%;
    left: 5%;
    }

.point-to-point {
    top: 28%;
    left: 5%;
    }   

.ring {
    top: 8%;
    left: 36%;
    } 
.tree{
    top: 18%;
    left: 36%;
    } 

.p2mp{
    top: 28%;
    left: 36%;
    } 

.star{
    top: 8%;
    left: 69%;
    } 
    
.ring2{
    top: 18%;
    left: 69%;
    }     
.hybrid{
    top: 28%;
    left: 69%;
    } 

/*iso model*/

.applicacion{
    top: 62%;
    left: 23%;
    } 

.presentacion{
    top: 65%;
    left: 23%;
    } 
.sesion{
    top: 68%;
    left: 23%;
    } 

.transporte{
    top: 71%;
    left: 23%;
    } 

.red{
    top: 74%;
    left: 23%;
    } 

.enlace{
    top: 77%;
    left: 23%;
    }   
.fisico{
    top: 81%;
    left: 23%;
    }   
    
 /*Seguridad Informática*/   
 .seguridad {
        position: relative;
        max-width: 800px;
        margin: auto;
        }
.hotspot-seguridad {
        position: absolute;
        width: 130px;
        height: 78px;
        border-radius: 5%;
        /* background: rgba(255, 0, 0, 0.3); */
        cursor: pointer;
        transition: .3s;
        }
.firewall{
    top: 10%;
    left: 10%;
    }   

.cifrado{
    top: 10%;
    left: 42%;
    }      
    
.malware{
    top: 10%;
    left: 75%;
    }   
.phishing{
    top: 26%;
    left: 75%;
    }   
    
.password{
    top: 25%;
    left: 42%;
    } 

.antivirus{
    top: 25%;
    left: 9%;
    } 

.twoFactor{
    top: 42%;
    left: 9%;
    } 

.secureNetwork{
    top: 42%;
    left: 41%;
    }    

.socialEngineering{
    top: 42%;
    left: 74%;
    }