/* ParentIApp — estils basats en la Guia d'Identitat Corporativa v1.0 */
:root {
  --blue: #2489d3;
  --blue-dark: #0f5c8c;
  --teal: #16a98b;
  --teal-dark: #0c6e5a;
  --green: #7cb93c;
  --green-dark: #4f7a22;
  --orange: #fca311;
  --orange-dark: #b8720a;
  --bg: #faf9f5;
  --paper: #ffffff;
  --ink: #1e2a32;
  --ink-soft: #5b6670;
  --ink-faint: #8b959c;
  --line: #e6e3da;
  --radius: 14px;
  --red: #d3453c;
  --grad: linear-gradient(90deg, var(--blue) 0%, var(--teal) 45%, var(--green) 75%, var(--orange) 100%);
  /* v68.8 — fons suaus per a icones/xips (landing 'tabs' i pàgina d'inici
     #view-story, reaprofitant els mateixos 4 colors corporatius). */
  --tag-blue-bg: rgba(36, 137, 211, .10);
  --tag-teal-bg: rgba(22, 169, 139, .10);
  --tag-green-bg: rgba(124, 185, 60, .12);
  --tag-orange-bg: rgba(252, 163, 17, .12);
  /* v44 — calendari escolar: color propi (violeta), diferent del
     teal/orange ja usats per PA/PB, perquè la superposició de períodes
     escolars sobre el calendari de custòdia es distingeixi sempre a cop
     d'ull de l'assignació de custòdia del dia.
     v45 — petició de Joan: "cada usuari ha de poder triar el color de
     representació en els objectes del calendari". Aquests 4 tokens
     (--cal-pa-strong/--cal-pb-strong més avall, --school i --school-lectiu
     aquí) són ara SOBREESCRITS en JS per applyCalendarColors() (veure
     app.js) amb els colors triats per l'usuari (desats a localStorage,
     per rol PA/PB) — els valors d'aquí NOMÉS són el valor de fàbrica
     abans que es faci cap tria, mai canvien de significat. --school-lectiu
     és un token nou (v45): color dels dies LECTIUS (dies de classe
     normals, a diferència dels dies festius escolars que ja usaven
     --school) — verd per defecte, per contrastar amb el violeta. */
  --school: #7c5cd6;
  --school-dark: #4a3592;
  --school-lectiu: #3f8f4f;
  --school-lectiu-dark: #276334;
  /* v59.17 — aniversaris dels fills (marcador anual recurrent, petició de
     Joan): color propi, fix (NO sobreescrit per applyCalendarColors() —
     a diferència de --school/--school-lectiu, un aniversari no és ni
     "de PA" ni "de PB", és del fill, així que sempre es veu igual). */
  --birthday: #d6336c;
  --birthday-dark: #a61e4d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Quicksand', sans-serif; font-weight: 600; margin: 0; color: var(--ink); }
p { line-height: 1.65; color: var(--ink-soft); margin: 0; }
a { color: var(--blue-dark); }

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-dark);
  font-weight: 500;
}

.arc-divider { height: 4px; border-radius: 4px; background: var(--grad); width: 64px; margin: 18px auto; }

.wrap { max-width: 560px; margin: 0 auto; padding: 0 24px; }

/* HEADER */
.site-header {
  display: flex; align-items: center; justify-content: center;
  padding: 28px 24px 8px;
  position: relative;
}
/* v32: petició de Joan — "el logo ha de ser mes gran". Puja de 40px a
   64px (+60%); es redueix una mica a mòbil perquè no competeixi amb el
   selector d'idioma (.lang-switcher, sempre a la dreta del capçalera). */
.site-header img { height: 64px; }
@media (max-width: 480px) {
  .site-header img { height: 52px; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* v24: selector d'idioma — configuració a nivell d'usuari, persisteix
   només al navegador (localStorage). Visible a totes les pantalles. */
.lang-switcher {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
}
.lang-switcher select {
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
  cursor: pointer;
}
.lang-switcher select:hover, .lang-switcher select:focus { border-color: var(--teal); outline: none; }
@media (max-width: 480px) {
  .lang-switcher { right: 10px; }
  .lang-switcher select { font-size: 11px; padding: 5px 6px; }
}

/* HERO / LANDING */
.hero {
  min-height: 78vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 40px 24px 64px;
  background:
    radial-gradient(ellipse 900px 500px at 20% -10%, rgba(36,137,211,.10), transparent 60%),
    radial-gradient(ellipse 900px 500px at 85% 110%, rgba(252,163,17,.12), transparent 60%),
    var(--bg);
}
.hero img.logo { width: 200px; margin-bottom: 20px; }
.hero h1 { font-size: 34px; letter-spacing: -.01em; max-width: 520px; }
.hero .sub { font-size: 16px; margin-top: 14px; max-width: 480px; color: var(--ink-soft); }

.cta-row { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; width: 100%; max-width: 360px; }

/* v68.7 — 4 variants de la landing (#view-landing), petició de Joan:
   "genera 4 versions diferents de la landing page mantenint la
   estetica corporativa". Mateix criteri que [data-skin="…"]
   (aplicat per applySkin(), més avall en aquest fitxer): un atribut
   posat per JS a #view-landing després de llegir la configuració
   global (GET /api/landing-variant-config), MAI un canvi de markup —
   només reestilitza el que ja hi ha. Els 3 variants nous reutilitzen
   sempre els mateixos tokens corporatius (--blue/--teal/--green/
   --orange/--paper/--line/--radius, Quicksand/Inter/JetBrains Mono);
   'original' (valor de fàbrica) no té cap regla pròpia — és el
   disseny que ja existia, sense cap canvi. */

.landing-highlights {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 20px; max-width: 420px;
}
.landing-highlights:empty { display: none; margin-top: 0; }
.landing-highlight-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 7px 14px 7px 10px; line-height: 1.2;
}
.landing-highlight-chip .icon { font-size: 15px; line-height: 1; }

/* "Confiança" — seguretat/valor legal: hero més calmat i en forma de
   targeta (menys degradat de fons, més "document"), xips amb vora blava. */
[data-landing-variant="confianca"] .hero {
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius);
  margin-top: 8px;
}
[data-landing-variant="confianca"] .eyebrow { color: var(--blue-dark); }
[data-landing-variant="confianca"] .landing-highlight-chip { border-color: var(--blue); color: var(--blue-dark); }

/* "Organització" — calendari/coordinació: manté el degradat suau del
   disseny original però amb els xips en verd/teal (mateix color que
   la resta d'eines de calendari de l'app). */
[data-landing-variant="organitzacio"] .eyebrow { color: var(--teal-dark); }
[data-landing-variant="organitzacio"] .landing-highlights { max-width: 480px; }
[data-landing-variant="organitzacio"] .landing-highlight-chip { border-color: var(--teal); color: var(--teal-dark); }

/* "Benestar" — infància/calma: fons més càlid (accent verd/taronja),
   tipografia una mica més gran al subtítol, xips arrodonits en taronja. */
[data-landing-variant="benestar"] .hero {
  background:
    radial-gradient(ellipse 900px 500px at 20% -10%, rgba(124,185,60,.12), transparent 60%),
    radial-gradient(ellipse 900px 500px at 85% 110%, rgba(252,163,17,.14), transparent 60%),
    var(--bg);
}
[data-landing-variant="benestar"] .eyebrow { color: var(--green-dark); }
[data-landing-variant="benestar"] .hero .sub { font-size: 17px; }
[data-landing-variant="benestar"] .landing-highlight-chip { border-color: var(--orange); color: var(--orange-dark); }

/* Secció de professionals (arbitratge) a la landing — v48.1, petició de
   Joan: "vull que sigui més visible". Caixa pròpia, separada visualment
   del registre familiar (fons lleugerament tenyit + vora superior
   degradada, com els accents que ja fa servir la resta de l'app), amb
   icona, títol i text explicatiu perquè es distingeixi d'un cop d'ull
   sense necessitat de llegir-la sencera. */
.landing-pro-section {
  width: 100%; max-width: 400px; margin: 28px auto 0; padding: 22px 24px;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius);
  text-align: center; position: relative; overflow: hidden;
}
.landing-pro-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad);
}
.landing-pro-icon { font-size: 26px; line-height: 1; margin-bottom: 8px; }
.landing-pro-section h3 { font-size: 16px; }
.landing-pro-section p { font-size: 13px; margin-top: 6px; margin-bottom: 16px; }
.landing-pro-section .btn { max-width: 320px; margin: 0 auto; }

/* v68.8 — 5 layouts de DISPOSICIÓ de les funcions de registre
   (#landing-groups), petició de Joan: "5 landing page de registre
   diferents...amb distribucio de les diferents funcions de registre
   diferents. Genera, al menys dos de elles, orientades a la facilitat
   de ús del usuari." Mateix criteri "CSS-driven, mai reemplaça
   elements" que `[data-landing-variant]` de dalt — atribut
   `data-landing-layout` a #view-landing, posat per applyLandingLayout()
   (app.js) després de llegir la configuració global. 'stack' (valor de
   fàbrica) no té CAP regla pròpia: és exactament la disposició vertical
   que ja existia. */
.landing-layout-nav:empty,
.landing-focus-toggle-slot:empty { display: none; }

/* --- "Focus" — facilitat d'ús #1: el registre familiar queda sol i
   gran; arbitratge/partner/delegat es pleguen sota un únic botó "Més
   opcions de registre ▾", pintat per JS a #landing-focus-toggle-slot. --- */
[data-landing-layout="focus"] #landing-group-family .cta-row { max-width: 400px; }
[data-landing-layout="focus"] .landing-secondary-groups {
  display: none; flex-direction: column; gap: 16px;
  max-width: 400px; margin: 6px auto 0;
}
[data-landing-layout="focus"] .landing-secondary-groups.expanded { display: flex; }
[data-landing-layout="focus"] .landing-secondary-groups .landing-pro-section { margin-top: 0; }
.landing-more-toggle {
  display: block; margin: 22px auto 0; padding: 9px 6px;
  background: none; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.landing-more-toggle:hover { color: var(--teal-dark); }
.landing-more-toggle .chev { display: inline-block; margin-left: 4px; transition: transform .15s ease; }
.landing-more-toggle.expanded .chev { transform: rotate(180deg); }

/* --- "Grid" — les 4 funcions en graella 2×2, totes visibles alhora,
   escanejables d'un cop d'ull. `display:contents` a l'embolcall
   secundari perquè els 3 grups "professionals" es converteixin en
   caselles pròpies de la graella (en lloc de compartir-ne una de sola). --- */
[data-landing-layout="grid"] #landing-groups {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  max-width: 760px; margin: 8px auto 0; align-items: stretch;
}
[data-landing-layout="grid"] .landing-secondary-groups { display: contents; }
[data-landing-layout="grid"] #landing-group-family {
  grid-column: 1 / -1; display: flex; justify-content: center;
}
[data-landing-layout="grid"] #landing-group-family .cta-row { max-width: 460px; }
[data-landing-layout="grid"] .landing-pro-section { margin: 0; max-width: none; height: 100%; box-sizing: border-box; }
[data-landing-layout="grid"] .landing-focus-toggle-slot { display: none; }
@media (max-width: 680px) {
  [data-landing-layout="grid"] #landing-groups { grid-template-columns: 1fr; max-width: 400px; }
  [data-landing-layout="grid"] #landing-group-family { grid-column: 1; }
}

/* --- "Tabs" i "Wizard" comparteixen el mateix mecanisme d'amagar/mostrar
   UN sol grup: JS hi afegeix/treu la classe `.active` als 4
   `.landing-group` (mai els destrueix ni els recrea). La diferència entre
   els dos és NOMÉS el que es pinta a #landing-layout-nav: una barra de
   pestanyes (tabs) o 4 targetes grosses de selecció "Qui ets?" (wizard,
   facilitat d'ús #2). --- */
[data-landing-layout="tabs"] .landing-group,
[data-landing-layout="wizard"] .landing-group { display: none; }
[data-landing-layout="tabs"] .landing-group.active,
[data-landing-layout="wizard"] .landing-group.active { display: block; }
[data-landing-layout="tabs"] .landing-focus-toggle-slot,
[data-landing-layout="wizard"] .landing-focus-toggle-slot { display: none; }

[data-landing-layout="tabs"] #landing-layout-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  max-width: 480px; margin: 0 auto 22px;
}
.landing-tab-btn {
  font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 13px;
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--paper); color: var(--ink-soft); cursor: pointer;
}
.landing-tab-btn:hover { border-color: var(--teal); }
.landing-tab-btn.active { border-color: var(--teal); color: var(--teal-dark); background: var(--tag-teal-bg); }

/* "Wizard" — pregunta guiada "Qui ets?" amb 4 targetes grosses; en
   triar-ne una es mostra NOMÉS el grup corresponent. Facilitat d'ús: cap
   informació de més fins que l'usuari digui quin és el seu cas. */
[data-landing-layout="wizard"] #landing-layout-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  max-width: 460px; margin: 0 auto 26px;
}
.landing-wizard-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 10px; border-radius: var(--radius); border: 1.5px solid var(--line);
  background: var(--paper); cursor: pointer; text-align: center;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}
.landing-wizard-card .wicon { font-size: 22px; line-height: 1; }
.landing-wizard-card:hover { border-color: var(--teal); }
.landing-wizard-card.active { border-color: var(--teal); color: var(--teal-dark); background: var(--tag-teal-bg); }
@media (max-width: 420px) {
  [data-landing-layout="wizard"] #landing-layout-nav { grid-template-columns: 1fr 1fr; max-width: 320px; }
}

/* ===================================================================
   v68.8 — #view-story: pàgina d'inici per defecte (artefacte
   "storyteller" traslladat a l'app real). Mateixos tokens corporatius
   que la resta de l'app (ja eren idèntics a l'artefacte original —
   veure claude/copaternia-storyteller-rebrand.md). `[data-story-variant]`
   (posat per applyStorytellerVariant(), app.js) tria quina de les 8
   aparences visuals és l'activa — SEMPRE sobre el mateix markup/
   contingut, mateix criteri que `[data-landing-variant]`/`[data-skin]`.
   'clara' (valor de fàbrica) no té cap regla pròpia.
   =================================================================== */

.story-innav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px;
  padding: 14px 0 8px; margin-bottom: 8px;
}
.story-innav a {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); text-decoration: none;
}
.story-innav a:hover { color: var(--teal-dark); }

/* v74 -- boto "Area de clients" dins el mateix nav de #view-story (veure
   index.html). Mateixa tipografia que la resta d'enllaços de navegacio
   de dalt, pero en <button> (mai <a>, per evitar que el navegador salti
   a l'ancora "#" en clicar -- veure data-back a index.html/app.js) i amb
   el color d'accent (--teal-dark) des del primer moment, no nomes en
   hover, perque es distingeixi a cop d'ull dels enllaços de desplaçament
   intern de la mateixa barra. */
.story-innav button.story-nav-cta {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--teal-dark); background: none; border: none; cursor: pointer;
  padding: 0; margin: 0;
}
.story-innav button.story-nav-cta:hover { text-decoration: underline; }

.story-hero {
  text-align: center; padding: 20px 12px 40px;
  background:
    radial-gradient(ellipse 900px 500px at 20% -10%, rgba(36,137,211,.10), transparent 60%),
    radial-gradient(ellipse 900px 500px at 85% 110%, rgba(252,163,17,.12), transparent 60%),
    var(--bg);
}
.story-hero h1 { font-size: 32px; letter-spacing: -.01em; max-width: 640px; margin: 14px auto 0; }
.story-lede { font-size: 15.5px; color: var(--ink-soft); max-width: 620px; margin: 14px auto 0; }
.story-hero-cta { max-width: 420px; margin-left: auto; margin-right: auto; }

.story-feature-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  padding: 28px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.story-feature { text-align: center; }
.story-ficon {
  width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
}
.story-feature h4 { font-size: 14.5px; }
.story-feature p { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; }
@media (max-width: 680px) {
  .story-feature-strip { grid-template-columns: 1fr; gap: 20px; }
}

.story-block { padding: 44px 8px; }
.story-block-paper { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story-head { margin-bottom: 24px; max-width: 640px; }
.story-head-center { text-align: center; margin-left: auto; margin-right: auto; }
.story-head h2 { font-size: 24px; margin-top: 8px; }
.story-head .story-lede { margin-left: 0; margin-right: 0; }
.story-head-center .story-lede { margin-left: auto; margin-right: auto; }

.story-cal-demo { max-width: 480px; margin: 0 auto; }
.story-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.story-cal-day {
  aspect-ratio: 1; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--ink);
}
.story-cal-day .dow { font-size: 9px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
.story-cal-day.a { background: var(--tag-blue-bg); }
.story-cal-day.b { background: var(--tag-orange-bg); }
.story-cal-day.t { background: linear-gradient(135deg, var(--tag-blue-bg) 50%, var(--tag-orange-bg) 50%); }
.story-cal-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 14px; }
.story-leg-item { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.story-leg-item .leg-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

.story-rail { max-width: 640px; margin: 0 auto; position: relative; }
.story-rail::before { content: ''; position: absolute; left: 27px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.story-scene-row { display: grid; grid-template-columns: 46px 12px 1fr; gap: 14px; margin-bottom: 20px; position: relative; }
.story-time { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-faint); padding-top: 14px; text-align: right; }
.story-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--teal); margin-top: 16px; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--bg); }
.story-scene-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.story-scene-card h3 { font-size: 15px; }
.story-scene-card p { font-size: 13px; color: var(--ink-soft); margin-top: 5px; }
.story-scene-exception .story-dot { background: var(--orange); }
.story-scene-exception .story-scene-card { border-color: var(--orange); background: rgba(252,163,17,.06); }
@media (max-width: 480px) {
  .story-scene-row { grid-template-columns: 34px 10px 1fr; gap: 8px; }
  .story-time { font-size: 10.5px; }
}

