/* La Navaja: estilos compartidos entre la página de turnos y el panel */

:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; }

.ln-dark {
  --bg: #130B0C; --card: #1E1617; --line: #3A2F2C; --border: #5A4C45;
  --text: #F3E9CF; --soft: #D9CFB2; --muted: #C9BC94; --accent: #FAEAA8;
  --sel-bg: #FAEAA8; --sel-fg: #130B0C; --sel-line: #C9B77A; --sel-muted: #4A3B2E;
  --taken-bg: #2A2120; --taken-fg: #7A6E5C; --past: #7A6E5C; --ph: #8F8467;
  --stripe: #241B1B; --link: #FAEAA8; --link-h: #FFF6D2;
}
.ln-light {
  --bg: #FAF3DF; --card: #FFFBEE; --line: #E2D3A8; --border: #A8925F;
  --text: #1E1416; --soft: #43362A; --muted: #5E4E3A; --accent: #130B0C;
  --sel-bg: #130B0C; --sel-fg: #FAEAA8; --sel-line: #3A2F2C; --sel-muted: #D9CFB2;
  --taken-bg: #EDE2C4; --taken-fg: #7D6C50; --past: #8A7A5E; --ph: #7D6C50;
  --stripe: #EDE2C4; --link: #7A2420; --link-h: #130B0C;
}

.ln-root {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--link); }
a:hover { color: var(--link-h); }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }

.ln-pole {
  height: 10px;
  background: repeating-linear-gradient(-45deg, #FAEAA8 0 14px, #130B0C 14px 28px, #9E2B25 28px 42px, #130B0C 42px 56px);
}
.ln-pole.thin {
  height: 8px;
  background: repeating-linear-gradient(-45deg, #FAEAA8 0 12px, #130B0C 12px 24px, #9E2B25 24px 36px, #130B0C 36px 48px);
}

.ln-btn:focus-visible, .ln-in:focus-visible, .ln-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.ln-in::placeholder { color: var(--ph); }

.rye { font-family: 'Rye', serif; font-weight: 400; }
.narrow { font-family: 'Archivo Narrow', sans-serif; }
.eyebrow {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.tema-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border-radius: 999px; border: 2px solid var(--border);
  background: var(--card); color: var(--text);
  font-weight: 600; font-size: 14px;
}

/* Botón seleccionable genérico (barbero, servicio, día) */
.pick {
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--text);
  text-align: left;
}
.pick[aria-pressed="true"] {
  border-color: var(--sel-bg);
  background: var(--sel-bg);
  color: var(--sel-fg);
}
.avatar {
  border-radius: 50%;
  border: 2px dashed var(--ph);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rye', serif;
}
.pick[aria-pressed="true"] .avatar { border-color: var(--sel-fg); }

.dias {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
}
.dia {
  flex: 0 0 auto;
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.dia .dow {
  font-family: 'Archivo Narrow', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.dia .num { font-family: 'Rye', serif; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}