/* =====================================================================
   Norn Gestió · estils
   Paleta Norn (sense «Nit de brasa»), fons beix difuminat, vidre esmerilat,
   un sol color d'accent (Taronja sol) per a tot el que es pot tocar.
   ===================================================================== */
:root {
  --blanc: #FBF1E7;
  --pressec: #F3C08C;
  --taronja: #F47A21;
  --taronja-fosc: #D9661A;
  --gris: #3A3632;
  --gris-2: #8A817A;
  --gris-3: #B5ADA6;
  --ambre: #B85426;
  --vidre: rgba(251, 241, 231, .62);
  --targeta: rgba(255, 250, 244, .66);
  --targeta-forta: rgba(255, 255, 255, .78);
  --tou: rgba(243, 192, 140, .35);
  --linia: rgba(58, 54, 50, .07);

  /* semàfor: suau i fora de la marca */
  --s-gris: #BDB6AE;
  --s-groc: #E9C04F;
  --s-verd: #6DB383;
  --s-vermell: #E07B6E;
  --vermell-text: #B5574B;

  --m-escola: #F47A21;
  --m-events: #D9907E;
  --m-skadi: #A9A46A;

  --f-titol: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-gran: 22px;
  --r-mitja: 16px;
  --ombra: 0 1px 2px rgba(58, 54, 50, .04), 0 8px 24px rgba(184, 84, 38, .06);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: var(--f-text);
  color: var(--gris);
  font-size: 15px;
  line-height: 1.45;
  background:
    radial-gradient(60vmax 50vmax at 85% -10%, rgba(243, 192, 140, .55), transparent 60%),
    radial-gradient(50vmax 45vmax at -10% 40%, rgba(244, 122, 33, .12), transparent 60%),
    radial-gradient(60vmax 50vmax at 100% 100%, rgba(243, 192, 140, .35), transparent 60%),
    var(--blanc);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:disabled { opacity: .45; cursor: default; }
a { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--taronja); outline-offset: 2px;
}
svg.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.premut { transition: transform .12s; }
.premut:active { transform: scale(.96); }

/* ---------- càrrega ---------- */
.carregant { min-height: 100vh; display: grid; place-items: center; }
.logo-gran { width: 64px; height: 64px; border-radius: 50%; background: var(--tou); animation: batec 1.2s ease-in-out infinite; }
@keyframes batec { 50% { transform: scale(.85); opacity: .6; } }

/* ---------- barra superior ---------- */
.dalt {
  position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--vidre);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-bottom: 1px solid var(--linia);
}
.dalt-in { max-width: 760px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 10px; min-height: 56px; }
.logo { display: flex; align-items: center; gap: 8px; font-family: var(--f-titol); font-weight: 700; font-size: 15px; white-space: nowrap; }
.logo svg { width: 26px; height: 26px; }
.dalt .espai { flex: 1; }
.enrere { display: flex; align-items: center; gap: 2px; font-weight: 600; color: var(--taronja); font-size: 16px; margin-left: -6px; }
.enrere svg { width: 26px; height: 26px; }
.boto-icona { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ambre); }
.boto-icona:active { background: var(--tou); }

.sense-xarxa {
  position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 19;
  max-width: 760px; margin: 8px auto 0; padding: 10px 16px; border-radius: 14px;
  background: rgba(224, 123, 110, .16); color: var(--vermell-text); font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 8px;
}

main { max-width: 760px; margin: 0 auto; padding-inline: 20px; padding-block: 8px calc(140px + env(safe-area-inset-bottom, 0px)); }
.pantalla { display: flex; flex-direction: column; gap: 28px; animation: entra .25s ease-out; }
@keyframes entra { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h1 { font-family: var(--f-titol); font-weight: 800; font-size: 34px; line-height: 1.1; letter-spacing: -.02em; margin: 18px 0 0; text-wrap: balance; overflow-wrap: anywhere; }
.sub { color: var(--gris-2); font-size: 14px; margin: 4px 0 0; }
h2 { font-family: var(--f-titol); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-2); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
h2 .mes-h2 { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--taronja); font-family: var(--f-text); font-weight: 600; }
.tard-h2 { color: var(--vermell-text); }

