/* =============================================================================
   Sens — the NEW TIME STEP of the Bookly form, variant B (tanda 2, agent T2, 22 Oct 2026; STAGING ONLY, pending
   Marcela's OK). Printed only for variant-B visitors on pages with a Bookly form (includes/horas-nuevas.php); the chips,
   the summary and «Continuar» are put in by assets/horas-nuevas.js. Every look is CLONED, nothing new:
   - day / hour chips: Bookly's own time-slot buttons (bookly-main.css «.bookly-columnizer .bookly-hour»: white, 1 px
     #ccc border, 4 px corners, 13 px text in the form's system font, #333, the 16 px ring icon 3 px before the text); the
     chosen hour = Bookly's own look of a slot under the finger (border and ring in Bookly's colour, the ring filled; the
     text stays #333, as Bookly's «.bookly-hour span { color: #333 !important }» keeps it); the chosen day = Bookly's own
     chosen calendar day (Bookly's colour, white text; the day number 16 px normal like the calendar's, weekday and month
     13 px like the slot buttons);
   - «Elige el día» / «Elige la hora»: Bookly's field labels (bold 14 px in Bookly's colour, like «*Nombre»);
   - «RESUMEN DE TU CITA:»: the markup of the details step's own summary (bookly-box + <font color="#00b7c4"><b>);
   - «Continuar»: the theme's orange button style 1 (w-btn us-btn-style_1, the price cards' «Reservar primera sesión»).
   Bookly's colour is its own variable (--bookly-main-color, #1fb0c6 today). Tap targets ≥ 44 px.
   ============================================================================= */

/* Bookly's own columns and its «<» «>» stay in the page (Bookly wires and uses them), hidden. */
.bookly-form .sens-hn-oculto {
	display: none !important;
}

