/* ════════════════════════════════════════════════════════════════
   PLA NUTRICIONAL · SKIN DE DESENVOLUPAMENT  (no publicat)
   Reskin sobre estil.css amb la direcció del concepte "JG Services":
   corporate minimalism, vidre glaçat, verd contingut #2e4a3f, Inter bold,
   fons càlid texturat i cantonades generoses.
   Es carrega DESPRÉS d'estil.css i només sobreescriu superfície i color:
   mateixa estructura, mateix app.js.
   ════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

/* Sense guionet automàtic enmig de paraula (mirall d'estil.css, tasca 3). */
*{hyphens:manual;-webkit-hyphens:manual;-ms-hyphens:manual}
.an-sec__nom,.hist-badge,.esp-cal__nom,.s-cal__llegenda,.registre__linia,
.al-chip,.camp-linia label{overflow-wrap:break-word;word-break:normal}

:root{
  /* Paleta clara. La fosca viu al bloc @media del final del fitxer i només
     hi redefineix fitxes: cap fitxa neix allà dins. Cal declarar l'esquema
     perquè, si no, un mòbil en mode fosc enfosqueix pel seu compte els
     select, els input i les caselles. */
  color-scheme:light;

  /* paleta */
  --paper:#f3f1ec;
  --panel:#ffffff;
  --ink:#14181a;
  --grafit:#3b4245;
  --apagat:#5f6663;
  --filet:rgba(20,24,26,.10);
  --filet-fort:rgba(20,24,26,.18);
  --verd:#2e4a3f;              /* accent: hereten botons, actiu, focus, selecció */
  --verd-clar:rgba(46,74,63,.10);
  --ambre:#8a6a2f;
  --ambre-clar:#f5efe2;
  --alerta:#8c3a2f;
  --ok:#1f7a4d;

  /* derivats de l'accent i dels estats. Existien com a literals escampats;
     ara són fitxes perquè el bloc fosc els pugui girar d'una sola peça. */
  --sobre-accent:#fff;              /* text a sobre de verd/ok/ambre plens */
  --verd-fort:#23392f;              /* accent en hover */
  --verd-filet:rgba(46,74,63,.20);  /* vores fines en to accent */
  --verd-filet-fort:rgba(46,74,63,.40);
  --ambre-filet:rgba(138,106,47,.30);
  --alerta-clar:rgba(140,58,47,.07);
  --ok-clar:rgba(31,122,77,.10);
  --massis:#14181a;                 /* superfície opaca de màxim contrast */
  --sobre-massis:#fff;              /* i la seva tinta */
  --focus-anell:rgba(46,74,63,.18);

  /* washes del fons del body */
  --llum-a:rgba(46,74,63,.13);
  --llum-b:rgba(138,106,47,.12);

  /* tipografia: tot Inter */
  --serif:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Inter",ui-monospace,"SF Mono",Menlo,monospace;

  /* vidre */
  --glass:rgba(255,253,248,.62);
  --glass-strong:rgba(255,253,248,.82);
  --glass-suau:rgba(255,253,248,.45);   /* vidre gairebé pla (registre d'àpats) */
  --glass-brd:rgba(20,24,26,.10);
  --hover:rgba(255,253,248,.55);        /* hover marcat sobre vidre */
  --hover-suau:rgba(20,24,26,.018);     /* hover just insinuat */
  --blur:blur(20px) saturate(175%);
  --ombra:0 18px 50px -18px rgba(20,24,26,.24), 0 6px 16px -10px rgba(20,24,26,.12);
  --inset:inset 0 1px 0 rgba(255,255,255,.68);
  --rad:22px;
  --rad-s:14px;

  /* Definides a estil.css: es repeteixen aquí amb el mateix valor perquè el
     bloc fosc no sigui l'únic lloc on apareixen. */
  --pissarra:#3f5560;
  --pissarra-clar:#eef1f3;
  --elev:0 1px 2px rgba(20,24,26,.045);
  --elev-forta:0 2px 10px rgba(20,24,26,.07);
}

