/* Fichajes · Real Club de Golf La Peñaza — colores y tipografías según el Manual de Identidad del Club */
/* Layout: banda azul inglés con el escudo arriba; debajo, una columna estrecha tipo móvil (fichaje) o ancha (panel admin). */
:root{
  --bg:#F1F3F6; --surface:#FFFFFF; --sunken:#F6F7F9; --line:#DDE2EA;
  --fg:#0F1E2E; --muted:#5E6B7A;
  --band:#002F54; --band-fg:#FFFFFF; --band-muted:#C6C1A3;
  --go-bg:#002F54; --go-fg:#FFFFFF;
  --stop:#C8283E; --stop-fg:#FFFFFF; --stop-soft:#FBE4E7;
  --ok:#1F7A4D; --ok-soft:#E1F2E8;
  --gold:#A79F72; --gold-soft:#F1EEE0;
  --focus:#003A73;
  --f-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --f-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --f-label:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0A1522; --surface:#112033; --sunken:#0D1A2A; --line:#22364F;
  --fg:#E7ECF2; --muted:#95A3B5;
  --band:#061C33; --band-fg:#FFFFFF; --band-muted:#D1CCA7;
  --go-bg:#D1CCA7; --go-fg:#002F54;
  --stop:#E2475C; --stop-fg:#FFFFFF; --stop-soft:#3B1D25;
  --ok:#5CC48D; --ok-soft:#14302A;
  --gold:#D9C8A5; --gold-soft:#1F2C38;
  --focus:#D9C8A5; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0A1522; --surface:#112033; --sunken:#0D1A2A; --line:#22364F;
  --fg:#E7ECF2; --muted:#95A3B5;
  --band:#061C33; --band-fg:#FFFFFF; --band-muted:#D1CCA7;
  --go-bg:#D1CCA7; --go-fg:#002F54;
  --stop:#E2475C; --stop-fg:#FFFFFF; --stop-soft:#3B1D25;
  --ok:#5CC48D; --ok-soft:#14302A;
  --gold:#D9C8A5; --gold-soft:#1F2C38;
  --focus:#D9C8A5; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* banda superior */
.band{background:var(--band);color:var(--band-fg);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.band-in{max-width:var(--w,560px);margin:0 auto;display:flex;align-items:center;gap:14px;padding-block:14px}
.band img{width:38px;height:auto;flex:none}
.band .who{flex:1;min-width:0}
.eyebrow{font-family:var(--f-label);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--band-muted)}
.band h1{font-family:var(--f-display);font-weight:700;font-size:18px;margin:0;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band .btn-ghost{color:var(--band-fg);border-color:rgba(255,255,255,.28)}
.band .btn-ghost:hover{background:rgba(255,255,255,.08)}
.band-actions{display:flex;gap:8px;flex:none}

.page{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 48px}
.wrap{max-width:var(--w,560px);margin:0 auto;display:flex;flex-direction:column;gap:22px}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sec-h h2{font-family:var(--f-display);font-weight:700;font-size:20px;margin:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;border:1px solid var(--line);background:var(--surface);padding:9px 14px;font-weight:600;font-size:15px;white-space:nowrap}
.btn:hover{background:var(--sunken)}
.btn-ghost{background:transparent}
.btn svg{width:18px;height:18px;flex:none}
.btn-big{display:flex;align-items:center;justify-content:center;width:100%;border:0;border-radius:12px;padding:17px 20px;font-family:var(--f-display);font-size:20px;font-weight:700;gap:12px;transition:background .2s,transform .1s}
.btn-big:active{transform:scale(.99)}
.btn-big svg{width:24px;height:24px}
.btn-go{background:var(--go-bg);color:var(--go-fg)}
.btn-go:hover{background:var(--go-bg);filter:brightness(1.12)}
.btn-stop{background:var(--stop);color:var(--stop-fg)}
.btn-stop:hover{background:var(--stop);filter:brightness(1.07)}
.btn-primary{background:var(--go-bg);color:var(--go-fg);border-color:transparent}
.btn-primary:hover{background:var(--go-bg);filter:brightness(1.12)}
.btn[disabled]{opacity:.55;cursor:default}
.btn-link{border:0;background:none;color:var(--fg);font-weight:600;padding:6px 4px;text-decoration:underline;text-underline-offset:3px}

/* login */
.login-top{background:var(--band);color:var(--band-fg);text-align:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:28px 64px}
.login-top img{width:84px;height:auto}
.login-top .club{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:.06em;margin-top:10px}
.login-top .sub{font-family:var(--f-label);font-weight:500;font-size:14px;letter-spacing:.28em;text-transform:uppercase;color:var(--band-muted)}
.login-top .rule{width:120px;height:1px;background:var(--band-muted);opacity:.6;margin:6px auto}
.login-body{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 40px;margin-top:-44px}
.pin-card{max-width:400px;margin:0 auto;padding:22px 20px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 10px 30px rgba(0,30,60,.10)}
.clk{font-family:var(--f-display);font-weight:700;font-size:44px;line-height:1;letter-spacing:-.01em}
.clk-date{color:var(--muted);font-size:15px;margin-top:4px}
.clk-date::first-letter{text-transform:uppercase}
.pin-label{font-weight:600;margin:6px 0 0}
.dots{display:flex;gap:16px;height:22px;align-items:center}
.dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--muted);transition:background .12s,border-color .12s}
.dot.on{background:var(--fg);border-color:var(--fg)}
.dots.err .dot{border-color:var(--stop)}
.dots.err{animation:shake .35s}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pin-msg{min-height:22px;margin:0;font-size:15px;color:var(--stop);font-weight:600;text-align:center}
.pin-msg.info{color:var(--muted);font-weight:500}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.key{height:62px;border-radius:14px;border:1px solid var(--line);background:var(--sunken);font-family:var(--f-display);font-size:24px;font-weight:600;display:flex;align-items:center;justify-content:center}
.key:hover{background:var(--line)}
.key:active{transform:scale(.97)}
.key.sm{font-family:var(--f-body);font-size:15px;font-weight:600;color:var(--muted);background:transparent;border-color:transparent}
.key svg{width:26px;height:26px}
.key[disabled]{opacity:.4}

