» dins del seu embolcall, i per aixo hi van pel seu nom: veure «.fitxa-client .accions» i companyia. */ .barra-comandes .e-btn, .barra-comandes .comanda, .barra-document .e-btn, .peu-accions .e-btn, .accions-graella .e-btn, .accions-cicle .e-btn, .fitxa-client .accions .e-btn, .fitxa-article .accions .e-btn, .fitxa-familia .accions .e-btn, .fitxa-forma-pagament .accions .e-btn, .fitxa-serie .accions .e-btn, .fitxa-usuari .accions .e-btn, .accions-compte .e-btn, .credencial-sortides .e-btn, .credencial-copia .e-btn, .entrada-envia { min-height: 44px; } /* EL ROTUL D'UNA TARGETA VA A SOBRE, I NO AL COSTAT. En vertical, Syncfusion parteix cada cel·la en dues columnes: el rotul —que dibuixa ell amb «::before», d'aqui que no es pugui tocar com un element— i el valor. A 390 px aixo son 164 px per al rotul i 152 per al camp, i un camp de descripcio de 152 px no es cap camp de descripcio. Amb el rotul a tota l'amplada, el que ve darrere baixa de linia sol i el camp recupera els 364 px sencers. Es la mateixa forma que tenen els camps d'un formulari a la resta de l'aplicacio, que es el que ha de ser: en vertical, una fila de graella ES un formulari. L'alineacio a l'esquerra tambe: el rotul sortia arrambat a la dreta, contra el camp, i els d'una targeta s'han de poder llegir en columna. COM HO FA EL TEMA, QUE ES EL QUE DECIDEIX QUE S'HA DE TOCAR: la cel·la porta «padding-left: 55%» i el rotul es un «::before» ABSOLUT amb «left: 13px» i «width: 45%». Per aixo no serveix de res donar-li amplada: no es al flux, i el que reserva el lloc del camp es el farciment de la cel·la. El que cal es moure el rotul a dalt —«left: 0» i tota l'amplada— i canviar el farciment de l'esquerra per un de dalt. I ELS SELECTORS VAN CALCATS DELS SEUS. El del tema es «.e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-cell]» —amb «.e-bigger» i «.e-grid» al MATEIX element, sense espai—; un de nostre mes curt no s'aplica i no dona cap error: el rotul es queda amb el seu 45 % i sembla que no hagis tocat res. Escrits igual i posats aqui, que es despres al full, guanyen per ordre. Es la trampa 4 de «docs/22». */ .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-cell], .e-grid.e-row-responsive .e-gridcontent td[data-cell] { padding-left: 0; padding-top: 1.45rem; } .e-bigger.e-grid.e-row-responsive .e-gridcontent td::before, .e-grid.e-row-responsive .e-gridcontent td::before { left: 0; width: 100%; text-align: left; /* El tema el reté amb «overflow: hidden» i punts suspensius perquè el rotul cabia al 45 % de la cel·la. Ara que en te el 100 % no hi ha res a truncar, i el que feia aquell «overflow» era tallar per sota el que baixa de la linia: els parentesis de «Tipus (%)» i la «p» de «Descripcio». */ overflow: visible; white-space: normal; line-height: 1.3; } /* I el camp ocupa el que ha quedat lliure, que ara es tot. Val per a l'embolcall que Syncfusion posa al voltant de cada plantilla. */ .e-grid.e-row-responsive .e-gridcontent td > * { width: 100%; max-width: 100%; } /* UNA COLUMNA CONGELADA NO VOL DIR RES EN VERTICAL, I EL SEU DESPLACAMENT NO ES AL FULL: EL POSA EL JAVASCRIPT A L'ATRIBUT «style». Congelar una columna serveix perque es quedi fixa mentre la fila es desplaça de costat. En vertical la fila ES una targeta i no es desplaça enlloc, pero Syncfusion li deixa igualment el «left: 30px» posat, i el resultat es que el PRIMER camp de cada targeta —la descripcio d'una linia, que es el que mes s'omple— surt escrostonat cap a la dreta respecte de tots els altres. ES UN DELS DOS «!important» DE PANTALLA DEL FULL —l'altre es el sostre d'alçada del dialeg; els que queden son del bloc d'impressio— i val la pena dir per que: un estil escrit a l'atribut «style» no es pot vencer de cap altra manera, per molt especific que sigui el selector. No es un cop de força contra el tema, es contra el JavaScript del component. */ .e-grid.e-row-responsive .e-gridcontent td.e-leftfreeze, .e-grid.e-row-responsive .e-gridcontent td.e-rightfreeze, .e-grid.e-row-responsive .e-gridcontent td.e-unfreeze { left: auto !important; } /* AQUI NOMES HI QUEDA «overflow-wrap», I ES A POSTA (#106). El que feia que el rotul d'una casella es pogues partir i que no deixes el quadre sol vivia AQUI DINS, i per aixo a l'escriptori no hi havia res que ho governes: el defecte es va destapar a 1.280 px al dialeg de la declaracio negativa de l'abono. Ara es a la capa global, amb el motiu sencer escrit —«UNA CASELLA ES UNA CASELLA A TOTA L'APLICACIO»—, i el que es queda aqui es l'unica peça que NOMES val per al telefon. ⚠️ «anywhere» NO ES «break-word»: participa en el calcul de la mida minima de contingut, o sigui que canvia com s'encongeixen els contenidors de graella i de flex. A 390 px es el que evita que un rotul sense cap espai —una adreça, una referencia— se'n dugui la pagina de costat; a l'escriptori partiria una paraula pel mig dins d'un rotul de formulari sense que res no ho demani. Per aixo puja el «display» i no puja aixo. */ .e-checkbox-wrapper .e-label, .e-css.e-checkbox-wrapper .e-label { overflow-wrap: anywhere; } /* EL ZOOM DE L'iPhone, QUE NO ES CAP OPCIO QUE ES PUGUI APAGAR. Safari a iOS fa zoom SOL en enfocar un camp de menys de 16 px, i despres la pagina es queda desplacada de costat sense que res ho hagi demanat. No hi ha cap manera d'evitar-ho que no sigui que el camp faci 16 px: un «user-scalable=no» al viewport ho taparia, pero deixaria sense zoom qui el necessita per llegir. 1rem son exactament 16 px, i nomes val per sota d'aquest tall: a l'escriptori els camps continuen sent els del tema. */ .e-input, .e-input-group input, input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], select, textarea { font-size: 1rem; } /* ---- ELS LLISTATS PRINCIPALS, EN TARGETES COMPACTES (#506) ---- */ /* A `/factures` i a `/clients` LA FILA NO ÉS CAP FORMULARI. El mode genèric de dalt —rètol a sobre de cada camp— hi feia 256 px per factura i 184 per client: cinc rètols per dir un número, una data, un nom, un import i «Acceptat per l'AEAT». Aquí la fila és una targeta de dues o tres línies, en l'ordre de L2 de docs/22: factures número + marques ···· import destinataris, en una línia i amb punts suspensius expedició ···· remissió, només si no és la línia base clients nom (i el NIF a sota, a la cel·la de la persona) ···· pendent CONTINUA SENT EL MODE VERTICAL DEL COMPONENT (docs/13): el mateix «SfGrid», les mateixes cel·les i el mateix teclat («teclat-de-graella.js» no en sap res). La fila es converteix en una graella CSS de dues columnes, i cada cel·la va a la seva àrea pel «data-area» que li posa «GridColumn.CustomAttributes» —«AreaDeTargeta.cs»—, i no per ordre: l'ordre de les columnes és el de l'escriptori. ⚠️ ELS SELECTORS PORTEN «.e-bigger.e-grid» JUNTS, calcats dels del tema (docs/21, «Els selectors del tema porten .e-bigger i .e-grid al mateix element»), i «.targetes-compactes» davant: així pesen més que el mode genèric de dalt i que els del tema, sense dependre de l'ordre. La classe la porta l'embolcall, que és nostre: el «CssClass» de l'SfGrid no arriba a ser cap classe. */ .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent tr.e-row { /* «position: relative» A UNA FILA: és el bloc contenidor de l'enllaç estirat de l'àncora. Mesurat al navegador abans d'estendre-ho (#506): amb la fila en «grid» i les cel·les estàtiques, l'«::after» de l'àncora cobreix la targeta sencera i res més. */ position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; row-gap: 0.15rem; padding: 0.55rem 0.75rem; } .graella-factures.targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent tr.e-row { grid-template-areas: "ancora xifra" "text text" "qualificador estat"; } /* CLIENTS (onada 5, D6): la persona —el nom i, a sota, el NIF i les insígnies, que porta «CelaDePersona»— i, a la dreta, el pendent. La mena i el facturat són a la fitxa. */ .graella-clients.targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent tr.e-row { grid-template-areas: "ancora xifra"; } /* LES CEL·LES, SENSE CAP CAIXA NI CAP «position». Estàtiques perquè l'enllaç estirat pugi fins a la fila; sense farciment perquè el de la targeta és el de la fila. */ .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area] { position: static; min-width: 0; padding: 0; border: 0; text-align: left; line-height: 1.35; } .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area="ancora"] { grid-area: ancora; } .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area="xifra"] { grid-area: xifra; } .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area="text"] { grid-area: text; } .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area="qualificador"] { grid-area: qualificador; } .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area="atribut"] { grid-area: atribut; } .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area="estat"] { grid-area: estat; } /* LA XIFRA, A LA DRETA I EN PES 600: és el que es compara d'una targeta a l'altra. */ .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area="xifra"] { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area="estat"] { text-align: right; } /* La data i el que la segueix, en text secundari: qualifiquen, no identifiquen. */ .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area="qualificador"], .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area="atribut"] { color: var(--color-sf-content-text-color-alt2); } /* ELS RÈTOLS S'AMAGUEN A LA VISTA, PERÒ NO S'ESBORREN: el «::before» amb el «HeaderText» continua dins de la cel·la, i és el que diu a qui no hi veu que «266,20» és l'import total. Les declaracions de «.visualment-amagat», que una consulta de mitjans no pot posar al marcatge. Són absoluts dins de la fila, i la fila els conté. */ .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area]::before { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* EL QUE NO HI VA. La regió d'un client és a la fitxa, com a tauleta. I la cel·la de desplegar el detall no es dibuixa: a la targeta no hi ha res per desplegar que la fitxa no digui millor, i una fletxa al capdamunt de cada targeta era la primera cosa que es veia. */ .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area="fitxa"], .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td.e-detailrowcollapse, .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td.e-detailrowexpand { display: none; } /* LA REMISSIÓ NOMÉS QUAN NO ÉS LA LÍNIA BASE. «Acceptat per l'AEAT» el porten gairebé totes les files i s'amaga per la seva classe d'estat; però només A LA VISTA, com els rètols: a qui no hi veu la targeta li continua dient on és cada factura. */ .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area="estat"]:has(.estat-linia-base) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* L1: EL NÚMERO I LES SEVES MARQUES A LA MATEIXA LÍNIA; «Desactivat» a l'altra punta del nom. */ .targetes-compactes .e-bigger.e-grid.e-row-responsive .cel-numero { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; } .targetes-compactes .e-bigger.e-grid.e-row-responsive .cel-ancora { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 0.5rem; } /* L2: ELS DESTINATARIS, EN UNA LÍNIA I AMB PUNTS SUSPENSIUS. El mode genèric els deixa partir —allà la fila és un formulari—; en una targeta compacta, una línia. */ .targetes-compactes .e-bigger.e-grid.e-row-responsive .text-retallat { white-space: nowrap; overflow-wrap: normal; } /* TOTA LA TARGETA PORTA A LA FITXA: l'enllaç estirat. L'«::after» de l'àncora cobreix la fila, que n'és el bloc contenidor, i un toc a qualsevol lloc de la targeta és un toc a l'enllaç. EL NOM ACCESSIBLE NO CANVIA: un «::after» sense contingut no hi afegeix res, i l'enllaç continua dient el número i prou (L1 de docs/22). */ .targetes-compactes .e-bigger.e-grid.e-row-responsive a.ancora::after { content: ""; position: absolute; inset: 0; } /* L'ANELL DE FOCUS, A LA TARGETA I NO A L'ENLLAÇ. Amb l'enllaç estirat, un anell al voltant del número diria que el que es prem és el número; el que es prem és la targeta. */ .targetes-compactes .e-bigger.e-grid.e-row-responsive a.ancora:focus-visible { outline: none; } .targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent tr.e-row:has(a.ancora:focus-visible) { outline: 2px solid var(--color-sf-primary); outline-offset: -2px; } /* ---- LES LÍNIES D'UN DOCUMENT, EN TARGETES COMPACTES (#562) ---- descripció (i la nota a sota) ········· import quantitat unitat × preu descompte ····· tipus La mateixa targeta a la prefactura i a la factura emesa («LiniesDelDocument»). El número i la base no hi van («data-area="fitxa"»): el número és el de l'ordre i la base de cada línia la diu el peu. A la prefactura la descripció és l'«a.ancora» i tota la targeta porta a la vista de la línia; a la factura emesa no hi ha cap enllaç. */ .graella-linies-document.targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent tr.e-row { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "ancora ancora ancora xifra" "qualificador atribut estat estat"; /* EL TIPUS OCUPA TAMBÉ LA COLUMNA FLEXIBLE, i no només la de l'import. Amb el tractament a sota —«N2 — no subjecta per regles de localització»— una cel·la d'una sola columna «auto» l'eixamplava i s'enduia l'amplada de la descripció de la fila de dalt: es partia en tres línies d'una paraula. Sense separació de columnes: la de la targeta general (0,75 rem) separava la quantitat del preu com si fossin dues dades i no «2 h × 120,00». L'aire el posa cada cel·la. */ column-gap: 0; } .graella-linies-document.targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area="xifra"], .graella-linies-document.targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area="estat"] { padding-left: 0.75rem; } /* Les tres xifres petites, en una fila: la unitat al costat de la quantitat i el descompte al costat del preu, i no a sota. */ .graella-linies-document.targetes-compactes .e-bigger.e-grid.e-row-responsive .cel-quantitat, .graella-linies-document.targetes-compactes .e-bigger.e-grid.e-row-responsive .cel-preu, .graella-linies-document.targetes-compactes .e-bigger.e-grid.e-row-responsive .cel-tipus-linia { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0.35rem; } .graella-linies-document.targetes-compactes .e-bigger.e-grid.e-row-responsive .cel-tipus-linia { justify-content: flex-end; } /* «3 h × 12,00»: el signe és decoració i no entra al que es llegeix —«/ ""» és el text alternatiu buit del contingut generat—. A qui no hi veu, el rètol amagat de la cel·la ja li diu que és el preu. */ .graella-linies-document.targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area="atribut"] { padding-left: 0.35rem; } /* Dins de la pila i no al «div» de la cel·la: la pila és «flex», i un «::before» de fora hi quedaria en una línia a part. Aquí és un element més de la fila. */ .graella-linies-document.targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area="atribut"] .cel-preu::before { content: "×" / ""; } /* El tipus qualifica, com la quantitat i el preu: en text secundari. */ .graella-linies-document.targetes-compactes .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-area="estat"] { color: var(--color-sf-content-text-color-alt2); } } /* Els camps de la capcalera de la factura, en columnes. Un sota l'altre i a tota l'amplada de la pantalla, un camp de data de deu caracters ocupava mil pixels i obligava a fer roda avall per veure'n quatre. */ .camps { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); /* L'espai entre columnes és el token (1,5 rem), i no un número: «SeccionsDeCostat» hi posa les seves dues seccions a sobre i l'ha de llegir del mateix lloc (#792). */ gap: 0.75rem var(--separacio-de-caselles); margin-bottom: 1rem; } /* Nomes «.camp». Aqui hi havia «.capcalera > label» i «.capcalera > small», i aquella classe no es nostra tota sola: es tambe la de l'«SfAppBar» («MainLayout.razor»), de manera que dues regles escrites per als camps d'un formulari cauen sobre la barra de dalt i qualsevol regla nova per a la barra cauria sobre els camps. Els tres formularis que la duien ja no la duen, i els camps que hi penjaven ara son «.camp» com tots els altres. ⚠️ AQUESTA REGLA CAU TAMBE SOBRE EL «label» D'UNA CASELLA, que es el que Syncfusion dibuixa dins de «.e-checkbox-wrapper» i que no es cap rotul de camp sino el control sencer. El «display: block» d'aqui li tirava el rotul a la linia de sota, i durant un temps va guanyar a la regla que ho havia d'arreglar —mateixa especificitat, i aquesta va DESPRES al full—. Qui ho venç ara es «.camp .e-checkbox-wrapper > label», escrita a la seccio «UNA CASELLA ES UNA CASELLA A TOTA L'APLICACIO» amb el motiu sencer. Si algu apuja l'especificitat d'aixo, allo s'ha de tornar a mirar. */ .camp label { display: block; margin-bottom: 0.25rem; font-weight: 500; } .camp small { display: block; margin-top: 0.25rem; color: var(--color-sf-content-text-color-alt2); } /* ⚠️ I L'AJUDA A DEMANDA S'HA DE PODER AMAGAR, i la regla de sobre no ho deixava. «hidden» només val el «display: none» del full del navegador, que és el que té menys pes de tots: el «display: block» d'aquí sobre el guanyava, i un «» es continuava veient sense cap error enlloc (docs/22, «Quan una cosa no s'aplica»). Dues classes i un atribut hi guanyen per especificitat, i no per ordre. NOMÉS PER A AQUEST ELEMENT i no cap «[hidden]» general amb «!important»: al full hi ha d'altres elements amb «display» propi i l'atribut posat a posta, i una regla general els canviaria sense que ningú els hagués mirat. */ .camp small[hidden] { display: none; } /* EL RÈTOL D'UN CAMP AMB EL SEU BOTÓ D'AJUDA (#311). EL BOTÓ VA AL COSTAT DEL RÈTOL I MAI A DINS: dins del «label», el clic al rètol obriria l'ajuda en comptes de posar el focus al camp (docs/22). La fila és nostra i el «label» continua sent fill del «.camp», que és on el busquen les proves. «.camp .camp-retol label» I NO «.camp-retol label»: «.camp label» ja li posa el marge de sota, i amb la mateixa especificitat guanyaria l'ordre del full. */ .camp .camp-retol { display: flex; align-items: center; gap: 0.35rem; min-width: 0; margin-bottom: 0.25rem; } .camp .camp-retol label { margin-bottom: 0; } /* ⚠️ I EL RÈTOL QUE NO PORTA BOTÓ HA DE FER LA MATEIXA ALÇADA. Sense això, a la fitxa d'un document la fila de rètol de «Sèrie» —amb el botó de 1,5 rem— era més alta que el rètol sol de «Data d'expedició», i els controls de la mateixa fila de la graella quedaven desnivellats uns 7 px. Es va veure a la primera captura (#311). Només al rètol fill directe del «.camp»: el «label» de dins d'una casella és el control sencer, i té la seva regla a «UNA CASELLA ÉS UNA CASELLA A TOTA L'APLICACIÓ». I NOMÉS A LES DUES FITXES DE DOCUMENT, que són les úniques que porten botons d'ajuda —la d'un preparatori i, des de la segona passada de la #311, la d'una factura emesa—: escrit per a tot «.camp», afegiria tres píxels a cada rètol de cada formulari del producte, a pantalles que ningú no ha mirat amb aquest canvi. «:is()» pren l'especificitat de la classe, i la regla pesa el mateix que abans. */ /* ⚠️ I LA VISTA D'UNA LÍNIA, QUE DES DEL 15/09/2026 PORTA AL RÈTOL DE L'ARTICLE EL BOTÓ D'AJUDA I LA PORTA D'ALTA: sense aquesta alçada, l'Article i la Descripció del costat quedaven desnivellats. */ /* ⚠️ I EL RÈTOL D'UNA MEITAT D'UNA PARELLA, QUE TAMBÉ ÉS FILL DIRECTE DE LA SEVA CAPSA (#802). La regla només deia «.camp > label», i el «label» d'una meitat penja de «.meitat», no del «.camp»: a la prefactura, la base rectificada —sense botó «i»— quedava 7 px més amunt que la quota del costat, i el valor del descompte, 7 px més amunt que la mena (mesurat a 1.440, #793). La pàgina ho esquivava embolcallant el rètol sol en un «.camp-retol», i cada parella nova ho havia de tornar a saber. És la mateixa forma que la regla de les fitxes mestres, que ja cobria «.meitat» des de la #500. NOMÉS EL RÈTOL FILL DIRECTE: el de dins d'un «.camp-retol» ja té l'alçada de la fila, i el d'una casella de sí o no és el control sencer. I NOMÉS A LES TRES CAPSES D'AQUÍ: les fitxes mestres, el domicili i el destinatari tenen la seva, i un diàleg d'alta ràpida no és cap fitxa de document. */ :is(.fitxa-document, .fitxa-factura, .vista-linia) :is(.camp, .meitat) > label, :is(.fitxa-document, .fitxa-factura, .vista-linia) .camp .camp-retol { min-height: 1.5rem; } :is(.fitxa-document, .fitxa-factura, .vista-linia) .camp > label { display: flex; align-items: center; } /* EL DE LA MEITAT, AMB L'ALÇADA DE LÍNIA I NO AMB «flex»: el rètol d'una meitat que no hi cap es talla amb punts suspensius («.parella > .meitat > label», més avall), i el «text-overflow» no arriba al text d'un contenidor flex, que en fa un element anònim. Amb l'alçada de línia el text queda centrat a la mateixa altura que el del «.camp-retol» del costat, i el control, a sota, al mateix «top». */ :is(.fitxa-document, .fitxa-factura, .vista-linia) .meitat > label { line-height: 1.5rem; } /* A una casella de sí o no el rètol pot fer dues línies, i el botó es queda a la de dalt, a l'altura del quadre. */ .camp .camp-retol-casella { align-items: flex-start; } /* EL BOTÓ «i», SENSE REQUADRE (acabat general, 01/10/2026, decisió de l'usuari sobre la maqueta; el perquè, a docs/20 «La paleta, el radi i la fitxa d'un registre»). Fins aquell dia portava la caixa de tots els botons —vora, fons i radi—, i una fitxa amb vint camps en tenia vint: el que més es repetia a la pantalla era el botó que menys es prem. Ara és la icona sola, en gris terciari, dins d'un cercle invisible que només es pinta amb el ratolí a sobre o obert. NO ÉS CAP «e-flat»: el tema li tornaria la caixa en apagar-lo (docs/22, «Una sola forma per a tot el que es prem»), i aquest no s'apaga mai. L'OBJECTIU CONTINUA FENT 24 × 24 (WCAG 2.5.8) i la icona, 15 px: el que s'ha tret és la caixa, no el lloc on es prem. Mateixa mida a tota l'aplicació («ElsBotonsDAjudaFanTotsLaMateixaMida»). ELS ESTATS VAN ESCRITS UN PER UN, i no és redundància: «.e-btn:hover», «:focus» i «:active» del tema són dues classes i hi tornen a posar fons i vora; amb tres guanyen aquestes sense dependre de l'ordre. El focus del teclat NO es toca: l'anell del tema és un «box-shadow» a «.e-btn:focus-visible», i amb el radi del 50 % surt rodó al voltant de la icona (WCAG 2.4.7). EL CONTRAST: la icona en terciari fa 4,8:1 sobre la targeta clara i 4,4 sobre el requadre tintat, i 6,9 en fosc; una icona en demana 3. Oberta, el primari sobre el seu fons suau, 4,8:1 i 7,6:1. */ .e-btn.boto-ajuda { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.5rem; min-width: 0; height: 1.5rem; padding: 0; line-height: 1; border-radius: 50%; } .e-btn.boto-ajuda, .e-btn.boto-ajuda:hover, .e-btn.boto-ajuda:focus, .e-btn.boto-ajuda:focus-visible, .e-btn.boto-ajuda:active { border-color: transparent; background-color: transparent; color: var(--color-sf-content-text-color-alt3); } .e-btn.boto-ajuda:hover { background-color: var(--fons-inset); color: var(--color-sf-content-text-color); } /* SENSE L'OMBRA DEL TEMA EN REPÒS: «.e-btn» hi posa «0 1px 2px» negre al 5 %, i un cercle invisible amb ombra és una taca sota la icona. Només fora del focus del teclat, que el tema dibuixa també amb un «box-shadow» i s'ha de continuar veient. */ .e-btn.boto-ajuda:not(:focus-visible) { box-shadow: none; } .e-btn.boto-ajuda .e-icons { color: inherit; font-size: 0.9375rem; } /* OBERT: el primari sobre el seu fons suau, que és l'estat dit amb «aria-expanded» i no amb una classe. Va després dels estats de sobre i pesa el mateix: guanya per ordre. */ .e-btn.boto-ajuda[aria-expanded="true"], .e-btn.boto-ajuda[aria-expanded="true"]:hover { background-color: var(--fons-primari-suau); color: var(--color-sf-primary); } /* L'ÀNCORA QUE HA SORTIT DE L'AJUDA DEL TIPUS: a la vista, sota el camp, i de la mida d'una ajuda perquè no pesi com un camp. */ .camp .ancora-camp { margin: 0.25rem 0 0; font-size: 0.85rem; } /* EL QUE UN CAMP REFUSA, DIT AL COSTAT DEL CAMP. Es la germana d'«.previsualitzacio-error»: mateixa mida i mateixa interlinia, i el color surt del tema —«--color-sf-danger», que «--color-sf-error» no existeix (docs/22)—. Va sota el camp i sobre l'ajuda, que es permanent: el que refusa es del que s'acaba d'escriure i l'ajuda val sempre. No hi ha cap icona: la que hi posaria Syncfusion es una lletra dibuixada amb «content» i entraria al nom accessible. Qui ho anuncia es el «role=alert» de l'element. */ .camp .error-camp { display: block; margin-top: 0.25rem; font-size: 0.78rem; line-height: 1.35; color: var(--color-sf-danger); } /* L'AVIS QUE NO BARRA, sota el camp i amb el color de l'avis i no el del refus. La diferencia amb «.error-camp» no es decorativa: un refus diu que aixo no es podra fer, i un avis diu que potser no es el que es vol. Pintar-los igual faria que qui opera no els pogues distingir, i el segon es el corrent (docs/22 § Estats). */ .camp .avis-camp { display: block; margin-top: 0.25rem; font-size: 0.78rem; line-height: 1.35; color: var(--color-sf-warning); } /* ELS CARÀCTERS QUE LA LLETRA DEL DOCUMENT NO PORTA (#359). CADA UN DINS D'UNA CAIXA PRÒPIA, i no en una llista separada per comes: la meitat d'ells són invisibles o amplada zero, i enmig d'una frase no es podria dir ni quants n'hi ha ni on s'acaba cadascun. La caixa és el que els fa comptables. Lletra monoespaiada perquè és un caràcter i no una paraula, i el color del text normal —no el de l'avís— perquè el que s'hi ha de llegir és el caràcter. */ .camp .caracters-sense-dibuix { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin-left: 0.25rem; vertical-align: middle; } .camp .caracters-sense-dibuix code { min-width: 1.25rem; padding: 0 0.25rem; border: 1px solid var(--color-sf-border); border-radius: var(--radi-control); font-family: var(--lletra-mono); text-align: center; color: var(--color-sf-content-text-color); background: var(--color-sf-content-bg-color-alt1); } /* UN CAMP QUE VA SOL NO S'HA D'ESTIRAR FINS A L'ALTRA PUNTA. Es el defecte que mes es veia a les tres pantalles de facturacio: un camp fora de «.camps» —o dins d'un «.camps» amb un sol fill, que amb «auto-fit» se'n du la pista sencera— feia 1.176 px al costat de veïns de 368. Un desplegable de serie o una casella de si o no de mil dos-cents pixels no es mes facil d'omplir; nomes fa que la pantalla no sembli composta. L'amplada es la d'una columna de «.camps» a 1440 (368 px), arrodonida. */ .camp-curt { max-width: 24rem; /* El mateix que «.camps»: un camp sol que va davant d'una graella li queda enganxat, i el text d'ajuda acaba tocant la banda de la capcalera. */ margin-bottom: 1rem; } /* UNA NOTA MASSA LLARGA PER CABRE DINS DEL CAMP VA A SOTA, PERO CONTINUA SENT D'ELL. El marge d'una rima de «.camp-curt» mes el «margin-top» d'«.ajuda-estat» deixaven la nota mes a prop del control seguent que del camp que explica: a la fitxa de l'article es llegia com si el recarrec d'equivalencia fos una explicacio de la casella «Actiu», que ve just despres. Es va veure amb una captura i cap assercio no ho hauria dit. El marge inferior passa de dalt a baix: el camp i la seva nota son una cosa sola, i l'aire va despres. */ .camp-curt:has(+ .ajuda-estat) { margin-bottom: 0; } .camp-curt + .ajuda-estat { margin-top: 0.25rem; margin-bottom: 1rem; } /* I un camp de text llarg val el que dues columnes. La descripcio de l'operacio va al registre, te 500 caracters i es una area de text: en una columna de 368 px se'n veurien tres ratlles i mitja. Es la mida que ja fa servir «.prova-correu». */ .camp-ample { max-width: 46rem; margin-bottom: 1rem; } /* Un formulari de dos o tres camps sense cap graella al davant. Acotat, els camps es reparteixen en dues columnes i el peu d'accions queda sota el formulari i no a l'altra punta de la pantalla. NO val per a la pantalla d'emissio: alli qualsevol «max-width» li prendria amplada a la graella de linies, que es el que va costar de tancar la #33. */ .bloc-estret { max-width: 46rem; } /* EL PEU D'ACCIONS D'UN FORMULARI, A LA DRETA. Al mockup («.peu-accions», :1095) el que tanca el formulari va arrambat a la dreta, el secundari primer i el principal l'ultim: es on acaba de llegir qui ha baixat omplint camps. Aqui els botons principals vivien solts a l'esquerra, amb la mida del tema, penjant del final de la pagina. El sentit de lectura no es cap gust: el principal es l'ultim que es troba tabulant i l'ultim que es troba mirant. */ .peu-accions { display: flex; /* I EMBOLICA, QUE SI NO VESSA CAP A L'ESQUERRA (#139). Amb «nowrap» —el valor per defecte— i «justify-content: flex-end», el que no cap NO se'n va per la dreta: se'n va per l'inici, que amb aquesta alineacio es l'ESQUERRA. A 390 px el peu de «/factures/{id}» porta tres vies i el primer boto comencava a −31 px: es llegia «a'n una rectificativa». I NO EL VEIA CAP PROVA, ni la de la pagina ni la de la fitxa: «scrollWidth» nomes mesura fins on arriba el contingut cap a la DRETA, de manera que el que se'n va per valors negatius de «x» no hi surt. Com que la pagina no es desplaca, tampoc no es podia arrossegar per llegir-lo: el text simplement no hi era. Qui ho vigila ara es «CapControlNoSurtDeLaPantalla», que mira el rect de cada boto i enllac. Es la mateixa declaracio que «.accions-graella» ja portava quinze linies mes avall pel mateix motiu, i les dues formes convivien sense que res ho digues. El que NO es fa aqui es apilar-los a tota amplada: aixo seria una decisio de disseny que docs/22 no ha pres. */ flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6rem; margin-top: 1.5rem; } /* El boto que afegeix una fila a una taula de linies. Va sota la seva graella i a l'esquerra —no es cap accio de tancament, es una accio de la taula—, i al mockup (:1870) es un «.bt» com tots els altres. */ .accions-graella { display: flex; /* Des que hi ha l'alta rapida d'article al costat d'«Afegeix una linia», la barra pot portar dos botons i el segon, amb el cataleg buit, porta text llarg: sense «wrap», a 390 px se n'anava per fora i la pagina es desplacava de costat, que es el que «CapPantallaNoEsDesplacaDeCostat» canta. */ flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } /* ELS TOTALS, A LA DRETA I SOTA LA GRAELLA. Es el bloc que qui factura mira l'ultim i el primer que es va veure que no s'assemblava al mockup, on «.totals» (:1056) es un bloc compacte de 270 px arrambat a la dreta, sota l'ultima columna d'imports. Aqui hi havia «justify-content: start» i cap amplada: la xifra que tanca la factura queia a l'altra punta de la pantalla que la columna de la quota, i les files es dibuixaven totes iguals. VAN SOTA I NO A UN RAIL LATERAL. La graella de linies no pot perdre ni un pixel d'amplada —ni per un «max-width» al formulari ni per una columna lateral—, que es el que va costar de tancar la #33. El que es mou es nomes aquest bloc. */ .totals { width: min(24rem, 100%); margin-left: auto; /* La nota de sota quedava tocant la franja de l'avis irreversible. */ margin-bottom: 1.25rem; } .totals dl { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1.5rem; margin: 0.5rem 0 0; font-size: 0.85rem; } /* El retol pesa MENYS que la xifra, no mes. Anava a 500 amb les xifres a pes normal, de manera que a cada fila el que cridava era la paraula i no l'import. Al mockup el retol es gris i de pes normal («.totals .et»). */ .totals dt { font-weight: 400; color: var(--color-sf-content-text-color-alt2); } /* Xifres de la mateixa amplada i alineades a la dreta: son per comparar-les amb les de la factura, no per llegir-les com un text. */ .totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; } /* La xifra que tanca el bloc: filet a sobre i mes cos que la resta, que es el «.fort» del mockup. Sense aixo, l'import total es dibuixava exactament igual que la base imposable —14 px i pes normal— i no hi havia res que digues on s'acaba de sumar. */ .totals .total-fort { padding-top: 0.35rem; margin-top: 0.15rem; border-top: 1px solid var(--color-sf-border); font-size: 1.02rem; font-weight: 700; color: var(--color-sf-content-text-color); } /* I quan hi ha retencions o suplerts, la fila que de veritat importa es aquesta i no la d'abans: l'import total es el del registre i del QR i no es pot tocar (FAQs §20), pero el que l'empresa cobra es aixo. ⚠️ AIXO NOMES FIXAVA EL COS, I NO N'HI HAVIA PROU. La regla depenia que l'element portes TAMBE «.total-fort», i la fitxa d'un document preparatori nomes hi posava «.total-a-pagar»: la xifra mes gran de la pantalla sortia amb pes 400, sense filet i amb el retol en gris —mes gran que les altres i alhora mes fluixa—. Cap error enlloc, que es el simptoma de sempre d'aquesta capa. Ara la classe es basta sola i el cos es l'unic que hi afegeix. Va DESPRES de «.total-fort» a proposit: comparteixen especificitat i li ha de guanyar el cos. */ .totals .total-a-pagar { padding-top: 0.35rem; margin-top: 0.15rem; border-top: 1px solid var(--color-sf-border); font-size: 1.15rem; font-weight: 700; color: var(--color-sf-content-text-color); } /* La nota que separa els dos totals, dins del bloc i no a tota l'amplada: parla d'aquestes xifres i no de la pantalla. */ .totals small:where(:not([hidden])) { display: block; margin-top: 0.6rem; color: var(--color-sf-content-text-color-alt2); } /* EL REFUS DEL NIF, DINS DE LA CEL·LA DE LA GRAELLA. «.error-camp» esta acotat a «.camp» i una cel·la de graella no n'es cap, de manera que sense aixo el text hi seria i es veuria com el text del voltant: ni vermell, ni partit, i sense que res ho digues. Cal tornar-li el partit de línia: «.e-rowcell» va amb «white-space: nowrap» i «overflow: hidden», i alla dins una frase no es parteix, es talla —el mateix que ja li va passar a la segona marca sota el numero de factura—. VAL PER A TOTES LES GRAELLES amb camps oberts que refusen alguna cosa: les dues de la fitxa d'un document preparatori —les factures rectificades i les simplificades substituides; els destinataris són una col·lecció des de l'onada 4— i el cataleg de tipus de descompte; i, des de la #567, la graella de tria d'un plafó («.graella-tria»: la quantitat a zero d'una línia marcada). Una regla sola per a cadascuna serien refusos que es podrien veure diferents sense que ningu ho hagues decidit. ⚠️ EL SUFIX «-document» NO ES DECORACIO, i aixo ja va mossegar una vegada. Quan la pantalla de rectificativa existia, aqui hi havia «.graella-destinataris» i «.graella-rectificades» sense sufix —les seves— i les de la fitxa del document es deien igual amb «-document» al darrere: no hi encaixaven, el refus del NIF hi era, es veia del color del text del voltant i la cel·la el tallava a mig mot, SENSE CAP ERROR ENLLOC. Es exactament la familia de docs/21. La #293 ha esborrat aquella pantalla i, amb ella, els dos selectors sense sufix: qui estreni una graella amb camps oberts, que entri aqui. ⚠️ I «.graella-descomptes» HI ES DES DEL PRIMER DIA, no despres. El cataleg de tipus de descompte refusa per camp a tres columnes —el nom, el moment i la xifra— i, sense entrar aqui, els tres refusos es veurien del color del text del voltant i tallats a mig mot. Es la mateixa familia i es va llegir abans d'escriure-la. ⚠️ DES DE LA #823, EL REFÚS QUE DIBUIXA «RefusDeCamp» NO HA D'ENTRAR AQUÍ: el cobreix la regla «[data-refus-de]» del sistema de fitxes, on sigui. Els terminis d'una forma de pagament, els comptadors d'una sèrie i el catàleg de tipus impositius hi van entrar durant la #823 i en van sortir a la revisió final; els descomptes s'hi queden pel seu historial, amb els mateixos valors. Aquesta llista és per als refusos escrits a mà. */ .graella-substituides-document .error-camp, .graella-rectificades-document .error-camp, .graella-descomptes .error-camp, .graella-tria .error-camp, .taula-venciments-document .error-camp { display: block; margin-top: 0.25rem; font-size: 0.78rem; line-height: 1.35; white-space: normal; color: var(--color-sf-danger); } /* I EL REFUS NO POT MOURE ELS ALTRES CAMPS DE LA SEVA FILA. Una cel·la de graella va centrada verticalment. Amb un refus a dins la cel·la creix —de 59 px a 130 a la de les rectificades, quatre ratlles a 1.440 px— i, centrats, els altres tres controls de la MATEIXA fila baixaven 36 px: qui esta corregint el NIF veu com el numero, la data i el boto se li'n van a sota, i si despres tabula cap al numero, el camp ja no es on era. Es el mateix defecte que «docs/22» ja nomena per als formularis —«les caselles li ballen mentre les marca»— i aqui no cal cap decisio nova: el refus continua dins de la cel·la i creix cap avall, i el que canvia es que els veïns es queden quiets. Amb la fila d'una sola ratlla no es nota res, perque el control ja hi ocupa gairebe tota l'alçada. Mesurat amb el navegador: sense aixo, tops = 830 | 866 | 866 | 865; amb aixo, 783 | 783 | 783 | 781. Ho vigila «ElRefusNoMouElsVeinsDeLaSevaFila». Val per a les mateixes graelles que la regla de sobre i pel mateix motiu, i el sufix «-document» hi importa igual. I també per a les que no refusen però on alguna cosa creix sota un control: (#765) els dies d'un termini, amb l'avís d'un numèric sense decimals. */ .graella-substituides-document .e-rowcell, .graella-rectificades-document .e-rowcell, .graella-tria .e-rowcell, .graella-terminis .e-rowcell { vertical-align: top; } /* ELS SET CAMPS DEL DOMICILI DINS D'UNA CEL·LA: JA NO HI SON, I EL QUE VA COSTAR SI QUE VAL LA PENA DEIXAR ESCRIT. Aqui hi havia tres regles per a «.graella-destinataris» —sense sufix, o sigui la de la pantalla de rectificativa, que la #293 ha esborrat— que feien cabre el formulari del domicili dins de la cel·la del destinatari. Avui el domicili d'un document preparatori s'edita a la seva propia pagina i a la cel·la nomes s'hi ensenya («.cel-domicili», aqui sota), de manera que aquelles regles no tenien cap element a qui aplicar-se. Qui torni a posar un «.camps» dins d'un «.e-rowcell» necessitara les dues coses que deien, i cap de les dues es obvia: «grid-template-columns: minmax(0, 1fr)» —amb «repeat(auto-fit, minmax(18rem, 1fr))» la pista continua valent 18 rem com a MINIM i el que sobreix surt de la cel·la, que fa 340 px— i «white-space: normal» a les ajudes i al retol del bloc, perque «.e-rowcell» va amb «nowrap» i «overflow: hidden» i alla dins una frase sencera no es parteix: ES TALLA a mig mot, sense cap error enlloc (docs/21). */ /* EL CONTEXT D'UNA VISTA QUE PENJA D'UN DOCUMENT (onada 4, D8): «3 de 5 · Client SA» sota l'«h1» de la línia i del destinatari. És composició de pàgina i no cap peça: en secundari, a la mida d'una ajuda, enganxat al títol, i cap color escrit (el gris de les ajudes del tema). */ .context-document { margin: -0.5rem 0 1rem; font-size: 0.9rem; color: var(--color-sf-content-text-color-alt2); } /* UN DOCUMENT SENSE CAP LÍNIA (onada 4): una frase neutra i «Afegeix una línia» just a sota. Era un «SfMessage» d'informació, i un fet no és cap avís. */ .linies-buides { margin: 0 0 0.75rem; color: var(--color-sf-content-text-color-alt2); } /* La nota que diu per que no hi ha columna d'article, i la que diu que el domicili es congela. Son explicacions sota la graella, no avisos: grises i separades de la taula, com les ajudes dels camps. */ .nota-articles, .nota-adreces { margin: 0.5rem 0 0; color: var(--color-sf-content-text-color-alt2); } /* ---- L'alta rapida d'una fitxa de cataleg, des d'una factura a mig fer ---- */ /* EL CAMP I EL BOTO QUE HI DONA D'ALTA, A LA MATEIXA FILA. «min-width: 0» AL DESPLEGABLE NO ES CAP DETALL: el minim per defecte d'un element de flex es el seu contingut, de manera que un desplegable amb un nom de client llarg no s'encongeix, empeny el boto i s'endu la pagina de costat. Es el mateix motiu del «minmax(0, 1fr)» de les graelles (docs/22). «stretch» perque el boto faci exactament l'alcada del camp: amb «center», un boto de 32 px al costat d'un desplegable de 34 queda mig pixel amunt i es veu. */ .camp-amb-alta { display: flex; align-items: stretch; gap: 0.5rem; } .camp-amb-alta > .e-ddl, .camp-amb-alta > .e-input-group { flex: 1 1 auto; min-width: 0; } /* El boto no s'ha d'encongir mai: es una icona i no te res per cedir. */ .camp-amb-alta > .e-btn { flex: 0 0 auto; } /* AMB EL CATALEG BUIT, EL BOTO OCUPA LA CEL·LA SENCERA. Alli on hi hauria el desplegable hi ha el boto amb text, i el retol de sobre s'hi queda: aixi el camp no salta de lloc el dia que el desplegable neixi. */ .camp-buit > .e-btn { flex: 1 1 auto; justify-content: center; } /* «JA HI HAVIA UN CLIENT AMB AQUEST NIF», SOTA EL CAMP. Es una regio activa que es dibuixa SEMPRE i que gairebe sempre es buida: sense text no ocupa res —«display: block» amb el fill absent no dibuixa cap linia— i per tant no empeny res mentre s'omple el formulari. El color es el de les ajudes: es una nota i no cap avis. ⚠️ I «.nota-tria-cataleg» VA A LA MATEIXA REGLA i no a una de propia: es la germana exacta —una regio activa que neix buida i diu que la via rapida ha escrit als camps— i dues regles separades serien dues notes que es podrien veure diferents sense que ningu ho hagues decidit. */ .nota-alta-rapida, .nota-tria-cataleg { display: block; color: var(--color-sf-content-text-color-alt2); } /* ========================================================================== LES SÈRIES PER DEFECTE (#521) ========================================================================== */ /* D'ON SURT LA SÈRIE, SOTA EL CAMP I AL RESUM DE LA CONFIRMACIÓ: «Del client», «De l'empresa», «Triada a mà». És l'estat d'ara i no cap avís, i per això va amb el color de les ajudes i mai amb un «.estat-*»: el groc diria que hi ha feina i el verd, que l'AEAT ho ha acceptat (docs/22, «La procedència d'una fila es diu amb paraules»). Sense text no ocupa res. */ .procedencia-serie, .procedencia-de-cela { display: block; font-size: 0.8rem; color: var(--color-sf-content-text-color-alt2); } /* LA NOTA DE PROPOSAR SENSE TREPITJAR, EN LÍNIA SOTA EL CAMP. És una regió que hi és sempre i neix buida —«display: block» amb el fill absent no dibuixa cap línia—, i dins de la casella: quan neix fa la fila més alta, però no mou de columna cap germà. El text va amb la lletra del camp i no del gris de les ajudes: aquí hi ha una pregunta per respondre. */ .nota-proposta { display: block; } .nota-proposta p { margin: 0.5rem 0 0.25rem; font-size: 0.875rem; line-height: 1.4; } /* ELS DOS BOTONS, CAP DE PRIMARI: el programa no sap quina volia qui ho llegeix (el precedent és la qualificada amb client). */ .nota-proposta .accions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.25rem; } /* ELS AVISOS DE LA ZONA DE LES ACCIONS IMMEDIATES OCUPEN LA FILA SENCERA: la zona és «flex» en fila, i un avís al costat d'un botó es llegiria com el seu rètol. Des de l'onada 1 les accions les posa «ZonaImmediata» en la seva llista, que ja fa la fila sencera. */ .zona-immediata > .avis-accio { flex: 1 1 100%; margin: 0; } /* ELS AVISOS QUE REBEN EL FOCUS («ZonaImmediata.IdAvisos», onada 3, #539): la fitxa d'una factura hi porta la vista i el focus quan «Anul·la» o «Torna-la a la cua» acaben, perquè el botó premut desapareix. Una columna de la fila sencera; buida —totes les «AvisAccio» de dins són «:empty»— no pot desaparèixer (són regions actives que han de ser-hi abans del text), i per això torna el «gap» de la zona amb un marge negatiu en comptes d'amagar-se. El focus no dibuixa cap anell: el criteri dels destins de la barra (vegeu «.zona-resposta»). */ .zona-immediata-avisos { display: flex; flex: 1 1 100%; flex-direction: column; gap: var(--espai-entre-avisos); } /* L'AIRE ENTRE AVISOS EL FA EL «gap» (vegeu «L'AIRE D'UN AVÍS D'ACCIÓ» al sistema de fitxes): en una columna «flex» els marges no es fonen, i se sumarien. */ .zona-immediata-avisos > .avis-accio { margin: 0; } .zona-immediata-avisos:not(:has(> :not(:empty))) { margin-bottom: -0.75rem; } .zona-immediata-avisos:focus { outline: none; } /* LES FAMÍLIES DE LES QUALS UNA SÈRIE ÉS LA PER DEFECTE, SOTA LA INSÍGNIA «PER DEFECTE» DEL LLISTAT (#521). La insígnia és curta i no es talla mai; les famílies són text descriptiu que baixa de línia dins de la cel·la (L3 de docs/22), amb el color de les ajudes. */ .families-per-defecte { display: block; font-size: 0.74rem; line-height: 1.3; white-space: normal; color: var(--color-sf-content-text-color-alt2); } /* EL MOTIU QUE OCUPA EL LLOC D'UN CONTROL, DINS D'UNA CASELLA: el client d'una F2 o d'una R5. Amb el coixí d'un «.valor-fix» i sense el seu pes: no és cap valor, és per què no n'hi ha. La línia fa l'alçada del control que substitueix, i la casella no creix quan es tria el tipus (docs/22, F2). */ .motiu-casella { margin: 0; padding: 0.3rem 0; } /* ========================================================================== ELS SELECTORS DEL DOCUMENT (#436): client i article ========================================================================== */ /* LA LUPA OCUPA EL LLOC DE LA FLETXA DEL DESPLEGABLE, que s'amaga. La fletxa obriria la llista sencera, i aquí no n'hi ha cap: la llista és la resposta del que s'ha escrit. La lupa obre la cerca ampliada (F2). Va enganxada a la dreta del camp, per damunt de l'embolcall de Syncfusion, i per això l'embolcall nostre és el que posiciona. */ .selector-cataleg { position: relative; min-width: 0; } .selector-cataleg.amb-lupa .e-input-group .e-ddl-icon { display: none; } .selector-cataleg.amb-lupa .e-input-group input.e-input { padding-right: 2.25rem; } .selector-lupa { position: absolute; top: 0; right: 0; bottom: 0; width: 2.25rem; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--color-sf-content-text-color-alt2); cursor: pointer; } .selector-lupa:hover, .selector-lupa:focus-visible { color: var(--color-sf-primary); } /* EL XIP DEL DESACTIVAT, AL RÈTOL. Neutre: no ha fallat res, i el que diu ho diu amb text. */ .xip-desactivat { flex: none; padding: 0 0.45rem; border: 1px solid var(--color-sf-border-light); border-radius: 999px; font-size: 0.75rem; line-height: 1.4; color: var(--color-sf-content-text-color-alt2); } /* UNA FILA DE LA LLISTA, EN DUES LÍNIES. La fila la dibuixa Syncfusion amb una alçada d'una línia; «:has» la deixa créixer només quan porta una fila nostra, i no toca cap altre desplegable de l'aplicació. 44 px a l'escriptori: hi caben vuit files en els 22 rem de la finestreta. */ .e-dropdownbase .e-list-item:has(> .selector-opcio) { height: auto; min-height: 44px; line-height: normal; padding-top: 0.2rem; padding-bottom: 0.2rem; } .selector-opcio { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .selector-fila { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.3; } .selector-dalt { display: flex; gap: 0.5rem; min-width: 0; } /* El nom no es parteix mai en dues línies: amb punts suspensius. */ .selector-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 500; } /* La segona línia, atenuada: el mateix to que el detall del cercador de la capçalera. */ .selector-sota { display: flex; gap: 0.35rem; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 0.75rem; color: var(--color-sf-content-text-color-alt2); } .selector-sense { font-style: italic; } /* A L'ARTICLE, EL CODI EN UNA COLUMNA FIXA I LA SEGONA LÍNIA ALINEADA AMB LA DESCRIPCIÓ. Sense codi la columna queda buida, i les descripcions de la llista comencen totes al mateix lloc. */ .selector-fila-article .selector-codi { flex: 0 0 5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; color: var(--color-sf-content-text-color-alt2); } /* EN «rem» I NO EN «ch»: el codi i la segona línia porten mides de lletra diferents, i «7ch» feia dues amplades diferents —la segona línia quedava deu píxels a l'esquerra de la descripció—. 5 rem hi fan cabre set o vuit majúscules, que un «ch» (l'amplada del zero) no aguanta. */ .selector-fila-article .selector-sota { padding-left: calc(5rem + 0.5rem); } .xifres { font-variant-numeric: tabular-nums; } .atenuat { color: var(--color-sf-content-text-color-alt2); } /* LA MARCA DE LA FILA TRIADA: decoració, «aria-hidden», i el nom de la fila ja ho diu. */ .selector-marca { flex: none; margin-left: auto; color: var(--color-sf-primary); } /* ELS ESTATS SENSE FILES, i el peu: «n'hi ha més», «Mostra'ls tots · F2» i «+ Crea». El peu no és cap opció de la llista: les fletxes no hi arriben. */ .selector-sense-files { padding: 0.6rem 0.9rem; white-space: normal; text-align: left; } .selector-sense-files p { margin: 0; } .selector-sense-files .ajuda-cerca { color: var(--color-sf-content-text-color-alt2); } /* ⚠️ EL PEU VA A SOTA DE LES VUIT FILES, I NO DINS DELS 22 REM. «PopupHeight» Syncfusion l'escriu com a «max-height» en línia a la finestreta, i vuit files de 44 px ja l'omplen: el peu hi quedava a fora, pintat damunt dels camps de sota i sense fons (vist en una captura, 23/09/2026). La llista es desplaça amb la seva pròpia alçada, i la finestreta creix el que faci el peu. */ .e-ddl.e-popup.selector-cataleg-finestreta { max-height: none !important; } .selector-peu { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; padding: 0.5rem 0.75rem; border-top: 1px solid var(--color-sf-border-light); } .selector-mes { flex: 1 1 100%; margin: 0; font-size: 0.75rem; color: var(--color-sf-content-text-color-alt2); } /* LA CERCA AMPLIADA (F2): 60 rem com a molt i el 80 % de la finestra a l'escriptori; la graella s'endú el que sobra i es desplaça per dins. */ .e-dialog.cerca-ampliada { max-width: calc(100vw - 1.5rem); } .cerca-ampliada-cos { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; min-height: 0; } .cerca-ampliada-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .cerca-ampliada-filtres .casella-cerca { flex: 1 1 18rem; } .cerca-ampliada-familia { flex: 0 1 16rem; min-width: 0; } .cerca-ampliada-cos > .ajuda-cerca { margin: 0; font-size: 0.8rem; color: var(--color-sf-content-text-color-alt2); } .cerca-ampliada-graella { flex: 1 1 auto; min-height: 12rem; overflow: auto; } .cerca-ampliada-paginacio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; } .cerca-ampliada-paginacio .paginacio { margin: 0; } .cerca-ampliada-cap { margin: 0.5rem 0; color: var(--color-sf-content-text-color-alt2); } /* LA VIA RAPIDA CAP AL CATALEG DE DESCOMPTES, DAMUNT DE «.camps». VA FORA DE LA REIXA «auto-fit» I NO A DINS, i no es cap detall de col·locacio: es una peça que NEIX I MOR —la nota apareix segons el cataleg i el boto pot no dibuixar-se—, i dins d'«auto-fit» una cosa que neix al mig empeny de columna tot el que te a sota. Es el mateix motiu pel qual el camp del valor del descompte va al final del bloc, i cap asserció no ho veu. L'ORDRE ES EL DEL TREBALL: primer la via rapida, despres la parella manual on aterra. */ .tria-del-cataleg { margin-bottom: 0.75rem; } /* EL MOTIU PEL QUAL UN TIPUS NO S'OFEREIX. Es una nota i no cap avis: quan es llegeix no ha fallat res, i el vermell o el groc aqui serien la vora de benvinguda que la regla 7 de docs/22 prohibeix. El color es el de les ajudes de camp i la mida, la mateixa. ACOTADA com «.camp-curt»: una frase a tota l'amplada de la pantalla no es mes facil de llegir, i aquesta en porta dues mes l'enllaç. */ .tria-del-cataleg .motiu-tria-cataleg { max-width: 42rem; margin: 0.4rem 0 0; font-size: 0.82rem; line-height: 1.4; color: var(--color-sf-content-text-color-alt2); } /* Les dues frases i l'enllaç van seguits i separats per un espai: sense aixo, tres elements en linia s'ajuntarien sense cap separacio. */ .tria-del-cataleg .motiu-tria-cataleg > span, .tria-del-cataleg .motiu-tria-cataleg > a { margin-right: 0.3rem; } /* EL COS DEL DIALEG. Es el «div» nostre de dins del «Content»: el «CssClass» de l'«SfDialog» cau a tres elements alhora i no serveix per penjar-hi res (docs/21). Els localitzadors de les proves van aqui. */ .alta-rapida-cos .camp + .camp { margin-top: 0.75rem; } /* ⚠️ PERÒ NO DINS D'UNA GRAELLA (#500). La regla de sobre és per a una PILA de camps; dins d'una «.camps» l'aire el posa el «gap», i aquest marge baixava 12 px cada casella que no fos la primera de la graella, de manera que a la primera fila de cada grup la columna dreta quedava més avall que l'esquerra. Tres classes guanyen les dues de sobre per especificitat, i no per ordre. */ .alta-rapida-cos .camps > .camp + .camp { margin-top: 0; } /* La proposta del peu i, als articles, la linia de destinacio. Text seguit i gris, com les ajudes dels camps; no son cap avis i no han de portar caixa. */ .alta-rapida-proposta, .alta-rapida-desti { margin: 0.75rem 0 0; color: var(--color-sf-content-text-color-alt2); } /* Els errors de dins del dialeg no necessiten cap regla: «AvisAccio» dibuixa la regio sempre i «.avis-accio:empty» ja l'amaga quan no diu res. */ /* ═══ EL SELECTOR DE FACTURES EMESES (#126) ═══ EL COS ES EL «div» NOSTRE, com a l'alta rapida i pel mateix motiu: el «CssClass» d'un «SfDialog» cau a TRES elements alhora i no serveix per penjar-hi cap localitzador. L'ALÇADA ES ACOTADA I EL QUE ES DESPLAÇA ES EL COS. Amb vint-i-cinc files, un dialeg que creixes amb la llista sortiria de la finestra i el peu —que es on hi ha «Afegeix» i «Deixa-ho córrer»— quedaria fora de la vista. */ .tria-de-factures-cos { max-height: min(60vh, 30rem); overflow-y: auto; } /* Els filtres, en xips, com a la barra de comandes d'un llistat: diuen el que valen i no gasten amplada de graella. */ .tria-de-factures-cos .tria-filtres { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; } /* La consequencia de la tria, sota la llista: es una nota i no cap avis, i per tant va del color de les ajudes i sense caixa. */ .tria-de-factures-cos .tria-consequencia { margin: 0.75rem 0 0; color: var(--color-sf-content-text-color-alt2); } /* La marca de «Ja hi és», al costat del numero. Es un estat i el text el diu sencer: el color nomes acompanya (docs/22). */ .tria-de-factures-cos .estat { margin-left: 0.4rem; } /* EL PEU DE LA FINESTRETA DEL DESPLEGABLE D'ARTICLE. Es el «lookup footer» de Dynamics 365: una fila fixa al peu de la llista d'opcions que dona d'alta el que no s'hi ha trobat. No gasta ni un pixel de columna, que es l'argument que el decideix: la graella de linies ja sobreix a 1280 (#85). NO PENJA DE «.contingut», i no es cap descuit: la finestreta d'un «SfDropDownList» la penja Syncfusion del «body», de manera que qualsevol regla escrita sota el contingut de la pagina no l'hi arribaria mai —i, com sempre en aquesta capa, sense donar cap error. NO ES CAP «e-btn»: no es una comanda de la pantalla sino una fila mes de la llista, i vestir-la de boto la faria competir amb les opcions. La ratlla de sobre es la que la separa d'elles. */ .e-ddl.e-popup .e-ddl-footer { padding: 0; border-top: 1px solid var(--color-sf-border-light); } .peu-lookup { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; border: 0; background: none; /* El color del primari: es l'unica cosa que hi ha a la finestreta que fa una altra cosa que triar, i el text sol no ho diria. */ color: var(--color-sf-primary); font: inherit; text-align: left; cursor: pointer; } .peu-lookup:hover, .peu-lookup:focus-visible { background: var(--color-sf-content-bg-color-hover); } /* ---- Graelles ---- */ /* La capcalera de la graella la pinta el tema del color del contingut, o sigui que els noms de les columnes suren sobre el mateix blanc que les dades i nomes se'n separen per una ratlla. Amb la superficie alternativa torna a ser una banda, que es el que la fa de capcalera. Va penjada de «.contingut» i no del «.e-grid» pelat per dos motius: son tres classes contra les dues del tema i per tant guanya sense dependre de l'ordre dels fulls, i aixi no toca res del que Syncfusion dibuixi fora de la pagina —els calendaris i els desplegables, que tambe porten taules. El gris es «alt2» i no «alt1» perque «alt1» es el del menu, i tots dos junts sobre blanc no es distingeixen: la banda quedava dibuixada pero no es veia. Al mockup son dos grisos diferents pel mateix motiu (--sf-bg-1 per al xassis i --sf-bg-2 per a la capcalera de la taula). */ .contingut .e-grid .e-gridheader, .contingut .e-grid .e-headercell, .contingut .e-grid .e-detailheadercell { background-color: var(--color-sf-content-bg-color-alt2); } /* Els noms de les columnes, mes petits que les dades: es llegeixen un cop i despres nomes es recorren les files. */ .contingut .e-grid .e-headercell, .contingut .e-grid .e-headercelldiv, .contingut .e-grid .e-headertext { font-size: 12px; } /* La densitat dels llistats. No va a «.e-rowcell» a seques: les graelles dels formularis porten els camps sempre oberts i tenen un altre problema d'alcada. Aixo es nomes per a les graelles que serveixen per recorrer files, i la classe la porta l'embolcall, perque el «CssClass» de l'SfGrid no arriba a ser una classe del document. Amb el que dona el tema —14 px de lletra i 12 de coixi amunt i avall— una fila fa 45 px, i en una pantalla de portatil s'hi veuen onze factures. Amb aixo en fa 34 i se n'hi veuen quinze. */ .graella-densa .e-grid .e-rowcell { padding: 7px 11px; font-size: 13px; } .graella-densa .e-grid .e-headercell, .graella-densa .e-grid .e-detailheadercell { height: 34px; padding: 6px 11px; } /* ELS LLISTATS DE CATALEG: UNA SOLA ANCORA PER FILA (#499). Clients, articles, formes de pagament, series i usuaris —i els usuaris d'una empresa del SaaS— porten «.graella-lectura» a l'embolcall, que es la classe comuna: el «CssClass» de l'SfGrid no arriba a ser una classe del document. LES CEL·LES S'ALINEEN PER LA PRIMERA LINIA (L6 de docs/22). Les cel·les d'aquests llistats porten dues coses una sobre l'altra —el nom i «Desactivat», el preu i la unitat, l'estat i la marca de proves— i el centrat vertical del tema deixava el text d'una columna a mitja alcada de la del costat: la fila semblava desquadrada. I UN SOL INTERLINEAT PER A TOTES LES CEL·LES. Alinear per dalt no n'hi ha prou: el tema dona 20 px de «line-height» a «.e-rowcell», i les cel·les que parteixen en dues linies en duien 1,35 de pròpia. Amb 13 px de lletra, la primera linia d'una quedava 2 px mes avall que la de la veïna —just a la tolerancia de L6—. Aqui es fixa per a la cel·la sencera, i cap peça de dins no en porta cap de propia: el text de totes les columnes comença a la mateixa alcada. */ .graella-lectura .e-grid .e-rowcell { vertical-align: top; line-height: 1.35; } /* I les insignies tambe, que en porten 1,5 de propi: la d'una cel·la d'estat que en comença una —«Tancada», «Desactivat»— baixava gairebé un pixel. Com que 1,35 es un factor i no una mida, a la lletra petita de la insignia li toca una linia proporcional, i el text queda a la mateixa alcada. */ .graella-lectura .e-rowcell .estat, .graella-lectura .e-rowcell .insignia { line-height: inherit; } /* EL TEXT LLIURE D'UNA CEL·LA ES RETALLA AMB PUNTS SUSPENSIUS (L3 de docs/22, #502). El «td» del tema ja porta «text-overflow: ellipsis», però Syncfusion hi posa a dins un «div» de plantilla que és «clip»: el que desborda és el «div» i no el «td», i el text es tallava a mig mot. L'element que retalla ha de ser el que porta el text. */ .graella-lectura .text-retallat { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A la targeta del mòbil no hi ha columna que s'hagi de repartir l'amplada: el nom hi surt sencer, partit en línies, i no retallat. */ .graella-lectura .e-grid.e-row-responsive .text-retallat { white-space: normal; overflow-wrap: anywhere; } /* LA FLETXA DE DESPLEGAR LA FILA, A LA PRIMERA LÍNIA (L6 de docs/22, #502). La cel·la de desplegar no és cap «.e-rowcell» —és «.e-detailrowcollapse» o «.e-detailrowexpand»— i es quedava centrada: a les files amb marques sota el número, la fletxa baixava fins a 18 px per sota del número. A dalt, i amb la línia de la fletxa de la mateixa alçada que la del text de les cel·les (13 px × 1,35) i el mateix coixí de dalt (7 px, «.graella-densa»): el centre de la fletxa cau al centre de la primera línia. El selector porta «td» i «.e-gridcontent» perquè guanyi el del tema, que és de quatre classes amb els dos «:not()». */ .graella-lectura .e-grid .e-gridcontent td.e-detailrowcollapse, .graella-lectura .e-grid .e-gridcontent td.e-detailrowexpand { vertical-align: top; padding-top: 7px; padding-bottom: 0; } .graella-lectura .e-grid .e-gridcontent td.e-detailrowcollapse .e-icons, .graella-lectura .e-grid .e-gridcontent td.e-detailrowexpand .e-icons { display: inline-block; padding-top: 0; padding-bottom: 0; line-height: calc(13px * 1.35); } /* L'ANCORA DE LA FILA, L'UNIC ENLLAC A LA FITXA (L1 de docs/22). Sense subratllat dins de la graella —vint subratllats seguits son vint ratlles que no diuen res—, i amb subratllat en passar-hi per sobre i amb el focus del teclat, que es quan importa saber que s'hi pot anar. Es el retoc «accions discretes» de la direccio de docs/22. ⚠️ EL COLOR ES «primary-dark» I NO «primary», i es mesurat: en fosc el primari del tema (#6366f1) fa 3,97:1 sobre el fons de contingut (#111827), per sota del 4,5 que demana un text de 13 px. «primary-dark» es la variant que el tema dona per a text sobre el seu fons: #4338ca en clar (7,9:1 sobre blanc) i #818cf8 en fosc (5,9:1). No hi ha cap variable «link» al tema. La classe es de l'enllac i no de l'embolcall perque l'enllac ja es nostre: el que no ho es son la graella i la fila. */ a.ancora { color: var(--color-sf-primary-dark); text-decoration: none; } a.ancora:hover, a.ancora:focus-visible { text-decoration: underline; } /* I EL FOCUS DEL TECLAT PORTA L'ANELL DE TOTA L'APLICACIO, com el menu i la taula que es desplaça. Fins a la #509 el Tab no hi arribava mai —el feia seu la graella— i el subratllat sol no s'havia vist; ara que s'hi va d'àncora en àncora, una ratlla de 1 px sota un nom es massa poc per saber on s'es. Cap a fora i a 1 px: la cel·la te «overflow: hidden» i el retallaria mes enllà. */ a.ancora:focus-visible, .graella-documents a.nom-document:focus-visible { outline: 2px solid var(--color-sf-primary); outline-offset: 1px; } /* LA CEL·LA DE L'ANCORA: l'enllac a dalt i, a sota, el que en depen —la familia d'un article, «Desactivat» o «Retirada»—, cada cosa a la seva linia. «.e-rowcell» va amb «white-space: nowrap» i «overflow: hidden»: sense tornar-li el partit, el nom llarg d'un client no baixaria de linia —es tallaria a mig mot— i la insignia de sota quedaria fora. Amb «align-items: flex-start» la insignia no s'estira fins a l'altra punta de la cel·la. */ .graella-lectura .cel-ancora { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; white-space: normal; } /* EL CODI AL DAVANT DEL NOM, DINS DEL MATEIX ENLLAC (articles i formes de pagament). El codi es un identificador i NO ES TALLA MAI (L3): no parteix i no s'encongeix. Si amb el nom no hi caben a la mateixa linia, qui baixa es el nom, sencer, i parteix per paraules. */ .graella-lectura .ancora-amb-codi { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; max-width: 100%; } .graella-lectura .ancora-amb-codi .codi-ancora { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .graella-lectura .ancora-amb-codi .text-ancora { min-width: 0; overflow-wrap: normal; } /* LA NOTA SOTA UNA XIFRA («266,20 vençut», «4 factures no hi compten»; onada 5, /clients): text secundari que PARTEIX PER PARAULES dins de la cel·la, alineat a la dreta. Amb el «nowrap» de «.cel-xifra» una nota més ampla que la columna desbordava cap a l'esquerra i la cel·la la retallava: es perdia justament el número. Un desbordament a l'esquerra no compta a «scrollWidth»; ho vigila «CapTextDUnaCelaSurtDeLaCela», que mesura la caixa. */ .graella-lectura .cel-xifra .nota-xifra { max-width: 100%; font-size: 0.82rem; line-height: 1.3; color: var(--color-sf-content-text-color-alt2); text-align: right; white-space: normal; overflow-wrap: normal; } /* UNA XIFRA A LA DRETA I LA UNITAT A SOTA, EN TEXT SECUNDARI (L2 de docs/22). «10,15 ud» no es compara d'un cop d'ull amb «8,00 h»: enganxada, la unitat desquadrava la columna. L'alineacio la dona la columna («TextAlign.Right»). */ .graella-lectura .cel-xifra { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; } .graella-lectura .cel-xifra .unitat-xifra { font-size: 0.82rem; color: var(--color-sf-content-text-color-alt2); } /* UN DIALEG S'ACOTA PER LA FINESTRA, NO PEL QUE HI HA DARRERE. Syncfusion li calcula l'alçada maxima en obrir-lo i l'hi escriu a l'atribut «style»; la treu del contenidor, que es el «body». Amb una pantalla curta —quatre files de graella— el «body» fa 484 px i el dialeg es queda amb 465, de manera que el contingut es desplaça per dins i el que hi ha a baix DESAPAREIX SENSE CAP AVIS: a la confirmacio d'anul·lar, la linia que diu que el numero no es recupera. Ni el peu ni el titol es mouen, i per tant no hi ha res que faci sospitar que falta text. La finestra en feia 900. NO ES CAP DEFECTE D'AQUESTA PANTALLA sino de tots els dialegs: n'hi ha prou que el contingut passi de l'alçada de la pagina de sota, cosa que depen de quantes files hi hagi. Amb una pagina llarga, el mateix calcul dona el contrari —un dialeg mes alt que la pantalla, amb el peu fora de la vista—, i aquest acotament el tanca tambe. EL SEGON «!important» DE PANTALLA DEL FULL, i pel mateix motiu que el primer (veure la columna congelada en vertical): contra un valor escrit a l'atribut «style» no hi ha selector que valgui. Nomes puja el sostre; no fixa cap alçada, de manera que un dialeg petit continua sent petit. */ .e-dialog { max-height: calc(100vh - 3rem) !important; } /* LA CAPÇALERA D'UN DIÀLEG AMB LA NOSTRA CREUETA (#101, «CapcaleraDialeg»). El títol a l'esquerra, retallat amb punts si no hi cap —com feia el tema amb el «.e-dlg-header»—, i la creueta a l'extrem dret sense encongir-se. Les classes són d'elements nostres: el «div» i el «span» els dibuixa el component, i el botó és un «SfButton» amb «CssClass», que sí que arriba a ser una classe. Els colors els posa «e-flat» del tema. */ .capcalera-dialeg { display: flex; align-items: center; gap: 0.5rem; } .capcalera-dialeg .titol-dialeg { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .capcalera-dialeg .boto-tanca-dialeg { flex: 0 0 auto; } .resum-confirmacio { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 1rem 0; } .resum-confirmacio dt { font-weight: 600; } .resum-confirmacio dd { margin: 0; } /* UNA SEGONA LÍNIA DINS D'UN VALOR DEL RESUM (#533): «Tanca 2 venciments pendents de F 26 0031» sota la forma de pagament del diàleg «Expedeix». A sota i no al costat —el «.valor-subordinat» és en línia i «nowrap» per a les cel·les—, i amb salt de línia: és una frase, i el diàleg fa 30 rem. */ .resum-confirmacio dd .valor-subordinat { display: block; margin-top: 0.15rem; white-space: normal; } .resum-import { font-variant-numeric: tabular-nums; font-weight: 600; } /* LA DESCRIPCIÓ DE L'OPERACIÓ AL RESUM D'UNA CONFIRMACIÓ (#382). ÉS L'ÚNICA FILA DEL «dl» QUE POT PORTAR UN PARÀGRAF: en són fins a 500 caràcters, i la resta de files hi caben en una línia. Sense interlínia pròpia, tres línies de text dins d'una graella pensada per a valors curts es llegeixen atapeïdes. «overflow-wrap» PERQUÈ EL TEXT EL COMPON EL PROGRAMA amb noms de família que escriu qui manté el catàleg: una referència llarga sense cap espai eixamplaria la columna i, amb ella, el diàleg sencer. */ .resum-descripcio { line-height: 1.35; overflow-wrap: anywhere; } /* LA CASELLA QUE OBRE LA PORTA DE LA DESCRIPCIÓ, DINS DEL DIÀLEG D'EXPEDIR (#382). Va entre l'avís i el resum, i no és cap camp d'un formulari: només li cal la separació de sobre i de sota, que a «.camp» la posa el «.camps» que no hi és. */ .camp-revisa-descripcio { margin: 0.75rem 0; } /* EL DOMICILI DE CADA DESTINATARI, AL RESUM DE LA CONFIRMACIO. UNA LINIA PER DESTINATARI i cadascuna en un bloc: son adreces senceres i, en linia, la del segon comença on acaba la del primer i no se sap on s'acaba cap de les dues. EL NOM I LA DENOMINACIO NO PORTEN CAP SEPARADOR ESCRIT. Un «·» entre la denominacio i el carrer hauria de sortir d'algun lloc: escrit al marcatge seria text sense traduir i escrit amb «content» entraria al nom accessible del que l'envolta (docs/22, regla 4). Cadascun a la seva linia diu el mateix i es llegeix millor, que es com el sobre ho porta. */ .resum-domicili { display: block; line-height: 1.35; } .resum-domicili + .resum-domicili { margin-top: 0.5rem; } /* De qui es aquest domicili. Nomes es dibuixa amb mes d'un destinatari, i llavors es l'unica cosa que els separa. */ .resum-domicili .resum-domicili-qui { display: block; font-weight: 600; } /* Com se'n diu, de l'adreca: «domicili social», «magatzem de Reus». No es cap dada de la factura —no s'hi copia— i per aixo va mes fluixa que el domicili, que si que hi va. */ .resum-domicili .resum-domicili-adreca { display: block; color: var(--color-sf-content-text-color-alt2); } /* EL REPARTIMENT AL RESUM DE LA CONFIRMACIÓ (#366). Una línia per destinatari, com el domicili just a sobre: el que s'ha de veure abans de cremar el número és tot el que anirà al paper, i «i 2 més» no ho és. La xifra amb els dígits de la mateixa amplada, com la columna d'on surt. */ .resum-porcio { display: block; line-height: 1.35; } .resum-porcio .resum-porcio-part { font-variant-numeric: tabular-nums; } /* El tractament fiscal d'una linia, al seu detall. Els camps van en columnes i no un sota l'altre: son sis i tots curts, i apilats obligarien a fer roda per veure'n l'ultim just quan s'acaba d'obrir la fila per mirar-lo. */ .detall-linia { padding: 0.75rem 1rem; } .detall-linia .camps { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-bottom: 0; } /* La base i la quota de la linia, que tampoc no es teclegen. Van a dalt del detall i en dues columnes curtes: son el resultat del que hi ha a sota, i apilades amb els sis camps del tractament es llegirien com un camp mes. Els imports, amb xifres de la mateixa amplada i alineats a la dreta, com tots els altres de l'aplicacio: son per quadrar-los amb la factura. */ .imports-linia { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0.35rem 1.5rem; margin: 0 0 0.75rem; } .imports-linia dt { font-weight: 500; } .imports-linia dd { margin: 0; text-align: right; } /* ---- Fitxes ---- */ /* Una fitxa no ha d'ocupar tota l'amplada de la pantalla: un camp de NIF de nou caracters estirat fins a mil pixels no es mes facil d'omplir, es mes dificil de llegir. La mida surt de la linia de text comoda, no de la finestra. */ .fitxa-client, .fitxa-article, .fitxa-familia, .fitxa-forma-pagament, .fitxa-serie, .fitxa-usuari { max-width: 52rem; } .fitxa-client .accions, .fitxa-article .accions, .fitxa-familia .accions, .fitxa-forma-pagament .accions, .fitxa-serie .accions, .fitxa-usuari .accions { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem; } /* ESBORRAR VA A L'ALTRE EXTREM DE LA FILA, i no al costat de «Desa». Es l'unica accio de la fitxa que no es pot desfer, i les tres primeres —desar, cancel·lar— es prem sense mirar. Amb «margin-left: auto» se'n va a la dreta de tot: qui va a desar no hi pot caure a sobre pel cami. El color surt del tema («--color-sf-danger»; «--color-sf-error» no existeix, docs/21) i va nomes a la vora i a la lletra: un boto vermell ple competiria amb el primari, que es el que la fitxa vol que es premi. Dins del dialeg, en canvi, el boto ja es el primari i alla el ple si que li toca. */ .accio-esborra { margin-left: auto; border-color: var(--color-sf-danger); color: var(--color-sf-danger); } /* Dins del peu del dialeg de confirmacio no hi ha res mes a la dreta i el marge automatic no hi pinta res: alla els dos botons ja van junts. */ .confirma-esborrat .accio-esborra { margin-left: 0; } /* ---- Condicions de pagament ---- */ /* LA SUMA DELS PERCENTATGES, A LA VISTA MENTRE S'ESCRIU. La regla que costa complir es que sumin EXACTAMENT 100, i descobrir-ho en prémer «Desa» obligaria a refer el repartiment sense saber quant hi falta. El color el posa la classe «.estat-*» que la fitxa hi penja, i per tant surt del tema i segueix sol en fosc. El text ho diu igualment: qui no distingeixi el verd del groc ha de poder llegir que falten. */ .suma-terminis { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0 0; font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; } /* ---- Tauler de la portada ---- VA ABANS DE LES CLASSES «.estat-*» I NO DESPRES, I ES TOT EL MOTIU PEL QUAL AQUESTA SECCIO ES AQUI ENMIG. «.indicador» ha de posar un color de text propi —una targeta es un «a» i el navegador li donaria el blau i el subratllat de qualsevol enllac—, i les targetes que porten estat l'han de poder sobreescriure amb el seu. Totes dues son classes soles, o sigui la mateixa especificitat: guanya l'ultima que hi ha al full. Escrita despres de «.estat-greu», aquesta regla la taparia i el filet de la targeta que crida es quedaria del color del text del voltant, sense cap error enlloc. Es la trampa 4 de docs/22. */ /* Les quatre targetes, en una graella que s'apila sola. El minim de 14 rem es el que fa que a 390 px n'hi hagi una per fila i a l'escriptori quatre, sense cap consulta de mitjans: es el mateix «auto-fit» que fa servir «.camps». */ /* QUATRE COLUMNES DITES, I NO «auto-fit». Amb «auto-fit» les targetes es reparteixen soles, i a l'amplada de la tauleta en surten TRES: la quarta —que es l'unica que no es cap comptador— es queda sola a la segona fila ocupant-la sencera, com si fos la important. Els talls es diuen, que son els dos de sempre. «align-items: stretch» per defecte: les quatre igual d'altes, perque la del resum en porta dues xifres i una nota. */ .indicadors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; } /* LA FORMA ES LA MATEIXA TANT SI ES ENLLAC COM SI NO. Una targeta a zero deixa de ser un enllac —regla 5 de docs/22: un cami cap a un llistat buit es un cul-de-sac— i passa a ser un «div». El que NO ha de canviar es com es veu: si a zero es veies diferent, la pantalla estaria dient dues coses alhora, i la que importa —el peu— ja ho diu amb text sencer. El filet esquerre hi es sempre i transparent: aixi la targeta que crida no se n'endu tres pixels a les altres i cap fila no balla. */ .indicador { display: flex; flex-direction: column; gap: 0.2rem; box-sizing: border-box; padding: 0.7rem 0.9rem; border: 1px solid var(--color-sf-border-light); border-left: 3px solid transparent; border-radius: var(--radi-superficie); background-color: var(--color-sf-content-bg-color); color: var(--color-sf-content-text-color); text-decoration: none; } /* NOMES LA QUE PORTA ENLLAC RESPON AL RATOLI. La classe la posa el component nomes quan hi ha on anar I la xifra val mes de zero: sense ella, una targeta a zero tindria el cursor de ma i l'aixecament del «:hover» sense portar enlloc. */ .indicador-enllac:hover, .indicador-enllac:focus-visible { border-color: var(--color-sf-primary); } .indicador-enllac:focus-visible { outline: 2px solid var(--color-sf-primary); outline-offset: 2px; } /* EL FILET DE LA QUE CRIDA, AMB EL COLOR DE L'ESTAT. «currentColor» i no un color escrit: el color de la targeta el posa la classe «.estat-*», que es la mateixa que pinta la insignia d'aquell estat al llistat. Aixi la portada i la fila no poden dir el mateix registre de dos colors, i en fosc el filet segueix sol. */ .indicador-crida { border-left-color: currentColor; } /* El retol i el peu es queden apagats sempre, tambe a les targetes amb estat: el color de l'estat es per a la xifra i per al filet, i un retol vermell faria que la targeta cridés el doble del que ha de cridar. SON SELECTORS DE DOS NIVELLS a proposit —«.indicador .indicador-titol» pesa mes que «.estat-greu»—, que es la mateixa recepta que ja fa servir «.retol-caducitat» per no quedar-se amb el text del color del fons. */ .indicador .indicador-titol { font-size: 0.8rem; font-weight: 600; color: var(--color-sf-content-text-color-alt2); } /* La xifra hereta el color de la targeta, que es on viu l'estat: aqui no s'hi escriu cap «color» a proposit. Els digits de la mateixa amplada perque quatre targetes en fila es llegeixin com una columna de numeros. */ .indicador-valor { font-size: 1.7rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; } .indicador .indicador-peu { font-size: 0.78rem; line-height: 1.3; color: var(--color-sf-content-text-color-alt2); } /* LA TARGETA DEL TRIMESTRE: DUES XIFRES DEL MATEIX PES. Si la quota anes sola i grossa es llegiria com «el que haig d'ingressar», que es justament el que aquesta pantalla no pot dir. Per aixo son un «dl» amb les dues al mateix cos, i per aixo la targeta no porta «.indicador-valor». */ .indicador-imports { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.75rem; margin: 0.25rem 0; } .indicador-imports dt { font-size: 0.8rem; color: var(--color-sf-content-text-color-alt2); } .indicador-imports dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } /* LES DUES ANOMALIES. Nomes surten quan valen mes de zero, i llavors son l'unica cosa de la pantalla que demana feina avui. El color surt del parell «--fons-estat» / «--text-sobre-estat» que ja posen les classes «.estat-*», exactament com «.avis-bloc» i «.retol-caducitat»: cap color escrit a ma, i en fosc segueix sol. */ /* ELS DOS TALLS DEL TAULER VAN AQUI, AL FINAL DE LA SECCIO, I NO A DALT. Una consulta «@media» no afegeix cap especificitat: amb la mateixa, guanya L'ULTIMA REGLA DEL FULL. Escrits just despres de «.indicadors», el «display: grid» del tall del mobil se'l menjava el «display: flex» de «.indicador», que es declara mes avall, i l'unic que quedava aplicat era l'«align-items: center»: les targetes sortien apilades I CENTRADES, que no es cap de les dues coses que es volien. No dona cap error i no ho veu cap asserció: es va veure amb una captura. */ @media (max-width: 75rem) { /* Dos per dos. Va despres de la regla base: mateixa especificitat, guanya l'ultima (docs/21-TRAMPES.md). */ .indicadors { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 45rem) { /* UNA COLUMNA, I LA TARGETA ES TOMBA. Quatre targetes verticals son mes de 350 px per a quatre numeros, i deixen la taula de sota la linia de flotacio en un telefon. Tombades —la xifra a l'esquerra en una columna d'amplada FIXA, el retol i el peu a la dreta— fan 56 px cadascuna, per sobre dels 44 que el full ja demana a tot el que es prem. L'amplada de la columna de la xifra es fixa i no «auto» perque les quatre xifres quedin alineades en columna: es per a aixo que serveix el «tabular-nums» que ja porten. */ .indicadors { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; } .indicador { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center; column-gap: 0.9rem; row-gap: 0; min-height: 56px; } /* LA COLUMNA VA DITA. Amb nomes «grid-row», la col·locacio automatica pot posar la xifra a la segona columna i el retol a la primera —que fa 3,5 rem—, i el que surt no s'assembla a res. */ .indicador .indicador-valor { grid-column: 1; grid-row: 1 / span 2; text-align: right; font-size: 1.35rem; } /* La del resum no es tomba: porta dues xifres i una nota, no un numero. I ha de DESFER l'«align-items: center» del germa de sobre: sense aixo hereta el centrat de la targeta tombada i el retol, els imports i la nota surten centrats, que no ho estan enlloc mes de l'aplicacio. */ .indicador-resum { display: flex; align-items: stretch; } } .avis-tauler { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin: 0 0 0.75rem; padding: 0.55rem 0.8rem; border-radius: var(--radi-superficie); font-size: 0.85rem; background-color: var(--fons-estat, var(--color-sf-content-bg-color-alt2)); } /* El selector de dues classes no es cap capritx: «.estat-*» porta TAMBE un «color» propi —el de la insignia, pensat per anar sobre el fons de la pagina— i, amb la mateixa especificitat, deixaria el text vermell a sobre del fons vermell. Es el mateix defecte que «.retol-caducitat» ja va tenir. */ .avis-tauler.estat-bo, .avis-tauler.estat-espera, .avis-tauler.estat-avis, .avis-tauler.estat-greu { color: var(--text-sobre-estat); } /* L'enllac ha de continuar semblant un enllac damunt del fons de l'avis. */ .avis-tauler a { color: inherit; font-weight: 600; } /* ---- Darreres factures de la portada ---- */ .darreres h2 { margin-bottom: 0.25rem; } .darreres-totes { margin: 0; font-size: 0.85rem; } /* ---- Llistat de factures emeses ---- */ /* LA CAPÇALERA QUE ES POT ORDENAR a la cerca ampliada és un botó nostre, i no l'ordenació de la graella, que només tindria la pàgina que ensenya (DialegDeCerca.OrdenaPer). Es veu com el text de la capçalera; el que el delata és la fletxa i el cursor. */ .capcalera-ordenable { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; } .capcalera-ordenable:focus-visible { outline: 2px solid var(--color-sf-primary); outline-offset: 2px; } .senyal-ordre { margin-inline-start: 0.25rem; font-size: 0.75em; vertical-align: middle; } /* Per als titols que ordenen la pagina per a qui la recorre amb un lector de pantalla i que a la vista serien soroll. No es «display: none», que els trauria tambe d'alla. */ .visualment-amagat { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Les accions de la pantalla, en una barra a sobre de tot. A L'ESCRIPTORI NO HA DE SALTAR DE LINIA (L8 de docs/22, #507), i qui cedeix es la casella de cerca, fins al seu minim; els filtres que es fan servir poc van a «Més filtres». La resta de peces no s'encongeixen: un xip o un boto a mitges no es llegeix. ⚠️ LA CASELLA TE LA BASE AL MINIM (12 rem) I CREIX FINS A 22, i aixo es tota la cura. «flex-wrap» parteix la linia segons la BASE de cada peça, abans de mirar si cap pot encongir-se: fins a la #507 la base era de 16 rem, i la barra en feia dues quan amb 12 encara hi cabia. Amb la base al minim, la linia nomes es parteix quan ni amb 12 no hi cap, i quan hi ha lloc l'espai que sobra va a la casella. I ES QUEDA «wrap», NO «nowrap»: si algun dia no hi cap —un nom de familia llarg al rotul d'un xip—, que la barra faci dues linies es un defecte de disseny que es veu; que la pagina es desplaci de costat es un defecte que no veu ningu fins que molesta. «LaBarraDeComandesFaUnaSolaFila» es la que ho vigila. EL RECOMPTE JA NO HI ES: va al peu del llistat, amb la paginacio («PeuDelLlistat»). */ .barra-comandes { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; padding-bottom: 0.5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-sf-border); } .barra-comandes > * { flex-shrink: 0; } /* L'enllac d'expedir es un «a» amb aspecte de boto: ha de poder obrir-se en una pestanya nova, pero al costat dels botons ha de semblar-ho. */ .barra-comandes a.comanda { text-decoration: none; } /* UNA SOLA FORMA PER A TOT EL QUE ES POT PREMER. Vora d'un pixel, fons de contingut i radi de quatre, que es el «.bt» del mockup; la jerarquia la donen el color i el farciment i no la presencia de caixa. Ve d'una barra amb tres pesos visuals: l'alta plena de primari, els xips i «Actualitza» plans amb «e-flat», i «Neteja els filtres» apagat... amb caixa i vora. L'element que mes semblava un boto era l'unic que no es podia premer. La cosa es que «e-flat» treu el fons i la vora al boto actiu, pero «.e-btn.e-flat:disabled» del tema els hi TORNA a posar —«secondary-bg-color-disabled» i «secondary-border-color-disabled»—, de manera que un boto pla nomes es pla mentre es pot premer. Per aixo la forma no la porta cap classe del component: la porten tots. LA MIDA VAL PER A LES TRES BARRES I NO NOMES PER ALS LLISTATS. Estava escrita aqui dins i cap pantalla de formulari no la feia servir: els llistats tenien botons de 0,8 rem i els formularis, els del tema, de manera que «Expedeix la factura» i «Afegeix una linia» semblaven d'una altra aplicacio que la barra de «/factures». Son els mateixos tres llocs on el mockup dibuixa «.bt»: la barra de comandes, el peu d'accions i el boto que afegeix una fila. */ .barra-comandes .e-btn, .barra-document .e-btn, .peu-accions .e-btn, .accions-graella .e-btn, .accions-cicle .e-btn, .accions-compte .e-btn, .credencial-copia .e-btn, .credencial-sortides .e-btn { /* La mida del mockup: mes estreta de dalt a baix i mes ampla de costat, que es el que fa que sis controls seguits no facin una barra de botons. */ font-size: 0.8rem; padding: 0.34rem 0.7rem; text-transform: none; } /* I el que no es pot premer ha de pesar MENYS que el que si. El tema fa el contrari en fosc, on el fons del desactivat —blanc al 20 %— es mes clar que el dels germans actius, que el tenen al 10 %. Aqui la caixa es la mateixa que la dels actius i l'unic que baixa es el text: la barra manté una sola forma i el desactivat no crida. */ .barra-comandes .e-btn:disabled, .barra-comandes .e-btn.e-disabled { background: var(--color-sf-secondary-bg-color); border-color: var(--color-sf-secondary-border-color); color: var(--color-sf-content-text-color-disabled); box-shadow: none; } /* Els filtres de tria, en xips a la barra. Un xip diu el que val —«Sèrie: F 2026»— i no ocupa ni un pixel d'amplada de la graella, que es el que feia el plafo lateral que hi havia abans. La classe va a un «div» nostre i no al «CssClass» del component: es la mateixa regla de sempre, i aqui a mes serveix perque el que Syncfusion faci amb el seu DOM no toqui els germans de la barra. Un xip es premible, i per tant duu la mateixa caixa que la resta de la barra: la regla de mes amunt val per a tots. El que el distingeix es la fletxa que hi posa el component, no la forma. */ .barra-comandes .xip { display: flex; } /* UNA COMANDA NOMES AMB ICONA: «Actualitza» de «/factures» (#507). Quadrada, amb la mateixa alcada que les germanes; el nom es a l'«aria-label» i a la indicacio. */ .barra-comandes .comanda-icona.e-btn { padding-left: 0.5rem; padding-right: 0.5rem; } .barra-comandes .comanda-icona.e-btn .e-btn-icon { margin: 0; } /* EL XIP «MES FILTRES» (#507, «XipMesFiltres»), I ELS XIPS AMB TOPALL («XipDeFiltre.AmbTopall»: el de la familia d'un article, que porta un nom sense llargada fitada). EL ROTUL ES TALLA A 14 REM AMB PUNTS SUSPENSIUS: diu els filtres posats units per « · », i amb tres o quatre ja no hi cabria. El text sencer es al nom accessible i a la indicacio del «div» nostre. ⚠️ EL TEXT ES UN NODE SOLT DEL BOTO, sense cap element propi, i la fletxa n'es un fill al final. Dins d'una caixa «flex» un text solt es un element anonim que no admet punts suspensius, i el tall el retallava pels dos costats; i amb el boto de bloc, el tall s'enduia la fletxa, que es l'ultima cosa de la linia. Per aixo el boto es de bloc, el text comença a l'esquerra, i la fletxa es col·loca a la dreta, fora del flux, sobre el coixi que se li reserva. */ .xip-mes-filtres .e-dropdown-btn.e-btn, .xip-amb-topall .e-dropdown-btn.e-btn { position: relative; display: block; max-width: 14rem; padding-right: 1.9rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; } /* L'amplada, fixada: el tema dona a la caixa de la icona 28 px, amb la lletra al mig, i sense fixar-la la caixa s'estenia per sobre dels punts suspensius. */ .xip-mes-filtres .e-dropdown-btn.e-btn .e-caret, .xip-amb-topall .e-dropdown-btn.e-btn .e-caret { position: absolute; top: 50%; right: 0.55rem; width: 1rem; min-width: 0; margin: 0; text-align: center; transform: translateY(-50%); } /* AMB FILTRES POSATS, EL XIP ES VEU ACTIU: la vora del color primari i el text en «primary-dark», com un filtre que acota. No es cap estat nou que calgui dir a part: el rotul ja diu quins son. ⚠️ EL TEXT NO ES EL PRIMARI, i es mesurat (#507): en fosc el primari feia 3,97:1 en repos, 3,0:1 amb el focus i 1,48:1 amb el plafo obert («e-active»), sota el 4,5 d'un text. Es la mateixa tria que l'ancora de la fila («a.ancora», mes amunt). Els estats hi son escrits perque el tema en pinta cadascun pel seu compte. I EL FONS ES EL DE CONTINGUT A TOTS ELS ESTATS: el del tema es un blanc al 10 % sobre la pagina, i en fosc «primary-dark» a sobre feia 4,49:1 —mesurat per «MesFiltresTests.ElXipActiuEsLlegeixEnTotsDosTemes»—; sobre el de contingut en fa 5,9, com l'ancora. La vora primaria ja diu que el xip acota. */ .barra-comandes .xip-mes-filtres.amb-filtres .e-btn, .barra-comandes .xip-mes-filtres.amb-filtres .e-btn:hover, .barra-comandes .xip-mes-filtres.amb-filtres .e-btn:focus, .barra-comandes .xip-mes-filtres.amb-filtres .e-btn:focus-visible, .barra-comandes .xip-mes-filtres.amb-filtres .e-btn:active, .barra-comandes .xip-mes-filtres.amb-filtres .e-btn.e-active { border-color: var(--color-sf-primary); background: var(--color-sf-content-bg-color); color: var(--color-sf-primary-dark); } /* La casella de cerca es queda visible i no s'amaga dins de cap xip: es el filtre que es fa servir cada dia i obrir un desplegable per escriure-hi seria un clic per res. */ .barra-comandes .cerca { width: 16rem; max-width: 100%; } /* LA CASELLA DE CERCA D'UN LLISTAT, «CasellaDeCerca» (#435). LA CAIXA ES DEL «div» NOSTRE I NO DE L'«e-input-group», com al cercador de la capcalera: dins hi ha la lupa, el camp i el boto de buidar, i si el component dibuixes la seva, se'n veurien dues l'una dins de l'altra. La vora, el radi i l'alcada son els dels botons de la barra, que es on viu: una casella mes alta que els seus germans faria saltar la linia. 12 REM DE BASE I DE MINIM, I 22 DE MAXIM (#507). Creix amb el que sobra a la barra i s'encongeix abans que cap xip; quan ni amb 12 no hi cap, baixa SENCERA a la linia seguent —es el que fa la barra amb «flex-wrap»—, que es millor que una casella on no hi cap el que s'hi escriu. Fins a la #507 la base era de 16 rem, i la linia es partia abans que la casella hagues cedit res (veure «.barra-comandes»). */ .barra-comandes .casella-cerca { flex: 1 1 12rem; min-width: 12rem; max-width: 22rem; } .casella-cerca { display: flex; align-items: center; gap: 0.35rem; box-sizing: border-box; /* L'alcada d'un boto de la barra —0,8 rem de lletra, 0,34 de coixi i la vora—, mesurada: 28,5 px. */ height: 1.78rem; padding: 0 0.15rem 0 0.55rem; border: 1px solid var(--color-sf-border); border-radius: var(--radi-control); background-color: var(--color-sf-content-bg-color); color: var(--color-sf-content-text-color); } /* Qui te el focus es l'«input» de dins, i l'anell l'ha de dibuixar la caixa. */ .casella-cerca:focus-within { border-color: var(--color-sf-primary); } .casella-cerca .casella-lupa { flex: none; font-size: 13px; color: var(--color-sf-content-text-color-alt2); } /* ⚠️ LA TERCERA LINIA NO ES DECORACIO. Amb el focus a dins, el tema posa al grup una ombra d'un pixel del color primari amb «.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error)», que pesa sis classes: amb menys, el que es veia era una segona caixa blava dins de la nostra. */ .casella-cerca .e-input-group, .casella-cerca .e-input-group.e-control-wrapper, .casella-cerca .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) { flex: 1 1 auto; min-width: 0; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } /* La ratlla del camp que el tema dibuixa amb pseudoelements seria una segona vora dins de la nostra. */ .casella-cerca .e-input-group::before, .casella-cerca .e-input-group::after { display: none; } .casella-cerca .e-input-group input.e-input { height: 100%; min-height: 0; padding: 0; border: 0; font-size: 0.8rem; background: transparent; color: inherit; } /* EL BOTO DE BUIDAR ES PART DEL CAMP I NO UNA COMANDA DE LA BARRA: sense caixa i quadrat, a l'extrem del camp. La regla de «.barra-comandes .e-btn» —la forma unica del que es prem a la barra— hi arriba perque el boto viu a dins, i aqui es desfa amb una classe mes; el que no es desfa es l'anell del focus del tema. Nomes es dibuixa amb text, de manera que la prova de la forma de la barra, que llegeix el llistat acabat d'obrir, no el troba. */ .casella-cerca .casella-buida.e-btn { flex: none; width: 1.55rem; height: 1.55rem; min-height: 0; padding: 0; border: 0; border-radius: var(--radi-dins-control); background: transparent; box-shadow: none; color: var(--color-sf-content-text-color-alt2); } .casella-cerca .casella-buida.e-btn:hover { background: var(--color-sf-flyout-bg-color-hover); color: var(--color-sf-content-text-color); } /* El color l'hereta del boto: el tema en posa un de propi a la icona, i la creu sortia vermellosa, com si buidar la cerca fos una accio perillosa. */ .casella-cerca .casella-buida.e-btn .e-btn-icon { margin: 0; font-size: 11px; color: inherit; } /* AL TELEFON, UNA FILA PROPIA I SENCERA, 40 PX D'ALT I LLETRA DE 16 PX. Els 16 px son l'unica manera que Safari a iOS no faci zoom sol en enfocar el camp (la mateixa rao que la regla general de «.e-input» d'aquest tall, que aqui no hi arriba perque la d'escriptori de sobre pesa mes). El boto de buidar creix fins a l'alcada del camp: es l'objectiu que es prem amb el dit. ⚠️ No s'estrena cap llindar: es el mateix 45 rem de sempre. Va darrere de les regles generals de la casella, i a mes pesa mes que elles, de manera que no depen de l'ordre. */ @media (max-width: 45rem) { .barra-comandes .casella-cerca { flex: 1 0 100%; min-width: 0; max-width: none; height: 40px; } .barra-comandes .casella-cerca .e-input-group input.e-input { font-size: 1rem; } .barra-comandes .casella-cerca .casella-buida.e-btn { width: 38px; height: 38px; min-height: 0; } } /* LA PISTA DE LA DRECERA DELS DOS CERCADORS (#448): «/» dins de la casella d'un llistat, on surt la × quan hi ha text, i «Ctrl K» a la dreta del cercador de la capcalera. ES LA MATEIXA TECLA DIBUIXADA QUE «.drecera-boto», pero en gris i amb la vora del tema: aquella viu dins d'un boto i pren el seu color; aquesta es dins d'un camp buit i ha de llegir-se com el «placeholder», que es el que l'acompanya. «aria-hidden» al marcatge: el nom del camp no canvia, i la tecla la diu «aria-keyshortcuts». NOMES AMB EL CAMP BUIT I SENSE FOCUS. Amb el focus a dins ja s'hi es i la pista no diu res; amb text, a la casella del llistat hi va la ×, i al de la capcalera, la creu del component. Ho decideix el full —«:focus-within» i «:placeholder-shown»— i no cap redibuix: el text de l'«input» canvia al navegador abans que el servidor se n'assabenti. */ .pista-drecera { flex: none; padding: 0 0.3rem; border: 1px solid var(--color-sf-border); border-radius: var(--radi-dins-control); font-family: inherit; font-size: 0.7rem; line-height: 1.4; white-space: nowrap; color: var(--color-sf-content-text-color-alt2); pointer-events: none; } /* A la casella, lluny de la vora dreta com la ×, que fa 1,55 rem quadrats. */ .casella-cerca .pista-drecera { margin-right: 0.3rem; } /* Dins del cercador de la barra, que és tintat, la pista porta el fons de la targeta: és una tecla, i ha de sortir del fons com a la maqueta. */ .capcalera .cercador-global .pista-drecera { background-color: var(--fons-targeta); } .casella-cerca:focus-within .pista-drecera, .casella-cerca:has(input:not(:placeholder-shown)) .pista-drecera, .capcalera .cercador-global:focus-within .pista-drecera, .capcalera .cercador-global:has(input:not(:placeholder-shown)) .pista-drecera { display: none; } /* AL MOBIL NO HI HA TECLAT, I LES PISTES NO HI SURTEN: el mateix que «.drecera-boto». L'atribut «aria-keyshortcuts» es queda, que no ocupa res. Mateix llindar de sempre, i guanya a la regla general perque pesa el mateix i va despres. */ @media (max-width: 45rem) { .pista-drecera { display: none; } } /* EL PLAFO QUE S'OBRE DES D'UN XIP HA DE TENIR CONTORN D'ELEMENT FLOTANT. El tema li'l posa, pero a l'«ul» de dins i no al plafo: «.e-dropdown-popup ul» porta la vora i l'ombra, i el «div» que les hauria de dur —que es qui te el fons i el radi— es queda amb «border: 0px none» i «box-shadow: none». Amb un menu de tria encara es veia alguna cosa, perque l'«ul» l'omple sencer; amb el xip del rang de dates, que porta «PopupContent» i per tant no te cap «ul», no hi quedava ni vora ni ombra i el plafo es llegia com un forat retallat damunt de la graella. Es veia especialment amb el missatge blau de «cap factura no encaixa amb aquests filtres» a sota, i igual en fosc. Aixi que el contorn passa al plafo, que es on el tema mateix el posa a tots els altres flotants —«.e-ddl.e-popup», «.e-datepicker.e-popup-wrapper» i «.e-daterangepicker.e-popup» duen exactament aquesta vora i aquesta ombra—, i surt de l'«ul» perque no se'n dibuixin dues, una damunt de l'altra. Les regles no poden penjar de «.contingut»: Syncfusion penja el plafo del «body». ⚠️ ELS XIPS JA NO SON ELS UNICS «SfDropDownButton». Des de la #126 el boto «Prefactura nova» de «/prefactures» tambe n'es un, i el que hereta d'aqui —vora, ombra i el topall d'amplada— es exactament el que li convé. El que NO l'afecta, i val la pena tenir-ho escrit perque sembla el contrari: «.xip» vol una classe que aquell boto no porta, i «li[aria-checked]» vol un atribut que nomes posa «OpcioDeXip» —un menu de comandes no te opcio vigent—. EL TOPALL D'AMPLADA VAL PER A TOTS. A 390 px un rotul llarg fa sortir el plafo de la finestra i la pagina es desplaça de costat, i cap prova ho veuria: «CapPantallaNoEsDesplacaDeCostat» mesura el document i un plafo tancat no hi es. */ .e-dropdown-popup { border: 1px solid var(--color-sf-border-light); box-shadow: var(--ombra-flotant); max-width: calc(100vw - 2rem); } /* ELS PLAFONS DE FILTRE, DINS DE LA FINESTRA AL MOBIL (#507). Syncfusion alinea el plafo amb l'esquerra del xip, i nomes el passa a la dreta si hi cap; «Més filtres» a 390 px comença al x=201 i fa 24 rem, i anava fins al x=559 desplaçant la pagina. El «max-width» de sobre no el mou de lloc. Al mobil el plafo ocupa l'amplada de la finestra amb un marge d'1 rem a cada costat. «!important» NOMES CONTRA L'ATRIBUT «style» que hi escriu el JavaScript del component —«left» i «width»—, que es l'unic cas en que aquest full el fa servir. */ @media (max-width: 45rem) { .e-dropdown-popup:has(.plafo-de-filtres) { left: 1rem !important; width: calc(100vw - 2rem) !important; } } /* I EL ROTUL LLARG PASSA DE LINIA EN COMPTES DE TALLAR-SE. El tema deixa el «li» amb «white-space: nowrap» i alcada fixa: «Simplificada amb les dades del destinatari (art. 7.2 i 7.3 del ROF)» hi quedava tallat amb punts suspensius, i el que es perdia era justament la part que diu quin article s'invoca. La regla penja dels identificadors del menu de «Prefactura nova» i no de cap classe: el «CssClass» d'un «SfDropDownButton» no esta documentat que arribi al plafo, i els identificadors els posem nosaltres. Els xips no hi entren: els seus rotuls son curts i una opcio de dues ratlles hi seria soroll. ⚠️ I QUI TALLA ES «PopupWidth», cosa que no constava escrita. Comprovat al full del tema de la 34.2.3: quan es dona amplada al plafo, Syncfusion li afegeix la classe «e-dropdown-popup-width», i el tema porta «.e-dropdown-popup-width ul li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block !important }». O sigui que el truncament no ve del «li» normal —aquell nomes te «display: flex» amb «height: 32px»— sino de l'amplada que li posem nosaltres. Aquest selector el venç per l'atribut, i el «display: block» del tema ja es el que fa que el text pugui passar de linia. «descompte-» hi entra pel mateix motiu: «Client fidelitzat — 5 %» amb un nom de seixanta caracters no cap, i el que es perdria es justament la XIFRA, que es la meitat que fa que la conseqüencia es vegi abans del gest. «document-» hi entra per «Més ▾» de la barra de la fitxa d'un document (#311). Allà el botó no és a la vora esquerra: a 390 px ve darrere de «Mira el document» i comença a 152 px, i Syncfusion alinea el plafó amb el botó. Amb 16 rem se n'anava fins a 408 amb una finestra de 390, i el «max-width» de sobre no el mou de lloc. Per això el plafó fa 12 rem, i el que no hi cap passa de línia. */ .e-dropdown-popup ul li[id^="nou-"], .e-dropdown-popup ul li[id^="descompte-"], .e-dropdown-popup ul li[id^="document-"] { height: auto; min-height: 2rem; padding-top: 0.35rem; padding-bottom: 0.35rem; line-height: 1.35; white-space: normal; } .e-dropdown-popup ul { border: 0; box-shadow: none; } /* L'OPCIO VIGENT D'UN XIP S'HA DE VEURE UN COP OBERT EL MENU. Un «SfDropDownButton» es un menu i no te concepte de seleccio: el xip deia «Sèrie: F 2026» i, obert, cap de les quatre opcions no es distingia de les altres. Els desplegables de tria si que marquen la seleccio —el tema ho fa amb «.e-item.e-selected»—, pero aqui no hi ha res que hi posi la classe. La regla penja de l'atribut i no de cap classe nostra, i aixo es a proposit: la marca visual i l'estat que sent un lector de pantalla surten del MATEIX «aria-checked» que posa «OpcioDeXip», de manera que no es poden separar. Si un dia algu es deixa l'atribut, no es perd nomes el que se sent: es perd tambe el que es veu, i llavors salta a la vista. Va despres de les regles del tema i amb la mateixa arrel: els selectors no poden penjar de «.contingut», que Syncfusion penja el plafo del «body». */ .e-dropdown-popup ul li[aria-checked="true"] { background: var(--color-sf-flyout-bg-color-selected); color: var(--color-sf-flyout-text-color-selected); font-weight: 600; } /* El vist es dibuixat amb dues vores i no cap icona ni cap caracter: la lletra que Syncfusion pinta amb «content» —i qualsevol «content» amb text, tambe el nostre— entraria al nom accessible de l'opcio, que ja diu «seleccionat» pel seu compte. Amb el contingut buit no hi entra res. La caixa es la del «li», que el tema deixa en «display: flex»: el «margin» automatic l'envia a la dreta i el text es queda on era. */ .e-dropdown-popup ul li[aria-checked="true"]::after { content: ""; flex: none; align-self: center; width: 0.3rem; height: 0.6rem; margin-left: 1.25rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-0.08rem) rotate(45deg); } /* UNA OPCIO D'UNA ALTRA MENA, SEPARADA DE LES DE SOBRE: «Anteriors al registre de la seu» al peu de la llista de seus (#287). Penja d'un atribut de l'opcio mateixa i no del «Separator» de Syncfusion, que dibuixaria un element de llista mes i les proves el comptarien com una opcio. El perque es a «XipDeFiltre.Separada». */ .e-dropdown-popup ul li[data-separada="true"] { margin-top: 0.25rem; border-top: 1px solid var(--color-sf-border-light); } /* Les dues dates viuen dins del desplegable del seu xip, que Syncfusion penja del «body»: aquestes regles no poden dependre de «.contingut». */ .xip-rang { display: grid; gap: 0.6rem; padding: 0.75rem; } /* ELS PERIODES DEL XIP DE LES DATES (#435): dos mesos, la fila dels quatre trimestres d'un any i, a sota, el rang a ma. Tres seccions amb el mateix titol petit i gris, separades per un filet. Els mesos es dibuixen com les opcions d'un menu de xip —fons en passar-hi, fons i negreta la vigent, el vist amb dues vores— perque es llegeixen com una tria i ho son; els trimestres, com una fila segmentada, perque son quatre peces d'un mateix any. Pero cap de les dues coses no es cap menu: son grups de radio, i la marca penja del MATEIX «aria-checked» que se sent. EL QUE NO ES POT TRIAR ES VEU APAGAT I ES QUEDA AL SEU LLOC: «aria-disabled» abaixa el text i treu el fons en passar-hi, i el motiu va escrit. */ .xip-rang .periodes-mes, .xip-rang .periodes-trimestre { display: grid; gap: 0.3rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-sf-border-light); } .xip-rang .titol-periodes { margin: 0; font-size: 0.75rem; font-weight: 600; color: var(--color-sf-content-text-color-alt2); } .xip-rang .grup-mesos { display: grid; margin: 0 -0.35rem; } .xip-rang .preseleccio { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 2rem; padding: 0.3rem 0.5rem; border: 0; border-radius: var(--radi-control); background: none; color: var(--color-sf-flyout-text-color); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; } .xip-rang .preseleccio:hover:not([aria-disabled="true"]) { background: var(--color-sf-flyout-bg-color-hover); } .xip-rang .preseleccio:focus-visible, .xip-rang .trimestre:focus-visible { outline: 2px solid var(--color-sf-primary); outline-offset: -2px; } .xip-rang .preseleccio-nom { flex: 1 1 auto; } .xip-rang .preseleccio-periode { flex: none; font-size: 0.8rem; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--color-sf-content-text-color-alt2); } .xip-rang .preseleccio[aria-checked="true"] { background: var(--color-sf-flyout-bg-color-selected); color: var(--color-sf-flyout-text-color-selected); font-weight: 600; } /* EL VIST, COM A «OpcioDeXip»: dues vores i «content» buit, que no entra al nom accessible. Hi es a totes les opcions, transparent a les no vigents, perque els periodes de la dreta quedin alineats. */ .xip-rang .preseleccio::after { content: ""; flex: none; width: 0.3rem; height: 0.6rem; margin: 0 0.2rem 0 0; border: solid transparent; border-width: 0 2px 2px 0; transform: translateY(-0.08rem) rotate(45deg); } .xip-rang .preseleccio[aria-checked="true"]::after { border-color: currentColor; } .xip-rang .preseleccio[aria-disabled="true"], .xip-rang .preseleccio[aria-disabled="true"] .preseleccio-periode, .xip-rang .trimestre[aria-disabled="true"] { color: var(--color-sf-content-text-color-disabled); cursor: default; } /* El motiu d'un mes apagat, just a sota i al marge del text de l'opcio. */ .xip-rang .motiu-periode { margin: -0.15rem 0 0.2rem; padding: 0 0.5rem; font-size: 0.75rem; color: var(--color-sf-content-text-color-alt2); } /* La capcalera de la fila: el titol a l'esquerra i, sense exercici triat, les fletxes amb l'any al mig a la dreta. Les fletxes son de fora del grup de radio. */ .xip-rang .capcalera-trimestres { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1.6rem; } .xip-rang .anys-trimestres { display: inline-flex; align-items: center; gap: 0.25rem; } .xip-rang .any-trimestres.e-btn { width: 1.6rem; height: 1.6rem; min-height: 0; padding: 0; border-color: transparent; background: transparent; box-shadow: none; } .xip-rang .any-trimestres.e-btn:hover { background: var(--color-sf-flyout-bg-color-hover); } .xip-rang .any-de-la-fila { min-width: 2.6rem; font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; } /* LA FILA SEGMENTADA: quatre peces iguals dins d'una sola vora, amb un filet entre peça i peça. Cada trimestre es sempre al mateix lloc, tambe el que no es pot triar. */ .xip-rang .fila-trimestres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--color-sf-border); border-radius: var(--radi-control); overflow: hidden; } .xip-rang .trimestre { display: grid; justify-items: center; align-content: start; gap: 0.1rem; min-height: 3.6rem; padding: 0.35rem 0.15rem; border: 0; border-left: 1px solid var(--color-sf-border); background: var(--color-sf-content-bg-color); color: var(--color-sf-content-text-color); font: inherit; cursor: pointer; } .xip-rang .trimestre:first-child { border-left: 0; } .xip-rang .trimestre:hover:not([aria-disabled="true"]) { background: var(--color-sf-flyout-bg-color-hover); } /* La vigent, amb el fons de la tria i una ratlla primaria al peu: en una fila segmentada no hi ha lloc per al vist, i el fons sol no es veuria prou en fosc. */ .xip-rang .trimestre[aria-checked="true"] { background: var(--color-sf-flyout-bg-color-selected); color: var(--color-sf-flyout-text-color-selected); box-shadow: inset 0 -3px 0 var(--color-sf-primary); } .xip-rang .trimestre-nom { font-size: 0.875rem; font-weight: 600; } .xip-rang .trimestre-mesos { font-size: 0.72rem; color: var(--color-sf-content-text-color-alt2); } .xip-rang .trimestre-marca { font-size: 0.68rem; line-height: 1.2; text-align: center; color: var(--color-sf-content-text-color-alt2); } .xip-rang .trimestre[aria-disabled="true"] .trimestre-mesos, .xip-rang .trimestre[aria-disabled="true"] .trimestre-marca { color: var(--color-sf-content-text-color-disabled); } /* El rang a ma: les dues dates de costat i «Treu les dates» a sota. */ .xip-rang .periodes-rang { display: grid; gap: 0.5rem; } .xip-rang .rang-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } .xip-rang .treu-dates { justify-self: start; } /* EL PLAFO «MES FILTRES» (#507): un grup de radio per filtre, amb el seu titol. ES EL GERMA DEL PLAFO DE LES DATES i es dibuixa igual: el titol petit i gris, les opcions com les d'un menu de xip —fons en passar-hi, fons i negreta la marcada, el vist amb dues vores— i un filet entre grups. Tampoc no es cap menu: la marca penja del MATEIX «aria-checked» que se sent. EL QUE NO ES POT TRIAR ES VEU APAGAT I ES QUEDA AL SEU LLOC: el grup del rebuig de «/factures» mentre la remissio no es «Rebutjat per l'AEAT», amb el motiu escrit sota el titol. Syncfusion penja el plafo del «body»: res no pot dependre de «.contingut». */ .plafo-mes-filtres { display: grid; gap: 0.6rem; max-height: min(70vh, 36rem); overflow-y: auto; padding: 0.75rem; } /* El «div» nomes rep el focus un instant, en obrir-se, i el passa a la primera parada. */ .plafo-de-filtres:focus { outline: none; } .plafo-mes-filtres .grup-filtre { display: grid; gap: 0.3rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-sf-border-light); } .plafo-mes-filtres .grup-filtre:last-child { padding-bottom: 0; border-bottom: 0; } .plafo-mes-filtres .titol-grup { margin: 0; font-size: 0.75rem; font-weight: 600; color: var(--color-sf-content-text-color-alt2); } .plafo-mes-filtres .motiu-grup, .plafo-mes-filtres .ajuda-grup { margin: 0; font-size: 0.75rem; color: var(--color-sf-content-text-color-alt2); } .plafo-mes-filtres .opcions-grup { display: grid; margin: 0 -0.35rem; } .plafo-mes-filtres .opcio-filtre { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 2rem; padding: 0.3rem 0.5rem; border: 0; border-radius: var(--radi-control); background: none; color: var(--color-sf-flyout-text-color); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; } .plafo-mes-filtres .opcio-filtre:hover:not([aria-disabled="true"]) { background: var(--color-sf-flyout-bg-color-hover); } .plafo-mes-filtres .opcio-filtre:focus-visible { outline: 2px solid var(--color-sf-primary); outline-offset: -2px; } .plafo-mes-filtres .opcio-filtre[aria-checked="true"] { background: var(--color-sf-flyout-bg-color-selected); color: var(--color-sf-flyout-text-color-selected); font-weight: 600; } /* EL VIST, COM A «OpcioDeXip» i als mesos del plafo de les dates: dues vores i «content» buit, que no entra al nom accessible. Al final de la fila. */ .plafo-mes-filtres .opcio-filtre[aria-checked="true"]::after { content: ""; flex: none; width: 0.3rem; height: 0.6rem; margin: 0 0.2rem 0 auto; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-0.08rem) rotate(45deg); } .plafo-mes-filtres .opcio-filtre[aria-disabled="true"], .plafo-mes-filtres .opcio-filtre[aria-disabled="true"][aria-checked="true"] { background: none; color: var(--color-sf-content-text-color-disabled); font-weight: 400; cursor: default; } /* Una opcio d'una altra mena, separada de les de sobre: «Anteriors al registre de la seu», com a «XipDeFiltre.Separada». */ .plafo-mes-filtres .opcio-filtre[data-separada="true"] { margin-top: 0.25rem; border-top: 1px solid var(--color-sf-border-light); border-radius: 0 0 var(--radi-control) var(--radi-control); } /* EL «CAP RESULTAT» D'UNA CERCA (#435): tres linies —que ha passat, on mes es pot buscar i com es busca— dins del mateix missatge. I L'AVÍS AMB LA SORTIDA A DINS (#435 fase 2): el sostre i l'error de l'exportació, el text i a sota el botó. */ .cap-resultat-text p, .avis-amb-sortida p { margin: 0; } .cap-resultat-text p + p, .avis-amb-sortida p + p { margin-top: 0.4rem; } /* DUES SORTIDES O MÉS AL MATEIX PARÀGRAF, SEPARADES (#615, revisió del lot 1a): el desquadre del calendari en porta fins a tres —«Posa la diferència al venciment 3», «Torna al calendari de la forma» i «Expedeix sense condicions de pagament»—, i Blazor treu l'espai que hi ha després d'un «@if», de manera que els dos botons quedaven enganxats. Una fila que parteix amb 0,5 rem d'aire, com les dues sortides de «.nota-proposta»; al telèfon, cada botó a tota l'amplada i un sota l'altre amb el mateix aire. */ .avis-amb-sortida p:where(:not([hidden])):has(> .e-btn + .e-btn) { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* LA SORTIDA PORTA UN NOM DE CLIENT O UN TEXT CERCAT, I POT SER LLARGA: parteix línia en comptes de sortir del missatge. A 390 px, «Mira totes les factures de ABELLA FRUITS COMERCIAL EXPORTADORA, S.L.» empenyia la caixa i el missatge es tallava per la dreta (#435 fase 2, vist a la captura). */ :is(.cap-resultat-text, .avis-amb-sortida, .nota-llistat) .e-btn { max-width: 100%; height: auto; white-space: normal; text-align: start; } /* COM ES CERCA, DIT ON ES FA LA PREGUNTA. La cerca dels catalegs es per prefix —«LIKE 'a%'», decidit al diposit perque un «LIKE '%a%'» llegiria la taula sencera— i qui escriu tres lletres del mig d'un nom no troba res. L'aviso no pot viure nomes al «title» de la casella: amb el teclat, aquell text no existeix. Va dins del missatge de cap resultat i nomes quan s'ha buscat text. Es una segona linia del mateix missatge, mes fluixa que la primera: la primera diu QUE ha passat i aquesta, PER QUE. */ .ajuda-cerca { margin: 0.35rem 0 0; font-size: 0.85em; } .recompte { margin: 0 0 0.5rem; color: var(--color-sf-content-text-color-alt2); font-variant-numeric: tabular-nums; } /* UNA LINIA QUE QUALIFICA LA LLISTA I NO ES CAP ESTAT: les factures anteriors al registre de la seu que no surten acotant per una seu (#287). Gris i sense fons, com el recompte: no ha passat res dolent. */ .nota-llistat { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--color-sf-content-text-color-alt2); } /* UNA NOTA AMB SORTIDA ÉS UN «div» DE DUES LÍNIES (#435 fase 2, la del client de «/factures»): què no hi surt, i a sota el botó secundari que ho va a buscar. Una nota d'una línia continua sent un «p». La regla és de «.nota-llistat» i no de la pàgina: la propera nota amb sortida no n'ha d'escriure cap. */ .nota-llistat p { margin: 0; } .nota-llistat p + p { margin-top: 0.4rem; } .graella-factures .numero, .graella-cobraments-client .numero, .fitxa-factura .numero, .refactura .numero, /* UN NUMERO DE DOCUMENT NO ES PARTEIX MAI. A 390 px, «PRU 26 0050» queia en tres linies —«PRU», «26», «0050»— i deixava de llegir-se com un numero. La taula ja va dins d'un «.taula-desplacable», de manera que el que sobra es recorre a dins i no se'n duu la pagina. */ .taula-darreres .numero { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } /* LES CEL·LES DEL LLISTAT DE COBRAMENTS D'UN CLIENT (#646 lot 2e, «clients/{id}/cobraments»): el valor i, a sota, el que el matisa —la data valor, el compte i la referència, «Desfet el … · qui» i el motiu—, apilats. «.e-rowcell» va amb «nowrap» i «overflow: hidden»: sense «white-space: normal», el motiu d'un desfet (fins a 500 caràcters) no es partiria, es TALLARIA sense dir-ho. Cap color: un desfet es diu amb text, sense ratllar ni apagar (docs/22, «Estats»). */ .graella-cobraments-client .cela-cobrament { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; white-space: normal; } .graella-cobraments-client .cela-cobrament .valor-subordinat { white-space: normal; overflow-wrap: anywhere; } /* L'estat i l'anul·lacio son etiquetes, no text corrent: es llegeixen d'una ullada recorrent la columna amunt i avall. El color no hi va sol —qui no el distingeixi ha de poder-ho llegir igual— i per aixo cadascuna duu el seu text sencer. Un punt i el text, i no una pindola amb la vora del color al cent per cent: quatre pindoles vermelles en una columna criden mes que les dades, i la vora a tota intensitat feia que l'estat pesses mes que el numero de la factura. Es la solucio de Dynamics del mockup; la pindola plena es la d'Odoo. La mida va en «rem» i no en «em»: en «em» la mateixa insignia sortia de 11,9 px a la graella i de 13,6 al detall, perque hereta de dos llocs amb lletres diferents. «.marca» no hi entra encara que sigui la classe de l'altra etiqueta: tambe es la de la marca del producte a la barra de dalt, que amb la regla d'abans sortia dins d'una pindola sense que ningu ho hagues demanat. */ .estat, .marca-anullada, .marca-correccio, .insignia { display: inline-flex; align-items: center; gap: 0.38rem; font-size: 0.74rem; font-weight: 600; line-height: 1.5; white-space: nowrap; } .estat::before, .marca-anullada::before, .marca-correccio::before, .insignia::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background-color: currentColor; } .marca-anullada { margin-left: 0.5rem; color: var(--color-sf-danger); } /* LES MARQUES DE CORRECCIO, SOTA EL NUMERO. La cel·la del numero pot portar dues coses a sobre l'altra i «.e-rowcell» va amb «white-space: nowrap» i «overflow: hidden»: sense tornar-li el partit, la segona marca no es partia, es tallava, i no ho deia ni la consola ni cap asserció —es veu amb una captura i prou. El «line-height» es baix a proposit: son dues línies dins d'una fila d'un llistat dens, i amb l'alçada normal la fila creixia el doble. */ .cel-numero { display: flex; flex-direction: column; gap: 2px; white-space: normal; line-height: 1.25; } /* I LA TERCERA VEGADA, A LA COLUMNA «TIPUS» DE «TriaDeFactures»: el codi «F1» o «F2» i, a sota, l'article de la casella que fa que aquell codi no digui tota la veritat. Es l'unica graella que la conserva: a «/factures» i a «/prefactures» la mena es al detall de la fila des del 24/09/2026 (decisio de l'usuari, docs/22). Mateix motiu que «.cel-numero» —«.e-rowcell» va amb «white-space: nowrap» i «overflow: hidden», de manera que la segona linia no es partia sino que es tallava, i aixo no ho diu ni la consola ni cap asserció—. La classe no es comparteix perque el que hi ha a sota no es cap marca de correccio ni cap insignia: es text subordinat. «align-items: flex-start» perque l'«abbr» i el matis no s'estirin fins a l'altra punta de la cel·la, i «line-height» baix perque son dues linies dins d'una fila d'un llistat dens. */ .cel-tipus { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; white-space: normal; line-height: 1.2; } /* EL MATIS DE LA MENA: subordinat i neutre, i aquestes son les dues coses que no s'han de tocar. CAP COLOR PROPI. El groc voldria dir «hi ha feina» i el verd ja vol dir «acceptat per l'AEAT»; una factura amb la casella marcada no es ni una cosa ni l'altra. La subordinacio la fan la mida i «alt2», que es el gris del tema —el mateix de «.marca-correccio»— i no cap gris nostre. ⚠️ I MAI «opacity». En fosc, un 0,75 damunt d'aquest gris fa caure el contrast per sota de 4,5:1 i no ho canta res: el color va sencer i qui decideix quant apagat es el tema. «nowrap» perque «art. 6.1.d» no es parteixi en dues linies dins de 80 px: son 10 caracters a 0,7 rem, que hi caben de sobres, i partit deixaria de llegir-se com una citacio. ⚠️ I ES UNA SOLA DECLARACIO PER A DOS NOMS. «.valor-subordinat» es el nom generic del mateix moviment —un valor que amaga una variant es matisa dins de la seva columna—, i el fa servir el descompte de linia sota el preu unitari de la graella d'un document. Amb dos blocs, el dia que algu toques un dels dos, les dues pantalles dirien la mateixa cosa de dues maneres i res no es tornaria vermell. «.matis-mena» conserva el nom perque «TriaDeFactures» i el detall de la fila de «/factures» l'anomenen, i dues proves hi busquen; el que no es podia era inventar-ne una segona aparença. Al detall, on va la frase sencera, «.detall-mena» li desfa el «nowrap». */ .matis-mena, .valor-subordinat { font-size: 0.7rem; color: var(--color-sf-content-text-color-alt2); white-space: nowrap; } /* LA CEL·LA DEL PREU UNITARI, QUAN LA LINIA PORTA DESCOMPTE. Es «.cel-tipus» girada cap a la dreta: la mateixa pila de dues linies, pero en una columna d'imports, que va alineada a la dreta. Sense «white-space: normal» la segona linia no es parteix, es TALLA —«.e-rowcell» va amb «nowrap» i «overflow: hidden»—, que es el mateix que ja li va passar a la segona marca sota el numero de factura i que no ho diu ni la consola ni cap asserció. «display: flex» i no «block» perque el matis ha de quedar sota la xifra i no al seu costat, i «line-height» baix perque son dues linies dins d'una fila d'una graella densa. */ .cel-preu, .cel-quantitat { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: normal; line-height: 1.2; } /* LA TAULA DE LÍNIES D'UN DOCUMENT (#562), la mateixa a la prefactura i a la factura emesa («LiniesDelDocument»). La classe la porta l'embolcall, que és nostre: el «CssClass» de l'SfGrid no arriba a ser cap classe. ⚠️ L'EMBOLCALL PORTA TAMBÉ «.graella-lectura» (docs/22 L1, #509), i d'allà li vénen l'alineació de les cel·les per la primera línia (L6), la descripció retallada de la prefactura («.text-retallat») i la fletxa del detall a dalt. Aquí n'hi havia una còpia de cadascuna, i dues còpies divergeixen sense cap vermella: el que queda és només el que és d'aquesta taula. */ /* EL NÚMERO, EN TEXT TERCIARI: és l'ordre del document, per referir-s'hi, i no una dada que es llegeixi. «alt3» és el gris més apagat del tema i passa 4,5:1 en clar i en fosc. */ .graella-linies-document .numero-linia { color: var(--color-sf-content-text-color-alt3); font-variant-numeric: tabular-nums; } /* LA D'UNA FACTURA EMESA, SENCERA I PARTINT LÍNIA: no hi ha cap vista on anar-la a llegir, i és el que diu el paper. */ .graella-linies-document .descripcio-sencera { display: block; white-space: normal; overflow-wrap: anywhere; } /* EL TIPUS, I EL TRACTAMENT A SOTA quan no és el corrent. A l'esquerra, com la columna del tipus del peu fiscal. El tractament és una frase —«E1 — exempta (art. 20)»— i parteix línia: amb el «nowrap» de «.valor-subordinat» se n'aniria fora de la columna. */ .cel-tipus-linia { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; white-space: normal; line-height: 1.2; } .cel-tipus-linia .tipus-linia { white-space: nowrap; } .cel-tipus-linia .tractament-linia { white-space: normal; } /* El que ha cedit a la tauleta, al detall: rètol i valor en una fila, com al de les factures. */ .graella-linies-document .detall-linia { display: grid; grid-template-columns: max-content max-content; gap: 0.15rem 1rem; margin: 0; font-size: 13px; } .graella-linies-document .detall-linia dt { color: var(--color-sf-content-text-color-alt2); } .graella-linies-document .detall-linia dd { margin: 0; font-weight: 400; } /* «165,29 sobre el marge»: a la columna van una sota l'altra; aquí, en una línia, i sense l'aire es llegien enganxats. */ .graella-linies-document .detall-linia dd .valor-subordinat { margin-left: 0.35rem; } .marques-numero { display: flex; flex-wrap: wrap; /* Prou separacio perque dues marques seguides no es llegeixin com una sola, i poca entre línies perque la fila no s'infli. */ gap: 1px 0.6rem; } /* Dins de la fila la separacio la fa el «gap»; el marge que la marca d'anul·lada duia per anar al costat del numero aqui la desquadraria. */ .marques-numero .marca-anullada { margin-left: 0; } /* UNA MARCA SOTA EL NUMERO POT FER DUES LINIES; MAI NO ES TALLA (#462). La regla general de «.marca-correccio» es «nowrap», que es el que vol una insignia dins d'una columna d'estats. Aqui no: la cel·la fa 200 px i «Factura con el abono por comprobar» no hi cap, i com que «.e-rowcell» va amb «overflow: hidden», el que no hi cabia no passava de linia sino que desapareixia a mig mot, sense cap error enlloc. El punt es queda a la PRIMERA linia i no al mig del bloc: «flex-start» i el marge que el centra dins d'una linia de text (1,5 em de «line-height» menys els 7 px del punt). Amb «center» quedaria entre les dues linies i no semblaria de cap. El «min-width: 0» deixa que la marca s'estrenyi fins a l'amplada de la cel·la: sense, un element flexible no baixa de l'amplada del seu text. */ .marques-numero .marca-correccio { align-items: flex-start; min-width: 0; max-width: 100%; white-space: normal; } /* «1lh» I NO «1.5em» (#502): l'alçada de LA SEVA línia, sigui quin sigui l'interlineat que li arribi. Amb «1.5em» el càlcul suposava un «line-height» que ningú no garantia, i quan canviava el punt baixava sense cap error. */ .marques-numero .marca-correccio::before { margin-top: calc((1lh - 7px) / 2); } /* ⛔ AQUI HI HAVIA «.marques-numero .marca-remissio», la remissio que demanava feina sota el numero quan la seva columna cedia a tauleta (#459). Des de la #502 la columna no cedeix —es l'estat, i L7 diu que no cedeix mai— i la marca ja no es dibuixa. */ /* Sense classe d'estat, la marca es del color del text de la cel·la: hi ha coses que no son ni bones ni dolentes —que una rectificativa rectifiqui, o que el registre vigent sigui una subsanacio— i pintar-les de qualsevol color les faria dir mes del que diuen. El punt les separa igualment del numero. */ .marca-correccio { color: var(--color-sf-content-text-color-alt2); } /* Cada estat porta tres coses i no una: el color del text —que es el que fa servir la insignia de la columna, amb el punt— i el parell fons/text amb que s'omple quan l'estat s'ha de veure ple, que es el pas actual del rastre. El parell surt del tema i no es cap barreja nostra: «--color-sf-*-bg-color» amb el seu «--color-sf-*-text», que en fosc ja es negre alli on el color s'aclareix. Omplir amb el color del text i prou deixaria les lletres del mateix color que el fons; per aixo son dues variables i no una. */ .estat-bo { --fons-estat: var(--color-sf-success-bg-color); --text-sobre-estat: var(--color-sf-success-text); color: var(--color-sf-success); } /* L'espera es l'unic estat que no te color propi: la insignia el vol gris —«pendent» no es cap alarma— i el gris no es pot omplir, perque es exactament el dels passos que encara no han arribat. Per al ple, doncs, l'informatiu del tema: es l'unica familia que no diu res dolent i que salta del fons en tots dos temes. El primari no, que es el color de les accions i un galo ple d'indi al costat de la barra sembla un boto. */ .estat-espera { --fons-estat: var(--color-sf-info-bg-color); --text-sobre-estat: var(--color-sf-info-text); color: var(--color-sf-content-text-color-alt2); } .estat-avis { --fons-estat: var(--color-sf-warning-bg-color); --text-sobre-estat: var(--color-sf-warning-text); color: var(--color-sf-warning); } /* La variable del tema es «danger» i no «error»: «--color-sf-error» no existeix a cap dels dos fulls de Tailwind 3, i una variable que no existeix no dona cap error —el color simplement no s'aplica—, de manera que els dos estats mes greus del llistat es pintaven del color del text del voltant. */ .estat-greu { --fons-estat: var(--color-sf-danger-bg-color); --text-sobre-estat: var(--color-sf-danger-text); color: var(--color-sf-danger); } /* LA LÍNIA BASE D'UNA LLISTA, EN TEXT NEUTRE (L5 de docs/22, #502). «Acceptat per l'AEAT» a una fila de «/factures» o del tauler: el que passa gairebé sempre no porta color, i el verd es queda per a la barra de la fitxa i el rastre, que parlen d'un sol registre. Continua sent «.estat» —les proves i el xip de la situació llegeixen la mateixa peça—, però sense el punt i amb el pes i el color del text de la cel·la: una paraula corrent, i no una insígnia. Va DESPRÉS de «.estat» i dels altres quatre, amb la mateixa especificitat: guanya per posició (docs/22, «Quan una cosa no s'aplica»). */ .estat.estat-linia-base { font-weight: 400; color: var(--color-sf-content-text-color); } .estat.estat-linia-base::before { content: none; } /* El cami del registre cap a l'AEAT, en galons encadenats com al mockup. No hi ha cap separador escrit: la punta de cada galo ja diu cap on va, i el «›» que hi havia abans era decoracio que un lector de pantalla no havia de llegir enmig dels noms dels passos. */ .rastre-flux { display: flex; flex-wrap: wrap; align-items: center; /* Dos pixels i prou: els galons s'han de tocar per llegir-se com una cadena. Amb l'espai d'abans eren quatre etiquetes soltes. */ gap: 2px; margin: 0 0 0.9rem; padding: 0; list-style: none; } .rastre-flux .pas { display: flex; align-items: center; white-space: nowrap; } /* El retall va al cos i no al «li»: el fons el porta el cos, i retallar el «li» no dibuixaria cap punta. */ .rastre-flux .pas-cos { padding: 0.28rem 0.85rem 0.28rem 1.1rem; font-size: 0.72rem; font-weight: 600; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); } /* El primer no te mossa a l'esquerra: no ve de cap lloc. */ .rastre-flux .pas:first-child .pas-cos { padding-left: 0.85rem; border-radius: var(--radi-control) 0 0 var(--radi-control); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); } /* Els que ja son fets pesen; els que no han arribat, no. Els fons surten tots dos del tema i per tant en fosc segueixen sols. */ .rastre-flux .pas-fet .pas-cos { background-color: var(--color-sf-content-bg-color-selected); color: var(--color-sf-content-text-color); } /* «.pas-desconegut» hi va al costat i EXACTAMENT IGUAL, a posta: el galo de l'abono que es va demanar sense saber-ne el desenllac no es cap pas fet, pero tampoc no es un pas pendent —pendent es una afirmacio, i alla no se sap si el document existeix—. La classe es diferent perque el que diu es diferent; el color, no, pel mateix motiu que «ClasseRefacturacio» no obre cap tercer to: seria una distincio que nomes veuria qui distingeix colors. Qui separa els dos estats es el TEXT del galo. */ .rastre-flux .pas-pendent .pas-cos, .rastre-flux .pas-desconegut .pas-cos { background-color: var(--color-sf-content-bg-color-alt2); color: var(--color-sf-content-text-color-alt2); opacity: 0.7; } /* El d'ara va PLE del color del seu estat, com al mockup. Els tres grisos de la resta son variacions d'un mateix to i, entre ells, el pas fet cridava mes que el pas actual: la unica diferencia real era el pes de la lletra —700 contra 600, a 0,72 rem— i, en fosc, el fons de l'actual era fins i tot mes fosc que el dels que encara no han arribat. Les dues variables les posa la classe «estat-*» del «li», que es la mateixa que dona el color a la insignia de la columna: aixi el galo i la insignia no poden discrepar. La reserva val per si un dia arriba un pas actual sense classe d'estat. */ .rastre-flux [aria-current="step"] .pas-cos { background-color: var(--fons-estat, var(--color-sf-content-bg-color-selected)); color: var(--text-sobre-estat, var(--color-sf-content-text-color)); font-weight: 700; } /* EL DETALL D'UNA FILA: LES DADES A L'ESQUERRA I EL QR TRIBUTARI A LA DRETA. «minmax(0, 1fr)» i no «1fr» pelat: una pista de graella té «min-width: auto» i el que hi ha a dins —l'empremta, que són seixanta-quatre hexadecimals— la podria empènyer fins que la graella sencera es desplacés de costat. No dona cap error: només apareix una barra de desplaçament. */ .detall-remissio { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1.5rem; padding: 0.75rem 1rem; } .detall-remissio dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.5rem; margin: 0 0 0.75rem; } .detall-remissio dt { font-weight: 500; } .detall-remissio dd { margin: 0; } /* Els imports que no caben a la fila. Van amb el mateix tracte que tots els altres de l'aplicacio —xifres de la mateixa amplada i alineats a la dreta— perque son per comparar-los amb els de la factura, no per llegir-los. Les dues columnes son «auto auto» i no «auto 1fr»: amb «1fr» heretat de la regla de sobre, la xifra alineada a la dreta se n'anava a l'altra punta del detall i deixava de fer parella amb el seu retol. */ .detall-remissio .detall-imports { grid-template-columns: auto auto; justify-content: start; } .detall-remissio .detall-imports dd { text-align: right; } /* EL MATIS DE LA MENA, AL DETALL DE LA FILA (24/09/2026): la frase sencera, a sota de la sigla i no al seu costat. Aqui no hi ha l'estretor de cap cel·la, de manera que el «nowrap» de «.matis-mena» —pensat per a l'article sol dins de 80 px— s'ha de desfer: la frase fa mes de cinquanta caracters i a 390 px sortiria del detall. El to i la mida continuen sent els de la regla compartida. */ .detall-mena .matis-mena { display: block; white-space: normal; } /* COM HA ESTAT CORREGIDA LA FACTURA: al detall de la seva fila i a la fitxa. Els numeros de les rectificatives van amb el mateix tracte que el numero de la fila —lletra de la mateixa amplada i seminegreta—, perque el que se'n fa es comparar-los amb els del paper. Cada referencia es un bloc que no es parteix: el numero i la mena (R1..R5) son una sola cosa i, partits, la mena d'una quedaria al costat del numero de la seguent. SENSE EL PREFIX «.detall-correccio», I NO ES CAP RELAXACIO. Acotada al detall de la fila, el bloc «Rectificada per» de la fitxa —que es la MATEIXA peca, amb el mateix marcatge— no pintava res i no donava cap error: els numeros sortien apilats i la mena al costat de la seguent. Es el simptoma corrent d'aquesta capa (docs/21-TRAMPES) i per aixo la peca viu al sistema i no a una pantalla. LA SEPARACIO LA FA EL CONTENIDOR i no un marge de la peca, que es el que «.marques-numero» ja fa: aixi a 390 px s'apila sola i no cal cap consulta de mitjans, i l'ultima referencia de la fila no arrossega un marge buit. */ .referencies-correccio { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; } .referencia-correccio { display: inline-flex; align-items: baseline; gap: 0.35rem; white-space: nowrap; } /* LA MENA DEL DOCUMENT, ON SIGUI QUE ES DIGUI. Al costat del numero d'una rectificativa i, des de la #58, tambe al costat de cada cami del flux de «rectificar i refacturar»: es la mateixa peca i s'ha de veure igual. */ .referencia-correccio abbr, .cami-flux abbr { font-size: 0.78em; color: var(--color-sf-content-text-color-alt2); text-decoration: none; } /* Els tres camins cap als altres documents del flux. Enllacos i no botons: van a una altra pagina i no fan res aqui, i al detall d'una fila tres botons pesarien mes que tot el que hi ha al voltant. */ .detall-correccio .enllacos-correccio { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0 0 0.75rem; } /* L'empremta son 64 hexadecimals i el CSV en te una vintena: en lletra proporcional no es poden comparar amb els de la seu electronica caracter a caracter, que es l'unica cosa que se'n fa. ELS TRES LLOCS ON SURTEN. Estava acotat a «.detall-remissio», i tant «Emesa.razor» com la fitxa d'una factura ja duien la classe sense que cap full la mires: l'empremta hi sortia proporcional i sense partir, de manera que estirava la pista de la graella. */ .detall-remissio .empremta, .detall-remissio .csv, .expedida .empremta, .fitxa-factura .empremta, .fitxa-factura .csv { font-family: var(--lletra-mono); word-break: break-all; } /* LA COLUMNA DEL QR. Acotada perquè l'avís de la factura anul·lada no li faci prendre amplada a les dades: sense el màxim, un paràgraf de dues línies estirava la pista «auto» fins a la meitat del detall. */ .detall-remissio .detall-qr { max-width: 14rem; } /* Arrambat a la dreta del tot, també quan l'avís de l'anul·lada fa la columna més ampla que el codi. */ .detall-remissio .detall-qr .qr-tributari { margin-left: auto; } /* L'avís que el cotejo d'una anul·lada respondrà «factura no trobada». Es diu amb text sencer i el color només acompanya, com els estats del llistat. Surt al detall d'una fila. A la fitxa de la factura, des de l'onada 3, és un «p» sense classe dins de la targeta del QR: allà és un fet i no cap avís. */ .detall-remissio .qr-avis { margin: 0.5rem 0 0; font-size: 0.72rem; line-height: 1.35; color: var(--color-sf-warning); } /* Per sota d'aquesta amplada el detall es desapila i el QR baixa a sota: el que li queda a la graella és l'amplada de la finestra menys el menú, i amb dues columnes els retols i els valors del detall es partien en dos renglons. Va després de les regles generals a propòsit: amb la mateixa especificitat guanya l'última, i posada abans no s'aplicaria mai. */ @media (max-width: 75rem) { .detall-remissio { grid-template-columns: minmax(0, 1fr); } .detall-remissio .detall-qr { max-width: none; } } /* ---- QR tributari (pantalla d'expedició i detall del llistat) ---- */ /* Una columna centrada: el títol a sobre del codi i «VERI*FACTU» a sota, que és l'ordre que demana l'especificació. «fit-content» perquè el centrat sigui dels tres elements entre ells i no del bloc dins de la pàgina: un «figure» a tota l'amplada deixaria el codi al mig de la pantalla d'expedició, lluny del text que l'acompanya. I el marge del navegador («1em 40px») fora, que no el volia ningú. */ .qr-tributari { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: fit-content; margin: 0 0 1.25rem; } /* EL MARGE BLANC DE SILENCI VA AQUÍ I NO AL «figure». El codi el dibuixa Syncfusion amb fons blanc i mòduls negres en tots dos temes —no els treu del full—, i la zona tranquil·la ha de ser del mateix color que els mòduls clars: amb el fons de la pàgina, en tema fosc el codi quedaria enganxat a un marc fosc i un lector el podria no trobar. El blanc surt del tema: «--color-sf-white» són els tres components, no un color, i per això va dins d'un «rgb()». 0,5 rem són vuit píxels, que és el mínim de 2 mm que demana l'especificació a 96 px per polzada. */ .qr-tributari .qr-codi { padding: 0.5rem; background-color: rgb(var(--color-sf-white)); border-radius: var(--radi-control); } /* EL QR DINS D'UNA TARGETA DEL RESUM (la fitxa d'una factura, onada 3): centrat a la targeta i sense el marge de baix, que hi posa el peu de la targeta. El marge blanc de silenci és el de sempre («.qr-codi»), i és el que el fa llegible en fosc. */ :where(.targeta-resum) > .qr-tributari { margin: 0.75rem auto 0; } /* El peu és obligatori i ha d'acompanyar el codi, no competir-hi. */ .qr-tributari .qr-peu { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-sf-content-text-color-alt2); } /* LA REGIO DE LA LLISTA: NO PARTICIPA EN LA DISPOSICIO. «RegioDeLlistat» hi es per DECLARAR en quin estat es la llista —carregant, buida o amb files— i no per dibuixar-la. Amb «display: contents» els seus fills queden exactament on eren, de manera que embolcallar una pantalla no en mou ni un pixel. NO ES CANVI ZERO DEL TOT, i val mes tenir-ho escrit que descobrir-ho: la regla «.contingut > p» es de FILL DIRECTE, i el «
» deixa de
ser-ho. Per a un «Carregant...» de mig segon no es veu, pero el dia que algu
posi un paragraf de veritat aqui dins, aquella amplada maxima no l'agafara. */
.llistat {
display: contents;
}
.paginacio {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
}
/* EL PEU D'UN LLISTAT (#507, «PeuDelLlistat»): el recompte a l'esquerra i, quan n'hi ha,
les pagines a la dreta, com al cercador ampliat dels selectors
(«.cerca-ampliada-paginacio»). */
.peu-llistat {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: 0.75rem;
}
.peu-llistat .recompte,
.peu-llistat .paginacio {
margin: 0;
}
/* ---- Anul·lació ---- */
.ajuda-externa {
display: flex;
flex-wrap: wrap;
/* Dos enllacos al peu i no un: el de l'anul·lacio externa i el del cens de
factures que demanen atencio. Sense el «gap» quedarien enganxats, perque
el blanc entre dos elements en linia no separa prou dues frases que
s'assemblen. */
gap: 0.25rem 1.5rem;
margin-top: 2rem;
color: var(--color-sf-content-text-color-alt2);
}
/* ---- El cens de factures que demanen atencio (#66) ---- */
/* Les quatre frases de l'estat buit, dins del missatge. Es el que es veu el
99 % dels dies i per tant el que ha de quedar be: interlinia normal i poca
separacio, que no son quatre paragrafs d'un text sino una sola resposta. */
.atencio-buit p {
margin: 0 0 0.4rem;
}
.atencio-buit p:last-child {
margin-bottom: 0;
}
.atencio-veredicte {
font-weight: 600;
}
/* EL NIF TAL COM VA QUEDAR ESCRIT, I QUE NO ES PERDI CAP CARACTER.
Monoespaiat pel mateix motiu que el CSV i l'empremta: en lletra proporcional
«B1234567I» i «B12345671» son indistingibles, i aquesta pantalla existeix per
veure aquell caracter.
«.e-rowcell» va amb «white-space: nowrap» i «overflow: hidden»: sense
tornar-li el partit, un NIF que no hi cabes es TALLARIA —i el que es perd son
els ultims caracters, o sigui el digit de control—. Amb el partit, el pitjor
cas es una segona linia. */
.nif-literal {
font-family: var(--lletra-mono);
white-space: normal;
word-break: break-all;
}
/* La sortida son dues linies: que fer, i per que es aquesta. Mateix patro que
«.cel-numero», i pel mateix motiu: la cel·la no parteix el text si no se li
diu. */
.cel-sortida {
display: flex;
flex-direction: column;
white-space: normal;
line-height: 1.25;
}
.cel-sortida small {
color: var(--color-sf-content-text-color-alt2);
}
/* El detall d'una fila: nomes on ha quedat el registre. Dues pistes i no una
llista apilada, que amb un sol parell seria una linia perduda al mig de la
taula. */
.detall-atencio dl {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin: 0;
}
.detall-atencio dt {
font-weight: 600;
}
.detall-atencio dd {
margin: 0;
}
/* L'ACCIO DE CADA FILA PASSA DE LINIA DINS DEL BOTO (#459). La columna fa 150 px i no 200:
a l'escriptori mes estret —1.201 px, 937 utils— la graella no hi cabia. «Rectificar i
refacturar» es l'unic retol que no hi cap sencer, i en comptes de fer creixer la columna
parteix en dues linies. «.e-rowcell» i el boto van amb «nowrap»: s'ha de desfer al boto,
i l'alçada fixa del tema, tambe, o la segona linia sortiria per sota de la vora. */
.graella-atencio .accio-atencio {
max-width: 100%;
height: auto;
white-space: normal;
line-height: 1.25;
text-align: center;
}
/* El peu no es cap introduccio: nomes hi es quan hi ha files, i explica quan
una factura deixa d'estar-hi. */
.atencio-peu {
margin-top: 1rem;
}
/* ---- La cadena de registres (#298) ---- */
/* El missatge de despres d'una accio que genera un registre (AvisDeLaCadena): l'entrada,
la llista de frases, el peu i l'enllaç. Poca separacio: es una sola observacio. */
.avis-cadena p,
.avis-cadena ul {
margin: 0 0 0.4rem;
}
.avis-cadena ul {
padding-left: 1.1rem;
}
.avis-cadena p:last-child {
margin-bottom: 0;
}
/* L'estat buit, amb la forma del d'«/factures/atencio». */
.cadena-buit p {
margin: 0 0 0.4rem;
}
.cadena-buit p:last-child {
margin-bottom: 0;
}
.cadena-veredicte {
font-weight: 600;
}
/* EL RESUM PER MENA, sobre la graella i de tota la finestra. Neutre: una anomalia no es
cap feina pendent. Una llista i no un text amb separadors escrits, perque cada mena es
llegeixi com una cosa. */
.resum-cadena {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.5rem;
list-style: none;
}
/* El numero del registre i, a sota i en text neutre, si es una anul·lacio o una
subsanacio. Mateix motiu que «.cel-numero»: la cel·la no parteix si no se li diu. */
.cel-registre {
display: flex;
flex-direction: column;
gap: 2px;
white-space: normal;
line-height: 1.25;
}
.cel-registre small {
color: var(--color-sf-content-text-color-alt2);
}
/* Una frase per anomalia, en linies separades i sense cap color. */
.frases-cadena {
display: flex;
flex-direction: column;
gap: 0.3rem;
margin: 0;
padding: 0;
list-style: none;
white-space: normal;
line-height: 1.3;
}
.cadena-retallada,
.cadena-peu {
margin-top: 1rem;
}
/* LA MENCIO DE LA FITXA, sota el «dl» del registre que la porta. Text normal i sense
color: no es cap defecte de la factura. */
.mencio-cadena {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.75rem;
margin: 0.5rem 0 0;
font-size: 0.85rem;
}
/* «.accio-anullar» ja no hi es: els tres botons que la duien —l'anul·lacio
externa, la prova i el tancament de les proves penjades— son ara «.peu-accions»
com la resta de peus de formulari, i d'alli en surten la separacio, el sentit
de lectura i la mida. */
/* ---- Avisos de caducitat i correu del sistema (#9) ---- */
/* El boto de provar el correu, separat de l'ajuda que l'explica. */
.accio-prova {
margin-top: 1rem;
}
/* Mateix motiu, i a mes: dins de «.camps» un sol camp s'endu la pista sencera,
de manera que una adreca de correu quedava en una casella de mil dos-cents
pixels. La mida es la de la taula de sobre, que es la mateixa seccio. */
.prova-correu {
max-width: 46rem;
}
/* LES ADRECES ADDICIONALS DELS AVISOS.
Acotat i no a l'amplada de la seccio (62rem): sense aixo, el camp d'adreces
feia mil pixels i, sobretot, el boto de desar —que va al peu, arrambat a la
dreta— quedava a l'altra punta de la pantalla que el camp que desa. La mida
es la de «.camp-ample», que es la que ja duen els camps de text llargs. */
.destinataris-avisos {
max-width: 46rem;
margin-top: 1.25rem;
}
/* LES LLISTES DE PARELLES DE LES PANTALLES DE L'OPERADOR: la configuracio del
correu i la identificacio del sistema informatic. Son taules i no graelles:
files fixes que no s'ordenen ni es filtren, i un SfGrid per a mitja dotzena de
files seria maquinaria per res.
Les dues comparteixen estil perque son la mateixa cosa —una dada i el seu
valor—, i tenir-ne dues copies acabaria amb dues pantalles que es semblen
pero no s'assemblen.
Els fons i les ratlles surten del tema, com els de la capcalera de les
graelles, perque en fosc segueixin sols. */
.parametres-correu,
.parametres-sistema {
border-collapse: collapse;
margin: 0.75rem 0;
max-width: 46rem;
}
.parametres-correu th,
.parametres-correu td,
.parametres-sistema th,
.parametres-sistema td {
padding: 0.4rem 0.9rem;
text-align: left;
border-bottom: 1px solid var(--color-sf-border);
}
.parametres-correu thead th,
.parametres-sistema thead th {
font-size: 12px;
background-color: var(--color-sf-content-bg-color-alt2);
}
/* El retol de cada fila es un «th» amb «scope», no un «td»: aixi qui llegeix
la taula amb un lector de pantalla sent de quin parametre es el valor. */
.parametres-correu tbody th,
.parametres-sistema tbody th {
font-weight: 500;
white-space: nowrap;
}
.parametres-correu small:where(:not([hidden])),
.parametres-sistema small:where(:not([hidden])) {
display: block;
color: var(--color-sf-content-text-color-alt2);
}
/* LA IDENTIFICACIO DEL SISTEMA INFORMATIC.
Acotades com la taula que porten a dins, pel mateix motiu que «.prova-correu»:
sense sostre, un paragraf de tres linies s'esten mil dos-cents pixels i deixa
de poder-se seguir amb la vista. */
.estat-sistema,
.entorn-sistema {
max-width: 46rem;
}
/* Que la pantalla nomes mira: es una advertencia de context i no una dada,
i per aixo va atenuada com les notes de sota dels valors. */
.nota-sistema {
color: var(--color-sf-content-text-color-alt2);
}
/* Les dues taules ocupen tota l'amplada de la seccio i no la del seu
contingut: son una sobre l'altra, i amb l'amplada natural la de l'entorn
acabava tres dits mes curta que la de la identificacio. Dues taules
consecutives desalineades es llegeixen com un error de dibuix. */
.estat-sistema .parametres-sistema,
.entorn-sistema .parametres-sistema {
width: 100%;
}
/* EL QUE HA DIT EL SERVIDOR, I NO ES TRADUEIX.
Es una pista de diagnostic i no text de producte: va en lletra de pas fix i
trencant per caracter, perque son missatges d'SMTP amb codis i adreces que
s'han de poder llegir sencers. */
.detall-tecnic {
margin: 0.5rem 0 0;
font-size: 0.85em;
}
.detall-tecnic code {
font-family: var(--lletra-mono);
word-break: break-all;
}
/* ---- Alta d'empreses (pantalla de l'operador del SaaS) ---- */
/* El resultat de l'alta va acotat com el formulari que l'ha produit: es text
seguit, i a l'amplada sencera de la pantalla les linies no es podrien seguir.
L'amplada es la de «.bloc-estret», que ja porta la seccio del formulari. */
.resultat-alta {
max-width: 46rem;
}
/* UNA CREDENCIAL QUE NOMES ES VEU UN COP.
Substitueix «.contrasenya-inicial», que nomes servia l'alta d'empreses: ara el
bloc es el mateix component («CredencialUnSolCop») als tres llocs on surt
—l'alta d'un usuari, el reinici de la seva contrasenya i l'alta d'una empresa—
i per tant tambe el mateix full.
Es l'unica cosa de tota l'aplicacio que no es pot tornar a consultar: no es
desa enlloc i el que queda a la base de dades es el resum d'Identity. Per aixo
te caixa propia i no es una linia mes del missatge d'exit. */
.credencial {
max-width: 46rem;
margin-top: 1rem;
padding: 0.75rem 1rem;
border: 1px solid var(--color-sf-border);
border-radius: var(--radi-superficie);
background-color: var(--color-sf-content-bg-color-alt1);
}
/* El bloc s'endu el focus en apareixer: sense l'anell, qui navega amb teclat
hi cau i no sap on es. */
.credencial:focus-visible {
outline: 2px solid var(--color-sf-primary);
outline-offset: 2px;
}
.credencial-titol {
margin-top: 0;
}
/* L'AVIS VA ABANS DEL SECRET, i el que el fa mirar es que porti el fons del
seu estat i no nomes lletra de color. Cap color escrit a ma: consumeix el
parell «--fons-estat»/«--text-sobre-estat» que posa «.estat-avis», com fa
«.avis-bloc» a les pantalles sense circuit. */
.credencial .credencial-avis {
margin: 0 0 0.75rem;
}
/* EL SECRET, I QUE ES PUGUI LLEGIR SENCER.
La lletra es de pas fix i prou grossa per copiar-la a ma sense confondre una
ela d'una u: son caracters triats a l'atzar i no cap paraula. «user-select:
all» fa que un sol clic l'agafi sencera, que es el que se'n fa.
MAI «text-overflow: ellipsis» NI «white-space: nowrap»: una contrasenya amb
punts suspensius es pitjor que cap, perque sembla sencera. Per aixo
«overflow-wrap: anywhere», que la parteix a la vista pero no se'n menja res. */
.credencial-valor {
margin: 0 0 0.5rem;
}
.credencial-valor code {
display: inline-block;
max-width: 100%;
padding: 0.3rem 0.6rem;
border: 1px solid var(--color-sf-border);
border-radius: var(--radi-control);
background-color: var(--color-sf-content-bg-color);
font-family: var(--lletra-mono);
font-size: 1.125rem;
letter-spacing: 0.05em;
white-space: normal;
overflow-wrap: anywhere;
user-select: all;
}
.credencial-copia {
margin: 0 0 0.75rem;
}
/* Que el navegador no hagi deixat copiar-la es un problema de veritat: qui ho
llegeixi ha de copiar-la a ma abans de sortir. */
.credencial-error {
margin: 0 0 0.75rem;
color: var(--color-sf-danger);
font-weight: 500;
}
.credencial-us {
margin: 0 0 0.75rem;
}
.credencial-sortides {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
/* LES ALTES A MITGES.
Una llista de blocs i no un «SfGrid», pel mateix motiu que la taula del correu
del sistema: son poques files que no s'ordenen ni es filtren, i cada una porta
a dins el rastre de set galons de la seva alta. En una graella, aquell rastre
hauria d'anar a un detall desplegable, i el que importa d'aquesta pantalla es
justament que on ha quedat cada alta es vegi sense obrir res. */
/* LA MATEIXA FORMA PER A LES DUES LLISTES DE FEINA PENDENT.
L'altra es la de les anul·lacions externes aturades («/factures/anulla»), i
comparteix les regles i no una copia: son la mateixa mena de cosa —una llista
curta de coses que algu ha de resoldre, cadascuna amb el seu motiu escrit a
dins— i amb dos jocs de regles el dia que una canvies l'altra quedaria enrere.
El que cada pantalla hi posa a dins si que es seu. */
.altes-pendents-seccio {
max-width: 62rem;
}
.altes-pendents,
.anullacions-aturades {
display: grid;
gap: 0.75rem;
margin: 0.75rem 0 0;
padding: 0;
list-style: none;
}
.altes-pendents > li,
.anullacions-aturades > li {
padding: 0.75rem 1rem;
border: 1px solid var(--color-sf-border);
border-radius: var(--radi-superficie);
background-color: var(--color-sf-content-bg-color);
}
/* El NIF i la rao social a l'esquerra i quan va comencar a l'altra punta, amb
«margin-left: auto» perque hi continui encara que la capcalera s'hagi de
trencar en dues linies. */
.alta-capcalera {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.3rem 0.9rem;
margin-bottom: 0.5rem;
}
/* El NIF es per comparar-lo amb el d'un altre lloc, caracter a caracter. */
.alta-capcalera .alta-nif {
font-family: var(--lletra-mono);
font-weight: 600;
}
.alta-capcalera .alta-rao {
font-weight: 600;
}
.alta-capcalera .alta-quan {
margin-left: auto;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.85em;
}
/* El que li falta, dit amb text sencer i amb la insignia al costat. El color
nomes acompanya: la paraula ja ho diu tot. */
.alta-falta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin: 0 0 0.6rem;
}
/* El peu de cada alta a mitges no separa tant com el d'un formulari: aqui el
boto tanca un bloc i no una pagina. */
.altes-pendents .peu-accions,
.anullacions-aturades .peu-accions {
margin-top: 0.25rem;
}
/* MENTRE L'ALTA TREBALLA, LA PAGINA S'HA DE VEURE TAPADA.
L'«SfSpinner» ja hi posa un plafo damunt del contingut —«e-spinner-pane», que
Syncfusion penja de «main.contingut» encara que el component s'escrigui a un
altre lloc—, pero el tema li deixa el fons transparent: el resultat era el
text d'espera flotant enmig de la pagina, sense res que digues que la pantalla
esta ocupada. Es va veure a una captura i cap asserció no ho hauria dit,
perque el plafo hi era i el text tambe.
Aqui el «CssClass» SI que arriba a ser una classe —a l'«SfGrid» i a
l'«SfSidebar» no—, i per aixo la regla es d'aquesta pantalla i no de tots els
spinners de l'aplicacio. El fons surt del tema amb «color-mix», que es el que
permet acolorir-lo sense escriure cap color a ma. */
.e-spinner-pane.espera-alta {
background-color: color-mix(in srgb, var(--color-sf-content-bg-color) 78%, transparent);
}
.e-spinner-pane.espera-alta .e-spin-label {
color: var(--color-sf-content-text-color);
font-weight: 500;
}
/* ---- Series i numeracio ---- */
/* L'ajuda de la gramatica del patro. Plegada de sortida: es llegeix un cop i
despres nomes prendria alcada a la pantalla que es fa servir cada dia.
Es un «details» nadiu i no cap component: s'obre amb teclat, el navegador el
troba en cercar dins de la pagina i no depen del circuit. */
.ajuda-fitxes {
max-width: 62rem;
margin: 0 0 1.5rem;
padding: 0.6rem 1rem;
border: 1px solid var(--color-sf-border);
border-radius: var(--radi-superficie);
background-color: var(--color-sf-content-bg-color-alt1);
}
.ajuda-fitxes > summary {
cursor: pointer;
font-weight: 600;
}
/* El de la variable del tema es massa fluix per a un anell de focus, com al
menu: qui es mou amb el teclat ha de veure on es sense buscar-ho. */
.ajuda-fitxes > summary:focus-visible {
outline: 2px solid var(--color-sf-primary);
outline-offset: 2px;
}
.taula-fitxes {
border-collapse: collapse;
margin: 0.5rem 0 1rem;
}
.taula-fitxes th,
.taula-fitxes td {
padding: 0.3rem 1rem 0.3rem 0;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--color-sf-border-light);
}
.taula-fitxes th {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-sf-content-text-color-alt2);
}
.exemples-patro {
display: grid;
gap: 0.35rem;
margin: 0;
padding: 0;
list-style: none;
}
.exemples-patro > li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem;
}
.exemples-patro .fletxa-exemple {
color: var(--color-sf-content-text-color-alt2);
}
/* EL PATRO I EL NUMERO, EN LLETRA DE PAS FIX.
Son cadenes que es comparen caracter a caracter —un zero de mes a la mascara
canvia tots els numeros de la serie—, com el NIF de l'alta d'empreses. */
.mostra-numero,
.patro-tancat,
.taula-fitxes code,
.exemples-patro code {
font-family: var(--lletra-mono);
}
.mostra-numero {
font-weight: 600;
}
/* LA CASELLA ON S'ESCRIU EL PATRO.
De pas fix i no de la lletra del tema: un patro es compara caracter a caracter
—un zero de mes a la mascara canvia tots els numeros de la serie— i les claus
i els dos punts s'han de distingir sense mirar-s'ho dos cops.
A la graella, a mes, mes petita: amb la mida del tema, el patro de sortida
—vint-i-quatre caracters— no cabia a la columna i es veia tallat justament
mentre s'escrivia. */
.camp-patro .e-input-group input.e-input {
font-family: var(--lletra-mono);
}
/* EL CODI CURT D'UNA MENA DINS DEL NUMERO.
De pas fix i amb caixa, com el patro: es el que escriu {DOC}, i el que
distingeix el numero d'un albara del d'una comanda es justament aquell tros. */
.codi-curt {
font-family: var(--lletra-mono);
font-size: 0.78rem;
padding: 0 0.25rem;
border: 1px solid var(--color-sf-border-light);
border-radius: var(--radi-control);
background-color: var(--color-sf-content-bg-color-alt1);
}
/* UN VALOR QUE NO ES POT CANVIAR, DIBUIXAT COM EL QUE ES.
El codi i el sentit no es toquen un cop la serie existeix. Una casella
apagada convidaria a provar-ho; el valor escrit i la nota del costat diuen
que no n'hi ha, de casella (regla 5 de docs/22). */
.valor-fix {
margin: 0;
padding: 0.3rem 0;
font-weight: 600;
}
/* A UNA FITXA MESTRA, UN VALOR FIX ES PARTEIX QUAN NO HI CAP, com l'«h1» que el repeteix
(revisió de l'onada 1, D1). El correu d'un usuari és un sol mot de 50 caràcters: a 390 px
la pàgina feia 524 d'amplada i es desplaçava de costat. «anywhere» i no «break-word»:
la casella és un element de graella, i només «anywhere» rebaixa l'amplada mínima que
la graella li respecta. On el valor té un punt natural per baixar —el correu, després
de l'«@»—, el marcatge hi posa un «wbr», i el navegador el prefereix a partir per dins.
Només a la fitxa mestra: a la d'un document hi ha valors fixos dins de files flexibles
que no s'han de poder estrènyer fins a una lletra. */
.fitxa-mestra .valor-fix {
overflow-wrap: anywhere;
}
/* LA GRAELLA DEL LLISTAT DE SERIES. */
.graella-series .e-grid .e-rowcell {
/* Les cel·les porten dues coses una sobre l'altra —l'estat i la marca de
proves, la mena i el seu codi curt—, i el centrat vertical del tema les
deixava desalineades entre columnes. */
vertical-align: top;
}
.graella-series .codi-serie {
display: block;
font-weight: 600;
}
/* EL NOM DE LA SERIE, SOTA EL CODI I EN TEXT SECUNDARI.
Els punts suspensius son NOMES per a aquesta segona linia: el codi no es
trunca mai, perque es el que obre tots els numeros que la serie ha
repartit i mig codi no identifica res. El nom, en canvi, el tria el
client i pot fer 40 caracters.
Si la serie no en te, aquesta linia no es dibuixa: cap «(sense nom)» i
cap repeticio del codi (docs/22, la regla de la insignia). */
.graella-series .nom-serie {
display: block;
overflow: hidden;
font-size: 0.82rem;
color: var(--color-sf-content-text-color-alt2);
text-overflow: ellipsis;
white-space: nowrap;
}
/* Les menes que la serie numera, una sota l'altra: son fins a cinc, i en
linia es llegirien com una frase. */
.graella-series .menes-serie {
display: flex;
flex-direction: column;
gap: 0.15rem;
white-space: normal;
}
.graella-series .mena-serie {
display: flex;
align-items: baseline;
gap: 0.35rem;
}
/* EL PATRO S'HA DE PODER LLEGIR SENCER, I POT FER 80 CARACTERS.
Amb el «nowrap» que el tema posa a les cel·les, «{CODI}-{DOC}-{ANY4}/…»
es veia tallat a mitja fitxa i sense cap punt suspensiu: semblava un
patró diferent del que hi ha desat. Es va veure en una captura i cap
asserció no ho podia veure, perque el text hi era sencer al document.
Els dos son «block» perque ara comparteixen cel·la —la columna
«Numeració»— amb l'exemple a dalt i el patro a sota: l'entrada i la
sortida de la mateixa cosa. */
.graella-series .patro-tancat,
.graella-series .mostra-numero {
display: block;
font-size: 0.82rem;
white-space: normal;
overflow-wrap: anywhere;
}
/* El patro es la segona linia de la cel·la i va en text secundari, com el
nom de la serie: el que es llegeix primer es el numero que en surt. */
.graella-series .patro-tancat {
color: var(--color-sf-content-text-color-alt2);
}
.graella-series .estat-serie {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
/* L'explicacio de per que una serie es tanca i no es treu. Sota la graella i
gris, com les ajudes dels camps: es text que es llegeix un cop. */
.ajuda-estat {
display: block;
max-width: 62rem;
margin-top: 0.5rem;
color: var(--color-sf-content-text-color-alt2);
}
/* ---- El cataleg d'articles ---- */
/* LA GRAELLA DEL LLISTAT D'ARTICLES.
Des de la #385 la cel·la de la descripcio en porta dues coses una sobre
l'altra —la descripcio i, a sota, la familia—, i el centrat vertical del tema
deixava les columnes desalineades entre elles. Mateixes regles i mateix motiu
que la graella de series. */
.graella-articles .e-grid .e-rowcell {
vertical-align: top;
}
/* LA FAMILIA, SOTA LA DESCRIPCIO I EN TEXT SECUNDARI, I MAI UNA COLUMNA
NOVA: les cinc columnes fixes d'aquest llistat ja sumen 500 px, i a 1.280
la descripcio es quedaria en 356.
NOMES LA FULLA i no la ruta sencera: aqui no hi ha amplada per a
«Botiga › Papereria › Llibres». Sencera es veu a la fitxa de l'article i
dins del menu del xip, que es on es tria.
⚠️ I SENSE FAMILIA NO ES DIBUIXA CAP SEGONA LINIA: cap «(sense família)»,
que ompliria la columna de soroll per a un camp opcional. Es la mateixa
regla que el nom d'una serie (docs/22, la regla de la insignia). */
/* La descripcio es la identitat de la fila i no es trunca: va dins de
l'ancora amb el codi al davant (#499, «.ancora-amb-codi» a dalt), i el que
es queda amb els punts suspensius es la familia, que es la segona linia.
⚠️ AMB «max-width: 100%», que la cel·la de l'ancora es «align-items:
flex-start» i sense sostre la familia no s'encongiria mai: els punts
suspensius no sortirien i la linia se n'aniria per la vora. */
.graella-articles .familia-article {
max-width: 100%;
display: block;
overflow: hidden;
font-size: 0.82rem;
color: var(--color-sf-content-text-color-alt2);
text-overflow: ellipsis;
white-space: nowrap;
}
/* LA TRIBUTACIO NO ES TALLA A MIG MOT (L3 de docs/22, #499). Amb el «nowrap»
i l'«overflow: hidden» de «.e-rowcell», «El que digui l'empresa per
defecte» sortia a 120 px com «El que digui l'em» i prou, sense ni punts
suspensius. Ara parteix per paraules, i si no hi cap en dues linies acaba
amb punts suspensius. */
.graella-articles .tributacio-article {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
white-space: normal;
overflow-wrap: normal;
}
/* La que no se separa de l'empresa es la linia base de gairebe totes les
files: es diu curt i en text secundari, i el que destaca es la propia. */
.graella-articles .tributacio-per-defecte {
color: var(--color-sf-content-text-color-alt2);
}
/* ==========================================================================
L'ARBRE DE FAMILIES DEL CATALEG (/articles/families)
⚠️ ES UNA LLISTA IMBRICADA NOSTRA I NO UN «SfTreeView», i els quatre motius
son mesurats al XML de la 34.2.3, no opinions (#385):
1. «LoadOnDemand» val TRUE per defecte: els fills NO son al DOM fins que
s'obre el pare. Una prova que compti nodes en veuria tres i no fallaria, i
el Ctrl+F del navegador no trobaria cap subfamilia.
2. «ExpandOn» val «DoubleClick»: qui hi fa un clic no obte res i conclou que
esta trencat.
3. Les icones del node les pinta el tema amb «content» i ENTREN al nom
accessible, que es la regla 4 de docs/22.
4. Entraria a la taula de docs/13 —una decisio nova amb manteniment— per no
guanyar res que aquestes vint linies no facin.
El precedent ja el va decidir «NavegacioPrincipal.razor»: enllaços de veritat
i no els nodes d'un arbre, que son els unics que un lector de pantalla
anuncia com a enllaços i els unics que s'obren en una pestanya nova.
⚠️ I ARROSSEGAR ESTA DESCARTAT: «AllowDragAndDrop» ja neix fals i no s'ha
d'encendre. No te equivalent amb teclat —la funcio quedaria fora de l'abast
de qui navega amb tabulador—, el gest es fa sense voler, i recalcula l'arrel
de tots els descendents, que amb la #382 decidira que diu una factura. Qui
mou una familia ho fa amb el desplegable de pare de la seva fitxa.
========================================================================== */
.arbre-families,
.arbre-families ul {
margin: 0;
padding: 0;
list-style: none;
}
.arbre-families {
max-width: 62rem;
}
/* DINS DE LA SUPERFÍCIE DEL LLISTAT (onada 5) l'arbre no és cap graella, i sense aire el nom de
cada arrel quedava enganxat a la vora de la targeta. El coixí és el de la cel·la d'una graella. */
.llistat > .arbre-families {
padding: 0.75rem 1rem;
}
/* EL SAGNAT EN «rem» I LA GUIA COM A VORA. Amb tres nivells com a maxim, un
nivell es una vora esquerra i un sagnat, i no cal cap imatge de fons ni cap
pseudoelement que despres s'hagi de mantenir. */
.arbre-families ul {
margin-left: 0.6rem;
padding-left: 1.1rem;
border-left: 1px solid var(--color-sf-border-light);
}
/* Nom, recompte i estat en una fila que pot passar avall: a 390 px el
recompte no ha d'estrenyer el nom fins a partir-lo lletra a lletra. */
.arbre-families .node-familia {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem;
padding: 0.35rem 0;
}
.arbre-families .nom-familia {
font-weight: 600;
}
/* EL RECOMPTE VOL DIR LA FAMILIA I LES QUE EN PENGEN, i es enllaç cap al
llistat acotat: ha d'obrir exactament els articles que promet. Va en text
menut perque el que es llegeix primer es el nom, i amb xifres tabulars
perque en una llista de vint nodes els numeros no ballin. */
.arbre-families .recompte-familia {
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
}
/* AMB CAP ARTICLE ES DIU AMB PARAULES I NO ES ENLLAÇ: un «0» premible porta
a una llista buida, que es un viatge per res. */
.arbre-families .cap-article {
color: var(--color-sf-content-text-color-alt2);
}
/* «Desactivada» ES UNA PARAULA I NO UN COLOR. Aqui no hi ha cap insignia:
una familia retirada no es cap avaria ni cap avis, nomes una cosa que ja
no s'ofereix, i pintar-la de taronja ho llegiria com un problema. */
.arbre-families .familia-desactivada {
font-size: 0.85rem;
color: var(--color-sf-content-text-color-alt2);
}
/* ---- Els usuaris d'una empresa ---- */
/* LA GRAELLA DEL LLISTAT D'USUARIS.
Les mateixes regles que la de series i pel mateix motiu: dues de les cel·les
porten dues coses una sobre l'altra —el rol i la marca d'unic administrador,
l'estat i el bloqueig— i el centrat vertical del tema les deixava desalineades
entre columnes. */
.graella-usuaris .e-grid .e-rowcell {
vertical-align: top;
}
/* EL BLOQUEIG ES UNA SEGONA INSIGNIA I NO UN TERCER ESTAT: un compte
bloquejat ES actiu i a mes te la porta tancada. Una sota l'altra, com fa el
llistat de series amb «Activa» i «De proves»; en linia es llegirien com un
sol estat compost que no existeix. */
.graella-usuaris .estat-usuari,
.graella-usuaris .rol-usuari {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
white-space: normal;
}
/* LA COLUMNA DE L'USUARI ÉS «CelaDePersona» (onada 5): el nom com a àncora, el correu a
sota fora de l'enllaç i en dues peces que no parteixen per dins (L3). Les regles són de
la peça, al bloc del sistema de fitxes; les que hi havia aquí («.ancora-usuari»,
«.nom-usuari», «.correu-usuari») se n'han anat amb el marcatge. */
/* Una dada i no cap estat: sense color ni insignia. El motiu i la sortida es
diuen a la fitxa, un sol cop. */
.graella-usuaris .unic-administrador {
color: var(--color-sf-content-text-color-alt2);
line-height: 1.25;
}
/* La situacio del compte a la fitxa: parells retol/valor, com les dades de
l'empresa a la fitxa d'una factura. */
.situacio-compte {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.3rem 1rem;
max-width: 46rem;
margin: 0.5rem 0 1.25rem;
}
.situacio-compte dt {
color: var(--color-sf-content-text-color-alt2);
}
.situacio-compte dd {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin: 0;
}
/* LES ACCIONS SOBRE EL COMPTE, AMB EL SEU MOTIU AL COSTAT.
VAN A UNA SECCIO A PART I NO AL COSTAT DE «Desa», i el full ho ha de sostenir:
«Desa» aplica el formulari i aquestes actuen de seguida contra el servidor. En
fila, sis botons farien invisible la diferencia mes important de la pantalla;
en llista, cada accio te el seu boto i el que fara escrit al costat.
Es una llista i no una graella: son de dues a cinc files que no s'ordenen ni
es filtren, com la de les altes a mitges. */
/* La seccio sencera s'acota com la fitxa que te a sobre: sense aixo, l'avis de
l'ultim administrador s'estirava fins al final de la pagina mentre tot el que
te a sobre s'atura a 52 rem, i la vora dreta quedava desparellada sense que
semblés volgut. Es va veure en una captura. */
.accions-compte-seccio {
max-width: 52rem;
}
.accions-compte {
list-style: none;
margin: 0.75rem 0 0;
padding: 0;
}
.accions-compte li {
display: grid;
/* El boto d'amplada fixa i el motiu amb el que sobra: amb «auto», els
botons quedaven de mides diferents i el motiu començava a un lloc
diferent a cada linia. */
grid-template-columns: 17rem minmax(0, 1fr);
align-items: center;
gap: 0.4rem 1rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--color-sf-border-light);
}
.accions-compte li:last-child {
border-bottom: none;
}
/* El boto s'estira fins a l'amplada de la columna: alineats a l'esquerra i
tots iguals, la columna del motiu es llegeix com una columna. */
.accions-compte .e-btn {
width: 100%;
}
.accions-compte .accio-motiu {
color: var(--color-sf-content-text-color-alt2);
}
/* SOBRE QUINA EMPRESA S'ESTA OPERANT.
Nomes a les pantalles de l'operador del SaaS, que no te cap obligat tributari
a la barra de dalt: alli l'error mes car es actuar sobre l'empresa
equivocada. */
.context-empresa {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
margin-bottom: 1rem;
}
.context-empresa .context-rao {
font-weight: 600;
}
.context-empresa .context-nif {
font-family: var(--lletra-mono);
color: var(--color-sf-content-text-color-alt2);
}
/* LES XIFRES QUE PORTEN AL FILTRE.
Una xifra que val zero deixa de ser enllac —es la regla del zero del tauler:
un enllac cap a un llistat que sortira buit es un cul-de-sac—, i per aixo la
diferencia entre les dues formes l'ha de fer el marcatge i no una classe: alli
on no hi ha enllac hi ha un «span», que no te ni «:hover», ni cursor de ma, ni
entra a la roda del tabulador. */
.xifres-acces {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin: 0 0 1rem;
padding: 0;
}
.xifres-acces span {
color: var(--color-sf-content-text-color-alt2);
}
/* LA GRAELLA DELS COMPTADORS DE LA FITXA D'UNA SERIE.
Porta els camps sempre oberts, com les taules de linies: son poques files on
el que es fa es teclejar-hi, i haver de picar cada cel·la per obrir-la seria un
clic per res. Cel·les alineades a dalt pel mateix motiu que la graella de
tipus: cada una en porta dues, el camp i el seu motiu. (Les menes eren una
altra graella fins a l'onada 1, i ara són files d'opció.) */
.graella-comptadors .e-grid .e-rowcell {
vertical-align: top;
padding: 8px 10px;
}
/* El patro no es pot tocar, el numero d'aquesta mena tampoc, o el minim amb
que pot continuar: notes que van a la mateixa cel·la i no a cap «title»,
perque un «title» no existeix per a qui navega amb teclat i aixo es
justament el que ha de saber qui volia canviar-ho. */
.graella-comptadors .terra-numero,
.graella-comptadors .numero-bloquejat,
.graella-comptadors .estat-comptador,
.patro-bloquejat {
display: block;
margin-top: 0.25rem;
font-size: 0.72rem;
line-height: 1.3;
color: var(--color-sf-content-text-color-alt2);
white-space: normal;
}
/* Xifres de la mateixa amplada: son per comparar-les entre files. */
.graella-comptadors .numero-seguent {
font-variant-numeric: tabular-nums;
font-weight: 600;
}
/* El numero que sortira d'aquesta fila. Sencer i partit si cal, com el
patro del llistat: son 60 caracters com a molt i no s'han de veure a
mitges. */
.graella-comptadors .numero-compost {
display: block;
font-size: 0.82rem;
white-space: normal;
overflow-wrap: anywhere;
}
/* EL CATALEG DE TIPUS IMPOSITIUS.
Mateix tracte que la graella de series i pel mateix motiu: camps sempre
oberts i cel·les amb dues coses una sobre l'altra —el nom i el retol amb que
es veura allà on es factura—, que amb el centrat vertical del tema quedaven
desalineades entre columnes. */
.graella-tipus .e-grid .e-rowcell {
vertical-align: top;
padding: 8px 10px;
}
/* Que es veura de veritat al desplegable d'una linia. Va a la cel·la i no a
un «title», com «.patro-bloquejat»: un «title» no existeix per a qui
navega amb teclat, i aixo es justament el que ha de saber qui ha entrat
aqui a canviar-ho. */
.graella-tipus .retol-mena {
display: block;
margin-top: 0.25rem;
font-size: 0.72rem;
line-height: 1.3;
color: var(--color-sf-content-text-color-alt2);
white-space: normal;
}
/* Les dues ajudes de sota la graella son text seguit i no dues meitats d'una
linia: sense el bloc, «small» es en linia i totes dues s'ajuntarien. */
.cataleg > small:where(:not([hidden])) {
display: block;
max-width: 62rem;
margin-top: 0.5rem;
color: var(--color-sf-content-text-color-alt2);
}
/* EL CATALEG DE TIPUS DE DESCOMPTE.
Mateix tracte que la graella de tipus impositius i pel mateix motiu: camps
sempre oberts i cel·les amb dues coses una sobre l'altra —el refus de sota el
camp, i la mena i el valor a la mateixa cel·la—, que amb el centrat vertical
del tema quedaven desalineades entre columnes.
⚠️ I EL «position: relative» NO ES CAP ADORN. Cada cel·la porta un rotul
«.visualment-amagat» —els controls d'una graella no reben el nom de la
capçalera—, i un «overflow» NOMES retalla un element absolut si es al seu
encadenament de blocs contenidors: sense aixo, un rotul d'un pixel i invisible
pot escapar-se de la caixa i EMPENYER EL DOCUMENT SENCER de costat, sense que
cap element surti per la dreta i per tant sense que cap asserció sobre rects ho
trobi mai (docs/21). Amb el «relative» posat, qui el retalla es la propia
cel·la. */
.graella-descomptes .e-grid .e-rowcell {
position: relative;
vertical-align: top;
padding: 8px 10px;
}
/* LA MENA I EL VALOR, A LA MATEIXA CEL·LA I DE COSTAT.
Van junts perque «un 5 %» NO SON DUES DADES: qui tria «percentatge» i no
escriu la xifra no ha dit res, i separar-los en dues columnes hauria costat
amplada a la del nom, que es l'unica sense mida fixa.
⚠️ I DE COSTAT, NO UN SOBRE L'ALTRE (#831). Fins al 20/10/2026 anaven apilats en
una columna de 220 px, i des que el Tab de la graella es del navegador (#823) es
va veure el preu: del valor, a la segona linia de la cel·la, el focus PUJAVA 43 px
fins a «Actiu», a dalt de la columna seguent —G9 de docs/22 no ho admet—. Abans
ningu no ho veia perque el Tab anava de cel·la en cel·la i no arribava a cap camp.
De costat, la fila es una sola linia i el Tab va d'esquerra a dreta sense pujar.
La columna fa 310 px: el desplegable hi te el que li queda —«Sense descompte»
sencer, en totes dues llengues— i el valor, 7 rem, on hi cap «99.999,99».
PER SOTA DE 45 REM, UN SOBRE L'ALTRE: la fila passa a vertical, la cel·la es un
bloc estret i «Actiu» va en un bloc propi a sota, de manera que alli apilar no
fa pujar el focus.
Cap color ni cap mida de control escrits aqui: els controls els posa el tema. */
.graella-descomptes .cel-quant {
display: grid;
grid-template-columns: minmax(0, 1fr) 7rem;
align-items: start;
gap: 0.35rem;
}
@media (max-width: 45rem) {
.graella-descomptes .cel-quant {
grid-template-columns: minmax(0, 1fr);
}
}
/* «Sense xifra: no s'oferirà als documents.» NO ES CAP REFUS I PER TANT NO ES
VERMELL: es el que passara, no el que va malament —el gris es el de les
ajudes de camp—. Mateixa forma que la nota del domicili dins de la cel·la
del destinatari, i pel mateix motiu: dins d'un «.e-rowcell» —«white-space:
nowrap» i «overflow: hidden»— una frase no es parteix, ES TALLA a mig mot i
sense punts suspensius, i aixo no ho diu ni la consola ni cap asserció. */
.graella-descomptes .motiu-fila {
display: block;
margin-top: 0.25rem;
font-size: 0.72rem;
line-height: 1.3;
color: var(--color-sf-content-text-color-alt2);
white-space: normal;
}
/* LA GRAELLA DE DESCOMPTES ES DESPLAÇA PER DINS ABANS QUE ESCANYAR CAP COLUMNA (revisió de l'onada 2).
Des que viu dins de la targeta del grup, a 1.201 px li queden uns 895 px útils, i les columnes en
demanen 1.000 (el nom, 200 com a mínim, i 300 + 310 + 90 + 100 fixes; 910 fins a la #831). Amb menys, Syncfusion les
escanyava totes a 200 px i «Quan s'aplica» —la que decideix si el descompte va a la factura o a una
rectificativa— quedava tallada. Amb el sostre mínim a la graella i el desplaçament a l'embolcall,
el que es desplaça és la graella, a dins de la targeta, i mai la pàgina. Per sota de 45 rem la
graella passa a files verticals i el sostre no hi pinta res. */
.graella-descomptes {
overflow-x: auto;
}
.graella-descomptes .e-grid {
min-width: 62.5rem;
}
@media (max-width: 45rem) {
.graella-descomptes .e-grid {
min-width: 0;
}
}
/* ---- Empreses del SaaS: el llistat i la fitxa de l'operador ---- */
/* Un enllaç amb aspecte de botó no ha de portar subratllat, sigui a la barra de
comandes o al peu d'una fitxa. La regla ja hi era per a «.barra-comandes» i
els peus de fitxa se n'havien quedat fora: el mateix control es dibuixava de
dues maneres segons on fos. */
a.e-btn.comanda {
text-decoration: none;
}
/* El NIF es per comparar-lo amb el d'un altre lloc, caracter a caracter, i a la
columna es recorre amunt i avall: xifres de la mateixa amplada. */
.graella-empreses .nif {
font-variant-numeric: tabular-nums;
}
/* A LA TARGETA DEL TELÈFON, UNA CEL·LA DE LÍNIA BASE NO ÉS CAP FILA (#508).
«.cel-linia-base» la posa «Saas/Llistat.razor» amb «QueryCellInfo» a les cel·les de
certificat i d'estat que queden buides perquè són la línia base (L5). A la graella de files
la cel·la buida es queda —és el que diu que no hi ha excepció—; a la targeta, en canvi,
seria un rètol sense valor. Només en mode targeta, doncs: «.e-row-responsive» és la classe
que Syncfusion posa a la graella en vertical.
El selector és el del tema més la classe de la graella i la nostra, perquè guanyi el seu
«td[data-cell]» per especificitat i no per sort (docs/21, «Els selectors del tema»). */
.graella-empreses .e-grid.e-row-responsive .e-gridcontent td[data-cell].cel-linia-base {
display: none;
}
/* Una fitxa no ha d'ocupar tota l'amplada de la pantalla: la mida surt de la
linia de text comoda i no de la finestra, com a la fitxa del client. */
.fitxa-empresa {
max-width: 52rem;
}
.fitxa-empresa .accions,
.fitxa-factura .accions,
/* La refactura: el peu de la que s'acaba d'expedir. Aqui hi havia tambe
«.rectificativa .accions» —el peu de «no consta aquesta factura» i el de la
rectificativa acabada d'expedir—, i la #293 ha esborrat aquella pantalla: la
drecera que ha quedat a «/factures/{id}/rectificativa» dibuixa un sol enllac
per refus i no en necessita cap reixa, igual que «Nova.razor». */
.refactura .accions {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0.75rem 0 1.25rem;
}
/* El boto que desa va arrambat a la dreta DEL CAMP que desa i no de la
fitxa: amb l'amplada sencera de la seccio quedava dos dits mes enlla del
final de la casella, i el que tanca el bloc s'ha de llegir com a seu. La
mida es la dels camps i les taules d'aquesta pantalla. */
.fitxa-empresa .peu-accions {
max-width: 46rem;
}
/* Les dades que nomes es miren, en parelles. Mateixa forma que el detall d'una
remissio: dues columnes, el retol amb mes pes i el valor al costat. La fitxa
d'una factura fa igual, i per aixo comparteixen regla i no en tenen dues. */
.dades-empresa,
.dades-factura {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.35rem 1.5rem;
margin: 0 0 1.25rem;
}
.dades-empresa dt,
.dades-factura dt {
font-weight: 500;
}
.dades-empresa dd,
.dades-factura dd {
margin: 0;
}
/* UN IMPORT D'AQUI NO S'ALINEA A LA DRETA, I EL QUE HO DECIDEIX ES EL
CONTENIDOR I NO LA XIFRA.
«.import» fa dues feines: «tabular-nums» —lletra de la mateixa amplada, que val
sempre— i «text-align: right», que nomes val dins d'una COLUMNA DE XIFRES. Aqui
la columna de valors no ho es: hi conviuen dates, numeros de serie i noms de
destinatari, tots arrencats a l'esquerra, i la pista «1fr» de la graella fa
set-cents pixels. L'import se n'anava sol a l'altra punta, a mig pam del seu
retol, i no fallava res.
PER QUE ADDITIVA I NO TREIENT RES:
— Treure «.import» del «dd» perdria «tabular-nums», que es el defecte invisible
que la regla unica de la classe (mes amunt) va anar a matar.
— Treure «text-align: right» de «.import» trencaria en silenci els llocs on
aquella es l'unica alineacio que hi arriba.
Amb 0,2,0 contra 0,1,0 aquesta guanya sense dependre de l'ordre del full.
⚠️ EFECTE LATERAL ACCEPTAT: els tres imports rectificats de la fitxa d'una
factura deixen de quadrar decimals entre si. Son tres dades de lectura que no se
sumen i conserven la lletra de la mateixa amplada. Si algun dia s'han de quadrar,
la sortida es TREURE'LS DE «.dades-factura» —una «dl» de dades no es un bloc de
totals—, no fer una excepcio a la classe. */
.dades-empresa .import,
.dades-factura .import {
text-align: left;
}
/* LES DUES LINIES QUE PENGEN DE LA MENA, A LA FITXA D'UNA FACTURA: la casella
que qui factura va marcar i el que aixo vol dir a l'hora de rectificar.
Son «span» i no «p» perque viuen dins d'un «dd», on un paragraf no hi cap
—el marcatge seria invalid i el navegador el treu del «dd»—, i per aixo el
salt de linia el fa el full i no l'etiqueta.
⚠️ CAP COLOR I CAP «opacity», com el matis del llistat: son text subordinat i
neutre, i el gris el tria el tema. La conseqüencia va una mica mes apagada que
la casella perque la casella es la dada i la conseqüencia n'es la lectura. */
.mena-casella,
.mena-consequencia {
display: block;
max-width: 46rem;
font-size: 0.85rem;
line-height: 1.35;
}
.mena-casella {
margin-top: 0.15rem;
}
.mena-consequencia {
color: var(--color-sf-content-text-color-alt2);
}
/* LA SEU D'ON VA SORTIR LA FACTURA, sota el domicili de l'emissor (#288).
Un «span» germa de «.domicili-emissor» i no fill: el domicili es el que el paper
deia, i la seu es el que se'n sap avui. Mateixa forma que les linies de la mena
—bloc, petita i gris— i pel mateix motiu: text subordinat, cap estat. */
.seu-emissor {
display: block;
max-width: 46rem;
margin-top: 0.15rem;
font-size: 0.85rem;
line-height: 1.35;
color: var(--color-sf-content-text-color-alt2);
}
/* L'explicacio que va sota un titol de seccio. Gris i acotada, com les ajudes
dels camps: es text que es llegeix un cop i despres nomes ocupa alcada. */
.ajuda-seccio {
max-width: 46rem;
color: var(--color-sf-content-text-color-alt2);
}
/* Els numeros d'instal·lacio i les subscripcions: taules i no SfGrid. Son una o
dues files que no s'ordenen ni es filtren, com els parametres del correu, i
una graella per a dues files seria maquinaria per res.
Els fons i les ratlles surten del tema perque en fosc segueixin sols. */
.taula-empresa,
.taula-factura,
/* LA TAULA VA A TOTA L'AMPLADA, COM LA FILA DE TARGETES DE SOBRE.
Hi havia DUES regles «.taula-darreres» amb «max-width» diferent —46 rem i 62—,
i guanyava l'ultima: la taula s'aturava a 992 px mentre les targetes arribaven
fins al final, i la vora dreta quedava desparellada sense que semblés
volgut. Ara n'hi ha una, i no acota res: la graella de «/factures» tampoc no
ho fa, i aquestes cinc files son la mateixa cosa vista de reüll. */
.taula-darreres {
width: 100%;
border-collapse: collapse;
margin: 0.5rem 0 1.25rem;
}
.taula-empresa th,
.taula-empresa td,
.taula-factura th,
.taula-factura td,
.taula-darreres th,
.taula-darreres td {
padding: 0.4rem 0.9rem;
text-align: left;
border-bottom: 1px solid var(--color-sf-border);
}
.taula-empresa thead th,
.taula-factura thead th,
.taula-darreres thead th {
font-size: 12px;
background-color: var(--color-sf-content-bg-color-alt2);
}
.taula-empresa code,
.taula-factura code {
font-family: var(--lletra-mono);
}
/* La cartera i la previsualitzacio dels venciments son mes estretes que la
taula de linies: son columnes curtes, i estirades a 46 rem deixaven les dates
i els imports a dos pams les unes dels altres.
VA DESPRES DE «.taula-factura» I NO ABANS, i no es cap detall: son dues
classes soles i per tant amb la mateixa especificitat, de manera que guanya
l'ultima. Escrita mes amunt, aquesta regla no s'aplicaria i no hi hauria cap
error enlloc (docs/22, «quan una cosa no s'aplica»). */
.taula-venciments {
max-width: 40rem;
}
/* Les darreres cinc de la portada porten cinc columnes —numero, data,
destinatari, import i estat— i les 46 rem de la taula d'una empresa les
deixaven estretes: el nom del destinatari i la insignia de l'estat es
trepitjaven. No es cap taula ampla per gust, es que te dues columnes mes.
VA DESPRES DEL GRUP I NO ABANS, com «.taula-venciments»: son classes soles i
per tant amb la mateixa especificitat, de manera que guanya l'ultima.
Escrita mes amunt no s'aplicaria i no hi hauria cap error enlloc. */
/* L'import a la dreta, capcalera inclosa: son per comparar-los amunt i
avall, no per llegir-los. El «th» ho ha de dir tambe, o la columna es
llegeix desquadrada. */
.taula-darreres .columna-import,
.taula-darreres td.import {
text-align: right;
}
.usuaris-per-rol {
margin: 0.5rem 0 1.25rem;
padding-left: 1.25rem;
}
/* Els botons del cicle de vida van junts i a l'esquerra: son accions de la
seccio, no el tancament d'un formulari. La mida es la de la resta de comandes
de l'aplicacio —la regla de «.barra-comandes .e-btn» els inclou—, o aquests
tres botons pesarien mes que el que desa la rao social. */
.accions-cicle {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
/* Mentre el cicle de vida treballa, la pagina s'ha de veure tapada. Mateix
motiu i mateixa recepta que «.espera-alta»: el tema deixa el plafo de
l'«SfSpinner» transparent i el text quedava flotant enmig de la pagina. */
.e-spinner-pane.espera-cicle-vida {
background-color: color-mix(in srgb, var(--color-sf-content-bg-color) 78%, transparent);
}
.e-spinner-pane.espera-cicle-vida .e-spin-label {
color: var(--color-sf-content-text-color);
font-weight: 500;
}
/* ---- Fitxa d'una factura emesa ---- */
/* EL TOPALL ES EL DE LA FITXA D'UN DOCUMENT PREPARATORI, i surt de la mateixa
variable («--amplada-fitxa», a «:root»): es el mateix document abans i despres
d'expedir, i s'ha de llegir amb la mateixa amplada.
Fins al 15 de setembre de 2026 eren 64 rem, 1.024 px, triats perque una linia
de nou columnes no es partis en dos renglons. Amb aquell topall, a 1.920 px la
descripcio d'una linia es quedava amb el que li deixaven 1.024 px mentre la
pantalla en tenia 1.656 d'utils. No actua fins passats els 2.024 px de finestra.
⚠️ CAP «overflow»: es ancestre de la barra enganxada. */
.fitxa-factura {
max-width: var(--amplada-fitxa);
}
/* Les taules d'aquesta pantalla no s'acoten a 46 rem com les de l'empresa:
alli son dues o tres columnes i aqui n'hi pot haver nou. Va DESPRES de la
regla compartida a proposit: comparteixen especificitat i li ha de guanyar
aquesta. */
.fitxa-factura .taula-factura {
max-width: none;
}
/* Els imports i els percentatges, alineats a la dreta: son per comparar-los
columna avall. Dues classes contra la classe i l'element de la regla
general, de manera que guanya sense dependre de l'ordre. */
.fitxa-factura .cel-import,
.refactura .cel-import {
text-align: right;
}
/* ⛔ AQUI HI HAVIA LA TAULA DE LINIES ESCRITA A MA, de vuit columnes. Des de la #562 les
linies d'una factura emesa les dibuixa «LiniesDelDocument», la mateixa graella que les
del document preparatori, i el seu estil es a «.graella-linies-document». */
/* La insignia de l'estat, just a sobre del rastre que l'explica. */
.fitxa-factura .estat-remissio {
margin: 0 0 0.5rem;
}
/* ⛔ AQUI HI HAVIA «.fitxa-factura .totals», que estilava des de fora un fill
intern de «PeuFiscal» —el que docs/22 prohibeix—. Els totals d'aquesta fitxa
ara els col·loca «.totals-document», com a la del document preparatori, i el
marge el porta el component. */
/* Les accions del peu, a la dreta com a la resta de formularis. El primer es
un enllac i el segon un boto, i han de fer la mateixa alcada. */
.fitxa-factura .peu-accions {
align-items: center;
}
/* El filet del retol de seccio i el rang de l'«h3» NO SON D'AQUESTA PANTALLA:
pengen de «.grup-caixa» i son a la seccio de la targeta d'un grup, mes avall.
Aqui nomes hi consta el punter, perque es aqui on algu els anira a buscar.
⛔ AQUI HI HAVIA LA TIRA ENGANXADA (#132) i el cap de fitxa «.resum-tira», i se
n'han anat alhora: la fitxa d'una factura porta ara la BARRA de la fitxa d'un
document preparatori («.barra-document», mes avall), amb l'index a la segona
linia. Tampoc no hi ha cap «scroll-margin» al titol del grup: els destins de les
dues fitxes descompten l'alcada MESURADA de la barra, i aquella regla, amb un
numero fix, era la que no valia per a una barra de dues files. */
/* ---- LA TARGETA D'UN GRUP ----
LA FAN SERVIR TRES PANTALLES: «Factures/Fitxa.razor» i «Prefactures/Fitxa.razor»,
quatre targetes plegables cadascuna, i «Configuracio/Fiscal.razor», quatre sense
plegar (#111). Tot el que hi ha escrit aqui val per a totes; el que nomes val per a
una va dit amb el seu nom.
QUATRE CAIXES I NO DOTZE, i el numero es tota la decisio.
A les seccions d'aquestes fitxes ja hi viuen «SfMessage», «.avis-bloc» i el
«.peu-tancat», que porten TOTS vora i fons propis. Amb una caixa per seccio,
la primera factura amb un avis ensenyaria caixa dins de caixa. Amb una per
grup n'hi ha exactament un nivell.
⚠️ I DOTZE CAIXES SERIA EL MATEIX ERROR QUE SET «h2» (:62): un remei repetit
dotze vegades torna a ser soroll. La regla que se'n treu, i que val per a tot
el producte: UNA TARGETA POT CONTENIR UNA CAIXA; UNA CAIXA NO POT CONTENIR
UNA TARGETA.
A LA FITXA DE LA FACTURA, l'index de la barra te quatre entrades i
«IndexDeLaFitxaTests» ho exigeix. Amb dotze caixes i quatre ancores, la unitat
que es veu i la que es navega serien coses diferents, que es la #132 al reves.
⚠️ PERO LA TARGETA NO DEMANA CAP INDEX, i la prefactura n'es la prova: hi porta
les targetes i NO porta index. El motiu es escrit a docs/22 —la fitxa de la
factura es de consulta i s'hi va a buscar una cosa diferent cada vegada; la d'un
preparatori es d'edicio, i les seves ancores ja son contextuals—, i qui ho reobri
hi ha d'anar abans.
⚠️ I A UNA PANTALLA D'EDICIO, CAP TARGETA NO POT NEIXER NI MORIR. Els quatre
grups de la prefactura son incondicionals i el que neix i mor va DINS d'un que
ja hi es: una targeta que apareix hi dibuixa una aresta, un radi i dos coixins
mentre les mans son en un altre camp. Tampoc aixo es al full, que no ho pot
fer complir: es a docs/22 i al marcatge.
⚠️ EL FONS ES EL DE LA PAGINA I NO «alt1», al contrari que «.bloc-desviament»
i «.peu-tancat». El motiu ja es escrit al peu fiscal: un fons alternatiu en
tema fosc es MES CLAR que la pagina, i el bloc cridaria mes de nit que de
dia. Aquelles dues poden permetre-s'ho perque son petites i han de cridar;
una targeta de dos mil pixels d'alcada, no. Aqui la jerarquia la fa el
contorn.
⚠️ I CAP «overflow», DE CAP MENA. Avui aquesta targeta no es ancestre de la
barra enganxada —la barra es germana seva i va per sobre—, pero el dia que algu
hi fiqui la barra a dins, un «overflow» aqui la desenganxaria SENSE CAP ERROR
ENLLOC. Ho vigila «LaTargetaDeGrupNoPortaOverflow». */
/* EL RADI I L'OMBRA SÓN ELS DEL SISTEMA DE FITXES (30/09/2026, decisió de l'usuari): 8 px i
l'ombra de superfície, a totes les targetes de grup del producte i no només a les fitxes
mestres. Fins aquell dia hi deia «border-radius: 4px», que era el del tema per la decisió
del 29/09/2026 («el radi de les targetes és el del tema»); docs/22 escriu la revisió amb el
motiu, a «Sistema de fitxes». */
.grup-caixa {
box-sizing: border-box;
margin-top: var(--espai-entre-grups);
padding: var(--coixi-targeta) var(--coixi-targeta-costat);
border: 1px solid var(--color-sf-border-light);
border-radius: var(--radi-superficie);
background-color: var(--color-sf-content-bg-color);
box-shadow: var(--ombra-superficie);
}
/* EL TITOL D'UNA TARGETA QUE NO ES PLEGA (#111). «/configuracio/fiscal» porta quatre
grups sense capcalera plegable, i el seu «h2» es el primer fill de la targeta: amb
el marge de dalt de l'«h2» global, el coixi de la targeta i aquell marge sumats
deixaven el titol mig rengle per sota d'on el posa «GrupPlegable». Dues classes
guanyen l'«h2» per especificitat i no per ordre (docs/22, trampa 4). */
.grup-caixa > .titol-grup {
margin-top: 0;
}
/* ⛔ AQUI HI HAVIA «.grup-caixa > .grup-fitxa», amb el marge de dalt del titol i el
seu «scroll-margin», i ja no encaixava amb res: les dues fitxes dibuixen el grup
amb «GrupPlegable», on el titol va dins de «.grup-capcalera». El marge el porta
«.grup-capcalera .grup-fitxa», i on aterra l'ancora —la VORA DE LA TARGETA, i no el
titol— ho diu la regla de «--alcada-barra-document». */
/* AL TELEFON, EL DESPLACAMENT DE LES ANCORES QUE NO SON D'UNA FITXA AMB BARRA.
«--desplacament-ancora» el fan servir el domicili fiscal, la fitxa del client i el
correu, que no porten cap barra enganxada: alla nomes cal descomptar la barra de
l'aplicacio i un coixi. Les dues fitxes amb barra el REDEFINEIXEN a la fitxa amb
l'alcada MESURADA de la seva barra (regla «ON ATERRA EL QUE S'HI PORTA», #563), que al
telefon val zero perque la barra hi es al flux: aquesta de l'arrel no hi arriba.
Va DESPRES de les regles generals a proposit: mateixa especificitat, guanya
l'ultima (docs/22, trampa 4). */
@media (max-width: 45rem) {
:root {
--desplacament-ancora: calc(var(--alcada-capcalera) + 0.75rem);
}
/* LA TARGETA PRIM DE COSTATS, QUE ALLA L'AMPLADA ES EL RECURS ESCAS.
A 390 px la pagina en te 366 despres del coixi del contingut; amb 1,25
rem a cada banda mes les dues vores, a dins en quedarien 324. Amb el
coixi estret en queden 340, i els setze que es guanyen son els que fan
que les taules —que van totes dins d'un «.taula-desplacable» i per tant
s'encongeixen amb el contenidor— no hagin de desplacar-se tant a dins.
⚠️ Aquest «@media» JA HI ERA: no s'estrena cap llindar, que es el que
«ElFullNoTeCapAltreLlindar» barra. */
.grup-caixa {
padding: var(--coixi-targeta) var(--coixi-targeta-estret);
}
}
/* ---- Rectificar i refacturar ---- */
/* El paper d'aquest document dins del flux, just a sobre del rastre que
l'explica. Mateixa forma que la insignia del registre, que es a un pam. */
.fitxa-factura .estat-refacturacio {
margin: 0 0 0.5rem;
}
/* Cada cami cap a un altre document del flux: l'enllac amb el numero a dins i la
mena al costat. MATEIXA PECA QUE «.referencia-correccio», i per aixo la mida i
el color de la mena surten de la SEVA regla —la de «.referencia-correccio abbr»,
que ara te els dos selectors—: son la mateixa cosa dita a dues pantalles, i el
dia que una canvii de to l'altra tambe. La linia de base tambe es la mateixa, i
alla es on importa: al detall d'una fila del llistat, aquesta peca i aquella
son una sota l'altra i una mena centrada al costat d'una d'ajaguda es veuria.
LA SERVEIXEN DUES PANTALLES amb dues formes d'enllac —a la fitxa son botons de
«.accions» i al detall de la fila son enllacos de text—, i per aixo la classe no
porta cap prefix: el que hi ha aqui val per a totes dues i la diferencia la posa
el contenidor.
SENSE «white-space: nowrap», QUE ES L'UNICA DIFERENCIA AMB AQUELLA. Alli el que
no s'ha de partir es un numero sol; aqui el retol es una frase, i a 390 px
«nowrap» impediria partir-la i empenyeria la pagina de costat. Que la mena no se
separi del seu enllac ho garanteix l'«inline-flex», que no te cap punt de tall
al mig. */
.cami-flux {
display: inline-flex;
align-items: baseline;
gap: 0.35rem;
}
/* ⚠️ I ELS CAMINS S'APILEN, QUE ES L'UNICA COSA QUE EL NUMERO OBLIGAVA A TOCAR
(#58). «.accions» es una fila sense «flex-wrap» i un «.e-btn» del tema porta
«white-space: nowrap»: el retol no es pot partir i el boto no pot encongir, de
manera que dos camins que abans deien «Ves a la factura original» i «Ves a
l'abono» hi cabien a 390 px i, amb el numero a dins, ja no. Es va veure en una
captura —el document media 481 px d'ample amb la finestra a 390— i NO DONAVA
CAP ERROR: cap prova no mira aquesta ruta amb la regla de no desplacar-se de
costat, perque «/factures/{id}» no es a «RutesDeLAplicacio».
VA DESPRES de la regla compartida de «.accions» i amb un selector mes
especific: comparteixen propietat i li ha de guanyar aquesta (docs/21). El
«row-gap» hi es perque, apilats, dos botons enganxats es llegeixen com un de
sol. */
.fitxa-factura .flux-refacturacio .accions {
flex-wrap: wrap;
row-gap: 0.5rem;
}
/* L'assistent de dos passos. Les taules del que s'expedira NO S'ACOTEN a 46 rem
com les de dues columnes de la fitxa d'una empresa: la de la reversio en te
sis, cinc d'elles d'imports, i alli els retols es partien en dos renglons. Va
DESPRES de la regla compartida a proposit: comparteixen especificitat i li ha
de guanyar aquesta. */
.refactura .taula-factura {
max-width: none;
}
/* Els dos passos son un rastre com el del registre, i el gruix el fa
«.rastre-flux»; aqui nomes se separa del que te a sobre. */
.refactura .passos-refactura {
margin-top: 1rem;
}
/* El descompte de tot el document del pas 2 (#326) ve just despres d'«Afegeix
una linia», i sense aire el seu boto de cataleg es llegia com un segon boto
de la mateixa barra: ho va ensenyar una captura. */
.refactura .descompte-capcalera {
margin-top: 1.25rem;
}
/* ESMENAR EL REGISTRE (/factures/{id}/esmena).
Els imports ja no hi son: «.import» es una regla sola per a tota l'aplicacio.
El que queda es el numero, que a mes va en negreta. */
.esmena .numero {
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.esmena .accions {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0.75rem 0 1.25rem;
}
/* La insignia de l'estat del registre, com a la fitxa. */
.esmena .estat-remissio {
margin: 0 0 0.5rem;
}
.esmena .empremta {
font-family: var(--lletra-mono);
word-break: break-all;
}
/* El peu, a la dreta com a la resta de formularis: el primer es un enllac i
el segon un boto, i han de fer la mateixa alcada. */
.esmena .peu-accions {
align-items: center;
}
/* L'HISTORIAL D'ALTES DE LA FITXA.
Nomes surt quan la factura n'ha tingut mes d'una, que vol dir que s'ha
subsanat. La fila de l'alta VIGENT es marca perque la taula esta ordenada per
posicio de cadena i no per «quina val»: sense la marca, qui la mires hauria
de saber que la que compta es l'ultima. La marca es un filet a l'esquerra i
un fons tenue, no negreta: el text ja ho diu tot i quatre columnes en negreta
competirien amb la insignia de dalt.
⛔ SENSE «margin-bottom» (#563): des que les altes son una «SeccioDeGrup», la separacio
de la seccio de sota la posa el «margin-top» d'aquella, i el d'aqui s'hi fusionava sense
afegir res. On si que afegia era quan les altes eren l'ultima seccio del grup: 20 px de
mes al peu de la targeta (ho va mesurar «drwfac-qualitat»). */
.altes-factura .taula-altes tbody tr.alta-vigent {
background: var(--color-sf-content-bg-color-alt1);
box-shadow: inset 3px 0 0 var(--color-sf-primary);
}
/* LA DECLARACIO CORREGIDA, A LA FITXA (#123).
Va just sota l'historial d'altes i respon la pregunta que aquella taula deixa
oberta —hi ha files que diuen «Subsanacio» i cap no diu per que—. Des de la
#563 es una «SeccioDeGrup» amb «h3», com les altes: el titol, el filet i la
separacio els posa la peca, i NO TE CAP REGLA PROPIA. El «margin-bottom» que hi
havia se'n va anar amb el de les altes i pel mateix motiu.
CAP COLOR PROPI. No es cap avis: que una factura tingui la declaracio
corregida no vol dir que hi hagi res malament —vol dir que ja s'ha arreglat—,
i pintar-ho competiria amb la insignia de l'estat del registre, que es al
mateix grup i si que diu gravetat. */
/* L'HISTORIAL: UNA ENTRADA PER CORRECCIO.
Sense pics ni numeros. Es un «ol» perque tenen ordre propi —la versio—, pero
el marcador del navegador diria «1.» al costat d'un titol que ja diu «De la
versio 1 a la 2», i serien dos numeros que no volen dir el mateix a un dit de
distancia. */
.historial-declaracio {
list-style: none;
margin: 0;
padding: 0;
}
/* LA SEPARACIO ES UN FILET NEUTRE I NO CAP COLOR, que es el que el bloc de
sobre ja te escrit: aixo no es cap avis. El filet es estructura —diu on
acaba una correccio i on comenca la seguent— i per aixo el porten totes
menys la primera, que ja te el «dl» dels dos numeros a sobre. */
.historial-declaracio .correccio-declaracio {
padding-top: 1rem;
}
.historial-declaracio .correccio-declaracio + .correccio-declaracio {
border-top: 1px solid var(--color-sf-border-light);
}
/* EL RETOL DE CADA CORRECCIO NO ES CAP TITOL (#563): es l'entrada d'una llista
ordenada, i el que encapcala el bloc es l'«h3» de la seccio. Pesa com a retol,
per sota del titol de la seccio. */
.historial-declaracio .titol-correccio {
margin: 0 0 0.5rem;
font-size: 14px;
font-weight: 600;
}
/* LA DATA I QUI, EN DUES COLUMNES. Mateixa forma que «.dades-factura», que es
com es diuen les parelles a tota la fitxa, pero amb regla propia perque nomes
hi van valors CURTS: el motiu i la descripcio, que son llargs, van a
«.declarat» i ocupen l'amplada sencera.
⚠️ «minmax(0, 1fr)» I NO «1fr» PELAT. Es la mateixa trampa que la pista de la
graella del llistat: amb «1fr» sol, un valor sense cap espai —un correu llarg
de qui va corregir— empeny la pista fins que la pagina es desplaça de costat,
i «CapPantallaNoEsDesplacaDeCostat» ho veuria sense dir d'on ve. */
.dades-correccio {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.35rem 1.5rem;
margin: 0 0 0.75rem;
}
.dades-correccio dt {
font-weight: 500;
}
.dades-correccio dd {
margin: 0;
overflow-wrap: anywhere;
}
/* EL MOTIU I LA DESCRIPCIO DE L'OPERACIO: APILATS I A TOTA L'AMPLADA.
Son text llarg —el motiu n'admet cinc-cents caracters— i en dues columnes el
retol marcaria l'amplada de la primera: a 390 px el motiu quedaria en una
columna d'un dit. Apilat, el retol fa de rotul i el valor te la linia
sencera. */
.declarat {
margin: 0 0 0.75rem;
}
.declarat dt {
margin-top: 0.5rem;
font-weight: 500;
}
.declarat dd {
margin: 0.15rem 0 0;
}
/* EL TEXT TAL COM ES VA ESCRIURE, I SENCER.
⚠️ NI PUNTS SUSPENSIUS NI «MOSTRA'N MES», i no es cap gust: el motiu es una
declaracio que qui la va fer ha de poder sostenir davant d'una comprovacio, i
un motiu truncat no serveix per a aixo. La sortida a un motiu llarg es com es
dibuixa i no escurçar-lo, i son tres coses:
- «pre-wrap» conserva els salts de linia que qui el va escriure hi va posar
—una consulta vinculant citada en dos paragrafs es llegeix en dos— i
continua passant de linia sol.
- «overflow-wrap: anywhere» parteix una paraula que no hi cap. Sense aixo, una
URL o una referencia llarga sense espais es el que desplaça la pagina de
costat, que es el defecte que aquest full ja ha tingut dues vegades.
- «max-width» a 46 rem, com «.ajuda-seccio»: una linia de text que travessa
64 rem no es llegeix.
«display: block» perque a la descripcio de l'operacio en van DOS dins d'un
sol «dd» —l'abans i l'ara— i han d'anar un sota l'altre. */
.text-declarat {
display: block;
max-width: 46rem;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* LA TAULA DEL QUE VA CANVIAR.
Es «.taula-factura» com totes les d'aquesta fitxa i no cap forma nova; nomes
cal que els valors no s'enganxin al de sobre quan un codi amb descripcio passa
de linia, i que la columna de la linia no es parteixi pel numero. */
.taula-correccio td {
vertical-align: top;
}
/* «JA HI CONSTAVA A L'AEAT»: el rebuig per duplicat.
Es informacio d'un registre que no es el nostre i per aixo va separada de les
dades del registre, amb el seu propi filet a l'esquerra. La peticio es un
identificador llarg i va en monoespaiada, com l'empremta i el CSV. */
.registre-duplicat {
margin-top: 0.75rem;
}
.registre-duplicat .peticio-duplicat {
font-family: var(--lletra-mono);
word-break: break-all;
}
/* El motiu pel qual el registre va quedar aturat, dins del dialeg que el torna
a la cua. Es text del servidor i no un retol nostre: en lletra petita i
apagada, perque el que mana al dialeg es el que passara. */
.confirma-reencuament .motiu-aturat {
margin: 0.5rem 0 0;
font-size: 0.8rem;
color: var(--color-sf-content-text-color-alt2);
}
/* «QUÈ ES RECTIFICA» I EL COBRAMENT JA NO PORTEN REGLA PRÒPIA (onada 4, #540): són «SeccioDeGrup»
amb «Ancora», i el destí d'una àncora —que el títol no aterri sota la barra i cap anell al voltant
de la secció— el posa la peça («.seccio-de-grup[tabindex]»). */
/* ⛔ AQUI HI HAVIA «.seccio-de-grup.linies[tabindex]» (i abans «section.linies»), amb un coixi de
mes sobre «--desplacament-ancora» per al bloc de linies, desti del tauler de pendents (#179).
No va manar mai: dins de la fitxa hi guanyava la regla «ON ATERRA EL QUE S'HI PORTA», que
compta la barra, i quan la #563 en va fer una «SeccioDeGrup» de tres classes va passar a guanyar
ella amb una variable que NO la comptava (revisio de qualitat de la #563). «#linies» aterra com
qualsevol altre desti de la fitxa, amb «--desplacament-ancora» redefinida a la fitxa. */
/* UN CAMP QUE ES DESTÍ D'UNA ÀNCORA.
N'HI HA DOS, I TOTS DOS SÓN A LA FITXA DEL CLIENT. Hi porten els refusos del
lliurament, i des de la #222 cadascun va al seu:
- «#llengua» — l'embolcall del desplegable de la llengua, a
«Components/Clients/CampsClient.razor». Hi arriba
«LaFitxaDelClientNoDiuLaLlengua», de la vista i de
l'enviament.
- «#consentiment» — l'embolcall de la casella de l'article 9.2, a
«Components/Clients/Consentiment.razor». Hi arriba
«EnviamentSenseConsentiment».
El tercer destí d'aquella fitxa NO és cap camp i té la seva regla aquí sota:
«#adreces», que és un títol. Fins a la #222 els tres refusos queien a
«#llengua» i per això aquest comentari deia «avui n'hi ha un»: era cert i el
defecte era justament aquell.
Mateixa parella de regles i MATEIXA VARIABLE que el domicili fiscal i que
«.rectificacio»: sense el «scroll-margin-top» l'àncora aterra tocant la vora
de dalt, o sigui sota la barra, i no hi ha res a depurar perquè no falla res.
⚠️ AQUÍ L'«outline: none» NO ES POT ESCRIURE COM ALS ALTRES DOS. Allà el destí
és una secció sencera i l'anell no diria res; aquí el destí és un camp, i qui
hi arriba amb teclat ha de veure ON ha caigut. El «tabindex=-1» hi és per
endur-se'n el focus i l'anell és exactament el que fa que serveixi. */
.camp-ancorat {
scroll-margin-top: var(--desplacament-ancora);
}
/* LES CATORZE OPERACIONS DE L'ARTICLE 4.2 DEL ROF.
VA FORA DE «.camps» I EN UN BLOC PROPI A SOTA. Dins de l'«auto-fit», un bloc
que neix al mig empeny de columna tot el que te darrere; nascut a fora,
l'unic que empeny es el boto de desar, que no s'esta omplint.
«fieldset» de veritat i no un «div» amb un titol: son catorze caselles d'una
sola declaracio, i sense la «legend» un lector de pantalla en llegiria
catorze de soltes sense saber de que son.
Tres columnes a partir de 1.200 px, dues a tauleta i una al mobil, sense cap
consulta de mitjans: ho fa l'«auto-fit» amb 20 rem de minim, que es el que
demana el retol mes llarg («Revelatge de fotografies i estudis fotografics»).
SENSE VORA NI COIXÍ PROPIS des de l'onada 2 (#538): el bloc viu dins del requadre tintat dels
dependents del supòsit («DependentsDelControl»), i una vora més seria caixa dins de caixa
(docs/22). L'aire el posa el requadre. «min-inline-size: 0» perquè el «fieldset» no s'estiri a
l'amplada del seu rètol més llarg i desbordi al telèfon. */
.operacions-42 {
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
}
.operacions-42 legend {
padding: 0;
margin-bottom: 0.5rem;
font-weight: 500;
}
/* EL RETOL LLARG PARTIA LA LINIA I DEIXAVA EL QUADRE SOL A SOBRE.
A 390 px, «j) Revelatge de fotografies i estudis fotografics» demana 312
px i al costat del quadre nomes n'hi caben 308: el retol es un
«inline-block» i, quan no hi cap, se'n va SENCER a la linia de sota,
arrambat a l'esquerra i desalineat amb els altres tretze. Cap assercio no
ho veu —les catorze caselles hi son i la pagina no es desplaca de costat—:
es va trobar mirant una captura.
LA CAIXA QUE MANA NO ES L'EMBOLCALL, I AIXO ES LA MEITAT DE LA TRAMPA.
«SfCheckBox» dibuixa «.e-checkbox-wrapper» amb UN SOL FILL, un «label»
sense classe, i el quadre i el retol son a dins d'aquell. Un «display:
flex» a l'embolcall no fa absolutament res —hi ha un sol fill— i no dona
cap error: cal anar al «label».
El retol vol «min-width: 0» perque un element flexible no encongeix per
sota del seu contingut minim si no s'hi diu, i sense aixo continuaria
sortint-se en comptes de trencar la linia. La segona linia queda sagnada
sota la primera, que es com s'ha de llegir.
⚠️ AIXO JA NO ES L'UNIC LLOC ON HI ES, i des de la #106 ja no cal aqui.
El remei es ara a la capa global —«UNA CASELLA ES UNA CASELLA A TOTA
L'APLICACIO», amb el motiu sencer i les dues cauteles—, perque el mateix
defecte es va destapar a 1.280 px al dialeg de l'abono i acotar-lo a una
classe volia dir que cada pantalla nova naixia trencada.
ES DEIXA, i les dues diferencies son a proposit:
· «display: flex» i no «inline-flex». Aqui el «label» es l'UNIC
contingut d'una pista de graella i no hi ha cap «text-align» que
l'hagi de centrar, de manera que fer-lo bloc no treu res. A la capa
global no es pot: hi ha cinc columnes de graella amb
«TextAlign.Center» que se n'anirien a l'esquerra.
· «line-height: 1.15» al rotul. Catorze rotuls de dues linies seguits
amb l'interlineat corrent fan una llista que no es llegeix com una
llista. Aixo NO puja: val per a un bloc concret, no per a totes les
caselles del producte. */
.operacions-42 .e-checkbox-wrapper > label {
display: flex;
align-items: flex-start;
}
.operacions-42 .e-checkbox-wrapper .e-frame {
flex: 0 0 auto;
}
.operacions-42 .e-checkbox-wrapper .e-label {
min-width: 0;
line-height: 1.15;
}
/* «min(20rem, 100%)» I NO «20rem» PELAT, i no es cap floritura: amb el minim
pelat, un contenidor mes estret que 20 rem no encongeix la pista —la deixa
a 320 px— i el que se'n va de costat es la PAGINA, que s'endu el menu i la
barra amb ella. A 390 px el bloc te uns 324 px de dins, o sigui quatre de
marge: ho hauria fet caure la primera vegada que algu toques el
farciment. Ho vigila «CapPantallaNoEsDesplacaDeCostat». */
.operacions-42 .operacions-graella {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
gap: 0.5rem var(--separacio-de-caselles);
}
/* PER QUE EL BOTO ESTA APAGAT, DIT ON ES MIRA.
Un boto apagat sense motiu deixa qui el mira igual que abans (docs/22). Te la
forma de l'ajuda d'un camp —mateixa mida i mateix gris del tema— perque es el
mateix registre: no es cap error de res, es el que falta per poder desar. */
/* ELS TIPUS DE FACTURA QUE ADMET UNA SERIE (#109).
«fieldset» amb la mateixa vora que les catorze operacions de «/configuracio/fiscal», i pel
mateix motiu: son caselles d'una sola resposta, i sense la «legend» un lector de pantalla
llegiria «F1», «F2» i «F3» soltes. La vora surt del tema; cap color escrit a ma.
TRES PISTES DE 16 REM, amb «min()» pel mateix motiu que alla: a 390 px una pista de minim
pelat no encongeix i el que se'n va de costat es la pagina. Cada casella viu al seu «.camp»
perque el motiu d'una casella apagada es el «> small[id]» que «ajuda-de-casella.js» hi lliga. */
.tipus-admesos {
max-width: 52rem;
margin: 1rem 0;
padding: 0.5rem 1rem 0.9rem;
border: 1px solid var(--color-sf-border-light);
border-radius: var(--radi-superficie);
}
.tipus-admesos legend {
padding: 0 0.35rem;
font-weight: 500;
}
.tipus-admesos .tipus-admesos-graella {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
gap: 0.5rem var(--separacio-de-caselles);
}
.motiu-declaracio {
margin: 0.6rem 0 0;
font-size: 0.8rem;
line-height: 1.4;
color: var(--color-sf-content-text-color-alt2);
}
/* LES ANUL·LACIONS ATURADES.
La forma dels blocs es la de les altes a mitges —les regles son compartides
alla dalt—; aixo es nomes el que hi va a dins.
L'AMPLADA ES LA DEL FORMULARI DE SOBRE i no la de les altes a mitges (62rem),
que es el que tenia al primer intent: la pantalla de l'anul·lacio s'acota
sencera a «.bloc-estret» perque els avisos, els camps i el peu comparteixin
una sola vora dreta, i una seccio mes ampla la trencava. No ho hauria dit cap
assercio; es veu a la primera ullada d'una captura. */
.aturades-seccio {
max-width: 46rem;
}
/* EL CAP DE CADA FILA.
AQUEST COMENTARI HAVIA PERDUT L'OBERTURA i el seu text feia de selector: la
regla de sota queia sencera i «.aturada-capcalera» no era cap flex —el numero,
la data i la posicio s'apilaven—. No donava cap error, que es exactament el
simptoma que descriu docs/21.
El numero i la data a l'esquerra i on es a la cadena a l'altra punta, amb
«margin-left: auto» perque hi continui encara que la capcalera s'hagi de
trencar en dues linies. */
.aturada-capcalera {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.3rem 0.9rem;
margin-bottom: 0.5rem;
}
/* El numero es el de la factura que el registre identifica i es compara
caracter a caracter amb el del document que es te al davant: monoespaiada,
com l'empremta i el CSV. */
.aturada-capcalera .aturada-numero {
font-family: var(--lletra-mono);
font-weight: 600;
}
.aturada-capcalera .aturada-posicio {
margin-left: auto;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.85em;
}
/* L'estat, amb text sencer i el color nomes acompanyant. */
.aturada-estat {
margin: 0 0 0.6rem;
}
/* Quan no hi ha ni error de l'AEAT ni motiu del darrer intent. No es cap avis
—no ha passat res de nou— pero la fila no pot quedar muda. */
.aturada-sense-motiu,
.aturada-remei {
margin: 0.5rem 0 0;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.85em;
}
/* L'ANUL·LACIO QUE NO HA ANUL·LAT RES, A LA FITXA DE LA FACTURA.
Les mateixes dues classes de dalt hi van a dins —el motiu que falta i el remei
d'una rebutjada son la mateixa cosa a les dues pantalles—; aixo nomes separa
el bloc del que te a sobre i a sota. No porta cap color propi: el que diu de
quina gravetat es son l'«SfMessage» i la insignia de l'estat, que surten del
tema. El boto de tornar-la a la cua ja no hi es des de l'onada 3: es una accio
de la zona immediata. */
.anullacio-sense-efecte {
margin: 1rem 0 0;
}
/* ==================== EL COMPTE PROPI (#13 i #15) ==================== */
/* UNA SOLA COLUMNA DE CAMPS, I ES UNA DECISIO I NO UN GUST.
«.camps» va amb «repeat(auto-fit, minmax(18rem, 1fr))», que dins d'un bloc de
46 rem hi posa DOS camps per fila. Per a tres caselles de contrasenya
—l'actual, la nova i la repetida— aixo es un error de veritat: no es
llegeixen com una seqüencia i qui les omple no sap quina acaba d'escriure.
Aqui la pista es una i el que mana es l'ordre. */
.camps-una-columna {
grid-template-columns: minmax(0, 1fr);
}
/* I EL FORMULARI SENCER S'ACOTA MES QUE «.bloc-estret».
Amb els 46 rem de «.bloc-estret», tres caselles de contrasenya feien 738 px
cadascuna. Una casella no es mes facil d'omplir per ser mes ampla; nomes fa
que el formulari no sembli compost, i deixa el peu d'accions a mig metre del
camp que tanca. Es el mateix criteri de «.camp-curt», aplicat al bloc perque
els botons hi vagin alineats.
Va DESPRES de «.bloc-estret» al full: mateixa especificitat, guanya l'ultima. */
.bloc-contrasenya {
max-width: 30rem;
}
/* SIS XIFRES NO VOLEN 738 PIXELS.
El codi de l'autenticador es un camp de sis caracters dins d'una pagina de 46
rem: sense acotar-lo, la casella feia tota l'amplada de la seccio i no
s'assemblava gens al que s'hi ha d'escriure. Els digits van de pas fix i
separats, com els imports, perque es llegeixin d'un cop. */
/* L'AMPLADA VA A LA CASELLA I NO AL CAMP SENCER: amb el «.camp» acotat a 10
rem, «Sis xifres. Canvia cada 30 segons.» es partia en dues linies dins d'un
canal de 160 px, i el retol d'ajuda no te cap motiu per encongir-se. */
.camp-codi .e-input-group {
max-width: 10rem;
}
.camp-codi input.e-input {
font-family: var(--lletra-mono);
font-size: 1.1rem;
letter-spacing: 0.25em;
}
/* LES REGLES DE LA CONTRASENYA, DITES ABANS D'ESCRIURE-LA.
Una llista i no una frase amb comes: son condicions que es comproven una per
una, i qui no en compleix cap ha de poder trobar quina li falta. Els numeros
no son aqui ni al RESX: surten d'«IdentityOptions». */
.regles-contrasenya {
margin: 0.25rem 0 0;
padding-left: 1.1rem;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.85rem;
line-height: 1.4;
}
/* Quan el que s'ha refusat son dues coses alhora, es diuen totes dues. Dins de
l'avis, que ja porta el fons del seu estat: la llista no en posa cap de nou. */
.avis-motius {
margin: 0;
padding-left: 1.1rem;
}
/* La sortida d'una pantalla sense sessio: «he oblidat la contrasenya», «torna a
l'inici de sessio». Dins de la caixa i sota el boto, perque es una sortida del
formulari i no una nota sobre el producte —aquella es «.entrada-peu», que va
fora de la caixa. */
.entrada-sortida {
margin: 0.9rem 0 0;
text-align: center;
font-size: 0.85rem;
line-height: 1.4;
}
/* QUI SOU, AL CAPDAMUNT DE LA PAGINA DEL COMPTE. */
.compte-identitat {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.3rem 0.5rem;
margin: 0 0 1.5rem;
color: var(--color-sf-content-text-color-alt2);
}
.compte-identitat .compte-nom {
color: var(--color-sf-content-text-color);
font-weight: 600;
}
/* El punt volat que separa les dades. Va «aria-hidden» al marcatge: no es cap
paraula i qui escolta la pagina no hi guanya res. */
.compte-separador {
color: var(--color-sf-content-text-color-alt2);
}
.compte-explicacio {
margin: 0 0 0.75rem;
line-height: 1.45;
}
/* L'ESTAT ES DIU AMB TEXT SENCER I EL COLOR NOMES ACOMPANYA (docs/22).
La insignia i el recompte de codis van a la mateixa linia perque es llegeixin
junts: «configurada» sense saber quants codis queden no diu si cal fer res. */
.compte-estat {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.75rem;
}
/* A zero codis, el recompte passa a ambre i el color li ve d'«.estat-avis»:
cap color escrit a ma. */
.compte-estat .compte-codis {
color: var(--color-sf-content-text-color-alt2);
font-size: 0.85rem;
}
.compte-estat .compte-codis.estat-avis {
color: var(--color-sf-warning);
}
/* ---- LA CONFIGURACIO DE LA VERIFICACIO EN DOS PASSOS ---- */
.dos-passos-avantatges {
margin: 0 0 1.25rem;
padding-left: 1.1rem;
line-height: 1.5;
}
/* ELS TRES PASSOS NUMERATS.
La numeracio la porta el TITOL de cada pas i no el marcador de la llista: els
titols son «h2» de veritat —qui recorre la pagina amb lector de pantalla els
ha de trobar— i un numero pintat per l'«ol» no entraria al titol. Per aixo la
llista no ensenya cap marcador i el numero es escrit al RESX. */
.passos {
list-style: none;
margin: 0;
padding: 0;
}
.passos .pas {
padding: 0 0 1.25rem;
border-bottom: 1px solid var(--color-sf-border-light);
}
.passos .pas:last-child {
border-bottom: none;
}
.pas-titol {
margin: 1.25rem 0 0.35rem;
font-size: 1rem;
}
.pas-ajuda {
margin: 0 0 0.9rem;
color: var(--color-sf-content-text-color-alt2);
line-height: 1.45;
}
/* EL QR I LA CLAU, DE COSTAT I TOTS DOS SEMPRE VISIBLES.
La clau NO va amagada rere cap «no puc llegir el codi»: molta gent mira
aquesta pantalla des del mateix telefon on te l'aplicacio d'autenticador, i
llavors el QR no serveix absolutament de res. Amb «flex-wrap», quan no hi
caben de costat la clau baixa a sota; no desapareix mai. */
.clau-autenticador {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1.25rem;
margin-bottom: 1rem;
}
/* El marge blanc de silenci va aqui i no al bloc: el codi el dibuixa Syncfusion
amb fons blanc i moduls negres en tots dos temes, i la zona tranquil·la ha de
ser del mateix color que els moduls clars. Es el mateix criteri —i el mateix
«rgb(var(--color-sf-white))»— que el QR tributari. */
.qr-compte {
flex: none;
padding: 0.5rem;
border-radius: var(--radi-control);
background-color: rgb(var(--color-sf-white));
}
.clau-text {
flex: 1 1 16rem;
min-width: 0;
}
.clau-text .clau-retol {
margin: 0 0 0.25rem;
font-weight: 500;
}
/* AGRUPADA DE QUATRE EN QUATRE I DE PAS FIX. Son trenta-dos caracters
seguits: sense els grups, copiar-la a ma es garantia d'equivocar-se, i
sense la lletra de pas fix no es distingeix una ela d'una u.
MAI «text-overflow: ellipsis»: una clau amb punts suspensius es pitjor que
cap, perque sembla sencera. Es el mateix criteri que «.credencial-valor». */
.clau-text .clau-valor {
margin: 0 0 0.6rem;
}
.clau-text .clau-valor code {
display: inline-block;
max-width: 100%;
padding: 0.3rem 0.6rem;
border: 1px solid var(--color-sf-border);
border-radius: var(--radi-control);
background-color: var(--color-sf-content-bg-color);
font-family: var(--lletra-mono);
font-size: 1rem;
letter-spacing: 0.05em;
white-space: normal;
overflow-wrap: anywhere;
user-select: all;
}
.clau-text .clau-copia {
margin: 0;
}
/* Tornar a començar amb una clau nova no es cap accio principal: qui hi arriba
ja te un QR bo a la pantalla i nomes la necessita si ha esborrat l'entrada de
l'aplicacio. Separada de la resta i sense el color del primari. */
.accions-secundaries {
margin-top: 1.5rem;
}
/* ---- ELS CODIS DE RECUPERACIO, DINS DE «.credencial» ---- */
/* DUES COLUMNES DE CINC I NO UNA LLISTA DE DEU.
Es la mateixa caixa i el mateix ordre que la contrasenya d'una alta —l'avis
primer, el secret, que en faig, les sortides—: l'unica cosa que canvia es la
forma del secret, perque son deu i no un.
De pas fix i amb el numero d'ordre: si algu en gasta un, ha de poder ratllar
del paper exactament aquell. */
.credencial-llista {
display: grid;
/* CINC PER COLUMNA I NO CINC PER FILA, i el numero d'ordre ha de correspondre
amb el que llegeix qui escolta la pagina: amb «grid-auto-flow: column» i
cinc files, l'ordre del document —que es 1..10— es el mateix que el de
baixar la primera columna i despres la segona. */
grid-auto-flow: column;
grid-template-rows: repeat(5, auto);
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.2rem 1.5rem;
margin: 0 0 0.75rem;
padding-left: 1.6rem;
}
.credencial-llista li {
line-height: 1.6;
}
.credencial-llista code {
font-family: var(--lletra-mono);
font-size: 1rem;
letter-spacing: 0.04em;
user-select: all;
}
/* IMPRIMIR ES UNA SORTIDA DE VERITAT, I PER AIXO EL FULL LA SOSTE.
Imprimir i desar el paper es el que la gent fa de debo amb deu codis de
recuperacio; no oferir-ho vol dir que faran una captura al telefon, que es el
pitjor lloc on desar-los. El que surt pel paper ha de ser el bloc i prou: la
barra de dalt, el menu i els botons no hi pinten res, i el fons de la caixa
gastaria tinta per no dir res.
No hi ha cap llindar d'amplada aqui: «@media print» no n'es cap. */
@media print {
.capcalera,
.menu-lateral,
.fons-calaix,
.franja-avis,
.salta-al-contingut,
#blazor-error-ui,
.credencial-copia,
.credencial-sortides,
.e-dialog,
.e-dlg-overlay {
display: none !important;
}
.contingut {
margin: 0 !important;
padding: 0 !important;
}
.credencial {
max-width: none;
border: none;
background: none;
}
}
/* LES ACCIONS SOBRE EL COMPTE, EN UN TELEFON.
VA AL FINAL DEL FULL I DESPRES DE LA REGLA GENERAL, i no es cap detall: una
consulta «@media» no afegeix cap especificitat i, amb la mateixa, guanya
l'ultima regla escrita. Posada al costat de la seva germana de dalt no
s'aplicaria mai i no hi hauria cap error enlloc (docs/22).
A 390 px la columna de 17 rem del boto es gairebe tota l'amplada i el motiu
quedava en un canal de quatre lletres. En una columna, cada accio es el seu
boto amb el motiu a sota, que es com es dibuixa tot el que es demana en
vertical a la resta de l'aplicacio. */
@media (max-width: 45rem) {
.accions-compte li {
grid-template-columns: minmax(0, 1fr);
}
}
/* ELS CODIS DE RECUPERACIO, EN UN TELEFON.
VA AL FINAL I DESPRES DE LA REGLA GENERAL, pel mateix motiu que la seva veïna:
una consulta «@media» no afegeix cap especificitat i, amb la mateixa, guanya
l'ultima regla escrita.
A 390 px dues columnes deixen cada codi en un canal de 150 px, i el que passa
no es que s'estrenyi: es parteix per la meitat i deixa de ser un codi. En una
columna hi caben sencers, que es l'unica cosa que importa d'aquesta llista. */
@media (max-width: 45rem) {
.credencial-llista {
grid-auto-flow: row;
grid-template-rows: none;
grid-template-columns: minmax(0, 1fr);
}
}
/* CAP DIALEG NO CAP A 390 PIXELS, I ES UN DEFECTE ANTERIOR A L'ALTA RAPIDA.
VA AL FINAL I DESPRES DE QUALSEVOL REGLA GENERAL, com les seves veïnes: una
consulta «@media» no afegeix cap especificitat i, amb la mateixa, guanya
l'ultima regla escrita.
La confirmacio d'expedir demana 32 rem —512 px— i el tema li escriu l'amplada
a l'atribut «style». Un «max-width» del full la retalla igualment: «max-width»
acota el «width» vingui d'on vingui, tambe d'un estil en linia. Sense aixo, a
390 px el dialeg sortia per la dreta i qui l'havia de confirmar no en veia el
boto.
I EL QUE ES DESPLACA ES EL COS DEL DIALEG, NO LA PAGINA. Un dialeg mes alt que
la pantalla deixava la capcalera i el peu —o sigui el titol i els botons— fora
de la vista, i el que se n'anava a buscar-los era el document sencer, que
s'endu el menu i la barra amb ell (docs/22, «una taula nostra es desplaca a
dins»).
Val per a TOTS els dialegs i no nomes per al de l'alta rapida: un pedac nomes
per al nostre deixaria la resta trencats i el dia que algu en fes un de nou
tornaria a passar.
AQUI NOMES HI QUEDA L'AMPLADA. El sostre d'alçada era tambe en aquest bloc i
no feia res: el tema l'escriu a l'atribut «style» i, sense «!important», un
«max-height» del full no el pot vencer —al contrari del «max-width», que
acota un «width» en linia perque son propietats diferents—. Ara es una regla
general amb «!important», al costat de «.resum-confirmacio», i val per a
totes les amplades i no nomes per al telefon. */
@media (max-width: 45rem) {
.e-dialog {
max-width: calc(100vw - 1.5rem);
}
/* LA CERCA AMPLIADA, A PANTALLA SENCERA: la decideix l'amplada («AmbElTall»), no el
dispositiu. Va DESPRÉS de la regla general, que l'acotaria a 1,5 rem de les vores. */
.e-dialog.cerca-ampliada-mobil {
width: 100vw !important;
max-width: 100vw;
height: 100dvh !important;
max-height: 100dvh !important;
border-radius: 0;
}
/* ⚠️ EL CONTINGUT NO VA ACOTAT COM ALS ALTRES DIÀLEGS: la regla general de sota el limita a
l'alçada de la finestra menys capçalera i peu, i el diàleg es quedava a 800 px dels 844 i
amb la graella escapçada (vist en una captura, 23/09/2026). Aquí la graella és la que es
desplaça, i el contingut ocupa el que queda. Més específica que la general, i per això
l'ordre no hi compta. */
.e-dialog.cerca-ampliada-mobil .e-dlg-content {
flex: 1 1 auto;
max-height: none;
}
/* ELS SELECTORS: files de 56 px, que és el que demana un dit, i la lletra del camp a 16 px,
que és el que evita que Safari faci zoom sol en entrar-hi. */
.e-dropdownbase .e-list-item:has(> .selector-opcio) {
min-height: 56px;
}
.selector-cataleg .e-input-group input.e-input {
font-size: 1rem;
}
.e-dialog .e-dlg-content {
overflow-y: auto;
/* El que queda del dialeg un cop hi caben la capcalera i el peu. Els
dos numeros son els del tema; si algun dia es mouen, el simptoma
es un dialeg amb el peu tocant la vora i no cap error. */
max-height: calc(100vh - 3rem - 7.5rem);
}
}
/* ==========================================================================
CORREGIR LA DECLARACIO D'UNA FACTURA EMESA (#118)
========================================================================== */
/* LA IDENTIFICACIO DEL DOCUMENT EN UNA SOLA FILA.
Substitueix el «dl» apilat de «Esmena.razor», que gastava tres linies d'alcada
per a tres dades que no canvien i que aqui nomes serveixen per saber quina
factura s'esta mirant. Els separadors son de CSS i no del marcatge: amb un
«·» escrit a la pagina, un lector de pantalla el llegiria. */
.resum-tira {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.9rem;
align-items: baseline;
margin: 0 0 1rem;
color: var(--color-sf-content-text-color-alt2);
}
.resum-tira .numero {
font-weight: 600;
color: var(--color-sf-content-text-color);
}
.resum-tira span + span::before {
content: "·";
margin-right: 0.9rem;
color: var(--color-sf-border);
}
/* LA TAULA AMB DOS DESPLEGABLES VIUS.
Es «taula-factura» amb dues columnes que s'escriuen, i no cap graella nova: la
fitxa de la factura ja dibuixa les linies aixi, i aquesta pantalla ha de ser
aquella taula amb dues columnes obertes. Un component de graella al costat es
veuria com una altra pantalla. */
.taula-declaracio td {
vertical-align: top;
}
.taula-declaracio .cel-import {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* LA FILA QUE S'HA TOCAT.
El filet es color i el color sol no el llegeix ningu amb un lector de
pantalla: sempre va acompanyat de «.valor-anterior», que ho diu escrit. */
.taula-declaracio .linia-tocada td:first-child {
box-shadow: inset 3px 0 0 0 var(--color-sf-primary);
}
.valor-anterior {
display: block;
margin-top: 0.25rem;
font-size: 12px;
color: var(--color-sf-content-text-color-alt2);
}
/* EL MOTIU D'UN CONTROL APAGAT, DINS D'UNA CEL·LA (#358).
«.ajuda-estat» és la classe del motiu al costat d'un control que s'apaga i no es
buida (docs/22, regla 5), i ve amidada per anar sota una graella: 62 rem d'ample i
el cos del text normal. Dins d'una cel·la ha de llegir-se com «.valor-anterior»,
que és el seu veí immediat, o la fila faria dos cossos de lletra diferents per a
dues notes que diuen el mateix mena de cosa.
L'especificitat ja hi és (0,2,0 contra 0,1,0) i no depèn de l'ordre. */
.taula-declaracio .ajuda-estat {
max-width: none;
margin-top: 0.25rem;
font-size: 12px;
}
.resum-canvis {
margin: 0 0 1.5rem;
font-size: 13px;
color: var(--color-sf-content-text-color-alt2);
}
.comptador-caracters {
float: right;
font-variant-numeric: tabular-nums;
}
/* EL DESVIAMENT: UN REFUS AMB LA SORTIDA A DINS.
No es cap «SfMessage», i no per gust: un missatge del tema no admet un boto
primari al cos, i un refus que TE sortida n'ha de portar una. Qui arriba aqui
no ha topat amb cap limit del programa —ha canviat d'operacio sense
adonar-se'n— i el que necessita es el cami cap a la rectificativa, no un
avis.
La regla general es a docs/22: «un refus que te sortida es dibuixa amb la
sortida a dins». */
.bloc-desviament {
margin: 0 0 1.5rem;
padding: 1rem 1.25rem;
border: 1px solid var(--color-sf-warning);
border-left-width: 4px;
border-radius: var(--radi-superficie);
background-color: var(--color-sf-content-bg-color-alt1);
}
.bloc-desviament .titol-desviament {
margin: 0 0 0.5rem;
font-weight: 600;
}
.bloc-desviament ul {
margin: 0 0 1rem;
padding-left: 1.25rem;
}
.bloc-desviament .accions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 0.5rem;
}
.bloc-desviament small {
color: var(--color-sf-content-text-color-alt2);
}
/* UN DESVIAMENT QUE VE DESPRÉS D'UN PEU D'ACCIONS, EL SEU AIRE A SOBRE (#522).
El desviament porta l'aire a sota i no a sobre, perquè normalment és el primer que es llegeix
d'un bloc; «.peu-accions» el porta a sobre i no a sota, perquè normalment tanca la pàgina. Quan
un peu tanca un bloc a mitja pàgina i un desviament ve després —a «/factures/proves», «Anul·la
les proves pendents» i, a sota, la sèrie de proves sense família—, cap dels dos no en posava, i
el requadre quedava enganxat al botó. El mateix 1,5 rem que el peu deixa a sobre i el desviament
a sota. Germà general i no adjacent: entremig hi ha les regions d'«AvisAccio», buides i amagades,
i potser un «SfMessage». Al flux de bloc es fon amb el marge de sota del germà que tingui al
davant, i no se suma. */
.peu-accions ~ .bloc-desviament {
margin-top: 1.5rem;
}
/* ==========================================================================
EL VEREDICTE DEL CENS DE L'AEAT
Es dibuixa a la fitxa d'un client i al formulari del destinatari d'un document
—i, fins a la #293, tambe dins de la cel·la de la graella de la rectificativa,
que demanava una regla mes per no menjar-se l'alcada de la fila—. Un sol
component i, per tant, un sol bloc de regles: amb tres, el mateix veredicte es
veuria de tres maneres.
========================================================================== */
/* EL BLOC NO NEIX NI MOR, nomes canvia el que porta a dins —el mateix criteri que
«.estat-desat»—, i va FORA de «.camps»: dins d'una graella «auto-fit» un
element que creix empeny de columna tot el que te darrere.
La reserva d'alcada es la mateixa idea que la de «.estat-desat»: sense ella, el
pas de buit a «Consta al cens» mouria la fitxa avall a cada comprovacio. */
.veredicte-cens {
margin: 0 0 1rem;
}
.veredicte-cens .veredicte-cens-diu {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
min-height: 1.5rem;
margin: 0;
}
/* La data va sempre amb el veredicte i amb la lletra de l'ajuda d'un camp: es
el mateix registre —no es cap veredicte, es quan es va dir—. */
.veredicte-cens .veredicte-cens-quan {
font-size: 0.8rem;
color: var(--color-sf-content-text-color-alt2);
}
/* El motiu de per que no s'ha preguntat res ja porta «.motiu-declaracio», que
es on viu aquell registre; aqui nomes se li treu el marge de sobre, que alla
existeix per separar-lo d'un boto. */
.veredicte-cens .motiu-declaracio {
margin-top: 0;
}
.veredicte-cens .accions {
margin: 0.5rem 0 0;
}
/* LA PROPOSTA DE NOM: L'ESQUELET DEL DESVIAMENT AMB TRACTAMENT NEUTRE.
Mateixa forma que «.bloc-desviament» —caixa, vora esquerra gruixuda, accions a
dins— i EL COLOR NO: alli la vora es d'avis perque hi ha hagut un refus, i aqui
no s'ha refusat res. El cens ha contestat i el que hi ha es una diferencia
d'escriptura que qui te la fitxa pot voler o no.
La caixa viu DINS d'un «SfMessage» d'avis, que ja posa el color al voltant: una
segona vora de color hi seria un marc dins d'un marc. */
.bloc-proposta {
padding: 0.25rem 0 0;
}
.bloc-proposta .titol-proposta {
margin: 0 0 0.5rem;
font-weight: 600;
}
/* ELS DOS NOMS L'UN SOBRE L'ALTRE I NO EN UNA FRASE: la diferencia pot ser una
coma —l'AEAT torna «DR WINDOWS, SL» quan li enviem «DR. WINDOWS SL»— i dins
d'un paragraf no es veuria. El retol de cada linia va amb la lletra de
l'ajuda i el valor amb la del text, que es el que fa que es comparin els
valors i no els retols. */
.bloc-proposta .proposta-noms {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.25rem 1rem;
margin: 0 0 0.75rem;
}
.bloc-proposta .proposta-noms dt {
font-size: 0.8rem;
color: var(--color-sf-content-text-color-alt2);
}
.bloc-proposta .proposta-noms dd {
margin: 0;
font-weight: 600;
}
.bloc-proposta .accions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 0.5rem;
}
.bloc-proposta small {
color: var(--color-sf-content-text-color-alt2);
}
/* EL NOM DEL CAMP QUE CANVIA, AL DAMUNT DE LES SEVES DUES VERSIONS (#103). La
proposta de perfil de l'alta rapida en porta un per camp que difereix, i cada un
va seguit de la seva «.proposta-noms»: aqui nomes se li treu el marge de
paragraf, que separaria el nom de les dues linies que anomena. */
.bloc-proposta .proposta-camp {
margin: 0 0 0.25rem;
}
/* QUI NO CONSTA AL CENS, DINS DE LA CONFIRMACIO D'EXPEDIR.
Una linia per destinatari amb el nom i el NIF. Va dins d'un «SfMessage» i
n'hereta el color; aqui nomes s'hi treu la sagnia de vinyeta, que dins d'una
caixa estreta empenyia el text contra la vora dreta. */
.cens-avis-qui {
margin: 0.25rem 0 0.75rem;
padding-left: 1.25rem;
}
/* EL LITERAL DE L'AEAT, ETIQUETAT COM A TAL.
Arriba en castella sigui quina sigui la llengua de la pantalla i es text d'un
tercer: sense dir de qui es, es llegia com un missatge nostre mal tradüit. */
/* LA CONSEQUENCIA D'UN VEREDICTE (#119).
Les dues classes NO SON DECORATIVES i no s'han d'esborrar per «no fer res»:
son el ganxo que deixa que una prova de navegador compari el que diu la fitxa
amb el que diu /factures/{id}/esmena de la MATEIXA factura, sense dependre del
marcatge intern d'SfMessage. Es la prova que tanca la #119.
El paragraf viu dins d'un SfMessage i n'hereta el color; aqui nomes s'hi
arregla el que el missatge del tema no dona: que dos paragrafs seguits no es
toquin. */
.consequencia-fet,
.consequencia-via {
margin: 0;
}
.consequencia-fet + .consequencia-via {
margin-top: 0.5rem;
}
.literal-aeat {
margin: 0 0 1rem;
}
.literal-aeat .retol-literal {
margin: 0 0 0.25rem;
font-size: 12px;
color: var(--color-sf-content-text-color-alt2);
}
.literal-aeat code {
font-family: var(--lletra-mono);
font-size: 13px;
}
/* L'ACCIO QUE NO VA AL PEU. Amb el registre acceptat i net, corregir la
declaracio hi es pero no com un boto: es una via que no repara res, nomes
esmena el que es declara, i al peu semblaria una de les vies de correccio. */
.accio-secundaria {
margin: 0.75rem 0 0;
font-size: 13px;
}
.resum-canvis-confirmacio {
margin: 0 0 1rem;
padding-left: 1.25rem;
}
.resum-canvis-confirmacio .canvi {
display: block;
font-size: 12px;
color: var(--color-sf-content-text-color-alt2);
}
.motiu-confirmacio {
padding: 0.6rem 0.9rem;
border-left: 3px solid var(--color-sf-border);
background-color: var(--color-sf-content-bg-color-alt1);
}
/* AL TELEFON, LA TAULA ES DESAPILA I NO ES DESPLACA DE COSTAT.
Amb dos desplegables per fila no hi ha manera que hi capiga, i una taula que
es desplaça horitzontalment amaga justament les dues columnes que s'han de
tocar. Cada linia passa a ser un bloc amb els retols a sobre, que surten de
«data-etiqueta».
⚠️ AMPLADA «auto» I NO «100%» (#604). Un bloc ja ocupa tota l'amplada del seu
pare; amb «width: 100%» i «content-box», en canvi, el farciment de cada cel·la
i la vora de cada fitxa S'AFEGEIXEN a aquell 100%, i a 390 px la pàgina es
desplaçava 18 px de costat amb les fitxes tallades per la dreta. «auto» no
suma res i no depèn del «box-sizing» de ningú. */
@media (max-width: 45rem) {
.taula-declaracio thead {
display: none;
}
.taula-declaracio,
.taula-declaracio tbody,
.taula-declaracio tr:where(:not([hidden])),
.taula-declaracio td {
display: block;
width: auto;
}
.taula-declaracio tr {
margin-bottom: 1rem;
border: 1px solid var(--color-sf-border);
border-radius: var(--radi-superficie);
}
.taula-declaracio td {
border-bottom: none;
}
.taula-declaracio td::before {
content: attr(data-etiqueta);
display: block;
margin-bottom: 0.2rem;
font-size: 12px;
color: var(--color-sf-content-text-color-alt2);
}
.taula-declaracio .cel-import {
text-align: left;
}
.taula-declaracio .linia-tocada td:first-child {
box-shadow: none;
}
.taula-declaracio .linia-tocada {
border-left: 3px solid var(--color-sf-primary);
}
}
/* ══════════════════════════════════════════════════════════════════════════
ELS DOCUMENTS PREPARATORIS: el llistat, la fitxa i la vista de linia.
VAN AL FINAL DEL FULL I LES SEVES CONSULTES DE MITJANS, DESPRES. Les regles
generals han d'anar abans que les «@media» que les puguin tapar: mateixa
especificitat, guanya l'ultima (docs/22). Cap selector d'aqui no existeix a
cap altra secció, de manera que res del que hi ha a sobre no hi arriba.
══════════════════════════════════════════════════════════════════════════ */
/* LA FILA D'UN DOCUMENT.
Una prefactura no te numero, de manera que el que la identifica es
destinatari + referencia + data. Els tres van a la mateixa cel·la i apilats:
amb la referencia en columna propia en serien una mes, i cada columna es
una fila mes a la targeta del telefon. */
.cel-document {
display: flex;
flex-direction: column;
gap: 0.15rem;
/* SENSE COIXÍ A DALT (onada 5, L6 de docs/22): des que «.graella-documents» és
«graella-lectura», el destinatari ha de començar a la mateixa alçada que les altres
cel·les, i els 0,15 rem de dalt el baixaven 2,4 px (mesurat; la tolerància és 2). */
padding: 0 0 0.15rem;
}
/* La referencia es text secundari: diu QUIN document es, pero qui recorre
la llista busca primer el destinatari. */
.cel-document .referencia-document {
font-size: 0.8rem;
line-height: 1.3;
color: var(--color-sf-content-text-color-alt2);
}
/* La insignia no s'estira: dins d'un contenidor en columna, un element de
bloc s'enduria l'amplada sencera i el color faria una franja. */
.cel-document .estat {
align-self: flex-start;
}
/* LA FILA MARCADA PER A UN LOT PORTA TINT PRIMARI I FILET A L'ESQUERRA; HOVER I ACTIVA
L'INTENSIFIQUEN, I MAI TORNEN AL GRIS (#460, docs/22).
Aqui la seleccio SI que actua —el lot expedeix el que hi ha marcat—, al contrari de les
graelles de camps oberts de la fitxa, que no la dibuixen (#138). La marca es d'ESTAT i no
de classe: la fila es marcada quan la seva casella ho es, i «.casella-lot» porta
«data-marcada» nomes aleshores. Aixi el que es veu i el que el lot expedira no es poden
separar, i no cal cap «RowDataBound», que nomes salta quan la graella es redibuixa.
⚠️ PER QUE «#contingut» AL DAVANT. El tema pinta el gris del hover amb un selector de
catorze classes —«.e-grid.e-gridhover:not(.e-rowdrag) .e-row:not(...):hover .e-rowcell:not(...)»
amb vuit «:not»— i el de la fila activa amb «.e-grid td.e-active» i la drecera «background»,
que a mes buidaria el filet. Cap cadena de classes raonable no hi arriba, i «!important»
en aquest full nomes es fa servir contra l'atribut «style» del JavaScript, no contra el
tema. L'identificador del contingut es on viu la graella de veritat, i la seva
especificitat guanya sense dependre de l'ordre ni de quantes classes afegeixi Syncfusion.
EL FILET ES UN DEGRADAT i no cap vora: una «border-left» mouria tres pixels la columna, i
una ombra es trepitjaria amb la del focus, que el tema dibuixa amb «box-shadow» inset a la
cel·la. Amb el degradat al fons, LA VORA DEL FOCUS DE TECLAT QUEDA PER SOBRE DE TOT. */
#contingut .graella-documents tr.e-row:has(.casella-lot[data-marcada]) > td {
background-color: var(--fons-fila-marcada);
}
#contingut .graella-documents tr.e-row:has(.casella-lot[data-marcada]):is(:hover, :has(> td.e-active)) > td {
background-color: var(--fons-fila-marcada-intens);
}
#contingut .graella-documents tr.e-row:has(.casella-lot[data-marcada]) > td:first-child {
background-image: linear-gradient(to right, var(--color-sf-primary) 3px, transparent 3px);
}
/* LA CEL·LA DEL COBRAMENT (#445): el primer venciment previst a dalt i la forma de
pagament a sota, apagada.
«.e-rowcell» va amb «white-space: nowrap» i «overflow: hidden», i LA FORMA HA DE PASSAR
DE LINIA I NO TALLAR-SE: els valors manen (docs/22). Es el mateix motiu que
«.cel-numero», i la mateixa cura. L'alçada de la fila ja la fixa el destinatari, que en
te tres (nom, referencia i insignia), de manera que dues linies aqui no la fan creixer. */
.cel-cobrament {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
white-space: normal;
line-height: 1.25;
}
/* La data i el «+2» separats: sense aixo es dibuixaven enganxats, «17/10/2026+2»
(vist en una captura el 24/09/2026). */
.cel-cobrament .cobrament-venciment {
display: inline-flex;
gap: 0.35rem;
}
.cel-cobrament .cobrament-forma,
.cel-cobrament .cobrament-sense {
font-size: 0.8125rem;
color: var(--color-sf-content-text-color-alt2);
}
/* «DESCOMPTA 145,20 JA COBRATS» (#626) PARTEIX DE LÍNIA: «.valor-subordinat» porta «nowrap», i dins de 150 px
es tallava a «ja cobr» (vist en una captura el 09/10/2026). Mateix motiu que la forma de sobre. */
.cel-cobrament .valor-subordinat {
white-space: normal;
}
/* EL DETALL DESPLEGABLE D'UN DOCUMENT (#445): el motiu, les linies, la forma i la taula
de venciments previstos. Parteix de linia pel mateix motiu que les cel·les: viu dins
d'una fila de la graella. */
.detall-document {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
padding: 0.75rem 1rem;
white-space: normal;
}
.detall-document .detall-motiu {
margin: 0;
}
.detall-document .taula-desplacable {
width: 100%;
}
/* Els imports a la dreta, capçalera inclosa: la regla de «.cel-import» va acotada a les
fitxes i aqui no hi arribava (vist en una captura el 24/09/2026). */
.detall-document .taula-venciments .cel-import {
text-align: right;
}
.detall-document .taula-venciments caption {
padding-bottom: 0.25rem;
font-weight: 600;
text-align: left;
}
/* EL PEU DELS VENCIMENTS, UNA SOLA FILA: «Total», o «Pendent» si una substitució descompta un cobrat de l'original
(#626). Sense cap vora: «.taula-factura» en posa una a sota de cada cel·la, i el tema hi afegeix la de l'esquerra
del «th» (vegeu sota), i la fila del peu quedava amb una ratlla només sota l'import i una altra a mig rètol. Amb
la regla, el peu es llegeix per la negreta del «th», com abans però sense aquelles dues ratlles.
⚠️ AMB «#contingut» A POSTA: el tema posa «border-width: 0 0 0 1px» a tot «th» de dins d'una graella
(«.e-grid.sf-grid.e-default table th:not(…)», especificitat 0,5,2), i el detall d'una fila n'és a dins. Sense
l'identificador la regla perdia per ESPECIFICITAT, sense cap error. No és la «regla tapada per ordre» de docs/22
(quan una cosa no s'aplica, punt 4): allà l'especificitat és la mateixa i guanya l'última; aquí cap ordre no
l'hauria salvat. */
#contingut .detall-document .taula-venciments tfoot :is(th, td) {
border-width: 0;
}
/* «DESCOMPTA 145,20 JA COBRATS» (#626) SOTA LA TAULA I ENGANXAT: és l'anotació del «Pendent» del peu, no un
paràgraf més. Parteix de línia: «.valor-subordinat» porta «nowrap», i al telèfon no hi cabria. */
.detall-document .detall-descompta {
margin: 0;
white-space: normal;
}
/* I la taula, sense el marge de sota de «.taula-factura» (1,25 rem) quan la segueix: amb ell, la frase quedava a
mig camí entre el «Pendent» i la nota, i no es llegia de ningú (vist en una captura el 09/10/2026). */
.detall-document .taula-desplacable:has(+ .detall-descompta) .taula-venciments {
margin-bottom: 0;
}
/* Una «dl» de dades i no de totals (docs/22): el valor comença on comencen tots. */
.detall-document-dades {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.35rem 1.5rem;
margin: 0;
}
.detall-document-dades dt {
font-weight: 500;
}
.detall-document-dades dd {
margin: 0;
}
/* LA BARRA DEL LOT (#445), ENGANXADA A BAIX.
Enganxada i no fixa: es queda dins de la regio del llistat, a sota de la graella quan
s'hi arriba i a baix de la finestra mentre no, i no ha de saber res de l'amplada del
menu. EL FONS NO ES DECORACIO: sense ell, les files que passen per sota s'hi veurien a
traves. I l'ombra es el text del tema barrejat amb transparent, que es veu als dos temes.
«z-index» 700, el de la barra de la fitxa: per sota del calaix del menu (900), del full de
cerca del mobil (880) i dels dialegs (1000). */
.barra-lot {
position: sticky;
bottom: 0;
z-index: 700;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
margin: 0.75rem 0 0;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-sf-border-light);
border-radius: var(--radi-flotant);
background-color: var(--color-sf-content-bg-color);
box-shadow: 0 -2px 8px color-mix(in srgb, var(--color-sf-content-text-color) 14%, transparent);
}
.barra-lot-recompte {
margin: 0;
font-variant-numeric: tabular-nums;
}
.barra-lot-fora {
margin-left: 0.5rem;
color: var(--color-sf-content-text-color-alt2);
}
.barra-lot-accions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* LA CONFIRMACIO DEL LOT: les garanties sota la taula, que es on es llegeixen un cop vist
el que s'expedira. */
.confirma-lot-garanties {
margin: 0.75rem 0 0;
padding-left: 1.25rem;
}
/* LA PAGINA D'UN LOT (#445). El motiu d'un refus es una frase i ha de poder partir. */
.lot-progres {
font-weight: 600;
}
.lot-grup {
margin: 1.5rem 0 0;
}
.taula-lot .cel-motiu {
min-width: 16rem;
white-space: normal;
}
/* LES ANOMALIES DE LA CADENA SOTA EL NUMERO D'UNA FACTURA DEL LOT (#298). Una linia
subordinada per frase, en text neutre: sense pindola ni groc, que una per factura faria
cridar la taula. El groc es queda al missatge de dalt de la pagina, que es on hi ha
l'enllaç. Text sencer, i parteix. */
.anomalies-subordinades {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 0.25rem;
font-size: 0.8rem;
line-height: 1.3;
white-space: normal;
color: var(--color-sf-content-text-color-alt2);
}
/* LES NOTIFICACIONS DE LA PERSONA (#445, docs/24 §10), a baix a la dreta.
FIXES I NO ENGANXADES: van al layout i han de sortir sigui a la pantalla que sigui. El
contenidor no rep cap clic —«pointer-events: none»— i nomes els avisos en reben: buit,
una capa fixa d'amplada sencera no ha de tapar res del que hi ha a sota.
«z-index» 950: per damunt del calaix del menu (900) i de les barres enganxades (700), i
per sota dels dialegs (1000), que tapen tota la pantalla a posta. */
.avisos-persona {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 950;
display: flex;
flex-direction: column;
gap: 0.5rem;
width: min(24rem, calc(100vw - 2rem));
pointer-events: none;
}
.avisos-persona .avis-persona {
pointer-events: auto;
border-radius: var(--radi-flotant);
box-shadow: 0 2px 10px color-mix(in srgb, var(--color-sf-content-text-color) 18%, transparent);
}
.avis-persona-frase {
margin: 0;
}
.avis-persona-accions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
margin: 0.5rem 0 0;
}
/* ── LA FITXA D'UN DOCUMENT PREPARATORI (#311) ──
Barra de comandes enganxada, tauler de pendents, camps de 18 a 24 rem i totals
sota les línies. El perquè de cada peça és a docs/22; aquí hi ha el que les fa
funcionar i el que les trenca sense cap error. */
/* EL TOPALL DE LA FITXA, alineada a l'esquerra, al costat del menú. No actua fins
passats els 2.024 px de finestra, i no li pren res a la graella de línies, que a
2.560 px en té 1.718 i en necessita uns 940 (docs/22).
SURT DE «--amplada-fitxa» I NO D'UN NÚMERO ESCRIT AQUÍ: la fitxa d'una factura
emesa porta el mateix topall, i el mateix document no s'ha de llegir amb dues
amplades abans i després d'expedir.
⚠️ CAP «overflow»: és ancestre de la barra enganxada, i un element «sticky» deixa
de funcionar si en té un a qualsevol ancestre, sense cap error enlloc. */
.fitxa-document {
max-width: var(--amplada-fitxa);
}
/* ON ATERRA EL QUE S'HI PORTA: sota la barra de l'aplicació i sota la de comandes.
VAL PER A LES DUES FITXES AMB BARRA, la d'un document preparatori i la d'una factura
emesa, i la llista és la mateixa que la de «GrupPlegable.razor.js», que és qui hi escriu
l'alçada: sense l'ancestre, el valor aniria a «» i aquí es llegiria zero.
«--alcada-barra-document» L'ESCRIU «GrupPlegable.razor.js» a partir de l'alçada MESURADA
de la barra, i hi escriu zero quan la barra no és enganxada. No és cap número triat:
a una tauleta la barra fa dues files, i amb l'error de desat també. Amb un número
escrit aquí, el destí d'un pendent aterraria tapat en algun d'aquests casos i no hi
hauria cap error enlloc.
ELS DESTINS SÓN ELS «id», ELS CAMPS I LES TARGETES: l'enllaç d'un pendent porta a
l'«input», però la vista es porta al «.camp» sencer perquè el rètol no quedi tapat; i
l'àncora d'un grup porta al seu títol, però la vista es porta a la VORA DE LA TARGETA,
que si no queda tapada sota la barra amb el coixí de dalt.
⚠️ «:is()» I NO DUES LLISTES: pren l'especificitat del seu argument més específic, que és
una classe, de manera que la regla pesa exactament el mateix que quan només mirava la
prefactura.
⚠️ EL CÀLCUL VIU EN UN SOL LLOC: «--desplacament-ancora», REDEFINIDA A LA FITXA (#563). Fins
llavors era aquí escrit com a «scroll-margin-top», i les peces amb «Ancora» —«SeccioDeGrup»,
«AccioImmediata», «TriaApilada»— porten la seva regla amb «var(--desplacament-ancora)», que no
comptava la barra. «.seccio-de-grup[tabindex]» pesa el mateix que aquesta i és més avall al full:
hi guanyava per ordre, i a 721 px «Línies», «Què es rectifica» i el cobrament aterraven amb el
títol sota la barra (ho va mesurar «drwfac-qualitat»). Amb la variable redefinida a l'ancestre,
TOTES les regles d'àncora diuen el mateix dins d'aquestes dues fitxes, i quina guanyi ja no
canvia res. La variable es redefineix al mateix element on «GrupPlegable.razor.js» escriu
«--alcada-barra-document», i per això la llista de fitxes és la mateixa. Ho vigilen
«GramaticaDeLesFitxesTests.CapScrollMarginOblidaLaBarraDelDocument» (sense navegador) i
«GramaticaDeLesFitxesAlNavegadorTests.CadaAncoraDUnaFitxaAmbBarraAterraSotaLaBarra». */
:is(.fitxa-document, .fitxa-factura) {
--desplacament-ancora: calc(var(--alcada-capcalera) + var(--alcada-barra-document, 0px) + 0.75rem);
}
:is(.fitxa-document, .fitxa-factura) :is([id], .camp, .grup-caixa) {
scroll-margin-top: var(--desplacament-ancora);
}
/* Reben el focus per poder anunciar-se, no per dibuixar cap anell al voltant d'una
caixa: el mateix criteri que «.contingut». Els tres de la factura són els destins de
la plaça de la barra, que porten «tabindex=-1» només per endur-se'n el focus. */
:is(.fitxa-document, .fitxa-factura) .zona-resposta:focus,
.fitxa-document .destinataris:focus,
.fitxa-factura :is(.registre-consequencia, .registre-motiu, .anullacio-sense-efecte):focus {
outline: none;
}
/* LA BARRA DE COMANDES DE LES DUES FITXES DE DOCUMENT.
LA DIBUIXA «Components/Fitxes/BarraDelDocument.razor» (lot 4a de la #773), i aquestes regles —i les seves germanes
del «@media (max-width: 45rem)», més avall— són les d'aquella peça. Es queden aquí i no al bloc de les peces a
posta: moure-les canvia l'ordre de la cascada, i el refactor havia de ser idèntic (docs/20, «El sistema es mostra
amb el codi»). «.barra-factura» és la variant de consulta, i es diu com es deia.
La va estrenar la fitxa d'un document preparatori (#311) i des de la segona passada la
porta també la d'una factura emesa, que hi afegeix l'índex i l'«h1» visible (regles de
«.barra-document-numero» i «.barra-document-index», més avall). Substitueix la tira
enganxada que aquella fitxa tenia, amb la mateixa mecànica:
- «top» és l'alçada de la capçalera i no zero: la barra de l'aplicació és «sticky»
també, i amb zero aquesta s'hi posaria a sota, tapada.
- EL FONS NO ÉS DECORACIÓ: sense ell, el que passa per sota s'hi veu a través.
- EL «z-index» ES PER SOTA DE TOT EL QUE SURA DE VERITAT: el calaix del menú (900),
el seu fons (899), el full de cerca del mòbil (880) i un «SfDialog» (1000).
FLEX I NO GRAELLA a l'escriptori, i és a posta: quan a una tauleta no hi cap, el grup
de la dreta baixa sencer a una segona fila i continua arrambat a la dreta, en comptes
d'estrènyer la identitat fins a zero. */
.barra-document {
position: sticky;
top: var(--alcada-capcalera);
z-index: 700;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
margin: 0 0 1rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--color-sf-border-light);
background-color: var(--color-sf-content-bg-color);
}
.barra-document a.comanda {
text-decoration: none;
}
.barra-document-torna {
flex: none;
font-size: 0.85rem;
}
/* LA IDENTITAT, EN DUES LÍNIES: què és i a qui va a dalt, l'estat del desat a sota.
«min-width: 0» perquè un fill flexible no baixa de la seva amplada de contingut, i
sense ell el nom llarg d'un client empenyeria els botons fora de la barra. */
.barra-document-identitat {
display: flex;
flex: 1 1 14rem;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.barra-document-qui {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
min-height: 1.5rem;
margin: 0;
}
/* LA INSÍGNIA I, SI N'HI HA, LA MARCA «ANUL·LADA» (onada 3, D9): totes dues senceres, i qui
s'encongeix amb punts suspensius és el nom de qui va. Amb dues, la fila no canvia d'alçada:
són de la mateixa lletra i en una sola línia. */
.barra-document-qui :is(.estat, .marca-anullada) {
flex: none;
}
.barra-document-qui .marca-anullada {
margin-left: 0;
}
/* PUNTS SUSPENSIUS PER DAMUNT DE 45 REM: l'alçada d'una barra enganxada ha de
ser estable, i un nom que passés de línia la faria créixer a cada document.
Per sota, al mòbil, baixa de fila sencer. */
.barra-document-client {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
}
/* EL GRUP DE LA DRETA, ARRAMBAT A LA DRETA: l'import que apareix no mou cap botó.
«flex-wrap» I NO «nowrap», que si no vessa cap a l'esquerra (#139): amb
«justify-content: flex-end», el que no cap se'n va per l'inici i cap mesura de
«scrollWidth» no ho veu. */
.barra-document-accions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
margin-left: auto;
}
/* «position: relative» perquè el rètol amagat de dins s'hi posicioni a dins i no
se'n vagi a buscar cap altre ancestre. */
.barra-document-import {
position: relative;
margin: 0;
font-weight: 600;
}
/* A LA FACTURA EMESA, EL NÚMERO I L'IMPORT MANEN (#502, «una escala tipogràfica amb
pes» de docs/22). Són les dues dades que es busquen en obrir-la —quina és i quant
val—, i a la mida del text de la barra pesaven el mateix que a qui va. La insígnia i el
client es queden com eren: la jerarquia la fan aquestes dues pujant.
1,25 rem i no més: la barra és enganxada i la seva alçada es mesura
(«--alcada-barra-document»), de manera que una xifra que la fes créixer una línia
tornaria a tapar el principi de cada grup. Les xifres, tabulars, com a tot arreu on
es comparen. */
.barra-factura .barra-document-numero,
.barra-factura .barra-document-import .import {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
font-variant-numeric: tabular-nums;
}
.barra-document-comandes,
.placa-principal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
/* La parella acció-ajuda de «Mira el document» dins de la barra: sense els marges
que la separen d'una secció, que aquí la separarien dels seus germans. */
.barra-document .mirar-document,
.barra-document .mirar-document .accions-sortida {
margin: 0;
}
/* LA SEGONA LÍNIA DE LA BARRA D'UN DOCUMENT PREPARATORI (onada 4, D6): l'índex a l'esquerra i
l'estat del desat a la dreta, sota l'import. Ocupa tota l'amplada de la barra i baixa sempre
a una fila pròpia («flex-basis: 100%»). «min-width: 0» a l'índex perquè es desplaci a dins i
no se n'endugui la pàgina; el desat no es parteix i s'arramba a la dreta. */
.barra-document-segona {
display: flex;
flex: 1 1 100%;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 1rem;
min-width: 0;
}
.barra-document-segona .barra-document-index {
flex: 1 1 0;
}
.barra-document-segona .estat-desat {
justify-content: flex-end;
margin-left: auto;
}
/* ═══ LA BARRA DE LA FITXA D'UNA FACTURA EMESA ═══
ÉS LA MATEIXA BARRA, i per això no porta cap regla de posició ni de fons pròpia: el que
hi afegeix són dues peces que la prefactura no té.
L'«h1» ÉS EL NÚMERO I ES VEU. Sense el marge del títol de pàgina —aquí és una peça de la
fila— i a la mida del text, perquè la insígnia i a qui va del costat no quedin petits al
seu costat. El pes i les xifres tabulars ja els posa «.fitxa-factura .numero».
L'ÍNDEX VA A LA SEGONA LÍNIA DE LA IDENTITAT, al lloc que a la prefactura té l'estat del
desat, i ES DESPLAÇA A DINS: «min-width: 0» perquè un fill flexible no baixa de la seva
amplada de contingut, i sense ell qui es desplaçaria de costat seria la PÀGINA, que se
n'enduria la barra i el rètol de l'obligat tributari («LaFitxaNoEsDesplacaDeCostat»).
Enllaços de 0,8 rem i del gris de les ajudes: és cromo i no contingut. */
.barra-document-numero {
flex: none;
margin: 0;
font-size: 1rem;
}
.barra-document-index {
min-width: 0;
overflow-x: auto;
}
.barra-document-index ul {
display: flex;
gap: 0.9rem;
margin: 0;
padding: 0.1rem 0;
list-style: none;
white-space: nowrap;
}
.barra-document-index a {
font-size: 0.8rem;
color: var(--color-sf-content-text-color-alt2);
text-decoration: none;
}
.barra-document-index a:hover,
.barra-document-index a:focus-visible {
color: var(--color-sf-primary);
text-decoration: underline;
}
/* L'INDICADOR DE DESAT.
L'ELEMENT NO NEIX NI MOR: nomes canvia el text que porta a dins. Una regio
activa que neix plena no s'anuncia, i una que desapareix deixa de ser una
regio. Per aixo te «min-height»: sense ella, el pas de «Desat a les 12:04» a
«S'esta desant…» mouria mig pixel la barra cada cop que es desa, i la barra
és enganxada. */
.estat-desat {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
min-height: 1.25rem;
margin: 0;
font-size: 0.8rem;
color: var(--color-sf-content-text-color-alt2);
}
/* ELS CAMPS D'AQUESTA FITXA: DE 18 A 24 REM, I MAI MÉS DE TRES COLUMNES.
«auto-fill» i no «auto-fit»: amb «auto-fit», un camp sol en una fila s'estira a tota
la fila. I el «max-width» de tres caselles de 24 rem i dues separacions fa que una
quarta de 18 rem no hi càpiga mai, sense cap consulta de mitjans: deixa créixer la
composició fins a un límit i no la canvia (docs/22).
I VAL TAMBÉ PER A LES DUES VISTES QUE PENGEN DEL DOCUMENT —la d'una línia i la d'un
destinatari—, des del 15/09/2026: són el mateix document obert per una fila, i una
graella pròpia deia que eren una altra cosa. «:is()» pren l'especificitat d'una classe, i
la regla pesa el mateix que quan només era de la fitxa.
LA SEPARACIÓ ÉS EL TOKEN (#792): el «gap» de «.camps» ja la llegeix d'allà, i el sostre ha de
dir la mateixa, o una separació canviada al token deixaria un sostre que no és de tres
caselles sense cap error. */
:is(.fitxa-document, .vista-linia, .vista-destinatari) .camps {
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
max-width: calc(3 * 24rem + 2 * var(--separacio-de-caselles));
}
/* UN CAMP LLARG VAL DUES COLUMNES, i no la fila sencera: 792 px són uns cent
caràcters per línia, i 1.200 ja no es llegeixen bé. Al mòbil ocupa la fila
sencera, a la consulta de 45 rem que ja hi era. LA VISTA D'UNA LÍNIA NO EN PORTA
CAP des de la #790: la descripció i la qualificació hi fan la resta de la fila
(«.resta-de-la-fila»), que no deixa el forat que «span 2» deixava a dues columnes. */
.fitxa-document .camp-doble {
grid-column: span 2;
}
/* ELS TOTALS, SOTA LES LÍNIES I AMB EL RESUM FISCAL SENCER A LA DRETA.
El resum va en una columna de 28 rem contra la vora dreta, que és la de la columna
Import, i el descompte de tot el document ocupa el que queda a l'esquerra. Quan al
descompte no li queden 18 rem, puja a sobre per l'ordre del DOM i el resum continua a
la dreta. MAI «auto-fit»: el descompte neix i mor, i el resum no pot canviar de
columna per això.
VAL PER A LES DUES FITXES DE DOCUMENT, i per això no penja de «.fitxa-document»: la
d'una factura emesa hi col·loca el mateix «PeuFiscal», i a l'esquerra, només si n'hi
ha, el descompte de tot el document («DescompteDelDocument», #806) i les observacions
(«ObservacionsDelDocument», #800). Són les mateixes dues peces que la prefactura tancada, amb el
rètol a sobre i el valor a sota, i cap no porta cap regla pròpia d'aquí. Allà no s'hi escriu res
i la columna esquerra no neix ni mor; sense cap de les dues no hi és, i el resum es queda a la
vora dreta («margin-left: auto»).
⚠️ ES MOU EL COMPONENT SENCER I NO S'ESTILA CAP FILL DE DINS. «PeuFiscal» és compartit
per les dues fitxes, i una regla d'aquí que toqués el seu marcatge es trencaria en
silenci el dia que el component canviés. Només «.peu-fiscal», que és l'arrel. */
.totals-document {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0 2rem;
}
/* LA COLUMNA DE L'ESQUERRA ÉS EL QUE S'ESCRIU: el descompte i, a sota, els suplerts
(#311). La de la dreta és el que en surt. Tancat, el descompte i les observacions (#806). */
/* EL COIXÍ DE DALT ÉS EL DEL RESUM FISCAL (#563): el peu és una «SeccioDeGrup», amb el filet
i «--coixi-seccio» sobre «Resum fiscal», i sense el mateix aquí el descompte començava un
títol més amunt que la columna del costat. La MATEIXA VARIABLE i no un 1 rem escrit: és una
còpia del coixí de la peça, i el dia que la peça el canviï aquesta l'ha de seguir sola. */
.totals-document > .totals-document-esquerra {
flex: 1 1 18rem;
min-width: 0;
padding-top: var(--coixi-seccio);
}
.totals-document-esquerra .graella-suplerts-document {
margin-top: 1rem;
}
/* LES OBSERVACIONS SOLES A LA COLUMNA (#793, #800): una prefactura sense cap línia no té ni
descompte ni resum, i una factura emesa sense descompte de tot el document, tampoc cap
descompte; la columna només porta les observacions. Ja carreguen el coixí de dalt de la
columna —i el rètol, dins de «.camp-retol», queda a l'altura del títol «Resum fiscal»—, i el
seu 1 rem de separació no separa res de cap germà de sobre. */
.totals-document-esquerra > .observacions-document:first-child {
margin-top: 0;
}
.totals-document > .peu-fiscal {
flex: 0 1 28rem;
min-width: 0;
margin-top: 0;
margin-left: auto;
}
/* ⛔ AQUÍ HI HAVIA «.fitxa-factura .document-i-peu» (#502), que pujava les observacions i el
lliurament al costat del resum fiscal per omplir el buit de l'esquerra. Es va desfer el
mateix dia (decisió de l'usuari, 29/09/2026): posat al costat, l'ordre de tabulació saltava
de la dreta a l'esquerra.
⚠️ DES DE LA #793 I LA #800 (decisions de l'usuari del 17/10/2026), LES OBSERVACIONS SÍ QUE VAN
A LA COLUMNA ESQUERRA DELS TOTALS, a les dues fitxes de document: a la prefactura, sota el
descompte i els suplerts, que és la mateixa columna del que s'escriu; a la factura emesa, sota
el descompte, perquè el mateix document es llegeixi igual abans i després d'expedir. El motiu
del 29/09 no hi és a cap de les dues: a la prefactura tot el que s'escriu és a l'esquerra i va
abans de la dreta, que és el que en surt; a la factura emesa, a l'esquerra només hi ha text, i
el tabulador no hi té res on aturar-se. No és cap regla d'aquí: van dins de
«.totals-document-esquerra», que ja les col·loca. Ho vigilen
«GramaticaDeLesFitxesTests.LesObservacionsDeLaPrefacturaVanALaColumnaEsquerraDelsTotals» i
«LesObservacionsTancadesSonLaPecaALaColumnaEsquerraDelsTotals». */
/* ═══ UN TEXT LLIURE QUE S'IMPRIMEIX (#356) ═══
LES OBSERVACIONS, AMB ELS TOTALS: a la columna esquerra, sota el descompte —i, a la prefactura, els suplerts— i
abans del resum fiscal, a les dues fitxes de document (#793, #800). Editables són un «.camp-ample» (46 rem), com la
resta de textos llargs; tancades, el rètol i el text tal com sortirà («ObservacionsDelDocument»).
«pre-line» I NO «pre-wrap»: els salts de línia són del que es va escriure i s'han de veure,
i els espais del final ja no existeixen —els treu la normalització del domini—. MAI
«.valor-fix», que va en negreta i es menja els salts.
EL COLOR ÉS EL DEL TEXT DEL TEMA, i l'amplada la d'un paràgraf que es llegeix: 1.200 px de
línia no es llegeixen.
⚠️ «:not(.seccio-de-grup)» (#563): fins a la #800, a la factura emesa les observacions eren una
«SeccioDeGrup» amb «Classe="observacions-document"», i el marge de dalt d'una secció és de la
peça. Ja no n'és cap (ho vigila «LesObservacionsTancadesSonLaPecaALaColumnaEsquerraDelsTotals»), i
l'exclusió es queda perquè, si mai ho tornessin a ser, aquesta regla no hi guanyi només per
l'ordre del full (docs/22, trampa 4). La regla és per a les editables, per a les tancades
(«ObservacionsDelDocument») i per a les de la refacturació. */
.observacions-document:not(.seccio-de-grup) {
margin-top: 1rem;
}
.nota-document {
max-width: 46rem;
margin: 0;
font-weight: normal;
color: var(--color-sf-content-text-color);
white-space: pre-line;
overflow-wrap: anywhere;
}
/* QUE ES MODIFICA (ROF art. 7.1.h, #495): el mateix text lliure que s'imprimeix, dins del bloc
de la rectificacio. Aire a dalt perque ve just darrere d'un altre camp —el tipus de
rectificacio a la prefactura, les observacions a la refacturacio— i sense ell la seva
etiqueta es llegia com la frase de sota del camp anterior. */
.camp-especificacions,
.especificacions-rectificacio,
.especificacions-document {
margin-top: 1rem;
}
/* LA NOTA D'UNA LÍNIA, SOTA LA SEVA DESCRIPCIÓ I DINS DE LA MATEIXA CEL·LA.
Cap columna nova ni cap icona: és on sortirà al paper. En bloc perquè vagi a sota, i
«pre-line» perquè «.e-rowcell» va amb «nowrap» i una segona línia no es partiria: es
TALLARIA, que és el que ja li va passar a «.cel-preu».
SUBORDINADA I NEUTRA, però NO és «.valor-subordinat»: aquell és un matís d'una paraula a
0,7 rem amb «nowrap», i això és un text que es llegeix. «alt2» és el gris del tema, i el
contrast és el del tema en clar i en fosc (mesurat a la prova de les notes); MAI «opacity». */
.nota-linia {
display: block;
margin-top: 0.125rem;
font-size: 0.8125rem;
line-height: 1.35;
color: var(--color-sf-content-text-color-alt2);
white-space: pre-line;
overflow-wrap: anywhere;
}
/* RETALLADA A DUES FILES a les graelles d'un document que s'edita: la sencera és a la
vista de la línia, a un clic. Sense globus ni «title» (docs/22). */
.nota-linia--retallada {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
/* ⛔ AQUÍ HI HAVIA «.totals-i-cobrament» (onada 4), que posava «Lliurament» i «Cobrament» de la prefactura de costat,
a meitats i amb un CSS de la pàgina. Des de la #793 (decisió de l'usuari del 16/10/2026) S'APILEN, cadascuna a tota
l'amplada del grup: dues seccions de costat només amb «SeccionsDeCostat» (#792), i aquesta peça és per a dues
seccions curtes, i «Cobrament» porta la taula de venciments, que creix. Ho vigila
«GramaticaDeLesFitxesTests.DuesSeccionsDeCostatNomesAmbLaPeca», que ja no en tolera cap embolcall a mà. */
/* ═══ LA CAPÇALERA D'UN GRUP QUE ES PLEGA (#311) ═══
El marcatge és de «GrupPlegable» i el perquè de cada peça, a docs/22 («Com es pleguen
els grups»). Aquí hi ha el que el full hi ha de posar:
- TOTA LA CAPÇALERA ÉS ZONA DE CLIC, amb un «::after» BUIT del botó que la cobreix. Buit
a posta: un «content» amb text entraria al nom accessible. I l'anell de focus es
dibuixa en aquell pseudoelement, de manera que envolta la capçalera sencera.
- LA FLETXA ÉS UN ELEMENT AMB DUES VORES, girat segons «aria-expanded»: el que es veu i
el que se sent surten del mateix atribut. SENSE ANIMACIÓ: apagar-la per a qui la
demana voldria un «@media (prefers-reduced-motion)», i el full no n'estrena cap.
- EL RESUM, EN UNA LÍNIA AMB PUNTS SUSPENSIUS per damunt de 45 rem —una capçalera no
canvia d'alçada per un resum llarg— i sencer a sota al mòbil.
- ELS COLORS SÓN DEL TEMA: el gris de les ajudes per al resum, i el primari al «hover».
⚠️ CAP «overflow» A LA CAPÇALERA NI A LA TARGETA: la targeta en té prohibit qualsevol
(«LaTargetaDeGrupNoPortaOverflow»), i el retall del resum va al «p» del resum. */
.grup-capcalera {
position: relative;
display: flex;
align-items: center;
gap: 0.25rem 0.75rem;
min-height: 2.75rem;
}
/* Dues classes guanyen el marge de l'«h2» global. És l'única regla del títol d'un grup:
les dues fitxes el dibuixen amb «GrupPlegable». */
.grup-capcalera .grup-fitxa {
flex: none;
max-width: 100%;
margin: 0;
}
.grup-commuta {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-align: left;
cursor: pointer;
}
.grup-commuta::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--radi-control);
}
.grup-commuta:focus-visible {
outline: none;
}
.grup-commuta:focus-visible::after {
outline: 2px solid var(--color-sf-primary);
outline-offset: 2px;
}
.grup-capcalera:hover .grup-commuta {
color: var(--color-sf-primary);
}
/* ▸ plegat i ▾ obert: un quadrat amb la vora de la dreta i la de sota, girat. */
.grup-fletxa {
flex: none;
width: 0.45rem;
height: 0.45rem;
margin: 0 0.1rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
}
.grup-commuta[aria-expanded="true"] .grup-fletxa {
transform: rotate(45deg);
}
.grup-resum {
flex: 1 1 0;
min-width: 0;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.85rem;
color: var(--color-sf-content-text-color-alt2);
}
/* EL «·» D'UN RESUM, del grup plegat i de la línia d'un destinatari. Va «aria-hidden», i
el component hi posa una coma amagada al costat que fa la pausa. */
.separador-de-resum {
margin: 0 0.4rem;
color: var(--color-sf-content-text-color-alt2);
}
/* LA RAJOLA I LA FRASE D'UN GRUP PLEGABLE («GrupPlegable.Icona» i «Frase», onada 3, #539).
LES MATEIXES PECES QUE «GrupDeFitxa»: la «.rajola-grup» de la seva capçalera i la «.frase-grup» de
«TitolDeGrup», sense cap regla de color nova. La frase va SOTA EL TÍTOL, com a la fitxa mestra, i
alineada amb el text del títol i no amb la fletxa (el mateix sagnat que el resum al telèfon). El resum
es queda on era, a la línia del títol amb punts suspensius.
AMB LA RAJOLA, UNA GRAELLA: la rajola a l'esquerra, de les dues files i a dalt (com «GrupDeFitxa»); el
títol i el resum a la primera, la frase a la segona. Sense rajola, la frase és una fila sencera de la
fila flexible de sempre.
TOTA LA CAPÇALERA CONTINUA SENT ZONA DE CLIC: el «::after» del botó cobreix la capçalera sencera
(«position: relative»), frase i rajola incloses. */
.grup-capcalera:has(> .frase-grup) {
flex-wrap: wrap;
}
.grup-capcalera > .frase-grup {
flex: 1 0 100%;
margin: 0;
padding-left: calc(0.45rem + 0.2rem + 0.6rem);
}
.grup-capcalera--amb-rajola {
display: grid;
grid-template-columns: auto max-content minmax(0, 1fr);
align-items: center;
gap: 0 0.75rem;
}
.grup-capcalera--amb-rajola > .rajola-grup {
grid-row: 1 / span 2;
align-self: start;
margin-top: 0.3125rem;
}
.grup-capcalera--amb-rajola > .grup-fitxa {
grid-column: 2;
grid-row: 1;
}
.grup-capcalera--amb-rajola > .grup-resum {
grid-column: 3;
grid-row: 1;
}
.grup-capcalera--amb-rajola > .frase-grup {
grid-column: 2 / -1;
grid-row: 2;
padding-bottom: 0.375rem;
}
/* UN GRUP PLEGAT NO NECESSITA EL COIXÍ DE DALT I DE BAIX: la capçalera ja en porta 2,75 rem
d'alçada mínima, i sumats farien que cinc grups plegats ocupessin el que ocupa un d'obert.
Canvia amb un clic de qui ho ha demanat, que és l'únic moment en què un grup es mou. */
.grup-caixa.grup-plegat {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
/* ═══ UN SOL DESTINATARI, EN UNA LÍNIA DE TEXT (#311) ═══
SENSE PUNTS SUSPENSIUS: el domicili és l'única dada que, si va malament, no la veu
ningú, i per això es parteix en comptes de tallar-se. «overflow-wrap: break-word» i no
«anywhere», que a l'escriptori partiria un mot pel mig (docs/22).
EL BOTÓ DE TREURE, AL FINAL: arrambat a la dreta mentre hi cap i a sota quan no. */
.linia-destinatari {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
}
.linia-destinatari-dades {
flex: 1 1 20rem;
min-width: 0;
margin: 0;
overflow-wrap: break-word;
}
.linia-destinatari-nom {
font-weight: 600;
}
/* D'ON SURT EL DOMICILI, SUBORDINAT I SENSE CAP COLOR D'ESTAT: la procedència es diu amb
paraules, i una marca a cada fila no distingeix res (docs/22). */
.linia-destinatari-origen {
font-size: 0.85rem;
color: var(--color-sf-content-text-color-alt2);
}
.linia-destinatari > .e-btn {
margin-left: auto;
}
/* EL PEU DELS DESTINATARIS: afegir-ne un, la nota del domicili i la casella de desar-lo com
a client, en una fila quan hi caben. La nota és una conseqüència que no es desfà i va a la
vista; acotada com «.ajuda-seccio». */
.destinataris-peu {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.5rem;
margin-top: 0.75rem;
}
.destinataris-peu .accions-graella {
margin: 0;
}
.destinataris-peu .nota-adreces {
flex: 1 1 18rem;
max-width: 46rem;
margin: 0;
}
.destinataris-peu .desa-com-a-client {
flex: 0 1 34rem;
margin: 0;
}
/* QUANT SUMEN LES PORCIONS (art. 14.2.a del ROF, #366).
ÉS UN FET I NO CAP AVÍS: sense vermell i sense icona. Un document a mig omplir no
ha fet res malament (docs/22, regla 7), i qui diu la conseqüència —que així no
s'expedeix— són la insígnia i el tauler de pendents, que ja hi són. Aquí només hi
ha l'aritmètica que ningú no ha de fer de cap.
«tabular-nums» perquè és una xifra, com els imports de tota l'aplicació: sense
això el «100 %» balla respecte del «33,34 %» de la columna de sobre. */
/* «0 1 auto» I NO «0 0 auto» (onada 4): «encara no diuen quina part els toca» no cap en una
línia a 390 px, i sense poder-se encongir la frase empenyia la pàgina de costat (410 px en
català, 465 en castellà). */
.destinataris-peu .suma-porcions {
flex: 0 1 auto;
min-width: 0;
margin: 0;
font-variant-numeric: tabular-nums;
}
/* I LA NOTA DE LA PORCIÓ OCUPA LA SEVA FILA SENCERA. Amb «.nota-adreces» en tindríem
dues de repartides al mateix «flex» i el peu quedaria en dues columnes de text
estretes; aquí el que cal és que les dues notes es llegeixin l'una sota l'altra. */
.destinataris-peu .nota-porcions {
flex: 1 1 100%;
max-width: 46rem;
margin: 0;
color: var(--color-sf-content-text-color-alt2);
}
/* EL CAMP DE LA PORCIÓ, A LA DRETA I AMB XIFRES TABULARS. Un «SfNumericTextBox» no hereta res
del tema en aquest punt, i les files de la col·lecció en porten un cadascuna, l'un sota l'altre:
sense això, els dos dígits de «33,34» i els tres de «100,00» no s'alineen. */
.fitxa-document .destinataris .fila-colleccio-control .e-numeric input.e-input {
font-variant-numeric: tabular-nums;
text-align: right;
}
/* Les simplificades que una F3 substitueix NO TENEN CAP REGLA PROPIA, i val la
pena que consti: la separacio del bloc ja la posa la seva «SeccioDeGrup» —el
marge i el filet de dalt— i afegir-n'hi una aqui la doblaria. El que la seccio
necessita del full son les dues regles del refus dins de la cel·la, que son a
dalt amb les de les altres graelles de camps oberts. */
/* ==========================================================================
EL PEU FISCAL («Components/Factures/PeuFiscal.razor»).
CAP FONS PROPI, i no es cap oblit. La jerarquia la fan el filet i el pes, que
es el que ja fa «.totals»; un fons «alt2» en fosc es MES CLAR que la pagina i
el bloc cridaria mes de nit que de dia, que es justament al reves del que
hauria de passar.
CAP COLOR COM A UNIC PORTADOR i cap «opacity» sobre text: el signe de la
retencio es el caracter menys, no el vermell.
CAP «aria-live» i cap transicio d'alçada: a la fitxa d'un document preparatori
aquest bloc canvia a cada tecla, i qualsevol de les dues coses el convertiria
en un xerraire o en una cosa que balla mentre s'escriu.
AL MOBIL NO S'ENCONGEIX LA LLETRA: les taules van dins de «.taula-desplacable»
i el que es desplaça es la taula. Cap llindar nou (docs/22).
VA DESPRES DE «.fitxa-factura .taula-factura», i no es cap detall: aquella
regla treu el topall a les taules d'aquella pantalla i te la mateixa
especificitat que aquesta. Escrita mes amunt, el topall no s'aplicaria i no hi
hauria cap error enlloc (docs/22, «quan una cosa no s'aplica»).
EL MARGE DE DALT, EL FILET I EL TITOL SON DE LA PECA: el peu es una «SeccioDeGrup»
(#563), i aqui nomes hi ha el que va a dins. Dins de «.totals-document», el marge el
treu «.totals-document > .peu-fiscal».
========================================================================== */
/* La taula del peu te tres columnes —o cinc amb recarrec—, no les vuit de les
linies: estirada a tota l'amplada d'una fitxa, el percentatge i la quota
quedaven a dos pams l'un de l'altre i deixava de llegir-se com una fila. A les
dues fitxes de document ja va dins de la columna de 28 rem de
«.totals-document», i el topall es el que queda per a «/factures/{id}/refactura». */
.peu-fiscal .taula-factura {
max-width: 34rem;
}
/* Els imports a la dreta, capcalera inclosa. «.cel-import» esta acotat a
«.fitxa-factura» i a «.refactura», i aquest component tambe es dibuixa a la
fitxa d'un document preparatori, que no es cap de les dues. */
.peu-fiscal .cel-import {
text-align: right;
}
/* EL DESAMBIGUADOR, SOTA EL PERCENTATGE I DINS DE LA MATEIXA CEL·LA.
Es text i no cap atribut: un «title» no arriba ni amb el teclat ni al
telefon, i el que ha de dir es per que hi ha dues files que semblen iguals.
Cos menor i el gris secundari perque no competeixi amb el percentatge, que
es el que la fila diu primer. */
.peu-fiscal .desambiguador {
display: block;
font-size: 0.8rem;
line-height: 1.3;
color: var(--color-sf-content-text-color-alt2);
}
/* LES MENCIONS DE L'ARTICLE 6.1 DEL ROF (#358).
SENSE PIC I SENSE SAGNAT: són frases taxades que s'imprimeixen al document, i
una llista amb pics les faria semblar una enumeració nostra. Acotades com
«.ajuda-seccio» —46 rem—, que una menció travessant 1.400 px no es llegeix.
El color és el del text normal i no el secundari: no és cap ajuda, és
contingut obligatori de la factura. */
.peu-fiscal .mencions-rof {
max-width: 46rem;
margin: 0.25rem 0 0;
padding: 0;
list-style: none;
}
.peu-fiscal .mencions-rof li {
margin: 0.15rem 0;
font-size: 0.85rem;
line-height: 1.4;
}
/* LA XIFRA DEL REGISTRE PORTA SEMPRE LA SEVA ETIQUETA.
Confondre l'import total amb el total a pagar te un simptoma concret: el QR
deixa de quadrar quan el client el coteja, perque el QR porta l'import del
registre. La linia va SOTA el retol i dins del mateix «dt», i ha de tornar
al pes normal —el «dt» que la conte va a 700 per «.total-fort»— o es
llegiria com un segon retol. */
.peu-fiscal .totals .al-registre {
display: block;
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--color-sf-content-text-color-alt2);
}
/* EL MOTIU QUE OCUPA LA RANURA D'UN CAMP QUE NO ES DIBUIXA.
Mateixa peca que «.motiu-sense-primari» i pel mateix motiu: el que no es pot
fer no es dibuixa apagat, i al seu lloc hi ha per que no hi es i on anar
(docs/22, regla 5). Aqui la ranura es una cel·la de «.camps».
⚠️ LES SEVES REGLES HAN D'EXISTIR I NO N'HI HA CAP DE GENERAL. El titol duia
«.titol-desviament» i aquella classe nomes esta escrita dins de
«.bloc-desviament» i de «.motiu-sense-primari»: fora d'alli el text sortia amb
el pes del paragraf del costat, sense cap error enlloc i sense que cap asserció
ho pogues veure. Es la primera de les quatre causes de docs/22 §«quan una cosa
no s'aplica». */
.motiu-sense-camp .titol-desviament {
margin: 0 0 0.25rem;
font-weight: 600;
}
/* SENSE CAP COLOR PROPI. El gris de les ajudes de camp diria que aixo es
secundari, i es el que explica per que hi falta un camp: es queda amb el color
del text i nomes baixa de mida. */
.motiu-sense-camp p {
margin: 0 0 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}
/* EL MOTIU QUE OCUPA EL LLOC DEL BOTO PRIMARI.
Un boto apagat al final d'un formulari llarg crida l'atencio i no diu per
que. Aixo va exactament al seu lloc dins de «.peu-accions», alineat a la
dreta com hi estaria el boto, i diu que falta i on es toca. */
.motiu-sense-primari {
max-width: 32rem;
text-align: left;
}
.motiu-sense-primari .titol-desviament {
margin: 0 0 0.25rem;
font-weight: 600;
}
.motiu-sense-primari ul {
margin: 0;
padding-left: 1.25rem;
font-size: 0.9rem;
}
.motiu-sense-primari a {
margin-left: 0.4rem;
}
/* EL MOTIU D'UN PRIMARI QUE S'APAGA I NO ES TREU (#560).
El germà de «.motiu-sense-primari» per quan el botó es queda —«Continua amb la
rectificativa» s'encén sol en omplir el que falta, i desaparèixer i tornar mouria el
peu—. Una fila sencera del peu, sota el botó i arrambada a la mateixa vora dreta; el
color i la mida són els d'«.ajuda-estat», que és el motiu d'un control apagat.
⚠️ I SENSE EL «max-width: 62rem» D'«.ajuda-estat» (#565). El «max-width» limita el
«flex-basis»: a partir de 1.440 px amb un sol botó —el pas 2 reprès— o de ~1.860 amb dos,
botó i motiu de 62 rem cabien en una fila, el motiu no baixava i «justify-content: flex-end»
arrossegava el primari 1.000 px a l'esquerra, fins que el motiu se n'anava i saltava a la
vora. Ho vigila «PantallaRefacturacioTests.ElMotiuDelPrimariNoDesplacaElBoto». */
.peu-accions > .motiu-del-primari {
flex-basis: 100%;
max-width: none;
margin-top: 0;
text-align: end;
}
/* ⛔ AQUI HI HAVIA «LA VISTA D'UNA LINIA, ACOTADA A 52 REM». Des del 15/09/2026 va a
l'amplada de la fitxa del document, i el que evita que una etiqueta i el seu camp
quedin a un pam no es el topall de la vista sino la graella de camps de la fitxa, que no
passa de tres caselles de 24 rem (més avall, amb «.vista-destinatari»). */
/* El control que obre una linia dins d'una graella. A la fitxa del document es un
enllac de veritat —la linia te ruta propia—; a la refacturacio no hi ha res a
adreçar i ha de ser un boto, pero LES DUES PANTALLES HAN DE SEMBLAR LA MATEIXA:
el que s'hi mira per triar la linia es la descripcio, no un boto al seu costat. */
.obre-linia.e-btn {
padding: 0;
border: 0;
background: none;
color: var(--color-sf-primary);
font: inherit;
text-align: left;
text-transform: none;
}
.obre-linia.e-btn:hover,
.obre-linia.e-btn:focus-visible {
background: none;
text-decoration: underline;
}
/* LES DUES VISTES QUE PENGEN D'UN DOCUMENT: la d'una linia i la d'un destinatari.
Comparteixen amplada i graella de camps a proposit: son la mateixa peca —una
segona pantalla que s'obre des d'una fila i se'n torna al mateix lloc— i dues
mides diferents nomes dirien que son coses diferents.
I LES DUES SON LES DE LA FITXA DEL DOCUMENT (15/09/2026): el topall de
«--amplada-fitxa» i, a «.camps», les caselles de 18 a 24 rem i tres columnes com a molt
(la regla de «.fitxa-document .camps», que les porta totes tres). Abans anaven a 52 rem
amb caselles de 13: a 1.920 px la vista d'una linia n'aprofitava menys d'una tercera
part, i el document del qual penja feia servir una altra graella. */
.vista-linia,
.vista-destinatari {
max-width: var(--amplada-fitxa);
}
/* DINS DE LES TARGETES DE LA LÍNIA, UN REM ENTRE COLUMNES I NO 1,5 (onada 4, #540). Des que «La
línia» és una targeta, el coixí i les vores se'n mengen 42 px: a 1.210 px la graella es queda
en 901 i tres caselles de 18 rem amb 1,5 rem entremig en volen 912. Baixava a dues columnes, i
la descripció —dues caselles per damunt de 75 rem— deixava un forat al costat de l'article
(«RecorregutRapidDeLaLiniaTests.ElsCampsNoDeixenCapForatACapAmplada»). Amb un rem en volen
896. Cap llindar nou, i les caselles continuen sent les de la fitxa.
⚠️ I EL SOSTRE ES TORNA A CALCULAR AMB AQUEST REM: amb el de 1,5 rem (1.200 px) i un rem
entremig, a 1.920 px hi cabien QUATRE caselles de 18 rem justes. Amb 1.184 no n'hi cap la
quarta, i tres de 24 rem continuen cabent.
EL REM ÉS EL TOKEN, REDEFINIT A LA TARGETA (#792): «SeccionsDeCostat» posa «Descompte» i «Nota» sobre
les pistes d'aquesta graella, i ha de llegir la mateixa separació. Escrit aquí i a la peça, el dia
que canviés en un lloc la «Nota» deixaria de començar a la segona columna sense cap error. */
.vista-linia .grup-caixa {
--separacio-de-caselles: 1rem;
}
.vista-linia .grup-caixa .camps {
column-gap: var(--separacio-de-caselles);
max-width: calc(3 * 24rem + 2 * var(--separacio-de-caselles));
}
/* ⛔ AQUI HI HAVIA LA GRAELLA DE 13 REM, «auto-fit», que deia que «amb 18 rem hi cabien
dues columnes justes». Era cert amb el topall de 52 rem, i el topall ja no hi es. */
/* ⛔ AQUI HI HAVIA L'AMPLADA I EL MARGE DE LA BASE I LA QUOTA («.vista-linia .imports-linia» i el seu
«--marge»), arrambades a la dreta al final del flux. Des de la #824 són a «PeuDeLaVista», que les dibuixa en
una ratlla amb una regla més pesada, i aquelles ja no feien res. */
/* La nota que diu que res d'aixo no surt al document, i l'avis del marge zero. NEUTRES
tots dos: una venda amb perdua no es cap error ni cap avis de res mal fet. Arrambats
a la dreta, al flux i just abans del peu (#824): són explicació i no xifres. */
.vista-linia .nota-marge {
margin: 0 0 0.75rem auto;
width: min(28rem, 100%);
font-size: 0.78rem;
line-height: 1.35;
color: var(--color-sf-content-text-color-alt2);
}
.vista-linia .nota-marge.avis-sense-marge {
color: var(--color-sf-content-text-color);
}
/* LA PORTA D'ALTA D'ARTICLE, AL RETOL I ARRAMBADA A LA DRETA. Fa l'alçada del boto
d'ajuda i no la d'un boto normal: al retol, un boto de 32 px faria la fila mes alta que
la de la Descripcio del costat, i els dos camps quedarien desnivellats. */
/* ⚠️ I LA FITXA D'UN DOCUMENT, DES DE LA #382: el rètol de la Descripció de
l'operació hi porta el botó que commuta qui mana sobre el text. És la mateixa
figura —un verb al costat del rètol, empès a la dreta— i per tant la mateixa
regla, no una de nova: «:is()» pren l'especificitat de la classe i la regla pesa
exactament el que pesava. */
:is(.vista-linia, .vista-destinatari, .fitxa-document) .porta-del-retol {
margin-left: auto;
}
:is(.vista-linia, .vista-destinatari, .fitxa-document) .porta-del-retol .e-btn {
height: 1.5rem;
min-height: 0;
padding: 0 0.5rem;
font-size: 0.8rem;
line-height: 1;
}
:is(.vista-linia, .vista-destinatari, .fitxa-document) .porta-del-retol .e-btn .e-icons {
margin-right: 0.3rem;
font-size: 0.75rem;
}
/* LA TECLA D'UNA DRECERA, DINS DEL BOTO QUE FA PREMER (docs/22, «Un recorregut rapid amb
teclat»). «aria-hidden» al marcatge: el nom del boto continua sent el verb, i la tecla
la diu «aria-keyshortcuts».
EL COLOR ES EL DEL BOTO («currentColor») I NO EL GRIS DE LES AJUDES: dins del primari, el
gris sobre el blau del tema no es llegiria. La vora la separa del verb sense cap color
propi. */
.drecera-boto {
margin-left: 0.5rem;
padding: 0 0.3rem;
border: 1px solid currentColor;
border-radius: var(--radi-dins-control);
font-size: 0.7rem;
font-weight: 400;
line-height: 1.4;
text-transform: none;
white-space: nowrap;
}
/* LA BARRA DE RETORN.
Els galons son per als passos; obrir una linia no es cap pas —no avança res i
se'n torna al mateix lloc— i per aixo aixo es una barra que ANOMENA LA
DESTINACIO (docs/22). */
.barra-retorn {
margin-bottom: 0.75rem;
}
/* ==========================================================================
LES ADRECES D'UN CLIENT
La llista de la fitxa —de nomes lectura— i la vista propia de cada adreca,
amb les seves persones i els seus punts de contacte.
========================================================================== */
/* UNA INSIGNIA QUE DIU UNA QUALITAT I NO CAP VEREDICTE.
La forma i el punt els comparteix amb «.estat» —son la mateixa peca— i el que
canvia es el color: aqui NO n'hi ha cap de propi, i es a posta. El verd
d'aquesta aplicacio ja vol dir «acceptat per l'AEAT», i gastar-lo per dir que
una adreca es la principal el buida de sentit alla on de veritat importa. Ser
la principal no es ni bo ni dolent: es un fet. */
.insignia {
color: var(--color-sf-content-text-color-alt2);
}
/* De qui es l'adreca, al capdamunt de la seva vista: amb la fitxa oberta des
d'un enllac no hi ha cap altra manera de saber-ho. */
.qui-es {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin: 0 0 1rem;
}
/* LA DENOMINACIO I LA SEVA INSIGNIA, UNA SOBRE L'ALTRA.
Mateix motiu que «.cel-numero»: «.e-rowcell» va amb «white-space:
nowrap» i «overflow: hidden», de manera que sense tornar-li el partit la
insignia no baixa de linia —es talla—, i aixo no ho diu ni la consola ni cap
asserció: es veu amb una captura i prou. */
.cel-adreca {
display: flex;
flex-direction: column;
/* La insignia es «inline-flex»: sense aixo s'estiraria fins a l'altra punta
de la cel·la i el seu fons diria que hi ha mes text del que hi ha. */
align-items: flex-start;
gap: 2px;
white-space: normal;
line-height: 1.25;
}
/* LES ACCIONS D'UNA FILA, I EL MOTIU QUAN NO N'HI HA CAP.
Sobre l'adreca principal, dos dels tres botons no es dibuixen —un no faria res
i l'altre el refusaria el domini— i al seu lloc hi ha el motiu amb la sortida
(regla 5 de docs/22). Aquell motiu es una frase, i dins d'un «.e-rowcell» sense
aquesta regla es tallaria a mig mot. */
.accions-fila {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
white-space: normal;
line-height: 1.25;
}
/* EL DOMICILI ES PARTEIX EN COMPTES DE TALLAR-SE. «.e-rowcell» va amb
«white-space: nowrap» i «overflow: hidden», i una adreca sencera —via, numero,
codi postal, poblacio i pais— no cap a 225 px: el que es veia era el domicili
tallat a mig mot i sense punts suspensius. La fila creix una linia i no es
perd res. */
.cel-domicili {
white-space: normal;
line-height: 1.25;
}
.motiu-fila {
font-size: 0.8rem;
color: var(--color-sf-content-text-color-alt2);
}
/* QUINS DOCUMENTS FAN SERVIR L'ADRECA (#150).
Va sota el motiu i dins de la mateixa cel·la: el motiu diu que s'ha de canviar
l'adreca d'aquells documents i aixo diu QUINS son, que es el que fa la sortida
possible. Ocupa la fila sencera —«flex-basis: 100%»— perque «.accions-fila» es
una fila flexible i, sense aixo, la llista es posaria al costat del boto d'obrir
i s'aixafaria a 245 px.
Cap color escrit a ma: el gris es el mateix del motiu, que ve del tema. */
.documents-retenen {
flex-basis: 100%;
font-size: 0.8rem;
color: var(--color-sf-content-text-color-alt2);
white-space: normal;
line-height: 1.3;
}
.documents-retenen p {
margin: 0.25rem 0 0;
}
.documents-retenen ul {
margin: 0.15rem 0 0;
/* Amb el farciment de la llista, els punts sortirien de la cel·la a 245 px.
La sagnia es la justa perque es vegi que es una llista. */
padding-left: 1.1rem;
}
/* Els enllacos poden ser llargs —mena, data i referencia— i la columna es
estreta: es parteixen en comptes de fer creixer la taula de costat. */
.documents-retenen a {
overflow-wrap: anywhere;
}
/* EL BOTO QUE PLEGA LA LLISTA DINS DE LA CEL·LA (#184).
De text i no amb forma de boto del tema: al costat del motiu i sota «Obre», una
vora mes faria de la cel·la tres botons seguits. El primari del tema diu que es
pot premer, i la fletxa es la de «GrupPlegable» —dues vores girades, sense cap
lletra— amb el gir segons «aria-expanded», que es el mateix atribut que sent el
lector de pantalla. Cap color escrit a ma. */
.documents-retenen .commuta-documents {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0.25rem 0 0;
padding: 0;
border: 0;
background: none;
color: var(--color-sf-primary);
font: inherit;
text-align: left;
cursor: pointer;
}
.documents-retenen .commuta-documents:hover {
text-decoration: underline;
}
.documents-retenen .commuta-documents:focus-visible {
outline: 2px solid var(--color-sf-primary);
outline-offset: 2px;
border-radius: var(--radi-control);
}
.commuta-documents[aria-expanded="true"] .grup-fletxa {
transform: rotate(45deg);
}
/* ==========================================================================
LA COMPROVACIÓ DE L'ABONO ORFE (#200)
Cap color nou i cap «.estat-*» nou: tot el que hi ha aquí ja té peça pròpia
—«.bloc-desviament» per a l'abast de la cerca, «.motiu-sense-primari» per al
lloc del botó que no es dibuixa, «.dades-factura» per als sis parells—. El que
falta són quatre embolcalls i una separació.
========================================================================== */
/* LES DUES AJUDES QUE PENGEN D'UNA DADA: per què la finestra és de tres dies i
per què hi pot haver més d'una sèrie. Van dins del «dd» i en línia pròpia:
escrites al costat del valor es llegirien com si en formessin part. Sense cap
regla, sortirien amb el pes del text del costat i sense separació —és la
primera de les quatre causes de docs/22 §«quan una cosa no s'aplica»—. */
.comprovacio-abono .dades-factura small:where(:not([hidden])) {
display: block;
max-width: 32rem;
margin-top: 0.15rem;
font-size: 0.85rem;
line-height: 1.35;
color: var(--color-sf-content-text-color-alt2);
}
/* Els motius del refús, com els de l'esmena. La classe no és decorativa: és el
que deixa que una prova de navegador pregunti si la pantalla ha ensenyat el
motiu sense dependre del marcatge intern d'«SfMessage». */
.impediments-abono {
margin: 0 0 0.5rem;
padding-left: 1.25rem;
}
/* L'EMBOLCALL DE LA GRAELLA DE CANDIDATS. El «CssClass» d'«SfGrid» no arriba a
ser una classe del document —hi cau com un atribut que cap full no mira
(docs/22, regla 3)—, i sense un «div» nostre no hi ha res a què agafar-se ni
per al full ni per a les proves. */
.candidats-abono {
margin: 0 0 1.25rem;
}
/* El bloc de la tria manual, entre la seva ajuda i la declaració. */
.tria-abono {
margin: 0 0 1.5rem;
}
/* LES DUES ACCIONS DE LA DECLARACIÓ, I CAP D'ELLES NO ÉS PRIMÀRIA.
El producte NO SAP quina de les dues declaracions és certa, i un botó ple de
color seria una recomanació encoberta sobre un fet que ignora.
S'EMBOLIQUEN: quan el botó negatiu no es dibuixa, al seu lloc hi ha un bloc de
text amb el motiu, i al costat d'un botó a 390 px no hi cabria. */
.declaracio-abono {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.75rem;
margin: 0 0 1.5rem;
}
/* Dins d'un «flex» el bloc del motiu no s'estreny sol: sense el màxim
s'enduria l'amplada sencera i el botó de tornar a mirar cauria a la línia
de sota amb tot el buit al mig. */
.declaracio-abono .motiu-sense-primari {
max-width: 32rem;
}
/* ⚠️ EL RÈTOL DE «EL QUE S'HA MIRAT», DINS DEL DIÀLEG DE LA DECLARACIÓ.
«.titol-desviament» NO TÉ CAP REGLA GENERAL: només està escrita dins de
«.bloc-desviament» i de «.motiu-sense-primari», i fora d'allà el text surt amb
el pes del paràgraf del costat, sense cap error enlloc i sense que cap asserció
ho pugui veure. És la primera de les quatre causes de docs/22 §«quan una cosa
no s'aplica», i ja va mossegar una vegada a «.motiu-sense-camp».
El «CssClass» d'un «SfDialog» SÍ que s'aplica —cau a tres elements alhora—, i
el diàleg penja del «body»: per això la regla no es pot penjar de la secció. */
.confirma-cap-abono .titol-desviament {
margin: 1rem 0 0.25rem;
font-weight: 600;
}
/* LA CASELLA DE LA DECLARACIÓ NEGATIVA, DINS DEL DIÀLEG.
Separada de la llista del que s'ha mirat i amb una línia a sobre: el que ve
després no és una dada més, és el que qui prem SUBSCRIU. Aquí només cal
l'espai i el tall.
⚠️ AQUÍ HI DEIA QUE «el rètol es parteix sol —la regla global de
«.e-checkbox-wrapper» ja ho resol—», I ERA FALS: aquella regla global NO
EXISTIA. El que hi havia vivia dins de la consulta de 45rem, de manera que a
l'escriptori no la governava res, i el rètol d'aquesta casella —la més llarga
del producte, i la que qui la marca ha de llegir bé— es dibuixava trencat a
1.280 px, amb la segona línia sota el quadre. La creença escrita és el que va
deixar el defecte aquí: ningú no va anar a mirar si la regla hi era. Ara sí
que hi és (#106), i és a la capa global d'aquest mateix full.
Sense color propi: qui posa el color és el diàleg, i una casella acolorida
diria que hi ha hagut un error. */
.confirmacio-declarada {
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-sf-border);
}
/* ==========================================================================
EL LLIURAMENT D'UN DOCUMENT AL CLIENT
Les cinc capes que separen «veure» de «lliurar» estan escrites al component;
aquí només hi ha les dues que són de full: EL LLOC —«Mira el document» viu
fora del bloc de sortides i els altres dos hi viuen dins, i la caixa és el
que ho fa veure— i EL PES, que el fa el tema amb «e-primary» i que aquí no
es toca.
⚠️ CAP COLOR ESCRIT A MÀ I, SOBRETOT, CAP VERD. En aquesta aplicació el verd
vol dir «acceptat per l'AEAT» (la insígnia de la remissió, dues seccions més
avall a la mateixa fitxa), i gastar-lo en un lliurament el buidaria justament
allà on decideix alguna cosa. Aquí no hi ha cap classe d'estat.
========================================================================== */
.lliurament-client {
margin-top: 1.5rem;
}
/* «Mira el document»: línia pròpia, FORA de la caixa de sortides. La separació
no és estètica —és la capa 1— i per això el marge de sota és el mateix que
separa dues seccions i no el que separa dos botons.
Sense prefix de pantalla a posta: és la parella d'acció amb UNA SOLA acció
—contenidor, botó i ajuda, sense cap reixa—, i el patró té nom a docs/22. */
.mirar-document {
margin-bottom: 1.5rem;
}
/* LA CAIXA DE LES SORTIDES. Mateixa forma que tenia el peu de tancat de la prefactura —vora d'1 px, radi
de 4 i el fons alternatiu del tema—: el que hi ha a dins deixa rastre, i la
caixa és el que diu que aquells botons no són com el de sobre. */
.lliurament-client .sortides-document {
padding: 1rem 1.25rem;
border: 1px solid var(--color-sf-border-light);
border-radius: var(--radi-superficie);
background-color: var(--color-sf-content-bg-color-alt1);
}
/* A UNA PREFACTURA LA CAIXA NOMÉS PORTA EL MOTIU (#793, D7): el contingut fa l'amplada del motiu i no la de la
secció, que apilada en faria 1.600 px. És el contingut —la caixa és «content-box»—: amb el farciment i la vora,
la caixa en fa 778 de vora a vora. La condició és el marcatge —un sol fill, el motiu—, perquè la caixa és compartida amb la
factura emesa, on porta les sortides i fa l'amplada de la secció. */
.lliurament-client .sortides-document:has(> .motiu-sense-primari:only-child) {
max-width: 46rem;
}
/* ELS PARÀGRAFS DEL COBRAMENT DE LA PREFACTURA, A L'AMPLADA DE LA TAULA QUE DESCRIUEN (#793, D7; F10: l'ajuda vigent
va sota el que descriu i amb la seva amplada). 40 rem és el sostre de «VencimentsDelDocument». Són l'ajuda del
calendari, la línia del compte, l'avís del tancament i la regió de les absorcions, tots fills directes de la
secció: apilada a tota l'amplada del grup, cap no s'hauria de llegir en una línia de 1.600 px. */
.cobrament-document > p {
max-width: 40rem;
}
/* LA LÍNIA D'UN GEST, AMB EMBOLCALL PROPI I AMB «wrap».
⚠️ AQUÍ HI DEIA «els botons en fila» I JA NO N'HI HA CAP DE GERMÀ. Fins a la
#244, «Descarrega'l per lliurar-lo» i «Envia'l per correu» compartien aquesta
fila i les dues ajudes anaven seguides a sota, de manera que la segona ajuda
queia sota el botó de l'altre. Ara cada acció va amb la seva dins d'una
«.parella-sortida» i aquí hi queda un sol botó: el de mirar, el de cada
parella, el del desviament d'un refús i el de desar de la configuració.
El «flex-wrap» es queda igualment —no costa res i el dia que una línia en
torni a portar dos, la pàgina no es desplaçarà de costat—. */
.accions-sortida {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.75rem 0 0;
}
/* LA CONSEQÜÈNCIA DE CADA BOTÓ, SEMPRE ESCRITA I MAI DINS DEL BOTÓ.
És la capa 3 de la separació, i va amb la lletra de l'ajuda d'un camp: el que
fa la feina és el verb del botó, i això és el que passarà després. «max-width»
com «.ajuda-seccio», que una línia de text que travessa 1.400 px no es
llegeix. */
.ajuda-accio-sortida {
max-width: 46rem;
margin: 0.35rem 0 0;
font-size: 0.85rem;
line-height: 1.4;
color: var(--color-sf-content-text-color-alt2);
}
/* CADA ACCIÓ AMB LA SEVA CONSEQÜÈNCIA, I EL QUE AGRUPA ÉS L'ESPAI.
⚠️ EL RITME NO AGRUPAVA RES I NO ES VEIA COM UN ERROR. Amb les dues ajudes
seguides, la distància entre una acció i la seva ajuda era 0,35 rem i la que
hi havia entre les DUES ajudes era la mateixa —el mateix marge de dalt—: el
que s'ha de llegir junt i el que s'ha de llegir separat es veien igual, i
dues ajudes a la mateixa distància es llegeixen com un sol bloc de text.
Ara la diferència és intencionada i prou gran per veure's: 0,35 rem dins de
la parella —el marge de dalt de l'ajuda— i 1,25 rem entre parelles.
⚠️ I CAP VORA I CAP FONS AQUÍ. El que agrupa és la reixa i l'espai:
«.sortides-document» ja és una caixa, i una caixa dins d'una caixa per a dos
botons és pes visual que no diu res de nou.
La reixa és «auto-fit» com la de «.camps», i és el que fa que això no
necessiti cap llindar nou: dues columnes quan hi caben —a l'escriptori— i una
quan no —a 390 px, on 18 rem de mínim ja no hi caben dues vegades—. Les
parelles s'apilen SENCERES, que és tot el que es demanava.
«align-items: start» perquè dues ajudes de llargada diferent no desalineïn
els botons: sense això, la parella curta estiraria i el seu botó baixaria al
mig de la cel·la.
Sense prefix de pantalla a posta: el patró té nom a docs/22 i les altres dues
peces —«.accions-sortida» i «.ajuda-accio-sortida»— ja eren globals. Acotar el
contenidor i deixar el contingut obert feia que mitja parella valgués per a
tothom i l'altra mitja només per a una secció. */
.parelles-sortida {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: 1.25rem;
align-items: start;
margin-top: 0.75rem;
}
/* Qui separa les parelles és el «gap» de la reixa, i el marge de dalt del botó
hi sobra: amb tots dos, l'espai de sobre de cada parella passaria a ser el
«gap» MÉS 0,75 rem, i el botó deixaria de tocar el capdamunt de la seva
cel·la —que és justament el que «align-items: start» hi busca—.
Sense prefix de pantalla, com la reixa: és part del patró. Guanya a
«.accions-sortida» d'aquí sobre per especificitat —dues classes contra una— i
no per ordre, de manera que no depèn d'on caigui cap de les dues. */
.parella-sortida .accions-sortida {
margin-top: 0;
}
/* L'AVÍS DE QUE JA HA SORTIT ABANS.
Sense color i sense icona: no ha fallat res i no hi ha res per corregir. El
que fa és impedir que qui vol reenviar el que el client ja té premi el botó
de dalt i en fabriqui un segon exemplar. */
.lliurament-client .avis-exemplar-nou {
max-width: 46rem;
margin: 0.75rem 0 0;
padding-left: 0.75rem;
border-left: 3px solid var(--color-sf-border);
font-size: 0.9rem;
line-height: 1.45;
}
.lliurament-client .cap-sortida {
margin: 1rem 0 0;
color: var(--color-sf-content-text-color-alt2);
}
/* EL MOTIU QUE OCUPA EL LLOC D'UN BOTÓ QUE NO ES DIBUIXA.
⚠️ LA LÍNIA DE SOBRE NO ÉS DECORACIÓ, I ES VA VEURE DIRIGINT LA PANTALLA. Sense
ella, «La fitxa d'aquest client no diu en quina llengua se li ha d'escriure…»
queia enganxat a l'ajuda de «Descarrega'l per lliurar-lo» i es llegia com la
seva continuació: el paràgraf que explica per què FALTA un botó semblava parlar
del botó que hi havia. Cap asserció no ho veuria —tot el que es comptava hi
era—.
I «max-width» com la resta del bloc: «.motiu-sense-primari» en porta 32rem
perquè allà viu arrambat a la dreta d'un peu d'accions, i aquí, a plena
amplada, aquella mida trencava el text en tres línies esquerdades al costat de
paràgrafs que n'ocupaven quaranta-sis. */
.lliurament-client .motiu-sense-primari {
max-width: 46rem;
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-sf-border);
}
/* A UNA PREFACTURA EL MOTIU ÉS EL PRIMER DEL BLOC (onada 4): no hi ha cap títol ni ajuda a
sobre de qui separar-lo, i el filet i l'aire de dalt hi quedaven penjats. */
.lliurament-client .sortides-document > .motiu-sense-primari:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.lliurament-client .motiu-sense-primari p {
margin: 0;
line-height: 1.45;
}
/* EL RETOL D'ABAST, QUE ES UN «p» I PER TANT CAU A LA REGLA DE SOBRE.
Aquella diu «margin: 0» amb dues classes de pes i guanya per especificitat
a «.motiu-sense-primari .titol-desviament», que ja demana el mig quart de
rem de sota. Sense aixo el retol queda enganxat al text que introdueix.
⚠️ Nomes es dibuixa quan hi ha DOS refusos alhora —el de l'empresa i el
del document—, de manera que qui no en tingui dos no veu cap canvi. */
.lliurament-client .motiu-sense-primari .titol-desviament {
margin-bottom: 0.25rem;
}
/* LA LLISTA D'EXEMPLARS. Dins de «.taula-desplacable», com totes les taules
d'aquestes fitxes: el que es desplaça és la taula i no la pàgina. */
.lliurament-client .taula-exemplars {
margin-top: 1rem;
}
/* El nom del fitxer no es parteix per la meitat d'un número de factura. */
.lliurament-client .cel-fitxer {
white-space: nowrap;
}
/* UN EXEMPLAR QUE CONSTA MALMÈS (#281): segona línia sota el nom, i aquesta SÍ que es
parteix. Sense tornar-li el partit heretaria el «nowrap» de la cel·la i a 390 px faria
créixer la taula per una frase. Groc de text i icona: hi ha feina —mirar què ha
passat amb l'arxiu—, que és el que el color vol dir aquí. */
.lliurament-client .cel-fitxer .exemplar-malmes {
display: flex;
align-items: baseline;
gap: 0.3rem;
margin-top: 0.2rem;
font-size: 0.8rem;
line-height: 1.3;
white-space: normal;
}
/* EL TRIANGLE DE L'EXEMPLAR MALMÈS, AL COLOR DE LA SEVA LÍNIA (#370). El tema porta
«.e-warning» amb color propi i sense ancestre, i qualsevol declaració guanya un valor
heretat. Avui la línia va sobre el fons de la pàgina i els dos colors coincideixen;
la cura hi és perquè el dia que la línia porti fons no quedi ambre damunt d'ambre. */
.exemplar-malmes .e-icons {
color: inherit;
}
/* LES EMPREMTES DEL REFÚS D'OBRIR UN EXEMPLAR (#281). Fora de la regió activa: 64
hexadecimals llegits en veu alta no diuen res a ningú, i el refús ja s'ha anunciat.
Monoespaiades i senceres —es parteixen, però no es tallen mai—, perquè l'única cosa que
se'n fa és comparar-les caràcter a caràcter. */
.lliurament-client .empremtes-refus {
margin: 0;
}
.lliurament-client .empremtes-refus dt {
font-weight: 600;
}
.lliurament-client .empremtes-refus dd {
margin: 0 0 0.4rem;
}
.lliurament-client .empremtes-refus code {
font-family: var(--lletra-mono);
word-break: break-all;
}
/* LA SORTIDA D'UN REFÚS, SOTA LA REGIÓ QUE JA L'HA ANUNCIAT.
Un «SfMessage» del tema no admet cap botó al cos —és el motiu pel qual
«.bloc-desviament» existeix—, de manera que el gest va en un bloc germà. Se li
treu el marge de sobre perquè va enganxat al missatge que l'explica: separats,
semblarien dues coses. */
.sortida-del-refus {
margin-top: -0.5rem;
}
.sortida-del-refus .accions-sortida {
margin-top: 0;
}
/* A QUINES BÚSTIES VA, DINS DEL DIÀLEG. Escrites i no resumides: «les adreces
marcades» obligaria a anar-les a mirar a la fitxa just quan s'està a punt de
prémer una cosa que no es pot desfer. */
.busties-confirmacio {
margin: 0.5rem 0 0;
padding-left: 1.25rem;
}
/* ---- El correu de sortida de l'empresa (docs/26 §8, fila 11) ---- */
/* L'AUTENTICACIÓ I LA CONTRASENYA DEL CORREU, EN «fieldset» DE VERITAT I SENSE CAIXA PRÒPIA.
«fieldset» perquè les dues parelles de ràdios no es barregin per a un lector de pantalla: sense
ell, «deixa la que hi ha» es llegeix sense saber de què.
SENSE VORA, NI MARGE, NI COIXÍ DEL NAVEGADOR (onada 2, #538). El primer és el control de la secció
«Identificació» —el seu nom és el subtítol, per «aria-labelledby»— i el segon viu dins del requadre
tintat dels dependents («DependentsDelControl»): una vora més seria caixa dins de caixa (docs/22).
L'aire entre el que hi ha a dins el posa el requadre de la peça. «min-inline-size: 0», perquè un
«fieldset» no s'estiri a l'amplada del seu contingut més llarg i no desbordi al telèfon. */
.bloc-autenticacio,
.bloc-contrasenya {
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
}
.bloc-contrasenya legend {
padding: 0;
margin-bottom: 0.25rem;
font-weight: 500;
}
.bloc-contrasenya > p {
margin: 0 0 0.5rem;
}
/* DUES OPCIONS EXCLOENTS S'APILEN, MAI EN FILA.
Els rètols són frases senceres —«El servidor no demana res: envia sense
identificar-se»— i en fila la segona se n'anava per fora molt abans del mòbil.
Apilades, la relació entre les dues es llegeix d'una ullada i el tabulador les
recorre en l'ordre en què estan escrites. */
.tria-vertical {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-bottom: 0.5rem;
}
/* I EL RÈTOL TRENCA LÍNIA. La regla va al nostre element i no a la classe que
Syncfusion dibuixa al voltant de la ràdio: «CssClass» d'un control no arriba
a ser classe a tot arreu, i escriure el nom de l'embolcall lligaria el full a
una decisió de marcatge que no és nostra. A 390 px, «El servidor no demana
res: envia sense identificar-se» no cap en una línia i el que no ha de fer és
sortir-se'n. */
.tria-vertical label {
white-space: normal;
}
@media (max-width: 45rem) {
/* LA BARRA DE COMANDES AL MÒBIL: AL FLUX, I RES NO ES REORDENA.
No s'enganxa: l'alçada és el recurs escàs —la barra de l'aplicació ja hi fa 76 px
o més— i el que s'enganxa se'n menja una altra part a cada pantalla.
«GrupPlegable.razor.js» ho llegeix de «position» i escriu zero a «--alcada-barra-document».
PASSA A UNA GRAELLA DE DUES COLUMNES, i els dos contenidors de l'escriptori es fonen
amb «display: contents» perquè els seus fills hi siguin germans. Cap «order»: els
salts surten de l'ordre del DOM, i el tabulador recorre el que es veu.
retorn
insígnia i a qui va, que baixa de fila SENCER i sense punts suspensius
desat · import
Mira el document · Més ▾
la plaça de primari, a tota l'amplada
⚠️ Aquest «@media» JA HI ERA: no s'estrena cap llindar. I va després de les regles
generals de la barra: mateixa especificitat, guanya l'última (docs/22). */
.barra-document {
position: static;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0.4rem 0.75rem;
}
.barra-document-identitat,
.barra-document-accions {
display: contents;
}
.barra-document-torna,
.barra-document-qui,
.barra-document-comandes,
.placa-principal {
grid-column: 1 / -1;
}
.barra-document-qui {
display: block;
}
.barra-document-qui :is(.estat, .marca-anullada) {
margin-right: 0.5rem;
}
.barra-document-client {
overflow: visible;
white-space: normal;
}
.barra-document .estat-desat {
grid-column: 1;
}
/* A LA FACTURA, L'ÍNDEX OCUPA EL LLOC DEL DESAT —a l'esquerra de l'import— i s'hi
desplaça a dins; i el número va en línia amb la insígnia, que un «h1» de bloc
partiria la fila del qui en dues. */
.barra-document .barra-document-index {
grid-column: 1;
}
/* A LA PREFACTURA, LA SEGONA LÍNIA (onada 4) VA A TOTA L'AMPLADA, l'última: l'índex es
desplaça a dins i el desat queda a la dreta, sota la plaça. */
.barra-document-segona {
grid-column: 1 / -1;
}
/* L'ÍNDEX, A LA SEVA FILA: al costat del desat en quedaven 30 px, i es veia una lletra
(mesurat a 390 px). El desat baixa a sota, a la dreta. */
.barra-document-segona .barra-document-index {
flex-basis: 100%;
}
.barra-document-qui .barra-document-numero {
display: inline;
margin-right: 0.5rem;
}
.barra-document-import {
grid-column: 2;
justify-self: end;
}
.placa-principal .e-btn {
flex: 1 1 100%;
}
/* UN CAMP DE DUES COLUMNES OCUPA LA FILA SENCERA: aquí «.camps» en fa una sola, i
«span 2» n'hi crearia una segona d'implícita que empenyeria la pàgina de costat. */
.fitxa-document .camp-doble {
grid-column: 1 / -1;
}
/* EL RESUM D'UN GRUP PLEGAT BAIXA SENCER A UNA SEGONA FILA, alineat amb el títol i no
amb la fletxa: a 390 px, amb punts suspensius no se'n llegiria res. El sagnat és
l'amplada de la fletxa, els seus marges i el «gap» del botó. */
.grup-capcalera {
flex-wrap: wrap;
padding: 0.4rem 0;
}
.grup-resum {
flex: 1 0 100%;
padding-left: calc(0.45rem + 0.2rem + 0.6rem);
overflow: visible;
white-space: normal;
}
/* AMB RAJOLA, EL RESUM BAIXA A LA SEGONA FILA I LA FRASE A LA TERCERA, totes dues al costat de la
rajola i alineades amb el text del títol (onada 3). */
.grup-capcalera--amb-rajola {
grid-template-columns: auto minmax(0, 1fr);
}
.grup-capcalera--amb-rajola > .rajola-grup {
grid-row: 1 / span 3;
}
.grup-capcalera--amb-rajola > .grup-resum {
grid-column: 2;
grid-row: 2;
}
.grup-capcalera--amb-rajola > .frase-grup {
grid-column: 2;
grid-row: 3;
}
/* La línia d'un destinatari: el botó de treure, a tota l'amplada a sota. */
.linia-destinatari > .e-btn {
margin-left: 0;
}
/* LES TECLES DE LES DRECERES NO ES DIUEN AL MÒBIL: allà no hi ha teclat, i «Aplica i
afegeix-ne una altra» ja omple el botó sencer. «aria-keyshortcuts» es queda. */
.drecera-boto {
display: none;
}
/* EL BOTÓ D'UNA SORTIDA, PREMENT TOTA L'AMPLADA.
⚠️ I NO ÉS NOMÉS DE COL·LOCACIÓ. «Descarrega'l per lliurar-lo» i «Envia'l
per correu» porten la finalitat al rètol a posta —és la capa 2 de la
separació entre veure i lliurar—, i a 390 px un rètol així no cap al costat
de res.
⚠️ EL QUE AIXÒ JA NO ARREGLA ÉS L'ATRIBUCIÓ, i durant un temps semblava que
sí. Apilar els botons deixava les dues ajudes seguides al peu del bloc, o
sigui «Te l'endús tu…» enganxada sota el botó d'ENVIAR: al telèfon era
pitjor que a l'escriptori, perquè allà almenys les ajudes queien sota una
fila i no sota un botó concret. Qui ho arregla és «.parelles-sortida», que
a aquesta amplada ja va a una sola columna sense necessitar cap llindar. */
.accions-sortida {
flex-direction: column;
align-items: stretch;
}
/* La caixa de sortides respira menys: a 390 px, 1,25 rem de cada costat són
40 px que li falten a la taula d'exemplars. */
.lliurament-client .sortides-document {
padding: 0.75rem;
}
}
/* ═══ LA GRAMÀTICA DE LES FITXES MESTRES (#500, #501, docs/22 F1-F9) ═══
El client, l'alta de client, l'article i la forma de pagament. Tot el que segueix penja
de «.fitxa-mestra» —l'embolcall de la pàgina— o de classes noves, i NO TOCA NI L'«h1»
GLOBAL NI EL FONS DEL «body»: estendre-ho a tot el producte és una altra feina, i
mouria les mesures de posició de les altres pantalles (la barra enganxada del document
descompta «--alcada-barra-document», que depèn de l'alçada del que té a sobre).
⚠️ LES REGLES GENERALS VAN ABANS DE LA CONSULTA DEL FINAL, i és a posta: amb la mateixa
especificitat guanya l'última (docs/22, «Quan una cosa no s'aplica»). */
/* LES CAPES DE SUPERFÍCIE: la pàgina i, a sobre, la targeta.
El fons de pàgina el pren «.contingut» NOMÉS quan porta una fitxa mestra a dins, i no el
«body»: les altres pantalles no l'han demanat. L'alçada mínima és perquè una fitxa curta
no deixi una franja del fons del «body» a sota.
⚠️ EN FOSC ES GIREN, i no és cap capritx: al tema fosc el fons alternatiu és MÉS CLAR que
el de contingut (#1d2432 contra #111827), de manera que amb les mateixes variables que en
clar la targeta quedaria més fosca que la pàgina. Girades, la targeta és la capa clara a
tots dos temes, que és el que vol dir «a sobre». */
.contingut:has(> .fitxa-mestra) {
box-sizing: border-box;
min-height: calc(100vh - var(--alcada-capcalera));
background-color: var(--color-sf-content-bg-color-alt2);
}
html[data-tema="fosc"] .contingut:has(> .fitxa-mestra) {
background-color: var(--color-sf-content-bg-color);
}
/* L'AMPLADA: EL SOSTRE ÉS EL DEL FORMULARI, I EL RESUM S'HI AFEGEIX AL COSTAT (#792, decisió de
l'usuari del 16/10/2026; docs/22 «Per damunt de 1.200 px»).
El formulari s'atura a tres caselles de 24 rem, les dues separacions, el coixí i la vora de la
targeta («--sostre-formulari-mestre», 1.242 px): els camps no creixen més enllà de tres columnes, i
una targeta més ampla només seria buit a la dreta. Amb el resum de «CosDeFitxa» al costat, la fitxa
hi suma la separació entre grups i la base del resum (1.586 px).
⚠️ FINS A LA #792 EL SOSTRE DE 1.242 PX ERA EL DE TOTA LA FITXA, RESUM INCLÒS: el formulari del client
i de l'article es quedava a 898 px, dues columnes a totes les amplades, i a 1.920 px hi havia 414 px
buits a la dreta. Per sota de 1.506 px de finestra el contingut no passa de 1.242 i res no canvia.
L'AMPLE ÉS EL PER DEFECTE, I L'ESTRENY UN COS SENSE RESUM. Al revés, la germana «Cobraments» del
client —un llistat sense «CosDeFitxa»— faria 344 px menys que «Dades» a 1.920, i el cap es mouria en
canviar de pestanya. I mentre una fitxa carrega no té cos: amb el per defecte ample, la d'un client
que ja existeix —la que més s'obre— no canvia d'amplada en acabar de carregar; és l'alta la que
s'estreny quan n'apareix el formulari, i fins llavors la capçalera sola es veu ampla (uns 80 ms a
l'alta d'un client, a 1.920 px). S'accepta: al primer fotograma només la ruta de la pàgina sap si hi
haurà resum (docs/22, «Per damunt de 1.200 px»). */
.fitxa-mestra {
--fons-targeta-mestra: var(--color-sf-content-bg-color);
--sostre-formulari-mestre: calc(3 * 24rem + 2 * var(--separacio-de-caselles) + 2 * var(--coixi-targeta-costat) + 2px);
max-width: calc(var(--sostre-formulari-mestre) + var(--espai-entre-grups) + var(--amplada-resum-lateral));
}
/* SENSE RESUM, LA FITXA ÉS EL FORMULARI SOL: les altes, la configuració, la forma de pagament,
l'establiment. «:not()» dins del «:has()» i no una classe que posi la pàgina: és el cos qui sap
si porta resum («CosDeFitxa.Resum»), i cap pàgina no l'ha de repetir. */
.fitxa-mestra:has(.cos-de-fitxa:not(.cos-de-fitxa--amb-resum)) {
max-width: var(--sostre-formulari-mestre);
}
/* I AMB RESUM, EL FORMULARI S'ATURA AL SEU SOSTRE i el resum pren la resta, que és la seva base.
LA BASE DEL FORMULARI ÉS EL QUE LI DEIXA EL RESUM, i no els 40 rem de «CosDeFitxa» (revisió de qualitat
de la #792, O2). Amb 40 rem i el creixement 999 a 1, el resum s'enduia una mil·lèsima de l'espai lliure: a
1.920 px el formulari feia 1.241,4 px i no els 1.242 del sostre, i les columnes, 383,8. Amb la base al lloc
on ha d'acabar —el contenidor menys la separació i el resum, sense passar del sostre ni baixar dels 40 rem—
no hi ha espai lliure a repartir quan van de costat, i cadascun fa exactament el seu: 1.242 i 320 al sostre,
832 i 320 a 1.440. Quan no hi caben (la base mínima de 40 rem més el resum), el resum baixa com sempre i cada
un creix a la seva fila: el tall és el mateix d'abans, perquè la base no baixa mai de 40 rem. */
.fitxa-mestra .cos-de-fitxa--amb-resum > .cos-de-fitxa-formulari {
flex-basis: max(40rem, min(var(--sostre-formulari-mestre), 100% - var(--espai-entre-grups) - var(--amplada-resum-lateral)));
max-width: var(--sostre-formulari-mestre);
}
html[data-tema="fosc"] .fitxa-mestra {
--fons-targeta-mestra: var(--color-sf-content-bg-color-alt1);
}
/* L'acotació vella de 52 rem és de la secció, i ara la fa l'embolcall. La sèrie hi va des
de la #504, i la targeta de la configuració de documents també: amb els 46 rem de la
regla vella, la targeta acabava a 976 px i el peu a 1.177 (D6 de la revisió del lot C).
Totes les targetes i el peu d'una fitxa mestra acaben a la mateixa vora. */
.fitxa-mestra :is(.fitxa-client, .fitxa-article, .fitxa-familia, .fitxa-forma-pagament, .fitxa-serie, .fitxa-usuari) {
max-width: none;
}
.fitxa-mestra .grup-caixa {
background-color: var(--fons-targeta-mestra);
}
/* UNA GRAELLA DINS D'UNA TARGETA PREN EL FONS DE LA TARGETA (#501): els terminis d'una
forma de pagament i les adreces d'un client. El tema pinta la graella amb el fons de
contingut, i en fosc la targeta és la capa clara: les files quedaven com un forat de
#111827 dins d'una targeta de #1d2432. Només els fons de repòs; el pas del ratolí i la
fila triada porten selectors del tema més específics, i continuen manant ells. */
.fitxa-mestra .grup-caixa .e-grid,
.fitxa-mestra .grup-caixa .e-grid :is(.e-gridheader, .e-gridcontent, .e-content, .e-table,
.e-headercontent, .e-row, .e-altrow, .e-headercell, .e-rowcell, .e-emptyrow td) {
background-color: var(--fons-targeta-mestra);
}
/* F8: EL TÍTOL ÉS EL NOM DEL REGISTRE, I PESA. 24 px i pes 700 (retoc 3 de la mostra),
amb l'identificador al costat en text secundari. L'identificador va en la lletra
monoespaiada, com tots els NIF i els codis del producte. */
.fitxa-mestra .capcalera-fitxa {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.75rem;
margin: 0 0 1.25rem;
}
.fitxa-mestra .capcalera-fitxa h1 {
min-width: 0;
margin: 0;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
overflow-wrap: anywhere;
}
.fitxa-mestra .identificador-fitxa {
font-family: var(--lletra-mono);
font-size: 0.95rem;
color: var(--color-sf-content-text-color-alt2);
}
/* EL TÍTOL D'UNA TARGETA QUE NO ES PLEGA, AMB L'AJUDA DE LA SECCIÓ AL COSTAT.
El botó va fora de l'«h2» (docs/22, «Una ajuda de secció»): dins entraria al nom del
títol i a la llista de títols. Un element i una classe guanyen el marge de l'«h2» global
per especificitat i no per ordre. */
.capcalera-grup {
display: flex;
align-items: center;
gap: 0.35rem;
margin: 0 0 0.75rem;
}
.capcalera-grup > h2 {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
/* EL TEXT D'AJUDA D'UNA SECCIÓ, QUE NEIX AMAGAT. Sense cap «display»: el «hidden» del
navegador és l'únic que el mana, i per això no hi cal cap regla germana com la de
«.camp small[hidden]». */
.ajuda-grup {
max-width: 62rem;
margin: -0.25rem 0 0.75rem;
font-size: 0.85rem;
color: var(--color-sf-content-text-color-alt2);
}
/* ELS CAMPS D'UNA FITXA MESTRA: DE 18 A 24 REM, I MAI MÉS DE TRES COLUMNES. La mateixa
mecànica que la fitxa d'un document —«auto-fill» i un sostre de tres caselles, sense cap
consulta de mitjans— perquè són la mateixa regla de docs/22.
EL SOSTRE DE LA GRAELLA I EL DEL FORMULARI («--sostre-formulari-mestre», a «.fitxa-mestra») LLEGEIXEN
LA MATEIXA SEPARACIÓ, el token (#792): escrita aquí com a número, el dia que el token canviés el
formulari i les seves graelles deixarien de fer la mateixa amplada sense cap error. */
.fitxa-mestra .camps {
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
max-width: calc(3 * 24rem + 2 * var(--separacio-de-caselles));
}
/* L'últim bloc de camps d'una targeta no hi deixa marge: el coixí ja el posa ella. */
.fitxa-mestra .grup-caixa .camps:last-child {
margin-bottom: 0;
}
/* ELS CAMPS D'UN DOMICILI, EN DUES COLUMNES COM A MOLT, A TOT ARREU.
País · Subdivisió / via, número i complement (la fila sencera) / codi postal i població ·
el camp final de qui l'acull. Amb tres columnes la via, que és llarga, deixaria un forat
darrere dels dos primers; amb dues no n'hi queda cap (docs/22, «L'ordre dels camps
s'escull perquè no quedin forats»).
Va DESPRÉS de «.fitxa-mestra .camps» i de la graella de la fitxa d'un document: la mateixa
especificitat, i guanya l'última. */
.camps.camps-domicili {
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
max-width: var(--sostre-de-dues-caselles);
}
/* LA GRAELLA DE LA FORMA 3 DE F10.2 ÉS «auto-fill» A TOT ARREU (#792, revisió de qualitat del 16/10/2026).
A la forma 3 el control i la casella dels seus dependents són les dues últimes de la mateixa graella, i la
dels dependents neix i mor. Amb l'«auto-fit» de «.camps», quan mor la seva pista buida es col·lapsa i el
control s'estira a tota la fila: al diàleg d'alta ràpida d'un article, l'exempció passava de 308 a 640 px en
triar una causa —un control que canvia d'amplada pel seu propi valor (F10.4) i que feia més del doble del
que necessita (F4)—. Amb «auto-fill» la pista buida hi és igualment, i el control fa sempre una casella.
UNA CLASSE I NO CAP «:has()»: quan els dependents moren no queda res al DOM que digui que la graella és de la
forma 3, i el selector deixaria d'agafar-la just quan cal. Sense cap «max-width»: el sostre és el del
context (la fitxa mestra el posa; un diàleg, el seu ample). Que tota graella de la forma 3 la porti ho
vigila «GramaticaDeLesFitxesTests.LaGraellaDeLaForma3PortaLaClasse» (docs/22, F10.2, la forma 3). */
.camps.camps-amb-dependents {
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
/* UNA CASELLA QUE OCUPA LA FILA SENCERA, SIGUI QUANTES SIGUIN LES COLUMNES: la via amb el
número i el complement, o el codi amb la descripció d'un article. «1 / -1» i no «span 2»:
en una graella d'una columna no en crea cap d'implícita. */
.camps > .fila-sencera {
grid-column: 1 / -1;
}
/* ELS GRUPS SENSE TARGETA —els mateixos camps dins d'un diàleg d'alta ràpida— es separen amb
aire: una targeta dins d'un diàleg seria caixa dins de caixa. */
.grup-pla + .grup-pla {
margin-top: 1.25rem;
}
/* ELS RÈTOLS FAN LA MATEIXA ALÇADA, EN PORTIN BOTÓ D'AJUDA O NO. Sense això, a la mateixa fila
de la graella el rètol amb el botó de 1,5 rem és més alt que el que no en porta, i els
controls queden desnivellats. És la regla de la fitxa d'un document (#311), portada a les
fitxes mestres i al domicili. */
/* I LA VISTA DEL DESTINATARI (#561): des que el país depèn de la mena, el país porta el botó d'ajuda i
la mena no, a la mateixa fila de la parella, i el desplegable del país quedava 4 px més avall. */
:is(.fitxa-mestra, .camps-domicili, .vista-destinatari) :is(.camp, .meitat) > label,
:is(.fitxa-mestra, .camps-domicili, .vista-destinatari) :is(.camp, .meitat) > .camp-retol {
min-height: 1.5rem;
}
:is(.fitxa-mestra, .camps-domicili) .camp > label {
display: flex;
align-items: center;
}
:is(.fitxa-mestra, .camps-domicili, .vista-destinatari) .meitat > label {
line-height: 1.5rem;
}
/* F4: L'AMPLADA D'UN CAMP LA MANA EL VALOR MÉS LLARG QUE HI POT ANAR. Cinc mides, i cap
més (docs/22, F4). Qualsevol fitxa que les vulgui les pren d'aquí:
- «.mida-minima»: 4-5,5 rem. D'un a quatre caràcters: el codi curt d'un document dins de la
graella de menes, una xifra de decimals (#504, decisió de l'usuari del 29/09/2026); i un
numèric de com a molt tres xifres enteres, dies o percentatge, que des de la #780 no porta
botons de girar. F4 no mesura cap control a la mínima: per sota no hi ha cap mida.
- «.mida-curta»: 6-8 rem. Codi postal, número.
- «.mida-mitjana»: 10-12 rem. Codi, NIF, data, import, un desplegable de paraules curtes.
- «.mida-normal»: la casella, 18-24 rem. Nom, desplegable de text, correu.
- «.mida-llarga»: dues caselles. Raó social, via, descripció.
LA CLASSE VA A L'ELEMENT NOSTRE QUE PORTA EL CONTROL (un «.camp» o una «.meitat»), i la
regla acota l'embolcall de Syncfusion amb «max-width», que guanya l'amplada en línia que
hi posa el component. La normal no arriba als 24 rem de la casella sinó a 22: un
desplegable de dues paraules no pot fer més del doble del que diu (F4, «Es mira»). */
.mida-minima {
--amplada-control: 5rem;
}
.mida-curta {
--amplada-control: 8rem;
}
.mida-mitjana {
--amplada-control: 11rem;
}
.mida-normal {
--amplada-control: 22rem;
}
/* LA LLARGA TAMBÉ DIU LA SEVA AMPLADA (revisió de l'onada 2, #538): dues caselles de 24 rem i la
separació, el sostre de F4. Sense la variable, les regles que la llegeixen —l'ajuda vigent «amb
el control», la meitat d'una parella amb dependent— no tenien res a llegir: l'ajuda del supòsit
de simplificada feia 895 px sota un control de 792 a 1.201, i la mena de retenció es quedava a
207 px i tallava el valor. Una casella llarga no es pot fer més ampla que la fila que la porta:
qui la fa servir com a sostre ho diu amb «min(100%, …)». */
.mida-llarga {
--amplada-control: var(--sostre-de-dues-caselles);
}
:is(.mida-minima, .mida-curta, .mida-mitjana, .mida-normal) .e-input-group {
max-width: var(--amplada-control);
}
/* UN CONTROL NO PASSA MAI DE LA SEVA CASELLA NI DE LA SEVA MEITAT: LA VORA, A DINS (#790, D2 de la revisió de qualitat).
El tema dona a l'embolcall del control «width: 100%» amb «content-box» i 1 px de vora a cada banda, de manera que
tots els controls feien dos píxels més que el lloc que els tocava: un control mitjà, 178 px dins d'una meitat de 176
—el valor del descompte de la línia baixava sota la mena per 0,7 px a 1.440—; una llarga, 794 dins de 792 (la variant
del REBU) o 752,7 dins de 751 (la clau de règim i la qualificació). I la mida de F4 (el «max-width» de sobre)
s'entenia sense la vora. Fins a la #790 només ho corregien les fitxes mestres, i només a la llarga; ara ho fa la
gramàtica per a tot control que viu en una casella o en una meitat, amb la mida que digui o sense: és on qualsevol
pantalla posa els seus camps.
NOMÉS L'AMPLADA: el tema no dona cap alçada a l'embolcall (la fa l'«input» de dins, que ja és «border-box»), i amb
«height: auto» el «box-sizing» no canvia res de vertical. Les cel·les de la taula de venciments ja ho tenien per la
mateixa causa (D4 de la revisió del lot 1a), i continuen amb la seva regla. */
:is(.camp, .meitat) .e-input-group {
box-sizing: border-box;
}
/* I UN CONTROL LLARG, MAI MÉS DE DUES CASELLES: dues de 24 rem i la separació són el sostre de la llarga (F4). A dues
columnes una llarga fa la fila sencera —895 px a 1.201—, i el control del supòsit de l'art. 4 la seguia sencera; la
descripció de la refacturació, que fa la fila sencera de la seva graella, en feia 1.186 a 1.920 (D3 de la revisió de
qualitat de la #790). Hi cap «Article 4.3 — autorització del Departament de Gestió Tributària» sense tallar. Una
llarga no es pot fer més ampla que la fila que la porta: d'aquí el «min(100%, …)». Era una regla de les fitxes
mestres; des de la #790 és de la gramàtica, i val també per a la resta de la fila (més avall), que és una llarga. */
.camps > .camp:is(.mida-llarga, .resta-de-la-fila) > .e-input-group {
max-width: min(100%, var(--sostre-de-dues-caselles));
}
/* La llarga ocupa dues caselles d'una graella, i al mòbil la fila sencera (a la consulta
del final): «span 2» en una graella d'una columna n'hi crearia una segona d'implícita que
empenyeria la pàgina de costat. */
.camps > .mida-llarga {
grid-column: span 2;
}
/* UN CAMP CURT O MITJÀ NO VA SOL: S'APARELLA DINS DE LA MATEIXA CASELLA (F4).
«.camp-parella» és la casella i «.parella», la fila de dins; cada «.meitat» porta el seu
rètol i el seu control i diu la seva mida. Les ajudes i els refusos van a sota, a
l'amplada de la casella sencera: dins d'una meitat de 8 rem, un paràgraf cauria en deu
ratlles. Quan no hi cap, la fila es parteix en comptes de desbordar. */
.parella {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.5rem 0.75rem;
}
.parella > .meitat {
min-width: 0;
}
.parella > .meitat:is(.mida-minima, .mida-curta, .mida-mitjana) {
flex: 0 0 var(--amplada-control);
}
/* UNA MEITAT NORMAL PARTEIX DE L'AMPLADA DEL SEU RÈTOL, i no de 8 rem (revisió de l'onada 2,
#538): a 390 px, «Servidor de sortida (SMTP)» amb el seu botó al costat del port es quedava
amb 218 px i es tallava, perquè 8 + 8 rem hi cabien i la fila no es partia. Amb la base al
contingut, quan el rètol no hi cap al costat de la seva parella, la parella es parteix i el
port baixa a la mateixa columna; on hi cap —a l'escriptori, i el codi postal amb la població
al telèfon— no canvia res. */
.parella > .meitat.mida-normal {
flex: 1 1 max-content;
max-width: var(--amplada-control);
}
/* La llarga s'estira, però fins a dues caselles: 1.200 px d'una línia de text no es
llegeixen bé (docs/22, «Per damunt de 1.200 px»). */
.parella > .meitat.mida-llarga {
flex: 1 1 14rem;
max-width: var(--sostre-de-dues-caselles);
}
/* F10 DINS D'UNA CASELLA: UN CONTROL I EL QUE EN DEPÈN, EN PARELLA (docs/22, F4 i F10.2;
revisió de la #546). «.parella-amb-dependent» és la fila d'un desplegable i el camp que
fa néixer: el dependent va a 12 px del control quan hi cap i a sota, a la mateixa
columna, quan no. Com a dues caselles de la graella naixia a la columna del costat, i
un desplegable de 11 rem dins d'una columna de 24 el deixava a 208 px.
LA MEITAT NORMAL NO S'ENCONGEIX PER FER LLOC AL DEPENDENT: parteix d'una amplada de
control (22 rem) i no de 8, de manera que quan les dues no hi caben el dependent baixa
en comptes d'escanyar la regió o el tipus a 170 px al telèfon. Encara es pot encongir
fins a l'amplada de la casella, si aquesta és més estreta. */
.parella.parella-amb-dependent > .meitat.mida-normal {
flex: 0 1 var(--amplada-control);
}
/* I UNA MEITAT CURTA O MITJANA FA L'AMPLADA DEL SEU RÈTOL SI EL RÈTOL ÉS MÉS LLARG QUE EL
CONTROL: «Recàrrec d'equivalència» amb el seu botó no cap en 11 rem, i com a casella
pròpia no es tallava. El control continua acotat a la seva mida (F4); el que creix és el
lloc del rètol, com a «.parella-justa». */
.parella.parella-amb-dependent > .meitat:not(.mida-normal, .mida-llarga) {
flex: 0 0 auto;
min-width: var(--amplada-control);
}
/* UNA MEITAT LLARGA AMB DEPENDENT —la mena de retenció de l'emissor, amb opcions de 360 a
420 px— s'estira com qualsevol llarga (la regla general de més amunt) i no fa l'amplada del
seu rètol: amb «flex: 0 0 auto» es quedava a 207 px i tallava el valor triat (revisió de
l'onada 2). El dependent va al costat mentre hi cap, i si no, a sota. */
/* Un rètol que no hi cap no parteix la fila: es talla, i el nom sencer el continua
dient el «label» al lector de pantalla. */
.parella > .meitat .camp-retol label,
.parella > .meitat > label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* TRES CAMPS CURTS QUE DIUEN LA MATEIXA COSA —els dies de pagament—: es reparteixen la
casella en comptes de partir la fila, fins a la seva mida curta.
I DUES MITJANES QUE HI CABEN JUSTES —les dates d'un document (#503)—: 11 + 11 rem i la
separació fan 364 px, i una casella en fa 362 a 1.440 i 304 a 721. Partir-les les posava
l'una sota l'altra; ara es reparteixen la casella, com les tres curtes. */
.parella:is(.parella-tres, .parella-justa) {
flex-wrap: nowrap;
gap: 0.5rem;
}
.parella:is(.parella-tres, .parella-justa) > .meitat {
flex: 1 1 0;
max-width: var(--amplada-control);
}
/* A LA PARELLA DE DATES, LA MEITAT POT ARRIBAR AL SOSTRE DE LA MITJANA (12 rem) i el
rètol s'hi acosta al seu botó: «Fecha de la operación» amb el botó «i» es tallava un
píxel a 1.201 i a 1.440. El control continua acotat a 11 rem per la regla de les
mides; el que creix és el lloc del rètol. */
.parella.parella-justa > .meitat {
max-width: 12rem;
}
.parella.parella-justa .camp-retol {
gap: 0.25rem;
}
/* TRES CAMPS DE LA MATEIXA MIDA QUE VAN JUNTS, EN UNA FILA O UN SOTA L'ALTRE, MAI DOS I UN («.tres-en-fila», #793,
decisió de l'usuari del 17/10/2026): la base, la quota i el recàrrec de la factura rectificada, mitjans, dins
del requadre dels dependents de «Manera de rectificar». Com a tres caselles d'una graella feien 388 px cadascun
a 1.920 (F4) i queien 2 + 1 a 1.201 i a 721; amb «.parella-tres» es repartirien la fila també al telèfon, on
tres rètols de 100 px es tallen.
TOT O RES, SENSE CAP CONSULTA: cada meitat fa la seva mida, i el que decideix si cau a la fila següent és el seu
MARGE FINAL. La diferència entre el que demanen les tres juntes (tres mides i les dues separacions de la parella)
i el que hi ha, multiplicada: quan hi caben és negativa, el marge es queda a zero i van de costat; quan no, el
marge omple la resta de la línia («100% - la mida»), cada meitat ocupa una línia sencera i baixa sola, a la seva
mida. El marge no desborda: amb ell, la meitat fa exactament el 100 % de la parella. Si la parella és més
estreta que una meitat, el sostre queda per sota del zero, guanya el zero i la meitat s'encongeix a la línia.
⚠️ NO ES POT FER AMB LA BASE I UN «max-width» (la primera versió, revisió de qualitat de la #793): el salt de
línia es calcula amb la mida hipotètica, que és la base ja ACOTADA pel «max-width». Amb la base enorme i el
sostre d'11 rem, el navegador partia amb 176 px per meitat, i entre uns 450 i 635 px de finestra (parella de
364 a 552 px) n'hi cabien dues i la tercera baixava. El marge compta a la mida exterior i cap «max-width»
no el retalla. La mida la diu cada meitat (--amplada-control); la separació és la de «.parella», 0,75 rem. */
.parella.tres-en-fila > .meitat {
flex: 0 1 var(--amplada-control);
margin-inline-end: clamp(0px, calc((3 * var(--amplada-control) + 2 * 0.75rem - 100%) * 999), calc(100% - var(--amplada-control)));
}
/* EL RÈTOL D'UNA CASELLA QUE PORTA MÉS D'UN CONTROL: és un «span» i no cap «label», perquè
no n'hi ha cap de sol per apuntar-hi. Es veu com els rètols dels camps. */
.camp .retol-casella {
display: block;
font-weight: 500;
}
/* UN CONTROL AMB LA SEVA ACCIÓ AL COSTAT: el NIF i «Comprova al cens» (#500).
El botó viu dins del bloc del veredicte, que va sota el camp; el bloc es fon a la casella
(«display: contents», i és un «div» sense cap paper) perquè el botó pugui anar a la fila
del control. L'ordre visual el dona «order», i coincideix amb el del tabulador: el rètol
i el seu botó d'ajuda, el control, l'acció, i les propostes del veredicte a sota. */
.camp-amb-accio {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 0.75rem;
}
.camp-amb-accio > *,
.camp-amb-accio > .veredicte-cens > * {
flex: 1 0 100%;
order: 3;
}
.camp-amb-accio > :is(label, .camp-retol) {
order: 0;
}
.camp-amb-accio > .control-principal {
flex: 0 1 var(--amplada-control);
order: 1;
min-width: 0;
}
.camp-amb-accio > .veredicte-cens {
display: contents;
}
/* Tres classes guanyen «.fitxa-client .accions», que li posava 1,5 rem a sobre. */
.camp-amb-accio > .veredicte-cens > .accions {
flex: 0 0 auto;
order: 2;
margin: 0;
}
/* LA PROPOSTA DEL NOM, SENSE L'AIRE D'UN AVÍS D'ACCIÓ (#583). Amb el bloc fos, l'avís és un
element de la fila «flex» de la casella, on els marges no es fonen: l'aire del sistema
s'hi sumava al que ja tenia i la proposta baixava de 24 a 36 px (revisió de qualitat de la
#583, D1). Es queda on era. */
.camp-amb-accio > .veredicte-cens > .avis-accio {
margin: 0;
}
/* F7: ELS TRES LLOCS DE LES ACCIONS D'UNA FITXA. El peu —«Cancel·la» i «Desa», amb el
primari l'últim— és «.peu-accions», que ja hi era. Les que actuen de seguida i no esperen
«Desa» (esborrar) van en una zona pròpia després del peu, separada per un filet. El motiu
de no poder-ho fer hi va al lloc del botó, que és on qui el busca el trobarà. */
.zona-immediata {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.75rem;
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--color-sf-border-light);
}
/* A la zona no hi ha res més a la fila: el marge automàtic d'«.accio-esborra» se
n'enduria el botó a l'altra punta. */
.zona-immediata .accio-esborra {
margin-left: 0;
}
.zona-immediata .impediment-esborrat {
flex: 1 1 100%;
}
/* «ELS TERMINIS SUMEN 100 %» ÉS LA LÍNIA BASE, I NO PORTA COLOR (#501, docs/22 «Estats»).
Només el porta quan no sumen 100, que és quan vol dir alguna cosa. Pes normal: el que
crida és el color de l'excepció, no la xifra de sempre. */
.fitxa-mestra .suma-terminis {
font-weight: 400;
color: var(--color-sf-content-text-color-alt2);
}
.fitxa-mestra .suma-terminis.estat-avis {
font-weight: 600;
color: var(--color-sf-warning);
}
/* EL «#» DEL TERMINI, A L'ALÇADA DEL CONTROL. La fila va a dalt (la fila que no balla, #765), i el número, que
és text, quedava enganxat a la vora de dalt mentre els controls del costat en tenen 2 rem: amb la mateixa
alçada de línia queda centrat amb ells, com «.venciment-numero» de la taula de venciments. */
.graella-terminis .e-rowcell .import {
line-height: 2rem;
}
/* ═══ LA SÈRIE, LA CONFIGURACIÓ FISCAL I LA DE DOCUMENTS, COM A FITXES MESTRES (#504) ═══
Totes tres pengen de «.fitxa-mestra» i prenen d'allà les capes, el títol i els camps; aquí
només hi ha el que és seu. Cap regla global nova: estendre les capes a tot el producte no és
feina d'aquest lot (decisió de l'usuari del 28/09/2026). */
/* L'ENTRADETA D'UNA PANTALLA DE CONFIGURACIÓ: una frase sota el títol que diu de què és la
pantalla. Gris i acotada, com les ajudes: no és cap avís. El marge negatiu la fa pujar cap
al títol, que ja porta el seu aire a sota. */
.fitxa-mestra .entradeta {
max-width: 62rem;
margin: -0.5rem 0 0;
color: var(--color-sf-content-text-color-alt2);
}
/* LA SÈRIE: UNA SOLA VORA DRETA. L'ajuda del patró anava a 62 rem: dins d'una targeta arriba a
la vora de la targeta, i el que hi ha a dins té la mida del seu contingut. Els tipus que admet
ja no hi són: des de l'onada 1 viuen dins dels dependents de «Factura» i la seva amplada és la
del requadre tintat (la regla de sota). */
.fitxa-mestra .fitxa-serie .ajuda-fitxes {
max-width: none;
}
/* ═══ LES CINC FITXES MESTRES AMB EL SISTEMA DE FITXES (onada 1, #537) ═══
Només el que és de cada pantalla i no imita cap peça: el que fa una peça és al seu bloc. */
/* ELS TIPUS QUE ADMET UNA SÈRIE, DINS DELS DEPENDENTS DE «FACTURA» (F10): darrere del codi curt,
dins del requadre tintat. SENSE CAIXA: el requadre ja és la caixa, i la vora i el coixí de
«.tipus-admesos» la tornaven a dibuixar a dins —una caixa dins d'una caixa dins d'una targeta—.
El «fieldset» es queda per la «legend», que fa de rètol com el d'un camp (la mateixa forma que
«.tria-rol»). L'amplada és la del requadre, i l'aire amb el codi curt de sobre el posa la peça
(«.opcio-dependents», revisió de l'onada 1): aquí no hi ha cap marge. */
.opcio-dependents > .tipus-admesos {
min-width: 0;
max-width: none;
padding: 0;
border: 0;
}
.opcio-dependents > .tipus-admesos > legend {
margin: 0 0 0.35rem;
padding: 0;
}
/* EL ROL D'UN USUARI, UNA TRIA DE DUES OPCIONS (docs/22, «Una tria entre opcions excloents no és
cap casella»): el «fieldset» és de veritat per la «legend», i no hi porta cap caixa —el grup ja és
una targeta—. La «legend» fa de rètol, com el d'un camp. */
.tria-rol {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.tria-rol legend {
margin: 0 0 0.35rem;
padding: 0;
font-weight: 500;
}
/* L'AVÍS DE LA CONTRASENYA DE L'ALTA D'UN USUARI, just damunt de la barra que la generarà: una
conseqüència que no es desfà, a la vista i sense requadre (F6), amb el color de les ajudes i la
línia acotada com «.ajuda-seccio». */
.avis-contrasenya {
max-width: 46rem;
margin: 1rem 0 0;
font-size: 0.85rem;
color: var(--color-sf-content-text-color-alt2);
}
/* EL CONTROL LLARG QUE NO PASSA DE LA SEVA CASELLA NI DE DUES CASELLES ja no és aquí: era de les fitxes mestres, i des
de la #790 és de la gramàtica, al bloc de les mides de F4 («UN CONTROL NO PASSA MAI DE LA SEVA CASELLA»). Es va veure
aquí primer: la mena de retenció (794 px contra 792, a 1.201) i el patró d'una sèrie sol a la fila (1.158 contra
1.156). */
/* LA CONFIGURACIÓ FISCAL: L'IMPOST DEL CATÀLEG QUAN NO ÉS COLUMNA (L4). La frase i el botó
que torna la columna, en una fila, sobre la graella. */
.impost-del-cataleg {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
margin: 0 0 0.75rem;
}
@media (max-width: 45rem) {
.camps > .mida-llarga {
grid-column: 1 / -1;
}
.fitxa-mestra .capcalera-fitxa h1 {
font-size: 1.3rem;
}
/* El que es prem ha de fer 44 px, com al peu (veure «EL QUE ES PREM HA DE FER 44 PX»). */
/* NOMÉS EL BOTÓ D'ACCIÓ DE LA CASELLA («Comprova al cens»), i no el botó «i» del rètol:
aquell és de la mida d'una lletra a tota l'aplicació, i amb «.camp-amb-accio .e-btn» a
390 px feia 24 × 44. */
.zona-immediata .e-btn,
.camp-amb-accio .accions .e-btn {
min-height: 44px;
}
}
/* ═══ EL SISTEMA DE FITXES: LES PECES («Components/Fitxes», 30/09/2026) ═══
Les regles de les peces que el sistema de fitxes afegeix: «CapcaleraDeRegistre»,
«XifraDeCapcalera», «PestanyesDeFitxa», «GrupDeFitxa», «OpcionsDeFitxa» i «OpcioAmbDependents»,
«BarraDeDesar», «CosDeFitxa», «ResumLateral» amb les seves targetes, «PlafoLateral»,
«ColleccioDeFitxa» amb «FilaDeColleccio» (acabat general, 01/10/2026), i
«PrevisualitzacioDeFitxa» i «ZonaImmediata» amb «AccioImmediata» (onada 1, 01/10/2026), i
«TriaApilada» i la graella «.camps-de-dues» (#522, 02/10/2026), i les d'un llistat: «CapcaleraDeLlistat»,
«TiraDeVistes» amb «TargetaDeVista», «.superficie-llistat», «EstatBuitDelLlistat» i «CelaDePersona»
(onada 5, #541, 03/10/2026), i el peu d'un plafó amb resum («.peu-plafo-amb-resum») i la graella de
tria d'un plafó («.barra-tria» i «.graella-tria») (#567, 03/10/2026), i els venciments d'un document
(«VencimentsDelDocument» i «FilaDeVenciment», amb el quadre «.peu-quadre») (#615, 08/10/2026). La regla
—quan es fa servir cadascuna— és a docs/22, «Sistema de fitxes»; aquí hi ha com es dibuixen.
⚠️ CAP COLOR, CAP RADI I CAP OMBRA ESCRITS: tot surt del bloc «SISTEMA DE FITXES: TOKENS» o de
les «--color-sf-*» del tema. «ColorsNomesAlsTokensTests» ho vigila per als colors i
«RadisNomesAlsTokensTests» per als radis; les ombres són la mateixa regla, i qui la trenqui ho
farà en una revisió.
PENGEN DE LES CLASSES DE LES PECES, i no de «.fitxa-mestra»: una peça s'ha de veure igual a la
fitxa d'un client i dins d'un plafó. On una peça reaprofita una classe que ja hi era
(«.capcalera-fitxa», «.identificador-fitxa», «.peu-accions»), aquí es retoca amb la classe de
la peça al davant, amb la mateixa especificitat i més avall al full.
⚠️ LES CONSULTES DE MITJANS VAN AL FINAL D'AQUESTA SECCIÓ, i són les dues de sempre (75 i 45
rem, «Talls.cs»): una consulta no afegeix especificitat, i escrita abans no manaria.
⚠️ I CAP «display» NO GUANYA «hidden», A TOT EL FULL (G5, #822, docs/22). «hidden» és el «display:
none» de l'estil del navegador, el que menys pesa, i qualsevol regla que doni «display» a un element
que es pot plegar el torna a ensenyar sense cap error: la llista «Més antics (3)» del resum d'un client
es veia i rebia el focus. Una regla així porta «:where(:not([hidden]))» al subjecte —dins d'un
«:where()» perquè no pesi i continuï guanyant i perdent contra les mateixes regles d'abans— o una
germana «…[hidden] { display: none }» com «.camp small[hidden]». CAP «[hidden]» GENERAL AMB
«!important»: el descarta el comentari de «.camp small[hidden]». Ho vigila
«CriterisDeLesFitxesTests.CapReglaDelFullFaVeureElQueEsPlegat», que no mira els avantpassats: per això
el porten també regles com «.totals small», on avui no hi ha cap ajuda a demanda. */
/* ---- LA CAPÇALERA D'UN REGISTRE («CapcaleraDeRegistre») I EL CAP D'UN DOCUMENT («CapDelDocument») ----
LA MATEIXA SUPERFÍCIE (onada 3, #539): la vora, el radi, el fons i l'ombra de la capçalera d'un
registre són també els del cap d'un document, que porta la mateixa tira de xifres al peu. El marge
de baix és de la capçalera: el cap va dins de «CosDeFitxa», que ja posa la separació.
I LA DE LA TIRA D'UN REGISTRE QUAN VA DARRERE DEL FORMULARI («CosDeFitxa.Xifres», #825, D2 de la #796): al telèfon
és la mateixa tira, i la superfície que la porta ha de ser la mateixa. */
.capcalera-registre,
.cap-del-document,
.cos-de-fitxa-xifres {
border: 1px solid var(--color-sf-border-light);
border-radius: var(--radi-superficie);
background-color: var(--fons-targeta);
box-shadow: var(--ombra-superficie);
}
.capcalera-registre {
margin: 0 0 1.375rem;
}
.capcalera-registre-dalt {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.125rem;
padding: 1.5rem 1.75rem;
}
/* EL MONOGRAMA: el primari sobre el fons suau del primari, com la rajola dels grups. Lletra
de 22 px en pes 700, que és text gran: 4,78:1 en clar i 7,59:1 en fosc (docs/22). */
.capcalera-registre-monograma {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 3.75rem;
height: 3.75rem;
border-radius: 50%;
background-color: var(--fons-primari-suau);
color: var(--color-sf-primary);
font-size: 1.375rem;
font-weight: 700;
letter-spacing: -0.02em;
}
/* UN REGISTRE QUE NO ÉS NINGÚ PORTA UNA ICONA, I NO UN CERCLE (onada 1): la persona és rodona i
la cosa és un quadre amb la cantonada de les superfícies. Els mateixos colors que el monograma
i que la rajola dels grups (4,78:1 en clar i 7,59:1 en fosc; una icona en demana 3). */
.capcalera-registre-icona {
border-radius: var(--radi-superficie);
}
.capcalera-registre-icona .e-icons {
color: inherit;
font-size: 1.75rem;
}
.capcalera-registre-identitat {
flex: 1 1 18rem;
min-width: 0;
}
/* LA FILA DEL TÍTOL ÉS LA «.capcalera-fitxa» DE TOTES LES FITXES MESTRES, i aquí es diu
sencera perquè la peça també es pot fer servir fora de «.fitxa-mestra». Dues classes
contra les dues de «.fitxa-mestra .capcalera-fitxa»: guanya aquesta, que va després. */
.capcalera-registre .capcalera-fitxa {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.75rem;
margin: 0;
}
.capcalera-registre .capcalera-fitxa h1 {
min-width: 0;
margin: 0;
font-size: 1.75rem;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.15;
overflow-wrap: anywhere;
}
.capcalera-registre-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.125rem;
margin: 0.625rem 0 0;
padding: 0;
list-style: none;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.85rem;
}
.capcalera-registre-meta li {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
/* Dues classes contra la d'«.e-icons» del tema. El terciari fa 4,8:1 sobre la targeta
clara, i una icona en demana 3. */
.capcalera-registre-meta .e-icons {
color: var(--color-sf-content-text-color-alt3);
font-size: 0.875rem;
}
/* L'IDENTIFICADOR, EN UN XIP DE PAS FIX: el text del registre i no el secundari, perquè és
el que es llegeix caràcter a caràcter i es copia. */
.capcalera-registre .identificador-fitxa {
padding: 0.125rem 0.5rem;
border: 1px solid var(--color-sf-border-light);
border-radius: var(--radi-control);
background-color: var(--fons-inset);
color: var(--color-sf-content-text-color);
font-family: var(--lletra-mono);
font-size: 0.8125rem;
}
/* LES ACCIONS, A LA DRETA I A DALT: el primer que es troba en acabar de llegir el nom (F7,
zona 1). Quan no hi caben, baixen sota la identitat i s'hi queden a la dreta. */
.capcalera-registre-accions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-left: auto;
align-self: flex-start;
}
/* LA TIRA DE XIFRES («TiraDeXifres»): totes en una fila i de la mateixa amplada, sense saber
quantes n'hi ha. Els filets entre elles són el fons de la graella que es veu per la separació
d'un píxel; el retall és de la tira i no de la targeta, que no pot portar cap «overflow». Va
SEMPRE AL PEU D'UNA SUPERFÍCIE —la capçalera d'un registre o el cap d'un document—, i per
això porta el filet de dalt i les cantonades de baix. Fins a l'onada 3 es deia
«.capcalera-registre-xifres». */
.tira-de-xifres {
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
gap: 1px;
margin: 0;
overflow: hidden;
border-top: 1px solid var(--color-sf-border-light);
border-radius: 0 0 calc(var(--radi-superficie) - 1px) calc(var(--radi-superficie) - 1px);
background-color: var(--color-sf-border-light);
}
/* ---- UNA XIFRA DE LA CAPÇALERA («XifraDeCapcalera») ---- */
.xifra-capcalera {
min-width: 0;
padding: 1rem 1.75rem;
background-color: var(--fons-targeta);
}
.xifra-capcalera dt {
color: var(--color-sf-content-text-color-alt3);
font-size: 0.8rem;
font-weight: 500;
}
.xifra-capcalera dd {
margin: 0;
}
.xifra-capcalera .xifra-valor {
margin-top: 0.25rem;
color: var(--color-sf-content-text-color);
font-size: 1.375rem;
font-weight: 600;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
/* UN VALOR NO ES PARTEIX MAI (#528). Un import és una unitat, i «-1.234.567,89» amb el
«€» sol a la línia de sota no es llegeix com cap xifra. Aquí només es diu que no es
parteix; que hi càpiga és feina de les columnes, que al telèfon en passen a ser una
(vegeu el tall de 45 rem). */
white-space: nowrap;
}
.xifra-capcalera .xifra-mono {
font-family: var(--lletra-mono);
font-size: 1.25rem;
letter-spacing: 0;
}
.xifra-capcalera .xifra-detall {
margin-top: 0.125rem;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.8rem;
}
/* EL VALOR QUE PORTA A UN ALTRE LLOC és l'àncora del producte, sense cap color propi: el text
del primari fosc (7,6:1 en clar i 12,8:1 en fosc) i el subratllat que el diu enllaç també
per a qui no distingeix colors (WCAG 1.4.1). El pes i la mida, els de la xifra. */
.xifra-capcalera .xifra-valor a {
color: var(--color-sf-primary-dark);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
/* EL FOCUS DEL TECLAT, L'ANELL DE TOTA L'APLICACIÓ (el d'«a.ancora»). */
.xifra-capcalera .xifra-valor a:focus-visible {
outline: 2px solid var(--color-sf-primary);
outline-offset: 2px;
}
/* LA NOTA DEL QUE LA XIFRA NO COMPTA: la mida del detall, i en secundari i no en terciari, a
posta. Una nota que es llegís menys que el detall seria la lletra petita d'un contracte, i el
que diu és justament el que no s'ha de passar per alt (#528). La línia de sobre la separa
del detall sense cap color nou. */
.xifra-capcalera .xifra-nota {
margin-top: 0.375rem;
padding-top: 0.375rem;
border-top: 1px dashed var(--color-sf-border-light);
color: var(--color-sf-content-text-color-alt2);
font-size: 0.8rem;
font-style: italic;
}
/* ---- LA TIRA D'UN REGISTRE, COMPACTA (#825, D2 (b) de la #796, decisió de l'usuari del 18/10/2026) ----
NOMÉS LA DE «CapcaleraDeRegistre», I NOMÉS PER DAMUNT DE 45 REM: el cap d'un document no canvia, i al telèfon la tira
d'un registre va darrere del formulari amb la forma de sempre (el bloc del telèfon ho desfà per a «Cobraments», on es
queda a dalt). La del client feia 123 px a 1.920 i 138 a 1.440, i el formulari començava a y=499.
EL RÈTOL I LA XIFRA EN UNA LÍNIA, EL DETALL I LES NOTES A SOTA, en 88 px com a molt amb una nota: una fila flexible
que s'embolica. Si el rètol i el valor no hi caben de costat, el valor baixa sencer a la línia de sota —mai no es
parteix (#528)—, i el detall i les notes ocupen sempre una línia sencera. El valor, a 1,25 rem: amb el rètol al
costat ja és el que mana, i la de 1,375 rem el feia més alt que la línia.
LES COLUMNES FAN EL QUE DEMANA LA SEVA PRIMERA LÍNIA, i el que sobra es reparteix a parts iguals («auto», i no
«1fr»). Amb quatre columnes iguals, a 1.440 px «Pendent de cobrament» i «15.228,14 €» no hi cabien de costat i el
valor baixava; la de l'última factura, en canvi, en tenia de sobres. EL DETALL I LES NOTES NO DEMANEN AMPLADA
(«contain: inline-size»): són text que es parteix, i amb la seva amplada natural una nota llarga s'enduria la
columna. Els filets entre xifres continuen sent el fons de la graella. A tauleta, dues per fila com sempre: les
columnes explícites del tall de 75 rem manen sobre aquestes.
ELS VALORS D'UNA FILA, A LA MATEIXA ALÇADA («align-content: flex-start»). La cel·la s'estira fins a l'alçada de la
fila, i amb el valor per defecte les línies de dins s'hi repartien: quan una xifra en feia tres, les del costat
baixaven el valor, i a 1.201 px quedaven 29 px desaparellats.
EL COIXÍ DE DINS DELS FILETS ÉS D'1 REM, i el de l'esquerra de la primera columna, l'1,75 rem de la capçalera: el
rètol de la primera xifra continua a plom amb el nom. Amb 1,75 rem a tots dos costats de cada filet, les quatre
xifres del client demanaven uns 999 px a 1.201 px, que és escriptori i en té 935: el rètol i el valor no hi cabien
de costat i la tira feia 116 px. El de la dreta no es veu —el text va a l'esquerra—, i només deia quanta amplada
demana la columna. A tauleta, cada fila torna a començar a 1,75 rem (el tall de 75 rem). */
.capcalera-registre > .tira-de-xifres {
grid-auto-columns: auto;
}
.capcalera-registre > .tira-de-xifres > .xifra-capcalera {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
align-items: baseline;
column-gap: 0.5rem;
padding: 0.625rem 1rem;
}
.capcalera-registre > .tira-de-xifres > .xifra-capcalera:first-child {
padding-left: 1.75rem;
}
.capcalera-registre > .tira-de-xifres > .xifra-capcalera > :is(.xifra-detall, .xifra-nota) {
flex-basis: 100%;
contain: inline-size;
}
.capcalera-registre > .tira-de-xifres .xifra-valor {
margin-top: 0;
font-size: 1.25rem;
}
.capcalera-registre > .tira-de-xifres .xifra-mono {
font-size: 1.125rem;
}
.capcalera-registre > .tira-de-xifres .xifra-nota {
margin-top: 0.25rem;
padding-top: 0.25rem;
}
/* ---- LA TIRA D'UN REGISTRE DARRERE DEL FORMULARI («CosDeFitxa.Xifres», #825, D2 (c) de la #796) ----
AL TELÈFON, A LA PÀGINA DEL FORMULARI, la tira va darrere del formulari i abans del resum, que és el que ja fa el
resum lateral quan no hi cap al costat; a una germana sense formulari («Cobraments») es queda a dalt. A 390 × 750 la
primera pantalla del client era tota capçalera i quatre xifres apilades (366 px), sense cap camp ni la barra de desar.
ÉS LA MATEIXA TIRA DUES VEGADES AL MARCATGE, i el full n'ensenya una: aquesta, només al telèfon (el bloc de 45 rem),
i la de la capçalera, a tot arreu menys al telèfon d'una pàgina que porta aquesta. CAP «order» i cap mòdul: el que es
veu és l'ordre del DOM a totes dues amplades, la pàgina no salta quan el circuit arriba, i la que no es veu és
«display: none», fora de l'arbre d'accessibilitat i del tabulador. El perquè, a docs/20 («La tira d'un registre al
telèfon, darrere del formulari»).
AL PEU DE LA SEVA SUPERFÍCIE COM SEMPRE, i aquí la superfície és només la tira: sense el filet de dalt i amb les
quatre cantonades. La separació del formulari i del resum, la del cos: el «gap» quan és flexible, i el marge quan el
cos és un bloc (sense resum, o amb la marca «data-resum-a-sota»). */
.cos-de-fitxa-xifres {
display: none;
}
.cos-de-fitxa-xifres > .tira-de-xifres {
border-top: 0;
border-radius: calc(var(--radi-superficie) - 1px);
}
/* ---- EL CAP D'UN DOCUMENT («CapDelDocument», onada 3, #539) ----
LA SUPERFÍCIE ÉS LA DE LA CAPÇALERA D'UN REGISTRE (regla compartida, més amunt), i el coixí, el
mateix (1,5 × 1,75 rem): la tira de xifres del peu hi queda alineada igual que a la capçalera.
«min-width: 0» perquè una taula de destinataris es desplaci a dins i no empenyi la pàgina. */
.cap-del-document {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}
/* LA IDENTITAT FA L'ALÇADA DEL RESUM QUAN VAN DE COSTAT (revisió de l'onada 3). A 1.440 px la línia de
temps i el QR fan el resum més alt que la identitat, i amb l'«align-items: flex-start» de
«CosDeFitxa» quedava un forat sota la targeta de l'esquerra fins que el resum s'acabava i començaven
els grups. Aquí la fila s'estira, la targeta omple la seva columna i la tira baixa al peu, alineada
amb el final del resum: dues superfícies que comencen i acaben a la mateixa altura. Només el cap: en
una fitxa mestra el formulari és el que s'hi ve a fer i no s'estira cap targeta de grup. Quan el resum
baixa a sota (1.201 px), cada una és a la seva fila i no s'estira res. */
.cos-de-fitxa--amb-resum:has(> .cos-de-fitxa-formulari > .cap-del-document) {
align-items: stretch;
}
.cos-de-fitxa-formulari:has(> .cap-del-document) {
display: flex;
flex-direction: column;
}
.cos-de-fitxa--amb-resum:has(> .cos-de-fitxa-formulari > .cap-del-document) > .resum-lateral {
align-self: flex-start;
}
/* Rep el focus per anunciar-se quan és el destí de l'índex, no per dibuixar cap anell al voltant
d'una caixa: el criteri dels destins de la barra («.zona-resposta»). */
.cap-del-document:focus {
outline: none;
}
.cap-del-document-cos {
flex: 1 1 auto;
padding: 1.5rem 1.75rem;
}
/* LES DADES CURTES DE DALT, com les de la capçalera d'un registre: secundari, amb la icona en
terciari (4,8:1 sobre la targeta clara; una icona en demana 3). */
.cap-del-document-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.125rem;
margin: 0 0 1rem;
padding: 0;
list-style: none;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.85rem;
}
.cap-del-document-meta li {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.cap-del-document-meta .e-icons {
color: var(--color-sf-content-text-color-alt3);
font-size: 0.875rem;
}
/* LA IDENTITAT, AMB ESTIL DE LA PEÇA («:where()», que no pesa): la pàgina hi posa un «dl» sense classe
—les parelles poden anar dins d'un «div», que no compta— i «p» per a les línies de referència. El
rètol, en terciari i petit, a l'esquerra; el valor, en el text del registre, a la dreta. Al telèfon,
el rètol a sobre (vegeu el tall de 45 rem). */
:where(.cap-del-document-cos) > dl {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 0.5rem 1.5rem;
margin: 0;
}
:where(.cap-del-document-cos) > dl > div:where(:not([hidden])) {
display: contents;
}
:where(.cap-del-document-cos) > dl :is(dt, dd) {
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
}
:where(.cap-del-document-cos) > dl dt {
color: var(--color-sf-content-text-color-alt3);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.75;
}
:where(.cap-del-document-cos) > dl dd {
min-width: 0;
color: var(--color-sf-content-text-color);
overflow-wrap: anywhere;
}
:where(.cap-del-document-cos) > p {
margin: 0 0 0.75rem;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.85rem;
}
/* ⚠️ UN AVÍS D'ACCIÓ NO HI ENTRA (#596): l'aire el posa el sistema («--espai-entre-avisos», 12 px).
Amb «:is(dl, div)» pesant més que el «:where()» de l'avís, el segon de dos avisos seguits —el fort
i el suau de tornar a resoldre— en prenia 16 i els dos quedaven més separats que a qualsevol altra
pantalla. Ho mesura «TractamentAMaEnTornarAResoldreTests». */
:where(.cap-del-document-cos) > :is(dl, p, div) + :is(dl, div):not(.avis-accio) {
margin-top: 1rem;
}
/* ELS CAMPS D'UN DOCUMENT PREPARATORI (onada 4, #540): la identitat s'hi escriu en una «.camps» de la
pàgina, amb la seva graella de sempre (a 1.440 px, ~774 px de cos: dues columnes). El marge de sota de
l'última no s'afegeix al coixí del cos. Entre una «.camps» i el «dl» de «Destinataris» els dos marges es
fonen (el cos és un bloc), i en queda 1 rem. */
.cap-del-document-cos > .camps:last-child {
margin-bottom: 0;
}
/* ELS ENLLAÇOS DE TEXT, AMB EL COLOR DE L'ÀNCORA; un «a.e-btn» —la sortida d'un desviament dins del cap
d'un preparatori— és un botó i no en pren res (onada 4). Tot dins del «:where()», que no pesa. */
:where(.cap-del-document-cos a:not(.e-btn)) {
color: var(--color-sf-primary-dark);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
/* EL FOCUS, FORA DEL «:where()» I AMB PES (0,3,1) (#533, D1 de la revisió de qualitat del 10/10/2026): vegeu
«.text-amb-enllac» aquí sota. */
.cap-del-document-cos a:not(.e-btn):focus-visible {
outline: 2px solid var(--color-sf-primary);
outline-offset: 2px;
}
/* ---- UNA FRASE AMB UN ENLLAÇ AL MIG («TextAmbEnllac», #533) ----
LA MATEIXA REGLA QUE ELS ENLLAÇOS DEL CAP I DE LA TRIA, PERQUÈ LA PEÇA TAMBÉ VA DINS D'UN DIÀLEG: l'avís del
diàleg «Reobre» porta el número de la rectificativa, i Syncfusion se'n duu els diàlegs al «body», on
«:where(main a…)» no arriba. Sense, el blau del navegador. Dins del «:where()», que no pesa: dins d'un
«.valor-subordinat» l'enllaç s'hi queda amb la mida petita i només en canvia el color. */
:where(.text-amb-enllac a:not(.e-btn)) {
color: var(--color-sf-primary-dark);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
/* ⚠️ EL FOCUS, FORA DEL «:where()» I AMB PES (#533, D1 de la revisió de qualitat del 10/10/2026). El tema hi té
«.e-control:focus, .e-control *:focus { outline: none }», que pesa (0,2,0) i cau sobre tot el que hi ha dins d'un
«SfDialog» o d'un «SfMessage»: «:where(…):focus-visible» en pesava (0,1,0), i a l'avís del diàleg «Reobre»
l'enllaç amb el focus del teclat no tenia cap anell (mesurat: «outline: none», WCAG 2.4.7). Amb «.text-amb-enllac
a:not(.e-btn)» davant el «:focus-visible» pesa (0,3,1) i guanya sense dependre de l'ordre dels fulls. El color sí
que es queda dins del «:where()»: el del focus és l'únic que el tema esborra. Les germanes del cap, de la tria i
de la targeta de resum, el mateix. Ho vigila «ElFocusDelsEnllacosDeLesPecesGuanyaElDelTema». */
.text-amb-enllac a:not(.e-btn):focus-visible {
outline: 2px solid var(--color-sf-primary);
outline-offset: 2px;
}
/* ---- LES PESTANYES D'UNA FITXA («PestanyesDeFitxa») ----
EL FILET DE SOTA ÉS UNA OMBRA INTERIOR DE LA LLISTA, i no la vora de la navegació: la llista es
desplaça de costat al telèfon, i un marge negatiu dels enllaços per trepitjar la vora dins d'un
contenidor amb «overflow» faria sortir una barra de desplaçament vertical. L'ombra es pinta
sota els enllaços, i el subratllat de la pestanya d'ara hi va damunt. */
.pestanyes-fitxa {
margin: 0 0 1.375rem;
}
.pestanyes-fitxa ul {
display: flex;
gap: 1.625rem;
margin: 0;
padding: 0;
overflow-x: auto;
list-style: none;
box-shadow: inset 0 -1px 0 var(--color-sf-border-light);
}
.pestanyes-fitxa a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.625rem 0 0.75rem;
border-bottom: 2px solid transparent;
color: var(--color-sf-content-text-color-alt2);
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
.pestanyes-fitxa a:hover {
color: var(--color-sf-content-text-color);
}
/* LA PESTANYA D'ARA ES DIU AMB L'ATRIBUT, i el que es veu i el que se sent surten del
mateix lloc. */
.pestanyes-fitxa a[aria-current="page"] {
border-bottom-color: var(--color-sf-primary);
color: var(--color-sf-content-text-color);
font-weight: 600;
}
/* A dins, i no a fora: la llista retalla el que en surt. */
.pestanyes-fitxa a:focus-visible {
outline: 2px solid var(--color-sf-primary);
outline-offset: -2px;
}
.pestanya-recompte {
padding: 0 0.45rem;
border: 1px solid var(--color-sf-border-light);
border-radius: 999px;
background-color: var(--fons-inset);
color: var(--color-sf-content-text-color-alt2);
font-size: 0.75rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
/* ---- UN GRUP D'UNA FITXA («GrupDeFitxa») ----
LA TARGETA ÉS LA «.grup-caixa» DE SEMPRE; aquí només hi ha la capçalera amb la rajola. El títol,
el botó d'ajuda i el text d'ajuda són els de «TitolDeGrup». */
.grup-de-fitxa-cap {
display: flex;
align-items: flex-start;
gap: 0.875rem;
margin: 0 0 1rem;
}
.grup-de-fitxa-titols {
flex: 1 1 auto;
min-width: 0;
}
.grup-de-fitxa-titols > .capcalera-grup {
margin: 0;
}
.grup-de-fitxa-titols > .ajuda-grup {
margin: 0.5rem 0 0;
}
/* LA LÍNIA DE PER A QUÈ SERVEIX UN GRUP («TitolDeGrup.Frase»): gris i d'una línia, just sota el
títol. */
.frase-grup {
margin: 0.125rem 0 0;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.85rem;
}
/* LA RAJOLA D'ICONA: el primari sobre el fons suau del primari (4,78:1 en clar i 7,59:1 en fosc,
i una icona en demana 3). La fan servir el grup i la capçalera del plafó lateral. */
.rajola-grup {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 2.125rem;
height: 2.125rem;
border-radius: var(--radi-control);
background-color: var(--fons-primari-suau);
color: var(--color-sf-primary);
}
.rajola-grup .e-icons {
color: inherit;
font-size: 1.125rem;
}
/* ---- LES FILES D'OPCIÓ («OpcionsDeFitxa» i «OpcioAmbDependents»), I F10 ----
Un requadre amb un filet entre fila i fila. El que depèn d'una casella va en un requadre tintat
just a sota seu, amb la vora de dalt discontínua, que és el que fa visible de qui depèn: el fons
és el del requadre de sota la targeta, i en fosc també es gira sol (--fons-inset). */
.opcions-fitxa {
margin: 1.125rem 0 0;
border: 1px solid var(--color-sf-border-light);
border-radius: var(--radi-superficie);
background-color: var(--fons-targeta);
}
.opcions-fitxa:first-child {
margin-top: 0;
}
/* SOTA UNA GRAELLA DE CAMPS, L'AIRE EL POSA LA GRAELLA: «.camps» ja porta 1 rem de marge a
sota, i els dos marges sumats feien 34 px entre el darrer camp i les opcions, el doble que
entre dues files de camps (vist en una captura de la fitxa del client). */
.camps + .opcions-fitxa {
margin-top: 0;
}
.opcio-fila + .opcio-fila {
border-top: 1px solid var(--color-sf-border-light);
}
.opcio-control {
padding: 0.875rem 1rem;
}
.opcio-control .e-checkbox-wrapper .e-label {
color: var(--color-sf-content-text-color);
font-weight: 500;
}
/* EL QUE HI HA SOTA LA CASELLA COMENÇA ON COMENÇA EL SEU TÍTOL: el quadre fa 16 px i el tema
hi deixa 8 fins al text. */
.opcio-control > small {
margin-left: 1.5rem;
}
.opcio-control > .opcio-explicacio {
margin-top: 0.125rem;
font-size: 0.85rem;
}
/* ELS DEPENDENTS, AL MATEIX SAGNAT QUE EL TÍTOL: el coixí de la fila més els 1,5 rem del quadre. */
.opcio-dependents {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: 0.75rem;
padding: 0.875rem 1rem 1rem 2.5rem;
border-top: 1px dashed var(--color-sf-border);
background-color: var(--fons-inset);
}
/* L'AIRE ENTRE DOS FILLS DE «Dependents» EL POSA LA PEÇA, i no cada pàgina amb el marge del que
hi posa (revisió de l'onada 1): el codi curt i els tipus admesos d'una sèrie quedaven
enganxats, i la pàgina ho arreglava amb un marge propi. Una graella amb «row-gap», i cap
marge de bloc als fills: el de «.camps» (1 rem a baix) i el de «.tipus-admesos» (1 rem a dalt
i a baix) s'hi sumarien. Un fill amagat («hidden») no deixa cap forat: no és cap fila. */
.opcio-dependents > * {
margin-top: 0;
margin-bottom: 0;
}
/* UNA GRAELLA DE CAMPS SOTA UN REQUADRE D'OPCIONS en deixa l'aire que hi ha entre el requadre i
el que té a sobre: sense cap regla, la fila següent en quedava enganxada (la mena de client,
sota la marca «Comprovat» del NIF-IVA). */
.opcions-fitxa + .camps {
margin-top: 1.125rem;
}
/* L'AJUDA VIGENT D'UN CAMP, AMB L'AMPLADA DEL SEU CONTROL (F10: «l'ajuda vigent va sota el que
descriu i amb la seva amplada»). Un control mitjà de 178 px amb un avís de 362 a sota deia
que l'avís era d'una altra cosa. És una classe a posta i no una regla de tot «.ajuda-vigent»:
n'hi ha que fan de peu d'una fila sencera i que partides a 11 rem farien cinc línies. El text
ha de cabre en dues (F10), i si no hi cap, la resta va a demanda. */
.camp > .ajuda-vigent.amb-el-control {
max-width: min(100%, var(--amplada-control, 100%));
}
/* UN VALOR FIX NO TÉ CAP CONTROL, i l'ajuda que diu per què no es pot canviar no s'acota a
l'amplada del que no hi és: el sentit d'una sèrie, en una casella mitjana, la partia en quatre
línies d'11 rem fins i tot al telèfon (revisió de l'onada 1). Va a l'amplada de la casella. */
.camp:has(> .valor-fix) > .ajuda-vigent.amb-el-control {
max-width: none;
}
/* L'últim requadre tintat segueix la cantonada del requadre d'opcions. */
.opcions-fitxa > .opcio-fila:last-child > .opcio-dependents {
border-radius: 0 0 calc(var(--radi-superficie) - 1px) calc(var(--radi-superficie) - 1px);
}
/* ---- LA BARRA DE DESAR («BarraDeDesar») ----
ÉS EL PEU DE LA FITXA («.peu-accions») QUE SURA: «position: sticky» a baix, com «.barra-lot», i
amb el mateix «z-index» 700, per sota del calaix del menú (900), del full de cerca (880) i dels
diàlegs (1000). El fons no és decoració: sense ell, els camps que passen per sota s'hi veurien.
Ni la targeta ni cap ancestre no pot portar «overflow», o deixaria d'enganxar-se (la regla de
«TargetaDeGrupTests»).
I EL PEU D'UNA VISTA («PeuDeLaVista», #824, D3 de la #796) PORTA LA MATEIXA SUPERFÍCIE I LA MATEIXA POSICIÓ: és el
peu de la vista d'una línia o d'un destinatari, que també sura, i dues superfícies flotants que es diferenciessin en
un píxel serien dues peces. Una sola regla, i no una còpia. Al telèfon ell torna al flux (més avall). */
.barra-de-desar,
.peu-de-la-vista {
position: sticky;
bottom: var(--baix-barra-de-desar, 1rem);
z-index: 700;
gap: 0.625rem;
padding: 0.625rem 0.625rem 0.625rem 1.125rem;
border: 1px solid var(--color-sf-border-light);
border-radius: var(--radi-flotant);
background-color: var(--fons-targeta);
box-shadow: var(--ombra-alta);
}
/* EN UNA LÍNIA, I EL QUE NO HI CAP ACABA AMB PUNTS: amb sis camps canviats, els noms feien
baixar els botons a una segona fila a 1.440 px (vist en una captura de la fitxa del client).
El recompte va primer i sempre es veu. */
.barra-de-desar-estat {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 auto 0 0;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.85rem;
}
.barra-de-desar-estat strong {
color: var(--color-sf-content-text-color);
font-weight: 600;
}
/* EL PUNT DELS CANVIS és el color d'avís del tema: és l'excepció —hi ha feina sense desar— i
el text ja ho diu. */
.barra-de-desar-marca {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
margin-right: 0.5rem;
border-radius: 50%;
background-color: var(--color-sf-warning);
vertical-align: middle;
}
/* EL REFÚS D'UN «Desa» (G1 i D1 de la #796, #823): «No s'ha desat · Cal la descripció», al lloc del recompte i
amb cada camp com a enllaç. Ocupa el mateix lloc que «.barra-de-desar-estat» —creix i empeny els botons a la
dreta— però NO ES TALLA AMB PUNTS: un enllaç tallat es podria enfocar sense veure's, i amb tres camps refusats
la barra fa dues ratlles. L'alçada la mesura «BarraDeDesar.razor.js» i el document la reserva igual.
Buida, la regió porta «.visualment-amagat»: hi és per a l'anunci i no ocupa cap lloc ni cap separació. */
.barra-de-desar-refus {
min-width: 0;
margin: 0 auto 0 0;
overflow-wrap: break-word;
color: var(--color-sf-content-text-color);
font-size: 0.85rem;
}
/* EL TEXT DE LA BARRA —EL RECOMPTE O EL REFÚS— NO BAIXA DE 16 REM AL COSTAT DELS BOTONS: SI NO HI CAP, FA LA SEVA
FILA i els botons van a sota, a la dreta («.peu-accions» embolica i arramba al final). Amb «flex: 1 1 0» el text
no reclamava res i es quedava el que deixaven els botons: amb «Descripcio», la línia de sota fa el tros dels
botons tan ample com ella, i a 721 px el refús de la configuració de documents quedava en uns 60 px —una paraula
per línia—, que vessaven per sobre de la descripció i li tapaven l'enllaç: el clic hi queia al «small» i el focus
no arribava al camp (mesurat per «drwfac-uxui» al lot 4 de la #823). Amb una base de debò, el navegador fa la
tria sol: a 1.201 i a 1.920 tot cap en una fila, com abans; a 721 amb la descripció, el text fa la seva. 16 rem
hi caben «No s'ha desat · El color no és vàlid» i «2 canvis sense desar» sencers. «overflow-wrap» és la xarxa
d'una paraula més llarga que tot el tros (un valor escrit dins d'un motiu): es parteix i no vessa sobre els
botons. Al telèfon, tots dos fan la fila sencera (més avall). */
.barra-de-desar-estat,
.barra-de-desar-refus {
flex: 1 1 16rem;
}
/* LA CONSEQÜÈNCIA, DITA UNA VEGADA I EN EL VERMELL DEL REFÚS: el de «.camp .error-camp», que ja fa el
contrast sobre el fons de la targeta. */
.barra-de-desar-refus strong {
color: var(--color-sf-danger);
font-weight: 600;
}
/* CADA CAMP ÉS UN ENLLAÇ: el color i el subratllat dels enllaços de «.targeta-resum», que el tema no pinta
(sense això surt el blau del navegador), i el focus amb pes (0,2,1) contra el «.e-control *:focus». */
.barra-de-desar-refus a {
color: var(--color-sf-primary-dark);
font-weight: 500;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
.barra-de-desar .barra-de-desar-refus a:focus-visible {
outline: 2px solid var(--color-sf-primary);
outline-offset: 2px;
}
/* EL PUNT DEL REFÚS, EN EL VERMELL DEL TEMA: el de l'avís diu que hi ha feina sense desar; aquest, que no s'ha
pogut desar. El text ja ho diu. */
.barra-de-desar-marca-refus {
background-color: var(--color-sf-danger);
}
/* A LA DRETA: sense descripció el contenidor fa l'amplada dels botons i no canvia res; amb descripció,
la línia el fa més ample que els botons i sense això quedarien a l'esquerra del seu tros. */
.barra-de-desar-accions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.5rem;
}
/* QUÈ FARÀ L'ACCIÓ SECUNDÀRIA («BarraDeDesar.Descripcio», lot 3 de la #614): una fila sencera sota els
botons, alineada amb ells i en secundari, com la línia d'una acció immediata. En una línia: si no hi
cap, és ajuda. Al telèfon no es veu (vegeu el bloc del telèfon). */
.barra-de-desar-descripcio {
flex: 1 1 100%;
margin: 0;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.8rem;
text-align: end;
}
/* UN ENLLAÇ AMB ASPECTE DE BOTÓ CENTRA EL TEXT COM UN BOTÓ. «Cancel·la» és un «a.e-btn», i
«.peu-accions .e-btn» el fa de 44 px al telèfon: un «button» hi centra el text sol, però
un enllaç en bloc el deixa a dalt —6 px a sobre i 23 a sota, al costat de «Desa» amb 14 i
15—. Val per a qualsevol fitxa amb la barra, i no només la del client.
⚠️ I PER A TOTS ELS LLOCS DEL SISTEMA ON UN ENLLAÇ FA DE BOTÓ ALT (revisió de l'onada 3): la
mateixa trampa va tornar a la zona immediata, on «AccioImmediata.Href» dibuixa
«a.e-btn.comanda» i «.zona-immediata .e-btn» el fa de 44 px al telèfon (7 px a dalt i 20 a
baix, al costat d'«Anul·la» amb 13 i 14); a la sortida d'un motiu, que és un enllaç dins de
la mateixa zona; i a la plaça de la barra d'un document («Què demana el registre», 6 i 23,
que ja venia de la #311). Un sol selector per als quatre, i no una regla per lloc: la
propera vegada que una peça dibuixi un enllaç de 44 px, s'hi afegeix aquí. Ho vigila
«ElTextDUnaAccioImmediataVaCentrat». */
:is(.barra-de-desar-accions, .accio-immediata, .accio-immediata-sortida, .placa-principal,
.capcalera-llistat-accions, .estat-buit-llistat-accio, .estat-buit-colleccio-accio) > a.e-btn {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* LA BARRA NO TAPA EL QUE TÉ EL FOCUS (WCAG 2.4.11). Sura enganxada a baix, i quan el tabulador
arribava a un camp que quedava just darrere seu, el navegador no desplaçava res perquè el camp
ja era dins de la finestra: a 390 px la mena de client quedava tapada sencera, i a 1.440 una
casella d'opció. «scroll-padding-bottom» al document diu al navegador que els últims píxels de
la finestra no compten com a visibles, i el desplaçament que fa en enfocar un control el deixa
per sobre de la barra.
NOMÉS ON HI HA LA BARRA (:has), i amb la seva alçada, la distància a la vora («bottom») i un
marge perquè el focus no quedi tocant-la.
⚠️ L'ALÇADA LA MESURA «BarraDeDesar.razor.js» i l'escriu a «» a cada canvi de mida: la
barra creix quan s'obre l'ajuda de la casella «Actiu» (de 51 a 78 px a l'escriptori, de 92 a
156 al telèfon), i amb un número fix tres botons d'ajuda quedaven tapats sencers a 390 px. Els
valors d'aquí —la barra d'una fila, i al telèfon la de dues— només valen fins que el mòdul ha
mesurat, o si el circuit no hi és. Ho vigila «GramaticaDeLesFitxesAlNavegadorTests
.BarraDeDesarNoTapaElFocus», també amb aquella ajuda oberta.
EL PEU D'UNA VISTA ES RESERVA IGUAL (#824, G14): el mesura el mateix mòdul, i el valor d'aquí només val fins que
l'ha mesurat. Al telèfon no sura i no reserva res (al bloc del telèfon). */
html:has(.barra-de-desar, .peu-de-la-vista) {
--alcada-barra-de-desar: 3.25rem;
--baix-barra-de-desar: 1rem;
scroll-padding-bottom: calc(var(--alcada-barra-de-desar) + var(--baix-barra-de-desar) + 0.75rem);
}
/* ---- EL RESUM A SOTA: «DESA» ES VEU FINS AL FINAL DE LA FITXA (G2 de la #796, #824) ----
EL DEFECTE. «sticky» no surt mai del bloc contenidor, i el de la barra és el formulari de «CosDeFitxa». Quan el resum
no hi cap al costat i baixa a sota, el formulari s'acaba on s'acaba la barra, i al final de la pàgina «Desa» quedava
per sobre de la finestra (al client desat, a -578 px a 1.201 × 800 i a -417 a 721 × 960). G2 vol el primari a la
vista abans i després de desplaçar-se fins al final.
LA MARCA LA POSA «BarraDeDesar.razor.js» («data-resum-a-sota»), i no cap «@media»: no és cap tall d'amplada sinó el
que decideix el «flex-wrap» del cos —a 1.201 px el resum baixa i a 1.199, amb el menú plegat, no—, i «@container» és
prohibit (docs/22, «A tauleta, una columna que no hi cap cedeix»). Amb la marca:
- EL COS ES FA BLOC I EL FORMULARI DEIXA DE FER CAIXA («display: contents»): els grups, la barra i la zona immediata
passen a ser fills del cos, i la barra en té el cos sencer —el formulari i el resum— de bloc contenidor. A la
vista no canvia res: amb el resum a sota, el flex ja els apilava. El formulari és un «div» sense cap rol, i el
«contents» no s'emporta cap semàntica. La separació entre el formulari i el resum, que feia el «gap», la fa el
marge del resum.
- LA BARRA PORTA «top» A MÉS DE «bottom», I EL «top» ÉS EL DE SOTA LA CAPÇALERA. Amb «bottom» sol, un element
enganxat es queda enrere quan el seu lloc passa per sobre de la finestra, i el seu lloc és entre el formulari i la
zona immediata. Amb «top», quan el seu lloc ja ha passat per dalt, s'enganxa a dalt de la finestra, sota la
capçalera, fins al final del resum. Mentre el seu lloc es veu, s'hi queda; mentre és més avall, sura a baix com
sempre.
⚠️ NO EL «top» QUE LA FARIA SURAR SEMPRE A BAIX (calc(100dvh - alçada)), que va ser la primera versió (#824): a una
fitxa curta, amb el resum a sota i tot a la vista, la barra quedava al final del cos, i en tabular de «Desa» a la
zona immediata —que va després al DOM i es veia més amunt— el focus pujava 206-280 px (l'article, la família, el
correu i l'usuari, a 721 px), i G9 no admet cap salt cap amunt fora dels seus tres casos. El tabulador ha de
trobar la barra on la veu: al seu lloc, entre el formulari i la zona.
L'ORDRE DEL TABULADOR NO CANVIA: el formulari, «Desa», la zona immediata i el resum (G9, cas c). */
.cos-de-fitxa--amb-resum[data-resum-a-sota] {
display: block;
}
.cos-de-fitxa--amb-resum[data-resum-a-sota] > .cos-de-fitxa-formulari {
display: contents;
}
.cos-de-fitxa--amb-resum[data-resum-a-sota] > .resum-lateral {
margin-top: var(--espai-entre-grups);
}
.cos-de-fitxa--amb-resum[data-resum-a-sota] .barra-de-desar {
top: calc(var(--alcada-capcalera) + var(--baix-barra-de-desar, 1rem));
}
/* ---- EL PEU D'UNA VISTA («PeuDeLaVista», #824, D3 de la #796) ----
LA VISTA D'UNA LÍNIA I LA D'UN DESTINATARI: el resultat a l'esquerra, i a la dreta «Anterior» i «Següent» i les
accions, en una fila que s'embolica si no hi cap. La superfície i la posició són les de la barra (més amunt), i
al telèfon torna al flux (al bloc del telèfon). Cap «order»: el que es veu és l'ordre del DOM. */
.peu-de-la-vista-xifres {
min-width: 0;
margin-right: auto;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.85rem;
}
/* L'IMPORT DE LA LÍNIA EN UNA RATLLA: «Base 100,00 · Quota 21,00». Un «dl» de rètol i xifra, que és com la
vista ja el dibuixava, i amb el pes (0,2,1) que venç les regles de la pàgina per a l'import al flux.
«:where(:not([hidden]))», la cautela de G5. */
.peu-de-la-vista .peu-de-la-vista-xifres > dl:where(:not([hidden])) {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.125rem 0.4rem;
width: auto;
margin: 0;
}
.peu-de-la-vista .peu-de-la-vista-xifres > dl > dd {
margin: 0;
color: var(--color-sf-content-text-color);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.peu-de-la-vista .peu-de-la-vista-xifres > dl > dd + dt {
margin-left: 0.75rem;
}
/* «ANTERIOR» I «SEGÜENT» VAN JUNTS I SEPARATS DE LES ACCIONS: no tanquen res, es mouen. */
.peu-de-la-vista-navegacio,
.peu-de-la-vista-accions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.peu-de-la-vista-navegacio {
margin-right: 0.75rem;
}
/* I EL CAMP REFUSAT NO QUEDA SOTA LA CAPÇALERA (G1, #823). Quan un «Desa» es refusa, «BarraDeDesar.razor.js» porta el
focus al primer camp i en desplaça la casella amb «block: "nearest"»: si el camp era MÉS AMUNT de la finestra —amb
el tabulador, arribar a «Desa» ja baixa la pàgina—, s'alinea per dalt i quedava a y = 0, sota la capçalera que sura
(el control a y = 29 amb una capçalera de 52, mesurat per «drwfac-uxui» el 18/10/2026). Amb el coixí de les
àncores, aterra a sota.
UN ATRIBUT QUE POSA EL MÒDUL, I NO «.fitxa-mestra .camp»: el destí pot ser la casella, un bloc amb sortida
(«tabindex="-1"») o el control d'una fila de graella, i qui sap què desplaça és el mòdul. I NO UN
«scroll-padding-top» AL DOCUMENT, simètric del de baix: se sumaria al «scroll-margin-top» de les àncores que ja
hi ha a la fitxa del client i al correu, i les deixaria a dues capçaleres de la vora. Ho vigila
«CriterisDeLesFitxesTests.LaBarraDeDesarRepElsRefusosIElsDiu». */
[data-desti-del-refus] {
scroll-margin-top: var(--desplacament-ancora);
}
/* EL REFÚS D'UN CAMP («RefusDeCamp») ES VEU IGUAL ON SIGUI (#823, revisió final). La forma ve de «.camp .error-camp»
—sota el control, el vermell del tema, sense icona— i fins aquí només la tenia dins d'una «.camp» o d'una de les
graelles de la llista de «.graella-* .error-camp», més amunt al full. Fora d'aquí el refús hi era, amb «role="alert"»,
però es dibuixava en línia i del color del text: al lot 4 el catàleg de tipus impositius el posava al costat del
control, 26 px per sobre del seu peu, fins que la graella va entrar a la llista; i el de les operacions de l'article
4.2 (un «fieldset» dins dels dependents del supòsit) i el de la família d'una sèrie (dins d'una «TriaApilada») no
eren a cap dels dos llocs. UNA REGLA SOBRE LA MARCA DE LA PEÇA («data-refus-de»), I NO UNA LLISTA DE CONTENIDORS:
la peça és l'única manera de dibuixar el refús d'un «Desa», i qui estrena una graella o un bloc no ha de saber que
ha d'entrar enlloc. «white-space: normal» per a les cel·les de graella («.e-rowcell» no parteix). La llista de més
amunt queda per als refusos que encara s'escriuen a mà a les pantalles dels documents. Pes (0,1,0): dins d'una
«.camp» o d'una graella llistada manen aquelles regles, amb els mateixos valors. «:where(:not([hidden]))» és la
cautela de G5 per a tota regla que dona «display» (la peça no neix mai amagada, però la regla no ho sap). */
[data-refus-de]:where(:not([hidden])) {
display: block;
margin-top: 0.25rem;
font-size: 0.78rem;
line-height: 1.35;
white-space: normal;
color: var(--color-sf-danger);
}
/* ---- EL COS D'UNA FITXA: EL FORMULARI I EL RESUM («CosDeFitxa») ----
UNA FILA FLEXIBLE I CAP CONSULTA: el formulari té una base de 40 rem —dues caselles de 18 amb la
separació i el coixí de la targeta— i creix gairebé tot sol (999 contra 1); el resum, de 20 rem.
Quan no hi caben tots dos, el resum baixa sencer sota el formulari i s'estira a tota l'amplada.
DINS D'UNA FITXA MESTRA EL FORMULARI S'ATURA AL SEU SOSTRE (tres caselles: «--sostre-formulari-mestre»,
a la gramàtica de les fitxes mestres) i la fitxa hi suma el resum (#792). Fora —el cap d'un document—,
cap sostre d'aquí: el posa «--amplada-fitxa».
LES DUES COLUMNES COMENCEN A LA MATEIXA ALTURA: la primera targeta del formulari no porta el
marge de dalt de «.grup-caixa» —el posa la separació de la fila—, i quan el resum baixa, la
mateixa separació el separa del peu. */
.cos-de-fitxa--amb-resum {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--espai-entre-grups);
margin-top: var(--espai-entre-grups);
}
.cos-de-fitxa--amb-resum > .cos-de-fitxa-formulari > :first-child {
margin-top: 0;
}
.cos-de-fitxa--amb-resum > .cos-de-fitxa-formulari {
flex: 999 1 40rem;
min-width: 0;
}
/* La base del resum és el token, perquè el sostre d'una fitxa mestra n'hi suma la mateixa (#792). */
.cos-de-fitxa--amb-resum > .resum-lateral {
flex: 1 1 var(--amplada-resum-lateral);
min-width: 0;
}
/* ---- EL RESUM DE LA DRETA («ResumLateral» i les seves targetes) ---- */
.resum-lateral {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.targeta-resum {
padding: 1.125rem 1.25rem;
border: 1px solid var(--color-sf-border-light);
border-radius: var(--radi-superficie);
background-color: var(--fons-targeta);
box-shadow: var(--ombra-superficie);
}
.targeta-resum > h2 {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
}
.targeta-resum-peu {
margin-top: 0.75rem;
}
/* UNA TARGETA QUE ÉS DESTÍ D'UN ENLLAÇ («Id», onada 4: «Per expedir» de la prefactura) rep el focus
per anunciar-se, no per dibuixar cap anell al voltant d'una caixa: el criteri dels destins de la
barra («.cap-del-document», «.zona-resposta»). */
.targeta-resum:focus {
outline: none;
}
/* EL CONTINGUT LLIURE D'UNA TARGETA («TargetaDeResum» sola, revisió de l'onada 1): un paràgraf, una
llista d'enllaços o una adreça, amb la mida i l'interlineat de les files de les targetes germanes.
Abans cada pàgina se'l dibuixava amb una classe seva —la ruta de la família, les subfamílies,
l'adreça principal—, i eren tres maneres de dir el mateix.
AMB «:where()», QUE NO PESA: les targetes germanes porten el seu «dl» i el seu «ol» amb classe
(«.resum-clau-valor», «.linia-de-temps»), i la seva regla ha de guanyar sense haver-la de
repetir aquí.
- Un paràgraf darrere d'un altre hi va enganxat: és la línia següent de la mateixa dada (la
denominació i el domicili d'una adreça). El «strong» n'és la línia que mana.
- Una llista és una fila per element, sense pics, amb el que l'acompanya —una insígnia— al
costat.
- L'enllaç, amb el color de l'àncora (el primari fosc, 7,6:1 en clar i 12,8:1 en fosc): sense
regla sortia amb el blau del navegador, que no és de cap tema. Subratllat només dins d'un
paràgraf, on el text del costat no ho és (WCAG 1.4.1); en una llista d'enllaços tots ho són. */
:where(.targeta-resum) > :is(p, ul, ol) {
margin: 0.75rem 0 0;
color: var(--color-sf-content-text-color);
font-size: 0.85rem;
line-height: 1.5;
}
:where(.targeta-resum) > p + p {
margin-top: 0.125rem;
}
:where(.targeta-resum) > p > strong {
font-weight: 600;
}
/* «:where(:not([hidden]))» (G5, #822): sense ell, el «display: grid» guanyava el «hidden» de la llista plegada
de «LiniaDeTemps», i «Més antics (3)» es veia i rebia el focus amb el botó dient «aria-expanded="false"». Dins
del «:where()», que no pesa: la regla continua sent la que les germanes amb classe guanyen. */
:where(.targeta-resum) > :is(ul, ol):where(:not([hidden])) {
display: grid;
gap: 0.4rem;
padding: 0;
list-style: none;
}
:where(.targeta-resum) > :is(ul, ol) > li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4rem;
}
:where(.targeta-resum) > :is(p, ul, ol) a {
color: var(--color-sf-primary-dark);
font-weight: 500;
}
:where(.targeta-resum) > p a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
/* EL FOCUS, FORA DEL «:where()» I AMB PES (0,2,1), que guanya el «.e-control *:focus» del tema (0,2,0) si mai la
targeta va dins d'un control de Syncfusion (#533, D1 de la revisió de qualitat; vegeu «.text-amb-enllac»). */
.targeta-resum a:focus-visible {
outline: 2px solid var(--color-sf-primary);
outline-offset: 2px;
}
/* LA CLAU EN TERCIARI I EL VALOR A LA DRETA: 4,8:1 sobre la targeta clara i 6,9:1 sobre la fosca.
DUES MEITATS IGUALS i no «auto»: amb una clau llarga («Recàrrec d'equivalència») la columna del
valor es quedava amb 80 px i «Transferència» es partia pel mig (vist en una captura). */
.resum-clau-valor {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0.625rem 1rem;
margin: 0.875rem 0 0;
font-size: 0.85rem;
}
.resum-clau-valor dt {
color: var(--color-sf-content-text-color-alt3);
}
.resum-clau-valor dd {
margin: 0;
color: var(--color-sf-content-text-color);
font-weight: 500;
text-align: right;
overflow-wrap: break-word;
}
/* LA LÍNIA DE TEMPS («LiniaDeTemps»): un punt per fet i un filet que els uneix, que és un pseudoelement buit i
no entra a cap nom. És la mateixa al resum lateral («TargetaLiniaDeTemps», que hi afegeix
«.resum-linia-de-temps») i dins d'una secció (els ajornaments de la cartera, #615 lot 1b).
EL PUNT S'OMPLE DEL FONS DE LA SUPERFÍCIE ON ÉS («--fons-sota-la-linia»), que tapa el filet que hi passa per
sota: una targeta del resum és «--fons-targeta», i un grup («.grup-caixa»), el fons del contingut. En clar són
el mateix blanc; en fosc, no, i el punt d'una línia dins d'un grup seria un disc més clar que el grup. */
.linia-de-temps {
--fons-sota-la-linia: var(--fons-targeta);
margin: 0.875rem 0 0;
padding: 0;
list-style: none;
}
.grup-caixa .linia-de-temps {
--fons-sota-la-linia: var(--color-sf-content-bg-color);
}
.linia-de-temps .fet {
position: relative;
display: grid;
grid-template-columns: 1.0625rem minmax(0, 1fr);
column-gap: 0.625rem;
padding-bottom: 1rem;
}
.linia-de-temps .fet::before {
content: "";
position: absolute;
top: 0.875rem;
bottom: 0;
left: 0.5rem;
width: 1px;
background-color: var(--color-sf-border-light);
}
.linia-de-temps .fet:last-child {
padding-bottom: 0;
}
.linia-de-temps .fet:last-child::before {
display: none;
}
.linia-de-temps .fet-punt {
position: relative;
z-index: 1;
grid-row: 1 / span 2;
box-sizing: border-box;
width: 1.0625rem;
height: 1.0625rem;
margin-top: 0.0625rem;
border: 2px solid var(--color-sf-border);
border-radius: 50%;
background-color: var(--fons-sota-la-linia);
}
.linia-de-temps .fet-en-curs .fet-punt {
border-color: var(--color-sf-primary);
background-color: var(--fons-primari-suau);
}
.linia-de-temps .fet-bo .fet-punt {
border-color: var(--color-sf-success);
background-color: color-mix(in srgb, var(--color-sf-success) 12%, var(--fons-sota-la-linia));
}
/* EL QUE SE N'HA SORTIT SENSE FALLAR, EN GROC: el d'«.estat-avis» (docs/22, «Estats»). */
.linia-de-temps .fet-atencio .fet-punt {
border-color: var(--color-sf-warning);
background-color: color-mix(in srgb, var(--color-sf-warning) 12%, var(--fons-sota-la-linia));
}
/* EL QUE HA FALLAT, EN VERMELL: el d'«.estat-greu», com la insígnia de la factura rebutjada
(docs/22, «Estats»). El token és «danger»: «--color-sf-error» no existeix. */
.linia-de-temps .fet-greu .fet-punt {
border-color: var(--color-sf-danger);
background-color: color-mix(in srgb, var(--color-sf-danger) 12%, var(--fons-sota-la-linia));
}
.linia-de-temps .fet-text {
grid-column: 2;
color: var(--color-sf-content-text-color);
font-size: 0.85rem;
font-weight: 500;
}
/* UN FET D'UN DOCUMENT PORTA AL DOCUMENT: el color de l'àncora, i sense cap regla seria el
blau del navegador (el mateix que el peu de la targeta). Subratllat, perquè a la targeta
el text dels fets amb enllaç i el dels que no en porten és el mateix (WCAG 1.4.1). */
.linia-de-temps .fet-text a {
color: var(--color-sf-primary-dark);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
/* EL FOCUS DEL TECLAT, L'ANELL DE TOTA L'APLICACIÓ (el d'«a.ancora» i el de la xifra). */
.linia-de-temps .fet-text a:focus-visible {
outline: 2px solid var(--color-sf-primary);
outline-offset: 2px;
}
/* EL DETALL D'UN FET (#615, lot 1b): el que algú hi va escriure —el motiu d'un ajornament—, tal com ho va
escriure. Text secundari i SENSE CAP COLOR, perquè no és cap veredicte; conserva els salts de línia
(«pre-line») i parteix una paraula llarga abans de desbordar la columna. */
.linia-de-temps .fet-detall {
grid-column: 2;
margin-top: 0.25rem;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.85rem;
line-height: 1.45;
white-space: pre-line;
overflow-wrap: anywhere;
}
/* EL «QUAN», SEPARAT DEL TEXT: amb el subratllat a 0,2 em per sota de la línia, enganxat al
text tocava la data de sota. Ho vigila «LaLiniaDeTempsNoEnganxaElSubratllat». */
.linia-de-temps .fet-quan {
grid-column: 2;
margin-top: 0.3125rem;
color: var(--color-sf-content-text-color-alt3);
font-size: 0.8rem;
}
/* LA LÍNIA DE TEMPS DEL RESUM ÉS DENSA (G12 de la #796, #825): una entrada no gasta més de 56 px, del dalt d'una al
dalt de la següent, a 1.920 px. En gastava 77 —el text, la data a sota i molt d'aire—, i per sota de 1.201 px,
quan el resum baixa sota el formulari, duia el client de 2,6 a 3,7 pantalles. NOMÉS LA DEL RESUM
(«TargetaLiniaDeTemps», «.resum-linia-de-temps»): la d'una secció porta l'acció d'un fet («Desfés», 24 px) i el
detall escrit, i la seva respiració és la d'un grup. Les dues llistes de la targeta —la dels recents i la dels
antics, que s'obre amb «Més antics (N)»—, per això «.targeta-resum > .linia-de-temps» i no la classe, que només
porta la primera. L'interlineat de les dues línies, el del text de les
taules (1,35); entre una i l'altra, 4 px, que és el que el subratllat de l'enllaç necessita per no tocar la data
(0,2 em + 1 px a 13,6 px: 3,72; «LaLiniaDeTempsNoEnganxaElSubratllat»); i entre fets, l'aire el fa el coixí de
sota de cada un. SENSE EL «gap» NI EL «baseline» DE LES LLISTES DE LES TARGETES («:where(.targeta-resum) > ol >
li»), que també hi arribaven: el «gap» posava 6,4 px entre el text i la data, i l'alineació a la línia de base
baixava el text 4 px respecte del punt. El punt ja va alineat amb la primera línia pel seu marge de dalt. */
.targeta-resum > .linia-de-temps {
row-gap: 0;
}
.targeta-resum > .linia-de-temps > .fet {
row-gap: 0;
align-items: start;
padding-bottom: 0.75rem;
}
.targeta-resum > .linia-de-temps > .fet:last-child {
padding-bottom: 0;
}
.targeta-resum > .linia-de-temps :is(.fet-text, .fet-quan) {
line-height: 1.35;
}
.targeta-resum > .linia-de-temps .fet-quan {
margin-top: 0.25rem;
}
/* ELS FETS MÉS ANTICS, PLEGATS (sostre de «LiniaDeTemps», 09/10/2026): una segona llista, continuació de la
primera, que neix amb «hidden». Entre totes dues, el botó: el filet de l'última dels recents s'atura al seu
punt (la regla de «:last-child») i el de la llista antiga torna a començar al primer punt. */
.linia-de-temps.fets-antics {
margin-top: 0.75rem;
}
/* L'ACCIÓ D'UN FET («LiniaDeTemps.Accio», #646 lot 2b): el «Desfés» d'un cobrament, o el motiu que no ho deixa. A
L'ESCRIPTORI, A LA DRETA DEL FET, a l'altura de la seva primera línia: una tercera columna que només hi és quan el
fet porta acció, de manera que la línia de temps d'un resum o dels ajornaments es dibuixa com abans. El text, el
detall i el quan es parteixen dins de la seva columna i el botó no es mou. Al telèfon baixa sota el quan (més
avall, al tall de 45 rem). */
.linia-de-temps .fet:has(> .fet-accio) {
grid-template-columns: 1.0625rem minmax(0, 1fr) auto;
}
.linia-de-temps .fet-accio {
grid-column: 3;
grid-row: 1 / span 3;
align-self: start;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-left: 0.75rem;
}
/* EL MOTIU DEL QUE NO ES POT FER («o el botó o el motiu»): la lletra del matís d'una cel·la, i parteix línia. */
.linia-de-temps .fet-accio .valor-subordinat {
white-space: normal;
}
/* ELS FETS APARTATS («LiniaDeTempsAmbApartats»): la segona llista, darrere de «Desfets (N)» o de «De la cartera
anterior (N)», amb l'aire de la dels antics. Cap color ni cap opacitat: un fet apartat és un fet com els altres. */
.fets-apartats > .linia-de-temps {
margin-top: 0.75rem;
}
/* LA FRONTERA («LiniaDeTempsAmbApartats.Frontera», revisió del lot 2e): el recàlcul de la cartera en una llista
d'un sol fet, fora del sostre, perquè «De la cartera anterior (N)» no quedi mai sense ell a la vista. Quan la
llista de sobre es veu —la dels fets, o la dels antics oberta—, la continua: el seu últim fet torna a portar el
filet i l'aire de sota, i la frontera no hi deixa cap buit. Amb el botó «Més antics» entremig (antics plegats), el
tall és el de sempre entre un botó i una llista. Cap color: és un fet com els altres. */
.linia-de-temps:not([hidden]):has(+ .linia-de-temps.fets-frontera) > .fet:last-child {
padding-bottom: 1rem;
}
.linia-de-temps:not([hidden]):has(+ .linia-de-temps.fets-frontera) > .fet:last-child::before {
display: block;
}
.linia-de-temps:not([hidden]) + .linia-de-temps.fets-frontera {
margin-top: 0;
}
/* EL BOTÓ QUE PLEGA ELS FETS ANTICS: el de la #184 («.commuta-documents»), de text i amb la fletxa de
«GrupPlegable» girada segons «aria-expanded», que és el mateix atribut que sent el lector de pantalla. Va
alineat amb la columna del text dels fets (el punt, 1,0625 rem, i l'aire, 0,625), i no amb el punt: no és cap
fet. El color és el de l'enllaç d'un fet («primary-dark»), i el que el fa botó és el que fa «.commuta-documents».
L'alçada, la mínima de WCAG 2.5.8 (24 px). Cap color escrit a mà. */
.commuta-fets,
.commuta-detall {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 1.5rem;
margin: 0.75rem 0 0 1.6875rem;
padding: 0;
border: 0;
background: none;
color: var(--color-sf-primary-dark);
font: inherit;
font-size: 0.8rem;
font-weight: 500;
text-align: left;
cursor: pointer;
}
.commuta-fets:hover,
.commuta-detall:hover {
text-decoration: underline;
}
.commuta-fets:focus-visible,
.commuta-detall:focus-visible {
outline: 2px solid var(--color-sf-primary);
outline-offset: 2px;
border-radius: var(--radi-control);
}
.commuta-fets[aria-expanded="true"] .grup-fletxa,
.commuta-detall[aria-expanded="true"] .grup-fletxa {
transform: rotate(45deg);
}
/* LA FLETXA D'UN BOTÓ DEL TEMA QUE DESPLEGA (revisió del lot 2b de la #646): un «SfButton» amb «aria-expanded» que fa
néixer els seus dependents a sota —«Canvia» del diàleg de cobrament, la forma «desplegament» de F10— porta la fletxa
de «GrupPlegable» al davant del rètol, girada quan és obert. És la mateixa regla que «.grup-commuta»,
«.commuta-fets» i «.commuta-detall», per a un botó que no és cap de les peces: dins d'un «.e-btn» la fletxa és un
«span» en línia i no pren la mida sense «inline-block». La pantalla no n'escriu cap còpia. */
.e-btn > .grup-fletxa {
display: inline-block;
margin: 0 0.5rem 0.1rem 0;
}
.e-btn[aria-expanded="true"] > .grup-fletxa {
transform: rotate(45deg);
}
/* EL BOTÓ QUE OBRE EL DETALL D'UN VENCIMENT («FilaDeVenciment.Detall», #646 lot 2b): «2 cobraments», al final de la
cel·la d'estat. El mateix botó que «.commuta-fets» —un altre nom perquè «.commuta-fets» només l'escriuen les
peces de les llistes de fets—, però sense el sagnat de la columna dels fets: va sota l'estat i el seu matís, a la
seva vora. */
.commuta-detall {
display: flex;
width: fit-content;
margin: 0.375rem 0 0;
}
/* ---- EL PLAFÓ LATERAL («PlafoLateral») ----
UN «SfDialog» ARRAMBAT A LA DRETA I DE L'ALÇADA DE LA FINESTRA. La posició la dona l'API
(«DialogPositionData»); l'alçada, aquí: Syncfusion escriu un «max-height» a l'atribut «style» en
obrir-lo i la regla general del full el deixa a «100vh - 3rem», i contra l'atribut no hi ha
selector que valgui sense «!important» (el mateix motiu que «.e-dialog.cerca-ampliada-mobil»).
Dues classes contra la d'«.e-dialog»: guanya aquesta sense dependre de l'ordre.
TOCA LES VORES DE LA FINESTRA, i per això no porta radi: un radi contra la vora de la pantalla
deixaria un tros de pàgina a cada cantonada. */
.e-dialog.plafo-lateral {
height: 100dvh !important;
max-height: 100dvh !important;
border-width: 0 0 0 1px;
border-style: solid;
border-color: var(--color-sf-border-light);
border-radius: 0;
box-shadow: var(--ombra-alta);
}
.e-dialog.plafo-lateral .e-dlg-header-content,
.e-dialog.plafo-lateral .e-dlg-content,
.e-dialog.plafo-lateral .e-footer-content {
border-radius: 0;
}
.e-dialog.plafo-lateral .e-dlg-header-content {
padding: 1.375rem 1.5rem 1.125rem;
border-bottom: 1px solid var(--color-sf-border-light);
}
/* EL COS ÉS EL QUE ES DESPLAÇA, i ocupa tot el que queden la capçalera i el peu: la regla del
telèfon que acota el contingut dels diàlegs aquí no val (té una classe menys). */
.e-dialog.plafo-lateral .e-dlg-content {
flex: 1 1 auto;
max-height: none;
padding: 1.25rem 1.5rem;
overflow-y: auto;
}
.e-dialog.plafo-lateral .e-footer-content {
padding: 0.875rem 1.5rem;
border-top: 1px solid var(--color-sf-border-light);
background-color: var(--color-sf-content-bg-color-alt1);
}
.plafo-lateral-cap {
display: flex;
align-items: center;
gap: 0.875rem;
}
.plafo-lateral-cap .capcalera-dialeg {
flex: 1 1 auto;
min-width: 0;
}
/* EL TÍTOL D'UN PLAFÓ PARTEIX LÍNIA I NO ES TALLA (revisió de qualitat de la #567, D2). El títol d'un
diàleg centrat és d'una línia amb punts suspensius («.capcalera-dialeg .titol-dialeg»), i a 390 px
el del plafó «Copia-la» des d'una factura en perdia el número —«Prefactura nova a partir de F …»,
289 px en 252—: un identificador no es talla (L3). El plafó té tota l'alçada, i una segona línia
hi cap. Parteix pels espais i prou («overflow-wrap: normal»): que el número no es parteixi per
dins és de qui escriu el títol (amb espais durs). Ho vigila «ElTitolDelPlafoNoTallaCapNumero». */
.plafo-lateral-cap .capcalera-dialeg .titol-dialeg {
overflow: visible;
text-overflow: clip;
white-space: normal;
overflow-wrap: normal;
}
/* LA LÍNIA DE SOTA DEL TÍTOL, LA MATEIXA AL PLAFÓ I AL DIÀLEG DE FORMULARI («Descripcio» de totes dues peces; revisió
del lot 2b de la #646): el diàleg de cobrament l'havia escrita a mà amb una classe seva. */
.plafo-lateral-descripcio,
.dialeg-de-formulari-descripcio {
margin: 0 0 1rem;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.85rem;
}
/* ---- EL DIÀLEG DE FORMULARI («DialegDeFormulari», #646 lot 2b, 11/10/2026) ----
UN «SfDialog» CENTRAT I ANCORAT A DALT. La posició la dona l'API («DialogPositionData X="center" Y="top"», que
posa «.e-dlg-center-top» al contenidor: una columna centrada i arrambada a dalt); el marge de dalt, aquí. Un diàleg
centrat que creix es recentra i el que hi ha a dalt puja (F10.4); aquest creix cap avall i la capçalera i l'import
no es mouen. Res més: la capçalera, el cos i el peu són els de tots els diàlegs del tema.
EL MARGE DE DALT VA AMB LA FINESTRA, entre 1,5 rem i 5 rem (8vh): a 900 px d'alçada són 72 px, que és l'aire d'un
diàleg centrat de mida mitjana, i en una finestra baixa no se'n menja l'alçada. EL SOSTRE D'ALÇADA EN DESCOMPTA EL
MARGE i 1,5 rem de baix, i guanya el de tots els diàlegs («UN DIALEG S'ACOTA PER LA FINESTRA») per una classe més:
contra l'atribut «style» que hi escriu Syncfusion cal el «!important», com allà. Cap color, cap radi, cap ombra:
els del tema. */
.e-dialog.dialeg-de-formulari {
margin-top: clamp(1.5rem, 8vh, 5rem);
max-height: calc(100dvh - clamp(1.5rem, 8vh, 5rem) - 1.5rem) !important;
}
/* L'ABAST DEL DIÀLEG DE DESFER UN COBRAMENT («DialegDeDesfer», #646 lot 2e): una línia per «p», TEXT NORMAL I NEUTRE
—cap color, cap fons, cap avís—, amb el mateix aire fins al motiu que la descripció fins a l'abast. És el que també
torna enrere i el que no canvia: no hi ha res que es perdi ni que vagi malament. */
.desfes-abast {
margin: 0 0 1rem;
}
.desfes-abast p {
margin: 0;
}
.desfes-abast p + p {
margin-top: 0.375rem;
}
/* ---- LA COL·LECCIÓ D'UNA FITXA («ColleccioDeFitxa» i «FilaDeColleccio») ----
EL REQUADRE DE LES FILES D'OPCIÓ, amb un filet entre element i element: una col·lecció i un
grup d'opcions s'han de llegir com la mateixa família de peça (la maqueta les dibuixa iguals).
El fons és el de la targeta, i en fosc es gira sol (--fons-targeta). */
.colleccio-fitxa {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid var(--color-sf-border-light);
border-radius: var(--radi-superficie);
background-color: var(--fons-targeta);
}
/* UNA FILA FLEXIBLE I CAP CONSULTA: el cos té una base de 16 rem i creix; les accions no
s'encongeixen. Quan no caben al costat del cos, baixen a sota soles (L6 continua valent: van a
dalt de la seva línia). */
.fila-colleccio {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.625rem 1rem;
padding: 0.875rem 1rem;
}
.fila-colleccio + .fila-colleccio {
border-top: 1px solid var(--color-sf-border-light);
}
.fila-colleccio-cos {
flex: 1 1 16rem;
min-width: 0;
}
/* EL NOM I LA SEVA INSÍGNIA, A LA MATEIXA LÍNIA I PER LA BASE DEL TEXT. Un nom llarg parteix
paraules en comptes de fer créixer la fila de costat. */
.fila-colleccio-titol {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.625rem;
color: var(--color-sf-content-text-color);
font-weight: 600;
overflow-wrap: anywhere;
}
/* L'ÀNCORA, COM A LA GRAELLA (L1): el primari fosc i sense subratllat, que surt amb el ratolí i
amb el focus. 7,6:1 en clar i 12,8:1 en fosc. L'anell del teclat, el de 2 px de la resta de
l'aplicació. */
.fila-colleccio-titol a.fila-colleccio-nom {
color: var(--color-sf-primary-dark);
text-decoration: none;
}
.fila-colleccio-titol a.fila-colleccio-nom:hover,
.fila-colleccio-titol a.fila-colleccio-nom:focus-visible {
text-decoration: underline;
}
.fila-colleccio-titol a.fila-colleccio-nom:focus-visible {
outline: 2px solid var(--color-sf-primary);
outline-offset: 2px;
border-radius: var(--radi-dins-control);
}
.fila-colleccio-detall {
margin: 0.125rem 0 0;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.85rem;
overflow-wrap: anywhere;
}
.fila-colleccio-accions {
display: flex;
flex: none;
flex-wrap: wrap;
gap: 0.5rem;
margin-left: auto;
}
/* UN VALOR DE L'ELEMENT QUE S'ESCRIU A LA FILA («FilaDeColleccio.Control», onada 4, #540): la porció
d'un destinatari. Va a la dreta, abans de les accions i a tocar seu, amb el rètol al davant i a la
mateixa línia (L6: a dalt, com les accions). El control fa l'amplada d'una casella curta (F4,
«.mida-curta», que la peça hi posa) i l'alçada de tots els camps. */
.fila-colleccio-control {
display: flex;
flex: none;
align-items: center;
gap: 0.5rem;
}
/* EL CONTROL I LES ACCIONS, UN SOL BLOC QUE NO ES PARTEIX (revisió de l'onada 4): a 1.440 px amb el
resum al costat, «Treu» baixava sol sota el títol, a l'esquerra. Al costat del cos quan hi cap i,
quan no, a sota sencer i arrambat a la dreta. El cos d'una fila amb control parteix de 12 rem i no
de 16: el detall d'un destinatari són dues línies curtes, i el que s'escriu a la fila mana. */
.fila-colleccio-costat {
display: flex;
flex: none;
align-items: center;
gap: 0.5rem 1rem;
margin-left: auto;
}
.fila-colleccio-costat > .fila-colleccio-accions {
margin-left: 0;
}
.fila-colleccio:has(> .fila-colleccio-costat) > .fila-colleccio-cos {
flex-basis: 12rem;
}
.fila-colleccio-control > .e-input-group {
width: var(--amplada-control);
}
.fila-colleccio-control-retol {
color: var(--color-sf-content-text-color-alt2);
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
}
/* EL MOTIU, A SOTA DE TOT I DE TOTA L'AMPLADA, en text secundari: no és cap avís —és com és
l'element—, i un requadre de color a cada fila retinguda entrenaria a no mirar els avisos. La
llista de documents de dins («.documents-retenen») ja porta la seva lletra i el seu plegat. */
.fila-colleccio-motiu {
flex-basis: 100%;
min-width: 0;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.8rem;
}
/* UN TÍTOL QUE NO ÉS TEXT («FilaDeColleccio.ValorDelTitol», #617): el valor —un «ValorProtegit»— al lloc
del nom. Pot rebre el focus (la pàgina l'hi porta després d'afegir l'element), i l'anell és el de
l'àncora del nom, que és el de tota l'aplicació. */
.fila-colleccio-valor {
min-width: 0;
}
.fila-colleccio-valor:focus-visible {
outline: 2px solid var(--color-sf-primary);
outline-offset: 2px;
border-radius: var(--radi-dins-control);
}
/* ---- UNA COL·LECCIÓ QUE ENCARA NO TÉ CAP ELEMENT («EstatBuitDeLaColleccio», #617, 05/10/2026) ----
EL MATEIX REQUADRE QUE LA COL·LECCIÓ («.colleccio-fitxa»), al lloc on hi haurà la llista, i a dins la
forma de l'estat buit d'un llistat a la mida d'un grup: la rajola de 2,25 rem i no de 2,75, i el
paràgraf del que passa en pes 600 i no cap «h2» (el grup ja en té un). Centrat, com el del llistat: és
la mateixa família de peça. */
.estat-buit-colleccio {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1.5rem 1.25rem;
border: 1px solid var(--color-sf-border-light);
border-radius: var(--radi-superficie);
background-color: var(--fons-targeta);
text-align: center;
}
.estat-buit-colleccio-rajola {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: var(--radi-control);
background-color: var(--fons-primari-suau);
color: var(--color-sf-primary);
}
.estat-buit-colleccio-rajola .e-icons {
color: inherit;
font-size: 1.125rem;
}
.estat-buit-colleccio-titol {
margin: 0;
color: var(--color-sf-content-text-color);
font-size: 0.95rem;
font-weight: 600;
}
.estat-buit-colleccio-frase {
max-width: 28rem;
margin: 0;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.85rem;
}
.estat-buit-colleccio-accio {
margin-top: 0.25rem;
}
/* LA VARIANT COMPACTA («EstatBuitDeLaColleccio Compacte», #794, 17/10/2026): dins d'un grup que ja porta la
rajola i la frase a la capçalera, el mateix requadre amb una línia i l'acció a la dreta. Feia uns 170 px per
dir «cap compte»; així fa l'alçada del botó amb el coixí. Sense rajola (la del grup ja hi és) i alineat a
l'esquerra, com el nom d'una «FilaDeColleccio», que és el que hi haurà quan n'hi hagi.
- El text és un bloc que creix (base de 16 rem): el títol i la frase al costat quan hi caben, i la frase a
sota quan no, mai tallada.
- L'acció, a la dreta de la mateixa línia, com les accions d'una fila (L6); quan no hi cap, baixa sencera i
continua a la dreta. Al telèfon, a sota i a l'esquerra, de 44 px (el bloc de 45 rem). */
.estat-buit-colleccio.estat-buit-colleccio--compacte {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
padding: 0.625rem 1rem;
text-align: left;
}
.estat-buit-colleccio--compacte .estat-buit-colleccio-text {
display: flex;
flex: 1 1 16rem;
flex-wrap: wrap;
align-items: baseline;
gap: 0.125rem 0.5rem;
min-width: 0;
}
.estat-buit-colleccio--compacte .estat-buit-colleccio-frase {
max-width: none;
}
.estat-buit-colleccio--compacte .estat-buit-colleccio-accio {
margin-top: 0;
margin-left: auto;
}
/* ---- UN IBAN («.valor-iban»), UN VALOR PROTEGIT («ValorProtegit») I EL BOTÓ DE COPIAR («BotoDeCopiar»),
#617, 05/10/2026 ----
UNA SOLA MANERA DE DIBUIXAR UN IBAN, a tot el producte: a la fila d'un compte, a la previsualització en
escriure'l, a la fitxa d'una factura emesa, emmascarat o sencer. El text arriba JA AGRUPAT de quatre en
quatre amb espais («NormaIban.Agrupa» o «NormaIban.Emmascara»): la classe no agrupa res, i un IBAN sense
espais no es partiria enlloc.
- PAS FIX I XIFRES TABULARS: es compara caràcter a caràcter amb el del banc, i els grups s'alineen d'una
fila a la de sota.
- ES PARTEIX NOMÉS ENTRE GRUPS: «overflow-wrap: normal» i «word-break: keep-all» tornen el tall als
espais. ⚠️ Per això el selector es repeteix amb els tres ancestres que parteixen per dins —«.fitxa-mestra
.valor-fix» amb «anywhere», i «.empremta» de la factura i del detall de la remissió amb «break-all»—:
amb la mateixa especificitat i després al full, guanya aquest. Un IBAN de 390 px (uns 245 px) parteix
en dos trossos de grups sencers.
- EN TEXT PRIMARI I MAI DINS D'UN «code» (la proposta del 617-1, «Temes»): el «code» porta el fons tintat
del tema, i en fosc el contrast baixava. És un «span» (o el «p» d'un valor fix, d'una previsualització),
i la mida i el coixí són els del que el conté: aquesta regla no en toca cap, perquè amb l'especificitat
dels ancestres trepitjaria el coixí d'un «.valor-fix» i la mida d'una previsualització. Que cap pantalla
no el posi en un «code» ho vigila «UnIbanTeUnaSolaForma».
- EL QUE S'ESCRIU, EN PAS FIX TAMBÉ: la casella on s'escriu un IBAN porta «.casella-iban» (al «CssClass»
de l'«SfTextBox», que cau a l'embolcall). És una altra classe perquè és un control i no un valor
dibuixat; la lletra és la mateixa. */
.valor-iban,
:is(.fitxa-mestra, .fitxa-factura, .detall-remissio, .expedida) .valor-iban {
color: var(--color-sf-content-text-color);
font-family: var(--lletra-mono);
font-variant-numeric: tabular-nums;
white-space: normal;
word-break: keep-all;
overflow-wrap: normal;
hyphens: none;
}
/* LA LLETRA, A L'«input» AMB LA MATEIXA ESPECIFICITAT QUE EL TEMA (D6 de la revisió de qualitat): el tema posa
«font-family: inherit» a «.e-input-group.e-control-wrapper input.e-input» (0,3,1), i ni «.casella-iban .e-input»
(0,2,0) ni la lletra posada a l'embolcall no hi arribaven —l'embolcall també en porta una del tema—: l'«input»
continuava en Inter, i «LaCasellaDUnIbanEsDePasFix» ho va veure. Amb 0,3,1 i després del tema, guanya aquesta,
com «.camp-patro». La classe cau a l'embolcall, i per això va enganxada a «.e-input-group». */
.casella-iban,
.e-input-group.casella-iban input.e-input,
.casella-iban .e-input-group input.e-input {
font-family: var(--lletra-mono);
font-variant-numeric: tabular-nums;
}
/* ---- UN COLOR QUE S'ESCRIU («.casella-color», «.casella-amb-mostra» i «MostraDeColor», lot 3 de la #614) ----
LA CASELLA, EN PAS FIX COM LA D'UN IBAN: «#1F5FAF» es compara caràcter a caràcter, i en Inter l'1 i l'I, o
el 0 i l'O, s'assemblen. Mateixa especificitat que el tema a l'«input» (vegeu «.casella-iban»). Sense
«text-transform»: el que es veu ha de ser el que hi ha, i qui el passa a majúscules és el domini en sortir.
LA FILA: EL QUADRAT A L'ESQUERRA I LA CASELLA AL COSTAT, centrats. El quadrat fa 1,75 rem —una mica menys
que la casella— i no creix ni s'encongeix; la casella pren la resta de l'amplada del «.camp» fins al sostre
de la seva mida (F4).
EL QUADRAT: el color arriba com a «--mostra-color», escrit per la peça i filtrat («ColorDeMostra»); la vora
és la de les caselles de sí o no, que fa 3:1 sobre la targeta i el requadre, perquè un color clar sobre una
targeta blanca no desaparegui. SENSE COLOR («data-sense-color»), blanc de paper amb una diagonal de la
mateixa vora: és «sense color de marca», i no s'ha de llegir com a blanc. */
.casella-color,
.e-input-group.casella-color input.e-input,
.casella-color .e-input-group input.e-input {
font-family: var(--lletra-mono);
font-variant-numeric: tabular-nums;
}
.casella-amb-mostra {
display: flex;
align-items: center;
gap: 0.5rem;
}
.casella-amb-mostra > :not(.mostra-color) {
flex: 1 1 auto;
min-width: 0;
}
.mostra-color {
flex: none;
width: 1.75rem;
height: 1.75rem;
border: 1px solid var(--vora-casella);
border-radius: var(--radi-control);
background-color: var(--mostra-color, var(--fons-paper));
}
.mostra-color[data-sense-color] {
background-color: var(--fons-paper);
background-image: linear-gradient(
to top right,
transparent calc(50% - 0.75px),
var(--vora-casella) calc(50% - 0.75px),
var(--vora-casella) calc(50% + 0.75px),
transparent calc(50% + 0.75px));
}
/* EL VALOR PROTEGIT: el valor (emmascarat o sencer) i, al costat, «Mostra» i «Copia». Quan no hi caben, els
botons baixen a la línia de sota soles (la fila és flexible). L'error, a sota de tot i de tota l'amplada;
buit, no ocupa res. */
.valor-protegit {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem 0.75rem;
min-width: 0;
max-width: 100%;
}
/* ELS ASTERISCS, EN SECUNDARI: diuen que hi ha xifres que no es veuen, i no han de pesar com les que
es veuen. 7,6:1 sobre la targeta en clar i 11,7 en fosc.
I UN SETÈ D'EM AVALL (revisió de qualitat, 06/10/2026): el glif «*» de Cascadia Mono s'acaba ~1,8 px per
sobre de la línia de base, i al costat de «7892» les xifres semblaven caigudes. «position: relative»
baixa la tinta sense tocar la caixa de línia; «vertical-align» la faria créixer. ⚠️ Chromium pinta el
text a píxel sencer: 0,1em (1,4 px a 14 px) baixava 2 px a 1.440 i 1 px a 721 i a 390, segons on
queia la línia. 1em/7 fa 2 px justos a 14 px, i llavors baixa sempre el mateix. Ho vigila
«ElsAsteriscsDeLaMascaraSeuenALaLiniaDeBase», llegint píxels. */
.valor-protegit-mascara {
position: relative;
top: calc(1em / 7);
color: var(--color-sf-content-text-color-alt2);
}
.valor-protegit-accions {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
font-weight: 400;
}
.valor-protegit-error:empty {
display: none;
}
.valor-protegit-error {
flex-basis: 100%;
color: var(--color-sf-danger);
font-size: 0.8rem;
font-weight: 400;
}
/* «Mostra» PREMUT: el fons suau del primari i el text en primari fosc, com l'entrada vigent del menú (4,8:1 o
més en clar, 7,6 en fosc), i la vora del primari (3:1 sobre la targeta, WCAG 1.4.11). L'estat el diu
«aria-pressed», i el full el llegeix d'allà: el que es veu i el que se sent no poden dir coses diferents. */
.valor-protegit .e-btn.valor-protegit-mostra[aria-pressed="true"],
.valor-protegit .e-btn.valor-protegit-mostra[aria-pressed="true"]:hover {
border-color: var(--color-sf-primary);
background-color: var(--fons-primari-suau);
color: var(--color-sf-primary-dark);
}
/* LA ICONA DINS DEL BOTÓ: un fill nostre amb «aria-hidden» i no «IconCss» (docs/22), separada del verb. També
la de l'acció secundària d'un llistat (#435 fase 2), que al telèfon la perd (més avall). */
:is(.valor-protegit-accions, .boto-copiar, .capcalera-llistat-secundaria) .e-btn .e-icons {
margin-inline-end: 0.375rem;
font-size: 0.875rem;
}
.boto-copiar {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.5rem;
}
.boto-copiar-error:empty {
display: none;
}
.boto-copiar-error {
color: var(--color-sf-danger);
font-size: 0.8rem;
}
/* ---- UNA OPCIÓ D'UN DESPLEGABLE APAGADA AMB EL MOTIU (#617, 05/10/2026) ----
«DropDownListFieldSettings.Disabled» (llegit a «Syncfusion.Blazor.DropDowns.xml» de la 34.2.3) posa
«e-disabled» i «aria-disabled» a l'opció, i el tema la pinta amb el gris d'apagat i una opacitat de 0,7:
uns 1,9:1 en clar. El text d'una opció apagada amb motiu porta el motiu al darrere («— cal un compte del
client»), i un motiu que no es llegeix no fa la feina. El terciari i sense opacitat: 4,8:1 sobre la
finestreta en clar i 6,9 en fosc, i encara es distingeix de les opcions que es poden triar (17,5). Mateix
selector que el tema i sense «!important»: aquest full va després. */
.e-ddl.e-popup.e-popup-open .e-list-item.e-disabled {
opacity: 1;
color: var(--color-sf-content-text-color-alt3);
}
/* ---- UN RÈTOL LLARG NO FA LLARG EL CAMP («.casella-curta», #325 i #623) ----
UNA CLASSE DEL SISTEMA, com «.valor-iban»: el «CssClass» d'un «SfDropDownList» que arriba a l'embolcall
i a la finestreta (mesurat). La regla —quan es fa servir i quan, en canvi, «PopupWidth»— és a docs/22,
«Un rètol llarg no fa llarg el camp». La fan servir la sèrie d'una prefactura, els dos passos de
«Rectifica i refactura», les sèries per defecte d'una seu i d'un client, i els dos països d'un client
(el del domicili i el d'«IDOtro»). No penja de cap fitxa, i no fa res a un desplegable que no la porti.
LA CASELLA TANCADA DIU LA FORMA CURTA. Un rètol llarg no fa llarg el camp: la casella que ja el té
triat diu el «Text» de l'opció («Codi — Nom»), i a tres columnes i a 1.280 px fa uns 309 px, on un
nom de quaranta caràcters encara no hi cap.
EL CODI NO ES TALLA I EL NOM PORTA PUNTS SUSPENSIUS: el text va sencer en una línia i el que
sobra se'n va per la dreta, que és on és el nom. Actua sobre l'«input» mateix, que és el que
es veu i el que es descriu: amb una «ValueTemplate» Syncfusion l'amagava (docs/21). */
.casella-curta input.e-input {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* I LA LLISTA OBERTA EL DIU SENCER: si no hi cap, passa de línia (#623).
La finestreta fa l'amplada del control («PopupWidth» val 100 % per defecte), i el tema deixa
cada opció amb «white-space: nowrap» i «text-overflow: ellipsis»: a 390 px «GS — Illes Geòrgia
del Sud i Sandwich del Sud» es tallava també a la llista, que és l'únic lloc on s'havia de
poder llegir sencer. Una finestreta més ampla que el control no hi cabria al telèfon.
El sagnat del tema és un «text-indent», que només mou la primera línia: passa a «padding-left»
perquè la segona quedi alineada amb la primera, i amb els mateixos 12 px una opció d'una línia
queda on era. Aquest selector (quatre classes) venç el del tema i el d'«.e-bigger» (tres). */
.e-ddl.e-popup.casella-curta .e-list-item {
height: auto;
white-space: normal;
line-height: 1.35;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
padding-left: 12px;
text-indent: 0;
}
/* ---- EL QUE SORTIRÀ DEL QUE S'ESCRIU («PrevisualitzacioDeFitxa», onada 1) ----
EL REQUADRE TINTAT, COM ELS DEPENDENTS D'UNA OPCIÓ: és una sortida i no cap camp, i el fons del
requadre (--fons-inset) el separa de les caselles blanques que té al voltant. En fosc es gira sol.
DE LA MIDA D'UNA CASELLA (24 rem): és un número, o tres línies de venciments, i una caixa de 46 rem
en deia un de quinze caràcters (la sèrie, #504). ⚠️ «border-box», o els 24 rem són del contingut:
amb el coixí i la vora en feia 418 px, i una casella en fa 384.
UNA ALÇADA MÍNIMA perquè la pàgina no salti a cada tecla mentre el valor apareix i desapareix.
NOMÉS PER AL VALOR: una llista («.previsualitzacio-llista», que la peça posa quan hi ha
«ChildContent») ja fa una alçada diferent per a cada nombre de línies, i la mínima no li estalvia
cap salt; el que hi deixava era un buit de 60 px sota un avís d'una sola línia (els venciments
sense cap termini, vist a 390 px a l'onada 1). L'última d'un grup no hi deixa marge: el posa la
targeta. */
.previsualitzacio {
box-sizing: border-box;
min-height: 6.5rem;
max-width: 24rem;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
border: 1px solid var(--color-sf-border-light);
border-radius: var(--radi-superficie);
background-color: var(--fons-inset);
}
.previsualitzacio:last-child {
margin-bottom: 0;
}
.previsualitzacio.previsualitzacio-llista {
min-height: 0;
}
/* UN IBAN, EN UNA LÍNIA (06/10/2026): l'espanyol —29 caràcters amb els espais— fa 367 px en Cascadia
Mono a la mida del valor (1,35 rem, 12,7 px per caràcter), i els 24 rem d'una casella en deixaven 350
de contingut: el sisè grup baixava sol a la línia de sota amb el requadre aparentment buit. 26 rem en
deixen 382, un caràcter de marge, i hi cap també amb la lletra de pas fix de Mac (uns 376 px). No més:
el requadre continua sent d'una casella i poc, i la sèrie i els venciments es queden a 24 rem. Un IBAN
més llarg (fins a 34 caràcters, 532 px) parteix entre grups, que és el que diu «.valor-iban»; i on no
hi ha 26 rem (390 px, el plafó) el requadre fa l'amplada que té i també parteix entre grups. El
modificador el posa la peça amb «ClasseDelValor="valor-iban"», i no un «:has(.valor-iban)»: el requadre
ha de ser igual d'ample abans que hi hagi cap valor, o saltaria en escriure el darrer dígit. Ho vigila
«LaPrevisualitzacioDUnIbanEspanyolEsDUnaSolaLinia». */
.previsualitzacio.previsualitzacio-iban {
max-width: 26rem;
}
.previsualitzacio > p {
margin: 0;
}
.previsualitzacio .previsualitzacio-retol,
.previsualitzacio .previsualitzacio-detall {
color: var(--color-sf-content-text-color-alt2);
font-size: 0.8rem;
}
/* EL VALOR, GRAN I AMB ELS ESPAIS DEL PATRÓ: són part del número, i sense «pre-wrap» «F 26 0001»
es veuria amb un espai on n'hi ha un. */
.previsualitzacio .previsualitzacio-valor {
margin: 0.2rem 0;
color: var(--color-sf-content-text-color);
font-size: 1.35rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: pre-wrap;
}
.previsualitzacio .previsualitzacio-mono {
font-family: var(--lletra-mono);
}
/* LA LLISTA AL LLOC DEL VALOR («ChildContent»: els venciments d'exemple): una línia per element,
amb el pes del valor però a la mida del text, i en xifres tabulars perquè es llegeixin columna
avall. Era «.venciments-exemple-llista», de la pàgina, fins a la revisió de l'onada 1. */
.previsualitzacio > :is(ul, ol) {
margin: 0.25rem 0 0;
padding: 0;
list-style: none;
color: var(--color-sf-content-text-color);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* EL QUE NO VAL I EL QUE S'HA DE MIRAR, AMB PARAULES I AMB EL COLOR DEL TEMA («danger» i
«warning»): cap dels dos va sol, tots dos porten la frase sencera. */
.previsualitzacio .previsualitzacio-error,
.previsualitzacio .previsualitzacio-avis {
margin-top: 0.25rem;
font-size: 0.8rem;
line-height: 1.35;
}
.previsualitzacio .previsualitzacio-error {
color: var(--color-sf-danger);
}
.previsualitzacio .previsualitzacio-avis {
color: var(--color-sf-warning);
}
/* ---- EL PAPER («.superficie-paper», lot 3 de la #614, 08/10/2026) ----
UNA CLASSE DEL SISTEMA I NO CAP PEÇA, amb el criteri de «.superficie-llistat»: és el marc de tot el que
ensenya com sortirà un document —la miniatura d'un disseny («TriaApilada»), la mostra de «Com sortirà»
(«PrevisualitzacioDeFitxa.Mostra»), la rajola del logotip—, i el que hi va a dins és de qui el fa servir.
BLANC ALS DOS TEMES, AMB LA TINTA DEL PAPER: és l'única superfície que no es gira en fosc (els tokens diuen
per què). «color-scheme: light» perquè el que el navegador dibuixi a dins —una imatge amb transparència,
un control— ho faci com sobre paper. El radi és el del que és petit dins d'una superfície; l'ombra, la de
les targetes, perquè en clar el paper i la targeta són del mateix blanc i la vora sola es perdia.
«overflow: hidden» perquè una imatge no surti per les cantonades. */
.superficie-paper {
color-scheme: light;
overflow: hidden;
border: 1px solid var(--vora-paper);
border-radius: var(--radi-control);
background-color: var(--fons-paper);
box-shadow: var(--ombra-superficie);
color: var(--tinta-paper);
}
/* UNA IMATGE A DINS OCUPA EL MARC I S'ENGANXA A DALT: una miniatura és el terç de dalt d'una pàgina, i el
que la fa reconeixible —la franja, el logotip, el títol— és a dalt. */
.superficie-paper > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
/* LA MOSTRA DINS DE LA PREVISUALITZACIÓ («PrevisualitzacioDeFitxa.Mostra»): sota el rètol, amb l'aire d'una
línia del requadre, i amb coixí perquè el que s'hi dibuixa no toqui el canto del paper. Els colors de
l'empresa hi arriben com a «--color-mostra» i «--text-mostra», escrits per la peça i filtrats; el full del
dibuix els llegeix amb un valor per defecte, i aquí no se'n fa res més. */
.previsualitzacio .previsualitzacio-mostra {
margin: 0.375rem 0 0.25rem;
padding: 0.75rem;
}
/* ---- L'ASPECTE DEL PAPER («/configuracio/documents», lot 3 de la #614, 08/10/2026) ----
ELS ESQUEMES DELS DISSENYS («.esquema-disseny», dins de la miniatura de «TriaApilada»): el terç de dalt d'una
pàgina fet de ratlles, SENSE CAP TEXT, que pren el color de marca de «--color-mostra» (el posa la peça,
filtrat) i, sense, la tinta del paper. Les mides són percentatges perquè el mateix dibuix serveix a la targeta
de 300 px i a la de 72 px del telèfon. El clàssic: el títol a l'esquerra i la capçalera de la taula plena del
color. El modern: la franja de color a dalt, la capçalera com un filet i el total destacat. Els grisos són
barreges de la tinta amb el paper («color-mix»), que no es giren en fosc: el paper no ho fa. */
.esquema-disseny {
position: relative;
display: flex;
flex-direction: column;
gap: 7%;
box-sizing: border-box;
height: 100%;
padding: 7% 8%;
}
.esquema-disseny > span:where(:not([hidden])) {
display: block;
flex: none;
}
.esquema-disseny > .esquema-franja,
.esquema-disseny > .esquema-total {
display: none;
}
.esquema-disseny > .esquema-titol {
width: 38%;
height: 12%;
background-color: var(--tinta-paper);
}
.esquema-disseny > .esquema-dades {
width: 55%;
height: 5%;
background-color: color-mix(in srgb, var(--tinta-paper-secundaria) 55%, var(--fons-paper));
}
.esquema-disseny > .esquema-capcalera {
height: 12%;
background-color: var(--color-mostra, color-mix(in srgb, var(--tinta-paper) 12%, var(--fons-paper)));
}
.esquema-disseny > .esquema-fila {
height: 0;
border-bottom: 1px solid color-mix(in srgb, var(--tinta-paper) 25%, var(--fons-paper));
}
.esquema-modern {
padding-top: 16%;
}
.esquema-modern > .esquema-franja {
position: absolute;
inset: 0 0 auto;
display: block;
height: 8%;
background-color: var(--color-mostra, var(--tinta-paper));
}
.esquema-modern > .esquema-capcalera {
height: 0;
border-bottom: 2px solid var(--color-mostra, var(--tinta-paper));
background-color: transparent;
}
.esquema-modern > .esquema-total {
display: block;
align-self: flex-end;
width: 30%;
height: 12%;
background-color: var(--color-mostra, var(--tinta-paper));
}
/* EL COLOR EFECTIU, NO L'ESCRIT: al modern, un color massa clar per al paper blanc recau en la tinta, i la
miniatura ho ensenya com ho farà el paper (i com la mostra de «Com sortirà»). La classe la posa la pàgina
amb la regla del domini («ModelPaper.RecauEnLaTinta»); aquí només es torna a declarar la variable a
l'esquema, que guanya la de «.tria-targetes» per a tot el que hi ha a dins. */
.esquema-disseny.esquema-en-tinta {
--color-mostra: var(--tinta-paper);
}
/* LA MOSTRA DE «COM SORTIRÀ»: la capçalera d'una taula de tres columnes, amb ratlles on hi aniria el text (la
mostra no parla). Al clàssic, una banda plena del color («--color-mostra») amb el text del seu color
(«--text-mostra»): si costa de llegir, les ratlles també costen de veure. Al modern, la tinta sobre el paper i
un filet del color efectiu. */
.mostra-capcalera {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 0.75rem;
padding: 0.5rem 0.625rem;
color: var(--tinta-paper);
}
.mostra-capcalera > span:where(:not([hidden])) {
display: block;
width: 60%;
height: 0.5rem;
background-color: currentColor;
}
.mostra-capcalera > span + span {
justify-self: end;
}
.mostra-capcalera.mostra-classic {
background-color: var(--color-mostra, color-mix(in srgb, var(--tinta-paper) 12%, var(--fons-paper)));
color: var(--text-mostra, var(--tinta-paper));
}
.mostra-capcalera.mostra-modern {
border-bottom: 2px solid var(--color-mostra, var(--tinta-paper));
}
/* EL LOGOTIP: la rajola de paper (160 px d'ample i una alçada fixa, perquè pujar-ne un no faci saltar la
pàgina) i, al costat, el pujador, els límits i «Treu». Quan no hi caben, el pujador baixa sencer a sota. La
imatge s'hi veu SENCERA i centrada (no retallada com una miniatura: un logotip retallat no és el logotip). */
.fila-logotip {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1rem 1.5rem;
}
.rajola-logotip {
display: flex;
flex: none;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 10rem;
height: 6rem;
padding: 0.5rem;
}
/* DOS SELECTORS A POSTA: ha de guanyar «.superficie-paper > img» (retallada i a dalt, la d'una miniatura)
encara que algú reordeni el full. */
.rajola-logotip.superficie-paper > img {
object-fit: contain;
object-position: center;
}
.rajola-logotip > p {
margin: 0;
color: var(--tinta-paper-secundaria);
font-size: 0.8125rem;
text-align: center;
}
.accions-logotip {
flex: 1 1 18rem;
max-width: 28rem;
}
.accions-logotip > p {
margin: 0.5rem 0 0;
}
/* ---- LES ACCIONS QUE NO ESPEREN «Desa» («ZonaImmediata» i «AccioImmediata», onada 1) ----
LA ZONA ÉS LA «.zona-immediata» DE SEMPRE (el filet a sobre, en fila flexible); la llista hi fa
una fila sencera. DUES COLUMNES QUE COMPARTEIXEN TOTES LES ACCIONS: el botó i el que farà. Cada
acció és una «subgrid» de la llista, i així tots els botons fan l'amplada del més llarg i les
línies comencen totes al mateix lloc —el que feia «.accions-compte» amb una columna fixa de 17 rem,
sense haver d'endevinar l'amplada del rètol més llarg en cap de les dues llengües—. */
.zona-immediata-accions {
display: grid;
flex: 1 1 100%;
grid-template-columns: max-content minmax(0, 1fr);
column-gap: 1rem;
max-width: 52rem;
margin: 0;
padding: 0;
list-style: none;
}
.accio-immediata {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
row-gap: 0.25rem;
padding: 0.625rem 0;
}
.accio-immediata:first-child {
padding-top: 0;
}
.accio-immediata:last-child {
padding-bottom: 0;
}
.accio-immediata + .accio-immediata {
border-top: 1px solid var(--color-sf-border-light);
}
.accio-immediata > .e-btn {
width: 100%;
}
/* UNA ACCIÓ QUE ÉS UN MENÚ («AccioImmediata.Opcions», #586): el «div» és la cel·la de la «subgrid», i
el botó del menú en fa l'amplada com qualsevol altre botó de la zona. Dins d'un «div» perquè el que
el component dibuixa al costat del botó no ocupi la cel·la de la descripció. */
.accio-immediata-menu > .e-btn {
width: 100%;
}
/* EL QUE FARÀ, EN SECUNDARI: una línia de per què, com l'explicació d'una opció. */
.accio-immediata-descripcio {
color: var(--color-sf-content-text-color-alt2);
font-size: 0.85rem;
}
/* EL MOTIU, AL LLOC DEL BOTÓ I DE TOTA L'AMPLADA, EN TEXT NEUTRE (la decisió del client): no és cap
avís —és com és el registre—, i un requadre taronja a cada fitxa facturada entrenaria a no mirar
els avisos. El de tota la zona va a dalt, i és el mateix text. */
.accio-immediata-motiu {
grid-column: 1 / -1;
}
.accio-immediata-motiu,
.zona-immediata-motiu {
max-width: 46rem;
margin: 0;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.85rem;
}
.zona-immediata-motiu {
flex: 1 1 100%;
}
/* LA SORTIDA D'UN MOTIU, JUST SOTA I DE TOTA L'AMPLADA DE LA FILA. */
.accio-immediata-sortida {
display: flex;
flex-wrap: wrap;
grid-column: 1 / -1;
gap: 0.5rem;
}
/* UN FRAGMENT QUE NO DIBUIXA RES NO OCUPA CAP LLOC: la pàgina hi passa «ChildContent» o «Sortida»
amb un «@if» a dins, i el fragment no és nul encara que la condició no es compleixi. Sense això,
la llista buida era una fila de la zona —amb el seu «gap» a sobre— i la sortida buida, una fila
de la «subgrid» amb el seu «row-gap». */
.zona-immediata-accions:empty,
.accio-immediata-sortida:empty {
display: none;
}
/* ---- UNA TRIA DE RÀDIOS APILADES («TriaApilada», #522) ----
Un «fieldset» sense caixa: viu dins d'un grup o dels dependents d'una casella, que ja ho són, i una
vora més seria caixa dins de caixa. La «legend» —o el rètol del valor fix— fa de rètol de camp, com
la de «.tria-rol». Les ràdios s'apilen amb «.tria-vertical», que ja hi era (el correu), i la frase
de cada opció comença on comença el seu títol: el cercle de la ràdio i l'aire fins al text fan
24 px al tema (Tailwind 3, 34.2.3: «.e-radio + label .e-label», «padding-left: 24px»), el mateix
1,5 rem que el sagnat de sota una casella («.opcio-control > small»). «min-inline-size: 0» perquè el
«fieldset» no s'estiri a l'amplada de la frase més llarga i no desbordi al telèfon. */
.tria-apilada {
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
}
.tria-apilada > legend,
.tria-apilada > .retol-tria {
display: block;
margin: 0 0 0.35rem;
padding: 0;
font-weight: 500;
}
.tria-apilada > .tria-vertical {
gap: 0.625rem;
margin-bottom: 0;
}
/* EL QUE LA PÀGINA POSA SOTA LES RÀDIOS (la proposta d'un valor): l'aire el posa la peça. */
.tria-apilada > .tria-vertical ~ * {
margin-top: 0.75rem;
margin-bottom: 0;
}
/* EL FET DE LA PROPOSTA, SENSE EL MARGE DEL NAVEGADOR (revisió del #522): «.bloc-proposta» només
estila el «p» que porta «.titol-proposta», i aquí el fet és text corrent —«Fins ara aquesta
sèrie només ha expedit…»—, de manera que entrava amb 1 em a sobre i a sota i el botó quedava
lluny del que el justifica. El mateix aire que «.nota-proposta p» fins al botó. */
.tria-apilada > .bloc-proposta > p {
margin: 0 0 0.5rem;
}
.tria-apilada > .valor-fix + .ajuda-vigent {
margin: 0.25rem 0 0;
}
/* L'AJUDA VIGENT DE LA TRIA —el motiu del valor fix, la conseqüència de «sense triar»— AMB LA LLETRA
I EL COLOR DE LES AJUDES (revisió del #522). Dins d'un «.camp» l'ajuda és un «small» i la pinta
«.camp small»; aquí és un «p» fora de cap «.camp», i sortia a 14 px amb el color del text, al costat
de les altres ajudes del requadre a 11,7 px en gris. «smaller» és la mida que el navegador dona a
un «small» (la d'aquelles ajudes); el color, el de «.camp small». Sense marges: els posen les regles
de sobre. */
.tria-apilada > .ajuda-vigent {
font-size: smaller;
line-height: 1.4;
color: var(--color-sf-content-text-color-alt2);
}
/* ELS ENLLAÇOS DE TEXT DE LA TRIA, AMB EL COLOR DE L'ÀNCORA (revisió del #522): «Crea una sèrie», la
sortida del valor fix, sortia amb el blau del navegador (rgb(0,0,238); en fosc, rgb(158,158,255)),
que no és cap color del tema. «primary-dark» i no «primary», pel contrast mesurat a «a.ancora»; en
fosc el gira la variable. Un «a.e-btn» és un botó i no en pren res. La mateixa regla que els
enllaços del cap d'un document, dins del «:where()», que no pesa. */
:where(.tria-apilada a:not(.e-btn)) {
color: var(--color-sf-primary-dark);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
/* EL FOCUS, FORA DEL «:where()» I AMB PES (0,3,1): una tria pot anar dins d'un diàleg, i el tema hi treu
l'«outline» amb (0,2,0) (#533, D1 de la revisió de qualitat; vegeu «.text-amb-enllac»). */
.tria-apilada a:not(.e-btn):focus-visible {
outline: 2px solid var(--color-sf-primary);
outline-offset: 2px;
}
/* LA TRIA QUE ÉS DESTÍ D'UNA ÀNCORA («Ancora»: «configuracio/series/{id}#familia», on porta el
desviament del codi 13). La mateixa parella de regles i la mateixa variable que
«.seccio-de-grup[tabindex]» i «.accio-immediata[tabindex]»: sense el «scroll-margin-top» la tria
aterrava a dalt de tot i la capçalera enganxada (52 px) en tapava la llegenda i la primera ràdio
(ho va mesurar drwfac-qualitat, revisió del #522); i cap anell al voltant del «fieldset» sencer,
que només porta el «tabindex=-1» per endur-se'n el focus —el Tab següent cau a la primera ràdio,
que té el seu—. Ho vigilen «CadaDestiDAncoraTeScrollMargin» i «LAncoraFamiliaAterraSotaLaBarra». */
.tria-apilada[tabindex] {
scroll-margin-top: var(--desplacament-ancora);
}
.tria-apilada[tabindex]:focus {
outline: none;
}
.opcio-tria > .opcio-explicacio {
display: block;
margin: 0.125rem 0 0 1.5rem;
font-size: 0.85rem;
color: var(--color-sf-content-text-color-alt2);
}
/* ---- UNA TRIA AMB MINIATURA, EN TARGETES («TriaApilada» amb «OpcioDeTria.Miniatura», lot 3 de la #614) ----
LA MATEIXA TRIA, AMB UN ALTRE FULL: el «fieldset», les ràdios i les frases no canvien, i les targetes són
l'embolcall de cada opció («.opcio-tria») dins de «.tria-targetes». Una graella i no una fila flexible: les
targetes fan totes la mateixa amplada encara que una frase sigui més llarga. 13 rem com a mínim perquè dues
hi càpiguen de costat a la tauleta (721 px), i 40 rem com a molt perquè a 1.440 dues targetes no facin mitja
pantalla cadascuna: la miniatura es llegeix igual a 300 px que a 440, i un dibuix gegant pesaria més que el
formulari. Les àrees diuen on va cada part: el dibuix a dalt, la ràdio i la insígnia en una fila, i la frase
a sota. */
.tria-apilada > .tria-targetes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: 0.75rem;
max-width: 40rem;
}
.tria-targetes > .opcio-tria {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"miniatura miniatura"
"radio insignia"
"frase frase";
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
border: 1px solid var(--color-sf-border-light);
border-radius: var(--radi-superficie);
background-color: var(--fons-targeta);
}
.tria-targetes > .opcio-tria > .tria-miniatura {
grid-area: miniatura;
display: block;
aspect-ratio: 210 / 99;
cursor: pointer;
}
/* LA RÀDIO ÉS EL QUE NO ÉS NI EL DIBUIX NI CAP «small»: el nom de l'embolcall de Syncfusion no s'escriu
al full (vegeu «.tria-vertical label»). */
.tria-targetes > .opcio-tria > :not(.tria-miniatura, small) {
grid-area: radio;
min-width: 0;
}
.tria-targetes > .opcio-tria > .opcio-insignia {
grid-area: insignia;
}
/* LA FRASE, SOTA EL TÍTOL: comença on comença el rètol (els 24 px del cercle), com a la tria apilada. */
.tria-targetes > .opcio-tria > .opcio-explicacio {
grid-area: frase;
margin: 0 0 0 1.5rem;
}
/* LA TRIADA: LA RÀDIO MARCADA, I LA TARGETA AMB LA VORA DE 2 PX DEL PRIMARI I EL FONS SUAU. El segon
píxel és una ombra i no una vora més gruixuda, perquè la targeta no balli en triar-la. Sobre el fons
suau el text i el secundari passen el 4,5:1 (ho mesura «ElsParellsDeLaPaletaTenenContrast»), i la vora
del primari, el 3:1 sobre la targeta. No és l'únic senyal: la ràdio ja ho diu. */
.tria-targetes > .opcio-tria:has(input:checked) {
border-color: var(--color-sf-primary);
background-color: var(--fons-primari-suau);
box-shadow: 0 0 0 1px var(--color-sf-primary);
}
/* EL FOCUS DEL TECLAT, AL VOLTANT DE LA TARGETA: el cercle de la ràdio és petit al costat d'un dibuix de
300 px, i qui recorre la tria amb les fletxes ha de veure quina targeta té. */
.tria-targetes > .opcio-tria:has(input:focus-visible) {
outline: 2px solid var(--color-sf-primary);
outline-offset: 2px;
}
/* UNA GRAELLA DE CAMPS DE DUES COLUMNES COM A MOLT, ON L'ORDRE DEL DOM ÉS FILA PER FILA (#522).
La va estrenar la graella de les quatre sèries per defecte (la seu i el client): les files són la
mena —factures, rectificatives— i les columnes, la família —completes, simplificades—. Amb el
«.camps» de sempre, a 1.440 px les quatre feien una sola fila i la mena no es llegia; amb tres
columnes, la quarta quedava sola a sota. Dues columnes de 18 a 24 rem, com el domicili
(«.camps-domicili»), i una quan no n'hi caben dues. Va DESPRÉS de «.fitxa-mestra .camps»: la
mateixa especificitat, i guanya l'última. */
.camps.camps-de-dues {
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
max-width: var(--sostre-de-dues-caselles);
}
/* ---- UN LLISTAT AL SISTEMA DE FITXES (onada 5, #541, 03/10/2026) ----
«CapcaleraDeLlistat», «TiraDeVistes» amb «TargetaDeVista», la superfície («.superficie-llistat»),
«EstatBuitDelLlistat» i «CelaDePersona». La regla és a docs/22, «Un llistat al sistema de fitxes». La
maqueta és «LlistatFactures» i «LlistatClients»; on discrepa de docs/22, mana docs/22. */
/* LA CAPÇALERA: EL TÍTOL GRAN I L'ACCIÓ DE LA PANTALLA A LA SEVA DRETA (D9). El títol pesa com el de la
capçalera d'una fitxa (24 px i 700): era de 18 px i 600, i al costat de la barra no es distingia. L'acció
s'aparta a la dreta i, si no hi cap, baixa sencera a sota. */
.capcalera-llistat {
margin: 0 0 1rem;
}
.capcalera-llistat-dalt {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
}
.capcalera-llistat-dalt > h1 {
flex: 1 1 auto;
min-width: 0;
margin: 0;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
}
.capcalera-llistat-accions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-left: auto;
}
/* LA SECUNDÀRIA, A L'ESQUERRA DE LA PRIMÀRIA («AccioSecundariaDeLlistat», #435 fase 2): un botó neutre
amb la icona i el verb. L'ordre el fa el marcatge de «CapcaleraDeLlistat» (la ranura va abans), i aquí
només hi ha la caixa. L'embolcall no fa cap caixa pròpia: l'abast és «.visualment-amagat». */
.capcalera-llistat-secundaria {
display: inline-flex;
}
.capcalera-llistat-secundaria-boto.e-btn {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* MENTRE TREBALLA ES VEU APAGADA I ES QUEDA EL FOCUS: «aria-disabled» i no «disabled», i per això el
tema no la pinta. La caixa és la de repòs —el «hover» no s'encén— i només baixa el text, com les
comandes apagades de la barra: el fons del desactivat del tema en fosc és més clar que el dels actius
i cridaria. L'anell del focus no es toca. */
.capcalera-llistat-secundaria-boto.e-btn[aria-disabled="true"],
.capcalera-llistat-secundaria-boto.e-btn[aria-disabled="true"]:hover {
background: var(--color-sf-secondary-bg-color);
border-color: var(--color-sf-secondary-border-color);
color: var(--color-sf-content-text-color-disabled);
cursor: default;
}
.capcalera-llistat > .tira-de-vistes {
margin-top: 1rem;
}
/* LA BARRA DE COMANDES D'UN LLISTAT AMB CAPÇALERA, SENSE EL FILET DE SOTA: ara la separa del que ve la
superfície del llistat, i un filet just damunt d'una vora en feia dues ratlles. La barra continua sent la
de sempre (L8), i només es retoca amb la classe de la peça al davant. */
.capcalera-llistat ~ .barra-comandes {
padding-bottom: 0;
margin-bottom: 0.75rem;
border-bottom: 0;
}
/* LA TIRA DE VISTES. El contenidor és també un «.taula-desplacable» (al telèfon es desplaça a dins), i el
coixí de 4 px és el que deixa sencers l'anell del focus (2 + 2 px) i l'ombra de les targetes: un
«overflow» els retallaria a la vora. El marge negatiu el torna a posar on era. */
.tira-de-vistes {
margin-right: -0.25rem;
margin-left: -0.25rem;
padding: 0.25rem;
}
/* UNA FILA, I TANTES COLUMNES IGUALS COM TARGETES (tres a «/prefactures», quatre a la resta). */
.tira-de-vistes-fila {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 0.875rem;
}
/* UNA TARGETA. La superfície de les fitxes (1 px, 8 px, l'ombra), el rètol petit en terciari, la xifra a
22 px en xifres tabulars i SENSE PARTIR-SE MAI (la regla de la tira de xifres), i el detall en secundari.
LES TRES OMBRES VAN EN VARIABLES perquè la triada i la que crida en sumen una cadascuna sense trepitjar-se:
la vora del primari de la triada (un segon píxel per dins, com la maqueta: «border-color» i una ombra
d'1 px, i res no es mou) i el filet de la que crida (3 px a l'esquerra, per dins i del color de l'estat:
«currentColor», com «.indicador-crida»). Cap amplada canvia, i cap fila balla. */
.targeta-vista {
--vora-vista: 0 0 transparent;
--filet-vista: 0 0 transparent;
position: relative;
display: flex;
flex-direction: column;
gap: 0.25rem;
box-sizing: border-box;
min-width: 0;
padding: 0.875rem 1.125rem;
border: 1px solid var(--color-sf-border-light);
border-radius: var(--radi-superficie);
background-color: var(--fons-targeta);
box-shadow: var(--filet-vista), var(--vora-vista), var(--ombra-superficie);
/* ⛔ CAP «color» AQUÍ (revisió de l'onada 5). La targeta porta la classe d'estat al mateix element
(«.targeta-vista.estat-greu»), i «.estat-*» és d'una sola classe i és molt més amunt al full: amb un
«color» en aquesta regla, de la mateixa especificitat i més avall, guanyava sempre, i la xifra de
«Per atendre» sortia del color del text en clar i en fosc sense cap error. Sense estat, la targeta
hereta el text de la pàgina, que és el mateix. Ho vigilen
«GramaticaDelsLlistatsTests.LaTargetaDeVistaNoEscriuElColorQueEsDeLEstat» i, al navegador,
«VistesDelLlistatAlNavegadorTests.LaXifraDUnaVistaAmbEstatEsDelColorDeLEstat». */
}
/* EL BOTÓ ÉS TOTA LA TARGETA. Sense cap aspecte propi —cap caixa, cap fons, la lletra de la targeta—, i
estirat amb el seu «::after» per sobre del detall, que és fora del botó per no entrar al seu nom. És
el mateix enllaç estirat de les targetes compactes dels llistats. */
.targeta-vista-boto {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
margin: 0;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.targeta-vista-boto::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--radi-superficie);
}
/* EL FOCUS DEL TECLAT ES DIBUIXA A LA TARGETA, i no al botó (que fa la mida del rètol i la xifra): el
mateix anell de 2 px del primari de tota l'aplicació. */
.targeta-vista-boto:focus-visible {
outline: none;
}
.targeta-vista:has(> .targeta-vista-boto:focus-visible) {
outline: 2px solid var(--color-sf-primary);
outline-offset: 2px;
}
/* NOMÉS LA QUE ES PREM RESPON AL RATOLÍ, amb la vora dels controls; una a zero és un «div» i no en té. */
.targeta-vista:has(> .targeta-vista-boto):not(.targeta-vista-triada):hover {
border-color: var(--color-sf-border);
}
/* EL RÈTOL I EL DETALL ES QUEDEN EN GRIS SEMPRE, també a la targeta amb estat: el color és de la xifra.
Dos nivells a posta —«.targeta-vista .targeta-vista-retol» pesa més que «.estat-greu»—, la recepta
d'«.indicador .indicador-titol». El terciari és només sobre la targeta (4,8:1 en clar), mai sobre la
pàgina (4,4). */
.targeta-vista .targeta-vista-retol {
display: block;
font-size: 0.78rem;
font-weight: 500;
line-height: 1.3;
color: var(--color-sf-content-text-color-alt3);
}
/* LA XIFRA HERETA EL COLOR DE LA TARGETA, que és on viu l'estat (com «.indicador-valor»): aquí no s'hi
escriu cap «color». */
.targeta-vista-valor {
display: block;
font-size: 1.375rem;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.2;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.targeta-vista .targeta-vista-detall {
display: block;
font-size: 0.78rem;
line-height: 1.3;
color: var(--color-sf-content-text-color-alt2);
}
/* LA TRIADA: LA VORA DEL PRIMARI, DE 2 PX, I CAP TINT (mesurat, 03/10/2026). La proposta hi posava el fons de
la fila marcada, i sobre aquell fons el vermell i el taronja de la xifra d'estat baixaven de 4,5:1 (4,2 i
4,49 en clar); la maqueta tampoc no el porta. El primari fa 5,5:1 sobre la targeta (en una vora en
n'hi ha prou amb 3), i «aria-pressed» ho diu a qui no la veu. */
.targeta-vista-triada {
--vora-vista: 0 0 0 1px var(--color-sf-primary);
border-color: var(--color-sf-primary);
}
.targeta-vista-crida {
--filet-vista: inset 3px 0 0 currentColor;
}
/* LA SUPERFÍCIE D'UN LLISTAT: LA GRAELLA DINS D'UNA TARGETA, AMB EL PEU A DINS.
La mateixa superfície que les targetes de les fitxes. «overflow: clip» i no «hidden»: retalla les
cantonades de la banda dels noms de columna al radi de la targeta sense fer-ne cap contenidor que es
desplaci (la graella ja es desplaça per dins seu quan cal), i l'ombra, que és de la targeta, no es
retalla. La regió del llistat («.llistat») és «display: contents» i el seu contingut queda com a fill
visual de la superfície; el peu va DESPRÉS de la regió i FORA d'«aria-busy», com sempre. */
.superficie-llistat {
overflow: clip;
border: 1px solid var(--color-sf-border-light);
border-radius: var(--radi-superficie);
background-color: var(--fons-targeta);
box-shadow: var(--ombra-superficie);
}
/* LA GRAELLA NO PORTA CAIXA PRÒPIA (caixa dins de caixa no), I PREN EL FONS DE LA TARGETA: en fosc la
targeta és la capa clara i les files quedaven com un forat (el mateix que «.fitxa-mestra .grup-caixa
.e-grid», #501). Només els fons de repòs: el ratolí, la fila activa i la fila marcada per a un lot
porten selectors més específics, i continuen manant ells. */
.superficie-llistat .e-grid {
border: 0;
border-radius: 0;
}
.superficie-llistat .e-grid,
.superficie-llistat .e-grid :is(.e-gridcontent, .e-content, .e-table, .e-row, .e-altrow, .e-rowcell, .e-emptyrow td) {
background-color: var(--fons-targeta);
}
/* LA BANDA DELS NOMS DE COLUMNA: un graó per sota de la targeta («--fons-capcalera-llistat»), en 12 px,
pes 600 i terciari, com la maqueta. Va després de «.contingut .e-grid .e-headercell», amb la mateixa
especificitat, i guanya per l'ordre. */
.superficie-llistat .e-grid :is(.e-gridheader, .e-headercontent, .e-headercell, .e-detailheadercell) {
background-color: var(--fons-capcalera-llistat);
}
/* SENSE ESPAIAT DE LLETRA DE MÉS, a diferència de la maqueta: les amplades de les columnes estan
calibrades amb el rètol més llarg de les dues llengües («CapCapcaleraDeColumnaNoEsTalla»), i
0,02 em de més en cada lletra hi menjaria el marge. */
.superficie-llistat .e-grid .e-headercell .e-headertext {
font-weight: 600;
color: var(--color-sf-content-text-color-alt3);
}
/* L'ÚLTIMA FILA SENSE FILET: el peu ja en porta un a dalt, i dos seguits fan una ratlla de 2 px. */
.superficie-llistat .e-grid .e-gridcontent tr:last-child > td {
border-bottom-color: transparent;
}
/* EL QUE VA DINS DE LA REGIÓ I NO ÉS LA GRAELLA —«Carregant…», la nota de les factures anteriors a la
seu, el «cap resultat» amb filtres, la nota del client (#435 fase 2), que és un «div» de dues línies—
porta l'aire de la targeta. */
.superficie-llistat > .llistat > :is(p, .e-message, .nota-llistat) {
margin: 1rem;
}
/* EL PEU, A DINS I AMB EL FILET A DALT. Sense recompte ni pàgines (la llista buida o carregant) no
ocupa res: la regió del recompte hi ha de ser —és la que anuncia el número quan arriba—, però una
ratlla sota l'estat buit no diria res. */
.superficie-llistat > .peu-llistat {
margin: 0;
padding: 0.625rem 1rem;
border-top: 1px solid var(--color-sf-border-light);
}
.superficie-llistat > .peu-llistat:has(> .recompte:empty):not(:has(.paginacio)) {
padding: 0;
border-top-width: 0;
}
/* L'ESTAT BUIT («EstatBuitDelLlistat»): centrat dins de la superfície, la rajola de 44 px amb la icona del
menú (els colors de la rajola dels grups: 4,8:1 en clar i 7,6:1 en fosc), el títol, una frase de dues
línies com a molt i l'acció. */
.estat-buit-llistat {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.625rem;
padding: 2.75rem 1.5rem;
text-align: center;
}
.estat-buit-llistat-rajola {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--radi-control);
background-color: var(--fons-primari-suau);
color: var(--color-sf-primary);
}
.estat-buit-llistat-rajola .e-icons {
color: inherit;
font-size: 1.25rem;
}
.estat-buit-llistat-titol {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.estat-buit-llistat-frase {
max-width: 26rem;
margin: 0;
font-size: 0.85rem;
color: var(--color-sf-content-text-color-alt2);
}
.estat-buit-llistat-accio {
margin-top: 0.375rem;
}
/* LA CEL·LA D'UNA PERSONA («CelaDePersona»): el monograma de 28 px i, al costat, el nom (l'àncora) amb
l'identificador i les insígnies a sota. «white-space: normal»: la cel·la de la graella va amb «nowrap», i
un nom llarg s'ha de poder partir per paraules (L3: el text descriptiu sí; l'identificador, mai). Cap
«position»: l'àncora s'estira sobre tota la targeta compacta del telèfon, i un bloc posicionat al mig
l'hi tallaria. */
.cela-de-persona {
display: flex;
align-items: flex-start;
gap: 0.625rem;
min-width: 0;
white-space: normal;
}
/* EL MONOGRAMA: el primari sobre el seu fons suau, com el de la capçalera d'un registre. Les lletres
les pinta el full des de «data-inicials»: no han de ser cap tros de text de la cel·la (L6 es mesura
amb el primer, i unes inicials centrades en 28 px començarien 7 px més avall que el nom). */
.cela-de-persona-monograma {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background-color: var(--fons-primari-suau);
color: var(--color-sf-primary);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1;
}
.cela-de-persona-monograma::before {
content: attr(data-inicials);
}
/* EL COS S'ENDÚ TOT EL QUE DEIXA EL MONOGRAMA («flex: 1»), i amb «min-width: 0» es pot estrènyer per
sota del seu contingut: és l'amplada contra la qual els fills es topen (vegeu sota). */
.cela-de-persona-cos {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 0;
}
/* CAP FILL NO PASSA DE L'AMPLADA DEL COS (revisió de l'onada 5, mesurat a 721 px). Amb
«align-items: flex-start» cada fill pren l'amplada del seu contingut, i l'amplada mínima d'un
correu en dues peces que no parteixen per dins és la de la peça més llarga: el correu sencer
d'una línia, si el cos ho permetés. Sense sostre, l'identificador es feia de 360 px en un cos
de 341 (379 de cel·la menys els 38 del monograma), desbordava la cel·la i el «max-width: 100%»
de les peces no actuava mai. Amb el sostre, el correu baixa de línia després de l'@, que és
l'únic tall que admet L3. Això sol no hi bastava: la primera peça d'un correu de proves en vol
uns 350 tota sola, i per això per sota de 75 rem el monograma cedeix (al tall de 75 rem, al
final de la secció). L'enllaç continua fent l'amplada del seu text: el subratllat i l'anell del
focus no s'estiren fins a la vora. */
.cela-de-persona-cos > * {
max-width: 100%;
}
.cela-de-persona-cos > a.ancora {
font-weight: 500;
overflow-wrap: normal;
}
/* L'IDENTIFICADOR, EN SECUNDARI I MÉS PETIT. En secundari i no en terciari: la fila canvia de fons amb
el ratolí i quan és l'activa, i el terciari no hi aguanta el 4,5:1. */
.cela-de-persona-identificador {
font-size: 0.8rem;
color: var(--color-sf-content-text-color-alt2);
}
/* UN NIF O UN CODI NO ES PARTEIX MAI (L3), i va en pas fix com tots els identificadors del producte. */
.cela-de-persona-codi {
font-family: var(--lletra-mono);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* UN CORREU, EN DUES PECES QUE NO PARTEIXEN PER DINS: l'únic tall és després de l'@, i si una sola
peça no hi cap, acaba amb punts suspensius i el correu sencer és al «title». La regla de
«.graella-usuaris .correu-part», a la peça. */
.cela-de-persona .correu-de-persona {
display: block;
white-space: normal;
overflow-wrap: normal;
}
.cela-de-persona .correu-de-persona .correu-part {
display: inline-block;
max-width: 100%;
overflow: hidden;
vertical-align: top;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Un «inline-block» no hereta el subratllat de l'enllaç que l'envolta. */
.cela-de-persona a.ancora:is(:hover, :focus-visible) .correu-part {
text-decoration: underline;
}
/* ---- EL PEU D'UN PLAFÓ AMB UN RESUM («.peu-plafo-amb-resum», #567, 03/10/2026) ----
UNA CLASSE DEL SISTEMA I NO CAP PEÇA, amb el criteri de «.superficie-llistat»: el que hi va a dins ja
són peces o classes del sistema —els botons de la pàgina, «.motiu-del-primari», «AvisAccio»— i un
component que només hi posés un «div» no protegiria res que el guardià no vigili
(«ElResumDelPeuDUnPlafoNoEsRegioViva»). L'estructura, en aquest ordre i dins del «Peu» del plafó:
div.peu-plafo-amb-resum
[AvisAccio del refús] una fila sencera, a dalt: el plafó es queda obert
p.peu-plafo-resum «Import 774,40 € · 2 línies», a l'esquerra
div.peu-plafo-botons «Cancel·la» i el primari, l'últim (F7), a la dreta
[small.ajuda-estat.motiu-del-primari] per què el primari és apagat, sota el botó i a la dreta
EL RESUM NO ÉS CAP REGIÓ VIVA, a posta: canvia a cada quantitat que s'escriu, i un lector de pantalla
el diria a cada tecla. Qui el vol el llegeix; el que s'ha de sentir en marcar una línia és la casella.
EL PEU DEL TEMA ESCRIU «text-align: right» I UN MARGE ESQUERRE A CADA BOTÓ («.e-dialog .e-footer-content
.e-btn», 8 px): aquí la separació és el «gap», i el marge del tema es treu amb una classe més. */
.peu-plafo-amb-resum {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.5rem 1rem;
text-align: start;
}
.peu-plafo-resum {
flex: 1 1 12rem;
min-width: 0;
margin: 0;
color: var(--color-sf-content-text-color-alt2);
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
}
.peu-plafo-resum strong {
color: var(--color-sf-content-text-color);
font-weight: 600;
white-space: nowrap;
}
.peu-plafo-botons {
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.5rem;
}
.e-dialog .e-footer-content .peu-plafo-botons .e-btn {
margin-left: 0;
}
/* EL MOTIU I EL REFÚS, CADASCUN A LA SEVA FILA SENCERA: amb el motiu al costat del botó, el primari
saltaria a l'esquerra quan apareix (el defecte de la #565 a «.peu-accions»). */
.peu-plafo-amb-resum > .motiu-del-primari {
flex-basis: 100%;
max-width: none;
margin: 0;
text-align: end;
}
.peu-plafo-amb-resum > .avis-accio {
flex-basis: 100%;
margin: 0;
}
/* ---- LA GRAELLA DE TRIA D'UN PLAFÓ («.graella-tria», #567, 03/10/2026) ----
LES FILES D'UN DOCUMENT QUE ES TRIEN, I PER A CADA UNA, UNA QUANTITAT: «Copia-la». Una «SfGrid» amb la
casella nostra a la plantilla de la primera columna —el criteri de «TriaDeFactures» i del lot de
«/prefactures»—, i és del mòdul del teclat («teclat-de-graella.js»): el Tab va de casella a quantitat i a
la fila següent, i les cel·les no en són parades. Les regles del refús dins de la cel·la i de la fila
que no balla són les de totes les graelles amb camps oberts, més amunt al full («.graella-tria .error-camp»).
L'estructura:
div.barra-tria a sobre de la graella, fora d'ella
SfCheckBox (Indeterminate) «Totes les línies», de tres estats: el «totes / cap» (D5)
span.barra-tria-recompte «3 de 5 línies»
div.graella-tria.graella-