body{
  background:var(--paper);
  background-image:
    radial-gradient(1100px 560px at 8% -12%, var(--llum-a), transparent 60%),
    radial-gradient(820px 480px at 100% -6%, var(--llum-b), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  background-attachment:fixed;
  letter-spacing:-.005em;
}
::selection{background:var(--verd);color:var(--sobre-accent)}
:focus-visible{outline:2px solid var(--verd);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ─────────── àtoms tipogràfics ─────────── */
.kicker,.vista .kicker{
  display:inline-flex;align-items:center;
  font-family:var(--sans);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--verd);background:var(--verd-clar);
  border:1px solid var(--verd-filet);border-radius:999px;
  padding:6px 13px;margin:0 0 16px;
}
.kicker--clar{
  color:rgba(255,255,255,.9);background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
}
.titular,.acces__nom,.acces__titol{
  font-family:var(--sans);font-weight:800;letter-spacing:-.035em;line-height:1.05;
  text-wrap:balance;
}
.entrada{font-family:var(--sans);font-style:normal;color:var(--apagat);font-size:15.5px}
.meta{font-family:var(--sans);font-size:12.5px;color:var(--apagat);letter-spacing:0}
.rubrica,.cat__nom{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.13em;
  color:var(--verd);border-bottom:1px solid var(--filet);padding-bottom:10px;
}
.num{font-family:var(--sans);font-weight:700;color:var(--verd);letter-spacing:0}
.ajuda{font-size:13.5px;color:var(--apagat)}
.vista .capcalera::before{display:none}
.capcalera{margin-bottom:30px}

/* ─────────── botons i enllaços ─────────── */
.btn{
  font-family:var(--sans);font-weight:600;font-size:14.5px;letter-spacing:normal;
  text-transform:none;padding:12px 26px;border-radius:12px;
  background:var(--verd);color:var(--sobre-accent);
  box-shadow:0 10px 22px -10px rgba(46,74,63,.45);
  transition:transform .12s ease, background .16s ease, box-shadow .16s ease;
}
.btn:hover{background:var(--verd-fort);transform:translateY(-1px);box-shadow:0 14px 28px -10px rgba(46,74,63,.5)}
.btn:disabled{opacity:.45;transform:none;box-shadow:none}
.btn--suau{
  background:var(--glass-strong);color:var(--ink);border:1px solid var(--glass-brd);
  box-shadow:var(--inset);
}
.btn--suau:hover{background:var(--panel);color:var(--ink);box-shadow:var(--inset)}
.enllac-suau{
  font-family:var(--sans);font-weight:600;text-transform:none;letter-spacing:normal;
  font-size:12.5px;color:var(--apagat);border-bottom:1px solid var(--filet-fort);
}
.enllac-suau:hover{color:var(--verd);border-color:var(--verd)}
.avis{font-family:var(--sans);font-size:13px;letter-spacing:0}
.avis--ok,.avis.ok{color:var(--ok)}

/* ─────────── capçalera flotant ─────────── */
.masthead{
  position:sticky;top:10px;z-index:40;
  margin:10px 14px 0;padding:12px 18px;border-radius:18px;border:1px solid var(--glass-brd);
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--ombra),var(--inset);
}
.masthead__nom{font-family:var(--sans);font-weight:800;letter-spacing:-.02em;font-size:16px}
.masthead__rol{font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.12em;color:var(--apagat)}
.masthead__qui{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.1em}

/* ─────────── navegació flotant ─────────── */
.nav{
  left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));
  border-radius:18px;border:1px solid var(--glass-brd);border-top:1px solid var(--glass-brd);
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--ombra),var(--inset);
  padding-bottom:0;overflow:hidden;
}
.nav__item{
  font-family:var(--sans);font-size:11.5px;font-weight:600;text-transform:none;letter-spacing:.01em;
  color:var(--apagat);border-top:0;margin-top:0;padding:13px 4px;
  border-radius:12px;transition:color .14s ease, background .14s ease;
}
.nav__item.actiu{color:var(--sobre-accent);background:var(--verd);border-top-color:transparent}
.nav__item:disabled{opacity:.3}
@media (min-width:760px){
  .nav{
    position:static;margin:14px auto 0;max-width:760px;left:auto;right:auto;
    border-bottom:1px solid var(--glass-brd);padding:6px;gap:6px;
  }
  .nav__item{flex:1;padding:11px 6px;border-bottom:0}
  .nav__item.actiu{border-bottom-color:transparent}
}
.vista{padding-bottom:120px}
@media (min-width:760px){.vista{padding-bottom:90px}}

/* ─────────── accés ─────────── (mateix aire que la portada: sobre paper, centrat) */
.acces{background:var(--paper)}
.acces__marca{background:none;color:var(--ink)}
.acces__rol{font-family:var(--sans);font-weight:500;color:var(--apagat);letter-spacing:0}
.acces__lema{display:none}
.acces__porta{
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:0;border-radius:0;box-shadow:none;
  margin:30px auto 0;padding:0;max-width:340px;
}
@media (min-width:800px){.acces__porta{margin:30px auto 0;padding:0}}
.acces__porta .btn{width:100%;justify-content:center}
.acces__porta form + form{margin-top:20px}
#oblidat-link{display:inline-block;margin-top:16px}
/* ─────────── camps de formulari ─────────── */
.camp-linia label,.etiqueta{
  font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--apagat);
}
.camp-linia input,.camp-linia select,#d-data,textarea{
  border:1px solid var(--glass-brd);border-bottom:1px solid var(--glass-brd);
  border-radius:12px;background:var(--glass-strong);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:11px 13px;box-shadow:var(--inset);
}
.camp-linia input:focus,.camp-linia select:focus,textarea:focus{
  outline:none;border-color:var(--verd);border-bottom-width:1px;
  box-shadow:0 0 0 3px var(--focus-anell);
}
textarea{border-radius:var(--rad-s)}
.camp-check{align-items:center}
.camp-check input{accent-color:var(--verd)}