.story-fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 900px; margin: 0 auto; }
.story-fgroup { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.story-fgroup h3 { font-size: 15px; margin-bottom: 8px; }
/* v69 — frase pròpia opcional (homeFeaturesConfig.js, editable des d'/admin), entre el títol i els punts. */
.story-fgroup-desc { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 8px; }
.story-fgroup-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.story-fgroup-list li { font-size: 12.5px; color: var(--ink-soft); padding-left: 14px; position: relative; }
.story-fgroup-list li::before { content: '·'; position: absolute; left: 2px; color: var(--teal); font-weight: 700; }
@media (max-width: 900px) { .story-fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .story-fgrid { grid-template-columns: 1fr; } }

.story-trust-card { max-width: 720px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.story-trust-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.story-trust-list li { font-size: 13.5px; font-weight: 600; color: var(--ink); padding-left: 20px; position: relative; }
.story-trust-list li::before { content: '✓'; position: absolute; left: 0; color: var(--teal); }
.story-trust-paragraph { font-size: 14px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 16px; }
@media (max-width: 560px) { .story-trust-list { grid-template-columns: 1fr; } }

/* v69 — nombre de columnes ja no és fix (2): els plans es pinten des del catàleg real (renderStoryPlans()), que pot tenir'n 1, 2 o més. */
.story-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; }
.story-plan { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 24px; text-align: center; position: relative; }
.story-plan-premium { border-color: var(--teal); }
.story-plan-badge {
  display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; margin-bottom: 12px;
}
.story-plan-premium .story-plan-badge { color: var(--teal-dark); border-color: var(--teal); }
.story-plan-name { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 15px; }
.story-plan-price { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 600; margin: 8px 0; color: var(--teal-dark); }
.story-plan-desc { font-size: 12.5px; color: var(--ink-soft); }
.story-plans-note { text-align: center; font-size: 13px; color: var(--ink-faint); margin-top: 20px; }
/* v69 — estats "mai bloqueja" de la graella dinàmica de plans (renderStoryPlans() a app.js). */
.story-plans-loading, .story-plans-empty { grid-column: 1 / -1; text-align: center; font-size: 13.5px; color: var(--ink-faint); padding: 24px 0; }
@media (max-width: 560px) { .story-plans { grid-template-columns: 1fr; max-width: 360px; } }

.story-pros-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; margin: 0 auto; }
.story-stat-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.story-feature-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.story-feature-list li { font-size: 13px; color: var(--ink-soft); padding-left: 16px; position: relative; }
.story-feature-list li::before { content: '·'; position: absolute; left: 2px; color: var(--teal); font-weight: 700; }
.story-pros-note { max-width: 760px; margin: 22px auto 0; font-size: 13px; color: var(--ink-faint); }
@media (max-width: 640px) { .story-pros-grid { grid-template-columns: 1fr; } }

.story-final { text-align: center; background: var(--paper); border-top: 1px solid var(--line); }
.story-final h2 { font-size: 24px; margin-top: 8px; }
.story-final > p { max-width: 480px; margin: 10px auto 0; color: var(--ink-soft); font-size: 14.5px; }
.story-final-cta { max-width: 420px; margin: 26px auto 0; }
.story-final-note { max-width: 520px; margin: 18px auto 0; font-size: 12.5px; color: var(--ink-faint); }

/* -------------------------------------------------------------------
   Els 8 variants visuals de #view-story (v68.8) — "genera també 8
   opcions diferents que es puguin seleccionar desde /admin". 'clara'
   (de fàbrica) és exactament el que hi ha a dalt, sense cap regla
   pròpia. Els altres 7 NOMÉS reestilitzen (colors, densitat, radi,
   tipografia d'accent) — mai canvien contingut, seccions ni botons.
   ------------------------------------------------------------------- */

/* "Viva" — més saturada i alegre: degradat més intens a l'hero, icones
   en color ple (no en to suau), targetes més arrodonides. */
[data-story-variant="viva"] .story-hero {
  background:
    radial-gradient(ellipse 900px 500px at 20% -10%, rgba(36,137,211,.20), transparent 60%),
    radial-gradient(ellipse 900px 500px at 85% 110%, rgba(252,163,17,.22), transparent 60%),
    radial-gradient(ellipse 700px 400px at 50% 120%, rgba(124,185,60,.14), transparent 60%),
    var(--bg);
}
[data-story-variant="viva"] .story-ficon { box-shadow: 0 4px 14px rgba(30,42,50,.10); }
[data-story-variant="viva"] .story-fgroup,
[data-story-variant="viva"] .story-scene-card,
[data-story-variant="viva"] .story-stat-card,
[data-story-variant="viva"] .story-plan { border-radius: 20px; }
[data-story-variant="viva"] .story-dot { background: var(--orange); }
[data-story-variant="viva"] .story-plan-premium { border-width: 2px; }
[data-story-variant="viva"] .eyebrow { color: var(--teal-dark); }

/* "Minimal" — molt de blanc, vores fines, sense degradats ni fons de
   color; la informació parla per si sola. */
[data-story-variant="minimal"] .story-hero { background: var(--bg); }
[data-story-variant="minimal"] .story-ficon { background: transparent !important; border: 1.5px solid var(--line); }
[data-story-variant="minimal"] .story-fgroup { background: transparent; border-color: var(--line); }
[data-story-variant="minimal"] .story-scene-card { box-shadow: none; }
[data-story-variant="minimal"] .story-cal-day.a,
[data-story-variant="minimal"] .story-cal-day.b { background: var(--bg); border: 1.5px solid var(--line); }
[data-story-variant="minimal"] .story-trust-card,
[data-story-variant="minimal"] .story-stat-card { background: transparent; }
[data-story-variant="minimal"] .story-plan { border-width: 1px; }
[data-story-variant="minimal"] .story-plan-premium { border-color: var(--ink); }
[data-story-variant="minimal"] .story-block-paper { background: var(--bg); }
[data-story-variant="minimal"] .story-fgroup-list li::before,
[data-story-variant="minimal"] .story-feature-list li::before { color: var(--ink-faint); }

/* "Compacta" — mateixa informació, menys espai: pensada per a qui vol
   fer un cop d'ull ràpid a tot sense fer gaire scroll. */
[data-story-variant="compacta"] .story-hero { padding: 14px 12px 26px; }
[data-story-variant="compacta"] .story-hero h1 { font-size: 26px; }
[data-story-variant="compacta"] .story-lede { font-size: 13.5px; margin-top: 8px; }
[data-story-variant="compacta"] .story-block { padding: 26px 8px; }
[data-story-variant="compacta"] .story-head { margin-bottom: 14px; }
[data-story-variant="compacta"] .story-head h2 { font-size: 19px; }
[data-story-variant="compacta"] .story-fgrid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
[data-story-variant="compacta"] .story-fgroup { padding: 12px; }
[data-story-variant="compacta"] .story-fgroup h3 { font-size: 13px; margin-bottom: 4px; }
[data-story-variant="compacta"] .story-fgroup-list li { font-size: 11px; }
[data-story-variant="compacta"] .story-scene-row { margin-bottom: 10px; }
[data-story-variant="compacta"] .story-scene-card { padding: 8px 12px; }
[data-story-variant="compacta"] .story-scene-card h3 { font-size: 13px; }
[data-story-variant="compacta"] .story-scene-card p { font-size: 11.5px; }
[data-story-variant="compacta"] .story-feature-strip { padding: 14px 8px; }
@media (max-width: 900px) { [data-story-variant="compacta"] .story-fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { [data-story-variant="compacta"] .story-fgrid { grid-template-columns: 1fr; } }

/* "Càlida" — mateix esperit que el variant "Benestar" de la landing:
   accents verds/taronja, cantonades més arrodonides, sensació més
   propera i familiar. */
[data-story-variant="calida"] .story-hero {
  background:
    radial-gradient(ellipse 900px 500px at 20% -10%, rgba(124,185,60,.14), transparent 60%),
    radial-gradient(ellipse 900px 500px at 85% 110%, rgba(252,163,17,.16), transparent 60%),
    var(--bg);
}
[data-story-variant="calida"] .eyebrow { color: var(--green-dark); }
[data-story-variant="calida"] .story-fgroup,
[data-story-variant="calida"] .story-scene-card,
[data-story-variant="calida"] .story-stat-card,
[data-story-variant="calida"] .story-trust-card,
[data-story-variant="calida"] .story-plan { border-radius: 22px; }
[data-story-variant="calida"] .story-dot { background: var(--green); }
[data-story-variant="calida"] .story-plan-premium { border-color: var(--orange); }
[data-story-variant="calida"] .story-plan-premium .story-plan-price { color: var(--orange-dark); }
[data-story-variant="calida"] .story-plan-premium .story-plan-badge { color: var(--orange-dark); border-color: var(--orange); }

/* "Professional" — to seriós: blau dominant, eyebrows en monospace,
   cantonades poc arrodonides, vores marcades en lloc de degradats. */
[data-story-variant="professional"] .story-hero { background: var(--paper); border-bottom: 1px solid var(--line); }
[data-story-variant="professional"] .eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-dark);
}
[data-story-variant="professional"] .story-fgroup,
[data-story-variant="professional"] .story-scene-card,
[data-story-variant="professional"] .story-stat-card,
[data-story-variant="professional"] .story-trust-card,
[data-story-variant="professional"] .story-plan { border-radius: 6px; }
[data-story-variant="professional"] .story-dot { background: var(--blue); }
[data-story-variant="professional"] .story-fgroup-list li::before,
[data-story-variant="professional"] .story-feature-list li::before,
[data-story-variant="professional"] .story-trust-list li::before { color: var(--blue); }
[data-story-variant="professional"] .story-plan-premium { border-color: var(--blue); }
[data-story-variant="professional"] .story-plan-premium .story-plan-price { color: var(--blue-dark); }
[data-story-variant="professional"] .story-plan-premium .story-plan-badge { color: var(--blue-dark); border-color: var(--blue); }

/* "Editorial" — a l'estil d'una revista: titulars més grans, més
   espai entre línies, lede més ample i destacat. */
[data-story-variant="editorial"] .story-hero h1 { font-size: 38px; line-height: 1.15; max-width: 720px; }
[data-story-variant="editorial"] .story-lede { font-size: 17px; line-height: 1.6; max-width: 680px; }
[data-story-variant="editorial"] .story-head h2 { font-size: 28px; }
[data-story-variant="editorial"] .story-scene-card h3 { font-size: 17px; }
[data-story-variant="editorial"] .story-scene-card p { font-size: 14px; line-height: 1.55; }
[data-story-variant="editorial"] .story-final h2 { font-size: 30px; }
[data-story-variant="editorial"] .eyebrow { font-size: 13px; }

/* "Moderna" — targetes amb ombra i elevació, radi generós, icones en
   color ple: estètica més "producte SaaS". */
[data-story-variant="moderna"] .story-fgroup,
[data-story-variant="moderna"] .story-scene-card,
[data-story-variant="moderna"] .story-stat-card,
[data-story-variant="moderna"] .story-trust-card,
[data-story-variant="moderna"] .story-plan {
  border: none; border-radius: 18px; box-shadow: 0 2px 10px rgba(30,42,50,.06), 0 1px 2px rgba(30,42,50,.04);
}
[data-story-variant="moderna"] .story-plan-premium { box-shadow: 0 8px 24px rgba(22,169,139,.18); }
[data-story-variant="moderna"] .story-ficon { border-radius: 14px; box-shadow: 0 2px 8px rgba(30,42,50,.08); }
[data-story-variant="moderna"] .story-cal-day { border-radius: 12px; }
[data-story-variant="moderna"] .story-innav a {
  background: var(--paper); border-radius: 999px; padding: 6px 12px; box-shadow: 0 1px 3px rgba(30,42,50,.08);
}

/* BUTTONS */
.btn {
  font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 15px;
  padding: 14px 22px; border-radius: 10px; border: none; cursor: pointer;
  text-align: center; transition: transform .08s ease, opacity .15s ease;
  width: 100%;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--blue-dark); }
