/* BOTON TRIGGER */

.oc-menu-trigger{
background:#1f5fa8;
color:#fff;
padding:12px 18px;
border-radius:4px;
font-size:16px;
font-weight:600;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.15);
transition:all .2s;
}

.oc-menu-trigger:hover{
background:#174a85;
}


/* OVERLAY */

.oc-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
opacity:0;
visibility:hidden;
transition:.3s;
z-index:9998;
}

.oc-overlay.active{
opacity:1;
visibility:visible;
}


/* PANEL OFFCANVAS */

.oc-canvas{
position:fixed;
top:0;
left:-540px;
width:540px;
height:100vh;
background:#fff;
box-shadow:4px 0 20px rgba(0,0,0,.2);
display:flex;
transition:.35s;
z-index:9999;
overflow:hidden;
}

.oc-canvas.active{
left:0;
}


/* SIDEBAR CATEGORIAS */

.oc-sidebar{
width:220px;
background:#f7f7f7;
border-right:1px solid #eee;
overflow-y:auto;
overflow-x:hidden;
}

.oc-sidebar ul{
list-style:none;
margin:0;
padding:0;
}

.oc-sidebar li{
padding:14px 20px;
cursor:pointer;
border-bottom:1px solid #e6e6e6;
font-size:16px;
transition:.2s;
}

.oc-sidebar li:hover{
background:#ffffff;
color:#1f5fa8;
font-weight:600;
}


/* CONTENIDO DERECHA */

.oc-content{
flex:1;
padding:22px;
overflow-y:auto;
overflow-x:hidden;
}


/* TITULO CATEGORIA */

.oc-panel h3{
background:#1f5fa8;
color:#ffffff;
padding:12px 18px;
border-radius:0 0 30px 0;
font-size:20px;
margin-bottom:20px;
display:flex;
align-items:center;
gap:10px;
}

.oc-panel h3::before{
content:"🖥";
font-size:18px;
margin-right:6px;
}

/* GRID SUBCATEGORIAS */

.oc-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px;
}


/* TITULOS SUBCATEGORIA */

.oc-grid h4{
font-size:16px;
margin-bottom:8px;
font-weight:600;
color:#1f5fa8;
}


/* LISTA SUBSUBCATEGORIAS */

.oc-grid ul{
list-style:none;
padding:0;
margin:0;
}

.oc-grid li{
font-size:16px;
padding:3px 0;
}


/* LINKS SUBCATEGORIA */

.oc-grid li a{
color:#2da7ff;
text-decoration:none;
transition:.2s;
}

/* LINKS SUBCATEGORIA */

.oc-grid li a{
color:#2da7ff;
text-decoration:none;
transition:.2s;
}


.oc-grid li{
font-size:16px;
padding:4px 0;
transition:all .15s;
}

.oc-grid li:hover{
transform:translateX(3px);
}

.oc-sidebar li:hover{
background:#ffffff;
color:#1f5fa8;
font-weight:600;
border-left:3px solid #1f5fa8;
}

/* PANEL VISIBILIDAD */

.oc-panel{
display:none;
}

.oc-panel.active{
display:block;
}


/* SCROLL PROFESIONAL */

.oc-sidebar::-webkit-scrollbar,
.oc-content::-webkit-scrollbar{
width:6px;
}

.oc-sidebar::-webkit-scrollbar-track,
.oc-content::-webkit-scrollbar-track{
background:#f1f1f1;
}

.oc-sidebar::-webkit-scrollbar-thumb,
.oc-content::-webkit-scrollbar-thumb{
background:#c5c5c5;
border-radius:10px;
}

.oc-sidebar::-webkit-scrollbar-thumb:hover,
.oc-content::-webkit-scrollbar-thumb:hover{
background:#999;
}


/* RESPONSIVE */

@media(max-width:768px){

.oc-canvas{
width:100%;
left:-100%;
}

.oc-canvas.active{
left:0;
}

.oc-sidebar{
width:180px;
}

.oc-grid{
grid-template-columns:1fr;
}

}

/* TITULO PRINCIPAL DE CATEGORIA */

.oc-panel h3,
.oc-panel h3 a{
color:#ffffff !important;
}


/* TITULOS DE SUBCATEGORIA */

.oc-grid h4,
.oc-grid h4 a{
color:#1f5fa8 !important;
font-size:16px;
font-weight:600;
}


/* LINKS DE SUBCATEGORIAS */

.oc-grid ul li a{
color:#2da7ff !important;
text-decoration:none;
}


/* HOVER LINKS */

.oc-grid ul li a:hover{
color:#0e5ea8 !important;
text-decoration:underline;
}