/* ─────────── PAUTA: selectors i prescripció ─────────── */
.selectors{
  border:1px solid var(--glass-brd);border-radius:var(--rad);
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--ombra),var(--inset);
  padding:8px 20px;margin-bottom:26px;
}
.selector + .selector{border-color:var(--filet)}
.selector label{font-family:var(--sans);font-weight:600;letter-spacing:.1em}
.selector select{font-family:var(--sans);font-weight:700;font-size:18px;letter-spacing:-.02em}
.selector select:focus{color:var(--verd)}

.prescripcio{
  background:linear-gradient(155deg,#14181a 0%,#2e4a3f 100%);color:#fff;
  border-radius:var(--rad);padding:22px 22px 22px;margin-bottom:32px;
  box-shadow:0 22px 48px -22px rgba(20,24,26,.42);
}
.prescripcio__peu{font-family:var(--sans);font-weight:600;color:rgba(255,255,255,.62);letter-spacing:.13em}
/* A la base, `.xifres` té un fons blanc i `gap:1px`, i cada `.xifra` el tapa amb
   el seu propi fons: el blanc només s'entreveu com a filets d'1px entre cel·les.
   Aquí les cel·les són transparents, o sigui que el fons s'ha de fer panell de
   debò: sense gap (si no, el blanc surt sencer) i amb els separadors com a
   vores. El padding va simètric perquè no sobri aire a sota de l'última fila. */
.xifres{
  background:rgba(255,255,255,.09);border-radius:14px;overflow:hidden;
  gap:0;padding:0;
}
.xifra{background:transparent;padding:13px 6px 12px;text-align:center}
.xifra:nth-child(n+2){padding-left:6px;border-left:1px solid rgba(255,255,255,.14)}
.xifra b{font-family:var(--sans);font-weight:800;letter-spacing:-.03em}
.xifra span{font-family:var(--sans);font-weight:500;color:rgba(255,255,255,.62);margin-top:4px}

/* ─────────── PAUTA: àpats ─────────── */
.apat{
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:var(--rad);
  box-shadow:var(--ombra),var(--inset);
  padding:20px 22px 8px;margin-bottom:18px;
}
.apat__cap{border-bottom:1px solid var(--filet);padding-bottom:11px}
.apat__nom{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.14em;color:var(--verd)}
.apat__desc{font-family:var(--sans);font-style:normal;color:var(--apagat);font-size:14px}
.aliment{border-bottom:1px solid var(--filet)}
.aliment:last-child{border-bottom:0}
.aliment__nom{font-weight:500}
.aliment__nota{font-family:var(--sans);font-size:11.5px;color:var(--apagat)}
.aliment__g{font-family:var(--sans);font-weight:700;font-size:14px}

/* ─────────── formularis i seccions ─────────── */
.grup,.seccio,#panell-acces form{
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:var(--rad);
  box-shadow:var(--ombra),var(--inset);
  padding:24px 22px 14px;margin-bottom:18px;
}
.seccio{margin-top:22px}
#panell-acces form + form{margin-top:20px}
.grup legend{
  font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:-.01em;
  color:var(--ink);text-transform:none;padding:0;
}
.peu-formulari{border-top:1px solid var(--filet);padding-top:20px;margin-top:20px}
.fila-dia{gap:18px}

/* segments (A/B/C/D) com a control segmentat */
.segments{
  display:flex;gap:6px;padding:6px;border-radius:14px;
  background:var(--glass-strong);border:1px solid var(--glass-brd);box-shadow:var(--inset);
}
.segments button{
  flex:1;border:0;background:transparent;border-radius:10px;padding:10px 6px;
  font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:0;
  color:var(--apagat);cursor:pointer;transition:background .14s ease,color .14s ease;
}
.segments button:hover{color:var(--ink)}
.segments button.on{background:var(--verd);color:var(--sobre-accent);box-shadow:0 6px 14px -6px rgba(46,74,63,.45)}
.segments button[data-p="D"].on{background:var(--ambre);box-shadow:0 6px 14px -6px rgba(138,106,47,.6)}
.segments--mini button{padding:7px 4px;font-size:12px}

/* registre d'àpats */
.apat-reg{border-radius:var(--rad-s);border:1px solid var(--filet);padding:14px;margin-bottom:12px;background:var(--glass-suau)}
.apat-reg--lliure{border-color:var(--ambre);background:var(--ambre-clar)}
.apat-reg__nom{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:0}
.gana label b{font-family:var(--sans);font-weight:700;color:var(--verd)}
.ganes input[type=range]{accent-color:var(--verd)}
.marca-lliure input{accent-color:var(--ambre)}
.resum-compliment{border-radius:12px;padding:12px 14px;font-family:var(--sans);font-size:13.5px}
.resum-compliment.es-si{background:var(--ok-clar);border-left:3px solid var(--ok);color:var(--ok)}
.resum-compliment.es-parcial{background:var(--ambre-clar);border-left:3px solid var(--ambre);color:var(--ambre)}

