/* =========================================================================
   ÀREA DE CLIENT: accés, escriptori, compres, factures, perfil, compra i preferits
   Fa servir els mateixos colors i components de la web (base.css, components.css, forms.css).
   ========================================================================= */

/* ---------- Navegació: compte ---------- */
.nav-avatar {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-violet), var(--brand-magenta)); color: #fff; font-size: 12px; font-weight: 700;
}

/* ---------- Avisos ---------- */
.site-toasts { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--nav-h, 80px) + 16px); transform: translateX(-50%); display: grid; gap: 8px; width: min(520px, calc(100vw - 32px)); }
@media (min-width: 840px) { .site-toasts { top: 84px; bottom: auto; } }
.site-toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 8px 12px 16px; border-radius: 16px;
  background: var(--inverse-surface, #2E2B3D); color: #fff; box-shadow: 0 10px 30px rgba(20, 10, 60, .25);
  font-size: 14px; animation: toast-in .25s ease-out;
}
.site-toast > span { flex: 1; }
.site-toast .icon { flex: none; width: 20px; height: 20px; }
.site-toast-success .icon:first-child { color: #6EE7C8; }
.site-toast-error .icon:first-child { color: #FF9FB5; }
.site-toast-info .icon:first-child { color: #C8B8FF; }
.site-toast .icon-btn { color: #fff; width: 36px; height: 36px; }
.site-toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .site-toast { animation: none; } }

/* ---------- Petites peces comunes ---------- */
.btn-block { width: 100%; }
.btn-danger { background: #C3134A; color: #fff; }
.btn-danger:hover { background: #A30E3D; }
.btn.is-busy { opacity: .8; cursor: progress; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.link { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.link-btn { padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.back-link .icon { width: 20px; height: 20px; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 56px !important; }
.password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--on-variant); }
.check { align-items: flex-start; font-weight: 400; line-height: 1.45; margin-top: 4px; }
.check input { flex: none; margin-top: 1px; }
.check-legal { font-size: 14px; color: var(--on-variant); }

/* Indicador de seguretat de la contrasenya */
.pw-meter { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--on-variant); }
.pw-bar { flex: 0 0 96px; height: 6px; border-radius: 3px; background: var(--surface-high); overflow: hidden; }
.pw-bar span { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .25s, background-color .25s; }
.pw-meter[data-level="1"] .pw-bar span { width: 33%; background: #E5484D; }
.pw-meter[data-level="2"] .pw-bar span { width: 66%; background: #F5A524; }
.pw-meter[data-level="3"] .pw-bar span { width: 100%; background: #12A594; }

/* Camp del codi */
.field-code { text-align: center; }
.code-input { text-align: center; font-size: 30px !important; font-weight: 700; letter-spacing: .3em; font-variant-numeric: tabular-nums; padding: 14px 8px 14px calc(8px + .3em) !important; }
.code-hero { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 4px; border-radius: 20px; background: var(--primary-container); color: var(--primary); }
.code-hero .icon { width: 32px; height: 32px; }

/* ========================== ACCÉS (entrar, registre...) ==========================
   Fan servir la targeta de l'entrada a l'administració (.login-page / .login-card, a admin.css). */
.acc-auth .login-card { width: min(480px, 100%); }
.acc-auth-logo { display: block; width: 72px; margin-bottom: 4px; border-radius: 22px; }
.acc-auth-logo img { display: block; width: 72px; height: auto; }
.acc-auth .login-head p { line-height: 1.5; }
.acc-auth .code-hero { display: none; }
.auth-form { display: grid; gap: 6px; }
.auth-form .btn-block { margin-top: 10px; }
.auth-aside-link { margin: -4px 0 0; text-align: right; font-size: 14px; }
.auth-switch { margin: 18px 0 0; text-align: center; color: var(--on-variant); font-size: 15px; }
.auth-resend { margin-top: 14px; text-align: center; color: var(--on-variant); font-size: 14px; }

/* ========================== PANELL DE L'ÀREA DE CLIENT ==========================
   L'esquelet és el de l'administració (.adm-shell, .adm-side, .panel, .kpis...); aquí només hi ha el que és propi del client. */
.acc-brand-avatar { display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.acc-area .adm-brand { min-width: 0; }
.acc-brand-text { min-width: 0; }
.acc-brand-text strong, .acc-brand-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 20px; padding: 14px 16px; border-radius: 18px; background: var(--c-amber); color: var(--on-amber); }
.acc-banner > .icon { flex: none; }
.acc-banner p { flex: 1 1 16rem; margin: 0; font-weight: 500; }

/* Escriptori */
.acc-dash .panel { display: flex; flex-direction: column; gap: 10px; }
.acc-dash .panel-title { margin-bottom: 4px; }
.continue-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; color: inherit; }
@media (min-width: 520px) { .continue-card { grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 20px; } }
.continue-card .banner.cover { border-radius: 18px; }
.continue-body { display: grid; gap: 6px; justify-items: start; }
.continue-body strong { font-size: 20px; }
.continue-body small { color: var(--on-variant); }
.continue-card:hover .btn-tonal { background: color-mix(in srgb, var(--secondary-container) 85%, var(--on-secondary-container)); }
.explore-big { margin: 0; color: var(--on-variant); }
.explore-big strong { font-size: 36px; font-weight: 700; color: var(--on-bg); font-variant-numeric: tabular-nums; }
.progress-track { height: 10px; border-radius: 5px; background: var(--surface-high); overflow: hidden; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-violet), var(--brand-magenta), var(--brand-coral)); }
.explore-text { margin: 0; color: var(--on-variant); font-size: 14px; }
.acc-dash .link { align-self: flex-start; }
.sec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sec-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sec-list .icon { flex: none; width: 20px; height: 20px; }
.sec-list .is-ok .icon { color: #12A594; }
.sec-list .is-todo .icon { color: #D97706; }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.mini-grid-tight { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.mini-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--bg); color: inherit; transition: background-color .15s; }
.mini-card:hover { background: var(--surface); }
.mini-body { display: grid; gap: 2px; padding: 10px 14px 14px; }
.mini-body small { color: var(--on-variant); font-size: 13px; }
.banner.cover.cover-mini { height: 124px; padding: 14px 16px; gap: 10px; }
.cover-mini .cover-name { font-size: 19px; -webkit-line-clamp: 2; }
.cover-mini .cover-meta { display: none; }
.cover-mini .cover-badge { width: 62px; height: 62px; border-radius: 18px; }
.cover-mini .cover-badge .icon.cover-icon { width: 34px; height: 34px; }
.mini-grid-tight .banner.cover.cover-mini { height: 104px; }
.mini-grid-tight .cover-mini .cover-name { font-size: 16px; }
.mini-grid-tight .cover-mini .cover-badge { width: 48px; height: 48px; border-radius: 14px; }
.mini-grid-tight .cover-mini .cover-badge .icon.cover-icon { width: 26px; height: 26px; }
.recent-list { list-style: none; margin: 0 -10px; padding: 0; display: grid; }
.recent-list a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; color: inherit; }
.recent-list a:hover { background: var(--surface); }
.recent-dot { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; color: #fff; }
.recent-dot .icon, .recent-dot .cat-img { width: 20px; height: 20px; }
.recent-name { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-time { color: var(--on-variant); font-size: 13px; white-space: nowrap; }

/* Compres: una fila per projecte dins d'un panell, com les llistes de l'administració */
.buy-list { list-style: none; margin: 0; display: grid; }
.buy-item { display: grid; gap: 14px; padding: 16px; border-bottom: 1px solid var(--outline-variant); }
.buy-item:last-child { border-bottom: 0; }
@media (min-width: 700px) { .buy-item { grid-template-columns: 200px minmax(0, 1fr); align-items: start; padding: 18px; } }
.buy-item.is-new { border-radius: 18px; box-shadow: inset 0 0 0 2px var(--primary); }
.buy-cover { display: block; border-radius: 16px; overflow: hidden; }
.buy-cover-empty { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--surface-high); color: var(--on-variant); }
.banner.cover.cover-thumb { height: 112px; padding: 12px 14px; gap: 8px; }
.cover-thumb .cover-name { font-size: 16px; -webkit-line-clamp: 2; }
.cover-thumb .cover-meta { display: none; }
.cover-thumb .cover-badge { width: 52px; height: 52px; border-radius: 16px; }
.cover-thumb .cover-badge .icon.cover-icon { width: 28px; height: 28px; }
.buy-body { display: grid; gap: 6px; min-width: 0; }
.buy-name { margin: 0; font-size: 19px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.buy-name a { color: inherit; }
.buy-meta { margin: 0; color: var(--on-variant); font-size: 14px; }
.buy-downloads { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.buy-none { margin: 0; color: var(--on-variant); font-size: 14px; }
.badge-new { padding: 2px 10px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 700; }

/* Factures: la taula és la de l'administració (.data-table) */
.acc-area .inv-table td { vertical-align: middle; }
/* Al mòbil cada factura és una targeta (sense desplaçament horitzontal) */
@media (max-width: 640px) {
  .acc-area .inv-table, .acc-area .inv-table tbody { display: block; }
  .acc-area .inv-table thead { display: none; }
  .acc-area .inv-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--outline-variant); }
  .acc-area .inv-table tr:last-child { border-bottom: 0; }
  .acc-area .inv-table td { padding: 0; border: 0; }
  .acc-area .inv-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .acc-area .inv-table td:nth-child(3) { grid-column: 1; grid-row: 2; }
  .acc-area .inv-table td:nth-child(2) { grid-column: 1; grid-row: 3; color: var(--on-variant); font-size: 13px; }
  .acc-area .inv-table td:nth-child(4) { grid-column: 1; grid-row: 4; }
  .acc-area .inv-table td:nth-child(5) { grid-column: 2; grid-row: 1 / 3; }
  .acc-area .inv-table td:nth-child(6) { grid-column: 2; grid-row: 3 / 5; align-self: end; }
}

/* Perfil: dues columnes de panells */
.acc-col { display: grid; gap: 16px; align-content: start; }
.acc-card { display: grid; gap: 10px; scroll-margin-top: 90px; }
.acc-card .panel-title { margin: 0; }
.acc-card .form { display: grid; gap: 4px; }
.acc-card .form > .btn { justify-self: start; margin-top: 6px; }
.acc-subtitle { margin: 14px 0 0; font-size: 16px; font-weight: 700; }
.acc-note { margin: 0; color: var(--on-variant); font-size: 14px; max-width: 70ch; }
.pill-ok { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 1px 10px 1px 6px; border-radius: 999px; background: var(--c-teal); color: var(--on-teal); font-size: 12px; font-weight: 700; vertical-align: 1px; }
.pill-ok .icon { width: 14px; height: 14px; }
.twofa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--bg); }
.twofa-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--on-variant); }
.twofa-state.is-on { color: #0E7C70; }
.device-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.device-list li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--bg); }
.device-list span { display: grid; }
.device-list small { color: var(--on-variant); font-size: 13px; }
.acc-danger { border: 1px solid color-mix(in srgb, #C3134A 35%, transparent); background: color-mix(in srgb, #C3134A 4%, var(--surface-low)); }

/* ========================== PREFERITS ========================== */
.project-card { position: relative; --cover-h: 200px; }
@media (max-width: 420px) { .project-card { --cover-h: 176px; } }
/* El cor «sura» entre la portada i el text, com un botó flotant (no tapa la icona de la categoria) */
.project-card > .fav-form { position: absolute; top: calc(var(--cover-h) - 21px); right: 18px; z-index: 2; margin: 0; }
.project-card .card-title { padding-right: 44px; }
.fav-btn {
  display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: #C3134A; box-shadow: 0 4px 14px rgba(20, 10, 60, .18);
  transition: transform .15s;
}
.fav-btn:hover { transform: scale(1.06); }
.fav-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--primary); }
.fav-btn .icon { width: 22px; height: 22px; }
.fav-btn .fav-on, .fav-btn[aria-pressed="true"] .fav-off { display: none; }
.fav-btn[aria-pressed="true"] .fav-on { display: block; }
.fav-btn.pop { animation: fav-pop .35s ease-out; }
@keyframes fav-pop { 40% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .fav-btn.pop { animation: none; } }
.detail-fav { display: inline-flex; align-items: center; gap: 10px; color: var(--on-variant); font-size: 14px; }
.detail-fav .fav-form { position: static; }
.detail-fav .fav-btn { background: var(--surface-low); box-shadow: none; }

/* ========================== PREUS ========================== */
.card-price { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--on-variant); font-size: 13px; }
.card-price strong { color: var(--on-bg); font-size: 18px; font-weight: 900; }
.card-price.is-owned { color: #0E7C70; font-weight: 700; }
.card-price .icon { width: 18px; height: 18px; }
.price-box { display: grid; gap: 10px; margin: 18px 0 8px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface-low); }
.price-box .btn { justify-self: start; }
.price-amount { display: flex; align-items: baseline; gap: 8px; margin: 0; color: var(--on-variant); }
.price-amount strong { font-size: 34px; font-weight: 900; color: var(--on-bg); letter-spacing: -.02em; }
.price-text { margin: 0; color: var(--on-variant); font-size: 14px; max-width: 46ch; }
.price-owned { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: #0E7C70; }
.locked-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.locked-list li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 999px; background: var(--bg); color: var(--on-variant); font-size: 13px; }
.locked-list .icon { width: 16px; height: 16px; }

/* ========================== COMPRA ========================== */
.checkout-page { max-width: 1080px; }
.checkout { display: grid; gap: 20px; margin-top: 12px; }
@media (min-width: 900px) { .checkout { grid-template-columns: 5fr 6fr; align-items: start; gap: 28px; } }
.checkout-summary { overflow: hidden; border-radius: var(--r-xl); background: var(--surface-low); }
@media (min-width: 900px) { .checkout-summary { position: sticky; top: 92px; } }
.sum-body { display: grid; gap: 10px; padding: 20px 22px 24px; }
.sum-title { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.sum-text { margin: 0; color: var(--on-variant); font-size: 14px; line-height: 1.5; }
.sum-sub { margin: 6px 0 0; font-size: 14px; font-weight: 700; }
.sum-includes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sum-includes li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.sum-includes .icon { flex: none; width: 20px; height: 20px; color: var(--primary); }
.sum-price { margin: 8px 0 0; display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--outline-variant); }
.sum-price div { display: flex; justify-content: space-between; gap: 12px; color: var(--on-variant); font-variant-numeric: tabular-nums; }
.sum-price dd { margin: 0; }
.sum-price .sum-total { margin-top: 4px; color: var(--on-bg); font-size: 20px; font-weight: 900; }
.checkout-form { padding: 22px 20px; border-radius: var(--r-xl); background: var(--bg); border: 1px solid var(--outline-variant); }
@media (min-width: 600px) { .checkout-form { padding: 28px 32px; } }
.checkout-form .form { display: grid; gap: 6px; }
.checkout-step { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; font-size: 18px; font-weight: 700; }
.checkout-step:not(:first-of-type) { margin-top: 18px; }
.checkout-step span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 14px; }
.pay-methods { display: grid; gap: 10px; }
.pay-method { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--outline-variant); border-radius: 18px; cursor: pointer; background: var(--surface-low); }
.pay-method:hover { border-color: var(--outline); }
.pay-method:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--bg)); }
.pay-method input { width: 20px; height: 20px; accent-color: var(--primary); flex: none; }
.pay-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; flex: none; }
.pay-paypal { background: linear-gradient(135deg, #003087, #0070E0); }
.pay-stripe { background: linear-gradient(135deg, #635BFF, #8F6BFF); }
.pay-text { display: grid; gap: 1px; }
.pay-text small { color: var(--on-variant); font-size: 13px; }
.checkout-form .btn-block { margin-top: 14px; }
.secure-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; color: var(--on-variant); font-size: 13px; text-align: center; }
.secure-note .icon { width: 16px; height: 16px; }

/* ========================== COMPLEMENTS ========================== */
/* Detall del projecte: llista curta de complements disponibles */
.addon-mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.addon-mini-list li { display: flex; align-items: center; gap: 12px; }
.addon-mini-text { display: grid; min-width: 0; }
.addon-mini-text small { color: var(--on-variant); font-size: 13px; }

/* Pàgina de compra: triar complements i quantitat */
.addon-intro { margin: -2px 0 6px; color: var(--on-variant); font-size: 14px; }
.addon-picks { display: grid; gap: 10px; }
.addon-pick { border: 1px solid var(--outline-variant); border-radius: 18px; transition: border-color .15s, box-shadow .15s; }
.addon-pick.is-on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.addon-pick-main { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; font-weight: 400; cursor: pointer; }
.addon-pick-main input { flex: none; width: 20px; height: 20px; margin-top: 10px; accent-color: var(--primary); }
.addon-state { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--on-variant); font-size: 13px; }
.addon-state .icon { width: 16px; height: 16px; }
.addon-state.is-on { color: #0E7C70; font-weight: 500; }
.addon-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 16px 14px 48px; }
.addon-qty label { font-size: 14px; color: var(--on-variant); }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--outline-variant); border-radius: 999px; background: var(--bg); }
.qty-stepper .icon-btn { width: 40px; height: 40px; }
.qty-stepper input { width: 64px; min-height: 40px !important; padding: 0 !important; border: 0 !important; background: none !important; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.addon-qty-unit { font-weight: 700; }
.addon-pick .field-error { padding: 0 16px; }
.sum-lines { list-style: none; margin: 8px 0 0; padding: 12px 0 0; display: grid; gap: 8px; border-top: 1px solid var(--outline-variant); font-size: 14px; }
.sum-lines li { display: flex; justify-content: space-between; gap: 12px; }
.sum-lines small { color: var(--on-variant); }
.sum-lines strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sum-empty { color: var(--on-variant); font-style: italic; }

/* Àrea de client: llista de complements contractats */
.addon-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.addon-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: start; scroll-margin-top: 90px; }
.addon-row.is-soon { box-shadow: inset 0 0 0 2px var(--c-amber); }
.addon-row.is-past .addon-face { filter: grayscale(1); opacity: .6; }
.addon-row-body { display: grid; gap: 6px; min-width: 0; }
.addon-row-title { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; }
.addon-row-meta { margin: 0; color: var(--on-variant); font-size: 14px; }
.addon-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 6px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.addon-chip .icon { width: 15px; height: 15px; }
.addon-chip.is-on { background: var(--c-teal); color: var(--on-teal); }
.addon-chip.is-warn { background: var(--c-amber); color: var(--on-amber); }
.addon-chip.is-off { background: var(--surface-high); color: var(--on-variant); }
.addon-time { display: grid; gap: 6px; margin-top: 4px; }
.addon-time-text { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px; color: var(--on-variant); }
.addon-time-text strong { color: var(--on-bg); }
.addon-note { margin: 2px 0 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--on-variant); }
.addon-note .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.addon-note.is-warn { color: var(--on-amber); }
.addon-row-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
@media (min-width: 900px) { .addon-row { grid-template-columns: auto minmax(0, 1fr) auto; } .addon-row-actions { grid-column: auto; flex-direction: column; align-items: stretch; } }
.addon-offers { display: grid; gap: 14px; }
.addon-offer { display: grid; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--bg); }
.addon-offer .btn { justify-self: start; }
.addon-offer-title { margin: 0; font-size: 16px; font-weight: 700; }
.addon-dash-list { list-style: none; margin: 0 -10px; padding: 0; display: grid; }
.addon-dash-list a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; color: inherit; }
.addon-dash-list a:hover { background: var(--surface); }
.addon-dash-list small { color: var(--on-variant); font-weight: 400; margin-left: 4px; }

