.navigation {
    background-color: #463018; /* fondo semitransparente */
    border: 1px solid #547567;
    border-radius: 8px;
    padding: 15px;        /* espacio interno */
    width: auto;          /* ancho fijo de la caja */
    margin: 20px 0 20px 20px; /* margen superior y lateral izquierdo */
    display: flex;
    flex-direction: column; /* organiza botones en columna */
    gap: 10px; 
    position: absolute;
    left: 10%;
}

.main2-buttons {
    display: flex;
    flex-direction: column; /* botones verticales */
    gap: 5px;
    position: static; /* elimina absolute */
}


.main2-button {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: 5px;
    border: 0;
    background: none;
    padding: 0;
}

.main2-button:hover {
    position: relative;
    top: 1.4px;
    left: 1.3px;
    .main2-inner {
        box-shadow: -2px -2px 2px inset white, 1px 1px 1px inset #bc7d7d6e;
    }
    .main2-text {
        letter-spacing: 5px;
    }
}

.main2-inner {
    display: flex;
    width: -webkit-fill-available;
    height: 30px;
    background: linear-gradient(to bottom, #463018 0%, #b6ffdf 50%, #b6ffdf 51%, #b6ffdf 100%);
    border: 1px solid;
    border-radius: 3px;
    box-shadow: 2px 2px 2px inset white, -1px -1px 1px inset #bc7d7d6e;
    padding: 5px;
    padding-left: 10px;
    cursor: pointer;
    align-items: center;
    gap: 5px;
}

.main2-text {
    font-size: 20px;
    letter-spacing: 4px;
    transition: 0.4s;
    text-shadow: none;
}

.tabicon::before {
    content: url(/graphics/icons/SH-icon3.gif);
    filter: saturate(0.3) hue-rotate(111deg);
}

.main2-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.main2-link {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: 5px;
    border: 0;
    background: none;
    padding: 0;
    text-decoration: none;
}

.main2-link:hover {
    position: relative;
    top: 1.4px;
    left: 1.3px;
    .main2-inner2 {
        box-shadow: -2px -2px 2px inset white, 1px 1px 1px inset #83af6c6e;
    }
    .main2-text {
        letter-spacing: 5px;
    }
}

.main2-inner2 {
    display: flex;
    width: -webkit-fill-available;
    height: 30px;
    background: linear-gradient(to bottom,  #f8f9f5 0%,#e9eeda 50%,#e0e8ca 51%,#f5f8ec 100%);
    box-shadow: 2px 2px 2px inset white, -1px -1px 1px inset #83af6c6e;
    border: 1px solid;
    border-radius: 3px;
    padding: 5px;
    padding-left: 10px;
    cursor: pointer;
    align-items: center;
    gap: 5px;
}

.main2-h2 {
    display: flex;
    margin: 5px 0px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-indent: 1px;
    justify-content: space-between;
    border-bottom: 1px dashed;
    padding-bottom: 2px;
    color: var(--black);
    text-shadow: none;
    font-style: italic;
}

.main2-h2::before {
    content: url(/graphics/icons/FL-daisy2.gif);
}