/* ============================================================================
   fitxa.css — La fitxa d'una situació d'aprenentatge
   ----------------------------------------------------------------------------
   La fitxa no és un document: és una guia de consulta ràpida. Tot el full està
   pensat perquè, en menys d'un minut i sense llegir cap paràgraf llarg, es pugui
   respondre: de què va, què volem afavorir, què farà l'infant, què farà l'adulta,
   què cal tenir a punt i en què ens fixarem.

   Per això la pàgina només té quatre peces:
     1. la capçalera, amb el repte
     2. «En 30 segons», cinc blocs de frases curtes
     3. el recorregut, tres passes
     4. «Tot el detall», replegat

   Cap color nou. Els cinc tons de la identitat, un per bloc, fan de codi: el
   color diu de què parla el bloc abans de llegir-ne el títol.
   ========================================================================== */

/* --- Capçalera --------------------------------------------------------------- */

.fitxa .embolcall { padding-block: var(--e-5) var(--e-8); }

.fitxa-torna { margin-bottom: var(--e-5); }

.fitxa-cap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
  margin-bottom: var(--e-7);
}

.fitxa-cap h1 { max-width: 20ch; }

.fitxa-cap .xips-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

/* El repte és l'única prosa de la primera lectura, i per això se li dona mida i
   aire: és la frase que diu de què va tot plegat. */
.fitxa-repte {
  margin: var(--e-2) 0 0;
  max-width: 46rem;
  font-size: var(--mida-l);
  line-height: 1.55;
  color: var(--text-suau);
  border-left: 3px solid var(--verd-fons);
  padding-left: var(--e-4);
}

/* --- Encapçalaments de secció ------------------------------------------------ */

.fitxa-ep {
  margin: 0 0 var(--e-4);
  font-size: var(--mida-xl);
  color: var(--text);
}

.fitxa-ep + * { margin-bottom: var(--e-7); }

/* --- En 30 segons ------------------------------------------------------------ */

.trenta {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
}

.bloc {
  padding: var(--e-5);
  border-radius: var(--radi-l);
  background: var(--bloc-vel);
}

.bloc-icona {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--e-3);
  border-radius: var(--radi-ple);
  background: var(--bloc-fons);
  /* El to profund no va mai damunt del to saturat de la seva família: hi queda
     en 3,2-3,9:1. Damunt del to d'identitat, el traç va en --text. */
  color: var(--text);
}
.bloc-icona svg { width: 1.5rem; height: 1.5rem; }

.bloc h3 {
  margin: 0 0 var(--e-3);
  font-size: var(--mida-l);
  font-weight: 800;
  color: var(--bloc-text);
}

.bloc ul {
  margin: 0;
  padding: 0;
  max-width: none;
  list-style: none;
}

.bloc li {
  position: relative;
  margin: 0 0 .5em;
  padding-left: 1.1rem;
  font-size: var(--mida-s);
  line-height: 1.5;
  color: var(--text);
}
.bloc li:last-child { margin-bottom: 0; }

.bloc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .4rem;
  height: .4rem;
  border-radius: var(--radi-ple);
  background: var(--bloc-fons);
}

.bloc li strong { font-weight: 800; color: var(--bloc-text); }

/* La procedència, sempre visible. Aquest bloc no surt d'un camp propi del model
   i la fitxa ho ha de dir, encara que sigui en lletra petita. */
.bloc-nota {
  margin: var(--e-3) 0 0;
  max-width: none;
  font-size: var(--mida-xs);
  color: var(--text-tenue);
}

.bloc-verd    { --bloc-vel: var(--verd-vel);    --bloc-fons: var(--verd-fons);    --bloc-text: var(--verd-text); }
.bloc-mel     { --bloc-vel: var(--mel-vel);     --bloc-fons: var(--mel-fons);     --bloc-text: var(--mel-text); }
.bloc-blau    { --bloc-vel: var(--blau-vel);    --bloc-fons: var(--blau-fons);    --bloc-text: var(--blau-text); }
.bloc-pressec { --bloc-vel: var(--pressec-vel); --bloc-fons: var(--pressec-fons); --bloc-text: var(--pressec-text); }
.bloc-lila    { --bloc-vel: var(--lila-vel);    --bloc-fons: var(--lila-fons);    --bloc-text: var(--lila-text); }

/* --- El recorregut ----------------------------------------------------------- */

.recorregut {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
  /* Explícit, i no heretat de `.fitxa-ep + *`: les dues regles tenen la mateixa
     especificitat i aquesta, per ser posterior, guanyaria amb un marge de zero. */
  margin: 0 0 var(--e-7);
  padding: 0;
  max-width: none;
  list-style: none;
}

.fase-r {
  position: relative;
  margin: 0;
  padding: var(--e-5);
  border-radius: var(--radi-l);
  background: var(--fase-vel);
  border: 1px solid var(--linia);
}