/* Detall del projecte: complements en pestanyes */
.addon-tabs { display: grid; gap: 10px; margin-top: 22px; }
.addon-tabs .subhead { display: flex; align-items: center; gap: 8px; }
.addon-tabs .subhead .icon { width: 22px; height: 22px; color: var(--primary); }
.addon-tabs-intro { margin: -4px 0 4px; color: var(--on-variant); font-size: 14px; line-height: 1.5; }
.addon-tablist { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: -4px; }
.addon-tablist::-webkit-scrollbar { display: none; }
.addon-tab { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 4px 16px 4px 6px; border: 1px solid var(--outline-variant);
  border-radius: 999px; background: none; color: var(--on-variant); font: inherit; font-weight: 500; cursor: pointer; transition: background-color .15s, border-color .15s; }
.addon-tab:hover { background: var(--surface-low); color: var(--on-bg); }
.addon-tab[aria-selected="true"] { border-color: transparent; background: var(--secondary-container); color: var(--on-secondary-container); font-weight: 700; }
.addon-face-sm { width: 32px; height: 32px; border-radius: 50%; }
.addon-face-sm .icon, .addon-face-sm .cat-img { width: 18px; height: 18px; }
.addon-panel { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface-low); outline-offset: 3px; }
.addon-panel-body { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.addon-panel-title { margin: 0; font-size: 19px; font-weight: 700; }
.addon-panel-desc { margin: 0; color: var(--on-variant); line-height: 1.5; }
.addon-panel-price { margin: 0; color: var(--on-variant); font-size: 14px; }
.addon-panel-price strong { color: var(--on-bg); font-size: 20px; font-weight: 900; }
.addon-panel .addon-state { margin: 0; }

/* ========================== CONTRACTA A ALEXMF ========================== */
.hire-page { max-width: 1180px; }
.hire-intro { margin: -4px 0 22px; max-width: 70ch; color: var(--on-variant); font-size: 17px; line-height: 1.55; }
.hire-layout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1000px) { .hire-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 32px; } .hire-summary { position: sticky; top: 96px; } }
.acc-area .hire-summary { top: 24px; }
.hire-main { display: grid; gap: 28px; min-width: 0; }
.hire-section { display: grid; gap: 12px; min-width: 0; }
.hire-section .checkout-step { margin: 0; font-size: 22px; }
.hire-note { margin: -4px 0 0; color: var(--on-variant); font-size: 14px; }

