/* TeeBox — estilos del front. Todo bajo .tbx para no pelearse con el tema. */

.tbx {
	--tbx-green: #1B7F4C;
	--tbx-green-dark: #0F4E30;
	--tbx-green-soft: #E8F3EC;
	--tbx-sand: #E9DFC9;
	--tbx-sand-soft: #FAF6EE;
	--tbx-ink: #12211A;
	--tbx-muted: #6C7F76;
	--tbx-line: #DFE7E2;
	--tbx-danger: #B3261E;
	--tbx-warn: #B8770B;
	--tbx-radius: 14px;
	--tbx-shadow: 0 1px 2px rgba(18,33,26,.06), 0 8px 24px -12px rgba(18,33,26,.18);
	--tbx-font: inherit;

	font-family: var(--tbx-font);
	color: var(--tbx-ink);
	line-height: 1.55;
	max-width: 980px;
	margin-inline: auto;
}

.tbx *, .tbx *::before, .tbx *::after { box-sizing: border-box; }
.tbx h2, .tbx h3 { margin: 0 0 .4em; letter-spacing: -.02em; line-height: 1.2; }
.tbx p { margin: 0 0 .8em; }

/* ---------- botones ---------- */
.tbx-btn, .tbx-btn-ghost {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	font: inherit; font-weight: 600; cursor: pointer;
	padding: .78em 1.4em; border-radius: 10px; border: 1px solid transparent;
	text-decoration: none; transition: transform .12s ease, background .16s ease, box-shadow .16s ease;
}
.tbx-btn { background: var(--tbx-green); color: #fff; }
.tbx-btn:hover { background: var(--tbx-green-dark); color: #fff; transform: translateY(-1px); }
.tbx-btn:disabled { background: var(--tbx-line); color: var(--tbx-muted); cursor: not-allowed; transform: none; }
.tbx-btn-ghost { background: transparent; color: var(--tbx-green-dark); border-color: var(--tbx-line); }
.tbx-btn-ghost:hover { border-color: var(--tbx-green); background: var(--tbx-green-soft); }
.tbx-btn-lg { width: 100%; padding: 1em 1.4em; font-size: 1.02rem; }

/* ---------- pasos ---------- */
.tbx-steps { display: flex; gap: .4rem; list-style: none; margin: 0 0 1.8rem; padding: 0; flex-wrap: wrap; }
.tbx-steps li {
	display: flex; align-items: center; gap: .55em;
	font-size: .82rem; font-weight: 600; color: var(--tbx-muted);
	padding: .5em .95em .5em .5em; border-radius: 999px; background: var(--tbx-sand-soft);
}
.tbx-steps li span {
	width: 1.65em; height: 1.65em; border-radius: 50%; display: grid; place-items: center;
	background: #fff; border: 1px solid var(--tbx-line); font-size: .78rem;
}
.tbx-steps li.is-active { background: var(--tbx-green-soft); color: var(--tbx-green-dark); }
.tbx-steps li.is-active span { background: var(--tbx-green); color: #fff; border-color: var(--tbx-green); }
.tbx-steps li.is-done span { background: var(--tbx-green-dark); color: #fff; border-color: var(--tbx-green-dark); }

/* ---------- servicios ---------- */
.tbx-services { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tbx-service {
	text-align: left; cursor: pointer; font: inherit;
	background: #fff; border: 1px solid var(--tbx-line); border-radius: var(--tbx-radius);
	padding: 1.05rem 1.15rem; transition: border-color .16s, box-shadow .16s, transform .12s;
	position: relative;
}
.tbx-service:hover { border-color: var(--tbx-green); transform: translateY(-2px); box-shadow: var(--tbx-shadow); }
.tbx-service.is-selected { border-color: var(--tbx-green); background: var(--tbx-green-soft); }
.tbx-service h3 { font-size: 1.02rem; margin-bottom: .25em; }
.tbx-service .tbx-service-meta { font-size: .85rem; color: var(--tbx-muted); display: flex; gap: .8em; flex-wrap: wrap; }
.tbx-service .tbx-tag {
	position: absolute; top: .9rem; right: .9rem; font-size: .68rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em; padding: .28em .6em; border-radius: 6px;
	background: var(--tbx-sand); color: var(--tbx-green-dark);
}

/* ---------- calendario ---------- */
/* Calendario + horas, solo en el asistente de reserva. Sin acotar a
   .tbx-booking, esta regla se colaba en el paso 2 de otros asistentes y, peor,
   su `display:grid` ganaba al atributo `hidden`: el panel no se ocultaba. */
.tbx-booking .tbx-panel[data-panel="2"] { display: grid; gap: 1.6rem; grid-template-columns: minmax(280px, 1fr) minmax(220px, .8fr); align-items: start; }
@media (max-width: 720px) { .tbx-booking .tbx-panel[data-panel="2"] { grid-template-columns: 1fr; } }

/* Red de seguridad: nada con `hidden` debe verse, gane lo que gane en
   especificidad cualquier regla de layout, nuestra o del tema. */
.tbx [hidden] { display: none !important; }

.tbx-calendar-wrap { background: #fff; border: 1px solid var(--tbx-line); border-radius: var(--tbx-radius); padding: 1rem; }
.tbx-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.tbx-cal-title { text-transform: capitalize; font-size: 1rem; }
.tbx-cal-nav {
	border: 1px solid var(--tbx-line); background: #fff; width: 2.1em; height: 2.1em;
	border-radius: 8px; cursor: pointer; font-size: 1rem; color: var(--tbx-ink);
}
.tbx-cal-nav:hover { border-color: var(--tbx-green); color: var(--tbx-green); }
.tbx-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.tbx-cal-dow { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tbx-muted); text-align: center; padding: .4em 0; font-weight: 700; }
.tbx-day {
	aspect-ratio: 1; border: 1px solid transparent; background: transparent; border-radius: 9px;
	font: inherit; font-size: .9rem; cursor: pointer; color: var(--tbx-ink);
	display: grid; place-items: center; position: relative;
}
.tbx-day.is-empty { visibility: hidden; }
.tbx-day.is-off { color: #C3CFC8; cursor: not-allowed; }
.tbx-day.has-slots { background: var(--tbx-green-soft); font-weight: 600; color: var(--tbx-green-dark); }
.tbx-day.has-slots:hover { border-color: var(--tbx-green); }
.tbx-day.is-selected { background: var(--tbx-green); color: #fff; }
.tbx-day.is-today::after {
	content: ""; position: absolute; bottom: .35em; width: 4px; height: 4px; border-radius: 50%; background: currentColor;
}

.tbx-slots { display: grid; gap: .45rem; align-content: start; }
.tbx-slot-group { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tbx-muted); margin-top: .5rem; }
.tbx-slot {
	display: flex; align-items: baseline; justify-content: space-between; gap: .6em;
	border: 1px solid var(--tbx-line); background: #fff; border-radius: 10px;
	padding: .68em .9em; font: inherit; cursor: pointer; text-align: left;
}
.tbx-slot:hover { border-color: var(--tbx-green); background: var(--tbx-green-soft); }
.tbx-slot.is-selected { border-color: var(--tbx-green); background: var(--tbx-green); color: #fff; }
.tbx-slot strong { font-size: 1rem; }
.tbx-slot small { font-size: .76rem; opacity: .8; }
/* La sede del hueco. Se marca en verde porque no es un detalle: con un profesor
   que da la mañana en una sede y la tarde en otra, es a dónde hay que ir. */
.tbx-slot .tbx-slot-center { color: var(--tbx-green-dark); font-weight: 600; opacity: 1; }
.tbx.tbx .tbx-slot .tbx-slot-center { color: var(--tbx-green-dark); font-weight: 600; opacity: 1; }
/* En el asistente de compra la hora y la sede van una encima de otra. */
.tbx-when-grid .tbx-slot { flex-direction: column; align-items: center; gap: .1em; text-align: center; }
.tbx-hint { color: var(--tbx-muted); font-size: .9rem; }

/* ---------- resumen y pago ---------- */
.tbx-summary { background: var(--tbx-sand-soft); border: 1px solid var(--tbx-sand); border-radius: var(--tbx-radius); padding: 1.15rem; margin-bottom: 1.2rem; }
.tbx-summary dl { display: grid; grid-template-columns: auto 1fr; gap: .5em 1.2em; margin: 0; }
.tbx-summary dt { color: var(--tbx-muted); font-size: .85rem; }
.tbx-summary dd { margin: 0; font-weight: 600; }

.tbx-field { margin-bottom: 1.1rem; }
.tbx-field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .4em; }
.tbx-opt { font-weight: 400; color: var(--tbx-muted); }
.tbx textarea, .tbx-select, .tbx input[type="text"], .tbx input[type="email"], .tbx input[type="tel"] {
	width: 100%; font: inherit; padding: .7em .85em; border: 1px solid var(--tbx-line);
	border-radius: 10px; background: #fff; color: var(--tbx-ink);
}
.tbx textarea:focus, .tbx-select:focus { outline: 2px solid var(--tbx-green); outline-offset: 1px; border-color: var(--tbx-green); }

.tbx-payment { display: grid; gap: .6rem; margin-bottom: 1.3rem; }
.tbx-pay-option {
	display: flex; gap: .8em; align-items: flex-start; cursor: pointer;
	border: 1px solid var(--tbx-line); border-radius: 12px; padding: .9em 1em; background: #fff;
}
.tbx-pay-option:hover { border-color: var(--tbx-green); }
.tbx-pay-option.is-selected { border-color: var(--tbx-green); background: var(--tbx-green-soft); }
.tbx-pay-option input { margin-top: .25em; accent-color: var(--tbx-green); }
.tbx-pay-option .tbx-pay-title { font-weight: 600; display: block; }
.tbx-pay-option .tbx-pay-sub { font-size: .85rem; color: var(--tbx-muted); }
.tbx-pay-option.is-disabled { opacity: .55; cursor: not-allowed; }

/* ---------- panel cliente ---------- */
.tbx-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.tbx-eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--tbx-muted); font-weight: 700; margin: 0 0 .2em; }
.tbx-hello { font-size: 1.7rem; }
.tbx-hcp-badge {
	display: flex; align-items: baseline; gap: .5em; background: var(--tbx-green-dark); color: #fff;
	padding: .7em 1.1em; border-radius: 12px;
}
.tbx-hcp-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; opacity: .8; }
.tbx-hcp-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.tbx-hcp-delta { font-size: .8rem; font-style: normal; opacity: .9; }

.tbx-tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--tbx-line); margin-bottom: 1.4rem; overflow-x: auto; }
.tbx-tabs button {
	font: inherit; font-weight: 600; font-size: .92rem; background: none; border: none; cursor: pointer;
	padding: .8em 1.1em; color: var(--tbx-muted); border-bottom: 2px solid transparent; white-space: nowrap;
}
.tbx-tabs button.is-active { color: var(--tbx-green-dark); border-bottom-color: var(--tbx-green); }

.tbx-bono {
	background: #fff; border: 1px solid var(--tbx-line); border-radius: var(--tbx-radius);
	padding: 1.2rem; margin-bottom: .9rem; position: relative; overflow: hidden;
}
.tbx-bono::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tbx-green); }
.tbx-bono.is-expired::before, .tbx-bono.is-used::before { background: var(--tbx-line); }
.tbx-bono.is-soon::before { background: var(--tbx-warn); }
.tbx-bono-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.tbx-bono h3 { font-size: 1.05rem; }
.tbx-sessions { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.tbx-sessions small { font-size: .85rem; font-weight: 500; color: var(--tbx-muted); letter-spacing: 0; }
.tbx-bar { height: 6px; background: var(--tbx-line); border-radius: 99px; overflow: hidden; margin: .9rem 0 .6rem; }
.tbx-bar span { display: block; height: 100%; background: var(--tbx-green); border-radius: 99px; }
.tbx-bono.is-soon .tbx-bar span { background: var(--tbx-warn); }
.tbx-expiry { font-size: .85rem; color: var(--tbx-muted); }
.tbx-expiry.is-soon { color: var(--tbx-warn); font-weight: 600; }
.tbx-expiry.is-over { color: var(--tbx-danger); }

.tbx-booking-row {
	display: flex; gap: 1rem; align-items: center; background: #fff; border: 1px solid var(--tbx-line);
	border-radius: 12px; padding: .95rem 1.1rem; margin-bottom: .6rem; flex-wrap: wrap;
}
.tbx-date-chip {
	display: grid; place-items: center; min-width: 3.4rem; padding: .5em; border-radius: 10px;
	background: var(--tbx-sand-soft); border: 1px solid var(--tbx-sand); line-height: 1.1;
}
.tbx-date-chip strong { font-size: 1.25rem; }
.tbx-date-chip span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tbx-muted); }
.tbx-booking-main { flex: 1 1 200px; }
.tbx-booking-main strong { display: block; }
.tbx-booking-main span { font-size: .87rem; color: var(--tbx-muted); }
.tbx-status { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .3em .6em; border-radius: 6px; }
.tbx-status.confirmed { background: var(--tbx-green-soft); color: var(--tbx-green-dark); }
.tbx-status.pending { background: #FFF3DC; color: var(--tbx-warn); }
.tbx-status.cancelled { background: #FBEAE9; color: var(--tbx-danger); }
.tbx-status.completed { background: var(--tbx-line); color: var(--tbx-muted); }
.tbx-link-danger { background: none; border: none; font: inherit; font-size: .85rem; color: var(--tbx-danger); cursor: pointer; text-decoration: underline; padding: 0; }

.tbx-report {
	display: flex; gap: 1rem; align-items: center; background: #fff; border: 1px solid var(--tbx-line);
	border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: .6rem;
}
.tbx-report-icon {
	width: 2.6rem; height: 2.6rem; border-radius: 9px; background: var(--tbx-green-soft); color: var(--tbx-green-dark);
	display: grid; place-items: center; font-size: .68rem; font-weight: 800; letter-spacing: .04em; flex: none;
}
.tbx-report-main { flex: 1; }
.tbx-report-main strong { display: block; }
.tbx-report-main span { font-size: .85rem; color: var(--tbx-muted); }

.tbx-chart { background: #fff; border: 1px solid var(--tbx-line); border-radius: var(--tbx-radius); padding: 1.2rem; }
.tbx-chart svg { width: 100%; height: auto; display: block; }
.tbx-empty { text-align: center; padding: 2.6rem 1.2rem; color: var(--tbx-muted); background: var(--tbx-sand-soft); border-radius: var(--tbx-radius); border: 1px dashed var(--tbx-sand); }
.tbx-empty h3 { color: var(--tbx-ink); }

/* ---------- tienda ---------- */
.tbx-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tbx-card { background: #fff; border: 1px solid var(--tbx-line); border-radius: var(--tbx-radius); padding: 1.5rem; display: flex; flex-direction: column; gap: .3rem; }
.tbx-card .tbx-price { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; margin: .1em 0; }
.tbx-card .tbx-permeta { color: var(--tbx-muted); font-size: .88rem; }
/* El «/mes» pegado al precio: mismo tamaño que el resto de la letra normal, para
   que el número siga mandando y el sufijo no compita con él. */
.tbx-price-per { font-size: .5em; font-weight: 400; opacity: .7; margin-left: .15em; }
/* «Ver todos los paquetes», cuando se ha llegado con uno ya elegido. */
.tbx.tbx .tbx-see-all { display: block; margin: .8rem auto 0; }
.tbx-card .tbx-meta { list-style: none; padding: 0; margin: .8rem 0 1.2rem; font-size: .86rem; color: var(--tbx-muted); display: grid; gap: .3em; }
.tbx-card .tbx-meta li::before { content: "▸ "; color: var(--tbx-green); }
.tbx-card .tbx-btn, .tbx-card .tbx-btn-ghost { margin-top: auto; }
.tbx-card .tbx-btn + .tbx-btn-ghost { margin-top: .5rem; }

/* ---------- agenda entrenador ---------- */
.tbx-agenda-day { margin-bottom: 1.6rem; }
.tbx-agenda-date { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--tbx-muted); border-bottom: 1px solid var(--tbx-line); padding-bottom: .5em; margin-bottom: .7rem; }
.tbx-agenda-item { display: flex; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--tbx-line); }
.tbx-agenda-time { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4.2rem; }
.tbx-agenda-note { font-size: .87rem; color: var(--tbx-muted); font-style: italic; }

/* ---------- varios ---------- */
.tbx-wall { text-align: center; padding: 2.6rem 1.4rem; background: var(--tbx-sand-soft); border-radius: var(--tbx-radius); }
.tbx-feedback { font-size: .9rem; margin-top: .8rem; }
.tbx-feedback.is-error { color: var(--tbx-danger); }
.tbx-feedback.is-ok { color: var(--tbx-green-dark); }
.tbx-nav { margin-top: 1.4rem; }
.tbx-loading { color: var(--tbx-muted); font-size: .9rem; }
.tbx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
	.tbx *, .tbx *::before { transition: none !important; animation: none !important; }
}

/* ============================================================
   Eventos, extras, cupones, recurrencia y calendarios
   ============================================================ */

.tbx-event-grid {
	display: grid;
	gap: 1.2rem;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
}

.tbx-event-card {
	background: #fff;
	border: 1px solid var( --tbx-line );
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease;
}
.tbx-event-card:hover { transform: translateY( -3px ); box-shadow: 0 14px 34px -22px rgba( 12, 26, 20, .5 ); }
.tbx-event-card.is-full { opacity: .72; }

.tbx-event-img { height: 150px; background-size: cover; background-position: center; }
.tbx-event-img-empty { opacity: .18; }

.tbx-event-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }

