:root{
  --bg:#180810; --bg-2:#210b13;
  --card:#2c0f18; --card-2:#230b12;
  --line:#4a1c28; --line-soft:#38141e;
  --ink:#fdeef1; --muted:#d3a0aa; --faint:#a2727c;
  --accent:#f0c05a; --accent-2:#f6d688; --accent-ink:#2a2205;
  --green:#5ad18a; --amber:#f2c14e; --red:#ff5d5d; --blue:#ff8fa3;
  --r-sm:10px; --r:14px; --r-lg:20px;
  --sp:16px;
  --shadow:0 14px 40px rgba(0,0,0,.35);
  --shadow-sm:0 6px 18px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(240,192,90,.12), transparent 60%),
    radial-gradient(1000px 620px at 100% 0%, var(--brand-glow,rgba(226,74,86,.18)), transparent 55%),
    linear-gradient(180deg,var(--bg-2),var(--bg));
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
.wrap{max-width:860px;margin:0 auto;padding:22px 18px 48px}

/* Capçalera */
.brand{display:flex;align-items:center;gap:14px;margin:6px 0 18px}
.brand .dot{
  font-size:26px;width:52px;height:52px;flex:none;display:grid;place-items:center;
  background:linear-gradient(160deg,#3a1420,#25101a);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-sm)
}
.brand h1{font-size:21px;line-height:1.1;margin:0;font-weight:750;letter-spacing:.2px}
.brand small{color:var(--muted);display:block;font-weight:500;margin-top:3px}
.role{font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:2px;
  font-weight:700;margin:16px 0 2px}

/* Targetes */
.card{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;margin:14px 0;box-shadow:var(--shadow)
}
.card>h2:first-child,h2{font-size:15px;margin:0 0 14px;font-weight:700;letter-spacing:.2px}
h2 .hint{font-weight:500;color:var(--faint);font-size:12px}
.muted{color:var(--muted)}
.faint{color:var(--faint)}

/* Graella genèrica (franges) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}

/* Franja / slot */
.slot{
  position:relative;border:1px solid var(--line);border-radius:var(--r);
  padding:14px 12px;background:linear-gradient(180deg,#341320,#26101a);
  text-align:center;cursor:pointer;transition:transform .14s,border-color .14s,box-shadow .14s;
  user-select:none
}
.slot:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.slot:active{transform:translateY(0)}
.slot.full,.slot.blocked{opacity:.45;cursor:not-allowed;transform:none;border-color:var(--line);box-shadow:none}
.slot .t{font-size:22px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.slot .f{font-size:12px;color:var(--muted);margin-top:6px}
.slot .f b{color:var(--green)}
.slot.few .f b{color:var(--amber)}

/* Botons */
button,.btn{
  font:inherit;font-weight:700;border:0;border-radius:var(--r);padding:14px 20px;cursor:pointer;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));color:var(--accent-ink);
  box-shadow:0 6px 16px rgba(240,192,90,.22);transition:transform .12s,filter .12s,box-shadow .12s
}
button:hover{filter:brightness(1.05);transform:translateY(-1px)}
button:active{transform:translateY(0)}
button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
button.ghost:hover{border-color:var(--accent);background:rgba(240,192,90,.06)}
button.danger{background:linear-gradient(180deg,#f2857f,var(--red));color:#3a0f0d;box-shadow:0 6px 16px rgba(239,111,106,.22)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.center{justify-content:center;text-align:center}

/* Formularis */
input,select{
  font:inherit;padding:13px 14px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:#240c14;color:var(--ink);width:100%;transition:border-color .12s,box-shadow .12s
}
input::placeholder{color:var(--faint)}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(240,192,90,.15)}

/* QR */
.qr{background:#fff;padding:16px;border-radius:16px;display:inline-block;box-shadow:var(--shadow-sm)}
.qr img{display:block;width:260px;height:260px;image-rendering:pixelated}
.big{font-size:36px;font-weight:800;letter-spacing:3px;font-variant-numeric:tabular-nums}

/* Pills */
.pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.6}
.pill.ok{background:rgba(69,209,127,.16);color:var(--green)}
.pill.warn{background:rgba(242,193,78,.16);color:var(--amber)}
.pill.bad{background:rgba(239,111,106,.16);color:var(--red)}

/* KPI tiles */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px}
.stat{
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;position:relative;overflow:hidden
}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--faint)}
.stat.g::before{background:var(--green)} .stat.a::before{background:var(--amber)}
.stat.r::before{background:var(--red)} .stat.b::before{background:var(--blue)}
.stat.y::before{background:var(--accent)}
.stat .n{display:block;font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.stat .l{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:6px}

/* Llista d'incidències */
.list{display:flex;flex-direction:column}
.item{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 0;border-top:1px solid var(--line-soft)}
.item:first-child{border-top:0}
.item .when{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums;flex:none}

a{color:var(--blue)}
.links{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.links a{
  background:linear-gradient(180deg,var(--card),var(--card-2));border:1px solid var(--line);
  padding:14px 18px;border-radius:var(--r);text-decoration:none;color:var(--ink);font-weight:600;
  transition:transform .12s,border-color .12s;box-shadow:var(--shadow-sm)
}
.links a:hover{transform:translateY(-2px);border-color:var(--accent)}

/* Toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);
  background:#1e0a11;border:1px solid var(--line);padding:13px 20px;border-radius:var(--r);
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.22s;z-index:60;font-weight:600}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Escàner / resultats validador */
.scan{width:100%;max-width:360px;margin:0 auto;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.result{text-align:center;padding:28px 16px;border-radius:var(--r-lg);margin-top:14px}
.result.ok{background:rgba(69,209,127,.14);border:1px solid var(--green)}
.result.bad{background:rgba(239,111,106,.14);border:1px solid var(--red)}
.result .icon{font-size:56px;line-height:1}
.result h2{margin:8px 0 4px;font-size:20px}

/* Fons de la pantalla de selecció de franges (kiosk).
   Capes (de dalt a baix): vel fosc per llegibilitat · FOTO (kiosk-bg.png) ·
   fons vectorial de reserva (kiosk-bg.svg, es veu si la foto encara no s'ha pujat) · base.
   --kiosk-focus controla el punt focal vertical de la foto (30% = una mica amunt, cap a les cares). */
body.kiosk{
  --kiosk-photo:url('/media/kiosk-bg.png');
  --kiosk-fx:50%; --kiosk-fy:30%;
  --kiosk-veil-top:rgba(21,7,13,.50);
  --kiosk-veil-mid:rgba(21,7,13,.72);
  --kiosk-veil-bot:rgba(21,7,13,.90);
  background:
    linear-gradient(180deg, var(--kiosk-veil-top) 0%, var(--kiosk-veil-mid) 55%, var(--kiosk-veil-bot) 100%),
    var(--kiosk-photo) var(--kiosk-fx) var(--kiosk-fy) / cover no-repeat fixed,
    url('/media/kiosk-bg.svg') center center / cover no-repeat fixed,
    linear-gradient(180deg,var(--bg-2),var(--bg));
}
body.kiosk .card{
  background:linear-gradient(180deg, rgba(44,15,24,.80), rgba(35,11,18,.82));
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)
}
/* Posició del contingut per no tapar el personatge de la foto. */
body.kiosk .wrap{min-height:100vh;max-width:none;display:flex;flex-direction:column;
  justify-content:center;align-items:center}
body.kiosk .wrap>*{width:100%;max-width:460px}
body.kiosk[data-content="top"] .wrap{justify-content:flex-start}
body.kiosk[data-content="bottom"] .wrap{justify-content:flex-end}
body.kiosk[data-side="left"] .wrap{align-items:flex-start}
body.kiosk[data-side="right"] .wrap{align-items:flex-end}
/* La pantalla d'inici també mostra la foto darrere del vídeo/vel si no hi ha vídeo. */
body.kiosk .attract .fallback{animation:none;background:
  linear-gradient(180deg, rgba(21,7,13,.45), rgba(21,7,13,.80)),
  var(--kiosk-photo) var(--kiosk-fx) var(--kiosk-fy) / cover no-repeat,
  url('/media/kiosk-bg.svg') center center / cover no-repeat}

/* Pantalla d'inici (attract) del kiosk */
.attract{position:fixed;inset:0;z-index:40;overflow:hidden;background:#15070d}
.attract video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.attract .veil{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 20%,transparent 30%,rgba(18,5,10,.55) 75%,rgba(18,5,10,.92) 100%)}
.attract .fallback{position:absolute;inset:0;
  background:
    radial-gradient(700px 500px at 20% 15%, rgba(240,192,90,.20), transparent 60%),
    radial-gradient(700px 500px at 85% 85%, rgba(226,74,86,.26), transparent 60%),
    linear-gradient(180deg,#2a0c15,#15070d);
  animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(18deg)}}
.attract .stage{position:relative;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:24px;gap:10px}
.attract .kicker{color:var(--accent);text-transform:uppercase;letter-spacing:3px;font-weight:700;font-size:13px}
.attract h1{font-size:clamp(30px,6vw,56px);margin:0;font-weight:800;line-height:1.05;max-width:14ch;
  text-shadow:0 4px 30px rgba(0,0,0,.5)}
.attract p{color:var(--muted);font-size:clamp(15px,2.4vw,19px);margin:2px 0 22px;max-width:30ch}
.attract .start{font-size:22px;padding:20px 42px;border-radius:999px;
  animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 6px 16px rgba(240,192,90,.25),0 0 0 0 rgba(240,192,90,.35)}
  50%{box-shadow:0 6px 16px rgba(240,192,90,.25),0 0 0 18px rgba(240,192,90,0)}}
.attract .tap{color:var(--faint);font-size:13px;margin-top:14px;letter-spacing:.5px}

/* Selecció del kiosk: globus de diàleg del Llaminer + bloc d'hores */
.sel{display:flex;gap:28px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
body.kiosk .wrap>#sel{max-width:900px}
.sel .card{flex:0 1 380px}
.speech{position:relative;flex:0 1 320px;color:#fff;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.30);border-radius:26px;padding:20px 22px;
  box-shadow:0 20px 55px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
  animation:bob 3.4s ease-in-out infinite}
/* Cua de vidre cap al personatge (esquerra) */
.speech::after{content:"";position:absolute;left:-19px;top:54%;transform:translateY(-50%);
  border:16px solid transparent;border-right-color:rgba(255,255,255,.30);border-left:0}
.speech::before{content:"";position:absolute;left:-15px;top:54%;transform:translateY(-50%);
  border:13px solid transparent;border-right-color:rgba(255,255,255,.14);border-left:0;z-index:1}
.speech .who{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--accent-2);
  font-size:13px;letter-spacing:.3px;margin-bottom:10px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.speech .who .a{width:28px;height:28px;border-radius:50%;background:#fff0b3;display:grid;place-items:center;
  font-size:16px;box-shadow:0 2px 6px rgba(0,0,0,.15);animation:wiggle 2.5s ease-in-out infinite}
.bubbody{display:flex;align-items:center;gap:14px}
.speech .ico{font-size:46px;line-height:1;flex:none}
.speech .msg{font-size:19px;font-weight:700;line-height:1.3;min-height:2.6em;flex:1;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.speech .dots{display:flex;gap:6px;margin-top:14px;justify-content:center}
.speech .dots b{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:.25s}
.speech .dots b.on{background:var(--accent-2);transform:scale(1.4);box-shadow:0 0 8px rgba(246,214,136,.7)}
.speech .arrow{position:absolute;right:-54px;top:50%;transform:translateY(-50%);font-size:40px;
  display:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.speech.point .arrow{display:block;animation:point 1.1s ease-in-out infinite}
.speech .deco{position:absolute;font-size:24px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.3))}
.speech .deco.d1{top:-16px;right:16px;animation:floaty 4s ease-in-out infinite}
.speech .deco.d2{bottom:-14px;left:34px;animation:floaty 4s ease-in-out infinite 1.6s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-9px) rotate(.5deg)}}
@keyframes point{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(12px)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(14deg)}}
@keyframes wiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@media (max-width:820px){
  .sel{justify-content:center}
  .speech{flex-basis:100%;max-width:420px}
  .speech::after,.speech::before{left:50%;top:auto;bottom:-22px;transform:translateX(-50%) rotate(90deg)}
  .speech .arrow{right:50%;top:auto;bottom:-50px;transform:translateX(50%) rotate(90deg)}
  .speech.point .arrow{animation:pointv 1.1s ease-in-out infinite}
}
@keyframes pointv{0%,100%{transform:translateX(50%) rotate(90deg) translateX(0)}50%{transform:translateX(50%) rotate(90deg) translateX(12px)}}

