.turnos {
  --turnos-blue: #215a85;
  --turnos-deep: #133c58;
  --turnos-ink: #172f43;
  --turnos-muted: #465d6d;
  --turnos-paper: #f7f5ef;
  --turnos-border: #cfdae1;
  --turnos-work: #d7ebfa;
  --turnos-rest: #e1eee0;
  --turnos-before: #edf0f1;
  --turnos-warn: #8e2b28;
  background: radial-gradient(ellipse at 100% 0%, #deebef 0, transparent 46rem), var(--turnos-paper);
  color: var(--turnos-ink);
  font-family: var(--font-body, "DM Sans", system-ui), sans-serif;
  margin: 0;
}

.turnos * { box-sizing: border-box; }
.turnos [hidden] { display: none !important; }
.turnos :focus-visible { outline: 3px solid var(--turnos-blue); outline-offset: 3px; }

.turnos-shell {
  max-width: 75rem;
  margin-inline: auto;
  padding: 0 clamp(.875rem, 4vw, 3rem) 3rem;
}

.turnos #workspace { padding: 0; }
.turnos .connection-status { margin: 1rem auto 0; }
.turnos .skip-link:not(:focus) { clip-path: inset(50%); }

.turnos .turnos-nav {
  max-width: none;
  min-height: 3.75rem;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  border-bottom: 1px solid var(--turnos-border);
}

.turnos-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--turnos-blue);
  font-weight: 700;
  text-decoration: none;
}

.turnos-nav a:hover { text-decoration: underline; }
.turnos-nav .install { min-height: 44px; }
.turnos-nav .membership-entry:hover { text-decoration: none; }

.turnos-title {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 3vw, 1.25rem);
  padding-block: clamp(1.5rem, 5vw, 3.2rem);
}

.turnos-title img { flex: 0 0 auto; border-radius: .85rem; box-shadow: 0 5px 12px #163a5620; }
.turnos #workspace:has(.turnos-setup:not([hidden])) .turnos-title { max-width: 40rem; margin-inline: auto; }

.turnos h1,
.turnos h2 {
  font-family: var(--font-display, "Instrument Serif", Georgia), serif;
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.025em;
  margin: 0;
  color: inherit;
}

.turnos h1 { font-size: clamp(2.15rem, 6vw, 4.65rem); }
.turnos h2 { font-size: clamp(2rem, 4vw, 3rem); }
.turnos-title p,
.turnos-section-head p {
  margin: .55rem 0 0;
  color: var(--turnos-muted);
  line-height: 1.45;
}

.turnos-panel {
  background: #fffefa;
  border: 1px solid var(--turnos-border);
  border-radius: 1.2rem;
  box-shadow: 0 16px 36px -24px #17344848;
  min-width: 0;
}

.turnos-library {
  padding: .8rem clamp(.85rem, 3vw, 1.25rem);
  margin-bottom: 1rem;
  background: #fffefa;
  border: 1px solid var(--turnos-border);
  border-radius: .9rem;
}
.turnos #workspace:has(.turnos-setup:not([hidden])) .turnos-library {
  max-width: 40rem;
  margin-inline: auto;
}
.turnos-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
}
.turnos-plan strong { color: var(--turnos-deep); }
.turnos-plan p { margin: 0; color: var(--turnos-muted); font-size: .875rem; }
.turnos-switcher {
  align-items: end;
  padding-top: .65rem;
  margin-top: .55rem;
  border-top: 1px solid var(--turnos-border);
}
.turnos-switcher .turnos-field { flex: 0 1 18rem; }
.turnos-switcher .turnos-button { min-height: 46px; }
.turnos-optional { font-weight: 400; color: var(--turnos-muted); }

.turnos-setup {
  max-width: 40rem;
  margin-inline: auto;
  overflow: clip;
}

