/* Formulario de Mascotas Perdidas — botones grandes y colores (v3.17.0) */

.pp-botones {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	margin: 6px 0 20px;
}
.pp-boton {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px 12px;
	border: 2px solid #d6e3e6;
	border-radius: 12px;
	background: #fff;
	color: #1E2E33;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .15s, background .15s, transform .1s;
	-webkit-tap-highlight-color: transparent;
}
.pp-boton:hover { border-color: #79C8D0; }
.pp-boton:active { transform: scale(.98); }
.pp-boton.is-activo {
	border-color: #4AA5AD;
	background: #e6f5f7;
	box-shadow: 0 0 0 3px rgba(121,200,208,.25);
}
.pp-boton__ico { font-size: 26px; line-height: 1; }

/* El select sigue en el DOM (Listeo lo valida y guarda) pero no se ve. */
.pp-select-oculto { position: absolute !important; opacity: 0 !important; pointer-events: none !important; height: 0 !important; width: 0 !important; overflow: hidden !important; }

/* Casillas de color con su muestra */
.checkboxes.pp-colores label { display: inline-flex; align-items: center; gap: 8px; }
.pp-muestra {
	width: 16px; height: 16px; border-radius: 50%;
	border: 1px solid rgba(0,0,0,.18); flex: none;
}
.pp-muestra.pattern-atigrado {
	background: repeating-linear-gradient(45deg, #c48b3c 0 3px, #5a3a1a 3px 5px);
}
.pp-muestra.pattern-manchado {
	background:
		radial-gradient(circle at 30% 35%, #2b2b2b 0 3px, transparent 3.5px),
		radial-gradient(circle at 70% 65%, #7b4a2d 0 2.5px, transparent 3px),
		#f4f4f4;
}

/* «¿Dónde está el peludo ahora?» solo se ve al marcar «Encontrada» (v3.20.0).
   Por clase y con !important: Listeo repinta la sección y un display en línea
   se perdía. La transición suaviza la aparición. */
.pp-bloque-donde { transition: opacity .18s ease; }
.pp-bloque-donde.pp-bloque-donde--oculto { display: none !important; }
.pp-botones--donde .pp-boton__ico { font-size: 18px; }

/* ═══ Secciones que NO son de Mascotas Perdidas (v3.20.3) ═════════════════
 * Miguel (2026-08-19): el formulario preguntaba por FAQ, «Configuraciones del
 * Widget de Cupón» y «Mis Publicaciones». Son WIDGETS OPCIONALES DE LA FICHA
 * que Listeo ofrece a los negocios del Directorio (preguntas frecuentes, un
 * cupón de descuento, y un listado de las otras publicaciones del mismo autor).
 * En una mascota perdida no pintan nada: quien busca a su peludo no tiene FAQ
 * ni cupones. Se ocultan SOLO en este tipo de formulario; el Directorio los
 * conserva. La clase `type-mascotas-perdidas` la pone Listeo en .submit-page. */
.submit-page.type-mascotas-perdidas .add-listing-section.faq,
.submit-page.type-mascotas-perdidas .add-listing-section.my_listings_section,
.submit-page.type-mascotas-perdidas .add-listing-section.coupon,
.submit-page.type-mascotas-perdidas .add-listing-section.coupon_widget,
.submit-page.type-mascotas-perdidas .add-listing-section[class*="coupon"],
.submit-page.type-mascotas-perdidas .add-listing-section.custom-term-features:empty {
	display: none !important;
}

/* ═══ La FOTO o FLYER, con el peso que merece (v3.20.3) ═══════════════════
 * Miguel: «no había visto la opción para subir flyer o foto, dale más
 * relevancia; no la noté». Es el campo que MÁS decide si el peludo se
 * reconoce, y estaba como un campo más de la lista. Se le da marco propio,
 * fondo teal suave y una zona de subida grande y evidente. */
.submit-page.type-mascotas-perdidas .form-field-_listing_logo-container {
	background: #E8F4F6;
	border: 1.5px dashed #79C8D0;
	border-radius: 16px;
	/* !important porque el tema hijo pone `.dashboard-content [class*="col-"]
	   { padding: 0 !important }` en movil y la tarjeta quedaba sin aire lateral */
	padding: 16px 16px 18px !important;
	margin: 6px 0 18px;
}
.submit-page.type-mascotas-perdidas .form-field-_listing_logo-container > label {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #12363A !important;
	display: block;
	margin-bottom: 2px;
}
/* Una línea que explica por qué importa y que el flyer vale tal cual */
.submit-page.type-mascotas-perdidas .form-field-_listing_logo-container > label::after {
	content: 'Es lo primero que mira quien lo ve por la calle. Si ya tienes el cartel de «se busca», sirve tal cual 🖼️';
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 400;
	color: #1E5D64;
	line-height: 1.4;
}
.submit-page.type-mascotas-perdidas .form-field-_listing_logo-container .dropzone,
.submit-page.type-mascotas-perdidas .form-field-_listing_logo-container .dz-default {
	background: #fff !important;
	border: 1.5px dashed #4AA5AD !important;
	border-radius: 12px !important;
	min-height: 120px !important;
}

/* Botonera de TAMAÑO: tres botones en fila, como Especie (v3.20.3) */
.pp-botones--tamano { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-botones--tamano .pp-boton { flex: 1 1 0; min-width: 92px; }
.pp-botones--tamano .pp-boton__ico { font-size: 20px; }

/* Botonera de SEXO: tres botones en fila, como Tamaño (v3.20.5) */
.pp-botones--sexo { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-botones--sexo .pp-boton { flex: 1 1 0; min-width: 92px; }
.pp-botones--sexo .pp-boton__ico { font-size: 20px; }

/* ═══ El PIN del campo de dirección, DENTRO del campo (v3.20.5) ═══════════
 * Miguel: «el ícono de ubicación está mal ubicado, por fuera del contenedor».
 * Listeo lo ancla en absoluto con un top fijo pensado para su formulario de
 * escritorio; con las pistas «escribe y haz clic aquí» debajo del input, el
 * wrapper crece y el pin caía entre el campo y la pista, pegado al borde.
 * Se ancla al centro de la PRIMERA fila (el input mide ~51px) y separado del
 * borde derecho. Aplica a los formularios de listado, no solo a MP: el campo
 * es el mismo. */
.submit-page #_address_wrapper > a {
	position: absolute;
	top: 25px !important;
	right: 14px !important;
	transform: translateY(-50%) !important;
}
.submit-page #_address_wrapper > a i.fa-map-marker { position: static !important; }

/* ═══ Tooltips sin cortarse (v3.20.5) ═════════════════════════════════════
 * Miguel: «los tooltip se están cortando desde el texto». El tema centra el
 * globo sobre el icono con translate(-100px) y ancho fijo de 200px: junto al
 * borde izquierdo de la pantalla, la mitad del texto quedaba fuera. Se ancla
 * al icono por la izquierda, encima, y con ancho que respeta el viewport. */
.submit-page .tip { position: relative; }
.submit-page .tip .tip-content {
	left: 0 !important;
	right: auto !important;
	top: auto !important;
	bottom: calc(100% + 8px) !important;
	/* La variable permite que el JS recoloque el globo: un estilo en línea
	   normal PIERDE contra este !important (medido), una variable no. */
	transform: translateX(var(--pp-tip-x, -10px)) !important;
	width: max-content !important;
	max-width: min(280px, calc(100vw - 48px)) !important;
	white-space: normal !important;
	box-sizing: border-box;
}

/* ═══ «¿Qué es?»: los tres en UNA fila en escritorio (v3.20.6) ════════════
 * Miguel: «que el chip Otro esté al lado, logrando una sola fila en desktop».
 * La rejilla usaba `auto-fit` con mínimo de 140px: en el ancho del formulario
 * solo caben dos por fila y «Otro» bajaba solo. Con tres columnas fijas caben
 * los tres. En móvil se deja que la rejilla decida (dos y uno, que ahí es lo
 * cómodo para el pulgar). */
@media (min-width: 768px) {
	.submit-page.type-mascotas-perdidas .pp-botones--especie {
		grid-template-columns: repeat(3, 1fr);
	}
}