/* Camí v3.4 · capa d'experiència d'usuari. Es carrega l'última: unifica estils i afegeix
   feedback (càrrega, botons ocupats, transicions) sense canviar l'estructura de les pantalles. */

/* ---------- Tipografia allotjada localment (abans: Google Fonts) ---------- */
@font-face{font-family:'DM Sans';font-style:normal;font-display:swap;font-weight:100 1000;src:url(fonts/dm-sans-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-display:swap;font-weight:100 1000;src:url(fonts/dm-sans-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(fonts/manrope-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(fonts/manrope-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{--ux-ease:cubic-bezier(.2,.7,.2,1);--ux-ring:#daab6c}
body{text-rendering:optimizeLegibility}
::selection{background:#dce8ba;color:#183b2e}

/* ---------- Xips de filtre: una sola mida i forma a tota la web ---------- */
#main .chip{min-height:32px;padding:7px 13px;border-radius:999px;font-size:12px;font-weight:550;gap:6px;transition:background .15s,border-color .15s,color .15s}
#main .chip:not(.active):hover{border-color:#c9d4c2;color:var(--green);background:#f7faf4}
#main .chip .icon{width:15px;height:15px}

/* ---------- Botó Flyover igual a totes les targetes ---------- */
.fly-card-button{background:#eaf3e2;color:#264e3f;border:0}
.fly-card-button:hover{background:#dcebcf;color:#183b2e}

/* ---------- Focus visible coherent també en controls personalitzats ---------- */
[role=tab]:focus-visible,.chip:focus-visible,.fly-card-button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ux-ring);outline-offset:2px}

/* ---------- Perfil en mòbil: els panells grans ocupen tota l'amplada ---------- */
.profile-about>section{grid-column:1/-1}

/* ---------- Analytics: les pestanyes no queden tallades ---------- */
@media(min-width:861px){.an-bar{flex-wrap:wrap;row-gap:10px}.an-tabs{flex-wrap:wrap;overflow:visible;row-gap:6px}}

/* ---------- Planificador: el mapa aprofita l'alçada disponible ---------- */
@media(min-width:861px){.planner-canvas{display:flex;flex-direction:column}.planner-canvas>.planner-map-shell{flex:1 1 auto;min-height:460px}}

/* ---------- Selector de fitxers amb l'estil de l'aplicació ---------- */
#main input[type=file],dialog input[type=file]{font-size:12px;color:#5f6b62}
#main input[type=file]::file-selector-button,dialog input[type=file]::file-selector-button{font:600 12px 'DM Sans',sans-serif;margin-right:12px;padding:9px 14px;border-radius:8px;border:1px solid #cfdac8;background:#fff;color:var(--green);cursor:pointer;transition:background .15s}
#main input[type=file]::file-selector-button:hover,dialog input[type=file]::file-selector-button:hover{background:#f1f6ec}

/* ---------- Animacions d'entrada més àgils ---------- */
@media(prefers-reduced-motion:no-preference){
 .motion-ready{transform:translateY(10px)!important;transition-duration:.32s!important}
 .motion-ready.motion-visible{transform:none!important}
 #main.ux-enter{animation:ux-enter .22s var(--ux-ease) both}
}
@keyframes ux-enter{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Barra de progrés superior per a peticions lentes ---------- */
#ux-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:5000;pointer-events:none;opacity:0;transition:opacity .25s}
#ux-progress::before{content:"";position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#9fcf6a,#d5794d);transition:transform .35s var(--ux-ease)}
#ux-progress.on{opacity:1}

/* ---------- Botons ocupats mentre es desa ---------- */
.is-busy{position:relative;pointer-events:none;cursor:progress!important}
.is-busy>*{opacity:.35}
.is-busy::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:ux-spin .7s linear infinite}
button.is-busy,a.is-busy{color:inherit}
@keyframes ux-spin{to{transform:rotate(360deg)}}

/* ---------- Avisos: errors més visibles i amb botó de tancar ---------- */
#toast{display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 32px));line-height:1.45}
#toast.show{pointer-events:auto}
#toast .ux-toast-close{margin-left:auto;background:transparent;color:inherit;opacity:.7;border-radius:6px;padding:2px 6px;font-size:16px;line-height:1}
#toast .ux-toast-close:hover{opacity:1;background:#ffffff1f}

/* ---------- Estat buit genèric per a llistes sense resultats ---------- */
.ux-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:34px 18px;border:1px dashed #d6dfd0;border-radius:14px;color:#66746a;background:#fbfcf9}
.ux-empty b{color:var(--green);font:700 15px Manrope,sans-serif}
.ux-empty .button{margin-top:6px}

/* ---------- Mapa: avís de connexió menys intrusiu ---------- */
.map-offline-note,.leaflet-offline{font-size:12px}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}

/* ---------- Barra lateral: sempre cap sencera, també en portàtils baixos ---------- */
#main:focus{outline:none}
.sidebar{overflow-y:auto;scrollbar-width:thin}
.workspace-label{letter-spacing:1.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:681px) and (max-height:1000px){.sidebar nav a{padding-top:6px!important;padding-bottom:6px!important}.workspace-label{margin-bottom:20px}.nav-section{margin:14px 14px 6px}.sidebar-bottom{padding-top:12px}.profile-button{padding:9px 4px}}
@media(min-width:681px) and (max-height:820px){.workspace-label{display:none}.brand{margin-bottom:14px}.sidebar nav{gap:1px}.sidebar nav a{padding-top:5px!important;padding-bottom:5px!important}.prototype-label{display:none}}

/* ---------- Formularis en finestra: els botons de desar sempre a la vista ---------- */
dialog{overscroll-behavior:contain}
dialog .modal-inner .form-footer{position:sticky;bottom:-28px;z-index:6;background:#fbfcf8;margin:20px -28px -28px;padding:14px 28px 20px;box-shadow:0 -10px 18px -14px #183b2e33}
@media(max-width:680px){dialog .modal-inner .form-footer{bottom:-22px;margin:16px -22px -22px;padding:12px 22px 16px}}
@media(min-width:681px){.sidebar nav a{line-height:1.25}}
@media(max-width:680px){.sidebar nav a,.sidebar .mobile-more{font-size:10.5px}}

/* ---------- Menú «El meu camí» (mòbil): Runnerleagues amb el mateix format que la resta ---------- */
@media(max-width:680px){.create-options .create-option.runner-nav{flex-direction:row!important;align-items:center;margin:0}.create-options .runner-nav .runner-new{margin-left:auto}}