/* ═══ nav.css ═══ Navegación de la app: barra superior (PC), menú de cuenta del avatar y barra de pestañas inferior (móvil). Construida responsive desde el mismo marcado: el CSS decide arriba/abajo según el ancho. Reutiliza los tokens de tokens.css (acento terracota --c-primary, tipografía --font, radios, sombras, --header-h). Sin colores a pelo. La barra superior reaprovecha el

existente (posición/altura las pone layout.css); aquí solo se maqueta su contenido nuevo (link "Propiedades", botón "+ Nueva propiedad", avatar + menú) y la barra inferior. ═══════════════════════════════════════════════════════════════ */ /* ─── Zona izquierda: marca + navegación primaria ─── */ .nav-left { display: flex; align-items: center; gap: 28px; } /* ─── Zona derecha: botón nueva + avatar ─── */ .header-right { display: flex; align-items: center; gap: 14px; } .nav-new-btn { white-space: nowrap; } /* ─── Botón "Inicio" del clúster izquierdo ─── Enlace de navegación al Home que acompaña a la marca en la barra superior. Reutiliza los tokens compartidos (tipografía --font, acento --c-primary, radio --radius-sm) para casar con el resto del clúster; el patrón de hover es el mismo que el de las entradas del menú de cuenta. La navegación la hace el mismo goView('home') que el logo. Se oculta en móvil (ver media query): allí el acceso al inicio lo cubre el propio logo de la cabecera, para no duplicarlo. */ .nav-home-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--c-text); text-decoration: none; white-space: nowrap; padding: 7px 11px; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.12s, color 0.12s; } .nav-home-btn:hover { background: var(--c-primary-subtle); color: var(--c-primary-dark); } .nav-home-btn i { font-size: 18px; line-height: 1; } /* ─── Avatar + menú de cuenta ─── */ .nav-account { position: relative; } /* El menú vive a nivel de y se posiciona con position: fixed. app.js fija top/right contra el rect del avatar (cae justo debajo y alineado a su borde derecho), igual en escritorio y en móvil. z-index a nivel raíz para quedar por encima de cualquier contenido. */ .nav-menu { position: fixed; width: 244px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; z-index: 1300; display: flex; flex-direction: column; } .nav-menu.hidden { display: none; } .nav-menu-header { padding: 10px 12px 8px; border-bottom: 1px solid var(--c-border); margin-bottom: 6px; } .nav-menu-name { display: block; font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-menu-item { display: block; width: 100%; text-align: left; background: none; border: none; font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--c-text); padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.12s, color 0.12s; } .nav-menu-item:hover { background: var(--c-primary-subtle); color: var(--c-primary-dark); } .nav-menu-item-danger { color: var(--c-danger); } .nav-menu-item-danger:hover { background: var(--c-danger-bg); color: var(--c-danger-hover); } /* Entradas apagadas: visibles, en gris, sin cursor de enlace ni acción. */ .nav-menu-item.is-disabled, .nav-menu-item:disabled { color: var(--c-text-light); cursor: default; background: none; } .nav-menu-item.is-disabled:hover, .nav-menu-item:disabled:hover { background: none; color: var(--c-text-light); } /* ─── Píldora de saldo (PIEZA 1) ─── Vive en .header-right, a la izquierda del botón "+ Nueva propiedad". Icono de ladrillo (terracota, dibujado inline en app.html) + número de créditos. Reutiliza tokens: borde --c-border, acento --c-primary, radio pill. */ .quota-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-pill); background: var(--c-bg); color: var(--c-text); font-family: var(--font); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: border-color 0.12s, background 0.12s; } .quota-pill:hover { border-color: var(--c-primary); background: var(--c-primary-subtle); } .quota-pill-icon { flex: 0 0 auto; display: block; } .quota-pill-num { line-height: 1; } /* Desplegable de la píldora. Mismo lenguaje visual que .nav-menu (panel flotante a nivel de , position: fixed anclado por quota-pill.js). */ .quota-menu { position: fixed; width: 260px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 14px; z-index: 1300; } .quota-menu.hidden { display: none; } .quota-menu-body { margin-bottom: 12px; } .quota-menu-plan { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--c-text); margin-bottom: 6px; } .quota-menu-credits { font-size: 14px; color: var(--c-text); } .quota-menu-pack { font-size: 13px; font-weight: 500; color: var(--c-primary-dark); margin-top: 2px; } .quota-menu-date { font-size: 12.5px; color: var(--c-text-muted); margin-top: 6px; line-height: 1.4; } .quota-menu-actions { display: flex; flex-direction: column; gap: 8px; } /* ─── Responsive: móvil ─── */ @media (max-width: 640px) { /* El acceso al inicio del clúster izquierdo se oculta: en móvil lo cubre el propio logo de la cabecera, para no duplicarlo. */ .nav-home-btn { display: none; } /* Compactar el clúster derecho para que la píldora quepa junto al círculo "+" (38px) y el avatar (34px) incluso a 320px de ancho. */ .header-right { gap: 8px; } .quota-pill { padding: 5px 9px; gap: 5px; font-size: 13px; } .quota-pill-icon { width: 15px; height: 15px; } /* El botón "Nueva propiedad" toma el relevo de la antigua barra inferior: sigue visible en móvil pero compacto como un círculo con solo el "+". Se oculta la etiqueta de texto y se cuadra el botón para que el icono quede centrado, junto al avatar. El acento terracota lo hereda de .btn-primary. */ .nav-new-btn { padding: 0; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; } .nav-new-btn-label { display: none; } }