/* ---------- targetes ---------- */
.targeta { background: var(--targeta); border-radius: var(--r-gran); box-shadow: var(--ombra); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rapides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rapida { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px; border-radius: var(--r-gran); background: var(--targeta); box-shadow: var(--ombra); font-size: 13px; font-weight: 600; }
.rapida .bola { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--tou); color: var(--ambre); }
.rapida.principal .bola { background: var(--taronja); color: #fff; }

.xifres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.xifra { padding: 18px 16px; text-align: left; }
.xifra b { display: block; font-family: var(--f-titol); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xifra b small { font-size: .5em; }
.xifra span { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--gris-2); }

.buit { padding: 32px 20px; text-align: center; color: var(--gris-2); }
.buit b { display: block; font-family: var(--f-titol); color: var(--gris); font-size: 17px; margin-bottom: 4px; }
.buit button { margin-top: 12px; color: var(--taronja); font-weight: 700; }

/* ---------- accions (tasques) ---------- */
.accio { display: flex; align-items: center; gap: 14px; padding: 15px 18px; }
.accio + .accio { border-top: 1px solid var(--linia); }
.check { width: 30px; height: 30px; border-radius: 50%; border: 1.6px solid var(--gris-3); flex: none; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.check svg { width: 16px; height: 16px; opacity: 0; color: #fff; stroke-width: 2.2; }
.accio.feta .check { background: var(--s-verd); border-color: var(--s-verd); }
.accio.feta .check svg { opacity: 1; }
.accio.feta .que { text-decoration: line-through; color: var(--gris-2); }
.accio .cos { text-align: left; }
.que { font-weight: 600; font-size: 15.5px; }
.qui { font-size: 13px; color: var(--gris-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos { min-width: 0; flex: 1; }
.data-pill { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; color: var(--gris-2); background: rgba(255, 255, 255, .6); }
.data-pill.tard { color: var(--vermell-text); background: rgba(224, 123, 110, .14); }
.data-pill.avui { color: var(--ambre); background: var(--tou); }
.urgent-punt { width: 8px; height: 8px; border-radius: 50%; background: var(--taronja); flex: none; }

/* ---------- semàfor i marques ---------- */
.punt { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; }
.p-gris { background: var(--s-gris); } .p-groc { background: var(--s-groc); }
.p-verd { background: var(--s-verd); } .p-vermell { background: var(--s-vermell); }
.marca { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .6); }

/* ---------- contactes ---------- */
.cerca { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 50px; border-radius: var(--r-mitja); background: var(--targeta); box-shadow: var(--ombra); color: var(--gris-2); }
.cerca input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--gris); outline: none; }
.cerca input::-webkit-search-cancel-button { display: none; }
.filtres { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding: 2px 20px 6px; }
.filtres::-webkit-scrollbar { display: none; }
.xip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 99px; background: var(--targeta); font-size: 13.5px; font-weight: 600; white-space: nowrap; box-shadow: var(--ombra); flex: none; }
.xip[aria-pressed="true"] { background: var(--gris); color: var(--blanc); }
.xip .compte { background: var(--taronja); color: #fff; border-radius: 99px; font-size: 11px; padding: 1px 7px; }

.llista { display: flex; flex-direction: column; gap: 10px; }
.contacte { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; }
.contacte .obre { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; text-align: left; padding-block: 4px; }
.contacte .punt { width: 14px; height: 14px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .7); transition: background .3s; }
.nom { font-family: var(--f-titol); font-weight: 700; font-size: 15.5px; line-height: 1.25; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; hyphens: auto; }
.lloc { font-size: 13px; color: var(--gris-2); display: flex; align-items: center; gap: 6px; margin-top: 2px; white-space: nowrap; overflow: hidden; }
.lloc span.t { overflow: hidden; text-overflow: ellipsis; }
.lloc.tard { color: var(--vermell-text); }
.botons { display: flex; gap: 6px; flex: none; }
.rodo { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--tou); color: var(--ambre); text-decoration: none; transition: transform .12s; flex: none; }
.rodo:active { transform: scale(.92); }
.rodo.afegir { font-size: 12px; font-weight: 700; width: auto; padding: 0 12px; border-radius: 99px; display: flex; gap: 4px; }
.trucat { height: 44px; padding: 0 14px; border-radius: 99px; background: var(--taronja); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; transition: transform .12s; }
.trucat:active { transform: scale(.95); }
.trucat svg { width: 18px; height: 18px; stroke-width: 2; }
.trucat .llarg { display: none; }

