/* ==========================================================================
   El menú de arriba (Antonio, 24-oct-2026)

   «Quitaría menú lateral y todo arriba en menú superior: Diario, Medidas,
   Recetas, Rutinas, Mi baraja… Puedes dejar lo de Consulta» y «en esos menús
   colores más minimalista».

   La barra (#bottom-nav, con sus clases de siempre para no romper app.js ni
   el tour) vive ahora dentro de la cabecera. Aquí se deshacen la barra
   lateral de escritorio (styles.css, apple-theme.css) y la pastilla de abajo
   del móvil, y se pinta en sobrio: texto gris, la activa en negro con una
   raya debajo, sin iconos ni fondos de color. Va la última de las hojas, y con
   !important donde las otras ya lo llevan.
   ========================================================================== */

#app-header {
    gap: 16px;
    background: #fff;
}

/* El logo vuelve a la cabecera también en escritorio (antes lo llevaba el lateral). */
#app-header > a:first-child { display: flex !important; flex-shrink: 0; }
#app-header .header-logo { display: block !important; }

#app-header .menu-superior {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px !important;
    width: auto !important;
    max-width: none !important;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: auto;
    scrollbar-width: none;
    z-index: auto !important;
}
#app-header .menu-superior::-webkit-scrollbar { display: none; }
#app-header .menu-superior::before,
#app-header .menu-superior::after { content: none !important; display: none !important; }

#app-header .menu-superior .bottom-nav-item {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
    width: auto !important;
    min-height: 44px;
    padding: 0 12px !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #6e6e73 !important;
    white-space: nowrap;
}
/* En el móvil la barra vieja solo enseñaba sus «mobile-primary»: aquí se
   ven todas, salvo las ocultas y Mi baraja para quien aún no la tiene
   (body.sin-baraja, baraja.css). */
#app-header .menu-superior .bottom-nav-item { display: flex !important; }
#app-header .menu-superior .bottom-nav-item[hidden],
body.sin-baraja #app-header .menu-superior [data-nav="baraja"] { display: none !important; }
#app-header .menu-superior .bottom-nav-item svg { display: none !important; }
#app-header .menu-superior .bottom-nav-item span {
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
}
#app-header .menu-superior .bottom-nav-item:hover { color: #1d1d1f !important; }
#app-header .menu-superior .bottom-nav-item.active {
    color: #1d1d1f !important;
    border-bottom-color: #1d1d1f !important;
}
#app-header .menu-superior .bottom-nav-item.active span { font-weight: 600 !important; }
#app-header .menu-superior .bottom-nav-item:focus-visible {
    outline: 2px solid #1d1d1f;
    outline-offset: -4px;
}

/* Los botones del admin (Métricas, Alimentos), en el mismo tono: blanco con
   borde fino en vez de negro y amarillo. Solo los ve la cuenta de admin. */
#app-header .admin-metrics-btn,
#app-header .admin-foods-btn {
    background: #fff !important;
    color: #1d1d1f !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: none !important;
}
#app-header .admin-metrics-btn svg,
#app-header .admin-foods-btn svg { color: #6e6e73 !important; stroke: currentColor; }

/* Sin barra abajo: el contenido ya no necesita reservarle sitio. */
#main-content { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important; }

/* Móvil y tableta: logo y perfil en una fila, y el menú en la de abajo, de
   lado a lado; lo que no cabe va a «Más ▾» (js/menu-mas.js). */
@media (max-width: 1023px) {
    #app-header {
        flex-wrap: wrap;
        height: auto !important;
        padding-bottom: 0 !important;
        row-gap: 4px;
    }
    #app-header .menu-superior {
        order: 99;
        flex-basis: 100%;
        margin: 0 -20px !important;
        padding: 0 8px !important;
        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
    #app-header .menu-superior .bottom-nav-item { padding: 0 10px !important; }
    #app-header .menu-superior .bottom-nav-item span { font-size: 14px !important; }
    /* La barra de abajo ya no existe: fuera el hueco de 96 px que movil.css
       le guardaba al final de la pantalla (se veía una franja gris vacía). */
    body { padding-bottom: 0 !important; }
}

/* Móvil (Antonio, 25-oct-2026: «el menú en móvil no está optimizado»): las
   pestañas, más juntas, para que quepan cuatro o cinco enteras; las que no,
   las reparte js/menu-mas.js en el botón «Más ▾» del final, que despliega
   la lista. Ya no se desliza ni corta palabras. 44 px de alto de toque. */
@media (max-width: 600px) {
    #app-header .menu-superior { padding: 0 4px !important; gap: 0 !important; }
    #app-header .menu-superior .bottom-nav-item { padding: 0 7px !important; min-height: 44px; }
    #app-header .menu-superior .menu-mas-btn { padding-right: 9px !important; }
}

/* Escritorio: sin lateral, la cabecera y el contenido van de borde a borde
   y centrados (antes empujaban 220 px a la derecha). */
@media (min-width: 1024px) {
    #app-header { margin-left: 0 !important; }
    #main-content {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}