.afegir{
  display:inline-block;border:1px dashed var(--verd-filet-fort);border-radius:12px;
  padding:11px 18px;color:var(--verd);font-family:var(--sans);font-weight:600;font-size:13.5px;
  text-transform:none;letter-spacing:0;cursor:pointer;
}
.afegir:hover{background:var(--verd-clar);border-style:solid}
.galeria{gap:10px}
.foto img,.tires img{border-radius:12px}
/* la base pinta aquest botó amb `background:var(--ink);color:#fff`, i en fosc
   la tinta és crema: quedaria blanc sobre crema. Va per fitxes. */
.foto button{background:var(--massis);color:var(--sobre-massis)}

/* ─────────── SEGUIMENT ─────────── */
.indicadors{gap:12px}
.indicador{
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:var(--rad-s);
  box-shadow:var(--ombra),var(--inset);padding:16px 14px;
}
.indicador b{font-family:var(--sans);font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--verd)}
.indicador span{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.08em;color:var(--apagat)}
.registre{
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-left:3px solid var(--verd);
  border-radius:var(--rad-s);box-shadow:var(--ombra),var(--inset);
  padding:16px 18px;margin-bottom:12px;
}
.registre:first-child{border-top:1px solid var(--glass-brd)}
.registre>summary{padding:16px 18px}
.registre[open]>summary{border-bottom:1px solid var(--glass-brd)}
.registre__cos{padding:14px 18px 18px}
.registre__linia{font-family:var(--sans);color:var(--apagat)}
.registre__data{font-family:var(--sans);font-weight:700;letter-spacing:-.01em}
/* calendari del seguiment */
.s-cal__titol{font-family:var(--sans);font-weight:700;letter-spacing:-.01em}
.s-cal__dia{border:1px solid var(--glass-brd);background:var(--glass-suau)}
.s-cal__dia--completa{border-color:var(--verd)}
.s-cal__dia--curta{border-color:var(--pissarra)}
.s-cal__llegenda{font-family:var(--sans);font-weight:600;letter-spacing:.02em}
.apat-sup__cap b{font-family:var(--sans);font-weight:600;color:var(--verd)}
.apat-sup__text{font-family:var(--sans);font-style:normal;color:var(--apagat)}
.apat-sup--lliure{border-left:2px solid var(--ambre)}
/* 2 · mòbil estret: cap fill de la supervisió eixampla la pàgina */
.indicadors > .indicador,
.registre,.dades,.dades div,.dades dd,.apats-sup,.apat-sup,.apat-sup__cap,.apat-sup__cap span{min-width:0}
.tires{overflow-x:auto}

/* pastilles d'estat */
.marca,.marca--si,.marca--no,.marca--parcial,.marca--lliure,.marca--perfil{
  border-radius:999px;padding:4px 11px;font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.04em;
}
.marca--si{background:var(--ok);border-color:var(--ok);color:var(--sobre-accent)}
.marca--parcial{background:var(--ambre-clar);border-color:var(--ambre);color:var(--ambre)}
.marca--lliure{background:var(--ambre-clar);border-color:var(--ambre);color:var(--ambre)}
.marca--perfil{background:var(--verd-clar);border-color:var(--verd-filet);color:var(--verd)}

/* ─────────── HISTÒRIA CLÍNICA ─────────── */
.hist-nota{
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-left:3px solid var(--verd-filet);
  border-radius:var(--rad-s);box-shadow:var(--ombra),var(--inset);
}
.hist-nota--r24{border-left-color:var(--verd)}
.hist-nota__text{font-family:var(--sans)}
.hist-nota__meta{font-family:var(--sans);font-weight:500;text-transform:none;letter-spacing:.02em}
.hist-macros th,.hist-macros td{border-bottom:1px solid var(--glass-brd)}
.hist-macros__tot th,.hist-macros__tot td{color:var(--verd)}
.hist-dl div{border-top:1px solid var(--glass-brd)}

/* ─────────── MENÚS ─────────── */
.repertori{gap:12px}
.menu-t{
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:var(--rad-s);
  box-shadow:var(--ombra),var(--inset);padding:4px 18px;margin-bottom:12px;
}
.menu-t summary{padding:14px 0}
.menu-t__num{font-family:var(--sans);font-weight:800;color:var(--verd)}
.menu-t__nom{font-family:var(--sans);font-weight:700;letter-spacing:-.01em}
.menu-t[open] .menu-t__nom{color:var(--verd)}
.menu-t__linia b{font-family:var(--sans);font-weight:600}

