/*
 * "Así se ve" samples: hand-built reproductions of the STRUCTURE of the real app screens
 * (steps, labels, states, layout). The skin is the landing's: only the palette, the
 * tints and the system font defined in style.css :root. Never use the app theme colors here.
 * Everything is scoped to .sample* so the rest of the landing is untouched.
 *
 * Contrast (WCAG, text pairs used): petrol on white 13.8, on smoke 12.9, on coral-soft 11.2,
 * on mint-soft 12.0, on petrol-soft 10.7, on petrol-wash 8.8, on mint 7.7; muted on white 5.6,
 * on smoke 5.2; smoke on petrol 12.9. Muted is never used on a tint.
 * Status without color alone: Reservada = coral + solid edge, Confirmada = petrol + solid edge,
 * Asistió = mint + solid edge, No asistió = striped neutral + dashed outline.
 */

/* Landing layout around the samples */
.sample-row { display: grid; gap: 20px; margin-bottom: 56px; align-items: center; }
.sample-row:last-child { margin-bottom: 0; }
.sample-text h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.3; }
.sample-text p { margin: 0; color: var(--muted); max-width: 40ch; }
.sample-fig { margin: 0; min-width: 0; }
.sample-fig figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; }

@media (min-width: 760px) {
  .sample-row { grid-template-columns: 1fr 1fr; gap: 56px; margin-bottom: 72px; }
  .sample-row:nth-of-type(even) .sample-text { order: 2; }
}

.sample {
  --s-edge: var(--petrol);
  --s-stripes: repeating-linear-gradient(135deg, transparent 0, transparent 4px, rgba(23, 47, 64, 0.16) 4px, rgba(23, 47, 64, 0.16) 6px);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  color: var(--petrol);
  text-align: left;
  pointer-events: none;
  user-select: none;
}
.sample *, .sample *::before, .sample *::after { box-sizing: border-box; }
.sample h4, .sample h5, .sample h6, .sample p { margin: 0; }
.sample .s-ico { flex: none; display: block; }
.sample .s-with-ico { display: inline-flex; align-items: center; gap: 6px; }
.sample .s-muted { color: var(--muted); }
.sample .s-bold { font-weight: 700; }

/* Status / tone tints */
.sample .s-tone-coral { background: var(--coral-soft); color: var(--petrol); --s-edge: var(--coral); }
.sample .s-tone-petrol { background: var(--petrol-soft); color: var(--petrol); --s-edge: var(--petrol); }
.sample .s-tone-mint { background: var(--mint-soft); color: var(--petrol); --s-edge: var(--mint); }
.sample .s-tone-missed { background: var(--petrol-wash) var(--s-stripes); color: var(--petrol); --s-edge: var(--petrol); }

.sample .s-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.6rem 1.2rem; border: 1px solid transparent; border-radius: 0.5rem;
  font-weight: 600; font-size: 14px; line-height: 1; white-space: nowrap;
}
.sample .s-btn-primary { background: var(--mint); border-color: var(--mint); color: var(--petrol); }
.sample .s-btn-outline { background: transparent; border-color: var(--petrol); color: var(--petrol); }
.sample .s-btn-sm { padding: 0.45rem 0.6rem; font-size: 13px; }
.sample .s-btn-sm.is-active { background: var(--mint); border-color: var(--petrol); color: var(--petrol); }
.sample .s-btn-primary.s-btn-sm:not(.is-active) { background: var(--petrol-soft); border-color: transparent; color: var(--petrol); }

.sample .s-card-plain {
  background: var(--white); border-radius: 0.6rem; box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 14px; overflow: hidden;
}
.sample .s-h4 { font-size: 1.15rem; font-weight: 600; color: var(--petrol); }
.sample .s-hint { margin: 4px 0 14px; font-size: 13px; color: var(--muted); }