.bookly-form .sens-hn {
	margin: 0 0 20px; /* the 20 px under every Bookly box */
	/* no colour of its own: the summary's text inherits the form's, as Bookly's own boxes do (the site's #35415b) */
}
.bookly-form .sens-hn-bloque + .sens-hn-bloque {
	margin-top: 12px;
}
.bookly-form .sens-hn-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
}
/* Bookly's field label («.bookly-form .bookly-form-group > label»: 14 px / 28 px, bold, Bookly's colour). */
.bookly-form .sens-hn-titulo {
	font-size: 14px;
	line-height: 28px;
	font-weight: 700;
	color: var(--bookly-main-color, #1fb0c6);
}
.bookly-form .sens-hn-bloque > .sens-hn-titulo {
	display: block;
	margin-bottom: 4px;
}

/* Day row: 5 chips across a phone, swipe or arrows for the rest. The 4 px padding keeps the focus ring visible
   inside the scrolling box; the negative margin keeps the chips aligned with the text above. */
.bookly-form .sens-hn-dias {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding: 4px;
	margin: 0 -4px;
	scroll-padding: 0 4px; /* snap positions inside the padding: the first chip stays aligned with the text above */
}
.bookly-form .sens-hn-dias::-webkit-scrollbar {
	display: none;
}
.bookly-form .sens-hn-dia,
.bookly-form .sens-hn-hora,
.bookly-form .sens-hn-flecha {
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	margin: 0;
	cursor: pointer;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	color: #333;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	-webkit-tap-highlight-color: transparent;
}
.bookly-form .sens-hn-dia {
	flex: 0 0 calc((100% - 32px) / 5);
	min-width: 48px;
	min-height: 58px;
	padding: 4px 2px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	scroll-snap-align: start;
	text-align: center;
}
.bookly-form .sens-hn-dia-sem {
	font-size: 13px;
	line-height: 16px;
}
/* The day number: Bookly's calendar day (16 px, normal weight; tanda 2 check V2, fix agent F 23 Oct 2026: it was bold). */
.bookly-form .sens-hn-dia-num {
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
}
/* The month («nov»): the slot buttons' 13 px (it was 12 px, a size the step does not use); same line box, same chip height. */
.bookly-form .sens-hn-dia-mes {
	font-size: 13px;
	line-height: 14px;
}
/* The chosen day: Bookly's day header / chosen calendar day. */
.bookly-form .sens-hn-dia[aria-checked="true"] {
	background: var(--bookly-main-color, #1fb0c6);
	border-color: var(--bookly-main-color, #1fb0c6);
	color: #fff;
}

/* Arrows of the day row (44 × 44 px), Bookly's slot-button look. */
.bookly-form .sens-hn-flechas {
	display: flex;
	gap: 8px;
}
.bookly-form .sens-hn-flecha {
	width: 44px;
	height: 44px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bookly-main-color, #1fb0c6);
}
.bookly-form .sens-hn-flecha-signo {
	font-size: 24px;
	line-height: 1;
	margin-top: -3px;
}
.bookly-form .sens-hn-flecha[disabled] {
	cursor: default;
	opacity: .5; /* Bookly's disabled buttons */
}
.bookly-form .sens-hn-flecha.sens-hn-cargando .sens-hn-flecha-signo {
	visibility: hidden;
}
.bookly-form .sens-hn-flecha.sens-hn-cargando {
	background-image: radial-gradient(circle, var(--bookly-main-color, #1fb0c6) 2.5px, transparent 3px);
	background-size: 10px 10px;
	background-repeat: no-repeat;
	background-position: 7px 50%;
	animation: sens-hn-puntos 1s steps(3) infinite;
}
@keyframes sens-hn-puntos {
	from { background-position: 7px 50%; }
	to { background-position: 37px 50%; }
}

/* Hours: Bookly's slot buttons in a grid (4 across a phone), 44 px tall. */
.bookly-form .sens-hn-horas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 8px;
	align-content: start;
}
/* Phones and tablets (1.12.2): the blank that keeps the step's height, after Bookly's buttons instead of between the
   hours and the summary (horas-nuevas.js, altoHoras / ponerHueco; display and height set there). Nothing to see. */
.bookly-form .sens-hn-hueco {
	display: none;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	pointer-events: none;
}
.bookly-form .sens-hn-hora {
	height: 44px;
	padding: 0 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	line-height: 20px;
	white-space: nowrap;
}
.bookly-form .sens-hn-hora-icono {
	display: block;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	border-radius: 100%;
	outline: 2px solid #eee;
	margin-right: 3px; /* Bookly's .bookly-hour-icon (F: it was 6 px) */
}
.bookly-form .sens-hn-hora-icono span {
	display: none;
}
/* The chosen hour: Bookly's own look of a slot under the finger (2 px border in Bookly's colour, the ring filled). The
   second pixel of the border is an inset shadow, so the text does not move. The text keeps the chip's #333: Bookly's
   own slot keeps it under the finger too («.bookly-columnizer .bookly-hour span { color: #333 !important }»; tanda 2
   check V2, fix agent F 23 Oct 2026: it was Bookly's colour). */
.bookly-form .sens-hn-hora[aria-checked="true"] {
	border-color: var(--bookly-main-color, #1fb0c6);
	box-shadow: inset 0 0 0 1px var(--bookly-main-color, #1fb0c6);
}
.bookly-form .sens-hn-hora[aria-checked="true"] .sens-hn-hora-icono {
	outline-color: var(--bookly-main-color, #1fb0c6);
}
.bookly-form .sens-hn-hora[aria-checked="true"] .sens-hn-hora-icono span {
	display: block;
	margin: 4px;
	width: 8px;
	height: 8px;
	border-radius: 100%;
	background: var(--bookly-main-color, #1fb0c6);
}
@media (hover: hover) {
	.bookly-form .sens-hn-hora:hover,
	.bookly-form .sens-hn-dia:hover,
	.bookly-form .sens-hn-flecha:not([disabled]):hover {
		border-color: var(--bookly-main-color, #1fb0c6);
	}
}
.bookly-form .sens-hn-dia:focus,
.bookly-form .sens-hn-hora:focus,
.bookly-form .sens-hn-flecha:focus {
	outline: none;
}
/* Keyboard focus (:focus-visible: keys only, never after a tap or a click). The theme takes the outline off every link
   and button with !important («a, button { outline: none !important }»), so this ring needs !important too to be seen. */
.bookly-form .sens-hn-dia:focus-visible,
.bookly-form .sens-hn-hora:focus-visible,
.bookly-form .sens-hn-flecha:focus-visible,
.bookly-form .sens-hn-continuar:focus-visible {
	outline: 2px solid #35415b !important; /* the site's text colour: visible on white and on Bookly's colour */
	outline-offset: 2px !important;
}

/* «RESUMEN DE TU CITA:» (a bookly-box: Bookly's 14 px / 28 px text) and «Continuar».
   1.12.4 (26 Oct 2026, Marcela on her phone, after 1.12.2 had put the summary right under the hours: «Deja un poco de
   espacio (pero no tanto como había antes) entre las horas y resumen de la cita y el botón de continuar»): phones and
   tablets (one under the other, below 900 px) 32 px between the hours and the summary (16 px since 1.12.2; before it,
   16 px plus the room of the busiest day's rows, up to ~160 px) and 20 px between the summary and «Continuar» (was 12).
   Computers (summary beside the hours) unchanged: 8 px and 12 px, in the 900 px block below. The «no jump» reserves
   grow by the same 24 px below 900 px (sensHorasNuevas.altos in includes/horas-nuevas.php, the loading reserve at the
   end of this file). */
.bookly-form .sens-hn .sens-hn-resumen {
	margin: 32px 0 0;
}
/* «Continuar»: the theme's style-1 button as it is everywhere (theme CSS + sens.css's phone rules for buttons in a
   .w-btn-wrapper: 16 px, full width up to 340 px). Inside Bookly's form two things have to be given back: the family
   (Bookly sets its system font on the form, the theme's buttons use the site's: --font-family, Open Sans) and the
   label's size — Bookly's «.bookly-form * { font-size: 14px }» reaches the label span, which everywhere else simply
   takes the button's size (16 px on phones, the theme's 19 px on computers; line height 1.25 / 1.2 of it). Tanda 2
   check V2, fix agent F 23 Oct 2026: the label was 14 px and the phone button 44.7 px tall instead of 47.2 px. */
.bookly-form .sens-hn-continuar-envoltura {
	margin: 20px 0 0;
}
.bookly-form .sens-hn-continuar {
	font-family: var(--font-family, inherit);
	cursor: pointer;
}
.bookly-form .sens-hn-continuar .w-btn-label {
	font-size: inherit;
	line-height: inherit;
}
.bookly-form .sens-hn-continuar[aria-disabled="true"] {
	cursor: default;
}
/* While Bookly brings the next step: the button is dimmed and a second press does nothing (horas-nuevas.js); the cursor
   stays the hand (1.13.3, Marcela, 28 Oct: the «progress» cursor looked odd on a Mac, «¿altera de alguna manera poner
   la manita?» — no). */
.bookly-form .sens-hn-continuar.sens-hn-enviando {
	cursor: pointer;
	opacity: .75;
}

/* Wider screens: 7 day chips across. */
@media (min-width: 540px) {
	.bookly-form .sens-hn-dia {
		flex-basis: calc((100% - 48px) / 7);
	}
}
/* Computers: days and hours on the left (up to 560 px: 7 day chips, 7 hours a row), the summary and «Continuar» on the
   right (the empty space beside the times; at least 260 px). From 900 px only: below that the left column would be too
   narrow (tablets keep the phone's order, one under the other). */
@media (min-width: 900px) {
	.bookly-form .sens-hn {
		display: grid;
		grid-template-columns: minmax(0, 560px) minmax(260px, 1fr);
		column-gap: 48px;
		align-items: start;
	}
	.bookly-form .sens-hn .sens-hn-resumen {
		margin-top: 8px;
	}
	.bookly-form .sens-hn-continuar-envoltura {
		margin-top: 12px; /* as before 1.12.4 on computers */
	}
	/* The hours area keeps at least 3 rows (21 hours) here (read by horas-nuevas.js): the step is then as tall whatever
	   the day — the summary column beside it is about that tall anyway — so nothing under the form moves when the
	   person changes the day, and the «no jump» reserves (sensHorasNuevas.altos in includes/horas-nuevas.php, and the
	   loading reserve at the end of this file) are exact. */
	.bookly-form .sens-hn-horas {
		--sens-hn-filas-min: 3;
	}
}

/* «No jump» while a service page's form loads (bookly-formulario.css, RESERVA_ALTO: the loading form keeps the height of
   its first step; on the service pages — data-sens-primero="horas": Adultos, Pareja, Padres, Orientación vocacional,
   Psicólogo español online — that is the time step). Variant B's time step has its own heights; measured on staging
   with ops/audit/tanda2/t2/t2_alturas.py (23 Oct 2026). As in tanda 1, the SHORTEST page (Orientación vocacional, fewest
   hours) on phones, so the reserve never keeps more room than the step takes; from 900 px every service page's step is
   545 px tall (3 rows of hours kept). The doubled :root only outranks bookly-formulario.css's own values, whatever the
   order the two stylesheets are printed in; this file is printed only for a variant-B visitor. Measured again by fix
   agent F (23 Oct 2026, same script, all 5 service pages): up to 600 px every step is 2.5 px taller («Continuar»'s
   label has the theme's size now); from 601 px nothing changed. */
:root:root {
	--sens-bf-alto-horas: 800.2px; /* up to 479 px wide: 776.2 (Orientación vocacional) – 932.2 (Adultos at 320); +24 since 1.12.4 */
}
@media (min-width: 480px) {
	:root:root { --sens-bf-alto-horas: 772.2px; }   /* 748.2 + 24 (1.12.4) */
}
@media (min-width: 540px) {
	:root:root { --sens-bf-alto-horas: 692.2px; }   /* 540–650 px: 668.2–676.1, +24 since 1.12.4 */
}
@media (min-width: 651px) {
	:root:root { --sens-bf-alto-horas: 716.1px; }   /* Bookly's computer layout, 651–899 px: 692.1 – 744.1, +24 since 1.12.4 */
}
@media (min-width: 900px) {
	:root:root { --sens-bf-alto-horas: 545px; }     /* 900–1920 px: 545 on every service page */
}