.hire-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--outline-variant); }
.hire-tabs::-webkit-scrollbar { display: none; }
.hire-tab { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 48px; padding: 0 20px; margin-bottom: -1px; border: 0;
  border-bottom: 3px solid transparent; background: none; color: var(--on-variant); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.hire-tab .icon, .hire-tab .cat-img { width: 20px; height: 20px; }
.hire-tab:hover { color: var(--on-bg); background: var(--surface-low); border-radius: 12px 12px 0 0; }
.hire-tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }
.hire-tab-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-high);
  color: var(--on-variant); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hire-tab[aria-selected="true"] .hire-tab-count { background: var(--primary-container); color: var(--primary); }
/* Moltes categories: a l'ordinador les pestanyes passen a una segona fila; al mòbil es llisquen */
@media (min-width: 760px) { .hire-tabs { flex-wrap: wrap; overflow: visible; } }
.hire-panel { display: grid; gap: 14px; }
.hire-panel[hidden] { display: none; }
.hire-more { justify-self: center; }
.hire-more .icon { transition: transform .15s; }
.hire-more.is-open .icon { transform: rotate(180deg); }
.hire-card[hidden] { display: none; }

.hire-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr)); gap: 14px; padding-top: 4px; }
.hire-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 10px; padding: 20px 16px 16px; border: 1px solid var(--outline-variant);
  border-radius: 16px; background: var(--bg); text-align: center; font-weight: 400; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.hire-card:hover { border-color: var(--outline); }
