/* ============================================================
   Gecko Studio · Estados de inmueble (Reservado/Vendido/…)
   Cinta diagonal en la esquina de la tarjeta y la ficha.
   Se pinta a partir de la meta _gecko_estado (ver gecko-estados.php).
   ============================================================ */

/* El contenedor de la tarjeta/imagen necesita ser el ancla de posición */
.property-grid-item,
.listing-thumb,
.item-wrap,
.property-labels-wrap,
.property-detail-slider-wrap,
.slider-wrapper-outer {
	position: relative;
}

/* Marco que recorta la cinta al llegar a la esquina */
.gecko-ribbon-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 150px;
	overflow: hidden;
	z-index: 12;
	pointer-events: none;
}

/* La cinta en sí, girada 45º sobre la esquina superior izquierda */
.gecko-ribbon {
	position: absolute;
	display: block;
	width: 220px;
	top: 30px;
	left: -58px;
	padding: 7px 0;
	transform: rotate(-45deg);
	text-align: center;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .4px;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
}

/* Colores por estado */
.gecko-ribbon.gecko-estado-no-disponible { background: #6b7280; }  /* gris  */
.gecko-ribbon.gecko-estado-reservado     { background: #d97706; }  /* ámbar */
.gecko-ribbon.gecko-estado-alquilado     { background: #2563eb; }  /* azul  */
.gecko-ribbon.gecko-estado-vendido       { background: #dc2626; }  /* rojo  */

/* En la ficha individual la cinta puede ser algo mayor */
.single-property .gecko-ribbon-wrap { width: 170px; height: 170px; }
.single-property .gecko-ribbon { top: 34px; font-size: 13px; }

/* ---- Metabox del editor (afinado en un clic) ---- */
.gecko-estado-box .gecko-estado-actual { font-weight: 600; margin: 0 0 10px; }
.gecko-estado-box .gecko-badge {
	display: inline-block; padding: 2px 8px; border-radius: 3px;
	color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
}
.gecko-estado-box .gecko-estado-no-disponible { background: #6b7280; }
.gecko-estado-box .gecko-estado-reservado     { background: #d97706; }
.gecko-estado-box .gecko-estado-alquilado     { background: #2563eb; }
.gecko-estado-box .gecko-estado-vendido       { background: #dc2626; }
.gecko-estado-box .gecko-estado-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Botones de selección: hover azul con letra blanca, y el seleccionado resaltado.
   Nota: solo :hover (no :focus) para que un botón desmarcado con el foco puesto
   no se quede azul y parezca seleccionado. El ✓ es el indicador de selección. */
.gecko-estado-box .gecko-opt:hover {
	background: #2563eb !important;
	border-color: #1d4ed8 !important;
	color: #fff !important;
	box-shadow: none;
}
.gecko-estado-box .gecko-opt.gecko-on {
	background: #2563eb !important;
	border-color: #1d4ed8 !important;
	color: #fff !important;
	font-weight: 600;
	box-shadow: none;
}
.gecko-estado-box .gecko-opt.gecko-on::before { content: "\2713 "; } /* ✓ */

.gecko-estado-box .gecko-guardar-wrap { margin-top: 12px; }
.gecko-estado-box .gecko-help { color: #646970; font-size: 12px; margin-top: 10px; }