/* alta.css — L'Aula de la Laia, Assistent de benvinguda (I2B-ALTA-ALUMNE, carril front-alta)
 * Full propi: totes les regles viuen sota les classes "alta-" i "#alta-overlay" (§6.2 del brief),
 * no toca ni una regla de la resta de l'aula. Els valors venen de les variables que ja declara
 * skins.css per a cada pell (--bg, --text, --accent...) -- mateix contracte que app.css, sense fixar
 * cap color propi fora dels tokens --alta-* que no tenen equivalent (bombolla, "aviat").
 * Objectius grans (§6.1.9): rajoles ≥ 64px d'alt / 120px d'ample, xips ≥ 44px d'alt, separació
 * mínima de 8px, focus SEMPRE visible, cap animació si prefers-reduced-motion. */

#alta-overlay{
  position:fixed;inset:0;z-index:calc(var(--z-modal, 1000) + 100);
  background:rgba(8,8,14,.6);display:flex;align-items:flex-start;justify-content:center;
  overflow-y:auto;padding:24px 16px 48px;
}
#alta-overlay *{box-sizing:border-box;}

.alta-marc{
  position:relative;width:100%;max-width:1040px;margin:0 auto;
  background:var(--bg2);color:var(--text);border-radius:var(--radius-card,16px);
  box-shadow:var(--shadow);padding:26px 24px 30px;font-family:var(--font-body,'Inter',sans-serif);
  font-size:16px;line-height:1.5;
}
.alta-marc h1,.alta-marc h2,.alta-marc h3{font-family:var(--font-head,'Nunito',sans-serif);}
.alta-marc h1{font-size:1.5rem;margin:0;font-weight:700;}
.alta-marc h2{font-size:1.7rem;margin:0 0 4px;font-weight:700;}
.alta-marc h3{font-size:.9rem;margin:14px 0 0;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;}
.alta-marc p{margin:0;}

.alta-tanca{
  position:absolute;top:14px;right:16px;width:40px;height:40px;border-radius:50%;
  font-size:20px;line-height:1;background:var(--bg3);color:var(--text);
}
.alta-tanca:hover{background:var(--border);}

