/* ════════════════════════════════════════════════════════════════════
   BASE RESPONSIVE · Fase 1 · Mobile-first foundation
   ────────────────────────────────────────────────────────────────────
   Aquest fitxer estableix la base de tokens, utilitats i resets
   responsive del projecte. Es carrega ABANS de la resta de CSS
   (style.css, gestio/css/app.css) perquè les regles existents
   puguin sobreescriure'l si cal — així no trenquem res en aquesta
   fase. En fases posteriors els components migraran a consumir
   aquests tokens i utilitats.
   ════════════════════════════════════════════════════════════════════

   ┌─ BREAKPOINTS ─────────────────────────────────────────────────────┐
   │                                                                    │
   │   mobile   →  base · sense @media · fins a 639px                   │
   │   tablet   →  @media (min-width: 640px) · 640-1023px               │
   │   desktop  →  @media (min-width: 1024px) · 1024px en endavant      │
   │                                                                    │
   │   Per què 3 i no els 14 actuals (360, 420, 480, 520, 540, 560,     │
   │   640, 680, 720, 768, 820, 900, 980, 1024, 1120):                  │
   │                                                                    │
   │   1. Cada breakpoint extra dobla la càrrega cognitiva. Amb 14      │
   │      breakpoints ningú no sap a quin disseny pertany cada regla.   │
   │   2. Els dispositius reals s'agrupen molt clarament en 3 famílies: │
   │      · Telèfons en vertical (320-480px)                            │
   │      · Tablets i telèfons horitzontals (640-1023px)                │
   │      · Monitors (≥ 1024px)                                         │
   │   3. La diferència entre 768 i 820px és cosmètica; mai justifica   │
   │      una regla específica.                                         │
   │   4. Si una pantalla concreta necessita un punt intermedi, ho fem  │
   │      amb clamp() o auto-fit, no amb un breakpoint més.             │
   │                                                                    │
   │   Mobile-first: tot el CSS base assumeix mòbil. Els @media         │
   │   sempre són min-width (afegir per pantalles més grans), mai       │
   │   max-width (afegir per quan s'encongeix).                         │
   │                                                                    │
   └────────────────────────────────────────────────────────────────────┘ */


/* ════════════════════════════════════════════════════════════════════
   TOKENS · Custom Properties globals
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* ─ Escala tipogràfica · clamp(min, preferred, max) ──────────────── */
  /* min = 360px-mòbil · max = desktop ample · preferred = vw fluid    */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);   /* 12-13px */
  --fs-sm:   clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem);  /* 13-14px */
  --fs-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);        /* 15-16px */
  --fs-lg:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);     /* 17-19px */
  --fs-xl:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);        /* 20-24px */
  --fs-2xl:  clamp(1.5rem, 1.25rem + 1.2vw, 2rem);          /* 24-32px */
  --fs-3xl:  clamp(2rem, 1.6rem + 2vw, 3rem);               /* 32-48px */

  /* ─ Escala d'spacing · múltiples de 4px, fluid amb clamp ─────────── */
  --sp-1: 0.25rem;                                  /* 4px  fix    */
  --sp-2: 0.5rem;                                   /* 8px  fix    */
  --sp-3: 0.75rem;                                  /* 12px fix    */
  --sp-4: 1rem;                                     /* 16px fix    */
  --sp-5: clamp(1rem, 0.85rem + 0.6vw, 1.5rem);     /* 16-24px     */
  --sp-6: clamp(1.25rem, 1rem + 1vw, 2rem);         /* 20-32px     */
  --sp-7: clamp(1.5rem, 1.15rem + 1.4vw, 2.5rem);   /* 24-40px     */
  --sp-8: clamp(2rem, 1.5rem + 2vw, 4rem);          /* 32-64px     */

  /* ─ Targets tàctils ──────────────────────────────────────────────── */
  --tap-min: 44px;          /* WCAG 2.5.5 + Apple HIG + Material   */

  /* ─ Container responsive ─────────────────────────────────────────── */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 4vw, 2rem);          /* 16-32px     */
}


/* ════════════════════════════════════════════════════════════════════
   RESETS RESPONSIVE
   Només els que afecten la usabilitat al mòbil. NO toquem reset
   global (margin, padding, box-sizing) per no xocar amb style.css.
   ════════════════════════════════════════════════════════════════════ */

/* Imatges i mèdia no desborden el viewport. */
img, video, svg, picture {
  max-width: 100%;
  height: auto;
}