/* ─────────── COMPRA ─────────── */
.taula-pla{border-radius:var(--rad-s);overflow:hidden}
.pla-fila{border-color:var(--filet);padding:10px 0}
.pla-fila .dia{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--apagat)}
.pla-fila select{border-radius:10px;padding:7px 9px;background:var(--glass-strong);border:1px solid var(--glass-brd)}
.pla-fila select:focus{border-bottom-color:var(--verd);border-color:var(--verd)}
.balanc{
  background:var(--verd-clar);border:1px solid var(--verd-filet);border-radius:12px;
  padding:12px 14px;font-family:var(--sans);font-size:13.5px;color:var(--verd);
}
.item{border-radius:10px;padding:10px 12px;border-left:2px solid transparent}
.item:hover{background:var(--hover)}
.item.fet{background:var(--verd-clar);border-left-color:var(--verd)}
.item.fet .item__nom,.item.fet .item__q{color:var(--verd)}
.item__q,.item__aprox{font-family:var(--sans);font-weight:600}
.llista-check input{accent-color:var(--verd)}
.equiv,.dades dt{font-family:var(--sans);color:var(--apagat)}
.buit{font-family:var(--sans);font-style:normal;color:var(--apagat)}

.rubrica-fila .rubrica{margin-bottom:14px}
#compra-neteja{font-family:var(--sans);font-weight:600;color:var(--verd)}
.afegir-extra input{
  border:1px solid var(--glass-brd);border-radius:10px;background:var(--glass-strong);
  padding:9px 11px;
}
.afegir-extra input:focus{border-color:var(--verd)}
.extres{border-top:0}
.extra{
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:var(--rad-s);
  box-shadow:var(--ombra),var(--inset);
  margin:0 0 10px;padding:11px 14px;
}
.extra:hover{background:var(--glass-strong)}
.extra__check input{width:17px;height:17px;accent-color:var(--verd)}
.extra__text{font-family:var(--sans)}
.extra__qui{font-family:var(--sans);font-weight:600;color:var(--verd)}

/* ─────────── consulta: pacients, alta, vista pacient, anamnesi ─────────── */
.mirall{
  background:var(--ambre-clar);border-bottom:1px solid var(--ambre-filet);
  border-radius:0 0 var(--rad-s) var(--rad-s);
}
.mirall__txt{font-family:var(--sans);font-weight:600;text-transform:none;letter-spacing:.01em}

.pac-barra{border-bottom:0;background:transparent}
.pac-barra__nom{font-family:var(--sans);font-weight:700;letter-spacing:-.01em}
/* la sub-navegació no és la barra flotant: aquí és una tira de fitxes */
.nav--sub{
  position:static;left:auto;right:auto;bottom:auto;margin:10px 0 0;max-width:none;
  border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;padding:0 22px 2px;overflow-x:auto;gap:8px;
}
.nav__sub{
  font-family:var(--sans);font-size:11.5px;font-weight:600;text-transform:none;letter-spacing:.01em;
  color:var(--apagat);border-bottom:0;border-radius:999px;padding:8px 14px;
  background:var(--glass);border:1px solid var(--glass-brd);
  transition:color .14s ease, background .14s ease;
}
.nav__sub.actiu{color:var(--sobre-accent);background:var(--verd);border-color:transparent}

.pacient{
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-left:3px solid var(--verd);
  border-radius:var(--rad-s);box-shadow:var(--ombra),var(--inset);
}
.pacient__nom{font-family:var(--sans);font-weight:700;letter-spacing:-.02em}
.pacient__dades dt{font-family:var(--sans);font-weight:600;text-transform:none;letter-spacing:.01em}

.fet-alta{
  background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-left:3px solid var(--verd);
  border-radius:var(--rad-s);box-shadow:var(--ombra),var(--inset);
}

.alertes{
  font-family:var(--sans);font-weight:600;text-transform:none;letter-spacing:.01em;
  border-radius:var(--rad-s);background:var(--alerta-clar);
}
.anamnesi{background:none;gap:10px}
.an-sec{
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:var(--rad-s);
  box-shadow:var(--ombra),var(--inset);overflow:hidden;
}
.an-sec__nom{font-family:var(--sans);font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:13.5px}
.an-sec__n{font-family:var(--sans);font-weight:600}
.an-sec[open]>summary{border-bottom:1px solid var(--glass-brd)}
.camp-an textarea{border:1px solid var(--glass-brd);border-radius:var(--rad-s);background:var(--glass)}
/* R24h: selector d'aliments */
.r24w__res{border:1px solid var(--glass-brd);border-radius:var(--rad-s);background:var(--glass-strong)}
.r24w__opt{border-bottom:1px solid var(--glass-brd);font-family:var(--sans)}
.r24w__opt:hover{background:var(--hover)}
.r24w__item{border-bottom:1px solid var(--glass-brd);font-family:var(--sans)}
.r24w__opt-kcal,.r24w__u{font-family:var(--sans);font-weight:600}
.peu-enganxat{
  background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-top:1px solid var(--glass-brd);border-radius:var(--rad-s);padding:14px 16px;
}
@media (max-width:759px){.peu-enganxat{bottom:96px}}