.hire-card.is-on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.hire-radio { position: absolute; top: 14px; left: 14px; width: 20px; height: 20px; margin: 0; accent-color: var(--primary); }
.hire-logo { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; color: #fff; box-shadow: 0 2px 8px rgba(30, 10, 80, .12); }
.hire-logo img { width: 100%; height: 100%; object-fit: cover; }
.hire-logo .icon, .hire-logo .cat-img { width: 28px; height: 28px; }
.hire-card-name { font-size: 16px; line-height: 1.3; }
.hire-card-desc { color: var(--on-variant); font-size: 13px; line-height: 1.4; }
.hire-select { width: 100%; }
.hire-select select { width: 100%; min-height: 44px; }
.hire-once { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--c-teal); color: var(--on-teal); font-size: 13px; font-weight: 600; }
.hire-once .icon { width: 16px; height: 16px; }

/* Desplegable amb preu (select[data-dd]): public/css/dropdown.css */
.hire-price { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hire-card .field-error { margin: 0; }
.hire-card .field-error:empty { display: none; }
/* Mòbil: targetes en fila (logo a l'esquerra), molt més baixes quan n'hi ha moltes */
@media (max-width: 640px) {
  .hire-cards { gap: 10px; }
  .hire-card { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "logo name price" "logo desc desc" "sel sel sel" "err err err";
    justify-items: start; align-items: center; gap: 4px 12px; padding: 14px 14px 14px 46px; text-align: left; }
  .hire-radio { top: 50%; left: 14px; margin-top: -10px; }
  .hire-card:has(.hire-select) .hire-radio { top: 26px; margin-top: 0; }
  .hire-logo { grid-area: logo; width: 44px; height: 44px; align-self: start; }
  .hire-logo .icon, .hire-logo .cat-img { width: 22px; height: 22px; }
  .hire-card-name { grid-area: name; font-size: 15px; }
  .hire-card-desc { grid-area: desc; }
  .hire-price { grid-area: price; justify-self: end; font-size: 15px; white-space: nowrap; }
  .hire-select { grid-area: sel; margin-top: 8px; }
  .hire-once { grid-area: sel; margin-top: 4px; }
  .hire-card .field-error { grid-area: err; }
  .hire-card-addon .hire-price { font-size: 13px; color: var(--on-variant); }
}
/* Mòbil: total i bestreta sempre a la vista mentre tries */
.hire-mini { position: sticky; z-index: 20; bottom: calc(var(--nav-h, 0px) + 10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 16px;
  padding: 10px 14px 10px 18px; border-radius: 16px; background: var(--primary); color: var(--on-primary); text-decoration: none;
  box-shadow: 0 8px 24px -8px rgba(40, 20, 120, .5); }
.hire-mini[hidden] { display: none; }
.hire-mini span { display: grid; line-height: 1.2; }
.hire-mini small { font-size: 12px; opacity: .85; }
.hire-mini strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.hire-mini-now { margin-left: auto; text-align: right; }
.hire-mini .icon { width: 22px; height: 22px; fill: currentColor; }
@media (min-width: 1000px) { .hire-mini { display: none !important; } }
.acc-area .hire-mini { bottom: calc(10px + env(safe-area-inset-bottom)); }
.hire-guest { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--surface-low); color: var(--on-variant); }
.hire-guest .icon { flex: none; width: 22px; height: 22px; color: var(--primary); }
.hire-guest p { margin: 0; line-height: 1.5; }
.hire-empty { margin-top: 12px; }

.hire-summary { padding: 20px 22px; border-radius: var(--r-xl); background: var(--surface-low); }
.hire-summary-title { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.hire-sum { display: grid; gap: 8px; margin: 0; font-size: 14px; }
.hire-sum > div { display: flex; justify-content: space-between; gap: 12px; }
.hire-sum dt { color: var(--on-variant); min-width: 0; }
.hire-sum dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hire-sum-project dt { color: var(--on-bg); font-weight: 700; }
.hire-sum-addons-title { margin-top: 4px; }
.hire-sum-addons-title dt { font-size: 12px; font-weight: 700; color: var(--on-variant); }
.hire-sum-addon dt { padding-left: 12px; }
.hire-sum-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--outline-variant); }
.hire-sum-total dt, .hire-sum-total dd { color: var(--on-bg); font-weight: 700; }
.hire-sum-now { padding: 10px 12px; border-radius: 12px; background: var(--primary-container); }
.hire-sum-now dt, .hire-sum-now dd { color: var(--on-primary-container, var(--primary)); font-weight: 900; font-size: 16px; }
.hire-sum-note { margin: 12px 0 0; color: var(--on-variant); font-size: 13px; line-height: 1.5; }

