body {
    --banner-height: 4.5em;
    --footer-height: 2.2em;

    box-sizing: border-box; /* Asegura que el padding y el borde se incluyan en el ancho total */
    background-color: black;
    color: white;
}

button {
    color: grey;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.banner {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: var(--banner-height);
    background-color: #4CAF50;
    color: white;
    text-align: center;
    margin: 0px; 
    box-sizing: border-box;
}


.panel {
    position:absolute;
    top: var(--banner-height);
    left:0;
    width: 100%;
    height: calc(100% - var(--footer-height) - var(--banner-height));
    background-color: #3cb37e;
    color: #ffffffe8;
    text-align: center;
    margin: 0px; 
}

.pie {
    position:absolute;
    bottom:0;
    /* top:calc(100% - var(--footer-height)); */
    left:0;
    width: 100%;
    height: var(--footer-height);
    background-color: #1d138d;
    color: #ffffffe8;
    text-align: center;
    margin: 0px; 
}