/* MetricDas · app (mateixos colors i tipografia que la web pública). La versió va al nom del fitxer. */
/* Schibsted Grotesk (SIL OFL 1.1, fonts/OFL.txt), servida des de l'app: cap connexió a Google Fonts */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/schibsted-grotesk-latin.ba4038fc5cb5.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:"Schibsted Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/schibsted-grotesk-latin-ext.65233324c912.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --ink:#121614; --ink-2:#3c423e; --ink-3:#5f6762;
  --paper:#ffffff; --ground:#f4f5f2; --line:#dfe2dc;
  --sky:#e6eef8; --apricot:#fcebdd;
  --signal:#e8590c; --blue:#2f5bff;
  --good:#17704a; --warn:#b7791f; --bad:#c2362b;
  --r-pill:999px; --r-card:14px;
  --shadow:0 1px 2px rgba(18,22,20,.06),0 12px 32px -12px rgba(18,22,20,.18);
  --font:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--ground);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
h1,h2{margin:0 0 .4em;letter-spacing:-.03em;line-height:1.1;font-weight:700;text-wrap:balance}
h1{font-size:clamp(1.8rem,3.4vw,2.6rem)}
h2{font-size:1.3rem;letter-spacing:-.02em}
p{margin:0 0 1em}
.lead{font-size:1.1rem;color:var(--ink-2);max-width:60ch}
.muted,.hint,small{color:var(--ink-3)}
.hint{font-size:.88rem;margin-top:1em}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:640px}

.logo{font-weight:800;font-size:1.25rem;letter-spacing:-.03em;text-decoration:none}
.logo span{color:var(--signal)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border-radius:var(--r-pill);padding:.8em 1.35em;font:600 1rem/1 var(--font);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .16s var(--ease),background .16s}
.btn:active{transform:scale(.97)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#2a302c}
.btn-line{border-color:var(--ink);background:transparent;color:var(--ink)}
.btn-line:hover{background:rgba(18,22,20,.05)}
.btn-block{width:100%}
button.link{background:none;border:0;padding:0;font:inherit;color:var(--ink-2);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
button.link:hover{color:var(--ink)}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;box-shadow:var(--shadow);margin-bottom:20px}

.field{margin-bottom:16px}
.field label{display:block;font-weight:600;margin-bottom:6px}
.field input[type=text],.field input[type=email],.field input[type=password]{width:100%;font:inherit;padding:.75em .9em;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.field input:focus{border-color:var(--ink);outline:none}
.field small{display:block;margin-top:6px;font-size:.85rem}
.field .err{color:var(--bad)}
.has-error input{border-color:var(--bad)}
.field .check{display:flex;gap:.6em;align-items:flex-start;font-weight:500;cursor:pointer}
.field .check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink)}
.field ul{margin:6px 0 0;padding-left:1.2em;font-size:.85rem;color:var(--ink-3)}

.msgs{margin-bottom:16px}
.msg{padding:.75em 1em;border-radius:10px;background:var(--sky);margin:0 0 8px}
.msg-error{background:#fbe4e1;color:#7d1f17}
.msg-success{background:#dff1e7;color:#0e4a30}
.msg-warning{background:var(--apricot)}

/* entrada */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 16px}
.auth-wrap>.logo{margin-bottom:24px}
.auth-wrap .card{width:100%;max-width:420px}
.auth-wrap h1{font-size:1.7rem}
.links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;font-size:.95rem}
.links form{margin:0}
.auth-foot{font-size:.88rem;color:var(--ink-3);margin-top:20px}

/* capçalera de l'app */
.top{background:var(--paper);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.nav{display:flex;align-items:center;gap:22px;font-weight:500}
.nav a{text-decoration:none;color:var(--ink-2)}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:.4em}
.nav form{margin:0}
.main{padding-top:40px;padding-bottom:64px}

/* panel */
.kicker{font-size:.85rem;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6em;overflow-wrap:anywhere}
.hello{margin-bottom:28px}
.steps{list-style:none;margin:0 0 40px;padding:0;display:grid;gap:12px;counter-reset:s}
.steps li{counter-increment:s;position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 20px 20px 64px;display:flex;flex-direction:column;gap:4px}
.steps li::before{content:counter(s);position:absolute;left:20px;top:18px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.9rem;background:var(--ground);color:var(--ink-3)}
.steps li span{color:var(--ink-2)}
.steps li .btn{align-self:flex-start;margin-top:10px}
.steps .done::before{content:"✓";background:var(--good);color:#fff}
.steps .now{border-color:var(--ink);box-shadow:var(--shadow)}
.steps .now::before{background:var(--signal);color:#fff}
.steps .next{opacity:.75}
.cita{scroll-margin-top:20px}
.cal{width:100%;height:640px;border:1px solid var(--line);border-radius:var(--r-card);background:#fff}

.devices{list-style:none;padding:0;margin:0 0 16px}
.devices li{padding:10px 0;border-top:1px solid var(--line)}
.devices small{display:block}

@media (max-width:600px){
  .card{padding:22px}
  /* capçalera en dues línies: logo a dalt i menú a sota (amb Conexiones no hi cap en una) */
  .top .wrap{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:4px;row-gap:2px}
  .nav{width:100%;gap:18px;font-size:.95rem;overflow-x:auto}
  .nav a,.nav button.link{padding:10px 0;white-space:nowrap}
  .steps li{padding-left:58px}
  .cal{height:720px}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* assistent de connexions */
.wide{max-width:760px}
.btn-sm{padding:.5em .9em;font-size:.88rem}
.conn-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.conn-head h2{margin:0}
.pill{display:inline-block;padding:.3em .8em;border-radius:var(--r-pill);font-size:.85rem;font-weight:600;background:var(--ground);color:var(--ink-2)}
.pill-ok{background:#dff1e7;color:#0e4a30}
.pill-error{background:#fbe4e1;color:#7d1f17}
.conn-error{width:100%;margin:6px 0 0;color:#7d1f17;font-size:.92rem}
.conn-steps{margin:0 0 18px;padding-left:1.3em;display:grid;gap:8px;color:var(--ink-2)}
.conn-steps b{color:var(--ink)}
.copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.copy-row code{font-size:.86rem;background:var(--ground);padding:.45em .7em;border-radius:8px;overflow-wrap:anywhere;color:var(--ink)}
.conn-form details{margin-bottom:14px}
.conn-form summary{cursor:pointer;font-weight:600;margin-bottom:12px}