/* Renovar un complement */
.renew-form { display: grid; gap: 8px; max-width: 640px; }
.renew-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.renew-head .field { flex: 1 1 200px; margin: 0; }
.renew-total { display: grid; margin: 0; text-align: right; }
.renew-total strong { font-size: 24px; font-weight: 900; }
.renew-total span { color: var(--on-variant); font-size: 13px; }

/* Contractes a l'àrea de client */
.addon-chip.is-info { background: var(--secondary-container); color: var(--on-secondary-container); }
.hire-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hire-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; color: inherit; transition: background-color .15s; }
.hire-item:hover { background: var(--surface); }
.hire-item-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.hire-item-number { color: var(--on-variant); font-size: 13px; font-variant-numeric: tabular-nums; }
.hire-item-title { font-size: 18px; }
.hire-item-meta { color: var(--on-variant); font-size: 14px; }
.hire-item-side { display: grid; justify-items: end; gap: 6px; }
.hire-item-side strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.adm-sub .addon-chip { margin-left: 6px; vertical-align: 1px; }

.hire-steps { list-style: none; margin: 0 0 18px; padding: 16px 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; border-radius: 22px; background: var(--surface-low); counter-reset: s; }
.hire-steps li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--on-variant); }
.hire-steps li::before { content: ""; position: absolute; top: 15px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 2px; background: var(--outline-variant); }
.hire-steps li:first-child::before { display: none; }
.hire-steps li.is-done::before { background: var(--primary); }
.hire-step-dot { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--outline-variant); background: var(--bg); font-weight: 700; font-size: 14px; }
.hire-steps .is-done .hire-step-dot { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.hire-steps .is-done .hire-step-dot .icon { width: 18px; height: 18px; }
.hire-steps .is-next .hire-step-dot { border-color: var(--primary); color: var(--primary); }
.hire-step-text { display: grid; font-size: 13px; }
.hire-step-text strong { color: var(--on-bg); font-size: 13px; }
.hire-steps .is-done .hire-step-text strong, .hire-steps [aria-current] .hire-step-text strong { color: var(--primary); }
@media (max-width: 560px) { .hire-step-text small { display: none; } .hire-step-text strong { font-size: 11px; } }
.hire-pay { margin-bottom: 16px; border: 2px solid var(--primary); }
.hire-pay .form { display: grid; gap: 6px; }
.hire-detail-base { margin: 0; line-height: 1.5; }
.hire-detail-addons { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.hire-detail-addons li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.hire-detail-addons .icon { width: 18px; height: 18px; color: var(--primary); }
.hire-brief { margin: 0; line-height: 1.6; color: var(--on-bg); white-space: normal; overflow-wrap: anywhere; }
.hire-amounts { display: grid; gap: 8px; margin: 0; font-size: 14px; }
.hire-amounts > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hire-amounts dd { margin: 0; display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hire-amounts .is-sub dt { padding-left: 12px; color: var(--on-variant); }
.hire-amounts small { color: var(--on-variant); }
.hire-amounts .is-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--outline-variant); font-weight: 700; font-size: 16px; }

/* ---------- «Contracta»: editor, fitxers adjunts i esborrany ---------- */
.hire-section .tox-tinymce { border: 1px solid var(--outline); border-radius: 12px; }
.hire-section .tox-tinymce.is-invalid { border-color: #D3164E; box-shadow: 0 0 0 1px #D3164E; }
.field-optional { margin-left: 4px; color: var(--on-variant); font-size: 13px; font-weight: 400; }
.hire-files { display: grid; gap: 8px; }
.hire-drop .dropzone-area { padding: 18px; }
.hire-files.is-full .hire-drop { opacity: .55; pointer-events: none; }
.hire-file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hire-file-list:empty { display: none; }
.hire-file { display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 14px; border: 1px solid var(--outline-variant); border-radius: 14px; background: var(--bg); }
.hire-file-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--primary-container); color: var(--primary); }
.hire-file-icon .icon { width: 20px; height: 20px; }
.hire-file-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.hire-file-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.hire-file-main small { color: var(--on-variant); font-size: 12px; font-variant-numeric: tabular-nums; }
.hire-file-bar { display: block; height: 4px; margin-top: 4px; border-radius: 999px; background: var(--surface-high); overflow: hidden; }
.hire-file-bar > span { display: block; width: 0; height: 100%; background: var(--primary); transition: width .2s; }
.hire-file.is-done .hire-file-bar { display: none; }
.hire-draft-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 4px; padding: 14px 16px;
  border: 1px dashed var(--outline); border-radius: 16px; }
