/*
 * «Configuramos tu agenda» (/configurar/): los pasos del registro simplificado. Va sobre paginas.css (la piel de los
 * ingresos y registros, que son los valores del formulario de reserva) y usa sólo sus tokens --pg-*: ningún color, radio,
 * alto ni tamaño de letra propio (tests/test-configurar.php). Lo que mide cada pantalla está en la cabecera de
 * view/configurar.php.
 */

/* ---------- El paso ---------- */

.cf-paso[hidden],
.cf [hidden] {
	display: none !important;
}

.cf-progreso {
	display: grid;
	gap: 8px;
	margin-bottom: 20px;
}

.cf-progreso-texto {
	margin: 0;
	color: var(--pg-sub);
	font-size: var(--pg-letra-rotulo);
}

.cf-progreso-texto b {
	color: var(--pg-text);
	font-weight: 600;
}

.cf-barra {
	display: block;
	height: 6px;
	overflow: hidden;
	border-radius: var(--pg-r-boton);
	background: var(--pg-hair);
}

.cf-barra > span {
	display: block;
	width: 20%;
	height: 100%;
	border-radius: var(--pg-r-boton);
	background: var(--pg-brand);
	transition: width .3s ease;
}

.cf-form:has([data-cf-paso="listo"]:not([hidden])) .cf-progreso,
.cf-form:has([data-cf-paso="creando"]:not([hidden])) .cf-progreso {
	display: none;
}

.cf-titulo {
	margin: 0;
	color: var(--pg-text);
	font-family: var(--pg-familia-titulo);
	font-size: var(--pg-letra-titulo);
	font-weight: var(--pg-peso-titulo);
	line-height: 1.2;
	text-wrap: balance;
	outline: none;
}

.cf-bajada {
	margin: 8px 0 20px;
	color: var(--pg-sub);
	font-size: var(--pg-letra-base);
	text-wrap: pretty;
}

.cf-paso > :is(input, select, textarea),
.cf-paso [data-cf-cargar] > textarea,
.cf-telefono,
.cf-link {
	margin-bottom: 16px !important;
}

