/* EL MENÚ ☰ EN TODO EL MÓDULO · tableta y teléfono · 13/09/2026
 *
 * POR QUÉ EXISTE
 *
 * En el teléfono, ocho pantallas de Presupuestos dejaban el contenido en una
 * franja de 170 px. `styles.css` empuja `<main>` con
 * `body.inside-budget-module main { margin-left: var(--app-sidebar-width) !important }`,
 * sin media query, y a la vez convierte la barra lateral en una tira de 205 px.
 * Solo se veían bien las plantillas de Gustavo, porque traen su propia
 * navegación en `plantillas-ensambles.css`: un riel de iconos en tableta y un
 * cajón con botón ☰ en el teléfono.
 *
 * Cristian, 13/09: «dale hazlo», sobre llevar ese menú a todo el módulo.
 *
 * QUÉ HACE
 *
 * Lo mismo que las plantillas, con el mismo marcado y las mismas clases
 * (`iv-mobile-navigation-*`), para todo `body.inside-budget-module`:
 *
 *   ≤ 1040 px   riel de 72 px con iconos. El ☰ lo despliega entero, con textos
 *               y el submenú Trabajo / Configuración: el riel solo no llega a
 *               Dependencias ni a Fórmulas.
 *   ≤ 720 px    barra superior sin buscador, disparador ni notificaciones. El
 *               panel de contexto se abre solo cuando no hay disparador.
 *   ≤ 480 px    sin riel. La barra lateral es un cajón fuera de pantalla que
 *               abre el ☰.
 *
 * Va escrita a mano y cargada desde `partials/head.ejs`, después de
 * `presupuestos-tema.css`: una regeneración de Sass borraría lo que se
 * escriba en `styles.css` (AGENTS.md, convención 2).
 *
 * En las plantillas (`inside-visual-v1`) mandan las reglas de Gustavo, que
 * pesan más y cargan después. De esta hoja solo les llega lo que ellas no
 * tienen: el ☰ desde 1040 px y el riel que se despliega.
 */

/* El botón no existe fuera del módulo ni en escritorio. */
.iv-mobile-navigation-toggle { display: none; }

