/**
 * CtoC Agenda: formulario de reservas.
 *
 * Personalizar: sobreescribir las variables de .ctag desde el CSS del sitio o desde
 * wp-content/uploads/ctoc-agenda/custom.css. Ver docs/PERSONALIZAR.md.
 * Radios anidados: el radio exterior = radio interior + relleno (--ctag-radius-outer).
 */

.ctag {
	--ctag-accent: #2f2a28;          /* botones y selección */
	--ctag-accent-ink: #ffffff;      /* texto sobre el acento */
	--ctag-accent-soft: #f1ece7;     /* fondos suaves de selección */
	--ctag-text: #2f2a28;
	--ctag-muted: #7d736c;
	--ctag-bg: #ffffff;
	--ctag-surface: #faf7f4;
	--ctag-border: #e7dfd7;
	--ctag-danger: #b3261e;
	--ctag-warning-bg: #fff6e5;
	--ctag-warning-ink: #6b4a00;
	--ctag-success: #1f7a4d;
	--ctag-whatsapp: #25d366;
	--ctag-whatsapp-ink: #0b3d20;
	--ctag-font: inherit;
	--ctag-font-title: inherit;
	--ctag-radius: 12px;             /* controles */
	--ctag-pad: 12px;                /* relleno de tarjetas */
	--ctag-radius-outer: calc(var(--ctag-radius) + var(--ctag-pad));
	--ctag-gap: 12px;
	--ctag-focus: 0 0 0 3px color-mix(in srgb, var(--ctag-accent) 25%, transparent);

	color: var(--ctag-text);
	font-family: var(--ctag-font);
	line-height: 1.45;
}

.ctag *,
.ctag *::before,
.ctag *::after { box-sizing: border-box; }

.ctag-booking { max-width: 640px; margin-inline: auto; }
.ctag-booking__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.ctag-step { min-width: 0; } /* Deja que la fila de días haga scroll sin estirar el formulario. */

.ctag-icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
.ctag-icon--img { display: block; object-fit: contain; }

.ctag-loading,
.ctag-muted { color: var(--ctag-muted); }

/* Pasos */
.ctag-step[hidden] { display: none; }
.ctag-step__title {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 16px; font: 600 1.15rem/1.3 var(--ctag-font-title); color: var(--ctag-text);
}
.ctag-step__num {
	display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	background: var(--ctag-accent-soft); color: var(--ctag-text); font: 600 .9rem/1 var(--ctag-font);
}

/* Paso 1: opciones grandes con icono */
.ctag-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ctag-gap); }
.ctag-choice {
	display: grid; justify-items: center; gap: 8px; padding: 16px 8px;
	border: 1.5px solid var(--ctag-border); border-radius: var(--ctag-radius-outer);
	background: var(--ctag-bg); color: var(--ctag-text); font: 500 .95rem/1.2 var(--ctag-font);
	cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.ctag-choice:hover { border-color: var(--ctag-accent); }
.ctag-choice:active { transform: scale(.98); }
.ctag-choice:focus-visible { outline: none; box-shadow: var(--ctag-focus); }
.ctag-choice.is-active { border-color: var(--ctag-accent); background: var(--ctag-accent-soft); }
.ctag-choice__icon {
	display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
	background: var(--ctag-surface); color: var(--ctag-accent);
}
.ctag-choice.is-active .ctag-choice__icon { background: var(--ctag-accent); color: var(--ctag-accent-ink); }
.ctag-choice__icon .ctag-icon { width: 28px; height: 28px; }

.ctag-choices--many { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.ctag-hint { margin: -6px 0 12px; font-size: .88rem; }
.ctag-link { display: inline-flex; align-items: center; gap: 2px; color: var(--ctag-text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.ctag-link .ctag-icon { width: 1em; height: 1em; }
/* "Ver detalles": discreto, al lado de la descripción, con el icono de pestaña nueva. */
.ctag-detail { display: inline-flex; align-items: center; gap: 4px; color: var(--ctag-text); font-size: .88rem; font-weight: 500; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--ctag-border); text-underline-offset: 3px; }
.ctag-detail .ctag-icon { width: .95em; height: .95em; }
.ctag-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Paso 2: bloque por área */
.ctag-part {
	display: grid; gap: 12px; padding: var(--ctag-pad);
	border: 1px solid var(--ctag-border); border-radius: var(--ctag-radius-outer); background: var(--ctag-surface);
}
.ctag-part + .ctag-part { margin-top: var(--ctag-gap); }
.ctag-part__head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ctag-part__icon { color: var(--ctag-accent); }
.ctag-part__desc { margin: -4px 0 0; color: var(--ctag-muted); font-size: .88rem; }
.ctag-part__staff { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .95rem; }

/* Campos */
.ctag-field { display: grid; gap: 4px; }
.ctag-field__label { font-size: .88rem; font-weight: 500; color: var(--ctag-muted); }
.ctag-field__label em { font-style: normal; }
.ctag-select,
.ctag-input {
	width: 100%; min-height: 46px; padding: 12px 12px;
	border: 1px solid var(--ctag-border); border-radius: var(--ctag-radius);
	background: var(--ctag-bg); color: var(--ctag-text); font: 400 1rem/1.3 var(--ctag-font);
}
.ctag-select:focus,
.ctag-input:focus { outline: none; border-color: var(--ctag-accent); box-shadow: var(--ctag-focus); }
.ctag-check { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; }
.ctag-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ctag-accent); flex: none; }
.ctag-check a { color: inherit; text-decoration: underline; }
.ctag-form { display: grid; gap: var(--ctag-gap); }

/* Honeypot: fuera de pantalla, no display:none (algunos bots lo detectan). */
.ctag-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Paso 3: calendario del mes + lista de horas */
.ctag-when { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 210px); gap: 20px; align-items: start; }