.btn-secondary { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); }
.btn-secondary:hover:not(:disabled) { background: #eaf3fb; }
.btn-child { background: var(--teal); color: #fff; }
.btn-child:hover:not(:disabled) { background: var(--teal-dark); }
.btn-ghost { background: var(--paper); color: var(--ink-soft); border: 1.5px solid var(--line); }
.btn-link { background: none; border: none; color: var(--blue-dark); font-family: 'Inter'; font-weight: 600; cursor: pointer; font-size: 14px; padding: 6px; width: auto; }

/* Filtre de l'historial de documents (v17) — botons tipus "pill" */
.history-filter-btn { background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-family: 'Inter'; font-weight: 600; cursor: pointer; font-size: 13px; padding: 5px 12px; width: auto; }
.history-filter-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Pestanyes Convenis/Tiquets a l'historial de documents (v18) — separen
   completament els dos tipus de document; el filtre "pill" de sobre
   (tots/meus/de l'altre progenitor) s'aplica DINS de la pestanya activa. */
.history-doctype-tabs { display: flex; gap: 0; border-bottom: 1.5px solid var(--line); margin-bottom: 10px; }
.history-doctype-tab {
  flex: 1; background: none; border: none; border-bottom: 2.5px solid transparent; color: var(--ink-faint);
  font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 13.5px; padding: 8px 4px; cursor: pointer;
}
.history-doctype-tab.active { color: var(--teal-dark); border-bottom-color: var(--teal); }

/* v59.6/v59.7 — subpestanyes "Pendents"/"Finalitzats" DINS de "Tiquets i
   rebuts" i "Despeses amb pressupost" (petició de Joan) — mateix estil
   "pill" que .history-filter-btn/.report-kind-tab, però amagades per
   defecte (`display:none` a l'HTML) a "Convenis", veure setHistoryDocType()
   a app.js. */
.history-status-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.history-status-tab {
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink-soft);
  font-family: 'Inter'; font-weight: 600; cursor: pointer; font-size: 13px; padding: 5px 12px; width: auto;
}
.history-status-tab.active { background: var(--teal); border-color: var(--teal); color: #fff; }

/* Resums i informes periòdics (v30) — selector de tipus (resum/informe) i
   de període (setmanal/mensual/anual), mateix estil "pill" que el filtre
   de l'historial (.history-filter-btn) però agrupat en una sola franja
   contínua (com les pestanyes Convenis/Tiquets), perquè quedi clar que
   només una opció de cada grup pot estar activa alhora. */
.report-kind-tabs, .report-period-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.report-kind-tab, .report-period-tab {
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink-soft);
  font-family: 'Inter'; font-weight: 600; cursor: pointer; font-size: 13px; padding: 5px 12px; width: auto;
}
.report-kind-tab.active, .report-period-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Import/concepte detectats en un tiquet (v18) */
.history-ticket-meta { font-size: 13px; color: var(--ink); margin: 4px 0; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.history-ticket-meta .amount { color: var(--teal-dark); }
.history-ticket-meta .none { color: var(--ink-faint); font-weight: 500; font-style: italic; }

/* Resposta a tiquets: pagar/rebutjar/consultar (v26) */
.status-badge { display: inline-block; font-family: 'Inter'; font-weight: 700; font-size: 11px; padding: 3px 9px; border-radius: 999px; letter-spacing: .2px; }
.status-badge.status-pending { background: #FEF1DC; color: var(--orange-dark); }
.status-badge.status-paid { background: #E1F5EE; color: var(--teal-dark); }
.status-badge.status-rejected { background: #FBEAEA; color: var(--red); }
.status-badge.status-query { background: #E6F1FB; color: var(--blue-dark); }
/* v27: "pagament_pendent" (s'ha marcat com pagat, a l'espera que qui ha
   pujat el tiquet ho confirmi) i "reclamat" (qui ha pujat el tiquet diu
   que no ha rebut l'import — el tiquet torna a quedar obert). */
.status-badge.status-payment-pending { background: #FEF1DC; color: var(--orange-dark); }
.status-badge.status-claimed { background: #FBEAEA; color: var(--red); }
/* v59.9: "eliminat" (qui ha pujat el tiquet/despesa l'ha marcat com a
   eliminat perquè s'havia equivocat) — gris neutre, deliberadament
   diferent del vermell de "rebutjat": no és una disputa entre
   progenitors, és una correcció d'un error propi. */
.status-badge.status-deleted { background: #ECECEE; color: #5A5A66; }

.badge-new { display: inline-block; background: var(--orange); color: #fff; font-family: 'Inter'; font-weight: 700; font-size: 10px; padding: 2px 8px; border-radius: 999px; letter-spacing: .3px; margin-right: 6px; }

/* v66 — "vigent"/"NO vigent" a l'historial de convenis (petició de
   Joan: l'últim conveni pujat per la unitat familiar és el "vigent",
   la resta queden marcats "NO vigent") i indicador de com s'ha generat
   una resposta a "Consultar" (IA de CoPaternia vs. cerca gratuïta). */
.badge-vigent { display: inline-block; font-family: 'Inter'; font-weight: 700; font-size: 10px; padding: 2px 8px; border-radius: 999px; letter-spacing: .3px; }
.badge-vigent-yes { background: #E6F4EA; color: #1E7A34; }
.badge-vigent-no { background: #ECECEE; color: #5A5A66; }
.answer-mode-badge { display: inline-block; font-family: 'Inter'; font-weight: 700; font-size: 9px; padding: 1px 6px; border-radius: 999px; letter-spacing: .3px; margin-left: 6px; vertical-align: middle; }
.answer-mode-ia { background: #EDE7F9; color: #5B3EAD; }
.answer-mode-cerca { background: #ECECEE; color: #5A5A66; }

.ticket-waiting { font-style: italic; }

.ticket-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.btn-small { width: auto; padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
button.btn-small.ticket-action-btn { background: var(--paper); border: 1.5px solid var(--line); color: var(--ink-soft); font-family: 'Inter'; font-weight: 600; cursor: pointer; }
button.btn-small.ticket-action-btn:hover { border-color: var(--blue); color: var(--blue-dark); }

.ticket-action-form { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 6px 0 10px; text-align: left; }
.ticket-action-form .field { margin-bottom: 10px; }
.ticket-action-form textarea { width: 100%; font-family: 'Inter'; font-size: 14px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 8px; resize: vertical; background: var(--paper); color: var(--ink); }
.ticket-radio-option { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); margin: 4px 0; cursor: pointer; }
.ticket-radio-option input { margin-right: 6px; }
.ticket-action-form input[type="file"] { font-size: 13px; margin-top: 4px; }
.ticket-action-banner:empty { display: none; }
.ticket-action-banner .banner { margin: 8px 0; padding: 8px 10px; font-size: 13px; }

.ticket-response-info { margin: 4px 0 2px; }
.ticket-response-info .step-lede { margin: 2px 0; }
/* v26.1: historial complet (HISTORY pot tenir diverses files — p. ex.
   consultes repetides abans d'una decisió final) — cada fila amb el seu
   propi badge, separada per una vora fina de la següent. */
.ticket-history-row { padding: 6px 0; }
.ticket-history-row + .ticket-history-row { border-top: 1px dashed var(--line); }
.ticket-history-row .status-badge { margin-bottom: 2px; }

/* v27: resposta a una consulta sobre el conveni — es manté el format amb
   salts de línia (paràgraf del missatge + fragments citats), tant a
   l'historial com al banner que es mostra just després d'enviar la
   consulta (veure showQueryAnswerBanner() a app.js). */
.ticket-answer-text { white-space: pre-line; }

/* v27: un cop l'altre progenitor marca un tiquet com pagat, QUI L'HA
   PUJAT ha de confirmar que ha rebut l'import o reclamar que no l'ha
   rebut — mateix estil que .ticket-actions/.ticket-action-btn, amb el
   botó de confirmar en verd i el de reclamar en vermell perquè es
   distingeixin d'un cop d'ull. */
.ticket-confirm-area { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
button.btn-small.ticket-confirm-btn { font-family: 'Inter'; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; }
button.btn-small.ticket-confirm-btn[data-action="confirmar_pagament"] { background: #E1F5EE; color: var(--teal-dark); border-color: var(--teal); }
button.btn-small.ticket-confirm-btn[data-action="confirmar_pagament"]:hover { background: var(--teal); color: #fff; }
button.btn-small.ticket-confirm-btn[data-action="reclamar_pagament"] { background: #FBEAEA; color: var(--red); border-color: var(--red); }
button.btn-small.ticket-confirm-btn[data-action="reclamar_pagament"]:hover { background: var(--red); color: #fff; }

/* Comptador d'imports pagats/pendents — setmana/mes/any (v26) */
.ticket-totals { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.ticket-totals-heading { font-family: 'Inter'; font-weight: 700; font-size: 12.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
/* v59.17 — petició de Joan: "quiero separado los importes de los tickets
   de los importes de las distintas pensiones [...] en el panel de
   gastos". buildSeparatedTotalsHtml() (app.js) ara pinta dos blocs dins
   del mateix recuadre (.ticket-totals) — tiquets sempre, pensions NOMÉS
   si la família en té alguna de configurada (mai un bloc buit) — separats
   per una línia discontínua, mai barrejats en els mateixos totals. */
.totals-block + .totals-block { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.ticket-totals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ticket-totals-col { text-align: left; }
.ticket-totals-period { font-family: 'Inter'; font-weight: 700; font-size: 12px; color: var(--ink); margin-bottom: 4px; }
/* v58 — cada període es desglossa ara en 2 direccions ("Deus a..." /
   "...et deu"), cadascuna amb el seu propi títol i línies pagat/pendent. */
.ticket-totals-direction { margin-bottom: 6px; }
.ticket-totals-direction:last-child { margin-bottom: 0; }
.ticket-totals-direction-title { font-family: 'Inter'; font-weight: 600; font-size: 11px; color: var(--ink-soft); margin-bottom: 2px; }
.ticket-totals-line { display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; padding: 1px 0; }
.ticket-totals-line.paid { color: var(--teal-dark); }
.ticket-totals-line.pending { color: var(--orange-dark); }
@media (max-width: 460px) {
  .ticket-totals-grid { grid-template-columns: 1fr; }
}

/* ============================================================ */
/* v59.11 — 7 estils MÉS del recuadre d'imports (a més de "table",   */
/* l'original de dalt) — petició de Joan: "genera 4 maneres          */
/* diferents de visualització del recuadre d'imports [...] 4 sense   */
/* gràfics i 4 amb gràfics". Colors semàntics compartits per tots:   */
/* vermell/taronja ("dec jo" / pendent) i verd/teal ("em deuen" /    */
/* pagat) — mateix criteri de color que ja fan servir .ticket-totals-*/
/* line.paid/.pending de dalt. Cap d'aquests estils necessita cap    */
/* llibreria de gràfics: "donut" fa servir conic-gradient i "bars"/  */
/* "comparison"/"gauge" fan servir amplades/alçades/posicions en %.  */
/* ============================================================ */

/* 2/8 "cards" — targeta per període amb el saldo net com a titular. */
.totals-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.totals-card { border-radius: 10px; padding: 10px 10px 8px; text-align: center; background: var(--paper); border: 1px solid var(--line); }
.totals-card-period { font-family: 'Inter'; font-weight: 700; font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .3px; }
.totals-card-net { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 16px; margin: 4px 0 2px; }
.totals-card-secondary { font-size: 10.5px; color: var(--ink-faint); }
.totals-card.is-i-owe { background: #FBEAEA; border-color: var(--red); }
.totals-card.is-i-owe .totals-card-net { color: var(--red); }
.totals-card.is-owed-to-me { background: #E1F5EE; border-color: var(--teal); }
.totals-card.is-owed-to-me .totals-card-net { color: var(--teal-dark); }
.totals-card.is-balanced .totals-card-net { color: var(--ink-soft); }
@media (max-width: 460px) { .totals-cards-grid { grid-template-columns: 1fr; } }

/* 3/8 "compact" — una sola línia amb el saldo net del mes. */
.totals-compact-line { display: flex; align-items: baseline; gap: 6px; font-size: 13px; padding: 2px 0; }
.totals-compact-period { font-weight: 600; color: var(--ink-soft); }
.totals-compact-net { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 14px; }
.totals-compact-line.is-i-owe .totals-compact-net { color: var(--red); }
.totals-compact-line.is-owed-to-me .totals-compact-net { color: var(--teal-dark); }
.totals-compact-line.is-balanced .totals-compact-net { color: var(--ink-soft); }

/* 4/8 "pending-first" — el pendent en primer pla, el pagat en segon terme. */
.totals-pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.totals-pf-col { text-align: left; }
.totals-pf-period { font-family: 'Inter'; font-weight: 700; font-size: 12px; color: var(--ink); margin-bottom: 4px; }
.totals-pf-row { margin-bottom: 6px; }
.totals-pf-row:last-child { margin-bottom: 0; }
.totals-pf-label { font-size: 10.5px; font-weight: 600; color: var(--ink-soft); }
.totals-pf-pending { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 15px; }
.totals-pf-row.is-i-owe .totals-pf-pending { color: var(--red); }
.totals-pf-row.is-owed-to-me .totals-pf-pending { color: var(--teal-dark); }
.totals-pf-paid { font-size: 10px; color: var(--ink-faint); }
@media (max-width: 460px) { .totals-pf-grid { grid-template-columns: 1fr; } }

/* 5/8 "bars" — barra de progrés pagat/pendent per direcció i període. */
.totals-bars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.totals-bars-period { font-family: 'Inter'; font-weight: 700; font-size: 12px; color: var(--ink); margin-bottom: 4px; }
.totals-bar-row { margin-bottom: 8px; }
.totals-bar-row:last-child { margin-bottom: 0; }
.totals-bar-title { font-size: 10.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 2px; }
.totals-bar-track { height: 7px; border-radius: 4px; background: #FBEAEA; overflow: hidden; }
.totals-bar-fill-paid { height: 100%; background: var(--teal-dark); border-radius: 4px 0 0 4px; }
.totals-bar-legend { display: flex; justify-content: space-between; font-size: 9.5px; margin-top: 2px; }
.totals-bar-legend .is-paid { color: var(--teal-dark); }
.totals-bar-legend .is-pending { color: var(--red); }
@media (max-width: 460px) { .totals-bars-grid { grid-template-columns: 1fr; } }

/* 6/8 "donut" — anell pagat/pendent del moviment total, per període. */
.totals-donut-grid { display: flex; justify-content: space-around; gap: 8px; flex-wrap: wrap; }
.totals-donut-col { text-align: center; }
.totals-donut-ring { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.totals-donut-hole { width: 44px; height: 44px; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; }
.totals-donut-hole span { font-size: 9.5px; font-weight: 700; color: var(--ink); }
.totals-donut-period { font-size: 10.5px; font-weight: 600; color: var(--ink-soft); margin-top: 4px; }
.totals-donut-legend { display: flex; justify-content: center; gap: 14px; font-size: 10.5px; margin-top: 8px; }
.totals-donut-legend .is-paid { color: var(--teal-dark); }
.totals-donut-legend .is-pending { color: var(--orange-dark); }

/* 7/8 "comparison" — comparativa del pendent total entre setmana/mes/any. */
.totals-comparison-title { font-family: 'Inter'; font-weight: 700; font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.totals-comparison-grid { display: flex; align-items: flex-end; gap: 14px; height: 90px; }
.totals-comparison-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.totals-comparison-value { font-size: 10px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.totals-comparison-bar-wrap { width: 100%; max-width: 44px; height: 56px; display: flex; align-items: flex-end; }
.totals-comparison-bar { width: 100%; background: var(--orange-dark); border-radius: 5px 5px 0 0; min-height: 4px; }
.totals-comparison-label { font-size: 10.5px; color: var(--ink-soft); margin-top: 4px; }

/* 8/8 "gauge" — termòmetre del saldo net del mes, vermell (dec jo) -> verd (em deuen). */
.totals-gauge-title { font-family: 'Inter'; font-weight: 700; font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.totals-gauge-track {
  position: relative; height: 10px; border-radius: 6px; margin: 6px 0 4px;
  background: linear-gradient(90deg, var(--red), var(--bg) 50%, var(--teal-dark));
}
.totals-gauge-marker {
  position: absolute; top: -3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); border: 2.5px solid var(--ink); transform: translateX(-50%);
  box-shadow: 0 1px 3px rgba(30,42,50,.25);
}
.totals-gauge-ends { display: flex; justify-content: space-between; font-size: 10px; }
.totals-gauge-ends .is-i-owe { color: var(--red); }
.totals-gauge-ends .is-owed-to-me { color: var(--teal-dark); }
.totals-gauge-net { text-align: center; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 14px; margin-top: 6px; }
.totals-gauge-net.is-i-owe { color: var(--red); }
.totals-gauge-net.is-owed-to-me { color: var(--teal-dark); }
.totals-gauge-net.is-balanced { color: var(--ink-soft); }

/* ============================================================ */
/* Recuadre fixe d'"Imports pagats i pendents" (v59) — petició de */
/* Joan: "ha d'estar també com un recuadre fixe entre el logo i   */
/* el mosaic d'eines." Mateix aspecte que el comptador ja         */
/* existent dins "Tiquets" (.ticket-totals, reaprofitat tal qual) */
/* — només hi canvia la posició/marge, ja que aquí viu fora de    */
/* .account-layout, a l'amplada completa de la fitxa d'usuari.    */
/* ============================================================ */
.account-totals-fixed { margin: 0 0 16px; }

/* CARD / FORM CONTAINER */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; margin: 24px auto; max-width: 520px;
}
.step-title { font-size: 22px; }
.step-lede { font-size: 14px; margin-top: 8px; }

.tag-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; }
.tag { font-family: 'Inter'; font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: 20px; }
.tag-mom { background: #E6F1FB; color: var(--blue-dark); }
.tag-dad { background: #FEF1DC; color: var(--orange-dark); }
.tag-shared { background: #E1F5EE; color: var(--teal-dark); }

/* FORM FIELDS */
.field { margin-bottom: 18px; text-align: left; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.field .hint { font-size: 12px; color: var(--ink-faint); margin-top: 5px; }
.field .error { font-size: 12px; color: var(--red); margin-top: 5px; display: none; }
.field.has-error .error { display: block; }
.field.has-error input { border-color: var(--red); }
.field.is-valid input { border-color: var(--teal); }

.input-field {
  width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-size: 14px; color: var(--ink); background: var(--bg); font-family: 'Inter';
}
.input-field:focus {
  outline: none; border-color: var(--teal); background: var(--paper);
  box-shadow: 0 0 0 3px rgba(22,169,139,.14);
}
.input-field[disabled] { color: var(--ink-faint); background: #F1EFE8; cursor: not-allowed; }

.input-status { font-size: 12px; margin-top: 5px; }
.input-status.ok { color: var(--teal-dark); }
.input-status.bad { color: var(--red); }
.input-status.checking { color: var(--ink-faint); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .two-col { grid-template-columns: 1fr; } }

/* CHILDREN LIST */
.child-row { display: flex; gap: 8px; margin-bottom: 10px; }
.child-row input { flex: 1; }
.child-remove {
  flex: none; width: 40px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--paper); color: var(--red); font-size: 18px; cursor: pointer; line-height: 1;
}
.add-child-btn {
  background: var(--bg); border: 1.5px dashed var(--ink-faint); color: var(--ink-soft);
  border-radius: 10px; padding: 10px; width: 100%; cursor: pointer; font-family: 'Inter'; font-weight: 600; font-size: 13px;
}
.add-child-btn:hover { border-color: var(--teal); color: var(--teal-dark); }

/* FAMILY CODE BADGE */
.family-code-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 500;
  letter-spacing: .04em; color: var(--blue-dark); background: #EAF3FB;
  border: 1.5px dashed var(--blue); border-radius: 10px; padding: 16px; text-align: center;
  margin: 18px 0;
}

.share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.share-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--paper);
  cursor: pointer; font-family: 'Inter'; font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
}
.share-btn:hover { border-color: var(--teal); color: var(--teal-dark); }
.share-btn .icon { font-size: 20px; }

.success-icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--grad);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
  color: #fff; font-size: 30px; font-weight: 700;
}

.progress-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 22px; }
.progress-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.progress-dots span.active { background: var(--teal); }

.banner {
  border-radius: 10px; padding: 14px 16px; font-size: 13.5px; margin-bottom: 20px; text-align: left;
}
.banner.info { background: #E6F1FB; color: var(--blue-dark); }
.banner.error { background: #FBEAEA; color: var(--red); }
.banner.warn { background: #FEF1DC; color: var(--orange-dark); }

.view { display: none; }
.view.active { display: block; }

.footer-note {
  text-align: center; font-size: 12px; color: var(--ink-faint); padding: 24px; font-family: 'JetBrains Mono', monospace;
}

.back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 18px; }

/* FITXA D'USUARI — v25: petició de Joan — l'àrea central ja només conté
   "Eines" (pujar conveni/tiquets) i l'historial; les dades personals han
   passat a un pop-up (.data-modal, més avall — panell fins v43, modal des
   de v44), obert des del botó "Les meves dades" dins "Configuració". */
.wrap-wide { max-width: 900px; }
.account-layout { display: block; max-width: 620px; margin: 0 auto; }

.tools-sidebar {
  width: 100%;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; text-align: left; margin: 24px 0;
}
.tools-sidebar h3 {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-dark);
  font-family: 'JetBrains Mono', monospace; font-weight: 500; margin-bottom: 16px;
}
.tools-block h4 { font-size: 15px; margin-bottom: 6px; }
.tools-block .step-lede { font-size: 12.5px; margin-bottom: 14px; }
.tools-block[hidden] { display: none !important; }

/* Mosaic d'"Eines" (v31) — petició de Joan: cada funció és un botó
   quadrat, en mosaic, al centre de la web. Quadrats de veritat via
   aspect-ratio (no una alçada fixa en px), graella responsiva que es
   reparteix sola segons l'amplada disponible. */
.tools-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  max-width: 460px;
  margin: 0 auto 6px;
}
/* Igual que .tools-block[hidden] més amunt: `.tools-menu` i `[hidden]`
   tenen la MATEIXA especificitat CSS, i com que `.tools-menu` és una
   regla d'autor (mentre que `[hidden]` és de l'agent d'usuari), guanyaria
   sempre encara que estigués abans al full d'estils — cal la regla
   explícita perquè amagar el mosaic per JS (`menu.hidden = true`)
   funcioni de veritat (mateix bug ja après amb el visor de document, v27). */
.tools-menu[hidden] { display: none !important; }
/* v51.2 — mateix escarment que la regla de dalt: applyToolsMenuPrefs()
   a app.js amaga una eina concreta del mosaic fent `tile.hidden = true`
   (personalització del mosaic, petició de Joan: "que el usuari pugui
   determinar quines funcions vol que apareguin o no en el mosaic
   central"), però `.tools-tile { display: flex; ... }` de sota és una
   regla d'autor que sempre guanya a l'estil `[hidden]` del navegador
   (per defecte `display: none`), independentment de l'ordre al full
   d'estils — calia aquesta regla explícita perquè amagar-ne UNA sola
   funcioni de veritat. */
.tools-tile[hidden] { display: none !important; }
.tools-tile {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink);
  text-align: center;
  transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.tools-tile:hover, .tools-tile:focus-visible {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(36, 137, 211, .14);
  outline: none;
}
.tools-tile-icon { font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; }
/* v51.3 — petició de Joan: "els icones han de tenir un dibuix molt més
   minimalista." Substitueix els emojis de colors del mosaic per SVGs
   inline de línia fina, un sol color (`stroke="currentColor"`, hereta
   `color: var(--ink)` de `.tools-tile`) — sense cap dependència externa. */
.tools-tile-icon svg { width: 30px; height: 30px; }
.tools-tile-label { font-size: 12.5px; font-weight: 600; line-height: 1.25; font-family: 'Inter'; }

/* v59.5 — "Interfície": 4 disposicions D'INFORMACIÓ diferents per al
   mateix mosaic d'Eines, triada per l'administrador des de /admin (mai
   temes visuals/skins — eliminats explícitament a la v59) i aplicada per
   igual a TOTS els usuaris de la plataforma. `applyUiLayout()` a app.js
   només posa `data-layout` a `#tools-menu` — el DOM de cada peça
   (`.tools-tile` > `.tools-tile-icon` + `.tools-tile-label`) és sempre el
   mateix, així que les 4 disposicions són 100% CSS, mai una segona
   plantilla HTML a mantenir en paral·lel. Sense `data-layout` (o amb
   data-layout="cards"), es manté exactament el disseny ja existent
   (les regles `.tools-menu`/`.tools-tile` de dalt) — la disposició
   "Targetes" NO és una regla nova, és la de sempre.

   "Llista": files senceres, icona a l'esquerra i etiqueta a la dreta,
   una sota l'altra — la disposició més compacta en alçada de tile
   individual, pensada per llegir ràpid els noms de totes les eines. */
.tools-menu[data-layout="list"] {
  grid-template-columns: 1fr;
  max-width: 420px;
  gap: 6px;
}
.tools-menu[data-layout="list"] .tools-tile {
  aspect-ratio: auto;
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  padding: 10px 14px;
  gap: 14px;
}
.tools-menu[data-layout="list"] .tools-tile-icon,
.tools-menu[data-layout="list"] .tools-tile-icon svg { width: 22px; height: 22px; font-size: 22px; flex-shrink: 0; }
.tools-menu[data-layout="list"] .tools-tile-label { font-size: 13.5px; }

/* "Taula compacta": moltes peces petites de cop, graella densa amb el
   mínim de marges — pensada per veure TOTES les eines sense haver de fer
   scroll, sacrificant una mica de llegibilitat de la icona. */
.tools-menu[data-layout="table"] {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  max-width: 640px;
  gap: 5px;
}
.tools-menu[data-layout="table"] .tools-tile {
  padding: 6px 4px;
  gap: 4px;
  border-radius: 6px;
}
.tools-menu[data-layout="table"] .tools-tile-icon,
.tools-menu[data-layout="table"] .tools-tile-icon svg { width: 18px; height: 18px; font-size: 18px; }
.tools-menu[data-layout="table"] .tools-tile-label { font-size: 10px; line-height: 1.15; }

/* "Panell resum": les 2 eines més utilitzades (Conveni i Tiquets, sempre
   les 2 primeres del mosaic — mai es reordena res, només es destaquen)
   ocupen una franja ampla a dalt de tot, tipus banner de dashboard; la
   resta de peces es mantenen a sota en una graella normal — mateix
   criteri que la resta del mosaic, "mai s'inventa" cap xifra/estadística
   destacada, només es reorganitza l'espai. */
.tools-menu[data-layout="dashboard"] {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  max-width: 560px;
}
.tools-menu[data-layout="dashboard"] .tools-tile:nth-child(-n+2) {
  grid-column: span 2;
  aspect-ratio: auto;
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  padding: 16px 18px;
  gap: 16px;
  background: var(--bg);
  border-width: 2px;
}
.tools-menu[data-layout="dashboard"] .tools-tile:nth-child(-n+2) .tools-tile-icon,
.tools-menu[data-layout="dashboard"] .tools-tile:nth-child(-n+2) .tools-tile-icon svg { width: 30px; height: 30px; }
.tools-menu[data-layout="dashboard"] .tools-tile:nth-child(-n+2) .tools-tile-label { font-size: 15px; }

.tools-back-btn { display: inline-block; margin-bottom: 16px; }
.tools-sidebar input[type="file"] {
  width: 100%; font-size: 12.5px; padding: 10px; border: 1.5px dashed var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink-soft); font-family: 'Inter';
}
.tools-sidebar .field { margin-bottom: 14px; }
.tools-sidebar .btn { width: 100%; margin-top: 4px; }

/* .account-card ara només s'utilitza dins de .data-modal (pop-up de
   dades personals, v25/v44) — estil de targeta normal; l'aspecte de
   "sense marc" quan és dins del pop-up ve donat per la regla
   ".data-modal .account-card" més avall. */
.account-card { max-width: none; margin: 24px 0; }

/* ============================================================ */
/* CALENDARI DE CUSTÒDIA (v20, v22) — setmana / mes / any        */
/* ============================================================ */
:root {
  /* Colors "-dark" (no els base --blue/--orange) perquè, un cop la
     caixeta d'un dia es pinta amb un fons SÒLID d'aquest color (petició
     explícita de Joan: "cada casella ha de tenir el color del progenitor
     assignat", no només una vora o un to pastel), el text en blanc a
     sobre hi tingui prou contrast. Un mateix parell de tokens s'usa a tot
     arreu — llegenda, caselles de setmana/mes i quadradets de l'any —
     perquè el color d'un progenitor sigui sempre el mateix, es miri des
     d'on es miri.
     v45 — petició de Joan: "cada usuari ha de poder triar el color...
     independentment del altre progenitor". Els valors d'aquí NOMÉS són
     el color de fàbrica: applyCalendarColors() a app.js els sobreescriu
     (document.documentElement.style.setProperty(...)) amb els colors
     triats per CADA progenitor (desats a localStorage, per rol PA/PB) —
     mai el mateix color "PA"/"PB" objectiu, sinó "el meu"/"de l'altre"
     des del punt de vista de qui ha iniciat sessió en aquest navegador. */
  --cal-pa-strong: var(--blue-dark);
  --cal-pb-strong: var(--orange-dark);
  /* v51.2 — petició de Joan: "en cas de que el usuari esculli la opció
     de alt contrast... les lletres d'aquest mode han de ser del color
     contrari al seleccionat." Valor de fàbrica blanc (idèntic al
     comportament de sempre) — applyCalendarColors() a app.js NOMÉS
     recalcula aquestes dues variables (via contrastTextColor(), WCAG
     real) quan l'alt contrast està actiu; la resta del temps es queden
     en aquest blanc fix, exactament com abans de la v51.2. */
  --cal-pa-text: #fff;
  --cal-pb-text: #fff;
  --cal-none-bg: var(--bg);
  /* v22: casella d'un dia amb calendari desat però el nom de
     CALEN_PROGENITOR no coincideix amb cap dels dos progenitors
     registrats — abans quedava indistingible d'un dia sense calendari
     ("neutre"), cosa que amagava un problema real de dades. Ara es marca
     amb aquest gris ratllat perquè sigui evident que hi ha un
     desajust a revisar, no que falti informació. */
  --cal-unknown-strong: var(--ink-faint);
}

.calendar-card { max-width: none; text-align: left; }

.calendar-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.calendar-header .step-title { margin-top: 4px; }

.calendar-legend { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 6px; }
.calendar-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.calendar-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.calendar-legend-dot.cal-pa { background: var(--cal-pa-strong); }
.calendar-legend-dot.cal-pb { background: var(--cal-pb-strong); }
.calendar-legend-dot.cal-unknown {
  background: repeating-linear-gradient(45deg, var(--cal-unknown-strong), var(--cal-unknown-strong) 2px, rgba(255,255,255,.35) 2px, rgba(255,255,255,.35) 4px);
}

.calendar-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.calendar-view-tabs { display: flex; gap: 6px; background: var(--bg); border-radius: 10px; padding: 4px; }
.calendar-view-tab {
  background: none; border: none; border-radius: 8px; color: var(--ink-soft); cursor: pointer;
  font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 13px; padding: 7px 14px;
}
.calendar-view-tab.active { background: var(--paper); color: var(--teal-dark); box-shadow: 0 1px 2px rgba(30,42,50,.08); }
.calendar-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.calendar-nav .btn-link { padding: 6px 8px; }
#btn-calendar-today { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 12px; letter-spacing: .04em; }

/* Setmana: 7 columnes altes amb el detall del dia */
.calendar-week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.calendar-day-week {
  border-radius: 10px; border: 1.5px solid var(--line); background: var(--cal-none-bg);
  padding: 10px 8px; min-height: 110px; display: flex; flex-direction: column; gap: 4px;
}
/* Fons SÒLID del color del progenitor assignat (no un simple to pastel) —
   la vora és del mateix color perquè la casella llegeixi com un sol bloc
   de color, i tot el text interior passa a blanc perquè hi contrasti. */
.calendar-day-week.cal-pa { background: var(--cal-pa-strong); border-color: var(--cal-pa-strong); }
.calendar-day-week.cal-pb { background: var(--cal-pb-strong); border-color: var(--cal-pb-strong); }
.calendar-day-week.cal-unknown {
  background: repeating-linear-gradient(45deg, var(--cal-unknown-strong), var(--cal-unknown-strong) 6px, rgba(255,255,255,.25) 6px, rgba(255,255,255,.25) 12px);
  border-color: var(--cal-unknown-strong);
}
.calendar-day-week.is-today { box-shadow: 0 0 0 2px var(--teal) inset; }
.calendar-day-weekday { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.calendar-day-num { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 20px; color: var(--ink); }
.calendar-day-progenitor { font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.calendar-day-fase { font-size: 10.5px; color: var(--ink-soft); font-style: italic; }
/* v2.7 — pernocta i intercanvi (hora/lloc) a les caselles del calendari */
.calendar-day-night { font-size: 11px; opacity: .8; margin-top: 2px; }
.calendar-day-exchange { font-size: 11px; font-weight: 700; margin-top: 3px; padding: 1px 5px; border-radius: 6px; background: rgba(255,255,255,.55); display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* v51.2 — el text ja no és sempre blanc: cal-pa/cal-pb fan servir
   --cal-pa-text/--cal-pb-text (recalculades a cada canvi de color,
   veure contrastTextColor() a app.js i el comentari a :root de dalt),
   mentre que cal-unknown es manté en blanc fix (el seu fons,
   --cal-unknown-strong, NO és personalitzable per l'usuari — sempre és
   prou fosc perquè el blanc hi contrasti). Deliberadament color sòlid
   (sense la transparència ".78"/".85" que tenien abans en blanc fix):
   una transparència fixa deixaria de llegir-se si el text calculat
   passa a ser negre sobre un gris clar — la prioritat aquí és que
   sempre hi hagi prou contrast, no la subtilesa visual.
*/
.calendar-day-week.cal-pa .calendar-day-weekday,
.calendar-day-week.cal-pa .calendar-day-num, .calendar-day-week.cal-pa .calendar-day-progenitor,
.calendar-day-week.cal-pa .calendar-day-fase { color: var(--cal-pa-text); }
.calendar-day-week.cal-pb .calendar-day-weekday,
.calendar-day-week.cal-pb .calendar-day-num, .calendar-day-week.cal-pb .calendar-day-progenitor,
.calendar-day-week.cal-pb .calendar-day-fase { color: var(--cal-pb-text); }
.calendar-day-week.cal-unknown .calendar-day-weekday { color: rgba(255,255,255,.78); }
.calendar-day-week.cal-unknown .calendar-day-num, .calendar-day-week.cal-unknown .calendar-day-progenitor { color: #fff; }
.calendar-day-week.cal-unknown .calendar-day-fase { color: rgba(255,255,255,.85); }

/* Mes: graella clàssica 7x setmanes */
.calendar-weekday-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 6px; }
.calendar-weekday-head span {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); text-align: center;
}
.calendar-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.calendar-day-month {
  border-radius: 8px; border: 1.5px solid var(--line); background: var(--cal-none-bg);
  min-height: 58px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.calendar-day-month.cal-pa { background: var(--cal-pa-strong); border-color: var(--cal-pa-strong); }
.calendar-day-month.cal-pb { background: var(--cal-pb-strong); border-color: var(--cal-pb-strong); }
.calendar-day-month.cal-unknown {
  background: repeating-linear-gradient(45deg, var(--cal-unknown-strong), var(--cal-unknown-strong) 5px, rgba(255,255,255,.25) 5px, rgba(255,255,255,.25) 10px);
  border-color: var(--cal-unknown-strong);
}
.calendar-day-month.is-today { box-shadow: 0 0 0 2px var(--teal) inset; }
.calendar-day-month.is-outside { opacity: .35; }
.calendar-day-month .calendar-day-num { font-size: 14px; }
.calendar-day-month .calendar-day-progenitor { font-size: 10px; }
/* v51.2 — mateix criteri que la vista de setmana de dalt: text
   dinàmicament contrastant (--cal-pa-text/--cal-pb-text) en lloc de
   blanc fix; cal-unknown (fons no personalitzable) es manté en blanc. */
.calendar-day-month.cal-pa .calendar-day-num, .calendar-day-month.cal-pa .calendar-day-progenitor { color: var(--cal-pa-text); }
.calendar-day-month.cal-pb .calendar-day-num, .calendar-day-month.cal-pb .calendar-day-progenitor { color: var(--cal-pb-text); }
.calendar-day-month.cal-unknown .calendar-day-num, .calendar-day-month.cal-unknown .calendar-day-progenitor { color: #fff; }

/* Any: 12 mini-mesos amb quadrets diminuts de color */
.calendar-year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.calendar-mini-month {
  border: 1.5px solid var(--line); border-radius: 10px; padding: 12px; background: var(--paper);
  cursor: pointer; transition: border-color .12s ease;
}
.calendar-mini-month:hover { border-color: var(--teal); }
.calendar-mini-month h4 { font-size: 13px; margin-bottom: 8px; text-transform: capitalize; }
.calendar-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calendar-mini-day { aspect-ratio: 1; border-radius: 3px; background: var(--cal-none-bg); }
.calendar-mini-day.cal-pa { background: var(--cal-pa-strong); }
.calendar-mini-day.cal-pb { background: var(--cal-pb-strong); }
.calendar-mini-day.cal-unknown {
  background: repeating-linear-gradient(45deg, var(--cal-unknown-strong), var(--cal-unknown-strong) 2px, rgba(255,255,255,.35) 2px, rgba(255,255,255,.35) 4px);
}
.calendar-mini-day.is-today { box-shadow: 0 0 0 1.5px var(--teal); }
.calendar-mini-day.is-empty { visibility: hidden; }

@media (max-width: 700px) {
  .calendar-week-grid, .calendar-month-grid, .calendar-weekday-head { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .calendar-day-week { min-height: 84px; padding: 6px 5px; }
  .calendar-day-progenitor, .calendar-day-fase { font-size: 10px; }
}

/* ============================================================ */
/* PANELL DEL CALENDARI (v24) — petició de Joan: el calendari ja  */
/* no es mostra sempre a la fitxa de dades; ara viu en un panell  */
/* fix a la dreta, tancat per defecte, que només s'obre si        */
/* l'usuari ho activa explícitament amb la pestanya lateral.      */
/* ============================================================ */
/* v47 — petició de Joan: "les pestanyes dels laterals han de estar com a
   peces del mosaic dins de eines, no com a pestanyes." El disparador del
   calendari ja no és una pestanya fixa (.calendar-toggle-tab, eliminada)
   — ara és una peça normal de .tools-menu/.tools-tile (veure index.html i
   style.css més amunt). El panell/backdrop de sota no canvien de disseny.
   `.tools-tile.drawer-open` no té cap regla pròpia (el JS encara hi
   afegeix/treu la classe, sense efecte visual) — mai calia canviar
   openCalendarDrawer()/closeCalendarDrawer() per no arriscar cap
   regressió al mecanisme d'obertura, només d'on es dispara. */

.calendar-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(30,42,50,.35); z-index: 45;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.calendar-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.calendar-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(560px, 92vw);
  background: var(--bg); box-shadow: -4px 0 24px rgba(30,42,50,.22); z-index: 50;
  transform: translateX(100%); transition: transform .25s ease; overflow-y: auto;
  padding: 26px 22px;
}
.calendar-drawer.open { transform: translateX(0); }
.calendar-drawer-close {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  font-size: 24px; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 6px 10px;
  border-radius: 8px;
}
.calendar-drawer-close:hover { color: var(--ink); background: var(--paper); }
/* Dins del panell, la targeta ja no necessita el seu propi marc/ombra —
   el panell ja fa aquesta funció visualment. */
.calendar-drawer .calendar-card {
  box-shadow: none; border: none; padding: 0; margin: 30px 0 0; max-width: none; text-align: left;
}

@media (max-width: 700px) {
  .calendar-drawer { width: 100vw; padding: 22px 16px; }
}

/* ============================================================ */
/* POP-UP DE DADES PERSONALS (v25, convertit de panell a modal a  */
/* v44) — petició de Joan: "La pestanya 'dades' no ha d'aparèixer */
/* a l'esquerra. Ha de estar incorporada dins la pestanya         */
/* 'configuració' com a botó que obre un pop-up." Ja no és un      */
/* panell fix lateral: reutilitza el modal centrat genèric         */
/* (.document-viewer-backdrop/.document-viewer-modal, definit més  */
/* avall) — mateix patró que .swap-request-modal. Aquí només cal   */
/* desfer el `display:flex` centrat de .document-viewer-body       */
/* (pensat per a imatges/PDF) perquè la fitxa de dades es mostri   */
/* com un formulari normal, i treure el marc/ombra de la targeta   */
/* interior (el modal ja fa aquesta funció visualment).            */
/* ============================================================ */
.data-modal { width: min(560px, 94vw); height: auto; max-height: 86vh; }
.data-modal .document-viewer-body { display: block; padding: 18px 20px; text-align: left; }
.data-modal .account-card {
  box-shadow: none; border: none; padding: 0; margin: 0; max-width: none; text-align: left;
}

/* ============================================================ */
/* VISOR DE DOCUMENT (v27) — modal CENTRAT (a diferència dels     */
/* panells laterals de dades/calendari de dalt): mostra un PDF o  */
/* una imatge directament dins l'app en clicar "Obrir"/"Veure     */
/* justificant" a l'historial. z-index per sobre dels drawers     */
/* (45/50) per si mai queden oberts alhora.                       */
/* ============================================================ */
.document-viewer-backdrop {
  position: fixed; inset: 0; background: rgba(30,42,50,.55); z-index: 60;
}
.document-viewer-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(880px, 94vw); height: min(86vh, 900px);
  background: var(--paper); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(30,42,50,.35);
  z-index: 61; display: flex; flex-direction: column; overflow: hidden;
}
/* L'atribut [hidden] normalment ja posa display:none per si sol, però com
   que la regla de dalt fixa `display: flex` amb la mateixa especificitat,
   cal aquest reforç explícit perquè amagar el modal (JS: modal.hidden =
   true) funcioni de debò — si no, el modal es queda visible/interceptant
   clics tot i tenir l'atribut hidden. */
.document-viewer-backdrop[hidden], .document-viewer-modal[hidden] { display: none !important; }
.document-viewer-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.document-viewer-title { font-family: 'Quicksand', sans-serif; font-weight: 600; color: var(--ink); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-viewer-close {
  background: none; border: none; font-size: 24px; line-height: 1; color: var(--ink-soft);
  cursor: pointer; padding: 4px 10px; border-radius: 8px; flex: 0 0 auto;
}
.document-viewer-close:hover { color: var(--ink); background: var(--bg); }
.document-viewer-body { flex: 1 1 auto; overflow: auto; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.document-viewer-body iframe { width: 100%; height: 100%; border: none; }
.document-viewer-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
.document-viewer-body .step-lede { padding: 24px; text-align: center; }

@media (max-width: 700px) {
  .document-viewer-modal { width: 100vw; height: 100vh; top: 0; left: 0; transform: none; border-radius: 0; }
}

/* ============================================================ */
/* VISOR DE PDF INCORPORAT (v61) — petició de Joan: "hi ha d'haver */
/* un visualitzador de pdf incorporat en la plataforma". Substitueix */
/* l'<iframe> de dalt (v27) per un <canvas> renderitzat amb PDF.js —  */
/* funciona igual a tots els dispositius, amb la seva pròpia barra   */
/* d'eines (pàgina anterior/següent, zoom, descàrrega). Viu dins de   */
/* .document-viewer-body, que ja és `display:flex` centrat: aquí es  */
/* desfà perquè el .pdf-viewer ocupi tot l'espai disponible.          */
/* ============================================================ */
.document-viewer-body .pdf-viewer {
  width: 100%; height: 100%; align-self: stretch;
  display: flex; flex-direction: column;
}
.pdf-viewer-toolbar {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--paper);
  flex: 0 0 auto; flex-wrap: wrap;
}
.pdf-viewer-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
  color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer;
  text-decoration: none; flex: 0 0 auto;
}
.pdf-viewer-btn:hover { background: var(--bg); }
.pdf-viewer-btn:disabled { opacity: .35; cursor: default; }
.pdf-viewer-btn:disabled:hover { background: var(--paper); }
.pdf-viewer-page-indicator, .pdf-viewer-zoom-indicator {
  min-width: 54px; text-align: center; font-size: 13px; color: var(--ink-soft);
  font-family: 'JetBrains Mono', monospace; flex: 0 0 auto;
}
.pdf-viewer-toolbar-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; flex: 0 0 auto; }
.pdf-viewer-download { color: var(--blue); border-color: var(--blue); font-size: 15px; }
.pdf-viewer-download:hover { background: var(--blue); color: #fff; }
.pdf-viewer-canvas-wrap {
  flex: 1 1 auto; overflow: auto; display: flex; align-items: flex-start;
  justify-content: center; padding: 16px; position: relative; background: var(--bg);
}
.pdf-viewer-loading { padding: 24px; color: var(--ink-soft); font-size: 14px; align-self: center; }
.pdf-viewer-canvas { box-shadow: 0 2px 10px rgba(30,42,50,.18); background: #fff; max-width: none; }
.pdf-viewer-canvas[hidden] { display: none; }

@media (max-width: 700px) {
  .pdf-viewer-toolbar { gap: 4px; padding: 6px 8px; }
  .pdf-viewer-btn { min-width: 30px; height: 30px; font-size: 15px; }
  .pdf-viewer-page-indicator, .pdf-viewer-zoom-indicator { min-width: 44px; font-size: 12px; }
  .pdf-viewer-canvas-wrap { padding: 10px; }
}

/* ============================================================ */
/* Sol·licitud de canvi de dia de custòdia (v29) — reutilitza el */
/* mateix modal centrat que el visor de document (backdrop/capçalera), */
/* però el cos és un formulari normal (no una imatge/PDF centrats),    */
/* així que aquí es desfà el `display:flex` centrat de                */
/* .document-viewer-body per a aquest modal en concret.                */
/* ============================================================ */
.swap-request-modal { width: min(480px, 94vw); height: auto; max-height: 86vh; }
.swap-request-modal .document-viewer-body { display: block; padding: 18px 20px; text-align: left; }
.swap-request-modal textarea { width: 100%; font-family: 'Inter'; font-size: 14px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 8px; resize: vertical; background: var(--paper); color: var(--ink); }

/* Botó "🔁" a la casella de la vista de setmana del calendari — obre el
   modal de sol·licitud de canvi per a aquell dia concret. Només es
   mostra a dies en què té sentit demanar-lo (veure canRequestSwap() a
   app.js): en el futur (mai un dia ja passat) i assignats a l'ALTRE
   progenitor (mai el propi dia). */
.calendar-swap-btn {
  align-self: flex-start; margin-top: auto; background: rgba(255,255,255,.28); border: none;
  border-radius: 6px; padding: 2px 6px; font-size: 13px; cursor: pointer; line-height: 1.3;
}
.calendar-day-week:not(.cal-pa):not(.cal-pb):not(.cal-unknown) .calendar-swap-btn { background: var(--bg); }
.calendar-swap-btn:hover { background: rgba(255,255,255,.5); }

/* Sol·licituds de canvi — llista dins del panell del calendari (mateix
   patró visual que .split-item/.history-item). */
.swap-respond-form { margin-top: 8px; }
.swap-respond-form .field { margin-bottom: 8px; }
.swap-respond-form .btn-small { margin-right: 6px; }

/* ============================================================ */
/* Esdeveniments puntuals de calendari (v42) — decisió amb Joan   */
/* via AskUserQuestion: "marcador al dia + llista". Els marcadors */
/* es pinten a les caselles de la vista de setmana (chip amb el   */
/* títol) i de mes (punt petit) — mai a la vista d'any.           */
/* ============================================================ */
.calendar-day-events { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.calendar-event-chip {
  display: block; width: 100%; text-align: left; border: none; border-radius: 6px;
  padding: 2px 6px; font-size: 10.5px; line-height: 1.3; cursor: pointer;
  background: rgba(255,255,255,.35); color: inherit; font-family: 'Inter';
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.calendar-day-week:not(.cal-pa):not(.cal-pb):not(.cal-unknown) .calendar-event-chip { background: var(--bg); }
.calendar-event-chip:hover { background: rgba(255,255,255,.6); }
.calendar-event-chip.event-status-confirmat { border-left: 3px solid var(--teal-dark); }
.calendar-event-chip.event-status-pendent { border-left: 3px solid var(--orange-dark); }
.calendar-event-chip.event-status-rebutjat { border-left: 3px solid var(--red); }

.calendar-day-event-dot {
  font-size: 9px; line-height: 1; margin-top: 2px; color: var(--orange-dark); cursor: default;
}
.calendar-day-event-dot.event-status-confirmat { color: var(--teal-dark); }
.calendar-day-event-dot.event-status-rebutjat { color: var(--red); }

/* ============================================================ */
/* Calendari escolar — vista conjunta (v44) — decisió amb Joan    */
/* via AskUserQuestion: "Superposats al mateix calendari": els    */
/* períodes escolars es pinten SOBRE la mateixa graella del        */
/* calendari de custòdia (mai una vista separada), activable amb  */
/* un interruptor. Vista de setmana: xip amb l'etiqueta; vista de  */
/* mes: punt petit; vista d'any: franja de color a la cel·la mini. */
/* ============================================================ */
.calendar-school-toggle {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft); cursor: pointer; user-select: none; margin: 6px 0 2px;
}
.calendar-school-toggle input { accent-color: var(--school); cursor: pointer; }

.calendar-day-school-period {
  display: block; width: 100%; text-align: left; border: none; border-radius: 6px;
  padding: 2px 6px; font-size: 10.5px; line-height: 1.3; cursor: default;
  background: rgba(124,92,214,.16); color: var(--school-dark); font-family: 'Inter';
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
  border-left: 3px solid var(--school);
}
/* NOTA v51.2: aquesta superposició blanca translúcida sobre el fons
   fort de cal-pa/cal-pb és deliberadament fixa (no segueix
   --cal-pa-text/--cal-pb-text) — és un efecte decoratiu de "vidre
   esmerilat", no el text principal en si (`color: inherit` sí que
   agafa el color de text correcte del pare). Amb un fons molt clar de
   l'alt contrast (p. ex. blanc/gris clar) aquesta franja pot perdre
   definició visual, però el text que hi ha a dins sempre queda llegible
   perquè hereta el color ja calculat. */
.calendar-day-week.cal-pa .calendar-day-school-period,
.calendar-day-week.cal-pb .calendar-day-school-period,
.calendar-day-week.cal-unknown .calendar-day-school-period {
  background: rgba(255,255,255,.35); color: inherit; border-left-color: rgba(255,255,255,.85);
}

.calendar-day-school-dot {
  font-size: 9px; line-height: 1; margin-top: 2px; color: var(--school-dark); cursor: default;
}
.calendar-day-month.cal-pa .calendar-day-school-dot,
.calendar-day-month.cal-pb .calendar-day-school-dot,
.calendar-day-month.cal-unknown .calendar-day-school-dot { color: rgba(255,255,255,.9); }

.calendar-mini-day.has-school-period { box-shadow: 0 0 0 1.5px var(--school) inset; }

/* v45 — "dies lectius" (petició de Joan, decidit via AskUserQuestion: dies
   feiners dins el curs escolar, mai caps de setmana) — un dia sense cap
   període amb nom (vacances/no lectiu/inici-fi de curs) però que SÍ compta
   com a dia de classe. Indicador més discret que el dels dies festius
   (que sí tenen nom a mostrar): a la vista de setmana, una franja fina al
   peu de la casella; a la vista de mes, un punt de color sense emoji; a
   la vista d'any, la mateixa vora de color que un dia festiu però amb
   --school-lectiu. Mai al mateix dia que .calendar-day-school-period —
   schoolDayInfo() a app.js només en torna un dels dos. */
.calendar-day-school-lectiu {
  height: 4px; border-radius: 3px; margin-top: 3px; background: var(--school-lectiu); opacity: .55;
}
.calendar-day-week.cal-pa .calendar-day-school-lectiu,
.calendar-day-week.cal-pb .calendar-day-school-lectiu,
.calendar-day-week.cal-unknown .calendar-day-school-lectiu { background: rgba(255,255,255,.6); opacity: 1; }

.calendar-day-school-lectiu-dot {
  width: 6px; height: 6px; border-radius: 50%; margin-top: 3px; background: var(--school-lectiu); cursor: default;
}
.calendar-day-month.cal-pa .calendar-day-school-lectiu-dot,
.calendar-day-month.cal-pb .calendar-day-school-lectiu-dot,
.calendar-day-month.cal-unknown .calendar-day-school-lectiu-dot { background: rgba(255,255,255,.9); }

.calendar-mini-day.has-school-lectiu { box-shadow: 0 0 0 1.5px var(--school-lectiu) inset; }

/* v59.17 — aniversaris dels fills (petició de Joan: "esta fecha debe
   estar marcada en el calendario de custodia y escolar", aclarit via
   AskUserQuestion: "Cada any com a aniversari" — marcador ANUAL
   RECURRENT, mateix mes/dia cada any). SEMPRE visible (mai depenent de
   l'interruptor del calendari escolar) a les tres vistes, mateix patró
   visual que .calendar-day-school-period/-dot però amb el color propi
   --birthday (mai sobreescrit pels colors triats per l'usuari per a
   PA/PB — veure nota a :root). */
.calendar-day-birthdays { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.calendar-day-birthday {
  display: block; width: 100%; text-align: left; border: none; border-radius: 6px;
  padding: 2px 6px; font-size: 10.5px; line-height: 1.3; cursor: default;
  background: rgba(214,51,108,.16); color: var(--birthday-dark); font-family: 'Inter';
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid var(--birthday);
}
.calendar-day-week.cal-pa .calendar-day-birthday,
.calendar-day-week.cal-pb .calendar-day-birthday,
.calendar-day-week.cal-unknown .calendar-day-birthday {
  background: rgba(255,255,255,.35); color: inherit; border-left-color: rgba(255,255,255,.85);
}
.calendar-day-birthday-dot {
  font-size: 9px; line-height: 1; margin-top: 2px; cursor: default; color: var(--birthday-dark);
}
.calendar-mini-day.has-birthday { box-shadow: 0 0 0 1.5px var(--birthday) inset; }
.calendar-mini-day.has-school-period.has-birthday,
.calendar-mini-day.has-school-lectiu.has-birthday {
  box-shadow: 0 0 0 1.5px var(--birthday) inset, 0 0 0 3.5px var(--school) inset;
}

/* v59.18 — activitats extraescolars i colònies (petició de Joan: "ha de
   sortir marcada en el calendari [...] cada usuari pot posar-la del color
   que desitgi ... els 16 colors"). A diferència dels marcadors de dalt
   (aniversari/escola), el color NO és un valor fix de :root — és arbitrari
   i triat per CADA usuari (getActivityColor(), localStorage), així que es
   fixa amb `style="background:...` inline des de app.js; aquestes regles
   només posen la FORMA/mida per defecte (el color de fàbrica --activity-
   default només s'aplica si per algun motiu no s'arribés a fixar l'inline
   style). `.is-pending` (decidit amb Joan via AskUserQuestion: mai
   amagada mentre és pendent) hi afegeix un ratllat diagonal semitransparent
   que la distingeix visualment d'una activitat ja validada. */
.calendar-day-activities { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.calendar-day-activity {
  display: block; width: 100%; text-align: left; border: none; border-radius: 6px;
  padding: 2px 6px; font-size: 10.5px; line-height: 1.3; cursor: default;
  color: #ffffff; font-family: 'Inter';
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--activity-default, #37474f);
}
.calendar-day-activity.is-pending {
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 4px, transparent 4px 8px);
  opacity: .85;
  outline: 1px dashed rgba(255,255,255,.7);
  outline-offset: -1px;
}
.calendar-day-activity-dot {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 3px; cursor: default;
  background: var(--activity-default, #37474f);
}
.calendar-day-activity-dot.is-pending {
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.5) 0 3px, transparent 3px 6px);
  outline: 1px dashed rgba(0,0,0,.35);
  outline-offset: 1px;
}
.calendar-mini-day.has-activity { box-shadow: 0 0 0 1.5px var(--activity-default, #37474f) inset; }
.calendar-mini-day.has-activity-pending { outline: 1px dashed rgba(0,0,0,.35); outline-offset: -2px; }

/* v59.21 — notes personals del calendari: indicador discret (mai el
   contingut, que és privat — només es veu dins el pop-up de detall).
   Mateixa mida/criteri "cursor: default" que .calendar-day-birthday-dot,
   perquè el clic real que obre el pop-up és a TOTA la casella (veure
   cursor:pointer a .calendar-day-week/.calendar-day-month de sota), no
   només a aquest indicador. */
.calendar-day-note-dot {
  font-size: 10px; line-height: 1; margin-top: 2px; cursor: default;
}

/* v59.21 — petició de Joan: "vull que el usuari pugui seleccionar
   directament del gràfic de calendari de custòdia un dia [...] i que
   s'obri un pop-up". Tota la casella és clicable (veure la delegació
   sobre #calendar-body a app.js) — el cursor de mà ho deixa clar sense
   necessitat de cap altre indicador visual nou. */
.calendar-day-week, .calendar-day-month { cursor: pointer; }

/* ============================================================ */
/* v59.11 — 4 estils de calendari (petició de Joan: "genera 4       */
/* versions diferents...del calendari escolar i del calendari de    */
/* custodia [...] han de poder ser seleccionades desde              */
/* 'configuració' i guardades en DocuWare". Decidit amb Joan via     */
/* AskUserQuestion: UN sol estil que afecta alhora la part de        */
/* custòdia I la superposició del calendari escolar (no dos          */
/* controls independents).                                          */
/*                                                                    */
/* Aplicat via `data-calendar-style` a #calendar-drawer (veure       */
/* applyCalendarStyle() a app.js) — reaprofiteix el MATEIX DOM que ja */
/* pinten dayCellContent()/renderCalendarWeek/Month/Year(), cap canvi */
/* de JS de renderitzat. "classic" (o l'atribut absent) és el         */
/* comportament d'AVUI, sense cap regressió — les regles de sota      */
/* NOMÉS s'apliquen quan l'usuari tria explícitament un dels altres   */
/* 3 estils.                                                          */
/*                                                                    */
/* IMPORTANT: cap d'aquests estils toca --cal-pa-strong/--cal-pb-     */
/* strong/etc. — són els colors PERSONALS que ja es trien des de fa   */
/* temps a "Colors del calendari" (preferència independent, purament  */
/* de color). Aquests 4 estils només canvien l'ESTRUCTURA (forma,     */
/* fons, decoració), mai el color en si. */
/* ============================================================ */

/* --- "minimal": fons sempre clar, identitat del progenitor amb una
   vora esquerra de color + un punt petit davant del nom (mai la
   casella sencera pintada) — pensat per rebaixar la càrrega visual,
   mateix esperit que l'skin "Suau". --- */
#calendar-drawer[data-calendar-style="minimal"] .calendar-day-week,
#calendar-drawer[data-calendar-style="minimal"] .calendar-day-month {
  background: var(--paper);
  border-left-width: 4px;
}
#calendar-drawer[data-calendar-style="minimal"] .calendar-day-week.cal-pa,
#calendar-drawer[data-calendar-style="minimal"] .calendar-day-month.cal-pa {
  background: var(--paper); border-color: var(--line); border-left-color: var(--cal-pa-strong);
}
#calendar-drawer[data-calendar-style="minimal"] .calendar-day-week.cal-pb,
#calendar-drawer[data-calendar-style="minimal"] .calendar-day-month.cal-pb {
  background: var(--paper); border-color: var(--line); border-left-color: var(--cal-pb-strong);
}
#calendar-drawer[data-calendar-style="minimal"] .calendar-day-week.cal-unknown,
#calendar-drawer[data-calendar-style="minimal"] .calendar-day-month.cal-unknown {
  background: var(--paper); border-color: var(--line); border-left-color: var(--cal-unknown-strong);
}
#calendar-drawer[data-calendar-style="minimal"] .calendar-day-week.is-today,
#calendar-drawer[data-calendar-style="minimal"] .calendar-day-month.is-today {
  box-shadow: inset 0 0 0 1.5px var(--teal); background: var(--bg);
}
#calendar-drawer[data-calendar-style="minimal"] .calendar-day-week.cal-pa .calendar-day-progenitor::before,
#calendar-drawer[data-calendar-style="minimal"] .calendar-day-month.cal-pa .calendar-day-progenitor::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px;
  background: var(--cal-pa-strong); vertical-align: middle;
}
#calendar-drawer[data-calendar-style="minimal"] .calendar-day-week.cal-pb .calendar-day-progenitor::before,
#calendar-drawer[data-calendar-style="minimal"] .calendar-day-month.cal-pb .calendar-day-progenitor::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px;
  background: var(--cal-pb-strong); vertical-align: middle;
}
#calendar-drawer[data-calendar-style="minimal"] .calendar-day-week.cal-unknown .calendar-day-progenitor::before,
#calendar-drawer[data-calendar-style="minimal"] .calendar-day-month.cal-unknown .calendar-day-progenitor::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px;
  background: var(--cal-unknown-strong); vertical-align: middle;
}

/* --- "cards": caselles com a targetes blanques amb ombra suau i una
   franja de color a dalt (mai la casella sencera pintada) — més
   modern/enèrgic, mateix esperit que l'skin "Viva". --- */
#calendar-drawer[data-calendar-style="cards"] .calendar-day-week,
#calendar-drawer[data-calendar-style="cards"] .calendar-day-month {
  background: var(--paper); border-color: var(--line); border-radius: 14px;
  box-shadow: 0 3px 10px rgba(30,42,50,.07); position: relative; overflow: hidden;
}
#calendar-drawer[data-calendar-style="cards"] .calendar-day-week.cal-pa,
#calendar-drawer[data-calendar-style="cards"] .calendar-day-month.cal-pa,
#calendar-drawer[data-calendar-style="cards"] .calendar-day-week.cal-pb,
#calendar-drawer[data-calendar-style="cards"] .calendar-day-month.cal-pb,
#calendar-drawer[data-calendar-style="cards"] .calendar-day-week.cal-unknown,
#calendar-drawer[data-calendar-style="cards"] .calendar-day-month.cal-unknown {
  background: var(--paper); border-color: var(--line);
}
#calendar-drawer[data-calendar-style="cards"] .calendar-day-week.cal-pa::before,
#calendar-drawer[data-calendar-style="cards"] .calendar-day-month.cal-pa::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--cal-pa-strong);
}
#calendar-drawer[data-calendar-style="cards"] .calendar-day-week.cal-pb::before,
#calendar-drawer[data-calendar-style="cards"] .calendar-day-month.cal-pb::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--cal-pb-strong);
}
#calendar-drawer[data-calendar-style="cards"] .calendar-day-week.cal-unknown::before,
#calendar-drawer[data-calendar-style="cards"] .calendar-day-month.cal-unknown::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--cal-unknown-strong);
}
#calendar-drawer[data-calendar-style="cards"] .calendar-day-week { padding-top: 13px; }
#calendar-drawer[data-calendar-style="cards"] .calendar-day-month { padding-top: 9px; }
#calendar-drawer[data-calendar-style="cards"] .calendar-day-week.is-today,
#calendar-drawer[data-calendar-style="cards"] .calendar-day-month.is-today {
  box-shadow: 0 0 0 2px var(--teal), 0 3px 10px rgba(30,42,50,.07);
}
#calendar-drawer[data-calendar-style="cards"] .calendar-day-week.cal-pa .calendar-day-progenitor::before,
#calendar-drawer[data-calendar-style="cards"] .calendar-day-month.cal-pa .calendar-day-progenitor::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px;
  background: var(--cal-pa-strong); vertical-align: middle;
}
#calendar-drawer[data-calendar-style="cards"] .calendar-day-week.cal-pb .calendar-day-progenitor::before,
#calendar-drawer[data-calendar-style="cards"] .calendar-day-month.cal-pb .calendar-day-progenitor::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px;
  background: var(--cal-pb-strong); vertical-align: middle;
}
#calendar-drawer[data-calendar-style="cards"] .calendar-day-week.cal-unknown .calendar-day-progenitor::before,
#calendar-drawer[data-calendar-style="cards"] .calendar-day-month.cal-unknown .calendar-day-progenitor::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px;
  background: var(--cal-unknown-strong); vertical-align: middle;
}

/* --- "compact": punt de color en lloc de casella pintada, espaiats
   petits, la fase amagada i els xips d'esdeveniments/escola reduïts a
   punts — mateix esperit que l'skin "Compacta", per a qui vol veure el
   màxim d'informació de cop. --- */
#calendar-drawer[data-calendar-style="compact"] .calendar-day-week { min-height: 74px; padding: 6px 6px; gap: 2px; }
#calendar-drawer[data-calendar-style="compact"] .calendar-day-month { min-height: 44px; padding: 4px; }
#calendar-drawer[data-calendar-style="compact"] .calendar-day-week,
#calendar-drawer[data-calendar-style="compact"] .calendar-day-month {
  background: var(--paper); border-color: var(--line);
}
#calendar-drawer[data-calendar-style="compact"] .calendar-day-week.cal-pa,
#calendar-drawer[data-calendar-style="compact"] .calendar-day-month.cal-pa,
#calendar-drawer[data-calendar-style="compact"] .calendar-day-week.cal-pb,
#calendar-drawer[data-calendar-style="compact"] .calendar-day-month.cal-pb,
#calendar-drawer[data-calendar-style="compact"] .calendar-day-week.cal-unknown,
#calendar-drawer[data-calendar-style="compact"] .calendar-day-month.cal-unknown {
  background: var(--paper); border-color: var(--line);
}
#calendar-drawer[data-calendar-style="compact"] .calendar-day-num { font-size: 14px; }
#calendar-drawer[data-calendar-style="compact"] .calendar-day-progenitor { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#calendar-drawer[data-calendar-style="compact"] .calendar-day-fase { display: none; }
#calendar-drawer[data-calendar-style="compact"] .calendar-day-week.cal-pa .calendar-day-progenitor::before,
#calendar-drawer[data-calendar-style="compact"] .calendar-day-month.cal-pa .calendar-day-progenitor::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px;
  background: var(--cal-pa-strong); vertical-align: middle;
}
#calendar-drawer[data-calendar-style="compact"] .calendar-day-week.cal-pb .calendar-day-progenitor::before,
#calendar-drawer[data-calendar-style="compact"] .calendar-day-month.cal-pb .calendar-day-progenitor::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px;
  background: var(--cal-pb-strong); vertical-align: middle;
}
#calendar-drawer[data-calendar-style="compact"] .calendar-day-week.cal-unknown .calendar-day-progenitor::before,
#calendar-drawer[data-calendar-style="compact"] .calendar-day-month.cal-unknown .calendar-day-progenitor::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px;
  background: var(--cal-unknown-strong); vertical-align: middle;
}
/* Xips d'esdeveniments -> punts (mateix element, mateix title/tooltip,
   només es redueix visualment; cap canvi de JS). */
#calendar-drawer[data-calendar-style="compact"] .calendar-day-events { flex-direction: row; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
#calendar-drawer[data-calendar-style="compact"] .calendar-event-chip {
  width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 50%; background: var(--orange-dark);
}
#calendar-drawer[data-calendar-style="compact"] .calendar-event-chip.event-status-confirmat { background: var(--teal-dark); }
#calendar-drawer[data-calendar-style="compact"] .calendar-event-chip.event-status-rebutjat { background: var(--red); }
#calendar-drawer[data-calendar-style="compact"] .calendar-day-school-period {
  width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 50%; background: var(--school); border-left: none; margin-top: 2px;
}
/* v59.17 — mateix tractament "xip -> punt" en estil compacte que
   .calendar-day-school-period, aplicat a l'aniversari. */
#calendar-drawer[data-calendar-style="compact"] .calendar-day-birthdays { flex-direction: row; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
#calendar-drawer[data-calendar-style="compact"] .calendar-day-birthday {
  width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 50%; background: var(--birthday); border-left: none; margin-top: 0;
}
/* v59.18 — mateix tractament "xip -> punt" en estil compacte que
   .calendar-day-school-period/.calendar-day-birthday. El color de fons
   real (inline, per activitat) es conserva — només es redueix la forma. */
#calendar-drawer[data-calendar-style="compact"] .calendar-day-activities { flex-direction: row; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
#calendar-drawer[data-calendar-style="compact"] .calendar-day-activity {
  width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 50%; margin-top: 0;
}

/* --- Reset compartit pels 3 estils de sobre: com que la casella ja no
   es pinta amb el color sòlid del progenitor, el text SEMPRE és de
   tinta normal (mai blanc fix) i els elements que depenien d'un fons
   fosc (botó de canvi, xips, franja/punt escolar) tornen a la seva
   variant "de fons clar" (la mateixa que ja existia per a
   :not(.cal-pa):not(.cal-pb):not(.cal-unknown), ara aplicada sempre). --- */
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-week.cal-pa .calendar-day-weekday,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-week.cal-pb .calendar-day-weekday,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-week.cal-unknown .calendar-day-weekday {
  color: var(--ink-faint);
}
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-week.cal-pa .calendar-day-num,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-week.cal-pb .calendar-day-num,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-week.cal-unknown .calendar-day-num,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-month.cal-pa .calendar-day-num,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-month.cal-pb .calendar-day-num,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-month.cal-unknown .calendar-day-num {
  color: var(--ink);
}
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-week.cal-pa .calendar-day-progenitor,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-week.cal-pb .calendar-day-progenitor,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-week.cal-unknown .calendar-day-progenitor,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-month.cal-pa .calendar-day-progenitor,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-month.cal-pb .calendar-day-progenitor,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-month.cal-unknown .calendar-day-progenitor {
  color: var(--ink);
}
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-week.cal-pa .calendar-day-fase,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-week.cal-pb .calendar-day-fase,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-week.cal-unknown .calendar-day-fase {
  color: var(--ink-soft);
}
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-swap-btn {
  background: var(--bg);
}
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-event-chip {
  background: var(--bg); color: var(--ink);
}
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"]) .calendar-day-week.cal-pa .calendar-day-school-period,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"]) .calendar-day-week.cal-pb .calendar-day-school-period,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"]) .calendar-day-week.cal-unknown .calendar-day-school-period {
  background: rgba(124,92,214,.16); color: var(--school-dark); border-left-color: var(--school);
}
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"]) .calendar-day-week.cal-pa .calendar-day-birthday,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"]) .calendar-day-week.cal-pb .calendar-day-birthday,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"]) .calendar-day-week.cal-unknown .calendar-day-birthday {
  background: rgba(214,51,108,.16); color: var(--birthday-dark); border-left-color: var(--birthday);
}
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-month.cal-pa .calendar-day-birthday-dot,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-month.cal-pb .calendar-day-birthday-dot,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-month.cal-unknown .calendar-day-birthday-dot {
  color: var(--birthday-dark);
}
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-week.cal-pa .calendar-day-school-lectiu,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-week.cal-pb .calendar-day-school-lectiu,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-week.cal-unknown .calendar-day-school-lectiu {
  background: var(--school-lectiu); opacity: .55;
}
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-month.cal-pa .calendar-day-school-dot,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-month.cal-pb .calendar-day-school-dot,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-month.cal-unknown .calendar-day-school-dot {
  color: var(--school-dark);
}
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-month.cal-pa .calendar-day-school-lectiu-dot,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-month.cal-pb .calendar-day-school-lectiu-dot,
#calendar-drawer:is([data-calendar-style="minimal"], [data-calendar-style="cards"], [data-calendar-style="compact"]) .calendar-day-month.cal-unknown .calendar-day-school-lectiu-dot {
  background: var(--school-lectiu);
}