/* ---------- fitxa ---------- */
.capcalera-fitxa { display: flex; flex-direction: column; gap: 10px; }
.marques-fitxa { display: flex; gap: 6px; flex-wrap: wrap; }
.semafor { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.semafor button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px 12px; border-radius: var(--r-mitja); background: var(--targeta); font-size: 12px; font-weight: 600; color: var(--gris-2); box-shadow: var(--ombra); }
.semafor .punt { width: 22px; height: 22px; }
.semafor button[aria-pressed="true"] { background: var(--targeta-forta); color: var(--gris); box-shadow: 0 0 0 2px var(--gris) inset, var(--ombra); }
.contacta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.contacta > * { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-decoration: none; color: var(--gris); }
.contacta .rodo { width: 52px; height: 52px; }
.contacta .desactivat { opacity: .35; pointer-events: none; }
.gran-trucat { width: 100%; height: 56px; border-radius: 18px; background: var(--taronja); color: #fff; font-family: var(--f-titol); font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.marcadors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.marcador { padding: 12px; border-radius: var(--r-mitja); background: var(--targeta); box-shadow: var(--ombra); text-align: left; display: flex; flex-direction: column; gap: 4px; }
.marcador .ttl { font-size: 12px; font-weight: 600; color: var(--gris-2); display: flex; align-items: center; gap: 6px; }
.marcador b { font-family: var(--f-titol); font-size: 15px; }
.marcador.si { background: rgba(109, 179, 131, .16); }
.avis-fitxa { padding: 14px 18px; border-radius: var(--r-mitja); background: rgba(233, 192, 79, .2); font-weight: 600; font-size: 14px; display: flex; gap: 10px; align-items: center; }

.dades { display: flex; flex-direction: column; }
.dada { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; text-align: left; width: 100%; }
.dada + .dada { border-top: 1px solid var(--linia); }
.dada .etq { width: 110px; flex: none; font-size: 13px; color: var(--gris-2); padding-top: 1px; }
.dada .val { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; white-space: pre-line; }
.dada .val.buida { color: var(--gris-3); }
.dada .llapis { color: var(--gris-3); width: 18px; height: 18px; }

.persona { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; }
.persona + .persona { border-top: 1px solid var(--linia); }
.persona .obre { flex: 1; min-width: 0; text-align: left; }
.estrella { color: var(--taronja); font-size: 13px; }

.historial { display: flex; flex-direction: column; }
.fet { display: flex; gap: 12px; padding: 12px 18px; align-items: flex-start; }
.fet + .fet { border-top: 1px solid var(--linia); }
.fet .ico { width: 30px; height: 30px; border-radius: 50%; background: var(--tou); color: var(--ambre); display: grid; place-items: center; flex: none; }
.fet .ico svg { width: 16px; height: 16px; }
.fet .quan { font-size: 12.5px; color: var(--gris-2); }

.boto-text { color: var(--taronja); font-weight: 700; font-size: 15px; padding: 10px 0; }
.boto-secundari { width: 100%; height: 52px; border-radius: 16px; background: var(--targeta); box-shadow: var(--ombra); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.boto-perill { color: var(--vermell-text); }

/* ---------- barra de pestanyes ---------- */
.pestanyes {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  width: min(460px, calc(100% - 24px)); display: flex; align-items: center; justify-content: space-around; gap: 2px; padding: 8px 6px; border-radius: 28px;
  background: var(--vidre); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 10px 30px rgba(58, 54, 50, .10), inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 8px; border-radius: 16px; font-size: 11px; font-weight: 600; color: var(--gris-2); min-width: 60px; text-decoration: none; position: relative; }
.tab[aria-current="page"] { color: var(--taronja); }
.tab .bombolla { position: absolute; top: 0; right: 10px; background: var(--s-vermell); color: #fff; font-size: 10px; font-weight: 700; border-radius: 99px; padding: 0 5px; min-width: 16px; line-height: 16px; }
.mes { width: 56px; height: 56px; border-radius: 50%; background: var(--taronja); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(244, 122, 33, .35); margin-top: -28px; transition: transform .12s; flex: none; }
.mes svg { width: 26px; height: 26px; stroke-width: 2; }
.mes:active { transform: scale(.93); }

/* ---------- finestres que pugen ---------- */
.vel { position: fixed; inset: 0; z-index: 40; background: rgba(58, 54, 50, .18); animation: apareix .2s ease-out; }
@keyframes apareix { from { opacity: 0; } }
.full {
  position: fixed; left: 50%; bottom: 0; z-index: 50; width: min(560px, 100%); transform: translateX(-50%);
  max-height: calc(100vh - 40px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0;
  background: rgba(251, 241, 231, .84); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  box-shadow: 0 -10px 40px rgba(58, 54, 50, .12);
  animation: puja .3s cubic-bezier(.2, .9, .25, 1);
}
@keyframes puja { from { transform: translate(-50%, 100%); } }
.agafador { width: 40px; height: 5px; border-radius: 9px; background: rgba(58, 54, 50, .18); margin: 0 auto 14px; }
.full h3 { font-family: var(--f-titol); font-weight: 800; font-size: 22px; letter-spacing: -.01em; margin: 0; overflow-wrap: anywhere; }
.full > .sub { margin-bottom: 18px; }
.opcions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcio { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; border-radius: var(--r-gran); background: var(--targeta-forta); font-family: var(--f-titol); font-weight: 700; font-size: 16px; text-align: left; transition: transform .12s; }
.opcio:active { transform: scale(.97); }
.opcio .punt { width: 16px; height: 16px; }
.opcio.ample { grid-column: 1 / -1; }
.form { display: flex; flex-direction: column; gap: 14px; }
.camp { display: flex; flex-direction: column; gap: 6px; }
.camp > label, .camp > .etq { font-size: 13px; font-weight: 600; color: var(--gris-2); }
.camp input, .camp textarea, .camp select {
  min-height: 52px; border-radius: var(--r-mitja); border: 0; background: rgba(255, 255, 255, .8);
  padding: 12px 16px; font: inherit; font-size: 17px; color: var(--gris); width: 100%;
}
.camp textarea { min-height: 120px; resize: vertical; line-height: 1.4; }
.segment { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: var(--r-mitja); background: rgba(255, 255, 255, .55); }
.segment button { flex: 1 1 auto; min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }
.segment button[aria-pressed="true"] { background: #fff; box-shadow: var(--ombra); }
.desa { width: 100%; height: 56px; border-radius: 18px; background: var(--taronja); color: #fff; font-family: var(--f-titol); font-weight: 700; font-size: 17px; transition: transform .12s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.desa:active { transform: scale(.98); }
.fila-botons { display: flex; gap: 10px; }
.fila-botons > * { flex: 1; }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--r-mitja); background: rgba(255, 255, 255, .7); font-weight: 600; width: 100%; text-align: left; }
.interruptor .pista { width: 50px; height: 30px; border-radius: 99px; background: var(--gris-3); position: relative; transition: background .2s; flex: none; }
.interruptor .pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.interruptor[aria-checked="true"] .pista { background: var(--s-verd); }
.interruptor[aria-checked="true"] .pista::after { transform: translateX(20px); }
.suggeriments { display: flex; flex-wrap: wrap; gap: 6px; }
.suggeriments button { padding: 8px 12px; border-radius: 99px; background: rgba(255, 255, 255, .7); font-size: 14px; font-weight: 600; }
.cercador-llista { display: flex; flex-direction: column; max-height: 40vh; overflow-y: auto; border-radius: var(--r-mitja); background: rgba(255, 255, 255, .55); }
.cercador-llista button { text-align: left; padding: 12px 16px; font-weight: 600; }
.cercador-llista button + button { border-top: 1px solid var(--linia); }

/* ---------- avisos ---------- */
.avis {
  position: fixed; left: 50%; top: calc(70px + env(safe-area-inset-top, 0px)); z-index: 60; transform: translateX(-50%);
  width: min(440px, calc(100% - 32px)); padding: 14px 18px; border-radius: 18px; background: rgba(58, 54, 50, .9); color: var(--blanc); font-size: 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: baixa .25s ease-out;
}
.avis.error { background: rgba(181, 87, 75, .95); }
.avis b { font-weight: 700; }
@keyframes baixa { from { opacity: 0; transform: translate(-50%, -12px); } }

/* ---------- entrada ---------- */
.entrada { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 20px; }
.entrada .caixa { width: min(400px, 100%); display: flex; flex-direction: column; gap: 22px; }
.entrada .logo svg { width: 44px; height: 44px; }
.entrada .logo { font-size: 22px; gap: 12px; }
.error-text { color: var(--vermell-text); font-weight: 600; font-size: 14px; }

/* ---------- ordinador ---------- */
@media (min-width: 720px) {
  h1 { font-size: 42px; }
  main { padding-inline: 32px; }
  .xifra b { font-size: 42px; }
  .trucat .llarg { display: inline; }
  .trucat .curt { display: none; }
  .rapides { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 380px) {
  .rodo { width: 40px; height: 40px; }
  .trucat { padding: 0 11px; }
  .tab { min-width: 50px; padding: 6px 4px; }
  .xifra b { font-size: 28px; }
  .contacte { padding-left: 12px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}