/* ─────────── aliments (BEDCA) i nutrició esportiva ─────────── */
.aliment{
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-left:3px solid var(--verd);
  border-radius:var(--rad-s);box-shadow:var(--ombra),var(--inset);overflow:hidden;
}
.aliment__cap{transition:background .14s ease}
.aliment__cap:hover{background:var(--hover)}
.aliment__nom{font-family:var(--sans);font-weight:700;letter-spacing:-.02em}
.aliment__cat{font-family:var(--sans);font-weight:600;text-transform:none;letter-spacing:.01em}
.aliment__caps b{font-weight:700;color:var(--verd)}
.aliment__fitxa{border-top:1px solid var(--glass-brd)}
.al-grup__nom{font-family:var(--sans);font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:13.5px}
.al-grup__files dd{font-family:var(--sans);font-weight:600}

.esp-cal__nom{font-family:var(--sans);font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:13.5px}
.esp-cal[open]>summary .esp-cal__nom{color:var(--verd)}
.esp-taula th,.esp-taula td{border-bottom:1px solid var(--glass-brd)}
.esp-taula__tot th,.esp-taula__tot td{color:var(--verd)}
.esp-taula__u{font-family:var(--sans);font-weight:600;letter-spacing:.01em}
.esp-protocol{
  background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-left:3px solid var(--verd);
  border-radius:var(--rad-s);box-shadow:var(--ombra),var(--inset);
}

