/**
 * Estilos del front público: horario, tarjeta de clase, modal de reserva y
 * página "Mis reservas".
 *
 * Todo se apoya en los tokens de tokens.css. Los selectores van prefijados con
 * .orv- y no dependen de ningún estilo del theme, para que el plugin se vea
 * igual de bien en el theme propio que en cualquier otro.
 */

/* --- Base ---------------------------------------------------------------- */

.orv-schedule,
.orv-bookings {
	font-family: var(--orv-font);
	font-size: var(--orv-text-base);
	line-height: var(--orv-leading-normal);
	color: var(--orv-ink);
	-webkit-font-smoothing: antialiased;
	max-width: var(--orv-container);
	margin-inline: auto;
}

.orv-schedule *,
.orv-bookings *,
.orv-modal * {
	box-sizing: border-box;
}

.orv-section-title {
	font-size: var(--orv-text-xl);
	font-weight: var(--orv-weight-semibold);
	letter-spacing: var(--orv-tracking-tight);
	line-height: var(--orv-leading-snug);
	margin: 0 0 var(--orv-space-6);
	color: var(--orv-ink);
}

/* --- Agrupación por día -------------------------------------------------- */

.orv-day {
	margin-bottom: var(--orv-space-7);
}

.orv-day__label {
	display: flex;
	align-items: baseline;
	gap: var(--orv-space-3);
	font-size: var(--orv-text-sm);
	font-weight: var(--orv-weight-semibold);
	letter-spacing: var(--orv-tracking-wide);
	text-transform: uppercase;
	color: var(--orv-ink-muted);
	margin: 0 0 var(--orv-space-4);
	padding-bottom: var(--orv-space-3);
	border-bottom: 1px solid var(--orv-border);
}

.orv-day--today .orv-day__label {
	color: var(--orv-accent);
}

.orv-day__today-tag {
	font-size: var(--orv-text-xs);
	letter-spacing: 0;
	text-transform: none;
	padding: 2px 8px;
	border-radius: var(--orv-radius-pill);
	background: var(--orv-accent-soft);
	color: var(--orv-accent);
}

.orv-day__list {
	display: grid;
	gap: var(--orv-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- Tarjeta de clase ---------------------------------------------------- */

.orv-card {
	display: grid;
	grid-template-columns: 88px 1fr auto;
	gap: var(--orv-space-5);
	align-items: center;
	padding: var(--orv-space-5);
	background: var(--orv-surface-raised);
	border: 1px solid var(--orv-border);
	border-radius: var(--orv-radius);
	transition: border-color var(--orv-duration) var(--orv-ease),
		box-shadow var(--orv-duration) var(--orv-ease),
		transform var(--orv-duration) var(--orv-ease);
}

/* Con foto la tarjeta gana una columna. El tamano es una variable para que el
   theme pueda ajustarlo sin volver a declarar la rejilla, que es donde es facil
   dejarse un valor sin cuadrar. */
.orv-card--media {
	grid-template-columns: 88px var(--orv-card-img, 72px) 1fr auto;
}

.orv-card__media img {
	display: block;
	width: var(--orv-card-img, 72px);
	height: var(--orv-card-img, 72px);
	object-fit: cover;
	border-radius: var(--orv-card-img-radius, var(--orv-radius-sm));
	background: var(--orv-surface-sunken);
}

.orv-card:hover {
	border-color: var(--orv-border-strong);
	box-shadow: var(--orv-shadow);
	transform: translateY(-1px);
}

.orv-card--full {
	opacity: 0.62;
}

.orv-card--full:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--orv-border);
}

.orv-card__time {
	font-size: var(--orv-text-lg);
	font-weight: var(--orv-weight-semibold);
	letter-spacing: var(--orv-tracking-tight);
	font-variant-numeric: tabular-nums;
	color: var(--orv-ink);
	line-height: 1.2;
}

.orv-card__duration {
	display: block;
	font-size: var(--orv-text-xs);
	font-weight: var(--orv-weight-regular);
	letter-spacing: 0;
	color: var(--orv-ink-muted);
	margin-top: 2px;
}