/* v45 — selector de fill de la vista conjunta (petició de Joan: calendari
   escolar per fill; decidit amb Joan via AskUserQuestion: amb selector,
   no tots barrejats). Amagat per defecte; showSchoolChildFilter() a
   app.js el mostra només quan la superposició està activa I la família té
   més d'un fill (amb un de sol, triar és superflu). */
.calendar-school-filter { margin: 4px 0 10px 26px; }
.calendar-school-filter select { max-width: 240px; }

/* Llista de períodes dins de la peça "Calendari escolar" a Eines (mateix
   patró visual que .split-item). */
.school-period-item {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
  border-left: 4px solid var(--school);
}
.school-period-item .school-period-label { font-weight: 600; }
.school-period-item .school-period-dates { color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
/* v45 — nom del fill, només quan la família en té més d'un amb calendari desat. */
.school-period-item .school-period-child { color: var(--ink-faint); font-size: 11.5px; margin-top: 3px; }
/* v59.17 — entrada d'aniversari (sintetitzada des de "Dades dels fills",
   fusionada amb els períodes escolars reals a renderSchoolCalendarList()):
   mateix patró visual que .school-period-item, però amb el color propi
   --birthday en lloc de --school perquè es distingeixi d'un cop d'ull. */
.school-period-item-birthday { border-left-color: var(--birthday); }

/* Llista d'esdeveniments dins del panell del calendari (mateix patró
   visual que .swap-respond-form/.split-item). */
.event-respond-form { margin-top: 8px; }
.event-respond-form .field { margin-bottom: 8px; }
.event-respond-form .btn-small { margin-right: 6px; margin-bottom: 6px; }
.event-respond-form textarea, .event-respond-form input {
  font-family: 'Inter'; font-size: 13px; padding: 7px 9px; border: 1.5px solid var(--line);
  border-radius: 8px; background: var(--paper); color: var(--ink); width: 100%;
}
.event-history-thread { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--bg); }
.event-history-entry { font-size: 12px; margin-bottom: 6px; }
.event-history-entry:last-child { margin-bottom: 0; }

