/*
 * EENDA
 * Marketing, Desarrollo & Consulting
 * www.eenda.com
 * © 2026
 */


/*
 * style.css · Valere — front de reserva
 * Orden: 1) variables · 2) base/generales · 3) botones · 4) componentes.
 * Los componentes van DESPUÉS de las reglas generales (para que no las pisen) y
 * se anidan dentro de su padre con sintaxis CSS nativa (header { .brand { … } }).
 * Las reglas responsive y la barra fija móvil viven en responsive.css.
 *
 * Mobile-first: aquí vive el estado pequeño; responsive.css amplía con min-width.
 * El sitio público es la herramienta de reserva, no una web corporativa: no hay
 * menú ni secciones, solo el flujo.
 */


/* ==========================================================================
   1. Variables
   ========================================================================== */

:root{
	/* Paleta: verde azulado de clínica. Deliberadamente distinta del azul del
	   XPanel, que es la herramienta interna de EENDA, no la marca del cliente. */
	--vl-acento: #0f766e;
	--vl-acento-oscuro: #115e59;
	--vl-acento-suave: #f0fdfa;
	--vl-acento-borde: #99f6e4;

	--vl-texto: #1c1f23;
	--vl-texto-suave: #5b6570;
	--vl-fondo: #f7f9f9;
	--vl-superficie: #ffffff;
	--vl-borde: #e3e8ea;

	--vl-radio: .625rem;
	--vl-radio-lg: 1rem;
	--vl-sombra: 0 1px 2px rgba(16, 24, 40, .05);
	--vl-sombra-lg: 0 8px 24px rgba(16, 24, 40, .1);

	/* Puentes con Bootstrap */
	--bs-primary: var(--vl-acento);
	--bs-body-bg: var(--vl-fondo);
	--bs-body-color: var(--vl-texto);
	--bs-border-radius: var(--vl-radio);
	--bs-link-color: var(--vl-acento);
	--bs-link-hover-color: var(--vl-acento-oscuro);
}


/* ==========================================================================
   2. Base
   ========================================================================== */

html,
body{
	height: 100%;
}

body.front-end{
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--vl-fondo);
	color: var(--vl-texto);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.contenido{
	flex: 1 0 auto;
	padding: 1.5rem 0 3rem 0;
}

h1, h2, h3{
	font-weight: 700;
	letter-spacing: -.015em;
}

h1{ font-size: 1.5rem; }
h2{ font-size: 1.25rem; }
h3{ font-size: 1.0625rem; }

.texto-suave{
	color: var(--vl-texto-suave);
}

:focus-visible{
	outline: 2px solid var(--vl-acento);
	outline-offset: 2px;
}


/* ==========================================================================
   3. Botones
   ========================================================================== */

.btn{
	border-radius: var(--vl-radio);
	font-weight: 600;
}

.btn-primary{
	--bs-btn-bg: var(--vl-acento);
	--bs-btn-border-color: var(--vl-acento);
	--bs-btn-hover-bg: var(--vl-acento-oscuro);
	--bs-btn-hover-border-color: var(--vl-acento-oscuro);
	--bs-btn-active-bg: var(--vl-acento-oscuro);
	--bs-btn-disabled-bg: var(--vl-texto-suave);
	--bs-btn-disabled-border-color: var(--vl-texto-suave);
}

.btn-lg{
	padding: .75rem 1.5rem;
	font-size: 1rem;
}


/* ==========================================================================
   4. Componentes
   ========================================================================== */

/* --- Cabecera --- */
.cabecera{
	background: var(--vl-superficie);
	border-bottom: 1px solid var(--vl-borde);

	.container{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		min-height: 60px;
	}

	.marca{
		text-decoration: none;
		color: var(--vl-texto);
	}

	.marca-nombre{
		font-size: 1.125rem;
		font-weight: 700;
		letter-spacing: -.02em;
	}

	.cabecera-tel{
		display: inline-flex;
		align-items: center;
		gap: .375rem;
		color: var(--vl-acento);
		font-size: .875rem;
		font-weight: 600;
		text-decoration: none;
	}
}

