/* =========================================================
   recursos.css — Mòdul "Cotxe i material"
   Parteix de base.css (variables, .mod-card, .overlay/.modal, .buit).
   Mòbil primer: botons grans (≥44px) perquè es fa servir al carrer.

   Tauler de 4 columnes:
     [ targeta blava 1/4 ][ reserves (2/4)      ][ ubicació 1/4 ]
     [ (ocupa 2 files)    ][ benzina 1/4 ][ historial 2/4       ]
   ========================================================= */

#seccio-recursos [hidden], #overlay-recursos [hidden]{display:none!important}

/* ---------- Selector (només si hi ha més d'un recurs) ---------- */
.rec-selector{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:14px;padding-bottom:2px}
.rec-selector::-webkit-scrollbar{display:none}
.rec-xip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--linia-forta);border-radius:999px;background:#fbfcfb;font-weight:600;font-size:12.5px;white-space:nowrap}
.rec-xip:hover{border-color:var(--verd-mig)}
.rec-xip.on{background:var(--tinta);border-color:var(--tinta);color:#fff}

.rec-punt{width:9px;height:9px;border-radius:50%;flex-shrink:0;display:inline-block}
.rec-punt-disponible{background:var(--verd-mig)}
.rec-punt-meu{background:var(--blau-fort)}
.rec-punt-ocupat{background:var(--taronja)}
.rec-punt-manteniment{background:var(--gris-clar)}

/* ---------- Tauler ---------- */
.rec-tauler{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.rec-tauler > .c2{grid-column:span 2}
.rec-tauler > .c3{grid-column:span 3}

/* ---------- Targeta blava (el cotxe) ---------- */
.rec-blau{grid-row:span 2;background:linear-gradient(160deg,var(--rec-c1,#1E6FD9) 0%,var(--rec-c2,#0D47A1) 100%);color:#fff;border-radius:var(--radi);padding:18px;display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 22px var(--rec-sombra,rgba(21,101,192,.28));min-width:0}
/* Imatge de fons del cotxe (només vehicles). La foto viu al servidor:
   uploads/icons/cotxe.jpg (no és al repo). Si no hi és, es veu el blau sol.
   --rec-fons-opacitat: com més alt, més es veu el cotxe.
   mix-blend-mode:multiply fa desaparèixer el blanc de la foto (només queden les línies fosques). */
.rec-blau-cotxe{--rec-fons-opacitat:.5;position:relative;overflow:hidden;isolation:isolate}
.rec-blau-cotxe::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('/uploads/icons/cotxe.jpg') center/60% no-repeat;opacity:var(--rec-fons-opacitat);
  mix-blend-mode:multiply}
.rec-blau-cotxe .rec-blau-nom,.rec-blau-cotxe .rec-blau-etiqueta,.rec-blau-cotxe .rec-blau-linia{text-shadow:0 1px 3px rgba(0,0,0,.3)}

.rec-blau-cap{display:flex;align-items:center;gap:12px;min-width:0}
.rec-blau-ico{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex-shrink:0}
.rec-blau-nom{font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:1.15;overflow-wrap:anywhere}
.rec-blau-sub{font-size:12px;opacity:.8;margin-top:2px}
.rec-matricula{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.6px;padding:1px 7px;border:1.5px solid rgba(255,255,255,.75);border-radius:6px;font-variant-numeric:tabular-nums;margin-right:6px}

.rec-blau-estat{display:flex;flex-direction:column;gap:6px;flex:1 1 auto}   /* empeny la reserva i els botons sempre a baix de tot */
.rec-blau-etiqueta{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:800;letter-spacing:-.3px}
.rec-blau .rec-punt{width:11px;height:11px;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.rec-blau .rec-punt-disponible{background:#69F0AE}
.rec-blau .rec-punt-ocupat{background:#FFB74D}
.rec-blau .rec-punt-meu{background:#fff}
.rec-blau-linia{font-size:13.5px;line-height:1.35;opacity:.95;overflow-wrap:anywhere}
.rec-blau-linia strong{font-weight:800}
.rec-blau-petit{font-size:12px;opacity:.8}
.rec-blau-enllac{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:2px;padding:8px 12px;border-radius:var(--radi-petit);background:rgba(255,255,255,.16);color:#fff;font-weight:700;font-size:13px;text-decoration:none}
.rec-blau-enllac:hover{background:rgba(255,255,255,.28)}
.rec-blau-reserva{padding:10px 12px;border-radius:var(--radi-petit);background:rgba(0,0,0,.18);font-size:12.5px;line-height:1.35}
.rec-blau-accions{display:flex;flex-direction:column;gap:8px}

/* Indicador de gasolina (5 barres) */
.rec-gas{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700}
.rec-gas-barres{display:inline-flex;gap:3px}
.rec-gas-b{width:15px;height:9px;border-radius:3px;background:rgba(255,255,255,.25)}
.rec-gas-b.on{background:#fff}
.rec-gas-n0 .rec-gas-b.on{background:#FF8A80}
.rec-gas-n1 .rec-gas-b.on{background:#FFD180}
.rec-gas-ico{opacity:.9}

/* ---------- Botons ---------- */
.rec-bt{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 15px;border-radius:var(--radi-petit);font-weight:700;font-size:13px;text-decoration:none;border:1px solid transparent}
.rec-bt:disabled{opacity:.6;cursor:default}
.rec-bt-gran{min-height:48px;padding:12px 22px;font-size:15px}
.rec-bt-pri{background:var(--verd-fort);color:#fff}
.rec-bt-pri:hover:not(:disabled){background:#276a2b;box-shadow:var(--ombra-hover);transform:translateY(-1px)}
.rec-bt-retorn{background:var(--blau-fort);color:#fff}
.rec-bt-retorn:hover:not(:disabled){background:#10549f;box-shadow:var(--ombra-hover);transform:translateY(-1px)}
.rec-bt-sec{background:#fff;border-color:var(--linia-forta);color:var(--tinta)}
.rec-bt-sec:hover:not(:disabled){border-color:var(--verd-mig);background:var(--verd-clar);color:var(--verd-fort)}
.rec-bt-terciari{color:var(--gris)}
/* Botons sobre la targeta blava */
.rec-bt-blanc{background:#fff;color:var(--rec-c2,#0D47A1)}
.rec-bt-blanc:hover:not(:disabled){box-shadow:0 6px 16px rgba(0,0,0,.22);transform:translateY(-1px)}
.rec-bt-fantasma{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35)}
.rec-bt-fantasma:hover:not(:disabled){background:rgba(255,255,255,.26)}
.rec-blau .rec-bt{width:100%}

/* ---------- Targetes normals ---------- */
.rec-card{border:1px solid var(--linia);border-radius:var(--radi);padding:16px;background:var(--card);display:flex;flex-direction:column;gap:10px;min-width:0}
.rec-card-tit{display:flex;align-items:center;gap:7px;font-weight:800;font-size:13.5px}
.rec-card-subtit{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--gris);margin-top:6px}
.rec-meta{font-size:12px;color:var(--gris)}
.rec-buit-petit{font-size:12.5px;color:var(--gris-clar)}
.rec-ubic-nota{font-size:15px;font-weight:700}
.rec-avis-antiga{color:var(--taronja);font-weight:600}

.rec-desar-ubic{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid var(--linia)}
.rec-desar-ubic input[type="text"],
.rec-form-fuel input[type="text"],
.rec-form-modal input[type="text"],
.rec-form-modal input[type="date"],
.rec-form-modal input[type="time"]{width:100%;padding:11px 12px;border:1px solid var(--linia-forta);border-radius:var(--radi-petit);font-size:16px;background:#fff;min-height:46px}
/* 16px als camps: evita que l'iPhone faci zoom en tocar-los */

.rec-xips-kit{display:flex;flex-wrap:wrap;gap:6px}
.rec-kit{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--fons);font-weight:600}

.rec-llista{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.rec-llista li{padding-bottom:6px;border-bottom:1px dashed var(--linia)}
.rec-llista li:last-child{border-bottom:none;padding-bottom:0}

/* ---------- Selector de gasolina (com les estrelles d'una valoració) ---------- */
.rec-estrelles{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rec-estrella{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border-radius:var(--radi-petit);border:1px solid var(--linia-forta);background:#fff;min-height:58px}
.rec-est-ico{color:var(--linia-forta);display:block}
.rec-est-txt{font-size:11px;font-weight:700;color:var(--gris)}
.rec-estrella.on{border-color:transparent;background:var(--verd-clar)}
.rec-estrella.on .rec-est-ico{color:var(--verd-mig)}
.rec-estrelles[data-to="0"] .rec-estrella.on{background:var(--vermell-clar)}
.rec-estrelles[data-to="0"] .rec-estrella.on .rec-est-ico{color:var(--vermell)}
.rec-estrelles[data-to="1"] .rec-estrella.on{background:var(--taronja-clar)}
.rec-estrelles[data-to="1"] .rec-estrella.on .rec-est-ico{color:var(--taronja)}
.rec-estrella:focus-visible{outline:2px solid var(--verd-mig);outline-offset:1px}

/* ---------- Calendari de reserves ---------- */
.rec-reserves-cos{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);gap:18px}
.rec-cal-cap{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rec-cal-mes{font-weight:800;font-size:14px}
.rec-cal-mes::first-letter{text-transform:uppercase}   /* "Setembre del 2026", no "Setembre Del 2026" */
.rec-cal-nav{width:36px;height:36px;border-radius:10px;border:1px solid var(--linia-forta);background:#fff;font-size:18px;line-height:1;font-weight:700}
.rec-cal-nav:hover:not(:disabled){border-color:var(--verd-mig);background:var(--verd-clar)}
.rec-cal-nav:disabled{opacity:.35;cursor:default}
.rec-cal-sem,.rec-cal-graella{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.rec-cal-sem span{text-align:center;font-size:10.5px;font-weight:700;color:var(--gris-clar);text-transform:uppercase;padding:4px 0}
.rec-dia{position:relative;aspect-ratio:1/1;min-height:38px;border-radius:10px;font-weight:600;font-size:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:#fbfcfb;border:1px solid transparent}
.rec-dia:hover:not(:disabled){border-color:var(--blau-fort);background:var(--blau-clar)}
.rec-dia:disabled{color:var(--linia-forta);background:transparent;cursor:default}
.rec-dia.buit{visibility:hidden}
.rec-dia.avui{border-color:var(--tinta);font-weight:800}
.rec-dia-punts{display:flex;gap:2px;height:5px}
.rec-dia-punts i{width:5px;height:5px;border-radius:50%;background:var(--blau-fort)}
.rec-dia-punts i.altre{background:var(--taronja)}
.rec-cal-lleg{display:flex;gap:12px;margin-top:8px;font-size:11px;color:var(--gris)}
.rec-cal-lleg i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--blau-fort);margin-right:4px}
.rec-cal-lleg i.altre{background:var(--taronja)}

.rec-res-llista{list-style:none;display:flex;flex-direction:column;gap:8px}
.rec-res{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:var(--radi-petit);border:1px solid var(--linia);background:#fbfcfb}
.rec-res.meva{border-color:#cfe0f6;background:var(--blau-clar)}
.rec-res-dades{font-size:12.5px;line-height:1.35;min-width:0}
.rec-res-dades strong{display:block;font-size:13px}
.rec-res-cancel{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--vermell);padding:6px 8px;border-radius:8px}
.rec-res-cancel:hover{background:var(--vermell-clar)}

/* ---------- Formularis ---------- */
.rec-form-fuel{display:flex;flex-direction:column;gap:12px}
.rec-camps3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rec-camps3 label,.rec-label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:700;color:var(--gris)}
.rec-opcional{font-weight:500;color:var(--gris-clar)}
.rec-form-peu{display:flex;justify-content:flex-end;gap:8px}

.rec-segmentat{border:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rec-segmentat legend{font-size:11.5px;font-weight:700;color:var(--gris);margin-bottom:6px}
.rec-segmentat label{position:relative}
.rec-segmentat input{position:absolute;opacity:0;pointer-events:none}
.rec-segmentat span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:8px;border:1px solid var(--linia-forta);border-radius:var(--radi-petit);font-weight:600;font-size:13px;background:#fff;cursor:pointer}
.rec-segmentat input:checked + span{border-color:var(--verd-fort);background:var(--verd-clar);color:var(--verd-fort);box-shadow:inset 0 0 0 1px var(--verd-fort)}
.rec-segmentat input:focus-visible + span{outline:2px solid var(--verd-mig);outline-offset:1px}

.rec-foto{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1.5px dashed var(--linia-forta);border-radius:var(--radi-petit);font-weight:700;font-size:13px;color:var(--gris);cursor:pointer;background:#fbfcfb}
.rec-foto:hover{border-color:var(--verd-mig);color:var(--verd-fort)}
.rec-foto input{display:none}
.rec-img-previa{max-width:100%;max-height:220px;border-radius:var(--radi-petit);display:block;margin:0 auto}

/* ---------- Modals ---------- */
.rec-form-modal{display:flex;flex-direction:column;gap:14px}
.rec-form-modal .rec-bt-gran{width:100%}
.rec-check{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600}
.rec-check input,.rec-checklist input{width:20px;height:20px;accent-color:var(--verd-fort)}
.rec-checklist{display:flex;flex-direction:column;gap:2px}
.rec-checklist label{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 4px;font-size:14px;border-bottom:1px solid var(--linia)}
.rec-checklist label:last-child{border-bottom:none}
.rec-fila2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rec-dia-titol{font-size:15px;font-weight:800}
.rec-dia-existents{padding:10px 12px;border-radius:var(--radi-petit);background:var(--taronja-clar);font-size:12.5px;line-height:1.4}

/* ---------- Pantalles més petites ---------- */
@media (max-width:1000px){
  .rec-tauler{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rec-tauler > .c3{grid-column:span 2}
  .rec-blau{grid-row:auto;grid-column:span 2}
}
@media (max-width:760px){
  .rec-reserves-cos{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .rec-tauler{grid-template-columns:minmax(0,1fr)}
  .rec-tauler > .c2,.rec-tauler > .c3,.rec-blau{grid-column:auto}
  .rec-blau{padding:16px}
  .rec-camps3{grid-template-columns:1fr 1fr}
  .rec-camps3 label:last-child{grid-column:1 / -1}
  .rec-camps3 input{font-size:16px}
}

/* ---------- Colors per recurs: targeta i botó de dalt fan servir els mateixos ---------- */
.rec-tema-blau{--rec-c1:#1E6FD9;--rec-c2:#0D47A1;--rec-sombra:rgba(21,101,192,.28)}
.rec-tema-violeta{--rec-c1:#9B4DCA;--rec-c2:#4A148C;--rec-sombra:rgba(106,27,154,.30)}
.rec-tema-teal{--rec-c1:#1AA898;--rec-c2:#00574B;--rec-sombra:rgba(0,121,107,.30)}

/* ---------- Botons de dalt (Cotxe · Projector · Música) ---------- */
.rec-tabs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin-bottom:16px;padding:4px 2px 8px}
.rec-tabs::-webkit-scrollbar{display:none}
.rec-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:10px 18px;border-radius:14px;
  color:#fff;font-weight:800;font-size:14px;white-space:nowrap;
  background:linear-gradient(160deg,var(--rec-c1) 0%,var(--rec-c2) 100%);
  opacity:.68;transition:opacity .15s ease,transform .15s ease,box-shadow .15s ease}
.rec-tab:hover{opacity:.92}
.rec-tab.on{opacity:1;transform:translateY(-1px);box-shadow:0 8px 18px var(--rec-sombra)}
.rec-tab:focus{outline:none}   /* sense vora en clicar */
.rec-tab:focus-visible{outline:2px solid var(--rec-c1);outline-offset:2px}   /* només en navegar amb teclat */
.rec-tab .rec-punt{box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.rec-tab .rec-punt-disponible{background:#69F0AE}
.rec-tab .rec-punt-ocupat{background:#FFB74D}
.rec-tab .rec-punt-meu{background:#fff}

/* ---------- Projector i equip de música: foto de fons de la targeta ---------- */
.rec-blau-img{--rec-fons-mida:60%;--rec-fons-opacitat:.5;position:relative;overflow:hidden;isolation:isolate}
.rec-blau-img::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--rec-img) center/var(--rec-fons-mida) no-repeat;opacity:var(--rec-fons-opacitat);mix-blend-mode:multiply}
.rec-blau-img .rec-blau-nom,.rec-blau-img .rec-blau-etiqueta,.rec-blau-img .rec-blau-linia{text-shadow:0 1px 3px rgba(0,0,0,.3)}

/* Camp "On el portes?" dins la targeta */
.rec-on{width:100%;min-height:46px;padding:10px 12px;border:none;border-radius:var(--radi-petit);
  background:rgba(255,255,255,.95);color:var(--tinta);font-size:16px}   /* 16px: l'iPhone no fa zoom */
.rec-on::placeholder{color:var(--gris-clar)}

@media (max-width:640px){
  .rec-tab{padding:9px 14px}
}

/* ---------- Finestra "Agafar": de quan a quan ---------- */
.rec-agafar-desde{display:flex;align-items:center;gap:8px;padding:11px 13px;border-radius:var(--radi-petit);background:var(--fons);font-size:14px}
.rec-xips-rapids{display:flex;flex-wrap:wrap;gap:8px}
.rec-xips-rapids button{padding:8px 14px;border-radius:999px;border:1px solid var(--linia-forta);background:#fff;font-size:13px;font-weight:700;min-height:38px}
.rec-xips-rapids button:hover{border-color:var(--verd-mig);background:var(--verd-clar);color:var(--verd-fort)}
.rec-blau-tard{color:#FFD180;font-weight:800}

/* Ús en curs amb hora de retorn, dins la llista i el calendari de reserves */
.rec-res.en-us{border-style:dashed;background:var(--taronja-clar);border-color:#ffe0b2}
.rec-res.en-us.meva{background:var(--blau-clar);border-color:#cfe0f6}
.rec-res-tag{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:999px;background:#fff;color:var(--taronja);vertical-align:1px}