/* PWA del treballador: pensada per al mòbil, un sol toc per fitxar */
:root {
    --navy: #1f3a5f;
    --ink: #1d2733;
    --muted: #5f6d7a;
    --line: #dde3ea;
    --bg: #f4f6f9;
    --card: #ffffff;
    --green: #1e8e5a;
    --amber: #c27c00;
    --red: #c4453a;
    --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

.page {
    max-width: 480px;
    margin: 0 auto;
    padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}

/* Capçalera */
.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.top .company { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.top .name { font-size: 1.15rem; font-weight: 700; color: var(--navy); }
.link { background: none; border: 0; padding: 4px 0; color: var(--muted); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }

/* Estat actual */
.status { background: var(--card); border-radius: var(--radius); padding: 18px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-bottom: 16px; }
.status .label { font-size: 1.4rem; font-weight: 700; }
.status .since { color: var(--muted); margin-top: 2px; }
.status.working .label { color: var(--green); }
.status.break .label { color: var(--amber); }
.status.off .label { color: var(--muted); }

/* Modalitat (presencial / teletreball) */
.mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #e6ebf1; border-radius: 12px; padding: 4px; margin-bottom: 12px; }
.mode button { border: 0; border-radius: 9px; padding: 10px; font: inherit; font-weight: 600; color: var(--muted); background: transparent; cursor: pointer; }
.mode button.on { background: var(--card); color: var(--navy); box-shadow: 0 1px 2px rgba(0,0,0,.1); }

/* Botons de fitxar */
.actions { display: grid; gap: 12px; margin-bottom: 20px; }
.btn-clock { border: 0; border-radius: var(--radius); min-height: 76px; font: inherit; font-size: 1.3rem; font-weight: 700; color: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.15); transition: transform .05s; }
.btn-clock:active { transform: scale(.98); }
.btn-clock:disabled { opacity: .55; cursor: default; }
.btn-clock.in, .btn-clock.break_end { background: var(--green); }
.btn-clock.break_start { background: var(--amber); }
.btn-clock.out { background: var(--red); }

/* Avisos */
.toast { background: #e5f4ec; color: #145c3b; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-weight: 600; }
.error { background: #fdecea; color: #8a2a21; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.info { color: var(--muted); text-align: center; padding: 24px 8px; }

/* Marques d'avui */
.today { background: var(--card); border-radius: var(--radius); padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.today h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.today ul { list-style: none; margin: 0; padding: 0; }
.today li { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); }
.today li:first-child { border-top: 0; }
.today .time { font-variant-numeric: tabular-nums; font-weight: 700; }
.today .mode-tag { color: var(--muted); font-size: .85rem; }

/* Formulari d'entrada */
.login h1 { color: var(--navy); font-size: 1.5rem; margin: 24px 0 4px; }
.login .company { color: var(--muted); margin-bottom: 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; }
.field input { width: 100%; padding: 13px 12px; font: inherit; border: 1px solid #c7d0da; border-radius: 10px; background: #fff; }
.field input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.btn-primary { width: 100%; border: 0; border-radius: 12px; padding: 15px; font: inherit; font-weight: 700; font-size: 1.1rem; color: #fff; background: var(--navy); cursor: pointer; }
.btn-primary:disabled { opacity: .6; }

/* Quiosc: tauleta compartida (pantalla gran, botons grossos) */
.kiosk { max-width: 900px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 20px 24px; user-select: none; -webkit-user-select: none; }
.k-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.k-head .company { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.k-head .name { font-size: 1.2rem; font-weight: 700; color: var(--navy); }
.k-lang { font-size: 1rem; text-decoration: none; padding: 8px 4px; }
.k-lang .on { font-weight: 800; color: var(--navy); text-decoration: underline; }
.k-title { font-size: 1.6rem; color: var(--navy); text-align: center; margin: 12px 0 18px; }
.k-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.k-tile { min-height: 92px; border: 0; border-radius: var(--radius); background: var(--card); color: var(--navy); font: inherit; font-size: 1.35rem; font-weight: 700; padding: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.12); cursor: pointer; }
.k-tile:active { transform: scale(.97); background: #e8eef6; }
.k-msg { min-height: 58px; max-width: 520px; margin: 0 auto; }
.k-dots { display: flex; justify-content: center; gap: 18px; margin: 4px 0 20px; }
.k-dots .dot { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--navy); }
.k-dots .dot.on { background: var(--navy); }
.k-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 420px; margin: 0 auto; }
.k-pad button { min-height: 84px; border: 0; border-radius: var(--radius); background: var(--card); color: var(--ink); font: inherit; font-size: 2rem; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.12); cursor: pointer; }
.k-pad button.muted { font-size: 1.1rem; background: #e6ebf1; color: var(--muted); }
.k-pad button:active { transform: scale(.96); }
.k-pad button:disabled { opacity: .55; }
.kiosk .actions { max-width: 520px; margin: 0 auto 16px; }
.kiosk .status { max-width: 520px; margin: 0 auto 16px; }
.k-cancel { display: block; margin: 8px auto; font-size: 1.05rem; }
.k-done { text-align: center; padding: 8vh 0; }
.k-done .check { width: 120px; height: 120px; line-height: 120px; margin: 0 auto 16px; border-radius: 50%; background: var(--green); color: #fff; font-size: 4rem; }
.k-done .who { font-size: 2rem; font-weight: 800; color: var(--navy); }
.k-done .what { font-size: 1.4rem; color: var(--muted); margin-top: 6px; }

/* Càrrega inicial */
.boot { text-align: center; padding-top: 30vh; color: var(--muted); }
.spinner { width: 42px; height: 42px; margin: 0 auto 12px; border: 4px solid #d5dde6; border-top-color: var(--navy); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#blazor-error-ui {
    background: #fff4d6;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }