/* Quadrant de la Policia Local de Mollerussa
   La mateixa identitat visual que l'app del Google: els mateixos
   colors, els mateixos radis i la mateixa escala de mides, perquè el
   canvi de casa no es noti. */

:root {
  --blau: #14283f;
  --blau-mig: #1f3d5c;
  --blau-clar: #2d5f8a;
  --daurat: #c9a84c;
  --gris: #eef1f5;
  --gris-fosc: #5b6675;
  --border: #e6e9ee;

  --bg: #f6f7f9;
  --card-bg: #ffffff;
  --ink: #10151c;

  --M-ac: #c77d2e; --T-ac: #2f6aa8; --N-ac: #64529b;
  --M-fill: #fbf1e3;
  --T-fill: #ecf3fa;
  --N-fill: #f1eef9;
  --MT-fill: #fbf1e3; --MT-ac: #c77d2e;
  --TN-fill: #f1eef9; --TN-ac: #64529b;

  --danger: #eb5757;
  --warn: #f2994a;

  /* El daurat de dalt és un fons: com a lletra sobre blanc no es
     llegiria. Aquest és el mateix color, prou fosc per escriure-hi:
     és el dels dies de festa QUE ES COBREN. */
  --daurat-lletra: #8a6a12;

  --t-peu: 11px;
  --t-petit: 13px;
  --t-cos: 15px;
  --t-mitja: 18px;
  --t-gran: 22px;

  --radi: 12px;
  --radi-petit: 7px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-cos)/1.45 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
}

/* ---------------- La capçalera ---------------- */
.barra {
  background: var(--blau);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.barra h1 {
  margin: 0;
  font-size: var(--t-mitja);
  font-weight: 600;
  letter-spacing: .2px;
}

.barra .lloc { font-size: var(--t-petit); color: #b9c4d2; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.nav a {
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radi-petit);
  padding: 6px 12px;
  font-size: var(--t-petit);
}
.nav a:hover { background: rgba(255, 255, 255, .22); }
.nav .avui { background: var(--daurat); border-color: var(--daurat); color: #2a2208; font-weight: 600; }

/* El contingut no s'estira fins als extrems de la pantalla: en un
   monitor ample, una línia de text de pam i mig no es llegeix. */
main { padding: 20px; max-width: 1060px; margin: 0 auto; }

.titol-setmana {
  font-size: var(--t-gran);
  font-weight: 600;
  margin: 0 0 4px;
}
.titol-setmana .feble { color: var(--gris-fosc); font-weight: 400; }

.sots {
  color: var(--gris-fosc);
  font-size: var(--t-petit);
  margin-bottom: 16px;
}

/* ---------------- La graella ----------------
   Les ratlles fines són el fons que es veu pels forats d'un "gap" d'un
   píxel: així no hi ha vores dobles enlloc. */
.graella {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radi);
  overflow: hidden;
  margin-bottom: 18px;
}

.setmana { grid-template-columns: 86px repeat(5, 1fr); }
.capdesetmana { grid-template-columns: 86px repeat(2, 1fr); }

.dia-cap, .torn-cap, .cel, .fora-cel { background: var(--card-bg); }

.dia-cap {
  padding: 9px 12px;
  text-align: center;
  border-bottom: 2px solid transparent;
}
.dia-cap .nom { font-size: var(--t-petit); color: var(--gris-fosc); text-transform: capitalize; }
.dia-cap .num { font-size: var(--t-mitja); font-weight: 600; }
/* El cap de setmana i els dies de festa, en vermell: el nom i el
   número. Van abans que «avui» a posta, que si avui és dissabte mana el
   blau i el vermell no s'hi veuria. */
.dia-cap.capde .nom,  .dia-cap.capde .num,
.dia-cap.festiu .nom, .dia-cap.festiu .num { color: var(--danger); }
/* I els dies de festa QUE ES COBREN, amb el daurat de la casa: d'una
   ullada se sap quina festa porta diners i quina només és al
   calendari. */