.alta-cap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;padding-right:44px;}
.alta-etiqueta{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);font-weight:700;}
.alta-passos{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.alta-pas{
  display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text-dim);font-weight:700;font-size:.8rem;
}
.alta-pas-num{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--border);color:var(--text);font-size:.72rem;}
.alta-pas-actual{border-color:var(--accent);color:var(--text);background:var(--accent-soft, var(--bg3));}
.alta-pas-actual .alta-pas-num{background:var(--accent);color:var(--bg2);}
.alta-pas-fet .alta-pas-num{background:var(--ok,#2f9e57);color:#fff;}

.alta-graella{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start;}
@media (max-width:820px){.alta-graella{grid-template-columns:1fr;}.alta-company{position:static;}}

.alta-company{
  background:var(--bg3);border-radius:var(--radius-card,14px);padding:20px;position:sticky;top:0;
  display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;
}
.alta-avatar{
  width:120px;height:120px;border-radius:50%;display:grid;place-items:center;font-size:64px;
  background:var(--accent-soft, var(--bg2));border:5px solid var(--bg2);box-shadow:0 0 0 2px var(--border);
}
.alta-avatar-buit{font-size:.85rem;color:var(--text-dim);font-weight:700;padding:16px;}
.alta-nom-company{font-family:var(--font-head,'Nunito',sans-serif);font-size:1.25rem;font-weight:700;min-height:1.5rem;}
.alta-bombolla{
  position:relative;background:var(--gat-bubble-bg, var(--bg2));color:var(--gat-bubble-fg, var(--text));
  border:1px solid var(--gat-bubble-border, var(--border));border-radius:14px;padding:11px 13px;
  font-weight:600;font-size:.92rem;width:100%;
}

.alta-full{background:var(--bg2);border-radius:var(--radius-card,14px);display:flex;flex-direction:column;gap:22px;}
.alta-pantalla[hidden]{display:none;}
.alta-pantalla{display:flex;flex-direction:column;gap:22px;}
.alta-capcalera-pas .alta-sub{color:var(--text-dim);font-size:1rem;}
.alta-bloc{display:flex;flex-direction:column;gap:9px;}
.alta-bloc>label,.alta-bloc>.alta-preg{font-weight:700;font-size:1.02rem;}
.alta-pista{color:var(--text-dim);font-size:.86rem;}
.alta-pista-inline{display:block;font-size:.65rem;color:var(--text-dim);font-weight:500;}

.alta-marc input[type="text"],.alta-marc input[type="date"]{
  font:inherit;font-size:1.05rem;padding:11px 14px;border-radius:12px;border:2px solid var(--border);
  background:var(--bg);color:var(--text);width:100%;max-width:460px;min-height:44px;
}
.alta-marc input:focus-visible,.alta-marc button:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;
}

.alta-rajoles{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;}
.alta-rajola{
  border:2px solid var(--border);background:var(--bg);border-radius:14px;padding:10px 8px;
  min-height:64px;min-width:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;font:inherit;color:var(--text);font-weight:700;text-align:center;
}
.alta-rajola-gran{min-height:104px;}
.alta-rajola[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft, var(--bg3));box-shadow:inset 0 0 0 2px var(--accent);}
.alta-rajola[disabled]{opacity:.5;cursor:not-allowed;}
.alta-ico{font-size:34px;line-height:1;}
.alta-aviat{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--warn,#c68a1f);}

.alta-xips{display:flex;flex-wrap:wrap;gap:8px;}
.alta-xip{
  border:2px solid var(--border);background:var(--bg);color:var(--text);border-radius:999px;
  padding:10px 16px;min-height:44px;font:inherit;font-weight:700;
}
.alta-xip[aria-pressed="true"]{background:var(--accent);color:var(--bg2);border-color:var(--accent);}

.alta-colors{display:flex;gap:10px;flex-wrap:wrap;}
.alta-color{width:44px;height:44px;border-radius:50%;border:4px solid var(--bg2);box-shadow:0 0 0 2px var(--border);padding:0;}
.alta-color[aria-pressed="true"]{box-shadow:0 0 0 4px var(--accent);}

.alta-lliure{border-top:1px dashed var(--border);padding-top:14px;}
.alta-lliure label{font-weight:700;color:var(--text-dim);}

.alta-peu{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  border-top:1px solid var(--border);padding-top:16px;flex-wrap:wrap;
}
.alta-falta{color:var(--warn,#c68a1f);font-weight:700;font-size:.92rem;min-height:1.3rem;flex:1 1 auto;text-align:center;}
.alta-boto{
  font-family:var(--font-head,'Nunito',sans-serif);font-size:1.05rem;font-weight:700;
  padding:12px 24px;min-height:44px;border-radius:999px;border:2px solid transparent;
}
.alta-boto-primari{background:var(--accent);color:var(--bg2);}
.alta-boto-primari:hover{filter:brightness(1.08);}
.alta-boto-secundari{background:transparent;color:var(--text);border-color:var(--border);}
.alta-boto-accent{background:var(--accent2, var(--accent));color:var(--bg2);font-size:1.2rem;padding:14px 32px;}

.alta-resum{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.alta-targeta{background:var(--bg3);border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;}
.alta-targeta .alta-etiqueta{font-size:.7rem;}
.alta-targeta .alta-val{font-weight:700;}
.alta-canvia{font-size:.84rem;color:var(--accent);background:none;border:0;padding:0;text-align:left;font-weight:700;font-family:inherit;}

.alta-final{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:6px 0 2px;}

/* Mode motriu (§6.1.9, "capa motriu"): res de transicions/transformacions si l'usuari ho ha
   demanat -- afecta rajoles, xips i el desplaçament entre pantalles (gestionat a alta.js). */
@media (prefers-reduced-motion: no-preference){
  .alta-rajola,.alta-xip,.alta-color,.alta-boto{transition:transform .08s ease,border-color .15s ease,background .15s ease;}
  .alta-rajola:hover:not([disabled]){transform:translateY(-2px);border-color:var(--accent);}
}
@media (prefers-reduced-motion: reduce){
  .alta-rajola,.alta-xip,.alta-color,.alta-boto,#alta-overlay{transition:none;animation:none;}
}