/**
 * Custom Header CSS - IDE Online
 * Versión: 2.0.0
 */

:root{
    --header-bg:#0a1525;
    --menu-bg:#0f2549;
    --accent-green:rgba(44,191,24,.96);
    --accent-green-light:rgba(44,191,24,.1);
    --text-white:#fff;
    --header-height:90px;
    --header-height-mobile:95px;
    --logo-size:55px;
    --logo-size-mobile:50px
}
body{margin:0;padding:0}
.custom-header{position:static;width:100%;background:var(--header-bg);box-shadow:0 2px 10px rgba(0,0,0,.1);z-index:9999;padding:20px 0;height:var(--header-height)}
.header-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 20px;height:100%;position:relative}
.menu-toggle{display:flex;flex-direction:column;cursor:pointer;padding:8px;background:var(--menu-bg);border-radius:8px;transition:all .3s ease;position:relative;width:36px;height:32px;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.2);flex-shrink:0}
.menu-toggle:hover{background:var(--accent-green);transform:scale(1.05)}
.menu-toggle::before,.menu-toggle::after{content:"";position:absolute;width:18px;height:3px;background:var(--text-white);left:50%;transform:translateX(-50%);transition:all .3s ease}
.menu-toggle::before{top:7px}
.menu-toggle::after{bottom:7px}
.menu-toggle .hamburger-line{width:18px;height:3px;background:var(--text-white);margin:0 auto;transition:all .3s ease}
.menu-toggle.active::before{transform:translateX(-50%) rotate(45deg);top:50%;margin-top:-1.5px}
.menu-toggle.active::after{transform:translateX(-50%) rotate(-45deg);bottom:50%;margin-bottom:-1.5px}
.menu-toggle.active .hamburger-line{opacity:0;transform:scale(0)}
.side-menu{position:absolute;top:var(--header-height);left:-300px;width:300px;height:calc(100vh - var(--header-height));background:var(--menu-bg);transition:left .4s ease;z-index:10000;padding-top:20px;box-shadow:2px 0 15px rgba(0,0,0,.2);overflow:hidden}
.side-menu.active{left:0}
.side-menu ul{list-style:none;padding:0;margin:0}
.side-menu li{border-bottom:1px solid rgba(255,255,255,.1)}
.side-menu a{display:block;padding:20px 30px;color:var(--text-white);text-decoration:none;font-size:16px;font-weight:500;transition:all .3s ease;position:relative}
.side-menu a:hover{background:var(--accent-green-light);color:var(--accent-green);padding-left:40px}
.side-menu a::before{content:"";position:absolute;left:0;top:0;height:100%;width:4px;background:var(--accent-green);transform:scaleY(0);transition:transform .3s ease}
.side-menu a:hover::before{transform:scaleY(1)}
.menu-overlay{position:absolute;top:var(--header-height);left:0;width:100%;height:calc(100vh - var(--header-height));background:rgba(0,0,0,.5);z-index:9999;opacity:0;visibility:hidden;transition:all .3s ease}
.menu-overlay.active{opacity:1;visibility:visible}
.logo-container{flex:1;display:flex;justify-content:center;align-items:center}
.logo-container a{display:inline-flex;justify-content:center;align-items:center;transition:transform .3s ease}
.logo-container a:hover{transform:scale(1.05)}
.custom-logo{max-height:var(--logo-size);width:auto;height:auto;object-fit:contain}
.right-menu{display:flex;align-items:center;gap:18px;flex-shrink:0;justify-content:flex-end;min-width:100px}
.right-menu-item{display:flex;align-items:center;color:var(--text-white);text-decoration:none;font-weight:600;transition:all .3s ease;padding:9px 12px;border-radius:25px;position:relative;font-size:11px}
.right-menu-item:hover{color:var(--accent-green);background:var(--accent-green-light)}
.profile-icon{width:30px;height:30px;background:var(--menu-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-white);font-size:12px;cursor:pointer;transition:all .3s ease;border:2px solid transparent}
.profile-icon:hover{transform:scale(1.1);border-color:var(--menu-bg);box-shadow:0 5px 15px rgba(15,37,73,.3)}
.header-icon{width:13px;height:13px;fill:currentColor;vertical-align:-0.125em;margin-right:5px;flex-shrink:0}
.profile-icon .header-icon{width:12px;height:12px;margin:0}

@media(max-width:768px){
    .header-container{padding:0 15px}
    .custom-header{height:var(--header-height-mobile);padding:15px 0}
    .custom-logo{max-height:var(--logo-size-mobile)}
    .right-menu{gap:10px}
    .right-menu-item span{display:none}
    .right-menu-item{padding:6px 8px;font-size:10px}
    .header-icon{width:11px;height:11px}
    .menu-toggle{width:32px;height:28px;padding:6px}
    .menu-toggle::before,.menu-toggle::after{width:16px}
    .menu-toggle::before{top:6px}
    .menu-toggle::after{bottom:6px}
    .menu-toggle .hamburger-line{width:16px;height:2px}
    .profile-icon{width:25px;height:25px;font-size:10px}
    .profile-icon .header-icon{width:10px;height:10px}
    .side-menu,.menu-overlay{top:var(--header-height-mobile);height:calc(100vh - var(--header-height-mobile))}
}