/* Portal EXE: tauler inicial i mòduls. Targetes sòlides de premium.css; les que s'obren s'alcen.
   Entrada esglaonada (35 ms entre targetes) i barres que creixen en carregar. */

.portal-moduls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); }
.portal-modul { display: flex; flex-direction: column; min-width: 0; padding: var(--e5); border-radius: var(--radi-targeta); background: var(--fons); box-shadow: 0 0 0 1px var(--linia), var(--ombra-1); }
.portal-modul__capcalera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); }
.portal-modul__titol { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
.portal-modul__titol .icona { color: var(--exe-verd); }
.portal-modul__estat { color: var(--tinta-2); font-size: 13px; }
.portal-modul__ajuda { margin-top: var(--e3); color: var(--tinta-2); }
.portal-indicadors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4) var(--e5); margin: var(--e5) 0; }
.portal-indicador { min-width: 0; }
.portal-indicador dt { color: var(--tinta-3); font-size: 13px; }
.portal-indicador dt a { position: relative; z-index: 1; color: inherit; }
.portal-indicador dt a:hover { color: var(--exe-verd); }
.portal-indicador dd { margin: 2px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.portal-modul__obre { position: relative; z-index: 1; display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--e4); font-size: 14px; font-weight: 600; }
.portal-modul__obre .icona { transition: transform var(--d-2) var(--corba-surt); }
.portal-modul__obre:hover { text-decoration: none; }
.portal-modul__obre:hover .icona { transform: translateX(3px); }
.portal-properament { display: grid; justify-items: start; gap: var(--e4); max-width: 620px; }
.portal-properament > .icona { color: var(--tinta-2); }