.checkbox-line { display: flex !important; align-items: center; gap: 8px; font-weight: 500 !important; margin-bottom: 6px !important; }
.checkbox-line input { width: auto; }

/* ============================================================ */
/* CONFIGURACIÓ i NOTIFICACIONS (v43) — mateix patró de pestanya  */
/* fixa + panell lateral que calendari/dades, però totes dues al  */
/* costat DRET (com el calendari), a alçades diferents perquè no  */
/* es xoquin visualment: notificacions més amunt, calendari al    */
/* mig (ja existent), configuració més avall.                     */
/* ============================================================ */
/* v47 — les pestanyes fixes .settings-toggle-tab/.notifications-toggle-tab
   han desaparegut (veure comentari equivalent més amunt, secció del
   calendari): els seus disparadors ara són peces de .tools-menu. Els
   panells/backdrops de sota no canvien. */

/* Indicador PERSISTENT de notificacions (v47) — petició de Joan, aclarit
   via AskUserQuestion: encara que el disparador de Notificacions ara és
   una peça del mosaic (només visible quan el mosaic ho és), es manté
   aquest indicador sempre visible (independentment de quina eina
   s'estigui mirant) que porta directament al panell de Notificacions.
   Mateix .notifications-badge de sempre (comptador vermell), ara penjant
   d'un botó rodó fix a la cantonada en lloc d'una pestanya lateral. */