.fase-num {
  margin: 0 0 var(--e-1);
  font-size: var(--mida-2xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fase-text);
}

.fase-r h3 {
  margin: 0 0 var(--e-3);
  font-size: var(--mida-l);
  color: var(--text);
}

.fase-propostes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  max-width: none;
  list-style: none;
}

.fase-propostes li {
  margin: 0;
  padding: .3em .85em;
  border-radius: var(--radi-ple);
  background: var(--superficie);
  font-size: var(--mida-s);
  font-weight: 600;
  color: var(--text-suau);
}

.fase-just {
  margin: 0;
  max-width: none;
  font-size: var(--mida-s);
  color: var(--text-tenue);
}
.fase-na { opacity: .82; }

.fase-verd { --fase-vel: var(--verd-vel); --fase-text: var(--verd-text); }
.fase-mel  { --fase-vel: var(--mel-vel);  --fase-text: var(--mel-text); }
.fase-blau { --fase-vel: var(--blau-vel); --fase-text: var(--blau-text); }

/* --- Tot el detall ----------------------------------------------------------- */

.detalls {
  border-top: 1px solid var(--linia);
}

.detalls details {
  border-bottom: 1px solid var(--linia);
}

.detalls summary {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  /* Prou alt per al dit: cap àrea interactiva per sota dels 44 px. */
  min-height: var(--area-tactil);
  padding: var(--e-4) var(--e-2);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
.detalls summary::-webkit-details-marker { display: none; }

.detalls summary::after {
  content: "";
  flex: none;
  width: .6rem;
  height: .6rem;
  margin-left: auto;
  border-right: 2.5px solid var(--text-tenue);
  border-bottom: 2.5px solid var(--text-tenue);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.detalls details[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.detalls summary:hover { color: var(--verd-text); }
.detalls summary:focus-visible {
  outline: 3px solid var(--verd);
  outline-offset: 2px;
  border-radius: var(--radi-s);
}

.det-n {
  font-size: var(--mida-xs);
  font-weight: 600;
  color: var(--text-tenue);
}

.det-cos {
  padding: 0 var(--e-2) var(--e-6);
}

.det-cos h3 {
  margin: var(--e-5) 0 var(--e-2);
  font-size: var(--mida-m);
  font-weight: 800;
  color: var(--text-suau);
}
.det-cos > h3:first-child { margin-top: 0; }

.det-cos p, .det-cos ul, .det-cos ol { max-width: 46rem; }

/* Objectius i criteris: el model els desa com dues llistes germanes lligades per
   objectiu_id. Llegir-los per separat obliga a fer la unió mentalment, i per això
   aquí cada objectiu porta els seus criteris a sota. */
.obj {
  padding: var(--e-5);
  margin-bottom: var(--e-4);
  border-radius: var(--radi-m);
  background: var(--superficie-2);
}
.obj h3 { margin-top: 0; color: var(--text); }

.obj-formula {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: var(--e-3) 0;
  max-width: none;
}
.fx {
  padding: .2em .7em;
  border-radius: var(--radi-ple);
  font-size: var(--mida-xs);
  font-weight: 600;
}
.fx-cap { background: var(--mel-vel);     color: var(--mel-text); }
.fx-sab { background: var(--verd-vel);    color: var(--verd-text); }
.fx-fin { background: var(--blau-vel);    color: var(--blau-text); }

.obj-cri {
  margin: var(--e-4) 0 var(--e-2);
  font-size: var(--mida-xs);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-tenue);
}

.criteris { padding-left: 1.2rem; }
.criteris li { margin-bottom: var(--e-3); }
.cri-text { margin: 0; }
.cri-peces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-4);
  margin: var(--e-1) 0 0;
  max-width: none;
  font-size: var(--mida-xs);
  /* --text-tenue damunt de --superficie-2 es queda en 4,44:1 al tema fosc.
     Calculat contra el fons realment renderitzat, no contra el fons de pàgina. */
  color: var(--text-suau);
}

.props li { margin-bottom: var(--e-3); }
.durada {
  padding: .1em .6em;
  border-radius: var(--radi-ple);
  background: var(--superficie-2);
  font-size: var(--mida-xs);
  /* --text-tenue damunt de --superficie-2 es queda en 4,44:1 al tema fosc.
     Calculat contra el fons realment renderitzat, no contra el fons de pàgina. */
  color: var(--text-suau);
}

.mesures { padding-left: 0; list-style: none; }
.mesures li {
  padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-2);
  border-radius: var(--radi-m);
  background: var(--superficie-2);
}
.xips-dua { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-2) 0 0; }
.xip-dua, .xip-barrera {
  padding: .15em .7em;
  border-radius: var(--radi-ple);
  font-size: var(--mida-xs);
  font-weight: 600;
}
.xip-dua     { background: var(--lila-vel);    color: var(--lila-text); }
.xip-barrera { background: var(--pressec-vel); color: var(--pressec-text); }
.serveis { margin: var(--e-2) 0 0; font-size: var(--mida-s); }