/* El tauler de cada persona (19/10/2026): què té pendent i les hores que té assignades. */
.portal-personal { margin-bottom: var(--e6); }
.portal-personal__titol { margin: 0 0 var(--e3); font-size: 19px; font-weight: 600; letter-spacing: -0.012em; }
.portal-personal__graella { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--e4); align-items: start; }
.portal-personal__graella--hores { grid-template-columns: minmax(0, 1fr); }
.portal-pendents { display: grid; margin: 0; padding: 0; list-style: none; }
.portal-pendents li + li { border-top: 1px solid var(--linia); }
.portal-pendents a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); padding: var(--e3) var(--e4); color: var(--tinta); transition: background-color var(--d-1); }
.portal-pendents a:hover { background: rgb(0 128 124 / 6%); text-decoration: none; }
.portal-pendents strong { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.portal-personal__buit { margin: 0; padding: var(--e4); color: var(--tinta-3); font-size: 14px; }
.portal-projecte + .portal-projecte, .portal-projectes__mes { border-top: 1px solid var(--linia); }
.portal-projecte__capcalera { display: flex; align-items: center; gap: var(--e2); min-height: 40px; padding: 0 var(--e3); border-radius: 0; font-size: 14px; transition: background-color var(--d-1); }
.portal-projecte__capcalera::before { width: 6px; height: 6px; flex: none; border-right: 1.5px solid var(--tinta-3); border-bottom: 1.5px solid var(--tinta-3); transform: rotate(-45deg); transition: transform var(--d-3) var(--corba-molla); content: ""; }
.portal-projecte[open] > .portal-projecte__capcalera::before { transform: rotate(45deg); }
.portal-projecte__capcalera:hover { background: var(--ressalt); }
.portal-projecte__codi { flex: none; color: var(--tinta-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.portal-projecte__nom { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.portal-projecte__obre { display: block; padding: var(--e2) var(--e3) var(--e3) 34px; border-top: 1px solid var(--linia); background: var(--fons-suau); color: var(--exe-verd-fosc); font-size: 13px; font-weight: 600; }
.portal-projecte__hores { flex: none; min-width: 64px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.portal-projecte__tasques { margin: 0; padding: 0 0 var(--e2); background: var(--fons-suau); list-style: none; }
.portal-projecte__tasques li { display: flex; align-items: baseline; gap: var(--e2); min-height: 32px; padding: var(--e1) var(--e3) var(--e1) 34px; color: var(--tinta-2); font-size: 13px; }
.portal-projecte__tasques li + li { border-top: 1px solid var(--linia); }
.portal-projecte__tasques .portal-projecte__hores { font-weight: 400; }
.portal-projecte__servei { flex: none; color: var(--tinta-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.portal-projecte__tasca { flex: 1 1 auto; min-width: 0; }
.portal-projectes__mes > summary { padding: var(--e3); color: var(--exe-verd-fosc); font-size: 13px; font-weight: 600; }

/* Tauler inicial (26/10/2026): xifres, hores del Toggl, pendents, setmana i embut. */
.tauler-capcalera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e2) var(--e4); }
.tauler-capcalera__data { margin: 0; color: var(--tinta-3); font-size: 14px; font-weight: 500; }
.tauler-xifres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e4); margin: 0 0 var(--e4); }
.tauler-xifra { margin: 0; padding: var(--e4) var(--e5) var(--e4) var(--e4); border-radius: var(--radi-targeta); background: var(--fons); box-shadow: 0 0 0 1px var(--linia), var(--ombra-1); }
.tauler-xifra dt { display: flex; align-items: center; gap: 6px; color: var(--tinta-2); font-size: 13px; font-weight: 500; }
.tauler-xifra--alerta dt::before { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--avis); box-shadow: 0 0 0 3px rgb(138 83 0 / 14%); content: ""; }
.tauler-xifra dt a { color: inherit; }
.tauler-xifra dt a::after { position: absolute; inset: 0; z-index: 1; content: ""; }
.tauler-xifra dt a:hover { text-decoration: none; }
.tauler-xifra dd { margin: 0; }
.tauler-xifra__valor { margin-top: 6px !important; font-size: 28px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tauler-xifra__detall { margin-top: 2px !important; color: var(--tinta-3); font-size: 12px; }
.tauler-graella { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--e4); align-items: start; margin-bottom: var(--e4); }
.tauler-columna { display: grid; gap: var(--e4); }
.tauler-bloc { display: grid; gap: var(--e3); }
.tauler-bloc__capcalera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e3); }
.tauler-bloc__titol { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.tauler-bloc :is(.camp__ajuda, .text-ajuda) { margin: 0; }
.tauler-bloc .titol-subseccio { margin: var(--e3) 0 0; }
.tauler-taula { min-width: 460px; }
.tauler-taula td:first-child { overflow-wrap: anywhere; }
.tauler-taula tfoot td { border-top: 1px solid var(--linia); font-weight: 600; }
.tauler-taula__consum { width: 34%; white-space: nowrap; }
.tauler-taula th, .tauler-taula th.num { white-space: nowrap; }
.tauler-consum-fila { display: flex; align-items: center; gap: var(--e2); }
.tauler-barra { position: relative; display: inline-block; flex: 1 1 60px; min-width: 60px; height: 6px; overflow: hidden; border-radius: 3px; background: rgb(16 40 38 / 7%); }
.tauler-barra__omple { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: linear-gradient(90deg, #14a39c, var(--exe-verd)); transform-origin: 0 50%; animation: creix 800ms var(--corba-surt) 200ms both; }
.tauler-barra--a_prop .tauler-barra__omple { background: var(--avis); }
.tauler-barra--passat .tauler-barra__omple { background: var(--error); }
.tauler-consum { min-width: 44px; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.tauler-pendents { margin: 0 calc(-1 * var(--e5)); }
.tauler-pendents a { padding-inline: var(--e5); }
.tauler-fites { display: grid; gap: var(--e2); margin: 0; padding: 0; font-size: 14px; list-style: none; }
.tauler-fites li { display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.tauler-fites a { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--tinta); text-overflow: ellipsis; white-space: nowrap; }
.tauler-fites a b { color: var(--cal-color); font-weight: 600; }
.tauler-fites__quan { flex: none; color: var(--tinta-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.tauler-embut { margin-bottom: var(--e6); }
.tauler-embut__tancats { display: flex; gap: var(--e4); font-size: 14px; }
.tauler-embut__tancats a { color: var(--tinta-2); }
.tauler-etapes { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tauler-etapes a { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr) 44px; align-items: center; gap: var(--e3); padding: 6px var(--e2); border-radius: 8px; color: var(--tinta); font-size: 14px; transition: background-color var(--d-1); }
.tauler-etapes a:hover { background: rgb(0 128 124 / 6%); text-decoration: none; }
.tauler-etapes__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tauler-etapes .tauler-barra { height: 8px; border-radius: 4px; }
.tauler-etapes__total { font-variant-numeric: tabular-nums; text-align: right; }
.portal-moduls--compactes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
.portal-moduls--compactes .portal-modul { gap: var(--e3); min-height: 0; padding: var(--e4) var(--e5); }
.portal-moduls--compactes .portal-indicadors { margin: var(--e2) 0 0; }
.portal-moduls--compactes .portal-indicador dd { font-size: 22px; }
.tauler-xifres > *, .tauler-graella > *, .tauler-columna > *, .tauler-embut, .portal-personal, .portal-moduls > * { animation: puja var(--d-4) var(--corba-molla) both; }
.tauler-xifres > :nth-child(2), .tauler-columna > :nth-child(2) { animation-delay: 35ms; }
.tauler-xifres > :nth-child(3), .tauler-graella > :nth-child(2) { animation-delay: 70ms; }
.tauler-xifres > :nth-child(4) { animation-delay: 105ms; }
.tauler-graella > :first-child, .portal-moduls > :first-child { animation-delay: 140ms; }
.tauler-embut, .portal-moduls > :nth-child(2) { animation-delay: 175ms; }
.portal-personal, .portal-moduls > :nth-child(n + 3) { animation-delay: 210ms; }
@media (max-width: 900px) {
  .portal-moduls--compactes, .tauler-graella, .portal-personal__graella { grid-template-columns: minmax(0, 1fr); }
  .tauler-xifres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) { .portal-moduls { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .tauler-xifres { gap: var(--e2); }
  .tauler-xifra { padding: var(--e3); }
  .tauler-xifra__valor { font-size: 21px; }
  .tauler-etapes a { grid-template-columns: minmax(0, 1fr) 80px 32px; }
  .tauler-pendents { margin: 0 calc(-1 * var(--e4)); }
  .tauler-pendents a { padding-inline: var(--e4); }
}