/**
 * Cinta de estado y fecha del aviso (Fase 1).
 *
 * Se pinta dentro del título de la tarjeta, así que todo va en línea y con
 * tipos pequeños: compite con el nombre del peludo y no debe ganarle.
 */

.pp-mp-cinta {
	display: inline-block;
	vertical-align: middle;
	margin: 0 6px 2px 0;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .02em;
	white-space: nowrap;
	color: #fff;
}

/**
 * 🔴 EL TEXTO DE LA CINTA SALÍA GRIS SOBRE EL COLOR, ILEGIBLE.
 *
 * Medido: el tema declara `#titlebar.listing-titlebar span { color: #888 }`.
 * Es un selector con ID, así que gana por especificidad a `.pp-mp-cinta` por
 * mucho que esta declare el blanco. Se repite aquí con la especificidad
 * suficiente, más `!important` para el caso de la ficha, donde el tema añade
 * todavía otra capa según la cabecera (`.parallax #titlebar span`).
 */
#titlebar .pp-mp-cinta,
#titlebar.listing-titlebar span.pp-mp-cinta,
.parallax #titlebar span.pp-mp-cinta,
.listing-title-badges-nl .pp-mp-cinta,
.pp-mp-estado-ficha .pp-mp-cinta {
	color: #fff !important;
}

/* Los mismos dos colores del marcador del mapa, para que la tarjeta y el
   mapa cuenten lo mismo: rojo se busca, verde encontrada. */
.pp-mp-cinta--perdida    { background: #d32f2f; }
.pp-mp-cinta--encontrada { background: #43a047; }

/* «Ya está en casa» es una buena noticia y se merece destacar sobre las otras
   dos, no confundirse con ellas: verde oscuro y su casita. */
.pp-mp-cinta--casa {
	background: #1b5e20;
	box-shadow: 0 0 0 2px rgba(27, 94, 32, .18);
}

.pp-mp-cuando {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 500;
	color: #7c8a94;
	white-space: nowrap;
	cursor: help; /* el título lleva la fecha exacta */
}

/* --- La cinta en la tarjeta: pequeña y al lado del botón «Ver» ---
 *
 * Vive dentro de `.details-sidebar-col-nl`, que el tema ya maqueta en flex con
 * `gap`, así que solo hay que darle el tamaño: el sitio se lo da el contenedor.
 * Se le quita el ancho automático para que nunca empuje al botón a otra línea. */
/* Misma altura y mismo aire que el botón «Ver» (Miguel, 2026-08-20).
 * Medido del `::after` del tema: 13,5px de tipo, interlineado 13,5px y relleno
 * 9px/20px, o sea 31,5px de alto. Se copian esos valores para que las dos
 * piezas se lean como una pareja y no como una etiqueta pegada a un botón.
 * El tipo va un punto por debajo porque «Encontrada» es mucho más largo que
 * «Ver» y con 13,5px empujaría al botón a la línea siguiente. */
.pp-mp-cinta--tarjeta {
	margin: 0;
	padding: 9px 16px;
	font-size: 12.5px;
	line-height: 13.5px;
	letter-spacing: 0;
	min-width: 78px;          /* lo que mide «Ver»: nunca más pequeña que él */
	text-align: center;
	align-self: center;
	flex: 0 1 auto;
	white-space: nowrap;
}

/* En pantallas estrechas manda que quepan las dos en su fila. */
@media (max-width: 400px) {
	.pp-mp-cinta--tarjeta {
		padding: 8px 12px;
		font-size: 11px;
		min-width: 0;
	}
}

/* En la vista de lista la columna crece a lo alto: la cinta se pega abajo,
   a la altura del botón, no flotando arriba. */
.listings-container:not(.new-grid-layout-nl) .pp-mp-cinta--tarjeta {
	align-self: flex-end;
}

/* En la ficha el bloque va suelto bajo el título, con algo más de aire. */
.pp-mp-estado-ficha {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}

.pp-mp-estado-ficha .pp-mp-cinta {
	margin: 0;
	font-size: 12px;
	padding: 5px 14px;
}

.pp-mp-estado-ficha .pp-mp-cuando {
	margin: 0;
	font-size: 13px;
}

/* Aviso ya resuelto: la ficha entera baja el tono para que se entienda de
   inmediato que esto ya no es una búsqueda activa. */
.pp-mp-resuelta-aviso {
	margin: 0 0 18px;
	padding: 14px 18px;
	border-radius: 10px;
	background: #eaf4ec;
	border: 1px solid #bcdcc4;
	color: #1b5e20;
	font-size: 14px;
	line-height: 1.5;
}

.pp-mp-resuelta-aviso strong {
	color: #14431a;
}

@media (max-width: 480px) {
	.pp-mp-cinta {
		font-size: 10px;
		padding: 2px 8px;
	}

	.pp-mp-cuando {
		font-size: 11px;
	}
}

/* --------------------------------------------------------------------------
 * Reportar abuso: en la barra lateral, discreto pero encontrable.
 *
 * Deliberadamente apagado: no compite con «Mascota Encontrada», que es la
 * acción que queremos que la gente pulse. Aquí se llega cuando algo va mal.
 * -------------------------------------------------------------------------- */

.pp-abuso {
	margin: 14px 0 30px;
	text-align: center;
}

.pp-abuso__abrir {
	background: none;
	border: 0;
	padding: 6px 10px;
	font-size: 13px;
	color: #8a949c;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pp-abuso__abrir:hover {
	color: #b32d2e;
}

.pp-abuso__panel {
	margin-top: 10px;
	padding: 16px;
	text-align: left;
	background: #fff;
	border: 1px solid #e4e7ea;
	border-radius: 10px;
}

.pp-abuso__titulo {
	margin: 0 0 10px;
	font-weight: 700;
	font-size: 14px;
	color: #3a4249;
}

/**
 * ⚠️ El motivo va AL LADO de su botón, no debajo.
 *
 * El tema pone los `input` en `display: block` (medido), así que cada radio se
 * llevaba su línea y el texto caía debajo: parecía una lista de casillas
 * sueltas sin relación con lo que decían. Con `flex` en la etiqueta y el radio
 * forzado a `inline-block`, cada opción vuelve a leerse como una sola cosa.
 */
.pp-abuso__motivos label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 9px;
	font-size: 13px;
	line-height: 1.4;
	color: #4a545c;
	cursor: pointer;
}

.pp-abuso__motivos input[type="radio"] {
	display: inline-block !important;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin: 1px 0 0 !important;
	float: none !important;
}

.pp-abuso__detalle {
	width: 100%;
	margin: 6px 0 10px;
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	border: 1px solid #dfe3e6;
	border-radius: 8px;
	resize: vertical;
}

.pp-abuso__acciones {
	display: flex;
	gap: 8px;
}

.pp-abuso__enviar,
.pp-abuso__cancelar {
	flex: 1;
	padding: 9px 12px;
	font-size: 13px;
	font-weight: 600;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.pp-abuso__enviar {
	background: #b32d2e;
	color: #fff;
}

.pp-abuso__enviar[disabled] {
	opacity: .6;
	cursor: default;
}

.pp-abuso__cancelar {
	background: #eef1f3;
	color: #5a646c;
}

.pp-abuso__respuesta {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.45;
}

.pp-abuso__respuesta.is-ok    { color: #2f7d32; }
.pp-abuso__respuesta.is-error { color: #b32d2e; }