/* iOS: font-size < 16px en focus provoca zoom automàtic. Posant
   16px de mínim ho evitem. Pot ser sobreescrit per regles més
   específiques que canviïn la mida visual amb transform/scale. */
input,
select,
textarea {
  font-size: max(16px, 1rem);
}

/* Botons i CTAs amb àrea tàctil mínima per a polzes (44×44 = WCAG
   AAA). Si un botó actual ja té min-height més gran, no canvia res.
   Si en té un de més petit, l'estil específic guanya per
   especificitat — aquesta és només la base. */
button,
.btn,
a.btn,
[role="button"] {
  min-height: var(--tap-min);
}

/* RECORDATORI per al futur (Fase 2-3):
   Tots els :hover nous han d'anar dins un guard de hover capability
   per evitar estats stuck a tàctil:

       @media (hover: hover) {
         .meva-classe:hover { ... }
       }

   Els hovers existents (62 a style.css, 0 dins d'aquest guard) es
   migraran component a component a la fase 2. */


/* ════════════════════════════════════════════════════════════════════
   CONTAINER GLOBAL MOBILE-FIRST
   Classe NOVA · no toca la `.container` existent. A la fase 3 els
   components migraran de `.container` → `.container-fluid`.
   ════════════════════════════════════════════════════════════════════ */
.container-fluid {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}


/* ════════════════════════════════════════════════════════════════════
   UTILITATS DE LAYOUT
   Composables. No reemplacen res; permeten escriure mobile-first
   sense reinventar a cada component.
   ════════════════════════════════════════════════════════════════════ */

/* .stack: apila fills amb separació vertical consistent.
   Substitueix `margin-bottom: Xpx` repetit a cada element. */
.stack > * + * { margin-block-start: var(--sp-3); }
.stack-sm > * + * { margin-block-start: var(--sp-2); }
.stack-lg > * + * { margin-block-start: var(--sp-5); }

/* .cluster: línia d'elements amb wrap automàtic (chips, tags,
   botons del toolbar). No requereix breakpoints — el wrap fa
   la feina sol. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

/* .grid-auto: grid responsive per defecte. Cada cel·la mai més
   petita que 280px ni més gran que 1fr. Col·lapsa automàticament
   a 1 columna a mòbil sense @media. */
.grid-auto {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.grid-auto-sm {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}
.grid-auto-lg {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
}


/* ════════════════════════════════════════════════════════════════════
   .no-table-overflow
   Marca de futur: aplicar-la a `.tcard table` (o similar) a la
   fase 2 per substituir el `min-width: 600px` que avui força scroll
   horitzontal al backoffice. La regla és inert per defecte; només
   deixem definits els bàsics per al refactor.
   ════════════════════════════════════════════════════════════════════ */
.no-table-overflow {
  width: 100%;
  min-width: 0 !important;
  display: block;
}
.no-table-overflow thead,
.no-table-overflow tbody,
.no-table-overflow tr,
.no-table-overflow td,
.no-table-overflow th {
  display: block;
  width: 100%;
}


/* ════════════════════════════════════════════════════════════════════
   UTILITATS DE VISIBILITAT RESPONSIVE
   Per amagar/mostrar elements en funció del breakpoint sense
   inventar regles ad-hoc.
   ════════════════════════════════════════════════════════════════════ */

/* Per defecte: amagat al mòbil; visible a tablet+ o desktop+.
   !important per evitar que un display:inline-flex/block heretat
   d'un selector pare anul·li la utilitat. */
.show-tablet-up,
.show-desktop-up { display: none !important; }

@media (min-width: 640px) {
  .show-tablet-up { display: initial !important; }
  .hide-tablet-up { display: none !important; }
}
@media (min-width: 1024px) {
  .show-desktop-up { display: initial !important; }
  .hide-desktop-up { display: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
   ACCESIBILITAT TÀCTIL
   Helper per a icones d'acció petites (`.rb`, `.mcl`, etc.) que
   visualment són < 44px. Aplicant `.tap-friendly` se'ls amplia
   l'àrea de toc invisible sense canviar la mida visible. Es farà
   servir a la fase 2 quan refactoritzem botons.
   ════════════════════════════════════════════════════════════════════ */
.tap-friendly {
  position: relative;
}
.tap-friendly::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--tap-min);
  height: var(--tap-min);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}


/* ════════════════════════════════════════════════════════════════════
   PRINT · cobertura mínima
   ════════════════════════════════════════════════════════════════════ */
@media print {
  .no-print { display: none !important; }
}