/* Los desplegables (el rubro, las horas): la flecha que los dice desplegables (la piel les saca la del sistema). */
.agdt-pagina .cf .pg-tarjeta select:not([data-cf-pais]) {
	padding-right: 40px;
	background: var(--pg-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5a70' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
	cursor: pointer;
}

/* «¿A qué se dedica?»: se escribe y la lista se filtra (29-10-2026). El campo es como los demás, con la flecha de los
   desplegables; la lista flota debajo, con el radio de los controles, y cada opción mide 44. */
.cf-buscador {
	position: relative;
	margin-bottom: 16px;
}

.agdt-pagina .pg-tarjeta .cf-buscador input[data-cf-buscador] {
	padding-right: 40px;
	background: var(--pg-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5a70' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
}

.cf-buscador-lista {
	position: absolute;
	z-index: 5;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 264px;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: var(--pg-borde-control) solid var(--pg-border);
	border-radius: var(--pg-r-control);
	background: var(--pg-panel);
	box-shadow: var(--pg-shadow-flota);
	list-style: none;
}

.cf-buscador-lista li {
	display: flex;
	align-items: center;
	min-height: var(--pg-toque);
	padding: 8px 12px;
	border-radius: calc(var(--pg-r-control) - 6px);
	color: var(--pg-text);
	font-size: var(--pg-letra-campo);
	cursor: pointer;
}

.cf-buscador-lista li[role="option"]:hover,
.cf-buscador-lista li.is-activa {
	background: var(--pg-lienzo);
}

.cf-buscador-lista li.cf-buscador-nada {
	color: var(--pg-sub);
	font-size: var(--pg-letra-base);
	cursor: default;
}

/* En el teléfono, pasado el primer paso, la promesa de arriba se guarda (sigue para quien lee con lector de pantalla): lo que
   importa es el paso, y así entra sin desplazarse. */
@media (max-width: 599px) {
	.cf:not([data-cf-en="negocio"]) .pg-cabeza :is(.pg-titulo, .pg-bajada) {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.cf:not([data-cf-en="negocio"]) .pg-cabeza .pg-logo {
		margin-bottom: 0;
	}
}

/* ---------- Los botones: el principal (la píldora de 60 con su flecha), el pálido y el de texto ---------- */

.agdt-pagina .cf-boton {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--pg-boton);
	margin: 8px 0 0;
	padding: 0 60px;
	border: 0;
	border-radius: var(--pg-r-boton);
	background: var(--pg-brand);
	box-shadow: var(--pg-shadow-boton);
	color: var(--pg-panel);
	font-family: var(--pg-familia-titulo);
	font-size: var(--pg-letra-campo);
	font-weight: var(--pg-peso-boton);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, opacity .15s ease;
}

.agdt-pagina .cf-boton:hover {
	background: var(--pg-brand-hover);
}

.agdt-pagina .cf-boton[aria-busy="true"] {
	opacity: .6;
	cursor: progress;
}

.cf-boton .ld-boton-flecha {
	position: absolute;
	top: 50%;
	right: 9px;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	transform: translateY(-50%);
	border-radius: var(--pg-r-redondo);
	background: var(--pg-panel);
	color: var(--pg-brand-ink);
}

/* El pálido: la salida que no se puede perder (19-10-2026: «un botón pálido … que no tenga el contraste del botón de agendar»). */
.agdt-pagina .cf-boton-palido {
	min-height: var(--pg-control);
	padding: 0 16px;
	border: var(--pg-borde-control) solid var(--pg-border);
	background: var(--pg-panel);
	box-shadow: none;
	color: var(--pg-text);
	font-family: var(--pg-familia);
	font-weight: 500;
}

.agdt-pagina .cf-boton-palido:hover {
	border-color: var(--pg-sub);
	background: var(--pg-panel);
}

.agdt-pagina .cf-enlace {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: var(--pg-toque);
	margin: 0;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--pg-brand-ink);
	font-family: inherit;
	font-size: var(--pg-letra-base);
	font-weight: 500;
	cursor: pointer;
}

.agdt-pagina .cf-enlace:hover {
	text-decoration: underline;
}

.cf-enlace-centro {
	display: flex !important;
	margin: 8px auto 0 !important;
}

.cf-volver {
	margin: -12px 0 4px -4px !important;
}

/* ---------- Avisos y estados ---------- */

.cf-aviso {
	margin: 0 0 12px;
	padding: 12px 14px;
	border-radius: var(--pg-r-control);
	background: var(--pg-mal-weak);
	color: var(--pg-mal);
	font-size: var(--pg-letra-rotulo);
}

.cf-aviso a {
	color: inherit;
	font-weight: 600;
}

/* El WhatsApp que ya tiene cuenta (29-10-2026): se dice en su paso, con la salida a mano. */
.cf-ya-tiene {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: var(--pg-r-control);
	background: var(--pg-lienzo);
	color: var(--pg-text);
	font-size: var(--pg-letra-base);
}

.cf-ya-tiene p {
	margin: 0;
}

.cf-ya-tiene b,
.cf-ya-tiene p > span {
	display: block;
}

.cf-ya-tiene p > span {
	margin-top: 2px;
	color: var(--pg-sub);
}

.cf-ya-tiene .cf-enlace {
	margin-top: 4px;
}

.cf-ok {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: var(--pg-r-control);
	background: var(--pg-ok-weak);
	color: var(--pg-ok);
	font-size: var(--pg-letra-base);
	font-weight: 500;
}

.cf-ayuda {
	margin: -8px 0 16px;
	color: var(--pg-sub);
	font-size: var(--pg-letra-rotulo);
}

.cf-ayuda[data-cf-estado="libre"] {
	color: var(--pg-ok);
}

.cf-ayuda[data-cf-estado="tomado"] {
	color: var(--pg-mal);
}

/* ---------- El WhatsApp y el link: un solo campo con su parte fija a la izquierda ---------- */

.cf-telefono,
.cf-link {
	display: flex;
	align-items: center;
	height: var(--pg-control);
	border: var(--pg-borde-control) solid var(--pg-border);
	border-radius: var(--pg-r-control);
	background: var(--pg-panel);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.cf-telefono:focus-within,
.cf-link:focus-within {
	border-color: var(--pg-brand);
	box-shadow: 0 0 0 3px var(--pg-brand-weak);
}

.agdt-pagina .pg-tarjeta :is(.cf-telefono, .cf-link) :is(input, select),
.agdt-pagina .pg-tarjeta :is(.cf-telefono, .cf-link) :is(input, select):focus {
	height: 100%;
	margin: 0 !important;
	border: 0;
	background: none;
	box-shadow: none;
}

.agdt-pagina .pg-tarjeta .cf-telefono select {
	flex: none;
	width: auto;
	padding: 0 10px 0 14px;
	border-right: 1px solid var(--pg-hair);
	border-radius: var(--pg-r-control) 0 0 var(--pg-r-control);
	cursor: pointer;
}

.agdt-pagina .pg-tarjeta .cf-telefono input {
	flex: 1 1 0;
	min-width: 0;
	padding: 0 14px;
}

.cf-link-fijo {
	flex: none;
	padding-left: 16px;
	color: var(--pg-sub);
	font-size: var(--pg-letra-campo);
}

.agdt-pagina .pg-tarjeta .cf-link input {
	flex: 1 1 0;
	min-width: 0;
	padding: 0 14px 0 1px;
}

.cf-codigo {
	margin: 0 0 16px;
	padding: 16px 16px 8px;
	border-radius: var(--pg-r-control);
	background: var(--pg-lienzo);
}

.cf-codigo input {
	letter-spacing: .3em;
}

/* En el teléfono no hay tarjeta blanca: el recuadro del código era del color del fondo, no se veía, y sólo dejaba la
   sangría (el código, su rótulo y «Mandármelo de nuevo» más angostos que el resto). El dueño, 29-10-2026: «no tienen el
   mismo ancho… eso se ve feo». */
@media (max-width: 599px) {
	.cf-codigo {
		padding: 0;
		background: none;
	}
}

/* ---------- El logo (29-10-2026): la misma caja que la foto de la lista de precios; con el logo, se ve adentro ---------- */
.cf-logo {
	margin: 0 0 16px;
}

.cf-logo .cf-rotulo {
	display: block;
	margin: 0 0 6px;
	color: var(--pg-ink-2);
	font-size: var(--pg-letra-rotulo);
	font-weight: 500;
}

.cf-logo .cf-subir {
	margin-bottom: 4px;
}

.cf-subir-icono.is-con-logo {
	overflow: hidden;
	padding: 0;
	background: var(--pg-panel);
}

.cf-subir-icono.is-con-logo svg {
	display: none;
}

.cf-subir-icono img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---------- Los servicios: subir la lista, mientras se lee y la revisión ---------- */

.agdt-pagina .pg-tarjeta .cf-subir {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: var(--pg-boton);
	margin: 0 0 20px;
	padding: 12px 16px;
	border: var(--pg-borde-control) dashed var(--pg-brand);
	border-radius: var(--pg-r-control);
	background: var(--pg-panel);
	color: var(--pg-text);
	cursor: pointer;
}

.cf-subir:focus-within {
	box-shadow: 0 0 0 3px var(--pg-brand-weak);
}

.cf-subir input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.cf-subir-icono {
	display: grid;
	flex: none;
	place-items: center;
	width: var(--pg-toque);
	height: var(--pg-toque);
	border-radius: var(--pg-r-redondo);
	background: var(--pg-lienzo);
	color: var(--pg-brand-ink);
}

.cf-subir-texto {
	min-width: 0;
}

.cf-subir-texto b {
	display: block;
	color: var(--pg-text);
	font-size: var(--pg-letra-campo);
	font-weight: 600;
}

.cf-subir-texto span {
	display: block;
	color: var(--pg-sub);
	font-size: var(--pg-letra-rotulo);
	overflow-wrap: anywhere;
}

.cf-leyendo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 32px 0;
	text-align: center;
}

.cf-leyendo p {
	margin: 0;
}

.cf-leyendo b {
	display: block;
	color: var(--pg-text);
	font-family: var(--pg-familia-titulo);
	font-size: var(--pg-letra-bajada);
	font-weight: var(--pg-peso-titulo);
}

.cf-leyendo span:not(.cf-girando) {
	color: var(--pg-sub);
	font-size: var(--pg-letra-base);
}

.cf-girando {
	display: block;
	width: var(--pg-toque);
	height: var(--pg-toque);
	border: 3px solid var(--pg-hair);
	border-top-color: var(--pg-brand);
	border-radius: var(--pg-r-redondo);
	animation: cf-girar .9s linear infinite;
}

@keyframes cf-girar {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.cf-girando {
		animation-duration: 2.4s;
	}
}

.cf-servicios {
	display: grid;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.cf-servicio {
	padding: 14px 0;
	border-top: 1px solid var(--pg-hair);
}

.cf-servicio:last-child {
	border-bottom: 1px solid var(--pg-hair);
}

.agdt-pagina .pg-tarjeta .cf-servicio label {
	margin: 0;
}

.cf-servicio label > span {
	display: block;
	margin-bottom: 4px;
	color: var(--pg-sub);
	font-size: var(--pg-letra-rotulo);
}

.cf-servicio-datos {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) var(--pg-control);
	align-items: end;
	gap: 10px;
	margin-top: 10px;
}

.cf-servicio [data-cf-estimado] {
	border-color: var(--pg-brand);
}

.agdt-pagina .cf-sacar {
	display: grid;
	place-items: center;
	width: var(--pg-control);
	height: var(--pg-control);
	padding: 0;
	border: 0;
	border-radius: var(--pg-r-control);
	background: none;
	color: var(--pg-sub);
	cursor: pointer;
}

.agdt-pagina .cf-sacar:hover {
	background: var(--pg-mal-weak);
	color: var(--pg-mal);
}

/* ---------- Los horarios: un renglón por día ---------- */

.cf-dias {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.cf-dia {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	min-height: var(--pg-control);
	padding: 6px 0;
	border-bottom: 1px solid var(--pg-hair);
}

.agdt-pagina .pg-tarjeta .cf-dia-nombre {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--pg-toque);
	margin: 0;
	color: var(--pg-text);
	font-size: var(--pg-letra-campo);
	cursor: pointer;
}

.cf-dia-nombre input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--pg-brand);
}

