body {
    background-image: url('assets/Azul.jpg');
    background-size: cover;
    background-attachment: fixed;
    margin: 0;
    padding: 30px; /* page margin around content */
    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
    font-size: 18px; /* larger base type for vintage UI */
}
.main-window {
    background-color: #c0c0c0;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: 2px 2px 0px #000;
    padding: 6px;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
}
.sidebar {
    border-right: 2px dashed #45f3ff; 
    padding-right: 15px;
}

/* When sidebar is inside a win-body (white content area), remove the dashed divider */
.win-body .sidebar { border-right: none; padding-right: 0; padding-left: 10px; }

/* grid inside the main window's white body */
.win-body.main-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items:start; }

.layout {
    display: grid;
    grid-template-columns: 280px 1fr 280px; /* larger side windows */
    gap: 30px;
    margin: 0 auto;
    align-items: start;
    width: 100%;
    min-height: calc(100vh - 60px); /* fill viewport leaving body padding */
}

.win-window {
    background-color: #c0c0c0;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: 2px 2px 0px #000;
    padding: 3px;
}

/* allow side windows to scale with the grid column */
.win-window { width: 100%; box-sizing: border-box; }


.win-buttons {
    background: none;
    border: none;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    outline: none;
    width: 22px;
    height: 18px;
}

.win-buttons { background-position: center; background-size: 16px 16px; }

/* ensure the titlebar content is vertically centered and buttons sit flush */
.win-titlebar { gap: 6px; }
.btn-controls { align-items: center; }

.win-titlebar {
    background: linear-gradient(90deg, #000080, #1084d0);
    background-color: #000080; /* Fallback deep blue color */
    height: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
}

.win-title {
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.win-body {
    background-color: #fff;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    margin: 6px;
    padding: 18px;
    color: #1a5737;
    font-size: 20px;
    line-height: 1.5;
}

.btn-controls {
    display:flex;
    gap: 2px;
}

.btn-minimize {background-image: url('assets/minimize.png');}

.btn-close {background-image: url('assets/close.png');}

.btn-minimizeAcc {background-image: url('assets/minimizeAcc.png');}

.btn-close:active  {background-image: url('assets/closeAcc.png');}

.btn-minimize:active {background-image: url('assets/minimizeAcc.png');}