.hire-draft-box p { margin: 0; flex: 1 1 260px; color: var(--on-variant); font-size: 14px; line-height: 1.5; }
.hire-draft-box .btn.is-busy { opacity: .7; }
.hire-draft-banner { margin-bottom: 16px; }
.hire-brief.rich-text > :first-child { margin-top: 0; }
.hire-card.is-unavailable { display: none !important; }

/* Cupó de descompte (pas de pagament) */
.coupon-box { margin: 4px 0 2px; border: 1px dashed var(--outline-variant); border-radius: 14px; padding: 10px 14px; background: var(--bg); }
.coupon-box > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; color: var(--primary); list-style: none; min-height: 28px; }
.coupon-box > summary::-webkit-details-marker { display: none; }
.coupon-box > summary .icon { width: 18px; height: 18px; }
.coupon-row { display: flex; gap: 8px; margin-top: 10px; }
.coupon-row[hidden] { display: none; }
.coupon-row input { flex: 1; min-width: 0; min-height: 44px; text-transform: uppercase; letter-spacing: .04em; }
.coupon-applied { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--c-teal); color: var(--on-teal); }
.coupon-applied[hidden] { display: none; }
.coupon-applied .icon { width: 18px; height: 18px; }
.coupon-applied strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.coupon-applied .btn-text { color: var(--on-teal); min-height: 32px; padding: 0 8px; }
.coupon-box .field-error:empty { display: none; }