/* ============================================================
   Refugio Serenia · Horarios
   Agenda semanal — hereda el sistema de marca de styles.css
   ============================================================ */

/* ---- Color = familia de disciplina · Ícono = tipo de servicio ---- */
:root {
  --c-yoga:     #c4b0dc;   /* Vinyasa · Hatha · Kundalini · Esencia Fem. */
  --c-meditacion:#b9d8a8;   /* Meditación */
  --c-sound:    #8fb8d4;   /* Sound Healing · Nidra · Restaurativo */
  --c-barre:    #d57f99;   /* Barré · Barré Pop */
  --c-pilates:  #e6a47c;   /* Pilates Mat · Power Hot Pilates */
  --c-dance:    #b07ec0;   /* Static Dance */
  --c-prenatal: #d9a24f;   /* Curso · Yoga Pre y Post Natal */
  --c-coaching: #93a05c;   /* Coaching 1:1 · Resp. Emocional */
  --c-evento:   #6fa8a0;   /* Evento · Yin Yoga + Sound Healing */
}

/* ============ Hero ============ */
.sched-hero {
  padding: 150px 0 50px;
  text-align: center;
  position: relative;
}
.sched-hero .wrap { max-width: 880px; }
.sched-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  margin: 18px 0 20px;
}
.sched-hero .lede {
  color: var(--tinta-60);
  font-size: 1.06rem;
  max-width: 580px;
  margin: 0 auto;
}
.sched-hero .brandline {
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--tinta-40);
}

/* ============ Filtros (chips de categoría) ============ */
.sched-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 36px auto 0;
  max-width: 760px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.55);
  border: 1px solid var(--linea);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--tinta-60);
  transition: all .25s ease;
}
.chip:hover { border-color: var(--tinta-40); transform: translateY(-1px); }
.chip .swatch {
  width: 11px; height: 11px; border-radius: 4px;
  background: var(--sw, var(--arena));
  box-shadow: inset 0 0 0 1px rgba(50,44,34,.08);
}
.chip .chip-ico { font-size: 0.82rem; line-height: 1; color: var(--terracota); }
.chip.is-active .chip-ico { color: inherit; }
.chip.is-active {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--lino);
}

/* ============ Agenda ============ */
.sched-section { padding: 44px 0 90px; }

.sched-scroll {
  overflow-x: auto;
  border-radius: var(--r-lg);
  -webkit-overflow-scrolling: touch;
}
.sched-hint {
  display: none;
  text-align: center;
  font-size: 0.78rem;
  color: var(--tinta-40);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.sched-grid {
  --col: minmax(132px, 1fr);
  display: grid;
  grid-template-columns: 86px var(--col) var(--col) var(--col) var(--col) var(--col) var(--col);
  min-width: 920px;
  gap: 7px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.66), rgba(248,243,236,.5));
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

/* encabezados de día */
.sched-grid .head {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 6px;
  border-radius: var(--r-sm);
  background: var(--musgo);
  color: var(--lino);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sched-grid .head.corner {
  background: var(--tinta);
  font-size: 0.66rem;
}

/* banda divisoria de jornada (Mañana / Tarde) */
.sched-grid .daypart {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 9px 0 5px;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--terracota);
}
.sched-grid .daypart::before,
.sched-grid .daypart::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--linea), transparent);
}

/* etiqueta de hora */
.sched-grid .time {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 6px 4px;
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--tinta-60);
  white-space: nowrap;
}

/* celda vacía */
.sched-grid .cell {
  min-height: 56px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.25);
  box-shadow: inset 0 0 0 1px rgba(226,214,198,.6);
}

/* clase */
.sched-grid .klass {
  position: relative;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 3px;
  padding: 14px 8px 10px;
  border-radius: 12px;
  background: var(--bg, var(--arena));
  color: #3a3126;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  cursor: default;
  box-shadow: 0 6px 16px -12px rgba(50,44,34,.7);
  transition: transform .25s ease, box-shadow .25s ease, opacity .3s ease, filter .3s ease;
}
.sched-grid .klass:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 16px 26px -16px rgba(50,44,34,.75);
}
.sched-grid .klass.is-partial-bottom {
  align-self: end;
  min-height: 28px;
  padding: 8px 24px 7px 8px;
  font-size: 0.68rem;
}
.sched-grid .klass.is-partial-bottom:hover {
  transform: translateY(-2px) scale(1.01);
}
.sched-grid .klass .ico {
  font-size: 0.72rem;
  opacity: .85;
}
/* estado de filtro */
.sched-grid.filtering .klass:not(.is-match) {
  opacity: .2;
  filter: saturate(.4);
}
.sched-grid.filtering .klass.is-match {
  box-shadow: 0 14px 26px -14px rgba(50,44,34,.8);
}

