/**
 * Quick wins del formulario "Agregar Publicación" — estilos.
 * Solo se encola en la página del formulario (crear/editar).
 */

/* Aviso bajo el título de "Precios y Servicios Reservables" (QW1) */
.pp-fp-aviso {
	margin: 6px 0 0;
	padding: 10px 14px;
	background: #fff8e6;
	border: 1px solid #f2dfa8;
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #6b5b1e;
}

/* Guía de la Galería */
.pp-fp-guia-gal {
	margin: 6px 0 10px;
	font-size: 13.5px;
	color: #5a6a72;
}

/* Ocultar sin sacar del DOM (los inputs siguen funcionando por debajo) */
.pp-fp-oculto {
	display: none !important;
}

/* Plegable "Opciones avanzadas de ubicación" (QW3) */
.pp-fp-avanzado {
	margin: 4px 0 10px;
}
.pp-fp-avanzado__btn {
	background: none;
	border: 0;
	padding: 4px 0;
	font-size: 13.5px;
	font-weight: 600;
	color: #4a5560;
	cursor: pointer;
}
.pp-fp-avanzado__btn:hover {
	color: #2a343c;
}
.pp-fp-avanzado__btn .fa {
	margin-right: 4px;
}

/* ---------- M1: checklist de calidad (último paso) ---------- */
#pp-fp-checklist {
	background: #f6fbfa;
	border: 1px solid #d9ebe8;
	border-radius: 14px;
	padding: 18px 20px;
	margin: 0 0 22px;
}
#pp-fp-checklist h4 {
	margin: 0 0 10px;
	font-size: 17px;
}
#pp-fp-checklist ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#pp-fp-checklist li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: 14px;
	color: #2a343c;
}
.pp-fp-chk__ico {
	flex: 0 0 auto;
}
.pp-fp-chk--falta {
	font-weight: 600;
}
.pp-fp-chk__ir {
	margin-left: auto;
	background: #fff;
	border: 1px solid #cfdcd9;
	border-radius: 999px;
	padding: 4px 14px;
	font-size: 12.5px;
	font-weight: 600;
	color: #2a343c;
	cursor: pointer;
	flex: 0 0 auto;
}
.pp-fp-chk__ir:hover {
	background: #eef6f4;
}
.pp-fp-chk__nota {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: #6a7880;
}