/* v51.2 (HISTÒRIC) — BUG REAL trobat i corregit (petició de Joan: "la
   icona de notificacions está damunt del selector de idioma"): `top:
   14px` feia que aquest botó rodó (fixed, cantonada superior dreta) es
   solapés amb `.lang-switcher` (dins del capçalera, verticalment
   centrat als seus ~100px d'alçada). Es va baixar a `top: 108px`.
   v51.3 — petició de Joan: "la opció de 'configuració' ha d'estar a
   dalt a la dreta, on hi ha el desplegable de idiomes." Ara que
   `.lang-switcher` s'amaga sempre que s'està al compte (veure
   showView() a app.js — només és visible a landing/login/registre, on
   NO hi ha cap indicador `fixed`), el conflicte de la v51.2 ja no pot
   passar MAI: indicadors i `.lang-switcher` no coexisteixen mai a la
   mateixa pantalla. Es recupera doncs `top: 14px` per a totes dues
   icones "bessones" (Notificacions i Configuració), ara una al costat
   de l'altra ocupant exactament el lloc on abans hi havia el
   desplegable d'idioma. */
.notifications-indicator, .settings-indicator, .yaiza-indicator {
  position: fixed; top: 14px; z-index: 46;
  width: 42px; height: 42px; border-radius: 50%;
  color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 10px rgba(30,42,50,.22);
  transition: background .12s ease, transform .1s ease;
}
/* Configuració (icona de la dreta, mateix lloc exacte on hi havia
   `.lang-switcher`) i Notificacions (immediatament a la seva esquerra). */