/* --- Pie --- */
.pie{
	flex-shrink: 0;
	padding: 1.5rem 0;
	background: var(--vl-superficie);
	border-top: 1px solid var(--vl-borde);
	font-size: .8125rem;
	color: var(--vl-texto-suave);

	p{
		margin-bottom: .25rem;
	}

	a{
		color: inherit;
	}

	.pie-legal{
		margin-bottom: 0;
		opacity: .75;
	}

	/*
	 * Enlaces legales. En móvil se apilan bajo los datos de contacto (el .row de
	 * Bootstrap ya lo hace); a partir de md quedan a la derecha, alineados con el
	 * bloque de la izquierda por align-items-center.
	 */
	.pie-legales{
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
	}

	.pie-legales a{
		text-decoration: none;
	}

	.pie-legales a:hover{
		color: var(--vl-acento);
		text-decoration: underline;
	}
}

/* --- Tarjeta genérica --- */
.tarjeta{
	padding: 1.25rem;
	background: var(--vl-superficie);
	border: 1px solid var(--vl-borde);
	border-radius: var(--vl-radio-lg);
	box-shadow: var(--vl-sombra);
}

/* --- Pasos del flujo --- */
.paso{
	margin-bottom: 1.5rem;

	.paso-titulo{
		display: flex;
		align-items: center;
		gap: .625rem;
		margin-bottom: .75rem;
		font-size: 1.0625rem;
		font-weight: 700;
	}

	.paso-num{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 1.75rem;
		width: 1.75rem;
		height: 1.75rem;
		background: var(--vl-acento);
		border-radius: 50%;
		color: #fff;
		font-size: .8125rem;
		font-weight: 700;
	}
}

/*
 * --- Selector de servicio ---
 *
 * Radios reales ocultos y <label> como superficie clicable: así el teclado y los
 * lectores de pantalla siguen funcionando (:checked + :focus-visible incluidos),
 * cosa que se pierde al simularlo con <div> y JS.
 */
.servicios-lista{
	display: grid;
	gap: .625rem;
}

.servicio-opcion{
	input[type="radio"]{
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}

	label{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		margin: 0;
		padding: 1rem;
		background: var(--vl-superficie);
		border: 2px solid var(--vl-borde);
		border-radius: var(--vl-radio);
		cursor: pointer;
		transition: border-color .15s, background-color .15s;
	}

	label:hover{
		border-color: var(--vl-acento-borde);
	}

	input[type="radio"]:checked + label{
		background: var(--vl-acento-suave);
		border-color: var(--vl-acento);
	}

	input[type="radio"]:focus-visible + label{
		outline: 2px solid var(--vl-acento);
		outline-offset: 2px;
	}

	.servicio-nombre{
		font-weight: 600;
	}

	.servicio-desc{
		margin: .125rem 0 0 0;
		font-size: .8125rem;
		color: var(--vl-texto-suave);
	}

	.servicio-precio{
		flex-shrink: 0;
		text-align: right;
		font-weight: 700;
		white-space: nowrap;
	}

	.servicio-senal{
		display: block;
		font-size: .75rem;
		font-weight: 500;
		color: var(--vl-texto-suave);
	}
}

/* --- Huecos --- */
.huecos-dia{
	margin-bottom: 1.25rem;

	.huecos-fecha{
		margin-bottom: .5rem;
		font-size: .8125rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: var(--vl-texto-suave);
	}

	.huecos-tramos{
		display: flex;
		flex-wrap: wrap;
		gap: .5rem;
	}
}

.hueco-opcion{
	input[type="radio"]{
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}

	label{
		display: block;
		margin: 0;
		padding: .5rem .875rem;
		background: var(--vl-superficie);
		border: 2px solid var(--vl-borde);
		border-radius: var(--vl-radio);
		font-size: .9375rem;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		cursor: pointer;
		transition: border-color .15s, background-color .15s;
	}

	label:hover{
		border-color: var(--vl-acento-borde);
	}

	input[type="radio"]:checked + label{
		background: var(--vl-acento);
		border-color: var(--vl-acento);
		color: #fff;
	}

	input[type="radio"]:focus-visible + label{
		outline: 2px solid var(--vl-acento);
		outline-offset: 2px;
	}
}

/* Estado del panel de huecos mientras carga por AJAX */
.huecos-cargando{
	padding: 2rem 1rem;
	text-align: center;
	color: var(--vl-texto-suave);
}