.cf-dia-horas {
	display: flex;
	gap: 6px;
}

.agdt-pagina .cf .pg-tarjeta .cf-dia-horas select {
	width: 92px;
	padding: 0 26px 0 12px;
	background-position: right 8px center;
}

.cf-dia-cerrado {
	color: var(--pg-sub);
	font-size: var(--pg-letra-rotulo);
}

.cf-dia:has([data-cf-d="activo"]:checked) .cf-dia-cerrado,
.cf-dia:not(:has([data-cf-d="activo"]:checked)) .cf-dia-horas {
	display: none;
}

/* Los descansos de cada día (29-10-2026), como en el panel: debajo del horario del día, «Agregar descanso» y cada descanso
   en su renglón, con sus horas debajo de las del día; a la izquierda la cruz para sacarlo y «Descanso». Sólo con el día
   marcado. */
.cf-descansos,
.cf-agregar-descanso {
	grid-column: 1 / -1;
}

.cf-dia:not(:has([data-cf-d="activo"]:checked)) :is(.cf-descansos, .cf-agregar-descanso) {
	display: none;
}

.cf-descanso {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
}

.cf-descanso-nombre {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	padding-left: 44px;
	color: var(--pg-sub);
	font-size: var(--pg-letra-rotulo);
}

/* La cruz a la izquierda, debajo de la tilde del día, y «Descanso» al lado (en 360 no entraban los dos a la derecha). */
.agdt-pagina .cf-descanso .cf-sacar {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	width: var(--pg-toque);
	margin-left: -11px;
}

