/* =============================================================================
public/css/estils.css — Estils generals i compartits de Laboral V2.
Conté:
1. Variables CSS dels colors de marca (com a fallback i per a animacions /
gradients que Tailwind no expressa amb classes utility).
2. Components reutilitzables: btn, card, input, pill, eyebrow, match-ring,
brand-stripe.
3. Fallbacks de classes brand-* (safety net si tailwind.css es desincronitza
amb input.css).
Tailwind és el primer recurs (vegeu /public/css/README.md). Aquí només
viu el que no es pot expressar net amb classes utility o el que es
repeteix tantes vegades que mereix un component CSS dedicat.
========================================================================== */
/* ───────────────────────────────────────────────────────────────────────────
1. Variables (paleta brand)
─────────────────────────────────────────────────────────────────────────── */
:root {
color-scheme: light;
--c-orange: #f39200;
--c-orange-dark: #d97f00;
--c-orange-light: #ffeed1;
--c-orange-faint: #fff6e6;
--c-green: #00b187;
--c-green-dark: #008c6c;
--c-green-light: #d6f3ea;
--c-red: #d4423a;
--c-red-light: #fde2df;
--c-amber: #e9a23b;
--c-amber-light: #fff0d2;
/* ── Tons de TEXT sobre el fons clar del mateix color ──────────────────
Els xips d'estat (`.pill-*`, `.abx-stat-*`, `.lvl-*`…) pinten text de
color sobre el fons clar del mateix to. Amb els tons de dalt, aquella
combinació no arriba al mínim de contrast de la WCAG AA (4,5:1 per a
text petit) — mesurat, ho fallaven TOTS, també el verd:
verd #008c6c sobre #d6f3ea → 3,60:1
vermell #d4423a sobre #fde2df → 3,69:1
taronja #f39200 sobre #ffeed1 → 2,06:1
ambre #e9a23b sobre #fff0d2 → 1,92:1 ← el pitjor
Aquests quatre són els mateixos colors amb la lluminositat abaixada
fins a passar de 4,5:1, conservant to i saturació: segueixen sent
«el verd» i «el taronja», només que ara es llegeixen.
⚠️ Només per a `color:` (text i icones) sobre el fons clar germà. Les
VORES no s'hi toquen: una vora fosca canvia el pes visual del component
i no és el que aquí es vol arreglar — per a vores, botons i enllaços,
els tons de dalt es queden com estan. */
--c-green-text: #007a5d; /* 4,53:1 sobre --c-green-light */
--c-red-text: #c1322a; /* 4,56:1 sobre --c-red-light */
--c-amber-text: #976111; /* 4,62:1 sobre --c-amber-light */
--c-orange-text: #995c00; /* 4,74:1 sobre --c-orange-faint */
--c-ink: #2a251f;
--c-text: #3b342c;
/* Quatre unitats més fosc que el #7a6f63 que hi havia, i el canvi no es veu.
Amb l'anterior, el text secundari passava just sobre blanc (4,90:1) però es
quedava curt sobre els fons de secció, que és on més surt: 4,32:1 sobre
--c-line-soft i 4,36:1 sobre --c-warm, per sota del 4,5:1 de la WCAG AA.
Amb aquest passa sobre els quatre fons del projecte (blanc 5,14 · cream
4,85 · warm 4,57 · line-soft 4,53), i arregla d'un cop la vintena de llocs
que ho fallaven per poc, inclòs el xip `.pill-muted`. */
--c-muted: #766c60;
--c-faint: #a89e92;
--c-line: #ece6dc;
--c-line-soft: #f5f0e7;
--c-cream: #fbf8f2;
--c-warm: #f7f1e4;
/* ── Radis ──────────────────────────────────────────────────────────────
Hi havia botons a 9, 10, 11, 12, 13 i 18 px segons quina pantalla, i es
notava: dos botonets de la mateixa mida un al costat de l'altre amb les
cantonades diferents. L'escala és aquesta i no n'hi ha cap més:
--r-btn 12px · qualsevol botó amb text, pestanyes, enllaços de menú
i camps de formulari (= `rounded-xl` de Tailwind).
--r-btn-sm 10px · botons quadrats d'icona (≤ 36 px) i paginació: a
12 px una caixa de 32 px queda quasi rodona.
--r-card 18px · targetes i el que flota (la barra inferior fa 22 px,
que és aquesta escala i no la dels botons).
--r-pill 999px · píndoles i botons flotants rodons (paleta de
l'horari, «Desa» flotant, «Finalitzar jornada»…).
És una FAMÍLIA a part, no un descuit.
Si necessites un radi que no hi és, el que falla és el component. */
--r-btn: 12px;
--r-btn-sm: 10px;
--r-card: 18px;
--r-pill: 999px;
}
/* ───────────────────────────────────────────────────────────────────────────
2. Components reutilitzables
─────────────────────────────────────────────────────────────────────────── */
/* Tira gradient taronja → verda. Apareix al damunt de cada capçalera de la
variant "Refinat" del disseny. Interpolació directa orange→green (el
degradat passa per ambre de forma natural; no posem `via` per ser fidel
al disseny original). */
.brand-stripe {
background: linear-gradient(90deg, var(--c-orange), var(--c-green));
}
/* Logotip de marca (wordmark SVG via ). El Preflight de Tailwind aplica
`img { max-width: 100%; height: auto }`; com que el SVG només porta viewBox
(sense width/height intrínsecs), dins d'un contenidor que s'ajusta al
contingut (inline-block) l'amplada col·lapsa a 0 i el logo no es veu.
Neutralitzem el max-width i deixem que l'atribut `width` de cada mani;
l'alçada es deriva de la proporció del viewBox. */
.brand-logo {
display: block;
height: auto;
max-width: none;
}
/* Card amb radius 18px i shadow suau. */
.card-soft {
background: #fff;
border-radius: 18px;
box-shadow:
0 1px 0 rgba(60, 40, 20, 0.04),
0 6px 18px -10px rgba(60, 40, 20, 0.18);
}
/* Card d'oferta on l'usuari ja s'ha apuntat: tinta verda + anell, perquè es
distingeixi de cop d'ull al llistat i no s'hi torni a entrar. */
.card-soft.is-applied {
background: var(--c-green-light);
box-shadow:
inset 0 0 0 1.5px var(--c-green),
0 6px 18px -10px rgba(0, 140, 108, 0.35);
}
/* Sobre la card verda, un .pill-green es confondria amb el fons; el passem
a blanc perquè el chip d'estat continuï llegint-se. */
.card-soft.is-applied .pill-green {
background: #fff;
}
/* ── LA FORMA DE QUALSEVOL BOTÓ ──────────────────────────────────────────────
Les quatre classes de sota (.btn-primary, .btn-secondary, .btn-ghost i
.btn-danger) només PINTEN: color, ombra i transició. La forma —el padding, el
radi, la lletra— l'havia de posar cada pantalla amb utilitats de Tailwind, i
qui no ho feia es trobava un rectangle de color sense marges ni cantonades.
Al 21 d'agost de 2026 n'hi havia 22 d'aquests repartits per l'aplicació
(«Pujar-ho tot a S3», «Configura els passos», el desa d'Absències…), i cada
un s'havia d'anar trobant mirant pantalles.
Això els dona la forma de sèrie. Va dins de :where() a posta, que té
ESPECIFICITAT ZERO: qualsevol utilitat de Tailwind (`px-4`, `rounded-full`,
`text-xs`…) o qualsevol classe de component (.bfil-btn, .abx-btn-nou…) hi
guanya sense haver de tocar res. O sigui que els 269 botons que ja portaven
la seva forma es queden EXACTAMENT igual i només canvien els que no en
tenien cap.
⚠️ VA DINS DE `@layer components`, I AIXÒ ÉS EL QUE HO FA FUNCIONAR.
Aquest Tailwind és la v4 i posa les utilitats dins de `@layer utilities`; en
CSS, QUALSEVOL regla sense capa guanya a TOTES les que en tenen, tingui
l'especificitat que tingui. O sigui que la resta d'aquest fitxer —que no té
capa— passa per sobre de Tailwind sempre, i és el que fa que `.btn-primary
{ background }` mani sobre qualsevol `bg-*`.
Aquí volem justament el CONTRARI: que `px-5` o `rounded-full` d'un botó
concret manin sobre aquesta forma per defecte. Com que l'ordre de capes que
declara el build és `properties, theme, base, components, utilities`, posar
això a `components` deixa que les utilitats hi guanyin. El `:where()` s'hi
queda com a segona xarxa per a les classes de component d'aquest mateix
fitxer (.bfil-btn, .abx-btn-nou…), que no tenen capa i guanyen igualment.
Es va provar primer amb `:where()` sol i no servia de res: amb capes pel
mig, l'especificitat ja no decideix.
⚠️ El `display` no fa reaparèixer res amagat: el preflight de Tailwind porta
`[hidden] { display: none !important }`, que hi passa per sobre. Comprovat
abans d'escriure-ho, que era l'única manera que això trenqués alguna cosa. */
@layer components {
:where(.btn-primary, .btn-secondary, .btn-ghost, .btn-danger) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 16px;
border: 0;
border-radius: var(--r-btn);
font-family: inherit;
font-size: 13.5px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
}
}
/* Un botó apagat s'ha de veure apagat, i no ha de convidar a prémer-lo. Aquí
fora del :where() perquè guanyi als colors de sota. */
.btn-primary:disabled, .btn-secondary:disabled,
.btn-ghost:disabled, .btn-danger:disabled,
.btn-primary[aria-disabled="true"], .btn-secondary[aria-disabled="true"],
.btn-ghost[aria-disabled="true"], .btn-danger[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
filter: none;
transform: none;
}
/* CTA primari amb gradient vertical. */
.btn-primary {
background: linear-gradient(180deg, var(--c-orange), var(--c-orange-dark));
color: #fff;
box-shadow: 0 4px 14px -4px rgba(243, 146, 0, 0.55);
transition: filter 0.15s, transform 0.15s;
}
.btn-primary:hover { filter: brightness(1.04); }
.btn-primary:active { transform: translateY(1px); filter: brightness(0.96); }
/* CTA secundari (ghost) — fons blanc, només ring. */
.btn-ghost {
background: #fff;
color: var(--c-ink);
box-shadow: inset 0 0 0 1px var(--c-line);
transition: background 0.15s;
}
.btn-ghost:hover { background: var(--c-warm); }
/* Botó QUADRAT d'icona (≤ 36 px). Poseu-hi això en comptes d'un `rounded-*`
de Tailwind: `rounded-xl` deixa una caixa de 32 px quasi rodona i
`rounded-lg` no lliga amb els botonets d'icona que ja porten `--r-btn-sm`
des del seu component (.doc-act, .abs-del, .ctrl-btn…). Un sol radi per a
tots. */
.btn-ico { border-radius: var(--r-btn-sm); }
/* CTA alternatiu verd (per a admin tools secundaris: logs, migracions, ...). */
.btn-secondary {
background: linear-gradient(180deg, var(--c-green), var(--c-green-dark));
color: #fff;
box-shadow: 0 4px 14px -4px rgba(0, 177, 135, 0.55);
transition: filter 0.15s, transform 0.15s;
}
.btn-secondary:hover { filter: brightness(1.04); }
.btn-secondary:active { transform: translateY(1px); filter: brightness(0.96); }
/* CTA destructiu (red flags, deletes confirmats). */
.btn-danger {
background: linear-gradient(180deg, var(--c-red), #b53129);
color: #fff;
box-shadow: 0 4px 14px -4px rgba(212, 66, 58, 0.55);
transition: filter 0.15s, transform 0.15s;
}
.btn-danger:hover { filter: brightness(1.04); }
.btn-danger:active { transform: translateY(1px); filter: brightness(0.96); }
/* Hero card amb gradient diagonal taronja (dashboard, busques-algu, etc.). */
.hero-orange {
background: linear-gradient(135deg, var(--c-orange) 0%, var(--c-orange-dark) 100%);
color: #fff;
}
/* Input estàndard amb focus orange.
font-size 16px: imprescindible perquè iOS Safari NO faci zoom automàtic
en enfocar el camp (passa sempre amb mides < 16px). El padding generós
dona una zona tàctil còmoda (~46px d'alçada) a mòbil. */
.input-base {
background: #fff;
border: 1px solid var(--c-line);
border-radius: 12px;
padding: 12px 14px;
font-size: 16px;
line-height: 1.4;
color: var(--c-ink);
width: 100%;
/* min-height fixa garanteix que input[type=date], select i textarea
d'una sola línia tinguin la mateixa altura que els text inputs —
sense això, el date picker natiu queda 2-4px més baix i trenca
l'alineació de les files del grid. */
min-height: 46px;
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
}
/* Evita que el botó natiu de calendari/hora redueixi l'altura aparent
del camp en iOS i alguns Chrome desktop. */
.input-base[type="date"],
.input-base[type="time"],
.input-base[type="datetime-local"] {
-webkit-appearance: none;
appearance: none;
}
.input-base::placeholder { color: var(--c-faint); }
.input-base:focus {
outline: none;
border-color: var(--c-orange);
box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.15);
}
.input-error {
border-color: var(--c-red) !important;
box-shadow: 0 0 0 3px rgba(212, 66, 58, 0.12);
}
/* Desplegables: mateixa caixa que un input de text, amb una fletxa nostra en
comptes de la del sistema (que canvia de forma, de mida i de color segons
el navegador i deixa un formulari amb camps que no s'assemblen entre ells).
Va aquí, al costat de `.input-base`, i no a perfil.css com abans: la
carreguen totes les pantalles i la classe ja s'usava a mitja app. */
.input-base.input-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
/* Checkboxes i radios — mida tàctil clara i color de marca. No fem servir
el plugin de forms de Tailwind; per això els estilem aquí amb accent-color
(abans es veien minúsculs i amb el color gris natiu del sistema).
Els radios/checkboxes .sr-only (UI personalitzada a valoracions i
red-flags) en queden exclosos perquè han de continuar amagats. */
input[type="checkbox"]:not(.sr-only),
input[type="radio"]:not(.sr-only) {
width: 18px;
height: 18px;
accent-color: var(--c-orange);
cursor: pointer;
flex-shrink: 0;
}
/* Captcha anti-robots (ALTCHA) del registre i del login. El component viu dins
d'un shadow DOM: no s'hi pot entrar amb selectors i només accepta les
variables CSS que exposa. Les lliguem a la paleta de marca perquè el quadre
es llegeixi com un `.input-base` més i no com una peça enganxada de fora.
El markup el pinta captcha_camp() (funcions/captcha.php). */
.captcha-camp altcha-widget {
--altcha-color-base: #fff;
--altcha-color-border: var(--c-line);
--altcha-color-border-focus: var(--c-orange);
--altcha-color-text: var(--c-text);
--altcha-color-error-text: var(--c-red);
--altcha-color-footer-bg: var(--c-line-soft);
--altcha-border-width: 1px;
--altcha-border-radius: 12px;
--altcha-max-width: 100%;
/* `accent-color` s'hereta i travessa el shadow DOM: és l'única via per
arribar a la casella de verificació de dins i pintar-la de taronja. */
accent-color: var(--c-orange);
display: block;
font-size: 13px;
}
/* Sense JavaScript el widget no es pinta mai i el formulari no es podrà
enviar: val més dir-ho que deixar la persona clicant el botó sense resposta. */
.captcha-noscript {
margin-top: 6px;
font-size: 12px;
color: var(--c-red);
}
/* Eyebrow (subtítol over-line). */
.eyebrow {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--c-muted);
}
/* Eyebrow sobre fons taronja: crema de marca opac (el blanc es veia rentat). */
.eyebrow-cream {
color: var(--c-amber-light);
}
/* Pills (etiquetes rodones). */
.pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
}
/* ⚠️ Un pill amagat amb la utilitat `hidden` de Tailwind s'ha de veure amagat.
Tailwind es carrega ABANS que aquest full (elements/header.php) i `.hidden`
té exactament la mateixa especificitat que `.pill`: sense aquesta línia,
`display:inline-flex` guanya per ordre de càrrega i el pill es veu igualment.
Passava de debò a «El meu horari» (/disponibilitat.php), que s'obria dient
«Canvis sense desar» sense que ningú hagués tocat res. */
.pill.hidden { display: none; }
.pill-orange { background: var(--c-orange-faint); color: var(--c-orange-text); }
.pill-green { background: var(--c-green-light); color: var(--c-green-text); }
.pill-red { background: var(--c-red-light); color: var(--c-red-text); }
.pill-amber { background: var(--c-amber-light); color: var(--c-amber-text); }
.pill-muted { background: var(--c-line-soft); color: var(--c-muted); }
/* Pill verd sòlid — destaca sobre fons clars i sobre les cards .is-applied. */
.pill-applied { background: var(--c-green); color: #fff; }
/* Distintiu DESPATX de la pàgina d'inici (permís de grup `despatx.distintiu`).
Taronja sòlid i amb espaiat entre lletres: no és un estat més d'una fila,
és una etiqueta de la persona i ha de llegir-se com a tal. */
.pill-despatx { background: var(--c-orange); color: #fff; letter-spacing: 0.06em; }
/* Distintiu DESENVOLUPADOR (`users.is_developer`, funcions/desenvolupador.php).
Fosc i sòlid, com .pill-despatx: no és un rol més de la llista sinó una marca
que només es posa des de la base de dades, i s'ha de distingir d'una ullada
del vermell d'«Administrador» amb què comparteix fila. Tipografia i mides,
les de sempre — la píndola destaca pel color, no per semblar una altra app. */
.pill-dev {
background: var(--c-ink);
color: #fff;
letter-spacing: 0.06em;
}
/* Switch on/off (toggle) sense dependre de Tailwind. Ús:
L'input real queda amagat (accessible via teclat); pinta el track + thumb. */
.switch {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
}
.switch input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.switch-track {
position: relative;
flex-shrink: 0;
width: 48px;
height: 28px;
border-radius: 999px;
background: var(--c-line);
transition: background 0.18s ease;
}
.switch-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(60, 40, 20, 0.3);
transition: transform 0.18s ease;
}
.switch input:checked + .switch-track { background: var(--c-green); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(20px); }
.switch input:focus-visible + .switch-track {
outline: 2px solid var(--c-orange);
outline-offset: 2px;
}
/* Match ring (anell amb % de coincidència) sense JS — només CSS conic-gradient.
Ús:
87
*/
.match-ring {
--val: 0;
--col: var(--c-green);
width: 48px;
height: 48px;
border-radius: 50%;
background: conic-gradient(var(--col) calc(var(--val) * 1%), #eee5d4 0);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.match-ring::before {
content: "";
position: absolute;
inset: 4px;
background: #fff;
border-radius: 50%;
}
.match-ring > span {
position: relative;
font-weight: 800;
font-size: 13px;
color: var(--col);
letter-spacing: -0.02em;
}
/* Sub-bars (breakdown del match per dimensió).
Ús: una llista de files amb label + barra + valor.
Horari
80
*/
.sub-bars { display: flex; flex-direction: column; gap: 6px; }
.sub-bar { display: flex; align-items: center; gap: 8px; }
.sub-bar-label { font-size: 11px; color: var(--c-muted); width: 76px; flex-shrink: 0; }
.sub-bar-track {
flex: 1; height: 6px; border-radius: 3px; background: #eee5d4; overflow: hidden;
}
.sub-bar-fill {
--val: 0;
height: 100%; border-radius: 3px;
width: calc(var(--val) * 1%);
background: var(--c-green);
transition: width 0.3s ease-out;
}
.sub-bar-fill.amber { background: var(--c-amber); }
.sub-bar-fill.red { background: var(--c-red); }
.sub-bar-fill.orange { background: var(--c-orange); }
.sub-bar-value { font-size: 11px; font-weight: 600; color: var(--c-ink); width: 34px; text-align: right; }
/* QUI HA POSAT CADA NOTA: la taula que va a sota de les sub-bars.
Una mitjana amaga de qui és cada nota, i a una fitxa de personal això és
justament el que es ve a mirar («un 2,4 de puntualitat: qui l'hi ha posat i
quan?»). La pinta /public/treballadors/fitxa.php i la pagina
/public/js/treballadors/valoracions-fitxa.js (DataTables, cinc per pàgina).
⚠️ Fins al 27 d'agost de 2026 n'hi havia UNA PER DIMENSIÓ, plegada dins d'un
que penjava de cada barra. Amb cinc dimensions, la mateixa
valoració es pintava cinc vegades —i cinc valoracions ja eren vint-i-cinc
files—. Ara és una de sola, sempre oberta i paginada: el que canvia entre
dimensions és només el número, i aquell ja el diu la barra de sobre.
Va aquí i no a un full de pantalla perquè és una peça de la mateixa família
que .sub-bar* i s'ha de poder tornar a fer servir allà on hi hagi barres. */
.val-taula-caixa { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-line-soft); }
.val-taula { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.val-taula th {
text-align: left; font-size: 9.5px; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--c-faint);
padding: 0 6px 3px; border-bottom: 1px solid var(--c-line-soft);
}
.val-taula td {
padding: 4px 6px; border-bottom: 1px solid var(--c-line-soft);
color: var(--c-text); vertical-align: top;
}
.val-taula tr:last-child td { border-bottom: 0; }
.val-taula-qui { font-weight: 700; color: var(--c-ink); }
.val-taula-quan { color: var(--c-muted); white-space: nowrap; }
.val-taula-feina { color: var(--c-muted); }
/* La nota, amb el mateix codi de colors que la barra de sobre. És un BOTÓ: un
clic obre, a la fila de sota, el repartiment per dimensió (les «child rows»
de DataTables; ho lliga /js/treballadors/valoracions-fitxa.js).
⚠️ Va ser un `title` durant unes hores i no servia de res: res no deia que
hi hagués cap cosa a mirar, i a mòbil i a tauleta no hi ha ratolí que hi
pugui passar per sobre. Per això la fletxeta —és l'única pista—. */
.val-taula-nota {
display: inline-flex; align-items: center; gap: 3px;
min-width: 30px; justify-content: center;
font: inherit; font-weight: 800; line-height: 1.35;
border: 0; border-radius: 9999px; padding: 1px 6px 1px 7px;
background: var(--c-green-light); color: var(--c-green-text);
}
button.val-taula-nota { cursor: pointer; }
button.val-taula-nota:hover { filter: brightness(0.95); }
button.val-taula-nota:focus-visible {
outline: none; box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.35);
}
.val-taula-nota i { font-size: 7.5px; opacity: 0.75; transition: transform 0.15s; }
.val-taula-nota[aria-expanded="true"] i { transform: rotate(180deg); }
.val-taula-nota.amber { background: var(--c-amber-light); color: var(--c-amber-text); }
.val-taula-nota.red { background: var(--c-red-light); color: var(--c-red-text); }
/* El detall per dimensió. Es pinta de PHP dins de la mateixa cel·la de la nota i
el JS el mou a la fila que s'obre, o sigui que aquí s'amaga a l'origen —però
NOMÉS quan la taula ja és un DataTables—: sense JS no hi ha ni paginació ni
fila que obrir, i el detall s'ha de poder llegir igual. */
#valoracionsTable.dataTable .val-taula-dims { display: none; }
.val-taula-dims { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
tr.val-taula-detall > td { background: var(--c-warm); }
.val-taula-detall-in { display: flex; flex-wrap: wrap; gap: 4px; padding: 1px 0; }
.val-taula-detall-in .pill { font-size: 10px; padding: 3px 8px; }
/* DataTables la vesteix amb les mides de les taules d'administració (14 px de
lletra, 0,6 rem de coixinet) i es reserva 30 px a cada capçalera per a la
fletxa d'ordre: mides d'una taula d'amplada sencera. Aquí viu dins d'una
targeta que a `lg` ocupa un terç de la pantalla i s'hi ha de quedar amb la
lletra petita de la fitxa —quatre vegades 30 px de recàrrec no hi caben—.
⚠️ Les capçaleres es diuen amb l'ID i no amb la classe perquè estils.css es
carrega ABANS que el CSS de DataTables (elements/header.php: primer aquest,
després $extra_css) i, a igualtat d'especificitat, guanyaria el seu. Al cos
n'hi ha prou amb la classe: allà no hi competím amb cap regla tan concreta. */
#valoracionsTable thead > tr > th {
font-size: 9.5px; letter-spacing: 0.04em;
padding: 0 16px 5px 6px;
border-bottom: 1px solid var(--c-line-soft);
}
#valoracionsTable thead > tr > th span.dt-column-order { right: 2px; width: 10px; }
table.dataTable.val-taula tbody td { font-size: 11.5px; padding: 5px 6px; }
/* ⚠️ Aquí l'ÚNICA fila de controls és el peu (recompte + pàgines): no hi ha ni
cercador ni tria de mida. /css/admin/datatables.css vesteix la PRIMERA fila
amb una tira crema perquè allà és la barra de filtres —i aquí la primera fila
és el peu—, o sigui que se li treu i es dona la forma bona a totes dues, tant
si DataTables arriba a pintar la de dalt buida com si se la salta. */
#valoracionsTable_wrapper .dt-layout-row {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; flex-wrap: wrap;
margin: 8px 0 0; padding: 0; background: none; border: 0;
}
#valoracionsTable_wrapper .dt-info { font-size: 10.5px; }
#valoracionsTable_wrapper .dt-paging .dt-paging-button { padding: 0.2rem 0.55rem; font-size: 0.78rem; }
@media (max-width: 40rem) {
/* A mòbil la targeta ja és de l'ample de la pantalla, però quatre columnes
amb un títol de jornada a dins no hi caben: cau la feina, que és la que es
pot deduir de la data i de qui l'ha posada. */
.val-taula-feina,
.val-taula th:nth-child(3),
.val-taula td:nth-child(3) { display: none; }
}
/* Avatar amb inicials, mida configurable via --size (default 36px).
AB
*/
.avatar {
--size: 36px;
--bg: var(--c-orange);
width: var(--size);
height: var(--size);
border-radius: 50%;
background: var(--bg);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: calc(var(--size) * 0.38);
letter-spacing: 0.2px;
flex-shrink: 0;
}
/* Group d'avatars superposats (com els del disseny). */
.avatar-group { display: inline-flex; }
.avatar-group .avatar { border: 2px solid #fff; }
.avatar-group .avatar + .avatar { margin-left: -7px; }
/* ─── Alertes contextuals (elements/alerta.php) ───────────────────────────── */
/* Només els COLORS: la caixa, el padding i el flex els continuen posant les
classes utility del propi element. Els tons de text són els corregits del
bloc de variables (`--c-*-text`), que passen el 4,5:1 de la WCAG AA sobre el
seu fons clar germà; els que hi havia abans —classes de Tailwind
`text-brand-amber`, `text-brand-red`…— es quedaven entre 1,9:1 i 3,7:1.
Vegeu la nota llarga a alert_type_styles() (funcions/helpers.php). */
.alerta--success { background: var(--c-green-light); color: var(--c-green-text); }
.alerta--error { background: var(--c-red-light); color: var(--c-red-text); }
.alerta--warning { background: var(--c-amber-light); color: var(--c-amber-text); }
.alerta--info { background: var(--c-orange-faint); color: var(--c-orange-text); }
/* Un enllaç dins d'una alerta hereta el to del missatge i se subratlla: en
aquestes caixes, pintar-lo de taronja no el distingiria de res. */
.alerta a { color: inherit; font-weight: 700; text-decoration: underline; }
/* ─── Guia «Com funciona» (panell plegable) ───────────────────────────────── */
/* El component el pinta elements/guia.php i el fan servir una dotzena llarga de
pantalles. És un natiu: plega i desplega sense JS (funcions.js
només en recorda l'estat).
La capçalera va en TARONJA SUAU (fons `--c-orange-faint`, text
`--c-orange-text`, filet a l'esquerra) i no en taronja ple, que és com era
fins al 18 d'agost de 2026. El motiu: la guia ve PLEGADA i és opcional —qui
la vol, l'obre— i pintada plena era, a totes aquelles pantalles, l'element
més cridaner de la pàgina, per damunt del botó d'acció i, pitjor, per damunt
dels avisos de debò (a /control-fitxatge.php, l'avís de «40 fitxades sense
jornada» pesava menys que l'ajuda que té just a sobre). El taronja ple queda
reservat a l'acció primària. */
.guia {
background: #fff;
border: 1px solid var(--c-line);
border-radius: 16px;
overflow: hidden;
margin-bottom: 16px;
}
/* Dins d'un contenidor que ja separa els fills (flex/grid amb `gap`) el marge
se sumaria al buit que ja hi ha: `guia--flush` el treu. */
.guia--flush { margin-bottom: 0; }
.guia-head {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
cursor: pointer;
list-style: none; /* amaga el triangle per defecte */
color: var(--c-orange-text);
background: var(--c-orange-faint);
box-shadow: inset 3px 0 0 var(--c-orange);
user-select: none;
}
.guia-head::-webkit-details-marker { display: none; }
.guia-head:hover { background: var(--c-orange-light); }
.guia[open] .guia-head { border-bottom: 1px solid var(--c-line); }
.guia-ico { font-size: 15px; flex-shrink: 0; }
.guia-title { font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; flex-shrink: 0; }
.guia-sub {
font-size: 12px;
font-weight: 600;
color: var(--c-muted);
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* `margin-left:auto` per si no hi ha subtítol (o s'amaga en mòbil): la fletxa
queda sempre a la dreta. Amb subtítol no fa res — ell ja ocupa el buit. */
.guia-chevron { font-size: 12px; flex-shrink: 0; margin-left: auto; transition: transform 0.18s; }
.guia[open] .guia-chevron { transform: rotate(180deg); }
.guia-body { padding: 16px 18px 18px; }
/* Dues columnes quan hi caben: la guia és llarga i no ha de tapar la pantalla. */
.guia-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px 26px;
}
.guia-h {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 800;
letter-spacing: -0.01em;
margin: 0 0 6px;
}
.guia-h i { color: var(--c-orange); font-size: 12px; width: 15px; text-align: center; flex-shrink: 0; }
.guia-block p { font-size: 12.5px; line-height: 1.6; margin: 0 0 7px; color: var(--c-text); }
.guia-block p:last-child { margin-bottom: 0; }
.guia-block strong { font-weight: 700; color: var(--c-ink); }
.guia-block code {
font-size: 11.5px;
padding: 1px 5px;
border-radius: 5px;
background: var(--c-cream);
border: 1px solid var(--c-line);
}
/* Les icones citades enmig del text (fletxes, paleta…) van en to secundari. */
.guia-block p i.fa-solid { color: var(--c-muted); }
/* Els enllaços dins de la guia, en taronja: es distingeixen del text pla. */
.guia-body a { color: var(--c-orange-dark); font-weight: 700; }
.guia-body a:hover { text-decoration: underline; }
.guia-foot {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px;
line-height: 1.6;
color: var(--c-muted);
margin: 16px 0 0;
padding-top: 13px;
border-top: 1px solid var(--c-line-soft);
}
.guia-foot > i { color: var(--c-muted); margin-top: 3px; flex-shrink: 0; }
.guia-foot strong { color: var(--c-ink); font-weight: 700; }
@media (max-width: 640px) {
/* Una sola columna; el subtítol de la capçalera sobra (amb el títol i la
fletxa ja s'entén) i així no menja amplada. */
.guia-sub { display: none; }
.guia-body { padding: 14px; }
.guia-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
/* Xarxa de seguretat: un títol llarg passa a dues línies en comptes
d'empènyer la fletxa fora de la capçalera. */
.guia-title { flex-shrink: 1; min-width: 0; }
}
/* ───────────────────────────────────────────────────────────────────────────
Mobile drawer (menú lateral per a < lg).
Es controla amb [data-state="open|closed"] des de funcions.js.
─────────────────────────────────────────────────────────────────────────── */
/* ⚠️ LLISCAR DES DE LA VORA OBRE EL MENÚ, NO TIRA ENRERE (31 d'agost de 2026).
A Chrome i als navegadors de Chromium, el «tirar enrere» amb el dit és un
OVERSCROLL horitzontal, i això és el que l'apaga. Sense aquesta línia, el gest
de setupDrawerSwipe() (public/js/funcions.js) competiria amb la navegació del
navegador i sovint perdria.
Es posa a l'eix X i prou: `overscroll-behavior-y` mou el «estira per
recarregar» i el rebot vertical, que aquí no molesten i que treure'ls faria
que la pàgina es notés encarcarada.
A Safari/iOS l'«enrere» és un gest del sistema i això no l'atura; vegeu el
comentari de setupDrawerSwipe(). */
html { overscroll-behavior-x: contain; }
.mobile-drawer-backdrop {
position: fixed;
inset: 0;
z-index: 50;
background: rgba(20, 14, 8, 0.45);
backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease-out;
}
.mobile-drawer-backdrop[data-state="open"] {
opacity: 1;
pointer-events: auto;
}
.mobile-drawer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 51;
width: 84%;
max-width: 320px;
background: #fff;
display: flex;
flex-direction: column;
box-shadow: 0 12px 40px -8px rgba(60, 40, 20, 0.35);
transform: translateX(-100%);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.mobile-drawer[data-state="open"] {
transform: translateX(0);
}
/* Bloqueja l'scroll del body quan el drawer està obert. */
body.drawer-open {
overflow: hidden;
}
/* ───────────────────────────────────────────────────────────────────────────
Engagement prompt — modal bloquejant de jornades proposades.
Estat via [data-state="open|min"] des de elements/engagement-prompt.php.
─────────────────────────────────────────────────────────────────────────── */
.eng-prompt {
position: fixed;
inset: 0;
z-index: 60;
pointer-events: none; /* deixa passar els clics excepte al backdrop/modal/bar */
}
.eng-backdrop {
position: absolute;
inset: 0;
background: rgba(20, 14, 8, 0.55);
backdrop-filter: blur(3px);
pointer-events: auto; /* bloqueja la interacció amb la pàgina de sota */
}
.eng-modal {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(92vw, 440px);
max-height: 92vh;
overflow-y: auto;
background: #fff;
border-radius: 20px;
box-shadow: 0 24px 60px -12px rgba(60, 40, 20, 0.5);
pointer-events: auto;
animation: engModalIn 0.2s ease-out;
}
@keyframes engModalIn {
from { transform: translate(-50%, -46%); opacity: 0; }
to { transform: translate(-50%, -50%); opacity: 1; }
}
/* Píndola minimitzada (fixa a baix). Ampla i centrada perquè el text es
llegeixi bé; si en pantalles estretes no hi cap tot en una línia, el
"Respon →" baixa de línia en lloc de sortir de la pantalla. */
.eng-bar {
position: absolute;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
pointer-events: auto;
width: min(92vw, 460px);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 12px;
background: linear-gradient(180deg, var(--c-orange), var(--c-orange-dark));
color: #fff;
font-weight: 700;
font-size: 13.5px;
line-height: 1.35;
text-align: center;
padding: 13px 22px;
border: none;
border-radius: 999px;
cursor: pointer;
box-shadow: 0 10px 26px -8px rgba(243, 146, 0, 0.7);
}
.eng-bar-txt {
display: inline-flex;
align-items: center;
gap: 8px;
}
.eng-bar-cta {
background: rgba(255, 255, 255, 0.22);
border-radius: 999px;
padding: 4px 11px;
white-space: nowrap;
}
/* L'animació d'entrada només quan és l'usuari qui minimitza (classe posada
des del JS); si la pàgina ja arriba minimitzada, la píndola no rebota. */
.eng-prompt.eng-anim-bar .eng-bar {
animation: engBarIn 0.25s ease-out;
}
@keyframes engBarIn {
from { transform: translate(-50%, 24px); opacity: 0; }
to { transform: translate(-50%, 0); opacity: 1; }
}
/* Estats: open mostra backdrop+modal; min mostra només la barra. */
.eng-prompt[data-state="open"] .eng-bar { display: none; }
.eng-prompt[data-state="min"] .eng-backdrop,
.eng-prompt[data-state="min"] .eng-modal { display: none; }
/* Missatge de benvinguda de l'oferta (HTML del TinyMCE, ja sanejat). Mateixa
feina que .mur-body a /mur.php: retornar la tipografia que el reset de
Tailwind treu a
,
i companyia, que aquí ve escrita per una persona i
no per l'app. */
.eng-benvinguda {
margin-top: 6px;
font-size: 13px;
line-height: 1.65;
color: var(--c-text);
overflow-wrap: break-word;
}
.eng-benvinguda p { margin: 0 0 0.7em; }
.eng-benvinguda p:last-child { margin-bottom: 0; }
.eng-benvinguda a { color: var(--c-orange-dark); text-decoration: underline; }
.eng-benvinguda img { max-width: 100%; height: auto; border-radius: 8px; }
.eng-benvinguda ul, .eng-benvinguda ol { padding-left: 1.4em; margin: 0.4em 0; }
.eng-benvinguda ul { list-style: disc; }
.eng-benvinguda ol { list-style: decimal; }
.eng-benvinguda h1, .eng-benvinguda h2, .eng-benvinguda h3, .eng-benvinguda h4 {
font-size: 14px; font-weight: 800; letter-spacing: -0.01em;
margin: 0.8em 0 0.3em; color: var(--c-ink);
}
.eng-benvinguda table { max-width: 100%; border-collapse: collapse; }
.eng-benvinguda th, .eng-benvinguda td {
border: 1px solid var(--c-line); padding: 4px 8px; font-size: 12px;
}
.eng-benvinguda blockquote {
border-left: 3px solid var(--c-line);
margin: 0.6em 0; padding: 0.2em 0 0.2em 0.9em;
color: var(--c-muted);
}
/* ───────────────────────────────────────────────────────────────────────────
Profile prompt — popup d'avís de perfil incomplet (< 60%). No és
bloquejant: hi ha creu, "Més tard" i clic al fons per a tancar-lo.
Visualment molt similar a eng-prompt però amb z-index inferior (55) perquè
si engagement-prompt arriba a sortir alhora, té prioritat (60).
─────────────────────────────────────────────────────────────────────────── */
.prof-prompt {
position: fixed;
inset: 0;
z-index: 55;
pointer-events: none;
}
.prof-backdrop {
position: absolute;
inset: 0;
background: rgba(20, 14, 8, 0.45);
backdrop-filter: blur(2px);
pointer-events: auto;
cursor: pointer;
}
.prof-modal {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(92vw, 440px);
max-height: 92vh;
overflow-y: auto;
background: #fff;
border-radius: 20px;
box-shadow: 0 24px 60px -12px rgba(60, 40, 20, 0.5);
pointer-events: auto;
animation: profModalIn 0.2s ease-out;
}
@keyframes profModalIn {
from { transform: translate(-50%, -46%); opacity: 0; }
to { transform: translate(-50%, -50%); opacity: 1; }
}
.prof-close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--c-warm);
color: var(--c-muted);
border: none;
cursor: pointer;
z-index: 1;
transition: background 0.12s, color 0.12s;
}
.prof-close:hover {
background: var(--c-line);
color: var(--c-ink);
}
/* ───────────────────────────────────────────────────────────────────────────
Tabs de perfil — barra compartida entre "Les meves dades" i "El meu horari".
La pestanya de la pàgina on ets va destacada (gradient taronja).
La classe base .profile-tab la reaprofiten altres pantalles amb pestanyes
(quilometratges-i-extres.php, control-km-extres.php) amb .is-active.
─────────────────────────────────────────────────────────────────────────── */
/* El CONTENIDOR va aqui i no a perfil.css, encara que hi va neixer. Viure alla
volia dir que nomes el tenien les pagines que carreguen perfil.css, i
control-km-extres.php —que la capcalera d'aqui dalt ja diu que reaprofita
aquestes pestanyes— no el carrega: carrega control.css, extres.css i
fitxatge.css. Sense aquesta regla el contenidor no era cap flex, i com que
.profile-tab es inline-flex les pestanyes sortien enganxades, separades
nomes pel blanc entre etiquetes en lloc dels 10px del gap. Una regla que
fa servir mes d'una pantalla ha de viure al full global. */
.profile-tabs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 24px;
}
@media (max-width: 640px) {
.profile-tabs { gap: 8px; margin-bottom: 20px; }
}
.profile-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 15px;
border-radius: 12px;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
background: #fff;
color: var(--c-ink);
box-shadow: inset 0 0 0 1px var(--c-line), 0 1px 4px rgba(60, 40, 20, 0.07);
cursor: pointer;
transition: background 0.12s, color 0.12s, box-shadow 0.12s, filter 0.12s;
}
.profile-tab:hover {
background: var(--c-cream);
box-shadow: inset 0 0 0 1px var(--c-orange), 0 1px 4px rgba(60, 40, 20, 0.07);
}
.profile-tab.is-active {
background: var(--c-ink);
color: #fff;
box-shadow: 0 5px 14px -5px rgba(42, 37, 31, 0.55);
}
/* ── Nav compartit "Les meves dades ↔ El meu horari" ───────────────────────
Només dos tabs, un per pàgina: el d'on ets (taronja, amb «Ets aquí») i el de
l'altra (clar, amb fletxa). Vegeu elements/perfil-nav.php. Abans hi havia
també un tab per apartat del perfil, amb grups i divisor; sis tabs es
menjaven mitja pantalla de mòbil abans d'arribar a la graella de l'horari. */
.profile-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 22px;
}
@media (max-width: 640px) {
.profile-nav { margin-bottom: 16px; }
/* Dos tabs hi caben; si el text creix (o la lletra del sistema és més
gran), que baixin un sota l'altre en comptes de sortir per la dreta. */
.profile-tab { flex: 1 1 auto; justify-content: center; }
}
/* "Ets aquí" — tab actiu, no clicable. Degradat taronja sense :hover (no és un enllaç). */
.profile-tab.is-active-page {
background: linear-gradient(180deg, var(--c-orange), var(--c-orange-dark));
color: #fff;
box-shadow: 0 4px 14px -4px rgba(243, 146, 0, 0.55);
cursor: default;
}
.profile-tab.is-active-page:hover {
background: linear-gradient(180deg, var(--c-orange), var(--c-orange-dark));
color: #fff;
box-shadow: 0 4px 14px -4px rgba(243, 146, 0, 0.55);
filter: none;
}
/* Etiqueta dins del tab actiu. Amb només dos tabs el color ja distingeix,
però dir-ho amb lletres estalvia haver-ho de deduir. */
.profile-tab-here {
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.24);
border-radius: 999px;
padding: 2px 7px;
line-height: 1.35;
}
/* "Pots anar-hi" — tab d'una altra pàgina. Fons cream (no blanc pur) +
icona de fletxa al final per indicar que es marxa. */
.profile-tab.is-other-page {
background: var(--c-warm);
color: var(--c-text);
box-shadow: inset 0 0 0 1px var(--c-line);
}
.profile-tab.is-other-page:hover {
background: #fff;
color: var(--c-ink);
box-shadow: inset 0 0 0 1px var(--c-orange), 0 1px 4px rgba(60, 40, 20, 0.07);
}
/* ───────────────────────────────────────────────────────────────────────────
Capçalera sticky — la capçalera (mòbil i desktop) es queda enganxada a
dalt. En fer scroll cap avall es compacta (versió reduïda): amaga
l'eyebrow, encongeix el títol i retalla el padding per guanyar espai
vertical. La classe .is-compact la posa setupStickyHeader() (funcions.js).
─────────────────────────────────────────────────────────────────────────── */
.app-header {
position: sticky;
top: 0;
z-index: 30;
transition: box-shadow 0.2s ease, padding 0.2s ease;
}
.app-header.is-compact {
box-shadow: 0 6px 20px -12px rgba(20, 14, 8, 0.45);
}
/* Transicions suaus en compactar/expandir. */
.app-header-row,
.app-header-title {
transition: padding 0.2s ease, font-size 0.2s ease, margin 0.2s ease;
}
/* Amaga l'eyebrow (text petit sobre el títol) quan la capçalera es compacta. */
.app-header.is-compact .eyebrow { display: none; }
/* Capçalera mòbil compacta: menys padding vertical i títol més petit. */
.app-header.is-compact .app-header-row { padding-top: 7px; padding-bottom: 7px; }
.app-header.is-compact .app-header-title { font-size: 14px; }
/* Capçalera desktop compacta: menys padding i títol més petit. */
@media (min-width: 1024px) {
.app-header.is-compact { padding-top: 10px; padding-bottom: 10px; }
.app-header.is-compact .app-header-title { font-size: 19px; margin-top: 0; }
}
/* ───────────────────────────────────────────────────────────────────────────
PWA / safe areas — quan l'app s'instal·la a la pantalla d'inici (mode
standalone) cal respectar el notch (dalt) i l'indicador d'inici (baix) de
l'iPhone. env(safe-area-inset-*) val 0 en un navegador normal, així que és
segur aplicar-ho sempre.
─────────────────────────────────────────────────────────────────────────── */
/* Capçalera mòbil: aparta el contingut de sota el notch / barra d'estat. */
.mobile-topbar {
padding-top: env(safe-area-inset-top);
}
/* ── Pila flotant inferior (elements/bottom-nav.php) ─────────────────────────
La caixa fixa que porta la barra de navegació. Es va fer pila perquè a sobre
de la barra hi havia el botó de fitxatge ràpid; des del 5 d'agost de 2026
allò ja no hi és (el fitxatge viu a l'inici i a /fitxatge.php, no sota totes
les pantalles) i la pila té un sol fill. Es manté perquè és qui posiciona:
la barra només és la pastilla blanca, i la pila creix cap amunt tota sola si
demà hi torna a haver res. La separació de la vora respecta l'indicador
d'inici de l'iPhone. */
.bnav-stack {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom));
z-index: 40;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Només mòbil. Va explícit i no amb la utilitat `lg:hidden`: estils.css es
carrega DESPRÉS de tailwind.css i el `display:flex` de sobre li guanyaria. */
@media (min-width: 1024px) { .bnav-stack { display: none; } }
.bottom-nav {
background: #fff;
border-radius: 22px;
box-shadow: 0 10px 30px -10px rgba(60, 40, 20, 0.25);
padding: 10px 8px;
}
.bnav-grid { display: grid; gap: 4px; }
/* Cada cel·la: icona a sobre i etiqueta a sota, TOT centrat. L'etiqueta és un
bloc d'amplada sencera amb text-align:center — amb `align-items:center` sol,
una etiqueta de dues paraules («Borsa completa») s'ajusta a l'amplada de la
cel·la i les seves línies queden alineades a l'esquerra. */
.bnav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
min-width: 0;
color: var(--c-muted);
font-weight: 500;
text-decoration: none;
}
.bnav-ico {
position: relative;
width: 34px;
height: 28px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: background 0.15s, color 0.15s;
}
.bnav-txt {
width: 100%;
text-align: center;
font-size: 10px;
line-height: 1.15;
/* Fins a dues línies; el que no hi càpiga, punts suspensius. Una etiqueta
llarga no ha de fer créixer la barra sense fre. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
/* ON ETS: pastilla taronja plena sota la icona i etiqueta en negreta. Abans
només hi havia un fons molt clar i, amb la barra blanca, no es veia. */
.bnav-item.is-active { color: var(--c-orange-dark); font-weight: 800; }
.bnav-item.is-active .bnav-ico {
background: var(--c-orange);
color: #fff;
box-shadow: 0 4px 12px -4px var(--c-orange);
}
/* L'accés automàtic a Emotium destaca també a la mostra de configuració. */
.bnav-item.is-emotium {
background: #00b187;
color: #fff;
font-weight: 700;
border-radius: 14px;
padding: 4px 2px;
}
.bnav-item.is-emotium .bnav-ico,
.bnav-item.is-emotium.is-active .bnav-ico {
background: #fff;
box-shadow: none;
width: 28px;
height: 28px;
border-radius: 50%;
}
.emotium-icon { display: block; width: 22px; height: 22px; object-fit: contain; }
/* La intranet de Pesem i Transformem (4 d'octubre de 2026): el mateix destacat
que Emotium, en el taronja de Pesem (#f39c12) enfosquit perquè el text blanc
es llegeixi. A la barra de baix només es pinta la icona: Pesem no hi té lloc
reservat, i un bloc de color sencer hi faria més soroll que Emotium. */
.bnav-item.is-pesem .bnav-ico,
.bnav-item.is-pesem.is-active .bnav-ico {
background: #d9730d;
color: #fff;
}
.bnav-badge {
position: absolute;
top: -3px;
right: -3px;
min-width: 15px;
height: 15px;
padding: 0 3px;
border-radius: 999px;
background: var(--c-red);
color: #fff;
font-size: 8.5px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* ── Triador de la barra mòbil (/configuracio.php) ───────────────────────────
On cadascú tria quins cinc botons vol a la barra de sobre. Fins a l'11 d'agost
de 2026 era una llista plana de caselles: amb els permisos d'un administrador
passava de trenta ítems i la pantalla era una tirallonga on ningú no trobava
res. Ara va per seccions plegades del menú i en graella de dues columnes, de
manera que d'entrada només s'hi veuen les capçaleres i la previsualització.
La previsualització reutilitza les classes de la barra de debò (.bottom-nav,
.bnav-*) a posta: si un dia canvia com es veu la barra, la mostra canvia
sola. L'única cosa que no s'agafa és .bnav-stack, que és qui la fixa a baix
de la pantalla — aquí ha de quedar-se dins de la targeta. */
/* ── Accés ràpid de /configuracio.php cap a «Les meves dades» ────────────────
Un .btn-ghost encongit. Va amb CSS i no amb utilitats de Tailwind perquè les
que caldrien (`py-1.5`, `gap-1.5`, `text-[12px]`) NO són al build, que està
purgat: hi serien al marcatge i no farien res (../../CLAUDE.md §CSS).
Aquí, sense capa, guanya a la forma per defecte dels .btn-* de dalt. */
.cfg-rapid {
padding: 6px 12px;
gap: 6px;
font-size: 12px;
color: var(--c-muted);
}
.cfg-rapid:hover { color: var(--c-orange-dark); }
.cfg-rapid-fletxa { font-size: 9px; opacity: .7; }
.navpick-preview {
background: var(--c-cream);
border: 1px solid var(--c-line-soft);
border-radius: 16px;
padding: 13px 12px 15px;
margin-bottom: 16px;
}
.navpick-preview-cap {
font-size: 10.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--c-faint);
text-align: center;
margin-bottom: 10px;
}
/* Amplada de mòbil encara que la targeta sigui ampla: la barra només existeix
allà, i estirada a tot l'ample no s'assemblaria al que es veurà. */
.navpick-preview .bottom-nav { max-width: 360px; margin: 0 auto; }
/* Sense cap botó triat: la barra no es pinta i es diu per què. */
.navpick-buit {
font-size: 12px;
color: var(--c-muted);
text-align: center;
padding: 12px 8px;
}
/* Cada secció del menú, plegable. És un natiu: plega i desplega
sense JS. S'obren soles les que porten algun botó triat (ho decideix el PHP a
/configuracio.php), que és l'únic que interessa mirar en entrar-hi. */
.navpick-grup {
background: #fff;
border: 1px solid var(--c-line);
border-radius: 14px;
overflow: hidden;
margin-bottom: 8px;
}
.navpick-head {
display: flex;
align-items: center;
gap: 9px;
padding: 10px 12px;
cursor: pointer;
list-style: none; /* amaga el triangle per defecte */
user-select: none;
}
.navpick-head::-webkit-details-marker { display: none; }
.navpick-head:hover { background: var(--c-cream); }
.navpick-head-ico { color: var(--c-orange); font-size: 12.5px; width: 16px; text-align: center; flex-shrink: 0; }
.navpick-head-txt {
font-size: 13px;
font-weight: 800;
letter-spacing: -0.01em;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* «2 de 9»: quants n'hi ha triats d'aquesta secció. Amb la secció plegada és
l'única pista que hi tens res, i per això s'encén en taronja quan no és zero. */
.navpick-head-n { font-size: 11.5px; font-weight: 700; color: var(--c-faint); flex-shrink: 0; }
.navpick-head-n.is-on { color: var(--c-orange-dark); }
.navpick-chevron { font-size: 11px; color: var(--c-faint); flex-shrink: 0; transition: transform 0.18s; }
.navpick-grup[open] .navpick-chevron { transform: rotate(180deg); }
/* Dues columnes a partir d'uns 320 px d'amplada útil, que és el que dona la
targeta al mòbil més estret. */
.navpick-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
gap: 6px;
padding: 2px 10px 11px;
}
/* La casella de cada ítem. El hi és de debò (només amagat a la vista)
perquè el formulari, el teclat i els lectors de pantalla continuïn funcionant
com amb qualsevol checkbox: aquí només se'n canvia el vestit. */
.navpick { display: block; position: relative; cursor: pointer; min-width: 0; }
.navpick input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.navpick-box {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 7px 9px;
border: 1px solid var(--c-line-soft);
border-radius: var(--r-btn);
background: #fff;
transition: border-color 0.15s, background 0.15s;
}
.navpick:hover .navpick-box { background: var(--c-cream); }
.navpick-ico { font-size: 12px; color: var(--c-faint); width: 15px; text-align: center; flex-shrink: 0; }
.navpick-txt {
flex: 1 1 auto;
min-width: 0;
font-size: 12.5px;
font-weight: 600;
color: var(--c-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.navpick-tick {
display: none;
flex-shrink: 0;
width: 15px;
height: 15px;
border-radius: var(--r-pill);
background: var(--c-orange);
color: #fff;
font-size: 9px;
align-items: center;
justify-content: center;
}
.navpick input:checked + .navpick-box { border-color: var(--c-orange); background: var(--c-orange-faint); }
.navpick input:checked + .navpick-box .navpick-ico { color: var(--c-orange); }
.navpick input:checked + .navpick-box .navpick-txt { font-weight: 800; color: var(--c-ink); }
.navpick input:checked + .navpick-box .navpick-tick { display: flex; }
/* El focus del teclat s'ha de veure: l'input real és invisible i sense això no
se sabria mai on ets navegant amb el tabulador. */
.navpick input:focus-visible + .navpick-box { outline: 2px solid var(--c-orange); outline-offset: 2px; }
/* Ja hi ha els cinc botons triats: la resta queden apagades fins que en treguis
una. El cursor va a la caixa i no a l'etiqueta perquè és qui l'omple sencera. */
.navpick input:disabled + .navpick-box { opacity: 0.45; cursor: not-allowed; }
/* ═══════════════════════════════════════════════════════════════════════════
FITXATGE RÀPID DE L'INICI (elements/fitxatge-rapid.php)
/fitxatge.php RESUMIT en una targeta ampla a dalt de tot de /index.php: a
l'esquerra quin dia i quina hora és i com estàs, a la dreta l'acció. En
mòbil s'apila i el botó passa a ocupar tota l'amplada, que és on hi va el
dit.
Des del 5 d'agost de 2026 aquest és l'ÚNIC fitxatge fora de la pantalla
sencera —el botó que flotava sobre la barra inferior a TOTES les pantalles
ja no hi és— i per això s'hi assembla tant: mateix rellotge, mateix xip
d'estat, mateix botó rodó verd per entrar i mateixa pastilla vermella per
plegar. Els estils viuen aquí i no a fitxatge.css perquè l'inici no carrega
aquell full: són una còpia curta, no el mateix codi. Si allà canvia el
llenguatge visual, aquí també.
Mateix codi de color que /fitxatge.php: VERD per començar la jornada,
VERMELL per plegar-la. El color el porta la targeta (`is-fora` / `is-dins`)
i el reparteix a la vora i al botó.
═══════════════════════════════════════════════════════════════════════════ */
.fitxr {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 18px;
margin-top: 12px;
padding: 18px 20px;
background: #fff;
border-radius: var(--r-card);
border-left: 4px solid var(--fitxr-c, var(--c-green));
box-shadow:
0 1px 0 rgba(60, 40, 20, 0.04),
0 6px 18px -10px rgba(60, 40, 20, 0.18);
}
.fitxr.is-fora { --fitxr-c: var(--c-green); }
.fitxr.is-dins { --fitxr-c: var(--c-red); }
.fitxr-info { min-width: 0; flex: 1 1 240px; }
.fitxr-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.fitxr-ara { min-width: 0; }
/* Data i rellotge: els de /fitxatge.php a escala d'inici. Tots dos els repinta
cada segon public/js/fitxatge-rapid.js amb l'hora del SERVIDOR. */
.fitxr-date {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--c-muted);
}
.fitxr-clock {
font-variant-numeric: tabular-nums;
font-size: 32px;
line-height: 1.05;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--c-ink);
margin-top: 2px;
}
.fitxr-clock small {
font-size: 16px;
font-weight: 700;
color: var(--c-faint);
margin-left: 2px;
}
/* Xip d'estat: les mateixes tres variants que .fitx-status (fitxatge.css). */
.fitxr-status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: var(--r-pill);
font-size: 11.5px;
font-weight: 800;
white-space: nowrap;
}
.fitxr-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fitxr-status.is-working { background: var(--c-green-light); color: var(--c-green-text); }
.fitxr-status.is-working .fitxr-status-dot {
background: var(--c-green);
animation: fitxrPulse 1.8s infinite;
}
.fitxr-status.is-paused { background: var(--c-amber-light); color: var(--c-amber-text); }
.fitxr-status.is-paused .fitxr-status-dot { background: var(--c-amber); }
.fitxr-status.is-off { background: var(--c-line-soft); color: var(--c-muted); }
.fitxr-status.is-off .fitxr-status-dot { background: var(--c-faint); }
@keyframes fitxrPulse {
0% { box-shadow: 0 0 0 0 rgba(0, 177, 135, 0.55); }
70% { box-shadow: 0 0 0 7px rgba(0, 177, 135, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 177, 135, 0); }
}
/* Xips de context: des de quina hora i a quina jornada van les hores. Aquí NO
hi van els minuts fitxats (ni corrent ni parats): el temps del dia és a
/fitxatge.php, que és on es va a mirar. */
/* Amb més d'una jornada activa no hi ha cap xip a dir —ho diu el selector— i
llavors el PHP no pinta ni la fila: aquí no cal preveure-ho. */
.fitxr-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.fitxr-chip {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
background: var(--c-warm);
color: var(--c-text);
border-radius: var(--r-pill);
padding: 6px 12px;
font-size: 11.5px;
font-weight: 600;
overflow-wrap: anywhere;
}
.fitxr-chip i { color: var(--c-muted); font-size: 11px; flex-shrink: 0; }
.fitxr-chip.is-buit { color: var(--c-muted); }
.fitxr-chip.is-buit i { color: var(--c-faint); }
/* ── Pastilla del CANVI DE JORNADA AUTOMÀTIC ─────────────────────────────────
La bessona de .fitx-auto (public/css/fitxatge.css): la mateixa pastilla verda
amb títol i detall petit a sota, i el mateix text. Si allà canvia el
llenguatge visual, aquí també.
Va a la SEVA LÍNIA i no dins de cap de les dues columnes: `flex: 1 1 100%`
dins d'un `.fitxr` que ja té `flex-wrap: wrap` la fa baixar sota de totes
dues. Ha de sortir en tots els estats —també els dies que s'és fora, quan a
la dreta no hi ha ni formulari—, i per això no penja de l'acció. */
.fitxr-auto {
flex: 1 1 100%;
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 13px;
border-radius: 13px;
background: var(--c-green-light);
color: var(--c-green-text);
}
.fitxr-auto i { margin-top: 2px; flex-shrink: 0; color: var(--c-green); }
.fitxr-auto-cos { min-width: 0; }
.fitxr-auto-cos strong {
display: block;
font-size: 12.5px;
font-weight: 800;
margin-bottom: 1px;
}
.fitxr-auto-cos span {
display: block;
font-size: 11.5px;
line-height: 1.5;
opacity: 0.9;
}
/* Columna de l'acció: selector (si cal), botó i enllaç a la pantalla sencera. */
.fitxr-accio {
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
flex: 0 1 260px;
min-width: 0;
}
/* Etiqueta del selector: el «pas 1» de /fitxatge.php, sense el numeret. */
.fitxr-pas {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--c-muted);
cursor: pointer;
}
.fitxr-select {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--c-line);
border-radius: var(--r-btn);
background: #fff;
color: var(--c-ink);
font-size: 13px;
font-weight: 700;
text-align: center;
text-align-last: center; /* Firefox pinta el text triat a l'esquerra sense això */
cursor: pointer;
}
.fitxr-select:focus {
outline: none;
border-color: var(--c-orange);
box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.15);
}
/* ── Botó rodó d'entrada ─────────────────────────────────────────────────────
El .fitx-punch de /fitxatge.php reduït a 132 px. L'anell que batega és un
::after i no ocupa lloc al layout: l'espai que necessita per no trepitjar
l'enllaç de sota es reserva a mà amb el marge. */
.fitxr-punch {
position: relative;
width: 132px;
height: 132px;
margin: 8px 0 18px;
border: none;
border-radius: 50%;
cursor: pointer;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
background: radial-gradient(120% 120% at 50% 12%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
linear-gradient(180deg, var(--c-green), var(--c-green-dark));
box-shadow: 0 14px 30px -12px rgba(0, 177, 135, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.28);
transition: transform 0.12s ease, filter 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.fitxr-punch::before,
.fitxr-punch::after {
content: "";
position: absolute;
inset: -7px;
border-radius: 50%;
border: 2px solid var(--c-green);
opacity: 0.35;
}
.fitxr-punch::after { opacity: 0.5; animation: fitxrRing 2.4s ease-out infinite; }
@keyframes fitxrRing {
0% { transform: scale(1); opacity: 0.5; }
100% { transform: scale(1.12); opacity: 0; }
}
.fitxr-punch:hover { filter: brightness(1.04); }
.fitxr-punch:active { transform: scale(0.97); }
.fitxr-punch:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 4px; }
.fitxr-punch-ico { font-size: 30px; line-height: 1; margin-bottom: 2px; }
.fitxr-punch-label { font-size: 13.5px; font-weight: 800; }
.fitxr-punch-sub {
max-width: 104px;
font-size: 10.5px;
font-weight: 600;
line-height: 1.3;
opacity: 0.9;
font-variant-numeric: tabular-nums;
}
/* ── Pastilla vermella de sortida ─────────────────────────────────────────── */
.fitxr-finish {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
min-height: 48px;
padding: 12px 20px;
border: none;
border-radius: var(--r-pill);
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 800;
color: #fff;
background: linear-gradient(180deg, var(--c-red), #b53129);
box-shadow: 0 8px 20px -8px rgba(212, 66, 58, 0.6);
transition: filter 0.15s, transform 0.12s;
}
.fitxr-finish:hover { filter: brightness(1.05); }
.fitxr-finish:active { transform: translateY(1px); }
.fitxr-finish:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.fitxr-finish-hora { font-size: 11.5px; font-weight: 600; opacity: 0.85; }
/* Mentre s'espera la ubicació (fitxatge-rapid.js). El botó segueix dient què
passa al seu text petit: aquí només es treu el convit a tornar-hi. */
.fitxr-punch.is-enviant,
.fitxr-finish.is-enviant { cursor: progress; filter: saturate(0.85); }
.fitxr-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
color: var(--c-muted);
}
.fitxr-link:hover { color: var(--c-orange-dark); }
.fitxr-link i { font-size: 10px; }
@media (max-width: 640px) {
.fitxr { padding: 16px; }
.fitxr-accio { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
.fitxr-punch::after,
.fitxr-status.is-working .fitxr-status-dot { animation: none; }
}
/* ── --nav-bottom-space: quant amaga la barra inferior ───────────────────────
ALÇADA REAL de la bottom-nav + la seva separació de la vora (12px), SENSE la
safe area (que cada consumidor hi suma a part). Val 0 a partir de lg, on la
barra no existeix.
Tot el que flota a baix de la pantalla (el candau de l'horari, la paleta de
pintura, «Tens canvis sense desar», la barra minimitzada de jornades) s'hi ha
de recolzar en comptes de portar un número màgic a mà: els números màgics
anaven ajustats a una barra de ~65 px i, en mòbils on l'etiqueta passa a dues
línies o el sistema puja la mida de lletra, la barra creix i el botó flotant
li queda a sobre.
El valor d'aquí és el FALLBACK (els 66 px que fa amb la lletra per defecte);
setupBottomNavSpace() a funcions.js el mesura de veritat i el reescriu com a
estil inline a , que guanya sobre aquestes dues regles. */
@media (max-width: 1023px) { :root { --nav-bottom-space: 78px; } }
@media (min-width: 1024px) { :root { --nav-bottom-space: 0px; } }
/* El contingut principal mòbil ha de deixar espai per la bottom-nav fixa
+ la safe area inferior (no es retalla l'última targeta). */
@media (max-width: 1023px) {
.app-main {
padding-bottom: calc(var(--nav-bottom-space, 78px) + 2rem + env(safe-area-inset-bottom));
}
}
/* Barra minimitzada del modal de jornades: per damunt de l'indicador i, en
mòbil, per damunt de la bottom-nav (no s'hi ha de solapar). */
.eng-bar {
bottom: calc(18px + var(--nav-bottom-space, 0px) + env(safe-area-inset-bottom));
}
/* ── .save-float · píndola «Tens canvis sense desar» ─────────────────────────
Component compartit: apareix quan hi ha canvis pendents i desapareix quan no
n'hi ha, de manera que el botó de desar només ocupa pantalla quan serveix
d'alguna cosa. El fan servir /disponibilitat.php, /les-meves-dades.php,
/admin/notificacions.php i /ofertes/nova.php.
Aquesta ja és l'ÚNICA còpia: la de `disponibilitat.css` va desaparèixer el 5
d'agost del 2026 en plegar en un sol dock tot el que hi flotava, i la de
`perfil.css` —que es carregava després i, per sota de 480 px, deixava la
píndola esprémuda dins de la meitat dreta de la pantalla— l'endemà.
Es pinta amb `is-visible` JA POSAT a l'HTML i és el JS qui la treu en
carregar: sense JavaScript la píndola es queda visible i fa de botó de desar
normal, en comptes de deixar un formulari que no es pot enviar. */
.save-float {
position: fixed;
z-index: 46;
left: 50%;
bottom: calc(20px + var(--nav-bottom-space, 0px) + env(safe-area-inset-bottom));
transform: translateX(-50%) translateY(20px);
display: flex;
align-items: center;
gap: 12px;
padding: 8px 8px 8px 16px;
background: #fff;
border: 1px solid var(--c-line);
border-radius: 9999px;
box-shadow: 0 16px 40px -12px rgba(20, 14, 8, 0.42);
opacity: 0;
pointer-events: none;
transition: transform 0.22s ease, opacity 0.22s ease;
}
.save-float.is-visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
pointer-events: auto;
}
.save-float-text {
font-size: 12.5px;
font-weight: 700;
color: var(--c-text);
white-space: nowrap;
}
.save-float-text i { color: var(--c-amber); }
.save-float-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: 0;
border-radius: 9999px;
background: var(--c-orange);
color: #fff;
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
transition: filter 0.12s;
}
.save-float-btn:hover { filter: brightness(1.07); }
.save-float-btn:disabled { opacity: 0.6; cursor: default; }
/* Acció secundària dins de la píndola (descartar els canvis). */
.save-float-ghost {
border: 0;
background: none;
padding: 6px 10px;
border-radius: 9999px;
font-size: 12px;
font-weight: 700;
color: var(--c-muted);
cursor: pointer;
}
.save-float-ghost:hover { background: var(--c-cream); color: var(--c-ink); }
/* Amb la finestra estreta la píndola no hi cap centrada: es queda de vora a
vora. Perquè no s'hagi de menjar tres línies de pantalla —que amb la barra
inferior a sota són massa—, l'etiqueta llarga del botó s'escurça a «Desa»
(`.save-float-llarg`) i així tot torna a cabre en una línia. */
@media (max-width: 479px) {
.save-float {
left: 12px;
right: 12px;
transform: translateY(20px);
border-radius: 18px;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
padding: 10px 12px;
}
.save-float.is-visible { transform: translateY(0); }
.save-float-text { font-size: 12px; }
.save-float-llarg,
.save-float-mig { display: none; }
}
/* Drawer lateral mòbil: respecta notch i indicador d'inici. */
.mobile-drawer {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
/* ───────────────────────────────────────────────────────────────────────────
Sidebar de desktop (elements/sidebar.php)
Dues coses:
a) BLOC D'USUARI FIX — la barra és una columna flex d'alçada de pantalla amb
tres bandes: capçalera (logo + botó), cos (.app-sidebar-scroll, l'única
amb overflow) i peu (.app-sidebar-user). Així el nom d'usuari, la roda
dentada i el botó de sortir no marxen mai de la vista encara que el menú
no hi càpiga.
b) PLEGABLE estil Gmail — el botó [data-sidebar-toggle] posa
`sidebar-collapsed` a (setupSidebarToggle() a funcions.js;
header.php l'aplica abans de pintar llegint localStorage, per evitar el
salt visual). Plegada, la barra és una tira d'icones: s'amaguen
etiquetes, títols de secció i xevrons, i tot se centra.
Va sobre i no sobre l'