@media (max-width: 1040px) {
  /* ── El riel ─────────────────────────────────────────────────────────── */
  html body.inside-app-body.inside-budget-module,
  html body.inside-app-body.inside-budget-module.app-sidebar-compact {
    --app-sidebar-width: 72px !important;
  }

  html body.inside-app-body.inside-budget-module .app-sidebar--standard {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 10000 !important;
    display: flex !important;
    flex-direction: column !important;
    width: var(--app-sidebar-width) !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    padding: 8px !important;
    overflow: hidden !important;
    border-right: 1px solid rgba(104, 196, 193, .28) !important;
    border-bottom: 0 !important;
    transition: none !important;
  }

  /* Arriba del riel, el logo compacto, como en las plantillas: la barra
     superior empieza después del riel y ese hueco queda libre. */
  body.inside-budget-module .app-sidebar--standard .app-sidebar-brand {
    display: flex !important;
    flex: 0 0 auto;
    min-height: 58px;
    align-items: center;
    padding: 4px 0 8px !important;
  }

  body.inside-budget-module .app-sidebar--standard .app-sidebar-logo {
    display: flex !important;
    width: 100%;
    height: 46px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
  }

  body.inside-budget-module .app-sidebar--standard .app-sidebar-logo-full { display: none !important; }

  body.inside-budget-module:not(.theme-light) .app-sidebar--standard .app-sidebar-logo-dark.app-sidebar-logo-compact,
  body.inside-budget-module.theme-light .app-sidebar--standard .app-sidebar-logo-light.app-sidebar-logo-compact {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
  }

  body.inside-budget-module .app-sidebar--standard .app-sidebar-company,
  body.inside-budget-module .app-sidebar--standard .app-sidebar-nav-group-label,
  body.inside-budget-module .app-sidebar--standard .app-sidebar-link-text,
  body.inside-budget-module .app-sidebar--standard .app-sidebar-module-toggle,
  body.inside-budget-module .app-sidebar--standard .app-sidebar-module-submenu,
  body.inside-budget-module .app-sidebar--standard .app-sidebar-project-card {
    display: none !important;
  }

  body.inside-budget-module .app-sidebar--standard .app-sidebar-tools-nav--standard {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column !important;
    gap: 4px !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.inside-budget-module .app-sidebar--standard .app-sidebar-tool-row,
  body.inside-budget-module .app-sidebar--standard .app-sidebar-tool-row.has-toggle {
    display: block !important;
  }

  body.inside-budget-module .app-sidebar--standard .app-sidebar-home,
  body.inside-budget-module .app-sidebar--standard .app-sidebar-tools-nav--standard .app-sidebar-link,
  body.inside-budget-module .app-sidebar--standard .app-sidebar-bottom--standard .app-sidebar-collapse {
    width: 52px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    white-space: normal !important;
  }

  body.inside-budget-module .app-sidebar--standard .app-sidebar-bottom--standard {
    display: block !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 8px 0 0 !important;
  }

  /* La barra superior y el contenido empiezan después del riel.
     Con el ☰ la barra tiene un hijo más, y la rejilla de tres pistas de
     styles.css lo partía en dos renglones: medido a 768 px, 83 px de alto y el
     disparador encima del buscador. Cuatro pistas —☰, miga, buscador y
     acciones— y el logo fuera, que ya está en el riel. */
  html body.inside-app-body.inside-budget-module .budget-product-topbar {
    left: var(--app-sidebar-width) !important;
    right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    /* Las acciones pueden encogerse hasta su mínimo: con `max-content` el
       disparador se quedaba en 280 px y el avatar salía por la derecha a 768. */
    grid-template-columns: max-content minmax(90px, .55fr) minmax(120px, 1fr) minmax(min-content, max-content) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    column-gap: 10px !important;
    padding-inline: 12px !important;
    transition: none !important;
  }

  /* En las plantillas manda la rejilla de Gustavo, de tres pistas y (0,4,2), que
     además carga después. Pensada sin ☰, y con él delante el buscador quedaba
     debajo del disparador: medido en Columnas a 768 px. `header` sube a (0,4,3). */
  html body.inside-app-body.inside-budget-module.inside-visual-v1 header.budget-product-topbar {
    grid-template-columns: max-content minmax(90px, .55fr) minmax(120px, 1fr) minmax(min-content, max-content) !important;
  }

  body.inside-budget-module .budget-product-topbar-brand { display: none !important; }

  /* Cada pieza en su pista, a mano. Los creadores de fórmulas y de ensambles
     colocan la miga y las acciones con `grid-column` propio (1 y 2), y con el
     ☰ delante eso rompía la fila: medido en el creador de ensambles a 375 px,
     83 px de alto y el panel de contexto metido 9 px debajo. */
  html body.inside-app-body.inside-budget-module .budget-product-topbar > .iv-mobile-navigation-toggle { grid-column: 1 !important; grid-row: 1 !important; }
  html body.inside-app-body.inside-budget-module .budget-product-topbar > .budget-product-topbar-left { grid-column: 2 !important; grid-row: 1 !important; }
  html body.inside-app-body.inside-budget-module .budget-product-topbar > .budget-product-search { grid-column: 3 !important; grid-row: 1 !important; }
  html body.inside-app-body.inside-budget-module .budget-product-topbar > .budget-product-topbar-actions { grid-column: 4 !important; grid-row: 1 !important; }

  body.inside-budget-module .budget-product-topbar-left,
  body.inside-budget-module .budget-product-search,
  body.inside-budget-module .budget-product-topbar-actions { min-width: 0 !important; }

  /* El disparador de contexto ocupaba 280 px, y su ancho mínimo es el de su
     texto sin cortar: ninguna rejilla lo encogía. A 768 px el avatar salía
     por la derecha. Con tope de 180 px el nombre se recorta con puntos
     suspensivos, que ya tiene. */
  body.inside-budget-module .inside-contexto-disparador {
    min-width: 0 !important;
    max-width: 180px !important;
  }

  html body.inside-app-body.inside-budget-module main {
    margin-left: var(--app-sidebar-width) !important;
    width: calc(100% - var(--app-sidebar-width)) !important;
    max-width: none !important;
    transition: none !important;
  }

  /* ── El ☰ ─────────────────────────────────────────────────────────────── */
  body.inside-budget-module .iv-mobile-navigation-toggle {
    align-items: center;
    align-self: center;
    background: #15706B;
    border: 1px solid #68C4C1;
    border-radius: 0;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 44px;
  }

  body.inside-budget-module .iv-mobile-navigation-toggle svg { height: 22px; width: 22px; }

  body.inside-budget-module .iv-mobile-navigation-toggle:focus-visible {
    outline: 2px solid #68C4C1;
    outline-offset: 2px;
  }

  /* ── Abierto: el riel se despliega en cajón, con todo ─────────────────
     El `aside` en el selector no es adorno: sube el peso a (0,4,3) para ganarle
     a las reglas del riel de las plantillas, que pesan (0,4,2) y cargan después. */
  html body.inside-app-body.inside-budget-module.iv-mobile-navigation-open aside.app-sidebar--standard {
    width: min(280px, calc(100vw - 48px)) !important;
    z-index: 10500 !important;
    /* La barra superior, que queda por encima para que el ☰ cierre, tapa lo
       de arriba del cajón: el contenido empieza debajo de ella. */
    padding: calc(var(--inside-app-topbar-height, 74px) + 12px) 12px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-shadow: 12px 0 32px rgba(0, 0, 0, .38);
  }

  /* En el cajón no van el logo, que queda debajo de la barra superior, ni
     «Contraer», que no tiene sentido. Y el menú toma su alto natural para que
     el cajón entero tenga scroll: medido a 768 px, con `flex: 1 1 auto` el menú
     se desbordaba encima de «Contraer». */
  body.inside-budget-module.iv-mobile-navigation-open aside.app-sidebar--standard .app-sidebar-brand,
  body.inside-budget-module.iv-mobile-navigation-open aside.app-sidebar--standard .app-sidebar-bottom--standard {
    display: none !important;
  }

  body.inside-budget-module.iv-mobile-navigation-open aside.app-sidebar--standard .app-sidebar-tools-nav--standard {
    flex: 0 0 auto !important;
  }

  body.inside-budget-module.iv-mobile-navigation-open aside.app-sidebar--standard .app-sidebar-company { display: grid !important; }
  body.inside-budget-module.iv-mobile-navigation-open aside.app-sidebar--standard .app-sidebar-nav-group-label { display: flex !important; }
  body.inside-budget-module.iv-mobile-navigation-open aside.app-sidebar--standard .app-sidebar-link-text,
  body.inside-budget-module.iv-mobile-navigation-open aside.app-sidebar--standard .app-sidebar-module-toggle { display: initial !important; }
  body.inside-budget-module.iv-mobile-navigation-open aside.app-sidebar--standard .app-sidebar-module-submenu { display: grid !important; }
  body.inside-budget-module.iv-mobile-navigation-open aside.app-sidebar--standard .app-sidebar-project-card { display: flex !important; }
  body.inside-budget-module.iv-mobile-navigation-open aside.app-sidebar--standard .app-sidebar-tools-nav--standard { overflow: visible !important; }

  body.inside-budget-module.iv-mobile-navigation-open aside.app-sidebar--standard .app-sidebar-tool-row,
  body.inside-budget-module.iv-mobile-navigation-open aside.app-sidebar--standard .app-sidebar-tool-row.has-toggle {
    display: flex !important;
  }

  body.inside-budget-module.iv-mobile-navigation-open aside.app-sidebar--standard .app-sidebar-home,
  body.inside-budget-module.iv-mobile-navigation-open aside.app-sidebar--standard .app-sidebar-tools-nav--standard .app-sidebar-link,
  body.inside-budget-module.iv-mobile-navigation-open aside.app-sidebar--standard .app-sidebar-bottom--standard .app-sidebar-collapse {
    width: auto !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-inline: 0 !important;
    padding-inline: 10px !important;
  }

  /* El fondo cierra al pulsarlo. Va por encima del panel de contexto (10010) y
     por debajo del cajón y de la barra superior, que lleva el ☰ para cerrar. */
  body.inside-budget-module .iv-mobile-navigation-backdrop {
    background: rgba(0, 0, 0, .62);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    display: none;
    inset: 0;
    padding: 0;
    position: fixed;
    z-index: 10400 !important;
  }

  body.inside-budget-module.iv-mobile-navigation-open .iv-mobile-navigation-backdrop { display: block; }

  /* ── El contenido debajo de la barra superior ─────────────────────────
     Por debajo de 861 px la barra de contexto vuelve al flujo
     (`position: relative` en styles.css). Con la lateral fija, fuera del flujo,
     nada separa el contenido de la barra superior, que es fija: el primer
     renglón quedaba debajo. Si la barra de contexto se ve, se aparta ella; si
     está plegada, se aparta `<main>`. */
}

@media (max-width: 860px) {
  html body.inside-app-body.inside-budget-module > .inside-context-bar {
    margin-top: var(--inside-app-topbar-height, 74px) !important;
    margin-left: var(--app-sidebar-width, 0px) !important;
    width: calc(100% - var(--app-sidebar-width, 0px)) !important;
  }

  html body.inside-app-body.inside-budget-module.inside-contexto-plegado main {
    margin-top: var(--inside-app-topbar-height, 74px) !important;
  }

  /* Aparte y no en la misma lista: un navegador sin `:has()` descartaría la
     regla entera, y con ella la de arriba. */
  html body.inside-app-body.inside-budget-module:not(:has(> .inside-context-bar)) main {
    margin-top: var(--inside-app-topbar-height, 74px) !important;
  }
}

@media (max-width: 720px) {
  html body.inside-app-body.inside-budget-module .budget-product-topbar,
  html body.inside-app-body.inside-budget-module.inside-visual-v1 header.budget-product-topbar {
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    padding-inline: 8px !important;
    column-gap: 8px !important;
  }

  body.inside-budget-module .budget-product-search,
  body.inside-budget-module .inside-contexto-disparador,
  body.inside-budget-module .budget-product-notification-menu,
  body.inside-budget-module .budget-product-topbar-brand {
    display: none !important;
  }

  body.inside-budget-module .budget-product-topbar-actions { gap: 6px; }

  /* Sin buscador quedan tres pistas: las acciones pasan a la tercera. */
  html body.inside-app-body.inside-budget-module .budget-product-topbar > .budget-product-topbar-actions { grid-column: 3 !important; }
}

@media (max-width: 480px) {
  /* ── Sin riel: la lateral es un cajón fuera de pantalla ─────────────── */
  html body.inside-app-body.inside-budget-module,
  html body.inside-app-body.inside-budget-module.app-sidebar-compact {
    --app-sidebar-width: 0px !important;
  }

  html body.inside-app-body.inside-budget-module aside.app-sidebar--standard {
    /* La barra superior ocupa todo el ancho y tapa lo de arriba del cajón. */
    padding-top: calc(var(--inside-app-topbar-height, 74px) + 12px) !important;
    transform: translateX(-100%);
    transition: transform 180ms ease !important;
  }

  body.inside-budget-module aside.app-sidebar--standard .app-sidebar-brand,
  body.inside-budget-module aside.app-sidebar--standard .app-sidebar-bottom--standard {
    display: none !important;
  }

  html body.inside-app-body.inside-budget-module.iv-mobile-navigation-open aside.app-sidebar--standard {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.inside-app-body.inside-budget-module aside.app-sidebar--standard { transition: none !important; }
}