.cf-descanso .cf-dia-horas {
	grid-column: 2;
	grid-row: 1;
}

.agdt-pagina .pg-tarjeta .cf-agregar-descanso {
	justify-self: start;
	margin: 0 0 4px 28px;
}

/* ---------- ¿Quién atiende? (29-10-2026) ---------- */

/* Las dos opciones, una debajo de la otra en todas las medidas (lado a lado en la tarjeta de 440 no entraban en un renglón).
   La elegida, con el borde y el fondo claro de la marca (como los días del formulario de reserva). */
.cf-opciones {
	display: grid;
	gap: 10px;
	margin: 20px 0 16px;
}

.agdt-pagina .cf-opcion {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: var(--pg-boton);
	margin: 0;
	padding: 12px 16px;
	border: var(--pg-borde-control) solid var(--pg-border);
	border-radius: var(--pg-r-control);
	background: var(--pg-panel);
	color: var(--pg-text);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.agdt-pagina .cf-opcion:hover {
	border-color: var(--pg-sub);
}

.agdt-pagina .cf-opcion[aria-pressed="true"] {
	border-color: var(--pg-brand);
	background: var(--pg-brand-weak);
}

.cf-opcion-icono {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: calc(var(--pg-r-control) - 4px);
	background: var(--pg-panel);
	box-shadow: var(--pg-shadow);
}

.cf-opcion-texto {
	min-width: 0;
	line-height: 1.3;
}

.cf-opcion-texto b {
	display: block;
	font-size: var(--pg-letra-campo);
	font-weight: 600;
}

.cf-opcion-texto span {
	display: block;
	color: var(--pg-sub);
	font-size: var(--pg-letra-rotulo);
}

.cf-equipo > .cf-bajada {
	margin-top: 0;
}

/* Cada persona, como cada servicio de la revisión: nombre arriba; el WhatsApp y «quitar» en un renglón. Vos primero. */
.cf-personas {
	display: grid;
	margin: 0 0 4px;
	padding: 0;
	list-style: none;
}

.cf-persona {
	padding: 14px 0;
	border-top: 1px solid var(--pg-hair);
}

.cf-persona:last-child {
	border-bottom: 1px solid var(--pg-hair);
}

.agdt-pagina .pg-tarjeta .cf-persona label {
	margin: 0;
}

.cf-persona label > span {
	display: block;
	margin-bottom: 4px;
	color: var(--pg-sub);
	font-size: var(--pg-letra-rotulo);
}

.cf-persona-datos {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--pg-control);
	align-items: end;
	gap: 10px;
	margin-top: 10px;
}

