/* Temps - estil comú de les pàgines d'usuari (mateixa línia que index.html) */
:root { --fons:#f6f7f9; --carta:#fff; --text:#1d2430; --suau:#667085; --linia:#e4e7ec;
        --blau:#2563eb; --blau-fons:#eff4ff; --verd:#16a34a; --groc:#ca8a04; --vermell:#dc2626; --gris:#98a2b3; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
       background:var(--fons); color:var(--text); line-height:1.4; }
main { max-width: 860px; margin: 0 auto; padding: 16px 16px 48px; }
h1 { margin: 8px 0 4px; font-size: 26px; }
h2 { margin: 0 0 12px; font-size: 17px; }
h3 { margin: 0 0 6px; font-size: 15px; }
.sub { color: var(--suau); margin: 0 0 20px; }
a { color: var(--blau); }

nav { display:flex; gap:4px; flex-wrap:wrap; align-items:center; padding:10px 16px;
      background:var(--carta); border-bottom:1px solid var(--linia); }
nav .marca { font-weight:700; margin-right:auto; text-decoration:none; color:var(--text); }
nav a.pestanya { text-decoration:none; padding:6px 10px; border-radius:6px; color:var(--suau); font-size:14px; }
nav a.pestanya.actiu { background:var(--blau-fons); color:var(--blau); font-weight:600; }
nav button { font-size:13px; padding:4px 8px; }

