/* Portal del Cliente · Befire --------------------------------------------------------------------------- Els colors NO son aqui: surten de Marca/Paleta.cs, derivats del color de marca del tenant, i s'injecten com a :root{…} al (Components/App.razor). Aquest full nomes els consumeix. Si hi escrius un hex, trenques el tema. Tokens disponibles: --marca --marca-hover --marca-actiu --marca-pura --marca-ink --marca-rgb --marca-fosc --marca-fosc-2 --marca-fosc-ink --marca-50 --marca-100 --marca-200 --tinta --tinta-suau --tinta-tenue --linia --linia-forta --fons --panell */ :root { --radi: 12px; --radi-petit: 8px; --radi-gran: 18px; --ombra-1: 0 1px 2px rgb(16 20 28 / .04), 0 1px 3px rgb(16 20 28 / .06); --ombra-2: 0 2px 4px rgb(16 20 28 / .04), 0 8px 20px rgb(16 20 28 / .07); --ombra-3: 0 12px 40px rgb(16 20 28 / .16); --ok: #17794b; --ok-fons: #e6f4ed; --avis: #9a5b00; --avis-fons: #fdf1dc; --mal: #b3261e; --mal-fons: #fce9e7; --transicio: 140ms cubic-bezier(.4, 0, .2, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fons); color: var(--tinta); font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--marca); text-decoration: none; transition: color var(--transicio); } a:hover { color: var(--marca-hover); text-decoration: underline; text-underline-offset: 2px; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: var(--radi-petit); } h1 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); font-weight: 650; letter-spacing: -.02em; margin: 0 0 .2rem; } .subtitol { color: var(--tinta-suau); margin: 0 0 1.5rem; max-width: 68ch; } /* =========================================================== estructura */ .portal { display: flex; flex-direction: column; min-height: 100dvh; } .portal-top { display: flex; align-items: center; gap: 1rem; padding: 0 clamp(.75rem, 2vw, 1.5rem); height: 62px; background: linear-gradient(100deg, var(--marca-fosc) 0%, var(--marca-fosc-2) 100%); color: var(--marca-fosc-ink); position: sticky; top: 0; z-index: 40; box-shadow: var(--ombra-1); } /* La franja de marca: el color pur de l'empresa, sencer, sota la capcalera. */ .portal-top::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--marca-pura); } .portal-marca { display: flex; align-items: center; gap: .6rem; height: 100%; color: inherit; min-width: 0; } .portal-marca:hover { text-decoration: none; opacity: .9; } .portal-marca img { max-height: 38px; max-width: 190px; object-fit: contain; background: #fff; border-radius: var(--radi-petit); padding: 4px 8px; } .portal-marca-inicials { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: var(--marca); color: var(--marca-ink); font-weight: 700; letter-spacing: .02em; } .portal-marca-nom { font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .portal-usuari { margin-left: auto; display: flex; align-items: center; gap: .75rem; min-width: 0; } .portal-usuari-nom { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .portal-usuari-nom b { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26ch; } .portal-usuari-nom span { font-size: .72rem; opacity: .72; letter-spacing: .03em; text-transform: uppercase; } .btn-sortir { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border: 1px solid rgb(255 255 255 / .28); border-radius: var(--radi-petit); background: rgb(255 255 255 / .08); color: inherit; font-size: .85rem; transition: background var(--transicio), border-color var(--transicio); } .btn-sortir:hover { background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .45); text-decoration: none; color: inherit; } /* El commutador del menu: un checkbox real, focusable amb el teclat pero invisible. El boto es la seva