/* La foto de cada persona (29-10-2026), opcional: un círculo del alto del campo, a la izquierda del nombre, con su borde
   punteado como «Subir tu logo». Con foto, la foto lo llena; se toca otra vez para cambiarla. */
.cf-persona-cabeza {
	display: grid;
	grid-template-columns: var(--pg-control) minmax(0, 1fr);
	align-items: end;
	gap: 12px;
}

.agdt-pagina .pg-tarjeta .cf-persona label.cf-foto {
	position: relative;
	display: block;
	width: var(--pg-control);
	height: var(--pg-control);
	margin: 0;
	cursor: pointer;
}

.cf-foto input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Más fuerte que «.cf-persona label > span» (el rótulo de cada campo de la persona). */
.cf-persona .cf-foto > .cf-foto-vista {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	border: var(--pg-borde-control) dashed var(--pg-brand);
	border-radius: var(--pg-r-redondo);
	background: var(--pg-panel);
	color: var(--pg-brand-ink);
}

.cf-foto:hover .cf-foto-vista {
	background: var(--pg-lienzo);
}

.cf-foto:focus-within .cf-foto-vista {
	box-shadow: 0 0 0 3px var(--pg-brand-weak);
}

.cf-foto-vista.is-con-foto {
	border-style: solid;
	border-color: var(--pg-border);
}