/* ─────────── lupa ─────────── */
.lupa{background:rgba(20,24,26,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lupa img{border-radius:var(--rad-s);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.lupa__x{font-family:var(--sans);font-weight:600}

/* ─────────── cinta DEV ─────────── */
.dev-ribbon{
  position:fixed;left:16px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:60;
  font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sobre-massis);background:var(--massis);opacity:.8;
  padding:7px 13px;border-radius:999px;pointer-events:none;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.5);
}
@media (min-width:760px){.dev-ribbon{bottom:16px}}

/* ════════════════════════════════════════════════════════════════
   MODE FOSC (segueix la preferència del sistema)
   El terra es torna gris terrós càlid, mai negre pur ni blau. La tinta
   es torna crema. El vidre continua sent vidre: panells foscos
   translúcids amb un filet clar a sobre i un reflex superior molt
   tènue, no caixes grises planes. Els accents pugen de lluminositat i
   baixen de saturació, i per això la tinta que va a sobre d'un accent
   ple passa de blanc a fosc (--sobre-accent).
   Aquí només es redefineixen fitxes; les poques regles de component
   que hi ha són literals d'estil.css que no es poden tocar des d'aquí.
   ════════════════════════════════════════════════════════════════ */
/* ─────────── antropometria (ISAK) i simulador energètic ───────────
   Mateixa estructura que a estil.css; aquí només hi ha superfície i color, i
   tot passa per fitxes perquè el bloc fosc del final ho giri d'una peça. */
.ant-sessio{
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-left:3px solid transparent;
  border-radius:var(--rad-s);box-shadow:var(--ombra),var(--inset);
  transition:background .14s ease;
}
.ant-sessio:hover{background:var(--hover)}
.ant-sessio.actiu{border-left-color:var(--verd);border-color:var(--glass-brd)}
.ant-sessio__data{font-family:var(--sans);font-weight:700;letter-spacing:-.02em}
.ant-sessio__dades{font-family:var(--sans);font-weight:600;letter-spacing:.01em}

.ant-avisos{
  background:var(--alerta-clar);border:1px solid var(--alerta);border-left-width:3px;
  border-radius:var(--rad-s);
}
.ant-avisos__nom{font-family:var(--sans);font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:13.5px}

.ant-mesures{background:none;gap:10px}
.ant-grup{
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:var(--rad-s);
  box-shadow:var(--ombra),var(--inset);overflow:hidden;
}
.ant-grup__nom{font-family:var(--sans);font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:13.5px}
.ant-grup__u{font-family:var(--sans);font-weight:600;letter-spacing:.01em}
.ant-grup[open]>summary{border-bottom:1px solid var(--glass-brd)}
.ant-mesura--cap{
  font-family:var(--sans);font-weight:600;text-transform:none;letter-spacing:.01em;
  border-bottom:1px solid var(--glass-brd);
}
.ant-preses>span{font-family:var(--sans);font-weight:600;text-transform:none;letter-spacing:.01em}
.ant-presa{
  border:1px solid var(--glass-brd);border-radius:var(--rad-s);background:var(--glass-suau);
  font-family:var(--sans);font-weight:600;padding:7px 9px;
}
.ant-presa:focus{border-color:var(--verd);box-shadow:0 0 0 3px var(--focus-anell)}
.ant-presa--cal{border-color:var(--alerta)}
.ant-mesura__mitjana{font-family:var(--sans);font-weight:700;color:var(--verd)}
.ant-cal{
  font-family:var(--sans);font-weight:700;text-transform:none;letter-spacing:.01em;
  border-radius:999px;background:var(--alerta-clar);border-color:var(--alerta);
}
.ant-u{font-family:var(--sans);font-weight:600;letter-spacing:.01em}

.ant-bloc{
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-top:2px solid var(--verd);
  border-radius:var(--rad-s);box-shadow:var(--ombra),var(--inset);
}
.ant-bloc__nom{font-family:var(--sans);font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:14px}
.ant-dl dd{font-family:var(--sans);font-weight:600}
.ant-dl__tot{border-top:1px solid var(--glass-brd)}
.ant-dl__tot dd{color:var(--verd)}
.ant-soma{color:var(--verd)}
.ant-soma__t{font-family:var(--sans);font-weight:600;fill:var(--apagat)}

.sim-entrades input[type=range]{accent-color:var(--verd)}
.sim-nota{
  border-left:3px solid var(--verd);background:var(--verd-clar);
  border-radius:0 var(--rad-s) var(--rad-s) 0;padding:14px 16px;
}

@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;

    /* paleta */
    --paper:#1a1815;
    --panel:#24211c;
    --ink:#f2efe6;                 /* crema, no blanc pur */
    --grafit:#cfc9bd;
    --apagat:#a5a094;
    --filet:rgba(255,255,255,.10);
    --filet-fort:rgba(255,255,255,.20);
    --verd:#8fc0a4;
    --verd-clar:rgba(143,192,164,.13);
    --ambre:#d9ad6a;
    --ambre-clar:#2e2718;
    --alerta:#e69080;
    --ok:#79c79b;

    /* derivats de l'accent i dels estats */
    --sobre-accent:#151812;        /* els accents ara són clars: tinta fosca */
    --verd-fort:#a8d3ba;           /* hover: puja, no baixa */
    --verd-filet:rgba(143,192,164,.28);
    --verd-filet-fort:rgba(143,192,164,.45);
    --ambre-filet:rgba(217,173,106,.32);
    --alerta-clar:rgba(230,144,128,.12);
    --ok-clar:rgba(121,199,155,.13);
    --massis:#2f2b25;              /* on el clar posava tinta, el fosc puja un to */
    --sobre-massis:var(--ink);
    --focus-anell:rgba(143,192,164,.28);

    /* washes del fons: en fosc han d'aclarir, no enfosquir */
    --llum-a:rgba(143,192,164,.09);
    --llum-b:rgba(217,173,106,.07);

    /* vidre */
    --glass:rgba(58,54,47,.55);
    --glass-strong:rgba(62,58,50,.78);
    --glass-suau:rgba(255,255,255,.04);
    --glass-brd:rgba(255,255,255,.11);
    --hover:rgba(255,255,255,.05);
    --hover-suau:rgba(255,255,255,.03);
    /* l'ombra projectada gairebé no llegeix sobre terra fosc: es rebaixa i
       el relleu passa a fer-lo el filet clar de dalt */
    --ombra:0 16px 40px -20px rgba(0,0,0,.7), 0 4px 12px -8px rgba(0,0,0,.5);
    --inset:inset 0 1px 0 rgba(255,255,255,.07);

    --pissarra:#9fb8c6;
    --pissarra-clar:#242c31;
    --elev:0 0 0 1px rgba(255,255,255,.10);
    --elev-forta:0 0 0 1px rgba(255,255,255,.16);
  }

  /* estil.css fixa aquest tint amb un literal clar (#eeefec) */
  #vista-menus,#vista-anamnesi{--accent-tint:#26241f}

  /* estil.css: `background:#f7eae8`, un rosa clar sota text d'alerta clar */
  .marca--no{background:#3a221e}

  /* estil.css: `text-decoration-color:rgba(46,74,63,.5)`, verd fosc sobre fosc */
  .item.fet .item__nom{text-decoration-color:rgba(143,192,164,.55)}

  /* estil.css: `background:rgba(20,24,26,.02)`, un tint fosc que aquí no es veu */
  .resum-compliment{background:rgba(255,255,255,.03)}

  /* el degradat de la prescripció ja és fosc i s'aguanta, però la seva ombra
     (rgba(20,24,26,.42)) desapareix contra el terra: passa a filet */
  .prescripcio{box-shadow:0 0 0 1px rgba(255,255,255,.07)}

  /* el logotip de la capçalera és negre sobre transparent i es perdria sobre
     el vidre fosc; hi ha la versió blanca al mateix directori */
  .marca-logo{content:url("/jg-white.png")}
}