/* 1. Booking, phone frame */
.sample-phone { max-width: 300px; margin: 0 auto; background: var(--petrol); padding: 10px; border-radius: 34px; }
.sample-phone .s-screen { background: var(--smoke); border-radius: 24px; overflow: hidden; height: 500px; }
.sample-phone .s-brandbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 14px; background: var(--white); border-bottom: 1px solid var(--line); color: var(--petrol);
}
.sample-phone .s-brandbar img { height: 24px; width: auto; }
.sample-phone .s-stepper {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--white); border-bottom: 1px solid var(--line);
}
.sample-phone .s-step { display: inline-flex; align-items: center; min-width: 0; }
.sample-phone .s-box {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 0.5rem; font-weight: 600; color: var(--petrol); background: var(--petrol-soft);
}
.sample-phone .is-active .s-box { background: var(--mint); color: var(--petrol); }
.sample-phone .s-step-title { margin-left: 8px; font-weight: 600; color: var(--petrol); line-height: 1.2; white-space: nowrap; }
.sample-phone .s-line { color: var(--petrol); display: inline-flex; }
.sample-phone .s-body { padding: 12px; background: var(--white); height: 100%; }
.sample-phone .s-input {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin-bottom: 12px;
  border: 1px solid var(--petrol-wash); border-radius: 0.5rem; color: var(--muted);
}
.sample-phone .s-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 0.6rem;
  box-shadow: var(--shadow); padding: 16px; margin-bottom: 12px;
}
.sample-phone .s-card h5 { font-size: 1.07rem; font-weight: 600; color: var(--petrol); margin-bottom: 14px; }
.sample-phone .s-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* 2. Agenda */
.sample-agenda .s-card-plain { padding: 12px; }
.sample-agenda .s-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.sample-agenda .s-nav { display: flex; align-items: center; gap: 2px; }
.sample-agenda .s-navbtn { display: inline-flex; color: var(--petrol); }
.sample-agenda .s-title { margin-left: 4px; font-size: 1.1rem; font-weight: 600; color: var(--petrol); }
.sample-agenda .s-btngroup { display: flex; flex-wrap: wrap; }
.sample-agenda .s-btngroup .s-btn { border-radius: 0; }
.sample-agenda .s-btngroup .s-btn:first-child { border-radius: 0.5rem 0 0 0.5rem; }
.sample-agenda .s-btngroup .s-btn:last-child { border-radius: 0 0.5rem 0.5rem 0; }
.sample-agenda .s-grid {
  --slot: 28px;
  display: grid; grid-template-columns: 38px repeat(5, minmax(0, 1fr));
  grid-template-rows: 28px auto; border-top: 1px solid var(--line);
}
.sample-agenda .s-colhead { text-align: center; font-size: 12px; font-weight: 600; color: var(--petrol); line-height: 28px; text-transform: capitalize; border-bottom: 1px solid var(--line); }
.sample-agenda .s-axis-head { border-bottom: 1px solid var(--line); }
.sample-agenda .s-hour { height: calc(var(--slot) * 2); font-size: 11px; text-transform: uppercase; color: var(--muted); text-align: center; padding-top: 2px; border-bottom: 1px solid var(--line); }
.sample-agenda .s-axis { grid-row: 2; grid-column: 1; }
.sample-agenda .s-col {
  grid-row: 2; position: relative; height: calc(var(--slot) * 10); border-left: 1px solid var(--line);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--slot) - 1px), var(--line) calc(var(--slot) - 1px), var(--line) var(--slot));
}
.sample-agenda .s-col.is-today { background-color: var(--smoke); }
.sample-agenda .s-ev {
  position: absolute; left: 1px; right: 1px; top: calc(var(--start) * var(--slot) + 1px);
  height: calc(var(--len) * var(--slot) - 2px); overflow: hidden; border-radius: 0.4rem;
  border-left: 4px solid var(--s-edge);
  padding: 1px 3px; font-size: 11px; line-height: 1.2; font-weight: 600; color: var(--petrol);
}
/* Missed: dashed outline on every side so it does not depend on color */
.sample-agenda .s-ev.s-tone-missed { border: 1px dashed var(--petrol); border-left-width: 1px; }
.sample-agenda .s-ev-time { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sample-agenda .s-ev-end { display: none; }
.sample-agenda .s-ev-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 400; overflow-wrap: anywhere; }
.sample-agenda .s-ev-title strong { font-weight: 700; }
.sample-agenda .s-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 14px; }
.sample-agenda .s-leg { display: inline-flex; align-items: center; gap: 6px; }
.sample-agenda .s-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid transparent; }
.sample-agenda .s-dot-coral { background: var(--coral); }
.sample-agenda .s-dot-petrol { background: var(--petrol); }
.sample-agenda .s-dot-mint { background: var(--mint); }
.sample-agenda .s-dot-missed { background: var(--petrol-wash) var(--s-stripes); border: 1px dashed var(--petrol); }