.ctag-cal { padding: var(--ctag-pad); border: 1px solid var(--ctag-border); border-radius: var(--ctag-radius-outer); background: var(--ctag-bg); }
.ctag-cal.is-loading .ctag-cal__grid { opacity: .45; }
.ctag-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ctag-cal__title { font: 600 1rem/1.2 var(--ctag-font-title); text-transform: capitalize; }
.ctag-cal__nav {
	display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
	border: 1px solid var(--ctag-border); border-radius: 50%; background: var(--ctag-bg); color: var(--ctag-text); cursor: pointer;
}
.ctag-cal__nav:disabled { opacity: .35; cursor: default; }
.ctag-cal__nav .ctag-icon { width: 18px; height: 18px; }
.ctag-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; transition: opacity .15s ease; }
.ctag-cal__wd { padding: 4px 0; text-align: center; font-size: .8rem; font-weight: 600; color: var(--ctag-muted); }
.ctag-cal__day {
	aspect-ratio: 1; min-height: 40px; padding: 0; border: 1px solid transparent; border-radius: var(--ctag-radius);
	background: var(--ctag-surface); color: var(--ctag-text); font: 500 .95rem/1 var(--ctag-font); cursor: pointer;
}
.ctag-cal__day:not(:disabled):hover { border-color: var(--ctag-accent); }
.ctag-cal__day.is-today { border-color: var(--ctag-border); font-weight: 700; }
.ctag-cal__day.is-active { background: var(--ctag-accent); border-color: var(--ctag-accent); color: var(--ctag-accent-ink); }
.ctag-cal__day:disabled { background: transparent; border-color: transparent; color: var(--ctag-muted); opacity: .4; cursor: default; }
.ctag-cal__day:focus-visible,
.ctag-cal__nav:focus-visible,
.ctag-time:focus-visible { outline: none; box-shadow: var(--ctag-focus); }

/* Horas: un desplegable ya abierto. Radio de la caja = radio de la fila + relleno. */
.ctag-hours { display: grid; gap: 8px; min-width: 0; }
.ctag-hours__title { margin: 0; font-weight: 600; }
.ctag-hours__title::first-letter { text-transform: uppercase; }
.ctag-hours__list {
	list-style: none; margin: 0; padding: 8px; max-height: 336px; overflow-y: auto; overscroll-behavior: contain;
	border: 1px solid var(--ctag-border); border-radius: calc(var(--ctag-radius) + 6px); background: var(--ctag-bg);
	scrollbar-width: thin;
}
.ctag-hours__group { padding: 8px 12px 4px; font-size: .8rem; font-weight: 500; color: var(--ctag-muted); }
.ctag-time {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 42px; padding: 8px 12px;
	border: 0; border-radius: var(--ctag-radius); background: var(--ctag-bg); color: var(--ctag-text);
	font: 500 .95rem/1 var(--ctag-font); text-align: left; cursor: pointer;
}
.ctag-time:hover { background: var(--ctag-accent-soft); }
.ctag-time.is-active { background: var(--ctag-accent); color: var(--ctag-accent-ink); }
.ctag-time .ctag-icon { width: 18px; height: 18px; }

