#cabecera {
  background: var(--principal);
  color: #fff;
  padding: calc(.4rem + env(safe-area-inset-top)) 16px .4rem;
}
#cabecera-finca { font-size: .72rem; font-weight: 400; }
#cabecera-titulo { font-size: 20px; margin: 0; }
#estado-nube { font-size: .72rem; }
body.sin-menu #menu-inferior, body.sin-menu #menu-lateral { display: none; }
body.sin-menu #app { display: block; }

#banner-actualizacion {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--suave-amarillo); color: var(--oscuro-amarillo); padding: 8px 16px; font-weight: 700;
}

#vista {
  padding: 12px 16px;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  max-width: 900px;
  margin: 0 auto;
  outline: none;
}

#menu-lateral { display: none; }

#menu-inferior {
  position: fixed; inset: auto 0 0 0; z-index: 10;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--superficie);
  box-shadow: 0 -1px 8px rgb(0 0 0 / .08);
  padding-bottom: env(safe-area-inset-bottom);
}

#menu-inferior .menu-enlace {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 68px; font-size: .72rem; font-weight: 400; text-decoration: none; color: var(--texto-suave);
}
#menu-inferior .menu-enlace .icono { box-sizing: border-box; width: 56px; height: 32px; padding: 3px 0; border-radius: 999px; }
#menu-inferior .menu-enlace.activo { color: var(--principal); font-weight: 700; }
#menu-inferior .menu-enlace.activo .icono { background: var(--azul-claro); }

#avisos {
  position: fixed; left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 2000;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}

@media (min-width: 900px) {
  #app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
  #menu-inferior { display: none; }
  #menu-lateral {
    display: block; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    background: var(--principal-oscuro); padding: 12px;
  }
  .menu-marca { color: #fff; font-weight: 800; font-size: 1.1rem; padding: 10px 12px 16px; }
  #menu-lateral .menu-enlace {
    display: flex; align-items: center; gap: 12px;
    min-height: 48px; padding: 0 12px; border-radius: var(--radio);
    color: #fff; text-decoration: none;
  }
  #menu-lateral .menu-enlace:hover { background: var(--principal); }
  #menu-lateral .menu-enlace.activo { background: var(--azul-claro); color: var(--principal); font-weight: 700; }
  #vista { padding: 20px 24px; }
  #avisos { left: auto; right: 24px; bottom: 24px; width: 380px; }
}