.turnos-section-head,
.turnos-detail-head {
  background: linear-gradient(125deg, var(--turnos-deep), var(--turnos-blue));
  color: #fff;
}
.turnos-section-head { padding: clamp(1.15rem, 4vw, 2.1rem); }
.turnos-section-head p { color: #e7f2fa; }
.turnos-section-head :focus-visible { outline-color: #fff; }
.turnos-setup form { display: grid; gap: 1.1rem; padding: clamp(1rem, 4vw, 2rem); }
.turnos-date-fields,
.turnos-pattern-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.turnos-field { min-width: 0; }
.turnos-field > label,
.turnos-patterns legend { display: block; font-weight: 700; margin-bottom: .4rem; }

.turnos-field > input,
.turnos-field > select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: .55rem .65rem;
  color: var(--turnos-ink);
  background: #f9fbfc;
  border: 1px solid #8ca1b1;
  border-radius: .5rem;
  font: inherit;
  font-size: 1rem;
}

.turnos-field [aria-invalid="true"] { border-color: var(--turnos-warn); }
.turnos-field p,
.turnos #save-hint,
.turnos-downloads p {
  font-size: .875rem;
  line-height: 1.45;
  color: var(--turnos-muted);
  margin: .35rem 0 0;
}
.turnos-field p.turnos-error { color: var(--turnos-warn); font-weight: 700; }
.turnos-patterns { border: 0; padding: 0; margin: 0; min-width: 0; }
.turnos-patterns legend { padding: 0; }

.turnos-pattern-options label {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  padding: .65rem;
  border: 1px solid #8ca1b1;
  border-radius: .6rem;
  cursor: pointer;
}
.turnos-pattern-options label:has(:checked) {
  border-color: var(--turnos-blue);
  background: #eff7fc;
  box-shadow: inset 0 0 0 1px var(--turnos-blue);
}
.turnos-pattern-options input {
  width: 1rem;
  height: 1rem;
  min-height: 1rem;
  flex: 0 0 auto;
  margin: .22rem 0 0;
  accent-color: var(--turnos-blue);
}
.turnos-pattern-options strong { font-size: 1.1rem; display: block; }
.turnos-pattern-options small { display: block; color: var(--turnos-muted); line-height: 1.4; margin-top: .15rem; }

.turnos-actions { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.turnos-primary,
.turnos-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  min-width: 44px;
  padding: .5rem .85rem;
  border-radius: .55rem;
  border: 1px solid #8ca1b1;
  background: #fff;
  color: var(--turnos-blue);
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}
.turnos-primary { color: #fff; background: var(--turnos-blue); border-color: var(--turnos-blue); }
.turnos-primary:hover { background: #194768; }
.turnos-button:hover { background: #edf5fb; }
.turnos-button:disabled { opacity: .5; cursor: default; }
.turnos-remove { color: var(--turnos-warn); border-color: #caa3a1; }
.turnos-remove:hover { background: #fff0ef; }

.turnos-board { display: grid; gap: 1rem; align-items: start; }
.turnos-month { padding: clamp(.85rem, 3vw, 1.5rem); container-type: inline-size; }
.turnos-month-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.turnos-month-header h2:first-letter,
.turnos-details h2:first-letter { text-transform: uppercase; }
.turnos-month-header p { margin: .5rem 0 0; color: var(--turnos-muted); overflow-wrap: anywhere; }
.turnos-month-nav { display: flex; flex: 0 0 auto; gap: .3rem; }
.turnos-arrow { padding-inline: .5rem; }
.turnos-arrow span {
  width: .53rem;
  height: .53rem;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
.turnos-arrow:first-child span { transform: rotate(-135deg); }

.turnos-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .9rem;
  list-style: none;
  padding: .85rem 0;
  margin: .8rem 0 0;
  border-top: 1px solid var(--turnos-border);
  color: var(--turnos-muted);
  font-size: .85rem;
}
.turnos-legend li { display: flex; gap: .35rem; align-items: center; }
.turnos-entry-mark {
  width: .8rem;
  height: .5rem;
  border-radius: .15rem;
  background: var(--turnos-blue);
  border: 1px solid currentColor;
}
.turnos-swatch {
  width: .95rem;
  height: .95rem;
  flex: 0 0 auto;
  border: 1px solid #6f8ba0;
  border-radius: .2rem;
}
.turnos-swatch.work, .turnos-day-button.work { background: var(--turnos-work); }
.turnos-swatch.rest, .turnos-day-button.rest { background: var(--turnos-rest); }
.turnos-swatch.mixed, .turnos-day-button.mixed {
  background: linear-gradient(125deg, var(--turnos-work) 0%, var(--turnos-work) 43%, var(--turnos-rest) 66%);
}
.turnos-swatch.before, .turnos-day-button.before, .turnos-day-button.skipped { background: var(--turnos-before); }

.turnos-weekdays { display: none; }
.turnos-days, .turnos-segments { list-style: none; padding: 0; margin: 0; }
.turnos-days {
  display: grid;
  gap: .3rem;
  max-height: 15rem;
  padding: 6px;
  overflow-y: auto;
  scrollbar-color: #7c9cb2 #edf3f6;
}
.turnos-day { min-width: 0; padding: 0; margin: 0; }
.turnos-day-button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .65rem;
  text-align: start;
  font: inherit;
  color: var(--turnos-ink);
  border: 1px solid transparent;
  border-radius: .5rem;
  cursor: pointer;
}
.turnos-day-button:hover { border-color: var(--turnos-blue); }
.turnos-day-button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--turnos-blue); border-color: var(--turnos-blue); }
.turnos-day-number {
  display: grid;
  place-items: center;
  min-width: 1.6rem;
  min-height: 1.6rem;
  border-radius: 50%;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.turnos-day-button[aria-current="date"] .turnos-day-number { background: var(--turnos-blue); color: #fff; }
.turnos-day-label { font-size: .9rem; }
.turnos-compact-state { display: none; }
.turnos-entry {
  color: #fff;
  background: var(--turnos-blue);
  border: 1px solid transparent;
  border-radius: .2rem;
  margin-inline-start: auto;
  padding-inline: .22rem;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

@container (min-width: 320px) {
  .turnos-weekdays,
  .turnos-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
  .turnos-days { max-height: none; overflow: visible; padding: 0; }
  .turnos-weekdays { margin: 0 0 .4rem; text-align: center; font-size: .78rem; color: var(--turnos-muted); }
  .turnos-day:first-child { grid-column-start: var(--first-weekday); }
  .turnos-day-button {
    display: grid;
    grid-template-rows: 1.4rem .9rem;
    justify-items: center;
    align-content: center;
    gap: 0;
    padding: .1rem 0;
    min-height: clamp(44px, 10cqi, 65px);
  }
  .turnos-day-number { min-height: 1.4rem; }
  .turnos-day-label { display: none; }
  .turnos-compact-state { display: block; }
  .turnos-entry { margin-inline-start: 0; }
  .turnos-day-button.work .turnos-day-number { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .16em; }
  .turnos-day-button.mixed .turnos-day-number { text-decoration: underline double; text-underline-offset: .17em; }
  .turnos-legend .work { border-bottom-width: 3px; }
  .turnos-legend .mixed { border-bottom: 3px double #526b7f; }
  .turnos-day-button.before .turnos-day-number, .turnos-day-button.skipped .turnos-day-number { font-weight: 400; }
}

.turnos-details { overflow: clip; }
.turnos-detail-head, .turnos-detail-body { padding: clamp(.85rem, 3vw, 1.5rem); }
.turnos-details h2 { font-size: clamp(1.95rem, 3.5vw, 2.8rem); }
.turnos-segments li { display: flex; gap: .6rem; padding: .65rem 0; border-top: 1px solid var(--turnos-border); line-height: 1.35; }
.turnos-segments li:first-child { border-top: 0; padding-top: 0; }
.turnos-segments .turnos-swatch { margin-top: .2rem; }
.turnos-segments strong, .turnos-segments div > span, .turnos-segments small { display: block; }
.turnos-segments div > span { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.turnos-segments small { margin-top: .2rem; color: var(--turnos-muted); }
.turnos-calendar-actions { margin-top: .85rem; }
.turnos-downloads { border-block: 1px solid var(--turnos-border); margin-top: .5rem; padding-block: .8rem; }
.turnos-downloads h3 { font-size: 1rem; margin: 0 0 .5rem; }
.turnos-ical,
.turnos-details .turnos-remove { border-color: transparent; padding-inline: .25rem; text-decoration: underline; text-underline-offset: .18em; }
.turnos-ical { margin-top: .4rem; }
.turnos-downloads #export-hint { margin-top: 0; }

.turnos-notice {
  padding: .65rem .85rem;
  background: #eaf4fa;
  border-left: 3px solid var(--turnos-blue);
  border-radius: .4rem;
  margin: 0 0 .8rem;
}

.turnos-dialog {
  width: min(26rem, calc(100% - 2rem));
  border: 1px solid var(--turnos-border);
  border-radius: .85rem;
  padding: 1.25rem;
  color: var(--turnos-ink);
  background: #fff;
}
.turnos-dialog h2 { overflow-wrap: anywhere; }
.turnos-dialog::backdrop { background: #142e42a3; }
.turnos-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 26rem) {
  .turnos-month { padding-inline: .625rem; }
  .turnos-date-fields { grid-template-columns: 1fr; }
  .turnos-nav .install { padding-inline: .6rem; font-size: .82rem; }
}

@media (max-width: 22rem) {
  .turnos-title img { width: 44px; height: 44px; }
  .turnos h1 { font-size: 1.95rem; }
  .turnos .turnos-nav { gap: .3rem; }
  .turnos .turnos-nav .membership-entry { padding-inline: .4rem; }
}

@media (min-width: 52rem) {
  .turnos-board { grid-template-columns: minmax(0, 1.7fr) minmax(17rem, 1fr); }
}

@media (forced-colors: active) {
  .turnos-day-button[aria-pressed="true"] { border: 2px solid Highlight; }
  .turnos-day-button[aria-current="date"] .turnos-day-number { outline: 1px solid CanvasText; }
  .turnos-entry { border-color: CanvasText; }
}