/* --- Estado vacío --- */
.vacio{
	padding: 2rem 1rem;
	text-align: center;
	color: var(--vl-texto-suave);

	i{
		display: block;
		margin-bottom: .5rem;
		font-size: 2rem;
		opacity: .35;
	}

	p{
		margin-bottom: 0;
		font-size: .875rem;
	}
}

/*
 * --- Filas de etiqueta/valor ---
 *
 * A nivel superior y NO anidadas dentro de .resumen: las usan tanto el resumen
 * de la portada como la ficha de /mi-cita, que no es sticky. Anidarlas las ataba
 * a un padre que la segunda no tiene, y dt/dd se apilaban.
 */
.resumen-fila{
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .5rem 0;
	border-bottom: 1px solid var(--vl-borde);
	font-size: .875rem;

	dt{
		font-weight: 500;
		color: var(--vl-texto-suave);
	}

	dd{
		margin: 0;
		font-weight: 600;
		text-align: right;
	}
}

.resumen-fila:last-of-type{
	border-bottom: 0;
}

.resumen-total{
	margin-top: .5rem;
	padding-top: .75rem;
	border-top: 2px solid var(--vl-borde);

	dt, dd{
		font-size: 1rem;
		font-weight: 700;
		color: var(--vl-texto);
	}

	dd{
		color: var(--vl-acento);
	}
}

/* Solo el resumen de la portada acompaña al scroll */
.resumen{
	position: sticky;
	top: 1rem;

	dl{
		margin: 0;
	}
}

/* --- Formularios --- */
.form-label{
	margin-bottom: .375rem;
	font-size: .875rem;
	font-weight: 600;
}

.form-control{
	padding: .625rem .875rem;
	border-color: var(--vl-borde);
	border-radius: var(--vl-radio);
}

.form-control:focus{
	border-color: var(--vl-acento);
	box-shadow: 0 0 0 .2rem rgba(15, 118, 110, .15);
}

.form-text{
	font-size: .8125rem;
	color: var(--vl-texto-suave);
}

/*
 * --- Respuesta del servidor ---
 *
 * eprint() convierte {error}…{/error} en <span class="error">. El div contenedor
 * se pinta siempre, así que :empty lo oculta cuando no hay mensaje.
 */
.response{
	margin-top: .75rem;
}

.response:empty{
	display: none;
}

.response .error,
.response .success{
	display: block;
	padding: .75rem 1rem;
	border-radius: var(--vl-radio);
	font-size: .875rem;
	font-weight: 500;
}

.response .error{
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
}

.response .success{
	background: var(--vl-acento-suave);
	border: 1px solid var(--vl-acento-borde);
	color: var(--vl-acento-oscuro);
}

/* --- Etiquetas de estado --- */
.etiqueta{
	display: inline-block;
	padding: .125rem .5rem;
	border-radius: 1rem;
	font-size: .75rem;
	font-weight: 600;
}

.etiqueta-ok{
	background: var(--vl-acento-suave);
	color: var(--vl-acento-oscuro);
}

.etiqueta-aviso{
	background: #fffbeb;
	color: #b45309;
}

.etiqueta-mal{
	background: #fef2f2;
	color: #b91c1c;
}

/*
 * --- Documentos legales ---
 *
 * El texto viene del editor del XPanel, así que llega como HTML libre: no hay
 * clases sobre las que enganchar y hay que dar estilo a los elementos crudos.
 */
.legal{
	h2, h3, h4{
		margin-top: 1.75rem;
		margin-bottom: .5rem;
	}

	h2{ font-size: 1.125rem; }
	h3{ font-size: 1rem; }

	p, ul, ol{
		margin-bottom: 1rem;
		font-size: .9375rem;
	}

	li{
		margin-bottom: .25rem;
	}

	/* El texto legal suele traer tablas anchas (categorías de datos, plazos…) */
	table{
		width: 100%;
		margin-bottom: 1rem;
		font-size: .875rem;
	}

	td, th{
		padding: .5rem;
		border: 1px solid var(--vl-borde);
	}

	> :first-child{
		margin-top: 0;
	}

	> :last-child{
		margin-bottom: 0;
	}
}

/* --- Confirmación --- */
.confirmacion{
	text-align: center;

	.confirmacion-icono{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 4rem;
		height: 4rem;
		margin-bottom: 1rem;
		background: var(--vl-acento-suave);
		border-radius: 50%;
		color: var(--vl-acento);
		font-size: 2rem;
	}
}