/* cronómetro */
.timer-card{padding:28px 20px 22px;display:flex;flex-direction:column;align-items:center;gap:14px}
.timer{display:flex;align-items:baseline;gap:8px;font-family:var(--f-display);font-weight:700;letter-spacing:-.02em}
.timer .hm{font-size:clamp(60px,18vw,84px);line-height:1}
.timer .ss{font-size:24px;color:var(--muted);width:2ch}
.timer.live .ss{color:var(--fg)}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 14px;font-size:15px;border:1px solid var(--line);color:var(--muted)}
.chip b{color:var(--fg);font-weight:600}
.chip.none{background:var(--stop-soft);border-color:transparent;color:var(--fg)}
.chip.live{background:var(--ok-soft);border-color:transparent;color:var(--fg)}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--ok);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
.since{color:var(--muted);font-size:15px;margin:-4px 0 0;min-height:21px}
.timer-card .btn-big{margin-top:4px}

/* lista fichajes */
.list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:14px 18px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .d{font-weight:600}
.row .t{color:var(--muted);font-size:15px}
.row .dur{font-family:var(--f-display);font-weight:600;font-size:16px;text-align:right}
.row .meta{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-label);font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:2px 8px}
.pill.live{background:var(--ok-soft);color:var(--ok)}
.pill.edit{background:var(--gold-soft);color:var(--gold)}
.pill.void{background:var(--stop-soft);color:var(--stop)}
.pill.admin{background:var(--gold-soft);color:var(--gold)}
.pill.off{background:var(--sunken);color:var(--muted);border:1px solid var(--line)}
.row.void .d,.row.void .t,.row.void .dur{text-decoration:line-through;opacity:.6}
.empty{padding:26px 18px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--fg);margin-bottom:2px}
.more{width:100%;padding:15px;font-size:16px}