.tbx-event-date {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	background: var( --tbx-soft );
	border-radius: 9px;
	padding: .45em .7em;
	align-self: flex-start;
	margin: 0;
}
.tbx-event-date strong { font-size: 1.25rem; color: var( --tbx-green-dark ); }
.tbx-event-date span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var( --tbx-muted ); margin-top: .2em; }

.tbx-event-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.25; }

.tbx-event-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; font-size: .82rem; color: var( --tbx-muted ); }
.tbx-event-meta li { background: var( --tbx-soft ); border-radius: 999px; padding: .22em .7em; }
.tbx-event-meta li.tbx-low { background: #FDF0DC; color: #92600C; font-weight: 600; }

.tbx-event-desc { margin: 0; font-size: .9rem; color: #46564E; line-height: 1.55; flex: 1; }

.tbx-event-detail { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media ( min-width: 860px ) { .tbx-event-detail { grid-template-columns: 1.4fr 1fr; } }
.tbx-event-side { background: var( --tbx-soft ); border-radius: 14px; padding: 1.4rem; align-self: start; }

.tbx-date-list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .5rem; }
.tbx-date-list li { display: flex; justify-content: space-between; gap: 1rem; background: #fff; border: 1px solid var( --tbx-line ); border-radius: 9px; padding: .55em .8em; font-size: .88rem; }
.tbx-date-list li span { color: var( --tbx-muted ); }

.tbx-tickets { display: grid; gap: .5rem; margin-bottom: 1.2rem; }
.tbx-pay-option.is-disabled { opacity: .5; pointer-events: none; }

/* modal */
.tbx-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba( 12, 26, 20, .55 );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.2rem;
	backdrop-filter: blur( 3px );
}
.tbx-modal[hidden] { display: none; }
.tbx-modal-box {
	background: #fff;
	border-radius: 16px;
	max-width: 620px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	position: relative;
	padding: 1.8rem;
}
.tbx-modal-close {
	position: absolute;
	top: .7rem;
	right: .9rem;
	background: none;
	border: 0;
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
	color: var( --tbx-muted );
}
.tbx-modal-img { height: 180px; border-radius: 11px; background-size: cover; background-position: center; margin-bottom: 1.1rem; }
.tbx-modal-desc { font-size: .93rem; line-height: 1.65; color: #46564E; margin-bottom: 1.2rem; }

/* extras */
.tbx-sub { font-size: .95rem; margin: 1.5rem 0 .7rem; }
.tbx-extras { display: grid; gap: .5rem; }
.tbx-extra {
	display: flex;
	align-items: center;
	gap: .8rem;
	border: 1px solid var( --tbx-line );
	border-radius: 10px;
	padding: .7em .9em;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.tbx-extra:hover { border-color: var( --tbx-green ); }
.tbx-extra.is-on { border-color: var( --tbx-green ); background: var( --tbx-soft ); }
.tbx-extra-main { flex: 1; display: flex; flex-direction: column; }
.tbx-extra-main small { color: var( --tbx-muted ); font-size: .8rem; }
.tbx-extra-price { font-weight: 600; font-size: .87rem; white-space: nowrap; }
.tbx-extra-qty { border: 1px solid var( --tbx-line ); border-radius: 7px; padding: .2em .4em; }

/* campos personalizados */
.tbx-req { color: #B3261E; }
.tbx-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.tbx-choice { display: inline-flex; align-items: center; gap: .35em; border: 1px solid var( --tbx-line ); border-radius: 999px; padding: .35em .85em; font-size: .87rem; cursor: pointer; }

/* cupón */
.tbx-coupon { display: flex; gap: .5rem; margin-top: 1rem; }
.tbx-coupon input { flex: 1; text-transform: uppercase; }
.tbx-coupon-msg { font-size: .85rem; margin: .5em 0 0; }
.tbx-coupon-msg.is-ok { color: var( --tbx-green-dark ); font-weight: 600; }
.tbx-coupon-msg.is-error { color: #B3261E; }

/* recurrencia */
.tbx-weekday { display: inline-flex; align-items: center; gap: .3em; margin-right: .5em; font-size: .85rem; }
.tbx-rec-list { list-style: none; margin: .8rem 0; padding: 0; display: grid; gap: .3rem; max-height: 260px; overflow-y: auto; }
.tbx-rec-list li { font-size: .87rem; padding: .4em .7em; border-radius: 7px; background: var( --tbx-soft ); }
.tbx-rec-list li.is-busy { background: #FBEDEB; color: #8C2F26; text-decoration: line-through; }
.tbx-rec-list li small { text-decoration: none; opacity: .8; }

/* calendarios conectados */
.tbx-cal-conn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	border: 1px solid var( --tbx-line );
	border-radius: 11px;
	padding: .9em 1.1em;
	margin-bottom: .6rem;
}
.tbx-cal-conn.is-on { border-color: var( --tbx-green ); background: var( --tbx-soft ); }
.tbx-cal-conn small { display: block; color: var( --tbx-muted ); font-size: .8rem; margin-top: .15em; }
.tbx-conn-actions { display: flex; gap: .5rem; align-items: center; }

/* catálogo por categorías */
.tbx-cat { margin-bottom: 2.6rem; }
.tbx-cat-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.tbx-cat-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.tbx-cat-head h2 { margin: 0; font-size: 1.25rem; }
.tbx-cat-desc { color: var( --tbx-muted ); margin: 0 0 1.1rem; font-size: .92rem; }

/* ------------------------------------- Panel de entrenador, perfil y calendarios */

.tbx-coach-reports,
.tbx-coach-schedule { margin-top:40px; padding-top:28px; border-top:1px solid #DFE7E2; }
.tbx-coach-reports h4,
.tbx-coach-schedule h4 { margin:28px 0 12px; font-size:15px; }

.tbx-report-form .tbx-field,
.tbx-profile-form .tbx-field { margin-bottom:16px; }
.tbx-report-form input[type="file"] { display:block; margin-top:6px; }

.tbx-report-row { display:flex; align-items:center; gap:12px; }
.tbx-report-row .tbx-report { flex:1; }

.tbx-sched-grid { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.tbx-sched-row { display:grid; grid-template-columns:1.2fr .8fr .8fr 1.2fr auto; gap:8px; align-items:center; }
.tbx-sched-row select,
.tbx-sched-row input { width:100%; }

.tbx-timeoff-add-row { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:8px; align-items:center; margin-bottom:14px; }
.tbx-timeoff-row { display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid #F0F4F2; font-size:14px; }
.tbx-timeoff-row em { color:#6C7F76; font-style:normal; font-size:13px; }

.tbx-add-cal { display:inline-flex; gap:8px; align-items:center; margin-right:10px; }
.tbx-cal-link { font-size:12px; color:#6C7F76; text-decoration:none; border:1px solid #DFE7E2;
  border-radius:20px; padding:3px 10px; white-space:nowrap; }
.tbx-cal-link:hover { color:#1B7F4C; border-color:#1B7F4C; }

@media (max-width:700px) {
  .tbx-sched-row,
  .tbx-timeoff-add-row { grid-template-columns:1fr 1fr; }
  /* Los botones de calendario NO se esconden en móvil: es justo donde la gente
     los usa. Antes había aquí un `display:none` que los hacía inútiles. */
}

/* --------------------------------------------------- Reserva recurrente */

.tbx-recurring { margin-top:28px; padding-top:24px; border-top:1px solid #DFE7E2; }
.tbx-rec-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:14px; }
.tbx-rec-grid label { display:flex; flex-direction:column; gap:5px; font-size:13px; color:#6C7F76; }
.tbx-rec-grid input, .tbx-rec-grid select { width:100%; }

.tbx-weekdays { border:0; padding:0; margin:0 0 16px; }
.tbx-weekdays legend { font-size:13px; color:#6C7F76; padding:0 0 8px; }
.tbx-weekday { display:inline-block; margin:0 6px 6px 0; }
.tbx-weekday input { position:absolute; opacity:0; pointer-events:none; }
.tbx-weekday span { display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid #DFE7E2; border-radius:50%; cursor:pointer;
  font-size:13px; font-weight:600; color:#6C7F76; transition:.15s; }
.tbx-weekday input:checked + span { background:#1B7F4C; border-color:#1B7F4C; color:#fff; }
.tbx-weekday input:focus-visible + span { outline:2px solid #1B7F4C; outline-offset:2px; }

.tbx-rec-list { list-style:none; padding:0; margin:14px 0; max-height:260px; overflow-y:auto; }
.tbx-rec-list li { padding:8px 12px; border-radius:6px; margin-bottom:4px; font-size:14px; }
.tbx-rec-list .is-free { background:#F0F7F3; color:#12211A; }
.tbx-rec-list .is-busy { background:#FBF3F3; color:#8C6C6C; text-decoration:line-through; }
.tbx-rec-list small { text-decoration:none; display:inline-block; margin-left:6px; font-size:12px; }

/* ---------- acciones del alumno y del profesor ---------- */
.tbx-hero-side { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.tbx-hero-cta { white-space: nowrap; }
.tbx-my-coach { margin: -.6rem 0 1.2rem; }
.tbx-panel-cta { margin: 0 0 1.2rem; }
.tbx-btn-small { padding: .4em .8em; font-size: .82rem; }

.tbx-agenda-actions { display: flex; gap: .4em; align-items: center; flex-wrap: wrap; margin-left: auto; }
.tbx-agenda-item { display: flex; align-items: flex-start; gap: .8em; }

.tbx-reschedule {
	border: 1px solid var(--tbx-line); border-radius: var(--tbx-radius);
	background: var(--tbx-sand-soft); padding: .9rem 1rem; margin: .4rem 0 1rem;
}
.tbx-resch-row { display: flex; gap: .5em; flex-wrap: wrap; align-items: center; }
.tbx-reschedule .tbx-feedback { margin: .5em 0 0; }

/* ---------- bono a punto de agotarse ---------- */
.tbx-bono.is-running-out { border-color: var(--tbx-warn); }
.tbx-bono-renew {
	margin-top: .9rem; padding: .8rem .9rem; border-radius: 10px;
	background: var(--tbx-sand-soft); border: 1px solid var(--tbx-sand);
}
.tbx-bono-renew p { margin: 0 0 .6em; font-size: .9rem; }

/* ---------- hándicap: de dónde vienes y dónde estás ---------- */
.tbx-hcp-cards { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1.4rem; }
.tbx-hcp-card {
	border: 1px solid var(--tbx-line); border-radius: var(--tbx-radius);
	padding: .9rem 1rem; background: #fff; display: flex; flex-direction: column; gap: .15em;
}
.tbx-hcp-card span { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tbx-muted); }
.tbx-hcp-card strong { font-size: 1.7rem; line-height: 1.1; }
.tbx-hcp-card em { font-style: normal; font-size: .78rem; color: var(--tbx-muted); }
.tbx-hcp-card.is-good { border-color: var(--tbx-green); background: var(--tbx-green-soft); }
.tbx-hcp-card.is-good strong { color: var(--tbx-green-dark); }

/* ---------- compra sin cuenta previa ---------- */
.tbx-signup .tbx-grid-2 { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tbx-signup .tbx-field { display: flex; flex-direction: column; gap: .3em; }
.tbx-signup .tbx-field label { font-size: .85rem; font-weight: 600; color: var(--tbx-muted); }
.tbx-signup input[type="text"],
.tbx-signup input[type="email"],
.tbx-signup input[type="tel"],
.tbx-signup select {
	border: 1px solid var(--tbx-line); border-radius: 10px; padding: .65em .8em;
	background: #fff; color: var(--tbx-ink); font: inherit; width: 100%;
}
.tbx-signup input:focus, .tbx-signup select:focus { outline: 2px solid var(--tbx-green); outline-offset: 1px; }

.tbx-fieldset { border: 1px solid var(--tbx-line); border-radius: var(--tbx-radius); padding: 1rem 1.15rem; margin: 1.4rem 0; }
.tbx-fieldset legend { font-weight: 700; padding: 0 .4em; }
.tbx-signup .tbx-check { display: flex; align-items: center; gap: .5em; font-size: .95rem; margin: .3em 0; cursor: pointer; }
.tbx-signup .tbx-check input { width: auto; }
.tbx-hcp-fields { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--tbx-line); }

.tbx-packages { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: 1.4rem; }
.tbx-package {
	text-align: left; cursor: pointer; font: inherit; background: #fff; color: var(--tbx-ink);
	border: 1px solid var(--tbx-line); border-radius: var(--tbx-radius); padding: 1.05rem 1.15rem;
	transition: border-color .16s, box-shadow .16s, transform .12s;
}
.tbx-package:hover { border-color: var(--tbx-green); transform: translateY(-2px); box-shadow: var(--tbx-shadow); }
.tbx-package.is-selected { border-color: var(--tbx-green); background: var(--tbx-green-soft); }
.tbx-package h4 { margin: 0 0 .3em; font-size: 1.02rem; }
.tbx-package .tbx-price { font-size: 1.5rem; font-weight: 700; margin: 0 0 .2em; }
.tbx-package .tbx-meta { list-style: none; padding: 0; margin: .6em 0 0; font-size: .82rem; color: var(--tbx-muted); }

.tbx-notice { border: 1px solid var(--tbx-line); background: var(--tbx-sand-soft); border-radius: var(--tbx-radius); padding: 1rem 1.15rem; margin-bottom: 1.4rem; }
.tbx-notice-warn { border-color: var(--tbx-warn); background: #FCF6E8; }
.tbx-notice p:last-child { margin-bottom: 0; }

.tbx-signup .tbx-summary { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: .4em 1.2em; margin: 0 0 1.4rem; }
.tbx-signup .tbx-summary dt { color: var(--tbx-muted); font-size: .85rem; }
.tbx-signup .tbx-summary dd { margin: 0; font-weight: 600; }
.tbx-pay-modes { margin-bottom: 1.2rem; }
.tbx-feedback.is-error { color: var(--tbx-danger); font-weight: 600; }

/* ---------- blindaje frente al tema ----------
   Elementor y Jeg Kit estilan los botones con un selector de clase + tipo
   (.elementor-kit-NN button), que gana en especificidad a nuestras clases
   sueltas: los botones salían verdes, en mayúsculas y con radio de 50px, y el
   texto se desbordaba de la tarjeta. Repetimos .tbx para subir la especificidad
   por encima del tema sin recurrir a !important. */
.tbx.tbx button,
.tbx.tbx input,
.tbx.tbx select,
.tbx.tbx textarea {
	font-family: inherit; font-size: inherit; font-weight: inherit;
	line-height: 1.55; letter-spacing: normal; text-transform: none;
	box-shadow: none; min-height: 0; min-width: 0; width: auto;
	text-shadow: none; white-space: normal; text-align: left;
}

.tbx.tbx .tbx-service {
	background: #fff; color: var(--tbx-ink);
	border: 1px solid var(--tbx-line); border-radius: var(--tbx-radius);
	padding: 1.05rem 1.15rem; width: 100%;
}
.tbx.tbx .tbx-service.is-selected { background: var(--tbx-green-soft); border-color: var(--tbx-green); }

.tbx.tbx .tbx-slot {
	display: flex; align-items: baseline; justify-content: space-between; gap: .6em;
	background: #fff; color: var(--tbx-ink);
	border: 1px solid var(--tbx-line); border-radius: 10px;
	padding: .68em .9em; width: 100%;
}
.tbx.tbx .tbx-slot.is-selected { background: var(--tbx-green); border-color: var(--tbx-green); color: #fff; }

.tbx.tbx .tbx-day {
	display: grid; place-items: center; text-align: center;
	background: transparent; color: var(--tbx-ink);
	border: 1px solid transparent; border-radius: 9px; padding: 0;
}
.tbx.tbx .tbx-day.has-slots { background: var(--tbx-green-soft); color: var(--tbx-green-dark); }
.tbx.tbx .tbx-day.is-selected { background: var(--tbx-green); color: #fff; }
.tbx.tbx .tbx-day.is-off { background: transparent; color: #C3CFC8; }

.tbx.tbx .tbx-cal-nav {
	background: #fff; color: var(--tbx-ink);
	border: 1px solid var(--tbx-line); border-radius: 8px; padding: 0;
}

.tbx.tbx .tbx-btn { background: var(--tbx-green); color: #fff; border-radius: 10px; padding: .78em 1.4em; }
.tbx.tbx .tbx-btn-lg { width: 100%; padding: 1em 1.4em; }
.tbx.tbx .tbx-btn-ghost {
	background: transparent; color: var(--tbx-green-dark);
	border: 1px solid var(--tbx-line); border-radius: 10px; padding: .78em 1.4em;
}
.tbx.tbx .tbx-tabs button { background: transparent; color: var(--tbx-muted); border-radius: 0; padding: .7em 1em; }
.tbx.tbx .tbx-modal-close { background: transparent; color: var(--tbx-ink); border: 0; border-radius: 0; padding: 0; }
.tbx.tbx .tbx-package {
	background: #fff; color: var(--tbx-ink);
	border: 1px solid var(--tbx-line); border-radius: var(--tbx-radius);
	padding: 1.05rem 1.15rem; width: 100%;
}
.tbx.tbx .tbx-package.is-selected { background: var(--tbx-green-soft); border-color: var(--tbx-green); }
.tbx.tbx .tbx-link-danger {
	background: none; border: 0; border-radius: 0; padding: 0;
	color: var(--tbx-danger); font-size: .85rem; text-decoration: underline;
}

/* ============================================================
   Cómo funciona · paquetes multiservicio · torneos · responsive
   ============================================================ */

/* ---------- cómo funciona ---------- */
.tbx-how { margin: 0 auto 2.6rem; }
.tbx-how-title { font-size: 1.5rem; margin-bottom: .2em; }
.tbx-how-lead { color: var(--tbx-muted); margin-bottom: 1.6rem; }

.tbx-how-steps {
	list-style: none; margin: 0 0 1.6rem; padding: 0;
	display: grid; gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	counter-reset: tbxhow;
}
.tbx-how-step {
	position: relative; background: #fff; border: 1px solid var(--tbx-line);
	border-radius: var(--tbx-radius); padding: 1.3rem 1.2rem 1.2rem;
	display: flex; flex-direction: column; gap: .45rem;
}
/* La línea que une los pasos solo tiene sentido cuando van en fila. */
@media (min-width: 900px) {
	.tbx-how-step:not(:last-child)::after {
		content: ""; position: absolute; top: 2.35rem; right: -1rem; width: 1rem;
		border-top: 2px dashed var(--tbx-sand);
	}
}
.tbx-how-icon {
	width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center;
	background: var(--tbx-green-soft); color: var(--tbx-green-dark);
}
.tbx-how-icon svg { width: 1.4rem; height: 1.4rem; }
.tbx-how-num {
	position: absolute; top: 1rem; right: 1.1rem;
	font-size: .72rem; font-weight: 800; letter-spacing: .1em;
	color: var(--tbx-muted); background: var(--tbx-sand-soft);
	border-radius: 999px; width: 1.7em; height: 1.7em; display: grid; place-items: center;
}
.tbx-how-step h3 { font-size: 1rem; margin: .2em 0 0; }
.tbx-how-step p { font-size: .89rem; color: #46564E; margin: 0; line-height: 1.55; }
.tbx-how-cta { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ---------- desglose de un paquete multiservicio ---------- */
.tbx-pack-lines { list-style: none; margin: .9rem 0 1rem; padding: 0; display: grid; gap: .4rem; }
.tbx-pack-lines li {
	display: flex; align-items: baseline; gap: .55em; flex-wrap: wrap;
	background: var(--tbx-sand-soft); border: 1px solid var(--tbx-sand);
	border-radius: 10px; padding: .5em .75em; font-size: .88rem;
}
.tbx-pack-lines li strong {
	background: var(--tbx-green); color: #fff; border-radius: 6px;
	padding: .1em .5em; font-size: .82rem; font-variant-numeric: tabular-nums;
}
.tbx-pack-lines li span { flex: 1 1 auto; }
.tbx-pack-lines li small { color: var(--tbx-muted); }
.tbx-pack-lines li em {
	font-style: normal; font-size: .76rem; font-weight: 600;
	color: var(--tbx-warn); white-space: nowrap;
}

/* Mismo desglose, ya comprado, en el área del cliente. */
.tbx-bono-items { list-style: none; margin: .9rem 0 .6rem; padding: 0; display: grid; gap: .4rem; }
.tbx-bono-items li {
	display: flex; align-items: center; gap: .6em; flex-wrap: wrap;
	border: 1px solid var(--tbx-line); border-radius: 10px; padding: .55em .8em;
	font-size: .89rem; background: #fff;
}
.tbx-bono-items li.is-done { opacity: .55; }
.tbx-bono-item-name { flex: 1 1 55%; }
.tbx-bono-item-name small { color: var(--tbx-muted); }
.tbx-bono-item-name em {
	display: block; font-style: normal; font-size: .75rem; color: var(--tbx-muted);
}
.tbx-bono-item-count { font-variant-numeric: tabular-nums; color: var(--tbx-muted); font-size: .82rem; }
.tbx-bono-item-count strong { font-size: 1.15rem; color: var(--tbx-ink); }
.tbx-bono-items .tbx-btn-small { margin-left: auto; }

/* ---------- torneos ---------- */
.tbx-tournament-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: auto; }
.tbx-link-quiet { font-size: .84rem; color: var(--tbx-muted); text-decoration: underline; }
.tbx-event-meta li.tbx-live { background: var(--tbx-green-soft); color: var(--tbx-green-dark); font-weight: 600; }

.tbx-live-wrap { margin-top: 1rem; border-top: 1px solid var(--tbx-line); padding-top: .8rem; }
.tbx-live-wrap > summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
/* Tabla de clasificación, rellenada desde la hoja de Google. */
.tbx-score { margin: .8rem 0 .4rem; }
.tbx-score-table {
	width: 100%; border-collapse: collapse; font-size: .88rem;
	border: 1px solid var(--tbx-line); border-radius: 10px; overflow: hidden;
}
.tbx-score-table th {
	text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--tbx-muted); background: var(--tbx-sand-soft);
	padding: .55em .7em; border-bottom: 1px solid var(--tbx-line); font-weight: 700;
}
.tbx-score-table td { padding: .5em .7em; border-bottom: 1px solid var(--tbx-line); }
.tbx-score-table tr:last-child td { border-bottom: 0; }
.tbx-score-pos { width: 3.2em; color: var(--tbx-muted); font-variant-numeric: tabular-nums; }
.tbx-score-res { width: 6em; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.tbx-score-res.is-under { color: var(--tbx-green-dark); }
.tbx-score-res.is-over  { color: var(--tbx-danger); }
.tbx-score-res.is-even  { color: var(--tbx-ink); }
/* Sin filas, la cabecera sola no dice nada: se esconde hasta que haya datos. */
.tbx-score:not(.has-rows) .tbx-score-table { display: none; }
.tbx-score-status { font-size: .87rem; color: var(--tbx-muted); margin: .4em 0 0; }

/* ---------- tarjetas de la tienda ---------- */
/* La sede a la que está atado un bono. Se marca porque decide dónde se puede
   gastar, y enterarse después de pagar es el peor momento posible. */
.tbx-meta-center { color: var(--tbx-green-dark); }
.tbx-bono-center { margin: .1rem 0 .6rem; font-size: .85rem; color: var(--tbx-green-dark); }
.tbx-center-locked { margin: 0 0 .9rem; }

.tbx-card-pack { position: relative; }
/* El aviso de la compra, dentro de su tarjeta y no en el pie de la tienda. */
.tbx-card-pack .tbx-buy-msg { margin-top: .6rem; margin-bottom: 0; line-height: 1.35; }
.tbx-card-pack .tbx-desc { font-size: .89rem; color: #46564E; }
.tbx-card-pack.has-lines .tbx-permeta { font-size: .82rem; }

/* ============================================================
   Responsive: nada del front debe obligar a hacer scroll lateral
   ============================================================ */

.tbx img, .tbx svg, .tbx iframe { max-width: 100%; }
.tbx table { width: 100%; }
/* Cualquier tabla ancha se desplaza dentro de su caja, nunca la página. */
.tbx-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 900px) {
	.tbx { max-width: 100%; }
	.tbx-how-steps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

@media (max-width: 640px) {
	.tbx-hero { flex-direction: column; align-items: flex-start; gap: .8rem; }
	.tbx-hero-side { width: 100%; justify-content: space-between; }
	.tbx-hero-cta { flex: 1 1 auto; text-align: center; justify-content: center; }
	.tbx-hello { font-size: 1.35rem; }

	/* Los pasos del asistente se aprietan pero siguen legibles y sin scroll. */
	.tbx-steps { gap: .3rem; }
	.tbx-steps li { font-size: .74rem; padding: .4em .7em .4em .4em; }

	.tbx-how-steps { grid-template-columns: 1fr; }
	.tbx-how-cta .tbx-btn,
	.tbx-how-cta .tbx-btn-ghost { flex: 1 1 100%; }

	.tbx-services,
	.tbx-packages,
	.tbx-cards,
	.tbx-event-grid { grid-template-columns: 1fr; }

	.tbx-signup .tbx-grid-2 { grid-template-columns: 1fr; }
	.tbx-summary dl,
	.tbx-signup .tbx-summary { grid-template-columns: 1fr; gap: .15em; }
	.tbx-signup .tbx-summary dt { margin-top: .5em; }

	.tbx-booking-row { gap: .7rem; }
	.tbx-booking-row .tbx-status { margin-left: auto; }
	.tbx-bono-items li { font-size: .85rem; }
	.tbx-bono-items .tbx-btn-small { margin-left: 0; width: 100%; justify-content: center; }

	.tbx-tournament-actions .tbx-btn,
	.tbx-tournament-actions .tbx-btn-ghost { flex: 1 1 100%; justify-content: center; }

	/* El calendario se queda sin sitio para un aspecto 1:1 con 7 columnas. */
	.tbx-day { aspect-ratio: auto; min-height: 2.6rem; }
	.tbx-cal-grid { gap: 2px; }
	.tbx-modal { padding: 0; }
	.tbx-modal-box { border-radius: 0; max-height: 100vh; padding: 1.2rem; }
}

@media (max-width: 400px) {
	.tbx-steps li span { display: none; }
	.tbx-cal-dow { font-size: .6rem; }
}

/* ---------- bienvenida al volver del pago ---------- */
.tbx-welcome {
	border: 1px solid var(--tbx-green); background: var(--tbx-green-soft);
	border-radius: var(--tbx-radius); padding: 1.4rem 1.5rem; margin-bottom: 1.6rem;
}
.tbx-welcome h2 { color: var(--tbx-green-dark); font-size: 1.3rem; }
.tbx-welcome .tbx-pack-lines li { background: #fff; border-color: var(--tbx-line); }
.tbx-welcome .tbx-hint { margin-bottom: 1rem; }

/* ============================================================
   2.7.0 — Cabeceras propias, ficha de usuario, torneos y asistente
   ============================================================ */

/* ---------- cabecera de página ----------
   Una franja baja, no una portada: rotula la página sin comerse la pantalla.
   La foto va difuminada y oscurecida para que el texto se lea siempre, salga
   la foto que salga. */
.tbx-hero-band {
	position: relative; overflow: hidden; isolation: isolate;
	border-radius: var(--tbx-radius);
	margin: 0 auto 1.8rem; padding: 2.4rem 2rem 2.2rem;
	background: var(--tbx-green-dark); color: #fff;
	max-width: 980px;
}
.tbx-hero-bg {
	position: absolute; inset: -24px; z-index: 0;
	background-size: cover; background-position: center;
	filter: blur(3px) saturate(1.05);
	transform: scale(1.06);
}
.tbx-hero-band.has-image::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(105deg, rgba(15,78,48,.94) 0%, rgba(15,78,48,.78) 45%, rgba(18,33,26,.55) 100%);
}
.tbx-hero-inner { max-width: 46rem; position: relative; z-index: 2; }
.tbx-hero-eyebrow {
	font-size: .7rem; text-transform: uppercase; letter-spacing: .14em;
	font-weight: 700; opacity: .8; margin: 0 0 .35em;
}
.tbx-hero-title { font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.1; margin: 0 0 .3em; color: #fff; }
.tbx-hero-sub { font-size: 1rem; opacity: .92; margin: 0; max-width: 44ch; }
.tbx-hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.1rem 0 0; }
.tbx-hero-band .tbx-btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.tbx-hero-band .tbx-btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ---------- ficha del usuario ---------- */
.tbx-profile {
	position: relative; overflow: hidden; isolation: isolate;
	border-radius: var(--tbx-radius); margin-bottom: 1.6rem;
	background: var(--tbx-green-dark); color: #fff;
}
.tbx-profile-bg {
	position: absolute; inset: -24px; z-index: 0;
	background-size: cover; background-position: center;
	filter: blur(4px) saturate(1.05); transform: scale(1.08);
}
.tbx-profile.has-image::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(120deg, rgba(15,78,48,.95) 0%, rgba(15,78,48,.8) 50%, rgba(18,33,26,.6) 100%);
}
.tbx-profile-inner {
	position: relative; z-index: 2;
	display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap;
	padding: 1.8rem 1.9rem 1.5rem;
}
.tbx-avatar-xl {
	width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex: none;
	border: 3px solid rgba(255,255,255,.55); background: rgba(255,255,255,.15);
	box-shadow: 0 10px 30px -14px rgba(0,0,0,.7);
}
.tbx-avatar-xl img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tbx-profile-id { flex: 1 1 18rem; min-width: 0; }
.tbx-profile .tbx-eyebrow { color: rgba(255,255,255,.75); margin-bottom: .1em; }
.tbx-profile-name { font-size: clamp(1.45rem, 3.4vw, 2rem); line-height: 1.1; margin: 0 0 .25em; color: #fff; }
.tbx-profile-meta {
	display: flex; gap: .5rem 1.1rem; flex-wrap: wrap; margin: 0 0 .9em;
	font-size: .87rem; opacity: .88;
}
.tbx-profile-meta span { display: inline-flex; align-items: center; gap: .35em; }

.tbx-level { max-width: 26rem; }
.tbx-level-head { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; margin-bottom: .35em; }
.tbx-level-head strong { font-size: .95rem; }
.tbx-level-head small { font-size: .78rem; opacity: .8; }
.tbx-level-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.22); overflow: hidden; }
.tbx-level-bar span { display: block; height: 100%; border-radius: 99px; background: #EAD98F; }

.tbx-profile-side { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-left: auto; }
.tbx-profile .tbx-hcp-badge { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }
.tbx-profile .tbx-btn { background: #fff; color: var(--tbx-green-dark); }
.tbx-profile .tbx-btn:hover { background: var(--tbx-sand-soft); color: var(--tbx-green-dark); }

.tbx-stat-chips {
	position: relative; z-index: 2;
	list-style: none; margin: 0; padding: 0 1.9rem 1.4rem;
	display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.tbx-stat-chips li {
	background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
	border-radius: 12px; padding: .7em .9em; display: flex; flex-direction: column;
}
.tbx-stat-chips strong { font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tbx-stat-chips span { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; opacity: .82; }
.tbx-stat-chips li.is-live { background: rgba(234,217,143,.22); border-color: rgba(234,217,143,.5); }
.tbx-stat-chips li.is-empty { opacity: .62; }

/* ---------- dos columnas de contenido ---------- */
.tbx-two-col { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.tbx-card-soft {
	background: #fff; border: 1px solid var(--tbx-line); border-radius: var(--tbx-radius);
	padding: 1.3rem 1.4rem;
}
.tbx-card-soft h3 { margin-top: 0; }
.tbx-col-side h3, .tbx-col-main h3 { font-size: 1.02rem; margin: 0 0 .8rem; }
.tbx-col-main > h3:not(:first-child) { margin-top: 1.8rem; }

.tbx-empty-sm { padding: 1.2rem 1rem; text-align: left; }
.tbx-empty-sm p { margin: 0; font-size: .9rem; }

.tbx-details-soft { margin-top: 1rem; border-top: 1px solid var(--tbx-line); padding-top: .8rem; }
.tbx-details-soft > summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--tbx-green-dark); }
.tbx-details-soft p { margin: .6em 0 0; }

/* ---------- clases por mes ---------- */
.tbx-months {
	list-style: none; margin: 0 0 .6rem; padding: 0;
	display: flex; align-items: flex-end; gap: .45rem; height: 130px;
	border-bottom: 1px solid var(--tbx-line);
}
.tbx-months li {
	flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
	justify-content: flex-end; height: 100%; gap: .25em; min-width: 0;
}
.tbx-bar-col {
	width: 100%; max-width: 30px; border-radius: 6px 6px 0 0;
	background: linear-gradient(180deg, var(--tbx-green) 0%, var(--tbx-green-dark) 100%);
}
.tbx-months em { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--tbx-green-dark); }
.tbx-months small { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tbx-muted); }

/* ---------- añadir al calendario ---------- */
.tbx-add-cal { display: inline-flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.tbx-cal-btn {
	display: inline-flex; align-items: center; gap: .4em;
	font-size: .78rem; font-weight: 600; text-decoration: none;
	color: var(--tbx-green-dark); background: var(--tbx-green-soft);
	border: 1px solid transparent; border-radius: 999px; padding: .4em .85em;
	white-space: nowrap; transition: background .15s, border-color .15s;
}
.tbx-cal-btn:hover { border-color: var(--tbx-green); background: #DCEDE3; color: var(--tbx-green-dark); }
.tbx-cal-btn svg { width: 1em; height: 1em; flex: none; }

/* ---------- torneos ---------- */
.tbx-tourney {
	display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	background: #fff; border: 1px solid var(--tbx-line);
	border-radius: var(--tbx-radius); overflow: hidden; margin-bottom: 1.6rem;
}
.tbx-tourney.is-full { opacity: .82; }
.tbx-tourney.is-live { border-color: var(--tbx-green); box-shadow: 0 0 0 1px var(--tbx-green); }

.tbx-tourney-media { position: relative; min-height: 220px; background: var(--tbx-green-soft); }
.tbx-tourney-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tbx-tourney-noimg { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.6); }
.tbx-tourney-noimg svg { width: 42%; height: auto; max-width: 110px; }

.tbx-tourney-date {
	position: absolute; top: 1rem; left: 1rem; margin: 0;
	display: inline-flex; flex-direction: column; align-items: center; line-height: 1;
	background: #fff; border-radius: 11px; padding: .5em .75em;
	box-shadow: 0 6px 18px -8px rgba(12,26,20,.5);
}
.tbx-tourney-date strong { font-size: 1.4rem; color: var(--tbx-green-dark); }
.tbx-tourney-date span { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tbx-muted); margin-top: .25em; }

.tbx-tourney-flag {
	position: absolute; top: 1rem; right: 1rem;
	font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
	background: var(--tbx-green); color: #fff; border-radius: 999px; padding: .35em .8em;
}
.tbx-tourney-flag.is-full { background: var(--tbx-ink); }

.tbx-tourney-body { padding: 1.5rem 1.6rem; display: flex; flex-direction: column; }
.tbx-tourney-body h2 { font-size: 1.35rem; margin: 0 0 .8rem; }

.tbx-tourney-facts {
	list-style: none; margin: 0 0 1.1rem; padding: 1rem 0;
	display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	border-top: 1px solid var(--tbx-line); border-bottom: 1px solid var(--tbx-line);
}
.tbx-tourney-facts li { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.tbx-tourney-facts li > span:first-child {
	font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
	color: var(--tbx-muted); font-weight: 700;
}
.tbx-tourney-facts strong { font-size: .96rem; }
.tbx-tourney-facts small { font-size: .78rem; color: var(--tbx-muted); }
.tbx-fill { display: block; height: 4px; border-radius: 99px; background: var(--tbx-line); margin-top: .4em; overflow: hidden; }
.tbx-fill span { display: block; height: 100%; background: var(--tbx-green); border-radius: 99px; }

.tbx-tourney-desc { font-size: .93rem; line-height: 1.65; color: #46564E; }
.tbx-tourney-desc p { margin: 0 0 .8em; }
.tbx-tourney .tbx-sub { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tbx-muted); margin: 1.1rem 0 .5rem; }
.tbx-tourney-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 1.1rem; }

/* ---------- asistente de compra en dos paneles ---------- */
.tbx-wizard {
	display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
	background: #fff; border: 1px solid var(--tbx-line);
	border-radius: var(--tbx-radius); overflow: hidden;
}
.tbx-wizard-rail {
	background: var(--tbx-green-dark); color: #fff;
	padding: 1.6rem 1.3rem; display: flex; flex-direction: column; gap: 1.4rem;
}
.tbx-wizard-rail .tbx-steps { flex-direction: column; gap: .4rem; margin: 0; flex-wrap: nowrap; }
.tbx-wizard-rail .tbx-steps li {
	background: transparent; color: rgba(255,255,255,.72);
	padding: .6em .5em; font-size: .9rem; border-radius: 10px;
}
.tbx-wizard-rail .tbx-steps li span {
	background: rgba(255,255,255,.16); border-color: transparent; color: #fff;
}
.tbx-wizard-rail .tbx-steps li.is-active { background: rgba(255,255,255,.14); color: #fff; }
.tbx-wizard-rail .tbx-steps li.is-active span { background: #fff; color: var(--tbx-green-dark); border-color: #fff; }
.tbx-wizard-rail .tbx-steps li.is-done span { background: #EAD98F; color: var(--tbx-green-dark); border-color: #EAD98F; }

.tbx-wizard-help { margin-top: auto; border-top: 1px solid rgba(255,255,255,.2); padding-top: 1.1rem; font-size: .85rem; }
.tbx-wizard-help p { margin: 0 0 .35em; }
.tbx-wizard-help a { color: #fff; text-decoration: underline; }
.tbx-wizard-help-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; opacity: .75; font-weight: 700; }
.tbx-wizard-help-note { margin-top: .8em; opacity: .7; font-size: .78rem; }

.tbx-wizard-main { padding: 1.6rem 1.7rem; min-width: 0; }

/* ---------- responsive de todo lo anterior ---------- */
@media (max-width: 900px) {
	.tbx-two-col { grid-template-columns: 1fr; }
	.tbx-tourney { grid-template-columns: 1fr; }
	.tbx-tourney-media { min-height: 200px; max-height: 260px; }
}

@media (max-width: 760px) {
	/* El carril del asistente pasa a ser una tira de pasos arriba. */
	.tbx-wizard { grid-template-columns: 1fr; }
	.tbx-wizard-rail { padding: 1rem 1.1rem; gap: .8rem; }
	.tbx-wizard-rail .tbx-steps { flex-direction: row; overflow-x: auto; }
	.tbx-wizard-rail .tbx-steps li { flex: 1 0 auto; font-size: .8rem; }
	.tbx-wizard-help { display: none; }
	.tbx-wizard-main { padding: 1.2rem 1.1rem; }
}

@media (max-width: 640px) {
	.tbx-hero-band { border-radius: 0; padding: 1.8rem 1.2rem 1.6rem; }
	.tbx-profile-inner { padding: 1.3rem 1.2rem 1rem; gap: 1rem; }
	.tbx-avatar-xl { width: 68px; height: 68px; }
	.tbx-profile-side { margin-left: 0; width: 100%; }
	.tbx-profile-side .tbx-btn { flex: 1 1 auto; justify-content: center; }
	.tbx-stat-chips { padding: 0 1.2rem 1.2rem; grid-template-columns: repeat(2, 1fr); }
	.tbx-stat-chips strong { font-size: 1.25rem; }
	.tbx-tourney-body { padding: 1.2rem 1.1rem; }
	.tbx-tourney-facts { grid-template-columns: repeat(2, 1fr); }
	.tbx-months { height: 104px; }
	.tbx-add-cal { width: 100%; }
	.tbx-cal-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- blindaje de las cabeceras frente al tema ----------
   El tema hijo estila los encabezados con selectores más específicos que una
   clase suelta: el título de la cabecera salía en verde oscuro sobre verde
   oscuro, ilegible. Se repite la clase para ganar especificidad sin !important,
   igual que ya se hace con los botones más arriba.

   La cursiva de display SÍ se respeta: es la letra de la marca y queda bien;
   lo único que había que corregir era el color y el tamaño desbocado. */
.tbx-hero-band.tbx-hero-band .tbx-hero-title,
.tbx-hero-band.tbx-hero-band .tbx-hero-eyebrow,
.tbx-hero-band.tbx-hero-band .tbx-hero-sub {
	color: #fff;
}
.tbx-hero-band.tbx-hero-band .tbx-hero-title {
	font-size: clamp(1.7rem, 4vw, 2.6rem);
	line-height: 1.05;
	margin: 0 0 .3em;
	text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.tbx-hero-band.tbx-hero-band .tbx-hero-sub { text-shadow: 0 1px 10px rgba(0,0,0,.35); }

.tbx-profile.tbx-profile .tbx-profile-name,
.tbx-profile.tbx-profile .tbx-eyebrow,
.tbx-profile.tbx-profile .tbx-profile-meta,
.tbx-profile.tbx-profile .tbx-level-head,
.tbx-profile.tbx-profile .tbx-stat-chips strong,
.tbx-profile.tbx-profile .tbx-stat-chips span {
	color: #fff;
}
.tbx-profile.tbx-profile .tbx-profile-name {
	font-size: clamp(1.5rem, 3.4vw, 2.1rem);
	line-height: 1.05;
	margin: 0 0 .25em;
	text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.tbx-profile.tbx-profile .tbx-hcp-value,
.tbx-profile.tbx-profile .tbx-hcp-label { color: #fff; }

/* El tema pone márgenes generosos a los h2/h3; dentro de las tarjetas sobran. */
.tbx.tbx .tbx-tourney-body h2 { margin-top: 0; }
.tbx.tbx .tbx-card-soft h3,
.tbx.tbx .tbx-col-main h3,
.tbx.tbx .tbx-col-side h3 { margin-top: 0; }

/* ============================================================
   2.8.0 — Reservar dentro del área, foto de perfil, calendario nativo
   ============================================================ */

/* ---------- paso 1 de la reserva: lo tuyo primero, en lista ---------- */
.tbx-pick-title {
	font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
	color: var(--tbx-muted); margin: 0 0 .7rem; font-weight: 700;
}
.tbx-pick-list { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .55rem; }
.tbx-pick {
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	background: #fff; border: 1px solid var(--tbx-line); border-left: 4px solid var(--tbx-green);
	border-radius: 12px; padding: .85em 1.1em;
}
.tbx-pick.is-done { opacity: .6; border-left-color: var(--tbx-line); }
.tbx-pick-count {
	display: flex; flex-direction: column; align-items: center; line-height: 1;
	min-width: 3.2rem; flex: none;
}
.tbx-pick-count strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; color: var(--tbx-green-dark); }
.tbx-pick-count small { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tbx-muted); }
.tbx-pick-main { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: .1em; }
.tbx-pick-main strong { font-size: 1rem; }
.tbx-pick-main span { font-size: .84rem; color: var(--tbx-muted); }
.tbx-pick .tbx-btn-small { margin-left: auto; }
.tbx-pick-empty { margin-left: auto; font-size: .82rem; color: var(--tbx-muted); font-weight: 600; }

/* El catálogo completo, plegado cuando ya tienes paquete. */
.tbx-more-services { margin-top: .4rem; }
.tbx-more-services > summary {
	cursor: pointer; font-size: .88rem; font-weight: 600;
	color: var(--tbx-green-dark); padding: .5em 0;
}
.tbx-services-grid {
	display: grid; gap: .7rem; margin-top: .8rem;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* ---------- foto de perfil ---------- */
.tbx-avatar-edit { display: flex; gap: 1.1rem; align-items: flex-start; flex-wrap: wrap; }
.tbx-avatar-edit .tbx-avatar-xl {
	width: 84px; height: 84px; border-color: var(--tbx-line); background: var(--tbx-sand-soft);
	box-shadow: none; flex: none;
}
.tbx-avatar-edit-actions { flex: 1 1 12rem; display: flex; flex-direction: column; gap: .5em; align-items: flex-start; }
/* El <input type=file> va oculto dentro del <label>: el label ES el botón. */
.tbx-avatar-pick { cursor: pointer; }
.tbx-avatar-edit .tbx-hint { margin: 0; }
.tbx-avatar-msg { margin: 0; min-height: 1.2em; }

/* ---------- suscripción al calendario ---------- */
.tbx-cal-subscribe { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; margin: 0 0 1rem; }
.tbx-cal-btn-lg {
	font-size: .9rem; padding: .7em 1em; border-radius: 10px;
	border-color: var(--tbx-line); justify-content: flex-start;
}
.tbx-cal-btn-lg svg { width: 1.15em; height: 1.15em; }
.tbx-ics-link {
	width: 100%; font-size: .78rem; font-family: Menlo, Consolas, monospace;
	padding: .55em .7em; border: 1px solid var(--tbx-line); border-radius: 8px;
	background: var(--tbx-sand-soft); color: var(--tbx-muted);
}

/* ---------- el asistente, dentro del área ---------- */
/* Sin esto la reserva hereda el ancho máximo de .tbx y se queda estrecha
   dentro de un contenedor que ya está centrado. */
.tbx-panel-app .tbx-booking { max-width: none; margin: 0; }
.tbx-panel-app .tbx-booking .tbx-steps { margin-bottom: 1.4rem; }

@media (max-width: 640px) {
	.tbx-pick { gap: .7rem; padding: .75em .9em; }
	.tbx-pick-count { min-width: 2.6rem; }
	.tbx-pick-count strong { font-size: 1.3rem; }
	.tbx-pick .tbx-btn-small,
	.tbx-pick-empty { margin-left: 0; width: 100%; text-align: center; justify-content: center; }
	.tbx-services-grid { grid-template-columns: 1fr; }
	.tbx-avatar-edit .tbx-avatar-xl { width: 64px; height: 64px; }
}

/* ============================================================
   2.9.0 — Panel del entrenador y cuadro de mando
   ============================================================ */

/* ---------- semana del entrenador ---------- */
.tbx-coach-navbar { justify-content: flex-start; gap: .5rem; margin-bottom: 1rem; }
.tbx-coach-navbar .tbx-week-title { flex: 1 1 auto; text-transform: none; }

.tbx-week {
	display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem;
	margin-bottom: 1.6rem;
}
.tbx-week-day {
	background: #fff; border: 1px solid var(--tbx-line); border-radius: 10px;
	padding: .5em .45em; min-height: 6.5rem; display: flex; flex-direction: column; gap: .3em;
}
.tbx-week-day.is-today { border-color: var(--tbx-green); box-shadow: 0 0 0 1px var(--tbx-green); }
.tbx-week-day.is-free { background: var(--tbx-sand-soft); }
.tbx-week-dow {
	margin: 0 0 .2em; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
	color: var(--tbx-muted); font-weight: 700; display: flex; flex-direction: column; align-items: center;
}
.tbx-week-dow strong { font-size: 1.1rem; color: var(--tbx-ink); letter-spacing: 0; }
.tbx-week-slot {
	display: block; font-size: .68rem; line-height: 1.3; border-radius: 6px;
	padding: .3em .4em; background: var(--tbx-green-soft); color: var(--tbx-green-dark);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tbx-week-slot strong { display: block; font-variant-numeric: tabular-nums; }
.tbx-week-slot.status-pending { background: #FFF3DC; color: var(--tbx-warn); }
.tbx-week-slot.status-cancelled { background: #FBEAE9; color: var(--tbx-danger); text-decoration: line-through; }
.tbx-week-empty { font-size: .68rem; color: var(--tbx-muted); text-align: center; margin-top: auto; }

/* ---------- alumnos ---------- */
.tbx-students-search { margin-bottom: 1rem; }
.tbx-students-search input {
	width: 100%; font: inherit; padding: .7em .9em;
	border: 1px solid var(--tbx-line); border-radius: 10px; background: #fff;
}
.tbx-students-list { display: grid; gap: .5rem; }
.tbx-student-card {
	display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left;
	background: #fff; border: 1px solid var(--tbx-line); border-radius: 12px;
	padding: .7em .9em; cursor: pointer; font: inherit; color: var(--tbx-ink);
	transition: border-color .15s, transform .12s;
}
.tbx-student-card:hover { border-color: var(--tbx-green); transform: translateY(-1px); }
.tbx-student-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.tbx-student-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15em; }
.tbx-student-main strong { font-size: .98rem; }
.tbx-student-main > span { font-size: .8rem; color: var(--tbx-muted); }
.tbx-student-left {
	display: flex; flex-direction: column; align-items: center; line-height: 1; flex: none;
}
.tbx-student-left strong { font-size: 1.35rem; color: var(--tbx-green-dark); font-variant-numeric: tabular-nums; }
.tbx-student-left small { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tbx-muted); }

.tbx-flag {
	display: inline-block; font-size: .64rem; font-weight: 800; text-transform: uppercase;
	letter-spacing: .05em; border-radius: 999px; padding: .2em .6em; margin-right: .3em;
	background: var(--tbx-line); color: var(--tbx-muted);
}
.tbx-flag.is-warn { background: #FFF3DC; color: var(--tbx-warn); }

/* ---------- ficha del alumno dentro del panel ---------- */
.tbx-student-back { margin-bottom: 1rem; }
.tbx-student-head { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.2rem; }
.tbx-student-head .tbx-avatar-xl {
	width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
	border: 3px solid var(--tbx-line); box-shadow: none; flex: none;
}
.tbx-student-head h2 { margin: 0 0 .2em; font-size: 1.4rem; }
.tbx-student-head .tbx-hint { margin: 0; }
.tbx-student-level { margin: .4em 0 0; font-size: .9rem; }
.tbx-student-level small { color: var(--tbx-muted); font-weight: 400; }

/* Los chips sobre fondo claro necesitan su propio color: los de la cabecera
   están pensados para ir sobre el verde oscuro. */
.tbx-chips-light { padding: 0; margin-bottom: 1.4rem; }
.tbx-chips-light li { background: var(--tbx-sand-soft); border-color: var(--tbx-sand); }
.tbx-chips-light strong { color: var(--tbx-green-dark); }
.tbx-chips-light span { color: var(--tbx-muted); opacity: 1; }

.tbx-mini-rows { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.tbx-mini-rows li {
	display: flex; align-items: center; gap: .8em; flex-wrap: wrap;
	background: #fff; border: 1px solid var(--tbx-line); border-radius: 9px;
	padding: .5em .8em; font-size: .87rem;
}
.tbx-mini-rows li strong { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.tbx-mini-rows li > span:not(.tbx-status) { flex: 1 1 auto; color: var(--tbx-muted); }

/* ---------- cuadro de mando ---------- */
.tbx-control-block { margin-bottom: 1.4rem; }
.tbx-section-title { font-size: 1.05rem; margin: 0 0 .3rem; }
.tbx-control .tbx-hint { margin-bottom: 1rem; }

.tbx-range-form select {
	font: inherit; padding: .5em .8em; border-radius: 10px;
	border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.14); color: #fff;
}
.tbx-range-form select option { color: var(--tbx-ink); }

.tbx-alerts {
	background: #FCF6E8; border: 1px solid var(--tbx-warn); border-radius: var(--tbx-radius);
	padding: 1.1rem 1.3rem; margin-bottom: 1.4rem;
}
.tbx-alerts .tbx-section-title { color: var(--tbx-warn); }
.tbx-alerts ul { margin: .4em 0 0; padding-left: 1.1em; }
.tbx-alerts li { font-size: .9rem; margin-bottom: .3em; }

/* Barras horizontales: comparan de un vistazo sin necesitar una librería. */
.tbx-barlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tbx-barlist li { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr auto; gap: .7rem; align-items: center; }
.tbx-barlist-name { font-size: .87rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-barlist-track { height: 10px; border-radius: 99px; background: var(--tbx-line); overflow: hidden; }
.tbx-barlist-track span {
	display: block; height: 100%; border-radius: 99px;
	background: linear-gradient(90deg, var(--tbx-green) 0%, var(--tbx-green-dark) 100%);
}
.tbx-barlist-value { font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.tbx-months-lg { height: 170px; }
.tbx-months-lg em { font-size: .7rem; }

.tbx-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tbx-table th {
	text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--tbx-muted); font-weight: 700; padding: .5em .7em;
	border-bottom: 1px solid var(--tbx-line); white-space: nowrap;
}
.tbx-table td { padding: .55em .7em; border-bottom: 1px solid var(--tbx-line); }
.tbx-table tr:last-child td { border-bottom: 0; }
.tbx-rate { font-weight: 700; }
.tbx-rate.is-good { color: var(--tbx-green-dark); }

.tbx-control-foot { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.6rem; }
.tbx-stat-chips li.is-warn { background: rgba(234,217,143,.25); border-color: rgba(234,217,143,.55); }

@media (max-width: 900px) {
	/* Siete columnas no caben: la semana pasa a dos filas de columnas anchas. */
	.tbx-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.tbx-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tbx-week-day { min-height: 5rem; }
	.tbx-student-card { gap: .7rem; }
	.tbx-student-avatar { width: 40px; height: 40px; }
	.tbx-barlist li { grid-template-columns: 1fr auto; }
	.tbx-barlist-track { grid-column: 1 / -1; }
	.tbx-control-foot .tbx-btn-ghost { flex: 1 1 100%; justify-content: center; }
	/* Tabla de fidelización: cada fila pasa a ficha. */
	.tbx-table thead { display: none; }
	.tbx-table tr { display: block; border: 1px solid var(--tbx-line); border-radius: 10px; margin-bottom: .6rem; padding: .4em .7em; }
	.tbx-table td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .35em 0; text-align: right; }
	.tbx-table td::before { content: attr(data-label); font-weight: 600; color: var(--tbx-muted); font-size: .78rem; text-align: left; }
}

/* ---------- blindaje de los botones nuevos frente al tema ----------
   Elementor y Jeg Kit estilan `button` con un selector de clase + tipo que gana
   a una clase suelta: la ficha de alumno salía como una pastilla verde entera y
   el texto no se leía. Se repite `.tbx` para subir especificidad, igual que ya
   se hace con el resto de botones del plugin. */
.tbx.tbx .tbx-student-card {
	background: #fff; color: var(--tbx-ink);
	border: 1px solid var(--tbx-line); border-radius: 12px;
	padding: .7em .9em; width: 100%; text-align: left;
	display: flex; align-items: center; gap: .9rem;
	text-transform: none; letter-spacing: normal; box-shadow: none;
	min-height: 0; font-weight: 400;
}
.tbx.tbx .tbx-student-card:hover { background: #fff; border-color: var(--tbx-green); color: var(--tbx-ink); }
.tbx.tbx .tbx-student-card strong { font-weight: 700; }

.tbx.tbx .tbx-pick {
	background: #fff; color: var(--tbx-ink);
	border: 1px solid var(--tbx-line); border-left: 4px solid var(--tbx-green);
	border-radius: 12px; text-transform: none; letter-spacing: normal;
}

.tbx.tbx .tbx-goto-tab,
.tbx.tbx .tbx-week-today,
.tbx.tbx .tbx-student-back {
	text-transform: none; letter-spacing: normal; box-shadow: none; min-height: 0;
}
.tbx.tbx .tbx-cal-btn {
	background: var(--tbx-green-soft); color: var(--tbx-green-dark);
	border: 1px solid transparent; border-radius: 999px; padding: .4em .85em;
	width: auto; text-transform: none; letter-spacing: normal; box-shadow: none;
	display: inline-flex; align-items: center; gap: .4em;
}
.tbx.tbx .tbx-cal-btn-lg { border-color: var(--tbx-line); border-radius: 10px; padding: .7em 1em; width: 100%; }
.tbx.tbx .tbx-avatar-pick { text-transform: none; letter-spacing: normal; }

/* El buscador de alumnos ocupaba media caja por el `width:auto` del blindaje. */
.tbx.tbx .tbx-students-search input { width: 100%; }
.tbx.tbx .tbx-ics-link { width: 100%; }

/* El paso 1 de la reserva ya no es una rejilla: dentro lleva la lista de lo que
   tienes pagado y, debajo, `.tbx-services-grid` con el catálogo. Dejarlo como
   grid metía esa rejilla interna dentro de una sola columna de la de fuera y
   todo el catálogo salía en fila india. */
.tbx-services { display: block; }

/* ============================================================
   2.10.0 — Acceso propio de TeeBox
   ============================================================ */

/* El muro dejó de ser un aviso con un enlace: ahora lleva dentro el formulario
   de acceso, porque wp-login.php está oculto en este hosting y cualquier
   enlace que calculásemos se quedaba congelado en la caché NGINX. */
.tbx-wall { padding: 2.4rem 1.2rem; }
.tbx-wall-card {
	max-width: 26rem; margin: 0 auto; text-align: left;
	background: #fff; border: 1px solid var(--tbx-line); border-radius: var(--tbx-radius);
	padding: 1.8rem 1.6rem; box-shadow: 0 10px 30px rgba(20,40,30,.07);
}
.tbx-wall .tbx-wall-title { margin: 0 0 .4rem; font-size: 1.35rem; }
.tbx-wall-lead { margin: 0 0 1.2rem; color: var(--tbx-muted); font-size: .93rem; line-height: 1.5; }
.tbx-wall-error {
	margin: 0 0 1rem; padding: .7em .9em; border-radius: 10px; font-size: .88rem;
	background: #FBEAE9; color: var(--tbx-danger); border: 1px solid rgba(191,58,44,.25);
}

.tbx-login-form .tbx-field { display: flex; flex-direction: column; gap: .35em; margin-bottom: .9rem; }
.tbx-login-form .tbx-field > span { font-size: .82rem; font-weight: 600; color: var(--tbx-muted); }
.tbx-login-form input[type="text"],
.tbx-login-form input[type="password"] {
	width: 100%; font: inherit; padding: .75em .9em; background: #fff;
	border: 1px solid var(--tbx-line); border-radius: 10px; color: var(--tbx-ink);
}
.tbx-login-form input[type="text"]:focus,
.tbx-login-form input[type="password"]:focus {
	outline: none; border-color: var(--tbx-green); box-shadow: 0 0 0 3px var(--tbx-green-soft);
}
.tbx-login-form .tbx-check {
	display: flex; align-items: center; gap: .55em; cursor: pointer;
	font-size: .87rem; color: var(--tbx-muted); margin: 0 0 1.1rem;
}
.tbx-login-form .tbx-check input { width: auto; margin: 0; flex: none; }
.tbx.tbx .tbx-login-form .tbx-btn { width: 100%; justify-content: center; }

.tbx-wall-links {
	margin: 1.1rem 0 0; font-size: .85rem; text-align: center;
	display: flex; flex-wrap: wrap; gap: .4em; justify-content: center;
}
.tbx-wall-links a { color: var(--tbx-green-dark); text-decoration: underline; }
.tbx-wall-links span { color: var(--tbx-muted); }

@media (max-width: 480px) {
	.tbx-wall { padding: 1.4rem .2rem; }
	.tbx-wall-card { padding: 1.4rem 1.1rem; border-radius: 14px; }
	.tbx-wall-links { flex-direction: column; gap: .5em; }
	.tbx-wall-links span { display: none; }
}

/* ============================================================
   2.10.0 — Cuadro de mando en pestañas, clientes y lista de clases
   ============================================================ */

/* Las pestañas del cuadro de mando van pegadas a la cabecera, igual que en
   /mi-area, para que se lean como una sola pieza. */
.tbx-control .tbx-tabs { margin-top: -.4rem; }

/* ---------- clientes ---------- */
.tbx-clients-table td { vertical-align: middle; }
.tbx-client-row { cursor: pointer; transition: background .12s; }
.tbx-client-row:hover,
.tbx-client-row:focus-visible { background: var(--tbx-sand-soft); outline: none; }
.tbx-client-row:focus-visible { box-shadow: inset 0 0 0 2px var(--tbx-green); }

.tbx-client-cell { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.tbx-client-cell img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.tbx-client-cell span { display: flex; flex-direction: column; min-width: 0; }
.tbx-client-cell small { color: var(--tbx-muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; }

.tbx-client-detail .tbx-student-head { margin-top: 1rem; }
.tbx.tbx .tbx-client-back { text-transform: none; letter-spacing: normal; box-shadow: none; min-height: 0; }

/* ---------- calendario del club ---------- */
.tbx-week-nav { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tbx-week-nav .tbx-week-title {
	flex: 1 1 12rem; margin: 0; font-weight: 700; font-size: .95rem; text-transform: none;
}
/* En el calendario del club una clase lleva alumno y profesor, así que la
   pastilla necesita dos líneas en vez de una. */
.tbx-club-week .tbx-week-slot { white-space: normal; line-height: 1.25; }
.tbx-club-week .tbx-week-slot em { display: block; font-style: normal; opacity: .75; font-size: .62rem; }

/* ---------- selección de la clase al subir un informe ---------- */
.tbx-class-field .tbx-field-label {
	display: block; font-weight: 600; font-size: .88rem; margin-bottom: .4em;
}
.tbx-class-list {
	display: grid; gap: .4rem; max-height: 17rem; overflow-y: auto;
	padding: .4rem; border: 1px solid var(--tbx-line); border-radius: 12px; background: var(--tbx-sand-soft);
}
.tbx-class-option {
	display: flex; align-items: center; gap: .7rem; cursor: pointer;
	background: #fff; border: 1px solid var(--tbx-line); border-radius: 10px;
	padding: .55em .8em; font-size: .88rem; transition: border-color .12s;
}
.tbx-class-option:hover { border-color: var(--tbx-green); }
.tbx-class-option input[type="radio"] { width: auto; margin: 0; flex: none; accent-color: var(--tbx-green); }
.tbx-class-option > span { display: flex; flex-direction: column; gap: .1em; flex: 1 1 auto; min-width: 0; }
.tbx-class-option small { color: var(--tbx-muted); font-size: .78rem; }
.tbx-class-option:has(input:checked) { border-color: var(--tbx-green); background: var(--tbx-green-soft); }
.tbx-class-manual { border-style: dashed; }
.tbx-class-manual input[type="date"] { width: auto; font: inherit; padding: .35em .5em; border: 1px solid var(--tbx-line); border-radius: 8px; }

/* Aviso de proveedor de calendario sin credenciales: mejor decirlo que dejar
   un botón que lleva a la pantalla de error de Google o de Microsoft. */
.tbx-conn-off {
	font-size: .82rem; color: var(--tbx-muted); background: var(--tbx-sand-soft);
	border: 1px dashed var(--tbx-line); border-radius: 999px; padding: .4em .9em; white-space: nowrap;
}

.tbx-report-actions { margin: 0 0 1.2rem; }

@media (max-width: 760px) {
	/* Igual que la tabla de fidelización: cada cliente pasa a ser una ficha. */
	.tbx-clients-table thead { display: none; }
	.tbx-clients-table tr { display: block; border: 1px solid var(--tbx-line); border-radius: 12px; margin-bottom: .6rem; padding: .5em .8em; }
	.tbx-clients-table td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .3em 0; text-align: right; }
	.tbx-clients-table td::before { content: attr(data-label); font-weight: 600; color: var(--tbx-muted); font-size: .78rem; text-align: left; }
	/* La celda del nombre es la cabecera de la ficha: ocupa la fila entera. */
	.tbx-clients-table td:first-child { display: block; text-align: left; padding-bottom: .5em; border-bottom: 1px solid var(--tbx-line); margin-bottom: .3em; }
	.tbx-clients-table td:first-child::before { display: none; }
}

@media (max-width: 640px) {
	.tbx-class-list { max-height: none; }
	.tbx-class-manual { flex-wrap: wrap; }
	.tbx-class-manual input[type="date"] { width: 100%; }
	.tbx-week-nav .tbx-week-title { flex: 1 1 100%; order: -1; text-align: center; }
	.tbx-control .tbx-tabs { overflow-x: auto; }
}

/* ============================================================
   2.10.0 — El asistente de compra, más visual
   ============================================================ */

/* ---------- carril: los pasos como un camino, no como una lista ---------- */
.tbx-wizard-rail .tbx-steps { position: relative; }
/* La línea que une los pasos: es lo que hace que se lea como un recorrido con
   principio y final, y no como tres viñetas sueltas. */
.tbx-wizard-rail .tbx-steps::before {
	content: ""; position: absolute; left: 1.42rem; top: 1.6rem; bottom: 1.6rem;
	width: 2px; background: rgba(255,255,255,.18); border-radius: 2px;
}
.tbx-wizard-rail .tbx-steps li { position: relative; z-index: 1; display: flex; align-items: center; gap: .7em; }
.tbx-wizard-rail .tbx-steps li span {
	width: 1.85rem; height: 1.85rem; border-radius: 50%; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: .82rem; transition: background .18s, color .18s, transform .18s;
}
.tbx-wizard-rail .tbx-steps li.is-active span { transform: scale(1.12); }
/* El paso cumplido deja de mostrar su número y muestra que está hecho. */
.tbx-wizard-rail .tbx-steps li.is-done span { font-size: 0; position: relative; }
.tbx-wizard-rail .tbx-steps li.is-done span::after {
	content: "✓"; font-size: .95rem; line-height: 1; color: var(--tbx-green-dark);
}

/* ---------- resumen vivo de la compra ---------- */
.tbx-wizard-cart {
	background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
	border-radius: 12px; padding: .9rem 1rem;
}
.tbx-cart-label {
	margin: 0 0 .3em; font-size: .66rem; text-transform: uppercase;
	letter-spacing: .1em; opacity: .75; font-weight: 700;
}
.tbx-cart-name { margin: 0; font-weight: 700; font-size: .96rem; line-height: 1.35; }
.tbx-cart-price { margin: .15em 0 0; font-size: 1.35rem; font-weight: 700; color: #EAD98F; }
.tbx-cart-lines { list-style: none; margin: .6em 0 0; padding: .6em 0 0; font-size: .8rem; border-top: 1px solid rgba(255,255,255,.18); }
.tbx-cart-lines li { opacity: .85; margin-bottom: .2em; }

/* ---------- paso 1: el producto manda ---------- */
.tbx-step-title { margin: 0 0 .2em; font-size: 1.3rem; }
.tbx-step-lead { margin: 0 0 1.2rem; color: var(--tbx-muted); font-size: .9rem; }
.tbx-step-actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin: 1.4rem 0 0; }

.tbx-packages { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* La tarjeta pasa a tener jerarquía: nombre, precio grande, qué incluye, y una
   marca clara de cuál está elegida (antes sólo cambiaba un borde fino). */
.tbx.tbx .tbx-package { position: relative; display: flex; flex-direction: column; padding-top: 1.15rem; }
.tbx.tbx .tbx-package.is-selected {
	border-color: var(--tbx-green); border-width: 2px; padding: calc(1.15rem - 1px) calc(1.15rem - 1px);
	box-shadow: 0 8px 24px rgba(27,127,76,.14);
}
/* Sello de elegido, arriba a la derecha. */
.tbx-package.is-selected::after {
	content: "✓"; position: absolute; top: .7rem; right: .8rem;
	width: 1.5rem; height: 1.5rem; border-radius: 50%;
	background: var(--tbx-green); color: #fff; font-size: .8rem; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.tbx-package .tbx-permeta { margin: 0 0 .5em; font-size: .82rem; color: var(--tbx-muted); }
.tbx-package .tbx-desc { margin: 0 0 .6em; font-size: .86rem; line-height: 1.45; }
.tbx-package .tbx-meta { margin-top: auto; padding-top: .6em; border-top: 1px solid var(--tbx-line); }

.tbx-pack-lines { list-style: none; margin: 0 0 .6em; padding: 0; display: grid; gap: .3rem; }
.tbx-pack-lines li {
	display: flex; align-items: baseline; gap: .5em; font-size: .85rem;
	background: var(--tbx-sand-soft); border-radius: 8px; padding: .35em .6em;
}
.tbx-pack-lines strong {
	background: var(--tbx-green); color: #fff; border-radius: 6px;
	padding: .05em .45em; font-size: .78rem; flex: none;
}
.tbx-pack-lines em { font-style: normal; color: var(--tbx-muted); font-size: .74rem; margin-left: auto; }
.tbx-pack-lines small { color: var(--tbx-muted); }

/* ---------- preferencias plegadas ---------- */
.tbx-prefs {
	margin-top: 1.3rem; border: 1px solid var(--tbx-line); border-radius: 12px;
	background: var(--tbx-sand-soft); overflow: hidden;
}
.tbx-prefs > summary {
	cursor: pointer; padding: .85em 1em; list-style: none;
	display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap;
}
.tbx-prefs > summary::-webkit-details-marker { display: none; }
.tbx-prefs > summary::after {
	content: "▾"; margin-left: auto; color: var(--tbx-muted); transition: transform .18s;
}
.tbx-prefs[open] > summary::after { transform: rotate(180deg); }
.tbx-prefs-title { font-weight: 700; font-size: .95rem; }
.tbx-prefs-note { color: var(--tbx-muted); font-size: .82rem; }
.tbx-prefs-body { padding: 0 1em 1em; }

@media (max-width: 760px) {
	/* El carril pasa arriba: los pasos van en fila y la línea que los une deja
	   de tener sentido en vertical. */
	.tbx-wizard-rail .tbx-steps::before { display: none; }
	.tbx-wizard-rail .tbx-steps li { flex-direction: column; gap: .3em; text-align: center; }
	.tbx-wizard-cart { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
	.tbx-wizard-cart .tbx-cart-label { flex: 1 1 100%; margin: 0; }
	.tbx-wizard-cart .tbx-cart-price { margin: 0; font-size: 1.15rem; }
	.tbx-wizard-cart .tbx-cart-lines { display: none; }
}

@media (max-width: 560px) {
	.tbx-packages { grid-template-columns: 1fr; }
	.tbx-step-actions { flex-direction: column-reverse; align-items: stretch; }
	.tbx.tbx .tbx-step-actions .tbx-btn,
	.tbx.tbx .tbx-step-actions .tbx-btn-ghost { width: 100%; justify-content: center; }
	.tbx-prefs-body .tbx-grid-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   2.11.0 — Reservar vs comprar, visibilidad, hándicap RFEG
   ============================================================ */

/* ---------- apuntar una clase desde el panel del profesor ---------- */
.tbx-newbooking { margin-top: 1.6rem; }
.tbx-newbooking h3 { margin: 0 0 .3em; font-size: 1.05rem; }
.tbx-nb-slot-grid {
	display: grid; gap: .45rem;
	grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
	margin-bottom: .4rem;
}
/* La rejilla de horas es la misma pastilla que ve el alumno al reservar: si
   fueran distintas, el profesor tendría que aprenderse dos interfaces. */
.tbx.tbx .tbx-nb-slot-grid .tbx-slot {
	width: 100%; justify-content: center; text-align: center;
	text-transform: none; letter-spacing: normal; box-shadow: none; min-height: 0;
	flex-direction: column; gap: 0; line-height: 1.25;
}
/* El puesto, debajo de la hora: en práctica libre hay seis «08:00» a la vez. */
.tbx.tbx .tbx-nb-slot-grid .tbx-slot small { font-size: .68rem; opacity: .75; font-weight: 400; }
.tbx.tbx .tbx-nb-slot-grid .tbx-slot.is-selected {
	background: var(--tbx-green); color: #fff; border-color: var(--tbx-green);
}
.tbx-newbooking .tbx-field-label {
	display: block; font-weight: 600; font-size: .88rem; margin: .8rem 0 .4em;
}

/* ---------- hándicap oficial ---------- */
.tbx-rfeg {
	display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
	background: var(--tbx-sand-soft); border: 1px solid var(--tbx-line);
	border-radius: 12px; padding: .7em .9em; margin-bottom: 1rem;
}
.tbx-rfeg-note { margin: 0; flex: 1 1 12rem; font-size: .82rem; }
.tbx-rfeg-note.is-ok { color: var(--tbx-green-dark); font-weight: 600; }
.tbx-rfeg-note.is-error { color: var(--tbx-danger); }
.tbx.tbx .tbx-rfeg .tbx-btn-ghost { flex: none; }

/* ---------- marca de "oculto" en las listas del backend ---------- */
.tbx-pill-off {
	display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: .05em; border-radius: 999px; padding: .15em .6em;
	background: #FBEAE9; color: #BF3A2C;
}

@media (max-width: 640px) {
	.tbx-nb-slot-grid { grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); }
	.tbx-newbooking .tbx-grid-2 { grid-template-columns: 1fr; }
	/* En el móvil el botón manda: el aviso va debajo, no apretado al lado. */
	.tbx-rfeg { flex-direction: column; align-items: stretch; }
	.tbx.tbx .tbx-rfeg .tbx-btn-ghost { width: 100%; justify-content: center; }
	.tbx-rfeg-note { text-align: center; }
}

/* ============================================================
   2.12.0 — Agenda por día, servicios ya pagados en el alta
   ============================================================ */

/* Conmutador semana / día. */
.tbx-viewswitch {
	display: inline-flex; gap: 2px; padding: 2px; margin-left: auto;
	background: var(--tbx-sand-soft); border: 1px solid var(--tbx-line); border-radius: 999px;
}
.tbx.tbx .tbx-view-btn {
	background: transparent; color: var(--tbx-muted); border: 0; border-radius: 999px;
	padding: .35em .9em; font-size: .82rem; font-weight: 600; cursor: pointer;
	text-transform: none; letter-spacing: normal; box-shadow: none; min-height: 0; width: auto;
}
.tbx.tbx .tbx-view-btn.is-active { background: var(--tbx-green); color: #fff; }

/* Rejilla horaria del día: media hora por fila, de 8 a 22. */
.tbx-day-grid { list-style: none; margin: 0 0 1.6rem; padding: 0; border: 1px solid var(--tbx-line); border-radius: 12px; overflow: hidden; }
.tbx-day-row { display: grid; grid-template-columns: 4.2rem 1fr; align-items: stretch; border-bottom: 1px solid var(--tbx-line); background: #fff; }
.tbx-day-row:last-child { border-bottom: 0; }
/* Las horas en punto marcan más que las medias: da ritmo a la columna. */
.tbx-day-row:nth-child(odd) .tbx-day-hour { font-weight: 700; color: var(--tbx-ink); }
.tbx-day-row.is-busy { background: var(--tbx-green-soft); }
.tbx-day-hour {
	padding: .5em .6em; font-size: .78rem; color: var(--tbx-muted);
	font-variant-numeric: tabular-nums; border-right: 1px solid var(--tbx-line);
	display: flex; align-items: center; justify-content: flex-end;
}
.tbx-day-body { padding: .35em .7em; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; min-height: 2.2rem; }
.tbx-day-item {
	display: inline-flex; flex-direction: column; line-height: 1.25;
	background: #fff; border: 1px solid var(--tbx-green); border-left-width: 3px;
	border-radius: 8px; padding: .3em .6em; font-size: .82rem;
}
.tbx-day-item small { color: var(--tbx-muted); font-size: .72rem; }
.tbx-day-item.status-pending { border-color: var(--tbx-warn); }
.tbx-day-item.status-cancelled { border-color: var(--tbx-danger); text-decoration: line-through; }
.tbx-day-free { font-size: .74rem; color: var(--tbx-muted); opacity: .65; }

/* El botón de la RFEG dentro de «Mis datos» es una línea, no una caja. */
.tbx-rfeg-inline { background: none; border: 0; padding: .5em 0 0; margin: 0; }

@media (max-width: 640px) {
	.tbx-viewswitch { margin-left: 0; }
	.tbx-day-row { grid-template-columns: 3.4rem 1fr; }
	.tbx-day-item { width: 100%; }
}

/* ============================================================
   2.13.0 — Clases sueltas en la página de compra
   ============================================================ */

.tbx-single-services { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--tbx-line); }
.tbx-services-list { display: grid; gap: .5rem; }

/* Fila y no ficha: al lado de las tarjetas de bono se lee como «la otra
   opción, más pequeña», que es exactamente lo que es. */
.tbx.tbx .tbx-service-row {
	display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left;
	background: #fff; color: var(--tbx-ink); cursor: pointer;
	border: 1px solid var(--tbx-line); border-radius: 12px; padding: .8em 1em;
	text-transform: none; letter-spacing: normal; box-shadow: none; min-height: 0;
	transition: border-color .14s, background .14s;
}
.tbx.tbx .tbx-service-row:hover { border-color: var(--tbx-green); }
.tbx.tbx .tbx-service-row.is-selected { border-color: var(--tbx-green); border-width: 2px; background: var(--tbx-green-soft); padding: calc(.8em - 1px) calc(1em - 1px); }
.tbx-service-row-main { display: flex; flex-direction: column; gap: .15em; flex: 1 1 auto; min-width: 0; }
.tbx-service-row-main > span { font-size: .82rem; color: var(--tbx-muted); }
.tbx-service-row-price { font-weight: 700; font-size: 1.05rem; flex: none; }

.tbx-single-when {
	margin-top: 1.1rem; background: var(--tbx-sand-soft);
	border: 1px solid var(--tbx-line); border-radius: 12px; padding: 1rem 1.1rem;
}
.tbx-when-title { margin: 0 0 .8rem; font-weight: 700; font-size: .98rem; }
.tbx-when-slots { margin-top: .9rem; }
.tbx-when-grid { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); }
.tbx.tbx .tbx-when-grid .tbx-slot {
	width: 100%; justify-content: center; text-align: center;
	text-transform: none; letter-spacing: normal; box-shadow: none; min-height: 0;
}
.tbx.tbx .tbx-when-grid .tbx-slot.is-selected { background: var(--tbx-green); color: #fff; border-color: var(--tbx-green); }

@media (max-width: 560px) {
	.tbx.tbx .tbx-service-row { flex-wrap: wrap; }
	.tbx-service-row-price { width: 100%; }
	.tbx-single-when .tbx-grid-2 { grid-template-columns: 1fr; }
	.tbx-when-grid { grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); }
}

/* ============================================================
   2.14.0 — Vueltas jugadas, alumno nuevo y forma de pago
   ============================================================ */

/* ---------- vueltas fuera del club ---------- */
.tbx-rounds { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--tbx-line); }
.tbx-rounds h3 { margin: 0 0 .3em; }
.tbx-rounds-chips { padding: 0; margin: 1rem 0 1.2rem; }

.tbx-round-form-wrap {
	border: 1px solid var(--tbx-line); border-radius: 12px;
	background: var(--tbx-sand-soft); margin-bottom: 1.2rem; overflow: hidden;
}
.tbx-round-add {
	cursor: pointer; padding: .75em 1em; font-weight: 700; font-size: .92rem;
	color: var(--tbx-green-dark); list-style: none;
}
.tbx-round-add::-webkit-details-marker { display: none; }
.tbx-round-form { padding: 0 1em 1em; }
.tbx-round-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.tbx-round-grid .tbx-field { margin: 0; display: flex; flex-direction: column; gap: .3em; }
.tbx-round-grid .tbx-field > span { font-size: .78rem; font-weight: 600; color: var(--tbx-muted); }
.tbx-round-grid input, .tbx-round-grid select {
	width: 100%; font: inherit; padding: .6em .7em; background: #fff;
	border: 1px solid var(--tbx-line); border-radius: 9px;
}
/* La nota necesita sitio: en una columna estrecha no cabe nada legible. */
.tbx-round-note-field { grid-column: 1 / -1; }

.tbx-course-list { display: grid; gap: .6rem; }
.tbx-course { background: #fff; border: 1px solid var(--tbx-line); border-radius: 12px; overflow: hidden; }
.tbx-course > summary {
	cursor: pointer; padding: .8em 1em; list-style: none;
	display: flex; align-items: baseline; gap: .7em; flex-wrap: wrap;
}
.tbx-course > summary::-webkit-details-marker { display: none; }
.tbx-course > summary::after { content: "▾"; margin-left: auto; color: var(--tbx-muted); transition: transform .18s; }
.tbx-course[open] > summary::after { transform: rotate(180deg); }
.tbx-course[open] > summary { border-bottom: 1px solid var(--tbx-line); }
.tbx-course-name { font-weight: 700; font-size: .98rem; }
.tbx-course-meta { font-size: .8rem; color: var(--tbx-muted); }

.tbx-round-list { list-style: none; margin: 0; padding: .5em; display: grid; gap: .35rem; }
.tbx-round {
	display: flex; align-items: center; gap: .8em; flex-wrap: wrap;
	padding: .5em .7em; border-radius: 9px; background: var(--tbx-sand-soft); font-size: .87rem;
}
.tbx-round-date { font-variant-numeric: tabular-nums; min-width: 6.5rem; }
.tbx-round-score {
	font-weight: 700; font-size: 1.05rem; display: inline-flex; align-items: baseline; gap: .25em;
	color: var(--tbx-ink);
}
/* Puntos y golpes son escalas opuestas: distinto color para no confundirlas
   de un vistazo (en puntos más es mejor; en golpes, menos). */
.tbx-round-score.is-points { color: var(--tbx-green-dark); }
.tbx-round-score small { font-size: .68rem; font-weight: 600; color: var(--tbx-muted); }
.tbx-round-kind {
	font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	border-radius: 999px; padding: .2em .6em; background: var(--tbx-line); color: var(--tbx-muted);
}
.tbx-round-kind.is-tournament { background: #FFF3DC; color: var(--tbx-warn); }
.tbx-round-note { font-size: .8rem; color: var(--tbx-muted); flex: 1 1 8rem; }
.tbx.tbx .tbx-round-del {
	margin-left: auto; background: none; border: 0; font-size: 1.2rem; line-height: 1;
	padding: 0 .3em; cursor: pointer; opacity: .35; width: auto; min-height: 0;
}
.tbx.tbx .tbx-round-del:hover { opacity: 1; }

/* ---------- alta de alumno y forma de pago (panel del profesor) ---------- */
.tbx.tbx .tbx-link {
	background: none; border: 0; padding: 0; margin-top: .4em; width: auto; min-height: 0;
	color: var(--tbx-green-dark); text-decoration: underline; cursor: pointer;
	font-size: .84rem; text-transform: none; letter-spacing: normal; box-shadow: none;
}
.tbx-newclient {
	background: var(--tbx-sand-soft); border: 1px solid var(--tbx-line);
	border-radius: 12px; padding: 1rem 1.1rem; margin: .4rem 0 1rem;
}

.tbx-pay-pick { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-bottom: .4rem; }
.tbx-pay-opt {
	display: flex; align-items: flex-start; gap: .6em; cursor: pointer;
	background: #fff; border: 1px solid var(--tbx-line); border-radius: 10px;
	padding: .65em .8em; font-size: .87rem; transition: border-color .12s;
}
.tbx-pay-opt:hover { border-color: var(--tbx-green); }
.tbx-pay-opt input { width: auto; margin: .2em 0 0; flex: none; accent-color: var(--tbx-green); }
.tbx-pay-opt span { display: flex; flex-direction: column; gap: .1em; }
.tbx-pay-opt small { color: var(--tbx-muted); font-size: .76rem; }
.tbx-pay-opt:has(input:checked) { border-color: var(--tbx-green); background: var(--tbx-green-soft); }
/* «Con su bono» apagado cuando al alumno no le queda ninguna cita de ese
   servicio. Se deja a la vista, en gris: si desapareciera, el profesor pensaría
   que la opción no existe en vez de entender que ese alumno no la tiene. */
.tbx-pay-opt.is-off { opacity: .55; cursor: not-allowed; background: var(--tbx-sand-soft); }
.tbx-pay-opt.is-off:hover { border-color: var(--tbx-line); }
.tbx-pay-opt.is-off .tbx-pay-package-note { color: var(--tbx-danger); }

/* ---------- calendario de días con hueco, en «Apuntar una clase» ---------- */
/* Acotado: a lo ancho de la tarjeta las casillas del mes salían del tamaño de
   una baldosa y había que hacer scroll para ver el mes entero. */
.tbx-nb-when { margin-bottom: .4rem; max-width: 26rem; }
.tbx-nb-when .tbx-cal-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.tbx-nb-when .tbx-cal-title { flex: 1; text-align: center; text-transform: capitalize; font-size: .95rem; }
.tbx-nb-caltip { margin: .5rem 0 0; }
.tbx-cal-nada { grid-column: 1 / -1; margin: .6rem 0 0; }

/* Lo que el profesor ya tiene ese día, para que no elija a ciegas. */
.tbx-nb-busy { margin: .2rem 0 .4rem; }
.tbx-nb-busy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.tbx-nb-busy-list li {
	background: var(--tbx-sand-soft); border: 1px solid var(--tbx-line); border-radius: 8px;
	padding: .35em .7em; font-size: .84rem;
}
.tbx-nb-busy-list strong { margin-right: .5em; }
.tbx-nb-busy-list small { color: var(--tbx-muted); }

@media (max-width: 640px) {
	.tbx-round-grid { grid-template-columns: 1fr 1fr; }
	.tbx-round { gap: .5em; }
	.tbx-round-date { min-width: 0; flex: 1 1 100%; font-size: .8rem; color: var(--tbx-muted); }
	.tbx-round-note { flex: 1 1 100%; }
	.tbx-pay-pick { grid-template-columns: 1fr; }
	.tbx-newclient .tbx-grid-2 { grid-template-columns: 1fr; }
}