.settings-indicator { right: 14px; background: var(--teal-dark); }
.settings-indicator:hover { background: var(--teal); transform: scale(1.06); }
.notifications-indicator { right: 64px; background: var(--orange-dark, #b5651d); }
.notifications-indicator:hover { background: var(--orange, #d9822b); transform: scale(1.06); }
/* v52 — la Yaiza es queda EXPRÉS fora del clúster de dalt a la dreta
   (Configuració/Notificacions): a diferència d'aquestes dues, ha
   d'estar visible també abans d'iniciar sessió (per ajudar amb el
   propi procés de login), així que mai pot coincidir amb
   `.lang-switcher` — baix a la dreta, patró habitual d'un widget de
   xat, sense competir amb res més de la pantalla. */
.yaiza-indicator { position: fixed; top: auto; bottom: 18px; right: 18px; background: var(--blue-dark); }
.yaiza-indicator:hover { background: var(--blue); transform: scale(1.06); }
.indicator-icon { display: flex; }
.indicator-icon svg { width: 20px; height: 20px; }
@media (max-width: 480px) {
  .settings-indicator { top: 10px; right: 10px; }
  .notifications-indicator { top: 10px; right: 58px; }
  .yaiza-indicator { bottom: 14px; right: 14px; }
}
/* v51.3 — CRÍTIC: mateix escarment que `.tools-menu[hidden]` (v27) i
   `.tools-tile[hidden]` (v51.2) — una regla d'autor que fixa `display`
   SEMPRE guanya al `display: none` per defecte de `[hidden]` del
   navegador, independentment de l'ordre. Sense aquesta regla explícita,
   `#btn-settings-indicator` (que comença amb `hidden` a l'HTML i es
   mostra/amaga via `el.hidden = ...` a showView()) es veuria sempre,
   fins i tot a landing/login/registre. Mateix criteri aplicat també a
   `#btn-yaiza-indicator` (v52) des del primer moment. */
.notifications-indicator[hidden], .settings-indicator[hidden], .yaiza-indicator[hidden] { display: none !important; }
.notifications-indicator .notifications-badge {
  position: absolute; top: -4px; right: -4px;
}
.notifications-badge {
  background: var(--red, #c62828); color: #fff;
  border-radius: 999px; font-size: 11px; line-height: 1; padding: 3px 6px; min-width: 16px;
  text-align: center; font-weight: 700;
}

.settings-drawer-backdrop, .notifications-drawer-backdrop, .yaiza-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(30,42,50,.35); z-index: 45;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.settings-drawer-backdrop.open, .notifications-drawer-backdrop.open, .yaiza-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.settings-drawer, .notifications-drawer, .yaiza-drawer {
  position: fixed; top: 0; right: 0; height: 100vh;
  background: var(--bg); box-shadow: -4px 0 24px rgba(30,42,50,.22); z-index: 50;
  transform: translateX(100%); transition: transform .25s ease; overflow-y: auto;
  padding: 26px 22px;
}
.settings-drawer { width: min(380px, 92vw); }
.notifications-drawer { width: min(480px, 92vw); }
/* v52 — la Yaiza necessita una mica més d'amplada per a un xat còmode
   de llegir, però es manté per sota del límit de .notifications-drawer. */
.yaiza-drawer { width: min(420px, 92vw); display: flex; flex-direction: column; }
.settings-drawer.open, .notifications-drawer.open, .yaiza-drawer.open { transform: translateX(0); }
.settings-drawer-close, .notifications-drawer-close, .yaiza-drawer-close {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  font-size: 24px; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 6px 10px;
  border-radius: 8px;
}
.settings-drawer-close:hover, .notifications-drawer-close:hover, .yaiza-drawer-close:hover { color: var(--ink); background: var(--paper); }
.settings-card, .notifications-card, .yaiza-card {
  box-shadow: none; border: none; padding: 0; margin: 30px 0 0; max-width: none; text-align: left;
}
.settings-lang-block label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--ink-soft); }

/* ============================================================ */
/* v59.10 — "Configuració" i "Calendari" més "user friendly", amb  */
/* l'estètica de la Guia d'Identitat Corporativa (petició de Joan: */
/* "fes que l'apartat de 'configuració' sigui mes user friendly amb */
/* la estetica de la identitat corporativa. Lo mateix per a la      */
/* secció del calendari."). Component compartit `.panel-section`:   */
/* la mateixa "targeta" (fons --paper, vora --line, radi --radius)  */
/* que ja fa servir la resta de l'app (.card, .contract-sections),  */
/* ara agrupant també cada bloc de "Configuració" i les seccions    */
/* llargues de "Calendari" (sol·licituds de canvi, esdeveniments,   */
/* autoritzacions de viatge) — abans un únic bloc de text seguit,   */
/* amb marges inconsistents (14/18/22px segons quina versió l'havia */
/* afegit) i sense cap separació visual entre seccions.             */
/*                                                                  */
/* El primer `.step-lede`/`h4` DIRECTE de cada `.panel-section` es  */
/* converteix automàticament en el títol de la targeta (Quicksand,  */
/* semi-negreta, vora inferior de separació) — cap lede/heading niat */
/* més avall (p. ex. "Avisa'm per a:" dins dels recordatoris de      */
/* pagament, o la lede descriptiva sota cada `h4` del calendari) es  */
/* veu afectat, perquè el selector exigeix `:first-child` D'UN FILL  */
/* DIRECTE — cap dels dos viu al primer nivell del seu bloc.         */
/* `.panel-section-plain` és la mateixa targeta SENSE aquest         */
/* tractament automàtic de títol, per a blocs on el primer fill ja   */
/* és una descripció, no un títol (p. ex. la gestió del calendari    */
/* escolar, que comença amb un paràgraf explicatiu).                 */
/* ============================================================ */
.panel-section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  margin-top: 16px;
  box-shadow: 0 1px 2px rgba(30, 42, 50, .04);
}
.panel-section-plain {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.panel-section > .step-lede:first-child,
.panel-section > h4:first-child {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Cada `.panel-section` sempre porta el mateix respir per sobre —
   la primera targeta de cada calaix en porta una mica més perquè no
   quedi enganxada a la capçalera (title/eyebrow/lede) de dalt. */
.settings-card > .panel-section:first-of-type,
.calendar-card > .panel-section:first-of-type { margin-top: 20px; }

/* Lede curta sota el títol "Configuració" (mateix patró que l'eyebrow
   + title + lede que ja fa servir #calendar-drawer just a sota,
   veure .calendar-header) — mai canvia el flux de dades, només hi
   afegeix context abans dels blocs. */
.settings-intro-lede { margin-top: 6px; margin-bottom: 4px; }

/* ---------------------------------------------------------------- */
/* Interruptors com a "switch" (només CSS, cap canvi de JS/HTML —    */
/* els mateixos <input type="checkbox"> d'abans, amb el mateix ID).  */
/* S'aplica a totes les files `.checkbox-line`/`.settings-contrast-  */
/* toggle`/`.calendar-school-toggle` de "Configuració" I "Calendari" */
/* — mateix component, perquè es llegeixin com el mateix control a   */
/* tota l'app. NOMÉS als `<input type="checkbox">` (mai als          */
/* `type="radio"` que també viuen dins `.checkbox-line`, p. ex. la   */
/* tria de font de l'autorització de viatge — un switch no té sentit */
/* per a una tria mútuament exclusiva).                              */
/* ---------------------------------------------------------------- */
.checkbox-line input[type="checkbox"],
.settings-contrast-toggle input[type="checkbox"],
.calendar-school-toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative;
  width: 38px; height: 22px; min-width: 38px; border-radius: 999px;
  background: var(--line); border: none; cursor: pointer; flex: none;
  transition: background .16s ease; margin: 0; outline-offset: 3px;
}
.checkbox-line input[type="checkbox"]::after,
.settings-contrast-toggle input[type="checkbox"]::after,
.calendar-school-toggle input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(30,42,50,.35);
  transition: left .16s ease;
}
.checkbox-line input[type="checkbox"]:checked,
.settings-contrast-toggle input[type="checkbox"]:checked,
.calendar-school-toggle input[type="checkbox"]:checked {
  background: var(--teal);
}
.checkbox-line input[type="checkbox"]:checked::after,
.settings-contrast-toggle input[type="checkbox"]:checked::after,
.calendar-school-toggle input[type="checkbox"]:checked::after {
  left: 18px;
}
.checkbox-line input[type="checkbox"]:focus-visible,
.settings-contrast-toggle input[type="checkbox"]:focus-visible,
.calendar-school-toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--teal-dark);
}
.checkbox-line input[type="checkbox"]:disabled,
.settings-contrast-toggle input[type="checkbox"]:disabled,
.calendar-school-toggle input[type="checkbox"]:disabled {
  opacity: .5; cursor: not-allowed;
}
/* Files amb switch: una mica més d'espai vertical que abans (una
   casella nua es podia llegir més atapeïda) perquè el "polze" del
   switch respiri. */
.panel-section .checkbox-line,
.panel-section .settings-contrast-toggle,
.calendar-school-toggle {
  padding: 3px 0;
}

/* Botons d'acció ("Les meves dades" / "Tancar sessió") a la capçalera
   i al peu de "Configuració": ja no calen marges ad-hoc perquè ara
   viuen dins/al costat de `.panel-section`, que ja aporta el seu
   propi respir. */
.settings-account-block .settings-action { width: 100%; }
.settings-account-block .settings-lang-block { margin-top: 14px; }

.notification-item {
  border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
}
.notification-item .btn-small { margin-right: 6px; margin-top: 6px; }

@media (max-width: 700px) {
  .settings-drawer, .notifications-drawer, .yaiza-drawer { width: 100vw; padding: 22px 16px; }
}