/* ════════════════════════════════════════════════════════════════
   ARRANJAMENTS SOBRE LA PELL DE VIDRE
   Els sis punts reportats, ajustats al vidre i al mode fosc. L'estructura
   és a estil.css; aquí només superfície, color i el moviment de la
   capçalera.
   ════════════════════════════════════════════════════════════════ */

/* 1 · ingredients de la pauta: la caixa de vidre necessita coixí interior */
.apat .aliment{
  padding:11px 14px;border-radius:var(--rad-s);margin-bottom:8px;
}
.apat .aliment:last-child{margin-bottom:0;border-bottom:1px solid var(--glass-brd)}

/* 2 · cantonades arrodonides com la resta de la pell */
input[type=search]{-webkit-appearance:none;appearance:none;border-radius:12px}
.al-taula-wrap{
  border:1px solid var(--glass-brd);border-radius:var(--rad-s);
  overflow-x:auto;overflow-y:hidden;background:var(--glass-suau);
}

/* 3 · capçalera que es recull quan la pàgina està quieta ──────────
   Quieta = <body> sense .scroll-actiu. La capçalera es fa prima i
   amaga "El meu compte"/"Sortir"; la barra inferior baixa fora de
   pantalla. Qualsevol scroll torna .scroll-actiu durant 1 s (app.js).
   Els enllaços de la nav no s'amaguen amb display:none: es pleguen amb
   opacitat/altura i, si el focus hi entra, es tornen a desplegar. */
.masthead{transition:padding .3s ease}
.masthead__dreta{transition:gap .3s ease}
.masthead__dreta #compte-link,
.masthead__dreta #sortir{
  transition:max-width .3s ease,opacity .2s ease,transform .3s ease;
}
body:not(.scroll-actiu) .masthead{padding-top:8px;padding-bottom:8px}
body:not(.scroll-actiu) .masthead__dreta{gap:0}
body:not(.scroll-actiu) .masthead__dreta #compte-link,
body:not(.scroll-actiu) .masthead__dreta #sortir{
  max-width:0;opacity:0;transform:translateX(8px);
  overflow:hidden;pointer-events:none;white-space:nowrap;border:0;
}
@media (max-width:759px){
  .nav{transition:transform .35s ease,opacity .25s ease}
  body:not(.scroll-actiu) .nav:not(:focus-within){
    transform:translateY(calc(100% + 28px));opacity:0;pointer-events:none;
  }
}
@media (prefers-reduced-motion:reduce){
  .masthead,.masthead__dreta,.nav,
  .masthead__dreta #compte-link,.masthead__dreta #sortir{transition:none!important}
}

/* 10 · vores de les dues barres flotants: un vel de "paper" tapa el bocí
   de pàgina que es cola pel marge de sobre la capçalera i de sota la nav.
   S'amaga a la pantalla d'accés (no hi ha barres) i a l'escriptori per
   sota (la nav va dins del flux). */
body::before,body::after{
  content:"";position:fixed;left:0;right:0;pointer-events:none;z-index:29;
}
body::before{
  top:0;height:26px;z-index:39;
  background:linear-gradient(var(--paper) 42%,transparent);
}
body::after{
  bottom:0;height:calc(30px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,var(--paper) 55%);
}
@media (min-width:760px){body::after{display:none}}
body:has(#login:not([hidden]))::before,
body:has(#login:not([hidden]))::after{display:none}

/* 10 · en mòbil el contingut NO s'ha de veure per sobre ni per sota de les
   barres. Capçalera i navegació totalment opaques (res de vidre translúcid
   amb el contingut passant-hi per sota), per sobre dels vels, i el vel passa
   de degradat a paper sòlid, alt fins a cobrir la inserció segura. */
@media (max-width:759px){
  .masthead{
    background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;z-index:41;
  }
  .nav{
    background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;z-index:41;
  }
  body::before{
    height:calc(12px + env(safe-area-inset-top));
    background:var(--paper);
  }
  body::after{
    height:calc(16px + env(safe-area-inset-bottom));
    background:var(--paper);
  }
}

/* 9 · eines de la taula d'aliments sobre vidre */
.al-chip{
  text-transform:none;letter-spacing:.01em;color:var(--apagat);
  background:var(--glass);border-color:var(--glass-brd);
  transition:color .14s ease,background .14s ease,border-color .14s ease;
}
.al-chip[aria-pressed="true"]{color:var(--sobre-accent);background:var(--verd);border-color:transparent}
.al-quant{letter-spacing:.06em}
.al-quant__in{
  border:1px solid var(--glass-brd);border-radius:10px;background:var(--glass-strong);
  box-shadow:var(--inset);
}
.al-quant__in:focus{border-color:var(--verd);box-shadow:0 0 0 3px var(--focus-anell)}
.al-taula th,.al-taula td{border-bottom:1px solid var(--glass-brd)}
.al-taula thead th{background:var(--glass-suau)}
.al-grup-cap th{color:var(--verd);background:var(--verd-clar)}
.al-cel--calc{color:var(--verd)}