/* ==========================================================================
   CREATICS · horario.css — horario semanal de la academia (componente .cs-hor).
   Sustituye al widget HTML de Elementor. Sin JavaScript se ve la semana entera
   en lista; con JavaScript (horario.js añade .is-js) aparecen los filtros por curso
   y actividad y, en el móvil, las pestañas de día.
   Escritorio: cinco columnas. Tableta: columnas que se deslizan. Móvil: un día.
   ========================================================================== */

.cs-hor{display:flex;flex-direction:column;gap:18px}

/* ---------- Filtros ---------- */
.cs-hor__filtros{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 28px;padding:18px 20px;background:#fff;border:1.5px solid var(--color-border);border-radius:14px}
.cs-hor__curso{display:flex;flex-direction:column;gap:6px;min-width:250px}
.cs-hor__label{font-family:var(--font-heading);font-weight:700;font-size:var(--text-sm);color:var(--cs-ink)}
.cs-hor__select{min-height:48px;padding:10px 42px 10px 14px;border:2px solid var(--cs-ink);border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1020' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/18px;-webkit-appearance:none;appearance:none;font-family:var(--font-body);font-weight:700;font-size:var(--text-base);line-height:1.2;color:var(--cs-ink);cursor:pointer}
.cs-hor__acts{display:flex;flex-wrap:wrap;gap:8px}
.cs-hor__acts .cs-pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;border-color:var(--neutral-300)}
.cs-hor__acts .cs-pill:hover{border-color:var(--cs-ink)}
.cs-hor__acts .cs-pill[aria-pressed="true"]{border-color:var(--cs-ink)}
.cs-hor__swatch{flex:none;width:10px;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(14,16,32,.25)}
.cs-hor__swatch--blue{background:var(--cs-blue)}
.cs-hor__swatch--pink{background:var(--cs-pink)}
.cs-hor__swatch--turquoise{background:var(--cs-turquoise)}
.cs-hor__swatch--yellow{background:var(--cs-yellow)}
.cs-hor__swatch--mint{background:var(--cs-mint)}

/* ---------- Resumen ---------- */
.cs-hor__barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;min-height:40px}
.cs-hor__resumen{margin:0;font-size:var(--text-sm);color:var(--color-ink-soft)}
.cs-hor__resumen b{color:var(--cs-ink)}
.cs-hor__limpiar{min-height:40px;padding:6px 2px;border:0;background:none;font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);color:var(--cs-blue);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- Semana ---------- */
/* position:relative: los textos ocultos (.cs-sr) de dentro se quedan en la semana; si no, en tableta estiraban la página */
.cs-hor__semana{position:relative;display:grid;grid-template-columns:repeat(var(--hor-dias,5),minmax(0,1fr));gap:14px;align-items:start}
.cs-hor__dia{display:flex;flex-direction:column;gap:10px;min-width:0}
.cs-hor__dia-t{margin:0;padding:0 2px 8px;border-bottom:2px solid var(--cs-ink);font-family:var(--font-heading);font-weight:700;font-size:var(--text-lg);color:var(--cs-ink)}
.cs-hor__lista{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}