.orv-card__body {
	min-width: 0;
}

.orv-card__title {
	display: flex;
	align-items: center;
	gap: var(--orv-space-2);
	font-size: var(--orv-text-base);
	font-weight: var(--orv-weight-semibold);
	letter-spacing: var(--orv-tracking-tight);
	color: var(--orv-ink);
	margin: 0 0 var(--orv-space-1);
}

/* Punto de color de la clase: identifica la actividad de un vistazo sin
   recurrir a fondos de color que ensuciarían el diseño. */
.orv-card__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--orv-card-color, var(--orv-ink));
}

.orv-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--orv-space-2);
	font-size: var(--orv-text-sm);
	color: var(--orv-ink-muted);
	margin: 0;
}

.orv-card__meta > * + *::before {
	content: "·";
	margin-right: var(--orv-space-2);
	color: var(--orv-ink-faint);
}

.orv-card__desc {
	font-size: var(--orv-text-sm);
	color: var(--orv-ink-soft);
	margin: var(--orv-space-2) 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.orv-card__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--orv-space-2);
	text-align: right;
}

.orv-card__price {
	font-size: var(--orv-text-base);
	font-weight: var(--orv-weight-medium);
	color: var(--orv-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/*
 * Los dos precios de quien tiene un acuerdo. El tachado y el color no bastan
 * solos —hay quien no distingue el verde— asi que el suyo lleva ademas la
 * palabra «tu precio» debajo.
 */
.orv-card__price--was {
	text-decoration: line-through;
	opacity: 0.55;
	font-weight: 400;
}

.orv-card__price--mine {
	display: block;
	color: var(--orv-success, #1d8a4e);
}

.orv-card__price-note {
	display: block;
	font-size: 0.72em;
	font-weight: 400;
	opacity: 0.8;
}

/* --- Distintivos --------------------------------------------------------- */

.orv-badge {
	display: inline-block;
	font-size: var(--orv-text-xs);
	font-weight: var(--orv-weight-medium);
	padding: 3px 9px;
	border-radius: var(--orv-radius-pill);
	white-space: nowrap;
	background: var(--orv-surface-sunken);
	color: var(--orv-ink-muted);
}

.orv-badge--online {
	background: var(--orv-accent-soft);
	color: var(--orv-accent);
}

.orv-badge--last {
	background: rgba(191, 106, 0, 0.12);
	color: var(--orv-warning);
}

.orv-badge--full {
	background: var(--orv-surface-sunken);
	color: var(--orv-ink-muted);
}

.orv-badge--paid {
	background: rgba(29, 138, 78, 0.12);
	color: var(--orv-success);
}

.orv-badge--unpaid {
	background: rgba(191, 106, 0, 0.12);
	color: var(--orv-warning);
}

.orv-badge--cancelled {
	background: var(--orv-danger-soft);
	color: var(--orv-danger);
}

/* --- Botones ------------------------------------------------------------- */

.orv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--orv-space-2);
	font-family: inherit;
	font-size: var(--orv-text-sm);
	font-weight: var(--orv-weight-medium);
	line-height: 1;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: var(--orv-radius-pill);
	/* El color sale de una variable con el acento como reserva: asi un theme
	   puede recolorear los botones de un bloque concreto sin redeclarar el
	   componente entero, que es donde se pierden los estados. */
	background: var(--orv-btn-bg, var(--orv-accent));
	color: var(--orv-btn-ink, #fff);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--orv-duration-fast) var(--orv-ease),
		opacity var(--orv-duration-fast) var(--orv-ease),
		transform var(--orv-duration-fast) var(--orv-ease);
}

.orv-btn:hover:not(:disabled) {
	background: var(--orv-btn-bg-hover, var(--orv-accent-hover));
	color: var(--orv-btn-ink, #fff);
}

.orv-btn:active:not(:disabled) {
	transform: scale(0.97);
}

/* El foco visible es obligatorio para quien navega con teclado, pero solo
   debe aparecer en ese caso. */
.orv-btn:focus-visible,
.orv-field input:focus-visible,
.orv-field select:focus-visible,
.orv-field textarea:focus-visible {
	outline: 2px solid var(--orv-accent);
	outline-offset: 2px;
}

.orv-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.orv-btn--ghost {
	background: transparent;
	color: var(--orv-ink);
	border-color: var(--orv-border-strong);
}

.orv-btn--ghost:hover:not(:disabled) {
	background: var(--orv-surface-sunken);
	color: var(--orv-ink);
}

.orv-btn--quiet {
	background: transparent;
	color: var(--orv-accent);
	padding-inline: 4px;
}

.orv-btn--quiet:hover:not(:disabled) {
	background: transparent;
	text-decoration: underline;
}

.orv-btn--danger {
	background: transparent;
	color: var(--orv-danger);
	border-color: var(--orv-border-strong);
}

.orv-btn--danger:hover:not(:disabled) {
	background: var(--orv-danger-soft);
	color: var(--orv-danger);
}

.orv-btn--block {
	width: 100%;
}

/* --- Estado vacío -------------------------------------------------------- */

.orv-empty {
	text-align: center;
	padding: var(--orv-space-8) var(--orv-space-5);
	color: var(--orv-ink-muted);
	background: var(--orv-surface-sunken);
	border-radius: var(--orv-radius-lg);
}

.orv-empty p {
	margin: 0;
}

/* --- Modal de reserva ---------------------------------------------------- */

.orv-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--orv-space-4);
	font-family: var(--orv-font);
	color: var(--orv-ink);
}

.orv-modal[hidden] {
	display: none;
}

.orv-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	/* El desenfoque del fondo es lo que da la sensación de capa flotante
	   característica de iOS y macOS. */
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	animation: orv-fade var(--orv-duration) var(--orv-ease);
}

