/* Base común: tipografías, colores, botones, campos, hoja inferior y ticket.
   Identidad: piedra/mármol frío + grafito, el poste de barbero como gesto propio
   y el ticket de turno como objeto que se repite (portada, confirmación, mi cita). */

@font-face { font-family: 'Gloock'; src: url('../fonts/gloock-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Schibsted'; src: url('../fonts/schibsted-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Schibsted'; src: url('../fonts/schibsted-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Schibsted'; src: url('../fonts/schibsted-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --stone: #E9EAE6;
  --paper: #F8F8F5;
  --ink: #1E2327;
  --muted: #5D656B;
  --line: #CDD1CD;
  --accent: #2340C4;            /* lo elige el dueño */
  --on-accent: #FFFFFF;
  --red: #B8232B;               /* rojo del poste; también errores */
  --night: #15191C;             /* portada */
  --night-2: #20262A;
  --on-night: #EDEEEA;
  --display: 'Gloock', Georgia, serif;
  --text: 'Schibsted', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: light;
}
:root[data-accent] { --accent: var(--accent-base); }
@media (prefers-color-scheme: dark) {
  :root {
    --stone: #121517; --paper: #1C2124; --ink: #ECEDEA; --muted: #A0A8AD; --line: #343B3F;
    --accent: #6F86F2; --on-accent: #0D1120; --red: #E5575E; --night: #0C0F11; --night-2: #1A1F22;
    color-scheme: dark;
  }
  :root[data-accent] { --accent: color-mix(in srgb, var(--accent-base) 55%, #ffffff); --on-accent: #0D1120; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: var(--stone); color: var(--ink);
  font: 400 1rem/1.5 var(--text); -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { flex: none; }
.muted { color: var(--muted); }

/* ---------- Poste de barbero ---------- */
.pole-stripes {
  background: repeating-linear-gradient(-45deg,
    var(--red) 0 8px, var(--paper) 8px 14px, var(--accent) 14px 22px, var(--paper) 22px 28px);
  background-size: 40px 40px;
}
.pole { height: 6px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.pole-fill { height: 100%; width: 0; transition: width .5s var(--ease); }
.pole.is-loading .pole-fill, .spin-stripes { animation: pole-run .8s linear infinite; }
@keyframes pole-run { to { background-position: 40px 0; } }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 22px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: 1.05rem; text-decoration: none; text-align: center; line-height: 1.15;
  transition: transform .15s var(--ease), opacity .15s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-ink { background: var(--ink); color: var(--stone); }
.btn-ghost { background: transparent; border-color: currentColor; min-height: 48px; font-size: 1rem; }
.btn-danger { background: var(--red); color: #fff; }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { opacity: .55; cursor: progress; }
.link { border: 0; background: none; padding: 10px 0; color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; }
.icon-btn:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* ---------- Campos ---------- */
.field { display: grid; gap: 6px; margin-bottom: 14px; align-content: start; }
.field > label, .field > .label { font-weight: 700; font-size: .95rem; }
.input, .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); font-size: 1.0625rem; /* ≥ 16 px: el iPhone no hace zoom */
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 38px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 0; }
.field [aria-invalid="true"] { border-color: var(--red) !important; }
.hint { margin: 0; font-size: .86rem; color: var(--muted); }
.err { margin: 0; font-size: .88rem; color: var(--red); font-weight: 500; }
.err:empty { display: none; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: .95rem; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.banner { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-sm); font-weight: 500;
  background: color-mix(in srgb, var(--red) 12%, var(--paper)); border-left: 4px solid var(--red); }
.banner.ok { background: color-mix(in srgb, var(--accent) 12%, var(--paper)); border-left-color: var(--accent); }
.empty { color: var(--muted); padding: 16px; border: 1px dashed var(--line); border-radius: var(--r-sm); margin: 12px 0; }
.inline-error { padding: 14px; border-left: 4px solid var(--red); background: var(--paper); border-radius: var(--r-sm); margin: 14px 0; }
.inline-error p { margin: 0 0 10px; }

/* ---------- Hoja inferior estilo iPhone ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(8,10,12,.45); opacity: 0; transition: opacity .3s var(--ease); z-index: 40; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: calc(100dvh - var(--safe-t) - 10px);
  height: calc(100dvh - var(--safe-t) - 10px);
  background: var(--stone); border-radius: 22px 22px 0 0; display: flex; flex-direction: column;
  transform: translateY(102%); transition: transform .42s var(--ease); box-shadow: 0 -10px 40px rgba(0,0,0,.18);
}
.sheet.is-open { transform: translateY(0); }
.sheet-backdrop.is-open { opacity: 1; }
.sheet-grab { width: 40px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 25%, transparent); margin: 8px auto 2px; flex: none; }
.sheet-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 0 8px; flex: none; }
.sheet-title { text-align: center; font-weight: 700; font-size: .95rem; margin: 0; }
.sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 18px 18px calc(28px + var(--safe-b)); }
.sheet-body > * { max-width: 560px; margin-left: auto; margin-right: auto; }
@media (min-width: 700px) { .sheet { left: 50%; right: auto; width: 620px; margin-left: -310px; } }

/* ---------- Ticket de turno ---------- */
.ticket {
  --notch: 11px; --cut: 60%; position: relative; background: var(--paper); color: var(--ink); border-radius: var(--r-md);
  -webkit-mask: radial-gradient(circle var(--notch) at 0 var(--cut), transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% var(--cut), transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 var(--cut), transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% var(--cut), transparent 98%, #000) right / 51% 100% no-repeat;
}
.ticket-cut { border-top: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); margin: 0 18px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* el botón oculto conserva su hueco para que el título quede centrado */
.sheet-head .icon-btn[hidden] { display: grid !important; visibility: hidden; }