.cs-hor__clase{--_c:var(--cs-blue);display:flex;flex-direction:column;gap:4px;padding:12px 12px 8px 14px;background:#fff;border:1.5px solid var(--color-border);border-left:5px solid var(--_c);border-radius:10px}
.cs-hor__clase--pink{--_c:var(--cs-pink)}
.cs-hor__clase--turquoise{--_c:#00c9ae}
.cs-hor__clase--yellow{--_c:#f2b705}
.cs-hor__clase--mint{--_c:#35d6ad}
.cs-hor__hora{margin:0;font-family:var(--font-mono);font-weight:700;font-size:var(--text-xs);color:var(--cs-ink)}
.cs-hor__act{margin:0;font-family:var(--font-heading);font-weight:700;font-size:var(--text-sm);line-height:1.25;color:var(--cs-ink)}
.cs-hor__grupo{margin:0;display:flex;align-items:baseline;gap:7px;font-size:var(--text-xs);line-height:1.35;color:var(--color-ink-soft)}
.cs-hor__punto{flex:none;width:9px;height:9px;border-radius:50%;background:var(--neutral-400)}
.cs-hor__punto--rojo{background:#e0352b}
.cs-hor__punto--verde{background:#1f9d55}
.cs-hor__punto--azul{background:var(--cs-blue)}
.cs-hor__punto--blanco{background:#fff;box-shadow:inset 0 0 0 1.5px var(--neutral-500)}
.cs-hor__punto--infantil{background:var(--cs-yellow);box-shadow:inset 0 0 0 1px rgba(14,16,32,.3)}
.cs-hor__punto--mixto{background:var(--cs-pink)}
/* Verde de WhatsApp oscurecido para texto sobre blanco (5,6:1) */
.cs-hor__info{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:2px 0;font-size:var(--text-xs);font-weight:700;color:#12733a;text-decoration:none}
.cs-hor__info .cs-i{width:17px;height:17px}
.cs-hor__info:hover{color:#0b5a2c;text-decoration:underline;text-underline-offset:3px}
.cs-hor__sin{margin:0;padding:14px 10px;border:1.5px dashed var(--neutral-300);border-radius:10px;font-size:var(--text-xs);line-height:1.4;color:var(--color-ink-mute);text-align:center}
.cs-hor__vacio{margin:0;padding:22px;background:#fff;border:1.5px dashed var(--neutral-300);border-radius:12px;text-align:center;color:var(--color-ink-soft)}

/* ---------- Pestañas de día (solo en el móvil y con JavaScript) ---------- */
.cs-hor__tabs{display:none}
.cs-hor__tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;padding:6px 2px;border:2px solid var(--neutral-300);border-radius:12px;background:#fff;color:var(--cs-ink);font-family:var(--font-heading);font-weight:700;font-size:var(--text-sm);line-height:1.1;cursor:pointer}
.cs-hor__tab-n{font-family:var(--font-mono);font-size:11px;color:var(--color-ink-mute)}
.cs-hor__tab[aria-pressed="true"]{background:var(--cs-ink);border-color:var(--cs-ink);color:#fff}
.cs-hor__tab[aria-pressed="true"] .cs-hor__tab-n{color:rgba(255,255,255,.75)}
.cs-hor__tab.is-vacio:not([aria-pressed="true"]){color:var(--color-ink-mute);border-style:dashed}

/* Tableta: la semana entera, deslizando en horizontal */
@media (min-width:761px) and (max-width:1100px){
	.cs-hor__semana{grid-template-columns:repeat(var(--hor-dias,5),minmax(210px,1fr));overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 12px;-webkit-overflow-scrolling:touch}
	.cs-hor__dia{scroll-snap-align:start}
}

/* Móvil: un día cada vez */
@media (max-width:760px){
	.cs-hor__filtros{padding:14px;gap:14px}
	.cs-hor__curso{min-width:0;width:100%}
	.cs-hor__select{width:100%}
	.cs-hor__acts{flex-wrap:nowrap;overflow-x:auto;margin-inline:-14px;padding:6px 14px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
	.cs-hor__acts .cs-pill{flex:none;scroll-snap-align:start}
	.cs-hor.is-js .cs-hor__tabs{display:grid;grid-template-columns:repeat(var(--hor-dias,5),minmax(0,1fr));gap:6px}
	.cs-hor__semana{grid-template-columns:minmax(0,1fr);gap:22px}
	.cs-hor.is-js .cs-hor__dia:not(.is-activo){display:none}
	.cs-hor.is-js .cs-hor__dia-t{display:none}
	.cs-hor__clase{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:14px;row-gap:3px;padding:12px 14px 6px}
	.cs-hor__hora{grid-row:1 / span 3;display:flex;flex-direction:column;gap:2px;font-size:var(--text-sm);line-height:1.2}
	.cs-hor__hora time + span + time{color:var(--color-ink-mute)}
	.cs-hor__guion{display:none}
	.cs-hor__act{font-size:var(--text-base)}
}