/* kit-emergencia · estils base: paleta, tipografia i components. Sense recursos externs. */

/* ---- Paleta (contrast WCAG AA verificat per parelles text/fons) ---- */
:root {
  color-scheme: light dark;
  --fons: #ffffff;
  --fons-2: #f2f5f8;
  --superficie: #ffffff;
  --text: #1b1f23;          /* 16:1 sobre --fons */
  --text-suau: #4a5560;     /* 7:1 */
  --vora: #c3ccd5;
  --primari: #0b5cad;       /* 6.7:1 sobre blanc */
  --primari-text: #ffffff;
  --focus: #b35c00;
  --ok-fons: #d9f2e3;   --ok-text: #0f5c2e;
  --aviat-fons: #fff0cc; --aviat-text: #6b4200;
  --caducat-fons: #fde0e0; --caducat-text: #8f1d1d;

  --espai-1: .25rem; --espai-2: .5rem; --espai-3: 1rem; --espai-4: 1.5rem;
  --radi: .75rem;
  --tocar: 3.25rem;  /* mida mínima d'objectiu tàctil */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Mode fosc automàtic, o forçat amb data-tema="fosc" / "clar" a <html>. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="clar"]) {
    --fons: #12161b; --fons-2: #1a2027; --superficie: #1f262e;
    --text: #e8ecf0; --text-suau: #aab4be; --vora: #3b4651;
    --primari: #7ab8ff; --primari-text: #0a1722; --focus: #ffb454;
    --ok-fons: #12301f; --ok-text: #8fe0ae;
    --aviat-fons: #3a2a08; --aviat-text: #ffd47a;
    --caducat-fons: #3d1717; --caducat-text: #ffa8a8;
  }
}
:root[data-tema="fosc"] {
  --fons: #12161b; --fons-2: #1a2027; --superficie: #1f262e;
  --text: #e8ecf0; --text-suau: #aab4be; --vora: #3b4651;
  --primari: #7ab8ff; --primari-text: #0a1722; --focus: #ffb454;
  --ok-fons: #12301f; --ok-text: #8fe0ae;
  --aviat-fons: #3a2a08; --aviat-text: #ffd47a;
  --caducat-fons: #3d1717; --caducat-text: #ffa8a8;
}

/* ---- Tipografia i base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fons); color: var(--text);
  font: 1.0625rem/1.5 var(--font);
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--espai-3); }
h1 { font-size: 1.75rem; } h2 { font-size: 1.375rem; } h3 { font-size: 1.125rem; }
p { margin: 0 0 var(--espai-3); }
a { color: var(--primari); }
code { font-family: var(--font-mono); font-size: .875em; color: var(--text-suau); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pagina { max-width: 60rem; margin: 0 auto; padding: var(--espai-3); }
.suau { color: var(--text-suau); }

/* ---- Icones (img o svg en línia amb currentColor) ---- */
.icona { width: 1.5rem; height: 1.5rem; flex: none; }

/* ---- Botons grans d'un toc ---- */
.boto {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espai-2);
  min-height: var(--tocar); min-width: var(--tocar); padding: 0 var(--espai-4);
  font: inherit; font-weight: 600; cursor: pointer;
  color: var(--primari-text); background: var(--primari);
  border: 2px solid var(--primari); border-radius: var(--radi);
}
.boto:active { transform: translateY(1px); }
.boto--secundari { background: transparent; color: var(--primari); }
.boto--bloc { display: flex; width: 100%; }
.boto[disabled] { opacity: .55; cursor: not-allowed; }

/* ---- Targetes ---- */
.targeta {
  background: var(--superficie); border: 1px solid var(--vora);
  border-radius: var(--radi); padding: var(--espai-3);
}
.targeta + .targeta { margin-top: var(--espai-3); }

/* ---- Llistes ---- */
.llista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--vora); border-radius: var(--radi); background: var(--superficie); }
.llista > li {
  display: flex; align-items: center; gap: var(--espai-3);
  min-height: var(--tocar); padding: var(--espai-2) var(--espai-3);
}
.llista > li + li { border-top: 1px solid var(--vora); }
.llista .creix { flex: 1; min-width: 0; }

/* ---- Insígnies d'estat (text + color: no només color) ---- */
.insignia {
  display: inline-flex; align-items: center; gap: var(--espai-1);
  padding: .125rem .625rem; border-radius: 999px;
  font-size: .875rem; font-weight: 700; white-space: nowrap;
}
.insignia--ok { background: var(--ok-fons); color: var(--ok-text); }
.insignia--aviat { background: var(--aviat-fons); color: var(--aviat-text); }
.insignia--caducat { background: var(--caducat-fons); color: var(--caducat-text); }

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