/* ============================================================ */
/* YAIZA — assistent virtual (v52), petició de Joan: "vull generar   */
/* un asistent virtual o chatbot, anomenat Yaiza..." Mode "scripted" */
/* (per defecte): #yaiza-messages mostra una llista de botons de     */
/* tema (.yaiza-topic-btn) i, en triar-ne un, la resposta apareix    */
/* com un "missatge" de la Yaiza (.yaiza-msg.yaiza-msg-bot) — mateix */
/* aspecte visual que si fos una conversa real, encara que no hi ha  */
/* cap IA al darrere. Mode "ai": mateixa àrea, però amb missatges    */
/* alternats d'usuari (.yaiza-msg-user, alineats a la dreta) i de la */
/* Yaiza (a l'esquerra) — veure sendYaizaMessage() a app.js.         */
/* ============================================================ */
.yaiza-card { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.yaiza-messages {
  flex: 1; min-height: 0; overflow-y: auto; margin-top: 16px;
  display: flex; flex-direction: column; gap: 10px; padding-right: 2px;
}
.yaiza-msg {
  max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45;
  white-space: pre-wrap;
}
.yaiza-msg-bot { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.yaiza-msg-user { align-self: flex-end; background: var(--teal); color: #fff; border-bottom-right-radius: 4px; }
.yaiza-msg-error { align-self: flex-start; background: #FDECEA; color: var(--red); border: 1px solid #f3c8c4; border-bottom-left-radius: 4px; }
.yaiza-msg-typing { align-self: flex-start; color: var(--ink-faint); font-size: 12.5px; font-style: italic; }
.yaiza-topics-heading { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; margin: 2px 0 2px; }
.yaiza-topic-btn {
  display: block; width: 100%; text-align: left; background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 10px; padding: 9px 12px; font-size: 13.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.yaiza-topic-btn:hover, .yaiza-topic-btn:focus-visible { border-color: var(--teal); background: #eefaf7; outline: none; }
.yaiza-back-btn { align-self: flex-start; }
/* v2.6 — botó "Obrir una incidència" que la Yaiza ofereix quan l'usuari no pot resoldre el problema ell mateix. */
.yaiza-incident-btn {
  align-self: flex-start; background: var(--teal); color: #fff; border: 0; border-radius: 10px;
  padding: 9px 14px; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.yaiza-incident-btn:hover, .yaiza-incident-btn:focus-visible { filter: brightness(1.08); outline: 2px solid var(--teal); outline-offset: 2px; }
.yaiza-input-row { display: flex; gap: 8px; margin-top: 12px; flex-shrink: 0; }
.yaiza-input-row .input-field { flex: 1; min-width: 0; }
/* v52 (correcció): `.btn` (regla base, més amunt) posa `width:100%` — sense
   sobreescriure-la aquí el botó "Enviar" es quedava amb tota l'amplada de
   la fila (el seu `width:100%` es fa servir com a mida de flex-basis en
   absència d'un `flex` explícit) i el camp de text quedava escanyat a
   uns 30px. */
.yaiza-input-row .btn { flex-shrink: 0; width: auto; padding: 10px 16px; }
.yaiza-disable-link { margin-top: 12px; font-size: 12.5px; flex-shrink: 0; }

/* ============================================================ */
/* Contractes en registrar-se (v35) — petició de Joan: "els         */
/* usuaris, al registrar-se, han de firmar un contracte amb          */
/* Parentia... així com un contracte de RGPD". Identitat visual del  */
/* projecte: mateixa .card + franja de degradat de marca (--grad)    */
/* a dalt (mateix recurs que .arc-divider a la landing) perquè es    */
/* noti clarament que és un document oficial de ParentIApp.          */
/* ============================================================ */
.contract-card { position: relative; padding-top: 30px; }
.contract-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--grad); border-radius: var(--radius) var(--radius) 0 0;
}
.contract-sections {
  text-align: left; max-height: 46vh; overflow-y: auto; margin: 14px 0;
  padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg);
}
.contract-sections h3 {
  font-size: 14.5px; color: var(--blue-dark); margin: 16px 0 6px;
}
.contract-sections h3:first-child { margin-top: 0; }
.contract-sections p { font-size: 13.5px; margin: 6px 0; color: var(--ink-soft); }
.contract-sections .contract-loading,
.contract-sections .contract-load-error { text-align: center; color: var(--ink-faint); padding: 20px 0; }
.contract-choice-field { margin-top: 6px; }
.contract-choice-field .ticket-radio-option { font-size: 14.5px; }
.contract-choice-field .hint { color: var(--red); margin-top: 6px; }

.contract-reject-modal { width: min(440px, 94vw); height: auto; max-height: 80vh; }
.contract-reject-modal .document-viewer-body { display: block; padding: 20px 22px; text-align: center; }
.contract-reject-modal .step-lede { margin-bottom: 16px; }

/* Selecció de servei en registrar-se (v38, petició de Joan): "quan es
   registre un usuari, ha de seleccionar quin tipus de servei vol" —
   NOMÉS pel Progenitor A (qui crea la unitat familiar), entre el pas de
   dades personals i el de contractes. */
.service-plans {
  display: grid;
  /* v65 — el nombre de plans ja no és fix (2 Standard/Premium): ara ve
     del catàleg de Producte i pot ser'n 1, 2, 3 o més. auto-fit amb un
     mínim llegible s'adapta sol, en lloc d'un grid fix a 2 columnes. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 14px 0 20px;
}
@media (max-width: 480px) {
  .service-plans { grid-template-columns: 1fr; }
}
.service-plan {
  display: block;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 14px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.service-plan:hover, .service-plan:focus-visible { border-color: var(--teal); outline: none; }
.service-plan.selected {
  border-color: var(--teal-dark);
  box-shadow: 0 0 0 2px var(--teal-dark) inset;
  background: #f3faf7;
}
.service-plan-name { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.service-plan-price { font-size: 23px; font-weight: 700; color: var(--teal-dark); line-height: 1.1; }
.service-plan-price .service-plan-period { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.service-plan-tax { font-size: 12px; color: var(--ink-faint); margin-top: 3px; }
.service-plan-selected-tag {
  display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 700;
  color: var(--teal-dark); letter-spacing: .02em; text-transform: uppercase;
}
/* Igual que .tools-block[hidden]/.document-viewer-backdrop[hidden] més
   amunt: sense això, la regla d'autor "display: inline-block" de dalt
   guanyaria SEMPRE a l'estil per defecte de l'agent d'usuari per a
   [hidden] (mateixa especificitat, però l'autor sempre guanya), i les
   dues targetes de pla mostrarien "SELECCIONAT" alhora. Detectat amb
   Playwright (verify-v38-ui.js) i corregit abans de lliurar. */
.service-plan-selected-tag[hidden] { display: none !important; }
/* v65 — descripció + llistat de funcionalitats incloses de cada
   producte/pla, pintats amb JS a renderServicePlans() (app.js). */
.service-plan-desc { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; line-height: 1.4; }
.service-plan-features { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12px; color: var(--ink-soft); }
.service-plan-features li { padding: 2px 0 2px 18px; position: relative; line-height: 1.4; }
.service-plan-features li::before { content: '✓'; position: absolute; left: 0; color: var(--teal-dark); font-weight: 700; }
.service-plans-empty-msg { font-size: 13px; color: var(--red); margin: 10px 0; }
.service-payment-block { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.service-payment-note { font-size: 12px; color: var(--ink-faint); line-height: 1.55; margin-bottom: 14px; }
.service-card-fields { display: flex; gap: 12px; align-items: flex-end; }
.service-card-fields .field { flex: 1; margin-bottom: 0; }
#input-card-last4 { letter-spacing: .08em; font-family: 'JetBrains Mono', monospace; }

/* "Uservoice" d'idees de millora (v39) — mosaic "Eines". */
.idea-new-form { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); margin-bottom: 6px; }
.idea-new-form textarea.input-field { resize: vertical; }
.idea-status-badge { display: inline-block; flex-shrink: 0; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.idea-status-badge.idea-status-pendent { background: #f1efe8; color: var(--ink-faint); }
.idea-status-badge.idea-status-en_estudi { background: #e6f1fb; color: var(--blue-dark); }
.idea-status-badge.idea-status-planificada { background: #fef1dc; color: var(--orange-dark); }
.idea-status-badge.idea-status-feta { background: #e1f5ee; color: var(--teal-dark); }
.idea-status-badge.idea-status-descartada { background: #fbeaea; color: var(--red); }
.idea-admin-response { margin-top: 6px; padding: 8px 10px; background: var(--bg); border-radius: 8px; font-size: 13px; line-height: 1.5; }
.idea-vote-count { font-size: 13px; color: var(--ink-soft); }

/* Incidències / SLA de suport (v40) — mosaic "Eines". Mateixos patrons visuals que "Uservoice" d'idees (badges arrodonits, formulari amb vora), més el fil de conversa (HISTORY) i els avisos d'incompliment d'SLA. */
.incident-new-form { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); margin-bottom: 6px; }
.incident-new-form textarea.input-field { resize: vertical; }
.incident-status-badge { display: inline-block; flex-shrink: 0; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.incident-status-badge.incident-status-obert { background: #f1efe8; color: var(--ink-faint); }
.incident-status-badge.incident-status-en_curs { background: #e6f1fb; color: var(--blue-dark); }
.incident-status-badge.incident-status-esperant_info { background: #fef1dc; color: var(--orange-dark); }
.incident-status-badge.incident-status-resolt { background: #e1f5ee; color: var(--teal-dark); }
.incident-status-badge.incident-status-tancat { background: #f1efe8; color: var(--ink-faint); }
.incident-sla-badge { display: inline-block; flex-shrink: 0; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.incident-sla-badge.incident-sla-breach { background: #fbeaea; color: var(--red); }
.incident-history-thread { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.incident-history-entry { padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.incident-history-entry.incident-history-user { background: var(--bg); }
.incident-history-entry.incident-history-admin { background: #e6f1fb; }
.incident-history-meta { font-size: 11px; color: var(--ink-soft); margin-bottom: 2px; }
.incident-history-message { white-space: pre-wrap; }
.incident-reply-form textarea.input-field { resize: vertical; }
.btn-idea-vote[disabled] { opacity: .55; cursor: default; }

/* Arbitratge (v41) — mateixos patrons visuals que Incidències (badges arrodonits, fil de conversa), amb vocabulari d'estats propi ("Laude emès" en lloc de "Resolt") i una caixa fixa amb l'àrbitre assignat a la família. */
.arbitration-arbiter-info { padding: 10px 12px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); font-size: 13.5px; margin-bottom: 14px; }
.arbitration-arbiter-info strong { color: var(--ink); }
.arbitration-new-form { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); margin-bottom: 6px; }
.arbitration-new-form textarea.input-field { resize: vertical; }
.arbitration-status-badge { display: inline-block; flex-shrink: 0; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.arbitration-status-badge.arbitration-status-obert { background: #f1efe8; color: var(--ink-faint); }
.arbitration-status-badge.arbitration-status-en_curs { background: #e6f1fb; color: var(--blue-dark); }
.arbitration-status-badge.arbitration-status-esperant_info { background: #fef1dc; color: var(--orange-dark); }
.arbitration-status-badge.arbitration-status-laude_emes { background: #e1f5ee; color: var(--teal-dark); }
.arbitration-status-badge.arbitration-status-tancat { background: #f1efe8; color: var(--ink-faint); }
.arbitration-history-thread { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.arbitration-history-entry { padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.arbitration-history-entry.arbitration-history-user { background: var(--bg); }
.arbitration-history-entry.arbitration-history-arbiter { background: #e1f5ee; }
.arbitration-history-meta { font-size: 11px; color: var(--ink-soft); margin-bottom: 2px; }
.arbitration-history-message { white-space: pre-wrap; }
.arbitration-reply-form textarea.input-field { resize: vertical; }

/* Esdeveniments puntuals de calendari (v42) — mateix patró de badge que Incidències/Arbitratge, amb vocabulari propi ("cancel·lat" com a terminal). */
.event-status-badge { display: inline-block; flex-shrink: 0; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.event-status-badge.event-status-pendent { background: #fef1dc; color: var(--orange-dark); }
.event-status-badge.event-status-confirmat { background: #e1f5ee; color: var(--teal-dark); }
.event-status-badge.event-status-rebutjat { background: #fbeaea; color: var(--red); }
.event-status-badge.event-status-cancellat { background: #f1efe8; color: var(--ink-faint); }
.event-attendee-status { display: inline-block; font-size: 11px; font-weight: 600; margin-right: 10px; }
.event-attendee-status.event-status-pendent { color: var(--orange-dark); }
.event-attendee-status.event-status-confirmat { color: var(--teal-dark); }
.event-attendee-status.event-status-rebutjat { color: var(--red); }

/* "Els meus contractes" (v35) — dins el panell de dades personals
   (decisió confirmada amb Joan), sempre visible sota el botó "Edita". */
.account-contracts { margin-top: 22px; padding-top: 16px; border-top: 1.5px solid var(--line); text-align: left; }
.account-contracts h3 { font-size: 15px; margin-bottom: 4px; }
.account-contracts .step-lede { font-size: 13px; margin-bottom: 10px; }
.account-contracts-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--paper);
}
.account-contracts-item .label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.account-contracts-item .none { font-size: 12px; color: var(--ink-faint); font-style: italic; }

.settings-contrast-toggle {
  display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600;
  color: var(--ink); cursor: pointer; user-select: none;
}
.settings-contrast-toggle input { accent-color: var(--ink-soft); cursor: pointer; }

/* ============================================================ */
/* Colors del calendari (v45) — petició de Joan: "cada usuari ha  */
/* de poder triar el color de representació en els objectes del  */
/* calendari... independentment del altre progenitor". Mateix    */
/* patró visual que la resta de "Configuració" (files curtes amb */
/* etiqueta + control), persistit a localStorage per rol PA/PB   */
/* (veure applyCalendarColors() a app.js).                       */
/* ============================================================ */
/* v59.10: margin-top ara el posa .panel-section (veure aquella regla,
   més avall) — aquest bloc sempre porta també la classe .panel-section. */
.settings-color-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--ink); margin-top: 9px;
}
.settings-color-row input[type="color"] {
  width: 34px; height: 26px; padding: 0; border: 1.5px solid var(--line); border-radius: 6px;
  background: none; cursor: pointer; flex-shrink: 0;
}
/* v47 — petició de Joan: "només ha de sortir una paleta de 16 colors
   diferents, no tot el pantone com fins ara." La graella de 16 mostres
   necessita més amplada que una fila label+control, per això aquesta
   variant apila l'etiqueta a sobre (veure renderColorSwatchPickers() a
   app.js, que genera els 16 <button> dins de cada .color-swatch-grid). */
.settings-color-row-swatches { flex-direction: column; align-items: flex-start; gap: 6px; }
.color-swatch-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.color-swatch {
  width: 24px; height: 24px; border-radius: 50%; padding: 0; cursor: pointer; flex-shrink: 0;
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line) inset; transition: transform .1s ease, box-shadow .1s ease;
}
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
#btn-colors-reset { margin-top: 10px; font-size: 12px; }

/* ============================================================ */
/* Preferències d'email de notificacions (v47) — petició de Joan: */
/* "el usuari ha de poder seleccionar si vol rebre o no correu    */
/* electrónic de les notificacions i quines si i quines no."      */
/* Mateix patró visual que la resta de "Configuració" (files       */
/* curtes amb checkbox + etiqueta), però persistit a DocuWare (no  */
/* a localStorage) — veure src/emailPreferences.js.                */
/* ============================================================ */
/* v59.10: margin-top ara el posa .panel-section — aquest bloc sempre
   porta també la classe .panel-section. */
.settings-email-prefs-categories {
  margin-top: 4px; margin-left: 22px; padding-left: 10px; border-left: 2px solid var(--line);
  transition: opacity .12s ease;
}
/* Quan l'interruptor general està desactivat, les categories es veuen
   atenuades i no es poden clicar — encara reflecteixen el seu propi valor
   desat (per si es torna a activar el general més endavant), simplement
   no tenen efecte mentre el general estigui apagat (veure shouldSendEmail()
   a src/emailPreferences.js: el general sempre guanya). */
.settings-email-prefs-categories.is-disabled { opacity: .45; pointer-events: none; }

/* ============================================================ */
/* Personalització del mosaic d'"Eines" (v51.2) — petició de Joan: */
/* "afegeix també en la opció de configuració la opció de que el  */
/* usuari pugui determinar quines funcions vol que apareguin o no */
/* en el mosaic central... i ha de poder ordenar les diferents    */
/* opcions dins el mosaic central." Llista vertical: checkbox      */
/* (mostra/amaga) a l'esquerra + parella de botons ↑/↓ (reordena)  */
/* a la dreta — veure renderToolsPrefsList() a app.js.             */
/* ============================================================ */
/* v59.10: margin-top ara el posa .panel-section — aquest bloc sempre
   porta també la classe .panel-section. */
.tools-prefs-list { list-style: none; margin: 4px 0 0; padding: 0; }
.tools-prefs-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
.tools-prefs-row:last-child { border-bottom: none; }
/* v65 — eina bloquejada pel producte contractat per la família: es
   mostra atenuada perquè es distingeixi d'una simplement amagada per
   preferència pròpia (checkbox també desactivat, veure renderToolsPrefsList()). */
.tools-prefs-row-locked { opacity: 0.55; }
/* v51.3 — mateixa icona SVG minimalista que el mosaic real (mida
   reduïda, ~18px), veure TOOLS_MOSAIC_META a app.js. `vertical-align`
   perquè no es descentri respecte el text del costat. */
.tools-prefs-icon { width: 18px; height: 18px; vertical-align: -4px; margin-right: 2px; color: var(--ink-soft); }
.tools-prefs-reorder { display: flex; gap: 4px; flex-shrink: 0; }
.btn-tiny {
  background: var(--bg-soft, #f2f2f2); border: 1px solid var(--line); border-radius: 6px;
  width: 28px; height: 28px; line-height: 1; font-size: 14px; cursor: pointer; padding: 0;
}
.btn-tiny:disabled { opacity: .35; cursor: default; }
.btn-tiny:not(:disabled):hover { background: var(--line); }

/* ============================================================ */
/* Alt contrast / blanc i negre (v44) — petició de Joan: "hi ha    */
/* d'haver la opció, dins el apartat de 'configuració', de poder  */
/* visualitzar la web en blanc i negre (alt contrast)". Aplicat   */
/* afegint la classe "high-contrast" a <html> (veure app.js —     */
/* mateix mecanisme que l'atribut "lang", persistit a             */
/* localStorage, mai al servidor).                                 */
/*                                                                  */
/* DISSENY: `filter: grayscale(1) contrast(1.15)` en lloc de       */
/* redefinir cada color un per un — converteix TOT (colors via     */
/* variables CSS, colors clapats directament al CSS, i fins i tot  */
/* els emojis de colors que s'usen com a icona per tota la web)    */
/* sense haver-los d'enumerar tots un per un i sense risc d'oblidar-  */
/* se'n cap.                                                        */
/*                                                                  */
/* ⚠️ PER QUÈ NO S'APLICA A <body>/<main> SENCERS: aquesta app té   */
/* diverses peces amb `position: fixed` (les pestanyes de           */
/* Calendari/Dades/Configuració/Notificacions, els seus panells     */
/* laterals, i els modals de sol·licitud de canvi / esdeveniment /  */
/* rebuig de contracte / visor de documents) — un `filter` en       */
/* QUALSEVOL element AVANTPASSAT seu els converteix el "containing  */
/* block" de fixed en la caixa d'aquell avantpassat en lloc del     */
/* viewport (comportament estàndard de CSS, no un bug d'aquesta     */
/* app), fent que quedin mal posicionats o desapareguin en fer      */
/* scroll. La solució: aplicar el filtre DIRECTAMENT a cada         */
/* contenidor de dalt a baix que NO tingui cap element fixed com a  */
/* DESCENDENT seu (un filtre a un element mai afecta el seu propi   */
/* posicionament fixed, només el dels seus fills) — entre tots      */
/* junts cobreixen el 100% de la pàgina sense deixar-se res.        */
/* ============================================================ */
:root.high-contrast header.site-header,
:root.high-contrast main.wrap:not(.wrap-wide),
:root.high-contrast .account-layout,
:root.high-contrast .footer-note,
:root.high-contrast .calendar-drawer-backdrop,
:root.high-contrast .calendar-drawer,
:root.high-contrast .settings-drawer-backdrop,
:root.high-contrast .settings-drawer,
:root.high-contrast .notifications-indicator,
:root.high-contrast .settings-indicator,
:root.high-contrast .yaiza-indicator,
:root.high-contrast .yaiza-drawer-backdrop,
:root.high-contrast .yaiza-drawer,
:root.high-contrast .notifications-drawer-backdrop,
:root.high-contrast .notifications-drawer,
:root.high-contrast .document-viewer-backdrop,
:root.high-contrast .document-viewer-modal,
:root.high-contrast .native-tabbar {
  filter: grayscale(1) contrast(1.15);
}

/* ============================================================ */
/* APARENCES ("skins") — v59.8                                   */
/* ------------------------------------------------------------ */
/* Petició de Joan, a partir d'un llenç de disseny amb 5          */
/* direccions visuals noves (mateixa identitat de marca, cadascuna */
/* amb un enfocament d'UX diferent): "m'agraden totes. afegeix-les */
/* com a opció a /admin." Aclarit amb Joan via AskUserQuestion:    */
/* SÍ, reintrodueix conscientment el sistema de skins descartat a  */
/* la v59 (decisió confirmada — veure el comentari de dalt de tot  */
/* d'aquest fitxer sobre `--radius`/`:root` per l'origen dels      */
/* tokens), amb abast TOTA l'aplicació.                            */
/*                                                                  */
/* `applySkin()` a app.js només posa `data-skin="…"` a <body> — la  */
/* resta és CSS pur reaprofitant els MATEIXOS tokens (--blue,       */
/* --teal, --green, --orange, --bg, --ink, --line, --radius…) que   */
/* fa servir TOTA la resta d'aquest full d'estils des de sempre:    */
/* en sobreescriure'ls aquí, cada pantalla existent de l'app        */
/* (Eines, Historial, Configuració, Incidències, Arbitratge,        */
/* Facturació, Partners…) hereta l'aparença nova sense haver de     */
/* tocar cap altra regla — mateix criteri "una sola font de veritat"*/
/* que la resta del projecte. Sense `data-skin` (o amb              */
/* `data-skin="clara"`), NO hi ha cap canvi: és exactament el       */
/* disseny ja existent.                                             */
/* ============================================================ */

/* ---- VIVA: targetes de colors vius, capçalera de gradient,     */
/* enfocada a sentir-se propera i energètica sense sortir-se de la */
/* paleta de marca. ---------------------------------------------- */
body[data-skin="viva"] {
  --radius: 20px;
}
body[data-skin="viva"] .card {
  box-shadow: 0 8px 22px rgba(30, 42, 50, .08);
  border-width: 0;
}
body[data-skin="viva"] .tools-sidebar {
  box-shadow: 0 8px 22px rgba(30, 42, 50, .08);
  border-width: 0;
}
body[data-skin="viva"] .tools-tile {
  border-width: 0;
  box-shadow: 0 5px 14px rgba(30, 42, 50, .07);
  color: var(--ink);
}
/* Rotació de fons tenyits amb els 4 colors de marca, mateix criteri
   que la disposició "dashboard" de la funcionalitat d'Interfície
   (v59.5): mai s'assigna un color fix a una eina concreta, només es
   reparteixen visualment en repetir el cicle de 4 en 4. */
body[data-skin="viva"] .tools-tile:nth-child(4n+1) { background: #eaf3fb; }
body[data-skin="viva"] .tools-tile:nth-child(4n+2) { background: #e6f5ef; }
body[data-skin="viva"] .tools-tile:nth-child(4n+3) { background: #f0f6e5; }
body[data-skin="viva"] .tools-tile:nth-child(4n+4) { background: #fef2df; }
body[data-skin="viva"] .tools-tile:hover, body[data-skin="viva"] .tools-tile:focus-visible {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 10px 22px rgba(30, 42, 50, .14);
}
body[data-skin="viva"] .btn-primary {
  background: linear-gradient(120deg, var(--blue), var(--teal));
  border: none;
}
body[data-skin="viva"] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(120deg, var(--blue-dark), var(--teal-dark));
}
body[data-skin="viva"] .step-title, body[data-skin="viva"] h1, body[data-skin="viva"] h2, body[data-skin="viva"] h3 {
  letter-spacing: -.01em;
}
/* v59.10 — .panel-section és una "targeta dins la targeta" (agrupa
   subseccions de Configuració/Calendari). A "Viva" li donem el mateix
   tractament que a .tools-tile (ombra suau + sense vora), una mica
   més lleuger que el de .card perquè és un element niat. */
body[data-skin="viva"] .panel-section,
body[data-skin="viva"] .panel-section-plain {
  border-width: 0;
  box-shadow: 0 5px 14px rgba(30, 42, 50, .07);
}

/* ---- COMPACTA: llista densa estil configuració, espaiats petits, */
/* pensada per a usuaris habituals que volen veure el màxim         */
/* d'informació de cop. ------------------------------------------- */
body[data-skin="compacta"] {
  --radius: 6px;
}
body[data-skin="compacta"] .card {
  padding: 18px 16px;
  margin: 14px auto;
}
body[data-skin="compacta"] .tools-sidebar {
  padding: 14px 12px;
  margin: 14px 0;
}
body[data-skin="compacta"] .tools-menu {
  gap: 8px;
}
body[data-skin="compacta"] .tools-tile {
  padding: 7px 6px;
  gap: 5px;
  border-width: 1px;
}
body[data-skin="compacta"] .tools-tile-label {
  font-size: 11.5px;
}
body[data-skin="compacta"] .field {
  margin-bottom: 12px;
}
/* v59.10 — mateixa proporció de retall que .card (32px 28px -> 18px
   16px) aplicada al padding per defecte de .panel-section, perquè
   les subseccions de Configuració/Calendari també es vegin denses. */
body[data-skin="compacta"] .panel-section {
  padding: 10px 12px 12px;
  margin-top: 12px;
}
body[data-skin="compacta"] .panel-section-plain {
  padding: 10px 12px;
}
body[data-skin="compacta"] .input-field {
  padding: 9px 11px;
}
body[data-skin="compacta"] .step-title {
  font-size: 18px;
}
body[data-skin="compacta"] .step-lede {
  font-size: 12.5px;
  margin-top: 5px;
}
body[data-skin="compacta"] .tools-tile:hover, body[data-skin="compacta"] .tools-tile:focus-visible {
  transform: none;
  box-shadow: none;
}

/* ---- SUAU: colors pastel, cantonades molt arrodonides, ombres   */
/* toves — pensada per alleugerir la càrrega emocional pròpia d'una */
/* eina de coparentalitat. ----------------------------------------- */
body[data-skin="suau"] {
  --radius: 22px;
  --bg: #fbf9f4;
  --blue: #6a9dbe; --blue-dark: #4a7a97;
  --teal: #5fae94; --teal-dark: #3e8a72;
  --green: #93b96a; --green-dark: #6b9142;
  --orange: #d9a860; --orange-dark: #b8843e;
}
body[data-skin="suau"] .card {
  background: #f1eee4;
  border-width: 0;
  box-shadow: 0 6px 18px rgba(58, 63, 51, .05);
}
body[data-skin="suau"] .tools-sidebar {
  background: #f1eee4;
  border-width: 0;
  box-shadow: 0 6px 18px rgba(58, 63, 51, .05);
}
body[data-skin="suau"] .tools-tile {
  border-width: 0;
  background: #f1eee4;
  box-shadow: none;
  padding: 14px 10px;
}
body[data-skin="suau"] .tools-tile:hover, body[data-skin="suau"] .tools-tile:focus-visible {
  transform: none;
  box-shadow: 0 4px 12px rgba(58, 63, 51, .08);
  border-color: transparent;
}
body[data-skin="suau"] .btn {
  border-radius: 18px;
}
body[data-skin="suau"] .btn-primary {
  box-shadow: 0 4px 12px rgba(74, 122, 151, .18);
}
body[data-skin="suau"] .input-field {
  border-radius: 14px;
  background: #f1eee4;
}
/* v59.10 — mateix tractament tou (sense vora + ombra suau) que .card
   i .tools-tile; el fons es manté var(--paper) (no #f1eee4) perquè
   contrasti amb la targeta contenidora i es vegi com una "targeta
   dins la targeta", igual que passa per defecte a la resta de skins. */
body[data-skin="suau"] .panel-section,
body[data-skin="suau"] .panel-section-plain {
  border-width: 0;
  box-shadow: 0 4px 12px rgba(58, 63, 51, .08);
}

/* ---- NATIVA: navegació per pestanyes inferior i transicions     */
/* animades entre pantalles, imitant la fluïdesa d'una app nativa. */
/* Colors/radi es mantenen com a "Clara" — aquí el que canvia és la */
/* INTERACCIÓ, no la paleta. ---------------------------------------*/
body[data-skin="nativa"] .account-layout {
  padding-bottom: 88px; /* deixa lloc a #native-tabbar, fixa a baix */
}
body[data-skin="nativa"] .card {
  box-shadow: 0 4px 16px rgba(30, 42, 50, .06);
}

.native-tabbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 249, 245, .96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
  align-items: stretch;
  justify-content: space-around;
  gap: 4px;
}
.native-tabbar[hidden] { display: none !important; }
body[data-skin="nativa"] .native-tabbar:not([hidden]) { display: flex; }
.native-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-faint);
  font-family: 'Inter', sans-serif;
}
.native-tab-icon svg { width: 22px; height: 22px; }
.native-tab-label { font-size: 10px; font-weight: 600; line-height: 1.15; }
.native-tab.active { color: var(--blue); }

/* Transició "de fluència entre funcions" — animació curta i subtil
   quan canvia la pantalla central (veure playScreenTransition() a
   app.js). En "Clara"/"Viva"/"Compacta"/"Suau" queda com un fos molt
   discret (millora general, no és el diferencial d'aquell skin); a
   "Nativa" és més marcada (petit desplaçament + escala), perquè és
   precisament l'skin pensat per demostrar aquesta fluïdesa. */
@keyframes skinScreenFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes skinScreenSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.skin-screen-anim {
  animation: skinScreenFadeIn .18s ease;
}
body[data-skin="nativa"] .skin-screen-anim {
  animation: skinScreenSlideIn .3s cubic-bezier(.22, .9, .34, 1);
}