.orv-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: calc(100vh - 2 * var(--orv-space-4));
	overflow-y: auto;
	background: var(--orv-surface-raised);
	border-radius: var(--orv-radius-lg);
	box-shadow: var(--orv-shadow-lg);
	padding: var(--orv-space-6);
	animation: orv-rise var(--orv-duration) var(--orv-ease);
}

@keyframes orv-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes orv-rise {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

.orv-modal__close {
	position: absolute;
	top: var(--orv-space-4);
	right: var(--orv-space-4);
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--orv-surface-sunken);
	color: var(--orv-ink-muted);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--orv-duration-fast) var(--orv-ease);
}

.orv-modal__close:hover {
	background: var(--orv-border);
	color: var(--orv-ink);
}

.orv-modal__title {
	font-size: var(--orv-text-lg);
	font-weight: var(--orv-weight-semibold);
	letter-spacing: var(--orv-tracking-tight);
	margin: 0 var(--orv-space-6) var(--orv-space-1) 0;
}

.orv-modal__subtitle {
	font-size: var(--orv-text-sm);
	color: var(--orv-ink-muted);
	margin: 0 0 var(--orv-space-5);
}

.orv-modal__summary {
	background: var(--orv-surface-sunken);
	border-radius: var(--orv-radius);
	padding: var(--orv-space-4);
	margin-bottom: var(--orv-space-5);
	font-size: var(--orv-text-sm);
}

.orv-modal__summary dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--orv-space-2) var(--orv-space-4);
	margin: 0;
}

.orv-modal__summary dt {
	color: var(--orv-ink-muted);
}

.orv-modal__summary dd {
	margin: 0;
	text-align: right;
	font-weight: var(--orv-weight-medium);
}

.orv-modal__actions {
	display: flex;
	gap: var(--orv-space-3);
	margin-top: var(--orv-space-5);
}

.orv-modal__actions .orv-btn {
	flex: 1;
}

/* --- Campos de formulario ------------------------------------------------ */

.orv-field {
	margin-bottom: var(--orv-space-4);
}

.orv-field label {
	display: block;
	font-size: var(--orv-text-sm);
	font-weight: var(--orv-weight-medium);
	color: var(--orv-ink-soft);
	margin-bottom: var(--orv-space-2);
}

