:root{--bg:#fcfaf8;--panel:#fff;--ink:#193149;--muted:#71808b;--line:#eadfd8;--pink:#cf8e99;--pinkbg:#faedf1;--beige:#f2e3d2;--green:#7f9b83;--greenbg:#eef5ef;--risk:#b75565;--warn:#b27b48;--ok:#5f7f67;--shadow:0 9px 25px rgba(57,47,41,.07);--r:16px}*{box-sizing:border-box}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.loginPhoto{background:url('/static/hero_login.png?v=9') center/cover}.loginPanel{padding:48px;display:flex;align-items:center;justify-content:center}.loginBox{width:min(560px,100%)}.escutlogo{width:230px}.gflogo{width:235px}.gfbox{position:absolute;top:28px;left:30px;background:rgba(252,250,248,.9);padding:14px;border-radius:14px}.gfbox small{display:block;color:var(--muted);margin-top:4px}.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.side{background:#fffaf8;border-right:1px solid var(--line);padding:18px 16px;display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh}.nav{display:flex;flex-direction:column;gap:5px}.nav button{border:0;background:transparent;text-align:left;padding:10px 11px;border-radius:10px;color:var(--ink)}.nav button:hover,.nav button.active{background:var(--pinkbg);color:#955369}.gfside{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);text-align:center}.gfside img{width:190px}.gfside small{display:block;color:var(--muted);font-size:11px}.main{padding:24px;max-width:1420px;margin:auto;width:100%}.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.top .right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.hero{height:190px;background:url('/static/hero.png?v=8') center/cover;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);margin-bottom:18px}.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:17px;box-shadow:var(--shadow)}.grid{display:grid;gap:14px}.cols4{grid-template-columns:repeat(4,1fr)}.cols3{grid-template-columns:repeat(3,1fr)}.cols2{grid-template-columns:repeat(2,1fr)}.metric{padding:16px;border-radius:13px;border:1px solid var(--line);background:#faf7f2}.metric strong{display:block;font-size:27px}.metric span{font-size:12px;color:var(--muted)}h1{font-size:30px;margin:0 0 6px}.lead,.small{color:var(--muted)}.small{font-size:12px}.btn{border:0;border-radius:10px;padding:9px 12px;font-weight:760;background:#c8798e;color:#fff}.btn.green{background:var(--green)}.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn.small{font-size:12px;padding:6px 9px}.field{margin-bottom:12px}.field label{display:block;font-size:12px;font-weight:800;margin-bottom:5px}.field input,.field select,.field textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:9px;background:#fff}.field textarea{min-height:90px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}.step{padding:11px;border:1px solid var(--line);border-radius:12px;background:#fff}.step b{display:block}.step span{font-size:11px;color:var(--muted)}.question{padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;margin:8px 0}.qtitle{font-weight:800;margin-bottom:8px}.options{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.option{border:1px solid var(--line);border-radius:9px;padding:8px}.sectionTitle{font-size:20px;margin:22px 0 8px}.row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #eee8e1}.row:last-child{border-bottom:0}.tag{display:inline-block;padding:4px 7px;border-radius:999px;font-size:11px;font-weight:800}.tag.risk{background:#fbecef;color:var(--risk)}.tag.review{background:#fff4e6;color:var(--warn)}.tag.ok{background:#edf5ef;color:var(--ok)}.clubctx{background:linear-gradient(135deg,#faedf1,#f5eadc);border:1px solid var(--line);border-radius:14px;padding:12px 15px;margin-bottom:14px}.summary{border:1px solid var(--line);border-radius:11px;padding:11px;background:#fff;margin-bottom:8px}.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.public{max-width:980px;margin:auto;padding:24px}.public .grid.two{grid-template-columns:1fr 1fr}.public input,.public textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:9px;margin-bottom:8px}.public textarea{min-height:110px}.public button{border:0;border-radius:9px;padding:10px 14px;background:var(--pink);color:white}.toast{position:fixed;right:20px;bottom:20px;background:#193149;color:white;padding:12px 16px;border-radius:10px;z-index:999}.missing{border-color:#d5576b;background:#fff8f9}.page{display:none}.page.active{display:block}@media(max-width:1000px){.login{grid-template-columns:1fr}.loginPhoto{min-height:340px}.app{grid-template-columns:1fr}.side{height:auto;position:static}.cols4,.cols3,.cols2,.options,.steps,.public .grid.two{grid-template-columns:1fr}.main{padding:15px}}
/* v1.1: login més net i editor de preguntes */
.loginPhoto{position:relative;background-position:center center}
.gfbox{top:16px;left:16px;padding:9px 11px;border-radius:11px;background:rgba(252,250,248,.82);backdrop-filter:blur(6px);box-shadow:0 5px 18px rgba(40,35,30,.08);text-decoration:none}
.gfbox .gflogo{width:145px;display:block}
.gfbox small{font-size:10px;white-space:nowrap;color:#4d5c66}
.qclassrow{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.qclassrow:last-child{border-bottom:0}.qclassrow select{width:100%;padding:8px;border:1px solid var(--line);border-radius:9px;background:white}
@media(max-width:700px){.qclassrow{grid-template-columns:1fr}.gfbox .gflogo{width:120px}.gfbox small{white-space:normal}}
/* v1.2: portada de login amb marca discreta i foto neta */
.login{display:flex;flex-direction:column;min-height:100vh;background:#fff}
.loginBrandTop{height:92px;display:flex;align-items:center;justify-content:center;background:#fff;border-bottom:1px solid var(--line);padding:14px 24px}
.loginBrandTop a{display:inline-flex;align-items:center;justify-content:center}
.gflogoTop{display:block;width:min(430px,58vw);max-height:62px;object-fit:contain}
.loginBody{display:grid;grid-template-columns:1.08fr .92fr;flex:1;min-height:0}
.loginPhoto{min-height:620px;background:url('/static/hero_login.png?v=9') center center/cover no-repeat;position:relative}
.loginPanel{padding:56px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff 0%,#fcfaf8 100%)}
.loginBox{width:min(560px,100%)}
.loginFooter{min-height:58px;display:flex;align-items:center;padding:12px 34px;background:#f5eee7;border-top:1px solid var(--line)}
.loginFooter a{color:#6d5148;text-decoration:none;font-size:14px;font-weight:700;letter-spacing:.02em}
.loginFooter a:hover{text-decoration:underline}
/* neutralitza el format antic del logo sobre la foto */
.gfbox{display:none!important}
@media(max-width:1000px){
  .loginBrandTop{height:78px;padding:12px 18px}
  .gflogoTop{width:min(360px,76vw);max-height:52px}
  .loginBody{grid-template-columns:1fr}
  .loginPhoto{min-height:360px}
  .loginPanel{padding:32px 22px}
  .loginFooter{justify-content:center}
}

/* v1.3: accessos demo per provar rols */
.demoAccess{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.demoAccess summary{padding:11px 13px;font-weight:800;cursor:pointer;color:var(--ink)}
.demoGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px 12px}
.demoGrid button{border:1px solid var(--line);background:#fcfaf8;border-radius:10px;padding:10px;text-align:left;color:var(--ink)}
.demoGrid button:hover{background:var(--pinkbg)}
.demoGrid b,.demoGrid small{display:block}.demoGrid small{margin-top:3px;color:var(--muted)}
@media(max-width:700px){.demoGrid{grid-template-columns:1fr}}

/* v4: preserve hero proportions on login */
.loginPhoto{background-color:#f7f2ea!important;background-image:url('/static/hero_login.png?v=9')!important;background-position:center!important;background-repeat:no-repeat!important;background-size:100% auto!important;}
@media(max-width:850px){.loginPhoto{min-height:0!important;aspect-ratio:2232/704;background-size:100% auto!important;}}

/* v5: login realment a pantalla completa i foto sense deformació */
html, body { width:100%; min-height:100%; }
.login{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  min-height:100vh!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:auto!important;
  background:#fff!important;
}
.loginBrandTop{
  flex:0 0 82px!important;
  width:100%!important;
  height:82px!important;
  box-sizing:border-box!important;
}
.loginBody{
  flex:1 1 auto!important;
  width:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr)!important;
}
.loginPhoto{
  width:100%!important;
  min-height:0!important;
  height:100%!important;
  background-image:url('/static/hero_login.png?v=9')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
.loginPanel{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:36px 56px!important;
  box-sizing:border-box!important;
}
.loginFooter{
  flex:0 0 50px!important;
  width:100%!important;
  min-height:50px!important;
  box-sizing:border-box!important;
}
@media(max-width:850px){
  .login{position:relative!important;height:auto!important;min-height:100vh!important;overflow:visible!important}
  .loginBody{grid-template-columns:1fr!important;display:grid!important}
  .loginPhoto{height:auto!important;min-height:280px!important;aspect-ratio:16/7!important;background-size:cover!important}
  .loginPanel{height:auto!important;padding:30px 22px!important}
}

/* v6 · interior layout: full-width desktop canvas */
@media (min-width:1001px){
  .app{display:block;min-height:100vh;}
  .side{position:fixed;left:0;top:0;bottom:0;width:245px;height:100vh;z-index:20;}
  .main{margin-left:245px;max-width:none;width:auto;min-height:100vh;padding:28px 36px 48px;}
  .top{width:100%;}
  .page{width:100%;max-width:none;}
  .hero{width:100%;height:300px;background-position:center 42%;background-size:cover;}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));width:100%;}
  .grid.cols4{grid-template-columns:repeat(4,minmax(0,1fr));width:100%;}
  .grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;}
  .grid.cols2{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;}
}

/* v7 · foto interior sense marc blanc i ocupant tot l'espai */
.hero{
  display:block!important;
  width:100%!important;
  padding:0!important;
  border:0!important;
  background-color:transparent!important;
  background-image:url('/static/hero.png?v=8')!important;
  background-repeat:no-repeat!important;
  background-position:center 42%!important;
  background-size:cover!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
@media (min-width:1001px){
  .hero{height:320px!important;border-radius:18px!important;}
}
@media (max-width:1000px){
  .hero{height:auto!important;aspect-ratio:2232/704!important;border-radius:14px!important;}
}

/* v9 · login: recupera la fotografia original sense ampliar-la */
.loginPhoto{
  background-image:url('/static/hero_login.png?v=9')!important;
  background-size:100% auto!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-color:#f7f2ea!important;
}
@media(max-width:850px){
  .loginPhoto{
    aspect-ratio:2232/704!important;
    min-height:0!important;
    background-size:100% auto!important;
  }
}