/* =========================================================
   Previsió d'ingressos per casa — reutilitza tabs/targetes/graella
   d'ocupacio.css (mateix aspecte visual), només afegeix el banner
   de total i la pastilla d'ingrés estimat a cada targeta.
   ========================================================= */

.cprev-total-banner{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;background:var(--verd-clar);border:1px solid var(--verd-mig);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.cprev-total-xifra{font-size:22px;font-weight:800;color:var(--verd-fort)}
.cprev-total-etiqueta{font-size:12px;font-weight:600;color:var(--gris)}
.cprev-total-avis{width:100%;font-size:11px;font-weight:600;color:#b26a00;margin-top:2px}

.cprev-mes-total{float:right;font-weight:800;color:var(--verd-fort);text-transform:none;letter-spacing:0}

.cprev-ingres-pill{margin-top:4px;font-size:12px;font-weight:700;color:var(--verd-fort);background:var(--verd-clar);border-radius:8px;padding:5px 9px;display:inline-block;width:fit-content}
.cprev-ingres-pill.cprev-ingres-buit{color:#b26a00;background:#fff6e5}

.cprev-ingres-fila{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.cprev-ingres-fila .cprev-ingres-pill{margin-top:0}
.cprev-comanda{font-size:11px;font-weight:700;color:var(--gris);text-decoration:none;border-bottom:1px dashed var(--linia)}
.cprev-comanda:hover{color:var(--verd-fort);border-bottom-color:var(--verd-mig)}
.cprev-compartida{font-size:10.5px;font-weight:600;color:var(--gris);margin-top:3px}

@media(max-width:640px){
  .cprev-total-xifra{font-size:19px}
  .cprev-total-banner{padding:12px 14px}
  .cprev-filtres{gap:8px}
  .cprev-select-mes{padding:7px 10px;font-size:11.5px;width:100%}
}

.cprev-filtres{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.cprev-select-mes{padding:8px 12px;border-radius:20px;font-size:12.5px;font-weight:700;background:#fbfcfb;border:1px solid var(--linia);color:var(--tinta)}
.cprev-select-mes:focus{border-color:var(--verd-mig);outline:none}

/* =========================================================
   Vista Estades / Estadístiques
   ========================================================= */
.cprev-vista{display:inline-flex;background:var(--fons);border:1px solid var(--linia);border-radius:12px;padding:3px;margin-bottom:16px}
.cprev-vista-bt{border:0;background:transparent;padding:7px 16px;border-radius:9px;font:inherit;font-size:12.5px;font-weight:700;color:var(--gris);cursor:pointer}
.cprev-vista-bt.on{background:var(--card);color:var(--tinta);box-shadow:0 1px 3px rgba(24,36,32,.1)}
.cprev-vista-bt:focus-visible{outline:2px solid var(--verd-mig);outline-offset:1px}

/* Indicadors: una franja amb separadors, no quatre targetes iguals */
.cstat-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border:1px solid var(--linia);border-radius:14px;margin-bottom:22px;overflow:hidden}
.cstat-kpi{padding:14px 16px;border-right:1px solid var(--linia)}
.cstat-kpi:last-child{border-right:0}
.cstat-kpi-principal{background:var(--verd-clar)}
.cstat-kpi-titol{font-size:12px;font-weight:600;color:var(--gris)}
.cstat-kpi-valor{font-size:21px;font-weight:800;color:var(--tinta);margin:4px 0 2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.cstat-kpi-principal .cstat-kpi-valor{color:var(--verd-fort);font-size:24px}
.cstat-kpi-comp{font-size:11.5px;color:var(--gris-clar)}

.cstat-var{font-size:11px;font-weight:800;padding:2px 7px;border-radius:20px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cstat-var-puja{color:var(--verd-fort);background:#dcefdd}
.cstat-var-baixa{color:var(--vermell);background:var(--vermell-clar)}
.cstat-var-igual{color:var(--gris);background:var(--fons)}
.cstat-var-nou{color:var(--blau-fort);background:var(--blau-clar)}

.cstat-bloc{margin-bottom:26px;min-width:0}
.cstat-bloc-cap{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.cstat-bloc-cap h3{font-size:15px;font-weight:800;color:var(--tinta);margin:0}
.cstat-nota{font-size:12px;color:var(--gris);margin:0 0 10px;max-width:70ch;line-height:1.5}

.cstat-metriques{display:flex;gap:4px;flex-wrap:wrap}
.cstat-metrica{border:1px solid var(--linia);background:#fbfcfb;border-radius:20px;padding:5px 11px;font:inherit;font-size:11.5px;font-weight:700;color:var(--gris);cursor:pointer}
.cstat-metrica:hover{border-color:var(--verd-mig);color:var(--verd-fort)}
.cstat-metrica.on{background:var(--tinta);border-color:var(--tinta);color:#fff}

.cstat-llegenda{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--gris);margin-bottom:6px}
.cstat-llegenda span{display:inline-flex;align-items:center;gap:6px}
.cstat-llegenda i{display:inline-block;width:12px;height:12px;border-radius:3px}
.cstat-ll-n{background:var(--verd-fort)}
.cstat-ll-futur{background:repeating-linear-gradient(45deg,var(--verd-mig) 0 2px,var(--verd-clar) 2px 5px)}
.cstat-ll-a{background:#e4e8e6;border:1.5px dashed #a9b3ae}

.cstat-graf{width:100%;overflow:hidden}
.cstat-graf svg{display:block;width:100%;height:auto}
.cstat-eix-linia{stroke:var(--linia);stroke-width:1}
.cstat-eix-text{font-size:10.5px;fill:var(--gris-clar);font-family:inherit;font-variant-numeric:tabular-nums}
.cstat-eix-sel{fill:var(--tinta);font-weight:800}
.cstat-sel-fons{fill:var(--fons)}
.cstat-barra-a-svg{fill:#e4e8e6;stroke:#a9b3ae;stroke-width:1.2;stroke-dasharray:3 2}
.cstat-barra-n{fill:var(--verd-fort)}
.cstat-barra-futur{fill:url(#cstat-ratlles);stroke:var(--verd-mig);stroke-width:1}
.cstat-zona{cursor:pointer;outline:none}
.cstat-zona:focus-visible{stroke:var(--verd-mig);stroke-width:2}

.cstat-linia-n{fill:none;stroke:var(--verd-fort);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.cstat-linia-futur{fill:none;stroke:var(--verd-mig);stroke-width:2;stroke-dasharray:5 4;stroke-linejoin:round}
.cstat-linia-a{fill:none;stroke:#a9b3ae;stroke-width:2;stroke-linejoin:round}
.cstat-punt-n{fill:var(--verd-fort);stroke:#fff;stroke-width:2}
.cstat-punt-a{fill:#a9b3ae;stroke:#fff;stroke-width:2}

.cstat-detall{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;font-size:12.5px;color:var(--tinta);background:var(--fons);border-radius:10px;padding:9px 12px;margin-top:6px;min-height:38px}
.cstat-detall b{font-variant-numeric:tabular-nums}
.cstat-detall-a{color:var(--gris)}
.cstat-detall-extra{color:var(--gris-clar);font-size:11.5px}

.cstat-dues{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 28px}

.cstat-cases{display:flex;flex-direction:column;gap:14px}
.cstat-casa-cap,.cstat-client-cap{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:5px}
.cstat-casa-nom,.cstat-client-nom{font-weight:700;color:var(--tinta);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cstat-casa-xifra,.cstat-client-xifra{font-weight:800;color:var(--verd-fort);font-variant-numeric:tabular-nums;white-space:nowrap}
.cstat-barra{height:9px;background:var(--fons);border-radius:5px;overflow:hidden}
.cstat-barra i{display:block;height:100%;background:var(--verd-fort);border-radius:5px}
.cstat-barra-a{height:5px;margin-top:3px}
.cstat-barra-a i{background:#b9c2bd}
.cstat-barra-fina{height:6px}
.cstat-barra-fina i{background:var(--verd-mig)}
.cstat-casa-peu,.cstat-client-peu{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--gris-clar);margin-top:5px}

.cstat-clients{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}

@media(max-width:640px){
  .cstat-kpis{grid-template-columns:1fr 1fr}
  .cstat-kpi{border-right:0;border-bottom:1px solid var(--linia);padding:12px 13px}
  .cstat-kpi:nth-child(odd){border-right:1px solid var(--linia)}
  .cstat-kpi-valor{font-size:17px}
  .cstat-kpi-principal .cstat-kpi-valor{font-size:19px}
  .cprev-vista{width:100%}
  .cprev-vista-bt{flex:1}
}
@media (prefers-reduced-motion:no-preference){
  .cstat-barra i{transition:width .4s ease}
}

/* Fitxes de la previsió sense vora (a Ocupació la franja esquerra
   indica l'estat; aquí no aporta res). Només en queda l'ombra. */
#cprev-llista .ocup-card{border:0}

/* ---------- Responsive (repàs mòbil) ---------- */
@media(max-width:640px){
  /* Pestanyes de cases i mètriques en una sola fila lliscant, en lloc
     de saltar a dues línies i empènyer el contingut avall */
  #cprev-tabs,#cstat-tabs,.cstat-metriques{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%}
  #cprev-tabs::-webkit-scrollbar,#cstat-tabs::-webkit-scrollbar,.cstat-metriques::-webkit-scrollbar{display:none}
  #cprev-tabs .ocup-tab,#cstat-tabs .ocup-tab,.cstat-metrica{flex-shrink:0;white-space:nowrap}
  .cstat-bloc-cap{flex-direction:column;align-items:stretch}

  /* <16px en un <select> fa que l'iPhone amplii la pàgina en tocar-lo */
  .cprev-select-mes{font-size:16px;padding:8px 12px}

  .cprev-total-etiqueta{width:100%}
  .cprev-ingres-fila{gap:6px 10px}
  .cstat-detall{font-size:12px;padding:9px 11px}
  .cstat-kpi-titol{font-size:11.5px}
}

/* =========================================================
   Cobraments (28/09/2026)
   Colors: cobrat = verd de sempre · per cobrar d'estades per fer =
   ambre (encara és normal) · per cobrar d'estades ja fetes = vermell
   (cal reclamar-ho).
   ========================================================= */

/* --- Llistat: banner amb el pendent --- */
.cprev-total-principal{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;width:100%}
.cprev-total-progres{width:100%;height:8px;border-radius:5px;background:#fff6e5;box-shadow:inset 0 0 0 1px rgba(178,106,0,.18);overflow:hidden;margin:4px 0 2px}
.cprev-total-progres i{display:block;height:100%;background:var(--verd-fort);border-radius:5px}
.cprev-total-desglos{display:flex;gap:4px 16px;flex-wrap:wrap;width:100%;font-size:12px;color:var(--gris)}
.cprev-total-desglos b{color:var(--tinta);font-variant-numeric:tabular-nums}
.cprev-total-sensiva{color:var(--gris-clar)}
.cprev-mes-total small{font-size:10px;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:.04em;margin-right:3px}

/* --- Llistat: cada estada --- */
.cprev-ingres-pill.cprev-ingres-cobrat{color:var(--gris);background:var(--fons)}
.cprev-cobr{margin-top:7px}
.cprev-cobr-barra{height:5px;border-radius:3px;background:#fff6e5;box-shadow:inset 0 0 0 1px rgba(178,106,0,.15);overflow:hidden}
.cprev-cobr-barra i{display:block;height:100%;background:var(--verd-mig);border-radius:3px}
.cprev-cobr-text{font-size:11px;color:var(--gris);margin-top:4px;font-variant-numeric:tabular-nums}
.cprev-bestreta-pendent{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:11px;font-weight:700;color:#b26a00;background:#fff6e5;border-radius:6px;padding:3px 8px;width:fit-content}

/* --- Estadístiques: separadors de grup (Vendes / Cobraments) --- */
.cstat-grup{margin:6px 0 14px;padding-top:4px}
.cstat-grup + .cstat-kpis{margin-top:0}
.cstat-grup-titol{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--gris);margin:0;display:flex;align-items:center;gap:10px}
.cstat-grup-titol::after{content:"";flex:1;height:1px;background:var(--linia)}
.cstat-grup-sub{font-size:12px;color:var(--gris-clar);margin:4px 0 0}
/* El segon grup es separa més del contingut anterior */
.cstat-nota + .cstat-grup,.cstat-dues + .cstat-grup{margin-top:34px}

.cstat-kpi-alerta .cstat-kpi-valor{color:var(--vermell)}
.cstat-kpi-alerta{background:var(--vermell-clar)}

/* --- Barra apilada cobrat / per cobrar --- */
.cstat-cobr-barra{display:flex;height:14px;border-radius:7px;background:var(--fons);overflow:hidden}
.cstat-cobr-barra i{display:block;height:100%}
.cstat-cobr-cobrat{background:var(--verd-fort)}
.cstat-cobr-passat{background:var(--vermell)}
.cstat-cobr-percobrar{background:#e7a93a}
.cstat-cobr-peu{display:flex;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;font-size:12px;color:var(--gris);margin-top:7px;font-variant-numeric:tabular-nums}
.cstat-cobr-peu b{color:var(--tinta)}

.cstat-ll-cobrat{background:var(--verd-fort)}
.cstat-ll-passat{background:var(--vermell)}
.cstat-ll-percobrar{background:#e7a93a}
.cstat-svg-cobrat{fill:var(--verd-fort)}
.cstat-svg-passat{fill:var(--vermell)}
.cstat-svg-percobrar{fill:#e7a93a}
.cstat-detall-alerta{color:var(--vermell);font-weight:700}

.cstat-casa-pendent{font-size:11.5px;font-weight:700;color:#b26a00;margin-top:3px;font-variant-numeric:tabular-nums}

/* --- Bestretes per cobrar --- */
.cstat-bp-total{font-size:12.5px;color:var(--gris);margin-bottom:10px}
.cstat-bp-total b{color:#b26a00;font-variant-numeric:tabular-nums}
.cstat-bp{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.cstat-bp li{border:1px solid var(--linia);border-radius:10px;padding:10px 12px;background:#fff;min-width:0}
.cstat-bp li.cstat-bp-urgent{border-color:#f0c77a;background:#fffaf0}
.cstat-bp-cap{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cstat-bp-nom{font-size:13px;font-weight:700;color:var(--tinta);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cstat-bp-falta{font-size:13px;font-weight:800;color:#b26a00;white-space:nowrap;font-variant-numeric:tabular-nums}
.cstat-bp-peu{display:flex;justify-content:space-between;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:11.5px;color:var(--gris-clar);margin-top:4px}
.cstat-bp-urgent .cstat-bp-quan{color:#b26a00;font-weight:700}
.cstat-bp-mes{font-size:12px;color:var(--gris);margin-top:8px}
.cstat-bp-buit{font-size:12.5px;color:var(--verd-fort);background:var(--verd-clar);border-radius:10px;padding:10px 12px}

@media(max-width:640px){
  .cprev-total-desglos{font-size:11.5px}
  .cstat-bp{grid-template-columns:1fr}
  .cstat-cobr-barra{height:12px}
  /* 5 indicadors de cobrament: el principal ocupa tota la fila i els
     altres quatre queden en dues files de dos */
  .cstat-kpis-cobr .cstat-kpi-principal{grid-column:1 / -1}
  .cstat-kpis-cobr .cstat-kpi:nth-child(odd){border-right:0}
  .cstat-kpis-cobr .cstat-kpi:nth-child(even){border-right:1px solid var(--linia)}
}