.orv-field input[type="text"],
.orv-field input[type="email"],
.orv-field input[type="tel"],
.orv-field input[type="password"],
.orv-field select,
.orv-field textarea {
	width: 100%;
	font-family: inherit;
	font-size: var(--orv-text-base);
	color: var(--orv-ink);
	background: var(--orv-surface);
	border: 1px solid var(--orv-border-strong);
	border-radius: var(--orv-radius-sm);
	padding: 11px 14px;
	transition: border-color var(--orv-duration-fast) var(--orv-ease);
	-webkit-appearance: none;
	appearance: none;
}

.orv-field textarea {
	min-height: 84px;
	resize: vertical;
}

.orv-field input:focus,
.orv-field select:focus,
.orv-field textarea:focus {
	border-color: var(--orv-accent);
	outline: none;
}

.orv-field--invalid input,
.orv-field--invalid select,
.orv-field--invalid textarea {
	border-color: var(--orv-danger);
}

.orv-field__error {
	display: block;
	font-size: var(--orv-text-xs);
	color: var(--orv-danger);
	margin-top: var(--orv-space-2);
}

.orv-field--check {
	display: flex;
	align-items: flex-start;
	gap: var(--orv-space-3);
}

.orv-field--check input {
	margin-top: 3px;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	accent-color: var(--orv-accent);
}

.orv-field--check label {
	margin: 0;
	font-weight: var(--orv-weight-regular);
	font-size: var(--orv-text-sm);
	line-height: var(--orv-leading-normal);
}

/* Honeypot: invisible para las personas, irresistible para los bots. Se oculta
   fuera de la pantalla en lugar de con display:none porque algunos bots
   ignoran los campos ocultos de ese modo. */
.orv-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Mensajes ------------------------------------------------------------ */

.orv-alert {
	padding: var(--orv-space-4);
	border-radius: var(--orv-radius);
	font-size: var(--orv-text-sm);
	line-height: var(--orv-leading-normal);
	margin-bottom: var(--orv-space-4);
}

.orv-alert--error {
	background: var(--orv-danger-soft);
	color: var(--orv-danger);
}

.orv-alert--info {
	background: var(--orv-surface-sunken);
	color: var(--orv-ink-soft);
}

.orv-alert--success {
	background: rgba(29, 138, 78, 0.1);
	color: var(--orv-success);
}

/* --- Confirmación -------------------------------------------------------- */

.orv-success {
	text-align: center;
	padding: var(--orv-space-4) 0 0;
}

.orv-success__mark {
	width: 56px;
	height: 56px;
	margin: 0 auto var(--orv-space-5);
	border-radius: 50%;
	background: var(--orv-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	line-height: 1;
	animation: orv-pop var(--orv-duration) var(--orv-ease);
}

@keyframes orv-pop {
	from { transform: scale(0.6); opacity: 0; }
	to { transform: none; opacity: 1; }
}

/* --- Página "Mis reservas" ----------------------------------------------- */

.orv-bookings {
	max-width: var(--orv-container-narrow);
}

.orv-booking {
	background: var(--orv-surface-raised);
	border: 1px solid var(--orv-border);
	border-radius: var(--orv-radius-lg);
	padding: var(--orv-space-6);
	margin-bottom: var(--orv-space-4);
}

.orv-booking--cancelled {
	opacity: 0.66;
}

.orv-booking__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--orv-space-4);
	margin-bottom: var(--orv-space-5);
}

.orv-booking__title {
	font-size: var(--orv-text-lg);
	font-weight: var(--orv-weight-semibold);
	letter-spacing: var(--orv-tracking-tight);
	margin: 0;
}

.orv-booking__list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--orv-space-3) var(--orv-space-5);
	margin: 0 0 var(--orv-space-5);
	font-size: var(--orv-text-sm);
}

.orv-booking__list dt {
	color: var(--orv-ink-muted);
}

.orv-booking__list dd {
	margin: 0;
	font-weight: var(--orv-weight-medium);
	word-break: break-word;
}