@media (max-width: 560px) {
	.ctag-when { grid-template-columns: minmax(0, 1fr); }
	/* En celular, sin scroll dentro de scroll: las horas en tres columnas. */
	.ctag-hours__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: none; overflow: visible; }
	.ctag-hours__group { grid-column: 1 / -1; }
	.ctag-time { justify-content: center; border: 1px solid var(--ctag-border); }
	.ctag-time .ctag-icon { display: none; }
}
.ctag-empty { display: flex; gap: 8px; align-items: center; margin: 0; padding: 16px; border-radius: var(--ctag-radius); background: var(--ctag-surface); color: var(--ctag-muted); }

/* Resumen */
.ctag-summary { margin-top: 16px; padding: var(--ctag-pad); border-radius: var(--ctag-radius-outer); background: var(--ctag-surface); }
.ctag-summary:empty { display: none; }
.ctag-summary__list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.ctag-summary__list li { display: flex; gap: 8px; align-items: flex-start; }
.ctag-summary__icon { color: var(--ctag-accent); }
.ctag-summary__when { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; font-weight: 500; }
.ctag-summary__totals { display: grid; gap: 4px; padding-top: 12px; border-top: 1px dashed var(--ctag-border); }
.ctag-summary__totals span { display: flex; justify-content: space-between; gap: 12px; }

.ctag-error { margin: 12px 0 0; padding: 12px 12px; border-radius: var(--ctag-radius); background: #fdecea; color: var(--ctag-danger); font-size: .95rem; }
.ctag-error[hidden] { display: none; }

.ctag-submit {
	width: 100%; min-height: 52px; margin-top: 16px; border: 0; border-radius: 999px;
	background: var(--ctag-accent); color: var(--ctag-accent-ink); font: 600 1.05rem/1 var(--ctag-font); cursor: pointer;
	transition: opacity .15s ease, transform .1s ease;
}
.ctag-submit:active { transform: scale(.99); }
.ctag-submit:disabled { opacity: .45; cursor: not-allowed; }
.ctag-submit:focus-visible { outline: none; box-shadow: var(--ctag-focus); }

/* Confirmación */
.ctag-done { display: grid; gap: 12px; justify-items: center; text-align: center; }
.ctag-done .ctag-summary__list { justify-self: stretch; text-align: left; }
.ctag-done__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ctag-accent); color: var(--ctag-accent-ink); }
.ctag-done__icon .ctag-icon { width: 34px; height: 34px; }
.ctag-done__title { margin: 4px 0 0; font: 600 1.4rem/1.2 var(--ctag-font-title); }
.ctag-done__code,
.ctag-done__when { margin: 0; }
.ctag-done__code strong { letter-spacing: .12em; }

.ctag-hold { justify-self: stretch; display: grid; gap: 12px; margin-top: 8px; padding: var(--ctag-pad); border-radius: var(--ctag-radius-outer); background: var(--ctag-warning-bg); color: var(--ctag-warning-ink); text-align: left; }
.ctag-hold__lead { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.ctag-hold__clock { font-variant-numeric: tabular-nums; }
.ctag-hold__pay { margin: 0; padding: 12px 12px; border-radius: var(--ctag-radius); background: rgba(255, 255, 255, .7); color: var(--ctag-text); }
.ctag-hold.is-expired { background: #fdecea; color: var(--ctag-danger); }

.ctag-whatsapp {
	display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 999px;
	background: var(--ctag-whatsapp); color: var(--ctag-whatsapp-ink); font-weight: 600; text-decoration: none;
}
.ctag-whatsapp:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 211, 102, .35); }

@media (max-width: 420px) {
	.ctag-choices { gap: 8px; }
	.ctag-choice { padding: 12px 4px; font-size: .88rem; }
	.ctag-choice__icon { width: 46px; height: 46px; }
}