/* historial */
.seg{display:flex;gap:4px;background:var(--sunken);border:1px solid var(--line);border-radius:12px;padding:4px;overflow-x:auto}
.seg button{flex:1;border:0;background:transparent;border-radius:9px;padding:8px 10px;font-weight:600;font-size:14.5px;color:var(--muted);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stat{padding:14px 14px 12px}
.stat .k{font-family:var(--f-label);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-family:var(--f-display);font-weight:700;font-size:26px;line-height:1.15;margin-top:2px}
.stat .u{font-size:14px;color:var(--muted);font-weight:500}
.day-h{display:flex;justify-content:space-between;align-items:baseline;padding:12px 18px 8px;background:var(--sunken);border-top:1px solid var(--line);font-weight:600}
.day-h span:first-child{display:inline-block}
.day-h span:first-child::first-letter{text-transform:uppercase}
.day-h:first-child{border-top:0;border-radius:var(--r) var(--r) 0 0}
.day-h span:last-child{font-family:var(--f-display);font-size:15px}
.note{font-size:14.5px;color:var(--muted);text-align:center;margin:0}
.note.warn{color:var(--stop)}

/* admin */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line)}
.tabs button{border:0;background:none;padding:10px 6px;margin-right:14px;font-weight:600;font-size:16px;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--gold)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label,.flabel{font-family:var(--f-label);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.input{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 11px;font-size:15px;min-width:0;width:100%}
textarea.input{resize:vertical;min-height:72px}
.toolbar .field{flex:1 1 150px}
.toolbar .actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.presets{display:flex;gap:6px;flex-wrap:wrap}
.presets button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 13px;font-weight:600;font-size:14px;color:var(--muted)}
.presets button[aria-pressed="true"]{background:var(--go-bg);color:var(--go-fg);border-color:transparent}
.now{display:flex;gap:8px;flex-wrap:wrap}
.now .chip{background:var(--ok-soft);border-color:transparent;color:var(--fg)}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th{font-family:var(--f-label);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
td.strong{font-weight:600}
tr.void td:not(:last-child){opacity:.55;text-decoration:line-through}
.tbl-foot td{font-weight:700;background:var(--sunken)}
.mini{padding:5px 10px;font-size:14px}
.code{font-family:var(--f-display);font-weight:600;letter-spacing:.12em}

/* modal + toast */
.scrim{position:fixed;inset:0;background:rgba(5,15,28,.55);display:flex;align-items:flex-end;justify-content:center;z-index:50;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));padding-top:max(12px,env(safe-area-inset-top,0px));padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
@media (min-width:640px){.scrim{align-items:center}}
.sheet{background:var(--surface);border-radius:16px;width:100%;max-width:480px;max-height:100%;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.sheet h3{font-family:var(--f-display);font-weight:700;font-size:19px;margin:0}
.sheet .sub{color:var(--muted);margin:-8px 0 0;font-size:15px}
.sheet .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.sheet .grid2{grid-template-columns:1fr}}
.check{display:flex;gap:10px;align-items:center;font-weight:500}
.check input{width:20px;height:20px;accent-color:var(--stop)}
.sheet .err{color:var(--stop);font-weight:600;font-size:15px;margin:0;min-height:0}
.sheet .foot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.hist{border-top:1px solid var(--line);padding-top:10px;font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.hist b{color:var(--fg)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--fg);color:var(--bg);padding:12px 18px;border-radius:12px;font-weight:600;max-width:calc(100% - 32px);box-shadow:0 8px 24px rgba(0,0,0,.2);text-align:center}
.toast.bad{background:var(--stop);color:var(--stop-fg)}
.center{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;gap:8px;color:var(--muted)}
.setup{max-width:420px;margin:0 auto;padding:22px;display:flex;flex-direction:column;gap:14px}
.setup h2{font-family:var(--f-display);font-size:20px;margin:0}
.setup p{margin:0;color:var(--muted)}
@media (max-width:420px){
  .stats{gap:8px}.stat{padding:12px 10px}.stat .v{font-size:22px}
  .band .btn .lbl{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.check.ok input{accent-color:var(--ok)}
.otp{font-size:24px;letter-spacing:.3em;text-align:center}
[hidden]{display:none!important}