.orv-booking__actions {
	display: flex;
	gap: var(--orv-space-3);
	flex-wrap: wrap;
	padding-top: var(--orv-space-4);
	border-top: 1px solid var(--orv-border);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 640px) {
	.orv-card,
	.orv-card--media {
		grid-template-columns: 1fr;
		gap: var(--orv-space-3);
		padding: var(--orv-space-4);
	}

	.orv-card__aside {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		text-align: left;
		padding-top: var(--orv-space-3);
		border-top: 1px solid var(--orv-border);
	}

	.orv-card__time {
		font-size: var(--orv-text-base);
	}

	.orv-modal {
		padding: 0;
		align-items: flex-end;
	}

	/* En móvil el modal se comporta como una hoja que sube desde abajo, que es
	   el patrón que la gente espera en un teléfono. */
	.orv-modal__dialog {
		max-width: none;
		max-height: 92vh;
		border-radius: var(--orv-radius-lg) var(--orv-radius-lg) 0 0;
		animation: orv-sheet var(--orv-duration) var(--orv-ease);
	}

	@keyframes orv-sheet {
		from { transform: translateY(100%); }
		to { transform: none; }
	}

	.orv-booking__head {
		flex-direction: column;
		gap: var(--orv-space-2);
	}
}

/* --- Datos de la empresa en las páginas legales --------------------------- */

.orv-legal-identity {
	font-family: var(--orv-font);
	margin: 0 0 var(--orv-space-6);
	padding: var(--orv-space-5);
	background: var(--orv-surface-sunken);
	border-radius: var(--orv-radius);
}

.orv-legal-identity h3 {
	margin: 0 0 var(--orv-space-4);
	font-size: var(--orv-text-base);
	font-weight: var(--orv-weight-semibold);
	letter-spacing: var(--orv-tracking-tight);
	color: var(--orv-ink);
}

.orv-legal-identity dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px var(--orv-space-5);
	margin: 0;
	font-size: var(--orv-text-sm);
}

.orv-legal-identity dt {
	color: var(--orv-ink-muted);
}

.orv-legal-identity dd {
	margin: 0;
	font-weight: var(--orv-weight-medium);
	color: var(--orv-ink);
	word-break: break-word;
}

@media (max-width: 560px) {
	.orv-legal-identity dl {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.orv-legal-identity dd {
		margin-bottom: var(--orv-space-3);
	}
}

/* --- Puerta del panel ------------------------------------------------------
 *
 * Lo que se ve en lugar del panel cuando no hay sesión, no hay permisos o no
 * hay bundle compilado. Sobria a propósito: es una puerta cerrada con su
 * explicación, no un error del sistema.
 */

.orv-gate {
	max-width: 460px;
	margin: var(--orv-space-8, 48px) auto;
	padding: var(--orv-space-6, 32px);
	text-align: center;
	background: var(--orv-surface, #fff);
	border: 1px solid var(--orv-border, #e5e5ea);
	border-radius: var(--orv-radius-lg, 20px);
}

.orv-gate__title {
	margin: 0 0 8px;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--orv-ink, #1d1d1f);
}

.orv-gate__text {
	margin: 0 0 24px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--orv-ink-muted, #6e6e73);
}

/* --- Acceso ---------------------------------------------------------------
 *
 * El formulario hace POST a wp-login.php; esto solo es la maqueta. Se mantiene
 * estrecho a propósito: un formulario de dos campos a todo lo ancho de la
 * pantalla se lee peor y parece inacabado.
 */

.orv-login {
	max-width: 380px;
	margin: 0 auto;
}

.orv-login__submit {
	width: 100%;
	justify-content: center;
	margin-top: var(--orv-space-2);
}

.orv-login__lost {
	margin: var(--orv-space-4) 0 0;
	text-align: center;
	font-size: var(--orv-text-sm);
}

.orv-login__lost a {
	color: var(--orv-ink-muted);
	text-decoration: underline;
}

.orv-login__lost a:hover {
	color: var(--orv-ink);
}

.orv-check {
	display: flex;
	align-items: center;
	gap: var(--orv-space-2);
	margin-bottom: var(--orv-space-4);
	font-size: var(--orv-text-sm);
	color: var(--orv-ink-soft);
	cursor: pointer;
}

.orv-alert--warning {
	background: var(--orv-warning-soft, #fff4e5);
	color: var(--orv-ink-soft);
}