/* Header global y contenedor principal. */ /* Header en `fixed` para que sea siempre visible al scrollear. El padding-top en compensa el espacio que ocuparía si estuviese en el flujo. */ body { padding-top: var(--header-h); } #app-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); height: var(--header-h); display: flex; align-items: center; } .app-header-inner { width: 100%; max-width: 1880px; margin: 0 auto; padding: 0 var(--sp-6); display: flex; align-items: center; gap: var(--sp-4); } .app-brand { font-weight: 700; letter-spacing: -0.02em; font-size: var(--fs-md); display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text); text-decoration: none; } .app-brand:hover { opacity: 0.85; } .app-brand-logo { width: 36px; height: 36px; flex: 0 0 auto; image-rendering: pixelated; /* es pixel-art: nítido al escalar */ } .breadcrumb { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: var(--fs-sm); min-width: 0; } .breadcrumb a, .breadcrumb button { color: var(--text-soft); background: none; border: none; padding: 4px 6px; border-radius: var(--r-sm); transition: background var(--t), color var(--t); } .breadcrumb a:hover, .breadcrumb button:hover { background: var(--bg-hover); color: var(--text); } .breadcrumb .breadcrumb-current { color: var(--text); font-weight: 500; } .breadcrumb-sep { color: var(--text-muted); } .app-header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); } #app-view { display: block; padding: var(--sp-6); max-width: 1880px; margin: 0 auto; } #app-view.view-wide { max-width: 1880px; } #app-view.view-narrow { max-width: var(--container-max); } .page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); } .page-header h1 { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.02em; } .toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } /* Saludo personalizado de la cabecera de #/proyectos (portado de RRSS). */ .page-greeting-block { display: flex; flex-direction: column; gap: var(--sp-1); } .page-greeting { font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin: 0; } .page-greeting-sub { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; } /* Caja de búsqueda con icono (toolbar de #/proyectos). */ .search { position: relative; flex: 0 0 auto; } .search input { width: 240px; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 0 var(--sp-3) 0 36px; background: var(--bg); outline: none; transition: border-color var(--t); } .search input:focus { border-color: var(--text); } .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } /* --- Menú de usuario en el header --------------------------------------- */ .user-menu .user-menu-trigger { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg); cursor: pointer; padding: 0; transition: background var(--t), border-color var(--t); } .user-menu .user-menu-trigger:hover { background: var(--bg-hover); } .user-menu.open .user-menu-trigger { border-color: var(--text); } .user-menu-avatar { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text); letter-spacing: 0.5px; } .user-menu-panel { right: 0; left: auto; min-width: 240px; padding: 0; } .user-menu-header { padding: var(--sp-3) var(--sp-3) var(--sp-2); display: flex; flex-direction: column; gap: 2px; } .user-menu-name { font-weight: 600; color: var(--text); font-size: var(--fs-sm); } .user-menu-email { color: var(--text-muted); font-size: var(--fs-xs); } .user-menu-role { margin-top: var(--sp-2); } .pill-role { display: inline-block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; padding: 2px var(--sp-2); border-radius: var(--r-pill); } .pill-role.pill-normal { background: var(--bg-soft); color: var(--text-soft); border: 1px solid var(--border); } .pill-role.pill-administrador { background: var(--text); color: var(--accent-inv); border: 1px solid var(--text); } .user-menu-sep { height: 1px; background: var(--border); margin: var(--sp-1) 0; } .user-menu-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: var(--sp-2) var(--sp-3); font: inherit; font-size: var(--fs-sm); color: var(--text); cursor: pointer; border-radius: var(--r-sm); } .user-menu-item:hover { background: var(--bg-hover); } .user-menu-logout { color: var(--red); } .user-menu-logout:hover { background: #fff2f1; }