/* ---------- M2: mini-asistente "tu primer servicio" ---------- */
#pp-fp-primer {
	background: #f2f9f8;
	border: 1px dashed #9fcfc8;
	border-radius: 14px;
	padding: 18px 20px;
	margin: 0 0 18px;
}
#pp-fp-primer h4 {
	margin: 0 0 12px;
	font-size: 16px;
}
.pp-fp-primer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin: 0 0 14px;
}
.pp-fp-primer__grid label {
	font-size: 13px;
	font-weight: 600;
	color: #2a343c;
}
.pp-fp-primer__grid input,
.pp-fp-primer__grid select {
	width: 100%;
	margin-top: 4px;
}
.pp-fp-primer__crear {
	background: var(--lbp-popup-sidebar, #79c8d0);
	border: 0;
	border-radius: 10px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}
.pp-fp-primer__crear:hover {
	filter: brightness(0.94);
}
.pp-fp-primer__no {
	background: none;
	border: 0;
	font-size: 13px;
	color: #6a7880;
	cursor: pointer;
	text-decoration: underline;
}
.pp-fp-primer__err {
	margin: 10px 0 0;
	font-size: 13px;
	color: #b3261e;
}

/* Resaltado breve de lo recién creado por el mini-asistente */
tr.pp-fp-nuevo > td {
	animation: ppFpNuevo 2.4s ease-out;
}
@keyframes ppFpNuevo {
	0% { background: #dff3ef; }
	100% { background: transparent; }
}

/* ---------- M3: campo de dirección faltante (resaltado amable) ---------- */
.pp-fp-campo-falta {
	animation: ppFpFalta 3.2s ease-out;
	border-radius: 10px;
}
@keyframes ppFpFalta {
	0%, 60% { background: #fff3f2; box-shadow: 0 0 0 2px #f0b4ae inset; }
	100% { background: transparent; box-shadow: none; }
}

/* ---------- E2: banner del chat en la selección de tipo ---------- */
#pp-fp-banner-chat {
	background: #eef7f6;
	border: 1px solid #cfe8e4;
	border-radius: 14px;
	padding: 14px 18px;
	margin: 0 0 18px;
	font-size: 14.5px;
	color: #2a343c;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.pp-fp-banner-chat__ir {
	margin-left: auto;
	background: var(--lbp-popup-sidebar, #79c8d0);
	border: 0;
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	flex: 0 0 auto;
}
.pp-fp-banner-chat__ir:hover {
	filter: brightness(0.94);
}

/* ---------- E1: barra de borrador local ---------- */
#pp-fp-borrador {
	background: #fff8e6;
	border: 1px solid #f2dfa8;
	border-radius: 12px;
	padding: 12px 16px;
	margin: 0 0 16px;
	font-size: 14px;
	color: #6b5b1e;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.pp-fp-borrador__si {
	margin-left: auto;
	background: var(--lbp-popup-sidebar, #79c8d0);
	border: 0;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	flex: 0 0 auto;
}
.pp-fp-borrador__no {
	background: none;
	border: 0;
	font-size: 13px;
	color: #8a7a3a;
	cursor: pointer;
	text-decoration: underline;
	flex: 0 0 auto;
}

/* ---------- Móvil: todo lo del formulario en pantallas chicas ---------- */
@media (max-width: 767px) {
	#pp-fp-checklist {
		padding: 14px;
	}
	/* Miguel (2026-08-19): «no se ve correcto la Revisión final, alinea los
	   elementos». El culpable era `flex-wrap`: el botón «Completar» bajaba de
	   línea SOLO en los ítems de texto largo, así que unos quedaban a la
	   derecha y otros debajo. Con grid van todos igual: icono, texto que
	   envuelve, y el botón SIEMPRE en su propia línea, alineado con el texto. */
	#pp-fp-checklist li {
		display: grid;
		grid-template-columns: 20px 1fr;
		column-gap: 8px;
		row-gap: 6px;
		align-items: start;
		padding: 8px 0;
	}
	.pp-fp-chk__ico { line-height: 1.35; }
	.pp-fp-chk__ir {
		grid-column: 2;      /* bajo el texto, nunca pegado al icono */
		justify-self: start;
		margin: 0;
	}
	#pp-fp-primer {
		padding: 14px;
	}
	.pp-fp-primer__grid {
		grid-template-columns: 1fr; /* una columna: campos cómodos al dedo */
	}
	.pp-fp-primer__crear {
		width: 100%;
		margin-bottom: 8px;
	}
	.pp-fp-primer__no {
		width: 100%;
		text-align: center;
	}
	#pp-fp-banner-chat,
	#pp-fp-borrador {
		font-size: 13.5px;
	}
	.pp-fp-banner-chat__ir,
	.pp-fp-borrador__si {
		margin-left: 0;
		width: 100%;
		text-align: center;
	}
	.pp-fp-borrador__no {
		width: 100%;
		text-align: center;
	}
}

/* Revisión final en ESCRITORIO: el texto puede envolver sin descolocar el
   botón, que se queda arriba a la derecha alineado con la primera línea. */
@media (min-width: 768px) {
	#pp-fp-checklist li { align-items: flex-start; }
	#pp-fp-checklist li .pp-fp-chk__ico { line-height: 1.45; }
	.pp-fp-chk__ir { align-self: flex-start; }
}

/* Resalte del campo al que lleva «Completar» (v3.20.6): un pulso corto, lo
   justo para que el ojo lo encuentre después del desplazamiento. */
.pp-fp-resalte {
	animation: pp-fp-pulso 1.6s ease;
	border-radius: 12px;
}
@keyframes pp-fp-pulso {
	0%   { box-shadow: 0 0 0 0 rgba(121,200,208,.0); background: transparent; }
	15%  { box-shadow: 0 0 0 4px rgba(121,200,208,.45); background: rgba(232,244,246,.75); }
	70%  { box-shadow: 0 0 0 4px rgba(121,200,208,.35); background: rgba(232,244,246,.55); }
	100% { box-shadow: 0 0 0 0 rgba(121,200,208,0); background: transparent; }
}
/* Campos avanzados de ubicación: ocultos SIEMPRE (sin plegable) en MP */
.pp-fp-oculto--siempre { display: none !important; }