/*Estilos del menú y layout */

  body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f0f8ff; /* color claro de fondo */
  }
/* Menú lateral con z-index menor para que no tape la nieve si quieres en Vorder */
  .sidebar {
    position: fixed;
    width: 250px;
    height: 100vh;
    background-color: #A82C2C;
    padding: 20px;
    box-sizing: border-box;
    top: 0;
    left: 0;
    z-index: 1; /* debajo del fondo */
  }
  .logo {
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
  }
.logo img {
    width: 100px;
}
  .menu-item {
    padding: 15px 10px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    margin-bottom: 10px;
    border-radius: 8px;
    transition: background 0.3s;
  }
 
.menu-item a {
    text-decoration: none;
    color: rgb(169, 184, 195);
}
.menu-item a i {
    margin-right: 5px;
}

.menu-item a:hover {
    color: #fff;
}

/*---- Estilos para la franja blanca -------*/
.franja_superior {
    width: 100%;
    height: 70px; /* Puedes ajustar la altura */
    background-color: #fff; /* Blanco */
    box-shadow: inset 0 1px rgba(0,0,0,0.1); /* Opcional: sombra interna */
    box-shadow: 0.1px 0.1px 10px 0.1px;
    display: flex;
    justify-content: flex-end;
}
.franja_superior i {
    align-content: space-around;
    padding: 20px;
}

.franja_superior button {
  all: unset; /* Quita todos los estilos predeterminados, incluyendo márgenes, padding, bordes, etc. */
  display: inline-block; /* Para que puedas agregarle estilos si quieres después */
  cursor: pointer; /* Opcional: para mantener el cursor de mano */
}
/*---------------------------------------*/
@media (max-width: 768px) {
    /* Reduce tamaño del menú si quieres */
    .sidebar {
        width: 170px;
    }
}

@media (min-width: 768px) and (max-width: 860px) {
    /* Reduce tamaño del menú si quieres */
    .sidebar {
        width: 200px;
    }
}