.cf-foto-vista.is-con-foto svg {
	display: none;
}

.cf-foto-vista img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ¿Dónde atendés? (29-10-2026): las mismas dos opciones que «¿Quién atiende?»; la dirección debajo y después los horarios. */
.cf-direccion {
	margin: 0 0 24px;
}

[data-cf-paso="horarios"] > .cf-subtitulo {
	margin: 8px 0 4px;
}

/* La lista de Google (la pone Google al final de la página, fuera de la tarjeta): con la letra de la página y cada sugerencia
   de 44 para el dedo. */
.agdt-pagina .pac-container {
	margin-top: 4px;
	border: var(--pg-borde-control) solid var(--pg-border);
	border-radius: var(--pg-r-control);
	box-shadow: var(--pg-shadow-flota);
	font-family: var(--pg-familia);
}

.agdt-pagina .pac-item {
	display: flex;
	align-items: center;
	min-height: var(--pg-toque);
	padding: 0 14px;
	color: var(--pg-sub);
	font-size: var(--pg-letra-rotulo);
	line-height: 1.3;
	white-space: normal;
	cursor: pointer;
}

.agdt-pagina .pac-item-query {
	color: var(--pg-text);
	font-size: var(--pg-letra-base);
}

.agdt-pagina .pac-icon {
	display: none;
}

.cf-persona-yo {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cf-avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--pg-r-redondo);
	background: var(--pg-brand-weak);
	color: var(--pg-brand-ink);
	font-weight: 600;
}

.cf-persona-yo-nombre {
	min-width: 0;
	color: var(--pg-text);
	font-size: var(--pg-letra-campo);
	font-weight: 500;
	overflow-wrap: anywhere;
}

.cf-chip {
	flex: none;
	margin-left: auto;
	padding: 2px 10px;
	border-radius: var(--pg-r-boton);
	background: var(--pg-lienzo);
	color: var(--pg-sub);
	font-size: var(--pg-letra-rotulo);
	font-weight: 500;
}

/* ¿Quién hace cada servicio? Cada servicio con sus personas en píldoras de 44 que se prenden y se apagan. */
.cf-quienes-caja {
	margin-top: 24px;
}

.cf-subtitulo {
	margin: 0 0 4px;
	color: var(--pg-text);
	font-family: var(--pg-familia-titulo);
	font-size: var(--pg-letra-campo);
	font-weight: var(--pg-peso-titulo);
}