.carta { background:var(--carta); border:1px solid var(--linia); border-radius:10px; padding:16px; margin-bottom:16px; }
.avis { padding:10px 12px; border-radius:8px; margin-bottom:14px; font-size:14px; }
.avis.error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.avis.ok { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.avis.info { background:var(--blau-fons); color:#1e3a8a; border:1px solid #c7d7fe; }
.amagat { display:none !important; }

label { display:block; font-size:14px; font-weight:600; margin:12px 0 4px; }
label .opc { font-weight:400; color:var(--suau); }
input[type=text], input[type=email], input[type=number], select {
  width:100%; font-size:16px; padding:8px 10px; border-radius:6px; border:1px solid var(--linia); background:#fff; }
input[type=number] { max-width:140px; }
.fila { display:flex; gap:12px; flex-wrap:wrap; }
.fila > div { flex:1 1 200px; }
.opcions { display:flex; gap:16px; flex-wrap:wrap; font-size:15px; }
.opcions label { font-weight:400; margin:4px 0; display:flex; gap:6px; align-items:center; }
button { font-size:15px; padding:8px 14px; border-radius:6px; border:1px solid var(--linia);
         background:#fff; color:var(--text); cursor:pointer; }
button.principal { background:var(--blau); color:#fff; border-color:var(--blau); }
button.perill { color:var(--vermell); }
button:disabled { opacity:.5; cursor:default; }
.botons { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }

/* Cercador de llocs */
.cercador { position:relative; }
.cercador .resultats { position:absolute; z-index:5; left:0; right:0; top:100%; background:#fff;
  border:1px solid var(--linia); border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.08); max-height:260px; overflow:auto; }
.cercador .resultats div { padding:8px 10px; cursor:pointer; font-size:15px; }
.cercador .resultats div:hover { background:var(--blau-fons); }
.cercador .resultats small { color:var(--suau); }
.cercador .resultats small.nota-lloc { display:block; font-size:12px; }
.cercador .triat { font-size:13px; color:var(--verd); margin-top:4px; }

/* Rangs */
.rangs { width:100%; border-collapse:collapse; font-size:14px; margin-top:6px; }
.rangs th, .rangs td { padding:4px; text-align:left; border-bottom:1px solid var(--linia); vertical-align:middle; }
.rangs input { width:76px; max-width:76px; padding:5px 6px; font-size:15px; }
.rangs input.canviat { border-color:var(--blau); background:var(--blau-fons); font-weight:600; }
.rangs .nota { color:var(--suau); font-size:12px; }
.taula-scroll { overflow-x:auto; }

/* Llistes i semàfor */
.esport { border:1px solid var(--linia); border-radius:8px; padding:12px; margin-bottom:10px; }
.esport.pausat { opacity:.55; }
.esport .detall { color:var(--suau); font-size:14px; }
.dies { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; margin-top:8px; }
.dia { text-align:center; border-radius:6px; padding:6px 2px; font-size:12px; background:#f1f3f6; }
.dia b { display:block; font-size:16px; }
.dia.verd { background:#dcfce7; } .dia.groc { background:#fef9c3; } .dia.vermell { background:#fee2e2; }
.dia .lloc { display:block; font-size:10px; color:var(--suau); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.etiqueta { display:inline-block; font-size:11px; padding:1px 6px; border-radius:10px; background:#f1f3f6; color:var(--suau); }
.missatge { padding:8px 0; border-bottom:1px solid var(--linia); font-size:14px; }
.missatge:last-child { border-bottom:none; }
.missatge .tipus { font-size:11px; font-weight:700; text-transform:uppercase; margin-right:6px; }
.tipus.avis { color:var(--vermell); } .tipus.oportunitat { color:var(--verd); }
.tipus.neu { color:var(--blau); } .tipus.report { color:var(--suau); }

@media (max-width: 560px) {
  .dies { grid-template-columns:repeat(4, minmax(0,1fr)); }
  h1 { font-size:22px; }
}

.ajuda { font-size:13px; color:var(--suau); margin:0 0 6px; }
.afegir { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; padding:10px;
          border:1px dashed var(--linia); border-radius:8px; background:#fafbfc; }
.afegir select { width:auto; flex:1 1 220px; }
.treure-var { padding:2px 8px; font-size:13px; color:var(--vermell); }

/* Caixa del codi de verificació (comu.js, caixaCodi) */
.codi input { font-size:26px; letter-spacing:8px; text-align:center; max-width:220px; font-variant-numeric:tabular-nums; }
.codi .petit { font-size:13px; color:var(--suau); margin-top:10px; }
.codi .petit button { font-size:13px; padding:3px 8px; }

/* Taula de previsió amb colors (previsio.js): index, previsions i preferits */
main.ample { max-width: 1100px; }
.controls { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.controls select { width:auto; }
.model { margin-top:16px; }
.model h3 { margin:0 0 6px; font-size:14px; display:flex; align-items:center; gap:6px; }
table.previsio { border-collapse:collapse; font-size:13px; white-space:nowrap; }
table.previsio th, table.previsio td { border:1px solid var(--linia); text-align:center; min-width:34px; padding:3px 4px; }
table.previsio th:first-child, table.previsio td:first-child { text-align:left; position:sticky; left:0; background:var(--carta); }
table.previsio thead th { background:#f1f3f6; }
table.previsio th.dia { font-size:13px; }
table.previsio th.hora { font-weight:400; color:var(--suau); font-size:12px; }
table.previsio .nou-dia { border-left:2px solid #98a2b3; }
table.previsio td.nom { text-align:left; font-weight:600; }
table.previsio .nit { background:#e9ecf2; }
.fletxa { display:inline-block; font-size:15px; line-height:1; }
.graus { display:block; font-size:10px; color:var(--suau); }
.llegenda { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--suau); margin:10px 0 0; }
.llegenda span i { display:inline-block; width:44px; height:10px; border-radius:3px; vertical-align:middle; margin-left:4px; }

/* Estrella de preferits */
button.estrella { border:none; background:none; padding:0 4px; font-size:20px; line-height:1; color:#c9a227; cursor:pointer; }
button.estrella:disabled { color:var(--gris); }
.preferit-cap { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.preferit-cap h2 { margin:0; margin-right:auto; }
.preferit-cap select { width:auto; }
.preferit-cap .model-nom { color:var(--suau); font-size:14px; font-weight:400; }

/* Pàgina d'inici */
.estat { display:flex; gap:24px; flex-wrap:wrap; }
.estat div b { display:block; font-size:20px; }
.estat div span { color:var(--suau); font-size:13px; }
.text-ok { color:var(--verd); } .text-error { color:var(--vermell); }
/* Mapa d'«Els meus esports» (Leaflet) */
#mapa { height:380px; border-radius:8px; border:1px solid var(--linia); z-index:0; }
@media (max-width:600px) { #mapa { height:300px; } }
.pin-mapa { background:none; border:none; }
.llegenda-punt { display:inline-block; width:10px; height:10px; border-radius:50%; vertical-align:middle; margin:0 2px; border:1px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.2); }
.llegenda-pin { display:inline-block; width:10px; height:10px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); vertical-align:middle; margin:0 2px; }
.llegenda-radar { display:inline-block; width:12px; height:12px; border-radius:50%; border:1.5px dashed #ea580c; vertical-align:middle;
  background:radial-gradient(#ea580c 0 3px, transparent 3.5px); margin:0 1px; }
.leaflet-control-layers label { font-size:13px; font-weight:400; margin:2px 0; }
.leaflet-control-layers input { width:auto; }
.punt-radar { display:block; width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.25); }