.dia-cap.festiu.cobra .nom,
.dia-cap.festiu.cobra .num,
.dia-cap.festiu.cobra .festa { color: var(--daurat-lletra); font-weight: 700; }
.dia-cap.avui { background: var(--blau); }
.dia-cap.avui .nom { color: #b9c4d2; }
.dia-cap.avui .num { color: #fff; }
.dia-cap.avui .festa { color: #ffc9c9; }
.dia-cap .festa {
  font-size: var(--t-peu);
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.cantonada { background: var(--card-bg); }

.torn-cap {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.torn-cap .lletra { font-weight: 700; font-size: var(--t-mitja); }
.torn-cap .hora { font-size: var(--t-peu); color: var(--gris-fosc); }

.cel { padding: 8px; min-height: 92px; }

/* El color del torn omple la casella sencera, en to fluix, i la ratlla
   del costat en marca el principi. */
.t-M  { background: var(--M-fill);  box-shadow: inset 4px 0 0 var(--M-ac); }
.t-T  { background: var(--T-fill);  box-shadow: inset 4px 0 0 var(--T-ac); }
.t-N  { background: var(--N-fill);  box-shadow: inset 4px 0 0 var(--N-ac); }
.t-MT { background: var(--MT-fill); box-shadow: inset 4px 0 0 var(--MT-ac); }
.t-TN { background: var(--TN-fill); box-shadow: inset 4px 0 0 var(--TN-ac); }

.torn-cap.t-M .lletra  { color: var(--M-ac); }
.torn-cap.t-T .lletra  { color: var(--T-ac); }
.torn-cap.t-N .lletra  { color: var(--N-ac); }
.torn-cap.t-MT .lletra { color: var(--MT-ac); }
.torn-cap.t-TN .lletra { color: var(--TN-ac); }

/* ---------------- Les caselles ---------------- */
.tip {
  display: inline-block;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 6px;
  padding: 3px 8px;
  margin: 0 4px 4px 0;
  font-size: var(--t-petit);
  font-variant-numeric: tabular-nums;
}
.tip.cap {
  border-color: var(--daurat);
  box-shadow: inset 0 0 0 1px var(--daurat);
  font-weight: 600;
}
.tip.cap::after {
  content: "cap";
  font-size: var(--t-peu);
  color: var(--daurat);
  margin-left: 5px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
/* El cap de prefectura no és el cap de torn: és una altra feina i es
   cobra a part, i per tant ha de ser una altra marca. Si recauen en la
   mateixa persona, el xip ho diu tot junt. */
.tip.pref {
  border-color: var(--blau-clar);
  box-shadow: inset 0 0 0 1px var(--blau-clar);
  font-weight: 600;
}
.tip.pref::after {
  content: "pref";
  font-size: var(--t-peu);
  color: var(--blau-clar);
  margin-left: 5px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.tip.cap.pref {
  border-color: var(--daurat);
  box-shadow: inset 0 0 0 1px var(--daurat), inset 0 0 0 3px #eef3f9;
}
.tip.cap.pref::after { content: "cap · pref"; color: var(--daurat); }

.tip.extra { border-color: var(--warn); background: #fff8f0; }
.tip.extra i { font-style: normal; color: var(--warn); font-weight: 600; }
.tip.voluntari { border-style: dashed; color: var(--gris-fosc); }

.buit { color: #b9c0ca; font-size: var(--t-petit); }

.falta {
  display: block;
  font-size: var(--t-peu);
  color: var(--danger);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-top: 2px;
}

.etiqueta {
  display: block;
  font-size: var(--t-peu);
  color: var(--gris-fosc);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin: 6px 0 3px;
}

/* ---------------- Els panells per canviar ----------------
   El "+" és petit i gris fins que hi passes per sobre: la pantalla és
   per mirar el quadrant, no per editar-lo. */
.editar { margin-top: 4px; }
.editar > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  border: 1px dashed #c4ccd6;
  border-radius: var(--radi-petit);
  color: var(--gris-fosc);
  font-size: var(--t-petit);
  background: rgba(255, 255, 255, .6);
}
.editar > summary::-webkit-details-marker { display: none; }
.editar > summary:hover { border-color: var(--blau-clar); color: var(--blau-clar); }
.editar[open] > summary { border-style: solid; background: var(--blau); color: #fff; }

.panell {
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radi-petit);
  padding: 8px;
}
.panell select {
  width: 100%;
  padding: 4px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font: inherit;
  font-size: var(--t-peu);
  background: #fff;
  color: var(--ink);
  margin-bottom: 4px;
}
.panell .mini { margin: 0 0 6px; }
.panell .mini button {
  width: 100%;
  margin: 0;
  padding: 5px 8px;
  font-size: var(--t-peu);
  font-weight: 600;
  background: var(--gris);
  color: var(--blau);
  border: 1px solid var(--border);
}
.panell .mini button:hover { background: var(--blau); color: #fff; border-color: var(--blau); }

.fila-agent {
  display: flex;
  align-items: center;
  gap: 4px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  margin-top: 2px;
}
.fila-agent:first-child { border-top: 0; padding-top: 0; }
.fila-agent > b {
  font-size: var(--t-petit);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
}
.fila-agent .mini { flex: 1; margin: 0; }
.fila-agent.sagnat { border-top: 0; padding-top: 0; margin-top: 0; }
.fila-agent.sagnat .mini { display: flex; gap: 4px; align-items: flex-start; }
.fila-agent.sagnat select { margin-bottom: 0; }

/* ---------------- Qui és fora ---------------- */
.fora-cel { padding: 8px; background: #fbfcfd; }
.torn-cap.fora { background: #fbfcfd; }
.torn-cap.fora .lletra { font-size: var(--t-cos); color: var(--gris-fosc); }

.fora-tip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radi-petit);
  padding: 3px 8px;
  margin: 0 4px 4px 0;
  font-size: var(--t-petit);
  font-variant-numeric: tabular-nums;
}
.fora-tip b { font-weight: 600; }
.fora-tip i {
  font-style: normal;
  font-size: var(--t-peu);
  font-weight: 700;
  color: #fff;
  border-radius: 4px;
  padding: 1px 5px;
  background: var(--gris-fosc);
}

.peu {
  color: var(--gris-fosc);
  font-size: var(--t-petit);
  padding: 4px 0 30px;
}

/* ===================================================================
   Entrar, i els formularis
   =================================================================== */
.nav .qui {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  color: #fff;
  font-size: var(--t-petit);
  padding-left: 6px;
  margin-left: 2px;
  border-left: 1px solid rgba(255, 255, 255, .22);
  padding: 2px 0 2px 12px;
}
.nav .qui em {
  font-style: normal;
  font-size: var(--t-peu);
  color: var(--daurat);
  text-transform: uppercase;
  letter-spacing: .4px;
}

body.centrat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: var(--blau);
  padding: 24px 20px;
}
/* Centrat amb marges automatics i no amb "justify-content: center": si
   la finestra es mes baixa que el contingut, aquell talla la part de
   dalt i no s'hi pot arribar. Aixi, com a molt la pagina es mou. */
body.centrat > .entrada-cap { margin-top: auto; }
body.centrat > .targeta-entrar { margin-bottom: auto; }

/* L'escut i el nom, a sobre de la targeta d'entrar. */
.entrada-cap {
  text-align: center;
  margin-bottom: 26px;
}
.entrada-cap img {
  display: block;
  width: 118px;
  height: auto;
  margin: 0 auto 16px;
}
.entrada-cap h1 {
  margin: 0;
  color: #fff;
  font-size: 25px;
  font-weight: 700;
}
.entrada-cap p {
  margin: 7px 0 0;
  color: var(--daurat);
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
}
@media (max-width: 400px), (max-height: 680px) {
  .entrada-cap img { width: 88px; margin-bottom: 12px; }
  .entrada-cap h1 { font-size: 21px; }
  .entrada-cap { margin-bottom: 20px; }
}

.targeta-entrar {
  background: var(--card-bg);
  border-radius: var(--radi);
  padding: 28px 26px 22px;
  width: 100%;
  max-width: 330px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.targeta-entrar h2 { margin: 0 0 18px; font-size: var(--t-mitja); font-weight: 600; }
.targeta-entrar .lloc {
  margin: 2px 0 20px;
  color: var(--gris-fosc);
  font-size: var(--t-petit);
}

.targeta {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radi);
  padding: 22px 24px;
  max-width: 420px;
}

label {
  display: block;
  font-size: var(--t-peu);
  color: var(--gris-fosc);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin: 12px 0 4px;
}

input[type="text"], input[type="password"], input:not([type]) {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radi-petit);
  font: inherit;
  font-variant-numeric: tabular-nums;
  background: #fff;
  color: var(--ink);
}
input:focus {
  outline: none;
  border-color: var(--blau-clar);
  box-shadow: 0 0 0 3px rgba(45, 95, 138, .15);
}

button {
  width: 100%;
  margin-top: 18px;
  padding: 11px;
  border: 0;
  border-radius: var(--radi-petit);
  background: var(--blau);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button:hover { background: var(--blau-mig); }

.error, .be {
  border-radius: var(--radi-petit);
  padding: 9px 12px;
  font-size: var(--t-petit);
  margin: 0 0 4px;
}
.error { background: #fdecec; border: 1px solid #f6c6c6; color: #8a2d2d; }
.be    { background: #e9f7ef; border: 1px solid #bfe3c0; color: #1f6b34; }

.ajuda {
  color: var(--gris-fosc);
  font-size: var(--t-peu);
  margin: 14px 0 0;
}

/* ===================================================================
   El quadrant del mes
   =================================================================== */
/* Les pantalles de taula (el mes, els drets, els informes, la gent)
   necessiten més ample, però tampoc tot el que hi hagi: el que no hi
   cap ja es desplaça dins de la seva taula. */
main.ample { max-width: 1340px; }

.any-enllac {
  display: inline-block;
  color: var(--blau-clar);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radi-petit);
  padding: 1px 9px;
  margin-left: 4px;
  background: #fff;
}
.any-enllac.ara { background: var(--blau); border-color: var(--blau); color: #fff; }

.avis {
  background: #fff3e0;
  border: 1px solid #f6d9ae;
  border-radius: var(--radi-petit);
  padding: 9px 12px;
  font-size: var(--t-petit);
  margin: 0 0 14px;
}

/* La llegenda va A SOBRE de la taula: la taula té el seu propi
   desplaçament i ocupa tota l'alçada, així que a sota no s'hi arriba. */
.qa-llegenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: var(--t-peu);
  color: var(--gris-fosc);
  margin-bottom: 12px;
}
.qa-llegenda span { display: inline-flex; align-items: center; gap: 5px; }
.qa-llegenda i {
  width: 13px; height: 13px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .12);
  display: inline-block;
}

.qa-marc {
  overflow: auto;
  max-height: calc(100vh - 250px);
  border: 1px solid var(--border);
  border-radius: var(--radi);
  background: var(--card-bg);
}

.qa-taula {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-peu);
  font-variant-numeric: tabular-nums;
}

.qa-taula th, .qa-taula td {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0;
}

/* La capçalera dels dies i la columna de la gent es queden quietes
   mentre la resta es mou. */
.qa-taula thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--gris);
  width: 27px;
  min-width: 27px;
  height: 34px;
  text-align: center;
  font-weight: 600;
  color: var(--gris-fosc);
}
.qa-taula thead th span {
  display: block;
  font-weight: 400;
  font-size: 8.5px;
  opacity: .75;
}
.qa-taula thead th.capde { background: #f3dede; color: #8a4141; }
/* El festiu i el cap de setmana tenien dos rosats que no es distingien.
   Ara el dia de festa va en vermell i, si a més ES COBRA, amb el daurat
   de la casa: es veu d'una ullada quins dies porten diners. */
.qa-taula thead th.festiu {
  background: #f6d0d0;
  color: #8a2b2b;
  font-weight: 800;
}
.qa-taula thead th.festiu.cobra {
  background: var(--daurat);
  color: #3a2c05;
}
.qa-taula thead th.festiu span { opacity: .95; }
.qa-taula thead th.avui { background: var(--blau); color: #fff; }
.qa-taula thead th.avui span { opacity: .8; }

.qa-qui {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--card-bg);
  width: 190px;
  min-width: 190px;
  text-align: left;
  padding: 4px 10px !important;
  border-right: 2px solid var(--border) !important;
}
.qa-taula thead th.qa-qui { z-index: 4; background: var(--gris); }
.qa-qui b { display: block; font-size: var(--t-petit); font-weight: 600; }
.qa-qui span { color: var(--gris-fosc); font-size: var(--t-peu); }

.qa-grup td { background: var(--blau-mig); height: 22px; }
.qa-grup .qa-qui {
  background: var(--blau-mig) !important;
  color: #fff;
  font-size: var(--t-peu);
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 600;
}

.qa-cel {
  background: #f5f7fa;
  text-align: center;
  height: 26px;
  color: var(--ink);
  font-weight: 600;
  font-size: 10px;
}
.qa-cs { background: #fbeeee; }

/* Els torns, amb els mateixos colors que la setmana */
.qa-t-M  { background: #ffe0bd; color: #7a4a14; }
.qa-t-T  { background: #cfe4ff; color: #184572; }
.qa-t-N  { background: #dcd2f2; color: #3f3171; }
.qa-t-MT { background: #ffe0bd; color: #7a4a14; }
.qa-t-TN { background: #dcd2f2; color: #3f3171; }

.qa-groc  { background: #ffeb3b; color: #5a4a00; }
.qa-extra { background: #5cc183; color: #0b3a1f; }

/* Els permisos. Els mateixos colors que a l'app del Google. */
.qa-p-V     { background: #bfe3c0; color: #1f6b34; }
.qa-p-VANT  { background: #9acba6; color: #14532b; }
.qa-p-ES    { background: #d4a96a; color: #5a3e12; }
.qa-p-AP    { background: #8fd3cc; color: #0e5b52; }
.qa-p-APANT { background: #6fc4bb; color: #0b4a43; }
.qa-p-PER   { background: #7fd4e8; color: #0b4a58; }
.qa-p-CF    { background: #c8d69a; color: #44551a; }
.qa-p-IND   { background: #a9b7c6; color: #2f3f4f; }
.qa-p-RE    { background: #e6e6e6; color: #5a5a5a; }
.qa-p-B     { background: #ffeb3b; color: #5a4a00; }

/* ===================================================================
   Els drets i els comptadors
   =================================================================== */
.taula-drets {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--t-petit);
  font-variant-numeric: tabular-nums;
}
.taula-drets th, .taula-drets td {
  border-bottom: 1px solid var(--border);
  padding: 7px 10px;
  text-align: center;
}
.taula-drets thead th {
  position: sticky;
  top: 0;
  background: var(--gris);
  color: var(--gris-fosc);
  font-size: var(--t-peu);
  text-transform: uppercase;
  letter-spacing: .4px;
  z-index: 2;
}
.taula-drets thead th span {
  display: block;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: .7;
}
.taula-drets td span { display: block; font-size: var(--t-peu); color: var(--gris-fosc); }
.taula-drets .qui { text-align: left; min-width: 180px; }
.taula-drets .qui a { color: inherit; text-decoration: none; }
.taula-drets .qui a:hover b { color: var(--blau-clar); text-decoration: underline; }
.taula-drets .qui b { display: block; font-weight: 600; }
.taula-drets td.passat { color: var(--danger); font-weight: 700; }
.taula-drets td.bo { color: #1f6b34; font-weight: 700; }
.taula-drets td.sense { color: var(--gris-fosc); font-style: italic; }
.taula-drets .qa-grup .qui { background: var(--blau-mig); color: #fff; }

.fitxa {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radi);
  padding: 20px 22px;
  margin-bottom: 16px;
  max-width: 760px;
}
.fitxa h3 { margin: 0 0 16px; font-size: var(--t-mitja); font-weight: 600; }
.fitxa h3 span {
  display: block;
  font-size: var(--t-petit);
  font-weight: 400;
  color: var(--gris-fosc);
}
.fitxa h4 {
  margin: 22px 0 8px;
  font-size: var(--t-peu);
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--gris-fosc);
}

.detall { border-collapse: collapse; width: 100%; font-size: var(--t-petit); }
.detall th, .detall td {
  border-bottom: 1px solid var(--border);
  padding: 8px 6px;
  text-align: left;
  vertical-align: top;
}
.detall thead th {
  font-size: var(--t-peu);
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--gris-fosc);
  font-weight: 600;
}
.detall td { font-variant-numeric: tabular-nums; }
.detall td.passat { color: var(--danger); font-weight: 700; }
.detall td.bo { color: #1f6b34; font-weight: 700; }
.detall i { color: var(--gris-fosc); font-size: var(--t-peu); }
.detall .apart { display: block; font-size: var(--t-peu); color: var(--gris-fosc); }
.detall .avis-petit { color: var(--warn); cursor: help; }

.pastilla {
  display: inline-block;
  min-width: 34px;
  text-align: center;
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 7px;
  font-size: var(--t-peu);
  font-weight: 700;
  color: #fff;
}

/* ===================================================================
   La gent
   =================================================================== */
.taula-gent {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--t-petit);
}
.taula-gent th, .taula-gent td {
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.taula-gent thead th {
  position: sticky;
  top: 0;
  background: var(--gris);
  color: var(--gris-fosc);
  font-size: var(--t-peu);
  text-transform: uppercase;
  letter-spacing: .4px;
  z-index: 2;
}
.taula-gent .qui { min-width: 190px; }
.taula-gent .qui b { display: block; font-weight: 600; }
.taula-gent .qui span { color: var(--gris-fosc); font-size: var(--t-peu); }
.taula-gent i { color: var(--gris-fosc); font-size: var(--t-peu); }
.taula-gent .mail { font-size: var(--t-peu); word-break: break-all; max-width: 190px; }
.taula-gent .accions { width: 110px; }
.taula-gent .qa-grup .qui { background: var(--blau-mig); color: #fff; }
.taula-gent tr.plegat { opacity: .55; }
.taula-gent .mini { margin: 0; }
.taula-gent .mini button {
  width: auto;
  margin: 0;
  padding: 4px 10px;
  font-size: var(--t-peu);
  font-weight: 600;
  background: var(--gris);
  color: var(--blau);
  border: 1px solid var(--border);
}
.taula-gent .mini button:hover { background: var(--blau); color: #fff; border-color: var(--blau); }

.marca {
  display: inline-block;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: var(--t-peu);
  font-weight: 700;
  margin: 0 3px 3px 0;
}
.marca.bona { background: #e9f7ef; color: #1f6b34; }
.marca.mala { background: #fdecec; color: #8a2d2d; }
.marca.avis-marca { background: #fff3e0; color: #8a5a1a; }

.editar > summary.llarg, .taula-gent .editar > summary {
  width: auto;
  padding: 0 10px;
  font-weight: 600;
}
/* 280 px fixos se'n sortien per la dreta en un telefon de 390: el
   panell es obre a sota d'un boto que ja es a mig full. Amb
   max-width s'estreny al que hi cap. */
.panell.ample-panell { width: 280px; max-width: 100%; }
.panell select, .panell input { max-width: 100%; }
.panell.ample-panell input {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font: inherit;
  font-size: var(--t-petit);
}
.panell.ample-panell label { margin: 9px 0 3px; }
.panell.ample-panell button {
  width: 100%;
  margin-top: 10px;
  padding: 7px;
  font-size: var(--t-petit);
  background: var(--blau);
  color: #fff;
  border: 0;
}
.panell.ample-panell hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 14px 0 4px;
}
.panell .ajuda { margin: 4px 0 0; display: block; }

/* ===================================================================
   Els serveis extraordinaris
   =================================================================== */
summary.obrir-oferta {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--t-cos);
  color: var(--blau);
  list-style: none;
}
summary.obrir-oferta::-webkit-details-marker { display: none; }
summary.obrir-oferta::before { content: "+ "; color: var(--daurat); font-weight: 700; }

.oferta {
  display: flex;
  gap: 14px;
  align-items: stretch;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radi);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.oferta.passada { opacity: .6; }

.oferta-dia {
  width: 54px;
  flex: none;
  text-align: center;
  background: var(--gris);
  border-radius: var(--radi-petit);
  padding: 6px 0;
  align-self: flex-start;
}
.oferta-dia .nom, .oferta-dia .mes {
  display: block;
  font-size: var(--t-peu);
  color: var(--gris-fosc);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.oferta-dia .num { display: block; font-size: var(--t-gran); font-weight: 700; line-height: 1.1; }

.oferta-cos { flex: 1; min-width: 0; }
.oferta-dalt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oferta-dalt b { font-size: var(--t-cos); }
.oferta-motiu { margin: 3px 0 2px; }
.oferta-dades { font-size: var(--t-peu); color: var(--gris-fosc); }

.oferta-botons {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  align-items: stretch;
  min-width: 140px;
}
.oferta-botons .mini { margin: 0; }
.oferta-botons button, .barra-estat button {
  width: 100%;
  margin: 0;
  padding: 7px 12px;
  font-size: var(--t-petit);
  font-weight: 600;
  background: var(--gris);
  color: var(--blau);
  border: 1px solid var(--border);
}
.oferta-botons button:hover, .barra-estat button:hover {
  background: var(--blau); color: #fff; border-color: var(--blau);
}
.oferta-botons button.primari, .taula-apuntats button.primari {
  background: var(--blau); color: #fff; border-color: var(--blau);
}
.oferta-botons button.primari:hover { background: var(--blau-mig); }
.oferta-botons .veure {
  text-align: center;
  font-size: var(--t-petit);
  color: var(--blau-clar);
  text-decoration: none;
  padding: 4px;
}
.oferta-botons .veure:hover { text-decoration: underline; }
.oferta-no { font-size: var(--t-peu); color: var(--gris-fosc); text-align: center; }

.barra-estat { display: flex; gap: 8px; margin-bottom: 18px; }
.barra-estat .mini { margin: 0; width: auto; }
.barra-estat button { width: auto; }

.titol-bloc {
  margin: 24px 0 4px;
  font-size: var(--t-mitja);
  font-weight: 600;
}
.titol-bloc .feble { color: var(--gris-fosc); font-weight: 400; }

.taula-apuntats {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  max-width: 680px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radi);
  overflow: hidden;
}
.taula-apuntats td {
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  vertical-align: middle;
}
.taula-apuntats tr:last-child td { border-bottom: 0; }
.taula-apuntats .qui b { display: block; font-weight: 600; font-size: var(--t-petit); }
.taula-apuntats .qui span { color: var(--gris-fosc); font-size: var(--t-peu); }
.taula-apuntats .hores { text-align: right; white-space: nowrap; }
.taula-apuntats .hores b { font-variant-numeric: tabular-nums; }
.taula-apuntats .hores span {
  display: block; font-size: var(--t-peu); color: var(--gris-fosc);
}
.taula-apuntats .accio { width: 170px; }
.taula-apuntats .mini { margin: 0; }
.taula-apuntats button {
  width: 100%; margin: 0; padding: 6px 10px;
  font-size: var(--t-petit); font-weight: 600;
  background: var(--gris); color: var(--blau); border: 1px solid var(--border);
}

/* La ratlla que recorda donar per bo el torn. Va just sota de la barra
   i surt a totes les pantalles: qui l'ha de fer no l'ha d'anar a buscar.
   En daurat i no en vermell: no és cap error, és una cosa per fer. */
.ratlla-validar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #fdf6e3;
  border-bottom: 2px solid var(--daurat);
  color: #6b5518;
  padding: 11px 20px;
  font-size: var(--t-petit);
  text-decoration: none;
}
.ratlla-validar strong { font-weight: 700; }
/* Una fitxa per cada cosa que espera, cadascuna un enllaç. */
.ratlla-validar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 6px;
  background: #fff;
  border: 1px solid var(--daurat);
  border-radius: 99px;
  color: #6b5518;
  text-decoration: none;
  font-weight: 600;
}
.ratlla-validar a b {
  background: var(--danger);
  color: #fff;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 99px;
  text-align: center;
  font-size: var(--t-peu);
}
.ratlla-validar a:hover { background: #fbf0d4; }

/* Un enllaç que fa de botó dins d'una llista. */
.boto-llista {
  display: block;
  text-align: center;
  padding: 6px 10px;
  font-size: var(--t-petit);
  font-weight: 600;
  background: var(--blau);
  color: #fff;
  border-radius: var(--radi-petit);
  text-decoration: none;
}
.boto-llista:hover { background: var(--blau-mig); }

.llista-lliures { max-width: 680px; }
.llista-lliures i { color: var(--gris-fosc); }

/* Cada xip de la llista de qui queda lliure porta les hores extres que
   aquella persona acumula de l'any: és el número que es mira per
   repartir les ofertes i no donar-les sempre als mateixos. Qui ja s'hi
   ha apuntat va de ratlla discontínua (.tip.voluntari) i amb la marca. */
.llista-lliures .tip i {
  font-style: normal;
  color: var(--gris-fosc);
  font-size: var(--t-peu);
  margin-left: 4px;
}
.llista-lliures .tip b {
  margin-left: 5px;
  font-size: var(--t-peu);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--warn);
}

/* ---------------- Pantalles estretes ----------------
   De moment, la setmana sencera i que es pugui arrossegar de costat.
   Les targetes per al mòbil, com les de l'app d'ara, van després: no
   val la pena fer-les a mitges. */
.marc { overflow-x: auto; }
.setmana { min-width: 860px; }
.capdesetmana { min-width: 520px; }

@media (max-width: 900px) {
  main { padding: 12px; }
  .barra { padding: 12px 14px; }
}

/* ===================================================================
   Els informes de RRHH
   =================================================================== */
.bloc-informe { margin-bottom: 26px; }
.titol-bloc .imprimir-informe {
  font-size: var(--t-petit);
  font-weight: 400;
  color: var(--blau-clar);
  text-decoration: none;
  margin-left: 10px;
}
.titol-bloc .imprimir-informe:hover { text-decoration: underline; }

.taula-informe {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radi);
  overflow: hidden;
  font-size: var(--t-petit);
}
.taula-informe th, .taula-informe td {
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.taula-informe thead th {
  background: var(--gris);
  color: var(--gris-fosc);
  font-size: var(--t-peu);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.taula-informe .qui, .taula-informe th.qui { text-align: left; min-width: 180px; }
.taula-informe td.motiu { text-align: left; color: var(--gris-fosc); }
.taula-informe thead th:nth-child(2) { text-align: left; }
.taula-informe tbody td:nth-child(2) { text-align: left; color: var(--gris-fosc); }
.taula-informe .qui b { display: block; font-weight: 600; }
.taula-informe .qui span { color: var(--gris-fosc); font-size: var(--t-peu); }
.taula-informe td.total { font-weight: 700; }
.taula-informe tfoot td {
  background: var(--gris);
  font-weight: 700;
  border-bottom: 0;
}
.taula-informe tbody td i { color: var(--warn); font-style: normal; font-size: var(--t-peu); }

.avis ul { margin: 6px 0 0; padding-left: 20px; }
.avis li { margin-bottom: 3px; }

/* ===================================================================
   Tocar una casella del quadrant del mes
   =================================================================== */
.qa-cel.tocable { padding: 0; }
.qa-cel.tocable a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 26px;
  color: inherit;
  text-decoration: none;
}
.qa-cel.tocable:hover { box-shadow: inset 0 0 0 2px var(--blau); }

.ara-te { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.ara-te .feble { color: var(--gris-fosc); font-size: var(--t-petit); }

.botons-torn { display: flex; flex-wrap: wrap; gap: 8px; }
.botons-torn .mini { margin: 0; }
.botons-torn button {
  width: auto;
  margin: 0;
  padding: 8px 14px;
  font-size: var(--t-cos);
  font-weight: 700;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  text-align: left;
  line-height: 1.15;
}
.botons-torn button span {
  display: block;
  font-size: var(--t-peu);
  font-weight: 400;
  color: var(--gris-fosc);
  text-transform: lowercase;
}
.botons-torn button:hover { border-color: var(--blau); background: var(--gris); }
.botons-torn button.ara {
  border-color: var(--blau);
  box-shadow: inset 0 0 0 2px var(--blau);
}
.botons-torn button.torn-M, .botons-torn button.torn-MT { background: #ffe0bd; }
.botons-torn button.torn-T { background: #cfe4ff; }
.botons-torn button.torn-N, .botons-torn button.torn-TN { background: #dcd2f2; }
.botons-torn.permisos button { font-size: var(--t-petit); padding: 6px 11px; }
.botons-torn button.buidar {
  width: 100%;
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--gris-fosc);
  border-style: dashed;
}

.ocupacio { display: flex; flex-wrap: wrap; gap: 10px; max-width: 900px; }
.ocupacio-torn {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radi-petit);
  padding: 8px 12px;
  min-width: 150px;
}
.ocupacio-torn > b { display: block; font-size: var(--t-mitja); margin-bottom: 4px; }
.ocupacio-torn.t-M > b, .ocupacio-torn.t-MT > b { color: var(--M-ac); }
.ocupacio-torn.t-T > b { color: var(--T-ac); }
.ocupacio-torn.t-N > b, .ocupacio-torn.t-TN > b { color: var(--N-ac); }

/* A "Qui hi ha aquell dia", la persona que s'està tocant. No es pot
   fer servir .cap, que vol dir cap de torn i enganyaria. */
.tip.ell {
  border-color: var(--blau);
  box-shadow: inset 0 0 0 1px var(--blau);
  font-weight: 700;
}

/* ===================================================================
   La setmana, en targetes (ordinador i telèfon, una sola vista)
   ===================================================================
   Cada dia és una targeta amb la data en una xapa i els torns com a
   franges de color. A l'ordinador, cinc targetes de costat i el cap de
   setmana a sota, més ample (hi ha els torns de 12 h); al telèfon, una
   sota l'altra. */
.targetes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 700px)  { .targetes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1150px) {
  .targetes { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .dia-targeta { grid-column: span 2; }
  .dia-targeta.capde { grid-column: span 5; }
}

.dia-targeta {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radi);
  overflow: hidden;
  padding-bottom: 4px;
  box-shadow: 0 1px 2px rgba(20, 40, 63, .05);
}
.dia-targeta.avui { border-color: var(--blau); box-shadow: 0 0 0 2px rgba(20, 40, 63, .18); }

.dt-cap { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px; }
.dt-data {
  flex: none; width: 42px; height: 42px; border-radius: 10px; background: var(--gris);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
}
.dt-data b { font-size: var(--t-mitja); color: var(--ink); }
.dt-data i { font-style: normal; font-size: var(--t-peu); color: var(--gris-fosc); }
.dia-targeta.capde .dt-data b, .dia-targeta.festiu .dt-data b { color: var(--danger); }
.dia-targeta.festiu.cobra .dt-data b { color: var(--daurat-lletra); }
.dia-targeta.avui .dt-data { background: var(--blau); }
.dia-targeta.avui .dt-data b, .dia-targeta.avui .dt-data i { color: #fff; }
.dt-text { min-width: 0; font-weight: 600; font-size: var(--t-petit); line-height: 1.25; }
.dt-text small { display: block; font-weight: 400; font-size: var(--t-peu); color: var(--gris-fosc); }
.dt-festa {
  margin-left: auto; text-align: right; font-size: var(--t-peu); font-weight: 700;
  color: var(--danger); text-transform: uppercase; letter-spacing: .3px;
}
.dia-targeta.festiu.cobra .dt-festa { color: var(--daurat-lletra); }

.dt-torn {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 10px 8px; padding: 8px 10px 6px; border-radius: 10px;
  box-shadow: none;
}
.dt-torn.t-M, .dt-torn.t-MT { background: var(--M-fill); color: #7a4a14; }
.dt-torn.t-T  { background: var(--T-fill);  color: #184572; }
.dt-torn.t-N, .dt-torn.t-TN { background: var(--N-fill); color: #3f3171; }
.dt-fora { background: transparent; border: 1px dashed var(--border-strong, #cfd6df); color: var(--gris-fosc); }
.dt-lletra { font-size: var(--t-peu); font-weight: 700; line-height: 1.2; }
.dt-lletra em { font-style: normal; font-weight: 400; opacity: .8; }
.dt-lletra a { color: inherit; text-decoration: none; }
.dt-lletra a:hover { text-decoration: underline; }
.dt-gent { min-width: 0; }

/* El "+" per posar gent a un torn. Mateixa mida que un xip, perquè es
   pugui tocar amb el dit. */
.dt-mes-gent {
  display: inline-block; min-width: 30px; margin: 0 4px 4px 0; padding: 3px 8px;
  border: 1px dashed currentColor; border-radius: 6px; font-size: var(--t-petit);
  font-weight: 700; line-height: 1.35; text-align: center; text-decoration: none; opacity: .7;
}
.dt-mes-gent:hover { opacity: 1; background: rgba(255, 255, 255, .6); }

/* Els xips, quan són enllaç, han de seguir semblant xips. */
.xip-enllac { text-decoration: none; }
.xip-enllac .tip, .xip-enllac .fora-tip { cursor: pointer; }
.xip-enllac:hover .tip, .xip-enllac:hover .fora-tip { border-color: var(--blau); }

/* A la pantalla del torn */
.fila-torn {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding: 9px 0;
}
.fila-torn:first-of-type { border-top: 0; }
.fila-torn .qui { flex: 1; min-width: 140px; }
.fila-torn .qui b { display: block; font-size: var(--t-petit); font-weight: 600; }
.fila-torn .qui span { color: var(--gris-fosc); font-size: var(--t-peu); }
/* Que els botons d'una persona puguin passar a la ratlla de sota:
   son cinc i, en un telefon, no hi caben en una filera. Sense
   aixo, l'ultim quedava tallat per la vora. */
.accions-fila { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.accions-fila .mini { margin: 0; }
.accions-fila button {
  width: auto; margin: 0; padding: 5px 10px;
  font-size: var(--t-peu); font-weight: 600;
  background: var(--gris); color: var(--blau); border: 1px solid var(--border);
}
.accions-fila button:hover { background: var(--blau); color: #fff; border-color: var(--blau); }
.accions-fila .veure {
  font-size: var(--t-peu); color: var(--blau-clar); text-decoration: none;
}
.accions-fila .veure:hover { text-decoration: underline; }

/* Un desplegable dins de la fila d'una persona. El summary d'ahi dalt és
   un quadret de 20 px, fet per a una icona: amb un text a dins es
   desmuntava i el botó queia a sobre de l'enllaç del costat. Aquí va com
   els altres botons de la fila, i el panell s'obre per damunt, penjat de
   la fila, en comptes d'eixamplar-la. */
.accions-fila { position: relative; }
.accions-fila .editar { margin-top: 0; }
.accions-fila .editar > summary {
  height: auto;
  line-height: 1.6;
  padding: 4px 10px;
  border-style: solid;
  border-color: var(--border);
  background: var(--gris);
  color: var(--blau);
  font-size: var(--t-peu);
  font-weight: 600;
}
.accions-fila .editar > summary:hover {
  background: var(--blau);
  color: #fff;
  border-color: var(--blau);
}
.accions-fila .editar[open] > .panell {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  box-shadow: 0 10px 26px rgba(16, 21, 28, .18);
}

/* Al telèfon no hi ha amplada per penjar-lo a la dreta: que s'obri a
   sota i ocupi el que calgui. */
@media (max-width: 560px) {
  .accions-fila .editar[open] > .panell {
    position: static;
    width: auto;
  }
}

/* L'enllaç per canviar un torn, a la cantonada de la casella. */
.cel { position: relative; }
.cel-tocar {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: var(--t-peu);
  color: var(--gris-fosc);
  text-decoration: none;
  opacity: 0;
  background: rgba(255, 255, 255, .85);
  border-radius: 4px;
  padding: 0 5px;
}
.cel:hover .cel-tocar { opacity: 1; }
.cel-tocar:hover { color: var(--blau); text-decoration: underline; }

/* Els xips enllaçats han de semblar xips, no enllaços de pàgina web. */
.xip-enllac, .xip-enllac:visited { color: inherit; }
.qa-cel.tocable a, .qa-cel.tocable a:visited { color: inherit; }

/* La barra de dalt, al telèfon: que no es talli cap botó. */
@media (max-width: 900px) {
  .barra { flex-direction: column; align-items: stretch; gap: 10px; }
  .nav { margin-left: 0; flex-wrap: wrap; }
  .nav a { flex: 0 0 auto; }
  .nav .qui { border-left: 0; padding-left: 0; margin-left: 0; }
}

/* Tancar un mes de RRHH */
.caixa-tancar {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radi);
  padding: 14px 16px;
  margin-bottom: 18px;
  max-width: 760px;
}
.dins-tancar { margin-top: 10px; }
.dins-tancar .formulari { max-width: 420px; }
.caixa-tancat { max-width: 760px; padding: 14px 16px !important; }
.caixa-tancat .mini { margin: 0; }
.caixa-tancat button {
  width: auto;
  margin: 0;
  padding: 6px 14px;
  font-size: var(--t-petit);
  background: #fff;
  border: 1px dashed var(--gris-fosc);
  color: var(--gris-fosc);
  font-weight: 600;
}
.caixa-tancat button:hover { border-style: solid; border-color: var(--blau); color: var(--blau); }
.caixa-tancar .taula-informe td.qui, .caixa-tancar .taula-informe th.qui { text-align: left; }

/* El torn de les targetes, quan és enllaç, ha de semblar el que és: el
   torn. Res de blau d'enllaç ni de subratllats. */
.dt-lletra a { color: inherit; text-decoration: none; }
.dt-lletra a:hover { text-decoration: underline; }

/* I a la graella, un signe petit a la cantonada i prou. */
.cel-tocar {
  width: 16px;
  height: 16px;
  line-height: 15px;
  text-align: center;
  font-weight: 700;
}

/* ===================================================================
   Els judicis
   =================================================================== */
.judici {
  display: flex;
  gap: 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radi);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.judici-dia {
  width: 54px;
  flex: none;
  text-align: center;
  background: var(--gris);
  border-radius: var(--radi-petit);
  padding: 6px 0;
  align-self: flex-start;
}
.judici-dia .nom, .judici-dia .mes {
  display: block; font-size: var(--t-peu); color: var(--gris-fosc);
  text-transform: uppercase; letter-spacing: .3px;
}
.judici-dia .num { display: block; font-size: var(--t-gran); font-weight: 700; line-height: 1.1; }
.judici-cos { flex: 1; min-width: 0; }
.judici-dalt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.judici-dalt .feble { color: var(--gris-fosc); font-size: var(--t-petit); }
.judici-just { margin-top: 4px; font-size: var(--t-petit); }
.judici-just .feble { color: var(--gris-fosc); font-size: var(--t-peu); margin-left: 6px; }
.judici-nota { margin-top: 3px; font-size: var(--t-peu); color: var(--gris-fosc); font-style: italic; }
.judici-botons {
  flex: none; display: flex; flex-direction: column; gap: 6px;
  justify-content: center; min-width: 130px;
}
.judici-botons .mini { margin: 0; }
.judici-botons button {
  width: 100%; margin: 0; padding: 6px 12px;
  font-size: var(--t-petit); font-weight: 600;
  background: var(--gris); color: var(--blau); border: 1px solid var(--border);
}
.judici-botons button.primari { background: var(--blau); color: #fff; border-color: var(--blau); }
.judici-botons .editar > summary { width: 100%; }
input[type="file"] {
  width: 100%; padding: 7px; border: 1px dashed var(--border);
  border-radius: var(--radi-petit); font: inherit; font-size: var(--t-petit);
  background: #fff;
}

/* Els passos per ajuntar els justificants a l'informe de judicis */
.passos-ajuntar {
  margin: 14px 0 20px; padding-left: 22px;
  font-size: var(--t-petit); color: var(--gris-fosc); line-height: 1.7;
}
.passos-ajuntar b { color: var(--ink); }

/* ---- El calendari de l'any ---- */
/* Cada fila és una setmana sencera i tota ella porta al mateix dilluns:
   el quadrant va per setmanes, i així no s'ha d'encertar el dia. */
.calendari {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.cal-mes {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px 10px;
  background: var(--card-bg);
}
.cal-mes h3 {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--ink);
}
.cal-mes table { width: 100%; border-collapse: collapse; }
.cal-mes th {
  font-size: 10px;
  font-weight: 600;
  color: var(--gris-fosc);
  text-transform: uppercase;
  padding-bottom: 3px;
}
.cal-mes td { padding: 0; text-align: center; }
.cal-mes td a {
  display: block;
  padding: 4px 0;
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 4px;
}
.cal-mes td.fora a { color: #c3c9d2; }
.cal-mes td.avui a { font-weight: 700; text-decoration: underline; }
.cal-mes tr:hover td a { background: #eef2f7; }
.cal-mes tr.ara td a { background: #fdf4dc; }
.cal-mes tr.mirant td a { background: var(--blau); color: #fff; }

/* Els imports de la pantalla de preus: estrets i alineats a la dreta,
   que es puguin comparar d'una ullada. */
/* "input.euros" i no ".euros" sol: la regla d'amunt que posa els camps
   a tota l'amplada pesa més que una classe sola i se la menjaria. */
input.euros {
  width: 95px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* Hores i minuts, un al costat de l'altre: els minuts es trien d'una
   llista, que ningú no hagi de passar 45 minuts a 0,75 de cap. */
.camp-hm { display: flex; align-items: center; gap: 8px; }
/* El dia i l'hora d'un termini. Com .camp-hm, però el dia s'ha de poder
   veure sencer: amb 70 px d'ample no hi cabia ni la data. */
.camp-termini { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Els dies d'un mes per marcar-los. Caselles de debò i no pas una
   graella pintada: al telèfon s'ha de poder tocar amb el dit, i una
   casella que ja ve de sèrie no s'ha d'explicar a ningú. */
.dies-mes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 6px;
  margin: 10px 0 4px;
}
.dia-tria {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  cursor: pointer;
  line-height: 1.1;
}
.dia-tria input { margin: 0; flex: none; }
.dia-tria .num { font-weight: 700; font-size: var(--t-petit); }
.dia-tria .set { color: var(--gris-fosc); font-size: 11px; text-transform: lowercase; }
.dia-tria .te {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--blau);
}
.dia-tria.cap-setmana { background: var(--gris); }
.dia-tria.festiu { border-color: var(--danger); }
.dia-tria.festiu.cobra { border-color: var(--daurat); }
.dia-tria.festiu.cobra .num { color: var(--daurat-lletra); font-weight: 700; }

.dia-tria:has(input:checked) {
  border-color: var(--blau);
  box-shadow: inset 0 0 0 1px var(--blau);
}
.camp-termini input { width: auto; }
.camp-termini select { width: auto; }
.camp-hm input { width: 70px; }
.camp-hm select { width: auto; }
details.xuleta { margin-top: 14px; }
details.xuleta > summary {
  height: auto;
  line-height: 1.6;
  padding: 5px 12px;
  font-weight: 600;
  font-size: var(--t-petit);
}
details.xuleta > .panell { width: auto; max-width: 560px; }


/* "cal posar-lo", al costat del nom del camp. Val més dir-ho abans que
   deixar enviar el formulari a mitges i contestar amb una ratlla
   vermella a dalt de tot, lluny del camp que falta. */
.cal {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--danger);
  font-size: var(--t-peu);
  margin-left: 6px;
}

/* Una ordre per copiar i enganxar a la finestra de comandes. */
.ordre {
  background: var(--blau);
  color: #e8eef6;
  padding: 10px 12px;
  border-radius: var(--radi-petit);
  font: 12px/1.5 ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
}

/* Un tros de text que avisa de debò, dins d'un paràgraf normal. */
.malament { color: var(--danger); }

/* Baixar un informe de RRHH. Abans era un enllaç blau petit al costat
   del títol i no es veia: el que es fa més vegades ha de ser un botó. */
.accions-informe { margin: 0 0 10px; display: flex; align-items: center; gap: 14px; }
.boto-informe {
  display: inline-block;
  background: var(--blau);
  color: #fff;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: var(--radi-petit);
  font-size: var(--t-petit);
  font-weight: 600;
}
.boto-informe:hover { background: var(--blau-mig); }
.accions-informe .imprimir-informe { margin-left: 0; }

/* Aprovar o denegar, un al costat de l'altre. */
.dos-botons { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
.dos-botons .mini { margin: 0; }
.dos-botons .mini button { width: auto; margin: 0; }

/* Una línia de "posar-ho a tothom": la casella, el concepte i el valor. */
.linia-tothom { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.linia-tothom .casella { flex: 1; display: flex; align-items: center; gap: 7px; margin: 0; }
.linia-tothom .casella input[type="checkbox"] { width: auto; margin: 0; }

/* ===================================================================
   La capçalera: les dates juntes, i el menú recollit al telèfon
   =================================================================== */
/* Enganxada a dalt: les pantalles són llargues —un mes sencer, la
   plantilla, els permisos de tothom— i, quan baixaves, el menú i les
   dates quedaven amunt i calia tornar a pujar a buscar-los.
   "sticky" i no "fixed" perquè així segueix ocupant el seu lloc i no
   tapa la primera ratlla de la pàgina. */
.barra {
  position: sticky;
  top: 0;
  z-index: 50;
}
.barra-titol { margin-right: auto; }

/* Les tres dates són un sol comandament: enganxades, amb les puntes
   arrodonides només als extrems. Separades semblaven tres coses que no
   tenen res a veure. */
.grup-dates { gap: 0; }
.grup-dates a {
  border-radius: 0;
  border-right-width: 0;
  white-space: nowrap;
}
.grup-dates a:first-child {
  border-top-left-radius: var(--radi-petit);
  border-bottom-left-radius: var(--radi-petit);
}
.grup-dates a:last-child {
  border-top-right-radius: var(--radi-petit);
  border-bottom-right-radius: var(--radi-petit);
  border-right-width: 1px;
}
.grup-dates a.avui { background: rgba(255, 255, 255, .22); font-weight: 600; }

/* El menú recollit. El botó és un <details>, que és HTML i no
   JavaScript: aquí no n'hi ha enlloc i no se n'hi posarà per un menú. */
.menu-estret { margin-left: auto; }
.menu-estret > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 12px;
  font-size: var(--t-petit);
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radi-petit);
}
.menu-estret > summary::-webkit-details-marker { display: none; }
.menu-estret > summary::before { content: "☰"; margin-right: 6px; }
.menu-estret[open] > summary { background: #fff; color: var(--blau); }

.menu-caixa {
  position: absolute;
  right: 14px;
  top: calc(100% - 6px);
  z-index: 60;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--blau-mig);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radi-petit);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}
.menu-caixa a {
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radi-petit);
  padding: 8px 12px;
  font-size: var(--t-petit);
}
.menu-caixa a:hover { background: rgba(255, 255, 255, .22); }
.menu-caixa .qui {
  display: flex;
  flex-direction: column;
  color: #fff;
  font-size: var(--t-petit);
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  margin-top: 2px;
  padding: 8px 2px 2px;
}
.menu-caixa .qui em {
  font-style: normal;
  font-size: var(--t-peu);
  color: var(--daurat);
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Els botons de la pantalla, dins del desplegable: només al telèfon,
   perquè a l'ordinador ja es veuen a la barra. */
.caixa-pagina { display: none; flex-direction: column; gap: 6px; }
@media (max-width: 900px) {
  .caixa-pagina {
    display: flex;
    padding-bottom: 8px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
  }
}

/* Al telèfon, el títol més petit i les dates que no s'escanyin. */
@media (max-width: 900px) {
  .barra { padding: 10px 14px; gap: 10px; }
  .barra h1 { font-size: var(--t-cos); }
  .barra .lloc { display: none; }
  .grup-dates a { padding: 6px 9px; }
}

/* A la llista de qui queda lliure, cada xip és una casella per triar a
   qui s'avisa. Abans el correu sortia de cop a tothom i no hi havia
   manera de treure'n ningú. */
.tip.tria { cursor: pointer; user-select: none; }
.tip.tria input { margin: 0 6px 0 0; vertical-align: -1px; }
.tip.tria:has(input:checked) {
  border-color: var(--blau-clar);
  box-shadow: inset 0 0 0 1px var(--blau-clar);
}

/* ---------------- Les convocatòries al mòbil ----------------
   La fitxa d'una oferta és una filera de tres: el dia, el text i els
   botons. Els botons demanen 140 px i, en una pantalla de 375, la
   filera se n'anava a 442: mitja fitxa quedava fora i no s'hi podia
   arribar. En estret, els botons passen a sota, en una ratlla seva. */
@media (max-width: 560px) {
  .oferta { flex-wrap: wrap; gap: 10px; }
  .oferta-cos { flex: 1 1 0; }
  .oferta-botons {
    flex: 1 1 100%;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }
  .oferta-botons .mini { flex: 1 1 auto; }
  .oferta-botons .veure,
  .oferta-botons .oferta-no { flex: 1 1 auto; }

  /* La barra d'estats d'una oferta, igual: tres botons de costat no hi
     caben. */
  .barra-estat { flex-wrap: wrap; }
}

/* La taula d'apuntats, al mòbil: en comptes de tres columnes estretes
   —el nom partit en tres ratlles i els botons escanyats—, cada fila
   passa a ser un bloc: el nom, les hores i, a sota, els botons. */
@media (max-width: 560px) {
  .taula-apuntats,
  .taula-apuntats tbody,
  .taula-apuntats tr,
  .taula-apuntats td { display: block; width: auto; }

  .taula-apuntats tr {
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
  }
  .taula-apuntats tr:last-child { border-bottom: 0; }
  .taula-apuntats td { border-bottom: 0; padding: 0; }

  .taula-apuntats .hores { text-align: left; margin-top: 2px; }
  .taula-apuntats .hores b { margin-right: 6px; }
  .taula-apuntats .hores span { display: inline; }

  .taula-apuntats .accio {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .taula-apuntats .accio .mini { flex: 1 1 auto; }
  .taula-apuntats .accio label { flex: 1 1 auto; margin: 0; }
}

/* Cap desplegable ni cap casella pot ser més ampla que el que la conté.
   Sembla obvi, però els navegadors donen als <select> l'amplada de
   l'opció més llarga, i amb els noms sencers de la plantilla la
   pantalla del torn se'n sortia per la dreta al telèfon. */
select, input, textarea { max-width: 100%; }

/* Els quadres de text grans. Sense això es queden amb l'amplada que
   el navegador vulgui -una columna estreta de lletra d'escriure a
   màquina- i al telèfon no s'hi veu el que s'escriu. */
textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radi-petit);
  font: inherit;
  line-height: 1.45;
  background: var(--card-bg);
  color: var(--ink);
  resize: vertical;
}
textarea:focus { outline: none; border-color: var(--blau-clar); }

/* Qui aquell dia té judici: una ratlleta sota el número. Al quadrant
   només cal saber que ha d'anar al jutjat; el detall és a «Judicis».
   Els judicis s'assenyalen amb mesos d'antelació i convé veure'ls
   venir. */
.tip.amb-judici {
  border-bottom: 3px solid var(--blau-clar);
  padding-bottom: 2px;
}

/* ===================================================================
   El repàs del 23/10/2026
   -------------------------------------------------------------------
   Tres coses feien que les pantalles de formulari quedessin lletges a
   totes bandes, i es resolen aquí en comptes d'anar pantalla per
   pantalla:

     · els botons ocupaven TOTA l'amplada (width: 100%), i on hi havia
       molt espai sortia una barra negra enorme;
     · les etiquetes anaven en majúscules de 11px i grises, que criden
       i es llegeixen malament;
     · els camps de data, els números, els desplegables i les caixes
       de text no estaven pintats: cadascun sortia com el navegador
       volia, i al costat d'un camp de text normal no s'assemblaven.

   Això va al final del fitxer a posta: les regles amb classe que ja
   hi ha més amunt manen igualment, de manera que els botons del
   quadrant, dels torns i de les taules es queden tal com estaven.
   =================================================================== */

button {
  width: auto;
  min-width: 150px;
  padding: 10px 20px;
  border-radius: var(--radi-petit);
}

label {
  font-size: var(--t-petit);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--ink);
  margin: 16px 0 5px;
}

/* Tots els camps, iguals. */
input[type="date"], input[type="time"], input[type="number"],
input[type="email"], input[type="tel"], input[type="search"],
select, textarea {
  width: 100%;
  max-width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radi-petit);
  font: inherit;
  background: #fff;
  color: var(--ink);
}
select { appearance: auto; }
textarea { line-height: 1.45; resize: vertical; }

input[type="date"]:focus, input[type="time"]:focus, input[type="number"]:focus,
input[type="email"]:focus, input[type="tel"]:focus, input[type="search"]:focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--blau-clar);
  box-shadow: 0 0 0 3px rgba(45, 95, 138, .15);
}

/* Un formulari no ha de ser més ample del que es llegeix bé, encara
   que la pantalla ho sigui. */
.formulari { max-width: 460px; }
.formulari .camp-hm input[type="number"] { width: 5.5rem; }
.formulari .camp-hm select { width: 6rem; }
.formulari .camp-hm { display: flex; align-items: center; gap: 8px; }

/* I el text tampoc: una ratlla de 1.300 píxels no es llegeix. */
.sots, .ajuda, main > p { max-width: 68ch; }

/* Les targetes, una mica més separades del fons. */
.targeta, .fitxa {
  box-shadow: 0 1px 2px rgba(16, 21, 28, .04),
              0 8px 24px rgba(16, 21, 28, .05);
}

.titol-bloc { margin-top: 28px; }

/* Les taules senzilles (els canvis, els tipus de permís). No n'hi
   havia cap d'estil i sortien com el navegador volia. La classe
   "taula" val tant si és la caixa que l'envolta com si és la taula
   mateixa. */
div.taula {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radi);
  overflow-x: auto;
}
table.taula {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radi);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
div.taula table { width: 100%; border-collapse: collapse; }
.taula { width: 100%; font-size: var(--t-petit); }
.taula th {
  text-align: left;
  font-weight: 600;
  color: var(--gris-fosc);
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.taula td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.taula tr:last-child td { border-bottom: 0; }

/* Al mòbil i a la tauleta: menys marge, i que res no sobresurti. */
@media (max-width: 640px) {
  main, main.ample { padding: 14px 12px; }
  .formulari { max-width: 100%; }
  .titol-setmana { font-size: var(--t-mitja); }
  button { min-width: 0; width: 100%; }
  .accions-fila button, .mini button { width: auto; }
  .taula th, .taula td { padding: 9px 10px; }
}

/* ---------------- Les hores sindicals, mes a mes ----------------
   Una targeta per mes amb la barra del que s'ha gastat: d'un cop d'ull
   es veu quin mes és ple i quin està per estrenar. */
.hs-mesos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 10px 0 26px;
}
.hs-mes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radi);
  box-shadow: 0 1px 2px rgba(20, 40, 63, .05);
}
.hs-mes.ara { border-color: var(--blau-clar); box-shadow: 0 0 0 2px rgba(45, 95, 138, .18); }
.hs-mes.futur { opacity: .55; }
.hs-nom { font-size: var(--t-petit); font-weight: 600; color: var(--gris-fosc); text-transform: uppercase; letter-spacing: .5px; }
.hs-xifra b { font-size: var(--t-gran); font-weight: 700; color: var(--blau); }
.hs-xifra small { font-size: var(--t-petit); color: var(--gris-fosc); }
.hs-barra { display: block; height: 6px; background: var(--gris); border-radius: 99px; overflow: hidden; }
.hs-barra i { display: block; height: 100%; background: var(--blau-clar); border-radius: 99px; }
.hs-mes.ple .hs-barra i { background: var(--daurat); }
.hs-mes.ple .hs-xifra b { color: var(--daurat-lletra); }
.hs-queda { font-size: var(--t-peu); color: var(--gris-fosc); }

/* ---------------- El menú, agrupat ----------------
   A l'ordinador, una banda fixa a l'esquerra amb tres grups; al
   telèfon, la mateixa llista dins del botó «Menú». Es pinta un sol cop
   a capcalera.php. */
.mg { display: flex; flex-direction: column; gap: 2px; }
.mg + .mg { margin-top: 14px; }
.mg-titol {
  font-size: var(--t-peu);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8fa3ba;
  padding: 0 12px 4px;
}
.menu-caixa .mg a.ara { background: var(--daurat); border-color: var(--daurat); color: #2a2208; font-weight: 600; }

.laterals { display: none; }

@media (min-width: 1000px) {
  body:has(.laterals) { padding-left: 244px; }
  .laterals {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    width: 244px;
    padding: 20px 14px;
    background: var(--blau);
    color: #fff;
    overflow-y: auto;
    z-index: 20;
  }
  .lat-marca { padding: 4px 12px 22px; }
  .lat-marca b { display: block; font-size: var(--t-gran); font-weight: 700; letter-spacing: .3px; }
  .lat-marca span { font-size: var(--t-peu); color: #8fa3ba; }
  .laterals .mg a {
    color: #dbe4ee;
    text-decoration: none;
    padding: 9px 12px;
    border-radius: var(--radi-petit);
    font-size: var(--t-petit);
  }
  .laterals .mg a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
  .laterals .mg a.ara { background: var(--daurat); color: #2a2208; font-weight: 600; }
  .lat-peu {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .lat-peu .qui { width: 100%; padding: 0 12px 6px; font-size: var(--t-petit); }
  .lat-peu .qui em { display: block; font-style: normal; color: #8fa3ba; font-size: var(--t-peu); }
  .lat-peu a {
    color: #dbe4ee; text-decoration: none; font-size: var(--t-petit);
    padding: 6px 12px; border-radius: var(--radi-petit);
    background: rgba(255, 255, 255, .08);
  }
  .lat-peu a:hover { background: rgba(255, 255, 255, .18); }
  /* El botó «Menú» sobra: la banda ja és sempre aquí. */
  .menu-estret { display: none; }
  .barra .nomes-ample { display: flex; }
}

/* ---------------- El quadrant del mes, a tota l'amplada ----------------
   Abans quedava un tros buit a la dreta. La taula s'estira i els dies
   s'ensanchen; la columna dels noms és prou ampla perquè no es trenquin
   en dues línies, i en negre: eren enllaços blaus subratllats i
   cridaven més que els torns. */
main.complet { max-width: none; }
.complet .qa-taula { width: 100%; }
.complet .qa-qui { width: 235px; min-width: 235px; }
.qa-qui a { color: var(--ink); text-decoration: none; }
.qa-qui a:hover b { text-decoration: underline; }
.qa-qui b { color: var(--ink); white-space: nowrap; }

/* ---------------- La fitxa de la permuta ----------------
   Dues columnes, una per cada persona, amb el mateix ordre: qui, quin
   dia i quin torn fa. El torn no s'escriu: surt del quadrant. */
.permuta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 18px;
  align-items: start;
  max-width: 860px;
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radi);
  box-shadow: 0 1px 2px rgba(20, 40, 63, .05);
}
.pm-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pm-col h4 {
  margin: 0 0 4px;
  font-size: var(--t-petit);
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--blau-clar);
  border-bottom: 2px solid var(--daurat);
  padding-bottom: 6px;
}
.pm-col label, .pm-etiqueta { font-size: var(--t-petit); font-weight: 600; color: var(--gris-fosc); margin-top: 6px; }
.pm-valor { margin: 0; min-height: 38px; display: flex; align-items: center; gap: 8px; }
.pm-jo { margin: 0; padding: 9px 0; }
.pm-torn {
  display: inline-block; min-width: 34px; text-align: center;
  padding: 5px 10px; border-radius: 6px; font-weight: 700;
  background: var(--gris); color: var(--blau);
}
.pm-torn.t-M, .pm-torn.t-MT { background: var(--M-fill); color: var(--M-ac); }
.pm-torn.t-T { background: var(--T-fill); color: var(--T-ac); }
.pm-torn.t-N, .pm-torn.t-TN { background: var(--N-fill); color: var(--N-ac); }
.pm-buit { color: var(--gris-fosc); }
.pm-fletxes { align-self: center; font-size: 28px; color: var(--daurat-lletra); padding-top: 26px; }
.pm-peu { grid-column: 1 / -1; margin-top: 18px; }
.permuta-confirma { max-width: 860px; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.permuta-confirma input:not([type=hidden]), .permuta-confirma select { max-width: 460px; }
@media (max-width: 700px) {
  .permuta { grid-template-columns: 1fr; padding: 16px; }
  .pm-fletxes { transform: rotate(90deg); padding: 10px 0; justify-self: center; }
}
.pm-torn { border: 0; box-shadow: none; }
.permuta-confirma button { align-self: flex-start; }

/* ---------------- Avisos al menú ----------------
   Una pantalla que té alguna cosa esperant-te s'il·lumina de vermell
   i porta el número. */
.mg a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mg-n {
  font-style: normal;
  font-size: var(--t-peu);
  font-weight: 700;
  min-width: 22px;
  padding: 2px 7px;
  text-align: center;
  border-radius: 99px;
  background: var(--danger);
  color: #fff;
}
.mg a.amb-avis { font-weight: 600; box-shadow: inset 3px 0 0 var(--danger); }
.laterals .mg a.amb-avis:not(.ara) { background: rgba(235, 87, 87, .16); color: #fff; }
.laterals .mg a.amb-avis:not(.ara):hover { background: rgba(235, 87, 87, .26); }
.mg a.ara .mg-n { background: #2a2208; color: var(--daurat); }

/* ---------------- El desplegable de cada dia (quadrant del mes) ----------------
   Clicar un dia obre un quadre amb els torns i els permisos: es tria i es
   desa, sense canviar de pàgina. Sense JavaScript: és un <details>; amb
   «name» només n'hi pot haver un d'obert. Quan és obert, el seu
   <summary> s'estén per tota la pantalla i fa de fons: clicar fora el
   tanca. */
.qa-cel.tocable { position: relative; cursor: pointer; }
.qa-cel.tocable .qa-v { display: block; line-height: 26px; }
.qa-pop > summary {
  list-style: none;
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.qa-pop > summary::-webkit-details-marker { display: none; }
.qa-pop[open] > summary {
  position: fixed;
  z-index: 40;
  background: rgba(16, 21, 28, .38);
  cursor: default;
}
.qa-menu {
  position: fixed;
  z-index: 41;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 18px;
  background: var(--card-bg);
  border-radius: var(--radi);
  box-shadow: 0 18px 50px rgba(16, 21, 28, .35);
  text-align: left;
  font-weight: 400;
  font-size: var(--t-cos);
  cursor: default;
}
.qa-menu-t { display: block; font-size: var(--t-mitja); margin-bottom: 12px; color: var(--ink); }
.qa-grup-t {
  display: block;
  margin: 12px 0 6px;
  font-size: var(--t-peu);
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--gris-fosc);
}
.qa-opcions { display: flex; flex-wrap: wrap; gap: 6px; }
.qa-opcions button {
  width: auto;
  min-width: 46px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: var(--radi-petit);
  font-weight: 700;
  font-size: var(--t-petit);
  cursor: pointer;
}
.qa-opcions button:hover { box-shadow: 0 0 0 2px var(--blau-clar); }
.qa-menu .qa-buit {
  width: 100%;
  margin-top: 14px;
  padding: 9px;
  background: var(--gris);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radi-petit);
  cursor: pointer;
}
.qa-menu .qa-buit:hover { background: #e3e7ed; }
.qa-menu .qa-mes { display: block; margin-top: 12px; font-size: var(--t-petit); color: var(--blau-clar); }

/* El que vol dir cada botó, en petit a sota. Surt del «title» (que ja hi
   és), així no s'engreixa el HTML de les 690 caselles. */
.qa-menu { width: min(580px, 92vw); }
.qa-opcions button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.qa-opcions button::after {
  content: attr(title);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.2;
  opacity: .85;
}
.qa-opcions.qa-perm { display: grid; grid-template-columns: repeat(2, 1fr); }
.qa-opcions.qa-perm button { align-items: flex-start; text-align: left; padding: 8px 12px; }
@media (max-width: 480px) { .qa-opcions.qa-perm { grid-template-columns: 1fr; } }
/* Més compacte: que els vint permisos hi càpiguen sense haver de baixar. */
.qa-menu { padding: 14px 16px; }
.qa-menu-t { margin-bottom: 6px; }
.qa-grup-t { margin: 8px 0 4px; }
.qa-opcions { gap: 5px; }
.qa-opcions button { padding: 5px 10px; gap: 0; }
.qa-opcions.qa-perm button { padding: 4px 10px; }
.qa-menu .qa-buit { margin-top: 10px; padding: 7px; }
.qa-menu .qa-mes { margin-top: 8px; }
.qa-opcions button { margin: 0; }

/* ---------------- Un dia demanat i encara pendent ----------------
   Una ratlla a baix de la casella, del color del permís que s'ha
   demanat. Quan s'aprova, la casella passa a ser el permís i la ratlla
   desapareix; si es denega, la ratlla també. */
.qa-cel.qa-pend { box-shadow: inset 0 -6px 0 var(--pc, var(--daurat)); }
.qa-cel.tocable.qa-pend:hover {
  box-shadow: inset 0 0 0 2px var(--blau), inset 0 -6px 0 var(--pc, var(--daurat));
}
.qa-pendent { margin: 0 0 6px; font-size: var(--t-petit); color: var(--gris-fosc); }

/* Hores sindicals soltes: el camp «de __ a __» del desplegable… */
.qa-franja { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qa-franja label { font-size: var(--t-petit); color: var(--gris-fosc); display: flex; align-items: center; gap: 6px; }
.qa-franja input[type=time] { width: auto; min-width: 110px; padding: 6px 8px; }
.qa-franja .qa-franja-b { margin: 0; padding: 7px 12px; background: var(--blau); color: #fff; border: 0; border-radius: var(--radi-petit); cursor: pointer; font-weight: 600; }
/* …i un punt del color de les hores sindicals a la casella que ja en té. */
.qa-cel.qa-hsh { position: relative; }
.qa-cel.qa-hsh::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pc, #b0743a);
  box-shadow: 0 0 0 1px #fff;
  pointer-events: none;
}

/* ---------------- Preus i dies (de només lectura) ----------------
   Tres blocs numerats: l'hora extra, els plusos del conveni i els dies
   assenyalats. Targetes netes, amb els números grans i el daurat de la
   casa només per ressaltar. */
.tf-intro { color: var(--gris-fosc); max-width: 62ch; margin: 0 0 26px; }
.tf-seccio { margin: 0 0 40px; }
.tf-cap { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; flex-wrap: wrap; }
.tf-cap h2 { margin: 0; font-size: var(--t-gran); color: var(--blau); }
.tf-cap p { margin: 2px 0 0; color: var(--gris-fosc); font-size: var(--t-petit); }
.tf-num {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blau); color: var(--daurat); font-weight: 700; font-size: var(--t-mitja);
}
.tf-anys { margin-left: auto; display: flex; gap: 8px; }
.tf-anys a {
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 99px;
  background: var(--card-bg); color: var(--blau-clar); text-decoration: none; font-size: var(--t-petit);
}
.tf-anys a:hover { background: var(--gris); }

/* 1. L'hora extra */
.tf-rangs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tf-rang {
  position: relative; padding: 22px 22px 20px; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: var(--radi);
  box-shadow: 0 1px 2px rgba(20, 40, 63, .05);
}
.tf-rang.meu { border-color: var(--blau-clar); box-shadow: 0 0 0 2px rgba(45, 95, 138, .18), 0 6px 18px rgba(20, 40, 63, .08); }
.tf-rang h3 { margin: 0 0 14px; font-size: var(--t-mitja); color: var(--blau); }
.tf-badge {
  position: absolute; top: 14px; right: 14px; padding: 3px 10px; border-radius: 99px;
  background: var(--blau); color: #fff; font-size: var(--t-peu); font-weight: 600;
}
.tf-parell { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tf-parell > div { display: flex; flex-direction: column; padding: 12px 14px; background: var(--gris); border-radius: var(--radi-petit); }
.tf-etiqueta { font-size: var(--t-peu); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--gris-fosc); }
.tf-parell b { font-size: var(--t-gran); color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.tf-parell small { color: var(--gris-fosc); font-size: var(--t-peu); }

/* 2. Els plusos */
.tf-plusos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.tf-pluso {
  padding: 20px 22px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radi); box-shadow: 0 1px 2px rgba(20, 40, 63, .05);
}
.tf-pluso h3 {
  margin: 0 0 8px; padding-bottom: 10px; font-size: var(--t-petit); text-transform: uppercase;
  letter-spacing: .7px; color: var(--blau-clar); border-bottom: 2px solid var(--daurat);
}
.tf-pluso ul { list-style: none; margin: 0; padding: 0; }
.tf-pluso li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.tf-pluso li:last-child { border-bottom: 0; }
.tf-pluso li span { color: var(--ink); }
.tf-pluso li b { white-space: nowrap; color: var(--blau); font-variant-numeric: tabular-nums; }

/* 3. Els dies assenyalats */
.tf-llegenda { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 14px; font-size: var(--t-petit); color: var(--gris-fosc); }
.tf-llegenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tf-llegenda i.cobra { background: var(--daurat); }
.tf-llegenda i.nadal { background: #b0413e; }
.tf-llegenda i.marcat { background: #b8c2cf; }
.tf-dies { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.tf-dia {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radi);
  box-shadow: 0 1px 2px rgba(20, 40, 63, .05);
}
.tf-dia.proper { border-color: var(--daurat); box-shadow: 0 0 0 2px rgba(201, 168, 76, .28); }
.tf-data {
  flex: none; width: 56px; padding: 8px 0; text-align: center; border-radius: var(--radi-petit);
  background: var(--daurat); color: #2a2208; line-height: 1.1;
}
.tf-data b { display: block; font-size: var(--t-gran); }
.tf-data span { font-size: var(--t-peu); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.tf-dia.nadal .tf-data { background: #b0413e; color: #fff; }
.tf-dia.marcat .tf-data { background: #dfe4ea; color: #4a5565; }
.tf-text { flex: 1; min-width: 0; }
.tf-text h3 { margin: 0; font-size: var(--t-cos); color: var(--ink); }
.tf-text p { margin: 2px 0 0; color: var(--gris-fosc); font-size: var(--t-petit); }
.tf-proper { font-style: normal; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--blau); color: #fff; font-size: var(--t-peu); font-weight: 600; }
.tf-tag {
  flex: none; padding: 3px 10px; border-radius: 99px; font-size: var(--t-peu); font-weight: 600;
  background: #fbf1d0; color: var(--daurat-lletra);
}
.tf-dia.nadal .tf-tag { background: #f6dcdb; color: #8a2b2b; }
.tf-dia.marcat .tf-tag { background: var(--gris); color: var(--gris-fosc); }
.tf-buit { color: var(--gris-fosc); }
@media (max-width: 560px) {
  .tf-dies, .tf-plusos { grid-template-columns: 1fr; }
  .tf-dia { flex-wrap: wrap; }
}

/* ---------------- Permisos i drets: comptadors ----------------
   Cada bossa és un anell que es va buidant (només CSS: conic-gradient).
   El número gran és el que queda. En vermell, si s'ha passat. */
.dr-fitxa { padding: 24px; }
.dr-persona { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; }
.dr-persona h3 { margin: 0; font-size: var(--t-gran); color: var(--blau); }
.dr-persona span { color: var(--gris-fosc); font-size: var(--t-petit); }
.dr-inicials {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blau); color: var(--daurat) !important; font-weight: 700; font-size: var(--t-mitja) !important;
}
.dr-titol {
  margin: 26px 0 12px; font-size: var(--t-petit); text-transform: uppercase; letter-spacing: .8px;
  color: var(--blau-clar); padding-bottom: 8px; border-bottom: 2px solid var(--daurat);
}
.dr-comptadors { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.dr-targeta {
  display: flex; align-items: center; gap: 18px; padding: 18px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radi);
  box-shadow: 0 1px 2px rgba(20, 40, 63, .05);
}
.dr-targeta.passat { border-color: rgba(235, 87, 87, .5); }
.dr-anell {
  --p: 0; --c: var(--blau-clar);
  position: relative; flex: none; width: 112px; height: 112px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--gris) 0);
  display: grid; place-content: center; text-align: center;
}
.dr-anell::before { content: ""; position: absolute; inset: 11px; background: var(--card-bg); border-radius: 50%; }
.dr-anell b, .dr-anell small { position: relative; line-height: 1.05; }
.dr-anell b { font-size: 28px; color: var(--ink); font-variant-numeric: tabular-nums; }
.dr-anell small { font-size: var(--t-peu); color: var(--gris-fosc); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.dr-targeta.passat .dr-anell b { color: var(--danger); }
.dr-text { min-width: 0; }
.dr-text h5 { margin: 0 0 6px; font-size: var(--t-cos); color: var(--ink); }
.dr-text p { margin: 2px 0; font-size: var(--t-petit); color: var(--gris-fosc); }
.dr-text p b { color: var(--ink); }
.dr-avis { color: var(--danger) !important; font-weight: 600; }

.dr-fets { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.dr-fet {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radi-petit);
}
.dr-fet b { display: block; font-size: var(--t-petit); color: var(--ink); }
.dr-fet span:not(.pastilla) { font-size: var(--t-peu); color: var(--gris-fosc); }
.dr-fet.fet-servit { border-color: var(--daurat); background: #fffaf0; }

.dr-jornada {
  padding: 20px 22px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radi); box-shadow: 0 1px 2px rgba(20, 40, 63, .05);
}
.dr-jornada-cap { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.dr-jornada-cap > div { display: flex; flex-direction: column; }
.dr-jornada-cap b { font-size: var(--t-gran); color: var(--ink); margin: 2px 0; font-variant-numeric: tabular-nums; }
.dr-jornada-cap small { color: var(--gris-fosc); font-size: var(--t-peu); }
.dr-escreix.bo b { color: #1f7a45; }
.dr-escreix.passat b { color: var(--danger); }
.dr-barra { margin-top: 16px; height: 10px; background: var(--gris); border-radius: 99px; overflow: hidden; }
.dr-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--blau-clar), var(--daurat)); border-radius: 99px; }
@media (max-width: 560px) {
  .dr-comptadors, .dr-fets { grid-template-columns: 1fr; }
  .dr-targeta { gap: 14px; padding: 14px; }
  .dr-anell { width: 96px; height: 96px; }
}
.dr-fitxa { max-width: none; width: 100%; }

/* ---------------- El quadrant del mes, nou disseny ----------------
   Caselles arrodonides amb una mica d'aire, la gent amb una inicial en
   un cercle, i els escamots separats per una ratlla amb el nom, sense la
   barra fosca. El que hi ha escrit aquí mana sobre les regles de dalt. */
.qa-marc { padding: 6px 10px 12px; border-radius: 12px; box-shadow: 0 1px 2px rgba(20, 40, 63, .05); }
.qa-taula { border-spacing: 2px 3px; }
.qa-taula th, .qa-taula td { border: 0; }
.qa-taula thead th { border-radius: 8px; height: 40px; }
.qa-taula td.qa-cel { border-radius: 7px; height: 28px; }
.qa-taula td.qa-qui { background: var(--card-bg); padding: 3px 10px 3px 4px !important; border-right: 0 !important; }
.qa-taula thead th.qa-qui { background: var(--card-bg); }

.qa-qui .qa-persona { display: flex; align-items: center; gap: 9px; min-width: 0; }
.qa-av {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blau); color: var(--daurat); font-size: var(--t-petit); font-weight: 700;
}
.qa-nom { min-width: 0; line-height: 1.2; }
.qa-nom b { display: block; font-size: var(--t-petit); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-nom span { font-size: var(--t-peu); color: var(--gris-fosc); }

.qa-taula .qa-grup td { background: transparent !important; height: 30px; padding-top: 8px; border-bottom: 1px solid var(--border); border-radius: 0; }
.qa-taula .qa-grup td.qa-qui {
  background: var(--card-bg) !important; color: var(--gris-fosc); font-size: var(--t-peu);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding-left: 4px !important;
}

/* ---------------- La taula de permisos de tothom (administrador) ----------------
   Cada casella diu el que queda, el total i porta una barra petita que
   es va buidant; en vermell, si s'ha passat. Mateix aire que el quadrant. */
.taula-drets { border-spacing: 3px 4px; }
.taula-drets th, .taula-drets td { border: 0; }
.taula-drets thead th { background: var(--gris); border-radius: 8px; }
.taula-drets td.dr-cel {
  background: #f5f7fa; border-radius: 8px; padding: 7px 8px 8px; text-align: center;
  vertical-align: middle; min-width: 78px;
}
.taula-drets td.dr-cel b { display: block; font-size: var(--t-mitja); color: var(--ink); line-height: 1.1; }
.taula-drets td.dr-cel > span { display: block; font-size: var(--t-peu); color: var(--gris-fosc); margin-bottom: 5px; }
.taula-drets td.dr-cel.passat b { color: var(--danger); }
.dr-mini { display: block; height: 5px; background: #e3e8ee; border-radius: 99px; overflow: hidden; }
.dr-mini u { display: block; height: 100%; border-radius: 99px; text-decoration: none; }
.taula-drets td.qui { background: var(--card-bg); padding: 4px 10px 4px 4px; }
.taula-drets td.qui a { color: inherit; text-decoration: none; display: flex; }
.taula-drets .qa-grup td { background: transparent; height: 30px; border-bottom: 1px solid var(--border); }
.taula-drets .qa-grup .qui {
  background: var(--card-bg) !important; color: var(--gris-fosc); font-size: var(--t-peu);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.taula-drets td.qui .qa-av { color: var(--daurat); font-size: var(--t-petit); }
.taula-drets td.qui .qa-nom b { color: var(--ink); }
.taula-drets td.qui .qa-nom span { color: var(--gris-fosc); font-size: var(--t-peu); }
.taula-drets td.qui .qa-persona { align-items: center; }

/* Les inicials dins del cercle: les regles de les columnes de noms (un
   color gris per als <span>) els deixaven el text gairebé invisible, i a
   la taula de permisos la lletra es sortia del cercle. Aquí mana el cercle. */
.qa-taula td.qa-qui .qa-av,
.taula-drets td.qui .qa-av {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; margin: 0; padding: 0; border-radius: 50%;
  background: var(--blau); color: var(--daurat);
  font-size: var(--t-petit); font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none;
}

/* ---------------- Hores i plusos (acumulat de l'any) ----------------
   Una targeta per concepte amb la quantitat, l'import acumulat i unes
   barretes mes a mes. Mateixa cara que els comptadors dels permisos. */
.ac-anys { display: flex; gap: 8px; margin: 0 0 18px; flex-wrap: wrap; }
.ac-anys a {
  padding: 6px 16px; border: 1px solid var(--border); border-radius: 99px;
  background: var(--card-bg); color: var(--blau-clar); text-decoration: none; font-size: var(--t-petit);
}
.ac-anys a.ara { background: var(--blau); color: #fff; border-color: var(--blau); }
.ac-persona { margin-bottom: 14px; }

.ac-total {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 22px 26px; margin: 0 0 18px; background: var(--blau); color: #fff; border-radius: var(--radi);
}
.ac-total .tf-etiqueta { color: #b9c4d2; }
.ac-total b { display: block; font-size: 36px; line-height: 1.1; margin: 4px 0; color: var(--daurat); font-variant-numeric: tabular-nums; }
.ac-total small { color: #b9c4d2; font-size: var(--t-petit); }
.ac-total .ac-barres { width: 330px; max-width: 100%; }
.ac-total .ac-barres span em { color: #8fa3ba; }
.ac-total .ac-barres span i { background: var(--daurat); }

.ac-comptadors { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; }
.ac-targeta {
  --c: var(--blau-clar);
  padding: 18px 20px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radi); box-shadow: 0 1px 2px rgba(20, 40, 63, .05);
}
.ac-targeta h4 { margin: 0 0 8px; font-size: var(--t-petit); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-fosc); display: flex; align-items: center; gap: 8px; }
.ac-targeta h4 i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); display: inline-block; }
.ac-xifra b { font-size: 30px; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ac-import { margin: 2px 0 12px; font-size: var(--t-cos); font-weight: 600; color: var(--c); font-variant-numeric: tabular-nums; }
.ac-import span { font-weight: 400; font-size: var(--t-peu); color: var(--gris-fosc); }

.ac-barres { --c: var(--blau-clar); display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.ac-barres span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; min-width: 0; }
.ac-barres span i { display: block; width: 100%; background: var(--c); border-radius: 4px 4px 2px 2px; min-height: 0; opacity: .9; }
.ac-barres span em { font-style: normal; font-size: 10px; color: var(--gris-fosc); line-height: 1; }

.ac-taula td.dr-cel b { font-size: var(--t-cos); }
.ac-taula .ac-res { color: #b9c0ca; margin: 0; }
.ac-taula .ac-tot { background: #eaf0f7; }
.ac-taula tr.ac-suma td { border-top: 1px solid var(--border); }
.ac-taula tr.ac-suma td.qui { color: var(--ink); }
@media (max-width: 560px) { .ac-comptadors { grid-template-columns: 1fr; } .ac-total b { font-size: 28px; } }

/* Un dia amb judici: una ratlleta blava a dalt de la casella (la de
   sota és per a un permís demanat i el puntet de la cantonada, per a
   les hores sindicals). Els judicis s'apunten amb mesos d'antelació. */
.qa-cel.qa-jud { position: relative; }
.qa-cel.qa-jud::before {
  content: ""; position: absolute; top: 2px; left: 4px; right: 4px; height: 3px;
  border-radius: 2px; background: var(--blau-clar); pointer-events: none;
}
.qa-jud-llegenda { background: #fff; border-top: 3px solid var(--blau-clar); }

/* Entrada: «Quadrant» i sota, en daurat, el cos al qual pertany. */
.entrada-cap h1 { font-size: 34px; letter-spacing: .5px; }
.entrada-cap .entrada-pl {
  margin: 2px 0 0;
  color: var(--daurat);
  font-size: 26px;
  font-weight: 700;
}

/* L'escut al costat del nom, a dalt del menú lateral. */
.lat-marca { display: flex; align-items: center; gap: 12px; }
.lat-marca img { width: 46px; height: auto; flex: none; }

/* ---------------- Al telèfon ----------------
   El menú era més llarg que la pantalla i «Tancar sessió» quedava fora
   d'abast; els noms se'n menjaven mitja pantalla i el quadrant no es
   veia. Ara el menú fa scroll per dins, amb el botó sempre a dalt, i els
   noms es retallen: el TIP, que és el que es coneix, queda sota. */
@media (max-width: 999px) {
  .menu-estret[open] > summary { position: fixed; top: 10px; right: 12px; z-index: 80; }
  .menu-estret[open] > .menu-caixa {
    position: fixed; top: 58px; left: 12px; right: 12px;
    max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px);
    overflow-y: auto; overscroll-behavior: contain;
  }
}
@media (max-width: 700px) {
  /* Només la inicial i el TIP: el que més es coneix i el que menys ocupa. */
  .qa-taula td.qa-qui, .qa-taula thead th.qa-qui, .complet .qa-qui { width: 76px; min-width: 76px; max-width: 76px; padding-right: 2px !important; }
  .qa-nom b, .qa-rang, .taula-drets td.qui .qa-nom b { display: none; }
  .qa-nom span { font-size: 12px; font-weight: 600; color: var(--ink); }
  .qa-qui .qa-persona, .taula-drets td.qui .qa-persona { gap: 5px; }
  .qa-taula td.qa-qui .qa-av, .taula-drets td.qui .qa-av { width: 24px; height: 24px; font-size: 12px; }
  .taula-drets .qui, .taula-drets td.qui { min-width: 0; width: 78px; max-width: 78px; padding-right: 2px; }
  .qa-lleg-nom { display: none; }
  .qa-llegenda { gap: 6px 10px; }
}

/* ---------------- Obrir torn: la finestra que no es pot saltar ----------------
   Al cap de torn li surt al damunt de tot, en entrar, mentre no ha obert el
   torn en curs. Sense JavaScript: és el mateix formulari de sempre. */
.ot-fons {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(12, 24, 40, .78);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow: auto;
}
.ot-finestra {
  background: var(--card-bg); border-radius: 16px; width: 100%; max-width: 680px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 22px 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.ot-finestra.ot-pagina { max-height: none; box-shadow: 0 1px 3px rgba(20, 40, 63, .12); }
.ot-finestra h2 { margin: 0 0 6px; font-size: var(--t-gran); color: var(--blau); }
.ot-finestra h2 span { font-weight: 400; color: var(--gris-fosc); font-size: var(--t-petit); margin-left: 6px; }
.ot-ajuda { color: var(--gris-fosc); font-size: var(--t-petit); margin: 6px 0 12px; }
.ot-taula { width: 100%; border-collapse: collapse; margin: 6px 0 12px; }
.ot-taula td { padding: 7px 4px; border-top: 1px solid var(--border); vertical-align: middle; }
.ot-qui label { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.ot-qui input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--blau); flex: none; }
.ot-qui span { display: block; margin-left: 29px; font-size: var(--t-peu); color: var(--gris-fosc); }
.ot-taula input[type=text] { width: 100%; min-width: 140px; }
.ot-cap { display: block; font-weight: 600; margin: 8px 0 2px; }
.ot-cap select { display: block; margin-top: 4px; max-width: 100%; }
.ot-peu { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.ot-peu button { background: var(--blau); color: #fff; border: 0; border-radius: 10px; padding: 11px 22px; font-weight: 600; font-size: var(--t-mitja); cursor: pointer; }
.ot-peu a { color: var(--gris-fosc); font-size: var(--t-petit); }
.ot-tria { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 14px; }
.ot-tria label { font-weight: 600; font-size: var(--t-petit); }
.ot-tria select { display: block; margin-top: 4px; }
@media (max-width: 560px) { .ot-finestra { padding: 16px; } .ot-taula td:nth-child(2) { display: block; padding-top: 0; border-top: 0; } }

/* Obrir torn: l'hora d'entrada, qui ha vingut sense ser a la llista i la nota del cap. */
.ot-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ot-notes input[type=text] { flex: 1 1 180px; }
.ot-hora { font-size: var(--t-peu); color: var(--gris-fosc); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ot-hora input { width: auto; }
.ot-afegits { margin: 10px 0 4px; border: 1px dashed var(--border); border-radius: 10px; padding: 8px 12px; }
.ot-afegits summary { cursor: pointer; font-weight: 600; font-size: var(--t-petit); }
.ot-afegit { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.ot-afegit select { flex: 1 1 200px; }
.ot-afegit input[type=text] { flex: 2 1 220px; }
.ot-cap input[type=text] { display: block; margin-top: 4px; width: 100%; font-weight: 400; }

.ot-afegit input.ot-hores { flex: 0 0 90px; width: 90px; }

/* Obrir torn: la prolongació de jornada i el resultat. */
.ot-prolonga-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; padding-top: 8px; border-top: 1px solid var(--border); }
.ot-prolonga-fila b { flex: 1 1 100%; font-size: var(--t-petit); }
.ot-prolonga-fila select { flex: 1 1 180px; }
.ot-prolonga-fila input[type=text] { flex: 1 1 160px; }
.ot-resultat { font-size: var(--t-peu); font-weight: 600; color: var(--blau); background: var(--gris); border-radius: 8px; padding: 4px 9px; }
.ot-ja { font-size: var(--t-peu); color: var(--gris-fosc); }
.ot-lista { padding-left: 18px; line-height: 1.7; }
.ot-boto { display: inline-block; background: var(--blau); color: #fff; border-radius: 10px; padding: 11px 22px; font-weight: 600; text-decoration: none; }

.ot-avis { background: #fff3e0; color: #8a5a1a; border-radius: 10px; padding: 10px 12px; font-size: var(--t-petit); margin: 6px 0 12px; }

.ot-etiqueta { font-weight: 500; font-size: var(--t-peu); color: var(--gris-fosc); background: var(--gris); border-radius: 8px; padding: 2px 8px; margin-left: 6px; }

/* Calendari al mòbil: el botó i els passos de l'iPhone i de l'Android. */
.cm-targeta { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin: 0 0 16px; max-width: 760px; }
.cm-targeta h2 { margin: 0 0 8px; font-size: var(--t-gran); color: var(--blau); }
.cm-targeta h3 { margin: 0 0 8px; font-size: var(--t-mitja); color: var(--blau); }
.cm-targeta ol { padding-left: 20px; line-height: 1.7; margin: 8px 0; }
.cm-boto { display: inline-block; background: var(--blau); color: #fff; border-radius: 10px; padding: 12px 22px; font-weight: 600; text-decoration: none; }
.cm-avis { background: #fff3e0; color: #8a5a1a; border-radius: 10px; padding: 10px 12px; }
.cm-ajuda { color: var(--gris-fosc); font-size: var(--t-petit); }
.cm-adreca label { display: block; font-size: var(--t-petit); font-weight: 600; margin-bottom: 4px; }
.cm-adreca input { width: 100%; font-size: var(--t-peu); }

/* El desplegable d'un dia, per damunt de la barra de dalt. La barra és «sticky» amb
   z-index 50 i en ser al damunt tallava la part de dalt del desplegable (títol i primeres
   opcions), sobretot al mòbil. I una alçada que compti la barra d'adreces del navegador. */
.qa-pop[open] > summary { z-index: 300; }
.qa-menu {
  z-index: 301;
  max-height: 90vh;
  max-height: calc(100dvh - 24px);
}

/* Al demanar un permís: el que et queda, sota del nom. */
.qa-opcions button::after { order: 2; }
.qa-opcions button .qa-queda { order: 3; font-size: 11px; font-weight: 700; margin-top: 2px; }
.qa-opcions button .qa-queda.esgotat { text-decoration: underline; }

/* Quadrant del mes: els dotze mesos, petits, per clicar el que es vol. */
.mesos-tira { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
.mesos-tira a {
  min-width: 42px; text-align: center; padding: 4px 8px; border-radius: 999px;
  font-size: var(--t-peu); font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
  color: var(--ink); background: var(--card-bg); border: 1px solid var(--border); text-decoration: none;
}
.mesos-tira a:hover { border-color: var(--blau-clar); }
.mesos-tira a.sense { opacity: .45; }
.mesos-tira a.avui { box-shadow: inset 0 -3px 0 var(--daurat); }
.mesos-tira a.ara { background: var(--blau); border-color: var(--blau); color: #fff; opacity: 1; }
@media (max-width: 480px) { .mesos-tira { display: grid; grid-template-columns: repeat(6, 1fr); } .mesos-tira a { min-width: 0; } }