/* 3. Business dashboard */
.sample-dash { background: var(--smoke); padding: 12px; border-radius: 14px; border: 1px solid var(--line); }
.sample-dash .s-btngroup { display: flex; flex-wrap: wrap; }
.sample-dash .s-period { margin-bottom: 12px; gap: 4px; flex-wrap: nowrap; }
/* All period buttons stay on one line, like the real panel header; the type shrinks with the width. */
.sample-dash .s-period .s-btn { flex: 1 1 auto; min-width: 0; white-space: nowrap; text-align: center; padding: 0.45rem 0.35rem; font-size: clamp(10px, 2.9vw, 13px); }
.sample-dash .s-card-plain:last-child { margin-bottom: 0; }
.sample-dash .s-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin-top: 14px; }
.sample-dash .s-stats-2 { margin-bottom: 14px; }
.sample-dash .s-stat { display: flex; align-items: center; gap: 12px; }
.sample-dash .s-avatar { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; flex: none; }
.sample-dash .s-avatar.s-tone-missed { border: 1px dashed var(--petrol); }
.sample-dash .s-stat-val { font-size: 1.286rem; font-weight: 700; color: var(--petrol); line-height: 1.2; }
.sample-dash .s-stat-name { font-size: 13px; line-height: 1.3; color: var(--muted); }
.sample-dash .s-progress { height: 8px; border-radius: 4px; background: var(--petrol-soft); overflow: hidden; }
.sample-dash .s-progress-bar { height: 100%; background: var(--mint); }
.sample-dash .s-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.sample-dash .s-chart { display: block; width: 100%; height: auto; }
.sample-dash .s-gridline { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3; }
.sample-dash .s-axis-text { fill: var(--muted); font-size: 10px; font-family: inherit; }
.sample-dash .s-bar { fill: var(--petrol); }

/* 4. Confirmation email */
.sample-mail { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); }
.sample-mail .s-mail-chrome { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--smoke); border-bottom: 1px solid var(--line); }
.sample-mail .s-win-dots { display: inline-flex; gap: 6px; flex: none; }
.sample-mail .s-win-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--petrol-wash); display: block; }
.sample-mail .s-mail-subject { font-weight: 700; color: var(--petrol); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sample-mail .s-mail-bg { background: var(--smoke); padding: 20px 12px; color: var(--petrol); }
.sample-mail .s-mail-card { max-width: 440px; margin: 0 auto; background: var(--white); border-radius: 8px; overflow: hidden; }
.sample-mail .s-mail-logo { text-align: center; padding: 20px 24px 0; }
.sample-mail .s-mail-logo img { display: inline-block; height: 32px; width: auto; max-width: 100%; }
.sample-mail .s-mail-pad { padding: 14px 24px 0; }
.sample-mail .s-mail-pad-v { padding: 18px 24px; }
.sample-mail .s-mail-h { font-size: 20px; line-height: 1.3; color: var(--petrol); margin-bottom: 10px; font-weight: 700; }
.sample-mail .s-mail-p { font-size: 15px; line-height: 1.6; }
.sample-mail .s-mail-details { background: var(--mint-soft); border-left: 4px solid var(--mint); border-radius: 6px; padding: 16px 18px; }
.sample-mail .s-mail-date { font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--petrol); font-weight: 700; }
.sample-mail .s-mail-time { margin-top: 4px; font-size: 26px; font-weight: 700; color: var(--petrol); }
.sample-mail .s-mail-details .s-mail-line:first-of-type { margin-top: 12px; }
.sample-mail .s-mail-line { font-size: 15px; line-height: 1.5; }
.sample-mail .s-mail-addr { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.sample-mail .s-mail-small { font-size: 14px; line-height: 1.5; color: var(--muted); }
.sample-mail .s-mail-sign { padding: 20px 24px 22px; }
.sample-mail .s-mail-sign .s-mail-line, .sample-mail .s-mail-contact .s-mail-line { font-size: 14px; line-height: 1.6; }
.sample-mail .s-mail-contact { padding: 0 24px 22px; }
.sample-mail .s-mail-link { color: var(--petrol); text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; }
.sample-mail .s-mail-foot { padding: 14px 24px; background: var(--smoke); border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--muted); text-align: center; }