/* Eines CMCiB · estil comú (Guia d'estil HERR: marró institucional #402D24 / #876A50, mode clar i fosc) */
:root{
  --paper:#FAF8F6; --surface:#FFFFFF; --line:#E7E1DA; --line-soft:#F1EDE8; --dash:#CEC4B9;
  --ink:#2A1E18; --muted:#6B5C51; --faint:#76685D;
  --blue:#402D24; --blue-hover:#2B1E18; --on-blue:#FFFFFF;
  --accent:#876A50;
  --tile:#F1E8DF; --tile-ink:#6E5440; --tile-off:#F0ECE7;
  --ok:#3F7A12; --warn:#9A4A00; --danger:#B42318; --danger-bg:#FDE7E4;
  --logo-l:block; --logo-d:none;
  --f-ui:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-code:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#16120F; --surface:#1F1915; --line:#362C25; --line-soft:#2A221D; --dash:#56483E;
    --ink:#F1EAE3; --muted:#B9AB9E; --faint:#A3958A;
    --blue:#D9BFA5; --blue-hover:#E9D4BF; --on-blue:#1F1915;
    --accent:#C9AA8C;
    --tile:#3A2D24; --tile-ink:#E2CBB4; --tile-off:#2A221D;
    --ok:#8FD05A; --warn:#F2A55A; --danger:#F08A7E; --danger-bg:#4A1F1B;
    --logo-l:none; --logo-d:block;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#16120F; --surface:#1F1915; --line:#362C25; --line-soft:#2A221D; --dash:#56483E;
  --ink:#F1EAE3; --muted:#B9AB9E; --faint:#A3958A;
  --blue:#D9BFA5; --blue-hover:#E9D4BF; --on-blue:#1F1915;
  --accent:#C9AA8C;
  --tile:#3A2D24; --tile-ink:#E2CBB4; --tile-off:#2A221D;
  --ok:#8FD05A; --warn:#F2A55A; --danger:#F08A7E; --danger-bg:#4A1F1B;
  --logo-l:none; --logo-d:block;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
img{max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.6}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
h1,h2,h3{text-wrap:balance}

.logo{height:64px;width:auto;max-width:100%}
.logo-l{display:var(--logo-l)} .logo-d{display:var(--logo-d)}

.btn{height:44px;padding:0 18px;border-radius:10px;border:1px solid var(--blue);background:var(--blue);color:var(--on-blue);font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn:hover:not(:disabled){background:var(--blue-hover)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover:not(:disabled){background:var(--paper);border-color:var(--dash)}

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:13px;font-weight:600}
.field input{height:44px;width:100%;border:1px solid var(--dash);border-radius:8px;padding:0 12px;background:var(--surface);font-size:16px}
.msg{margin:0;font-size:14px;font-weight:600;min-height:1.45em}
.msg.err{color:var(--danger)}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}