*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:20px;
    background:#9bb85c;
    font-family:Arial, Helvetica, sans-serif;
}

/* CAJA PRINCIPAL */
.page{
    width:min(600px, 100%);
    min-height:900px;

    border-radius:18px;
    overflow:hidden;

    background:#c9ddb0;
    border:1px solid rgba(255,255,255,.4);

    box-shadow:
        0 0 15px rgba(0,0,0,.25),
        inset 0 0 20px rgba(255,255,255,.4);
}

/* HEADER */
.header{
    height:180px;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    padding-right:80px;

    border-bottom:1px solid rgba(0,0,0,.15);
}

.logo h1{
    font-size:4rem;
    font-weight:300;
    color:white;
}

/* MENU */
.menu{
    height:42px;

    display:flex;
    align-items:center;
    gap:8px;

    padding-inline:12px;

    border-bottom:1px solid rgba(0,0,0,.15);
}

.menu button{
    cursor:pointer;

    padding:6px 14px;

    border:none;
    border-radius:4px;

    background:#f5f5f5;
}

.menu button:hover{
    opacity:.9;
}

/* ZONA INFERIOR */
.content{
    display:grid;
    grid-template-columns: 1fr 420px;
    gap:24px;

    padding:24px;
}

/* CAJA IZQUIERDA */
.left-panel{
    min-height:650px;

    border-radius:14px;

    background:rgba(255,255,255,.25);

    padding:20px;

    border:1px solid rgba(255,255,255,.5);
}

/* CAJA DERECHA */
.right-panel{
    min-height:650px;

    border-radius:14px;

    background:rgba(255,255,255,.25);

    padding:20px;

    border:1px solid rgba(255,255,255,.5);
}

.comments-box{
    margin-top:15px;
}

/* PANELES */
.panel{
    display:none;
}

.panel.active{
    display:block;
}