/*
 * Escudo contra el tema. Muchos temas (Hello Elementor, por ejemplo) pintan todo button:hover y button:focus
 * con su propio color, y esa regla le gana a una sola clase. Aquí se fijan los colores de cada estado con
 * más peso (.ctag + clase + estado) para que el formulario se vea igual en cualquier tema.
 */
.ctag .ctag-choice:is(:hover, :focus),
.ctag .ctag-cal__nav:is(:hover, :focus) { background-color: var(--ctag-bg); color: var(--ctag-text); }
.ctag .ctag-cal__day:not(:disabled):is(:hover, :focus) { background-color: var(--ctag-surface); color: var(--ctag-text); }
.ctag .ctag-time:is(:hover, :focus) { background-color: var(--ctag-accent-soft); color: var(--ctag-text); }
.ctag .ctag-choice.is-active:is(:hover, :focus) { background-color: var(--ctag-accent-soft); color: var(--ctag-text); }
.ctag .ctag-cal__day.is-active:is(:hover, :focus),
.ctag .ctag-time.is-active:is(:hover, :focus),
.ctag .ctag-submit:is(:hover, :focus) { background-color: var(--ctag-accent); color: var(--ctag-accent-ink); }
.ctag .ctag-link:is(:hover, :focus),
.ctag .ctag-check a:is(:hover, :focus),
.ctag .ctag-detail:is(:hover, :focus) { color: var(--ctag-text); }
.ctag .ctag-whatsapp:is(:hover, :focus) { color: var(--ctag-whatsapp-ink); }
.ctag .ctag-input,
.ctag .ctag-select { border: 1px solid var(--ctag-border); border-radius: var(--ctag-radius); background-color: var(--ctag-bg); color: var(--ctag-text); }
.ctag .ctag-input:focus,
.ctag .ctag-select:focus { border-color: var(--ctag-accent); }

@media (prefers-reduced-motion: reduce) {
	.ctag * { transition: none !important; scroll-behavior: auto !important; }
}

/* Resumen: línea del combo */
.ctag-summary__save { color: var(--ctag-success); }

/* Confeti al apartar la cita */
.ctag-confetti { position: fixed; inset: 0; z-index: 9999; overflow: hidden; pointer-events: none; }
.ctag-confetti i { position: absolute; top: -6vh; display: block; border-radius: 2px; opacity: 0; animation: ctag-fall linear both; }
@keyframes ctag-fall {
	0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
	85% { opacity: 1; }
	100% { opacity: 0; transform: translate3d(var(--sway), 108vh, 0) rotate(var(--spin)); }
}

/* Petición especial opcional (diseño personalizado) */
.ctag-special { padding: 12px 16px; border: 1px dashed var(--ctag-border); border-radius: var(--ctag-radius); background: var(--ctag-surface); }
.ctag-special strong { font-weight: 600; }
.ctag-special__msg { display: block; margin-top: 4px; font-style: normal; font-size: .88rem; color: var(--ctag-muted); }
.ctag-summary__special { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; font-size: .88rem; color: var(--ctag-muted); }

/* Aviso de lo que falta para continuar, y texto solo para lectores de pantalla */
.ctag-need { margin: 12px 0 0; min-height: 1.3em; font-size: .88rem; color: var(--ctag-muted); }
.ctag-captcha-note { margin: 12px 0 0; font-size: .8rem; line-height: 1.4; color: var(--ctag-muted); }
.ctag-captcha-note a { color: inherit; }

/* QR del abono */
.ctag-hold__qr { margin: 12px 0 0; text-align: center; }
.ctag-hold__qr img { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; padding: 8px; background: #fff; border-radius: var(--ctag-radius); }
.ctag-hold__qr figcaption { margin-top: 8px; font-size: .88rem; color: var(--ctag-muted); }

/* Extras con casillas y opciones */
.ctag-extras { border: 0; margin: 0; padding: 0; min-width: 0; }
.ctag-extras > .ctag-field__label { padding: 0; margin-bottom: 8px; }
.ctag-extra { margin: 4px 0; }
.ctag-extra__opt { margin: 2px 0 8px 28px; }

/* Cifras alineadas en todo el plugin (precios, horas, totales) */
.ctag { font-variant-numeric: tabular-nums; }

/* Ayuda bajo un campo (por ejemplo el celular) */
.ctag-field__hint { display: block; margin-top: 4px; font-size: .8rem; font-weight: 400; color: var(--ctag-muted); }