:root{
        --primary: #1C396B;;
        --bg-light:#f4f4f4;
        --bg-hover:#e0f2f1;
        --bg-active:#b2dfdb;
    }
    *{box-sizing:border-box;}
    body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;height:100vh;display:flex;flex-direction:column;}
    header{background:var(--primary);color:#fff;padding:.75rem 1rem;display:flex;align-items:center;gap:.75rem;}
    /*header h1{flex:1;margin:0;font-size:1.2rem;font-weight:600;} */
    #toggleBtn{font-size:1.5rem;background:none;border:none;color:#fff;cursor:pointer;display:none;}

    main{flex:1;display:flex;min-height:0;position:relative;}
    #sidebar{width:320px;background:var(--bg-light);overflow-y:auto;padding:1rem;}
    #map{flex:1;min-width:0;}

    .restaurant-item{cursor:pointer;border-radius:8px;padding:.5rem .75rem;margin-bottom:.75rem;transition:background .15s ease;}
    .restaurant-item:hover{background:var(--bg-hover);}    
    .restaurant-item.active{background:var(--bg-active);}    
    .cost{font-weight:bold;margin-left:.25rem;}
    .address{display:block;font-size:.85rem;color:#555;margin-top:.25rem;}
    .search-box{margin-bottom:1rem;}
    .search-box input{width:100%;padding:.5rem .75rem;border:1px solid #ccc;border-radius:6px;}

    /* RESPONSIVE */
    @media(max-width:768px){
        #toggleBtn{display:block;}
        #sidebar{position:absolute;left:-100%;top:0;height:100%;max-width:80%;transition:left .3s ease;box-shadow:2px 0 6px rgba(0,0,0,.15);z-index:1000;}
        #sidebar.open{left:0;}
        /* Add backdrop when sidebar open */
        #backdrop{content:"";position:absolute;inset:0;background:rgba(0,0,0,.2);backdrop-filter:blur(1px);display:none;}
        #backdrop.show{display:block;}
    }
        .logo, .volver {
      width: 25%;
    }

    .logo a, .volver a {
      color: #fff;
      text-decoration: none;
      font-weight: bold;
    }
    .logo a:hover, .volver a:hover {
      text-decoration: underline;
    }