.cf-quienes {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.cf-quien {
	padding: 12px 0;
	border-bottom: 1px solid var(--pg-hair);
}

.cf-quien-servicio {
	margin: 0 0 8px;
	color: var(--pg-text);
	font-size: var(--pg-letra-base);
	font-weight: 500;
	overflow-wrap: anywhere;
}

.cf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.agdt-pagina .cf-chip-boton {
	min-height: var(--pg-toque);
	margin: 0;
	padding: 0 16px;
	border: var(--pg-borde-control) solid var(--pg-border);
	border-radius: var(--pg-r-boton);
	background: var(--pg-panel);
	color: var(--pg-sub);
	font-family: inherit;
	font-size: var(--pg-letra-base);
	font-weight: 500;
	overflow-wrap: anywhere;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.agdt-pagina .cf-chip-boton[aria-pressed="true"] {
	border-color: var(--pg-brand);
	background: var(--pg-brand-weak);
	color: var(--pg-brand-ink);
}

/* ---------- «Continuar con Google» en la cuenta (29-10-2026) ---------- */

.agdt-pagina .cf-boton-google {
	gap: 10px;
	margin-top: 0;
}

.cf-google-g {
	flex: none;
}

/* «o con tu correo»: una línea de pelo con la frase en el medio (la misma del ingreso). */
.cf-o {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
	color: var(--pg-sub);
	font-size: var(--pg-letra-rotulo);
}

.cf-o::before,
.cf-o::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--pg-hair);
}

.cf-google-ok {
	align-items: flex-start;
	color: var(--pg-text);
	background: var(--pg-lienzo);
	font-weight: 400;
}

.cf-google-ok .cf-google-g {
	margin-top: 2px;
}

.cf-google-ok p {
	min-width: 0;
	margin: 0;
}

.cf-google-ok b,
.cf-google-ok p > span {
	display: block;
	overflow-wrap: anywhere;
}

.cf-google-ok b {
	font-weight: 600;
}

.cf-google-ok p > span {
	color: var(--pg-sub);
}

.cf-google-ok .cf-enlace {
	margin: 2px 0 -8px -4px;
}

/* ---------- La cuenta y el final ---------- */

.cf-legal {
	margin: 12px 0 0;
	color: var(--pg-sub);
	font-size: var(--pg-letra-rotulo);
	text-align: center;
}

.cf-legal a,
.cf-link-final {
	position: relative;
	color: var(--pg-brand-ink);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}

/* El dibujo es texto; el área del dedo la pone el borde invisible (INTERFAZ.md, data-toque). */
.cf-legal a::after,
.cf-link-final::after {
	content: '';
	position: absolute;
	inset: -12px -4px;
}

.agendate-exito .cf-boton-palido {
	margin-top: 12px;
}

/* ---------- «Tu agenda»: el resumen que se va llenando (sólo en escritorio) ---------- */

.cf-resumen {
	display: none;
}

.cf-resumen-titulo {
	margin: 0 0 16px;
	color: var(--pg-text);
	font-family: var(--pg-familia-titulo);
	font-size: var(--pg-letra-bajada);
	font-weight: var(--pg-peso-titulo);
}

.cf-resumen-lista {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cf-resumen-lista li {
	display: flex;
	align-items: center;
	gap: 16px;
}


.cf-resumen-icono {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: calc(var(--pg-r-control) - 4px);
	background: var(--pg-panel);
	box-shadow: var(--pg-shadow);
}

.cf-resumen-texto {
	min-width: 0;
	color: var(--pg-text);
	font-size: var(--pg-letra-campo);
	font-weight: 500;
	line-height: 1.4;
}

.cf-resumen-texto b {
	display: block;
	color: var(--pg-text);
	font-size: var(--pg-letra-campo);
	font-weight: 600;
}

.cf-resumen-texto span:empty {
	display: none;
}

.cf-resumen-texto span {
	display: block;
	margin-top: 2px;
	color: var(--pg-sub);
	font-size: var(--pg-letra-base);
	overflow-wrap: anywhere;
}

/* ---------- Escritorio: «Tu agenda» a la izquierda, debajo de la promesa ---------- */

@media (min-width: 1024px) {
	.cf-resumen {
		display: block;
	}

	/* «Tu agenda» va pegada a la promesa, no separada por un hueco (36 del marco + 28 dejaban 64). */
	.pg-dos.cf .pg-apoyo {
		margin-top: 40px;
		padding-top: 0;
	}

	.pg-dos.cf .pg-apoyo .pg-aclaracion {
		max-width: 400px;
		text-wrap: pretty;
	}
}