/* Impressió del tiquet (kiosk) */
.print-only{display:none}
@media print{
  body{background:#fff;color:#000}
  body *{visibility:hidden}
  #ticket,#ticket *{visibility:visible}
  #ticket{position:absolute;inset:0 auto auto 0;width:100%;border:none;box-shadow:none;background:#fff;color:#000;text-align:center}
  #ticket .muted{color:#222}
  #ticket button,.row{display:none!important}
  #tk-qrlive,.qr-timer,.qr-note{display:none!important}
  #ticket .qr{border:1px solid #000;box-shadow:none}
  .print-only{display:block;color:#000}
}

/* Animacions del flux */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes shrinkX{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes qrSwap{0%{opacity:.25;transform:scale(.96)}100%{opacity:1;transform:scale(1)}}
.anim-in{animation:fadeUp .38s cubic-bezier(.2,.7,.3,1) both}
.anim-fade{animation:fadeIn .3s ease both}
.checkmark{font-size:66px;line-height:1;animation:popIn .55s cubic-bezier(.2,.8,.3,1.2) both}
.qrwrap{position:relative;display:inline-block}
.qrwrap img{animation:qrSwap .3s ease}
.qr-timer{height:4px;width:260px;max-width:100%;margin:12px auto 0;background:var(--line);border-radius:999px;overflow:hidden}
.qr-timer i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent));
  transform-origin:left;animation:shrinkX 10s linear infinite}
.qr-note{font-size:12px;color:var(--faint);margin-top:8px}

@media (max-width:480px){
  .wrap{padding:18px 14px 40px}
  .qr img{width:220px;height:220px}
}