/* paleta por familia de disciplina */
.d-yoga     { --bg: var(--c-yoga);     }
.d-meditacion { --bg: var(--c-meditacion); }
.d-sound    { --bg: var(--c-sound);    }
.d-barre    { --bg: var(--c-barre);    color:#fff; }
.d-pilates  { --bg: var(--c-pilates);  }
.d-dance    { --bg: var(--c-dance);    color:#fff; }
.d-prenatal { --bg: var(--c-prenatal); }
.d-coaching { --bg: var(--c-coaching); color:#fff; }
.d-evento   { --bg: var(--c-evento);   color:#fff; }

/* ícono de tipo de servicio (esquina superior) */
.sched-grid .klass::after {
  position: absolute;
  top: 6px; right: 8px;
  font-size: 0.66rem;
  line-height: 1;
  opacity: .68;
}
.sched-grid .klass[data-cat="regular"]::after  { content: "✦"; }
.sched-grid .klass[data-cat="curso"]::after     { content: "✿"; }
.sched-grid .klass[data-cat="coaching"]::after  { content: "♥"; }
.sched-grid .klass[data-cat="evento"]::after    { content: "★"; }

/* ============ Leyenda ============ */
.sched-legend {
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
  background: rgba(255,255,255,.5);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.sched-legend .lg-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 11px 22px;
}
.sched-legend .lg-title {
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta-40);
}
.sched-legend .lg-group + .lg-group {
  padding-top: 15px;
  border-top: 1px solid var(--linea);
  width: 100%;
}
.sched-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-60);
}
.sched-legend .dot-lg {
  width: 13px; height: 13px; border-radius: 5px;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(50,44,34,.08);
}
.sched-legend .ico-lg { font-size: 0.92rem; }

/* ============ Acción · descargar imagen ============ */
.sched-actions {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}
.btn-export {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.6);
  border: 1px solid var(--linea);
  color: var(--tinta-60);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all .25s ease;
}
.btn-export:hover { border-color: var(--tinta-40); color: var(--tinta); transform: translateY(-1px); }
.btn-export:disabled { opacity: .6; cursor: default; transform: none; }
.btn-export svg { width: 17px; height: 17px; }

/* ============ Vista por día (mobile) ============ */
.day-view { display: none; }
.day-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}
.day-tab {
  flex: 1;
  padding: 11px 4px;
  border-radius: var(--r-sm);
  border: 1px solid var(--linea);
  background: rgba(255,255,255,.5);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--tinta-60);
  cursor: pointer;
  transition: all .2s ease;
}
.day-tab.is-active { background: var(--tinta); border-color: var(--tinta); color: var(--lino); }
.day-list { display: flex; flex-direction: column; gap: 10px; }
.day-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 38px 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--linea);
  border-left: 5px solid var(--bg, var(--arena));
  box-shadow: 0 6px 16px -13px rgba(50,44,34,.6);
}
.day-card-time {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--tinta-60);
  white-space: nowrap;
  min-width: 94px;
}
.day-card-name {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.25;
}
.day-card::after {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: var(--bg, var(--terracota));
}
.day-card[data-cat="regular"]::after  { content: "✦"; }
.day-card[data-cat="curso"]::after     { content: "✿"; }
.day-card[data-cat="coaching"]::after  { content: "♥"; }
.day-card[data-cat="evento"]::after    { content: "★"; }
.day-empty {
  text-align: center;
  color: var(--tinta-40);
  font-style: italic;
  padding: 34px 10px;
}

/* ============ Escenario de exportación (fuera de pantalla) ============ */
.export-stage {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 1080px;
  padding: 44px;
  background: var(--lino);
}
.export-stage .sched-grid {
  display: grid !important;
  min-width: 0;
  box-shadow: none;
}
.export-stage .sched-grid .klass { font-size: 0.74rem; }
.export-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--linea);
}
.export-brand { display: flex; align-items: center; gap: 14px; }
.export-agave { width: 44px; height: 44px; color: var(--terracota); }
.export-title {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--tinta);
}
.export-title span { font-style: italic; color: var(--terracota); margin-left: 6px; }
.export-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--terracota);
}
.export-stage .sched-legend { margin-top: 26px; max-width: none; }

/* ============ CTA cierre ============ */
.sched-cta {
  text-align: center;
  margin: 6px auto 0;
  max-width: 620px;
}
.sched-cta p {
  color: var(--tinta-60);
  margin: 28px 0 22px;
}

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .sched-hint { display: block; }
  .sched-grid .klass { font-size: 0.7rem; }
}
@media (max-width: 700px) {
  .sched-hint,
  .sched-filters,
  .sched-scroll { display: none; }
  .day-view { display: block; }
}
@media (max-width: 600px) {
  .sched-hero { padding-top: 120px; }
  .sched-legend { border-radius: var(--r-lg); gap: 11px 18px; }
}