.avis-obs {
  padding: var(--e-3) var(--e-4);
  border-radius: var(--radi-m);
  background: var(--verd-vel);
  max-width: 46rem;
}

.cur-eix { margin-bottom: var(--e-5); }
.cur-ce { margin: 0 0 var(--e-3); font-size: var(--mida-s); color: var(--text-suau); }
.cur-sabers { padding-left: 0; list-style: none; }
.cur-sabers > li {
  padding-left: var(--e-4);
  border-left: 3px solid var(--linia-forta);
  margin-bottom: var(--e-4);
}
.cur-saber { margin: 0; }
.cur-nota { margin: var(--e-1) 0 0; font-size: var(--mida-s); color: var(--text-suau); }
.cur-proc { margin: var(--e-1) 0 0; font-size: var(--mida-xs); color: var(--text-tenue); }

.xips-id { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.xip-id {
  display: inline-block;
  padding: .1em .55em;
  border-radius: var(--radi-s);
  background: var(--superficie);
  border: 1px solid var(--linia-forta);
  font-size: var(--mida-xs);
  font-weight: 700;
  color: var(--text-suau);
  white-space: nowrap;
}

.tecnica {
  display: grid;
  gap: var(--e-3) var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  margin: 0;
}
.tecnica dt { font-size: var(--mida-xs); color: var(--text-tenue); }
.tecnica dd { margin: 0; font-weight: 600; }

/* --- A partir de tauleta ------------------------------------------------------ */

@media (min-width: 48rem) {
  .trenta { grid-template-columns: repeat(6, 1fr); }
  .bloc { grid-column: span 3; }

  /* Amb els cinc blocs, tres a dalt i dos a baix. La condició doble evita que la
     regla s'apliqui quan una SA no té els cinc: llavors tots fan la mateixa mida. */
  .bloc:nth-child(1):nth-last-child(5),
  .bloc:nth-child(2):nth-last-child(4),
  .bloc:nth-child(3):nth-last-child(3) { grid-column: span 2; }

  .recorregut { grid-template-columns: repeat(3, 1fr); }

  /* La fletxa que lliga les passes. Decorativa: els lectors de pantalla ja tenen
     la llista numerada. */
  .fase-r:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -1.1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--mida-l);
    color: var(--text-tenue);
  }
}

/* --- Impressió ---------------------------------------------------------------- */

@media print {
  .capcalera, .peu, .fitxa-torna, .salta { display: none; }

  /* En paper la situació surt sencera: no té cap sentit imprimir un desplegable
     tancat. */
  .detalls details > *:not(summary) { display: block !important; }
  .detalls summary::after { display: none; }
  .detalls details { break-inside: avoid; }

  .bloc, .fase-r, .obj { break-inside: avoid; }
  .fase-r::after { display: none; }
  body { background: #fff; }
}

/* --- L'enllaç cap a la làmina ------------------------------------------------
   La làmina no s'incrusta a la fitxa: és un full apaïsat i dens, i encabit a
   l'amplada d'aquesta pàgina quedaria il·legible. La fitxa hi porta i prou. */

.lamina-enllac {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: var(--e-5);
  align-items: center;
  padding: var(--e-5);
  border-radius: var(--radi-l);
  background: var(--verd-vel);
  color: inherit;
  text-decoration: none;
  transition: background .18s ease;
}
.lamina-enllac:hover { background: var(--verd-fons); }
.lamina-enllac:focus-visible { outline: 3px solid var(--verd); outline-offset: 3px; }

.lamina-mini { border-radius: var(--radi-m); overflow: hidden; }
.lamina-mini img { display: block; width: 100%; height: auto; }

.lamina-t { display: block; font-size: var(--mida-l); font-weight: 800; }
.lamina-x {
  display: block;
  margin: var(--e-2) 0 var(--e-3);
  max-width: 46rem;
  font-size: var(--mida-s);
  color: var(--text-suau);
}
.lamina-b { display: inline-block; font-weight: 800; color: var(--verd-text); }
.lamina-enllac:hover .lamina-b { color: var(--text); }

@media (max-width: 40rem) {
  .lamina-enllac { grid-template-columns: 1fr; }
  .lamina-mini { max-width: 12rem; }
}

/* L'identificador curricular ara és un enllaç cap a la pantalla del currículum.
   Manté l'aspecte de xip: el que canvia és que s'hi pot anar, no com es veu. */
a.xip-id { text-decoration: none; }
a.xip-id:hover { background: var(--blau); color: var(--fons); }
a.xip-id:focus-visible { outline: 3px solid var(--verd); outline-offset: 2px; }